DHTML0131

Praktyczne zastosowanie CSS

Rozdział 3

KIM iłów o tabelach

W języku HTML definiuj'; po kolei wszystkie wirrsre tabeli, » każdy 7. wierszy zawiera definicję wszystkich zawartych w mm komórek. Definiowanie tabeli zaczynamy od górnego wiersza i określamy wszystkie jego komórki, następnie drugi wiersz i jego komórki, itd Kolumny óbficzane sąaiifomatyćznie w oparciu c liczbę komórek w każdym z wierszy.

P «r» Tn*c-yiV -'.vi- TP ■ iTP .-ói-r- .-ł^. Vcai offllrp. Ćhjs** -j-

Rysunek R.4. Strona WWW z paskiem przewijania

3. Teraz możesz użyć tabel lub umiejscawiania

Listing 8.2. Tworzenie paska przewijania przy użyciu reguły i tablicy

<html>

<hęad>

<me ta h1tp-equ iv= " Cont. e n t*. -Type " ->cont.erit;=>"te>:t/html; chars>et=ISO-8859b*2"> <title>Lishing 8.2</title> style rype=^Mte:<t/css">

BODY { background: #cccccc -*url(../images/tlo3.gif) repeat-y; }

</sUyle>

</nead> <body bgcolor*■ "# FF‘FFFF">

<tr>

■ MG SRO". ./images/rysfi.gif " widuh*³"! 10" height="85" ><br>

</center>

</td>

<td>

<h3>Rozdział 3<br>

Kilka słów o zabelach</h3>

<p>W języku HTML definiuje się po kolei

...</p>

<p>?ara znaczników TR i /TR siuźy do ...</p> </td>

</zr>

</table>

</body>

Rysunek S.3. GruJiku lla paska przewijania jgjgjBE

iiiiiiimTnTO

Tworzenie pasków przewijania

Paski przewijania są najprawdopodobniej najpopularniejszym narzędziem służącym do prezentacji narzędzi nawigacyjnych. Tradycyjna metoda takiej aranżacji polega na stworzeniu długiej, poziomej grafiki tla zawierającej pasek przewijania oraz kolor tła obszaru, w którym zostanie umieszczona zawartość. Jednak używając CSS można stworzyć grafikę o szerokości paska i dzięki użyciu właściwości repeat-y, powtarzać ją wzdłuż lewej krawędzi strony na całej jej wysokości. Metoda ta zmniejsza czas ładowania poprzez ograniczenie wielkości grafiki tła.

Aby stworzyć pasek przewijania

1. Stwórz cienki pasek o szerokości równej planowanej szerokości paska. Na rysunku 8.3 przedstawiony został pasek użyty do stworzenia paska o szerokości 160 pikseli.

2. BODY{

.background: #cccccc url(../images/

-.tlo3.gif) repeat-y;}

Zdefiniuj regułę dla znacznika <B0DY>, jednak pamiętaj, aby tło było powtarzane wyłącznie w pionie, jak to pokazano na listingu 8.2. Będziesz także chciał określić kolor tla dla pozostałej części strony.

w której będzie wyświetlona zawartość paska, oraz drugiej kolumny z prawej strony, w której zostanie umieszczona pozostała zawartość dokumentu. Wyniki powinny przypominać stronę z rysunku 8.4.

S Rada

■ Przedstawiona powyżej technika wykorzystująca właściwość repeat-y nie będzie działała w przeglądarkach, które nie obsługują CSS. Przeglądarki te oczekują bowiem, że grafika tła będzie podana w znaczniku <BODY>. W tych przeglądarkach nie istnieje możliwość określenia kierunku, w którym będzie powtarzana grafika tła.

Tworzenie pasków przewijania

135

Wyszukiwarka

Podobne podstrony:
DHTML0129 Praktyczne zastosowanie CSS Istnieje wiele różnych sposobów wykorzystania kaskadowych arku
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
DHTML0139 Praktyczne zastosowanie CSS Listing X. 10. W tym arkuszu stylów zdefiniowane zostały ident
DHTML0133 Praktyczne zastosowanie C5S [jjj-Usting 8.3 “ Netscape Rysunek 8.5. Opuszczona i powiększo
Praktyka pisania pracy w rozdziałach merytorycznych pracy oraz udzielenie odpowiedzi na postawione w
page0070 66 będzie praktyczny wniosek z niniejszego rozdziału? Ciśnie się sam, a mianowicie: że bez
310 Analiza techniczna w praktyceJAK KORZYSTAĆ Z TEGO ROZDZIAŁU: 1. Nie zaczynaj l
DHTML0059 Kontrola tekstu w CSS Wielu projektantów rozpoczynających działanie w sieci zaczynało od p
DHTML0061 Kontrola tekstu w CSS Określanie odstępów między wyrazamiPodobnie jak odstępy miiftoy lite
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
DHTML0069 Kontrola tekstu w CSS m 3 /< j*. K> cł.. 8ack -
DHTML0114 Umiejscawianie w CSS . Listing 7.1 etscape 5te £drt iew £o gamrrwfcatDr W języku HTML defi
080 TIF Język C++ - praktyczne wskazówki Ten rozdział i pięć następnych wiąże się z programowaniem o
2012 04 19 25 45 Rozdział 34: Problemy chirurgiczne w praktyce lekarza rodzinnego Rozdział 35: Ukła

więcej podobnych podstron