Otwórz inspektor właściwości (Okno > Właściwości), jeśli nie jest jeszcze otwarty, i wybierz opcję CSS w lewym rogu panelu.
Ostatnia aktualizacja
20 gru 2021
Informacje o używaniu Inspektora właściwości w celu formatowania tekstu za pomocą atrybutów HTML lub stylów CSS w programie Dreamweaver.
Można użyć inspektora właściwości tekstu do zastosowania formatowania HTML lub formatowania arkuszy stylów kaskadowych (CSS). Po zastosowaniu formatowania HTML Dreamweaver dodaje właściwości do kodu HTML w treści strony. Po zastosowaniu formatowania CSS Dreamweaver zapisuje właściwości w nagłówku dokumentu lub w osobnym arkuszu stylów.
Podczas tworzenia wewnętrznych stylów CSS program Dreamweaver dodaje kod atrybutu stylu bezpośrednio do głównej treści dokumentu.
Informacje o formatowaniu tekstu (CSS a HTML)
Formatowanie tekstu w programie Dreamweaver jest podobne do używania standardowego edytora tekstu. Można ustawić domyślne style formatowania (Akapit, Nagłówek 1, Nagłówek 2 itd.) w bloku tekstu, zmienić czcionkę, rozmiar, kolor i wyrównanie zaznaczonego tekstu lub zastosować style tekstu takie jak pogrubienie, kursywa, kod (monospace) i podkreślenie.
Dreamweaver ma dwa inspektory właściwości zintegrowane w jeden: inspektor właściwości CSS i inspektor właściwości HTML. Po użyciu inspektora właściwości CSS program Dreamweaver formatuje tekst za pomocą arkuszy stylów kaskadowych (CSS). CSS daje projektantom i programistom stron internetowych większą kontrolę nad projektem strony internetowej, zapewniając jednocześnie lepsze funkcje dostępności i zmniejszony rozmiar pliku. Inspektor właściwości CSS umożliwia dostęp do istniejących stylów, a także tworzenie nowych.
Używanie CSS to sposób kontrolowania stylu strony internetowej bez naruszania jej struktury. Poprzez oddzielenie elementów projektu wizualnego (czcionek, kolorów, marginesów itd.) od logiki strukturalnej strony internetowej CSS daje projektantom stron internetowych kontrolę wizualną i typograficzną bez poświęcania integralności zawartości. Ponadto definiowanie projektu typograficznego i układu strony z poziomu jednego, odrębnego bloku kodu — bez konieczności uciekania się do map obrazów, tagów czcionek, tabel i rozpórek GIF — umożliwia szybsze pobieranie, usprawnienie konserwacji witryny i centralny punkt kontrolowania atrybutów projektu na wielu stronach internetowych.
Można przechowywać style utworzone za pomocą CSS bezpośrednio w dokumencie lub — dla większej mocy i elastyczności — przechowywać style w zewnętrznym arkuszu stylów. Jeśli dołączysz zewnętrzny arkusz stylów do kilku stron internetowych, wszystkie strony automatycznie odzwierciedlą wszelkie zmiany wprowadzone w arkuszu stylów. Aby uzyskać dostęp do wszystkich reguł CSS dla strony, użyj panelu Style CSS (Okno > Style CSS). Aby uzyskać dostęp do reguł dotyczących bieżącego zaznaczenia, użyj panelu Style CSS (tryb Bieżący) lub menu podręcznego Reguła docelowa w inspektorze właściwości CSS.
Jeśli wolisz, możesz użyć tagów znaczników HTML do formatowania tekstu na stronach internetowych. Aby użyć tagów HTML zamiast CSS, formatuj tekst za pomocą inspektora właściwości HTML.
Na jednej stronie można łączyć formatowanie CSS i HTML 3.2. Formatowanie jest stosowane hierarchicznie: formatowanie HTML 3.2 przesłania formatowanie nadane przez zewnętrzne arkusze stylów CSS, a style CSS osadzone w dokumencie przesłaniają zewnętrzne style CSS.
Edytowanie reguł CSS w inspektorze właściwości
Wykonaj jedną z następujących czynności:
- Umieść punkt wstawiania wewnątrz bloku tekstu sformatowanego przez regułę, którą chcesz edytować. Reguła pojawia się w menu podręcznym Reguła docelowa.
- Zaznacz regułę w wyskakującym menu Reguła docelowa.
- Kliknij Edytuj regułę.
Wprowadź zmiany do reguły, korzystając z różnych opcji
w inspektorze właściwości CSS.
Reguła docelowa
Jest to reguła edytowana w oknie Inspektora właściwości CSS. Gdy masz zastosowany istniejący styl do tekstu, reguła wpływająca na format tekstu pojawia się po kliknięciu wewnątrz tekstu na stronie. Można też użyć menu podręcznego Reguła docelowa, aby utworzyć nowe reguły CSS, nowe style wbudowane lub zastosować istniejące klasy do wybranego tekstu. Jeśli tworzysz nową regułę, musisz wypełnić okno dialogowe Nowa reguła CSS.Więcej informacji podano w łączach na końcu tego tematu.
Edytuj regułę
Otwiera okno dialogowe Definicja reguły CSS dla wybranej reguły.Jeśli wybierzesz Nowa reguła CSS z menu podręcznego Reguła docelowa i klikniesz przycisk Edytuj regułę, Dreamweaver otworzy okno dialogowe definicji nowej reguły CSS.
Projektant CSS
Otwiera panel CSS Designer i wyświetla właściwości wybranej reguły w widoku bieżącym.
Czcionka
Pozwala zmienić czcionkę reguły docelowej.
Rozmiar
Pozwala ustawić rozmiar czcionki reguły docelowej.
Kolor tekstu
Ustawia wybrany kolor jako kolor czcionki dla reguły docelowej. Wybierz bezpieczny dla internetu kolor, klikając pole koloru, lub wprowadź wartość szesnastkową (na przykład #BB5153) w sąsiednim polu tekstowym.
Pogrubiony
Pozwala dodać do reguły docelowej właściwość pogrubienia.
Kursywa
Pozwala dodać do reguły docelowej właściwość kursywy.
Wyrównanie do lewej, do środka, do prawej
Wyrównuje regułę docelową do lewej, na środku lub do prawej.
W polach czcionki, rozmiaru, koloru tekstu, pogrubienia, kursywy i wyrównania są wyświetlane zawsze właściwości odpowiadające tej regule, która stosuje się do bieżącego zaznaczenia w oknie dokumentu. Zmiana jakichkolwiek spośród tych właściwości ma wpływ na kształt reguły docelowej.
Edytowanie koloru tekstu za pomocą Inspektora właściwości
Jeśli do tekstu nie zastosowano żadnej specyficznej reguły, można zmienić jego kolor bezpośrednio w Inspektorze właściwości. Zwróć uwagę na kolor tekstu w poniższym przykładzie, zanim rozpoczniesz edycję. Pole sąsiadujące z próbnikiem kolorów wyświetla kolor biały, wskazujący kolor tekstu w miejscu, gdzie umieszczono kursor.
Aby edytować kolor tekstu, zaznacz tekst, który chcesz zmodyfikować. Kliknij próbnik kolorów i wybierz dowolny kolor. Zobacz poniższy obraz, gdzie inspektor właściwości wyświetla nowy kolor.
Ustaw formatowanie HTML w inspektorze właściwości
Otwórz inspektor właściwości (Okno >
Właściwości), jeśli nie jest jeszcze otwarty, i kliknij przycisk HTML.
Wybierz tekst, który chcesz sformatować.
Ustaw opcje, które chcesz zastosować do zaznaczonego tekstu:
Format
Ustawia styl akapitu zaznaczonego tekstu. Akapit zastosowuje domyślny format dla znacznika <p>, nagłówek 1 dodaje znacznik H1 itd.
ID
Pozwala skojarzyć z zaznaczeniem identyfikator. Menu podręczne ID (jeśli ma zastosowanie) wyświetla wszystkie nieużywane, zadeklarowane identyfikatory dokumentu.
Klasa
Wyświetla styl klasy aktualnie zastosowany do zaznaczonego tekstu. Jeśli do zaznaczenia nie zostały zastosowane żadne style, menu podręczne wyświetla opcję Brak stylu CSS. Jeśli do zaznaczenia zostało zastosowanych wiele stylów, menu jest puste.
Menu Styl służy do wykonywania dowolnej z następujących czynności:
Wybierz styl, który chcesz zastosować do zaznaczenia.
Wybrać Brak, aby usunąć wybrany obecnie styl.
Wybierz polecenie Zmień nazwę, aby zmienić nazwę stylu.
Wybierz opcję Dołącz arkusz stylów, aby otworzyć okno dialogowe umożliwiające dołączenie zewnętrznego arkusza stylów do strony.
Pogrubiony
Stosuje <b> lub <strong> do zaznaczonego tekstu zgodnie z preferencją stylu ustawioną w kategorii Ogólne okna dialogowego Preferencje.
Kursywa
Stosuje <i> lub <em> do zaznaczonego tekstu zgodnie z preferencją stylu ustawioną w kategorii Ogólne okna dialogowego Preferencje.
Lista nieuporządkowana
Tworzy z zaznaczonego tekstu wypunktowaną listę. Jeśli nie zaznaczono tekstu, zostaje utworzona nowa lista punktowana.
Lista uporządkowana
Tworzy z zaznaczonego tekstu numerowaną listę. Jeśli nie zaznaczono tekstu, zostaje utworzona nowa lista numerowana.
Cytat blokowy oraz Usuń cytat blokowy
Wcięcie lub usunięcie wcięcia z zaznaczonego tekstu przez zastosowanie lub usunięcie znacznika blockquote. Na liście wcięcie tworzy listę zagnieżdżoną, a usunięcie wcięcia cofa zagnieżdżenie listy.
Łącze
Tworzy łącze hipertekstowe z zaznaczonego tekstu. Kliknij ikonę folderu, aby przejść do pliku w witrynie; wpisz adres URL; przeciągnij ikonę Wskaż plik do pliku w panelu Pliki lub przeciągnij plik z panelu Pliki do pola.
Title
Określa tekstową podpowiedź do łącza hipertekstowego.
Target
Określa ramkę lub okno, w którym zostanie wczytany połączony dokument:
_blank wczytuje połączony plik w nowym, nienazwanym oknie przeglądarki.
_parent wczytuje połączony plik w nadrzędnym zestawie ramek lub oknie ramki zawierającej łącze. Jeśli ramka zawierająca łącze nie jest zagnieżdżona, połączony plik zostanie wczytany w pełnym oknie przeglądarki.
_self wczytuje połączony plik w tej samej ramce lub oknie co łącze. Ten cel jest domniemany, więc zazwyczaj nie trzeba go określać.
_top wczytuje połączony plik w pełnym oknie przeglądarki, usuwając tym samym wszystkie ramki.
Zmiana nazwy klasy z inspektora właściwości HTML
Program Dreamweaver wyświetla wszystkie klasy dostępne dla strony w menu Klasa inspektora właściwości HTML. Nazwy stylów na tej liście można zmieniać, wybierając opcję Zmień nazwę na końcu listy stylów klas.
W panelu inspektora właściwości wybierz listę rozwijaną Klasa.
Z listy, która się pojawi, wybierz opcję Zmień nazwę na końcu listy.
Wybierz styl, który chcesz przemianować, z menu podręcznego Zmień nazwę stylu.
Wprowadź nową nazwę w polu tekstowym Nowa nazwa i kliknij przycisk
OK.
Więcej podobnych
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
