Część II. Podstawy kodu HTML

Rozdział 4. Praca z tekstem

Niezależnie od tego, jaką stronę WWW tworzysz, nadejdzie czas, gdy staniesz przed koniecznością zajęcia się tekstem. Będzie to albo Twój tekst, który trzeba będzie wpisać, albo tekst zaimportowany z innych programów, na przykład z edytora Microsoft Word, lub tekst skopiowany na stronach internetowych, który będziesz chciał wkleić w swoim dokumencie. Prawdopodobnie Twoje potrzeby w tej materii obejmą wszystkie trzy przytoczone przykłady.

Chociaż praca z tekstem nie jest uważana za rzecz wyjątkowo trudną w porównaniu z innymi etapami tworzenia stron WWW, to jednak nie oznacza to, że jest ona zawsze prosta. Kwestie związanie z definiowaniem czcionki, odstępów i łamań wierszy mogą wpędzić w głęboką frustrację skłaniającą do zastosowania czcionki Times New Roman o rozmiarze 12 punktów do wszystkiego, byle mieć to z głowy. Jeśli wiesz parę rzeczy o tekście i sposobach zapisywania go w postaci kodu, będziesz w stanie wykorzystać style, kolory i czcionki, ożywiając w ten sposób swoje strony WWW.

W tym rozdziale omówimy następujące tematy:

• Kopiowanie i wklejanie tekstu

• Importowanie tekstu

• Kroje czcionek, style i rozmiary

• Stosowanie do tekstu wcięć i wyrównania

• Kolor tekstu

• Style HTML

• Znaki specjalne

W Internecie zobaczysz wiele różnych zastosowań tekstu. Na niektórych stronach nagłówki są tworzone za pomocą obrazów, a reszta strony zawiera tekst HTML. Na stronie takiej jak na przykład Washingtonpost.com każdego dnia umieszczana jest cała masa nowego tekstu. W takim przypadku połączenie obrazowych nagłówków i tekstu zakodowanego w HTML-u sprawdza się. Na stronie głównej pojawia przede wszystkim tekst HTML i parę obrazów (patrz rysunek 4.1). Ponieważ na niewielkim obszarze trzeba zmieścić masę połączeń, podpisów i reklamówek, twórcy starają się zachować prostotę, aczkolwiek nie unikają kolorów.

Inny przykład to strona Mindseye.com. Tu wykorzystana została technika tekstów animowanych, a efekty są wspaniałe (patrz rysunek 4.2).

Podobny rezultat możesz uzyskać stosując kaskadowe arkusze stylów (CSS) (rozdział 12., „Korzystanie z kaskadowych arkuszy stylów” omawia szczegółowo arkusze CSS). W tym rozdziale wyjaśnione zostaną najważniejsze kwestie stosowania kaskadowych arkuszy stylów do formatowania tekstu. Na razie jednak zaczniemy od czegoś prostszego - od kopiowania i wklejania tekstu przy pomocy programu Dreamweaver 4.

Rys. 4.1. Strona główna Washingtonpost.com

Rys. 4.2. Mindseye.com robi wrażenie na klientach niesamowitym prezentowaniem tekstu

Importowanie tekstu

Omówimy tu trzy różne sytuacje:

• Kopiowanie tekstu (a nie kodu HTML) w oknie przeglądarki sieciowej i wklejanie go do dokumentu programu Dreamweaver.

• Kopiowanie tekstu w dokumencie programu Dreamweaver i wklejanie go w innym programie.

• Importowanie tekstu z edytora Microsoft Word do dokumentu programu Dreamweaver, w celu opublikowania go w Internecie.

Początek ramki

Podpowiedź

Dreamweaver umożliwia skontrolowanie poprawności ortograficznej tekstu. Aby skorzystać z tej możliwości, wybierz pozycję Check Spelling z menu Text lub zastosuj skrót Shift+F7 (niestety, program nie ma słowników polskich - przypis tłum.).

Koniec ramki

Wklejanie tekstu do dokumentu programu Dreamweaver

Jeśli skopiowałeś tekst w oknie przeglądarki, do wyboru masz dwie sposoby wklejenia zawartości Schowka do dokumentu w programu Dreamweaver. Obie dostępne są w menu Edit. .Są to pozycje Paste i Paste HTML. Jaka jest między nimi różnica?

Polecenie Paste powoduje wklejenie zawartości Schowka do dokumentu z zachowaniem łamań wierszy oraz, w pewnych przypadkach, formatowania (na przykład liter pogrubionych). Jeśli chcesz zrezygnować z istniejących łamań wierszy (oznaczonych w kodzie HTML jako <BR>), musisz sam je usunąć. Aby tę operację przyspieszyć, zaznacz tekst i skorzystaj z narzędzia znajdowania i zastępowania - Find and Replace (omówione ono zostało w rozdziale 14., „Publikowanie witryny, obsługa plików i raportowanie”), aby wyeliminować niechciane znaczniki. Możesz także wyczyścić kod HTML wybierając pozycję Cleanup HTML i umieszczając w polu Specific Tag(s) znacznik <BR>.

A do czego służy druga opcja? Paste HTML to podrobiona wersja opcji obecnej we wcześniejszych wersjach programu Dreamweaver. Wklejając tekst przy jej użyciu zauważysz, że usunięte zostaną wszelkie łamania wierszy, a więc wklejone zostanie tasiemcowo długie zdanie (patrz rysunek 4.3).

Zaletą opcji Paste HTML jest to, że umożliwia pozbycie się „obcych” pomysłów na formatowanie i powtórzenie formatowania od nowa, już przy użyciu programu Dreamweaver jako narzędzia obsługi HTML.

Rys. 4.3. Paste HTML usuwa z tekstu skopiowanego w oknie przeglądarki łamania wierszy

Wklejanie kodu HTML

Inne rezultaty uzyskasz, jeśli zastosujesz Paste i Paste HTML do wklejania kodu HTML do dokumentu programu Dreamweaver.

Zastosowanie polecenia Paste spowoduje, że kod zostanie wklejony jako zwykły tekst. Innymi słowy znaczniki <BR> pojawią się jako znaki <BR>, a nie jako łamania wierszy.

Polecenie Paste HTML spowoduje wstawienie fizycznej manifestacji kodu HTML. Dlatego <BR> pozostanie łamaniem wiersza i nie pojawi się jako ciąg znaków <BR>.

Początek ramki

Podpowiedź

Aby zachować łamania wierszy, zawartość Schowka można wklejać między znacznikami <PRE> </PRE>.

Koniec ramki

Eksportowanie tekstu z programu Dreamweaver

