rozdz04.pdf

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 ),

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 .

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 pojawią się jako znaki , a nie jako łamania wierszy.

Polecenie Paste HTML spowoduje wstawienie fizycznej manifestacji kodu HTML. Dlatego

pozostanie łamaniem wiersza i nie pojawi się jako ciąg znaków .

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: