1 Spustenie programu

Programová skupina Microsoft Office FrontPage 2003 je štandardne nainštalovaný v tejto skupine, takže ak chcete spustiť program pomocou tejto ponuky, kliknite na ikonu (Štart, Všetky programy, Microsoft Office). Počkajte kým sa vám ponuka rozbalí a spustite Microsoft Office FrontPage 2003.

2 Úvodná stránka

Vytvorenie novej stránky alebo webu. Kliknutím na         sa nám zmení pod okno úloh:

Novú stránku môžeme otvoriť z prázdnej stránky, z existujúcej stránky alebo pomocou šablón.

Najprv budeme pracovať s jednotlivou stránkou, ktorá bude vytvorená z prázdnej stránky.

Po kliknutí na   sa nám zobrazí prázdna nová stránka:

3 Všeobecne použiteľné nástroje k tvorbe webu

3.1 Text na stránke

A teraz môžeme pristúpiť k tvorbe stránky. Základné formátovanie, vkladanie obrázkov a tabuliek si precvičíme na stránke, ktorá sa nám otvorí pri spustení programu. Najprv budeme formátovať text.

Pomocou Formátovacieho panela nástrojov môžeme nastavovať:

3.2 Písmo

Ak chceme písmu pridať efekty, otvoríme si cez menu (ponuku) Formát; Písmo a klikneme do prázdneho okienka pre žiadaný efekt, označíme a potvrdíme tlačítkom OK. Ak už žiadaný efekt nechceme, znovu otvoríme toto menu a kliknutím do okienka efekt vypneme. Znovu našu voľbu potvrdíme tlačítkom OK.

3.3 Formát odstavca

V odstavci okrem zarovnania môžeme nastaviť odsadenia pred alebo za text, resp. odsadiť prvý riadok textu, pridávať medzery pred odstavec, za odstavec, nastaviť riadkovanie. Naše nastavenia potvrdíme tlačítkom OK.

3.4 Odrážky

Ak si chceme nastaviť odrážky, môžeme si ich vybrať z ponuky Formát; Odrážky a číslovanie; Jednoduché odrážky. Výber označíme kliknutím do nami zvoleného okienka a potvrdíme kliknutím na tlačítko OK.

3.5 Číslovanie

Ak chceme použiť číslovanie, cez Formát, Odrážky a číslovanie, zvolíme čísla, aký typ číslovania chceme použiť a akým číslom sa má začínať číslovanie. Naše nastavenie nezabudneme potvrdiť tlačítkom OK.

3.6 Ohraničenie a tieňovanie

Ak chceme časť textu zvýrazniť, ohraničením, alebo tieňovaním, otvoríme si cez menu Formát; Ohraničení a stínování.

V ohraničení môžeme nastaviť, kde chceme mať čiaru ohraničenia, akého štýlu (napr. bodkovaná čiara), akej farby, akej hrúbky (šírka).

V záložke tieňovanie si vyberáme, akú chceme mať farbu pozadia a popredia (textu).

4 Varianty zobrazenia FrontPage