Czasami konieczne będzie skopiowanie tekstu z dokumentu programu Dreamweaver do innego programu. W starszych wersjach programu skopiowany tekst wklejany był w innych programach wraz z osadzonymi znacznikami HTML. Dreamweaver 4 umożliwia już wklejanie tekstu do innych programów jako zwykłego tekstu, bez znaczników HTML. Jeśli chcesz wyeksportować tekst wraz ze znacznikami HTML, przełącz się z widoku projektu do widoku kodu (skorzystaj ze skrótu Ctrl+Tab) i zaznacz fragment kodu, który chcesz skopiować. W ten sposób znaczniki HTML zostaną wklejone do innego programu wraz z tekstem.

Importowanie tekstu z edytora Microsoft Word

Jest to sytuacja, która zdarza się czasami każdemu projektantowi stron WWW: ktoś przesyła Ci dokument edytora Word z prośbą o przekształcenie tego wspaniałego dzieła w stronę WWW. Przeglądając plik stwierdzasz, że nie ma w nim nic specjalnego: tabele, wykresy, listy wypunktowane i cała masa formatowania edytora Word, co mogłoby oznaczać dla Ciebie godziny pracy nad kodem HTML. Oto odpowiedni moment, aby podziękować serdecznie zespołowi firmy Macromedia pracującemu nad programem Dreamweaver za wprowadzenie polecenia Clean Up Word HTML. Przyjrzyjmy się mu i sprawdźmy, jak możemy z niego korzystać. Weźmy jako przykład przepis kulinarny na sukiyaki z krewetkami i grzybami (przepis znajdziesz na dysku CD dołączonym do książki, w pliku RECIPE1.DOC). Otwórz w edytorze Word ten plik.

Aby przeprowadzić całą operację szybko i sprawnie, skopiuj wyświetlany przepis do Schowka. Teraz kolej na utworzenie nowego dokumentu w programie Dreamweaver. Wybierz pozycję Paste z menu Edit. Tekst przepisu zostanie wklejony, ale całe formatowanie, a więc kolory tekstu i style, zostanie utracone. W niektórych przypadkach o to Ci będzie chodziło. Ponieważ konwersja dokumentu drukowanego w dokument sieciowy wymaga sprytu, czasami wygodniej jest pozbyć się istniejącego formatowania i wprowadzić nowe, pasujące do elektronicznego środowiska, szczególnie wówczas, gdy dokument jest niewielki, a formatowanie niezbyt rozbudowane.

Myślisz być może, że ponowne formatowanie tekstu, już w programie Dreamweaver, jest czasochłonne, lecz jest bardziej niż prawdopodobne, że w końcowym rozliczeniu zaoszczędzisz swój czas.

Zapisywanie pliku HTML z edytora Word

Jeśli dokument edytora MS Word jest długi i zawiera elementy o rozbudowanym formatowaniu, takie jak tabele czy wykresy, można zapisać go w formacie HTML, wybierając pozycję Save As Web Page, a następnie otworzyć w programie Dreamweaver jako plik HTML.

Początek ramki

Podpowiedź

Aby otworzyć plik HTML w programie Dreamweaver, można skorzystać z polecenia Open w menu File lub utworzyć nowy dokument i wybrać w menu File pozycję Import, a następnie Import Word HTML.

Koniec ramki

Zaimportowana do programu Dreamweaver wersja HTML dokumentu edytora Word nie wygląda już tak wspaniale (patrz rysunek 4.4). Przeanalizuj kod przedstawiony w górnej części rysunku.

Rys. 4.4. Dokument edytora Word w formacie HTML wyświetlany w oknie kodu

Z poleceniem Save As Web Page jest taki problem, że generowany przez edytor Word kod HTML jest w rzeczywistości mieszaniną kodów HTML i XML. Zawiera on także elementy arkuszy stylów CSS i niezliczone znaczniki <META>, co znacznie pogarsza sytuację. Jak można zobaczyć na rysunku 4.4, kod taki daleko odbiega od zwykłego kodu HTML, który powstałby przez ręczne napisanie.

Pliki HTML wygenerowane w edytorze Word możesz pozostawić bez zmian, co oznacza brak jakiejkolwiek ingerencji w kod zarówno w programie Dreamweaver, jak i w innych programach. Takie pliki zazwyczaj są całkiem poprawnie obsługiwane przez większość przeglądarek sieciowych (a szczególnie przez przeglądarkę Internet Explorer).

Jeśli jednak musisz już je modyfikować w programie Dreamweaver, powinieneś zacząć od wyczyszczenia kodu za pomocą polecenia Clean Up Word HTML, aby usunąć dodatkowe znaczniki. Co więcej, polecenie to pozwoli usunąć arkusze CSS zdefiniowane w dokumencie, które mogą wydłużyć czas ładowania strony.

Aby zastosować polecenie Clean Up Word HTML, otwórz w programie Dreamweaver plik HTML edytora Word i wybierz tę pozycję z menu Commands.

Rysunek 4.5 pokazuje okno dialogowe, które się wówczas pojawi. Zaznaczone pola wyboru wskazują domyślnie przeprowadzane przez Dreamweaver operacje.

Rys. 4.5. Okno dialogowe Clean Up Word HTML

Kliknij w oknie dialogowym Clean Up Word HTML zakładkę Detailed, aby wyświetlić dodatkowe ustawienia. Kliknij OK, aby zaakceptować wartości domyślne i wykonać operację konwersji kodu HTML. Tabela 4.1 prezentuje opisy działania poszczególnych opcji zakładki Basic.

Tabela 4.1. Ustawienia zakładki Basic

Opcja	Opis
Remove all Word specific markup	Usuwa wszystkie znaczniki XML i HTML oraz inne atrybutu formatowania typowe dla edytora Word.
Clean up CSS	Usuwa znaczniki, które odnoszą się do kaskadowych arkuszy stylów, w tym style wpisane CSS (tam, gdzie styl nadrzędny ma identyczne właściwości). Usuwa także atrybuty stylu o nazwach rozpoczynających się od „mso” oraz deklaracje innych niż CSS stylów. Jest to cenna opcja, bowiem HTML generowany przez Microsoft Word wspiera się mocno na arkuszach CSS, a ponieważ większość z nich stanowią arkusze wpisane, wydłuża to czas ładowania strony.
Clean up <font> Tags	Usuwa znaczniki <FONT>, a tekst konwertuje do formatu domyślnego dla sekcji BODY i nadaje mu rozmiar 2.
Fix invalidly nested tags	Usuwa niepoprawne znaczniki <FONT> - są to znaczniki znalezione w miejscach, w których zgodnie ze specyfikacją W3C (Wide Web Consortium) nie powinno ich być. Chodzi tu o znaczniki <FONT> umieszczone poza znacznikami akapitu i nagłówka (wszystkich poziomów).
Set background color	Aby zdefiniować kolor tła dokumentu za pomocą liczby szesnastkowej, wpisz tę liczbę w polu tekstowym. Jeśli kolor tła nie zostanie określony, tło będzie szare. Domyślnie kolor tła jest biały, czemu odpowiada liczba #FFFFFF.
Apply source formatting	Stosuje ustawienia formatowania zdefiniowane w pliku SOURCEFORMAT.TXT. Plik ten znajduje się w folderze Configuration (patrz rozdział 2., „Dostosowywanie programu Dreamweaver do własnych potrzeb”).
Show log on completion	Zaznacz to pole wyboru, aby wygenerowany został raport podsumowujący wprowadzone zmiany.

