|
Lekcja 4 - tabela menu i wstawianie grafik.
Zajmiemy się teraz przygotowaniem części strony będącej menu nawigacyjnym całej witryny
biblioteki.
Strukturę menu utworzymy przy pomocy kolejnej tabeli, którą umieścimy wewnątrz jednej z
komórek tabeli głównej. Wykorzystamy także ściągnięte wcześniej pliki graficzne. Aby mieć
możliwość wstawiania grafiki na stronę musimy poznać nowy znacznik:
<IMG SRC="nazwa_pliku"> - znacznik odpowiadający za wstawianie grafiki na stronę WWW.
Parametry:
WIDTH- parametr ustalający szerokość wstawionej grafiki, podanie wartości innej niż
rzeczywista szerokość obrazka spowoduje jego zwężenie lub rozciągnięcie.
HEIGHT - parametr ustalający wysokość wstawionej grafiki, podanie wartości innej niż
rzeczywista wysokość obrazka spowoduje jego deformację.
PRZYKŁADY:
WIDTH="100"
HEIGHT="60" |
WIDTH="150"
HEIGHT="60" |
WIDTH="50"
HEIGHT="100" |
 |
|
|
BORDER - parametr ustalający szerokość obramowania zewnętrznego wstawionego obrazka.
PRZYKŁADY:
| BORDER="0" |
BORDER="1" |
BORDER="10" |
|
|
|
|
Pominięcie parametrów WIDTH i HEIGHT może spowodować, że elementy strony w trakcie
stopniowego ładowania grafiki będą się przesuwać. Efekt ten jest bardzo nieelegancki i
należy go unikać. Stosowanie powyższych znaczników ma także inne zalety, przy ich pomocy
możemy (w ograniczonym zakresie) z małego obrazka zrobić duży. Ma to duże znaczenie dla
szybkości wyświetlania naszej strony, ponieważ im mniejszy plik tym szybciej się ładuje i
szybciej wyświetla. W tej lekcji będziemy wstawiać plik będący białym prostokątem o
wymiarach 1x1 piksel i poprzez odpowiednie ustalenie parametrów rozciągać go do wymiarów
110x5 pikseli.
Zaczynamy tworzenie tabeli menu. Ustawiamy się wewnątrz komórki z napisem "Tu będzie menu",
usuwamy ten napis i tworzymy nową tabelę. Tabela ta w przeciwieństwie do tabeli głównej
będzie miała wiele wierszy, ale w każdym z nich będzie tylko jedna komórka. Ustalamy jej
parametry w sposób podany poniżej. Parametr BGCOLOR="#0415B9" ustala niebieski kolor tła
całej tabeli. Parametr WIDTH wpisany w znaczniku otwierającym tabelę ustali jej szerokość,
a tym samym szerokość wszystkich jej komórek, więc wpisywanie tego parametru wewnątrz
znaczników <TD> nie będzie potrzebne. Wpisujemy także napisy, które będą tworzyły menu, ze
względu na ich czarny kolor będą na razie słabo widoczne.
Całość powinna wyglądać następująco:
...
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" TOPMARGIN="0"
MARGINWIDTH="0" MARGINHEIGHT="0">
<TABLE BORDER="1" CELLSPACING="0", CELLPADDING="0" WIDTH="780">
<TR>
<TD WIDTH="5"></TD>
<TD WIDTH="110" VALIGN="top">
<!-- poczatek tabeli menu-->
<TABLE WIDTH="110" CELLSPACING="0" CELLPADDING="0" BORDER="1" BGCOLOR="#0415B9">
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="10" BORDER="0"></TD></TR>
<TR><TD HEIGHT="80"></TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20" >Strona główna</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Zbiory</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Katalogi</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Czytelnictwo</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Konkursy</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Polecamy</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="20">Linki</TD></TR>
<TR><TD></TD></TR>
<TR><TD HEIGHT="200"> </TD></TR>
</TABLE>
<!-- koniec tabeli menu-->
</TD>
<TD WIDTH="5"></TD>
<TD WIDTH="655" VALIGN="top">Tu będzie treść</TD>
<TD WIDTH="5"></TD>
</TR>
</TABLE>
</BODY>
...
Zobacz
W powyższym kodzie pojawiły się wpisy zawierające komentarz. Znaczniki komentarza wyglądają
następująco:
<!-- znacznik otwierający komentarz,
--> znacznik zamykający komentarz.
Tekst znajdujący się pomiędzy tymi znacznikami nie jest interpretowany przez przeglądarkę,
a tym samy nie będzie wyświetlany na stronie. Znaczniki komentarza będziemy wykorzystywać
do opisywania pewnych partii kodu w celu łatwiejszego ich odnajdywania.
W jednej z komórek wpisaliśmy tekst jest to tzw. twarda spacja. Wpisaliśmy ją, aby
komórka była niepusta i prawidłowo wyświetlana w niektórych wersjach przeglądarek.
Uzupełnimy teraz naszą tabelę o grafiki, które będą pełnić rolę odstępów (w pionie)
pomiędzy poszczególnymi komórkami menu, a także odsuwać je od górnej krawędzi strony. W
tym celu musimy wewnątrz wybranych komórek (pierwszej i pomiędzy opcjami menu) wstawić
znacznik odpowiedzialny za wyświetlenie pliku graficznego i odpowiednio rozciągnąć
wstawiany obrazek nadając mu szerokość równą szerokości tabeli i ustaloną wysokość.
Wiersze zawierające ten znacznik powinny wyglądać następująco:
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="10" BORDER="0"></TD></TR>
a cała tabela tworząca menu tak:
...
<TABLE WIDTH="110" CELLSPACING="0" CELLPADDING="0" BORDER="1"
BGCOLOR="#0415B9">
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="10" BORDER="0"></TD></TR>
<TR><TD HEIGHT="80"></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20" >Strona główna</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Zbiory</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Katalogi</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Czytelnictwo</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Konkursy</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Polecamy</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20">Linki</TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="200"> </TD></TR>
</TABLE>
...
Zobacz
Do komórki w drugim wierszu tabeli wstawimy teraz rysunek przedstawiający książki, w tym celu
musimy wewnątrz jej znaczników wpisać:
<IMG SRC="ksiazki.gif" WIDTH="100" HEIGHT="60" BORDER="0">
a do znacznika <TD> dodać parametry opisujące wyrównanie jego zawartości:
<TD HEIGHT="80" ALIGN="center" VALIGN="middle">
Te dwa parametry spowodują wyśrodkowanie rysunku wewnątrz komórki w poziomie i pionie.
Zmienimy jeszcze kolor tła komórek w drugim i ostatnim wierszu naszej tabeli na granatowy.
W tym celu wewnątrz odpowiednich znaczników <TD> dopisujemy parametr BGCOLOR:
<TD HEIGHT="80" ALIGN="center" VALIGN="middle" BGCOLOR="#0B126B">
...
<TD HEIGHT="200" BGCOLOR="#0B126B">
Możemy także wyzerować parametr BORDER w tabeli głównej i tabeli menu.
Zobacz
|
