OBCHODNÍ AKADEMIE ORLOVÁ
Aplikace na PC
ELEKTRONICKÁ UČEBNICE WEBOVÝCH STRÁNEK POMOCÍ SW DREAMWEAVER
ROMAN POLÁČEK
ORLOVÁ 2010
PROJEKT: INOVACE VÝUKY A TVORBA DIGITÁLNÍCH UČEBNÍCH MATERIÁLŮ
PRO OBOR VZDĚLÁVÁNÍ INFORMAČNÍ TECHNOLOGIE
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky
Tento projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky
01. Pracovní plocha
Při prvním spuštění aplikace Dreamweaver 8 se nám zobrazí standardní pracovní
plocha. Tato plocha je rozdělena do několika částí podle funkčnosti. Vlevo nahoře se
nachází panel nástrojů, které slouží především pro vkládání objektů do stránek,
vpravo vidíme panely, které slouží pro práci se stránkami jako je struktura stránek,
CSS apod. Dole vidíme panel vlastností jednotlivých objektů vložených do stránek.
Panel nástrojů slouží pro vkládání objektů do stránek jako jsou například tabulky,
text, obrázky apod.
Pro lepší přehlednost je tento panel rozdělen do několika kategorií, které jsou
přístupné po rozkliknutí menu.
Kategorie můžeme zobrazit najednou, a to formou záložek. Pokud tuto možnost
preferujeme, zvolíme možnost Show as Tabs z rozbalovacího menu. Jednotlivé
kategorie se budou zobrazovat po kliknutí na příslušnou záložku.
Můžeme také vytvořit vlastní kategorii, do které dáme nástroje, které používáme
nejčastěji. Vybereme záložku Favorites, klikneme do záložky pravým tlačítkem myší
a zvolíme Customize Favorites..
Ukáže se nové okno, ve kterém si zvolíme z levého panelu, které nástroje chceme,
aby se ukázaly v našem menu. Pořadí nástrojů můžeme upravit pomocí šipek nahoru
a dolů. Pokud chceme nějaký nástroj odstranit, vybereme ho a klikneme na koš.
Nástroje lze od sebe rozdělit přepážkou – tlačítko Add separator. Po nastavení
panelu potvrdíme OK a naše volby se uloží.
Panel nástrojů můžeme schovat/zobrazit pomocí klávesové zkratky CTRL+F2 nebo
Window – Insert.
Panel vlastností je jedním z nejdůležitějších panelů, které používáme, protože
pomocí tohoto panelu můžeme ovládat vlastnosti jednotlivých objektů na stránce.
Panel vlastností se mění podle toho, který objekt máme vybraný. Na obrázku vidíme
vlastnosti textu. Můžeme zde upravit styl text, font atd.
Na dalším obrázku vidíme panel, kdy byla vybrána tabulka. Vlastnosti se změnily a
nyní můžeme nastavit velikost tabulky, barvu ohraničení, pozadí atd.
Panel se skládá ze dvou částí, které lze rozbalit po kliknutí na trojúhelník v pravém
dolním rohu. Panel můžeme schovat/zobrazit pomocí klávesové zkratky CTRL+F3
nebo Window – Properties.
Panely se nacházejí na pravé straně a slouží pro práci se stránkami. Panely jsou pro
větší přehlednost rozděleny do skupin podle svých vlastností. Každá skupina má
před svým jménem rozbalovací trojúhelník, kterým se nám zobrazí jednotlivé
možnosti. Každá skupina obsahuje několik záložek.
Panel můžeme schovat/zobrazit pomocí klávesové zkratky F4 nebo Window – Hide
panels (Show panels). Nebo můžeme použít tlačítko na levém okraji panelů.
02. Start page – úvodní stránka
Úvodní stránka slouží k rychlému přístupu. Pomocí této stránky můžeme rychle
otevřít dokument, se kterým jsme již dříve pracovali (levý sloupek). Pokud
potřebujeme vytvořit nový dokument, poslouží nám prostřední sloupek, který nám
dává možnosti pro vytvoření dokumentu typu HTML, PHP, XML apod.
Pokud nevidíme typ dokumentu, který potřebujeme, vždy můžeme kliknout na More..
a v novém okně vybrat požadovaný typ dokumentu.
Ve třetím sloupku můžeme vybrat nový dokument na základě šablony. Stačí pouze
vybrat kategorii a typ stránky.
V pravém dolním rohu můžeme najít Dreamweaver Exchange, který slouží pro
stáhnutí dalších doplňků a rozšíření možností programu. Dále pak vidíme upozornění
na aktualizace produktu – v této chvíli nás upozorňuje na novou verzi Adobe Creative
Suite. V levé části pak vidíme odkazy na www stránky s dalšími informacemi o
aplikaci.
Pokud nechceme, aby se nám úvodní stránka pokaždé zobrazovala, můžeme ji
vypnout v Edit – Preferences – General a odškrtnout Show start page.
03. Nový dokument
Nový dokument můžeme vytvořit několika způsoby. První způsob je použití úvodní
stránky, druhý za pomocí menu File – New – Basic Page – HTML nebo použitím
klávesové zkratky CTRL+N.
Další možností je v panelu Files kliknout do kořenového adresáře pravým tlačítkem
myši a zvolit New File – pro soubor nebo New Folder – pro složku. Pokud takto
vytváříte nový soubor nezapomeňte dopsat i správnou příponu.
Dokument můžeme používat ve třech různých módech – code, split, design. Design
mód je standardní a zobrazuje se pokaždé, když vytvoříme stránku. Pokud
potřebujeme vidět kód, který tvoříme, klikneme na Code.
Volba split nám rozdělí obrazovku na dvě části. V horní polovině vidíme kód, ve
spodní stránku. Změny provedené v kódu se zobrazí na stránce a naopak.
Každá stránka by měla obsahovat titulek. Titulek vložíme do oblasti označené jako
Title. Tilulek se bude zobrazovat v internetovém prohlížeči v levém horním rohu.
Další možnosti, které vidíme, slouží ke kontrole validity dokumentu, nahrávání
dokumentu na internet, prohlížení dokumentu v internetovém prohlížeči.
Poslední skupinu tvoří vizuální pomůcky jako jsou mřížka, pravítka, zobrazovaní
skrytých objektů apod. Vše můžeme zobrazit/schovat zaškrtnutím příslušné položky
po rozbalení menu.
Pokud máme otevřeno více dokumentů, zobrazují se nám formou záložek. Pokud
jsme dokument ještě neuložili, jeho jméno bude Untitled-1, Untitled-2 atd. Dokument
uložíme volbou File – Save nebo CTRL+S. Pokud už máme dokument uložený a
provedli jsme v něm změny, které jsme ještě neuložili, u jména souboru se objeví
hvězdička.
Ve spodní části dokumentu vidíme další možnosti. První je tzv. Tag Selector, který
slouží k rychlému vybrání objektu na základě jeho HTML tagu – značky. Protože na
stránce nejsou žádné objekty, vidíme pouze tag body.
Další skupina ikonek slouží pro práci s dokumentem. Můžeme si dokument přiblížit
(lupa), nastavit % přiblížení (100%), hýbat s přiblíženým dokumentem (ruka) nebo
vybírat objekty v dokumentu (černá šipka).
Poslední dvě možnosti nám umožní zobrazit dokument v různém rozlišení obrazovky,
např. 800x600 nebo 1024x768 atd., a zobrazí dobu, jak dlouho se bude dokument
načítat.
Pro správné zobrazení diakritiky na stránce potřebujeme změnit kódování stránky.
Pomocí Edit – Preferences – New Document změníme Default encoding na
znakovou sadu, která podporuje české znaky, např. UTF-8. Potom vytvoříme nový
dokument a v hlavičce uvidíme nastavenou novou znakovou sadu.
04. Internetový prohlížeč
Důležitou částí tvorby www stránek je kontrola toho, jak vaše stránky vypadají
v různých internetových prohlížečích. Aplikace Dreamweaver nám umožňuje
prohlížení stránek v prohlížečích, které máme nainstalované.
Pokud potřebujeme přidat nový prohlížeč do seznamu, zvolíme možnost Edit
Browser List nebo Edit – Preferences – Preview in browser.
Zde vidíme seznam existujících prohlížečů, který můžeme upravit. Pokud chceme
přidat nový prohlížeč, klikneme na + (plus) a následně Browse a najdeme umístění
prohlížeče. Prohlížeč dále můžeme označit jako primární nebo sekundární podle
toho, který prohlížeč používáme nejčastěji.
Pokud máme vše nastaveno, potvrdíme OK. Prohlížeč můžeme odebrat pomocí
tlačítka – (mínus). Stránku v prohlížeči otevřeme kliknutím na ikonku zeměkoule a
vybráním příslušného prohlížeče nebo klávesou F12 (primární) nebo CTRL+F12
(sekundární prohlížeč).
-
Přidejte do aplikace další internetové prohlížeče, které máte
nainstalované na svém počítači. Nastavte jeden prohlížeč jako výchozí
(primární).
05. Kořenový adresář
Protože můžeme pracovat na více projektech, je dobré vytvořit si kořenový adresář,
ve kterém budou všechny potřebné dokumenty, obrázky, styly apod., se kterými
budeme pracovat. Vytvořením kořenového adresáře se stane náš projekt
přehlednější. Pokud potřebujeme vytvořit nový kořenový adresář, zvolíme
Site – New site. V průvodci klikneme na záložku Advanced.
V záložce Advanced vidíme několik kategorií. Protože vytváříme kořenový adresář
pro statické stránky, které zatím nebudeme nahrávat na internet, stačí nám kategorie
Local Info. Nejdříve dáme našemu kořenovému adresáři jméno. Jménem může být
cokoliv, slouží pouze pro naši orientaci. Jméno nastavíme v řádku Site name.
Jako další potřebujeme nastavit, kde se nacházejí soubory, se kterými budeme
pracovat. K tomu nám poslouží řádek Local root folder. Klikneme na ikonku na
konci řádku a najdeme složku, ve které se nacházejí naše soubory a potvrdíme
Uložit. Od této chvíle se všechny stránky budou ukládat do této složky.
Zatím je to vše, co potřebujeme nastavit, proto nám stačí potvrdit OK a Dreamweaver
vytvoří kořenový adresář. Výsledek vidíme v pravém panelu Files, který zobrazuje
jméno našeho projektu (NFS) a strukturu souborů.
Vytvořte nový kořenový adresář a do tohoto adresáře vytvořte následující
strukturu:
images
logo.jpg
logo_small.jpg
css
style.css
media
video.mpg
js
jquery.js
index.html
kontakt.html
produkt.html
informace.html
Pokud nemáte, nastavte kódování stránky na UTF-8 dříve, než začnete
vytvářet *.html stránky. Na každou stránku vložte vhodný titulek.
06. Vkládání obrázků
Existuje několik způsobů, jak vložit obrázek do stránky. První způsob je použití
Assets panelu v menu Files. Výhoda tohoto panelu spočívá v tom, že vidíme
všechny obrázky, které se nacházejí v celém adresáři a stačí nám zvolený obrázek
chytit a přetáhnout na stránku.
Pokaždé, když vkládáme obrázek do stránky, program se nás zeptá na alternativní
text. Tento text nám slouží v případě, kdy se obrázek nezobrazil, aby uživatel věděl,
co mělo být na jeho místě. Proto je dobré vkládat vhodný alternativní text.
Vložený obrázek můžeme vidět níže.
Druhý způsob je použití panelu nástrojů. Klikneme na záložku Common a najdeme
ikonku Images, kterou rozbalíme a vybereme možnost Image.
V novém okně najdeme složku, ve které se nachází obrázky, a vybereme potřebný
obrázek. Pokud chceme vidět náhledy obrázků, je třeba mít zaškrtnutou volbu
Preview images. Vybraný obrázek vložíme potvrzením OK.
Třetím způsobem je použití Files panelu. V tomto panelu stačí rozbalit složku, ve
které se nachází obrázky a požadovaný obrázek opět přetáhnout na stránku.
Nevýhodou je, že nevidíme, jaký obrázek vkládáme.
Poslední způsob je vložení přes Insert – Image . Opět najdeme složku, kde máme
uložené obrázky, a vložíme.
Pokud nemáme obrázek, můžeme použít Image Placeholder – místo, které bude
vyhrazeno pro budoucí obrázek. Pomocí volby Insert – Image Objects – Image
Placeholder vložíme objekt na stránku a dále ho můžeme upravovat jako obrázek.
Nastavíme rozměry stejné jako bude mít náš obrázek, přidáme alternativní text a
můžeme dát i barvu, kterou rozlišíme jednotlivé oblasti, pokud jich máme více.
Až budeme mít potřebný obrázek, náš placeholder můžeme jednoduše nahradit.
Stačí v řádku Src napsat cestu k obrázku nebo můžeme použít terčík, případně
složku, a najít obrázek.
Pokud potřebujeme změnit rozměr obrázku, stačí ve vlastnostech obrázku změnit
hodnoty W (šířka) nebo H (výška).
-
-
Vytvořte nový kořenový adresář a v něm vytvořte složku images, do které
nakopírujte vlastní obrázky. Vyzkoušejte různé způsoby vkládání
obrázků. Nezapomeňte přidat vhodný alternativní text u každého
obrázku.
Vytvořte na stránce placeholder a později ho nahraďte existujícím
obrázkem.
07. Vkládání textu
Vkládání textu je stejné jako u textového editoru. V místě, kde nám bliká kurzor,
začneme psát text, který se zobrazí na stránce. Při psaní textu nemůžeme udělat
více mezer za sebou. Pokaždé, když zmáčkneme Enter, vytvoří se nový odstavec.
Mezi dvěmi odstavci se udělá mezera, do které nelze kliknout ani nic vložit.
Pokud potřebujeme napsat dva řádky pod sebou je třeba na konci prvního
zmáčknout Shift+Enter.
Pokud kopírujeme text z jiného zdroje (word, textový soubor apod.), můžeme použít
volbu kopírovat – vložit. V programu existuje speciální funkce, která nám umožní
ovlivnit způsob vložení textu na stránku. Tuto funkci najdeme v menu
Edit – Paste special . Zde máme na výběr z několika možností:
Text only – vloží text a pokud obsahoval nějaké formátování, odstraní ho.
Text with structure – vloží text a zachová základní strukturu – odstavce, seznamy
apod. .
Text with structure plus basic formatting – vloží text, strukturu a základní
formátování písma typu tučné, kurzíva apod. .
Text with structure plus full formatting – vloží text, strukturu a úplné formátování
písma jako jsou styly apod.
Na obrázku vidíme několik způsobů vložení – text only, text with structure, text with
structure plus full formatting.
08. Základní úpravy textu a obrázků
Základní úpravy textu a obrázku se provádí pomocí panelu Properties – vlastností
daného objektu. Veškeré objekty vložené na stránku se standardně zarovnávají
vlevo. Pokud chceme toto zarovnání změnit, podobně jako u aplikace Word zvolíme
příslušnou ikonku a text (nebo obrázek) se zarovná. Pokud zarovnáváme obrázek, je
ho třeba mít vybraný. Pokud zarovnáváme text, stačí umístit kurzor do řádku
s textem, který chceme zarovnat.
Při zarovnávání textu nelze zarovnat pouze část textu. Vždy se zarovnává celý
odstavec.
Pokud máme text a obrázek na stejném řádku, text se standardně zarovnává ke
spodnímu okraji obrázku.
Pokud chceme upravit pozici obrázku vůči textu, máme několik možností. Vybereme
obrázek a ve vlastnostech najdeme Align.
Možnost Top vezme první řádek textu a umístí ho k hornímu okraji obrázku, zbytek
nechá pod obrázkem. Možnost Middle umístí první řádek textu doprostřed obrázku,
možnost Bottom umístí text ke spodnímu okraji obrázku. Možnost Text top umístí
horní okraje písma k hornímu okraji obrázku. Podobně funguje Absolute middle
(doprostřed) a Absolute bottom (dolů). Tyto možnosti se nejčastěji používají, pokud
máme jen jeden řádek textu.
Nejčastěji používané možnosti jsou Left a Right, kdy text obtéká kolem obrázku
zprava nebo zleva.
Pokud potřebujeme obrázek odsadit od textu, ve vlastnostech obrázku najdeme
V Space nebo H Space a vložíme hodnoty. Odsazení se provede z obou stran
(nahoře-dole nebo vlevo-vpravo). Pokud tyto možnosti nevidíme, je třeba rozbalit celý
panel Properties (bílý trojúhelník v pravém dolním rohu).
09. Page properties – vlastnosti stránky
Page properties slouží k nastavení vlastností celé stránky, jako jsou například barva
pozadí, barva odkazů, velikost textu apod. Vlastnosti stránky můžeme otevřít pomocí
Modify – Page properties nebo kliknutím na tlačítko v panelu Properties.
Nastavení vlastností stránky je poměrně jednoduché. Můžeme nastavit typ písma
(Page font), velikost písma (Size), barvu písma (Text color), barvu pozadí
(Background color) a pokud chceme v pozadí obrázek nebo opakující se vzor,
zvolíme Background image.
V záložce Links můžeme nastavit barvu odkazů na stránce:
Link color – výchozí barva odkazu
Visited links – barva odkazu, který jsme navštívili
Rollover links – barva odkazu, na který jsme najeli kurzorem
Active links – odkaz, který je právě aktivní
Dále můžeme nastavit styl podtržení (Underline style):
Always underline – odkazy budou vždy podtržené
Never underline – odkazy nebudou nikdy podtržené
Show underline only on rollover – odkazy se podtrhnou pouze po najetí kurzorem
Hide underline on rollover – podtržení odkazů se schová po najetí kurzorem
-
Vytvořte nový kořenový adresář a v něm vytvořte stránky index.html,
produkt.html, kontakt.html.
Pro každou stránku pomocí Page properties vytvořte jiné pozadí, barvu,
velikost a typ písma.
Na libovolné stránce vytvořte pozadí pomocí obrázku.
Změňte barvy odkazů.
10. Meta tags
Meta tags slouží hlavně pro vyhledávací roboty, indexaci stránek, zadávání
klíčových slov pro vyhledávače apod. Tyto prvky se neobjevují nikde na stránce, jsou
viditelné pouze v kódu stránky. Pro přidání značky vybereme záložku HTML a poté
rozbalíme možnost Head.
Mezi nejčastěji používané značky patří Keywords – klíčová slova. Jednotlivá slova
se oddělují čárkou. Slouží pro vyhledávací roboty.
Další značka je Description. Tato značka slouží ke krátkému popisu obsahu stránek.
Vložené značky můžeme vidět v kódu stránky.
11. Links – propojování stánek
Existuje několik způsobů, jak navzájem propojit stránky. První způsob jsou textové
odkazy. Vybereme slovo(a), která mají tvořit odkaz, v panelu vlastností najdeme
řádek Link.
Klikneme na složku a najdeme soubor, který má tento odkaz otevřít. Potvrdíme OK.
Odkaz se nám standardně podtrhne a zbarví modře.
Rychlejší způsob jak vytvořit odkaz je tzv. point to file. Znovu vybereme slovo pro
náš odkaz. Na řádku Link najdeme terčík, chytneme ho a přitáhneme k souboru,
který má tento odkaz otevřít. Poté terčík pustíme a do řádku Link se automaticky
vloží název stránky, na kterou odkazujeme.
Stejným způsobem můžeme vytvořit odkaz z obrázku. Stačí vybrat obrázek a ve
vlastnostech najít řádek Link a použít terčík nebo složku.
Pokud potřebujeme udělat odkaz na existující stránku na internetu, vytvoříme tzv.
externí odkaz. Na řádek Link musíme napsat webovou adresu ve tvaru
http://www.neco.com . V našem případě budeme odkazovat na stránku EA Sports,
proto do odkazu napíšeme http://www.easports.com .
Barvu odkazů můžeme upravit pomocí Page properties. Po otevření page
properties klikneme na záložku Links a nastavíme požadované barvy. Link color je
barva odkazu před kliknutím. Rollover links je barva odkazu, když na něj najedeme
kurzorem a Visited links je barva odkazu, na který jsme už klikli. Active links je
barva odkazu, který je právě aktivní.
Dalším typem odkazu je odkaz na e-mail. Jeho vytvoření je poměrně jednoduché. Na
záložce Common najdeme ikonku obálky a v novém okně do prvního řádku
napíšeme text tvořící odkaz a do druhého řádku e-mail. Potvrdíme OK a odkaz se
vytvoří na stránce.
Druhou možností je vybrat text, který má tvořit odkaz a do řádku Link napsat
mailto:[email protected]
12. Links 2 – odkazy na stránce
Pokud je text na stránce příliš dlouhý, můžeme udělat odkazy na této stránce tak,
aby se dalo v jednotlivých částech stránky pohybovat. Nejdříve vytvoříme navigaci na
začátku stránky, která nás bude odkazovat na jednotlivé části. Protože nemůžeme
vytvořit odkaz přímo na část textu, musíme si vytvořit tzv. anchor (kotvu) – místo, na
které budeme odkazovat. Nejdříve najdeme místo, kde chceme odkaz udělat –
v našem případě před větou HW požadavky – a klikneme. Potom ze záložky
Common vybereme kotvu a do nového okna napíšeme jméno odkazu. Jméno musí
být bez diakritiky a nejlépe jedno slovo.
Výsledkem bude kotva, která se objeví před větou. Jedná se o tzv. neviditelný prvek,
který se v internetovém prohlížeči neukazuje. Pokud kotvu nevidíme, klikneme na
ikonu oka a přesvědčíme se, zda máme zaškrtnutou možnost Invisible elements.
Stejným způsobem vytvoříme další dvě kotvy (pro seznam aut a cheaty) a vhodně
pojmenujeme. Pokud máme kotvy vytvořené, vybereme text, který má sloužit jako
odkaz a terčík přitáhneme na první kotvu. Pokud jsme udělali vše správně, v řádku
link by se nám měl objevit odkaz #hw.
Podobně můžeme vytvořit odkaz na začátek stránky. U navigace vytvoříme kotvu a
dáme jí jméno top. Na stránce vytvoříme odkaz „nahoru“ a opět ho spojíme s kotvou
u navigace. Pokud potřebujeme, můžeme odkaz zkopírovat a vložit do dalších částí
stránky.
-
Vytvořte nový kořenový adresář a v něm vytvořte stránky index.html,
produkt.html, kontakt.html. Na stránky vložte libovolný text nebo obrázky.
Na každé stránce vytvořte navigaci, která bude propojovat stránky mezi
sebou.
Na stránce kontakt.html vytvořte odkaz na e-mail.
Na stránce index.html vytvořte 2 odkazy na jiné existující webové
stránky.
Pomocí Page properties na každé stránce změňte styl podtržení a barvy
jednotlivých odkazů.
Na stránce produkt.html vytvořte navigaci, která bude odkazovat na
jednotlivá místa na této stránce.
Na stránku index.html vložte keywords (pro vyhledávače) a description
(popis stránek).
13. Image maps – tvorba klikacích oblastí
Pokud máme velký obrázek, u kterého chceme, aby jednotlivé části obrázku
odkazovaly na různé stránky, použijeme Image maps.
Pokud potřebujeme vytvořit klikatelnou oblast (hotspot), vybereme obrázek a ve
vlastnostech najdeme ikonku modrého obdélníku. Pak v našem obrázku nakreslíme
oblast, která má být klikatelná. Nakonec v řádku Link spojíme oblast se stránkou,
kterou má otevřít. Pokud potřebujeme hotspot posunout, přepneme se na černou
šipku a můžeme s oblastí hýbat.
Stejným způsobem vytvoříme oválný hotspot.
Pokud potřebujeme vytvořit nepravidelný hotspot, použijeme nástroj Polygonal
hotstop tool a pomocí tohoto nástroje klikáme kolem části obrázku, která má být
klikatelná.
Při vytváření těchto oblastí je důležité, aby se jednotlivé oblasti nepřekrývaly, jinak by
nefungovaly.
-
-
Vytvořte nový kořenový adresář a v něm vytvořte stránky index.html,
produkt.html, kontakt.html. Dále vytvořte složku images, do které vložíte
své obrázky. Na stránky produkt nebo kontakt vložte libovolný text nebo
obrázky.
Na stránku index vložte obrázek a upravte tento obrázek tak, aby jeho
různé části odkazovaly na stránky produkt a kontakt. Vyzkoušejte různé
typy těchto oblastí.
14. Formátování textu
Podobně jako u textového editoru musíme nejdříve vybrat text, který chceme
formátovat. Když máme text vybraný, ve vlastnostech najdeme možnost Size a
rozbalíme.Vidíme několik předem nadefinovaných velikostí písma. Zvolíme
potřebnou velikost a text se upraví.
Dále si můžeme nastavit, v jakých jednotkách se má velikost zobrazovat. Na výběr
máme cm, inch, pixel atd.
Podobně nastavíme typ písma. Rozbalíme možnost Font a vybereme jednu skupinu.
Fonty jsou rozdělené do skupin podle typu písma. Např. při zobrazení stránky se
bude hledat font Verdana. Pokud tento font není nainstalován na pc, bude se hledat
font Arial. Pokud ani tento není nalezen, použije se font Helvetica. A pokud není
nalezen ani jeden z předcházejících fontů, použije se font sans-serif.
Pokud si chceme vytvořit vlastní skupinu zvolíme možnost Edit Font List a v novém
okně ze sekce Available fonts vybereme fonty, které chceme použít. Pořadí skupin
můžeme měnit pomocí šipek v pravé části. Skupiny můžeme přidat nebo odebrat
použitím +/- v levé části. Pokud máme skupinu vytvořenou, potvrdíme OK.
Nová skupina se zobrazí jako poslední a můžeme ji použít na text.
Pro změnu barvy textu najdeme ve vlastnostech šedý čtvereček. Po kliknutí se nám
objeví barevná paleta a pomocí kapátka vybereme požadovanou barvu.
Výhodou kapátka je, že s jeho pomocí můžeme vybrat libovolnou barvu na stránce.
Pokud potřebujeme naformátovat celý odstavec najednou, můžeme použít předem
nadefinované velikosti. Stačí kliknout do odstavce, rozbalit volbu Format a vybrat
požadovanou velikost. Heading 1 je největší, Heading 6 nejmenší.
Pro zarovnání textu můžeme použít ikonky zarovnat vlevo, na střed, vpravo, do
bloku. Dále můžeme vytvořit seznam s odrážkami nebo číselný seznam.
Text můžeme také odsadit od okraje.
Vytvořte nový kořenový adresář. V adresáři vytvořte 4 soubory a pojmenujte
je: jedna.html, dva.html, tri.html, ctyri.html. U stránky ctyri nastavte kódování
stránky na: Středoevropské jazyky (windows), u ostatních UTF-8.
Stránka jedna
na stránku vložte titulek: strana jedna
na stránku vložte libovolný text a pokud má formátování, tak ho zrušte
z první věty vytvořte nadpis a naformátujte pomocí Heading 3
text na stránce zkopírujte, vytvořte několik odstavců a každý odstavec
naformátujte:
odstavec 1 - velikost písma 14px, barva černá
odstavec 2 - velikost písma 70%, barva červená
odstavec 3 - velikost písma 1.1ems, barva modrá
odstavec 4 - velikost písma 14 points, tučně, kurzíva
Stránka dvě
na stránku vložte titulek: strana dvě
na stránku vložte libovolný text a pokud má formátování, tak ho zrušte
text nastavte na písmo Verdana, 14px, hnědá barva
na stránku vložte obrázek, přidejte alternativní text a zarovnejte do textu
vpravo
kolem obrázku vytvořte ohraničení 2px tlusté
vložte vhodná klíčová slova vztahující se k textu
Stránka tři
na stránku vložte titulek: strana tři
pomocí Page properties nastavte stránku tak, aby měla světle šedé
pozadí, písmo Arial, 12px, bílé
na stránce vytvořte dva seznamy: jeden s odrážkami, druhý s čísly
u druhého seznamu změňte barvu písma na tmavě modrou
dále na stránku vložte 3 odstavce textu:
první zarovnejte doprava, druhý na střed, a třetí vlevo a odsaďte
od okraje
vložte vhodný popis stánek
Stránka čtyři
na stránku vložte titulek: strana čtyři
na stránku vložte text a nastavte písmo Georgia, 16px, černá barva
na stránku vložte obrázek, přidejte alternativní text a zarovnejte do textu
vlevo
na stránce vytvořte odkazy, které budou odkazovat na různá místa na
této stránce
každý odkaz naformátujte pomocí Heading 5
na stránce vytvořte odkaz pro e-mail
Na všech stránkách vytvořte navigaci, která propojí stránky mezi sebou
Nastavte vhodnou barvu odkazů
15. CSS – kaskádové styly
Kaskádové styly umožňují nastavit vzhled a pozici textů, obrázků a dalších elementů
na stránce. Kaskádové styly se většinou nacházejí v externím souboru, který je
k naší stránce připojen. K jedné stránce může být připojeno více kaskádových stylů.
Pomocí jednoho souboru s kaskádovými styly můžeme ovládat vzhled více stránek.
Kaskádové styly by měly být standardně zapnuty. Pokud nejsou, zvolíme
Edit – Preferences a v záložce General zaškrtneme Use CSS instead of HTML
tags.
Prvním typem kaskádových stylů jsou styly interní. Styly se ukládají do kódu stránky
a formátují pouze tuto stránku. Pro vytvoření nového stylu potřebujeme rozbalit panel
CSS a kliknout na ikonku s plus.
V novém okně zaškrtneme volbu This document only. Máme na výběr ze 3 typů
stylů.
Class – může být aplikován na libovolný tag (značku)
Tag – definuje vzhled specifického tagu (např. body, link, H2)
Advanced – aplikuje se na element s konkrétním názvem
Vybereme možnost Tag a z menu zvolíme H2. V novém okně můžeme nastavit
vlastnosti všech elementů na stránce, které mají označení H2. V záložce Type
můžeme nastavit velikost, typ, barvu písma atd. Pokud chceme vidět, jak nastavení
vypadá, stačí kliknout na tlačítko Apply a změny se okamžitě projeví.
Pokud jsme s výsledkem spokojeni, potvrdíme OK a styl se nám uloží. Kdykoliv
chceme styl upravit, stačí na něj 2x poklikat v panelu CSS. Ve spodní části panelu
vidíme Properties for „H2“, kde máme zobrazeno, jaké formátování jsme požili pro
tuto značku.
Dále vytvoříme styl, který bude formátovat odstavce. Opět klikneme na ikonku s plus
v panelu CSS a vybereme možnost Class a pojmenujeme „odstavec“. Název by měl
být jedno slovo a bez diakritiky. Pokud název nezačnete tečkou, program ji
automaticky doplní.
Nastavíme velikost písma, barvu a typ a potvrdíme OK. Protože se jedná o Class,
musíme si nejdříve vybrat, na co chceme tento styl aplikovat. Označíme odstavec a
ve vlastnostech najdeme možnost Style. Zde se nám zobrazí všechny styly, které
jsou Class. Vybereme příslušný styl a ten se aplikuje na celý odstavec. Na obrázku
vidíme první odstavec formátovaný stylem „odstavec“, druhý nemá žádný formát, a
proto zůstává nezměněn.
Styl typu Class se dá aplikovat na celý odstavec nebo na vybranou část textu.
Vytvoříme nový styl Class a pojmenujeme „nadpis“. Nastavíme velikost písma,
barvu, typ a uložíme. Vybereme část věty v prvním odstavci, na kterou aplikujeme
styl „nadpis“.
Poslední typ stylu je Advanced. Tento typ se používá, když chceme formátovat
pouze jeden specifický element. Např. máme na stránce 4 obrázky, všechny jsou
vlevo, ale pouze jeden chceme vpravo. Pro takový případ vytvoříme styl Advanced.
Jako první musíme dát našemu objektu jméno, abychom ho odlišili od ostatních.
Obrázek pojmenujeme jako „obal“ a vytvoříme nový styl. Styly typu Advanced
začínají vždy #.
Protože chceme, aby mezi textem a obrázkem byla větší mezera, najdeme záložku
Box a u volby Margin odškrtneme volbu Same for All a nastavíme hodnotu Right
na 10 pixel. Pokud chceme posunout obrázek více od kraje, nastavíme hodnotu Left
na 10 pixel.
Dále můžeme nastavit kolem obrázku ohraničení. Zvolíme záložku Border a
necháme všude zaškrtnuto Same for all. Zvolíme možnost solid, 3px a libovolnou
barvu ohraničení. Výsledkem bude obrázek, který má ohraničení 3px ze všech stran
a je odsazen zleva a zprava o 10px.
Pomocí CSS můžeme upravit barvy jednotlivých odkazů. Ve vlastnostech najdeme
tlačítko Page properties a klikneme na záložku Links. Zde nastavíme požadované
barvy.
Link color je barva odkazu před kliknutím.
Rollover links je barva odkazu, když na něj najedeme kurzorem.
Visited links je barva odkazu na který jsme už navštívili.
Active links je barva odkazu, který je právě aktivní.
Dále můžeme nastavit styl podtržení, typ a velikost písma.
Všechny styly, které jsme vytvořili, se ukládají do kódu stránky. Pokud chceme tyto
styly použít i na jiné stránky, je třeba styly exportovat do vlastního souboru.
Export se provádí za pomocí volby File – Export – CSS styles. Důležité je, abychom
styl uložili do našeho kořenového adresáře. Pokud jsme soubor uložili, můžeme jej
připojit k další stránce. V CSS panelu najdeme ikonku řetězu a klikneme. V novém
okně vybereme místo, kde jsme soubor uložili a necháme zaškrtnutou volbu link.
Výsledkem bude připojený externí soubor obsahující všechny styly, které jsme
vytvořili.
-
Vytvořte nový kořenový adresář a v něm vytvořte stránku index.html. Na
stránku vložte libovolný text nebo obrázky.
Pomocí kaskádových stylů vytvořte různé typy formátování pro jednotlivé
odstavce, nadpisy, části textu. Obrázkům nastavte vlastní jména a
vytvořte styly, které budou formátovat každý obrázek zvlášť.
Vyexportujte kaskádový styl do vlastního souboru.
Vytvořte novou stránku, vložte do ní text a obrázky a připojte k této
stránce existující kaskádový styl.
16. Tabulky
Tabulky se do stránek dají vložit několika způsoby. První způsob je kliknout na
záložku Common a vybrat ikonku Table. V novém okně nastavíme základní
vlastnosti jako je počet řádků, počet sloupců, šířka tabulky apod.
Rows – počet řádků
Columns – počet sloupců
Table width – šířka tabulky (může být v pixelech nebo procentech)
Border thickness – šířka okraje
Cell padding – mezery uvnitř buňky
Cell spacing – mezery mezi buňkami
Po vytvoření se tabulka vloží na stránku. Standardně se u tabulky zobrazuje její
celková šířka a šířka jednotlivých buněk (zelené čáry). Pokud nám toto překáží,
můžeme funkci vypnout kliknutím na oko a odškrtnutím Table widths.
Druhý způsob pro vložení tabulky je záložka Layout a opět ikonka tabulky. Případně
můžeme použít Insert – Table.
Existuje několik způsobu, jak vybrat v tabulce oblast buněk. První způsob je kliknout
do buňky, držet levé tlačítko myši a táhnout přes buňky, které chceme vybrat.
Vybrané buňky budou mít černý okraj.
Pokud chceme vybrat celou řadu (nebo sloupec) buněk, najedeme myší před začátek
řádku, až se nám objeví černá šipka a celá řada se ohraničí červeně. Pak stačí
kliknout a řada je vybrána.
Další možností je použití Tag Selector. Klikneme do jakékoliv buňky a vybereme
požadovanou značku, která nám označí oblast v tabulce. Kliknutím na značku table
se vybrala celá tabulka.
Podle toho, jakou část tabulky máme vybranou, se nám objevují její vlastnosti.
Pokud potřebujeme buňky sloučit, musíme je nejdříve vybrat a kliknout na ikonku
Merge (vlevo). Pro rozdělení buněk slouží ikonka Split (vpravo).
Tabulky můžeme rozdělit na dvě základní skupiny. První skupina jsou tabulky
s pevnou šířkou, druhá skupina jsou tabulky, které zabírají určité procento šířky
stránky.Tabulku s pevnou šířkou vytvoříme tak, že při vkládání nové tabulky
nastavíme hodnotu Table width v pixelech.
Pokud chceme nastavit i pevnou šířku u jednotlivých buněk v tabulce, klikneme do
buňky a ve vlastnostech nastavíme šířku – W. Toto provedeme v každém sloupci,
který má mít pevnou šířku.
Pokud vložíme do některé buňky text a ostatní buňky jsou prázdné, bude se buňka
s textem snažit vyplnit celou šířku tabulky, i když má buňka nastavenou pevnou
šířku. Toto se spraví, pokud do tabulky vložíme další obsah.
Pokud vložíme text do tabulky, všimneme si, že se zarovnává k levému okraji a
doprostřed buňky.
Pro změnu zarovnání vybereme všechny buňky, na kterých chceme změnu provést a
ve vlastnostech najdeme hodnotu Vert a změníme na Top. Tímto se obsah buněk
zarovná k hornímu okraji.
Pokud je obsah buněk příliš blízko u sebe, vybereme celou tabulku a ve vlastnostech
najdeme CellPad a vložíme hodnotu. Bude vložena mezera 15px ze všech stran
uvnitř buňky.
Při vložení hodnoty do CellSpace se udělá mezera mezi jednotlivými buňkami.
Druhá skupina tabulek jsou tabulky, které zabírají procento šířky stránky nebo
objektu, do kterého se tabulka vkládá. Vytvoření tabulky je stejné jako tabulky
s pevnou šířkou. Pouze u Table width změníme hodnotu na procenta. Další úpravy
tabulky jsou stejné jako v předchozím případě.
Pokud chceme nastavit šířku buňky, do řádku W vložíme hodnotu v procentech.
Velmi často se používá metoda zvaná „nesting“ – vložení jedné tabulky do druhé.
Můžeme vložit tabulku s procenty do tabulky s pevnou šířkou a naopak. Na příkladu
vidíme tabulku s červeným orámováním, která vyplňuje 100% šířky stránky. V této
tabulce je vnořená druhá tabulka s modrým orámováním, která má šířku 500 pixel a
je zarovnaná na střed. Při změně šířky stránky se modrá tabulka bude neustále držet
uprostřed stránky.
17. Formátování tabulek
Mezi základní možnosti formátování tabulek patří nastavení barvy pozadí a
ohraničení. Pokud chceme nastavit jednotnou barvu pozadí, vybereme celou tabulku,
a ve vlastnostech najdeme Bg color a nastavíme barvu. Pro ohraničení zvolíme
možnost Brdr color.
Můžeme také formátovat jednotlivé buňky nebo skupinu buněk. Opět vybereme
příslušnou buňku a ve vlastnostech vybrat hodnotu Bg a nastavit.
Tabulka může mít jako pozadí obrázek. Ve vlastnostech najdeme Bg image a
najdeme soubor, který má být v pozadí.
Můžeme také použít nadefinované styly. Nejdříve musíme vybrat tabulku a pak
zvolíme možnost Commands – Format table. V novém okně zvolíme styl, který
můžeme dále upravit.
Tabulky můžeme formátovat také pomocí kaskádových stylů. Vytvoříme nový styl,
nastavíme ho jako Tag a vybereme značku Table.
Pro tento styl nastavíme v záložce Border ohraničení tabulky vpravo a nahoře. Dále
vytvoříme styl pro buňky samotné. Zvolíme značku TD. Nastavíme ohraničení buňky
vlevo a dole.
Abychom se zbavili mezer mezi jednotlivými buňkami, vybereme tabulku a nastavíme
CellSpace na 0.
Výsledek můžeme vidět na obrázku.
-
Vytvořte nový kořenový adresář a v něm vytvořte stránku index.html.
Na stránce vytvořte několik tabulek. Pro každou tabulku použijte jiný typ
(šířka v pixelech nebo procentech).
Jednotlivé buňku v tabulce zkuste sloučit nebo rozdělit.
Vložte do buněk tabulky libovolný text a zarovnejte.
Vytvořte mezery uvnitř buněk i mezi buňkami.
Vyzkoušejte umístit jednu tabulku uvnitř druhé.
Nastavte u tabulek ohraničení, barvu pozadí.
Vyzkoušejte formátování tabulek pomocí přednastavených stylů.
18. Rollovers – grafické odkazy
Jedním ze způsobů, jak upozornit na odkaz, je za pomocí grafiky. K vytvoření
rollovers budeme potřebovat několik nachystaných obrázků, které budeme používat.
Na začátku bude jeden obrázek, když na něj najedeme, obrázek se změní na jiný.
Toto je základní princip při tvorbě rollovers.
První způsob je za použitím dvou obrázků. První se bude ukazovat na začátku, druhý
po najetí na odkaz. Pro vytvoření tohoto typu odkazu v záložce Common najdeme
ikonku Image a po jejím rozbalení vybereme možnost Rollover Image.
V novém okně nastavíme vlastnosti jako je jméno obrázku, alternativní text. Do řádku
Original Image vložíme obrázek, který se má ukazovat na začátku. Do řádku
Rollover Image vložíme obrázek, který se má ukázat po přejetí kurzorem myši. Aby
byl odkaz funkční, musíme do řádku When clicked go to URL vybrat jméno stránky,
která se má zobrazit po kliknutí.
Výsledkem bude vložený obrázek. Abychom vyzkoušeli funkčnost odkazu, musíme
stránku otevřít v prohlížeči. Stejným způsobem vytvoříme ostatní tlačítka.
Druhý způsob vytvoření odkazů je vytvoření menu. V záložce Common vybereme
Image a Navigation Bar.
V novém okně opět vyplníme potřebná pole. Pokud chceme přidat další odkaz,
použijeme tlačítko plus (+). Pro změnu pořadí odkazu použijeme šipky nahoru a dolů.
Up image je obrázek na začátku. Over image je obrázek, který se zobrazí, když na
něj najedeme myší. Down image je obrázek, který se zobrazí, když na odkaz
klikneme. Pomocí možnosti Insert můžeme vytvořit menu horizontální nebo
vertikální.
Abychom vyzkoušeli funkčnost odkazu, musíme stránku otevřít v prohlížeči.
Pokud jsme udělali chybu nebo chceme něco v menu změnit, musíme vybrat
obrázek, který chceme opravit a v panelu Tag najít záložku Behaviors. Zde
vybereme, co chceme opravit a 2x klikneme. V novém okně provedeme změny a
uložíme.
19. Formuláře
Pro správnou funkčnost formuláře potřebujeme vytvořit objekt Form, ve kterém
budou všechny části formuláře. Pro vytvoření zvolíme záložku Forms a vybereme
první ikonku Form. Tento objekt poznáme jako červenou přerušovanou čáru.
Klikneme dovnitř objektu a začneme vytvářet jednotlivé části formuláře. Pro větší
přehlednost je umístíme do tabulky.
Jako první vytvoříme textové pole pro jméno a e-mail. Klikneme do buňky, ve které
chceme mít textové pole a v záložce Forms zvolíme ikonu Text field.
Po vložení pole pojmenujeme (bez diakritiky) a můžeme nastavit šířku textového
pole – Char width – kolik znaků má být široké. Dále můžeme omezit počet
vložených znaků – Max Chars.
Stejným způsobem vložíme druhé textové pole. Opět pojmenujeme a pokud
potřebujeme, aby v našem poli bylo něco napsáno předtím, než pole vyplní uživatel,
použijeme pole Init val.
Jako další vytvoříme oblast pro komentář. Opět zvolíme textové pole a vložíme.
Protože komentář bude delší, změníme ve vlastnostech typ řádku na Multiline. Dále
můžeme nastavit, kolik řádků vysoké má být textové pole – Num Lines.
Pro další řádek vytvoříme rozbalovací seznam. Na záložce Forms najdeme ikonku
List/Menu.
Po vložení objektu mu opět dáme jméno a rozhodneme se, zda vytvoříme seznam
(List) nebo rozbalovací seznam (Menu). Poté musíme zadat hodnoty, které se
budou zobrazovat. Klikneme na List Values a v novém okně přidáme příslušné
záznamy. Item Label je název, který uvidí uživatel na stránce, Value je hodnota,
kterou bude používat program.
Výsledkem bude rozbalovací menu. Jeho funkčnost si můžeme ověřit v prohlížeči.
Následně vytvoříme rámeček, který může uživatel zaškrtnout jako odpověď na
otázku. Na záložce Forms najdeme ikonku Checkbox.
Nezapomeneme rámeček pojmenovat a nastavíme, co znamená, když zaškrtneme
rámeček. Do řádku Checked value vložíme yes, protože zaškrtnutím uživatel
souhlasí se zasíláním dalších zpráv. Dále můžeme nastavit výchozí hodnotu
rámečku – Initial state. Checked – bude zaškrtnut, Unchecked – nebude zaškrtnut.
Pokud potřebujeme, aby si uživatel vybral jen jednu z možností, použijeme Radio
Button – tlačítko volby.
Před každou možnost vložíme jedno tlačítko.
Protože potřebujeme, aby tlačítka pracovala jako jedna skupina, musí mít stejné
jméno.
Jestliže chceme, aby některé tlačítko bylo zaškrtnuto, nastavíme hodnotu Initial
state na Checked. Funkčnost opět vyzkoušíme v prohlížeči.
Pro vytvoření tlačítka na odeslání formuláře najdeme na záložce Forms ikonku
Button.
Vložíme tlačítko a pojmenujeme. Do hodnoty Value napíšeme slovo, které se zobrazí
na tlačítku. Pokud chceme formulář odeslat, necháme Action na Submit form.
Kdybychom chtěli formulář vymazat, zaškrtneme volbu Reset form.
-
Vytvořte nový kořenový adresář a v něm vytvořte stránku index.html.
Na stránce vytvořte kontaktní formulář.
Zvolte vhodná pole a způsob umístění ve formuláři.
Vytvořte dva tlačítka - jedno formulář odešle, druhé formulář vymaže.
20. Šablony
Pokud máme stránku hotovou a vše funguje podle našich představ, můžeme ze
stránky udělat šablonu, kterou použijeme na ostatních stránkách, kde pouze
změníme obsah, a tím ušetříme čas. Pokud něco změníme v šabloně, všechny
změny se automaticky provedou na všech stránkách, které šablonu používají. Pro
vytvoření šablony musíme hotovou stránku jako šablonu uložit. Zvolíme File – Save
as Template. V novém okně můžeme naši šablonu popsat – Description a uložit –
Save as. Pokud už existují nějaké šablony, jejich seznam by se zobrazil v okně
Existing templates.
Při ukládání šablony se program zeptá, zda chci uložit i všechny odkazy. Protože
naše stránky obsahují navigaci, chceme tyto odkazy uložit.
Šablona se uloží a bude mít koncovku dwt. Nyní musíme v šabloně vybrat oblasti,
které se dají editovat.
Nejdříve vybereme buňku v tabulce, která obsahuje text, který chceme editovat a
zvolíme Insert – Template objects – Editable region.
V novém okně vhodně oblast pojmenujeme. Editovatelná oblast se nám zobrazí jako
modrý rámeček s nápisem. Pokud chceme, můžeme obsah buňky smazat.
Aplikování šablony je jednoduché. Vytvoříme novou prázdnou stránku a zvolíme
Modify – Templates – Apply template to page. Vybereme šablonu, kterou chceme
použít a necháme zaškrtnutou volbu Update page when template changes, aby se
stránka změnila, pokud provedeme změny v šabloně. Potvrdíme Select.
Pokud provedeme nějaké změny v šabloně, při jejím ukládaní se program zeptá, zda
chceme změnit i všechny stránky, které tuto šablonu používají. Potvrdíme Update.
-
Vytvořte stránku, ze které vytvoříte šablonu. Nezapomeňte v šabloně
vytvořit editovatelné oblasti. Tuto šablonu aplikujte na jiné stránky.
21. Multimédia
Do stránek lze vkládat také multimediální obsah jako je video nebo audio. Pro vložení
videa zvolíme na záložce Common možnost Media a zvolíme Flash video.
Do řádku URL vložíme cestu, kde se nachází náš video soubor. Máme několik
možností, jaký skin použijeme pro náš přehrávač. Dále nastavíme rozměry videa
nebo pomocí tlačítka Detect Size necháme vyhledat automaticky rozměry videa.
Pokud potřebujeme, můžeme spustit automatické přehrávání (Auto play) nebo
přetočení videa po přehrání (Auto rewind). Pokud uživatel nemá nainstalovaný
přehrávač, objeví se zpráva s odkazem na stránku pro stažení přehrávače. Zprávu
můžeme upravit v sekci Message.
Všechny možnosti se dají upravit ve vlastnostech videa.
Pro vložení hudby najdeme v záložce Common možnost Media a Plugin.
Nastavíme cestu k hudebnímu souboru a ve vlastnostech nastavíme rozměry
přehrávače.
Přehrávač se zobrazí v prohlížeči.
Další možností je vložení videa, které už existuje na některé internetové stránce.
Jako příklad vybereme stránku Youtube.com. Najdeme požadované video a na
postranní liště najdeme možnost Vložit. Můžeme nastavit další vlastnosti videa jako
jsou velikost, barva rámečku apod. Po nastavení vlastností zkopírujeme odkaz.
Aby se nám video zobrazilo správně, je ho třeba na stránku vložit v módu Code.
-
Vytvořte nový kořenový adresář a v něm vytvořte stránku index.html, na
které budete prezentovat existující produkt,hru, program atd.
Na stránku vložte text a obrázky popisující tento produkt.
Nastavte vhodné barvy pozadí, písma, nadpisy atd. - pro úpravy
používejte CSS.
Na stránku vložte video o produktu.
Na konci stránky vytvořte kontaktní formulář pro objednání výrobku.
22. Publikování stránek online
Pro publikování stránek online potřebujeme znát několik informací. Musíme mít
zaregistrované vlastní www stránky nebo mít službu, která poskytuje prostor pro
www stránky. V našem případě jsme se zaregistrovali na stránkách
www.webzdarma.cz. Po registraci obdržíme jméno a heslo, abychom se mohli na
stránky přihlásit a stránky spravovat. Tyto informace použijeme v nastavení našeho
kořenového adresáře. Zvolíme možnost Site – Manage sites a vybereme náš
kořenový adresář a zvolíme Edit. V záložce Remote info změníme Access na FTP
a nastavíme požadované parametry. Všechny údaje jsme obdrželi při registraci
webového prostoru. Pokud máme nainstalovaný firewall na PC, zaškrtneme možnost
Use passive FTP.
Po vyplnění údajů můžeme zkusit, zda spojení funguje, kliknutím na tlačítko Test.
Pokud je vše v pořádku, objeví se následující informace.
Pro práci se soubory potřebujeme v záložce Files kliknout na poslední ikonu.
Nový panel je rozdělen na dvě části. V levé části jsou soubory nacházející se na
internetu, v pravé části jsou soubory nacházející se na našem pc. Pro nahrání
souborů na internet je třeba kliknout na ikonku Connect.
Pokud nahráváme stránky na internet poprvé, je třeba uploadovat celou strukturu
stránek (vybereme celou složku). K uploadování slouží modrá šipka, ke stažení dat
z internetu zelená. Pokud chceme nahrát jen jeden soubor, vybereme ho a klikneme
na modrou šipku.
Nahrávání dat probíhá na pozadí. Pokud chceme vidět, které soubory jsme nahráli,
můžeme kliknout na Details. Průběh nahráváni je zobrazen v horní části.
Pokud už máme stránky na internetu a provedli jsme nějaké úpravy a stránku
nahráváme znovu, při nahrávání se objeví hláška, zda chceme uploadovat i soubory,
které jsou s touto stránkou spojené (obrázky, video, css atd.). Pokud jsme nic
z těchto věcí nezměnili, je zbytečné, abychom je nahrávali znovu, a proto zvolíme
možnost No.
Pokud jsme hotovi, panel zavřeme poslední ikonkou.
23. CSS navigace – horizontální
Pro vytvoření navigace pomocí CSS se používá seznam. Nejprve potřebujeme
vytvořit kontejner (DIV), ve kterém bude naše navigace. DIV by měl mít své jméno,
aby se nám lépe upravoval.
Po vytvoření kontejneru vložíme náš seznam, který obsahuje odkazy na jednotlivé
stránky. Pokud nemáme stránky, na které chceme odkazovat hotové, můžeme
vytvořit „falešný“ odkaz. Vybereme řádek, ze kterého chceme vytvořit odkaz,
klikneme do řádku link a pomocí pravého ALT-X se nám vloží #. Tento odkaz později
můžeme nahradit odkazem na stránku.
Pokud máme seznam vytvořen, můžeme ho začít upravovat pomocí kaskádových
stylů.
Kaskádové styly upravujeme podle stejné struktury jakou vidíme na obrázku.
Nejdříve vytvoříme styl pro náš kontejner (div#navigation), potom vytvoříme styl pro
celý seznam (ul), následně styl pro jednotlivé řádky seznamu (li) a nakonec styl
jednotlivých odkazů (a).
#navigation
Pro náš kontejner nastavíme pevnou výšku a šířku – (záložka box) height: 78px;
width: 800px. Následně přidáme pozadí – background-color: #7F8B81. A celý
kontejner posuneme o 10px dolů od ostatních elementů na stránce - margin-top:
10px; margin-bottom: 10px. Na obrázku vidíme upravený kontejner. Šrafování nám
zobrazuje odsazení nahoře a dole.
#navigation ul
Zde zrušíme tečky, které se nám zobrazují před každým řádkem (záložka list) list-style-type: none a zbavíme se mezer mezi odkazy, které by každý
prohlížeč zobrazoval jinak - margin: 0px; padding: 0px.
#navigation ul li
Zde nastavíme jednotlivé odkazy tak, aby se nám zobrazovaly na řádku –
(záložka block) display: inline.
#navigation ul li a
Zde nastavíme typ a velikost písma, zbavíme se podtržení jednotlivých odkazů –
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration:
none a nastavíme výšku textu – (záložka box) height: 21px. Následně vytvoříme
mezery mezi odkazy - padding: 10px. Abychom mohli s našimi odkazy hýbat je třeba
nastavit - float: left. Nakonec rozmístíme odkazy na stránce - margin-left: 25px a
posuneme je ke spodnímu okraji kontejneru - margin-top: 37px.
#navigation ul li a:link, #navigation ul li a:visited
Zde nastavíme barvu odkazu a barvu odkazu, který jsme už navštívili color: #E8E9E3.
#navigation ul li a:hover
Zde nastavíme barvu pozadí tak, aby se změnila po najetí kurzorem myši background-color: #717B73;
#navigation ul li.current a:link
Zde nastavíme styl pro stránku, na které se právě nacházíme. Vytvoříme efekt
podtržení. Nastavíme ohraničení spodní části textu, barvu a šířku –
border-bottom-style: solid; border-bottom-color: #EDEEE9; border-bottom-width: 7px.
Protože se nám nyní výška kontejneru zvětšila o 7px, je třeba upravit padding tak,
abychom 7px ubrali - padding-bottom: 3px (původní padding byl 10px..10-7=3px)
Aby se nám tento styl zobrazoval je třeba v kódu stránky na příslušném řádku
nastavit class=“current“.
CSS menu – vertikální
Pro vytvoření navigace pomocí CSS se používá seznam. Nejprve potřebujeme
vytvořit kontejner (DIV), ve kterém bude naše navigace. DIV by měl mít své jméno,
aby se nám lépe upravoval.
Po vytvoření kontejneru vložíme náš seznam, který obsahuje odkazy na jednotlivé
stránky.
Pokud máme seznam vytvořen, můžeme ho začít upravovat pomocí kaskádových
stylů.
Kaskádové styly upravujeme podle stejné struktury jakou vidíme na obrázku.
Nejdříve vytvoříme styl pro náš kontejner (div#navigation), potom vytvoříme styl pro
celý seznam (ul), následně styl pro jednotlivé řádky seznamu (li) a nakonec styl
jednotlivých odkazů (a).
#navigace
Pro náš kontejner nastavíme pevnou šířku - width: 200px a celý kontejner posuneme
o 10px dolů - margin-top: 10px.
#navigation ul
Zde zrušíme tečky, které se nám zobrazují před každým řádkem (záložka list) list-style-type: none a zbavíme se mezer mezi odkazy, které by každý
prohlížeč zobrazoval jinak - margin: 0px; padding: 0px.
#navigace ul li a
Zde nastavíme typ písma, velikost, barvu a podtržení - font-family: Verdana, Arial,
Helvetica, sans-serif; font-size: 12px; color: #000000; text-decoration: none. Dále
nastavíme mezery uvnitř jednotlivých odkazů - padding-top: 8px; padding-right: 10px;
padding-bottom: 8px; padding-left: 10px. Abychom mohli s odkazy hýbat je třeba
nastavit – (záložka block) display: block. Nastavíme mezery mezi jednotlivými
odkazy - margin-top: 12px; margin-bottom: 12px a ohraničení odkazů - border-topwidth: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style:
solid; border-top-color: #000000; border-bottom-color: #000000. Protože IE špatně
zobrazuje námi vytvořené odkazy je třeba nastavit pevnou šířku odkazů - width:
180px.
#navigace ul li.current a
Zde nastavíme styl pro stránku, na které se právě nacházíme. Nastavíme barvu
pozadí a barvu písma - background-color: #717B73; color: #EDEEE9.
Aby se nám tento styl zobrazoval je třeba v kódu stránky na příslušném řádku
nastavit class=”current“.
#navigace ul li a:hover
Při najetí myši na odkaz se nám zobrazí obrázek a text se posune vpravo. Vybereme
obrázek a nastavíme jeho umístění na stránce - background-image:
url(../images/arrow.gif); background-repeat: no-repeat; background-position:
(horizontal position) 15px (vertical position) center. Nakonec nastavíme odsazení
textu - padding-left: 25px a šířku odkazu - width: 165px.
NAVIGACE HORIZONTÁLNÍ
NAVIGACE VERTIKÁLNÍ
-
Vytvořte vlastní navigaci horizontální nebo vertikální
Použijte vhodnou kombinaci barev pro vaše pozadí a jednotlivé typy
odkazů
Download

Výukový materiál - Obchodní akademie Orlová