Ustawienia zakładki Detailed umożliwiają bardziej precyzyjne określenie warunków konwersji.

Po wprowadzeniu ustawień, kliknij OK. Dreamweaver przeprowadzi obróbkę pliku, po której wyczyszczona wersja dokumentu zostanie wyświetlona na ekranie.

Początek ramki

Podpowiedź

Jeśli pomimo procedury czyszczenia znajdujesz w kodzie HTML znaczniki niepożądane, przeglądnij w oknie dialogowym Preferences ustawienia, które odnoszą się do formatu kodu HTML i sprawdź, czy są odpowiednio skonfigurowane. Alternatywnie, możesz skorzystać z narzędzia znajdowania i zastępowania (narzędzie Find and Replace omawiane jest w rozdziale 14.), dzięki któremu możesz pozbyć się dowolnych znaczników, lub uruchomić za pomocą polecenia Clean Up HTML podstawową procedurę czyszczenia kodu HTML.

Koniec ramki

Początek ramki

Podpowiedź

Możesz ściągnąć z Macromedia.com rozszerzenie pozwalające zamieniać wielkie litery na małe i odwrotnie. Jest to prostsze i szybsze niż przeprowadzanie operacji ręcznie. Idź pod adres www.macromedia.com/exchange i poszukaj rozszerzeń dla „case”.

Koniec ramki

Formatowanie tekstu w oknie właściwości Property Inspector

Tekst zaimportowany do programu Dreamweaver i wyczyszczony z niepotrzebnych znaczników HTML można nieco „przyprawić” stosując do niego kroje czcionki, style, wyrównania oraz kolory. Jedną z prostszych metod formatowania jest zaznaczenie tekstu i zdefiniowanie ustawień kroju czcionki, koloru i stylu w oknie dialogowym właściwości dla tekstu (Ctrl+F3).

Zanim jednak zaczniesz formatować swój tekst, powinieneś dowiedzieć się, że w przypadku formatowania tekstu z poziomu okna Property Inspector, w kodzie HTML umieszczane są znaczniki <FONT>, za pośrednictwem których formatowanie jest stosowane. Jest to pewna wada.

Coraz więcej projektantów stron WWW odchodzi od tego znacznika sięgając w zamian po CSS. Powodem tej ewolucji są większe możliwości arkuszy CSS w kwestii formatowania czcionki i lepsze wizualnie efekty, niż w przypadku korzystania ze znacznika <FONT>. Co więcej, za kaskadowymi arkuszami stylu przemawia także szybkość wprowadzania ewentualnych zmian do stylu tekstu.

Jeśli po prostu chcesz załatwić sprawę i to szybko, narzędzia formatowania tekstu dostępne w oknie dialogowym Property Inspector są do Twojej dyspozycji. W tym rozdziale skupimy się na formatowaniu tekstu właśnie z ich pomocą. Rozdział 12. omawia z kolei formatowanie przy użyciu kaskadowych arkuszy stylów, a w rozdziałach 6. i 8. znajdziesz omówienie efektów tekstowych.

Stosując znacznik <FONT> musisz liczyć się z pewnymi ograniczeniami, jakie HTML i przeglądarka narzucają na opcje formatowania i liczbę kolorów. Przy odrobinie pomysłowości jednak, możesz swoim sieciowym odbiorcom przygotować tekst o atrakcyjnym wyglądzie.

Początek ramki

Podpowiedź

Pamiętaj o różnicy między twardym i miękkim łamaniem wiersza. Ułatwi to pracę z tekstem. Twarde łamanie oznaczane jest w kodzie HTML przez znacznik <P>, a wprowadzane jest naciśnięciem klawisza Enter. Znacznik <P> równoważny jest podwójnemu odstępowi między wierszami. Miękkie łamanie wiersza, oznaczane w kodzie HTML przez <BR>, wprowadzane jest za pomocą kombinacji Shift+Enter. Znacznik <BR> równoważny jest pojedynczemu odstępowi między wierszami.

Koniec ramki

Dodawanie i usuwanie czcionek

Wśród domyślnych czcionek dostępnych na liście rozwijanej Default Font w oknie dialogowym Property Inspector znajdziesz wszechobecne czcionki, takie jak Arial, Times New Roman, Georgia i Courier. Jeśli chcesz dodać do tej listy inną czcionkę, wybierz z listy pozycję Edit Font List. Otworzy się okno dialogowe Edit Font List, takie jak na rysunku 4.6.

Rys. 4.6. Okno dialogowe Edit Font List

Na liście przewijanej Available Fonts znajdziesz wszystkie czcionki zainstalowane na Twoim komputerze. Jeśli chcesz dodać czcionkę, pamiętaj, że musi ona być zainstalowana także w systemie użytkownika, aby była widoczna na publikowanych przez Ciebie stronach. Jeśli użytkownik nie ma wybranej przez Ciebie czcionki, zostanie zastosowana czcionka domyślna przeglądarki.

Aby dodać czcionkę, wybierz ją na liście Available Fonts i kliknij przycisk z dwoma strzałkami w lewo. Aby zakończyć procedurę dodawania, musisz jeszcze kliknąć przycisk ze znakiem plus (+), ulokowany nad listą Font List. Po naciśnięciu OK, wybrana czcionka pojawia się na liście Default Fonts i będzie na niej, dopóki nie zostanie usunięta.

Aby usunąć czcionkę z listy domyślnych czcionek, zaznacz jej nazwę na liście Font List - wówczas pojawi się ona w polu Chosen Fonts. Następnie kliknij przycisk ze znakiem minus (-), ulokowany nad listą Font List, aby usunąć czcionkę z listy czcionek domyślnych.

Jeśli wybierzesz pozycję Default Font, do wyświetlenia Twojej strony będzie stosowana czcionka domyślna przeglądarki użytkownika, a nie Twojej przeglądarki czy też programu Dreamweaver. Jeśli więc zastosujesz do tekstu takie ustawienie, to w przeglądarce, dla której czcionką domyślną jest Brush Script (niektórzy robią takie rzeczy) efekt będzie zupełnie inny, niż wówczas, gdy stosowana jest bardziej czytelna czcionka domyślna, taka jak na przykład Times New Roman lub Garamond.

