Zestaw 4 ()

Tworzenie stron WWW
1
Zajęcia zdalne. Umieszczanie arkuszy CSS i JavaScriptów.
Przygotowania : Wyszukać w zasobach kursu Przykłady spakowaną witrynę: Utvory.zip.
Po jej rozpakowaniu pracujemy cały czas w katalogu Utvory (lub jego kopii). Wyglądem stron
witryny „Utvory” zarządza arkusz stylów styl utvorow.css, natomiast sposób nawigacji reguluje definicja ramek (frames) zawarta na stronie index.html i skrypt spistresci.js napisany
w języku JavaScript. Rolę strony głównej pełni index.html .
Zadanie 1. (Brak stylu) Wybrać dowolną stronę, której nazwa zaczyna się od Utwor (tj.
inną niż index.html, menu.html) i pozbawić ją stylu poprzez usunięcie w nagłówku całej linii
wywołującej arkusz
<link rel="stylesheet" href="styl utvorow.css" type="text/css" />
lub usuwając tylko samo odwołanie do arkusza "styl utvorow.css". Obejrzeć efekt (ewentualnie odświeżając okno przeglądarki). Po wykonaniu zadania przywrócić stan poprzedni.
Zadanie 2. (Style, style...) Oprócz styl utvorow.css w katalogu Utvory znajduje się jeszcze
kilka innych arkuszy stylów .css . Przekopiowując kolejno zawartość innych arkuszy w miejsce
dotychczasowej zawartości pliku styl utvorow.css, uzyskać nowe stylizacje naszej witryny.
Zadanie 3. (... właściwości i klasy) Przeanalizować (najlepiej bezpośrednio na stronach bez
ramek) działanie stylów i spróbować udzielić odpowiedzi na następujące pytania.
1. Czy tekst prozy jest wycentrowany w obrębie okna przeglądarki, czy w obrębie bloku, czy
też jest złożony wg jeszcze innego szablonu ?
2. Jak nazywa(ją) się klasa(y) stylu (class) odpowiedzialna(e) za sposób składania wierszy ?
3. Czy sposób składania wiersza zależy zawsze i wszędzie tylko od odpowiednich klas ?
Zadanie 4. (Właściwości ponownie) Zmienić w arkuszu styl menu.css :
(a) kolor tła (background-color ) na jasno seledynowy;
(b) obecne wyrówywanie tekstu na centrowanie (regulacja właściwości text-align w kilku
różnych miejscach arkusza);
(c) wielkość i kolor czcionki (regulacja font-size i color występuje w kilku miejscach).
Aby obejrzeć efekty należy w nagłówku strony Menu.html poprawić odwołanie do arkusza stylu
ze styl utvorow.css na styl menu.css .
Uwaga: Nie każda zmiana jest ostatecznie realizowana. Np. styl koloru body {color: #bbeeff;}
zdefiniowany dla całego body nie będzie obowiązywał wewnątrz znacznika <a class="spistresci">
stylizowanego zgodnie z klasą spistresci opisaną w arkuszu następująco: .spistresci {color:
#bdf7b3; }. Właściwości nieokreślane w klasie będą dziedziczone z zewnątrz, np. kolor tła
(background-color) zdefiniowany w arkuszu przy znaczniku body odziedziczy klasa .spistresci,
gdyż nie zawiera deklaracji koloru tła. Stąd nazwa: kaskadowe arkusze stylów (CSS).
Zadanie 5. (Zewnętrzny JavaScript) Strony o nazwach zaczynających się od Utwor wywołują skrypt spistresci.js następująco
<script type="text/javascript" src="spistresci.js"> </script>
Obecnie skrypt jest pusty. Wstawić w jego miejsce zawartość skryptu spistresci NaDoleStrony.js .
Obejrzeć efekt w ramkach (uruchamiając stronę index.html) i bez ramek (uruchamiając dowolną stronę Utwor ).
2
Tworzenie stron WWW
(a) Przetestować nawigację pod kątem poprawności i wygody biorąc pod uwagę wywołania
różnych styli (nt. pliku styl utvorow.css por. Zadanie 2).
(b) Wykasować w skrypcie spistresci.js fragment wypisujący w HTML-u tekst: ”Lista
utworów:” i zobaczyć efekt na stronach.
Rozwiązania: Odpowiedzi do Zadania 3 należy przesłać w pliku Zadanie-3-kno888.txt
(.odt, .tex, .rtf lub starsze wersje .doc ). Z rozwiązań pozostałych zadań proszę stworzyć
fotoreportaż, a zdjęcia (w formacie .png lub .jpg) spakowane do katalogu Report-kno888.zip
przesłać jako odpowiedź. („Zdjęcie ekranu”: [PrintScreen], otwieramy program graficzny i
wklejamy [Ctrl V] ).
much, 13 x 2007