INTERNET i PROJEKTOWANIE STRON WWW LABORATORIUM 1. prowadzący dr ADRIAN HORZYK http://home home.agh.edu.pl/~ /~horzyk e-mail: horzyk@agh agh.edu.pl tel.: 012-617 617-4319 Konsultacje paw. D-13/325D
ZBUDOWANIE STRONY BIURA PODRÓŻY Korzystając z materiałów z wykładu proszę o: Zbudowanie menu serwisu (menu.html) Kilku stron ofert biura (ofertax.html) Zbudowanie strony opisującej firmę (firma.html) Dodanie układu ramek (index.html) Dodanie arkusza stylów (style.css) Opublikowanie w Internecie (przez FTP) Zapisanie sobie strony na swoim koncie FTP lub pen-drive, żeby można było stronę wykorzystać na następnych zajęciach!
ZBUDOWANIE MENU SERWISU 1. Wykorzystanie tabel do zbudowania menu Można wykorzystać kreator tabel lub stworzyć tabelę wg poniższego wzoru: <TABLE> <TR> <TD ROWSPAN= 2 >Wczasy nad morzem</td><td> Bałtyk </TD></TR> <TR> <TD> Adriatyk </TD></TR> <TR> <TD ROWSPAN= 3 > Wczasy w górach </TD><TD> Beskidy </TD></TR> <TR> <TD> Bieszczady </TD></TR> <TR> <TD> Tatry </TD></TR> </TABLE> 2. Dodanie odnośników hipertekstowych do poszczególnych pozycji menu, np.: <A HREF= Adriatyk.html > Adriatyk </A> 3. Można pokolorować pozycje tabeli, zmienić marginesy, tło itp. (wiz. wykład) 4. Menu serwisu zapisujemy w pliku menu.html
ZBUDOWANIE STRON Z OFERTAMI 1. Stworzenie nowych plików (np. Adriatyk.html) 2. Przygotowanie ofert biura podróży w związku z wyjazdem np. nad Adriatyk 3. Zatytułowanie oferty z wykorzystaniem nagłówków np.: <H1> OFERTA WYJAZDU NAD ADRIATYK </H1> 4. Ściągnięcie z Internetu zdjęć Adriatyku i umieszczenie ich w ofercie np.: <IMG SRC= ZdjęcieAdriatyku1.gif > 5. Wymienienie szczegółów, zalet, warunków, ceny itp. danej oferty z wykorzystaniem wykazów punktowanych lub numerowanych np.: <UL> <LI> Cena wynosi od 2540zł od osoby </LI> </UL> 6. Można wykorzystać wykazy zagnieżdżone i budować rozbudowane wykazy, np.: <UL> <LI> CENA: <UL> <LI> w hotelu wynosi 2540zł </LI> <LI> w domku wynosi 1980zł</LI> </UL> </LI> </UL> 7. Zmiana formatu wyświetlanych elementów, np.: <UL TYPE=circle> 8. Rozmieszczenie elementów oferty na ekranie z wykorzystaniem tabel 9. Wykorzystanie odnośników hipertekstowych do przedstawienia stron w Internecie opisujących dane miejsce, np.: <A HREF= Adriatyk.html > Adriatyk </A> 10. Dodanie tabel, paragrafów, zdjęć itp. z dodatkowymi informacjami...
DODANIE UKŁADU RAMEK 1. Dodanie układu ramek korzystając z kreatora lub wpisując bez niego: <!doctype html public "-//w3c//dtd html 4.01 frameset//en" "http://www.w3.org/tr/html4/frameset.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> </head> <frameset cols="100,*"> <frame name="menu" src="menu.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"> <frameset rows="77,*"> <frame name="firma" src="firma.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"> <frame name="oferty" src="adriatyk.html" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto"> <noframes>niestety, Twoja przeglądarka nie obsługuje ramek lub ich obsługa została wyłączona. Sugerujemy włączenie obsługi ramek lub zainstalowanie nowszej wersji przeglądarki. Tymczasem możesz zajrzeć na stronę w wersji bez ramek, która znajduje się <a href="http://...">tutaj</a>. Zapraszamy! </noframes> </frameset> <noframes>niestety, Twoja przeglądarka nie obsługuje ramek lub ich obsługa została wyłączona. Sugerujemy włączenie obsługi ramek lub zainstalowanie nowszej wersji przeglądarki. Tymczasem możesz zajrzeć na stronę w wersji bez ramek, która znajduje się <a href="http://...">tutaj</a>. Zapraszamy! </noframes> </frameset> </html> 2. Zapisanie układu ramek w pliku index.html
DODANIE ARKUSZA STYLÓW 1. Dodanie stylu jako atrybutu znacznika: <p style= font-family: sans-serif ; color: red; font-size: 16pt > zawartość paragrafu </p> 2. Dodanie stylów w nagłówku dokumentu: <head> <style type= text/css > selektor { właściwość: wartość; inna-właściwość: inna-wartość } body {font-family: Arial, Helvetica; font-size: 12pt} ul {font-family: Times New Roman, Times} p { font-family: sans-serif ; color: red; font-size: 16pt} </style> </head> 3. Dodanie zebranych stylów w oddzielnym pliku style.css: selektor { właściwość: wartość; inna-właściwość: inna-wartość } p { font-family: sans-serif ; color: red; font-size: 16pt } <head> i dołączenie go do nagłówka dokumentu, w którym style mają być zastosowane: <link rel="stylesheet" href= style.css"> <!-- wersja dla HTML --> </head>
ZASTOSOWANIE KLAS STYLÓW Jeśli chcemy zdefiniować kilka różnych stylów na stronie dla jednego znacznika warto się posłużyć klasami stylów, tworząc np.: <head> <style> h1.czerwony { color: red } h1.zielony { color: green } h1.niebieski { color: blue } </style> </head> <body> <h1>nagłówek ten jest w kolorze domyślnym</h1> <h1 class= czerwony >Nagłówek ten jest w kolorze czerwonym.</h1> <h1 class= zielony >Nagłówek ten jest w kolorze zielonym.</h1> <h1 class= niebieski >Nagłówek ten jest w kolorze niebieskim.</h1> </body> Przecinek służy do oddzielania poszczególnych wartości danej właściwości stylu, zaś średnik do oddzielania poszczególnych właściwości stylów.
STWORZENIE KLAS STYLÓW DLA <P> Analogicznie możemy sobie zdefiniować klasy stylów dla różnych typów paragrafów następująco: następująco: <style> p.glowny { font-family: Times New Roman; font-size: 14pt } p.notka { font-family: Arial, Helvetica; font-size: 10pt } </style> wtedy w tekście zmieniamy styl elementu <p> poprzez zmianę jego atrybutu klasy: <p class= glowny >...</p> <p class= notka >... </p> Można też stworzyć klasę uniwersalną, która nie jest przypisana żadnemu konkretnemu znacznikowi i przypisana żadnemu konkretnemu znacznikowi i może być zastosowana w każdym elemencie na ana żadnemu konkretnemu znacznikowi i może być zastosowana w każdym elemencie na stronie, np.: a w każdym elemencie na stronie, np.: m elemencie na stronie, np.: le> l, Helvetica; font-size: 10pt } ca; font-size: 10pt }
OPUBLIKOWANIE STRON W INTERNECIE 1. Korzystając z WinSCP lub TotalComandera połączyć się ze swoim kontem za pośrednictwem swojego loginu i hasła otrzymanego na zajęciach z UNIXa 2. W katalogu głównym swojego konta stworzyć folder o nazwie public_html 3. Do w/w katalogu przegrać wszystkie pliki. 4. Uruchomić Windows Internet Explorer 5. W oknie przeglądarki wpisać nazwę swojego konta wraz z adresem sieciowym, np. http://hyper.ia.agh.edu.pl/~nazwakonta 6. Sprawdzić, czy serwis działa prawidłowo 7. Poprawić działanie serwisu poprzez uzupełnienie i upiększenie dodatkowych elementów...
ZAPISANIE SOBIE STRONY! Proszę o zapisanie sobie strony na swoim koncie FTP np. poprzez opublikowanie strony w katalogu public_html lub na pen-drive tak, żeby można było wykorzystać ją na następnych ćwiczeniach! Proszę na następne zajęcia zabrać swój login i hasło do konta na serwerze AGH (konta stworzonego na zajęciach z UNIXa), gdyż bez niego nie uda nam się dodać elementy interaktywne do strony napisane w JavaScript, PHP, MySQLu itp. Dziękuję za aktywny udział w zajęciach!
LITERATURA i ODNOŚNIKI 1. Elizabeth Castro, Po prostu HTML, XHTML i CSS, Wydanie VI, HELION, ISBN: 978-83-246-0840-9, Gliwice, 2008. 2. David Crowder, Rhonda Crowder, Tworzenie stron WWW. Biblia, Wydanie I, ISBN 83-7197-665-8, Helion, Gliwice, 2002. 3. Elisabeth Freeman & Eric Freeman, Head Frist HTML with CSS & XHTML, Helion, ISBN: 978-83-246-0427-2/8, Gliwice, 2007. 4. Todd Stauffer, Kurs tworzenia stron internetowych, Helion, ISBN: 83-7197-814-6, Wydanie I, Gliwice, 2002. 5. Wikipedia, http://pl.wikipedia.org/wiki/ 6. Jeffrey Zeldman, Projektowanie serwisów WWW. Standardy sieciowe., Wydanie II, Helion, ISBN: 83-346- 0774-9, Gliwice, 2007.