W z W a z leż e n ż ości c od s topnia z a z awa w nsowa w nia zb z uduj: Otwórz EdHTMLa lub Pajączka

Transkrypt

1 INTERNET i PROJEKTOWANIE STRON WWW LABORATORIUM 1. z tworzenia stron WWW w XHTML 1.0 Transitional i CSS 1.0 prowadzący dr ADRIAN HORZYK horzyk@agh.edu.pl tel.: Konsultacje paw. D-13/325 Akademia Górniczo-Hutnicza w Krakowie WEAIiE, Katedra Automatyki Mickiewicza Av. 30, Cracow, Poland

2 W zależności od stopnia zaawansowania zbuduj: 1. Otwórz EdHTMLa lub Pajączka 2. Przejrzyj załączone projekty na stronie, a w szczególności: proj. 5, 7, 9 i 12 odnośnie możliwości konstrukcji menu z wykorzystaniem CSS 3. Skopiuj podstawowy schemat dokumentu w XHTMLu z wykładu 4. Zbuduj własne menu serwisu korzystając z CSS oraz załączonych przykładów 5. Zbuduj prosty serwis internetowy przedstawiający ofertę biura podróży wyświetlający informacje o firmie (na stronie głównej) oraz podstrony z ofertami (wycieczkami zdjęcia można ściągnąć z Internetu) 6. Dodanie arkusza stylów podobnie formatujących wszystkie podstrony z ofertami oraz stronę główną. 7. Dodanie formularza do zbierania danych tele-adresowych od klientów biura podróży oraz na tematy ich preferencji rekreacyjnych. 8. Opublikowanie strony w Internecie (przez FTP) 9. Zapisanie sobie strony na swoim koncie FTP lub pen-drive, żeby można było stronę wykorzystać na następnych zajęciach!

3 Przejrzyj załączony projekt 5. Konstrukcja interaktywnego menu:

4 Przejrzyj załączony projekt 9. Konstrukcja interaktywnego menu oraz paska odnośników:

5 Przejrzyj załączony projekt 12. Konstrukcja interaktywnego menu i półprzeźroczystego tła:

6 Stylizowanie formularza: Przejrzyj załączony projekt 7.

7 PODSTAWOWY UKŁAD DOKUME TU XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//Dtd " XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlnx=" xml:lang="en" lang="en"> <head> <title> TYTUŁ</title> <meta http-equiv="content equiv="content-type" type" content="text/html; charset=iso "> <meta http-equiv="content equiv="content-language" content="pl"> <meta name="keywords" content= SŁOWA KLUCZOWE"> <meta name="description" content= OPIS"> <meta name="robots" content="all"> <link rel="stylesheet" href= " css/formats.css " />; <style type="text/css" media="all"> ZNACZNIK { WŁAŚCIWOŚĆ1: WARTOŚĆ1; WŁAŚCIWOŚĆ2: WARTOŚĆ2; } KONTEKST ZNACZNIK { WŁAŚCIWOŚĆ1: WARTOŚĆ1; WŁAŚCIWOŚĆ2: WARTOŚĆ2; } </style> </head> <body> <div id= header"> <h1>nagłówek pierwszego poziomu</h1> </div> <div id= content"> <p class= NAZWA KLASY"> <a href=" " Można pobrać materiały z mojej strony.</a></p> </div> <div id="footer"> <p>akapit w stopce dokumentu</p> </div> </body> </html>

