Podręcznik użytkownika Anuluj

Ustawianie właściwości tekstu w Inspektorze właściwości

Szukaj

Ostatnia aktualizacja 21 maj 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.

Za pomocą Inspektora właściwości tekstu można stosować formatowanie HTML albo CSS. Po zastosowaniu formatu HTML program Dreamweaver dodaj odpowiednie właściwości do kodu HTML w treści strony. Po zastosowaniu formatu CSS program Dreamweaver zapisze odpowiednie właściwości w nagłówku dokumentu lub w oddzielnym arkuszu stylów.

Uwaga:

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 (różnice między CSS a HTML)

Formatowanie tekstu w programie Dreamweaver przebiega podobnie, jak w standardowym edytorze tekstu. Możesz ustawiać domyślne style formatowania (akapit, nagłówek 1, nagłówek 2 itd.) dla bloku tekstu, zmieniać czcionkę, rozmiar, kolor i wyrównanie zaznaczonego tekstu albo stosować style tekstowe, takie jak pogrubienie, kursywa, kod (czcionka stałej szerokości) i podkreślenie.

W programie Dreamweaver jest dostępny jeden zintegrowany Inspektor właściwości, na który składają się dwa moduły: Inspektor właściwości CSS oraz Inspektor właściwości HTML. Gdy używa się Inspektora właściwości CSS, program Dreamweaver formatuje tekst za pomocą stylów CSS (Cascading Style Sheets). Arkusze CSS zapewniają projektantom i programistom większą kontrolę nad wyglądem i działaniem stron WWW, a ponadto pozwalają korzystać z udoskonalonych funkcji ułatwień dostępu i kompresji plików. Inspektor właściwości CSS pozwala korzystać z istniejących stylów, jak również tworzyć nowe.

Użycie stylów CSS pozwala sterować wyglądem strony WWW bez naruszania jej struktury. Rozdzielenie graficznych elementów projektu (czcionek, kolorów, marginesów itd.) od układu strukturalnego strony WWW zapewnia projektantom stron kontrolę nad wyglądem i typografią bez wpływu na spójność zawartości. Ponadto możliwość definiowania projektu typograficznego i układu strony za pomocą pojedynczego, wyodrębnionego bloku kodu — bez potrzeby stosowania map obrazu, znaczników font, tabel i obrazów-odstępników — przyspiesza ładowanie się stron, optymalizuje proces zarządzania serwisem WWW i centralizuje kontrolę nad atrybutami wyglądu wielu stron WWW.

Style utworzone za pomocą arkusza CSS można zapisać bezpośrednio w dokumencie albo w zewnętrznym arkuszu stylów (co zapewnia większą swobodę w posługiwaniu się danym stylem). Jeżeli dołączysz zewnętrzny arkusz stylów do kilku stron WWW, to zmiany wprowadzane w arkuszu będą automatycznie odzwierciedlane na wszystkich stronach. Aby wyświetlić wszystkie reguły CSS danej 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 wyskakującego menu Reguła docelowa z Inspektora właściwości CSS.

Jeżeli wolisz, do formatowania tekstu na stronach WWW możesz używać znaczników HTML. Aby zamiast arkuszy CSS używać znaczników HTML, sformatuj tekst za pomocą Inspektora właściwości HTML.

Uwaga:

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.

Edycja reguł CSS za pomocą Inspektora właściwości

Otwórz panel Inspektor właściwości (Okno > Właściwości), jeśli nie jest jeszcze otwarty, i wybierz opcję CSS w lewym rogu tego panelu.
Wykonaj jedną z następujących czynności:
- Umieść punkt wstawiania wewnątrz bloku tekstu sformatowanego za pomocą reguły, którą chcesz edytować. Reguła pojawi się w wyskakującym menu Reguła docelowa.
- Zaznacz regułę w wyskakującym menu Reguła docelowa.
- Kliknij przycisk Edytuj regułę.
Zaznacz regułę w wyskakującym menu Reguła docelowa.
Za pomocą różnych opcji dostępnych w oknie Inspektora właściwości CSS wprowadź zmiany w definicji reguły.

Reguła docelowa

Jest to reguła edytowana w oknie Inspektora właściwości CSS. Jeśli do tekstu zastosowano pewien istniejący styl, to po kliknięciu wewnątrz tekstu strony pojawi się reguła dotycząca formatu tekstu. Wyskakujące menu Reguła docelowa pozwala również tworzyć nowe reguły CSS, tworzyć nowe style wewnętrzne i stosować istniejące klasy do zaznaczonego tekstu. Tworząc nową regułę, należy wprowadzić niezbędne dane w oknie dialogowym Nowa reguła CSS. Aby uzyskać więcej informacji, skorzystaj z łączy wyświetlanych na końcu tematu.

Edytuj regułę

Pozwala otworzyć okno dialogowe Definicja reguły CSS, dotyczące reguły docelowej. Jeśli z wyskakującego menu Reguła docelowa wybierzesz polecenie Nowa reguła CSS, a następnie klikniesz przycisk Edytuj regułę, to program Dreamweaver otworzy okno dialogowe Definicja reguły CSS.

Projektant CSS