Początek ramki

Dodatkowe czcionki

Jeśli uważasz, że wybór czcionek w oknie Property Inspector jest zbyt skromny, nie jesteś odosobniony w tym mniemaniu. Chociaż wolelibyśmy, aby był szerszy, ciągle ograniczeniem są możliwości przeglądarki.

Aby rozwiązać ten problem, Microsoft udostępnia Font Pack - zestaw czcionek przeznaczonych głównie do wyświetlania tekstu na ekranie. Możesz go ściągnąć spod adresu www.microsoft.com/typography/fontpack/default.htm.

Po zainstalowaniu zestawu czcionek Font Pack, poszczególne czcionki pojawią się, gdy odwiedzisz miejsca, gdzie ich użyto.

Dostępne są także nowe formaty, takie jak WEFT (Web Ebbedding Font Tool), częściowo opracowane przez Microsoft. Dzięki WEFT Twoje czcionki są osadzane na stronie prezentowanej w przeglądarce użytkownika, co pozwala swobodnie korzystać z dowolnego kroju pisma.

Koniec ramki

Kroje czcionek

O ile nie dodałeś nowych czcionek (o czym pisaliśmy w poprzednim punkcie), okno dialogowe Property Inspector programu Dreamweaver udostępnia następujące kroje pisma:

• Arial, Helvetica, sans serif

• Times New Roman, Times, serif

• Courier New, Courier, mono

• Georgia, Times New Roman, Times, serif

• Verdana, Arial, Helvetica, sans serif

Aby wybrać krój pisma, możesz skorzystać z listy rozwijanej okna dialogowego Property Inspector i wskazać jedną z tych kombinacji.

Przeglądarki wyświetlają tekst stosując pierwszą w kombinacji czcionkę, która jest zainstalowana w systemie użytkownika. Jeśli wybrałeś na przykład kombinację Times New Roman, Times, serif, przeglądarka wyświetli tekst korzystając z pierwszej z czcionek, zainstalowanych na danym komputerze. Jeśli żadna z czcionek kombinacji nie jest zainstalowana, zastosowana zostanie czcionka domyślna przeglądarki.

Jeśli na Twoim komputerze nie zainstalowano żadnej z czcionek występujących w domyślnych zestawach programu Dreamweaver, tekst zostanie wyświetlany wielką i brzydką czcionką. Aby tego uniknąć, dodaj czcionki do listy czcionek domyślnych (wybierz z listy Default Font okna dialogowego Property Inspector pozycję Edit Font List).

Jako pierwszą z czcionek zestawu możesz zdefiniować cokolwiek (najlepiej czcionkę czytelną). W przypadku drugiej i trzeciej pozycji warto pomyśleć o czcionkach najczęściej stosowanych w systemie Windows (na przykład Arial) oraz częstych w systemie Macintosh (na przykład Georgia).

Początek ramki

Podpowiedź

W przypadku stron WWW dobry wybór to Verdana (sans serif) i Georgia (serif). Czcionki te zostały zaprojektowanie głównie z myślą o wyświetlaniu tekstu na ekranie. Ich autorem jest Matthew Carter, który został wynajęty przez Microsoft do stworzenia dwóch czytelnych rodzin przeznaczonych do prezentacji tekstu na ekranie

Koniec ramki

Rozmiar czcionki, style i wyrównanie tekstu

Dreamweaver daje szerokie możliwości zmiany rozmiarów czcionki, jaka jest jednak różnica między rozmiarem +1 a starym, zwykłym rozmiarem 1? No i co ze znacznikami nagłówków, takimi jak <H1> i <H2>? Przyszedł czas, aby przyjrzeć się atrybutom HTML, które wpływają na sposób odbioru strony przez użytkownika.

Nagłówki

Stosowanie nagłówków to prosty sposób nadawania dokumentowi struktury. Za pomocą nagłówków poziomu 1 (<H1>) możesz wskazać najważniejsze punkty, nagłówki poziomu 2 (<H1>) zastosować do podpunktów, itd. W języku HTML tekst nagłówka umieszczany jest w elemencie Hx (<Hx>Tekst</Hx>), gdzie x jest poziomem nagłówka.

Rysunek 4.7 pokazuje wszystkie domyślne nagłówki programu Dreamweaver, do których masz dostęp z poziomu okna dialogowego Property Inspector.

Rys. 4.7. W oknie dokumentu programu Dreamweaver prezentowanych jest sześć poziomów nagłówka oraz tekst sformatowany za pomocą opcji Preformatted

Ostatnia z opcji listy rozwijanej Format, Preformatted, to specjalny sposób formatowania (czcionka nieproporcjonalna) stosowany do prezentacji ręcznie złożonych tabel i formularzy. Znacznik <PRE> może być bardzo użyteczny, jeśli chcesz po prostu wstawić dokument, bez jakichkolwiek pisania kodu HTML.

Rozmiary czcionek

Okno dialogowe Property Inspector umożliwia zdefiniowanie bezwzględnych lub względnych rozmiarów czcionek. A jaka jest różnica między nimi?

W przypadku stosowania bezwzględnych rozmiarów czcionek, możliwe jest zdominowanie ustawień określonych w przeglądarce jako domyślne. W ten sposób zyskujesz większą kontrolę nad wyglądem swoich stron. Jeśli na przykład zdefiniujesz czcionkę o rozmiarze 5, to w takim rozmiarze zostanie ona wyświetlona w przeglądarce użytkownika, niezależnie od ustawień przyjętych przez niego. Jedyny wyjątek to brak czcionki w systemie użytkownika - w takim przypadku domyślne ustawienia przeglądarki mają pierwszeństwo nad Twoimi specyfikacjami.

Czcionki o rozmiarach względnych są skalowane względem wartości określonej w znaczniku <BASEFONT>. Załóżmy, że na przykład rozmiar bazowy określony w znaczniku <BASEFONT> jest równy 5. Jeśli zaznaczysz tekst i wybierz z listy rozwijanej Size okna dialogowego Property Inspector rozmiar +1, wynikowy rozmiar czcionki będzie wynosił 6.

Jeśli nie zdefiniowano rozmiaru bazowego, czcionki będą skalowane względem rozmiaru 3, który w dla większości przeglądarek jest powszechnie przyjętym rozmiarem domyślnym. Sprowadza się to do pełnej zależności od przeglądarki, co może prowadzić do nieprzewidywalnych rezultatów.