Ponuka Zobraziť (podľa toho, či zvolíte príkaz Stránky, alebo Zložky, zmenia sa aj tlačítka na paneli Zobrazenia (tlačítka slúžia na prepínanie jednotlivých režimov práce).

Príkaz Stránka:  

• Návrh – slúži k priamemu vytváraniu webových stránok a k ich úprave.
• Paralelné – zobrazí v okne návrh webu, ale aj jeho HTML kód.
• Kód – zobrazí iba HTML kód.
• Náhľad – zobrazí stránku tak, ako ju budeme vidieť v internetovom prehliadači.

Príkaz Zložky: (slúži k správe webu, jeho zložiek, stránok a s nimi súvisiacich súborov a k vykonávaniu ďalších pomocných funkcií programov ako sú napr. Správy, Úlohy, Navigácia).

• Zložky – ponúkajú zobrazenie všetkých použitých zložiek a jednotlivých stránok.

• Vzdialený webový server – toto zobrazenie slúži ku kontrole webového servera. a k overeniu jeho vlastností (ukáže obsah webového serveru).
• Správy – v tomto zobrazení si prehliadate rôzne údaje o vašom webe, napr. v podponuke Problémy môžete nájsť neprepojené stránky, pomalé stránky atď.
• Navigácia – tu je zobrazená schéma náväznosti stránok, ktoré ste vytvorili.
• Hypertextové odkazy – ak si vyberiete niektorú zo stránok, potom pri zapnutí Hypertextových odkazov vám FrontPage zobrazí odkazy na tejto stránke a slúži ku kontrole funkčných a nefunkčných odkazov na iné stránky.
• Úlohy – tu môžete zapisovať úlohy pre ďalších spolupracovníkov, alebo pre seba, evidovať ich plnenie a pod.

4.1 HTML  (HyperText MarkUp Language znamená Nadtextový značkový jazyk)

Keďže pracujeme s grafickým editorom FrontPage, nemusíme vôbec zasahovať do kódu HTML, avšak niekedy je nutné robiť aj úpravy. Každá stránka v tomto kóde má svoju základnú štruktúru, ktorú by sme mali dodržovať. Zaistíme tým, že prehliadač nájde všetky informácie na svojom mieste a bude ich tak schopný správne zobraziť, presne podľa našich predstáv.

Stránka, hlavička, telo, celá stránka by mala byť uzatvorená do párovej značky <HTML> </HTML>. Tým hovoríme kde má stránka svoj začiatok a koniec.

Stránka je rozdelená na dve základné časti – hlavičku stránky ohraničenú tagom <HEAD> </HEAD> a jej telo ohraničené tagom <body> </body>.

Súbory, ktoré definujú www stránky majú štandartne príponu „htm“, v prostredí UNIXu „html“. Na tvorbu stránok je vhodné používať kombináciu dvoch programov ( i viacerých) jednoduchého textového editora a programu, ktorý umožňuje vytvárať stránky priamo v grafickom prostredí. V jednom môžete okamžite definovať a vidieť vzhľad stránky, miešať farby, … ale práca so zdrojovým textom a jeho časťami v jednoduchom editore je niekedy jednoduchšia a rýchlejšia.

5 Vlastnosti stránky

Kedy budete nastavovať vlastnosti stránky závisí len na vás. Môžete ich zadávať aj neskôr keď už sú stránky naplnené textom a ďalšími prvkami, alebo ich môžete nastaviť hneď na začiatku.

1)      otvorte požadovanú stránku a buďte v zobrazení Návrh

2)      vyberte si niektorý z navrhnutých spôsobov:

–          z ponuky Súbor príkazom Vlastnosti.

–          z kontextovej ponuky stránky (pravým tlačítkom myši) príkazom Vlastnosti stránky.

–          ponuka Formát a niektorý z príkazov Motív, Pozadie, Vlastnosti.

–          kombináciou kláves ALT + Enter (pokiaľ ste na prázdnej stránke).

Kliknite na voľnom mieste webovej stránky pravým tlačítkom myši a vyberte Vlastnosti stánky. Otvorí sa okno, ktoré obsahuje šesť kariet a každá z nich má svoje špecifické využitie: 

• Obecné
• Formátovanie
• Upresniť
• Vlastné
• Jazyk
• Pracovná skupina

5.1 Karta Obecné (základné údaje ako umiestnenie, nadpis, popis stránky a kľúčové slová)

Umiestenie – ukazuje umiestenie webu v adresárovej štruktúre pevného disku a serveru.

Nadpis stránky – sem sa píše text, ktorý sa bude zobrazovať v záhlaví okna užívateľovho prehliadača a ktorý bude ponúkaný pri ukladaní webu medzi Obľúbené položky.

Popis stránky – podrobnejší popis charakterizujúci stránku.

Kľúčové slová – vhodné slová, ktoré budú určitým spôsobom charakterizovať a identifikovať stránku. FrontPage do záhlavia stránky pridá tieto slová ako tzv. meta informáciu (ktorú používajú internetové prehliadače pri hľadaní ako Google, Altavista, Zoznam, Atlas a ďalšie). Jednotlivé kľúčové slová sa oddeľujú od seba čiarkou.

Východzí cieľový rámec – tu sa zadefinuje akým spôsobom z hľadiska okna sa majú otvárať odkazy na tejto stránke (napr na kliknutie sa podstránka zobrazí na tej istej stránke, ako nová stránka …).

Video a zvuk – program FrontPage vám umožňuje vložiť na webovú stránku video alebo aj nejaký zvukový sprievod. Zvuk sa nastavuje na karte Obecné.

5.2 Karta Formátovanie (slúži k nastaveniu farby alebo obrázku na pozadie stránky, k nastaveniu farby textu na stránke a tiež textu farieb hypertextových odkazov)

Farba pozadia stránky – ako názov hovorí nastavuje niektorú s ponúkaných farieb ako farbu pozadia

Obrázok na pozadie – vhodným obrázkom je možné vylepšiť vzhľad stránky, musí mať vhodný formát a veľkosť, ideálne ak ako tapeta nadväzuje na seba.

5.3 Karta Upresniť (nastavuje okraje stránky,  vzdialenosť prvkov od jednotlivých okrajov stránky v pixeloch)

5.4 Karta Jazyk (v akom jazyku sa budú stránky vytvárať. Ide vlastne o nastavenie jazyka v ktorom sa budú kontrolovať preklepy a iné podobné chyby textu)

Kódovanie HTML, v našich končinách  nastavené na Stredoeurópsky jazyk, aby ho prehliadač dobre zobrazil.

5.5 Karta Pracovná skupina (ak pracuje na tvorbe viac autorov je vhodné vybrať pre jednotlivých spolupracovníkov kategóriu do ktorej patria. Urobíte to v okienku Kategória k dispozícii, prípadne môžete pridať tlačítkom Kategória novú a v poli Pridelené môžete vybrať konkrétneho spolupracovníka aj pomocou tlačítka Meno)

6 Obrázky

Obrázok môžeme vložiť cez Vložiť; Obrázek.

Ponúkne sa nám na výber:

• Obrázok z galérie obrázkov MS Office
• Obrázok zo súboru, ktorý máme uložený
• Naskenovať obrázok, alebo pridať z fotoaparátu
• Obrázok z galérie, ak máme na počítači vytvorenú galériu
• Nakresliť nový obrázok
• Nakresliť automatické tvary
• Napísať text pomocou WordArtu
• Načítať video

6.1 Obrázok z klipartu

Ak chceme vložiť obrázok z klipartu MS OFFICE, klipart sa nám neotvára ako v prípade MS Word, ale treba do okienka pod Hledat text napísať výraz, ktorý charakterizuje obrázok, napr. zima a potvrdiť to kliknutím na tlačítko Hledat. Zobrazia sa všetky obrázky na danú tému.

Kliknutím na miniatúru sa obrázok vloží tam, kde sa  aktuálne nachádza kurzor.

S obrázkom môžeme ďalej pracovať, musíme však naň kliknúť, aby bol aktívny (objavia sa úchytné body). Ťahaním môžeme obrázok zväčšovať alebo zmenšovať (ak ťaháme v niektorom zo stredných bodov – deformujeme obrázok v smere ťahania, ak ťaháme z rožných bodov,  zväčšujeme, resp. zmenšujeme obrázok).

6.2 Obrázok zo súboru

Obrázok zo súboru vložíme cez Vložit; Obrázek; Ze souboru. Otvorí sa štandardná tabuľka na vyhľadanie súboru, kde si súbor vyhľadáme, kliknutím označíme a našu voľbu potvrdíme kliknutím na tlačítko Vložit.

