Ćwiczenie 3 xhtml

XHTML – elastyczny układ strony
1
Wprowadzenie
Typowa struktura strony (układ dwukolumnowy) przedstawiona jest na rysunku:
Nagłówek
Pasek
Treść
Stopka
Do odwzorowania powyŜszej struktury stosowano zwykle tabele postaci:
<table width="100%">
<tr> <td colspan="2"> Nagłówek </td> </tr>
<tr> <td width="75%"> Treść </td>
<td width="25%"> Pasek </td>
</tr>
<tr colspan="2"> Stopka </td></tr>
</table>
Po zbudowaniu podstawowego szkieletu zwykle pojawiają się dodatkowe tabele w kaŜdej
komórce. W rezultacie powstaje ogromna ilość kodu.
Tego typu układ moŜe płynnie zmieniać się w zaleŜności od rozmiaru okna przeglądarki.
Jednak podstawową wadą takiego rozwiązania jest fakt, Ŝe treść strony jest pomieszana
z projektem graficznym. Ramki i obrazki gif słuŜące do tworzenia odstępów oraz grafika są
umieszczane w kodzie wraz z treścią strony. Oznacza to, Ŝe uŜytkownicy korzystający
z przeglądarek tekstowych lub urządzeń o małych ekranach będą mieli trudności
z odczytaniem treści dokumentu.
Przeplatanie treści z warstwą prezentacyjną skutkuje obfitością kodu co bardzo utrudnia
aktualizację i utrzymanie witryny. Zmiana projektu bazującego na tabelach wymaga
ogromnego wysiłku.
Następną wadą jest kolejność w jakiej dane są prezentowane w przeglądarkach tekstowych.
Istnieje tylko jedna kolejność wyświetlana zgodna z kolejnością elementów w kodzie
a kolumny tabeli są wyświetlane zawsze od lewej do prawej. Powoduje to, Ŝe przeglądarki
tekstowe muszą przebrnąć przez mniej istotne informacje zanim dojdą do najwaŜniejszych
elementów.
Rozmieszczając elementy na stronie przy uŜyciu CSS a nie tabel mozna zmienić kolejność ich
wystepowania w kodzie a w efekcie porządek wyświetlania treści w przeglądarkach
tekstowych. Takie projekty tworzy się z wykorzystaniem duŜo mniejszej ilości kodu
a warstwa prezentacyjna jest zupełnie oddzielona od treści strony.
Przy uŜyciu CSS moŜna zbudować płynny, wielokolumnowy układ strony.
Zamiast stosować komórki tabel do rozdzielania treści strony na kolumny, nagłówek i stopkę
moŜna posłuŜyć się elementami <div>.
Ćw.1. Projekt dwukolumnowy z elementami div
a) Utworzyć dokument xhtml o nazwie index.html z zawartością:
<div id="kontener">
<div id="nag"><h1>Nagłówek</h1> </div>
<div id="tresc">Treść</div>
<div id="pasek">Pasek boczny</div>
<div id="stopka">Stopka</div>
</div>
Uwaga - cała struktura projektu umieszczona jest w dodatkowym pojemniku-kontenerze:
<div id="kontener":>
XHTML – elastyczny układ strony
2
Porządek wyświetlania elementów w przeglądarce tekstowej (bez CSS) będzie następujący:
nagłówek, treść, pasek, stopka.
b) Dołączyć plik z regułami CSS ustalającymi tła poszczególnych elementów, szerokość
kolumny treści (np. na 70%) z wyrównaniem do lewej strony i szerokość paska bocznego (np. 30%)
z wyrównaniem do prawej strony (właściwość float tworzy tzw. elementy pływające):
#nag
{background:#369; }
#tresc
{float:left;width:70%; }
#pasek
{float:right;width:30%;background:#9c3; }
#stopka
{background:#cc9; height:10%}
Układ elementów przed pozycjonowaniem
Efekt działania modyfikacji CSS
(stopka miesza się z pływającymi
elementami)
Stopka miesza się z elementami pływającymi, ponadto nie ma określonej szerokości i jej pole
przejmuje szerokość całego kontenera. Aby zawartość stopki nie oblewała poprzedzających ją
elementów (z Ŝadnej strony) a była umieszczona pod obydwiema kolumnami (niezaleŜnie od
ich długości) naleŜy ustawić dla elementu stopka w CSS właściwość:clear:both;
Po dołączeniu tej reguły układ strony jest postaci:
Dodatkowo w celu polepszenia wyglądu projektu w arkuszu CSS moŜna ustalić marginesy
(własność margin) stosowane do ustawienia odstępów między kolumnami tekstu),
dopełnienia elementów (padding), ograniczenie maksymalnej i minimalnej szerokości
kolumny (max-width, min-width). Niestety te ostatnie nie są obsługiwane w IE.
XHTML – elastyczny układ strony
Ćw.2.
Na podstawie ćw 1. i elementów z poprzednich zajęć zbudować stronę postaci:
Poszczególne elementy strony z ćw.1 wypełnione zostały właściwą treścią.
Pasek boczny został zbudowany na bazie elementów <h3>, <p> i listy <ul>, jak pokazano
poniŜej:
<div id="pasek">
<div class="box">
<h3> Promocje</h3>
<p>Na wiosnę wszystkie kursy o 20% taniej. Wybierz kurs dla siebie.</p>
</div>
<div class="box">
<h3>Walidatory</h3>
<ul>
<li><a href="http://validator.w3.org/">CSS</a></li>
<li><a href="http://jigsaw.w3.org/css-validator">XHTML</a></li>
</ul>
</div>
</div>
Do reguł CSS dołączono definicję klasy box i format elementu <h3> zagnieŜdŜonego
w elemencie klasy box:
.box { background:#fff;
padding:5px;
margin:5px;
font-size:90%;
}
.box h3 {margin:0px;
padding:2px;
font-size:120%;
}
Wyświetlić stronę bez arkusza CSS.
3