Rozloženie webových stránok Dreamweaver MX s kódovacím projektom Dreamweaver
šablóny
Používatelia, ktorí majú málo skúseností s navrhovaním webových stránok, môžu v aplikácii Dreamweaver tiež použiť rôzne šablóny, ktoré je možné jednotlivo prispôsobiť bez veľkého úsilia. Dobrý výsledok teda môžete získať veľmi rýchlo. Šablóny nájdete v úvodnom okne pod nadpisom „Vytvoriť z príkladu“ alebo pod položkou ponuky „Súbor - Nové“. V dialógovom okne, ktoré sa otvorí, sa zobrazia šablóny Dreamweaveru na karte „Všeobecné“. Karta „Šablóny“ však skryje weby, ktoré ste vytvorili sami. Niektoré z nich budete možno chcieť znova použiť.
Napríklad ak vyberiete kategóriu „Šablóny štýlov CSS“, v druhom stĺpci nájdete veľké množstvo takýchto preddefinovaných štýlov vrátane kompletných návrhov. V dialógovom okne sa zobrazí ukážka a krátky popis vybratého štýlu. Pomocou tlačidla „Vytvoriť“ prevezmete vybraný štýl a potom ho ďalej upravíte.
Prezentácia: Šablóny pre rozloženie stránky
Tabuľky
Každý, kto niekedy popisoval tabuľky v HTML, bude potešený, že Dreamweaver môže uľahčiť túto niekedy časovo náročnú a na chyby náchylnú prácu tým, že vytvorí tabuľku tak ľahko, ako v programe na spracovanie textu. Okrem obvyklej funkcie prehľadnej prezentácie informácií vo webdizajne majú tabuľky aj dôležitú funkciu rozloženia. Ak sa tabuľky používajú ako pomôcka na rozloženie, zvyčajne sa používajú takzvané „slepé“ tabuľky, ktoré prehľadne štruktúrujú obsah bunky bez toho, aby videli rám tabuľky.
Vytváranie tabuliek z aplikácie Dreamweaver je veľmi jednoduché. Buď vyberte symbol tabuľky v „lište vkladania“ nad oknom dokumentu na karte „Všeobecné“, alebo choďte priamo na položku ponuky „vložiť tabuľku“. V každom prípade sa otvorí dialógové okno, ktoré veľmi pripomína dialógové okná v programoch na spracovanie textu. Jednoducho určíte počet riadkov a stĺpcov, šírku tabuľky v percentách zo šírky obrazovky alebo v pixeloch, hrúbku okraja v pixeloch, výplň buniek a rozstup buniek. Tí, ktorí sú oboznámení s HTML, majú na mysli príslušné značky, ostatní si môžu po vložení tabuľky prezrieť zobrazenie kódu.
V dialógovom okne je možné určiť aj orientáciu hlavičky a definovať štítok tabuľky vrátane jej zarovnania. Po potvrdení výberu tlačidlom OK sa požadovaná tabuľka už nachádza na webe. Obrázok pozadia, farbu pozadia a farbu rámu je možné určiť aj v inšpektore priradených vlastností pod oknom dokumentu.
„Slepá tabuľka“ použitá na rozloženie sa získa nastavením hrúbky okraja na nulu pixelov. Informácie pre tabuľku je tiež možné ľahko neskôr zmeniť pomocou panela vlastností. Najjednoduchší spôsob zadávania do jednotlivých buniek tabuľky je v zobrazení konceptu vložením textov alebo obrázkov priamo do príslušného prvku tabuľky po vložení kurzora, rovnako ako v prípade programu WORD.
Ako je zvykom v textovom procesore, riadky a stĺpce je možné vkladať alebo mazať aj v existujúcich tabuľkách. Za týmto účelom označíte prvok tabuľky, do ktorého blízkosti chcete vložiť stĺpec alebo riadok. V časti „Vložiť - Objekty tabuľky“ môžete integrovať riadky nad alebo pod, ako aj stĺpce vľavo alebo vpravo od neho.
Ľahko sa dajú spojiť aj prvky stola. Zodpovedajúce prvky sú označené myšou. Potom použijete položku ponuky „Upraviť - Tabuľka“ a tam možnosť „Pripojiť bunky“. V inšpektore nehnuteľností vľavo dole je dokonca špeciálne tlačidlo.
Tieto úpravy sú možné aj u „slepých stolov“ bez dohadov, pretože neviditeľný rám je v dizajnovom zobrazení zobrazený prerušovanými čiarami. Ak ste vytvorili tabuľku podľa svojich vlastných dizajnérskych nápadov, môžete prvky vyplniť ľubovoľne. Vždy je dôležité mať kontrolné zobrazenie pomocou náhľadu prehliadača, ku ktorému sa dostanete kliknutím na „glóbus“ nad oknom dokumentu. Pre náhľad by ste mali použiť všetky verzie prehľadávača dostupné v počítači, aby ste získali komplexný prehľad o usporiadaní webových stránok. Týmto spôsobom môžete do veľkej miery zabezpečiť, aby čo najviac používateľov internetu videlo webovú stránku podľa plánu.
Rámy
Pre profesionálne usporiadanie je použitie CSS takmer nevyhnutné, minimálne ak plánujete web s viacerými webmi, čo je zvyčajne tento prípad. Ak ste dokončili kapitolu o formátovaní textu, v skutočnosti ste už vytvorili pokyny pre CSS v aplikácii Dreamweaver. U Dreamweaveru si to však nevyhnutne nevšimnete, pretože v pozadí sa toho deje veľa.
V aplikácii Dreamweaver môžete samozrejme tiež vedome vytvárať a používať štýly CSS. Za týmto účelom vyberte v ponuke „Text“ možnosť „Štýly CSS“ a potom „Nové“. Dialógové okno, ktoré sa otvorí, očakáva, že zadáte názov nového štýlu. Teraz môžete definovať štýl ako triedu, aby sa dal použiť pre všetky značky. Dreamweaver potom chce vedieť, či má byť štýl CSS vytvorený iba pre jeden dokument, alebo či chcete vytvoriť svoj vlastný súbor CSS, aby ste ho mohli neskôr znova použiť.
Po potvrdení pomocou „OK“ sa otvorí okno pre definíciu štýlu CSS. Tam môžete vykonať nastavenie pre kategórie písmo, pozadie, blok, rámček, rám, zoznam, umiestnenie a rozšírenie. Každé individuálne nastavenie potom patrí do definície štýlu a má vplyv na webovú stránku, do ktorej bude integrovaný nový štýl CSS.
Prezentácia: Definícia štýlu CSS
Ak chcete tento nový štýl CSS priradiť k určitému prvku alebo sekcii vytváranej webovej stránky, môžete použiť panel vlastností patriaci k textu alebo tabuľke. Označte textovú časť a vyberte názov nového štýlu CSS v časti Štýl v inšpektore Vlastnosti. Rovnaký postup sa používa pri použití šablón štýlov, ktoré sú už k dispozícii v aplikácii Dreamweaver. Ak chcete použiť inštrukciu CSS na tabuľku alebo jednotlivé bunky, označte tabuľku alebo jej časti a v príslušnom inšpektore vlastností nastavte požadovanú „triedu“.
Je tiež možné použiť alebo definovať štýl ID. Každý element stránky, ktorý nesie atribút ID, je potom naformátovaný zodpovedajúcim spôsobom. Za týmto účelom napríklad označíte oddiel tabuľky a do panela vlastností zadáte názov pod „ID tabuľky“. Potom použite možnosť „Spravovať štýly“ v poli „Trieda“. Otvorí sa dialógové okno s názvom „Upraviť šablónu štýlov“. Po stlačení tlačidla „Nový“ sa vám zobrazí známe dialógové okno „Nový štýl CSS“. Teraz sa rozhodnete pre možnosť „Rozšírené (ID,
o nás
Webové aplikácie vyvíjame s veľkou vášňou. Naše vedomosti radi odovzdávame ďalej. Viac o kódovacom projekte