V okně Dokument umístěte kurzor
na místo, kde chcete, aby se značka div zobrazila.
Naposledy aktualizováno
25. 9. 2023
Zjistěte, jak s pomocí tagů div vystředit bloky obsahu, vytvořit efekty sloupců, vytvořit různé barevné oblasti a podobně.
Rozložení stránek můžete vytvořit ručním vkládáním značek div a aplikováním stylů CSS pro pozicování na ně.Značka div je značka, která definuje logické rozdělení v rámci obsahu webové stránky.Značky div můžete použít k centrování bloků obsahu, vytvoření efektů sloupců, vytvoření různých barevných oblastí a mnoho dalšího.
Pokud nejste obeznámeni s používáním značek div a kaskádových stylů (CSS) k vytváření webových stránek, můžete vytvořit rozložení CSS založené na jednom z předpřipravených rozložení, která jsou součástí aplikace Dreamweaver.Pokud se necítíte pohodlně při práci s CSS, ale jste zvyklí pracovat s tabulkami, můžete také zkusit použít tabulky.
Vkládání tagů div
Značky div můžete použít k vytvoření bloků rozložení CSS a jejich umístění v dokumentu.To je užitečné, pokud máte existující styl CSS s pozicovacími styly připojený k vašemu dokumentu. Aplikace Dreamweaver vám umožní rychle vložit značku div a aplikovat na ni existující styly.
Proveďte jeden z následujících úkonů:
Vyberte Vložit > HTML > Div.
V kategorii HTML na panelu Vložit klikněte na Div.
Nastavte libovolné z následujících voleb:
Vložit
Umožní vám vybrat umístění značky div a název značky, pokud se nejedná o novou značku.
Třída
Zobrazí styl třídy, který je aktuálně použit pro tag. Pokud jste připojili soubor stylů, třídy definované v tomto souboru stylů se zobrazí v seznamu.Použijte tuto rozbalovací nabídku k výběru stylu, který chcete aplikovat na značku.
Identifikátor
Umožňuje změnit název, který identifikuje tag div. Pokud jste připojili seznam stylů, identifikátory definované v tomto seznamu stylů se zobrazí v seznamu. ID pro bloky, které jsou již ve vašem dokumentu, nejsou uvedena.
Poznámka
Aplikace Dreamweaver vás upozorní, pokud zadáte stejné ID jako jiná značka ve vašem dokumentu.
Nové pravidlo CSS
Otevře dialogové okno Nové pravidlo CSS.
Klepněte na tlačítko OK.
Tag div se v dokumentu objeví jako rámeček se zástupným textem. Když přesunete ukazatel přes okraj pole, aplikace Dreamweaver ho zvýrazní.
Pokud je tag div absolutně polohovaný, stane se AP elementem. (Tagy div, které nejsou absolutně polohované, můžete upravovat.)
Úpravy tagů div
Po vložení značky div můžete s ní manipulovat nebo do ní přidat obsah.
Poznámka
Značky div, které jsou absolutně pozicované, se stávají prvky AP.
Tagy div získají viditelné okraje v případě, že jim přiřadíte okraje nebo jste vybrali volbu Obrysy rozvržení CSS. (Obrysy rozvržení CSS jsou v nabídce Zobrazení > Vizuální pomůcky standardně vybrané.) Když přesunete ukazatel nad tag div, aplikace Dreamweaver tag zvýrazní. Můžete změnit barvu zvýraznění nebo zvýraznění vypnout.
Když vyberete tag div, jeho pravidla můžete zobrazit a upravovat v panelu CSS Designer. Obsah můžete do tagu div jednoduše přidat tak, že do tagu div umístíte textový kurzor a pak přidáte obsah stejným způsobem, jako byste přidávali obsah na stránku.
Tag div vyberte jedním z následujících způsobů:
- Klikněte na okraj značky div.
Poznámka
Okraj najdete pomocí zvýraznění.
Klepněte uvnitř tagu div a dvakrát stiskněte kombinaci kláves Ctrl+A (Windows) nebo Apple+A (Macintosh).
Klepněte uvnitř tagu div tag a pak vyberte tag div v selektoru tagů dole v okně dokumentu.
Vyberte Okno > CSS Designer pro otevření panelu CSS Designer, pokud již není otevřený.
Pravidla aplikovaná na značku div se zobrazí v panelu.
Proveďte potřebné úpravy.
Změna barvy zvýraznění značek div
Když přesunete ukazatel přes okraj značky div v zobrazení Návrh, aplikace Dreamweaver zvýrazní okraje značky. Zvýraznění můžete podle potřeby povolit nebo zakázat, nebo změnit barvu zvýraznění v dialogovém okně Předvolby.
Vyberte možnost Úpravy > Předvolby (Windows)
nebo Dreamweaver > Předvolby (Macintosh).
Ze seznamu kategorií na levé straně vyberte volbu Zvýraznění.
Proveďte jednu z následujících úprav a klepněte na tlačítko OK:
Chcete-li změnit barvu zvýraznění tagů div, klepněte na pole barvy pro Myš nad a pak vyberte barvu zvýraznění v dialogovém okně pro výběr barvy (nebo zadejte hexadecimální hodnotu barvy zvýraznění v textovém poli).
Chcete-li zapnout nebo vypnout zvýraznění tagů div, zapněte nebo vypněte volbu Zobrazit pro Myš nad.
Poznámka
Tyto možnosti ovlivňují všechny objekty, jako jsou tabulky, které Dreamweaver zvýrazní, když nad nimi přesunete ukazatel.
Bloky rozvržení CSS
Můžete vizualizovat bloky rozvržení CSS během práce v zobrazení Návrh.Blok rozvržení CSS je prvek stránky HTML, který můžete umístit kdekoli na stránce.Konkrétněji, blok rozvržení CSS je buď značka div bez display:inline, nebo jakýkoli jiný prvek stránky, který zahrnuje deklarace CSS display:block, position:absolute nebo position:relative.Následuje několik příkladů prvků, které jsou v aplikaci Dreamweaver považovány za bloky rozvržení CSS:
tag div,
Obrázek s přiřazenou absolutní nebo relativní pozicí
Značka a s přiřazeným stylem display:block
Odstavec s přiřazenou absolutní nebo relativní pozicí
Poznámka
Pro účely vizuálního vykreslení bloky rozvržení CSS nezahrnují vložené prvky (tj. prvky, jejichž kód spadá do řádku textu), nebo jednoduché blokové prvky, jako jsou odstavce.
Dreamweaver poskytuje řadu vizuálních pomůcek pro zobrazení bloků rozvržení CSS.Můžete například povolit obrysy, pozadí a box model pro bloky rozvržení CSS během návrhu.Můžete také zobrazit popisky, které zobrazují vlastnosti pro vybraný blok rozvržení CSS, když přesunete ukazatel myši nad blok rozvržení.
Následující seznam vizuálních pomůcek bloku rozvržení CSS popisuje, co aplikace Dreamweaver vykresluje jako viditelné pro každou:
Obrysy rozvržení CSS
Zobrazí obrysy všech bloků rozvržení CSS na stránce.
Pozadí rozvržení CSS
Zobrazuje dočasně přiřazené barvy pozadí pro jednotlivé bloky rozvržení CSS a skryje všechny další barvy pozadí nebo obrázky, které se normálně objevují na stránce.
Kdykoli povolíte vizuální pomůcku pro zobrazení pozadí bloků rozvržení CSS, Dreamweaver automaticky přiřadí každému bloku rozvržení CSS odlišnou barvu pozadí.(Dreamweaver vybírá barvy pomocí algoritmického procesu— neexistuje způsob, jak byste si barvy mohli přiřadit sami.)Přiřazené barvy jsou vizuálně rozpoznatelné a jsou navrženy tak, aby vám pomohly rozlišovat mezi bloky rozvržení CSS.
Rámečkový model rozvržení CSS
Zobrazuje model rámečku (tj. odsazení a okraje) vybraného bloku rozvržení CSS.
Zobrazení bloků rozvržení CSS
Vizuální pomůcky pro blok rozvržení CSS můžete podle potřeby zapínat a vypínat. Chcete-li zobrazit všechny bloky rozvržení CSS, vyberte Zobrazení > Možnosti návrhu > Vizuální pomůcky.
Můžete povolit nebo zakázat Pozadí rozvržení CSS, Model rámečku rozvržení CSS a Obrysy rozvržení CSS.
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.
