Program KompoZer je bezplatný WYSIWYG editor na vytváranie a správu webových stránok. Umožňuje vytvárať, upravovať a publikovať profesionálne, atraktívne webové stránky bez znalosti jazyka HTML. Môžeme ho voľne používať kdekoľvek a v ľubovoľnom počte kópií. KompoZer je dostupný pre platformy Linux, Mac OS X a Microsoft Windows.
Inštalácia editora KompoZer a nastavenie slovenčiny
Program KompoZer je voľne stiahnuteľný na internete. Inštalačný balík môžeme stiahnuť z Internetu a adrese http://www.kompozer.net/download.php. Prenosnú verziu, určenú pre umiestnenie na USB disk, môžete stiahnuť na adrese http://portableapps.com/apps/development/nvu_portable. Postup inštalácie slovenčiny: Slovenský lokalizačný balík od môžeme stiahnuť na adrese http://www.kompozer.net/download-07.php#l10n. Keď už máme všetko stiahnuté a program nainštalovaný, spustíme Kompozer a v menu Tools klikneme na príkaz Extensions. Ďalej pokračujeme kliknutím na tlačidlo Install a zvolíme cestu k stiahnutému jazykovému balíčku. Chvíľu počkajte, potom kliknite na tlačidlo Install Now a potom program KompoZer reštartujte.
Spustenie a ukončenie editora KompoZer
Po bezproblémovej inštalácii sa v ponuke Štart> Programy vytvorí programová skupina KompoZer, odkiaľ možeme editor spustiť, odinštalovať z počítača alebo si prezrieť internetové stránky tvorcov editora. Pre rýchlejšie spustenie si môžeme vytvoriť zástupcu programu KompoZer na pracovnej ploche Prácu s programom KompoZer možno ukončiť výberom položky Ukonči z menu Súbor. Môžeme tiež použiť stlačenie klávesovej skratky Alt + F4 alebo Ctrl + Q, prípadne použiť klasicky tlačidlo v pravom hornom rohu pracovného okna. Pred ukončením programu sa nás editor KompoZer opýta, či neuloženú prácu chceme uložiť alebo o ňu prísť.
Vytvorenie a uloženie stránky do webu
Vyberte príkaz Súbor / Nový. Môžete vytvoriť prázdnu stránku alebo dokument vychádzajúci zo šablóny. Vyberieme Prázdny súbor a kliknite na tlačidlo Vytvoriť. Otvorí sa prázdna stránka. Tu môžete písať priamo text, používať fonty, kurzívu, tučne, atď. Napíšte nejaký text, ako ste zvyknutí z textového editora. Nebojte sa experimentov, tak sa najviac naučíte. Dôležitý krok je uloženie stránky do webu (Súbor / Uložiť). Webem chápeme špeciálnu zložku (čiže adresár), kam sú uložené všetky súbory, ktoré dohromady tvoria previazané stránky. Pred uložením stránky musíte zadať titulok stránky, ktorý sa bude čitateľom zobrazovať v hornom prúžku prehliadača, bude sa im ponúkať ako text pri ukladaní do obľúbených položiek alebo ako text nájdený vyhľadávačom. Pri písaní názvov súborov nepoužívame diakritiku, veľké písmená ani medzery. Pokiaľ bude ukladaná stránka našou hlavnou stránkou, je vhodné a zaužívané nazvať ju index.html. Ak chceme vytvoriť ďalšiu stránku, nie vždy je potrebné tvoriť ju znova od začiatku. Môžeme si otvoriť nejakú inú stránku podobnú tej novej, uložiť ju ešte raz pod novým menom (Súbor / Uložiť ako). Vystavenie stránky na serveri Možnosť ľahkého odosielanie stránok na server patrí k základným prednostiam programu KompoZer. Prvý krát si to síce vyžaduje trochu nastavovania a klepanie myšou, ale nabudúce už je to dosť jednoduché. Tak mě napadlo, že možno zatiaľ nemáte nikde miesto na serveri. Odporúčam využiť služby FreeWebHosting serverov (napr. webzdarma.cz), kam sa dajú stránky umiestňovať zadarmo. Podmienkou často býva umiestnenie reklamného prúžku. Druhým variantom je platený Webhosting, tu však za umiestnenie stránok musíme zaplatiť. Stačí prejsť registráciou a starostlivo si zapísať štyri veci:
1. adresu stránok (http://názov.sk/vášnázovstránky a pod)
2. adresu ftp servera (väčšinou ftp://názov.sk)
3. užívateľské meno zadané pri registrácii
4. heslo
Pripojte sa na internet. V editore KompoZer zadajte príkaz Súbor / publikuj. Vyplňte názov webu, adresu domovskej stránky a prihlasovacie informácie (meno používateľa, heslo). To je všetko. KompoZer má v sebe zabudovaného Správcu stránok, ktorý umožní ľahko spravovať vytváranie webovej stránky a tie následne nahrávať priamo na web prostredníctvom protokolu FTP. Pre zobrazenie zadajte príkaz Zobraziť / Zobraziť / Skryť / Správca stránok alebo stlačte klávesu F9.
Zobrazenie stránky
Normálny režim Z ponuky Zobraziť / Normálny mód úprav. Pri normálnom zobrazení sa realizuje prevažná väčšina práce. Zobrazuje stránku veľmi podobne tomu, ako bude nakoniec vyzerať. Pri písaní textu a vkladaní objektov program KompoZer vytvára HTML kód na pozadí.
Zobrazenie HTML značiek
Z ponuky Zobraziť / HTML tagy. Zobrazuje normálne stránku doplnenú o HTML značky.
Zdrojový HTML kód
Z ponuky Zobraziť / HTML zdrojový kód. Zobrazuje normálny text, ktorý je obalený značkami - tagy, ktoré sa uzatvárajú do ostrých zátvoriek. Hoci pri práci s KompoZer nemusíte zadávať kód HTML, jeho znalosť sa vám rozhodne vyplatí, pretože potom môžete vyriešiť problémy, nad ktorými sa v normálnom zobrazení nedá vyzrieť. Programátorom a autorom HTML veľmi uľahčuje prácu obarvování textu podľa jeho významu, pretože je to potom prehľadnejšie.
Ukážka
Z ponuky Zobraziť / Ukážka. Zobrazuje stránku podobne, ako v internetovom prehliadači.
Práca s textom
Používanie štýlov
Predpokladáme, že písať na počítači viete. Autori stránok väčšinou chcú mať všetky odseky alebo nadpisy rovnakým písmom. Na to sú ale určené štýly, ktoré budeme popisovať ďalej. Hlavný prínos štýlov teda Vidíme v automatizácii.
Označovanie textu
Než sa uskutočníme nejakú operáciu s textom, je potrebné ho označiť. Väčšinou text označujeme tak, že v stránke zatiahneme myšou odniekiaľ niekam. Môžeme to ale robiť presnejšie a lepšie:
Dvojité kliknutie - označenie slová alebo odkazu na ktoré práve kurzor ukazuje Kliknutie sa Shiftem - označenie od minulej pozície kurzora až po novú
Shift + šípky - označovanie pomocou kurzora
Ctrl + Shift + šípky - označovanie po slovách
Ctrl + A - označenie všetkého
Shift + Home - označenie od začiatku riadku po kurzor
Shift + End - označenie od kurzora po koniec riadku
Ctrl + Shift + End - označenie od kurzora po koniec stránky
V prípade že už označenie bloku nepotrebujeme, kliknúť myšou na akékoľvek miesto v texte a označenie zmizne.
Písanie medzier
Nikdy nepíšeme dve medzery za sebou. Ak stlačíme dvakrát za sebou medzerník, vo výslednom kóde sa nám objaví jedna normálne a jedna pevná medzera, čo je chyba. Pevná medzera je špeciálny znak (v HTML). Má tú vlastnosť, že nedovoľuje rozdeliť slovo a má pevnú šírku. V HTML neexistuje tabulátor. Ak ho stlačíme na klávesnici pri písaní, do kódu tým vložíme niekoľko pevných medzier.
Späť, Znovu
Veľmi používané funkciou Späť z ponuky Upraviť vrátme späť predchádzajúcu akciu. Opakovaným použitím môžeme vrátiť viac krokov. Odporúčame osvojiť si klávesovú skratku Ctrl+Z. Funkciou Znovu z ponuky Upraviť urobíme znova vrátenú akciu. Príkaz máme aktívny iba ak bolo predtým niečo vrátené príkazom Späť. Klávesová skratka funkcie Znovu je Ctrl+Y. Pri prepínaní normálneho a HTML zobrazenie funguje vrátenia príkazov len v tom zobrazení, v ktorom bolo urobené.
Vystrihnúť, Kopírovať, Vložiť
Klasické príkazy používané na kopírovanie a presúvanie označených objektov. Pre úplnosť popisujeme postup v štyroch krokoch, ktorý je zhodný v celom systéme Windows:
1. Označíme si, čo chceme prenášať alebo kopírovať.
2. Zvolíme Upraviť/Vystrihnúť pre prenášanie, alebo Upraviť/Kopírovať pre kopírovanie, čím umiestnime objekt do stránky
3. Prejdeme kurzorom tam, kam chceme objekt vložiť.
4. Zadám Upraviť / Vložiť.
Väčšinou sa používame klávesové skratky Ctrl+X pre vyňatie, Ctrl+C pre kopírovanie, Ctrl+V pre vloženie.
Odstrániť
Odstránenie označeného objektu alebo textu vykonávame voľbou funkcie Odstrániť z menu Upraviť alebo stlačením klávesy Del.
Výber všetkého
Funkciou Vybrať všetko z menu Upraviť vyberieme celý obsah aktuálnej stránky. Klávesová skratka je v tomto prípade Ctrl+A.
Formátovanie
Panel formátovacích nástrojov
Najčastejšie formátovacie akcie vykonávame pomocou panela formátovacích nástrojov. Základom je, aby sme mali označený objekt, ktorý chceme formátovať, alebo kurzor v správnom odseku. Pomocou kliknutia pravým tlačidlom myši a vyvoláme menu a výberom voľby Vlastnosti môžeme meniť parametre väčšiny objektov na stránke.
Formátovanie písma
Formátovanie textu môžeme definovať buď pre kurzor alebo pre blok. Pre kurzor definujeme formát pre text, ktorý ešte len budeme písať. Pre blok definujeme formátovacie vlastnosti pre text, ktorý sme už napísali, ktorého formátovanie chceme zmeniť. Označíme si text, ktorý chceme formátovať. Vyberieme príkaz Formát/Písmo. Môžeme zmeniť typ písma, avšak s istými obmedzeniami. Do stránky sa uloží len názov fontu, nie samotný font. Nie je zaručené, že počítač čitateľov bude mať plánovaný font nainštalovaný. V praxi je teda potrebné obmedzenie sa na tri fonty - Times, Arial a Courier. Tie sú na každom počítači s Windows. Ak použijeme iný, môže sa u čitateľa text zle zobraziť. Font si môžeme vybrať zo zoznamu alebo ho vypísať ručne. Tento postup je potrebné použiť pri deklarácii druhého "poistného" fontu. Za meno prvého fontu sa za čiarku napíše názov druhého fontu, ktorý sa uplatní, ak počítač čitateľa nemá nainštalovaný predchádzajúci font. Napríklad Verdana, Arial, sansserif.
Formátovanie odstavca
Postavíme kurzor do odseku, ktorý chcete formátovať. Zadáme príkaz Formát/Odstavec. Po stlačení klávesy Enter sa v editore vytvorí nový odstavec. Pritom sa všetky vlastnosti pôvodného odstavca prenesú na odstavec nový. To sa týka aj rámčekov a pozadia.
Odrážky a číslovanie
Skupine odstavcov so zarážkou alebo číslovaním hovoríme zoznam. Pre vytvorenie zoznamu umiestnime kurzor do odstavca alebo označíme skupinu odstavcov, ktoré chcemte zmeniť na zoznam. Potom zadáme príkaz Formát / Zoznam / Vlastnosti zoznamu a na rôznych kartách si vyberieme typ zoznamu. Ak stlačíme v zozname Enter, vytvorí sa ďalší riadok s rovnakým typom odrážky alebo s rovnakým formátom číslovania. Dvoma stlačeniami klávesy Enter po sebe už ale vytvorí normálny odstavec.
Farby a pozadia stránky
Na karte Formát/Farby stránky a pozadia nastavujeme farby textu a pozadia stránky. Do pozadia stránky môžeme vložiť farbu aj obrázok.
Práca s odkazmi
Vytvorenie odkazu
Označíme si text, ktorý má fungovať ako odkaz. Z ponuky vyberieme Vložiť/Odkaz. To môžeme spraviť aj klávesovou skratkou Ctrl+L. Zobrazí sa dialóg, ktorý sa nás pýta na cieľ odkazu. Najdôležitejším políčkom je tu Umiestnenie odkazu (URL). Napríklad http://www.centrum.sk. To je takzvaná absolútna adresa. Najčastejšie sa ako cieľ odkazu udávame stránku v aktuálnom webe. Môžeme klasicky prechádzať lokálnym webom a vybrať cieľovú stránku. Takto automaticky vypísaná URL nezačína http://, ale jednoducho len vypíše meno cieľového súboru. Ak sa súbor nachádza v inej zložke, predchádza cesta meno súboru. Zápis cesta / súbor sa zakladá na adrese aktuálnej stránky. Je to takzvaná relatívna adresa. Niektoré odkazy po kliknutí spúšťajú poštový program s vypísanú adresou Odkazy nemusia smerovať spojenie len na stránku, ale môžu mieriť aj na konkrétne miesto v stránke. Na miesto, kam chceme odkaz smerovať vložíme cieľovú kotvu príkazom z ponuky Vložiť/Pomenovaná kotva. Predtým je nutné nastaviť kurzor na miesto, kde chceme umiestniť záložku. Dialóg sa nás opýta na meno záložky. Je vhodné keď použijeme logický názov bez medzier a diakritiky). V dialógu tvorby odkazu sa pozrieme, čo nám ponúka rolovacie kolónka Umiestnenie odkazu. Ak nič, znamená to, že v aktuálnej stránke nemáme zatiaľ žiadne cieľové kotvy. Samozrejme môžeme vložiť odkaz na cieľovú kotvu aj v inej stránke.
Zmena odkazu
Častou chybou je upravovanie odkazu prepísaním zobrazovanej adresy. Ak chceme zmeniť odkaz www.centrum.sk na www.centrum.cz, tak okrem prepísanie textu odkazu musíme umiestniť kurzor do odkazu, spustiť dialóg Vložiť/Odkaz a prepísať adresu.
Odstránenie odkazu
V dialógu Vložiť / Odkaz stačí zmazať políčko Umiestnenie odkazu.
Písanie za odkazom
V normálnom zobrazení máme niekedy problém písať za odkazom text, ktorý by už odkazom nebol. Spoľahlivo funguje iba postup: stlačíme klávesu Enter, vložíme medzeru a normálny text, stlačiť kláves Home a BackSpace. Ak chceme za odkaz písať text, ktorý by bol ešte odkazom, aj to niekedy nefunguje. Spoľahlivé je ak klikneme kurzorom pred posledné písmeno, dopíšeme ho znova, dopíšeme text, ktorý chceme a zmažeme posledné písmeno. Rovnaký postup je potrebné použiť i naopak, ak chceme niečo aktívne pridať pred text odkazu.
Práca s obrázkami
Vloženie obrázka
Vždy, pred tým ako začneme niečo vkladať, pozrieme sa, kde máme kurzor, pretože na toto miesto budeme vkladať. Je vhodné ak máme obrázok už pripravený a uložený vo formáte. jpg,. gif alebo. png. Vloženie obrázka urobíme príkazom Vložiť/Obrázok. V zobrazenom dialógu sa na štyroch kartách nastavujú potrebné parametre. Na karte Umiestnenie je potrebné zadať odkaz na obrázok, ktorý je umiestnený niekde na sieti. Problémom je, že zvolený obrázok môže byť zo siete po určitom čase odstránený, z tohto dôvodu je istejšie ak skopírujeme obrázka do nášho webu. Aj na tejto karte zadávame text, ktorý sa zobrazí čitateľom s vypnutými obrázkami. Všetkým ostatným sa tento text ukazuje v žltej bubline, keď cez obrázok prejdú myšou. Za zástupný text by sme mali zvoliť niečo, čo dostatočne vystihuje podstatu obrázka. Rozmery obrázka v pixeloch (obrazovkových bodoch) alebo percentách okna sa zadávajú na karte Vzhľad. Základom je potom výška okna a šírka dokumentu, nie pôvodné rozmery obrázka. Veľkosť obrázka sa dá ľahko meniť aj myšou. Ťahaním za roh obrázka zostane zachovaný pomer veľkosti strán.
Zväčšovanie obrázku sa príliš často nepoužíva, pretože je potom vykreslený menej kvalitne. Zmenšovanie sa taktiež nepožíva, pretože by sa pre menšiu zobrazenú plochu prenášalo zbytočné množstvo dát. Na karte Vzhľad nastavujeme obtekanie ostatným textom, šírku čierneho rámčeka a rôznu pozíciu obrázka na riadku. Obrázok môže byť aj odkazom. Parametre odkazu nastavíme na karte Odkaz.
Horizontálna linka
Príkazom Horizontálna linka z ponuky Vložiť, vložíme do textu vodorovnú čiaru. Ak chceme meniť vlastnosti čiary, klikneme na ňu pravým tlačidlom a vyberieme možnosť Vlastnosti/Horizontálna čiara.
Znaky a symboly
Príkaz Znaky a symboly z ponuky Vložiť vložíme symbol, napríklad copyright.
Poznámka
Príkazom Poznámka z ponuky Vložiť vložíme komentár. Komentár sa zobrazí po nabehnutí kurzorom myši na symbol výkričníku. Ak chceme upraviť poznámku, klikneme na ňu pravým tlačidlom a vyberieme možnosť Rozšírené vlastnosti.
Vloženie tabuľky
Príkaz Vložiť/Tabuľka alebo Tabuľka/Vložiť/Tabuľka vyvolá dialóg, kde môžeme ťahaním myšou zadať počet riadkov a stĺpcov a na kartách Presné a Bunka zadať ďalšie vlastnosti tabuľky. Vkladanie riadkov, stĺpcov a buniek podponuky príkazu Tabuľka/Vložiť vkladajú do tabuľky ďalšie riadky, stĺpce alebo bunky. Je dôležitá poloha kurzora - riadky a stĺpce vkladáme podľa neho. Po vložení nových buniek sa pôvodná tabuľka často rozhodí, preto ju musíme opäť upraviť.
Výber tabuľky alebo jej časti
Najlepšie sa výber častí tabuľky vykonáva myšou. Možno to urobiť aj príkazom Tabuľka/Vybrať z podponuky. Vyberáme ju opäť podľa polohy kurzora.
Zmazanie časti tabuľky
Vyberieme si časť tabuľky, ktorú chceme odstrániť a z ponuky vyberieme možnosť Tabuľka/Odstrániť a pokračujeme výberom podponuky. Druhou možnosťou je, že na tabuľku klikneme pravým tlačidlom myši a vyberieme Odstrániť z tabuľky a pokračujeme výberom podponuky.
Spájanie buniek
Veľmi často používaným a užitočným príkazom Tabuľka / Spoj vybrané bunky vykonáme zlúčenie vybraných buniek do jednej, ale obsah buniek sa zachová.
Delenie buniek
Príkazom Tabuľka/Rozdeliť bunku rozdelíme skôr spojené bunky na menšie časti.
Prevod textu do tabuľky
Označíme si text, ktorý chceme previesť do tabuľky, a zadáme príkaz Tabuľka / Vytvoriť tabuľku z označeného. Editor KompoZer sa nás v tomto prípade opýta, čo bude oddeľovač buniek. Môže to byť napríklad čiarka, medzera alebo iný symbol.
Nastavenie tabuľky a bunky
Dialóg Vlastnosti tabuľky vyvoláme z menu Tabuľka. Dialóg pre úpravu vlastností bunky je jeho druhou záložkou. Môžeme upravovať vlastnosti viacerých buniek naraz, ak pred tým označíme blok, stĺpec alebo riadok, ktorý chceme upravovať. Tabuľke môžeme nastaviť i šírku. Je to nastavenie minimálnej šírky, v praxi môže byť tabuľka širšia, ak sa do nej nezmestí obsah buniek. Zadávanie výšky tabuľky sa od šírky líši iba v tom, že vertikálne nie je tabuľka obmedzená, a preto sú všetky zadané výšky naozaj maximálnymi. Pri percentuálnom zadávaní za základ berieme výšky zobrazeného okna, nie výšku stránky. Aj samotnej bunke môžeme nastaviť šírku. Toto nastavenie má však nižšiu prioritu ako predchádzajúce. Bunka môže byť zobrazená širšie ako sme nastavili, ak je jej obsah širší a nedá sa zalomiť ako je to napríklad pri vložení obrázka do bunky. Textový obsah bunky sa zalamuje. Minimálna šírka bunky je obmedzená najdlhším slovom alebo najširšom obrázkom v obsahu. Stĺpec je minimálne tak široký, ako je minimálne široká najširšia bunka. Ak je tabuľka nastavená širšie, ako súčet minimálnych šírok stĺpcov, pridáva sa každému stĺpci šírka rovnomerne. Ak vynecháme zadávanie šírky v jednom stĺpci, bude sa tento jeden prispôsobovať šírkou tabuľke alebo oknu. Ak teda nastavujeme percentá, nastavíme percentá všade v tabuľke. Percentá radšej nekombinujeme s pixelmy. Percentá sa pri tabuľke vzťahujú k šírke stránky, percentá v bunkách k šírke tabuľky.
Tvorba podľa šablóny
Hotové šablóny
V súčasnej dobe môžeme na internete stiahnuť množstvo vopred preddefinovaných šablón, ktoré sú bezplatné. Stačí ak ich jednoducho upravíme a môžeme ich používať. Touto úpravou získame profesionálne vyzerajúce stránky. Serverov, ktoré tieto šablóny zadarmo poskytujú je veľké množstvo. Šablónu väčšinou stiahneme v archíve zip, pretože obsahuje Okrem súborov htm alebo html aj súbory s obrázkami a ďalším nastavením.
Upravenie šablóny
Súbor s príponou zip si rozbalíme vo svojom počítači. Teraz už môžeme začať obsah a názvy odkazov prepisovať a dopĺňať. Ak budeme chcieť zmeniť smer odkazu, stačí na ňom kliknúť pravým tlačidlom myši a vybrať voľbu Vlastnosti/Odkaz. Podobne ako odkaz môžeme vkladať alebo upravovať obrázky, ktoré budeme chcieť mať na svojich stránkach. Posledná veci, ktorú môžeme ešte zmeniť sú farby pozadia, písma a odkazov. Všetky tieto vlastnosti sú väčšinou nadefinovaný v súboroch CSS. Po vyvolaní CSS Editora vidíme v ľavej časti jednotlivé položky a v pravej ich môžeme nastavovať.