Podręcznik użytkownika Anuluj

Posługiwanie się znacznikami DIV

Szukaj

Ostatnia aktualizacja 21 maj 2021

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.

Układ strony można tworzyć, ręcznie wstawiając znaczniki DIV i stosując do nich pozycjonujące style CSS. Znacznik DIV to znacznik definiujący logiczne podziały zawartości na stronie WWW. Za pomocą znaczników DIV można wyśrodkowywać bloki zawartości, symulować efekty kolumn, tworzyć różne obszary kolorów itd.

Jeżeli nie wiesz, jak wykorzystać znaczniki DIV i style CSS do tworzenia stron WWW, możesz utworzyć układ CSS na podstawie jednego z gotowych układów, dołączonych do programu Dreamweaver. Jeżeli natomiast nie lubisz posługiwać się stylami CSS, ale umiesz korzystać z tabel, to możesz posłużyć się tabelami.

Wstawianie znaczników DIV

Za pomocą znaczników DIV można tworzyć bloki układu CSS i rozmieszczać je w dokumencie. Jest to przydatne, jeżeli do dokumentu jest już dołączony arkusz stylów CSS, który zawiera style pozycjonujące. Program Dreamweaver umożliwia szybkie wstawianie znacznika DIV i stosowanie do niego istniejących stylów.

Umieść punkt wstawiania w tym miejscu w oknie dokumentu, gdzie chcesz wstawić znacznik DIV.
Wykonaj jedną z następujących czynności:
- Wybierz polecenie Wstaw > HTML > Div.
- W kategorii HTML panelu Wstaw kliknij opcję Div.
Ustaw dowolne spośród poniższych opcji:

Wstaw

Pozwala wybrać położenie znacznika DIV oraz nazwę znacznika (jeśli nie jest to nowy znacznik).

Klasa

Wyświetla styl klasowy, przypisany obecnie do znacznika. Jeżeli dołączysz arkusz stylów, to na liście pojawią się klasy zdefiniowane w tym arkuszu. Za pomocą tego wyskakującego menu można wybrać styl 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ż istnieją w dokumencie, nie pojawiają się na liście.

Uwaga:

Program Dreamweaver wyświetli ostrzeżenie, jeżeli wpisze się taki sam identyfikator dla innego znacznika w dokumencie.

Nowa reguła CSS

Otwiera okno dialogowe Nowa reguła CSS.
Kliknij przycisk OK.

Znacznik DIV ma w dokumencie postać pola z tekstem zastępczym. Gdy przesuniesz wskaźnik nad brzeg tego pola, program Dreamweaver je podświetli.

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ć i dodawać do niego zawartość.

Uwaga:

Znaczniki DIV o pozycjonowaniu bezwzględnym 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żna 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 krawędź znacznika DIV.
Uwaga:

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.
Jeżeli panel Projektant CSS nie jest widoczny, wybierz polecenie Okno > Projektant CSS, aby go otworzyć.

W panelu wyświetlone zostaną reguły zastosowane do zaznaczonego znacznika DIV.
Wprowadź potrzebne zmiany.

Zmiana koloru podświetlenia znaczników DIV

Gdy ustawisz wskaźnik nad brzegiem znacznika DIV w widoku Projekt, program Dreamweaver podświetli krawędzie tego znacznika. W oknie dialogowym Preferencje można włączać lub wyłączać podświetlanie oraz zmieniać kolor podświetlenia.

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.
Uwaga:

Te opcje dotyczą wszystkich obiektów, np. tabel, które program Dreamweaver podświetla po najechaniu na nie wskaźnikiem myszy.

Bloki układu CSS

Podczas pracy w widoku Projekt można wyświetlać wizualizację bloków układu CSS. Blok układu CSS to element strony HTML, który można umieścić w dowolnym miejscu na stronie. Mówiąc dokładniej, blok układu to znacznik DIV bez atrybutu display:inline albo jakikolwiek inny element strony z atrybutem display:block, position:absolute albo position:relative w deklaracji CSS. Poniżej podano kilka przykładów elementów, które stanowią bloki układu CSS w programie Dreamweaver:

Znacznik DIV
Obraz z pozycjonowaniem bezwzględnym albo względnym
Znacznik a z przypisanym stylem display:block
Akapit z pozycjonowaniem bezwzględnym albo względnym

Uwaga:

Do celów renderowania wizualnego do bloków CSS nie zalicza się elementów z atrybutem „inline” (czyli takich, które mieszczą się w wierszu tekstu) ani prostych elementów blokowych, takich jak akapity.

Program Dreamweaver udostępnia kilka pomocy wizualnych do wyświetlania bloków układu CSS. Można np. włączyć kontury, tła i model blokowy dla bloków układu CSS na czas projektowania. Można również wyświetlać podpowiedzi, które podają właściwości wybranego bloku układu CSS, gdy umieścisz wskaźnik myszy nad tym blokiem.

Poniższa lista pomocy wizualnych dla bloków układu CSS zawiera opisy poszczególnych elementów wizualizowanych przez program Dreamweaver:

Kontury układu CSS

Program wyświetla kontury wszystkich bloków układu CSS na stronie.

Tła układu CSS

Program wyświetla tymczasowo przypisane kolory tła dla poszczególnych bloków układu CSS i ukrywa inne kolory tła lub obrazy, które byłyby normalnie wyświetlane na stronie.

Po włączeniu pomocy wizualnych do wyświetlania tła bloków układu CSS program Dreamweaver automatycznie przydziela każdemu blokowi układu CSS inny kolor tła. (Dreamweaver wybiera te kolory na podstawie algorytmu — nie można samodzielnie przypisywać kolorów). Przypisane kolory wyraźnie się różnią, co ułatwia rozróżnianie poszczególnych bloków układu CSS.

Układ CSS — model blokowy

Wyświetla model blokowy (czyli odstępy od krawędzi i marginesy) zaznaczonego 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 w układzie CSS, wybierz polecenie Widok > Opcje widoku Projekt > Pomoce wizualne.

Następnie można włączyć lub wyłączyć wyświetlanie następujących opcji: Tła układu CSS, Model pól układu CSS oraz Kontury układu CSS.

Więcej zasobów tego rodzaju

Pomoc dostępna szybciej i łatwiej

Nowy użytkownik?