|
Lekcja 8 - wypełnienie witryny treścią.
W tej lekcji zajmiemy się wypełnieniem odpowiednio sformatowaną treścią wszystkich przygotowanych podstron
naszej witryny. Oczywiście przygotowana przez nas treść jest tylko przykładem i nic nie stoi na przeszkodzie
aby wpisywać swoje własne teksty. Zapisując strony musimy pamiętać o konwertowaniu tekstu na kodowanie ISO
(z menu Notatnika wybieramy: EDYCJA-KONWERSJA TEKSTU-WIN-->ISO)
Strony "Polecamy", "Zbiory" i "Katalogi".
Otwieramy plik polecamy.html. Następnie poniżej znaczników opisujących tytuł strony zamiast tekstu
"przykładowa treść strony" wpisujemy:
<P class="naglowek">Polecamy</P>
<P>Na naszej stronie chcemy umieszczać tytuły książek wraz z Waszymi recenzjami, które
warto przeczytać, które polecilibyście koleżance, koledze. Jeśli ostatnio przeczytałeś
interesującą książkę, która wywarła na Tobie duże wrażenie, zachwyciła Cię lub dostarczyła
Ci świetnej rozrywki podziel się swoimi doznaniami z innymi i ją zareklamuj.</P>
Zobacz
W plikach zbiory.html oraz katalogi.html (oraz wszystkich pozostałych) będziemy potrzebować dodatkową
klasę akapitu. Nazwiemy ją naglowek2. Zatem poniżej definicji klasy P.naglowek wpisujemy definicję:
P.naglowek2 {font-weight: bold; font-size: 14px; color: #468C01; margin-left: 60px}
Ze wszystkimi umieszczonymi powyżej definicjami formatowania już się zetknęliśmy, ale przypomnijmy jeszcze
raz, że opisują one kolejno: pogrubienie, rozmiar i kolor czcionki oraz odsunięcie tekstu od lewej krawędzi.
Przygotowaliśmy w ten sposób kolejny nagłówek. Będzie on miał ten sam kolor co nagłówek wykorzystany do
formatowania nazwy strony, ale będzie od niego mniejszy i nieco bardziej przesunięty w prawo. Wykorzystamy
go do zróżnicowania poszczególnych fragmentów treści. Po ustaleniu definicji stylu w ciele dokumentu "Zbiory"
wpisujemy:
<P class="naglowek2">Książki</P>
<P>Księgozbiór naszej biblioteki liczy 18 tys. Woluminów. W czytelni został wyodrębniony
księgozbiór podręczny w skład którego wchodzi bogaty zbiór słowników przedmiotowych i
ogólnych a także najnowsze edycje encyklopedii. Posiadamy także dużo wartościowych
pozycji z historii sztuki i historii literatury polskiej. Oprócz tego mamy dość
obszernie rozbudowany dział literatury młodzieżowej.</P>
<P class="naglowek2">Czasopisma</P>
<P>Poza tym prenumerujemy przeszło 30 tytułów czasopism. Czytelnicy mają więc do
dyspozycji szereg interesujących czasopism np.: "Perspektywy", "Cogito", "Świat Nauki",
"Wiedza i Życie", "Młody Technik", "Komputer Świat", "Mówią Wieki", "Polityka", "Gazeta
Wyborcza".</P>
<P class="naglowek2">Multimedia</P>
<P>Należy także podkreślić, iż jakiś czas temu zaczęliśmy nasz księgozbiór uzupełniać o
wydawnictwa multimedialne, głównie encyklopedie i słowniki a także programy do nauki
języków obcych. Dzięki przychylności Rady Rodziców i licznych sponsorów nasi czytelnicy
mogą korzystać z kilkudziesięciu takich wydawnictw.</P>
Po wpisaniu tej treści okaże się, że niebieski prostokąt znajdujący się w lewej części strony poniżej menu jest
"za krótki". Należy go wydłużyć odnajdując tworzącą go komórkę i zwiększyć jej wysokość do minimum 250 pikseli.
...
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="250" BGCOLOR="#0B126B"> </TD></TR>
</TABLE>
<!-- koniec tabeli menu -->
Zobacz
Wykonanie powyższych czynności musimy powtórzyć przygotowując dokument "Katalogi".
Wpisujemy:
<P class="naglowek">Katalogi</P>
<P>W naszej bibliotece czytelnicy mają do dyspozycji dwa rodzaje katalogów: alfabetyczny
i rzeczowy.</P>
<P class="naglowek2">Katalog alfabetyczny</P>
<P>Katalog ten informuje czy poszukiwana przez nas pozycja znajduje się w bibliotece.
Karty katalogowe ułożone są w nim w porządku alfabetycznym , według haseł autorskich a
w przypadku prac zbiorowych według haseł tytułowych.</P>
<P class="naglowek2">Katalog przedmiotowy</P>
<P>Katalog ten pozwala zorientować się jakie książki na interesujący nas temat znajdują
się w bibliotece. Katalog przedmiotowy porządkuje informacje o zasobach
bibliotecznych według alfabetycznie ułożonych haseł przedmiotowych. Hasłem jest przedmiot
czyli temat książki.</P>
Zobacz
Strona "Czytelnictwo"
Na stronie tej oprócz klasy P.naglowek2 musimy zdefiniować style dla
komórki <TD> oraz nowego znacznika <OL>. Zastosowanie
tego znacznika opiszemy za chwilę. Teraz wpiszemy nowe definicje styli:
...
P.naglowek2 {font-weight: bold; font-size: 14px; color: #468C01; margin-left: 60px}
...
TD {font-family: Verdana; font-size: 12px;}
OL {font-family: Verdana; margin-left: 40px; font-size: 12px;}
...
Definicje umieszczone powyżej są już nam znane. Następnie wewnątrz
ciała dokumentu wpisujemy:
<!-- tresc strony -->
<P class="naglowek">Czytelnictwo</P>
<P class="naglowek2">Stan Czytelnictwa II semestr rok szkolny 2001/2002</P>
<P><B>Najlepsi czytelnicy:</B></P>
<OL>
<LI>Anna Kowalska kl.3a - 14 wypożyczeń
<LI>Radosław Wolny kl. 4b - 12 wypożyczeń
<LI>Julia Sikorska kl.2b - 8 wypożyczeń
</OL>
...
Wyjaśnimy teraz działanie nowych znaczników:
<OL>...</OL> - znacznik umożliwiający stworzenie wykazu numerowanego.
<LI> - znacznik umożliwiający wpisanie pierwszego i kolejnych pozycji wykazu.
Znacznik ten musi być umieszczony wewnątrz znaczników <OL>...</OL>. Otwiera
on każdy kolejny punkt wykazu.
Jak widać w kodzie umieszczonym powyżej w przypadku wykorzystania tych znaczników nie ma
potrzeby wpisywania kolejnych numerów pozycji, zostaną one dodane automatycznie. Określenie w
nagłówku dokumentu stylu dla znacznika <OL> spowoduje odpowiednie formatowanie
poszczególnych
wpisów niezależnie od przeglądarki w której wykaz będzie wyświetlany. Niestety, przeglądarki
firmy Microsoft i Netscape będą różnie interpretować zdefiniowany lewy margines.
Zobacz
Wewnątrz jednego z akapitów pojawił się znacznik:
<B>...</B> - powoduje on pogrubienie objętego nim tekstu.
Jego działanie odpowiada zastosowaniu stylu "font-weight: bold".
Na naszej stronie musimy umieścić jeszcze tabelę zawierającą ranking klas. Tabelę
tę umieścimy wewnątrz znaczników:
<CENTER>...</CENTER> - znacznik ten wyśrodkowuje objętą nim treść.
Poniżej znacznika zamykającego wykaz </OL> wpisujemy:
<CENTER>
<TABLE BORDER="1">
<TR ALIGN="center"><TD>klasa</TD><TD>liczba uczniów</TD><TD>liczba wypoż. książek</TD>
<TD>średnia wypożyczeń</TD><TD>miejsce</TD></TR>
<TR ALIGN="center"><TD>1a</TD><TD>28</TD><TD>82</TD><TD>2,93</TD><TD>8</TD></TR>
<TR ALIGN="center"><TD>1b</TD><TD>27</TD><TD>103</TD><TD>3,81</TD><TD>7</TD></TR>
<TR ALIGN="center"><TD>2a</TD><TD>30</TD><TD>186</TD><TD>6,20</TD><TD>5</TD></TR>
<TR ALIGN="center"><TD>2b</TD><TD>27</TD><TD>104</TD><TD>3,85</TD><TD>6</TD></TR>
<TR ALIGN="center"><TD>3a</TD><TD>29</TD><TD>222</TD><TD>7,66</TD><TD>4</TD></TR>
<TR ALIGN="center"><TD>3b</TD><TD>30</TD><TD>302</TD><TD>10,07</TD><TD>3</TD></TR>
<TR ALIGN="center"><TD>4a</TD><TD>28</TD><TD>346</TD><TD>12,36</TD><TD>2</TD></TR>
<TR ALIGN="center"><TD>4b</TD><TD>30</TD><TD>370</TD><TD>12,33</TD><TD>1</TD></TR>
</TABLE>
</CENTER>
Można zauważyć, że w przypadku tej tabeli nie wpisaliśmy parametrów:
CELLSPACING oraz CELLPADDING. Takie
działanie spowoduje ustalenie ich wartości na domyślą wielkość "2", nie wpisywaliśmy też szerokości
tabeli (WIDTH), dostosuje się ona automatycznie do szerokości wpisanego tekstu. Na
zakończenie formatowania strony, podobnie jak zrobiliśmy to w przypadku pliku zbiory.html
należy zwiększyć wysokość niebieskiego prostokąta znajdującego się poniżej menu.
Strona "Linki"
Na stronie "Linki" musimy dopisać identyczne jak na stronie "Czytelnictwo"
definicje stylu dla klasy P.nagłówek2 oraz dla znacznika <OL>.
...
P.naglowek2 {font-weight: bold; font-size: 14px; color: #468C01; margin-left: 60px}
...
OL {font-family: Verdana; margin-left: 40px; font-size: 12px;}
...
Jako kolejne punkty wykazów będziemy wpisywać odsyłacze do stron internetowych z wybranego działu.
<P class="naglowek2">Encyklopedie</P>
<OL>
<LI><A HREF="http://wiem.onet.pl/wiem">wiem.onet.pl/wiem</A> encyklopedia WIEM
<LI><A HREF="http://www.encyklopedia.wp.pl">www.encyklopedia.wp.pl</A> internetowa
encyklopedia PWN
<LI><A HREF="http://encyklopedia.interia.pl">encyklopedia.interia.pl</A> encyklopedia
internautica
</OL>
<P class="naglowek2">Słowniki</P>
<OL>
<LI><A HREF="http://slowniki.onet.pl/index.html?tr=pol-slo">
slowniki.onet.pl/index.html?tr=pol-slo</A> słowniki języka polskiego (wyrazów
bliskoznacznych, ortograficzny, wyrazów obcych, frazeologiczny i inne)
<LI><A HREF="http://www.slownik-online.pl/index.php">www.slownik-online.pl/index.php</A>
Słownik wyrazów obcych i zwrotów obcojęzycznych
<LI><A HREF="http://www.wiw.pl/informatyka/slownik/Haslo.asp">
www.wiw.pl/informatyka/slownik/Haslo.asp</A> słownik komputerowy angielsko-polski
<LI><A HREF="http://www.wiw.pl/fizyka/slowniki/jednostki.asp">
www.wiw.pl/fizyka/slowniki/jednostki.asp</A> słowniczek jednostek fizycznych
<LI><A HREF="http://www.wiw.pl/fizyka/slowniki/PrawaZasady.asp">
www.wiw.pl/fizyka/slowniki/PrawaZasady.asp</A> słowniczek praw i zasad fizycznych
<LI><A HREF="http://www.leksykony.pl">www.leksykony.pl</A> zbiór leksykonów
</OL>
Istotnym szczegółem przy wpisywaniu odsyłacza do strony WWW jest konieczność umieszczenia w adresie
strony określenia protokołu: http://. Wyjaśnienia wymaga też brak zdefiniowania
stylu dla znacznika <A>. Mimo to, jak zauważymy tekst odsyłaczy jest sformatowany
(wielkość i krój czcionki), wynika to z tego, że odsyłacze są umieszczone wewnątrz znacznika
<OL> i można powiedzieć, że dziedziczą określony dla niego styl.
Zobacz
Strona "Konkursy"
Na stronie tej oprócz klasy P.naglowek2 musimy zdefiniować styl dla nowego
znacznika <UL>. Zastosowanie tego znacznika wyjaśnimy poniżej.
Wpiszemy teraz nowe definicje styli:
...
P.naglowek2 {font-weight: bold; font-size: 14px; color: #468C01; margin-left: 60px}
...
UL {font-family: Verdana; margin-left: 40px; font-size: 12px;}
...
Znacznik
<UL>...</UL> - umożliwia utworzenie wykazu nieuporządkowanego (wypunktowania).
Ma on działanie zbliżone do działania znaczka <OL> i podobnie jak w jego
przypadku do tworzenia poszczególnych
elementów wykazu musimy użyć znacznika <LI>.
W treści strony wykorzystamy omówiony już znacznik <B> oraz
<I>...<I> - znacznik powodujący pochylenie (kursywa) objętego nim tekstu.
W naszym przypadku tekst objęty jednocześnie znacznikiem <B> oraz
<I> będzie oczywiście jednocześnie pogrubiony i pochylony.
Wpisujemy:
<P class="naglowek">Konkursy</P>
<P Class="naglowek2">Uwaga!</P>
<P>Rozpoczynamy Konkurs Literacki trwający przez cały rok szkolny. Wszystkich chętnych,
odważnych a także chcących zgłębić tajniki literatury polskiej i nie tylko zapraszamy
do wspólnej zabawy.
<BR><BR>
Zasady konkursu:</P>
<UL>
<LI>w konkursie mogą brać udział wszyscy uczniowie naszej szkoły,
<LI>każdego miesiąca będzie podawana nowa zagadka literacka (jednego miesiąca będzie to
zdanie zaczynające utwór, drugiego miesiąca będzie to cytat z dowolnej części utworu),
<LI>odpowiedzi wraz z imieniem i nazwiskiem oraz klasą można przynosić bezpośrednio do
biblioteki szkolnej, bądź przysyłać na adres
<A HREF="mailto:biblioteka@xvilo.kozlowa.pl">biblioteka@xvilo.kozlowa.pl</A>
<LI>co miesiąc wśród prawidłowo podanych odpowiedzi rozlosujemy nagrodę książkową.
</UL>
<P class=naglowek2>ZAGADKA LITERACKA NR 1</P>
<P>Podaj tytuł oraz imię i nazwisko autora utworu, który rozpoczyna się następującym
zdaniem:
<BR><BR>
<B><I>"Wszystkie szczęśliwe rodziny są do siebie podobne,
każda nieszczęśliwa rodzina jest nieszczęśliwa na swój sposób"</I></B>
<BR><BR>
Podpowiadamy: Jest to powieść z kręgu klasyki literatury rosyjskiej.<BR>
Na odpowiedzi czekamy do końca września. Uroczyste rozwiązanie pierwszej zagadki
połączone z losowaniem książki odbędzie się 5-go października na dużej przerwie
w czytelni. Nazwiska wszystkich, którzy podadzą prawidłowe odpowiedzi zamieścimy na
naszej stronie.<BR>
Życzymy powodzenia!!!</P>
W powyższym kodzie pojawił się odsyłacz do adresu Email. Mimo, że nie przypisaliśmu mu żadnego
formatowania, jego tekst ma ustaloną wielkość i czcionkę. Jest to spowodowane
(podobnie jak poprzednio) dziedziczeniem stylu od znacznika <UL>.
Zobacz
Podobnie jak w dwóch z opisanych już stron musimy jeszcze zadbać o odpowiednią wysokość niebieskiego prostokąta.
"Strona Główna"
W nagłówku strony dopisujemy następujące definicje styli:
...
P.naglowek2 {font-weight: bold; font-size: 14px; color: #468C01; margin-left: 60px}
...
TD {font-family: Verdana; font-size: 12px;}
...
Do wpisania godzin otwarcia biblioteki użyjemy tabeli bez obramowania odsuniętej od lewej krawędzi poprzez
wstawienie do niej dodatkowej kolumny z pustymi komórkami o szerokości 200 pikseli. Pozostałe formatowania będą
podobne do wykorzystanych wcześniej.
Wpisujemy kod:
<P class="naglowek">Strona główna</P>
<P class="naglowek2">Godziny otwarcia:</P>
<TABLE BORDER="0">
<TR><TD WIDTH="200"></TD><TD>Poniedziałek</TD><TD>8.00 - 16.00</TD></TR>
<TR><TD></TD><TD>Wtorek</TD><TD>8.00 - 16.00</TD></TR>
<TR><TD></TD><TD>Środa</TD><TD>8.00 - 15.00</TD></TR>
<TR><TD></TD><TD>Czwartek</TD><TD>9.00 - 16.00</TD></TR>
<TR><TD></TD><TD>Piątek</TD><TD>8.00 - 14.00</TD></TR>
</TABLE>
<P class="naglowek2">Do wszystkich uczniów naszej szkoły!</P>
<P>Jeśli masz dużo pomysłów, trochę wolnego czasu, Jesteś operatywny, lubisz robić coś
twórczego, nie zwlekaj, zgłoś się do nas.<BR>
Zapraszamy Cię do współpracy z nami przy redagowaniu strony szkolnej biblioteki. Może
dzięki Tobie na tej stronie pojawi się nowy interesujący dział, może swoimi pomysłami
zainspirujesz innych.<BR>
Czekamy na Ciebie w bibliotece szkolnej.</P>
Na stronie głównej powinno umieszczać się informacje o dacie ostatniej aktualizacji witryny.
My wpiszemy tę informację wewnątrz drugiego od góry niebieskiego prostokąta. W tym celu musimy
odnaleźć odpowiednią komórkę tabeli oraz zastosować klasę P.info.
...
<TR><TD HEIGHT="20" BGCOLOR="#0B126B" ALIGN="right"><P class="info">ostatnia
aktualizacja: 05.09.2002r.</P></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="655" HEIGHT="5" BORDER="0"></TD></TR>
</TABLE>
<!-- koniec tabeli z naglowkiem -->
Na koniec ustalamy odpowiednią wysokość niebieskiego prostokąta.
|
