Používání vizuálních pomůcek pro rozvržení

Naposledy aktualizováno 27. 4. 2021

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

Přetáhněte odpovídající pravítko.
Umístěte guide do okna Dokumentu a uvolněte tlačítko myši (guide můžete přemístit jejím opětovným přetažením).
Poznámka

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

Vyberte Zobrazení > Guides > Zobrazit Guides.

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.
Poznámka

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

Podržte ukazatel myši nad vodítkem pro zobrazení jeho pozice.
Poklepejte na vodítko.
Zadejte novou pozici v dialogovém okně Přesunout vodítko a klikněte na OK.

Zobrazení vzdálenosti mezi vodítky

Stiskněte klávesu Control (Windows) nebo Command (Macintosh) a podržte ukazatel myši kdekoli mezi dvěma vodítky.
Poznámka

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

Přetáhněte vodítko z dokumentu.

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.

Nastavte možnosti a klepnutím na tlačítko OK změny aplikujte.

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.

Poznámka

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

Proveďte jeden z následujících úkonů:
  • 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.

V dialogovém okně Vlastnosti stránky určete průhlednost obrazu přetažením posuvníku Průhlednost obrazu 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

Vybrat prvek v okně dokumentu.

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ý.