Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Wielkość: px

Rozpocząć pokaz od strony:

Download "Danuta ROZPŁOCH-NOWAKOWSKA Strona 1 2007-11-06. Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional)."

Mariusz Szczepaniak
8 lat temu
Przeglądów:

1 Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Style Zajęcia poświęcone będą kaskadowym arkuszom stylów (por. slajdy 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: Przykład 2. W sieci można wyszukać również wiele przykładów stron projektowanych w oparciu o znaczniki table oraz div: 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).

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ą.

2 Danuta ROZPŁOCH-NOWAKOWSKA Strona 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.)

#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.

3 Danuta ROZPŁOCH-NOWAKOWSKA Strona 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;

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

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.

4 Danuta ROZPŁOCH-NOWAKOWSKA Strona Ćwiczenie 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.

5 Danuta ROZPŁOCH-NOWAKOWSKA Strona 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 znaleźć można odsyłacze do witryn oferujących darmowe wzorce stron opartych na CSS np. lub 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.)

Tym razem należy zaprojektować arkusz stylów dla pliku HTML zawierającego galerię. Galeria powinna zyskać atrakcyjny (w Twojej ocenie) wygląd.

6 Danuta ROZPŁOCH-NOWAKOWSKA Strona Źródła. W języku polskim: W języku angielskim: ZADANIE M7. Osobie prowadzącej zajęcia zdalne należy przesłać rozwiązanie ćwiczeń 4. i 5. (w postaci adresów stron WWW).

org/kursy-online/kurs-css.php W języku angielskim: http://www.w3.org/tr/css21/ http://www.w3schools.

Podobne dokumenty

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css.

Dzięki arkuszom zewnętrznym uzyskujemy centralne sterowanie wyglądem serwisu. Zewnętrzny arkusz stylów to plik tekstowy z rozszerzeniem css. Kaskadowe arkusze stylów CSS Geneza - oddzielenie struktury dokumentu HTML od reguł prezentacji - poszerzenie samego HTML Korzyści - przejrzystość dokumentów - łatwe zarządzanie stylem (wyglądem) serwisu