Dreamweaver MX - začíname

Minule som Vám opísal Dreamweaver MX, jeho výhody a nevýhody. Dnes začnem s opisom tvorby www stránok pomocou tohto nástroja.


Po spustení programu Vám vrelo odporúčam zapnúť si design aj code view ( view -> code and design ). Budete tak mať okrem vzhľadu stránky na očiach aj kód a prípadné chyby si ľahko všimnente. Veľkosť oboch okien môžete meniť podľa momentálnej práce. Ďalej je nutnosťou mať zapnuté okná insert a properties ( window -> insert,properties ) a takisto aj okno design, ktoré vám umožní rýchlu a pohodlnú editáciu CSS ( window -> design ). Teraz ak máte tieto okná pozapínané, Vám už prakticky nič nebráni v tvorbe www. Ešte jedna maličkosť. Ak plánujete pracovať s "Layout tables", čo je vlastne nevyhnutnosť, musíte prejsť na layout view. V okne insert kliknite na Layout -> Layot view.

Nový dokument v Dreamweaver MX ( ďalej už len DMX ) vytvoríte kliknutím na File -> New. Zobrazí sa sa Vám ponuka množstva nových dokumentov od ASP.NET cez ColdFusion až po CSS. Stačí keď zvolíte požadovaný typ dokumentu a stlačíte CREATE. Ako ste si iste všimli v Code oblasti sa zobrazil kód, ktorý zodpovedá typu dokumentu, ktorý ste zvolili. Teraz môžete pokračovať buď v Design alebo Code view. Stačí keď kliknete do okna s ktorým chcete momentálne pracovať. Budeme vychádzať z predpokladu, že ide o klasický typ HTML stránky. Hlavné nastavenia stránky zmeníte v Modify -> Page properties. Tu môžete zmeniť klasické veci ako nadpis, farba/obrázok pozadia, farby liniek, left a top margin, priehľadnosť obrázkov atď.

Teraz si preberieme podrobnejšie vkladanie obsahu oknom (nie menu) insert.

- Common
Hyperlink, E-Mail link, Named Anchor :: Insert table, Draw Layer :: Image, Image placeholder, Fireworks html, Flash, Rollover image, Navigation bar :: Horizontal rule, Date, Tabular data :: Comment, tag chooser

- Layout
Insert table, Insert layer :: Standart view, Layout view :: Draw Layout table, Draw layout cell

- Text
Font tag editor, Bold, Italic :: Strong, Emphasis :: Paragraph, Block quote, Preformatted text :: Heading 1, Heading 2, Heading 3 :: Unordered List, Ordered list, List item :: Definition list, Definition term, Definition description :: Abbreviation, Acronym

-Tables
Inset table :: Table tag, Table row, Table header, Table data, Table caption

-Frames
Left frame, Right frame, Top frame, Bottom frame, Bottom and nested left frame, Bottom and nested right frame, Top and bottom frame, Left and nested top frame, Right and nested top frame, Top and nested left frame, Top and nested right frame :: Frameset, Frame, Floating frame (iframe), No frames

-Forms
Form :: Text field, Hidden field, Text area :: Checkbox, Radio button :: List menu, Jump menu :: Image field, File field, Button :: Label, Fieldset

-Templates
Make template, Make nested template :: Editable region, Optional region, Repeating region :: Editable optional region, Repeating table

-Characters
Line break, Non-breaking space, Left quote, Right quote, Em Dash :: Pound, Euro, Yen :: Copyright, Registered trademark, Trademark :: Other characters

-Media
Flash, Flash button, Flash text, Shockwave :: Applet, param, Active X :: Plugin

-Head
Meta, Keywords, Description, Refresh, Base, Link

-Script
Script, Noscript, Server-Side include

-(typový prvok - závisí od typu dokumentu < ASP, PHP ... > )

-Aplication
Recordset, Repeated region :: Dynamic table, Dynamic text :: Recordset navigation bar, Recordset navigation status :: Record insertion form, Record update form

Uff to bol popis insert okna. Pomocou neho teda môžete vkladať roôzne prvky na Vaše stránky. Dá sa s ním pracovať aj v menu Insert ale obsah je inak zatriedený.

Teraz si ešte preberieme prácu s oknom preferences. Pri písaní textu na ňom možno nájsť nasledovné elementy:

Format - None, Paragraph, Heading 1-6, Preformatted text Typ textu (označený obrázkom písmena A. prepína medzi ručný nastavením textu a použitím CSS) Ak máte ručné nastavenie textu nájdete tu ďalej
Veľkosť (size)
Farba (výber kliknutím na štvorec alebo napísaním do kolónky.
Bold
Italic
Zarovnanie textu - Left, Center, Right, Justify

Link
Target - _blank, _parent, _self, _top

Unordered List, Ordered List, Indent, Outdent

Tak to je na dnes všetko. Nabudúce si vysvetlíme designovanie stránky pomocou CSS a konečne aj Layout tables !
Banshee

Banshee, bansheeweb@bansheeweb.sk
Stiahnuté z Developer.sk