6.3 Vytvorenie galérie obrázkov

Pri tvorbe galérii obrázkov si musíte najskôr vytvoriť jednostránkový web (pokiaľ budete vytvárať len jednoduchú stránku nebude sa dať uložiť!). Ak chceme použiť viac obrázkov na stránke, je vhodné ich umiestniť do galérie pomocou Vložit; Obrázek; Nová galerie fotografií. Otvorí sa nám okno, v ktorom si cez tlačítko Přidat pridáme obrázky (vyberáme obrázky napr. zo súborov, ktoré máme uložené v našom počítači). Pre každý obrázok (pracujeme práve s tým obrázkom, ktorý je označený modrým prúžkom a vidíme jeho miniatúru) môžeme nastaviť Velkost

miniatury, napísať mu Titulok a Popis. Pre titulok a popis si môžeme zvoliť typ písma, veľkosť, farbu a rez písma.  Ak chceme túto možnosť využiť, musíme kliknúť pred Přepsat a použít vlastní formátování písma. Ak sa rozhodneme, že niektorý zo zvolených obrázkov nepoužijeme, môžeme naň kliknúť a tlačítkom Odebrat ho vymazať z galérie.

Pred vložením do galérie môžeme obrázky upravovať. Kliknutím na tlačítko Upravit sa nám obrázok otvorí na úpravu a môžeme mu meniť veľkosť, otáčať ho a aj orezať. V tejto voľbe môžeme tlačítkami Předchozí a Další prejsť na ďalší obrázok a upraviť ho. Ak už nebudeme chcieť upravovať obrázky, klikneme na tlačítko OK.

Kliknutím na záložku Rozložení si môžeme zvoliť z ponúknutých typov galérií kliknutím na názov a tlačítko OK.

7 Tvorba webu

Ak chceme vytvoriť web (súbor stránok), ktoré budú neskôr publikované na internete, treba mať na pamäti, že stránky by mali byť robené v jednotnom štýle (tzn. rovnako naformátovať nadpisy, text, odkazy…).

Z úvodnej ponuky si klikneme na        , podokno úloh sa zmení:  

Kliknutím na          sa nám otvorí okno so sadami webových súborov.

Zvolíme Normální stránku a klikneme na tlačítko OK.

Všetko, čo vytvoríme, uložíme do jedného priečinka. Stránky ukladáme pod nejakým menom. Meno bude obsahovať iba alfanumerické znaky, vždy bez diakritiky. Meno súboru tak isto nesmie obsahovať medzeru. Windows síce umožňuje dlhé názvy súborov s medzerami a našimi diakritickými znakmi, avšak pri publikovaní webu  na internete to často robí chyby, internetový prehliadač nevie nájsť takého súbory. Ak chceme  použiť viacslovný názov, slová neoddeľujeme od seba medzerami, ale znakom _ (napr. prva_strana). Úvodnú stranu uložíme pod názvom index.html (FP ju vytvára automaticky). Vytvoríme si adresár kde budeme celú stránku ukladať.

7.1 Hypertextové odkazy

Aby sme mohli prejsť z jednej stránky na druhú, musíme na ne vložiť tzv. hypertextové odkazy (linky). V súbore si vyznačíme text (obrázok, časť obrázku), na ktorý chceme vložiť odkaz a otvoríme cez menu Vložiť; Hypertextový odkaz.

Odkaz na súbor

Po otvorení ponuky si vyberieme súbor, na ktorý sa má odkázať. Svoju voľbu potvrdíme tlačítkom OK.

7.2 Odkaz na existujúcu webstránku

Ak sa chceme odkázať na existujúcu webstránku, tak v predchádzajúcom okne do riadku Adresa napíšeme jej adresu:

7.3 Odkaz na e-mailovú adresu

