W oknie dokumentu umieść punkt wstawiania
tam, gdzie ma pojawić się znacznik div.
Ostatnia aktualizacja
25 wrz 2023
Wyśrodkowywanie bloków zawartości, symulowanie kolumn, tworzenie różnych obszarów koloru i osiąganie innych efektów i wiele innych opcji za pomocą znaczników DIV.
Można tworzyć układy stron, ręcznie wstawiając znaczniki div i stosując do nich style pozycjonowania CSS. Znacznik div to znacznik definiujący logiczne podziały w zawartości strony internetowej. Można używać znaczników div do centrowania bloków zawartości, tworzenia efektów kolumn, tworzenia różnych obszarów kolorów i nie tylko.
Jeśli nie masz doświadczenia w używaniu znaczników div i kaskadowych arkuszy stylów (CSS) do tworzenia stron internetowych, możesz utworzyć układ CSS oparty na jednym z gotowych układów dostarczanych z programem Dreamweaver.Jeśli nie czujesz się pewnie podczas pracy z CSS, ale znasz używanie tabel, można również spróbować użyć tabel.
Wstawianie znaczników DIV
Można używać znaczników div do tworzenia bloków układu CSS i pozycjonowania ich w dokumencie. Jest to przydatne, jeśli masz istniejący arkusz stylów CSS ze stylami pozycjonowania dołączonymi do dokumentu. Program Dreamweaver umożliwia szybkie wstawienie znacznika div i zastosowanie do niego istniejących stylów.
Wykonaj jedną z następujących czynności:
Wybierz Wstaw > HTML > Div.
W kategorii HTML panelu Wstawianie kliknij Div.
Ustaw dowolne spośród poniższych opcji:
Wstaw
Umożliwia wybór lokalizacji znacznika div i nazwy znacznika, jeśli nie jest to nowy znacznik.
Klasa
Wyświetla styl klasowy, przypisany obecnie do znacznika. Jeśli dołączono arkusz stylów, klasy zdefiniowane w tym arkuszu stylów pojawiają się na liście. Użyj tego menu podręcznego, aby wybrać styl, który chcesz zastosować do znacznika.
ID
Umożliwia zmianę nazwy służącej do identyfikowania znacznika DIV. Jeżeli dołączysz arkusz stylów, to na liście pojawią się identyfikatory zdefiniowane w tym arkuszu. Identyfikatory bloków, które już znajdują się w dokumencie, nie są wymienione.
Spostrzeżenie
Program Dreamweaver ostrzega, jeśli wprowadzisz taki sam identyfikator jak inny znacznik w dokumencie.
Nowa reguła CSS
Pozwala otworzyć okno dialogowe Nowa reguła CSS.
Kliknij przycisk OK.
Znacznik DIV ma w dokumencie postać pola z tekstem zastępczym. Gdy przenosisz wskaźnik nad krawędź pola, program Dreamweaver podświetla je.
Jeżeli znacznik DIV jest pozycjonowany bezwzględnie, to staje się elementem AP. (Znaczniki DIV, które nie są pozycjonowane bezwzględnie, można edytować).
Edytowanie znaczników DIV
Po wstawieniu znacznika div można nim manipulować lub dodać do niego zawartość.
Spostrzeżenie
Znaczniki div, które są pozycjonowane w sposób absolutny, stają się elementami AP.
Jeżeli przypiszesz krawędzie do znaczników DIV lub zaznaczysz opcję Kontury układu CSS, to bloki DIV będą miały widoczne krawędzie. (Opcja Kontury układu CSS w menu Widok > Pomoce wizualne jest domyślnie zaznaczona). Gdy przesuniesz wskaźnik nad znacznik DIV, program Dreamweaver podświetli ten znacznik. Możesz zmienić kolor podświetlenia albo wyłączyć podświetlanie.
Po zaznaczeniu znacznika DIV można wyświetlić i edytować jego reguły za pomocą panelu Projektant CSS. Zawartość znacznika DIV, umieszczając po prostu punkt wstawiania wewnątrz znacznika i wstawiając zawartość w taki sam sposób, jak w każdym innym miejscu na stronie.
Wykonaj jedną z następujących czynności, aby zaznaczyć znacznik DIV:
- Kliknij obramowanie znacznika div.
Spostrzeżenie
Położenie krawędzi wskazuje podświetlenie.
Kliknij wewnątrz znacznika div i dwa razy naciśnij klawisze Control+A (Windows) lub Command+A (Macintosh).
Kliknij wewnątrz znacznika div, a potem wybierz ten znacznik div z przybornika znaczników na dole okna dokumentu.
Wybierz Okno > CSS Designer, aby otworzyć panel CSS Designer, jeśli nie jest już otwarty.
Reguły zastosowane do znacznika div pojawiają się w panelu.
Wprowadź potrzebne zmiany.
Zmiana koloru podświetlenia znaczników div
Gdy przesuwasz wskaźnik nad krawędź znacznika div w widoku Projekt, program Dreamweaver podświetla obramowania znacznika. Można włączyć lub wyłączyć podświetlanie w razie potrzeby lub zmienić kolor podświetlenia w oknie dialogowym Preferencji.
Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
Na liście po lewej stronie wybierz pozycję Podświetlenie.
Wprowadź zmiany, a następnie kliknij OK:
Aby zmienić kolor podświetlania znaczników DIV, kliknij pole koloru Najazd, a potem wybierz kolor podświetlenia za pomocą próbnika kolorów (albo wpisz wartość koloru podświetlenia w systemie szesnastkowym w pole tekstowe).
Aby włączyć lub wyłączyć podświetlanie znaczników div, zaznacz lub wyłącz pole wyboru Pokaż obok opcji Najazd.
Spostrzeżenie
Te opcje wpływają na wszystkie obiekty, takie jak tabele, które program Dreamweaver podświetla po najechaniu na nie wskaźnikiem.
Bloki układu CSS
Można wizualizować bloki układu CSS podczas pracy w widoku Projekt. Blok układu CSS to element strony HTML, który można umieścić w dowolnym miejscu na stronie. Dokładniej mówiąc, blok układu CSS to tag div bez display:inline lub dowolny inny element strony zawierający deklaracje CSS display:block, position:absolute lub position:relative. Poniżej podano kilka przykładów elementów uważanych za bloki układu CSS w programie Dreamweaver:
Znacznik div
Obraz z przypisaną pozycją bezwzględną lub względną
Tag a z przypisanym stylem display:block
Akapit z przypisaną pozycją bezwzględną lub względną
Spostrzeżenie
Na potrzeby renderowania wizualnego bloki układu CSS nie obejmują elementów wbudowanych (czyli elementów, których kod znajduje się w linii tekstu) ani prostych elementów blokowych, takich jak akapity.
Program Dreamweaver udostępnia szereg pomocy wizualnych do wyświetlania bloków układu CSS. Można na przykład włączyć kontury, tła i model pudełkowy dla bloków układu CSS podczas projektowania. Można również wyświetlać etykietki narzędzi pokazujące właściwości wybranego bloku układu CSS po najechaniu wskaźnikiem myszy na blok układu.
Poniższa lista pomocy wizualnych bloków układu CSS opisuje, co program Dreamweaver renderuje jako widoczne dla każdej z nich:
Kontury układu CSS
Program wyświetla kontury wszystkich bloków układu CSS na stronie.
Tła układu CSS
Wyświetla tymczasowo przypisane kolory tła dla poszczególnych bloków układu CSS i ukrywa wszelkie inne kolory tła lub obrazy, które normalnie pojawiają się na stronie.
Po włączeniu pomocy wizualnej do wyświetlania tła bloków układu CSS program Dreamweaver automatycznie przypisuje każdemu blokowi układu CSS odrębny kolor tła. (Program Dreamweaver wybiera kolory za pomocą procesu algorytmicznego — nie ma sposobu na samodzielne przypisanie kolorów.) Przypisane kolory są wizualnie charakterystyczne i zostały zaprojektowane, aby ułatwić rozróżnianie bloków układu CSS.
Układ CSS — model blokowy
Wyświetla model pudełkowy (czyli dopełnienie i marginesy) wybranego bloku układu CSS.
Wyświetlanie bloków układu CSS
W razie potrzeby można włączać lub wyłączać pomoce wizualne układu CSS. Aby wyświetlić wszystkie bloki układu CSS, wybierz polecenie Widok > Opcje widoku Projekt > Pomoce wizualne.
Można włączyć lub wyłączyć opcje Tła układu CSS, Model pudełkowy układu CSS i Kontury układu CSS.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
