Příručka uživatele Zrušit

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

Hledat
Dreamweaver

Dreamweaver

Otevřít aplikaci
  1. Příručka uživatele aplikace Dreamweaver
  2. Úvod
    1. Základy navrhování responzivních webů
    2. Co je nového v aplikaci Dreamweaver
    3. Vývoj webu v aplikaci Dreamweaver – přehled
    4. Dreamweaver / Běžné otázky
    5. Klávesové zkratky
    6. Systémové požadavky aplikace Dreamweaver
    7. Přehled funkcí
  3. Dreamweaver a Creative Cloud
    1. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    2. Knihovny Creative Cloud v aplikaci Dreamweaver
    3. Používání souborů Photoshop v aplikaci Dreamweaver
    4. Práce s aplikací Adobe Animate a Dreamweaver
    5. Extrahujte soubory SVG optimalizované pro web z knihoven
  4. Pracovní plochy a zobrazení aplikace Dreamweaver
    1. Pracovní plocha aplikace Dreamweaver
    2. Optimalizace pracovní plochy aplikace Dreamweaver pro vizuální vývoj
    3. Hledání souborů podle názvu nebo obsahu | Mac OS
  5. Nastavení webů
    1. O webech aplikace Dreamweaver
    2. Nastavení lokální verze webu
    3. Připojení k publikačnímu serveru
    4. Nastavení testovacího serveru
    5. Import a export nastavení webu aplikace Dreamweaver
    6. Přenos stávajících webových stránek ze vzdáleného serveru do kořenové složky lokálního webového místa
    7. Funkce usnadnění přístupu v aplikaci Dreamweaver
    8. Rozšířená nastavení
    9. Nastavení předvoleb webového místa pro přenos souborů
    10. Úprava nastavení serveru proxy v aplikaci Dreamweaver
    11. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    12. Používání systému Git v aplikaci Dreamweaver
  6. Správa souborů
    1. Vytváření a otevírání souborů
    2. Správa souborů a složek
    3. Získání souborů ze serveru a odeslání souborů na server
    4. Zpřístupnění/vyhrazení souborů
    5. Synchronizace souborů
    6. Porovnání souborů a nalezení rozdílů
    7. Maskování souborů a složek ve webu aplikace Dreamweaver
    8. Povolení poznámek k návrhu pro weby Dreamweaver
    9. Předcházení potenciálnímu zneužití modulu Gatekeeper
  7. Rozvržení a návrh
    1. Používání vizuálních pomůcek pro rozvržení
    2. O používání souborů CCS k rozvržení stránky
    3. Navrhování responzivních webů pomocí nástroje Bootstrap
    4. Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
    5. Zobrazení obsahu pomocí tabulek
    6. Barvy
    7. Responzivní návrh s využitím rozvržení s plovoucí mřížkou
    8. Funkce Extrakt v aplikaci Dreamweaver
  8. CSS
    1. Vysvětlení kaskádových seznamů stylů
    2. Rozvržení stránek pomocí panelu CSS Designer
    3. Použití preprocesorů CSS v aplikaci Dreamweaver
    4. Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
    5. Přesunutí pravidel CSS v aplikaci Dreamweaver
    6. Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
    7. Práce s tagy div
    8. Použití přechodů na pozadí
    9. Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
    10. Formátování kódu
  9. Obsah stránky a datové zdroje
    1. Nastavení vlastností stránky
    2. Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
    3. Práce s textem
    4. Vyhledání a nahrazení textu, tagů a atributů
    5. Panel DOM
    6. Úpravy v živém zobrazení
    7. Kódování dokumentů v aplikaci Dreamweaver
    8. Výběr a zobrazení elementů v okně dokumentu
    9. Nastavení vlastností textu v Inspektoru vlastností
    10. Kontrola pravopisu webové stránky
    11. Pomocí vodorovných linek v aplikaci Dreamweaver
    12. Přidání a úprava kombinací písma v aplikaci Dreamweaver
    13. Práce s datovými zdroji
    14. Vložení a aktualizace dat v aplikaci Dreamweaver
    15. Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
    16. Vložení a úprava obrázků v aplikaci Dreamweaver
    17. Přidání multimediálních objektů
    18. Přidání videa v aplikaci Dreamweaver
    19. Vložení videa HTML 5
    20. Vložit soubory SWF
    21. Přidání zvukových efektů
    22. Vložte zvuk HTML5 v aplikaci Dreamweaver
    23. Práce s položkami knihoven
    24. Používání arabského a hebrejského textu v aplikaci Dreamweaver
  10. Odkazy a navigace
    1. O odkazech a navigaci
    2. Vytváření odkazů
    3. Obrazové mapy
    4. Odstraňování problémů s odkazy
  11. Ovládací prvky a efekty jQuery
    1. Používání widgetů jQuery UI a jQuery Mobile v aplikaci Dreamweaver
    2. Používání efektů jQuery v aplikaci Dreamweaver
  12. Kódování webových stránek
    1. Informace o psaní kódu v aplikaci Dreamweaver
    2. Prostředí pro psaní kódu v aplikaci Dreamweaver
    3. Nastavení předvoleb kódování
    4. Přizpůsobení barevného zvýraznění kódu
    5. Psaní a úprava kódu
    6. Našeptávání kódu a dokončování kódu
    7. Sbalení a rozbalení kódu
    8. Opakované použití kódu v podobě výstřižků
    9. Linting kódu
    10. Optimalizace kódu
    11. Úprava kódu v zobrazení Návrh
    12. Práce s obsahem hlavičky stránek
    13. Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
    14. Používání knihoven tagů v aplikaci Dreamweaver
    15. Import vlastních tagů do aplikace Dreamweaver
    16. Práce s funkcemi JavaScriptu (obecné pokyny)
    17. Použití vestavěných chování jazyka JavaScript
    18. O XML a XSLT
    19. Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
    20. Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
    21. Přidání entit znaku pro XSLT v aplikaci Dreamweaver
    22. Formátování kódu
  13. Pracovní postupy pro různé produkty
    1. Instalace a používání rozšíření v aplikaci Dreamweaver
    2. Aktualizace v rámci aplikace v aplikaci Dreamweaver
    3. Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
    4. Práce s aplikacemi Fireworks a Dreamweaver
    5. Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
    6. Integrace mezi aplikacemi Dreamweaver a Business Catalyst
    7. Vytváření e-mailových kampaní na míru
  14. Šablony
    1. O předlohách aplikace Dreamweaver
    2. Rozpoznání předloh a dokumentů založených na předloze
    3. Vytvoření předlohy aplikace Dreamweaver
    4. Vytváření upravitelných oblastí v šablonách
    5. Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
    6. Použijte volitelné oblasti v předlohách
    7. Definování upravitelných atributů tagu v aplikaci Dreamweaver
    8. Postup vytvoření vnořených šablon v aplikaci Dreamweaver
    9. Úprava, aktualizace nebo odstranění předloh
    10. Export a import obsahu XML v aplikaci Dreamweaver
    11. Aplikace nebo odstranění předlohy z existujícího dokumentu.
    12. Úprava obsahu v předlohách Dreamweaver
    13. Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
    14. Nastavení předvoleb zvýraznění pro oblasti předlohy
    15. Výhody používání předloh v aplikaci Dreamweaver
  15. Mobilní zařízení a zařízení s více displeji
    1. Vytvoření multimediálních dotazů
    2. Změna orientace stránky pro mobilní zařízení
    3. Vytvoření webových aplikací pro mobilní zařízení pomocí aplikace Dreamweaver
  16. Dynamické weby, stránky a webové formuláře
    1. Informace o webových aplikacích
    2. Nastavení počítače pro vývoj aplikací
    3. Řešení problémů s připojením databází
    4. Odstranění skriptů připojení v aplikaci Dreamweaver
    5. Návrh dynamických stránek
    6. Přehled zdrojů dynamického obsahu
    7. Definice zdrojů dynamického obsahu
    8. Přidání dynamického obsahu na stránky
    9. Změna dynamického obsahu v aplikaci Dreamweaver
    10. Zobrazení záznamů databáze
    11. Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
    12. Přidání uživatelského chování serveru v aplikaci Dreamweaver
    13. Vytváření formulářů pomocí aplikace Dreamweaver
    14. Shromažďování informací od uživatelů pomocí formulářů
    15. Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
    16. Vytváření webových formulářů
    17. Rozšířená podpora formátu HTML5 pro elementy formuláře
    18. Vytváření formuláře pomocí aplikace Dreamweaver
  17. Vizuální vytváření aplikací
    1. Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
    2. Vytváření vyhledávacích stránek a stránek s výsledky
    3. Vytvoření stránky vložení záznamu
    4. Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
    5. Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
    6. Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
    7. Vytvoření registrační stránky
    8. Vytvoření přihlašovací stránky
    9. Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
    10. Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
    11. Používání komponent ColdFusion v aplikaci Dreamweaver
  18. Testování, náhled a publikování webových stránek
    1. Náhled stránek
    2. Náhled webových stránek Dreamweaver na více zařízeních
    3. Testování webu aplikace Dreamweaver
  19. Odstraňování problémů
    1. Opravené problémy
    2. Známé problémy

 

 

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

