docLekcja 4 - Aktualności
download 
Reklamacja Transkrypt
Lekcja 4 - Aktualności
Lekcja 4: Nawigacja w serwisie Tworzenie podstron Prezentowane zadania, informacje i inne wiadomości możemy umieszczać na stronie jako linki do podstrony, które utworzymy w naszym serwisie. Na początek utworzymy na naszym komputerze folder o nazwie Mojastrona, skopiujemy do niego stronę tabela.html i nazwiemy ją teraz index.html. Jest to wymagane, gdy zechcemy ją opublikować w Internecie. Będzie to nasza główna strona serwisu. Ponieważ będziemy tworzyć więcej stron i nie chcemy miec problemów z polskimi znakami zaczniemy używać programu Zajączek. Jest to generator stron w HTML z możliwością podglądu wykonywanej strony oraz polskim kodowaniem znaków. Jego obsługa jest intuicyjna. Pobieramy program ze strony http://www.idg.pl/ftp/pobierz/pc/6707.html lub innej i zainstaluj go na swoim komputerze. Po otwarciu programu wybierz Plik-Nowy-Pusty dokument i wklej zawartość twojej strony index.html. Zmień kodowania m<meta> na: <meta http-equiv="ContentType" content="text/html; charset=iso-8859-2">. I wykonaj Plik-Zapisz.. Strona główna jest gotowa. Teraz znowu wykonaj Plik-Nowy-Pusty dokument skopiuj zawartość poprzedniej strony, ale wykasuj teksy pomiędzy znacznikami <body>. Tutaj wpiszesz zawartość nowej strony, która nazwiesz np. akual.html (można na niej zamieszczać aktualności, gdyż będzie wyświetlana bezpośrednio po otwarciu strony głównej), następną np. zadanie1.html. I tak kolejne. Każdą stronę zapisuj w folderze Mojastrona. Twój serwis może wyglądać tak: Linki do podstron Nasze podstrony będą wyświetlane w komórce tabeli, którą do tego przeznaczyliśmy. Aby to zrobić musimy użyć nowego znacznika <iframe>. W komórce wyświetlającej podstrony należy wpisać: <iframe name="okno" src="aktual.html" frameborder="0"></iframe> Natomiast w liście wypunktowanej ZADANIA dodamy odnośniki do utworzonych stron zapisując <a target="okno" href="zadanie1.html"> w znaczniku target nazwę naszej komórki „okno”(nazwa dowolna, bez polskich liter) i adres podstrony. Ponieważ jest w naszym serwisie wystarczy napisać tylko nazwę pliku np. zadanie1.html. Usuniemy także podkreślenia przy odnośnikach do stron z zadaniami stosują zapis <a style="text-decoration: none target="okno" href="zadanie1.html"> zadanie 1</a> Usuniemy na koniec ramki w tabeli za pomocą atrybutu border=”0 Przykład 16: otwieranie podstron <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> <meta name="Description" content="Tu wpisz opis zawartość strony" /> <meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> <meta name="Author" content="Tu wpisz swoje imię i nazwisko" /> <title>Strona nauczyciela</title> </head> <body> <table cellspacing=0 cellpadding=2 width=100% border="0"?> <tr height=20px> <td bgcolor="#fff9e5">Logo wysokość 100px</td> <td bgcolor="#996600">Baner</td> </tr> <tr> <td valign=top> <p align="center"> <font color="#cc0000">Ciekawe linki</font><br> </p> <a target="_blank" href="http://www.wp.pl">Wirtualna Polska</a><br> <a target="_blank" href="http://www.men.gov.pl">Ministerstwo Edukacji Narodowej</a><br> <a target="_blank" href="http://www.interia.pl">Interia</a><br> <a target="_blank" href="http://www.kurnik.pl">Kurnik-rozrywka</a><br> <a target="_blank" href="http://www.styl24.pl/twojstyl.php">Twój Styl</a><br> </td> <td rowspan="2" bgcolor=#fff9e5 valign=top align="center" width=80% ><iframe name="okno" src="aktual.html" width=94% frameborder="0"></iframe></td> </tr> <tr> <td valign=top > <font color="#cc0000">Zadania</font> <ul > <li><a style="text-decoration: none” target="okno" href="zadanie1.html"> zadanie 1</a></li> <li> <a style="text-decoration: none” target="okno" href="zadanie1.html">zadanie 2</a></li> </ul> <font color="#cc0000">Informacje</font> <ul> <li> dokument tekstowy</li> <li> prezentacja</li> <li> dokument graficzny</li> </ul> </td> </tr> <tr> <td colspan="2" height=20px valign=middle align=center > <a href="mailto:[email protected]"><font color="#336600">Napisz do autora strony</font></a></td> </tr> </table> </body> </html> Zadanie 9 Po przygotowaniu podstron skopiuj przykład 18 do strony index.html i sprawdź działanie serwisu. Po otwarciu strony index.html zobaczysz różny widok w zależności od przeglądarek: W Internet Explorer W FireFox Porada: Testując wygląd tworzonej strony musisz sprawdzać widok w co najmniej dwóch przeglądarkach. Linki do dokumentów Linki do dokumentów tworzymy identycznie jak do podstron, jako adres podajemy nazwę pliku poprzedzoną nazwą folderu, w którym się znajduje np.dokumenty/rysunek.odg. Aby zachować porządek w serwisie należy umieszczać pliki w jednym folderze np. dokumenty. Zadanie zaliczeniowe nr 4: Wykonaj działający serwis zawierający co najmniej dwie podstrony i dwa dowolne dokumenty. Spakuj jako Mojastrona.zip i wyślij. Rozwiązanie powinno wyglądać tak (otwarta podstrona zadanie2.html):
