Podręcznik użytkownika Anuluj

Posługiwanie się znacznikami DIV

  1. Podręcznik użytkownika programu Dreamweaver
  2. Wprowadzenie
    1. Podstawy projektowania serwisów WWW o elastycznym układzie
    2. Dreamweaver — co nowego
    3. Programowanie zawartości WWW za pomocą programu Dreamweaver — przegląd
    4. Dreamweaver / Popularne pytania
    5. Skróty klawiszowe
    6. Wymagania systemowe programu Dreamweaver
    7. Podsumowanie funkcji
  3. Program Dreamweaver a platforma Creative Cloud
    1. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    2. Biblioteki Creative Cloud w programie Dreamweaver
    3. Używanie plików programu Photoshop w programie Dreamweaver
    4. Praca z programami Adobe Animate oraz Dreamweaver
    5. Wydzielanie przygotowanych do wyświetlania w Internecie plików SVG z bibliotek
  4. Przestrzenie robocze i widoki w programie Dreamweaver
    1. Przestrzeń robocza programu Dreamweaver
    2. Optymalizacja przestrzeni roboczej programu Dreamweaver do programowania wizualnego
    3. Wyszukiwanie plików według nazwy lub zawartości | Mac OS
  5. Konfigurowanie serwisów
    1. Informacje o serwisach programu Dreamweaver
    2. Konfigurowanie lokalnej wersji serwisu
    3. Nawiązywanie połączenia z serwerem publikacji
    4. Konfigurowanie serwera testowego
    5. Importowanie i eksportowanie ustawień serwisu programu Dreamweaver
    6. Przenoszenie istniejących serwisów z serwera zdalnego do lokalnego katalogu głównego serwisu
    7. Funkcje ułatwień dostępu w programie Dreamweaver
    8. Ustawienia zaawansowane
    9. Ustawianie preferencji serwisu dotyczących transferu plików
    10. Określanie ustawień serwera proxy w programie Dreamweaver
    11. Synchronizowanie ustawień programu Dreamweaver z chmurą Creative Cloud
    12. Korzystanie z systemu Git w programie Dreamweaver
  6. Zarządzanie plikami
    1. Tworzenie i otwieranie plików
    2. Zarządzanie plikami i folderami
    3. Odbieranie plików i wysyłanie ich na serwer
    4. Pobieranie plików do edycji i odkładanie ich na serwer
    5. Synchronizacja plików
    6. Porównywanie plików w poszukiwaniu różnic
    7. Maskowanie plików i folderów w serwisie programu Dreamweaver
    8. Włączanie funkcji Uwagi do projektu w serwisach programu Dreamweaver
    9. Zapobieganie potencjalnemu obejściu funkcji Gatekeeper
  7. Układ i projekt
    1. Korzystanie z wizualnych pomocy do układu
    2. Informacje o tworzeniu układu strony za pomocą stylów CSS
    3. Projektowanie elastycznych serwisów WWW z użyciem struktury Bootstrap
    4. Tworzenie i używanie zapytań o media w programie Dreamweaver
    5. Prezentacja zawartości za pomocą tabel
    6. Kolory
    7. Tworzenie reagujących projektów za pomocą układów elastycznej siatki
    8. Narzędzie Extract w programie Dreamweaver
  8. CSS
    1. Podstawowe informacje o stylach CSS
    2. Tworzenie układu strony za pomocą panelu Projektant CSS
    3. Korzystanie z preprocesorów CSS w programie Dreamweaver
    4. Ustawianie preferencji stylów CSS w programie Dreamweaver
    5. Przenoszenie reguł CSS w programie Dreamweaver
    6. Konwertowanie stylu CSS wewnątrz znacznika na regułę CSS w programie Dreamweaver
    7. Posługiwanie się znacznikami DIV
    8. Stosowanie gradientów na tło
    9. Tworzenie i edytowanie efektów przejść CSS3 w programie Dreamweaver
    10. Formatowanie kodu
  9. Zawartość strony i zasoby
    1. Ustawianie właściwości strony
    2. Ustawianie właściwości CSS dla nagłówków i łączy
    3. Praca z tekstem
    4. Znajdowanie i zastępowanie tekstu, znaczników i atrybutów
    5. Panel DOM
    6. Edytowanie w widoku aktywnym
    7. Kodowanie znaków dokumentu w programie Dreamweaver
    8. Zaznaczanie i wyświetlanie elementów w oknie Dokument
    9. Ustawianie właściwości tekstu na panelu Inspektor właściwości
    10. Sprawdzanie pisowni na stronie internetowej
    11. Używanie linii poziomych w programie Dreamweaver
    12. Dodawanie i modyfikowanie kombinacji czcionek w programie Dreamweaver
    13. Praca z zasobami
    14. Wstawianie i aktualizowanie dat w programie Dreamweaver
    15. Tworzenie list ulubionych zasobów w programie Dreamweaver i zarządzanie nimi
    16. Wstawianie i edytowanie obrazów w programie Dreamweaver
    17. Dodawanie obiektów multimedialnych
    18. Dodawanie zawartości wideo w programie Dreamweaver
    19. Wstawianie wideo HTML5
    20. Wstawianie plików SWF
    21. Dodawanie efektów dźwiękowych
    22. Wstawianie obiektów audio HTML5 w programie Dreamweaver
    23. Praca z elementami bibliotek
    24. Stosowanie pisma arabskiego i hebrajskiego w programie Dreamweaver
  10. Łączenie i przeglądanie
    1. Informacje o łączeniu i przeglądaniu stron
    2. Tworzenie łączy
    3. Mapy obrazu
    4. Rozwiązywanie problemów dotyczących łączy
  11. Efekty i widgety jQuery
    1. Używanie widgetów jQuery interfejsu użytkownika i elementów mobilnych w programie Dreamweaver
    2. Używanie efektów jQuery w programie Dreamweaver
  12. Tworzenie kodu serwisów WWW
    1. Informacje o tworzeniu kodu w programie Dreamweaver
    2. Środowisko programistyczne w programie Dreamweaver
    3. Ustawianie preferencji kodowania
    4. Dostosowywanie ustawień kolorowania kodu
    5. Pisanie i edytowanie kodu
    6. Podpowiedzi i uzupełnianie kodu
    7. Zwijanie i rozwijanie kodu
    8. Ponowne wykorzystywanie fragmentów kodu za pomocą funkcji Urywki
    9. Linting: oczyszczanie kodu z błędów
    10. Optymalizacja kodu
    11. Edytowanie kodu w widoku Projekt
    12. Praca z zawartością znacznika HEAD strony
    13. Wstawianie dołączeń po stronie serwera w programie Dreamweaver
    14. Korzystanie z bibliotek znaczników w programie Dreamweaver
    15. Importowanie własnych znaczników do programu Dreamweaver
    16. Używanie zachowań JavaScript (instrukcje ogólne)
    17. Stosowanie wbudowanych zachowań JavaScript
    18. Omówienie języków XML i XSLT
    19. Wykonywanie transformacji XSL po stronie serwera w programie Dreamweaver
    20. Wykonywanie przekształceń XSL po stronie klienta w programie Dreamweaver
    21. Dodawanie encji znaków w kodzie XSLT w programie Dreamweaver
    22. Formatowanie kodu
  13. Obiegi pracy związane z wieloma produktami
    1. Instalowanie i używanie rozszerzeń programu Dreamweaver
    2. Aktualizacje w aplikacji w programie Dreamweaver
    3. Wstawianie dokumentów Microsoft Office w programie Dreamweaver (tylko Windows)
    4. Praca z programami Fireworks i Dreamweaver
    5. Edycja zawartości w stronach programu Dreamweaver za pomocą aplikacji Contribute
    6. Integracja programu Dreamweaver z aplikacją Business Catalyst
    7. Tworzenie spersonalizowanych kampanii rozsyłanych pocztą elektroniczną
  14. Szablony
    1. Informacje o szablonach programu Dreamweaver
    2. Rozpoznawanie szablonów oraz dokumentów opartych na szablonach
    3. Tworzenie szablonu programu Dreamweaver
    4. Tworzenie edytowalnych regionów w szablonach
    5. Tworzenie powtarzalnych regionów i tabel w programie Dreamweaver
    6. Używanie regionów opcjonalnych w szablonach
    7. Definiowanie edytowalnych atrybutów znacznika w programie Dreamweaver
    8. Tworzenie zagnieżdżonych szablonów w programie Dreamweaver
    9. Edytowanie, aktualizowanie i usuwanie szablonów
    10. Eksportowanie i importowanie zawartości XML w programie Dreamweaver
    11. Stosowanie szablonu lub usuwanie go z istniejącego dokumentu
    12. Edycja zawartości w szablonach programu Dreamweaver
    13. Reguły składni dla znaczników szablonu w programie Dreamweaver
    14. Ustawianie preferencji podświetlenia dla regionów szablonów
    15. Korzyści wynikające z używania szablonów w programie Dreamweaver
  15. Urządzenia mobilne i obsługa wielu ekranów
    1. Tworzenie zapytań o media
    2. Zmiana orientacji strony na urządzeniach mobilnych
    3. Tworzenie aplikacji internetowych przeznaczonych na urządzenia mobilne za pomocą programu Dreamweaver
  16. Dynamiczne serwisy, strony i formularze WWW
    1. Podstawowe informacje o aplikacjach internetowych
    2. Konfigurowanie komputera do programowania aplikacji
    3. Rozwiązywanie problemów z połączeniami z bazą danych
    4. Usuwanie skryptów połączenia w programie Dreamweaver
    5. Projektowanie stron dynamicznych
    6. Omówienie źródeł zawartości dynamicznej
    7. Definiowanie źródeł zawartości dynamicznej
    8. Dodawanie dynamicznej zawartości do stron
    9. Modyfikowanie dynamicznej zawartości w programie Dreamweaver
    10. Wyświetlanie rekordów z bazy danych
    11. Udostępnianie aktywnych danych w programie Dreamweaver oraz rozwiązywanie problemów z takimi danymi
    12. Dodawanie własnych zachowań serwerowych w programie Dreamweaver
    13. Tworzenie formularzy w programie Dreamweaver
    14. Zbieranie informacji od użytkowników za pomocą formularzy
    15. Tworzenie oraz włączanie formularzy ColdFusion w programie Dreamweaver
    16. Tworzenie formularzy WWW
    17. Rozszerzona obsługa elementów formularza w języku HTML5
    18. Tworzenie formularzy za pomocą programu Dreamweaver
  17. Tworzenie aplikacji metodą graficzną
    1. Tworzenie stron wzorca i szczegółów w programie Dreamweaver
    2. Tworzenie stron wyszukiwania i wyników
    3. Tworzenie strony wstawiania rekordów
    4. Tworzenie strony uaktualniania rekordów w programie Dreamweaver
    5. Tworzenie stron usuwania rekordów w programie Dreamweaver
    6. Używanie poleceń ASP do modyfikacji bazy danych w programie Dreamweaver
    7. Tworzenie strony rejestracji
    8. Tworzenie strony logowania
    9. Tworzenie strony, do której dostęp będą mieli tylko uwierzytelnieni użytkownicy
    10. Zabezpieczanie folderów w aplikacji ColdFusion za pomocą programu Dreamweaver
    11. Korzystanie ze składników ColdFusion w programie Dreamweaver
  18. Testowanie, podgląd i publikacja serwisów WWW
    1. Podgląd stron
    2. Podgląd stron WWW programu Dreamweaver na wielu urządzeniach
    3. Testowanie serwisu programu Dreamweaver

 

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.

  1. Umieść punkt wstawiania w tym miejscu w oknie dokumentu, gdzie chcesz wstawić znacznik DIV.
  2. Wykonaj jedną z następujących czynności:
    • Wybierz polecenie Wstaw > HTML > Div.

    • W kategorii HTML panelu Wstaw kliknij opcję Div.

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

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

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

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

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

  1. Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (Macintosh).
  2. Na liście po lewej stronie wybierz pozycję Podświetlenie.
  3. 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.

Logo Adobe

Zaloguj się na swoje konto