|
Lekcja 5 - utworzenie tabeli z nagłówkiem strony.
Zajmiemy się teraz prawą częścią naszej strony. Zaczynamy od góry. Ustawiamy się w
komórce w której umieściliśmy tekst "Tu będzie treść" i usuwamy go. Następnie wstawiamy
tabelę zawierającą jedną kolumnę i sześć wierszy.
Zgodnie z umieszczonym poniżej kodem wpisujemy parametry likwidujące odstępy
(CELLSPACING, CELLPADDING), ustalamy
kolor tła (BGCOLOR="#0415B9") oraz szerokość (WIDTH) tabeli na 655 pikseli i obramowania
(BORDER) na 1 piksel. Obramowanie to w niektórych sytuacjach może spowodować
(dla rozdzielczości 800x600 px) pojawienie się paska poziomego suwaka. Zniknie on po wyzerowaniu tego parametru.
Dla wybranych komórek ustalamy także parametry dotyczące ich wysokości (HEIGHT) oraz
wyrównania poziomego (ALIGN) i koloru tła (BGCOLOR). Wpisujemy także tekst. Na razie nie
będzie on wyglądał zbyt dobrze, sformatujemy go w następnej lekcji. Całość powinna
wyglądać następująco:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" TOPMARGIN="0"
MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="0" CELLSPACING="0", CELLPADDING="0" WIDTH="780">
<TR>
<TD WIDTH="5"></TD>
<TD WIDTH="110" VALIGN="top">
<!-- poczatek tabeli menu-->
...
<!-- koniec tabeli menu-->
</TD>
<TD WIDTH="5"></TD>
<TD WIDTH="655" VALIGN="top">
<!-- poczatek tabeli z naglowkiem-->
<TABLE WIDTH="655" CELLSPACING="0" CELLPADDING="0" BORDER="1" BGCOLOR="#0415B9">
<TR><TD></TD></TR>
<TR><TD HEIGHT="65">Biblioteka XVI L.O. w Kozłowej Górze</TD></TR>
<TR><TD HEIGHT="15" ALIGN="right">Kozłowa Góra, ul. Zielarska 24/26,
tel. (0-99) 4567834, biblioteka@xvilo.kozlowa.pl</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20" BGCOLOR="#0B126B"> </TD></TR>
<TR><TD></TD></TR>
</TABLE>
<!-- koniec tabeli z naglowkiem-->
</TD>
<TD WIDTH="5"></TD>
</TR>
</TABLE>
</BODY>
Zobacz
Zauważmy, że ponownie skorzystaliśmy z twardej spacji ( ). O przyczynach jej
zastosowania wspomnieliśmy już wcześniej.
Wykorzystamy teraz znaną już sztuczkę i przy pomocy pliku 1x1w.gif utworzymy białe odstępy
pomiędzy poszczególnymi komórkami zawierającymi tekst oraz przed i po widocznej części
tabeli. Wyzerujemy też szerokość obramowania tabeli. Grafikę wstawiamy do komórek w
pierwszym, czwartym i szóstym wierszu tabeli. Aby biały prostokąt w całości zasłaniał
komórkę musi on być rozciągnięty na szerokość równą szerokości tabeli, czyli w naszym
przypadku 655 pikseli.
...
<!-- poczatek tabeli z naglowkiem-->
<TABLE WIDTH="655" CELLSPACING="0" CELLPADDING="0" BORDER="0" BGCOLOR="#0415B9">
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="10" BORDER="0"></TD></TR>
<TR><TD HEIGHT="65">Biblioteka XVI L.O. w Kozłowej Górze</TD></TR>
<TR><TD HEIGHT="15" ALIGN="right">Kozłowa Góra, ul. Zielarska 24/26,
tel. (0-99) 4567834, biblioteka@xvilo.kozlowa.pl</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20" BGCOLOR="#0B126B"> </TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="5" BORDER="0"></TD></TR>
</TABLE>
<!-- koniec tabeli z naglowkiem-->
...
Zobacz
Wysokość komórki zawierającej adres biblioteki ustawiliśmy na mniejszą wartość niż
aktualna wysokość wpisanego tam tekstu. Spowodowało to jej rozszerzenie wzwyż i nierówne
rozłożenie prostokątów na stronie. Poprawimy to podczas formatowania tekstu.
Na koniec, poniżej tabeli wpiszemy fragment treści strony. Będzie on zawierał tytuł strony
i kilka przykładowych słów. Wpiszmy:
...
<!--koniec tabeli z naglowkiem -->
Strona główna <BR>
przykładowa zawartość strony
</TD>
...
Zobacz
W kodzie wykorzystaliśmy nowy znacznik:
<BR> - jest to znacznik powodujący wstawienie wymuszonego końca wiersza.
Zastosowaliśmy go, ponieważ wciskanie klawisza Enter, podobnie jak kilkukrotne wciskanie
klawisza Spacji pomiędzy wpisywanymi wyrazami nie spowoduje żadnej zmiany na stronie, tzn.
tekst nie będzie pisany od nowej linijki, a odstęp pomiędzy wyrazami nie powiększy się.
Znacznik <BR> można wykorzystać przy tworzeniu odstępów pomiędzy elementami strony,
jego kilkukrotne wpisanie spowoduje wstawianie odpowiedniej ilości pustych wierszy.
|