Zwróć także uwagę, że Dreamweaver nie wyświetla znacznika <BASEFONT> w swoim kodzie HTML - nie szukaj, bo i tak nie znajdziesz (można go jednak wpisać ręcznie - przypis tłum.).

Formatując tekst z poziomu inspektora Property za pomocą znacznika <FONT> możesz poczuć pewne rozczarowanie niewielką liczbą dostępnych na liście Size rozmiarów czcionki. Jeśli nieobce Ci to uczucie, znak to, że czas nauczyć się korzystać z kaskadowych arkuszy stylów CSS.

Początek ramki

Podpowiedź

Jeśli masz problemy ze stosowaniem krojów czcionki, może to oznaczać, że przez przypadek zdublowałeś znaczniki, czyli zastosowałeś je zbyt wiele razy. Wyczyść kod HTML i usuń nadmiarowe znaczniki stosując polecenie Clean Up HTML (z ustawieniami domyślnymi) z menu Commands.

Koniec ramki

Czcionka pogrubiona i kursywa

Aby zastosować do tekstu pogrubienie lub kursywę, możesz skorzystać z właściwości dla tekstu lub menu Text. Na rysunku 4.8 zaznaczono, w którym miejscu szukać w oknie Property Inspector przycisków pogrubienia i kursywy.

Rys. 4.8. Narzędzia formatowania tekstu w oknie Property Inspector

Aby zastosować do tekstu pogrubienie lub kursywę, zaznacz tekst i kliknij w oknie Property Inspector przycisk oznaczony literą B (pogrubienie) lub przycisk z literą I (kursywa). Tekst zostanie wyświetlony w wybranym stylu. Aby usunąć styl, zaznacz tekst i ponownie naciśnij przycisk B lub I.

Wyrównanie tekstu

Okno dialogowe Property Inspector udostępnia trzy narzędzia wyrównania tekstu: do lewego marginesu, do prawego marginesu oraz wycentrowania. Rzuć raz jeszcze okiem na rysunek 4.8. Narzędzia wyrównania umieszczone są z prawej strony, w górnym rzędzie, zaraz obok ikony ze znakiem zapytania.

Aby wyrównać tekst do prawego lub lewego marginesu, albo go wycentrować, zaznacz żądany fragment, i kliknij ikonę żądanego sposobu wyrównania. Aby usunąć wyrównanie, zaznacz ponownie tekst i wyłącz przycisk.

Tworzenie list

Listy numerowane i wypunktowane są obecne w kodzie HTML od zawsze. Zazwyczaj stosuje się je, aby poprzez wprowadzenie punktów i podpunktów nadać dokumentowi określoną strukturę.

W programie Dreamweaver listy można definiować z poziomu okna dialogowego Property Inspector lub menu Text. Na rysunku 4.8 pokazane są narzędzia wstawiania list w oknie Property Inspector (znajdziesz je poniżej przycisków pogrubienia i kursywy).

Aby przekształcić tekst w listę numerowaną lub wypunktowaną, zaznacz tekst w widoku projektu i kliknij odpowiedni przycisk (Ordered list lub Unordered list). I tu rada - rozdzielaj pozycje listy twardymi łamaniami wiersza (odpowiada im w kodzie HTML znacznik <P>); jeśli zastosujesz znaczniki <BR> (miękkie łamania wiersza), pozycje listy zostaną potraktowane jako jedna pozycje i pojawi się tylko jeden znak wypunktowania.

Rysunek 4.9 prezentuje dwie listy: poprawnie sformatowaną (górna) i nieprawidłowo sformatowaną (dolna). Rysunek obrazuje różnicę między oddzielaniem pozycji listy znacznikiem <P>, a znacznikiem <BR>.

Rys. 4.9. Dwie listy w oknie dokumentu programu Dreamweaver: poprawnie sformatowana (górna) i nieprawidłowo sformatowana (dolna)

Aby zdefiniować listę zagnieżdżoną lub listę w obrębie listy, oddziel zagnieżdżone pozycje listy twardymi łamaniami wiersza, zaznacz je i naciśnij przycisk Indent (wcięcie) w oknie Property Inspector.

Aby przekształcić listę wypunktowaną lub numerowaną w tekst, zaznacz pozycje listy i kliknij w oknie Property Inspector przycisk Ordered List lub Unordered list wyłączając w ten sposób stosowanie stylu. Pozycje listy łatwiej usuwa się, gdy przycisk formatowania jest wyłączony.

Listy mogą Cię rozczarować. Wydaje się, że wszystko zostało prawidłowo wykonane, a efekt dalej jest nie taki. Przyczyna leży po stronie kodu HTML. Klikając ikony formatowania więcej niż raz, ryzykujesz zwielokrotnienie odpowiednich par znaczników w kodzie HTML. Jeśli to się już zdarzy, możesz rozwiązać problem korzystając z polecenia Clean Up HTML w menu Commands. W procesie czyszczenia kodu usuwane są dodatkowe znaczniki i można zacząć od początku.

Definiowanie wcięć

Czasami chcesz zastosować do tekstu wcięcie, ale niekoniecznie metodą okrężną, poprzez utworzenie listy wypunktowanej lub numerowanej. W inspektorze Property masz do dyspozycji dwa narzędzia służące do definiowania wcięć: Text Outdent i Text Indent. Znajdziesz je na rysunku 4.8 (są ulokowane poniżej ikon wyrównania do lewego marginesu i wycentrowania).

Aby zastosować do tekstu wcięcie, zaznacz w widoku projektu tekst i kliknij ikonę wcięcia (przycisk Text Indent). Tekst zostanie odsunięty od lewego marginesu. Głębokość wcięcia można zwiększać kolejnymi naciśnięciami przycisku Text Indent. Trzeba jednak pamiętać, że im więcej takich kliknięć, tym więcej znaczników <BLOCKQUOTE>, co wprowadza w kodzie HTML pewien zamęt. Lepsze efekty uzyskasz korzystając z tabel. W rozdziale 8. znajdziesz omówienie sposobów wyrównywania tekstu przy użyciu tabel.

Aby usunąć wcięcia, zaznacz tekst i kliknij ikonę wysunięcia, Text Outdent. Tekst powróci do lewego marginesu dokumentu.

Początek ramki

Odstępy w tekście

--> Definiując [Author:r] układ tekstu na stronie WWW wielu projektantów korzysta z kodu spacji, który nosi nazwę miękkiej spacji i w HTML-u ma postać &nbsp;. Miękka spacja wprowadza dodatkowe odstępy w tekście, które w świecie dokumentów drukowanych noszą nazwę interlinii (ang. leading). W kodzie HTML nie ma znacznika umożliwiającego regulację odstępów między wierszami. Pozostaje więc jedynie miękka spacja.

