Naučte se používat vizuální pomůcky pro rozvržení v aplikaci Dreamweaver, jako např. pro nastavení pravítek, nastavení vodítek rozvržení, používání vodítek se šablonami, používání mřížky rozvržení a používání obkreslovaného obrazu.
Nastavení pravítek
Pravítka vám pomáhají měřit, organizovat a plánovat rozvržení. Mohou se zobrazovat na levém a horním okraji stránky, označené v pixelech, palcích nebo centimetrech.
- Pravítka můžete zapnout nebo vypnout v nabídce Zobrazit > Možnosti zobrazení návrhu > Pravidla > Zobrazit/skrýt.
- Chcete-li změnit počátek, přetáhněte ikonu počátku pravítek
(v levém horním rohu zobrazení návrhu v okně dokumentu) na libovolné místo na stránce. - Chcete-li vrátit počátek do výchozí pozice, vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Pravítka > Obnovit počátek.
- Chcete-li změnit jednotky měření, vyberte volbu Zobrazení > Pravítka a pak vyberte volbu Obrazové body, Palce nebo Centimetry.
Nastavení vodítek rozvržení
Guides sou čáry, které přetáhnete do dokumentu z pravítek. Pomáhají vám přesněji umístit a zarovnat objekty. Můžete také použít guides k měření velikosti prvků stránky nebo k emulaci záhybů (viditelných oblastí) webových prohlížečů.
Pro lepší zarovnání prvků můžete přichytávat prvky k guides a guides k prvkům. (Prvky musí být absolutně pozicionované, aby funkce přichycení fungovala.) Můžete také uzamknout guides, abyste zabránili jejich náhodnému přesunutí jiným uživatelem.
Vytvořit horizontální nebo vertikální vodítko
Ve výchozím nastavení jsou guides zaznamenány jako absolutní pixelová měření z horní nebo levé strany dokumentu a jsou zobrazeny relativně vůči počátku pravítka. Pro zaznamenání vodítka jako procenta stiskněte při vytváření nebo přesouvání vodítka klávesu Shift.
Zobrazení nebo skrytí vodítek
Přitahování elementů na vodítka
- Pokud chcete přitahovat elementy k vodítkům, vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Vodítka > Přitahovat na vodítka.
- Pokud chcete přitahovat vodítka k elementům, vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Vodítka > Přitahovat vodítka na elementy.
Při změně velikosti elementů, například absolutně polohovaných elementů (AP elementů), tabulek a obrazů, se měněné elementy přitahují na vodítka.
Zamknutí nebo odemknutí všech vodítek
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Vodítka > Zamknout vodítka.
Zobrazit a přesunout vodítko na konkrétní pozici
Zobrazení vzdálenosti mezi vodítky
Jednotka měření je stejná jako jednotka měření používaná pro pravítka.
Emulovat záhyb (viditelnou oblast) webového prohlížeče
Vyberte možnost Zobrazení > Možnosti zobrazení návrhu > Vodítka a vyberte z nabídky předem nastavenou velikost prohlížeče.
Odstranění vodítka
Změna nastavení vodítek
Vyberte možnost Zobrazení > Možnosti zobrazení návrhu > Vodítka > Upravit vodítka, nastavte následující možnosti a klikněte na tlačítko OK.
Barva vodítka
Určuje barvu čar vodítka. Klikněte na vzorek barvy a vyberte barvu z výběru barvy nebo zadejte hexadecimální číslo do textového pole.
Barva mezery
Určuje barvu čar, které se zobrazují jako ukazatele vzdálenosti, když podržíte ukazatel myši mezi guides. Klikněte na vzorek barvy a vyberte barvu z výběru barvy nebo zadejte hexadecimální číslo do textového pole.
Zobrazovat vodítka
Zobrazí vodítka v zobrazení návrhu.
Přitahovat na vodítka
Způsobuje přichycení prvků stránky k guides při přesouvání prvků po stránce.
Zamknout vodítka
Zamkne vodítka na místě.
Přitahovat vodítka na elementy
Při přetažení vodítek se vodítka přitáhnou na elementy stránky.
Vymazat vše
Odstranit všechna vodítka ze stránky
Používání vodítek s šablonami
Když jsou vodítka přidána do šablony aplikace Dreamweaver, všechny instance šablony tato vodítka zdědí.Guides v instancích šablon jsou však považovány za upravitelné oblasti, takže je uživatelé mohou měnit.Změněné příručky v instancích šablon jsou obnoveny do původního umístění pokaždé, když je instance aktualizována hlavní šablonou.
Do instance předlohy můžete také přidat vlastní vodítka. Guides přidané tímto způsobem nejsou přepsány, když je instance šablony aktualizována hlavní šablonou.
Používání mřížky rozvržení
Mřížka zobrazuje systém vodorovných a svislých čar v okně Dokument.Je užitečná pro přesné umístění objektů.Můžete zajistit, aby se absolutně umístěné prvky stránky automaticky přichytily k mřížce při jejich přesouvání a změnit mřížku nebo řídit chování přichytávání zadáním nastavení mřížky.Přichytávání funguje bez ohledu na to, zda je mřížka viditelná nebo ne.
Zobrazení nebo skrytí mřížky
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Mřížka > Zobrazovat mřížku.
Zapnutí nebo vypnutí přitahování
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Mřížka > Přitahovat na mřížku.
Změna nastavení mřížky
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Mřížka > Nastavení mřížky.
Barva
Určuje barvu čar mřížky. Klikněte na vzorek barev a vyberte barvu z nástroje Výběr barvy, nebo zadejte šestnáctkové číslo do textového pole.
Zobrazovat mřížku
Zobrazí mřížku v zobrazení návrhu.
Přitahovat na mřížku
Elementy stránky se přitahují na čáry mřížky.
Mezery
Určuje vzdálenost mezi čarami mřížky. Zadejte číslo a z nabídky vyberte Pixely, Palce nebo Centimetry.
Displej
Určuje, zda se čáry mřížky zobrazují jako čáry, nebo tečky.
Pokud není vybrána možnost Zobrazit mřížku, mřížka se v dokumentu nezobrazí a žádné změny nebudou viditelné.
Používání obkreslovaného obrazu
Obkreslovaný obraz můžete použít jako vodítko k opětovnému vytvoření návrhu stránky, který byl vytvořen v grafické aplikaci, například Adobe Freehand nebo Fireworks.
Obkreslovaný obraz je JPEG, GIF nebo PNG obrázek, který je umístěn v pozadí okna Dokument.Můžete obraz skrýt, nastavit jeho krytí a změnit jeho pozici.
Obkreslovaný obraz je viditelný pouze v aplikaci Dreamweaver; není viditelný při prohlížení stránky v prohlížeči.Když je obkreslovaný obraz viditelný, skutečný obraz pozadí a barva stránky nejsou viditelné v okně Dokument; obraz pozadí a barva však budou viditelné při prohlížení stránky v prohlížeči.
Umístit obkreslovaný obraz do okna dokumentu
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Načíst.
Vyberte možnost Soubor > Vlastnosti stránky a poté v kategorii Obkreslovaný obraz klikněte na tlačítko Procházet (vedle textového pole Obkreslovaný obraz).
Přejděte na soubor s obrazem a klikněte na tlačítko OK.
Chcete-li přepnout do jiného obkreslovaného obrazu nebo změnit kdykoliv průhlednost aktuálního obkreslovaného obrazu, vyberte možnost Soubor > Vlastnosti stránky.
Zobrazení nebo skrytí obkreslovaného obrazu
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Zobrazit.
Změna pozice obkreslovaného obrazu
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Nastavit polohu.
Pokud chcete přesně určit pozici obkreslovaného obrazu, zadejte hodnoty souřadnic do textových polí X a Y.
Chcete-li přesunout obraz o 1 pixel, použijte šipky.
Chcete-li přesunout obraz o 5 pixelů, stiskněte klávesu Shift a šipku.
Obnovení pozice obkreslovaného obrazu
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Obnovit polohu.
Obkreslovaný obraz se vrátí do levého horního rohu okna Dokument (0,0).
Zarovnání obkreslovaného obrazu k vybranému prvku
Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Zarovnat s výběrem.
Levý horní roh obkreslovaného obrazu je zarovnán s levým horním rohem vybraného prvku.
Nastavení vlastností obkreslovaného obrazu
Nastavte vlastnosti obkreslovaného obrazu (což je obrazový soubor, který se používá jako průvodce při navrhování stránky).
Proveďte jeden z následujících úkonů:
- Klikněte na možnost Soubor > Vlastnosti stránky
- Klikněte na možnost Okno > Vlastnosti a v Inspektoru vlastností textu klikněte na tlačítko Vlastnosti stránky.
V dialogovém okně Vlastnosti stránky vyberte možnost Obkreslovaný obraz. Na tomto panelu můžete upravit následující nastavení:
- Obkreslovaný obraz: Určuje obrázek, který se použije jako průvodce pro kopírování návrhu. Obraz slouží pouze jako reference a při zobrazení dokumentu v prohlížeči se nezobrazí.
- Průhlednost: Určuje krytí obkreslovaného obrazu, od zcela průhledného po zcela neprůhledný.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.