8 Zbuduj własne menu wykorzystując CSS i elementy pływające float Interaktywne menu można zbudować z wykorzystaniem prostej listy i CSS zamiast stosować skomplikowane skrypty JavaScript lub inne techniki: #menu { margin: 0; padding: px px; list-style style: none; background: transparent; } #menu li { float: left; } #menu a { font-size size: 12pt pt; display: block; margin: 0 1px 0 0; padding: 4px 8px px; color: # ; text- decoration: none; border: 2px solid #9B ; background: #dc7; } #menu a:hover { color: #f7f1a0; border-color color: # ; background: #7d d; } #menu #mdos a { background: #f7f1a0; } zmieniane na każdej podstronie #menu #mdos a:hover { color: # ; } zmieniane na każdej podstronie <ul id="menu"> <li id="mdos"><a href="index3.html">dossier</a></li> html">dossier</a></li> <li id="mbad"><a href="ahbadania.html">badania</a></li> html">badania</a></li> <li id="mpub"><a href="ahpublikacje.html">publikacje</a></li> html">publikacje</a></li> <li id="mdyd"><a href="ahdydaktyka.html">dydaktyka</a></li> html">dydaktyka</a></li> <li id="mdyp"><a href="ahdyplomanci.html">dyplomanci</a></li> html">dyplomanci</a></li> <li id="mkons"><a href="ahkonsultacje.html">konsultacje</a></li> html">konsultacje</a></li> <li id="mkont"><a href="ahkontakt.html">kontakt</a></li> html">kontakt</a></li> <li id="mcyb"><a href="ahcyberrozmowa.html">cyberrozmowa</a></li> html">cyberrozmowa</a></li> </ul>

9 Zbuduj menu wykorzystując tablicę 1. Wykorzystaj tabelę do zbudowania menu Można wykorzystać kreator tabel lub stworzyć tabelę wg poniższego wzoru: <table> <tr> <td> Adriatyk </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 5. Porównaj możliwości tworzenia menu serwisu przy pomocy tabel i list

10 Zbuduj podstrony serwisu reklamujące wycieczki 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 AD 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> CE A: <ul> <li> w hotelu wynosi 2540zł </li> <li> w domku wynosi 1980zł</li> </ul> </li> </ul> 7. Rozmieszczenie elementów oferty na ekranie z wykorzystaniem prostych tabel. 8. Wykorzystanie odnośników hipertekstowych do przedstawienia stron w Internecie opisujących dane miejsce, np.: <a href="adriatyk.html"> Adriatyk </a> 9. Dodanie tabel, paragrafów, zdjęć itp. z dodatkowymi informacjami...

11 Dodaj arkusz stylów i sformatuj wszystkie oferty 1. Dodaj style 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 ew Roman, Times} p { font-family: sans-serif ; color: red; font-size: 16pt} </style> </head> 2. Kiedy już wszystko działa, przenieś definicje stylów do oddzielnego pliku style.css i dołącz go do wszystkich ofert wycieczek tak, żeby wszystkie były zdefiniowane w podobny sposób: selektor { właściwość: wartość; inna-właściwość: inna-wartość } p { font-family: sans-serif ; color: red; font-size: 16pt } i dołączenie go do nagłówka dokumentu, w którym style mają być zastosowane: <head> <link rel="stylesheet" href="style.css" />  </head>

12 Zastosuj klasy i id kaskadowych arkuszy 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 czerwony >Nagłówek ten jest w kolorze czerwonym.</h </h1> <h1 class= zielony zielony >Nagłówek ten jest w kolorze zielonym.</h </h1> <h1 class= niebieski niebieski >Nagłówek ten jest w kolorze niebieskim.</h </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.

13 Wykorzystaj elementy <div> i <span> do formatowania Analogicznie możemy sobie zdefiniować klasy stylów dla różnych typów paragrafów następująco: <style> p.glowny { font-family family: Times New Roman; font-size size: 14pt } p.notka { font-family family: Arial, Helvetica; font-size size: 10pt } </style> wtedy w tekście zmieniamy styl elementu <p> poprzez zmianę jego atrybutu klasy: <p class= glowny glowny >...</p> <p class= notka notka >... </p> Można też stworzyć klasę uniwersalną, która nie jest przypisana żadnemu konkretnemu znacznikowi i może być zastosowana w każdym elemencie na stronie, np.: <style>.maly { font-family family: Arial, Helvetica; font-size size: 10pt } </style> wtedy można go zastosować np. w: <ul class= maly maly >... </ul> czy np. w <p class= maly > >...</p>

