přejít na obsah přejít na navigaci

Linux E X P R E S, KompoZer: Webová prezentace pro každého

KompoZer: Webová prezentace pro každého

kompozer.png

Využití internetu jako možnosti pro svou prezentaci je dnes již běžnou záležitostí. Nejjednodušší možností je vlastnit nějaké webové stránky a na nich světu sdělit své potřeby. A pokud ještě žádné nemáte, rozhodně čtěte dál – rádi vám poradíme, jak vytvořit web ve WYSIWYG editoru KompoZer.


Web bez znalosti programování

Možností, jak získat a provozovat webové stránky, je nespočet. Máte možnost využít mnoha nabídek specializovaných webů, kde si jednoduše vložíte svůj obsah a vyberete si některý z přednastavených vzhledů. Ale co když vás přepadne potřeba vytvořit si opravdu originální stránky, a to vlastními silami? Proč ne! Začnete studovat HTML, CSS a Javascript. Anebo také ne a využijete k tomu kvalitní WYSIWYG editor.

Výhodou takového editoru je, že nemusíte mít valné znalosti o HTML a ostatních kódech. Stačí mít představu, dostatek času a chuť učit se něco nového. Stránky v takovém editoru tvoříte obdobným způsobem jako prezentaci v OpenOffice.org Impressu nebo v Microsoft PowerPointu. Pojďme se dnes společně podívat na jeden takový editor – KompoZer.

Jak již jsem psal, je to WYSIWYG editor na vytváření webových stránek pocházející z dílny společnosti Mozilla. Tento editor je součástí repozitářů většiny linuxových distribucí, nebo ho můžete získat na stránkách české Mozilly.

Poprvé jsem tento editor používal ještě pod názvem NVU, ale vývoj tohoto projektu je již zastaven a nedoporučuji ho používat, jelikož se vyznačoval velkou nestabilitou, a to bez ohledu na systém, pod kterým běžel.

Česky snadno a rychle

Instalaci provedete běžným způsobem podle toho, jaký systém používáte, a tak se popisem instalace nebudeme více zabývat a můžeme přistoupit ke spuštění editoru. První věc, které si všimnete, je vzhled aplikace a absence češtiny.

Česká lokalizace není součástí základní instalace Česká lokalizace není součástí základní instalace

Potřebný jazykový balíček (přesněji řečeno rozšíření) získáte pro aktuální verzi na stránkách programu. Poté vyberte v horním panelu nabídky Tools | Add-ons a provedete instalaci rozšíření.

Jednoduše přehledný

Vzhled editoru je přehledně členěn do několika panelů. Zcela nahoře je umístěn klasický panel nabídky, pod ním základní nabídka nástrojů a nástroje pro práci s textem. V levé části editoru je okno pro nahrání vaší tvorby na web prostřednictvím FTP, které je po přepnutí možné použít jako strom stylů. Největší část aplikace je určena pro samotnou tvorbu budoucí webové stránky. Všechny prvky jsou uspořádány přehledně a funkčně.

Přehledná a funkční aplikace umožní snadné ovládání Přehledná a funkční aplikace umožní snadné ovládání

Než začnete vytvářet své první stránky, musíte ještě udělat jednu velice podstatnou věc. Udělejte si představu o tom, jak by měly vaše stránky vypadat, jaké by měly mít rozložení, to je pro začátek opravdu podstatné.

První kroky s editorem

Prvním krokem bude vložení tabulky s několika buňkami, a pokud budete tvořit své první stránky, tak tento krok nepodceňujte, může vám to ulehčit hodně práce.

Předpokládám, že článek bude určen převážně čtenářům, kteří ještě nikdy web nepsali a vložení tabulky jim usnadní spoustu práce. Budou se pak moci lépe orientovat, kde bude na stránce daný obsah a jak se bude chovat. Tabulka také usnadní další editaci. Zkušenější tvůrci část věnované tabulce vynechají a přejdou k dalším krokům.

Vložení tabulky stejně jako následná práce s ní je snadná činnost Vložení tabulky stejně jako následná práce s ní je snadná činnost

Vložení tabulky, úprava a nastavení buněk, barva pozadí a písma je otázkou libovolného nastavení, které vyberete v panelu nástrojů pod odkazem Tabulka. Pokud tento nástroj zvolíte, rozbalí se nabídka všech možných operací.

