PROJEKT STRONY WWW KW GOPŁO KRUSZWICA Uniwersytet Mikołaja Kopernika w Toruniu Wydział Fizyki, Astronomii i Informatyki Stosowanej Podyplomowe Studium Programowania i Zastosowań Komputerów Robert Januszek PROJEKT STRONY WWW KW GOPŁO KRUSZWICA Praca wykonana pod kierunkiem dr Mariusza Piwińskiego Toruń 2010
CEL PROJEKTU Stworzenie strony internetowej klubu wioślarskiego Gopło Kruszwica. Prezentacja osiągnięć sportowych zawodników klubu. Przedstawienie historii klubu. Promocja wioślarstwa w Polsce. Promocja miasta Kruszwicy.
PROGRAMY WYKORZYSTANE DO BUDOWY STRONY Edytor stron WWW: EzHTML, Ked2. Programy graficzne: Gimp, Inkscape, Paint,Swich. Program FTP: FileZilla. Program do kompresji: 7-Zip. Edytor CSS: TopStyle Lite. Przeglądarka: Internet Explorer.
DO PRZYGOTOWANIA STRONY WYKORZYSTAŁEM: Język HTML. Style kaskadowe CSS. Język skryptu Java. Język PHP. Projekty flash. Grafikę wektorową.
STRUKTURA SERWISU:
STRONA STARTOWA index.html <!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <head> <title>KW Gopło Kruszwica</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> <meta name="keywords" content="kw goplo,gopło,klub wioslarski,kruszwica,rowing,januszek,sport,wio¶larze,gopło_kruszwica"/> <meta name="Description" content="Strona klubu wioslarskiego Gopło Kruszwica"/> <meta name="Author" content="Januszek Robert"/> <meta name="Copyright" content="Robert Januszek"/> <meta name="Language" content="pl"/> <meta name="robots" content= "index,follow" /> <link rel="shortcut icon"href="klub.ico"> </head> <FRAMESET ROWS="20%,*" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="banner" NORESIZE SCROLLING="no" FRAMEBORDER="0" SRC="baner/baner.html"> <FRAMESET COLS="18%,*,15%" BORDER="0" FRAMEBORDER="0" FRAMESPACING="0"> <FRAME NAME="lewa" NORESIZE FRAMEBORDER="0" SRC="lewa/lewa.html"> <FRAME NAME="centrum" NORESIZE FRAMEBORDER="0" SRC="centrum/centrum.php"> <FRAME NAME="prawa" NORESIZE FRAMEBORDER="0" SRC="prawa/prawa.html"> </FRAMESET> </HTML> Zastosowanie ikony w adresie przeglądarki Strona oparta na ramkach
STYL KASKADOWY CSS W SERWISIE body { background-color:#f7f7f7; border-top: thin; } #podswietlanietabeli { padding: 0px 0px 0px 0px; MARGIN-BOTTOM: 10px; #podswietlanietabeli UL { PADDING-BOTTOM: 10px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 10px #podswietlanietabeli LI { BORDER-BOTTOM: #fffffb 3px solid; MARGIN: 0px; BORDER-TOP: #fffffb 3px solid; MARGIN: 0px #podswietlanietabeli LI A { FONT-WEIGHT: bold; TEXT-DECORATION: none #podswietlanietabeli LI A#normal { BORDER-LEFT: #8080ff 10px solid; BACKGROUND-COLOR: #d7d7ff; PADDING-BOTTOM: 10px; PADDING-LEFT: 15px; DISPLAY: block; WHITE-SPACE: nowrap; COLOR: blue; BORDER-RIGHT: #8080ff 10px solid; PADDING-TOP: 5px #podswietlanietabeli LI A#normal:hover { BORDER-LEFT: blue 10px solid; BACKGROUND-COLOR: #8080ff; COLOR: white; BORDER-RIGHT: blue 10px solid; Style CSS zewnętrzne Zmieniające kolor listy, Podświetlające napisy
SZYBKIE WYSZUKIWARKI W JĘZYKU HTML <table> <tr> <td><form name="lista linki"> <select name ="lista"> <option value=none>Szybkie wyszukiwanie <option value=none>---------------------------- <option value="http://www.pkol.pl/pl/" target="_blank">Polski Komitet Olimpijski <OPTION VALUE="http://www.pztw.org.pl" target="_blank">PZTW <OPTION VALUE="http://www.msport.gov.pl/sport" target="_blank">Ministerstwo Sportu i Turystyki <OPTION VALUE="http://www.wioslarstwo.poznan.pl/" target="_blank">Zgłoszenia do regat <OPTION VALUE="http://www.wioslarstwo.com.pl/" target="_blank">Wio¶larstwo com <OPTION VALUE="http://www.kruszwica.org/" target="_blank">Kruszwica.org <OPTION VALUE="http://www.uksslowak.republika.pl" target="_blank">UKS Słowak <OPTION VALUE="http://pl.wikipedia.org/wiki/Wio¶larstwo " target="_blank"> Wikipedia <OPTION VALUE="http://www.myspace.com/skuund" target="_blank">Zespół Skuund </select> <input type="submit" value="Wyszukaj" onClick="top.location.href=this.form.lista.options[this.form.lista.selectedIndex].value"> </form> </td> <td><form action="http://www.google.pl/search" method="get"> <input type="hidden" name="ie" value="iso-8859-2" /> <input type="text" name="q" /> <input type="submit" value="Szukaj Google" />
LOGOWANIE WE FLASHU Prosty skrypt logowania we flashu : on (press) // jeśli naciśniesz lewy przycisk myszy na napis „Zaloguj” { if(user=="login" and password=="hasło…") //jeśli podasz login i hasło { getURL("strona.html", ""); } //przejdź na stronę .html else { user=""; password=""; } //inaczej pozostań na stronie logowania } on (keyPress("<Enter>")) //po podaniu poprawnego hasła i loginu możesz nacisnąć enter i przejść do nowej strony
FORMULARZ W PROJEKCIE: <table align="center" border="5" style="width: 666px"> <tr><td> <form method="post" action="wyslij.php" name="kontakt" style="width: 384px„><div style="width: 381px" class="style2"> <label for="nick"><b>Nazwisko: </label><br> <input type="text" class="text" id="nick" name="nick" style="width: 320px„></div> <div style="width: 380px"><label for="temat">Temat : </label><br> <input type="text" name="temat" class="text" id="temat" style="width: 320px„></div> <div style="width: 380px"><label for="mail">Twój adres e-mail: </label><br> <input type="text" name="mail" class="text" id="mail" style="width: 320px„></div> <div style="width: 384px"><label for="tresc">Zadaj pytanie: </label><br> <textarea name="tresc" id="tresc" rows="5" style="width: 320px" ></textarea> </div> <br><div><input type="submit" value="Wyślij list" /></div> </form></td></tr></table> <?php if (!nick || !mail || !temat || !tresc) //jeśli wartość nick.mail,temat,tresc w komórce jest pusta wydrukuj na ekranie napis "Nie uzupełniłeś wszystkich rubryk." { echo "Nie uzupełniłeś wszystkich rubryk."; exit; } $wiadomosc = "Imie: ".$_POST['nick']." e- mail: ".$_POST['mail']." // zmienna o nazwie wiadomosc składa się z wartość tablicy Imie +zmienna nick+tablica e-mail+zmienna mail (POST określa metodę protokołu wysyłania danych) Temat: ".$_POST['temat']."Tresc: ".$_POST['tresc']." "; //ządanie do serwera wyslij zmienną temat +tresc. $tematyka = "Poczta formularz. ".$temat; //zmienna „tematyka” jest to: wartość „Poczta formularz” sparowana ze zmienną „temat” mail ("e-mail odbiorcy", $tematyka, $wiadomosc ); // mail złożony jest ze zmiennej tematyka oraz wiadomości echo "Dziękujemy za e-mail."; //po wysłaniu wydrukuj tekst „Dziękujemy za e-mail” ?>
ANIMACJA FLASH W SERWISIE www.kwgoplokruszwica/wioslarstwo.html Animacja wiosłowania flash w komercyjnym programie Swish Max3. Tempo klatek to 25 na sekundę. Ruch pojedynczych części obrazu ustawiony na ruch cykliczny według ścieżki ruchu (efektu ruchu). Sterowanie elementami obrazu uzyskałem poprzez zastosowanie efektu „przesuń”. Do obrotu pióra wiosła wykorzystałem efekt transformacji obiektu i przekształceń. Plik flash zapisałem w formacie swf.
Style wewnętrzne CSS sterujące kolorem obramowania fotek GALERIA SPORTOWCÓW: <style> <!-- .mouseBeOffMe { border-top: 10px solid whitesmoke; border-bottom: 10px solid whitesmoke; border-left: 6px solid silver; border-right: 10px solid silver; } .mouseBeOnMe { border-top: 6px solid tomato; border-bottom: 14px solid tomato; border-left: 10px solid gold; border-right: 6px solid gold; .mouseBeDown { border-top: 13px solid #FFFFFF; border-bottom: 7px solid #FFFFFF; border-left: 10px solid #FFFFFF; border-right: 6px solid #FFFFFF; .mouseBeUp { border-top: 10px solid #FFFFFF; border-bottom: 10px solid #FFFFFF; //--> </style> Style wewnętrzne CSS sterujące kolorem obramowania fotek <a href=„nazwapliku.html"> <img src = „ścieżka do pliku/nazwapliku.jpg" title = "Mistrzostwa Polski Opis słowny wyświetlany po najechaniu kursora” width = "70" height = "70" border = "0" class = "mouseBeOffMe" onmouseover = "this.className='mouseBeOnMe'" onmousedown = "this.className='mouseBeDown'" onmouseup = "this.className='mouseBeUp'" onmouseout = "this.className='mouseBeOffMe'"> </a> Wstaw zdjęcie oraz pokaż tytuł i zmieniaj obramowania po najechaniu myszki itp..
PODSUMOWANIE: Projekt strony internetowej klubu Gopło Kruszwica ma promować sport, wioślarstwo, dostarczać wiedzy historycznej oraz szkoleniowej. Czy zrealizowałem to zamierzenie ? www.kwgoplokruszwica.pl Pragnę podziękować Panu dr Mariuszowi Piwińskiemu za pomoc merytoryczną i wyrozumiałość.