|
Lekcja 7 - utworzenie odsyłaczy i pozostałych stron witryny.
Do tej pory tworzyliśmy tylko jedną stronę przygotowywanej przez nas witryny. W tej lekcji dokończymy jej formatowanie, ustalimy wygląd napisów menu oraz utworzymy odsyłacze do pozostałych (jeszcze nie istniejących) stron, a także odsyłacz do adresu email umieszczonego w górnej części strony. Następnie utworzymy pliki, które będą pełniły rolę pozostałych stron naszej witryny. Nazwiemy je: zbiory.html, katalogi.html, czytelnictwo.html, konkursy.html, polecamy.html, linki.html.
Zaczynamy od przygotowania menu. Aby działało ono prawidłowo, tzn. po kliknięciu wybranej pozycji powodowało wyświetlenie odpowiedniej strony musimy zastosować nowy znacznik:
<A HREF="adres_strony_do_wyswietlenia">...</A> - jest to odsyłacz do strony WWW, na stronie będzie widoczny tylko napis, który będzie objęty znacznikami (w naszym przypadku trzy kropki), kliknięcie na niego spowoduje wyświetlenie strony podanej w miejscu przeznaczonym na adres strony.
Np. wpisanie w kodzie źródłowym:
<A HREF="zbiory.html">Zbiory</A>
spowoduje pojawienie się na stronie napisu: Zbiory, a po jego kliknięciu wyświetlenie pliku zbiory.html, o ile taki plik istnieje i znajduje się w tym samym folderze co nasza strona. Dodatkowo napis: Zbiory będzie podkreślony i niebieski, a po ustawieniu nad nim kursora pojawi się tzw. "łapka".
Dopiszemy teraz do tabeli z menu odpowiednie znaczniki, tak aby kliknięcie na wybraną opcję menu powodowało wyświetlenie właściwego pliku. Pliki te utworzymy później, tak więc na razie kliknięcie będzie powodować błąd.
Całość powinna wyglądać następująco:
<TABLE WIDTH="110" CELLSPACING="0" CELLPADDING="0" BORDER="0" BGCOLOR="#0415B9">
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="10" BORDER="0"></TD></TR>
<TR><TD WIDTH="110" HEIGHT="80" ALIGN="center" VALIGN="middle" BGCOLOR="#0B126B">
<IMG SRC="ksiazki.gif" WIDTH="100" HEIGHT="60" BORDER="0"></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="index.html">Strona główna</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="zbiory.html">Zbiory</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="katalogi.html">Katalogi</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="czytelnictwo.html">Czytelnictwo</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="konkursy.html">Konkursy</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="polecamy.html">Polecamy</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="20"><A HREF="linki.html">Linki</A></TD></TR>
<TR><TD><IMG SRC="1x1w.gif" WIDTH="110" HEIGHT="5" BORDER="0"></TD></TR>
<TR><TD HEIGHT="200" BGCOLOR="#0B126B"> </TD></TR>
</TABLE>
Kolor odsyłaczy jest niebieski, spowoduje to, że na niebieskim tle będą prawie niewidoczne.
Zobacz
Przystępujemy do zdefiniowania styli dla znacznika <A>, a właściwie dla klasy "menu" tego znacznika. Zrobimy to także dla jego pseudoklasy ":hover". Pseudoklasa ta definiuje wygląd odsyłacza w momencie gdy jest nad nim ustawiony kursor myszy. Przy prawidłowym określeniu stylu efektem będzie zmiana wyglądu (np. koloru) odsyłacza po najechaniu na niego myszką.
Aby zdefiniować klasę "menu" dla znacznika <A> musimy określić styl dla A.menu, natomiast w przypadku pseudoklasy ":hover" dla A.menu:hover.
Powinno to wyglądać następująco:
...
<STYLE TYPE="text/css">
<!--
A.menu {color: #FFFFFF; font-family: Arial; font-weight: bold; font-size: 12px;
text-decoration: none; margin-left: 8px}
A.menu:hover {color: #FFFF33}
P {font-family: Verdana; margin-left: 20px; font-size: 12px;}
P.baner {font-family: Arial; font-size: 28px; font-weight: bold; font-style: italic;
color: white}
P.naglowek {font-weight: bold; font-style: italic; font-size: 20px; color: #468C01;
margin-left: 40px}
P.info {font-weight: bold; font-style: normal; font-size: 10px; color: #00EEFF;
margin-right: 20px}
-->
</STYLE>
...
Jak łatwo zauważyć dla pseudoklasy ":hover" zmieniliśmy tylko kolor czcionki. Wybraliśmy odcień koloru żółtego. Pozostałe ustawienia pozostaną takie same jak dla klasy "menu".
W definicji stylu pojawił się nowy wpis:
text-decoration: none - spowoduje on usunięcie standardowego podkreślenia tekstu odsyłacza.
Aby opisane definicje zaczęły działać należy do każdego znacznika <A> w menu dodać wpis Class="menu". Np.:
...<A HREF="index.html" Class="menu">Strona główna</A>...
Zobacz
W następnej kolejności utworzymy i sformatujemy odsyłacz do adresu email. W tym celu określmy styl dla klasy info znacznika <A>. W nagłówku strony, wewnątrz znaczników definiujących style wpisujemy kolejną definicję:
...
A.info {font-weight: bold; font-style: normal; font-size: 10px; color: #00EEFF;
text-decoration: none}
...
Adres poczty Email obejmujemy znacznikami odsyłacza i przypisujemy mu utworzoną klasę:
<A HREF="mailto:biblioteka@xvilo.kozlowa.pl" Class=info>biblioteka@xvilo.kozlowa.pl</A>
Jak łatwo zauważyć odsyłacz do adresu poczty Email od odsyłacza do strony różni się tylko wpisanym tekstem
"mailto:".
Na naszej stronie nic się z pozoru nie zmieniło, ale po ustawieniu nad adresem poczty kursora myszy pojawia się
"łapka", a po kliknieciu otwiera się domyślny program pocztowy z wpisanym adresem biblioteki.
Zobacz
Dla nabrania wprawy w
tworzeniu klas możemy spróbować samodzielnie zdefiniować pseudoklasę ":hover" dla
naszego odsyłacza.
Utworzymy teraz pozostałe pliki witryny, nadamy im takie nazwy jakie wpisaliśmy wewnątrz odsyłaczy menu. Jak łatwo się zorientować wszystko co zawiera nasza strona główna (z wyjątkiem nazwy strony) powinno powtarzać się na kolejnych podstronach. Zatem aby je utworzyć nie będziemy ich pisać od nowa tylko skopiujemy stronę główną
odpowiednio zmieniając wpisaną nazwę. Możemy to zrobić następująco: jeśli mamy otwarty Notatnik, to z menu wybieramy PLIK-ZAPISZ JAKO i wpisujemy nową nazwę pliku
(odpowiednio: zbiory.html, katalogi.html, czytelnictwo.html,
konkursy.html, polecamy.html, linki.html).
W kolejnych zapisywanych stronach należy jeszcze zmienić nagłówek.
Dotychczas było "Strona główna" my zmieniamy go kolejno na "Zbiory", "Katalogi", "Czytelnictwo", "Konkursy", "Polecamy" oraz "Linki". Tak przygotowana witryna powinna już działać, tzn. kliknięcie opcji menu będzie powodować przejście do odpowiedniej podstrony.
W kolejnej lekcji zajmiemy się wypełnianiem zawartością wszystkich utworzonych stron.
|
