Na tych zajęciach zajmiemy się nowoczesnym (i zalecanym przez organizacje standaryzujące WWW) podejściem do tworzenia stron web. Polega ono na wyraźnym rozgraniczeniu treści strony (opisanej w języku XHTML, zawartej zwykle w zbiorze z rozszerzeniem .html) od jej formy (opisanej jako zestaw reguł-stylów CSS, zawartych zwykle w zbiorze z rozszerzeniem .css).
Takie podejście ma kilka fundamentalnych zalet, m. in.:
oddzielenie formy od treści ułatwia indeksowanie strony wyszukiwarkom,
można łatwo zmienić (nawet gruntownie) wygląd strony bez konieczności edycji zbiorów z treścią,
można podać inne reguły sterujące wyglądem strony w zależności od tego, czy strona w danym momencie prezentowana w przeglądarce, przeznaczona jest do druku czy też np. wyświetlana jest na urządzeniu przenośnym.
Co więcej, stosowanie arkuszy stylów niejako wymusza przemyślaną konstrukcję samej strony (nadawanie identyfikatorów kluczowym elementom, stosowanie klas elementów itp.), co zdecydowanie polepsza samą jakość kodu XHTML i zmniejsza liczbę błędów na stronie.
Dobrym źródłem informacji na temat stylów, ich stosowania do konkretnych elementów strony oraz możliwych wartości, jakie dany element CSS może otrzymać, jest witryna
http://www.w3schools.com/css/css_reference.asp
W zasadzie do wykonania tego zadania wystarczy dowolny edytor ASCII (np. notatnik) i przeglądarka, jednak istnieją (również darmowe) narzędzia, które ułatwiają proces zarówno tworzenia treści i formy strony, jak i analizę stron już istniejących.
Jednym z takich narzędzi jest Kompozer, który umożliwia wizualne tworzenie i analizę stron WWW. Wersję ZIP (nie wymaga instalacji – wystarczy rozpakować archiwum i uruchomić w otrzymanym folderze kompozer.exe) w języku polskim można pobrać spod adresu
Innym przydatnym narzędziem może być edytor Notepad++, który zapewnia m. in. kolorowanie składni dla plików html i css. Wersję ZIP (nie wymaga instalacji – po rozpakowaniu archiwum należy uruchomić Notepad++.exe z folderu Unicode) można pobrać spod adresu
http://download.tuxfamily.org/notepadplus/5.8.4/npp.5.8.4.bin.zip
Zakładam, że na dzisiejszych zajęciach wykorzystamy Kompozera do analizy struktury strony, a Notepad++ do edycji arkusza stylów.
Aby efektywnie określić formę strony jako arkusz stylów niezbędne jest stosowanie określonych reguł przy redagowaniu jej treści. Najważniejszą zasadą jest wyróżnianie elementów w treści, które mają znaczenie inne niż zwykły tekst na stronie. Wyróżnianie może odbywać się na wiele sposobów, w zależności od kontekstu, np. można dany element wyróżnić jako nagłówek określonego poziomu (<h1>, <h2>, ...), uwypuklić go w tekście (<em>), nadać mu określoną klasę (np. <div class=”przyklad”>) czy też określony identyfikator (np. <div id=”Menu”>).
Logicznie powiązane ze sobą elementy treści można umieszczać w tzw. kontenerach. Do najważniejszych kontenerów należą DIV (kontener blokowy) oraz SPAN (kontener wierszowy).
Kontener blokowy umożliwia zgrupowanie pewnej treści, a następnie (za pomocą odpowiedniego stylu nadanego kontenerowi) odpowiednie rozmieszczenie jej na stronie czy też nadanie jej określonych właściwości. Kontener blokowy określa na stronie pewien spójny, prostokątny obszar.
Przykład:
<div class=”przyklad_tresc”>
<p> treść przykładu </p>
<p> drugi paragraf treści </p>
</div>
Kontener wierszowy służy do wyróżnienia (oznaczenia) pewnych części w bloku tekstu, co dalej umożliwia nadanie tym częściom określonych klas czy identyfikatorów (co z kolei pozwala na ustalenie dla nich innego stylu niż posiada otaczający tekst).
Przykład:
Słowo <span class=”slowo_kluczowe”>begin</span> jest słowem kluczowym w języku Pascal.
Musimy wyraźnie rozróżnić klasę elementu strony od identyfikatora elementu. Niech K oznacza pewną nazwę klasy, a D – pewną nazwę identyfikatora. W treści strony możemy umieszczać dowolnie wiele elementów HTML (a nawet wiele elementów różnych typów), nadając im klasę K, natomiast może istnieć co najwyżej jeden element o identyfikatorze D (duplikat jest błędem składniowym HTML).
Jeżeli zatem nasza strona zawiera wyróżniony obszar z menu nawigacyjnym, to taki obszar zapewne otrzyma unikalny identyfikator (np. „Menu”). Jeżeli natomiast strona zawiera wiele obszarów z przykładowym kodem źródłowym (które to obszary mają być wyświetlane w taki sam sposób – przy użyciu tego samego stylu), to wszystkie one powinny należeć do jednej klasy (np. „przyklad”).
W dalszej części tego opisu zastosujemy następujące oznaczenia (zresztą zgodne z oznaczeniami w CSS):
element#nazwa – oznacza element treści strony o identyfikatorze nazwa, np. <div id=”Tresc”> będziemy oznaczać jako div#Tresc,
element.nazwa – oznacza element treści strony o klasie nazwa, np. <span class=”slowo_kluczowe”> będziemy oznaczać jako span.slowo_kluczowe.
W arkuszu stylów CSS można nadawać określone style na różnym poziomie szczegółowości.
Można nadać
określony styl wszystkim elementom HTML danego typu, np.
h2
{
font-weight: bold;
color: red;
}
nadaje
wszystkim elementom typu <h2>
na stronie (o ile nie zostały podane reguły bardziej szczegółowe,
np. dla h2 danej klasy, o danym identyfikatorze lub umieszczonych
wewnątrz innych wyróżnionych elementów) czerwoną, pogrubioną
czcionkę.
Można
nadać określony styl wszystkim elementom strony należącym do danej
klasy, np.
.przyklad
{
border: 1px solid black;
}
nadaje
wszystkim elementom klasy „przyklad” jednopikselową,
czarną ramkę (znowu: o ile dla danego elementu nie ustalono bardziej
szczegółowej reguły).
Można
nadać styl elementowi strony o danym identyfikatorze, np.
#Menu
{
display: none;
}
powoduje,
że element strony o identyfikatorze „Menu” jest
niewidoczny.
Można
nadać styl wybranym elementom strony danej klasy, np.
a.czarny
{
color: black;
}
ustawia
czarny kolor czcionki wszystkim odnośnikom (<a>)
klasy „czarny”.
Można
ustalać reguły zagnieżdżone, np.
div#Menu
a.czarny {
color: black;
}
ustawia
odnośnikom (<a>)
czarny kolor czcionki, ale tylko takim odnośnikom, które są klasy
„czarny” i znajdują się w kontenerze (<div>)
o identyfikatorze „Menu”.