Obsah

1.      Úvod

2.      Stavba pavučiny

2.1.       Postup

2.1.1.         Vykouzlení designu

2.1.2.         Kouzlení pavučiny

3.      Použitá kouzla

3.1.       XHTML kouzla

3.1.1.         <div>

3.1.2.         <a>

3.1.3.         <p>

3.1.4.         <br />

3.2.       CSS kouzla

3.2.1.         Background

3.2.2.         Font-family

3.2.3.         Font-size

3.2.4.         Margin

3.2.5.         Padding

3.2.6.         Border-radius

3.2.7.         A:link, a:visited, a:hover

4.      Závěr a poděkování

1.    Úvod

Po přečtení zadání zkoušky mi na mysl vyvstalo hned několik nápadů, jak zkoušku vypracovat. Po dlouhých úvahách jsem se rozhodla vytvořit v rámci praktické části, jednoduchou pavučinu, kde jsem napsala pár slov o mé osobě a vložila ukázku svých dvou kapitol dvou různých povídek.

V teoretické části jsem se rozhodla popsat základní kouzla, které jsou nejčastější při stavbě pavučin, především se zaměřím na ty části, které jsem sama použila.

Stránky si můžete prohlédnout zde: http://www.ovce.renee.cz.

2.    Stavba pavučiny

Při stavbě pavučiny jsem se v mnoha ohledech značně zapotila, neboť to nebylo nic lehkého, ale nakonec se mi to dle mého názoru podařilo více než dobře.

Určitě jsem si vědoma, že tento obor není jeden z nejlehčích, ovšem to mě neodradilo si zapsat zkoušku, byla a je to pro mě výzva a to jsem na začátku ani netušila, jaká to bude dřina.

2.1.  Postup

2.1.1.     Vykouzlení designu

Jak jsem při kouzlení postupovala?
Rozhodla jsem se nejdříve vykouzlit design, který by byl v příjemných barvách a nebyl moc do očí bijící. Nejdříve jsem zvolila design v odstínech zelené, načež po dokončení jsem změnila svůj výběr, design přeměnila do barev, které můžete vidět ve výsledném díle.
S logem jsem měla také značné obtíže, za každou cenu jsem v něm chtěla použít obrázek, dotýkající se tématu OVCE. Sice to dlouho trvalo, ale nakonec jsem požadovaný obrázek našla, jelikož jsem se chtěla inspirovat u mudlů, netušila jsem, že mi hledání správného obrázku bude trvat tak dlouho a zabere to většinu času pro vypracování zkoušky.

2.1.2.     Kouzlení pavučiny

Po vykouzlení designu jsem se dala do tvoření jednotlivých kouzel, abych tak vytvořila ucelenou pavučinu bez potrhaných míst a především správně fungující. Zde jsem se setkala s ještě větším problémem. Většina kouzel spolu odmítala komunikovat a pavučina se mi stále jevila jako potrhaný klubko nití.

Naštěstí jsem pomocí šikovných kontrolních kouzlech zjistila, kde jsem udělala chyby. Používala jsem výhradně tato kontrolní kouzla:

• http://validator.w3.org/
• http://jigsaw.w3.org/css-validator/

Nejčastější chybou a dle nalezených informacích v různých odborných knihách se této chyby dopouští mnoho začínajících čarostavitelů, bylo opomenutí správného zápisu kouzla margin, kdy toto kouzlo jsem mylně použila na celou pavučinu v uceleném a všeobecném znění, místo abych určila přesné hodnoty pro jednotlivé části pavučiny. Díky této chybě se mi nedařilo vycentrovat neboli zarovnat na střed celou pavučinu včetně jednotlivých částí, což na pohled vypadalo značně nevábně. V dalších kapitolách se tomuto kouzlu a mnoha dalším budu věnovat více.