Pomocí pravítek můžete měřit, uspořádat a naplánovat rozvržení. Mohou se zobrazit na levém a horním okraji stránky se stupnicí v obrazových bodech, 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í

Vodítka jsou čáry, které přetáhnete do dokumentu z pravítek. Pomáhají přesněji umístit a zarovnat objekty. Pomocí vodítek také můžete měřit velikost elementů stránky nebo napodobit panely (viditelné oblasti) webových prohlížečů.

Při zarovnání elementů můžete přitahovat elementy na vodítka a vodítka na elementy. (Aby funkce přitahovaní pracovala, musíte umístit elementy absolutně.) Vodítka můžete také zamknout, abyste zabránili ostatním uživatelům v jejich přemístění.

Vytvoření vodorovného nebo svislého vodítka

  1. Přetáhněte odpovídající pravítko.
  2. Umístěte vodítko do okna dokumentu a uvolněte tlačítko myši (přemístění vodítka lze provést dalším tažením).
    Poznámka:

    Standardně je poloha vodítka absolutní vzdálenost v obrazových bodech od horní nebo levé strany dokumentu a zobrazuje se vzhledem k počátku pravítka. Chcete-li nastavit polohu vodítka v procentech, stiskněte při vytvoření nebo přesunutí vodítka klávesu Shift.

