Dostępne w języku HTML
atrybuty czcionek zapewniajÄ… zaledwie minimalnÄ… kontrolÄ™ nad wyglÄ…dem tekstu — znacznie lep-
sze efekty daje zastosowanie arkuszy stylów CSS, w których twórcy stron WWW mogą bardzo pre-
cyzyjnie definiować wygląd stron z tekstem.
Przestarzałe atrybuty znacznika HTML <font>, w tym odpowiedzialny za rozmiar atrybut size, nie są już w programie Dreamweaver obsługiwane. Zamiast tego udostępniany jest szereg wstępnie
zdefiniowanych ustawień, włącznie z wartościami numerycznymi z przedziału od 9 do 36, warto-
ściami względnymi z przedziału od xx-small do xx-large oraz opcje dla mniejszych i większych roz-
miarów czcionek. Wszystkie opcje definiujące rozmiar tekstu są umieszczane w arkuszach stylów
CSS. Za pomocą Dreamweavera możemy w najmniejszych szczegółach kontrolować wygląd tekstu
na naszych stronach dzięki zintegrowanym funkcjom arkuszy CSS. Więcej informacji na temat
funkcjonalności arkuszy stylów znajdziesz w lekcji 6.
1. Zaznacz pierwszy wcięty akapit na początku dokumentu. Z listy Size (rozmiar)
dostępnej w panelu Property inspector wybierz liczbę 12. Pozostaw niezmienioną wartość
pola Measurement (jednostka), czyli pixels (piksele) (patrz rysunek na następnej stronie).
66
MACROMEDIA DREAMWEAVER MX 2004
Oficjalny podręcznik
Rozmiary czcionek w systemach Macintosh i Windows bardzo się od siebie różnią. Na komputerach Macintosh tekst jest o około 25% mniejszy od tego samego tekstu wyświetlanego w systemach
Windows — rozmiar tekstu wyÅ›wietlanego na komputerach Macintosh jest mniej wiÄ™cej równy
trzem czwartym rozmiaru tego samego tekstu w systemach Windows. Także użytkownicy przeglą-
darek mogą zmieniać rozmiar czcionki, co może wpływać na układ Twoich stron. Musisz więc pamię-
tać o projektowaniu i testowaniu swoich stron pod tym kÄ…tem — tylko w ten sposób bÄ™dziesz mógÅ‚
zapewnić estetyczny i czytelny wygląd swoich witryn dla możliwie najszerszej grupy odwiedzających.
Rozmiar tekstu w zaznaczonym akapicie nieco siÄ™ zmniejszy — tekst akapitu bÄ™dzie teraz
drobniejszy od tekstu pozostałych akapitów, dla którego nie zastosowaliśmy formatowania
z nowym rozmiarem. Za każdym razem, gdy wybierzemy rozmiar stosowany po raz pierwszy
na edytowanej stronie, Dreamweaver stworzy nowy styl, który zostanie umieszczony na liście
Style w panelu Property inspector. Wszystkie kolejne fragmenty tekstu, dla których zostanie
zastosowany ten sam rozmiar czcionki, będą wykorzystywały ten sam styl. Tworzonym
w ten sposób stylom nadawane są automatycznie generowane nazwy: style1, style2 itd.
Nowe style są tworzone dla każdej unikalnej kombinacji kroju, rozmiaru i koloru czcionki.
Możesz także ustawić domyślny rozmiar tekstu dla danego dokumentu w sekcji Appearance okna
dialogowego Page Properties.
Jeśli dla zaznaczonego tekstu nie wybrano żadnego rozmiaru, zarówno na liście rozwijanej Size,
jak i na liście Style widnieje opcja None. Przeglądarki wyświetlają tekst z niezdefiniowanym
rozmiarem w oparciu o swoje domyślne ustawienia rozmiarów, które w większości przypadków
są równoważne wartości 14 na liście Size (chociaż mogą się różnić w zależności od przeglądarki
i ustawień wprowadzonych przez użytkownika).
Możesz usunąć ustawienia dotyczące rozmiaru czcionki i przywrócić rozmiar domyślny. Aby to zrobić,
w pierwszej kolejności musisz zaznaczyć interesujący Cię fragment tekstu. Kliknij następnie pozycję
None na liście rozwijanej Style w panelu Property inspector lub wybierz opcje Text/CSS Styles/None (tekst/style CSS/brak).
Nie możemy wpisywać dowolnych wartoÅ›ci w polu Size — musimy jedynie wybierać spoÅ›ród
dostępnych opcji. Jeśli chcemy zastosować inne rozmiary niż wypisane na liście, musimy
stworzyć dodatkowe style tekstu, co nie jest takie trudne, jeśli wykorzystamy listę Style. Tworzenie
dodatkowych stylów i pracę z arkuszami stylów omówimy bardziej szczegółowo w lekcji 6.
Dostępne na liście rozwijanej Size numeryczne opcje rozmiaru czcionki mogą być Ci znane,
ponieważ są bardzo podobne do standardowych rozmiarów wykorzystywanych w edytorach tekstu.
LEKCJA 2.
67
Dodawanie właściwej treści do strony WWW
W poniższej tabeli porównano wartości dostępne na liście rozwijanej Size ze standardowymi wartościami atrybutu size stosowanego w języku HTML znacznika <font>.
Porównanie rozmiarów czcionek: HTML i CSS
Względne rozmiary
Bezwzględne rozmiary
Wartości numeryczne*
Wartości względne
tekstu HTML
tekstu HTML
na liście Size (CSS)
na liście Size (CSS)
9
–2
1
10
xx-small
–1
2
12
x-small/smaller
None (domyślny)
3
14
small
+1
4
18
medium/larger
+2
5
24
large
+3
6
x-large
36**
+4
7
xx-large
* Dla ustawień domyślnych, czyli wybranej pozycji pixels na liście rozwijanej Measurement.
** Ta wartość numeryczna jest trochę większa od x-large (6) i trochę mniejsza od xx-large (7).
Znacznik HTML <font> definiuje rozmiary tekstu w formie bezwzględnych wartości (od 1 do 7)
lub wartoÅ›ci wzglÄ™dnych (od +1 do +7 oraz od –1 do –7). Wybór bezwzglÄ™dnego rozmiaru (gdzie 1
reprezentuje rozmiar najmniejszy, a 7 największy) jest najprostszym sposobem definiowania wielko-
ści stosowanej czcionki. Domyślnym bazowym rozmiarem tekstu w przeglądarce jest 3. Wybór dodat-
niej lub ujemnej wartości względnej powoduje zmianę rozmiaru tekstu względem rozmiaru bazowego.
Przykładowo, zastosowanie dodatniej wartości +1 spowoduje, że rozmiar czcionki będzie o jeden
punkt większy od rozmiaru bazowego. Jeśli wybierzemy wartość +3 dla rozmiaru czcionki, w rze-
czywistości zmienimy stosowany rozmiar na 6 (3 + 3). Największym rozmiarem czcionki w tym
systemie jest 7, najmniejszym 1. Każdy rozmiar czcionki HTML większy niż 7 i tak powoduje wyświetlanie tekstu o rozmiarze 7; przykładowo, jeśli ustawimy względny rozmiar czcionki na +6,
rozmiar bezwzględny 3 + 6 będzie większy niż 7, ale w przeglądarce nadal wyświetlany będzie
tekst w rozmiarze 7. Wymienione ograniczenia dostępnego w języku HTML znacznika <font> nie