niedziela, 23 Sierpień 2009
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 blogu 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 bloga:
?? 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 bloga 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
bloga.
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 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 bloga 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ę.
Tagi: css, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone
sobota, 22 Sierpień 2009
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, bloga 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.
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. bloga 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 bloga, nie
musisz się zagłębiać w szczegóły działania kodów szesnastkowych.
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
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 bloga, aczkolwiek niedoceniana.
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.
Tagi: html, kolor, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone
piątek, 21 Sierpień 2009
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 blogu 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.
Definiując 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ć . 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.
Tagi: html, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone
środa, 19 Sierpień 2009
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
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.
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.
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 bloga listy można definiować z poziomu okna dialogowego Property
Inspector lub menu Text.
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.
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.
Tagi: html, tekst
Kategoria: Tworzenie stron | Komentarze są wyłączone