Istnieją także inne jej zastosowania. Miękka spacja jest na przykład bardzo przydatna w definiowaniu układu strony. Aby ją wstawić w dokumencie, rozwiń menu Insert i zastosuj z menu podrzędnego Special Characters polecenie Non-Breaking Space (lub skorzystaj ze skrótu Ctrl+Shift+Spacja).

Pamiętaj, że nie wszystkie przeglądarki obsługują takie spacje.

Koniec ramki

Kolor tekstu

Kolorowy tekst zwiększa siłę wizualnego oddziaływania Twoich stron WWW. Mógłbyś na przykład zdefiniować tekst podstawowy w kolorze kontrastującym z kolorami nagłówków. Lub punkt ciężkości położyć na bardzo kolorowe nagłówki, stosując do stopki jedynie delikatne formatowanie, a tekst podstawowy wyświetlając białą czcionką na czarnym tle. Chociaż w fazie projektowania wybór odpowiedniego koloru tekstu zawsze jest trudny, Dreamweaver pomaga skutecznie w implementacji tego, co już zostanie wybrane.

Sięgnij ponownie do inspektora Property (możesz skorzystać także z pozycji Color w menu Text) i rozwiń paletę kolorów, którą znajdziesz z prawej strony listy Text Size (patrz rysunek 4.8). Paleta ta umożliwia wybranie koloru tekstu. Rysunek 4.10 pokazuje ją w postaci czarno-białej.

Rys. 4.10. Paleta kolorów programu Dreamweaver

Aby zmienić kolor tekstu, zaznacz tekst (musisz korzystać z widoku projektu) i rozwiń paletę kolorów inspektora Property. Wskaż na niej bezpieczny kolor, który chcesz zastosować i naciśnij OK. Dreamweaver 4 udostępnia kilka palet kolorystycznych, w tym palety kolorów stosowanych w systemach Windows i Macintosh. Aby z nich skorzystać, kliknij przycisk ze strzałką, z prawej strony palety, i wybierz odpowiednią pozycję menu.

Po wybraniu koloru z palety kolorów inspektora Property, kod szesnastkowy koloru pojawia się w polu tekstowym, obok próbki koloru. Kod ten składa się z kilku liter i cyfr poprzedzonych znakiem #. Taka kombinacja znaków stanowi w języku HTML informację dla przeglądarki odnośnie koloru, który ma wyświetlić. Ponieważ posługujesz się programem Dreamweaver, nie musisz się zagłębiać w szczegóły działania kodów szesnastkowych. Jeśli interesuje Cię to zagadnienie, sięgnij do rozdziału 7., „Projektowanie stron WWW”.

Alternatywna metoda definiowania koloru polega na bezpośrednim wpisaniu kodu szesnastkowego koloru w polu tekstowym inspektora Property. Można także używać nazw kolorów - takich jak na przykład pink czy green. Począwszy od wersji 3 większość przeglądarek sieciowych akceptuje taki sposób definiowania koloru. Zaleca się jednak stosowanie kodów szesnastkowych, bowiem zapewniają one porównywalny wizualnie efekt w różnych przeglądarkach.

Początek ramki

Podpowiedź

Za pomocą próbnika kolorów możesz pobrać kolor z dowolnego elementu na ekranie, także poza paletą kolorów. Możesz nawet pobierać próbki koloru z obrazów programu Fireworks. Jest to niezwykle wygodna opcja programu Dreamweaver, aczkolwiek niedoceniana.

Koniec ramki

Początek ramki

Podpowiedź

Domyślny kolor tekstu jest definiowany w oknie dialogowym Page Properties (otwieranym poleceniem Page Properties w menu Modify).

Koniec ramki

Aby przywrócić ustawienia domyślne dla koloru, kliknij w inspektorze Property przycisk rozwijania palety kolorów, a następnie naciśnij przekreślony na czerwono przycisk ulokowany w jej prawym górnym rogu.

Prostszy sposób formatowania tekstu

Jeśli nuży Cię definiowanie ustawień formatowania tekstu w oknie dialogowym Property Inspector lub objętość formatowanego tekstu jest duża, warto zbadać możliwości zautomatyzowania tego procesu.

O kaskadowych arkuszach stylu wspominaliśmy w tym rozdziale już parokrotnie, ponieważ są one coraz bardziej doceniane jako sposób wprowadzający formatowanie do tekstu. Żadna inna metoda z dotychczas stosowanych nie daje tak rozległej kontroli nad krojem pisma, stylami czy odstępami.

Oto krótkie porównanie sposobów formatowania tekstu w programie Dreamweaver:

• Kaskadowe arkusze stylów, CSS. Arkusze CSS wprowadzają do tekstu formatowanie same rezydując w miejscu odległym od tekstu, a więc w sekcji HEAD dokumentu lub w pliku zewnętrznym, umieszczonym na serwerze. W tekście, którego formatowanie zdefiniowano przy pomocy arkuszy CSS, wszelkie ewentualne zmiany stylu są natychmiast i automatycznie uwzględnione.

• Znaczniki HTML (np. znacznik <FONT>). W tym przypadku formatowanie stosowane jest lokalnie, do tekstu zawartego w określonym elemencie (na przykład: <B>Wyrazy pisane czcionką pogrubioną</B>). Chociaż wiele osób uważa ten sposób formatowania za wygodny, szybki i prosty, jest on odradzany przez W3C.

• Style HTML. W tym przypadku definiowany przez użytkownika zestaw znaczników HTML jest zapisywany w programie Dreamweaver jako styl HTML, do którego dostęp jest z poziomu palety HTML Styles (Ctrl+F11). Metoda umożliwia szybkie, wielokrotne stosowanie zestawu znaczników w dowolnym miejscu witryny. Jeśli styl HTML zostanie zmodyfikowany, zmiany znajdą swoje odzwierciedlenie tylko w przyszłych jego zastosowaniach. Wszystko to, co zostało wcześniej sformatowane, zachowa wcześniejsze atrybuty. Style HTML zostały rozwinięte specjalnie dla programu Dreamweaver.

Ponieważ kaskadowym arkuszom stylów poświęcony jest cały rozdział 12., tutaj zajmiemy się zaletami i wadami innej metody automatyzacji (ograniczonej niestety) procesu formatowania tekstu: stylami HTML.

Style HTML

Style HTML nie dają takich możliwości jak kaskadowe arkusze stylów, nie mają także precyzji arkuszy stylów tworzonych w aplikacjach komputerowego składu tekstu typu PageMaker, Quark Xpress lub Microsoft Word, ale oszczędzą Twój czas, który musiałbyś poświęcić na zmianę formatowania nagłówków w całej witrynie stosując jako narzędzie inspektora Property.

