docModuł 4.
download 
Reklamacja Transkrypt
Moduł 4.
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
HTML 4.01 Transitional).
z
szablonu |
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-size: 1em;
font-family: verdana, tahoma, arial, helvetica, sans-serif;
}
body *
{margin: 0px;
padding: 0px;
font-size: 1em;
text-align: left;
}
img
{border: 0px;
}
h1
{font-size: 1.4em;
font-weight: bold;
}
h2
{font-size: 1.2em;
}
h3
{font-size: 1em;
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;
font-size: 1em;
}
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-size: 1em;
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).
