Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06 Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 18.-27. z wykładu 2.) Wiele uwagi poświęcaliśmy do tej pory planowaniu szkieletu dokumentu. Nauczyliśmy się wykorzystywać w tym celu znacznik table. Metoda projektowania układu strony WWW w oparciu o ten znacznik ma wielu przeciwników wskazujących na fakt, że każdy element strony powinien być używany zgodnie z semantyką. Obecnie coraz więcej zwolenników zyskuje technika projektowania z zastosowaniem pojemników (element blokowy div wraz z kaskadowymi arkuszami stylów). Przykład 1. Oto przykłady stron projektowanych w oparciu o znacznik div: http://wazniak.mimuw.edu.pl/ http://wirespective.thegrid.lap.pl/ Przykład 2. W sieci można wyszukać również wiele przykładów stron projektowanych w oparciu o znaczniki table oraz div: http://www.elearning.pl/ http://www.epi.org.pl/ Poniżej opisany zostanie prosty sposób zaprojektowania następującego szkieletu strony: Wykorzystany zostanie znacznik div 1. Tworzymy nowy dokument HTML (w ked: zakładka Plik Nowy z szablonu HTML 4.01 Transitional).
Danuta ROZPŁOCH-NOWAKOWSKA Strona 2 2007-11-06 2. W pliku umieszczamy (zagnieżdżone w znaczniku body) trzy pojemniki: <div id="gora"></div> <div id="lewy"></div> <div id="prawy"></div> 3. W nagłówku dokumentu HTML (tj. pomiędzy <head> a </head>) uzupełniamy zapis: <link rel="stylesheet" href="style1.css" type="text/css"> 4. Tworzymy nowy plik tekstowy o nazwie: style1.css. Umieszczamy w nim style dotyczące elementów o identyfikatorach gora, lewy, prawy. #gora { width:100%; height: 150px; border-bottom: solid 1px; #lewy { float: left; padding: 10px; height: 660px; #prawy { margin-left:210px; height: 660px; border-left: solid 1px; padding: 10px; Uwaga. Wykorzystaliśmy style: width definiujący wysokość elementu height definiujący szerokość elementu margin -definiujący wielkość marginesu dla elementu padding definiujący odległość zawartości elementu od obramowania border definiujący właściwości obramowania elementu float - definiujący kierunek oblewania elementu przez tekst lub inne elementy Ćwiczenie 1. Sprawdzić efekt działania zdefiniowanych powyżej stylów. Wskazówka. W pliku HTML zagnieździć w znacznikach div inne elementy strony (np. tekst jak na powyższej ilustracji) i otworzyć plik w przeglądarce. Powyższy przykład ze względu na swoją prostotę jest dalece niedoskonały. Planując poprawne rozmieszczenie elementów strony w zdefiniowanych już pojemnikach można ponownie użyć div (por. źródła stron z przykładu 1.)
Danuta ROZPŁOCH-NOWAKOWSKA Strona 3 2007-11-06 Do tej pory (tj. na poprzednich zajęciach zdalnych) korzystaliśmy ze stylu wpisanego (tj. posługiwaliśmy się atrybutem style różnych znaczników). Program ked zawiera propozycję arkusza stylów tj zewnętrzego źródła stylów. W ked tworzymy nowy dokument CSS (zakładka Plik Nowy z szablonu Szablon arkusz CSS). Otrzymujemy: html, body {background: #ffffff; text-align: center; font-family: verdana, tahoma, arial, helvetica, sans-serif; body * {margin: 0px; padding: 0px; text-align: left; img {border: 0px; h1 {font-size: 1.4em; font-weight: bold; h2 {font-size: 1.2em; h3 { font-weight: bold; table.main {padding: 0px; border: 0px; margin: 0px auto 0px auto; width: 700px; background: #fafafa; td {text-align: left; vertical-align: top; background: #ffffff; a {color: #9a0000; a:visited {color: #c60000; a:hover {color: #cb8583;
Danuta ROZPŁOCH-NOWAKOWSKA Strona 4 2007-11-06 Ćwiczenie 2. 1. Powyższy plik zapisz jako style2.css. 2. Masz do dyspozycji (por. załączone materiały dydaktyczne) plik HTML o nazwie plik2.html. Otwórz go w przeglądarce. 3. Zmodyfikuj dokument plik2.html wpisując w nagłówku <link rel="stylesheet" href="style2.css" type="text/css">. Ponownie otwórz w przeglądarce plik2.html. 4. Zmodyfikuj zawartość pliku style2.css zmieniając wartości wybranych własności selektorów body i html w sekcji: html, body {background: #ffffff; text-align: center; font-family: verdana, tahoma, arial, helvetica, sans-serif; Np. zmień: wyrównanie tekstu w poziomie (styl text-align) z center na right rodzinę czcionek (font-family) przez usunięcie z listy verdana oraz tahoma. wielkość czcionki (font-size, z 1em na small) kolor tła. Usuń dotychczasową wartość #ffffff. Kursor ustaw na pozycji, na której znajdowała się usunięta wartość. Wybierz kolor: w edytorze ked wybierz ikonę skrót Ctrl+K). Otwiera się nowe okno. W tym oknie (lub kliknij lewym przyciskiem myszy na wybrany kolor. Pojawi się on w małym oknie. Jeśli kolor Ci odpowiada, to zatwierdź wybór (przycisk OK). Wartość background została zmieniona. 5. Ponownie otwórz w przeglądarce plik2.html i zaobserwuj zmiany. 6. Modyfikuj zawartość pliku style2.css zmieniając wartości wybranych własności innych selektorów. Następnie otwórz w przeglądarce plik2.html i zaobserwuj zmiany. 7. Zaproponuj styl dal znacznika <hr /> Ćwiczenie 3. Do materiałów dydaktycznych dołączono pliki plik3.html oraz style3.css. Otwórz plik3.html w przeglądarce i sprawdź źródło strony. Zmodyfikuj dokument plik3.html wpisując w nagłówku <link rel="stylesheet" href="style3.css" type="text/css">. Ponownie otwórz w przeglądarce plik3.html. Zaobserwuj w jaki sposób utworzono klasy stylów (por. slajd 24. z wykładu 2.) i jaki wpływ ma dziedziczenie na wygląd elementów strony.
Danuta ROZPŁOCH-NOWAKOWSKA Strona 5 2007-11-06 Modyfikuj style3.css i badaj zmiany w sposobie wyświetlania dokumentu plik3.html w przeglądarce. Ćwiczenie 4. W pliku style2.css podany był przykład stylu selektorów table oraz td. Na poprzednich zajęciach zdalnych należało zaprojektować galerię zdjęć. Tym razem należy zaprojektować arkusz stylów dla pliku HTML zawierającego galerię. Galeria powinna zyskać atrakcyjny (w Twojej ocenie) wygląd. Wykorzystaj wiadomości uzyskane w trakcie wykonywania poprzednich ćwiczeń. Możesz wykorzystać informacje podawane na stronach wylistowanych na końcu bieżącego dokumentu (Źródła). Opracowanie własnego zewnętrznego arkusza stylów dla tworzonej witryny WWW jest zajęciem czasochłonnym (projekt + testowanie). W tworzeniu atrakcyjnych stron WWW mogą się przydać darmowe wzorce stron. Na przykład na stronie http://www.csstopsites.com/ znaleźć można odsyłacze do witryn oferujących darmowe wzorce stron opartych na CSS np. http://www.free-css-templates.com/freetemplates.html lub http://templates.arcsin.se/ Chcąc skorzystać z tej oferty wystarczy na stronie WWW, do budowy której wykorzystujemy wybrany wzorzec, umieścić odsyłacz do strony oferującej ten styl (dokładniejsze informacje nt. licencji są umieszczone na tych stronach). Odsyłacze zwykle umieszczane są w stopce wzorca strony. Wystarczy zatem ich nie usuwać. Ćwiczenie 5. Utworzyć stronę WWW korzystając z dowolnego darmowego wzorca strony opartej na CSS. Można skorzystać z w/w adresów stron WWW. Wskazówki. 1. Pobrane z Internetu (w postaci archiwum ZIP) zasoby należy rozpakować. 2. W otrzymanym katalogu odszukać plik index.html, skopiować go i zachować jako indexorig.html. 3. Teraz można przystąpić do modyfikacji elementów strony (zmiana tekstu, odsyłaczy itd.): edytujemy index.html w edytorze ked i zmieniamy fragmenty kodu HTML. 4. Jeśli do działania witryny zamierzamy użyć więcej plików HTML, to tworząc każdy z plików posłużymy się kopią zachowanego wzorca (tj. plikiem indexorig.html). Plik indexorig.html kopiujemy i zmieniamy nazwę otrzymanej kopii (na zaplanowaną nazwę pliku w naszym projekcie witryny). Podobnie jak stronę główną (tj plik index.html) edytujemy nowy plik i wprowadzamy stosowne zmiany w kodzie HTML. 5. Modyfikując kod HTML pamiętajmy o zachowaniu odsyłacza do strony WWW, z której pobraliśmy wzorzec. 6. Po sprawdzeniu działania witryny na maszynie lokalnej (np. komputerze domowym) stosowne pliki przesyłamy na serwer WWW. Należy pamiętać o przesłaniu wszystkich plików, z których korzysta nasza strona (obrazów, zewnętrznych arkuszy stylów itd.)
Danuta ROZPŁOCH-NOWAKOWSKA Strona 6 2007-11-06 Źródła. W języku polskim: http://algorytmy.pl/doc/xhtml/?q=s&c=2 http://www.kurshtml.boo.pl/css/css.html http://kurs.browsehappy.pl/css/wprowadzenie http://webmade.org/kursy-online/kurs-css.php W języku angielskim: http://www.w3.org/tr/css21/ http://www.w3schools.com/css/css_reference.asp ZADANIE M7. Osobie prowadzącej zajęcia zdalne należy przesłać rozwiązanie ćwiczeń 4. i 5. (w postaci adresów stron WWW).