W programie Dreamweaver style HTML tworzy się poprzez zaznaczenie tekstu, do którego zastosowane zostały wszystkie żądane atrybuty określające krój czcionki, rozmiar, kolor, styl i wyrównanie, i kliknięcie ikony dodawania stylu na palecie HTML Styles. Rysunek 4.11 prezentuje tę paletę.

Rys. 4.11. Paleta HTML Styles

Oto sposoby wyświetlenia palety HTML Styles:

• Wybierz pozycję HTML Styles w menu Window (patrz rysunek 4.12).

• Kliknij przycisk HTML Styles na pasku szybkiego uruchamiania (Launcher).

• Kliknij ikonę z żółtym znacznikiem akapitu na mini-pasku szybkiego uruchamiania (u dołu okna dokumentu) - symbolizuje ona style HTML.

• Zastosuj skrót klawiaturowy Ctrl+F11.

Rys. 4.12. Otwieranie palety HTML Styles z poziomu menu Window

Korzystanie z palety HTML Styles

Wreszcie nadszedł czas na przyjemne spożytkowanie zgromadzonej w tym rozdziale wiedzy dotyczącej formatowania tekstu z poziomu inspektora Property. Pamiętasz przepis na sukiyaki z grzybami i krewetkami? Przepis ten będzie stanowił Twój poligon doświadczalny, na którym przetestujemy style HTML. W następnym kroku będziesz miał okazję sprawdzić swoje umiejętności na innym przepisie kulinarnym.

Początek ramki

Uwaga

Ważne jest, aby zrozumieć różnicę między stylem akapitu a stylem tekstu.

Styl akapitu, oznaczony w oknie palety HTML Styles symbolem akapitu, to styl stosowany do całego akapitu, bez względu na to, czy tekst został zaznaczony. Innymi słowy, wystarczy umieścić punkt wstawiania w danym akapicie, aby styl akapitu z palety HTML Styles został do niego zastosowany.

Styl tekstu zostanie zastosowany tylko do tekstu zaznaczonego. Styl taki jest oznaczony w oknie palety HTML Styles ikoną z symbolem podkreślonej małej litery a.

Koniec ramki

Ćwiczenie 4.1. Style HTML

Otwórz plik RECIPE1.HTML z foldera Chapter 4 znajdującego się na dysku CD dołączonym do książki.

Część I. Definiowanie nowych stylów

1. Zaznacz w dokumencie listę składników potrawy, począwszy od grzybów, a skończywszy na gotowanym ryżu. Kliknij w oknie palety HTML Styles ikonę nowego stylu New Style (znajdziesz ją u dołu okna). Wyświetlone zostanie okno dialogowe Define HTML Style (patrz rysunek 4.13). Definiowane tu ustawienia stylu HTML to krój czcionki i jej styl.

Rys. 4.13. Okno dialogowe Define HTML Style

2. W polu Name okna Define HTML Style wpisz nazwę tworzonego stylu: Ingredients.

3. Kliknij przycisk opcji Selected w sekcji Apply to (jest to opcja domyślna).

4. W sekcji When Applying wybierz opcję Add to Existing Style.

5. Wybierz z listy Font zestaw czcionek Verdana, Arial, sans-serif, a z listy Size rozmiar czcionki równy 2.

6. Wybierz kolor tekstu z palety Color.

7. Naciśnij OK, aby wyjść z okna dialogowego.

8. Zwróć uwagę, że w oknie palety HTML Styles pojawił się nowy styl o nazwie Ingredients. Ponieważ jest to styl stosowany do dowolnego tekstu, przypisana mu została ikona z podkreśloną małą literą a. Zaznacz teraz nagłówek przepisu na sukiyaki z grzybami i krewetkami i powtórz kroki 1-8, aby utworzyć styl HTML o nazwie Headline. Tym razem jednak zastosuj czcionkę o rozmiarze 5. Został nam jeszcze opis przygotowania potrawy - zaznacz go i również powtórz operacje określone w punktach 1-8, tworząc styl o nazwie Directions. W tym stylu zdefiniuj rozmiar czcionki jako 2.

9. Ostatni etap to definicja stylu dla notki o prawach autorskich, umieszczonej u dołu strony. Powtórz ponownie kroki 1-8 i przygotuj styl o nazwie Copyright. W tym stylu zastosuj zestaw czcionek Georgia, Times New Roman, Times, serif o rozmiarze czcionki równym 1.

Po zdefiniowaniu wszystkich tych stylów, powinny się one pojawić w oknie palety HTML Styles. Style Ingredients, Headline, Directions i Copyright będą nam potrzebne w dalszej części ćwiczenia.

Część II. Stosowanie stylów HTML

Dla celów tej części ćwiczenia otwórz plik o nazwie RECIPE2.HTML z foldera Chapter 4 na dysku CD dołączonym do książki. Celem ćwiczenia jest zastosowanie stylów HTML zdefiniowanych w poprzedniej części ćwiczenia do odpowiednich fragmentów dokumentu, aby oba przepisy miały podobną graficznie postać.

1. Zaznacz tekst Pizza dla całej rodziny. Otwórz paletę HTML Styles (Ctrl+F11) i kliknij styl Headline. Spowoduje to zastosowanie wskazanego stylu (utworzyłeś go w pierwszej części ćwiczenia) do zaznaczonego nagłówka przepisu.

2. Zaznacz całą listę składników - od pozycji Spód do pozycji 1/3 szklanki tartego sera parmezan - i kliknij w oknie palety HTML Styles styl o nazwie Ingredients, aby zastosować styl do zaznaczonego tekstu.

3. Zaznacz opis przygotowania pizzy i kliknij w oknie palety HTML Styles nazwę stylu Directions.

4. Zaznacz notkę o prawach autorskich umieszczoną u dołu strony i kliknij w oknie palety HTML Styles styl Copyright.

Po wykonaniu wszystkich tych operacji, przepis na pizzę powinien wyglądać podobnie jak przepis na sukiyaki. Czyż to nie jest bajecznie proste?

Usuwanie stylów HTML

Aby usunąć styl HTML, zaznacz tekst, z którego chcesz usunąć formatowanie, i skorzystaj z jednej z przedstawionych poniżej metod:

• Zaznacz tekst i kliknij w oknie palety HTML Styles ikonę Clear Selection Style, aby usunąć styl tekstu.

• Umieść punkt wstawiania w akapicie, z którego chcesz usunąć styl, i kliknij ikonę Clear Paragraph Style.

Współdzielenie stylów HTML

Swoje style HTML możesz stosować w innych witrynach oraz udostępniać innym użytkownikom. Aby udostępnić style HTML:

1. Wybierz pozycję Site Files w menu Window.

