docZajęcia nr 1
download 
Reklamacja Transkrypt
Zajęcia nr 1
Zajęcia nr 7 Własna strona internetowa Na dzisiejszych zajęciach spróbujemy stworzyć od początku nową stronę internetową. Tematyką tej strony będzie Szkoła Podstawowa nr 7 w Świdniku. Przygotowanie miejsca pracy 1. W swoim folderze swtórz nowy folder o nazwie stronka 2. W nowoutworzonym folderze stwórz kolejny o nazwie grafika 3. Ściągnij ze stronki pomocnicze pliki graficzne i zapisz je w folderze grafika. (Powinny być 4 pliki: baner.png, tlo.png, ak1.jpg, sp7.jpg Tworzymy pustą stronę 1. 2. 3. 4. Otwórz Noth’a i stwórz podstawową pustą stronę CTRL+B+1 W <title> </title> wpisz tytuł naszej strony, tzn: Szkoła Podstawowa nr 7 Dołącz style zewnętrzne o nazwie style.css Zapisz plik w folderze stronka pod nazwą index.html Podział na bloki 1. W części body, stwórzmy puste pudełka: (bardzo ważne są wcięcia!!!) <body> <div id="pojemnik"> <div id="pudelko"> <div id="baner"> </div> <div id="srodek"> <div id="menu"> </div> <div id="tekst"> </div> </div> </div> </div> </body> 2. Zapisz plik Zapełnijmy pudełka 1. Zacznijmy od pudełka o nazwie menu, w tym miejscu będziemy mieć linki do stworzonych przez nas innych podstron. Pomiędzy <div…> i </div> stwórzmy listę z hiperłączami <ol> <li><a <li><a <li><a <li><a <li><a <li><a </ol> href="index.html">Strona główna</a></li> href="historia.html">Historia i patron</a></li> href="kalendarium.html">Kalendarium</a></li> href="uczen.html">Dla ucznia</a></li> href="nauczyciel.html">Dla nauczyciela</a></li> href="rodzic.html">Dla rodzica</a></li> 3. Zapisz plik 4. Pudełko tekst <h2>Witamy na stronie</h2> <h1>Szkoły Podstawowej nr 7 <br /> im. Żołnierzy Armii Krajowej w Świdniku.</h1> <hr /> <img src="grafika/sp7.jpg" alt="" align="center" /> <hr /> <h2>adres szkoły:</h2> <h3>Szkoła Podstawowa nr 7 <br/> ul. Armii Krajowej 3<br/> 21-040 Świdnik</h3> <h3>telefon - (081) 751-38-93 <br/> fax - (081) 751-38-97 </h3> <h3>skrzynka.gife-mail: [email protected]</h3> <hr /> 5. Zapisz plik Style 1. Tworzymy nowy pusty plik (biała karteczka). W tym pliku będziemy nadawać wygląd naszej stronie i od razu zapiszmy go w foderze stronka pod nazwą style.css 2. Zacznijmy od pudełek, ponieważ one określą nam podstawowe zmiany: (przepisz poniższe kody) 3. Pudełko nr I o nazwie: pojemnik; ustawienia: szerokość, rozmiar czcionki i wyśrodkowanie strony #pojemnik{ width:1000px; font-size: 18px; margin: 0 auto; } 4. Pudełko nr II o nazwie: pudelko; ustawienia: wyrównanie, szerokość, tło #pudelko{ float: left; width:1000px; background: black url('grafika/tlo.png') center top; } 5. Pudełko nr III o nazwie: baner; ustawienia: wysokość, tło #baner{ } height:200px; background: white url('grafika/baner.png') center top; 6. Pudełko nr IV o nazwie: srodek; ustawienia: szerokość, wyrównanie #srodek{ } width:1000px; float: left; 7. Pudełko nr V o nazwie: srodek; ustawienia: szerokość, wyrównanie #menu{ width:250px; float: left; } 8. Pudełko nr VI o nazwie: srodek; ustawienia: szerokość, wyrównanie, marginesy #tekst{ width:650px; float: right; margin:20px; } 9. inne ustawienia: a. hiperłącza: kolor czcionki i brak podkreślenia: a{ } color: black; text-decoration: none; b. listy: brak wypunktowania, odstępy między kolejnymi punktami i zamiana czcionki w trakcie najechania ol{ } li{ } list-style-type: none; padding:10px; a:hover,li:hover{ font-weight: bold; color: white; } c. Nagłówki: Zmiana wyrównania i rozmiaru h1{ } h2{ text-align: center; font-size: 150%; } h3{ text-align: center; font-size: 130%; } text-align: center; font-size: 110%; font-style: normal; color:#943e0a; d. Tabele: ustawienie tabeli na środku strony, zmiana kolorów, czcionek table { margin: 0 auto; } td { border: 1px solid black; background-color: #ffffb9; text-align: center; padding:10px; } th { } border: 1px solid black; background-color: white; font-weight: normal; padding:10px; 10. Zapisz plik!! Sprawdzanie 1. Otwórz za pomocą przeglądarki plik o nazwie index.html Podstrona historia.html 1. otwórz stronę index.html za pomocą NOTH’a skopiuj całą zawartość 2. Stwórz pusty plik (biała karteczka) i wklej to co skopiowałeś 3. Zapisz ten nowy plik w folderze stronka pod nazwą historia.html 4. Usuń wszystko co znajduje się w części <div id="tekst"> </div> 5. W opróżnione miejsce wpisz poniższy kod: <h1>Historia Szkoły Podstawowej <br /> im. Żołnierzy Armii Krajowej <br/> nr 7 w Świdniku</h1><hr /> <img src="grafika/ak1.jpg" alt="" align="right" /> <p> Dnia 4 października 2003 roku odbyła się uroczystość nadania Szkole Podstawowej nr 7 w Świdniku imienia żołnierzy Armii Krajowej. W tym dniu społeczność naszej szkoły przyjęła na siebie obowiązek godnego reprezentowania postaw i wartości, którymi kierowali się w swoim życiu żołnierze Armii Krajowej. </p> <p> Szkoła zakłada wychowanie ucznia odpowiedzialnego, samodzielnego w działaniu, pracowitego, kulturalnego. Ważnymi celami wychowawczymi są: życie w wolności, umiejętność wybierania i odróżniania dobra od zła, rozumienie świata, odnajdywania w nim miejsca dla siebie. Bardzo wiele można osiągnąć w wychowaniu dzieci pokazując prawdziwe, konkretne przykłady losów żołnierzy Armii Krajowej, którym bliskie były te wartości i którzy realizowali je w swoim życiu.</p> <p> Wybór takiego patrona przynosi pożytek całej społeczności szkolnej i jest wsparciem dla nauczycieli i wychowawców pracujących nad kształtowaniem postaw i charakterów uczniów naszej szkoły.</p> <p> Mamy nadzieję, że imię, które nosi nasza szkoła, będzie przypominało nam o tych, którzy oddali życie za wartości, o których obecnie się zapomina. </p> 6. Zapisz plik i zobacz swoją stronę Podstrona kalendarium.html 7. otwórz stronę index.html za pomocą NOTH’a skopiuj całą zawartość 8. Stwórz pusty plik (biała karteczka) i wklej to co skopiowałeś 9. Zapisz ten nowy plik w folderze stronka pod nazwą historia.html 10. Usuń wszystko co znajduje się w części <div id="tekst"> </div> 11. W opróżnione miejsce wpisz poniższy kod: <h1>Kalendarium na rok 2009/2010</h1> <hr /> <table> <tr> <td>1</td><td>Rozpoczęcie roku szkolnego</td><td>1 września 2009 r.</td> </tr><tr> <th>2</th><th>Dzień otwartej szkoły</th><th>5 listopada 2009 r.</th> </tr><tr> <td>3</td><td>Próbny sprawdzian w klasach 6</td> <td>Zostanie ustalony</td> </tr><tr> <th>4</th><th>Zimowa przerwa świąteczna</th> <th>23 - 31 grudnia 2009 r.</th> </tr><tr> <td>5</td><td>Ferie zimowe</td><td>15 - 28 lutego 2010 r.</td> </tr><tr> <th>6</th><th>Dzień otwartej szkoły</th><th>14 kwietnia 2010 r.</th> </tr><tr> <td>7</td><td>Wiosenna przerwa świąteczna</td> <td>1 - 6 kwietnia 2010 r.</td> </tr><tr> <th>8</th><th>Sprawdzian w klasach 6</th><th>8 kwietnia 2010 r. </th> </tr><tr> <td>9</td><td>Dni wolne od zajęć dydaktycznych</td> <td>4 czerwca 2010 r.</td> </tr><tr> <th>10</th><th>Zebrania wychowawców z rodzicami</th> <th>18 - 19 maja 2010 r.</th> </tr><tr> <td>11</td><td>Dodatkowy termin sprawdzianu</td> <td>8 czerwca 2010 r.</td> </tr><tr> <th>12</th><th>Zakończenie roku w klasach 6</th> <th>24 czerwca 2010 r. </th> </tr><tr> <td>13</td><td>Zakończenie roku w klasach 1 - 5</td> <td>25 czerwca 2010 r.</td> </tr><tr> <th>14</th><th>Ferie letnie</th> <th>26 czerwca - 31 sierpnia 2010 r. </th> </tr> </table> 12. Zapisz plik i zobacz swoją stronę 13. A teraz już możesz sam dokończyć tą stronę wg własnego pomysłu. To były już ostatnie zajęcia z POMYSŁOWEGO KLIK’a mam nadzieję, że troszeczkę pomogły Ci w szkole i życiu codziennym. Dziękuję za współpracę. Beata Zarosińska
