Implementacja przykładowej witryny www
z zastosowaniem stylów css
oraz narzędzi do obróbki grafiki wektorowej i rastrowej
Małgorzata Mazurek
Informatyka techniczna
Dziękuję
Dr inż. Leszkowi Czerwińskiemu
za pomoc w napisaniu pracy
Wstęp.......................................................................................................................................4
1. Witryna internetowa – czy nadal 'trendy'?.............................................................4
2. Zastosowanie grafiki w witrynach internetowych..............................................5
3. Rodzaje grafiki komputerowej..................................................................................8
Teoretyczny kontekst składni języka html z zastosowaniem styli css..........................9
1. Składnia języka html.................................................................................................9
2. Struktura dokumentu HTML................................................................................10
2. 1. Nagłówek strony WWW....................................................................................10
2. 2. Kodowanie...........................................................................................................11
2. 3. Element META....................................................................................................11
2. 4. Treść dokumentu.................................................................................................11
3 Edytory HTML..........................................................................................................12
4. Kaskadowe arkusze stylów (css)...........................................................................13
4. 1. Składnia css..........................................................................................................14
4. 2. Umieszczanie arkuszy stylów w dokumencie.................................................14
4. 3. CSS w przeglądarkach internetowych.............................................................15
Grafika wektorowa i rastrowa – zastosowanie w witrynach www.............................16
1. Edycja grafiki wektorowej......................................................................................16
1. 1. Kolor i rozdzielczość......................................................................................... 17
1. 2. Zastosowanie grafiki wektorowej...................................................................18
1. 3. Formy zapisu grafiki wektorowej....................................................................18
2. Grafika rastrowa.....................................................................................................19
2. 1. Kompresja rastra.................................................................................................20
Implementacja przykładowej witryny www...............................................................21
1. Etapy budowy witryny www..................................................................................21
2. Wykonanie szablonu witryny w języku html........................................................22
2. 1. Znaczniki <HTML></HTML>...........................................................................22
2. 2. Znaczniki <HEAD></HEAD>.............................................................................22
2. 2. 1.Osadzone arkusze styli css...............................................................................23
2. 2. 2. Zewnętrzne arkusz styli css............................................................................23
2. 3. Znaczniki <BODY></BODY>............................................................................24
2. 3. 1. Tabele, na których oparty jest szablon witryny..........................................24
2. 3. 2. Style wewnętrzne css.......................................................................................25
2. 3. 3. Treść dokumentu i odnośniki.........................................................................25
Wnioski......................................................................................................................................27
Spis rysunków.................................................................................................................28
„Dobry projekt WWW jest w dużym stopniu sprawą
dobrych relacji struktury i menu użytkownika,
strony głównej i konkretnych podstron, grafiki i tekstu.
Najważniejszym celem jest zbudowanie takiej witryny,
która da użytkownikowi poczucie komfortu
i nie będzie przeszkadzała w dobrym odbiorze informacji”
P. Lynch
Wstęp
Obecnie większość firm na świecie posiada swój wirtualny odpowiednik, są firmy, które funkcjonują w ten sposób. Firmowa witryna wzbudza zaufanie klientów, gdyż internauta widzi znacznie więcej niż suchy fakt jej istnienia w katalogu branżowym. Są przedsiębiorstwa , które osiągają dochody wielokrotnie wyższe dzięki posiadaniu własnej witryny www.
1. 1. Witryna internetowa – czy nadal 'trendy'?
Dokumenty dostępne w sieci WWW, nazywane potocznie stronami internetowymi lub stronami WWW są zapisane w plikach tekstowych. Zawartość plików tekstowych możemy przeglądać i edytować niemal każdym edytorem, na przykład notatnikiem. Najczęściej stosowane jest rozszerzenie .html, .htm lub .xml, jednakże w pewnych sytuacjach możemy się spotkać z .php, .asp, .pl, .cgi, .sh czy nawet .exe. Rozszerzenia różne od .html, .htm oraz .xml mówią o tym, że dana strona jest wynikiem działania pewnego programu uruchomionego na serwerze WWW.
W najprostszym przypadku, strona WWW to plik tekstowy o rozszerzeniu .html zawierający kod w języku HTML.
Internauta zazwyczaj obdarzony jest narzędziem wzroku i właściwie użyta grafika w witrynie www wpływa bardzo korzystnie na odbiór zamieszczonego komunikatu. „Poprawność wykonania witryny internetowej wyznacza jej popularność, częstość odwiedzin. Każda tworzona witryna powinna skupić się na preferencjach potencjalnych odbiorców. Pojawienie się w sieci ogromnej ilości stron internetowych spowodowało zalew informacji nie zawsze jednak podawanej w sposób przystępny dla użytkownika”(„Elementy graficzne na stronach www” P. Frankowski, Helion, 2005).
W Internecie napotkać można różne witryny. Zarówno takie, gdzie bardzo łatwo można odnaleźć konkretne informacje (przejrzystość witryny, dobrze zbudowany projekt graficzny i łatwość w nawigacji sprawia, że intuicyjnie internauta wyszukuje konkretne informacje). Istnieją też serwisy, w których od początku gość czuje dyskomfort poruszania się (nadmierność grafiki, przesadne „upiększanie” witryny niestandardowymi przyciskami, grafiką flash i innymi podobnymi elementami).
-4-
2. Zastosowanie grafiki w witrynach internetowych
Strona musi mieścić się w ustalonych standardach, bo klient nie będzie potrafił się po niej poruszać, posiadać prosty interfejs, a przy tym przyciągnąć klienta nowatorskim rozwiązaniem. Użytkownicy poznają funkcjonalność witryny zanim jeszcze zaczną przeglądać jej zawartość. Sieć jest medium.
Rys. 1. Zastosowanie grafiki w witrynie internetowej
Według J. Nielsena istnieje pięć aspektów użyteczności strony www:
1. Łatwość uczenia się: interfejs powinien umożliwić użytkownikom, którzy po raz pierwszy znaleźli się na witrynie szybką naukę poruszania się i wykonywania podstawowych czynności
2. Efektywność użycia: interfejs powinien być tak zaprojektowany, by umożliwiał szybką realizację zadań w przypadku bardziej zaawansowanych użytkowników
3. Łatwość w zapamiętaniu obsługi: projektowany interfejs powinien wspierać użytkownika, by ten mógł zapamiętać w jaki sposób go użyć powtórnie.
4. Eliminacja blędów: interfejs powinien być zaprojektowany tak, by była możliwość szybkiej eliminacji błędów.
5. Satysfakcja: używanie interfejsu powinno być satysfakcjonujące i przyjemne.
Ważne
jest też
zapewnienie prawidłowego indeksowania przez wyszukiwarki internetowe
i, m.in. przez to, odpowiednio wysokiego rankingu w wynikach
wyszukiwania.
Polskie strony internetowe wciąż usiłują być
"graficznym tour-de-force", przedstawiając bardzo
bogatą grafikę oraz mnogość elementów dynamicznych (DHTML,
Flash etc.). Na większości witryn o charakterze informacyjnym
(szczegolnie międzynarodowym), prezentujących zasoby które
zachęcają do wielokrotnego wykorzystywania i powrotu na strony,
rola grafiki powinna być zredukowana do:
identyfikacji witryny (branding)
subliminalnego przekazania charakteru witryny
ułatwienia
nawigacji i prezentacji treści
-5-
„Ważnym,
szczególnie na
arenie międzynarodowej, aspektem projektu witryny jest
jej
dostępność dla ludzi niepełnosprawnych, w szczególności
niewidomych. W Stanach Zjednoczonych niedopuszczalne są witryny,
które nie mogą prezentować swojej treści przez
głośnomówiące przeglądarki (automatycznie odczytujące
głosem zawartość witryny, menu nawigacyjne itp.)
Dlatego w
projekcie HTML imperatywna jest możliwość nawigacji na stronach
używając albo explicite menu tekstowych albo tekstów "Alt",
odpowiadających graficznym przyciskom. Z tego względu jakiekolwiek
elementy Flash zawierające informację lub nawigację nie są
dopuszczalne.
Witryny Internetowe wiodących
amerykańskich firm i organizacji dobrze ilustrują ten trend w
projektowaniu - w większości są to witryny tekstowe
(oczywiście z bogatym wykorzystaniem CSS).”(www.ornak.pl).
Projektowanie witryny internetowej należy zacząć od zapoznania się z już istniejącą wizualizacją graficzną firmy, a jeżeli takiej nie posiada od zaprojektowania podstawowych składników wizualizacji, takich jak: logotyp, znak towarowy i inne (przykład podstawowej Księgi Corporate Identity znajduje się na http://m.mazurek.prv.pl/prvindex.html).
Przykładowy opis podstawowej Księgi CI:
LOGOTYP
m@zurek
Pracownia informatyki i reklamy
Nazwa
firmy zawiera
nazwisko właściciela oraz kombinację wyrazów, określających
profil firmy.
Ze względu na klasyfikację jest to logo
typograficzne, czyli tekstowe. Jednak w zależności od przeznaczenia
ulega zmianie, tj:
wersja handlowa:
m@zurek
Pracownia
informatyki i reklamy
wersja marketingowa:
m@zurek
wersja internetowa:
m(animowany gif; alt=”@”)zurek
wersja firmująca:
(znak graficzny z animowaną treścią znajdujący się m. in. na stronie http://piaskowieclublin.prv.pl)
Ze względu
na konstrukcję logo
m@zurek
ma strukturę otwartą i nie posiada tła.
-6-
Ze względu
na cechy liter logo m@zurek:
krój pisma: Comic Sans MS
stopień pisna: dowolny z zachowaniem proporcji
wariant fontu: Heavy.
Ze względu na rozmieszczenie logo umieszczane jest z lewej
części dokumentu/szablonu <align=left>
Ze względu na kolorystykę:
kolor czcionki logo to #CC0000;
tło: brak tła (optymalnie tło dokumentu na którym jest zamieszczane).
A oto inne przykładowe logo, które powstało z „obróbki” zdjęcia w AdobePhotoshop a następnie zostało wyeksportowane do CorelDRAW, gdzie został dołączony tekst i zostało zapisane w formacie JPEG, przy użyciu kompresji w celu uzyskania jak najniższej ilości bitów przy dobrej jakości obrazu):
Rys. 2. Logo w formacie JPEG
Posiadając pewien zasób informacji dotyczących wizualizacji firmy, można zacząć projektować odpowiednik wirtualny wizytówki firmy, czyli stronę internetową.
„Istnieją
cztery warstwy komunikacji
marketingowej w istniejącej hierarchii, ilustrującej skuteczność
dotarcia do odbiorcy za pomocą określonych środków: kolor,
forma, nazwa oraz liczba. Dowolny komponent może być na tyle
silny, że będzie w stanie zagłuszyć inne. Poznanie każdego
elementu pozwala na świadomy i poprawny wybór dowolnego
składnika, tak aby odpowiednio zaprojektować znaki towarowe,
elementy identyfikacji wizualnej i treści dodatkowe”
(„Grafika w
biznesie. Projektowanie elementów tożsamości
wizualnej” A.
Benicewicz-Miazga, Helion, 2005).
-7-
3. Rodzaje grafiki komputerowej
Ze względu na sposoby tworzenia grafiki wyróżniamy rysunki wektorowe i rastrowe (bitmapy). Ogólnie rzecz ujmując bardziej popularnym rodzajem grafiki jest grafika wektorowa. Jednak rodzaj grafiki wykorzystywany w Internecie zależy od rodzaju i charakteru projektowanej strony. O ile dotychczas z grafiką wektorową internauta miał do czynienia w większości serwisów, o tyle obecnie wzrasta liczba galerii internetowych oraz serwisów, które dla uwiarygodnienia zamieszczają na stronach różne „fotosy” (grafika rastrowa).
„Różnice między rysunkiem rastrowym (bitmapą) a wektorowym są olbrzymie. Szczególnie widoczne są podczas skalowania (czyli zmiany rozmiaru) rysunku lub obiektu”. „ABC Grafiki komputerowej” R. Zimek, Ł. Oberlan, Helion, 2005).
Istnieje kilka programów do tworzenia grafiki komputerowe, jednak grafikę wektorową najwygodniej tworzy się w programie CorelDRAW (obecnie wersja X3), zaś rastrową w AdobePhotoshop.
Projektowanie witryny www w języku html, z wykorzystaniem styli css oraz odpowiedniej grafiki jest procesem złożonym i zależy od wielu czynników, które ta praca po krótce przedstawi.
-8-
Teoretyczny kontekst składni języka html z zastosowaniem styli css
Składnia języka html
HTML ( HyperText Markup Language) jest to hipertekstowy język znaczników, to język składający się ze znaczników (ang. tags) stosowany do pisania stron www.
Dokument HTML jest zwykłym dokumentem tekstowym o ustalonym kodowaniu znaków składającym się z elementów/tagów/znaczników.
„Element zwykle składa się z trzech części:
znacznika
początkowego (w formie <znacznik>)
zawartości elementu (tekst lub inne elementy)
znacznika końcowego (w formie </znacznik>)
Elementy mogą też mieć przypisane
atrybuty
precyzujące znaczenie danego elementu. Atrybuty wraz z ich
wartościami wpisuje się wewnątrz znacznika początkowego
(<znacznik atrybut="wartość" atrybut2="wartość2"
... atrybutN="wartośćN">). Niektóre
elementy nie muszą, a niektóre wręcz nie mogą posiadać
znacznika końcowego (np. element br służący
do
rozpoczęcia nowego wiersza tekstu).
Element główny każdego
dokumentu HTML
jest html. Element
główny zawiera dwa
kolejne elementy: head (nagłówek
dokumentu) i
body (zasadnicza treść dokumentu).
Element head
zawiera tytuł strony oraz informacje dodatkowe niewidoczne w
dokumencie, takie jak autor, data, słowa kluczowe, itp. Wewnątrz
elementu body zawarte są wszystkie pozostałe
elementy,
mogące zawierać tekst, wstawiać grafikę, itp. Na początku
dokumentu, poza elementem html powinna się
jeszcze
znaleźć informacja o zastosowanym typie dokumentu, wskazująca
użytą wersję HTML” (www.wikipedia.pl).
Praktycznie schemat ten realizuje się tworząc szablon:
<!DOCTYPE html PUBLIC ... > - deklaracja typu dokumentu
<html>
<head> ... </head> - nagłówek
<body> ... </body> - zawartość strony
</html>
Przykład strony WWW w HTML-u z ustawieniem języka polskiego:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tytuł strony w HTML-u</title>
</head>
-9-
<body>
<h1>Nagłówek pierwszego poziomu</h1>
<p>
Akapit (z ang. paragraph)<br>
tekst w następnym wierszu<br>
<a href="http://piaskowieclublin.prv.pl">
link do firmy Piaskowiec.</a>
</p>
</body>
</html>
Poprawny, pusty dokument w języku HTML składa się z trzech części:
definicji typu dokumentu (element DOCTYPE),
nagłówka dokumentu (element HEAD),
treści dokumentu (element BODY).
Element DOCTYPE określający użyty dialekt języka HTML jest obowiązkowy i nie może zostać pominięty. W zależności od wybranego dialektu część znaczników i elementów może być niedostępna. Najwęższym dialektem jest wersja ścisła. Element DOCTYPE ma wówczas postać
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Wersja ścisła dopuszcza tylko nieprzestarzałe elementy i nie dopuszcza ramek.
Wersja przejściowa jest rozszerzeniem wersji ścisłej. Dokumenty w wersji przejściowej rozpoczynają się następującym element DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
i mogą zawierać wszystkie elementy dozwolone w wersji ścisłej jak również elementy wycofane z języka (ang. deprecated).
Ostatni możliwy typ dokumentu, to wersja z ramkami (rzadko obecnie używana)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Nagłówek dokumentu jest zawarty pomiędzy znacznikami <HEAD> oraz </HEAD> i zawiera informacje charakteryzujące dany dokument. Przykładami takich informacji są imię i nazwisko autora, język dokumentu czy jego tytuł. Decyzja o tym, jakie informacje ogólne o dokumencie umieścić w nagłówku należy do autora strony. Konieczne jest jedynie umieszczenie tytułu
-10-
dokumentu oraz informacji na temat stosowanego kodowania znaków.
„Tytuł dokumentu określamy znacznikami <TITLE> oraz </TITLE>. Pamiętajmy, że jest to element niezmiernie istotny z punktu widzenia klasyfikacji naszego dokumentu przez wyszukiwarki internetowe. Jedna z "podpowiedzi dnia" (ang. Tip of The Day) dostępnych na stronach konsorcjum W3C mówi: "TITLE - najważniejszy element dobrej witryny WWW" (http://wikipedia.pl).
2. 2. Kodowanie
Biorąc pod uwagę polskie znaki, to pewne zamieszanie powoduje fakt, że istnieją dwa sposoby kodowania. Pierwszy z nich, to sposób propagowany przez firmę Microsoft, zaś drugi, to międzynarodowy standard zatwierdzony przez organizację ISO. Formaty te są identyfikowane jako windows-1250 oraz iso-8859-2.
Przygotowując stronę WWW musimy wiedzieć, jakie kodowanie polskich znaków stosuje dany edytor. Na przykład oprogramowanie Windows stosuje kodowanie windows-1250 (Oczywiście każda aplikacja może mieć opcję: "Zapisz w formacie ...", która dokonuje konwersji. Jednak wykonanie polecenia Plik | Zapisz w większości aplikacji Windows utworzy plik w kodzie windows-1250). Oznacza to tyle, że tworząc stronę WWW programem notatnik otrzymujemy dokument z kodami windows-1250.
2. 3. Element META
Element META języka HTML służy miedzy innymi do ustalenia kodowania znaków w dokumencie. Jeżeli plik zawiera polską literę Ą zakodowaną kodem 165 (kod windows) to należy umieścić element
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
Jeśli natomiast kodem litery Ą jest liczba 161 (kod iso), to należy użyć elementu
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
W środowisku internautów przeważa opinia, że należy stosować kodowanie w formacie ISO.
Dokument HTML przygotowany standardowym notatnikiem Windows plik zawiera polskie znaki w formacie windows-1250. W dokumencie takim należy umieścić element
<META http-equiv="Content-Type" content="text/html; charset=windows-1250">
Zmiana znacznika kodowania META z windows-1250 na iso-8859-2 nie wystarczy. Należy jeszcze dokument poddać konwersji znaków.
-11-
Treść dokumentu jest zawarta wewnątrz elementu BODY, czyli pomiędzy znacznikami <BODY> oraz </BODY>.
3. Edytory HTML
HTML jest plikiem tekstowym i jako taki może być tworzony w dowolnym edytorze tekstu, nawet tak prostym, jak Notatnik w systemie operacyjnym Windows czy Kate w systemie Linux (GNU).
Edytory HTML można podzielić na dwie podstawowe klasy: edytory pracujące w trybie tekstowym (Notatniki, Kate) i edytory pracujące w trybie graficznym (programy edytujące zarówno grafikę jak i język html).
Cechy dobrego programu edytującego język html:
kontrola poprawności pisowni
edycja informacji nagłówkowych. Edytor HTML powinien wspomagać tworzenie informacji nagłówkowych (META), istotnych dla poprawnego funkcjonowania witryny w Internecie, jak tytuł, opis, słowa kluczowe i szereg innych informacji o pomniejszym znaczeniu; szczególnie przydatne są do tego celu kreatory META;
zaawansowany edytor HTML powinien mieć narzędzie do organizowania zespołu stron tworzących wspólnie witrynę internetową w tzw. projekty, które ułatwiają zarządzanie, np. wprowadzanie wspólnych opisów, kontrola spójności, weryfikacja odsyłaczy czy wysyłanie na serwer FTP (np.: Zilla);
edytor powinien dysponować narzędziem do tworzenia szablonów stron, które przyspieszają pisanie stron i ujednolicają wygląd dokumentów;
biblioteki wstawek;
obsługa języków. W nowoczesnym edytorze HTML pożądana jest nie tylko obsługa samego języka HTML, ale i przynajmniej elementarna obsługa innych popularnych języków, jak JavaScript i PHP, a przede wszystkim CSS, czyli współdziałających z kodem HTML kaskadowych arkuszy stylów;
aby móc łatwo odróżniać znaczniki od treści dokumentu, konieczne jest kolorowanie znaczników danego języka;
wprowadzanie znaków specjalnych (np. znaki matematyczne, znaki innych alfabetów);
mapowanie odsyłaczy;
podgląd dokumentu (np. w InternetExplorer lub Mozilli);
sprawdzanie poprawności składniowej;
kontrola spójności;
wysyłanie na serwer FTP.
Polskie edytory HTML dla Windowsa:
płatne edytory:
Pajączek;
Tiger i inne;
-12-
darmowe edytory:
Aptana;
edHTML;
E-Net;
HateML;
HTMLowiec;
MiniPad;
Nvu;
Snape i inne;
Zagraniczne edytory pracujące w trybie graficznym:
WYSIWYG (what you see is what you get);
AdobeDreamweaver;
MicrosoftFrontPage i inne;
Edytory języka html dla Linux (GNU):
Nvu;
Screem;
IBM HomepageBuilder;
Webdesigner i inne.
4. Kaskadowe arkusze stylów (css)
Kaskadowe arkusze stylów (Cascading Style Sheets, CSS) to język służący do opisu sposobu renderowania stron WWW. CSS został opracowany przez organizację W3C jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em.
„Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać renderowana przez przeglądarkę internetową zawartość wybranego elementu (HTML, XHTMLlub elementówXML). Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML (W3C odradza używania elementów oraz atrybutów XHTML odpowiedzialnych za wygląd strony)”(http://wikipedia.pl).
-13-
4. 1. Składnia css
Arkusz stylów składa się z definicji stylu (reguł). Reguła składa się z selektora określającego formatowany element lub grupę elementów oraz jednej lub więcej rozdzielonych dwukropkiem oraz zakończonych średnikiem par właściwość-wartość. Pary muszą być otoczone nawiasami klamrowymi. Ponieważ średnik służy do separowania par, po ostatniej z nich nie powinno się pisać tego znaku (w przeciwnym razie cała definicja może zostać zignorowana).
selektor { właściwość: wartość; inna-właściwość: inna-wartość }
Przykładowo chcąc przypisać wszystkim akapitom określoną czcionkę użyjemy zapisu:
p { font-family: sans-serif }
Gdzie selektorem jest p (reguła
zostanie zastosowana do
wszystkich elementów p w
dokumencie),
właściwością - font-family (poddawana zmianie
jest
rodzina czcionek) a wartością - sans serif
(akapitom
przypisywana jest rodzina czcionek bezszeryfowych). Podstawowe
selektory CSS zapewniają możliwość opisania docelowej grupy
elementów między innymi według ich:
wartości atrybutów
aktualnego stanu (np. focus lub hover)
relacji rodzic-potomek-rodzeństwo względem innego elementu
4.2. Umieszczanie arkuszy stylów w dokumencie
Powiązać dokument z arkuszem można
określając
relację tego pierwszego z osobnym dokumentem CSS za
pomocą
elementu link:
<link rel="stylesheet" href="arkusz.css">
<link rel="stylesheet" href="arkusz.css" />
W przypadku dokumentu XML (lub XHTML serwowanego z XML-owym typem zawartości) użyć można specyficznej dla XML-a instrukcji przetwarzania:
<?xml-stylesheet type="text/css" href="arkusz.css"?>
Reguły CSS można
też umieszczać wewnątrz nagłówka
dokumentu (X)HTML dzięki elementowi style:
<style type="text/css">p { color: red }</style>
Lub stosować lokalnie do wybranego
elementu (X)HTML za pomocą
atrybutu style, co jednak w większości
przypadków
nie jest ani praktyczne, ani zalecane:
<p style="color: red"></p>
4. 3. CSS w przeglądarkach internetowych
CSS to styl odczytywany przez większość przeglądarek internetowych. „CSS 1 jest w pełni obsługiwany przez przeglądarkę Firefox oraz inne przeglądarki oparte na silniku Gecko, Operę, Safari oraz Konquerora. Programy te są także bliskie pełnej obsługi CSS 2.1. Internet Explorer do wersji 5.5 posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów nowszych wersji. IE 6 renderując w trybie standardów obsługuje poprawnie prawie całość CSS1, jednak obsługa CSS 2.1 nadal jest bardzo niekompletna.
CSS
3 jest obecnie szczątkowo obsługiwany przez większość
najnowszych przeglądarek (np. opacity w
Gecko).
Właściwości CSS 3 o implementacji znajdującej się w fazie
eksperymentalnej opatrzone są prefiksem odpowiednim dla przeglądarki
(np. -moz-border-radius dla
Gecko)”(http://wikipedia.pl).
-15-
III. Grafika wektorowa i rastrowa – zastosowanie w witrynach www
Ze względu na różne sposoby tworzenia grafiki komputerowej, wyróżniamy rysunki wektorowe i rastrowe oraz grafikę 3D. Różnica między tymi dwoma polega na tym, że w pierwszym opisywane jest co ma być wyświetlone, a w grafice rastrowej opisywane są szczegółowo poszczególne piksele.
Rys. 3. Grafika komputerowa (wekotowa i rastrowa)
1. Edycja grafiki wektorowej
„Do tworzenia grafiki wektorowej służy program CorelDRAW (...) Do największych zalet tego programu łatwość obsługi, ogromna popularność oraz różnorodność zastosowań” („ABC Grafiki komputerowej” R. Zimek, Ł. Moberlan, Helion, 2005).
W grafice wektorowej wszelkie obrazy tworzone są za pomocą prymitywów, czyli prostych figur geometrycznych. Figury te opisane są za pomocą parametrów, które tworzą wektor (grafika wektorowa). Obraz generowany jest przez komputer na podstawie takiego właśnie opisu danego przedmiotu (rysując np. koło o określonym promieniu i położeniu). Stąd grafikę wektorową nazywa się również grafiką obiektową, ponieważ obraz w tej grafice składa się z obiektów o określonych atrybutach.
-16-
Atrybuty grafiki wektorowej:
punkt z określonymi współrzędnymi i wielkością;
kolor rysowania (kolor kreski lub obramowania),
kolor wypełnienia (np. dla wnętrza koła),
stopień przeźroczystości obiektu (tzw. kanał alfa).
Często spotykanym dodatkiem jest możliwość wypełniania niejednolitego podobnego jak w programach od edycji bitmap (rastra), czyli wypełnianie gradientem (np.://mmazurek.com), czy jakimiś wzorkami.
1. 1. Kolory i rozdzielczość
„W przeciwieństwie do grafiki rastrowej - grafika wektorowa jest grafiką w pełni skalowalną, co oznacza, iż można obrazy wektorowe powiększać oraz zmieniać ich proporcje bez uszczerbku dla jakości odbioru. Sama jakość obrazu zależy w praktyce wyłącznie od tego jak ściśle zostanie ona określona. Można np. włosy przedstawić jako pewien obszar ograniczony krzywą, a można każdy włos opisać odpowiednią krzywą. Tak czy inaczej dzięki matematycznemu opisowi elementów będą one widoczne zawsze w maksymalnej dostępnej wersji”(„Elementy graficzne na stronach www” P. Frankowski, Helion, 2005).
Kolor to postrzegana wzrokowo właściwość przedmiotu; postrzeganie to zależy od stopnia pochłaniania światła i rozpraszania promieni świetlnych (barwa).
Najpopularniejsze modele kolorów:
RGB - „podstawowy format koloru w zastosowaniach informatycznych. W tym modelu kolor każdego piksela opisany jest przez kombinację kolorów składowych: czerwonego, zielonego i niebieskiego (...) Paleta RGB zawiera więcej kolorów niż można wydrukować. Ponieważ zmieszanie wszystkich kolorów daje biel, mówi się, że ma ona charakter addywny”(„Elementy graficzne na stronach www” P. Frankowski, Helion, 2005);
HSB – model subiektywny (percepcyjny); opisuje kolory w sposób zgodny z rozumieniem barw;
CMYK (cyan, magenta, yellow, black) -to model pochodzący z branży poligraficznej, służy do profesjonalnych zastosowań; „CMYK operuje trzema barwami pochodnymi z modelu RGB (turkusowy, fioletowy, żółty)(...) W praktyce jako czwarty kolor dodaje się kolor czarny”(„Elementy graficzne na stronach www” P. Frankowski, Helion, 2005);
-17-
2. Zastosowanie grafiki wektorowej
Grafika wektorowa ma szerokie zastosowanie w świecie internetu ale też w codziennym życiu branży reklamowej, artystycznej i innych. Wyróżniamy:
fonty - ze względu na konieczność skalowania fontów pożądany jest ich zapis w formacie wektorowym. Większość obecnie powstających fontów nie jest już zwykłymi bitmapami wstawianymi zamiast odpowiedniego kodu, tylko są opisane za pomocą krzywych Beziera i podobnych;
grafika trójwymiarowa - obecnie pojęcie grafiki trójwymiarowej i wektorowej jest ściśle powiązane. Dzięki zwiększeniu mocy obliczeniowej komputerów można coraz dokładniej określać rzeczywistość i tworzyć dokładniejsze modele, które komputer będzie w stanie przetworzyć;
Wyższość grafiki wektorowej nad rastrową przedtawia poniższy tekst:
Rys. 4. Skalowanie w grafice wektorowej i rastrowej
3. Formaty zapisu grafiki wektorowej
„Wiele programów ma wewnętrzne formaty zapisu grafiki wektorowej, brak jest jednak powszechnych standardów używanych i otwieranych przez liczne aplikacje, jak to ma miejsce w wypadku grafik rastrowych. Do niedawna najbardziej uniwersalne były takie formaty jak EPS, czy PDF. Obecnie popularność zdobywa promowany przez W3C, oparty na XML format SVG. SVG nie ma być jednak tylko prostym opisem grafiki, ale ma także umożliwiać zakodowanie animacji oraz interakcji z użytkownikiem poprzez użycie wewnętrznych skryptów takich jak np. JavaScript. Podobne właściwości ma dostępny już od 10 lat format SWF, jednak ze względu na wstępną kompilację swf, jest on w praktyce formatem wewnętrznym dla środowiska Adobe (dawniej Macromedia). Mniej popularne formaty: AI, CDR, WMF” (http://wikipedia.pl).
-18-
2. Edycja grafiki rastrowej
Obraz grafiki rastrowej jest plikiem „reprezentującym pionowo-poziomą siatkę odpowiednio kolorowanych pikseli na monitorze komputera, drukarce lub innym urządzeniu wyjściowym. Kolor każdego piksela jest definiowany osobno.
Obrazki z głębią kolorów RGB często składają się z kolorowych pikseli zdefiniowanych przez trzy bajty - jeden bajt na kolor czerwony, jeden na zielony i jeden na kolor niebieski. Mniej kolorowe obrazki potrzebują mniej informacji na piksel, np. obrazek w kolorach czarnym i białym wymaga tylko jednego bitu na każdy piksel.
Grafika rastrowa różni się od wektorowej tym, że grafika wektorowa pokazuje obraz używając obiektów geometrycznych takich, jak krzywe” (http://wikipedia.pl).
Rys. 5. Przykład grafiki rastrowej (obróbka zdjęcia)
Bitmapę charakteryzują następujące podstawowe właściwości:
wysokość i szerokość bitmapy liczona jako liczba pikseli
liczba bitów na piksel opisująca liczbę możliwych do uzyskania kolorów
-19-
Komresja rastra
Kolorowa grafika rastrowa zwykle zawiera piksele z jednym do ośmiu bitów dla każdego z kolorów bazowych. „Jakość obrazka rastrowego jest określana przez całkowitą liczbę pikseli (wielkość obrazu) oraz ilości informacji przechowywanych w każdym pikselu (głębia koloru). Na przykład obrazek zapisujący 24 bity informacji o kolorze może pokazać łagodniejsze cieniowanie od obrazka zapisującego jedynie 15 bitów informacji na jeden piksel, ale też nie pokaże łagodniejszego obrazka od zapisującego 48 bitów na piksel. Podobnie, obrazek o wymiarach 640 x 480 pikseli (zawierający ok. 307 tys. pikseli) będzie wyglądał nierówno i chropowato w porównaniu do obrazka o wymiarach 1280 x 1024 (ponad 1,3 mln pikseli). Ponieważ taka ilość danych zajmuje ogromną powierzchnię, często stosuje się technikę kompresji danych celem zmniejszenia wielkości zajmowanego miejsca. Kompresję bezstratną umożliwiają np. Pliki PNG, TIFF, JPEG” („ABC Grafiki komputerowej R. Zimek, Ł. Oberlan, Helion, 2000)..
Niektóre techniki zamieniają (zmniejszają, usuwają) pewne informacje, aby uzyskać mniejszy plik. Niestety nie są to bezstratne metody kompresji. Przykładami takich kompresji są kompresje JPEG, GIF, a także stratne tryby kompresji PNG czy JPEG 2000.
Wielkość obrazka rastrowego nie może zostać zmiejszona bez utraty jego jakości. Jest to przeciwne grafice wektorowej, którą łatwo można skalować, dostosowując jej wielkość do urządzenia, na którym jest wyświetlany obraz. Grafika rastrowa jest bardziej użyteczna od wektorowej do zapisywania zdjęć i realistycznych obrazów, podczas gdy grafika wektorowa jest częściej używana do obrazów tworzonych z figur geometrycznych oraz prezentacji tekstu (w tym tabel i wzorów). Grafika rastrowa została opatentowana pierwszy raz przez firmę Texas Instruments i jest teraz wszechobecna. Zdjęcie z aparatu cyfrowego jest grafiką typu rastrowego. („ABC Grafiki komputerowej R. Zimek, Ł. Oberlan, Helion, 2000).
Implementacja przykładowej witryny www
Implementacja jest to proces pisania kodu źródłowego czyli programowanie lub efekt takiego procesu.
Szablon tytułowej witryny www (dołączonej do pracy) został napisany w programie Nvu (Windows). Oparty jest na języku html oraz arkuszach styli css. Projekt graficzny został wykonany w programie CorelDRAW12 oraz AdobePhotoshop5.
1. Etapy budowy witryny
Budowa witryny przebiegała w kilkunastu etapach:
zebranie informacji o charakterze strony, zawartości merytorycznej, jaką powinna posiadać, właścicielu strony itp (w tym przypadku jest to firma - „Piaskowiec” K. Goljanek, Zemborzyce Dolne, Lublin);
zgromadzenie odpowiednich materiałów fotograficznych (zdjęcia firmy, produktów itp.);
założenie folderu (platforma Windows XP), w którym przechowywane są wszystkie pliki, zktórych składa się witryna;
wstępna analiza i obróbka zdjęć w programie AdobePhotoshop5;
zaprojektowanie logo firmy, które zawiera wstępne informacje o wizerunku graficznym strony;
wykonanie 3 wstępnych projektów wizualizacji graficznej firmy (z uwzględnieniem różnej kolorystyki i formy);
konsultacje z klientem (wybór projektu graficznego);
przygotowanie galerii zdjęć w programie AdobePhotoshop5;
eksport części dokumentów z programu AdobePhotoshop5 do CorelDRAW12;
wykonanie projektów w programie CorelDRAW12:
„nagłówka” witryny;
„przycisków”, które służą jako odnośniki do innych stron witryny;
„mapy dojazdu” do firmy;
przygotowanie pliku *.css, który zawiera zewnętrzne arkusze styli css;
wykonanie szablonu witryny w języku html (program Nvu);
wybór serwera i hostingu dla witryny (darmowy serwer i hosting prv.pl – http://prv.pl);
„załadowanie” witryny na serwer przy pomocy klienta poczty Zilla.
-21-
2. Wykonanie szablonu witryny w języku html
Szablon tworzony w programie Nvu zawiera już wstępne znaczniki:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
</body>
</html>
2. 1. Znaczniki <HTML></HTML>
Znaczniki <HTML></HTML> zawierają przede wszystkim informację w języku, w jakim dany dokument jest zapisany czyli w html'u. Wszystkie inne znaczniki zawierają się w <HTML></HTML>, gdyż ten znacznik rozpoczyna i kończy dokument.
2. 2. Znacznik <HEAD></HEAD>
Znaczniki <HEAD></HEAD> są niezbędne, charakteryzują cały dokument i zawierają szereg niezbędnych informacji, niewidocznych dla klienta witryny „gołym okiem”
Tytuł strony zawiera słowa kluczowe, które są interpretowane przez przeglądarki:
<title>ASKIOWIEC PIASKOWIEC LUBLIN
kamieniarstwo|piaskowiec|wyroby z kamienia|budownictwo|elewacje</title>
Znaczniki META zawierają słowa kluczowe, język dokumentu, kodowanie, nazwisko autora strony, określają:
<meta name="description" content="PIASKOWIEC - wyroby kamieniarskie - Lublin Zemborzyce(marmur, granit, piaskowiec, konglomerat):
nagrobki, parapety, meble, schody, posadzki, kominki, balustrady;
maszyny do obróbki kamienia; płyty granitowe">
<meta name="keywords" content="polkam, marmur, granit, piaskowiec, kamieniarstwo, wyroby z kamienia, usługi kamienierskie, sprzedaż, obróbka kamienia, schody, parapety, blaty, okładziny, posadzki, balustrady, meble, kominki, nagrobki, obróbka kamienia, zemborzyce, lublin">
-22-
<meta name="author" content="mazurek">
<meta name="robots" content="all">
<meta name="revisit-after" content="10 days">
<meta http-equiv="content-language" content="pl">
<meta name="copyright" content="mazurek">
<meta name="reply-to" content="double_m@op.pl"> <meta http-equiv="window-target" content="_top">
2. 2. 1. Osadzone arkusze styli css
Znaczniki te zawierają m.in. „osadzone” style css :
<link rel="stylesheet" href="style.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
<style type="text/css">
<!--
body {background-color:#FFFFCC;}
P{color:red}
-->
<style fprolloverstyle="">a:hover {color:green;font-weight:bold}</style>
2. 2. 2. Zewnętrzne arkusze styli css
Osobny plik (css5.css) zawiera style „zewnętrzne” css umieszczone poza dokumentem HTML, do których znacznik atrybute type=”text/css” się odwołuje:
<link title="css" rel="stylesheet"
href="file:///C:/Documents%20and%20Settings/root/Desktop/dyplomowka/css5.css"
type="text/css">
2. 3. Znaczniki <BODY></BODY>
Znaczniki <BODY></BODY> zawierają treść właściwą, którą klient widzi w przeglądarce:
<body style="">
<div align="center">
<table style="width: 726px; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 152px;">
właściwa tresc
</td>
</tr>
</table>
</div></body>
Znacznik<body><//body> może ale nie musi zawirać style, wówczas umieszcza się je wewnątrz znacznika: <body style=””></body>.
2. 3. 1. Tabele, na których oparty jest szablon witryny
Poamiędzy tym znacznikami <body></body> umieszczone są tabele, aby dokument był spójny i wyglądał w miarę estetycznie we wszystkich przeglądarkach, w tabeli głównej zagnieżdżone są inne tabele. Oto część dokumentu zawierającego tabele w tabeli:
<table>
<td style="text-align: center; width: 554px;">
<tr>
<td
style="width: 152px; text-align: center; background-color: rgb(255, 255, 204);"><big><span
style="font-family: Lucida Console;"><br>
KAMIEŃ NATURALNY:</span></big></td>
<td>
(...)
</td>
</tr>
</td>
</table>
-24-
2. 3. 2. Style wewnętrzne css
Wewnątrz znaczników <body></body> umieszczone są też style wewnętrzne css:
style="width: 554px; text-align: center; background-color: rgb(255, 255, 204);"><big><span
style="font-family: Lucida Console;"></span></big><a
href="index.html"><img
style="border: 0px solid ; width: 59px; height: 39px;" alt=""
src="TOPoferta.jpg"></a>
<a href="galeria.html"><img
style="border: 0px solid ; width: 59px; height: 40px;" alt=""
src="TOPgaleria.jpg"></a>
<a href="cennik.html"><img
style="border: 0px solid ; width: 60px; height: 40px;" alt=""
src="TOPcena.jpg"></a> <a
href="kontakt.html"><img
style="border: 0px solid ; width: 58px; height: 39px;" alt=""
src="TOPkontakt.jpg"></a></td>
</tr>
2. 3. 3. Treść dokumentu i odnośniki
Treść dokumentu, osadzona w znacznikach <body></body> zawiera:
tekst właściwy (znaczniki <P></P> oraz <H></H>);
elementy graficzne (<img src+””>);
odnośniki do innych stron lub witryn internetowych (<a href=:”nazwa_pliku.html”></a>.
Przykładowa treść dokumentu wraz z odnośnikami do umiejscowienia obrazków (zapisanych w JPEG, PNG, GIF) lub innych stron/ podstron zapisanych w html:
<tr>
<td style="width: 152px; background-color: rgb(255, 255, 204);"><a
href="piaskowiec.html"><img
style="border: 0px solid ; width: 132px; height: 34px;" alt="piaskowiec"
src="G1.jpg"></a><br>
<br>
-25-
<img style="width: 132px; height: 33px;" alt="rustikal"
src="G2.jpg"><br>
<br>
<a href="lupany.html"><img
style="border: 0px solid ; width: 132px; height: 35px;" alt="łupany"
src="G3.jpg"></a>
(...)
<td
style="width: 554px; background-color: rgb(255, 255, 204); text-align: center;"><img
style="width: 269px; height: 202px;" alt="" src="r6.jpg"><br>
<br>
<span style="font-family: Lucida Console;">Rustikal,
kamień
elewacyjny najczęściej wykorzystywany jest w budownictwie, jako
elegancka forma elewacji domów, tarasów,
ścian
oranżerii oraz ogrodzeń.<br> </span>
( ...)
</td>
</table>
</body>
Szablon graficzny stony głównej zaprojektowany w AdobePhotoshop i CorelDRAW, zaimplementowany w Nvu, został następnie skopiowany do 9 innych podtron.
Wszytkie podstrony zostały opracowane pod względem treści i odnośników w indywidualny sposób.
Do jednej z podstron zawierającą galerię 22 miniatur obrazków, zostało dołączone 22 proste podstrony, zawierające jedynie tło graficzne i zeskalowane do większych rozmiarów odpowiedniki tych obrazków. Obrazki na tych podtronach stanowią treść właściwą strony oraz służą jako odnośniki do strony zwanej galerią.
Tak wykonany szablon, składający się ze strony głównej i 31 podstron wykonanych w html, ponad 100 grafik zapisanych w formacie gif, jpeg, png24 oraz pliku arkuszy styli css, został załadowany na serwer prv.pl przy pomocy klienta poczty Zilla.
-26-
V. Wnioski
Zostało wspomniane wcześniej, że „Poprawność wykonania witryny internetowej wyznacza jej popularność, częstość odwiedzin. Każda tworzona witryna powinna skupić się na preferencjach potencjalnych odbiorców. Pojawienie się w sieci ogromnej ilości stron internetowych spowodowało zalew informacji nie zawsze jednak podawanej w sposób przystępny dla użytkownika”(„Elementy graficzne na stronach www” P. Frankowski, Helion, 2005). W Internecie napotkać można różne witryny. Zarówno takie, gdzie bardzo łatwo można odnaleźć konkretne informacje (przejrzystość witryny, dobrze zbudowany projekt graficzny i łatwość w nawigacji sprawia, że intuicyjnie internauta wyszukuje konkretne informacje). Istnieją też serwisy, w których od początku gość czuje dyskomfort poruszania się (nadmierność grafiki, przesadne „upiększanie” witryny niestandardowymi przyciskami, grafiką flash i innymi podobnymi elementami).
Tytułowa witryna, która jest tematem tej pracy spełnia powyższe założenia. Posiada wiele grafiki, (na wyraźne życzenie klienta! i wyraźną popularność wśród internautów), jednak grafika ta jest przejrzysta i przekazuje wiele informacji o firmie. Wchodząc na stronę główną, internauta intuicyjnie porusza się po witrynie i pogłębia własną wiedzę na interesujący go temat (np. przyciski do podstron z konkretnym rodzajem kamienia są wykonane z obrazków danego kamienia oraz jednakowej kompozycji etykiety, co tworzy spójną całość).
Ponadto internauci-klienci firmy, którzy dotychczas mieli znikomą wiedzę na temat branży kamieniarskiej, po odwiedzeniu witryny zdobywają konkretną wiedzę na ten temat. Firma Piaskowiec dzięki tej witrynie zyskała wielu nowych klientów, którzy kontaktując się z właścicielem firmy są świadomi swoich potrzeb, ceny produktu oraz dojazdu do firmy, co zupełnie skróciło czas negocjacji.
Prosta witryna w języku html daje poczucie bezpieczeństwa, nie zawstydza Gościa, internauci często wracają do takich stron i polecają je innym, zaś strony pisane np.: we Flash często „odstraszają” i są odwiedzane zazwyczaj jednokrotnie.
Wyższość prostoty i estetyki nad „nieziemskim efektem” jest modny w krajach Europy Zachodniej, w Stanach Zjednoczonych, wszędzie tam, gdzie ludzie niepełnosprawni nie są dyskryminowani.
-27-
Spis
rysunków
Rys. 1. Zastosowanie grafiki w witrynie internetowej.................................................................5
Rys. 2. Logo w formacie JPEG.................................................................................................7
Rys. 3. Grafika komputerowa (wektorowa i rastrowa)............................................................16
Rys. 4. Skalowanie w grafice wektorowej i rastrowej.............................................................18
Rys.
5. Przykład grafiki rastrowej (obróbka
zdjęcia)...............................................................19
-28-