2. Otwórz w prawym panelu okna Site folder główny witryny, a następnie otwórz folder Library.

3. Plik o nazwie STYLES.XML zawiera wszystkie Twoje style HTML zdefiniowane dla witryny. Skorzystaj z narzędzi obsługi witryny (są one omawiane w rozdziale 14.), aby załadować, ściągnąć, zwrócić bądź wypożyczyć style. Plik ten w niczym nie odbiega od pozostałych plików witryny.

Znaki specjalne

W przypadku pracy z tekstem bez wątpienia napotkasz potrzebę stosowania znaków specjalnych. Zastosowania znaków specjalnych są w najróżniejsze. Na przykład można je wykorzystać do umieszczenia akcentów nad literami w wyrazach zapożyczonych z innych języków (jak choćby w wyrazie resumé). Ponadto umożliwiają one wstawienie na stronie godziny, daty, artystycznie pozawijanych znaków zapytania oraz jednostek miary.

Twoje strony WWW zyskają bardziej profesjonalny wygląd, jeśli wykorzystasz możliwości znaków specjalnych. Wiele osób z tego rezygnuje ze względu na frustrację, która towarzyszy ich stosowaniu. Źródłem frustracji jest z jednej strony konieczność stosowania specjalnego kodu HTML, a z drugiej strony problemy z wyświetlaniem w gorszej klasy przeglądarkach. Traktuj podejrzliwie wszelkie kody znaków specjalnych , które zawierają liczby z przedziału 127-159. Te pozycje nie są częścią standardu HTML i nie powinny być stosowane przy publikowaniu w Internecie.

Jak korzystać ze znaków specjalnych

Przeglądarka sieciowa wyświetli znak specjalny w miejscu, w którym pojawia się on w kodzie HTML. Na przykład kod znaku specjalnego umożliwiającego wyświetlenie akcentowanej litery e jest taki: &#233;

W porównaniu z edytorami tekstowymi kodu HTML, program Dreamweaver ma niewątpliwą przewagę, jeśli chodzi o stosowanie znaków specjalnych - ich kody są zawsze dostępne, gdy tylko są potrzebne. Dzięki temu nie musisz pamiętać kodu każdego ze znaków, począwszy od akcentowanego e, poprzez znak praw autorskich, a skończywszy na półpauzie o szerokości jednego en. Aby sięgnąć do zasobów znaków specjalnych programu Dreamweaver:

1. Wybierz w widoku projektu pozycję Objects z menu Window.

2. Wyświetlona zostanie paleta obiektów. Kliknij przycisk ze strzałką w jej prawym rogu i wybierz z menu kategorią Character (patrz rysunek 4.12).

3. Na palecie obiektów pojawią się ikony reprezentujące najczęściej stosowane znaki specjalne. Kliknij ikonę odpowiadającą znakowi, który chcesz zastosować - pojawi się on w tekście. Jeśli przełączysz się do widoku kodu HTML, zobaczysz kod, który został dodany.

Znaki specjalne można także wstawiać korzystając z menu podrzędnego Special Character w menu Insert.

Jeśli w proponowanym zestawie nie znajdziesz potrzebnego Ci znaku specjalnego, kliknij na palecie obiektów ikonę Insert Other Character (patrz rysunek 4.14).

Rys. 4.14. Wstawianie znaków specjalnych przy wykorzystaniu palety obiektów

Zastosowanie tej opcji spowoduje wyświetlenie okna Insert Other Character - wybierz w nim żądany znak specjalny (patrz rysunek 4.15). Gdy klikniesz jego ikonę, znak pojawi się w polu tekstowym Insert, u góry okna. Oczywiście sam także możesz wpisać kod w tym polu tekstowym, aczkolwiek w takiej sytuacji prościej jest dodać go do kodu HTML ręcznie.

Rys. 4.15. Okno dialogowe Insert Other Character

Początek ramki

Myślniki o szerokościach em i en

Jeśli nauczysz się korzystać z półpauzy o szerokości jednego en (- ) oraz z myślnika o szerokości jednego em (—), teksty na Twoich stronach staną się bardziej profesjonalnie przygotowane.

W tekstach drukowanych myślnik o szerokości jednego em ma szerokość jednej wielkiej litery M. Stosowany jest do zaznaczenia przerwy w wypowiedzi, czy pauzy. Półpauza o szerokości jednego en ma szerokość wielkiej litery N, a zastosowań ma wiele. Rozdziela godziny od minut, stosowana jest w datach czy też po temacie nagłówka.

Oto przykład użycia myślnika o szerokości jednego em w dialogu: „Jeśli jeszcze raz mi przerwiesz, ja—”

Kod HTML odpowiadający myślnikowi em jest następujący:

&#151;

A oto przykład zastosowania półpauzy o szerokości jednego en: 12:00 - 16:00.

Kod HTML odpowiadający półpauzie en jest taki:

&#150;

Koniec ramki

Podsumowanie

Dreamweaver udostępnia wiele opcji obsługi tekstu. Warto poznać metody importowania tekstu do programu Dreamweaver, na przykład z edytora Microsoft Word, i eksportowania go do innych programów. Dzięki tym umiejętnościom znacznie zaoszczędzisz czas. Mimo takich możliwości, często korzystniejszym rozwiązaniem jest wklejenie zwykłego tekstu do dokumentu programu Dreamweaver i samodzielne sformatowanie go. W przeciwnym razie ryzykujesz, że obecność niechcianego kodu spowoduje problemy techniczne z poprawnym wyświetleniem pliku w przeglądarce.

Formatowanie tekstu, a więc zmiana kroju czcionki, koloru, stylu i wyrównania tekstu, może być przeprowadzone przy wykorzystaniu narzędzi inspektora Property. Jednak większość projektantów stron WWW raczej skłania się do stosowania kaskadowych arkuszy stylów, ponieważ W3C odradza stosowanie znacznika <FONT>. Wynika to między innymi z tego, że kaskadowe arkusze stylów oferują znacznie lepszą kontrolę nad tekstem, niż znacznik <FONT>.

Jeśli ilość tekstu jest niewielka, formatowanie z pomocą narzędzi inspektora Property lub przy wykorzystaniu stylów HTML może przyspieszyć cały proces. Definiując nowy styl na podstawie istniejącego tekstu, uzyskujesz możliwość wielokrotnego stosowania stylu o zawsze identycznych cechach.

Praca z tekstem to wyzwanie, ale można mu wyjść na spotkanie ucząc się najlepszych metod obróbki tekstu i dokonując najlepszych dla witryny wyborów.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz04.doc

Przetłumaczyłam, ale wydaje się, że pomylono tu odstępy między wierszami z odstępami w tekście.

---