Obdobné operace jako s tabulkou můžete provádět s celou stránkou, a tak není problém vybrat například pozadí stránky. Úpravy stránky provádíte po kliknutí na nástroj Formát.

Volba vzhledu je pak jen na vás Volba vzhledu je pak jen na vás

Naprosto jednoduchým způsobem tak do své budoucí webové prezentace vložíte obrázky, text nebo další komponenty. Jednotlivé položky můžete na stránce upravovat tak, že je jednoduše přetáhnete na jiné místo nebo změníte jejich rozměr či orientaci. Pokud chcete danou položku nastavovat přesněji, klikněte na ni a pravým tlačítkem myši a zvolte položku Vlastnosti. Zde můžete nastavit jednotlivé parametry. Ovlivníte tak chování stránky v prohlížečích, centrování nebo automatickou změnu velikosti a mnoho dalších vlastností.

Nastavte chování tabulky a buněk tak, aby odpovídalo vašim představám Nastavte chování tabulky a buněk tak, aby odpovídalo vašim představám

Kódům se nevyhnete?

Upravujete raději stránky pomocí HTML? Není problém, v okně náhledu tvořené prezentace přepněte na kartu zdrojového kódu a můžete začít. Tento postup se vám bude určitě hodit při vkládání již hotových fragmentů kódu, které budete chtít na svou stránku umístit.

Pro přesnější představu toho, co tvoříte, je také možné přepnout v hlavním okně náhled včetně HTML značek, nebo naopak můžete zobrazit stránku tak, jak bude viditelná ve webovém prohlížeči.

Někdy jsou úpravy přímo v kódu potřebné a rychlejší Někdy jsou úpravy přímo v kódu potřebné a rychlejší

Nedílnou součástí moderních webových stránek je JavaScript. KompoZer zvládá i tento kód, ale zde už nemáte jinou možnost, než kód zapsat v editoru a pomocí náhledu jen zkontrolovat, jestli výsledek odpovídá vašemu požadavku. Pokud se něco nepovedlo, máte k dispozici konzolu JavaScriptu, po jejímž spuštění si přečtete výpis chyb.

Kód musíte zapsat sami a výsledek zkontrolovat v náhledu nebo v konzoli Kód musíte zapsat sami a výsledek zkontrolovat v náhledu nebo v konzoli

Úpravy stylu pomocí CSS

Je pochopitelné, že budete chtít dát svému webu styl. Abyste při psaní jednotlivých stránek nemuseli vždy předělávat vzhled textu v těle stránky nebo nadpisů, pozadí a další grafické prvky, vytvoříte si vlastní styl pomocí CSS.

Klikněte na ikonku paletky a otevře se okno stylů. Vytvořte si a pojmenujte nový styl a v něm pak postupně definujte jednotlivé položky. Můžete tak snadno ovlivnit budoucí vzhled nadpisů, textu nebo hlavičky prezentace. Po ukončení definice vzhledu jednotlivých elementů (nadpis, odstavec, tělo...) nezapomeňte vždy úpravy uložit. Při dalším rozbalení CSS editoru uvidíte na levé straně strom již definovaných komponent (tagů) stylu.

Takto docílíte toho, že kdykoliv následně použijete tag, který jste editovali pomocí CSS stylu, bude tento zobrazen podle vámi nastaveného vzhledu.

Vyberte si, které položky chcete pomocí CSS definovat Vyberte si, které položky chcete pomocí CSS definovat

Volba vzhledu je pak jen na vás Volba vzhledu je pak jen na vás

Uložit a publikovat

Uložení vámi vytvořené stránky jednoduše provedete kliknutím na ikonu diskety. Zvolíte místo, kam chcete stránku uložit, a její název. Soubor potom můžete otevřít prostřednictvím webového prohlížeče a uvidíte tak opravdový vzhled toho, co jste vytvořili.

A právě zde si dovolím jednu radu: Pokud budete pro svou prezentaci využívat služeb některého webhostingu, nezapomeňte na to, že úvodní strana prezentace musí být většinou pojmenována jako index.html.

Vzhled ověříte ve webovém prohlížeči Vzhled ověříte ve webovém prohlížeči

