TVORBA WWW STRÁNOK - ÚVOD WWW - World Wide Web

Transcription

1 ADOBE DREAMWEAVER Spracoval: Ing. Zdeněk Železný TVORBA WWW STRÁNOK - ÚVOD WWW - World Wide Web Klient (browser, prehliadač) je program, ktorý komunikuje s užívateľom, na základe pokynov používateľa sa obracia na jednotlivé servery, získava od nich dáta a zobrazuje ich. Príklady: Microsoft Internet Explorer, Netscape Navigator, Mozilla... Server je program, ktorý prijíma a obsluhuje požiadavky klientov. Napr. Apache, Microsoft Internet Information Server, Zope WWW - história CERN - výskumné centrum fyziky bol vytvorený web pre prenos informácií a značkovací jazyk HTML 1.0.Novější verzie HTML 4.0 slúži ako základňa pre XHTML. Konzorcium World Wide Web pokračuje vo vývoji, zmeny je možné sledovať na adrese: Na návrhy konzorcia W3C sa v súčasnej dobe nazerá ako na štandardy.

2 Štandardy pre Web HTTP - HyperText Transport Protocol určuje pravidlá komunikácie medzi klientom a serverom. HTML - HyperText Markup Language je jazyk, ktorým sa zapisujú WWW stránky. Interpretáciu stránky zabezpečuje klient. XHTML - extensible HyperText Markup Languageje jazyk, ktorý vznikol prispôsobením HTML pravidlám XML. CSS - Cascading Style Sheets (kaskádové štýly) slúži na opis výsledného vzhľadu stránky. (X) HTML editory WYSIWYG (What You See Is What You Get) editory Napr. Adobe Dreamweaver CS6, MSFrontPage Textové editory Napr. AceHTML, Poznámkový blok z MS Windows Konvertory z iných dátových formátov Napr. aplikácie MS Office Validátory sú kontrolné nástroje, vykonáva kontrolu a upozorňujú na chybné alebo problematické miesta On - line služba: org / checklink Jazyk (X) HTML je značkovací jazyk. K dokumentu sa pridávajú značky (tagy), ktoré upravujú vzhľad dokumentu, zvýrazňujú potrebné údaje, formátujú dokument, určujú povahu obsahu prvku. Tieto značky vie čítať a spracovať program prehliadač.

3 <html Xmlns=" <! - Creation date: > <head> <meta http-equiv="content-type" content="text/html;charset=windows-1250" /> <title> Meno </ title> </ head> <body> <h1> Ukážka </ h1> Tento text sa zobrazí <b> tučne </ b> a tento <I> kurzívou </ I>. </ body> </ html> charakteristiky dokumentu Obsah Štruktúra Štýl Obsah tvoria informácie, ktorú má dokument oznámiť. Štruktúra - rozdelenie dokumentu na odseky, stránky, stĺpce... Štýl - predstavuje spôsob, akým je dokument zobrazený. Pri nezmenenej štruktúre a obsahu môžeme meniť štýl.

4 Štruktúra WWW stránky: <html> <head> <title> Meno </ title> </ head> <body> <h1> Ukážka </ h1> Tento text sa zobrazí. </ body> </ html> Tagy (značky) <html> </ html> určujú začiatok a koniec dokumentu <head> </ head> určujú začiatok a koniec hlavičky. Táto sa nezobrazuje, obsahuje informácie pre prehliadač <body> </ body> určuje telo dokumentu, čo je tu, to sa zobrazuje WWW stránky Zásadne sa oddeľuje obsah dokumentu - v HTML od jeho vzhľadu (formátu) - tvorí sa pomocou CSS Rozdelenie stránok: Statické stránky Dynamické stránky - obsahujú programy - scripty, applety. Tieto programy môžu bežať na lokálnom počítači - programy v jazyku JavaScript, Visual Basic Script, alebo na serveri, kde sú stránky uložené - programy v jazyku PHP, ASP, Pearl, Java

5 2. lekcia ČLENENIE A FORMÁTOVANIE DOKUMENTU Príkazy v časti head <title>.. </ title> titulok stránky, potrebný príkaz v XHTML <meta>.. </ meta> informácie o stránke, autorovi Členenie dokumentu - prvky stránky body blokové prvky: h1... h6 - nadpisy p - odsek oddelený riadkom div - obdĺžnikový blok ol, ul - zoznamy img - obrázok riadkové prvky: span - úsek textu em - kurzíva, zvýraznený text strong - tučne a - odkaz

6 Blokové prvky text môžeme členiť do odsekov - blokov pomocou tzv. blokových prvkov <p> </ p> odsek - paragraph <div> </ div> blok textu - division, ktorý sa používa pre definíciu štýlu <h1> </ h1> nadpisy (6 úrovní) - headings <blockquote> </ blockquote> používa sa pre citovaný text <pre> </ pre> predformátovaný text <br /> zalomenie riadku <hr /> vodorovná čiara Rozmery a vzdialenosti jednotky relatívne 1em veľkosť práve používaného prvku 1ex veľkosť x - výšky použitého písma 1px (pixel) 1 bod obrazovky odporúča sa vychádzať z rozlíšenia 96dpi jednotky absolútne 1mm, 1cm, 1in (palec - 25, 4mm) 1pt typografické bod (1 / 72 palca) 1pc typografická jednotka (1pc = 12pt) Niektoré vlastnosti dovoľujú použiť percentá.

7 ... </ head> <body style="background-color:gray"> <div style="color:red;font-size:18px;font-family:verdana"> Tento text je červený, má veľkosť 16 bodov a je napísaný fontom Verdana </ div> <p style="background-color:blue; color:yellow; margin:10pt"> Tento text je napísaný žlto na modrom pozadí s 16 bodovým okrajom. </ p> <div> Tento text je napísaný implicitným štýlom. Pretože nemá nastavenú farbu pozadia, má farbu prvku "body" </ div> </ body> </ html> Tento text je červený, má veľkosť 10 bodov a je napísaný fontom Verdana Tento text je napísaný žlto na modrom pozadí s 16 bodovým okrajom Tento text je napísaný implicitným štýlom. Pretože nemá nastavenú farbu pozadia, má farbu prvku "body"

8 Formátovanie blokov obsah okraj - margin rámček- border padding - odstup od rámčeka Príklad: <p style="margin:100px; border:1px solid black;padding:50px; background- color:#338601"> Blokové vlastnosti Rámček - border: sila, typ čiary, farba <p style="border:1px solid red"> <p style="border-bottom-color:#367851"> Výška - height a šírka - width obsahu bloku <p style="width:50%;height:300px"> Odstup od rámčeka - padding <p style="padding:10px 10% 0 2mm"> <p style="padding:100px"> Okraje - margin <p style="margin:100px">

9 Štýl pozadia - background alebo background-color <p style="background-color:#338601"> <p style="background:url(obrazok.jpg)"> Viac o štýle pozadia Pozadie má stránka, odsek, tabuľka, zobrazuje sa pod celou plochou objektu. background-color nastaví farbu pozadia background-image nastavuje obrázok na pozadí background-repeat určuje, ako sa obrázok opakuje background-position definuje pozíciu obrázka na pozadí úprava textu Štýlové prvky typu inline: <big> </ big> zobrazí text v písme väčším ako je základná <b> </ b> zobrazí text tučne <i> </ i> zobrazí text kurzívou <u> </ u> zobrazí text podčiarknutý <strike> </ strike> zobrazí text prečiarknutý <sub> </ sub> zobrazí text ako dolný index <sup> </ sup> zobrazí text ako horný index

10 Formátovanie textu: text - align zarovnanie textu povolené hodnoty: - left (vľavo) - right (vpravo) - center (na stred) - justify (do bloku) Príklad: h1 { text - size: xx- large; text - align: center } Zoznamy s odrážkami číslované <ol>- číslovaný zoznam <ol> <li>text a písmo</ li> </ ol> <ul> zoznam s odrážkami <ul> <li>text a píismo</ li> </ ul>

