Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www

Transkript

1 Číslo projektu Název školy Název Materiálu Autor Tematický okruh Ročník CZ.1.07/1.5.00/ Soukromá střední odborná škola Frýdek-Místek, s.r.o. VY_32_INOVACE_92_IVT_HTML_12_nase_www Ing. Pavel BOHANES IVT_HTML 4 Forma denní, 5 Forma dálková Datum tvorby listopad 12 Anotace Zdroje Text slouží k výuce a samostudiu, celek tvoří základy z tvorby www stránek se základy HTML a CSS obsahuje také cvičení, pro práci, úpravu www stránek, textu, tabulek. Společná kontrola činností je prováděná pomoci dataprojektoru nebo na PC. Ilustrace, pokud není uvedeno jinak, jsou screeny obrazovky a jejich úprava, archiv autora a kliparty MSOFFICE.

2 Úkol: IVT_HTML_12_nase_www (3 body): Otevřete soubor rozcestnik.html a upravíme jej k obrazu svému, co se týče našeho menu. Vyjměte odkazy na znamení a vložte je do tagu div id= menu text na znamení je zbytečný tudíž jej pojďme smazat a to samé udělejme s čarou <hr /> už to nebudeme potřebovat. Smažeme i sadu odkazu. <a href="beran.html"> <!--odkaz na stránku beran.html--> <img src="../obrazky/aries_map.png" alt="mapa berana" height="150px" width="150px" /></a> <a href="panna.html"> <!--odkaz na stránku panna.html--> <img src="../obrazky/virgo_map.png" alt="mapa panny" height="150px" width="150px" /></a> <a href="strelec.html"> <!--odkaz na stránku strelec.html--> <img src="../obrazky/sagittarius_map.png" alt="mapa střelce" height="150px" width="150px" /></a> <a href="vodnar.html"> <!--odkaz na stránku vodnar.html--> <img src="../obrazky/aquarius_map.png" alt="mapa vodnaře" height="150px" width="150px" /></a> Včetně čáry a nadpisu <hr /> <p>obrazová mapa</p>. (nebo vytvořte odkazy v menu na mapy). Co se týče úpravy www stránky je to vše, nyní musíme upravit náš CSS soubor zverokruh.css aby menu trochu vypadalo. Otevřeme si soubor zverokruh.css a upravíme podle potřeby. Tento kód udělá úpravu textu v menu aby celá text mohl báti odkazem #menu a { text-decoratint:none; /*podtrzeni*/ font-size:12pt; dyplay:block text-decoratint:none; znamená, že použije podtrženi jednotlivých položek a (odkazu) font-size:8pt znamená, že použije pro menu velikost písma 8pt bodů dyplay:block udělá to, že cely obsah kde bude text, se stane odkazem nejen ty písmenka např. BERAN, PANNA, STŘELEC a pod ale i celé okolí textu.

3 Nyní nastavíme menu, tak jak ho vidíme, při spuštění bez přejetí myši a podobně #menu a:link { color:black; Nyní nastavíme menu, tak jak jej uvidíme, když na položku menu najedeme myši. #menu a:hover { color:white; text-decoration:underline; background:darkgoldenrod; Nyní nastavíme menu, tak jak jej uvidíme, když jsme na odkaz menu kliknuli #menu a:active { color:red; Nyní nastavíme menu, tak jak jej uvidíme, když jsme odkaz menu navštívili #menu a:visited { color:black; Nyní nastavíme globální vlastnosti seznamu v našem menu #menu ul { width:100%; /*seznam ať je přes celou šířku MENU*/ list-style-type:none; /*Styl odrazek*/ padding:0px; /* vynulováni velikosti vnitřního rámečku*/ margin:0px; /* vynulováni velikosti vnějšího rámečku, vynuluje vše*/ U paddingu nebo marginu pokud jsou tam 4 čísla každé od vrchu po směru hodinových ručiček oddělovač je mezera (např. padding: px vytvoří okraj shora 5px zprava 10px, zdola 15px a zleva 20px) pokud jsou tam 2 čísla jeto první číslo pro okraj nahoře a dole, druhé číslo je pro pravý a levý okraj. Jedno číslo patří pro všechny strany okraje stejné. Nyní nastavíme vlastnosti pro jednotlivé kolonky našeho menu #menu li { background:goldenrod; text-align:center; border:solid black; /* styl cary solid a barva cary*/ border-width:1px 1px 0px 1px; /* sirka ramecku borderu*/

4 background:goldenrod Nastaví barvu pozadí textu menu text-align:center Nastaví vycentrování textu menu na střed border:solid black Nastaví barvu rámečku textu menu na černou border-width:1px 1px 0px 1px Nastaví barvu šířku rámečku textu menu na černou Nyní by mněla Vaše www stránka vypadat takto Všimněte si, že pod textem Skok na úvod není čára. Tento problém vyřešíme takto, v souboru zverokruh,css doplníme tento kód #menu.spodek { border-bottom:1px solid black; Třída.spodek (musí začínat tečkou proto je to třída. Ta tečka vyjadřuje, že deklarace se nebude týkat html tagu, ale třídy.) nastaví spodní okraj na 1 obrazový pixel px, styl plna cara a barva černá. To samo osobě nestačí ještě v souboru rozcestnik.html musíme udělat malou úpravu a doplnit naše menu tedy seznam menu. Kód, který doplníme do souboru rozcestnik.html vypadá následovně: Původní kód <li><a href="rozcestnik.html">skok na úvod</a></li> Nahradíme kódem <li class="spodek"><a href="rozcesti.html">skok na úvod</a></li> class="spodek" slouží pro zavolání vlastní třídy spodek (Atribut class (třída) se může použít u libovolného elementu tagu), kterou jsme nadefinovali v souboru zverokruh.css

5 Nyní by mněla Vaše www stránka vypadat takto Všimněte si, že pod textem Skok na úvod už je čára. Proč to všechno děláme? Kdybychom nastavili v #menu li border-width:1px 1px 1px 1px místo border-width:1px 1px 0px 1px mněli bychom sice na spodku naší vytouženou čáru ale také mezi jednotlivými políčky by byly ty čáry o velikosti jeden px dvě, tudíž by to mělo uvnitř menu širší čáry.