docLekcja 5: Tworzenie planu lekcji i konsultacji
download 
Reklamacja Transkrypt
Lekcja 5: Tworzenie planu lekcji i konsultacji
Lekcja 5: Tworzenie planu lekcji i konsultacji Dodatkowe menu Do naszej tabeli dodamy jeszcze jeden wiersz, w którym umieścimy dodatkowe menu nawigacyjne do stałych stron. Przykład 17: dodatkowe menu <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=80% 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% > <table valign=”top” align="center" cellspacing=2 cellpadding=2 width=100% border="1"> <tr> <td>Plan lekcji </td> <td>Konsultacje </td> <td>Rozkład materiału </td> <td>Moja klasa </td> <tr> </table> <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 target="okno" href="zadanie1.html" style="text-decoration: none" > zadanie 1</a></li> <li> <a target="okno" href="zadanie2.html" style="text-decoration: none" >zadanie 2</a></li> </ul> <font color="#cc0000">Informacje</font> <ul> <li> <a href="dokumenty/dokument.odt">dokument tekstowy</a></li> <li> <a href="dokumenty/prezentacja.odp">prezentacja</a></li> <li> <a href="dokumenty/rysunek.odg">dokument graficzny</a></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 10 Skopiuj przykład 18. Dodaj kolor tła do nowego menu oraz odnośniki do nowych stron. Utwórz w zarysie nowe strony i dodaj je do serwisu. Powinny się otwierać w komórce „okno”. Plan lekcji jako javascript JavaScript jest językiem skryptowym interpretowanym przez przeglądarki WWW. Wykorzystując element <select> </select> można wykonać bardzo proste, rozwijane menu. Za jego pomocą wybieramy opcje dostępną z listy rozwijalnej i przekierowujemy się na odpowiednia stronę. Kod fragmentu strony z zastosowanym menu rozwijalnym: <form> <select onchange="self.location.href= this.value"> <option VALUE="strona1.html">Strona 1 </option> <option VALUE="strona2.html">Strona 2 </option> ... </select> </form> W naszym „serwisie” poszczególne strony z naszym planem zajęć będą się znajdować w folderze plan. Foldery pozwalają nam zapanować w sposób uporządkowany nad zawartością serwisu. Wiadomo, że z czasem będzie się ona rozrastać. Na naszej stronie ten fragment może wyglądać tak: Wybierz dzień tygodnia: <form> <select onchange="self.location.href=this.value"> <option VALUE=""></option> <option VALUE="plan/pon.html">Poniedziałek</option> <option VALUE="plan/wto.html">Wtorek</option> <option VALUE="plan/sro.html">Środa</option> <option VALUE="plan/czw.html">Czwartek</option> <option VALUE="plan/pia.html">Piątek</option> <option VALUE="plan/sob.html">Sobota</option> </select> </form> Efekt będzie wyglądał następująco: Przykład 18: rozwijalne menu Zadanie 11 W swoim serwisie załóż folder o nazwie plan. Utwórz w nim strony dni tygodnia (ja w powyższym przykładzie), na których przedstawisz swój plan zajęć. Dodaj do serwisu stronę o nazwie plan.html i umieść na niej rozwijalne menu. Po wybraniu dnia strona powinna otworzyć się w tym samym oknie. Plan zajęć jako tabela Plan naszych zajęć możemy wykonać również w postaci tabeli. Będzie to ćwiczenie utrwalające nasze umiejętności dotyczące konstruowania tabel. Strona może wyglądać tak: Przykład 19: plan lekcji jako tabela Zadanie zaliczeniowe nr 5: Do swojego serwisu dodaj stronę plantabela.html. Strona powinna otwierać się w naszym „oknie”.Wyślij tylko stronę index.html i plantabela.html po uprzednim spakowaniu.