Prezentaci máte hotovou, tak co dál? Teď se určitě budete chtít pochlubit široké veřejnosti, kamarádům nebo si jen udělat radost z dobře odvedené práce. Nezbývá vám nic jiného, než odeslat prezentaci na web. Můžete použít libovolného FTP klienta nebo využít klienta, který je součástí KompoZeru.

Kliknete na ikonu zeměkoule s popiskem Publikovat. Otevře se nastavení pro přesun stránek na server, vyplníte údaje poskytnuté vaším webhostingem a kliknete na Publikovat. Pokud jste vše nastavili správně, přesune se vaše prezentace na web.

A už jen odeslat na web... A už jen odeslat na web...

KompoZer pro každého

Jak sami vidíte, jediné co musíte umět při práci s WYSIWYG editorem, je klikat tlačítkem myši a mít představu, jak má vaše dílo vypadat a kam ho chcete vložit. Jak snadné. KompoZer je opravdu jednoduchý nástroj, který má ale i pokročilé funkce včetně JavaScriptu a CSS. Vytvářet tak můžete vše od jednoduchých statických stránek až po stránky složitější. Oproti svému předchůdci NVU se může aplikace pochlubit svou stabilitou a rychlostí. Pokud jste se tedy rozhodli vytvořit si vlastní prezentaci, neváhejte vyzkoušet KompoZer.

Nahoru

Příspěvky

KompoZer: Webová prezentace pro každého
bunak 24. 02. 2012, 08:02:07
Odpovědět  Odkaz 
No teď se to jmenuje BlueGriffon http://www.mozilla.cz/produkty/bluegriffon/
Adam Radiměřský Re: KompoZer: Webová prezentace pro každého
Adam Radiměřský 24. 02. 2012, 10:44:31
Odpovědět  Odkaz 
BlueGriffon je zcela nový projekt původního autora Nvu. KompoZer je fork Nvu, jehož vývoj skončil vezí 1.0. Ano, BlueGriffon vypadá téměř stejně jako Nvu a KompoZer. A jinak oficiální stránky jsou http://bluegriffon.org/. A upřímně řečeno, BlueGriffon sleduju od jeho vzniku (v té době jsem ještě používal Nvu, ale záhy přešel na KompoZer) a stále zůstávám radši u KompoZeru, protože přestože vývoj BlueGriffonu dost pokročil a už je dokonce i v češtině, tak mi tam některé věci stále chybí.
kompozer - skvely program
rs 24. 02. 2012, 10:43:33
Odpovědět  Odkaz 
Kompozer je skvelý program na tvorbu jednoduchých statických webstránok. Jednoduché formátovanie obsahu. Výhodou je rovnaké zobrazenie na všetkých prehliadačoch. Nedám naň dopustiť. Funguje stabilne na Linuxe aj Windowsoch Hľa niekoľko ukážok z mojej "produkcie".

www.smrekovica.sk
www.ecavrk.sk
www.enor.sk

:-)
Re: kompozer - skvely program
w4rr10r 24. 02. 2012, 19:28:06
Odpovědět  Odkaz 
Masochisté se také mohou podívat na zdrojáky. Znaky s diakritikou nahrazené HTML entitami, kupy lokálních stylopisů atp. Ňam, ňam.