Zobrazení nebo skrytí vodítek

  1. Vyberte volbu Zobrazení > Vodítka > Zobrazovat vodítka.

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.

Zobrazení a přemístění vodítka na požadovanou pozici

  1. Podržením ukazatele myši nad vodítkem zobrazte jeho polohu.
  2. Poklepejte na vodítko.
  3. Zadejte novou polohu v dialogovém okně Posunout vodítko a klepněte na tlačítko OK.

Zobrazení vzdálenosti mezi vodítky

Stiskněte klávesu Ctrl (Windows) nebo Apple (Macintosh) a umístěte ukazatel myši na libovolné místo mezi dvěma vodítky.
Poznámka:

Jednotky měření jsou stejné jako jednotky měření pravítek.

Napodobení panelu (viditelné oblasti) 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

  1. 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. Klepněte na vzorek barvy a vyberte barvu v dialogovém okně pro výběr 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 vodítky. Klepněte na vzorek barvy a vyberte barvu v dialogovém okně pro výběr 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

    Určuje, že při přesunování elementů ve stránce se elementy přitahují na vodítka.

    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ž přidáte vodítka do šablony aplikace Dreamweaver, všechny výskyty dané šablony zdědí vodítka. S vodítky v instancích předloh se ale zachází jako s upravitelnými oblastmi, aby je mohli uživatelé upravovat. Upravená vodítka v instancích předloh se obnoví na původní polohu při každé aktualizaci instance pomocí vzorové předlohy.