11 Vkladanie obrázka a videa <img src="obrazok.jpg" alt="" width="300" height="377 /> atribút src udáva adresu obrázku atribút alt zobrazí popisný text atribúty width a height udávajú veľkosť obrázku <img dynsrc="video.avi" loop="infinite" start="mouseover"/> atribút dynsrc udáva adresu videa atribút loop udáva počet opakovaní atribút štart udáva udalosť, ktorá video spustí

12 Štýly stránky Dokument XHTML by mal obsahovať len logicky rozčlenené informácie (nadpisy, odseky, bloky,...). Nemal by obsahovať žiadne informácie týkajúce sa vzhľadu! Ani rozvrhnutie stránky pomocou tabuliek. Vzhľad dokumentu by sa mal ovplyvňovať len pomocou tzv štýlov, ktoré by mali byť uložené LEN V SAMOSTATNÉHO SÚBORU! Kaskádové definície štýlov - deklarácia pravidiel pre zobrazenie obsah a štruktúra stránky - súbor html vzhľad stránky - súbor css výhody - pamäťovo úsporné - kratší prístup - jeden obsah - rôzne zobrazenie - rovnaký vzhľad pre niekoľko stránok, vytvára designer nevýhody - rôzna podpora u prehliadačov -vzhľad závisí do istej miery od prehliadača

13 3. lekcia Úvod do Adobe Dreamweaver CS6 POUŽITIE ÚVODNEJ OBRAZOVKY Otvoríme si program Adobe Dreamweaver CS6 > Štart > všetky programy > Adobe Design Premium CS6 > Adobe Dreamweaver CS6, môžeme si pre uľahčenie ho vložiť do ponuky Štart. Uvítacia obrazovka umožňuje rýchly prístup k naposledy otvoreným stránkam, jednoduchú tvorbu rôznych typov webových stránok a priamy prístup k témam pomocníka. Uvítacia obrazovka sa zobrazuje vo chvíli, keď spustíme program DW, alebo v okamihu, kedy nie je otvorený žiadny dokument. Uvítacia obrazovka sa objaví pri otvorení programu DW. - v stĺpci Vytvoriť nový klikneme na HTML, tým sa nám otvorí nová prázdna stránka. - ak sme na tejto stránke neurobili zmeny, stránku zavrieme > Súbor > Zavrieť - ak nebudeme chcieť uvítaciu obrazovku už naďalej používať, môžeme jej otváranie zrušiť zaškrtnutím voľby " Nabudúce nezobrazovať " v ľavom spodnom rohu okna. Opätovné zobrazovanie uvítací obrazovky môžeme vyvolať vo voľbách v kategórii všeobecné

14

15 ROZVRHNUTIA STRÁNKY (LAYOUT) Adobe Dreamweaver CS6 ponúka na použitie 32 rôznych rozvrhnutí, profesionálne vytvorených pomocou štýlov CSS, čo nám uľahčuje prácu, pretože boli testované vo všetkých hlavných prehliadačoch a vyhovujú webovým štandardom. Pri tvorbe väčšieho počtu webových stránok pre jednu osobu alebo udalosť, by mali mať všetky stránky rovnaký layout, aby v nich dokázal návštevník dobre a rýchlo orientovať. - Zvolíme zo Súboru > Nový, v dialógovom okne Nový dokument v prvom stĺpci vyberieme > Prázdna stránka, v stĺpci Typ stránky vyberieme HTML, ten sa bežne používa pri tvorbe webových stránok. V treťom stĺpci máme na výber z rôznych typov layoutov 1 až 3 stĺpcové, s pevnou alebo s premennou šírkou založenú na percentách alebo jednotke em, s alebo bez hlavičky alebo päty - v stĺpci " Rozvrhnutie " zvolíme 2 stĺpce pevné, postranné stĺpec vľavo, záhlavie, päty. V poslednom stĺpci dole volíme " Typ dokumentu " XHTML 1.0 Transitional, čo je prechodový jazyk medzi HTML a novším XHTML.

16 Nová webová stránka sa zobrazí ako dokument s výplňovým textom, ktorý tam len pre lepšiu orientáciu na stránke a predstavivosť vložili tvorcovia layoutu. (Rozvrhnutie stránky). Do tohto okna budeme vkladať svoj vlastný obsah (text aj obrázky) a upravovať vzhľad stránky Novo vytvorenú stánku je vhodné ihneď uložiť > Súbor > Uložiť, zobrazí sa dialóg uložiť ako, nájdeme zložku C > Dreamweaver kurz > súbor > lekcia > lekcia 01. do poľa Názov napíšeme Umbria - příjmení.html a > uložiť.

17 ZOBRAZENIE DOKUMENTU DW nám ponúka 4 základné možnosti zobrazenia: - Kód - zobrazuje sa iba zdrojový kód stránky. - Návrh - zobrazuje sa iba webová stránka tak, ako budú vyzerať. vytvárané stránky. - Rozdeliť - kombinuje ako zdrojový kód, tak aj návrh, tvorca www stránky tak má možnosť kontroly. - Živé zobrazenie - vykresľuje stránku v prehliadači Dreamweaver. Prvé tri zobrazenia sú úzko prepojená, akákoľvek vykonaná zmena sa zobrazia vo všetkých pohľadoch.

18 4. lekcia VKLADANIE TEXTU A OBRÁZKOV ZMENA TITULKY STRÁNKY Titulok webovej stránky sa zobrazuje v titulkovom paneli okna prehliadača a je kľúčovým prvkom používaným vyhľadávačmi k indexovanie webových stránok, preto je nutné, aby sme zmenili predvolený názov dokumentu " Bez názvu " (untitled). V nástrojovej lište dokumentu v poli " Názov " vyberte Dokument bez názvu a napíšte jeho nový názov ZMENA NADPISOV Výplňové texty a nadpisy nám pomáhajú vizuálne vyplniť layout tak, aby vyzeral podobne ako s konečným obsahom umiestneným do stránky, môžeme ich jednoducho zmeniť. - Vyberte výplňový text Záhlavie (poklepaním myšou), potom napíšte text " Prezrite si s nami Umbriu ". Dvojklikom vyznačíme slovo, trojklikom celý odsek alebo nadpis, ťahaním myšou pri stlačenom ľavom tlačidle ľubovoľný text. Rovnakým spôsobom prepíšeme nadpis v pravom hlavnom odseku " Hlavný obsah " na text " Vy sa bavte. My obstaráme všetko ostatné. " Všimneme si, že v zdrojovom kóde sme len nahradili text, ale formátovacie značka, párový tag <h1>, ktorá označuje nadpis, zostala u oboch nadpisov zachovaná.