Věděli jste, že některé vyhledávače (jmenovitě Google) berou ohled na velikost stránky?
Adam Radiměřský Re: Re: kompozer - skvely program
Adam Radiměřský 25. 02. 2012, 12:42:04
Odpovědět  Odkaz 
Nic takového se neděje. Stačí v předvolbách v kategorii "Pokročilý" v sekci "Speciální znak" zapnout volbu "Pouze & < > ' a nerozbitné prázdné místo" a čeština bude i v kódu v pořádku. Navíc v novějších verzích KompoZeru je toto dokonce nastaveno jako výchozí.
Re: Re: Re: kompozer - skvely program
w4rr10r 27. 02. 2012, 18:40:12
Odpovědět  Odkaz 
Jak neděje? Vždyť odkazované weby jsou toho plné.
Adam Radiměřský Re: Re: Re: Re: kompozer - skvely program
Adam Radiměřský 27. 02. 2012, 21:12:23
Odpovědět  Odkaz 
To je pravda, ale když se to v těch předvolbách nastaví, nebo se použije novější verze, tak se nic takového neobjevuje. Dotyčný to nenastavil. Tečka.
Re: Re: Re: Re: Re: kompozer - skvely program
w4rr10r 28. 02. 2012, 13:50:23
Odpovědět  Odkaz 
A jde také nepoužíval inline CSS?
Adam Radiměřský Re: Re: Re: Re: Re: Re: kompozer - skvely program
Adam Radiměřský 29. 02. 2012, 17:46:41
Odpovědět  Odkaz 
V obecných předvolbách je automaticky zatržená volba "Použít CSS styly místo HTML elementů a atributů". Lze ji samozřejmě vypnout.
Re: Re: Re: Re: Re: Re: Re: kompozer - skvely program
w4rr10r 29. 02. 2012, 21:01:31
Odpovědět  Odkaz 
Ale to samozřejmě není uspokojivé řešení. Uspokojivé řešení by bylo používat CSS, nikoliv však inline.
KompoZer: Webová prezentace pro každého
w4rr10r 24. 02. 2012, 19:24:13
Odpovědět  Odkaz 
Chvíli jsem s tím experimentoval, ale upřímně: víckrát ne. Produkovaný kód je odporný (byť je to lepší než v dávných dobách "webu 1.0") a slušného, v prohlížečích funkčního designu se člověk nedopracuje. Umí to aspoň šablony jako MS FrontPage 2000/2003 (viz Jak psát web)?

Ne, tvrdím, že pro takový WYSIWYG editor už není místo v roce 2012, kdy není problém používat CMS (Drupal, WordPress) se snadnou správou a slušivou šablonou, příp. nějaký generátor webu skrze DocBook apod.
KompoZer: Webová prezentace pro každého
css_layout 26. 02. 2012, 19:20:37
Odpovědět  Odkaz 
Pro "rs", pac mi nefunguje 'odpovedet' na konnkretni post :-(

Koukam na ty tvy designy a pak zdroj - a co nevidim? :O
OMG, tabulkovy design jen tak to svisti, OMG :O
Tabul. design, to jsi nekolik let pozadu, krasavce :-(
Po gt=rfaicke strance budiz. Ale zkus to predelat a layout delej pomoci css ne ... ;-)

A z mych zkusenosti, nejvic se mi libil jako WYSIWYG - Dreamweaver od Macromedie :)
Re: KompoZer: Webová prezentace pro každého
rs 27. 02. 2012, 10:29:20
Odpovědět  Odkaz 
Ano, tabulkovy dizajn je pozadu a skoro nikto ho uz nepouziva. Napriek tomu:

1. stranocka sa robi rychlo, nacitava sa tiez,
2. dotycne 2 firmy maju robotu na cely rok, Zadavatel spokojny - skoro vsetky zakazky co robi, dostava vdaka webu, to je hlavne :-)
3. v pripade, ze so strankou skoncim, ju dokaze udrziavat hocikto, co skoncil zakladnu skolu
4. Daju sa napalit na CD a rozdavat
5. CSS je samozrejme dobra vec, nepopieram.

Dreamweaver stoji kopu penazi, Kompozer nic - tot je hlavny rozdiel :) Inak raz som skusil Namo WebEditor - tiez velmi jednoduchy WYSIWYG editor, ale plateny - pozna to niekto?
Re: Re: KompoZer: Webová prezentace pro každého
sr 27. 02. 2012, 11:27:51
Odpovědět  Odkaz 
Este dodam, ze tie moje uvedene stranocky su tu preto, ze boli urobene len ciste v Kompozeri a len WYSIWYG metodou, prakticky bez zasahu do kodu - teda tak ako by ich robil cistokrvny amater a zaciatocnik, pre ktoreho je tento clanok o Kompozeri podla mna hlavne urceny.
Václav Hejda Re: Re: Re: KompoZer: Webová prezentace pro každého
Venca Hejda 27. 02. 2012, 21:18:15
Odpovědět  Odkaz 
Článek byl opravdu určen pro úplné začátečníky a pro experimentátory. O tabulkách v něm píši také a hned druhým dechem vysvětluji proč.
A KompoZer je opravdu stabilní, zvládá mnoho funkcí a je navíc zdarma. A to jsou důvody, proč sem článek o něm určitě patří.
KompoZer: Webová prezentace pro každého
Blind-friendly 28. 02. 2012, 16:01:56
Odpovědět  Odkaz 
Nic ve zlem, pane autore, ale kdyz napisete neco jako

