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:
q Kopiowanie i wklejanie tekstu
q Importowanie tekstu
q Kroje czcionek, style i rozmiary
q Stosowanie do tekstu wcięć i wyrównania
q Kolor tekstu
q Style HTML
q 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
Omówimy tu trzy różne sytuacje:
q Kopiowanie tekstu (a nie kodu HTML) w oknie przeglądarki sieciowej i wklejanie go do dokumentu programu Dreamweaver.
q Kopiowanie tekstu w dokumencie programu Dreamweaver i wklejanie go w innym programie.
q 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
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
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>.
Aby zachować łamania wierszy, zawartość Schowka można wklejać między znacznikami <PRE> </PRE>.
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.
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.
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.
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.
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.
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.
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”.
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.
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.
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 Font...
Wolf-1