Po správném rozložení pavučiny se mi objevil další problém a to obsah na pavučině. Text byl „nalepený“ na samém okraji kouzla #text, které jsem kouzlila v CSS. I s tímto jsem zápasila, zkoušela jsem různé hodnoty margin, použila jsem i padding, ale výsledek se nedostavil nakonec jsem vykouzlila další kouzlo o hodnotě class a to .atext, zde jsem nastavila kouzla pro text a pro mezery, tímto jsem vyřešila problém, který vznikl.

Dále jsem zápasila s menu, i zde jsem díky poučení ze situace popsanou výše vytvořila kouzlo .link nadefinovala přesné hodnoty a odkazy v menu získaly tak svůj požadovaný vzhled.

S ničím jiným jsem příliš velké problémy neměla, jakmile jsem si byla jistá, že mám pavučinu vykouzlenou správně, zbývalo už jen přidat text a odkazy.

3.    Použitá kouzla

Kouzel je opravdu ohromné množství a já zatím ne všechna znám, ale i tak jsme jich použila dost na to, abych pavučinu vykouzlila alespoň minimálně koukatelnou. Nejdříve se zaměřím na kouzla z XHaTlaMatLa.

3.1.  XHTML kouzla

3.1.1.     <div>

Toto kouzlo samo o sobě nic neumí, pokud mu neurčíme, jak se má vlastně chovat. Proto jej můžeme v pavučinách najít v různých tvarech. Nejčastěji se používají tzv. ID a CLASS. Kouzla o hodnotě ID můžeme použít jen jednou, jako názorná ukázka od pana profesora sloužila představa rozložení nábytku v pokoji, kdy postel nemůže být na stejném místě jako stůl, je to nemožné. Naproti tomu CLASS hodnota se může v pavučině vyskytovat nesčetněkrát. Jako příklad, jak to v praxi vypadá, můžete vidět zde:

• <div id=“text“>Text o hodnotě X <div class=“atext“>a text o hodnotě Y. </div></div>

3.1.2.     <a>

<a> kouzlo je velice šikovné, díky němu totiž můžeme odkazovat na jiné části pavučiny nebo dokonce na zcela jiné pavučiny. Rozlišujeme dva typy odkazů.

Jsou to:

• hypertextové – tyto odkazují na zcela jiné pavučiny nebo jiné části pavučiny
• jmenné – tyto se používají na stránce, kde může být dlouhý text a pomocí tohoto odkazu se může návštěvník navrátit na začátek pavučiny

No a opět příklad takových odkazů:

<a href="#kapitola1">Kapitola 1. </a> – jmenný
<a href=“http://ovce.renee.cz“>OVCE – Renée Carlisle</a> – hypertextový

3.1.3.     <p>

Tzv. odstavcové kouzlo, které se musí kouzlit vždy na začátku každého odstavce, vyjma seznamu, a musí se také náležitě na jeho konci uzavřít a to takto </p>. Výška mezi jednotlivými řádky se rovná zhruba běžné velikosti jednoho řádku.
Bez použití tohoto kouzla by text vypadal na pavučině jednolitě a nebyl by nikterak přehledný. Díky CSS stylům můžeme přesně nadefinovat, jak se má toto kouzlo chovat a proto je nutné jej i ukončit.

Příklad:

<p> odstavec 1. </p> <p> odstavec 2. </p>

Přímo v pavučině navíc můžeme kouzlu určit určitou hodnotu například takto: <p class=“atext“>Text</p>.

3.1.4.     <br />

Toto kouzlo je nutné použít v případě zalomení řádku. Je to navíc jedno z kouzel, které se neukončuje.

Příklad:

• Text je dlouhý. <br />
• A tady ještě delší. </br>

3.2.  CSS kouzla

3.2.1.     Background

Rozsáhlé kouzlo v CSS, má několik hodnot. Toto kouzlo říká skřítkovi, jak má vypadat pozadí daného prvku.
Příklad:

• Background-color: rgb(20,30,70); – barva
• Background-image: url(./img/obr.jpg); – obrázek
• Background-position: left; – pozice obrázku
• Background-repeat: repeat-x; – opakování obrázku
• Background-attachment: fixed; - rolování

