Ćwiczenie 2 Kaskadowe arkusze stylów CSS. Budowanie makiety strony i jej modyfikacja dr inż. Robert Banasiak 1
Materiały ćwiczeniowe Wszelkie materiały ćwiczeniowe: wykłady, instrukcje oraz pliki ćwiczeniowe do niniejszych zajęć z projektowania stron WWW są dostępne w trakcie zajęć na stronie WWW prowadzącego: http://rbanasi.kis.p.lodz.pl/, w zakładce Grafika Komputerowa. Pamiętajmy o częstym zapisywaniu rezultatów swojej pracy!!! Plan ćwiczeń W trakcie tego ćwiczenia zapoznacie się Państwo z zaawansowanymi możliwościami tworzenia i stosowania kaskadowych arkuszy stylów CSS. A w szczególności jak: tworzyć elementy układu (makiety) strony i dołączać do nich arkusze stylów CSS; definiować reguły CSS dla określonych fragmentów projektu; definiować reguły CSS do znaczników <div>; umieszczać tekstu oraz obrazów zastępczych; eksportować reguły CSS do zewnętrznego arkusza stylów; Ćwiczenie : Tworzymy nowy układ (makietę, szablon) strony Nowoczesne serwisy internetowe bardzo często projektowane są (dla przypomnienia ) przy użyciu stylów CSS. Struktura oparta na modelu pudełkowym oraz regułach CSS jest mniej skomplikowana i łatwiejsza do zarządzania niż analogiczny projekt oparty o przestarzałe już (zdeprecjonowane w specyfikacji HTML5) ramki. Ponadto projekty oparte na stylach CSS są zgodne z obowiązującymi aktualnie standardami stosowanymi w Internecie. Projekt makiety CSS strony internetowej, który realizuje model pudełkowy CSS, składa się z dwóch głównych składników: sekwencji znaczników HTML zazwyczaj są to specjalne znaczniki <div> - które stanowią główny budulec projektu; zestawu reguł CSS, określających parametry i format najważniejszych elementów strony, dzięki czemu strona posiada określony przez nas, funkcjonalny i ciekawy wygląd. Aby stworzyć podstawę do zbudowania makiety strony WWW musimy najpierw wykonać następujące kroki: 1. Tworzymy nowy serwis o nazwie Makieta (musimy jak zwykle pamiętać o zbudowaniu właściwej struktury katalogów wraz z katalogiem Obrazy); 2. Następnie tworzymy nowy pusty dokument html (typ strony: HTML, Typ dokumentu: HTML5, układ: brak), następnie klikamy Utwórz; 3. Otwieramy panel style CSS i dodajemy nową regułę CSS i jej selektor o nazwie body (typ selektora: Znacznik (pozwala przedefiniować element HTML). Zatwierdzamy. 4. W oknie właściwości selektora ustawiamy kolor tła dla selektora body jako biały; w sekcji Blok -> Textalign -> center; w sekcji Pole ustawiamy w sekcji Padding (odstęp wewnętrzny) -> Top -> 0 i zaznaczamy (jeżeli nie jest zaznaczone) To samo dla wszystkich; Analogicznie jak dla Padding ustawiamy dla opcji Margin (margines); 2
Kolejnym naszym krokiem będzie zbudowanie pojemnika głównego (kontenera głównego) makiety, w którym pojawią się wszystkie jej elementy czyli cała struktura naszej strony WWW. W ten sposób wykorzystamy jedną najpopularniejszych technik tworzenia serwisów WWW polegającą na wstawieniu nadrzędnego znacznika <div>, który będzie zawierał wszystkie pozostałe znaczniki wraz z ich treścią. Nadrzędny znacznik <div> nosi, jak już wcześniej wspomniałem, nazwę pojemnika strony (znany Państwu z poprzednich zajęć styl wbudowany o nazwie container, który zawiera odpowiednią regułę i jej selektor). Zadeklarowanie takiego znacznika, obejmującego swoim zasięgiem całą zawartość strony WWW, pozwala zdefiniować pewne ogólne właściwości wszystkich elementów tej strony, na przykład takie jak jej szerokość czy wyrównanie tekstu. Naszym zadaniem będzie teraz zdefiniowanie takich właściwości w ramach nowych reguł CSS. Dla tych reguł utworzymy również szereg znaczników <div> określających poszczególne elementy strony takie jak nagłówek czy zawartość główna. Zaczniemy od stworzenia reguły określającej dla nas formatowanie tworzonego głównego kontenera strony. W tym celu tworzymy nową regułę CSS opartą na selektorze ID (typ selektora: Identyfikator dotyczy tylko jednego elementu HTML) o nazwie: #wrapper (krzyżyk w nazwie selektora oznacza, iż w obrębie danej strony może on być użyty tylko raz co jest oczywiście skrupulatnie pilnowane przez Dreamweavera). 1. W kategorii blok wybierz opcję Text-align i ustaw wartość na left. 2. W kategorii pole ustaw width= 984 (wartość optymalna dla stron o rozdzielczości 1024x768), 3. W sekcji Margin ustaw Top=0, Right=auto, Bottom=0, Left=auto. 4. Zatwierdź konfigurację selektora #wrapper. 5. Kliknij ikonę Znacznik DIV: 6. Gdy na ekranie pojawi się okno dialogowe Wstaw znacznik DIV: Wybierz z listy opcji ID: nazwę selektora #wrapper, jeżeli to konieczne wybierz z listy opcji Wstaw: Po początku znacznika (po prawej stronie wyświetli się <body>) i naciśnij OK. Efektem tych działań będzie pusty kontener o nazwie #wrapper, wycentrowany na środku strony i wypełniony domyślnym tekstem: Tu znajdzie się zawartość id "wrapper". 7. Naciśnij klawisz F4 w celu ukrycia wszystkich widocznych paneli edycyjnych i zobaczenia pełnej strony wraz z utworzonym kontenerem. Ponowne naciśnięcie klawisza F4 przywraca widzialność paneli edycyjnych. Utworzony znacznik <div> z selektorem formatującym #wrapper służy raczej jako pojemnik dla innych znaczników typu <div> nie zaś dla tekstu czy grafiki. Jednocześnie używa się go również do wymuszania docelowej szerokości układu serwisu WWW. 3
No cóż. główny znacznik już zdefiniowaliśmy, przejdźmy zatem do definicji właściwego szkieletu strony WWW, dzieląc go na kilka zasadniczych części: nagłówek, treść oraz stopkę. Każda z tych części wymaga zdefiniowania selektora i reguły CSS oraz wstawienia osobnego znacznika <div>. Zbudujmy zatem w pierwszej kolejności nagłówek (#header), następnie treść (#content) oraz stopkę (#footer). W tym celu: 1. Tworzymy nową regułę wraz z jej selektorem CSS o identyfikatorze ID: #header (typ selektora: Identyfikator dotyczy tylko jednego elementu HTML) proszę zwrócić uwagę na ustawienie opcji zaznaczonych kropkowanymi prostokątami na poniższej ilustracji. 2. Definiujemy regułę dla selektora #header według następujących wytycznych: zakładka Pole, wyłączmy Jednakowy dla wszystkich w sekcji Margin, ustawmy Top=12, Bottom=12, pozostałe pola zostawiamy puste; 3. Tworzymy nową regułę (i jej selektor) CSS o identyfikatorze ID: #content; 4. Definiujemy regułę dla selektora #content według następujących wytycznych: zakładka Pole, wyłączmy Jednakowy dla wszystkich w sekcji Padding, Top=0, pozostałe pola zostawiamy puste; 5. Analogicznie skonfigurujmy sekcję Margin. Ćwiczenie do samodzielnego zrealizowania: Korzystając z trybu Kod (lub Kod i Projekt -> zakładka Podziel) napisz kod dodający do arkusza stylów selektor #footer oraz jego regułę. Konfiguracja reguły będzie niemal identyczna jak w przypadku selektora #header. Jedyną zmianą będzie dopisanie reguły dbającej o to, by żadne inne tzw. pływające elementy strony nie kolidowały nam ze stopką. W tym celu ustawiamy zmienną clear na wartość both -> clear: both. Dodatkowo w ramach tego ćwiczenia można zapoznać się z ciekawym systemem podpowiedzi konfiguratora reguły CSS. Nadal pamiętajmy o częstym zapisywaniu rezultatów swojej pracy poprzez opcję Zapisz wszystko. W kolejnym ćwiczeniu do zbudowanych powyżej reguł CSS dla nagłówka, treści strony i stopki, wstawimy i przypiszemy odpowiednie znaczniki <div>. 1. Kasujemy tekst zastępczy w kontenerze #wrapper. 2. Header: wstawiamy nowy znacznik <div> (patrz str. 4 punkt 6): wybieramy opcję Wstaw -> Po początku znacznika, z sąsiadującej listy wybieramy <div id= wrapper >, a z listy ID wybieramy nazwę selektora 4
header. Naciskamy OK. Taka konfiguracja gwarantuje nam, iż nasz selektor zadziała wewnątrz kontenera wrapper. Zobaczmy jak wygląda kod źródłowy tej operacji: <body> <div id="wrapper"> <div id="header">tu znajdzie się zawartość id "header"</div> </div> </body> Jak widać zostało dokonane zagnieżdżenie jednego znacznika <div> w drugim. 3. W przypadku elementu strony WWW przechowującego główną treść o nazwie ID: content: wstawiamy nowy znacznik <div>: tym razem wybieramy opcję Wstaw -> Po znaczniku, z sąsiadującej listy wybieramy <div id= header >, a z listy ID wybieramy nazwę selektora content. Ćwiczenie do samodzielnego zrealizowania: Korzystając z trybu Kod (lub Podziel) napisz kod CSS/HTML dodający do naszego serwisu nowy znacznik <div> dla selektora #footer, odpowiednio go zagnieżdżając względem pozostałych znaczników <div> w strukturze serwisu tj. ustaw znacznik <div> dla #footer po znaczniku <div> dla #content. Ćwiczenie: Rozbudowujemy nowy układ strony W kolejnym ćwiczeniu spróbujemy rozbudować otrzymaną dotychczas ogólną strukturę serwisu, umieszczając w niej kilka znacznie bardziej ukierunkowanych elementów. W tym ćwiczeniu do naszej strony dodamy pojemnik na logo strony, pojemnik na panel nawigacyjny oraz pojemnik na baner reklamowy. Pamiętajmy o częstym zapisywaniu rezultatów swojej pracy poprzez opcję Zapisz wszystko. 1. Dodaj nowe reguły CSS dla selektora o ID: #logo, #nav oraz #banner. a. W konfiguracji reguły #logo ustaw w zakładce Pole -> Wysokość (height) na 71, wyłącz opcje Jednakowy dla wszystkich w sekcji Padding i wpisz 12 w polu Bottom. Pozostałe pola pozostaw puste; b. W konfiguracji reguły #nav ustaw w zakładce Pole -> Wysokość (height) na 28. Pozostałe pola pozostaw puste; c. W konfiguracji reguły #banner ustaw w zakładce Pole -> Wysokość (height) na 200. Pozostałe pola pozostaw puste. 2. Wstaw odpowiednio i we właściwej kolejności znaczniki <div> zagnieżdżając je wewnątrz kontenera header (korzystając z trybu Projekt lub trybu Kod) tak by uzyskać następujący układ makiety strony WWW: 5
Ćwiczenie 4: Dodajemy bloki tekstu w pojemniku #content Kolejny etap prac będzie polegał na podzieleniu treści strony na dwie kolumny. W tym celu należy zdefiniować odpowiednie reguły CSS i ich selektory dla tych kolumn. 1. Tworzymy nową regułę CSS dla kolumny lewej o nazwie ID: #leftcolumn; 2. W zakładce (kategorii) Pole wprowadź szerokość = (szerokość głównego kontenera / 2) 2*15 (dwa odstępy poziome po 15 pikseli) czyli w naszym przypadku będzie to.??? ; 3. Ustaw pole Float na left dzięki czemu nasz kolumna #leftcolumn będzie z lewej strony; 4. Utwórz regułę CSS dla kolumny prawej o nazwie ID: #rightcolumn korzystając z trybu Kod. Ustaw pole float na right. Szerokość #rightcolumn identyczna jak w przypadku #leftcolumn. 5. Utwórz odpowiednie znaczniki <div> zagnieżdżając je: znacznik dla #leftcolumn po początku znacznika #content a znacznik <div> dla #rightcolumn po znaczniku #leftcolumn. Zadanie można wykonać zarówno w trybie Projekt jak i Kod. 6. Wynik działania tej procedury powinien przypominać poniższą ilustrację: Ćwiczenie : Wstawiamy elementy zastępcze do makiety strony. 1. Zaznaczamy tekst Tu znajdzie się zawartość id "logo", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x71 nadając mu nazwę Logo; 2. Zaznaczamy tekst Tu znajdzie się zawartość id "nav", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x28 nadając mu nazwę Nav; 3. Zaznaczamy tekst Tu znajdzie się zawartość id "banner", kasujemy go i w to miejsce wstawiamy obraz zastępczy o wymiarach 984x200 nadając mu nazwę Banner; 4. Umieszczamy kursor w treści napisu Tu znajdzie się zawartość id "leftcolumn", następnie klikamy na znacznik <div #leftcolumn> w dolnym pasku stanu na liście znaczników. Następnie naciskamy strzałkę w lewo aby przenieść kursor pomiędzy znacznikami #content <div> a #leftcolumn <div>. Wpisujemy tekst: Nagłówek 1 i formatujemy ten tekst jako Nagłówek 1 korzystając z panelu właściwości HTML. 6
5. Zaznaczamy tekst zastępczy Tu znajdzie się zawartość id "leftcolumn" i wpisujemy słowo Nagłówek 2. Formatujemy go jako Nagłówek 2. Ustawiamy się na końcu napisu Nagłówek 2 i wpisujemy jakiś dowolny tekst tak by zajmował około 6 linii, rozdzielając kolejne linie Enterami przy końcu pojemnika lewej kolumny; 6. Zamieśćmy ten sam tekst w prawej kolumnie: ustawmy się w treści akapitu, który właśnie został stworzony, wybierzmy z menu Edycja -> Zaznacz wszystko. Następnie Ctrl+C (kopiuj). Zaznaczmy tekst Tu znajdzie się zawartość id "rightcolumn" i naciśnijmy Ctrl + V. 7. Końcowy efekt Państwa działań powinien być zbliżony do poniższego: Ćwiczenie do samodzielnego zrealizowania (w miarę możliwości czasowych ). Korzystając z tak przygotowanego szablonu: 1. Opracuj na jego bazie prostą stronę WWW na dowolny temat; 2. Wypełnij ją dowolnym, wybranym przez siebie tekstem; 3. Obrazy zastępcze przekształć na prawdziwe obrazy (Photoshop, Grafika Google); 4. Zmodyfikuj ogólna kolorystykę strony według własnego pomysłu; 5. Wyeksportuj style do zewnętrznego pliku; Ćwiczenie do samodzielnego zrealizowania (w miarę dalszych możliwości czasowych ). Zbuduj od podstaw samodzielnie szablon według podanych poniżej wytycznych: 1. Szablon składa się z następujących 6 elementów: container (kontener), header (nagłówek), footer (stopka), sidebar1 (panel lewy), sidebar2 (panel prawy), maincontent (panel środkowy); 2. Tło element body -> białe; 3. Komponent container powinien być zagnieżdżony wewnątrz body: rozmiary komponentu container (szerokość: 1024 px, wysokość zmienna), wycentrowany na środku ekranu przeglądarki; 7
4. header powinien być zagnieżdżony w komponencie container, wysokość 80px, szerokość dopasowana do szerokości komponentu container, ustawienie: górna krawędź komponentu container (marginesy górny i dolny -> według uznania); 5. footer powinien być zagnieżdżony w komponencie container, wysokość 40px, szerokość dopasowana do szerokości komponentu container, ustawienie: dolna krawędź komponentu container (marginesy górny i dolny -> według uznania); 6. sidebar1 powinien być zagnieżdżony w komponencie container, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 180px, ustawienie: lewa krawędź komponentu container (marginesy górny i dolny - > według uznania); 7. sidebar2 powinien być zagnieżdżony w komponencie container, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 280px, ustawienie: prawa krawędź komponentu container (marginesy lewy i prawy -> według uznania); 8. maincontent powinien być zagnieżdżony w komponencie container, pomiędzy komponentami Sidebar1 i Sidebar2, wysokość dopasowana do zawartości -> tekstu i grafik, szerokość 280px, ustawienie: prawa krawędź komponentu container (marginesy lewy i prawy -> według uznania); 9. Odstępy wewnętrzne we wszystkich elementach według uznania; 10. Ilustracja poglądowa przygotowywanego szablonu CSS (rzeczywiste proporcje komponentów będą nieco inne): 11. Korzystając z kolorowej wersji instrukcji dostępnej na stronie WWW prowadzącego można skonfigurować kolory tła takie jak prezentuje ilustracja poglądowa w punkcie 9) > kolory oczywiście można również zastosować własne - według uznania; 12. Po zbudowanie szablonu należy sprawdzić jego poprawność wyświetlania w przeglądarce Mozilla Firefox Internet Explorer, oraz Google Chrome (jeżeli dostępny). 8