DHTML0139

Praktyczne zastosowanie CSS

Listing X. 10. W tym arkuszu stylów zdefiniowane zostały identyfikatory, które po zaimportowaniu do dokumentu HTML-owego mogą posłużyć do stworzenia trzech kolumn tekstu

#kolumnal { position: absolute; top: . 5in;

—»left: .lin; width: 2.5in; font: 12pt/14pt -»times, serif; }

#kolumna2 { position: absolute; top: . 5in;

->left: 2.8in; width: 2.5in; font: 12pt/14pt —>times_/ serif; }

#kolumna3 { position: absolute; top: . 5in; -»left: 5.Sin; width: l.Sin; font: bold ->9pt/24pt helvetica, arial, sans-serif; ->color: red; }

.relElement { position: relative; margin:

—►10px; }

Listing 8. / /. Kod przedstawiony na poprzednim listingu zostaje dołączony do tego dokumentu, a następnie wykorzystany do umieszczenia jego zawartości w trzech kolumnach

<html>

<head>

->centen t="t ext/htmi; cha rset=IS0-V65 9-2 ^M> <title>Listlng 8. ll</tit:le>

<LINK rel=^,,stylesheet" type="text/css"

—»href="Listing-8-10.css">

•Ń/head/’

<h3>Kilka słów o tabelach</h3>

<div>

W języku HTML definiuje się po kolei wszystkie wiersze tabeli/ a każdy z wierszy zawiera definicję wszystkich zawartych w nir* komórek. Definiowanie tabeli ...

</span>

<IMfc SRO"../ircages/rysl.gif" width="150" hei<jht="126” ali<p~"left"xbr elear -

Para znaczników TR i /TR służy do tworzenia wiersza. Każdy wiersz rr.a komórki, które definiuje się 2a pomocą pary znaczników TD i /TD, Zawartych między znacznikami ...

</span>

Znacznik CAPTION posiada atrybuty, które określają położenie tekstu podpisu względem tabeli. Atrybut ALIGN przyjmuje wartości LEFT, RIGHT i CENTER, a służy do wyrównywania podpisu w poziomie. ...

</span>

</div>

</body>

</html>

Tworzenie kolumn

Kolumny mają bardzo wiele zastosowań w tworzeniu stron WWW: dzięki nim można zaoszczędzić miejsca na ekranie, a ponadto sprawiają, że strony czyta się znacznie łatwiej, niż gdy tekst umieszczony jest w jednej, bardzo szerokiej kolumnie. Przed udostępnieniem kaskadowych arkuszy stylów kolumny można było tworzyć jedynie przy pomocy tabel. Jednak problem wykorzystania tabel polegał na tym, iż ich przeznaczeniem nigdy nie było określanie struktury stron, co powoduje, że ich wykorzystanie przy projektowaniu przysparza kilka trudności. Co więcej, załadowanie i wyświetlenie tabeli w oknie przeglądarki może zająć trochę czasu.

Aby stworzyć kolumny

1. Stwórz zewnętrzny plik CSS wzorowany na kodzie przedstawionym na listingu 8.10. W tym kodzie stworzone zostały trzy identyfikatory, z których każdy definiuje

jedną kolumnę. Elementy te będą

umiejscowione bezwzględnie, dlatego każdy z nich musi zostać umieszczony na lewo od elementu poprzedniego.

2. W dokumencie HTML-owym stwórz trzy kolumny zawartości, jak pokazano na listingu 8.11. Zauważ, że obrazek

umieszczony w środkowej kolumnie został

wyrównany do lewej strony. Wyrównanie obrazka musi zostać określone, gdyż w przeciwnym razie tekst będzie wyświetlany poniżej niego. Wyniki wyświetlenia tego kodu w przeglądarce przedstawione zostały na rysunku 8.10.

W tym przykładzie wykorzystaliśmy również stylu relElement, który pojawił się już wcześniej, w rozdziale 7. Dzięki takiemu rozwiązaniu kolumny umieszczane są poniżej tytułu, w przeciwnym razie zostałyby wyświetlone ponad nim.

Tworzenie kolumn

143

Wyszukiwarka

Podobne podstrony:
DHTML0135 Praktyczne zastosowanie CSS Listing 8.5. Zewnętrzny plik CSS o nazwie Listing-8-5.css, zaw
DHTML0137 Praktyczne zastosowanie CSS Listing 8.9. Określanie wyglądu trzech różnych stanów
DHTML0129 Praktyczne zastosowanie CSS Istnieje wiele różnych sposobów wykorzystania kaskadowych arku
DHTML0131 Praktyczne zastosowanie CSS Praktyczne zastosowanie CSS Rozdział 3 KIM iłów o tabelach W j
DHTML0041 Podstawy CSS Listing 1.11. W tym przykładzie stworzono selektor klasy niezależnej oraz sel
DHTML0065 Kontrola tekstu w CSS Listing 3.4. Zapisywanie kwadratu jako indeksu górnego <head>
DHTML0067 Kontrola tekstu w CSS Listing 3.6. Użycie klasy nazwisku spowoduje. : • wyrazy będą się za
DHTML0133 Praktyczne zastosowanie C5S [jjj-Usting 8.3 “ Netscape Rysunek 8.5. Opuszczona i powiększo
DHTML0128 Umiejscawianie w CSS Listing 7.9. W tym przykładzie definiujemy cztery identyfikatory. ele
scan0088 (10) FARBY AKRYLOWE W PRAKTYCI Kierunek pociągnięć pędzla Na tym etapie pracy widzimy, w ja
DHTML0029 Podstawy CSS Listing l. 1. Nadanie nowego wyglądu znacznikowi ■ B> B { font: bold 16pt
DHTML0033 Podstawy CSS Podstawy CSS Listing 1.6. Wszystkim znacznikom nagłówków zostaje nadana ta sa
DHTML0035 Podstawy CSS Listing 1.9. Styl ve nagłówku określa, że linie u akapicie mają mieć wysokość
DHTML0036 Rozdział 1. Dodawanie CSS do dokumentu HTML-owego Głównym zastosowaniem CSS jest definiowa
DHTML0040 Rozdział 1. Rozdział 1. Dodawanie komentarzy do CSSDodawanie komentarzy do CSS Arkusze sty
DHTML0104 Marginesy i obramowania Listing 6.10. Obramowania będą miały zarówno znaczniki <IMG>
DHTML0114 Umiejscawianie w CSS . Listing 7.1 etscape 5te £drt iew £o gamrrwfcatDr W języku HTML defi
DHTML0120 Umiejscawianie w CSS Umiejscawianie w CSS Listing 7.4 Netscape EOe fcrfit y.ew Qo ęommuftC

więcej podobnych podstron