Do instance předlohy můžete také přidat vlastní vodítka. Vodítka přidaná tímto způsobem se nepřepíší při aktualizaci instance předlohy pomocí vzorové předlohy.

Používání mřížky rozvržení

Mřížka zobrazuje v okně dokumentu systém vodorovných a svislých čar. Je užitečná pro přesné umísťování objektů. Můžete určit, aby se absolutně polohované elementy stránky při přesunutí automaticky přitahovaly na mřížku, a změnit mřížku nebo řídit chování přitáhnutí pomocí nastavení mřížky. Přitahování funguje, ať 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

  1. Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Mřížka > Nastavení mřížky.

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

    Barva

    Určuje barvu čar mřížky. Klepněte na vzorek barvy a vyberte barvu v dialogovém okně pro výběr barvy nebo zadejte hexadecimální čí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 volbu Obrazové body, Palce nebo Centimetry.

    Displej

    Určuje, zda se čáry mřížky zobrazují jako čáry, nebo tečky.

    Poznámka:

    Pokud není zapnutá volba Zobrazovat mřížku, mřížka se nezobrazuje v dokumentu a nejsou vidět žádné změny.

Používání obkreslovaného obrazu

Při použití obkreslovaného obrazu jako vodítka můžete znovu vytvořit návrh stránky vytvořený v grafické aplikaci, například Adobe Freehand nebo Fireworks.

Obkreslovaný obraz je obraz JPEG, GIF nebo PNG umístěný na pozadí okna dokumentu. Obraz můžete skrýt, nastavit jeho krytí a změnit jeho polohu.

Obkreslovaný obraz je viditelný pouze v aplikaci Dreamweaver (není viditelný při otevření stránky v prohlížeči). Když je obkreslovaný obraz viditelný, v okně dokumentu není viditelný skutečný obraz pozadí a barva pozadí; obraz i barva pozadí ale budou viditelné, jakmile stránku zobrazíte v prohlížeči.

Vložení obkreslovaného obrazu do okna dokumentu

  1. 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).

  2. Přejděte na soubor s obrazem a klikněte na tlačítko OK.

  3. V dialogu Vlastnosti stránky nastavte průhlednost obrázku pomocí posuvníku Průhlednost obrázku 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 polohy obkreslovaného obrazu

  1. Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Nastavit polohu.

    • Chcete-li přesně zadat polohu obkreslovaného obrazu, zadejte hodnoty souřadnic do textových polích X a Y.

    • Chcete-li přesunout obraz o 1 obrazový bod, použijte kurzorové klávesy.

    • Chcete-li přesunout obraz o 5 obrazových bodů, stiskněte klávesu Shift a kurzorovou klávesu.

Obnovení polohy obkreslovaného obrazu

  1. 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 dokumentu (0,0).

Zarovnání obkreslovaného obrazu s vybraným elementem

  1. Vyberte element v okně dokumentu.

  2. Vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Obkreslovaný obraz > Zarovnat s výběrem.

    Levý horní roh obkreslovaného obrazu se zarovná s levým horním rohem vybraného elementu.

 Adobe

Získejte pomoc rychleji a snáze

Nový uživatel?

Rychlé odkazy

Zobrazit všechny vaše plány Správa plánů
Zobrazit rychlé odkazy
Skrýt rychlé odkazy

Právní upozornění    |    Zásady ochrany osobních údajů online