14 CSS STYL TEKSTÓW I JED OSTKI Można stosować następujące jednostki: px piksele in cale mm milimetry cm centymetry pt punkty em wysokość bieżącej czcionki ex wysokość litery x bieżącej czcionki

15 CSS WŁAŚCIWOŚCI CZCIO EK I TŁA

16 < > & &iexl; twarda spacja znak mniejszości (<) znak większości (>) ukośnik (/) ampersand (&) symbol prawa autorskiego symbol znaku towarowego CSS Z AKI SPECJAL E symbol zastrzeżonego znaku towarowego symbol akapitu lewy pojedynczy znak cudzysłowu prawy pojedynczy znak cudzysłowu lewy podwójny znak cudzysłowu prawy podwójny znak cudzysłowu symbol waluty jena symbol waluty euro symbol waluty funta symbol waluty centa symbol półpauzy symbol pauzy odwrócony wykrzyknik odwrócony znak zapytania

17 Stwórz formularz do zbierania danych o klietach biura <form metod = get/post action= przesyłanie danych formularza lub inna akcja > elementy formularza </form> Metoda get powoduje, iż dane formularza w trakcie przesyłania zostaną dołączone do docelowego URLa (ilość danych formularza jest jednak ograniczona do mniej niż 100 znaków). Metoda post powoduje oddzielne przesłanie danych i dzięki temu nie praktycznie żadnych ograniczeń co do ilości przesyłanych danych. Każdy formularz składa się z różnych typów pól, dzięki którym użytkownik może wprowadzać dane. Są to np. pola do wpisywania tekstu, czy też pozwalające wybrać jedną, bądź kilka, z podanych opcji. Pola działające w analogiczny sposób, występują prawie w każdym programie komputerowym, dlatego użytkownicy nie powinni mieć problemów z wypełnieniem formularza na stronie WWW. Pomiędzy podanymi wyżej znacznikami (<form> oraz </form>), mieszczą się wszystkie inne polecenia, dotyczące formularza (pola do wprowadzania danych). Każdy taki formularz musi rozpoczynać się od znacznika otwierającego <form>, a kończyć się znacznikiem zamykającym </form>.

18 POLE <INPUT> FORMULARZE - POLE I PUT <input type= TYP name= NAZWA size= ILOŚĆ ZNAKÓW maxlength= MAKSYMALNA ILOŚĆ ZNAKÓW > pozwala bardziej szczegółowo zdefiniować rodzaj informacji pobieranych od użytkownika. Można by zdefiniować następujące rodzaje elementów kontrolnych formularza poprzez określenie typu pola za pomocą type w elemencie input:

19 FORMULARZE - POLE I PUT WPROWADZANIE TEKSTÓW: Nazwisko: <input type= text name= nazwisko size= maxlength= > Miasto: <input type= text value= Kraków > name= miasto size= maxlength= Wprowadź nazwę użytkownika: <input type= text name= nazwa size= maxlength= > Wprowadź hasło: <input maxlength= > type= password name= haslo size= POLA WYBORU: <p> Które miasta zwiedziłeś?</p> <input type= checkbox name= Krakow checked= checked >W Krakowie<br> <input type= checkbox name= Warszawa >W Warszawie<br> <input type= checkbox name= Tarnow >W Tarnowie<br>

20 PRZYCISK OPCJI: <p> Gdzie mieszkasz?</p> FORMULARZE - POLE I PUT <input type= radio name= Krakow checked= checked >W Krakowie<br> <input type= radio name= Warszawa >W Warszawie<br> <input type= radio name= Tarnow >W Tarnowie<br> POLA UKRYTE: <input type= hidden name= identyfikacja value= formularz 1 >

21 PRZYCISK SUBMIT: FORMULARZE - POLE I PUT <input type= submit value= Wyślij! > Atrybut value= TEXT pozwala zdefiniować tekst wyświetlany na przycisku. Przycisk submit w formie obrazka: <input type= image src= obrazki/submit.gif alt= Wyślij formularz! > PRZYCISK RESET: <input type= reset value= Wyczyść formularz > Atrybut value= TEXT pozwala zdefiniować tekst wyświetlany na przycisku. PRZYCISK BUTTON: Pozwala indywidualnie zdefiniować przycisk formularza oraz akcję jaką ma wykonać.