Hodnotu attachment jsem nevyužila vůbec. Přišla mi tato hodnota zbytečná. Naopak hodnoty repeat, position jsem využila u obrázků, abych určila, zda se mají opakovat nebo nikoliv.

3.2.2.     Font-family

Pomocí tohoto kouzla můžeme určit, jaká rodina písem se má na pavučině zobrazovat. Nejčastěji se uvádí skupina písem s obecným jménem fontů jako je serif (patkové), sans-serif (bezpatkové), cursive (psací), fantasy (okrasné) a monospace (strojové). Udávají se z toho důvodu, že ne každý skřítek na počítadle má určený typ písma a právě v takovém případě mu toto kouzlo nařídí v případě nepřítomnosti daného typu písma vybrat písmo na počítadle dané vlastnosti (patkové, bezpatkové…).

Zvolila jsem bezpatkovou rodinu písem, neboť jsem toho názoru, že se o něco lépe čte, tedy alespoň mě jelikož nosím brýle. Patkové písmo na pavučinách mi přijde značně drsné a tvrdé.

3.2.3.     Font-size

Kouzlo udává velikost písma. Můžeme zapsat v několika hodnotách a to:

• Font-size: smal;
• Font-size: 20%;
• Font-size: 1.4em;
• Font-size: 13px;

Jsou ještě hodnoty pt (typografický bod), mm (milimetr), in (palec). Nejčastěji se však používají hodnoty typu px (pixely) a někdy i em (výška písmene M).

3.2.4.     Margin

Pomocí tohoto kouzla můžeme ovlivnit vnější okraj prvku. Můžeme napsat jak hromadně čili margin: 20px; nebo vypsat pro každou stranu hodnoty zvlášť, to potom vypadá takto margin-left: 22px; margin-bottom: 2px;

Já se rozhodla vypsat hodnoty pro každou stranu zvlášť, neboť se mi to zdá lepší a přehlednější při pozdější úpravě.

3.2.5.     Padding

Je podobné kouzlu margin, ovšem pomocí tohoto kouzla určujeme hodnoty vnitřního okraje daného prvku. Zapisuje se stejně jako margin.

Kouzlo jsem využila pro zvětšení okrajů kolem textů a jednotlivých částí pavučiny jako menu, pole pro text a patičku.

3.2.6.     Border-radius

Velice šikovné kouzlo, pomocí něhož jsem zaoblila okraje rámečku kolem prvků a to jak pozadí pavučiny, tak podkladu pro menu s odkazy, text a patičku.
Velice jsem si toto kouzlo oblíbila.

3.2.7.     A:link, a:visited, a:hover

Speciální „sada“ kouzel, která mi pomohla nadefinovat přesnou podobu odkazů. Hodnota a:link je odkaz bez jakékoliv aktivity, a:visited je odkaz po zaktivování neboli po kliknutí na něj a a:hover je odkaz při najetí myší.
Tato sada kouzel mi přišla velice užitečná, neboť rozlišit akce odkazů mi přijde o hodně přehlednější a dokáži se tak orientovat na stránce v případě většího počtu.

4.    Závěr a poděkování

I když byly chvíle, kdy jsem měla chuť to takřka vzdát a nechat pavučinu jak byla i když se nezobrazovala, jak měla, jsem ráda, že jsem tak neučinila. Výsledkem je snad na pohled příjemná pavučina nejen, co se designu týče. Doufám, že se Vám má práce líbila a něco málo jste si (snad) z toho odnesli. Nejsem totiž moc dobrá na vysvětlování, snad to je k přečtení a aspoň trochu srozumitelné.

Ještě jednou bych zde chtěla poděkovat panu Nicholasi McElenovi, za jeho neskonalou trpělivost a ochotu mi se vším pomoci, velice si toho vážím, nebýt Vás, tak bych do dnešního dne neuměla vykouzlit ucelenou pavučinu včetně designu. Také si vážím toho, že jsem mohla skládat OVCE právě z vašeho předmětu.

A proto Vám patří ještě jednou velké dík.

Renée Carlisle