19 VKLADANIE TEXTU DW poskytuje možnosť vkladania textu kopírovaného z iných zdrojov (MS Office, OpenOffice, poznámkový blok, atď) a ponecháva toľko z pôvodného formátovania, koľko požadujeme. V praxi si totiž zákazník dodáva svoje texty po obsahovej a jazykovej korektúre a tvorcov webových stránok ich len vkladá do dohodnutého layoutu. - Vyberieme výplňový text v pravom stĺpci bez nadpisu až po päty, ale bez neho. - Klávesou Delete ho vymažeme. - Z ponukového riadku otvoríme > Súbor > otvoriť > lokálny disk C > DW kurz > obsah > > lekcia > lekcia 01 > dovolenka.rtf. (celý text vyberieme a skopírujeme do schránky (CTRL + C). - V DW umiestnime kurzor pod nadpis v pravom stĺpci a vložíme sem skopírovaný text (CTRL + V). Celý text sa okamžite sformátuje ako odseky so značkou <p> (jedná sa o párový tag). - Ukazovateľom myši vyberieme výplňový text Päta a prepíšeme ho " Prehliadka miest v Umbrii " - Zalomíme riadok > Shift + Enter. Potom napíšeme text Kontaktujte nás V zdrojovom kóde bol tento povel zapísaný ako nepárový tag <br>.

20 VKLADANIE OBRÁZKOV Vkladanie obrázkov je veľmi priamočiare, podobne ako text, ktoré tiež dodáva zadávateľ stránky. Akonáhle umiestnime obrázok do stránky, môžeme jeho vlastnosti upravovať buď pomocou panelov Štýly CSS alebo Vlastnosti. - Vyberieme všetok obsah ľavého stĺpca (sidecar 1) vrátane nadpisu a vymažeme ho (Delete) - Z ponuky Vložiť vyberieme > Obraz a dialógovom okne Vyberte zdroj obrazu označíme súborový systém, v oblasti hľadania vyberieme obrázok > zahrada.jpg > OK. V dialógovom okne Atribúty tagu obrazu pre uľahčenie prístupu do kolónky Alternatívny text napíšeme Záhrada > OK. Tento text sa bude zobrazovať v prípade, že sa obrázok nezobrazí, napr. niektoré mobilné zariadenia, a pomôže pochopiť obsah stránky.

21 - Z ponukového riadku > Okno otvoríme panel > Vlastnosti. Z roletky Trieda vyberieme fltrt alebo fltlft (float right alebo left, zarovnajte vpravo, vľavo). Ponecháme obrázok vpravo a text ho bude obtekať vľavo. > Uložiť. Stránka teraz obsahuje ako text, tak aj obrázky vložené do layoutu CSS, stránka vyzerá dobre a sa bude zobrazovať vo všetkých prehliadačoch.

22 5. lekcia Kaskádové štýly CSS Moderné webové stránky používajú k štýlovaniu a tvorbe layoutov kaskádové štýly (CSS). Webová stránka je zložená z HTML (zdrojový kód), CSS a JavaScriptu, pomocou ktorých ju budujeme. HTML je obsah - materiál vkladáme na vytváranú webovú stránku v okne Návrh. CSS zaisťuje vzhľad a rozvrhnutie stránky, tj kam sa jednotlivé elementy umiestni, použitie farieb textu, tabuliek, okrajov, rámčekov, pozadia,... JavaScript pridáva funkciu interaktivity. ZMENA FARBY POZADIA K úprave vlastností pomocou CSS môžeme použiť akékoľvek značky HTML, napr. <body> (telo), <p> (odsek), <h1> (nadpis), atď - Otvoríme panel CSS štýly > Okno > Styly CSS > Vše, rozbalíme <style> klikneme na tlačidlo +, aby sme nejaké štýly videli, musíme mať otvorený dokument v dokumentovom okne. Teraz nájdeme pravidlá štýlov v hlavičke dokumentu, pomocou ostrých zátvoriek <styly> DW ukazuje, že ide o vnútorné (interné) pravidlá. - vyberieme selektor body klikneme na ikonu upraviť štýl (ikona ceruzky na paneli vpravo dole). V dialógovom okne Definícia pravidlá CSS pre body vyberieme kategóriu Pozadie a po rozbalení tlačidlá s paletou farieb vyberieme pomocou kvapkadla bielu farbu. DW automaticky vloží do zdrojového kódu hexadecimálne hodnoty bielej farby # FFF do poľa Background color (farba pozadia) > OK.

23

24 Stlačením F4 skryjeme všetky panely a získame náhľad cez celú obrazovku, pozadie stránky sa zmenilo zo šedej na bielu farbu, farby ostatných pozadia sa nezmenili. Pomocou tlačidla F4 môžeme opäť obnoviť zobrazenie panelov. Podobne ako značke <body> môžeme prideliť vlastnosti aj iným elementom. Vlastnosti môžeme meniť aj tak, že v selektore značiek vyberieme požadovaný element, napr. <div # sidebar 1>, potom pomocou ikony > Upraviť štýl vyvoláme dialógové okno pre definovanie pravidlá a vykonáme požadovanú zmenu. stránku uložíme > Súbor > Uložiť. VKLADANIE GRAFICKÉHO POZADIA Kým obrázky do popredia sa vkladajú priamo do stránky pomocou ponuky Vložiť, obrázky na pozadí sa umiestňujú pomocou CSS štýlov. - Ukazovateľ myši vložíme do textu v záhlaví - V selektore značiek vyberieme element <div.header> (záhlavie). V dokumentovom okne sa okolo vybraného elementu zobrazí modrá čiara. - Otvoríme panel štýly CSS > Okno > Štyly CSS > Súčasný, tým sa prepneme do režimu zobrazujúceho vlastnosti súčasne vybraného elementu (záhlavie). - V spodnej časti okna vyberieme ikonu > Upraviť štýl a v dialógovom okne " Definícia pravidlá pre.header vyberieme kategóriu Pozadí > Procházet vedľa Background - image. - V zobrazenom dialógu nájdeme v Oblasti hľadania súbor s obrázkom > OK.. - Z roletky Background - repeat (opakovanie) vyberieme no repeat > OK > Súbor > Uložiť.

25 PRÁCA V ZOBRAZENÍ : KÓD, NÁVRH A ROZDELENIE V nástrojovej lište môžeme prepínať medza zobrazením Kód - zobrazuje sa iba zdrojový kód stránky, Návrh, zobrazuje sa iba grafický vzhľad stránky a Rozdelenie, v ktorom vidíme ako zdrojový kód, tak aj grafický návrh. Ak vyberieme text v jednom zobrazení, je vybraný aj v druhom, toho môžeme využívať pri kontrole zapisovaní tagov, ktorý vykonáva automaticky DW.

26 6. lekcia ÚPRAVA TEXTU - PANEL VLASTNOSTI ÚPRAVA TEXTU, PÍSMA A FARIEB Kaskádové štýly nám umožňujú okrem zmeny vzhľadu elementu aj zmenu vzhľadu iba pre značku <tag> na určitom mieste v stránke. - Umiestnime kurzor myši do textu nadpisu v záhlaví. - V selektora značiek vyberieme tag <h1> - V paneli Štýly CSS > súčasný > Upraviť štýl. - stlačím ikonu +so stránkou - vedľa ceruzky, vyberieme len h1 a upravíme požadovanú vlastnosť V dialógovom okne Definícia pravidlá pre... vyberieme Kategóriu Typ a v roletke Font - family (písmo) vyberieme skupinu Georgia, Times... Výber fontu sa vykonáva po skupinách, pretože nie na všetkých počítačoch musí byť nainštalované rovnaké fonty písma. - Na ikone color (farba) zvolíme kvapkadlom bielu farbu. > OK > Súbor > Uložiť.

27 ZMENA VEĽKOSTI TEXTU Okrem zmeny typu písma a farby môžeme tiež zmeniť veľkosť textu. - Ukazovateľ myši umiestnime do odseky textu obsahu (content). - V selektora značiek vyberieme <div#content> - V paneli Štýly CSS > Všetko v časti Všetky pravidlá vyberieme selektor.content,. klikneme na ikonu > Upraviť štýl. V dialógovom okne Definícia pravidlá CSS pre. content vyberieme Kategóriu Typ, veľkosť texte je nastavená na 80%. V poli Font -size napíšeme 90 a ako jednotku zvolíme % zo zoznamu volieb, > OK > Súbor > Uložiť. Toto je jeden zo spôsobov, ako môžeme zmeniť veľkosť textu. POUŽÍVANIE PANELU VLASTNOSTI Panel otvoríme z ponukového riadku > Okno > Vlastnosti, nachádza sa v dolnej časti, pod selektorom značiek. Voľby v paneli sa mení podľa aktuálneho výberu, ak vyberieme obrázok je v paneli možné upravovať šírku či výšku obrázku a odkazy na nástroje, pomocou ktorých ho môžeme upravovať. Ak je vybraný text, je panel rozdelený do dvoch častí: HTML - v ňom môžeme upravovať vlastnosti pomocou zdrojového kódu. CSS - v nich môžeme upravovať vlastnosti pomocou kaskádových štýlov.

28 - Otvoríme panel Vlastnosti z ponukového riadku > Okno > Vlastnosti. - V okne dokumentu v hlavnom obsahu označte vetu - Vyberieme tlačidlo HTML, klikneme na tlačidlo I, tým zmeníme text na zvýraznený, niektoré prehliadače ho zobrazujú kurzívou. V zdrojovom kóde aj v selektora značiek je zapísaný tag <em> - V paneli vlastnosti prepneme na tlačidlo CSS, - Z ponuky Odkazované vyberieme <nová pravidlo CSS> a Upraviť pravidlo V otvorenom dialógovom okne vyberieme Typ selektora z roletky Zložený prvok... a pomocou tlačidla menej špecifické ako Názov selektora vyberieme #contentp em > OK. V okne Definícia pravidlá... vyberieme kategóriu Typ a po otvorení palety farieb vyberieme modrú > OK > Uložiť. Pravidlá štýlov teraz obsahujú nové pravidlo, ktoré môžeme použiť na akýkoľvek ďalší text vnútri elementu div#ccontent, keď vybraný text zvýrazníme kurzívou, automaticky na neho bude použité zafarbenie podľa definovaného pravidla. Týmto sme vytvorili svoju prvú webovú stránku. Na konci práce s novou stránkou si ju vždy pozrieme v prehliadači, v praxi máme nainštalovaných viac prehliadačov, vo všetkých najpoužívanejších by sme mali skontrolovať, ako sa stránka zobrazuje. - > Súbor > náhľad v prehliadači. - (Mozilla, Explorer, Google Chrome, Opera,...).

29 7. lekcia EXTERNÁ ŠABLÓNA CSS PRÁCA S kaskádovými štýlmi Väčšina štýlov CSS je uložená v externej šablóne štýlov, potom môžu byť všetky vytvárané stránky prepojené s touto šablónou. Týmto spôsobom je umožnená jednoduchá zmena štýlov na všetkých webových stránkach, prepojených s externou šablónou. Navyše to umožňuje vypracovať viac externých šablón tým je možné si vyberať rôzny vzhľad pre rovnaký obsah. Tento spôsob práce vedie k špecializácii grafikov, niektorí sa venujú iba vytváranie týchto externých šablón a tvorcovia www stránok si ich môžu kupovať. PREPOJENIE EXTERNÉHO CSS V ADOBE DW CS6 Vytvorte alebo otvorte stránku html - z ponukového riadku otvorte Okno > styly CSS > vše > připojit seznam stylů (ikona reťaze) - otvorí sa dialógove okno Připojit externí seznam stylů > soubor/url > vyberte súbor meno.css - v okne Médiá vyberte obrazovku (screen) - moderné CSS štýly umožňujú použitie štýlov v závislosti od typu média. V prepínači Přidat jako vyberte Odkaz > OK Vytváraná stránka sa zmenila, bol použitý layout meno.css Súbor > Uložiť všetko. Týmto spôsobom sme prepojili túto stránku s meno.css, v zdrojovom kóde v hlavičke stránky môžeme vidieť: <style type="meno.css ">.

30 VYTVORENIE NOVÉHO PRAVIDLA CSS Pravidlo css sa skladá z dvoch častí: Selektor napr. h1 Deklarácia vlastností napr. color:red; fontsize:36 px... v DW sa vytvárajú štýly v rozhraní s roletkami a voľbami, HTML kód za nás zapisuje DW Pravidlá vytvárame pre 2 typy selektorov: - selektor následníka - vlastný selektor (trieda)

31 DEFINÍCIA štýlov pre selektor následníkov. Takto definované pravidlá pomocou špeciálnych značiek sa automaticky ihneď použijú, kedykoľvek takú značku (tag) na stránke použijeme. - vytvorme novú stránku s troma div - s názvom box1, box2, box3, v každom nadpis h1. Vytvorme nové pravidlo pre tag h1 - červená farba - vyznačme jeden z nadpisov, vo vlastnostiach CSS zvoľme nové pravidlo css, stlačme tlačidlo Upravit pravidlo > typ selektoru tag, názov selektoru h1 > OK. V definícii pravidla vyberme červenú farbu - všetky tri nadpisy očerveneli. - vytvorme následnícke pravidlo pre tag h1 - zelená farba - vyznačme nadpis v boxe2, vo vlastnostiach CSS zvoľme nové pravidlo css, stlačme tlačidlo Upravit pravidlo > typ selektoru vidíme v ponuke #box2 h1 - zložené pravidlo > OK. V definícii pravidla vyberme zelenú farbu - jeden z nápisov ozelenel. - Všimneme si v Styly CSS pribudla vlastnosť pre h1 a pre h1 umiestnená v box2. Symbol # pred názvom selektora znamená, že ide o identifikátor a definované pravidlo ovplyvní iba tie značky <h1>, ktoré sú vnorené (sú následníkom) identifikátora box2.

32 Použitie CSS tried (class) a selektorov Keďže táto oblasť je veľmi rozsiahla, uvedieme len niekoľko najčastejšie používaných prípadov. Typový selektor X - platí pre každú značku X na stránke h1 { color : blue; } p { color : green; } <h1>hocijaký nadpis h1 bude mať modré písmo.</h1> <p>hocijaká značka p na stránke bude mať zelené písmo.</p> Tento prípad sme si ukázali v časti Vkladanie CSS do hlavičky dokumentu (X)HTML. ID selektor h1#nadpis { color : blue; } #odstavec { color : green; } <h1 id="nadpis">len nadpis h1 s použitým ID selektorom nadpis" bude mať modré písmo.</h1> <p id="odstavec">hocijaká značka na stránke s použitým ID selektorom odstavec" bude mať zelené písmo.</p> Pritom platí, že ID musí byť v rámci stránky jedinečné, žiadne dva prvky nesmú mať rovnaké ID. Toto sa používa na označenie hlavných oblastí na stránke, ako sú napríklad hlavička stránky, oblasť s menu, hlavná oblasť pre obsah stránky atď. CSS Triedy (class) h1.nadpis { color : blue; }.odstavec { color : green; } <h1 class="nadpis">všetky nadpisy h1 s použitou triedou nadpis" budú mať modré písmo.</h1> <p class="odstavec">hocijaká značka na stránke s použitou triedou odstavec" bude mať zelené písmo.</p> Na rozdiel od ID selektora platí, že trieda nemusí byť jedinečná, môže sa v rámci stránky opakovať. V značke je možné použiť aj niekoľko tried súčasne..odstavec { color : green; }.hrubepismo { font-weight : bold; } <div class="odstavec hrubepismo">tieto dve triedy hovoria že písmo ohraničené touto značkou bude zelenej farby a hrubé.</div> Takto je možné kombinovať určité vlastnosti dohromady, bez toho aby sme museli rovnakú definíciu CSS opakovať viackrát.

33 Zápis vlastností CSS Keď chceme pre značku, či triedu zmeniť súčasne viac vlastností, môžeme ich kombinovať:.odstavec {font-size : 12px; (veľkosť písma) font-weight : bold; (hrúbka písma) color : green; (farba písma)} Ako je vidieť, veľkosť písma (font-size) sa dá určiť za pomoci čísla. Konkrétne v tomto prípade sme použili jednotku pixel (px - bod na obrazovke). Je možné použiť viac typov jednotiek. Absolútne jednotky (tie, ktoré by mali byť rovnako veľké napríklad po vytlačení na papier aj na obrazovke): mm - milimetre, cm - centimetre (1cm = 10mm), in - inch (palec 1in = 2,54cm), pt - point (typografický bod 1pt = 1/72in), pc - pica (1pc - 12pt). Relatívne jednotky (odvodené od určitej základnej veľkosti): em - stupeň aktuálneho písma (v podstate percentuálne vyjadrenie veľkosti - napríklad 1.2em znamená 120%), ex - stredná výška aktuálneho písma (x-výška), px - pixel (obrazovkový bod). Ďalej platí pravidlo, že vždy platí posledný zápis štýlového predpisu. Toto sa používa v prípade, keď existujúci súbor zo štýlovým predpisom nechceme prepisovať. Jednoduchým vložením nového štýlového predpisu, ktorý bude v druhý v poradí, môžeme prepísať hodnoty nastavené predchádzajúcim zápisom. Príklad:.nadpis { font-size: 14pt; }.nadpis { font-size: 16pt; } - platí len tento

34 8. lekcia ZMENY PRAVIDIEL A PORADIE Všetky nami novovytvorené alebo prevzaté pravidlá, ktoré sú umiestnené v externej šablóne si môžeme prezrieť v paneli > Štýly CSS > Všetko rozbaliť <styly> Tu sa tiež objavia aj novo vytvorené pravidlá v paneli Vlastnosti, podľa mena, ktoré sme im pridelili - Aby sme uvideli všetky vlastnosti vybratého pravidlá vyberieme v paneli Vlastnosti CSS > súčasný pri označenie mena v dokumentovom okne sa v štýle CSS sa objaví vlastnosti pravidlá režimov.meno. Aby sme ich všetky uvideli, musíme zväčšiť okno Panelu Štýly CSS, za spodný okraj je môžeme roztiahnuť. Ak potrebujeme zmeniť toto pravidlo, môžeme to urobiť v paneli > Štýly CSS > Upraviť styl. Tým vyvoláme dokumentové okno " Definícia pravidlá pre... " a v ňom môžeme vykonať požadovanú zmenu. Rovnaký efekt dosiahneme dvojklikom na príslušnú vlastnosť. Týmto spôsobom sme v predchádzajúcej práci zmenili typ písma a farbu textu pre značku <h1> vnútri elementu s identifikátorom #box. Akonáhle do tohto elementu na iné miesto vložíme novú značku <h1>, bude na text v tejto značke použité rovnaké pravidlo. Adobe Dreamweaver CS6 rozdeľuje vlastnosti kaskádových štýlov do 8 kategórií: Typ, Pozadie, Blok, Rámček, Okraj, Zoznam, Umiestňovanie, Rozšírenie.

35 Teraz vytvoríme nové pravidlo pre text. Vytvorme triedu.hrubé Vo vlastnostiach (dole) CSS > nové pravidlo css > upravit pravidlo > trieda > názov: hrube. Upravit pravidlo > Font weight > bold Vytvorme si stránku s troma div (s ID box1, box2, box3), v každom nadpis h1 a paragrafovaný text (<p>). Zmeňme vlastnosť <p> tak, že ho zaradíme do triedy (class) hrube. Označme text v div box2, pravé tlačidlo myši, Styly CSS zvoľme triedu hrube. Text zhrubol Označme jeden z nadpisov h1 a zvoľme triedu hrube. Nadpis h1 zhrubol, lebo túto vlastnosť nemá inde definovanú. Na rozdiel od selektora následníka, ktorý sa pre zadaný tag (značku) a identifikátor používa automaticky, sa pravidlo nastavené pre triedu a meno selektora používa iba tam, kde ho potrebujeme.

36 ZMENA PORADIA vložených PRAVIDIEL Pre jednoduchšie hľadanie jednotlivých pravidiel v šablóne štýlov je výhodné je po vytvorení presunúť tak, ako to zodpovedá ich dôležitosť, alebo združovať viac podobných pravidiel, máme však možnosť ich presúvať do iného umiestnenia. - Otvoríme panel Štýly CSS > Všetko > rozbaliť všetky pravidlá + a myšou pretiahneme pravidlo z pôvodnej pozície na novú pozíciu -> Súbor > uložiť všetko, tým uložíme vykonané zmeny ako súboru HTML, tak aj v súbore CSS. ak máme v html definovaný zoznam štýlov, nachádza sa medzi tagmi <style> </style> SAMOSTATNÝ SÚBOR CSS Súbor -> Nový -> Typ stránky:css CSS príkazy sa ukladajú do riadkov v tvare, v kom ich používame v html súbore. príklad: A {color: "#280099"; text-decoration: none;} A:hover {color: red; text-decoration: none}.hidden {font-family: "Arial Black", Gadget, sans-serif; font-size: 2pt; font-weight: normal; } v html texte na prilinkovaný CSS súbor odkazujeme tagom v hlavičke <link href="ivob.css" type=text/css rel=stylesheet> kde v href je abosútny alebo relatívny odkaz na súbor s menom ivob.css externý súbor používame vtedy, keď chceme jedno štýlovanie použiť pre viac html stránok

37 9. lekcia NASTAVENIE VLASTNÝCH TRIED Na rozdiel od selektora následníka, ktorý sa pre zadaný tag (značku) a identifikátor používa automaticky, sa pravidlo nastavené pre triedu a meno selektora používa iba tam, kde ho potrebujeme. - V paneli Štýly CSS > Nové pravidlo CSS - V dialógovom okne "Nové pravidlo CSS" vyberieme Typ selektora v roletke na Trieda, v poli Názov selektora napíšeme meno. V okne Definícia pravidlá nastavíme zvolený štýl > OK - V dialógovom okne "Definícia pravidlá CSS pre. meno v moještýly 'zvolíme Kategóriu Typ, v roletke Font-variant vyberieme small-caps. (kapitálky) > OK > súbor > uložiť všetko Použitie štýlu definovaného v triede Jednou z možností, ako použiť štýly na značke je využiť panel Vlastnosti - Vyberieme si slovo v texte stránky - tým sa zvýrazní meno a oblasť nad slovom - Otvoríme z ponukového riadku > Okno > Vlastnosti, v ľavej časti skontrolujeme, či máme stlačené tlačidlo Css. Zoznam odkazovaný v paneli Vlastnosti zobrazuje všetky triedy CSS, ktoré sú dostupné v dokumente, vyberte >. meno Vybraný text sa formátuje na kapitálky a indikátor v selektore značiek obsahuje názov triedy: <span.meno>. Trieda sa pridala do textu pomocou tagu <span> Pre dokončenie stránky zopakujte postup s výberom mena každej osoby na vytvárané stránke a použite opäť triedu.meno, prezrieme si stránku v živom zobrazení alebo v prehliadači, potom zvolíme > súbor > uložiť.

38 POUŽITIE VLASTNÝCH TRIED NA ČASTI STRÁNKY V DW môžeme vkladať časti stránky alebo značky <div> do dokumentu, aby sme vytvorili oblasti layoutu alebo organizovali časti stránky, značke, <div> môžeme priradiť identifikátor alebo triedu. - myšou vyberieme fotografiu a odseky textu. - z ponukového riadku > vložit > vyberieme > formátování a rozvržení > div - nabehne menu editora tagov - môžeme zvoliť parametre (zarovnanie, štýlovanie, jazyk, udalosti...) - v otvorenom dialógovom okne v roletke vložíme triedu profil a zavrieť - stlačíme tlačidlo > nové pravidlo CSS a v selektore vyberieme triedu.profil - v dialógovom okne vyberieme Typ selektora ->Trieda a do poľa selektora napíšeme / vyberieme.profil. V roletke Definice pravidla vyberieme nový soubor seznam stylu a nazveme ho ivob.css > OK - V dialógovom okne Definícia pravidlá CSS pre profil v ivob.css vyberieme kategóriu Rámeček a v roletke Clear (zrušenie obtekania) zvolíme right (doprava). V okne dokumentu sa teraz zobrazuje bodkovaná čiara obklopujúca časť stránky, ktorá obsahuje vybraný obrázok a text. Čiara ukazuje na prítomnosť značky <div>. Dokiaľ nevykonáme na stránke ďalšie zmeny, iné zmeny na stránke neuvidíme.

39 POZÍCIOVANIE V RÁMCI DIV Absolútna pozícia (absolute) umiestni objekt do stránky na udanej súradnice bez ohľadu na okolitý text. Relatívna pozícia naproti tomu určuje o koľko sa má objekt posunúť oproti svojej normálnej polohe. Fixed spôsobí, že objekt zostáva na rovnakom mieste v okne, aj keď sa so stránkou roluje. (Internet Explorer 6 to nevie) príklad pre pozíciovanie textu v div: <span style="position: relative; top: 20px"> relatívne umiestnený text</span> <span style="position: absolute; top: 100px; left: 150px">absolútne umiestnený text</span>

40 relative znamená relatívne k umiestneniu predchádzajúceho prvku v dokumente html na príklade je umiestnený div2 medzi div1 a 3. Div 2 má pozíciu zmenenú z pôvodného umiestnenia #div_1 {width: 150px;} #div_2 {width: 150px; position: relative; left: 10px;top: 10px;} #div_3 {width: 150px;}

41 absolute znamená presné umiestnenie prvku kdekoľvek v dokumente html. prvok pri rolovaní stránky roluje spolu s obsahom #div_1 {width: 150px; } #div_2 {width: 150px; position: absolute; right: 10px; bottom: 10px; } #div_3 {width: 150px; }

42 static defaultná pozícia elementu na stránke Div značky, sú umiestnené v jedna po druhej. Umiestňujú sa na stránke v bežnom poradí, každá z nich po predchádzajúcej Pre tagy div nie je potrebné špecifikovať static umiestnenie v css #div_1 {width: 150px; } #div_2 {width: 150px; } #div_3 {width: 150px; }

43 fixed Umožňuje umiestniť prvok kdekoľvek na stránke, ale na rozdiel od absolútnej polohy je relatívna k oknu prehliadača, a nie dokument HTML. Výsledkom je, že div znehybní to znamená, že sa nepohybuje sa pri posúvaní stránky. #fixed {width: 100%; position: fixed; top: 0px; }

44 float a clear určujú, ako sa má blokový element "správať" oproti "okolitým" blokom. float určuje obtekanie - nastavením tejto vlastnosti povolíme nasledujúcim blokom obtekať tento blok vľavo, resp. vpravo (pozor, nastavujeme to, kde bude DANÝ BLOK obtekať ostatné, nie to, kde budú obtekať oni jeho). nopak vlastnosť clear obtekanie zakazuje. Na rozdiel od float, je tu možnosť zakázať obtekanie aj na obidvoch stranách. Chceme, aby hlavička obtekaná nebola a preto vlastnosť float nenastavíme (základná hodnota je float:none). Keďže pred ňou nie sú iné bloky, clear nie je nutný. Pre ľavý stĺpec chceme, aby bol obtekaný ostatnými vpravo, preto mu nastavíme float:left a clear:left. podobne pre stredný stĺpec. Pravému stĺpcu nastavíme vlastnosť float:right. Päta nemá byť obtekaná ničím - preto musíme použiť vlastnosť clear - clear:left nestačí - ak by obsah pravého stĺpca bol príliš dlhý, tak by nám "pretiekol". Preto nastavíme clear:both. Teraz sa stránka roztiahne na požadovanú dĺžku bez ohľadu na to, ktorý stĺpec bude najdlhší. Celú stránku vystredíme pomocou margin: 0 auto pre #obsah. Vzdialenosť od pravého aj ľavého okraja bude rovnaká a preto nám to zabezpečí, že #obsah bude v prostriedku. body {text-align:center; background-color: #fff; } #obsah {text-align:left; display: block; width:780px; margin: 0 auto; background: #ccc; } #hlavicka {display: block; width:100%; } #lavy { display: block; float:left; clear:left; width:20%;} #stred {float:left; display: block; width:65%;} #pravy { float:right; display: block; width:15%; } #paticka {display: block; width:100%; clear:both; }

45

46 Zhrnutie - syntax CSS pravidla selector - deklarácia (vlastnosť:hodnota) h1{color:blue;font-size:16px; }; na začiatku deklarácii vlastností v CSS musí byť SELEKTOR Selektor určuje na ktorý prvok na stránke sa budú vlastnosti vzťahovať môžeme ho zadať tromi spôsobmi: 1. class - pred selektor sa dá bodka napr.:.nadpis 2. ID - pred selektor sa dá mriežka napr.: #nadpis 3. Tag - ako selektor použijeme html prvok napr.: p, h1 - h6, a, body K selektoru môžeme pridať ešte aj pseudo-element ktorý sa osobitne vzťahuje na časť alebo stav prvku napr. - p:first-line - táto deklarácia sa bude vzťahovať na prvý riadok odstavca a:visited - táto deklarácia sa bude vzťahovať na navštívený link DEKLARÁCIA - obsahuje vlastnosti a ich hodnoty k príslušnému prvku podla selectoru vlastnosť - je vlastnosť prvku napr.: color - farba, text, background- color - farba pozadia hodnoty su hodnoty jednotlivých prvkov napr.farba (red,green,#fff123,)

47

48 Kaskáda poradie aplikovania viacnásobných CSS pravidiel Selektor slúži na výber prvku stránky, pre ktorý bude platiť nasledujúca definícia štýlu, čiže umožňuje nám priradiť prvku stránky určitú vlastnosť. Začíname na úrovni s najnižšou prioritou CSS: 1. Preddefinované hodnoty internetového prehliadača 2. Externá definícia štýlov (súbor.css) 3. Interná definícia štýlov (vo vnútri elementu ) 4. Inline štýl (vnútri elementu HTML) Vyhráva ten, ktorý je najbližšie k elementu.. teda cislo 4.

49 Dedičstvo - inheritance V dokumente HTML, medzi jeho tagmi sú vzťahy medzi rodičmi a deťmi. Napríklad tag <title> je vždy vo vnútri <head>, takže <head> je rodič značky <title> je dieťa. Dedičnosť znamená, že dieťa zdedí štýly definované pre nadradený rodiča, aj vtedy, keď tento štýl nieje výslovne definovaná pre dieťa. Farba písma v celej vete je zelená, aj keď žiadna vlastnosť farby nebola definovaná pre <strong>. Je to preto, lebo <strong> je podriadený prvok <p>, takže <strong> zdedí štýl definovaný pre <p>, čo v tomto prípade je farba písma. <p style= color:green; > tento príklad ukazuje <strong> html dedičstvo </strong> </p>

50 10. lekcia ŽIVOTOPIS-SAMOSTATNÁ PRÁCA DOMÁCE ÚLOHA-VYHODNOTENIE: Pripravte si ako prácu do samostatného súboru svoje dve portrétové fotografie (veľkosť max 60 kb) a vo vami používanom textovom súbore dva odseky, prvý s názvom "osobné životopis a druhý bude mať názov profesijný životopis, obaja by mali mať dĺžku maximálne 400 znakov vrátane medzier. Všetky súbory uložte do priečinka s názvom "zivotopis". VLASTNÉ ZADANIE: -Vytvorte nový dokument, typ stránky: prázdna stránku, HTML, ako rozvrhnutie (layout) zvoľte: POPIS ÚLOHY: Vašou úlohou bude vytvoriť pomocou programu Adobe Dreamweaver CS6 jednu kompletnú www-stránku s názvom "Vaše priezvisko-životopis", do zadaného rozvrhnutie vložíte vlastné fotografie, nadpisy a odseky zadaného alebo vami vopred pripraveného textu. Potom podľa jednotlivých bodov zadania budete postupne vkladať alebo upravovať jednotlivé pravidlá kaskádových štýlov tak, aby vami vytvorená www-stránka sa svojím štýlom čo najviac podobala vzorovej stránke.

51

52 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>dokument bez názvu</title> <link href="ivob.css" rel="stylesheet" type="text/css" /></head> <body> <div id="hlavnyramcek"> <div id="meno">ing. Ivan Baran</div> <div class="fotka"><img src="ivob.png" width="200" height="200" /></div> <p class="nadpis">osobný životopis</p> <p>qwre qwrqwre wr r wer w er re wer w e wer wer wewer w rúpoij úpij úpoij úpoj úpoji úpoj úpjo úpoj úpoj púoj úpoj úpoj úpkm pkm plk m plkm pklm klpm km kplm pkm pkm pkm kpm plk lkm km km klm lkm l,ôm pmk km k, lkm lk m km</p> <p class="nadpis">profesijný životopis</p> <p>adadasdads ads ad asd asd asd asd asd ert ert ewrgoih oih ôoiuh ôj ôjk ôkn ôkn ôn ôkjn ion ikn ô kn ôn ôn ôn ôlkn ôlnk lkn ôknn ôkn ôlkn ôlkn ôlkn ôkn lkn ôlkn ôlkn ôkn kn lôkn lkn ôlkn ôlkn ôlkn lkn lkn ôlkn ôlkn ôlkn </p> </div> </body> </html>

53 @charset "utf-8"; body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #39C; position: static; width: auto; background-color: #CF6;}.fotka { position: static; height: 400px; width: 220px; background-color: #CCC; padding: 15px; float: left; margin: 10px; vertical-align: middle; text-align: center;} #meno { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #F00; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px;} #hlavnyramcek { font-family: Arial, Helvetica, sans-serif; color: #000; background-color: #FFF; border-top-color: #333; border-right-color: #333; border-bottom-color: #333; border-left-color: #333; height: 400px; margin: 10px; padding: 10px; width: 800px; vertical-align: middle;}.nadpis { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #00C; text-decoration: underline;} p { font-size: 10pt; font-weight: bold; color: #000;}

54 Padding a margin Margin - určuje šírku vonkajšieho okraju prvku. Margin sa môže zadávat jednou hodnotou naraz pre všetky štyři strany, alebo se vypíše viace hodnôt pre rôzne strany. Existujú varianty margin- top, margin- right, margin-bottom a margin- left určené iba pre zadanie jednej strany vonkajšieho okraja. Rozlišujeme dva druhy okrajov: vnútorný a vonkajší. vnútorný okraj sa anglicky a webovo hovori padding, vonkajší margin. Medzi paddingom a marginom sa zobrazuje rámček (border). Padding je vlastne vzdialenosť medzi okrajom - border a samotným elementom. Margin je vlastne vonkajší okraj, ktorý oddeľuje jednotlivé elementy od seba. Aj margin, aj padding sa dajú nastaviť hromadne - naraz, alebo aj jednotlivo hore dole vľavo vpravo. Dajú sa aj spárovať, ak sú rovnaké horný-dolný, ľavý-pravý. Ich hodnota saudáva v px alebo em.

55 Výpočet celkovej šírky a výšky elementu Mám obrázok 200 x 30 px Jeho parametre BOX modelu sú: padding 15px, border-top 2px, margin 10px a margin-left 25px Celkový rozmer teda bude: šírka: 200 obrázok + 2x15 padding + 0 border + 25 margin-left + 10 margin (pravý) = 265px výška: 30 obrázok + 2x15 padding + 2 border-top + 2x10 margin = 82 px

56 Margin collapse Ak sú dva BOX-elementy na sebe alebo v sebe a každý má svoj margin (napr 30px a 10px) zlejú sa dokopy takže vysledý margin je 30px. Funguje len na zvislom margine. 2 spôsoby riešenia problému "margin collapse" 1. priamo s tým počítame a jednému z nich dame taký margin, aký chceme aby bol dokopy. 2. vložíme medzi obidva nejaký neviditeľný element alebo nastavíme medzi ne okraj border.

57 11. lekcia VYTVORENIE šablóny štýlu PRE TLAČ Súbory CSS môžu tiež poskytovať štýly pre iné médiá, napr. pre tlač, vytvorené ivob.css boli navrhnuté pre zobrazenie stránky na obrazovke PC. Tlačové štýly často vylaďujú farebnú kombináciu, aby sa stránka lepšie vytlačila, skrývajú nepotrebné časti stránky, vylaďujú veľkosti či layout, aby viac zodpovedal použitému médiu, teda papiera. Jednej stránke môžeme priradiť viac šablón, akonáhle sa stránka vykreslí pre tlač, bude tlačové zariadenie hľadať tlačovú šablónu štýlov, a pravidlá v nej sa vezmú do úvahy. Ak ju nenájde, tlačiareň rozlíši medzi pravidlami pre obrazovku a pravidlami pre všetky typy médií. Východiskovým zobrazovacím médiom v DW je obrazovka, umožňuje však vykreslenie aj v iných štýloch. - Otvoríme z ponuky > Zobrazenie > Panely nástrojov > Štýl vykreslenie, panel sa objaví vľavo nad dokumentovým oknom.

58 Zmena existujúcich šablóny štýlu na tlačové Najvýhodnejšie je nevytvárať úplne novú tlačovú šablónu, ale vytvoriť ju preradením už vytvorenej šablóny (ivob.css), premenovaním a úpravou pravidiel. Vytvorte si v Dreamweaveri web, stiahnite doň súbor s extrerným štýlom ( - ivob.sk, ivob.css, ivob.png). Skopírujme externý štýl ešte raz a uložme ho pod názvom tlac.css Uložíme ho pod novým názvom - > Súbor > Uložiť ako napíšeme tlac.css > Uložiť. Klikneme v html súbore pravým Štýly CSS > Pripojiť zoznam štýlov. Z ponuky Prehľadávať vyberieme uložený štýl tlac.css, Pridať ako odkaz a v roletke médiá vyberieme print > OK. Ku pôvodnému ivob.css sa pripojil ďalší štýl tlac.css. Ak sa pozrieme na kód, vidíme že druhý štýl je určený pre tlač. Teraz môžeme niektoré pravidlá upravovať alebo úplne odstrániť. Súbor > Uložiť.

59 Úprava štýlu tlač Skrytie nepotrebných častí stránky: - Otvoríme v paneli nástrojov > Štýl vykreslenie > Vykresliť zobrazenie pri tlači - Vyberieme postupne jednotlivé pravidlá upravujúce farbu textu a zmeníme farbu na čiernu #000 - Vyberieme postupne jednotlivé pravidlá upravujúce farbu pozadia a zmeníme farbu na bielu #hhh - Vyberieme text, ktorý sa nemá zobrazovať, pridelíme mu triedu, dáme upraviť triedu a vo vlastnostiach CSS zmeníme Blok > Display > none Tým sa text stránky skryje, ak budeme stránku prezerať v zobrazení pre tlač, po prepnutí do zobrazenia pre displej sa text znova objaví.. Odstránenie nechcených štýlov Teraz je v pripojenej šablóne tlac.css mnoho štýlov zhodných s pôvodnou šablónou. Aby sme znížili veľkosť súboru, sú potrebné len tie pravidlá, ktoré sú nové alebo zmenené oproti tým v povodnom css. - V paneli Štýly CSS > Všetko > Tlac.css označíme myšou nepotrebné štýly a jednoducho ich vymažeme. Iný spôsob vymazanie nepotrebných pravidiel: > Súbor > Otvoriť > tlac.css a tu vyberieme myšou príslušné pravidlo a ručne ho zmazať (Delete). Tým je tlačová šablóna pripravená na použitie, na detekciu rozdielov vo formátovaní na obrazovke a pri tlači použijeme panel nástrojov Štýl vykresľovanie. Tlačiareň číta obe šablóny štýlov.

60 12. lekcia IMPORT TEXTU, TVORBA nadpisov IMPORT TEXTU Súbor > Otvoriť > ivob.html Tým si otvoríme počiatočný dokument v DW, v ktorom bude vytvárať text, odrážkové, číslované zoznamy a tabuľky. Uložme si ho pod iným názvom. Zvolíme > Súbor > Uložiť ako a uložíme súbor pod novým názvom, starý zavrieme bezo zmeny! Stiahnime si súbor s Lorem ipsum ( a stiahnut lorem ipsum.doc) Z textového súboru si vyberieme odstavec textu a skopírujeme ho do schránky. Na stránke ivob.html vyberte odstavec a na jeho miesto nakopírujeme text z dokumentu. Vložený text sa naformátuje ako odseky pomocou tagov <p>. Odseky dostali pridelený štýl s typom písma, ktoré je v už pripojenej externej šablóne štýlov.

61 Vytvorenie nadpisu Text by sa mal na webovej stránke formátovať tak, aby dával zmysel, bol prehľadný a celkovo zrozumiteľný. Nadpisy slúžia na organizáciu stránky do zmysluplných častí a zároveň slúži ako titulok stránky HTML, rovnako ako v knihe. Nadpisy sa v HTML dokumentoch vytvára pomocou značiek (tagov) <h1>,... <h6>, zoradené od najväčšieho k najmenšiemu. Ľubovoľné zobrazovacie zariadenie (PC, mobil, čítačka Braillovho písma,...) interpretuje text formátovaný pomocou značiek pre nadpis ako nadpis. Tento koncept býva nazývaný často ako sémantický kód, značky jazyka HTML vytvára sémantický kontext obsahu stránky: nadpisy, odseky, zoznamy, blokové citácie, tabuľky, obrázky, atď - Otvorme si ivob.html, vyberme jeden z nadpisov vpravo. Urobme z neho nadpis h2. - Z ponukového riadku panela vlastností - v ňom stlačíme tlačidlo HTML. Pretože externé šablóna štýlov ivob.css už bola k tejto stránke už pripojená, boli v texte už štýly v podobe color, font-family, font-size, atď pomocou definície príslušného pravidlá pridelené. Všetky pravidlá si môžeme prezrieť v paneli vlastnosti, akonáhle vyberieme časť s textom. - V roletke Formát sa objaví Nadpis 2, podobne aj v selektora značiek <h2>. - Inou močnosťou je výber textu, pravé tlačidlo myši > formát odstavce > Nadpis 2 Tým sme pridelili +casti textu význam a logické miesto v organizácii stránky vzhľadom k ďalšiemu obsahu, ktorý nasleduje za nadpisom.

62 13. lekcia VYTVORENIE ZOZNAMOV Zoznam používame ako časť textu, kde je obsah oznámenia oddelený do jednotlivých riadkov, ktoré môžu byť označené odrážkami alebo číslami (odrážkami alebo číslovaný zoznam), v Adobe Dreamweaver sú ikony pre tvorbu zoznamov označené ako neusporiadaný a usporiadaný zoznam. Na webových stránkach sa používajú pre ľahšiu orientáciu na stránke a k rýchlejšiemu čítaniu, môžu užívateľom pomôcť pri hľadaní rýchlych odpovedí. V HTML kóde je: - zoznam s odrážkami označený značkou (tagom) <ul> - číslovaný zoznam značkou (tagom) <ol> - jednotlivé významové riadky sú označené značkou (tagom) <li> v oboch druhoch zoznamov. Všetky tagy sú párové, to znamená, že sú na začiatku aj na konci zoznamu a riadkov (</ li>).

63 VYTVORENIE BLOKOV CITÁCIÍ V jazyku HTML ide blok citovaného textu - Umiestnime kurzor na začiatok citovaného odseku - V paneli Vlastnosti klikneme na tlačidlo s názvom "Odsadenie textu" Tag blockquote - odsadenie textu, v HTML jazyku týmto spôsobom vytvárame blokovú citáciu a predchádzajúcim tlačidlom "Odsadenie textu doľava" ju odstraňujeme. Tag Blockquote sa používa k označeniu textu, ktorý je citovaný z iného zdroja. Výsledok opäť záleží na prehliadači Internet Explorer tento text odlišuje odsadením od ľavého okraja stránky. Tento tag má jediný dôležitý parameter cite, ktorý obsahuje adresu dokumentu, z ktorého citácia pochádza. <blockquote cite=" > Štýly CSS > Nové pravidlo - V dialógovom okne Nové pravidlo zvolíme v časti Typ selektora voľbu "Tag", v poli Názov selektora vyberieme pomocou roletky Blockquote a v roletke Definícia pravidlá zapíšeme nové pravidlo do ivob.css. > OK.

64 - V otvorenom dialógovom okne Definícia pravidlá pre blockquote v ivob.css vyberieme Kategóriu Rámček, v časti Padding (vnútorný okraj) zaškrtneme voľbu Rovnaké pre všetky a do roletky Right a Left (vpravo, vľavo) zapíšeme číslo 4 s jednotkou px. Potom vyberieme Kategóriu Okraj a v časti Style vyberieme z roletky solid (neprerušovaný), Width (šírka) - thin (tenký) a v časti Color-tmavo modrú # 00C. > OK. Týmto krokom orámujeme pomocou štýlov blokovej citácie tenkú, modrú, neprerušovanú linkou, pretože to máme uložené ako nové pravidlo Blockquote v kaskádových štýloch, bude tento štýl použije automaticky na všetky blokové citácie na všetkých www-stránkach, ku ktorým budeme mať pripojené ivob.css. > Súbor > Uložiť všetko, tým uložíme zmeny a ko do HTML dokumentu, tak aj do priezviskoivob.css. Výsledok si môžeme pozrieť v živom zobrazení (potom ho nesmieme zabudnúť vypnúť) alebo v prehliadači.

65 14. lekcia TVORBA TABULIEK Pôvodne sa layout webových stránok tvoril pomocou tabuliek namiesto štýlov CSS, ktoré prišli neskôr, v súčasnosti sa tabuľky používajú predovšetkým pre zobrazovanie riadkov a stĺpcov dát. - Otvoríme nový súbor html a nazvime ho tabulka.html - V paneli Vložiť klikneme na ikonu Tabuľka. - V dialógovom okne Tabuľka napíšeme do poľa Riadkov 6 a do Pole Stĺpcov 3, prednastavené hodnoty vo všetkých ostatných poliach vymažeme, - Vzhľad tabuľky budeme prideľovať pomocou štýlov CSS, vďaka čomu bude tabuľka prístupná a použiteľná na viacerých zobrazovacích zariadeniach. - V časti Záhlavie vyberieme Nahoře, tým sa nadpis umiestni nad každý stĺpec a do poľa Titulok napíšeme Pokusná tabuľka > OK. Tabuľka sa zobrazí v stlačenej podobe, pretože zatiaľ nemá žiadny obsah a nemá nastavený žiadny rozmer. Pomocou panela vlastnosti môžeme tabuľke prideliť identifikátor, Tým môžeme prideliť každému elementu (i tabuľke) individuálny štýl.

66 - Teraz napíšeme do prvej bunky v tabuľke trieda, do triedny a do tretej hodnotenie. Týmto spôsobom môžeme vyplniť všetky bunky tabuľky, pre zrýchlenie práce ale skopírujeme hotový obsah z textového editora. - Ak je tabuľka príliš úzka a zle sa do nej strafuje kliknite na ňu pravým vyberte Tabulka a zvoľte Režim rozšířených tabulek je to pomôcka pre uľahčenie vypňlňania. Štýlovanie TABUĽKY POMOCOU CSS štýlov - Umiestnime kurzor kamkoľvek do tabuľky, v selektora značiek vyberieme <table>. - Otvoríme panel štýlov z ponukového riadku > Okno > Štýly CSS > Nové pravidlo CSS. - V dialógovom okne vyberte Typ selektora, v názve selektora sa automaticky zobrazí slovo table a nové pravidlo bude definované v ivob.css > OK. Týmto krokom pridáme selektor table do súboru ivob.css a ďalej budeme definovať pravidlo pre tento nový selektor. - Zvoľte kategóriu Rámček a v poli Width (šírka) napíšeme 475px a v časti Padding (vnútorný okraj) do poľa Top (hore) číslo 4 px, hodnota sa automaticky doplní do všetkých ďalších polí - Vyberieme Kategóriu Okraj a v štýle zvolíme solid (neprerušovaný), widht (šírka) thin (tenký) color: # 00C. > OK.

67 -> Okno > Štýly CSS > Nové pravidlo CSS. V dialógovom okne Nové pravidlo CSS vyberieme Typ selektora Zložený prvok (na základe výberu), do názvu selektora napíšeme th, td a pravidlo bude definované v ivob.css. > OK. V okne Definícia pravidlá pre th, td v ivob.css zvolíme Kategóriu Okraj a vo style zvolíme solid (neprerušovaný), widht (šírka) thin (tenký), color: # 00C. > OK.Soubor > Uložiť všetko. Teraz musíme ešte zrušiť medzeru medzi rámčekmi buniek tabuľky, čo musíme pridať ručne pomocou štýlov CSS. Otvoríme > Panel štýly, > Všetko a v časti Všetky pravidlá ivob.css označíme. Klikneme na Pridať vlastnosť a do okienka vpíšeme Bordercollapse, Tabulátorom sa presunieme do susedného okna a sem vpíšeme collapse center. border collapse: separate hranice sú oddelené. Toto je predvolené nastavenie. (border-spacing a prázdne-bunky vlastnosti nebudú ignorované). collapse Hranice sú zbalené do jednej hranice (ak je to možné) (border-spacing a prázdne-bunky vlastnosti budú ignorované) initial nastaví túto vlastnosť ako východiskovú hodnotu inherit zdedí túto vlastnosť od jeho nadradeného prvku