22 POLE <TEXTAREA > FORMULARZE - POLE I PUT <textarea name= NAZWA KOLUMN > rows= LICZBA WIERSZY cols= LICZBA tekst domyślnie wpisany w polu tekstowym </textarea> pozwala na wpisywanie tekstów o dowolnej ilości znaków.

23 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia dokonanie pojedynczego wyboru z rozwijanej listy: Jak często odwiedzasz tę witrynę? <select name= czestotliwosc czestotliwosc > <option selected= selected value= pierwszy pierwszy >Po raz pierwszy</option> <option value= dzien dzien > >Codziennie Codziennie</option> <option value= tydzien >Raz w tygodniu</option option> <option value= miesiac >Raz w miesiącu</option option> </select select> Formularze możemy uporządkować np. przy pomocy tabel!

24 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia dokonanie wielokrotnego wyboru z rozwijanej listy: Jakie tematy Cię interesują? <select name= tematy multiple= multiple > <option value= sport >Sport</option> <option value= muzyka >Muzyka</option> <option value= wiadomosci >Wiadomości</option> <option value= nauka >Nauka</option> </select>

25 FORMULARZE - POLE SELECT POLE < SELECT > - MENU ROZWIJANE umożliwia pogrupowanie opcji w grupy i nadanie im atrybutu label: <select name= źródło size= multiple= multiple > <option value= brak selected= selected >Żadna z poniższych</option> <optgroup label= Radio > <option value= radioint >Radio internetowe</option> <option value= radiopub >Radio publiczne</option> </optgroup> <optgroup label= Telewizja > <option value= tvint >Telewizja internetowa</option> <option value= tvkab > Telewizja kablowa e</option> <option value= tvant > Telewizja publiczna </option> </optgroup> </select>

26 OPUBLIKOWA IE STRO W I TER ECIE 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 U IXa 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 Sprawdzić, czy serwis działa prawidłowo 7. Poprawić działanie serwisu poprzez uzupełnienie i upiększenie dodatkowych elementów definiując odpowiednie style CSS.

27 ZAPISA IE SOBIE SWOJEJ PRACY! Proszę o zapisanie sobie strony na swoim koncie FTP np. poprzez opublikowanie strony w katalogu public_html, wysłanie sobie pocztą lub na pen-drive tak, żeby można było wykorzystać ją na następnych laboratoriach do dodania JavaScript i PHP! Proszę na następne zajęcia zabrać swój login i hasło do konta na serwerze AGH (konta stworzonego na zajęciach z U IXa), gdyż bez niego nie uda nam się dodać elementy interaktywne i dynamiczne do strony napisane w JavaScript, PHP itp. Dziękuję za aktywny udział w zajęciach!

28 Bibliografia i polecana literatura do wykładu Dan Cederholm Kuloodporne strony internetowe, Helion, Gliwice, David Crowder, Rhonda Crowder Tworzenie stron WWW. Biblia, Helion, Gliwice, Bartosz Danowski, Michał Makaruk Pozycjonowanie i optymalizacja stron WWW. Jak to się robi, Helion, Gliwice, Head First HTML with CSS & XHTML, Helion, Gliwice, Eric A. Meyer CSS według Erica Meyera. Sztuka projektowania stron WWW, Helion, Gliwice, Jacob ielsen, Hoa Loranger Optymalizacja funkcjonalności serwisów internetowych, Helion, Gliwice, Todd Stauffer Kurs tworzenia stron internetowych, Helion, Gliwice, Shari Thurow Pozycjonowanie w wyszukiwarkach internetowych, wydanie II, Helion, Gliwice, Jeffrey Zeldman Projektowanie serwisów WWW. Standardy sieciowe, wydanie II, Helion, Gliwice, 2007.