Pri vytváraní odkazu na e-mailovú adresu postupujeme nasledovne: Označíme text, na ktorý chceme vložiť odkaz na e-mailovú adresu. Cez menu Vložit; Hypertextový odkaz v tabuľke Vložit hypertextový odkaz klikneme na E-mail adresu a do riadku pod výraz E-mailová adresa ju dopíšeme.

7.4 Webové súčasti

Na stránkach môžeme používať aj rôzne webové súčasti (komponenty). V menu otvoríme Vložit; Navigace. Otvorí sa okno, kde si vyberieme v ľavej časti typ komponentu a v pravej časti efekt. Kliknutím na tlačítko Dokončit sa nám otvorí okno, kde si efekt dodefinujeme.

7.5 Bežiaci text

Bežiaci text je dynamický efekt (Vložit; Navigace; Dynamické efekty; Bežící text; Dokončit). Po otvorení okna vlastnosti bežiaceho textu do riadku text dopíšeme text, ktorý sa bude pohyboval na stránke, zvolíme smer textu, rýchlosť chovanie, veľkosť a opakovanie. Keď si všetko navolíme, svoju voľbu potvrdíme kliknutím na tlačítko OK. Ak budeme chcieť pozrieť, či sme si všetko navolili podľa našich predstáv, musíme sa prepnúť do náhľadového režimu.

7.6 Interaktívne tlačítko

Interaktívne tlačítko je tiež dynamický efekt (Vložit; Navigace; Dynamické efekty; Interaktivní tlačítka; Dokončit).

V okne, ktoré sa otvorí, máme tri záložky, cez ktoré definujeme vlastnosti interaktívneho tlačítka. V záložke Tlačítko si vyberieme, aké tlačítko chceme použiť (Tlačítka) – vidíme to v náhľade po kliknutí na názov tlačítka, aký text má byť zobrazený na tlačítku (Text) a kam sa máme dostať po kliknutí na tlačítko (Odkaz)

Písmo na tlačítku si môžeme upraviť v záložke Písmo. Môžeme meniť font, rez, veľkosť, farbu a umiestnenie písma.

8 Umiestnenie stránky na web priestor

Súčasťou imagu každej úspešnej firmy, či jednotlivca je profesionálna adresa svojej web stránky a ekvivalentné emaily. Prezentujte sa na vysokej úrovni s profesionálnym webhostingom.

8.1 Druhy webhostingu

Neplatený webhosting je výhodný tým, že sa nemusí platiť za priestor na servery kde je umiestnená web stránka. Môže však mať veľa nevýhod ako nútená reklama, ktorá bude umiestnená na vašom a väčšinou má takýto webhosting veľmi málo miesta.

Platený webhosting je priestorom ktorý je poskytnutý len pre konkrétny web. Na internete sa dá nájsť celá škála cenových relácií poskytovateľov webhostingu a záleží už len na vás koho si na spravovanie vášho webu vyberiete.

8.2 Umiestnenie na web priestor (webhosting)

Na každej stránke ktorá poskytuje webhosting je popísaný postup umiestnenia stránky na web.

Pre nahratie stránky na web sa najčastejšie využíva FTP (File Transfer Protocol) prenos, ktorý je najlepší na presúvanie veľkých súborov cez Internet. FTP je klient/server protokol ktorý umožňuje užívateľovi s FTP klientom prihlásiť sa k vzdialenému počítaču, pohybovať sa v jeho adresároch, a nahrať alebo kopírovať (sťahovať si) jeho súbory. Na Internete sú dva základné typy FTP: Anonymous FTP a Private FTP. Pri Anonymous FTP, sa prihlasuje na vzdialený počítač ako user (užívateľ) „anonymous,“ a ako password (heslo) sa zadáva e-mail adresa. Pri Private FTP, sa prihlasuje na vzdialený počítač s username a password, ktoré sú založené na vzdialenom systéme. Prihlásením do domovského adresára v ktorom sú práva (zapisovať, mazať…). Klienti používajú FTP zväčša na upload resp. update svojich stránok a prístup je povolený užívateľom s platným menom a heslom.