Otwiera panel Projektant CSS i wyświetla właściwości reguły docelowej 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. Aby wybrać kolor z palety internetowej, kliknij pole koloru. Można również wpisać wartość szesnastkową (np. #BB5153) w polu tekstowym obok.

Umożliwia modyfikowanie reguły CSS za pomocą opcji Edytuj regułę.

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

Wstawia do docelowej reguły wyrównanie do lewej, do środka lub do prawej.

Uwaga:

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 obok próbnika kolorów jest białe, co wskazuje kolor tekstu, w którym umieszczono kursor.

Edycja koloru tekstu w programie Dreamweaver

Aby edytować kolor tekstu, zaznacz tekst, który chcesz zmodyfikować. Kliknij próbnik kolorów i wybierz dowolny kolor. Na poniższej ilustracji panel Inspektor właściwości wyświetla nowy kolor.

Edycja koloru tekstu w programie Dreamweaver — Modyfikowanie koloru tekstu za pomocą próbnika kolorów

Ustawianie formatowania HTML w Inspektorze właściwości

Otwórz Inspektora właściwości (Okno > Właściwości), jeśli nie jest jeszcze otwarty, po czym kliknij przycisk HTML.
Zaznacz tekst, który chcesz sformatować.
Ustaw opcje, które chcesz zastosować do zaznaczonego tekstu:

Ustawianie właściwości HTML służących do formatowania tekstu

Format

Ustawia styl akapitu zaznaczonego tekstu. Akapit stosuje domyślny format znacznika , Nagłówek 1 wstawia znacznik H1, i tak dalej.

ID

Pozwala skojarzyć z zaznaczeniem identyfikator. W wyskakującym menu ID (o ile jest dostępne) jest wyświetlana lista wszystkich nieużywanych, a zadeklarowanych identyfikatorów dokumentu.
Class
Wyświetla styl klasy, przypisany obecnie do zaznaczonego tekstu. Jeśli żadne style nie zostały zastosowane do zaznaczenia, to wyskakujące menu wyświetla Brak stylu CSS. Jeśli do zaznaczenia zastosowano kilka styli, to menu jest puste.

Za pomocą tego wyskakującego menu można:
- Wybrać styl, który chcesz zastosować do zaznaczenia.
- Wybrać opcję Brak, aby usunąć wybrany obecnie styl.
- Wybrać polecenie Zmień nazwę, aby zmienić nazwę stylu.
- Zaznaczyć opcję Dołącz arkusz stylów, aby otworzyć okno dialogowe, które umożliwi dodanie do strony zewnętrznego arkusza stylów.
Pogrubiony

Stosuje do zaznaczonego tekstu znacznik albo , w zależności od ustawień preferencji stylu w kategorie ogólne w oknie dialogowym Preferencje.

Kursywa

Stosuje do zaznaczonego tekstu znacznik albo , w zależności od ustawień preferencji stylu w kategorie ogólne w oknie dialogowym Preferencje.

Lista nieuporządkowana

Tworzy z zaznaczonego tekstu wypunktowaną listę. Jeżeli nie zaznaczono żadnego tekstu, to rozpoczęta zostanie nowa wypunktowana lista.

Lista uporządkowana

Tworzy z zaznaczonego tekstu numerowaną listę. Jeżeli nie zaznaczono żadnego tekstu, to rozpoczęta zostanie nowa numerowana lista.

Cytat blokowy oraz Usuń cytat blokowy

Wprowadza lub usuwa wycięcie z zaznaczonego tekstu, wstawiając albo usuwając znacznik blockquote. Wcięcie tekstu na liście powoduje utworzenie zagnieżdżonej listy. Usunięcie wcięcia usuwa również zagnieżdżenie listy.

Link

Tworzy łącze hipertekstowe z zaznaczonego tekstu. Kliknij ikonę folderu, aby przeglądać pliki w twoim serwisie; wpisz adres URL; przeciągnij ikonę Wskaż plik na plik w panelu Pliki; albo przeciągnij plik z panelu Pliki do tego pola.

Tytuł

Określa tekstową podpowiedź do łącza hipertekstowego.
Target
Określa docelową ramkę lub okno, w którym wczytany zostanie połączony dokument:
- _blank wczytuje połączony plik w nowym oknie przeglądarki bez tytułu.
- _parent wczytuje połączony plik w nadrzędnym układzie ramek lub w oknie ramki, która zawiera łącze. Jeżeli ramka zawierająca łącze nie jest zagnieżdżona, to połączony plik zostanie wczytany w pełnym oknie przeglądarki.
- _self wczytuje połączony plik w tym samym oknie, w którym znajduje się łącze. Jest to domyślna wartość atrybutu TARGET, zatem na ogół nie trzeba jej wybierać.
- _top wczytuje połączony plik w pełne okno przeglądarki, usuwając wszystkie ramki.

Zmiana nazwy klasy za pomocą Inspektora właściwości HTML

Program Dreamweaver wyświetli wszystkie klasy dostępne w przypadku danej strony w menu Class na panelu Inspektor właściwości HTML. Aby zmienić nazwy stylów na tej liście, należy zaznaczyć opcję Zmień nazwę, która stanowi ostatnią pozycję listy.

Na panelu Inspektor właściwości wybierz rozwijane menu Class.
Z wyświetlonej listy wybierz opcję Zmień nazwę (znajduje się ona na dole listy).
Z wyskakującego menu Zmień nazwę stylu wybierz styl, którego nazwę chcesz zmienić.

Zmiana nazwy klasy HTML
W polu tekstowym Nowa nazwa wpisz nową nazwę i kliknij przycisk OK.