"Nedílnou součástí moderních webových stránek je JavaScript..."
OMG :O

Tim chcete snad rict, ze kdo nepouziva Javascript je ... (doplnte si sam) a stranky jsou nemoderni ?? :O

Bohuzel jsou i takove stranky, kde bez Javascriptu si ani neskrtnete :O

Skutecny "mistr" designer, udela vybornou, nejen blind-friendly stranku i bez javascriptu...

Takze, tu vasi vyse citovanou teorii lze take preformulovat:
"Soucasti mnohych stranek byva pouzit JavaScript, ale je spravne a moderni delat stranky tak, aby byly maximalne funkcni a bezbarierove i bez pouziti javascriptu..."
Re: KompoZer: Webová prezentace pro každého
daks 28. 02. 2012, 18:41:19
Odpovědět  Odkaz 
Taky nic ve zlém, ale větu "Soucasti mnohych stranek byva pouzit JavaScript..." může vyplodit jen nevzdělaný hovado.
Re: Re: KompoZer: Webová prezentace pro každého
- 29. 02. 2012, 08:18:19
Odpovědět  Odkaz 
Hovado jsi akorát ty, ty debile !
Re: Re: Re: KompoZer: Webová prezentace pro každého
daks 29. 02. 2012, 08:23:43
Odpovědět  Odkaz 
Aj vaj, tady jsem trefil do černýho.
Václav Hejda Re: Re: Re: Re: KompoZer: Webová prezentace pro každého
Venca Hejda 29. 02. 2012, 08:54:13
Odpovědět  Odkaz 
Jsem rád, že můj článek rozpoutal bouřlivé reakce, ale...

1. nepoužívejte prosím na našem webu nadávky a nevhodné výrazy, nejsme přece kdejaké diskuzní forum, kde spolu bojují čtenáři s nižší hodnotou intelektu a tyto výrazy bývají vetšinou jejich jedinou zbraní proti oponentům.

2. JavaScript jed dnes již opravdu nedílnou součástí webových stránek, ale nenapsal jsem, že je to součást neodmyslitelná, bez které webové stránky nelze psát. Těší mne, že můj článek čtete, ale věnujte také pozornost tomu co čtete.
Re: Re: Re: Re: Re: KompoZer: Webová prezentace pro každého
daks 29. 02. 2012, 10:31:08
Odpovědět  Odkaz 
ad 1) Tak dobře, slibuju, že už to nikdy neudělám.
KompoZer: Webová prezentace pro každého
Kamila 26. 07. 2017, 08:36:27
Odpovědět  Odkaz 
Dobrý den,

moc prosím o radu. Snažím se o vytvoření webu pomocí Kompozeru. Jde čistě o můj web takže nic profesionálního. Vkládám tabulku do které umisťuji text, menu, obrázky... Uložím. Ale pak, když se podívat na webový náhled tak tabulka je tam stále vidět. Jak prosím udělat, aby pak už vidět nebyla. Jsem prosím úplný začátečník tak mi prosím nenadávejte :) a jsou to stránky čistě pro mě, ale trápím se s tím už od včerejška a nemůžu na to přijít.

Moc díky
Kamila
KompoZer: Webová prezentace pro každého
Kamila 26. 07. 2017, 08:36:34
Odpovědět  Odkaz 
Dobrý den,

moc prosím o radu. Snažím se o vytvoření webu pomocí Kompozeru. Jde čistě o můj web takže nic profesionálního. Vkládám tabulku do které umisťuji text, menu, obrázky... Uložím. Ale pak, když se podívat na webový náhled tak tabulka je tam stále vidět. Jak prosím udělat, aby pak už vidět nebyla. Jsem prosím úplný začátečník tak mi prosím nenadávejte :) a jsou to stránky čistě pro mě, ale trápím se s tím už od včerejška a nemůžu na to přijít.

Moc díky
Kamila
KompoZer: Webová prezentace pro každého
Klára 25. 05. 2018, 15:19:58
Odpovědět  Odkaz 
Dobrý den, jak vytvořím podstránku (další stránku) v Kompozeru?

Odpovědět

Nejsou podporovány žádné značky, komentáře jsou jen čistě textové. Více o diskuzích a pravidlech najdete v nápovědě.
Diskuzi můžete sledovat pomocí RSS kanálu rss



 
 

Top články z OpenOffice.cz