You are on page 1of 29

Projektowanie

architektury
informacji
stron WWW
Materiay do wicze

Opracowa
Stanisaw Skrka
Instytut Informacji Naukowej i Bibliotekoznawstwa
Uniwersytet Pedagogiczny w Krakowie

Rok akad. 2009/10

Spis treci

I. Wstp ........................................................................................... 7
II. Warsztat webmastera ................................................................. 7
III. Szablon strony WWW ................................................................ 8
IV. Wybrane znaczniki ..................................................................... 9
V. Odsyacze (linki) .......................................................................... 9
VI. Wstawianie grafiki i ta ............................................................ 10
VII. Tabele ..................................................................................... 11
VIII. Kaskadowe arkusze stylw (CSS - Cascading Style Sheets) ... 15
IX. RAMKI....................................................................................... 17
X. Architektura informacji stron WWW ........................................ 20
DODATEK....................................................................................... 25

Niniejszy skrypt jest pomoc do zaj m.in. ze specjalizacji z informacji


naukowej oraz projektowania systemw informacyjnych. Powsta w oparciu o
zbir liczne publikacje z tego zagadnienia oraz na bazie dowiadcze autora,
ktry od kilkunastu lat zajmuje si tworzeniem stron WWW. Oprcz tego
wykorzystane zostay take pozycje ksikowe wymienione w bibliografii.
Tylko do wasnego uytku w ramach zaj na specjalizacji
Metody pracy w bibliotece: informacja naukowa.
Instytut Informacji Naukowej i Bibliotekoznawstwa
Akademia Pedagogiczna w Krakowie
Materiay edukacyjne. Egzemplarz nie jest przeznaczony na sprzeda
Zebra i opracowa Stanisaw Skrka
Krakw padziernik 2008

Zagadnienia ujte w niniejszych materiaach nie wyczerpuj caoci problematyki


zwizanej z tworzeniem stron internetowych, zostay opracowane pod ktem
wicze z projektowania stron o charakterze informacyjnym i edukacyjnym.
Praca skada si z rozdziaw powiconych poszczeglnym problemom
projektowania stron internetowych. Na pocztku zamieszczony zosta program
zaj dla studentw, wraz z wyszczeglnieniem celw i umiejtnoci, jakie bd
oni nabywa oraz form realizacji zaj. Na kocu tej czci znalaza si wybrana
literatura oraz odnoniki do miejsc w Internecie, gdzie znajduj si wiadomoci
na temat projektowania.
W poszczeglnych rozdziaach znalazy si wskazwki dotyczce oglnych
wiadomoci o szkielecie dokumentu html, odnonikach, wstawianiu grafiki, tabel,
ramek, arkuszy stylw. Opisano take strategi planowania architektury
informacji serwisw internetowych.
Autor ma nadziej, i zebrane tu materiay pomog studentom w zrozumieniu
zasad tworzenia funkcjonalnych stron internetowych, jak rwnie oka si
pomocne w zajciach i w samodzielnej pracy.
Materiay uzupenione s o przykady tabel i stylw. Zawarto bdzie
modyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii
projektowania serwisw WWW.
Wszelkie komentarze i uwagi prosz wysya na adres: skorka@up.krakow.pl
Stanisaw Skrka

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

Metody pracy w bibliotece: informacja naukowa

Projektowanie stron WWW


Syllabus

2.1.3.

sposb kodowania polskich znakw, opis zawartoci treciowej strony


(sowa kluczowe Keywords, opis Description)

2.1.4.

etykieta webmastera, czyli zasady, jakimi powinien si kierowa


projektant stron WWW.

2.1.5.
PROGRAM ZAJ

1.

WWW
2.1.6. porwnanie

Opis celw.
1.1. Posugiwanie

si

Internetem

dziaalnoci

informacyjnej

edukacyjnej.
1.2. Zastosowanie architektury informacji w planowaniu i projektowaniu
stron i serwisw internetowych.
1.3. Poznanie jzyka HTML (HyperText Markup Language), XHTML,
CSS znajomo podstawowych poj (hipertekst, hipermedia, WWW,
DHTML, JavaScript, Script, przegldarka, edytor HTML, gif, jpeg,
odsyacz, znacznik, znaki specjalne, itp.)
1.4. Gromadzenie, opracowywanie i udostpnianie (prezentacja) informacji
w Internecie.

sposobu

prezentacji

tego

samego

dokumentu

2.2. (6 godz.) Projektowanie strony prywatnej. Uycie odsyaczy (odnonikw,


hiperczy - ang. links). Wykazy (listy numerowane i nienumerowane). Obsuga
edytora stron WWW Pajczek 2000.
rola odsyaczy w dokumencie hipertekstowym,
rodzaje odnonikw: etykieta (kotwica), odsyacz
konstrukcja odnonikw:
<a name=etykieta></a>;
<a href=adres_strony></a>
posta odnonika (tekst, ilustracja, animacja).

aktualnych wymaga i standardw (tabele, ramki, style, kolorystyka).


1.6. Posugiwanie si programami komputerowymi jak np.: edytor HTML,

stosowanie wykazw (list uporzdkowanych i nieuporzdkowanych),

1.8. Znajomo zasad budowy funkcjonalnych i efektywnych w uyciu


serwisw WWW
1.9. Wykonanie samodzielnie serwisu internetowego na wybrany temat
Opis treci
2.1. (4 godz.) Wprowadzenie do programowania. Cechy jzyka HTML,
XHML zasady tworzenia dokumentu hipertekstowego. Podstawowe
polecenia (znaczniki, ang. tags).
2.1.1. charakterystyka jzyka HTML 4.01 i jego wersji, rola W3C w
rozwoju jzyka.
2.1.2.

podstawowe elementy strony WWW (html, head, title, body,


meta)

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

przegldarkach Mozilla, Opera i Internet Explorer

1.5. Umiejtno tworzenia stron WWW (World Wide Web), wedug

klient FTP, edytor tekstu i in., do projektowania strony WWW.


1.7. Wykorzystywanie grafiki z Internetu

2.

zaprojektowanie prostej strony w oparciu o Pajczka 2000 edytor stron

Zadania:
1. Wykonanie strony na wybrany temat
2. Przygotowanie projektu pracy zaliczeniowej
2.3. (15 godz.) Elementy Kaskadowego arkusza stylw, wykorzystanie skryptw
jzyka JavaScript na stronie WWW.
2.3.1. rodzaje stylw: a\ doczone do zewntrznego arkusza (plik.css)
b\ zagniedone
<style type=text/css></style>

c\ importowane
d\ lokalne
e\ klasy i identyfikatory
class=klasa; ID=identyfikator)
f\ rozciganie stylu, bloki
<span></span>; <div></div>
3

przykady skryptw i ich rola w dokumencie hipertekstowym


2.4. (5 godz.) Wykorzystanie grafiki na stronie WWW. Programy

hierarchicznie:

graficzne i podstawy ich obsugi. Formaty plikw graficznych: .gif,


.jpg.

Iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhh

wady i zalety stosowania grafiki w dokumencie HTML,

jjjjjjjjjjjjjjjjddd
dddddddddddjh
hhhhhhhhhhhhhh
heeeeeeeeeeeee
eeeeeeeeeeeeee
eeeeeeeeeeeeee
e

eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeee

wstawianie grafiki do dokumentu:


seryjnie:

<img src=nazwa_pliku>
poznawanie programw graficznych, Paint Shop Pro,
Micrografx, podstawowe operacje przy obrbce ilustracji dla
strony hipertekstowej,
sposb prezentowania grafiki w sieci, formaty plikw i rnice

yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy

Ggggggggggggg
ggggggggggggg
gggggggggg

Lllllllllllllllllllll

ssssssssssssssss
sssssssssdddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
dddd

llllllllllllllllllllllllllllllll
llllllllllllllllllllllllllllllll
llllllllllllllllllllllgggg
ggggggggggggg
ggggggggggggg
ggggggggg

pomidzy nimi: gif (256 kolorw), jpeg (16 mln kolorw)


to w doku mencie, kolor i grafika jako to.

wirtualnie:
Ffffffffffffffffff
fffff333eeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeefffffffff
ffffffffffff333

Zadanie:
Projektowanie strony na wybrany temat (praca zaliczeniowa)

eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeefffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
ffffffffffffff
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhfffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffff

Forma realizacji: praca indywidualna studentw


uuuuuuuuuuuuu
uuuuuuuuuuuuu
uuuuuuFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFF

3. Materiay wytworzone przez uczestnikw zaj.


Podstawowym materiaem wykonanym na wiczeniach bdzie samodzielnie
opracowany i zaprojektowany zbir stron skadajcy si z kilku dokumentw

hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhh

FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFYYYYY
YYYYYYYY
Y

WWW poczonego hipertekstowo z zastosowaniem wyej wymienionych

Wykonane strony bd dotyczy konkretnej dziedziny lub zjawiska zwizanego z prac


dydaktyczn i informacyjn biblioteki.

elementw jzyka HTML. Praca ta zostanie przygotowana na dyskietce lub na


komputerze w pracowni, a nastpnie oddana do zaliczenia

4.

Ocena serwisu wykonanego przez studenta bdzie redni z trzech ocen wedug
kryteriw zaliczanych do architektury informacji: ocena za system organizacji

Do podstawowych umiejtnoci, jakie student powinien opanowa naley:


1/ Projektowanie dokumentw hipertekstowych zgodnie z aktualn specyfikacj jzyka

treci, za system nawigacji i za szat graficzn (layout)


Zaprojektowane strony mog by powizane wedug czterech sposobw:

HTML.

sekwencyjnie:
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
wwwwwwww
w

Eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeee

Oooooooooosss
ssssssssssooooo
ooooos,lmncfjdjd
jdjdjdjdjdididkcici
c i i i i ii i i
icidisixkxkxixicic
ickc

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

Umiejtnoci nabyte podczas zaj.

2/ Planowanie projektu stron oraz przebiegu pracy


3/ Wykorzystywanie elementw multimedialnych (ilustracja, dwik, film i animacja) do
wzbogacenia treci strony.
4/ Odnajdywanie informacji w Internecie.
5/ Znajomo podstaw architektury informacji dla stron WWW
6/ ciganie i wysyanie plikw za pomoc klienta FTP.
4

7/ Posugiwanie si witryn WWW w zakresie gromadzenia, przechowywania i


prezentowania informacji, oraz wykorzystywanie Internetu w dziaalnoci

8.
9.

dydaktycznej i informacyjnej biblioteki lub orodka informacji.

10. R. Patek, Z. Oko, Pajczek najlepszy polski edytor stron WWW. Gliwice 2000.
11. B. Danowski,, HTML 4. wiczenia praktyczne. Gliwice 2000

5. Ocena kursu
51-60 pkt. ocena dst

12. M. Sok, Tworzenie stron WWW. wiczenia praktyczne. Gliwice 2000

61-70 pkt. ocena + dst


71-80 pkt. ocena db
81-90 pkt. ocena + db
91-100 pkt. ocena bdb
6. Prace studentw
- opracowanie planu serwisu internetowego (10)

15. P. Wimmer: HTML stare i nowe. Warszawa 1997


16. M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Uyteczno w
praktyce. Gliwice 2008.
Kada ksika opisujca metodyk tworzenia stron WWW w jzyku HTML 4.0,
XHTML i CSS

przygotowanie projektu organizacji serwisu (15)


przygotowanie projektu nawigacji serwisu (15)

Czasopisma:

zaprojektowanie ukadu elementw na stronach (layout) (15)

1.

HTML i Java. Chip Special. 1997 nr 3 (kwiecie).

2.

M. Pawlak: HTML po raz czwarty // W: Chip 1998 nr 2, s. 128-137

3.

M. Pawlak: Internetowe DTP //W: Chip 1998 nr 3, s. 152-156.

4.

Kurs jzyka HTML w odcinkach w miesiczniku CHIP, numery: 5/98, 6/98,

7. Literatura zalecana
Ksiki:
1. S. Krug: Nie ka mi myle. O yciowym podejciu do funkcjonalnoci
stron internetowych. Gliwice 2006. Wyd. 2.
2.
3.

E. Meyer, CSS wg Ericha Meyera. Gliwice 2005


J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarzdzanie.

4.

Gliwice 2004.
J. Nielsen: Projektowanie funkcjonalnych serwisw internetowych.

5.

Gliwice 2003.
L. Rosenfeld, P. Morville: Architektura informacji w serwisach
internetowych. Gliwice 2003. Wyd. 2.

7.

13. D. Siegel: Tworzenie stron WWW. Bielsko-Biaa 1998


14. J. Szaniawski: Duy sownik informatyczny. Warszawa 1997

- wykonanie serwisu internetowego (min. 5 stron) (30)


Na ostateczn liczb punktw wpywa rwnie poziom przygotowania studenta
na zajciach oraz frekwencja.

6.

B. Danowski, Kaskadowe arkusze stylw. wiczenia praktyczne. Gliwice 2001


Z. Poski, Komputer, Internet. Szkolny sownik. Wrocaw 2001

7/98, 8/98, 10/98 (5 odc.)


5.

K. Grzenkowicz: Grafika dla webmastera.. W: Magazyn Internet, nr 6-12/98 i


1/99 (8 odc.)

6.

Strony WWW bez tajemnic. CHIP Special nr 13 (36), grudzie 1999.

7.

J. Rafa, Poradnik praktyczny. Cz 5. Tworzenie stron WWW. Magazyn


Internet nr 6/2002

8.

Mj serwis WWW. CHIP 2004 nr 2, s. 22-46

Strony WWW (Netgrafia):


1. CSS Templates [http://www.ssi-developer.net/main/templates/]

R. Williams, Jak skada tekst? Komputer nie jest maszyn do pisania.


Gliwice 2003. Wyd. 2

2.

Dynamic Drive CSS Library: [http://www.dynamicdrive.com/style/]

3.

Eric Meyer on CSS [http://www.ericmeyeroncss.com/dloads/]

M. Pearrow: Funkcjonalno stron internetowych. Gliwice 2002.

4.

Kurs jzyka HTML P. Wimmer: [webmaster.helion.pl]

5.

WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm]

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

6.

BRAMA - informacje na temat projektowania stron WWW P.


Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml]

7.

WEBMASTER czasopismo online dla profesjonalnych twrcw


stron WWW: [webmaster.pckurier.pl ]

8.

WebReporter: [web.reporter.pl/html]

9.

Test dziaania skadni HTML: web.reporter.pl/html/testy/

10. Designing Web Navigation:


[www.webreference.com/dlab/9705/index.html]
11. Artyku: Architektura informacji. Nowy kierunek rozwoju
informacji naukowej. [ebib.oss.wroc.pl/2002/40/skorka.php]

Opracowa dr Stanisaw Skrka

Notatki

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

I. Wstp
Strona WWW jest plikiem tekstowym zapisanym najczciej w formacie html
(ale moe to by take php, shtml, i inne) aby zaprojektowa stron wystarczy
zwyky Notatnik z Windows, by mc oglda jej zawarto potrzebna jest
przegldarka stron WWW (Internet Explorer, Mozilla, Netscape).
Sie zoona ze stron WWW wzajemnie poczonych za pomoc odsyaczy
hipertekstowych (linkw) nazywana jest World Wide Web (globaln pajczyn)
Skrt html oznacza jzyk projektowania: Hypertext Markup Language (jzyk
hipertekstowego znakowania dokumentw), aby strona bya widoczna w
przegldarce trzeba j zapisa jako plik .html, np.: index.html, default.html,
itp.
Aby przygotowa wasn stron (witryn) przede wszystkim naley zaplanowa
przebieg pracy, mona to zrobi opierajc si na nastpujcych fazach:
1. Faza analityczno-projektowa
analiza wymaga
ustalenie zasad pracy
plan realizacji
projekt podziau treci i szaty graficznej
projekt nawigacji i rozmieszczenia elementw na stronie
(layout)
2. Realizacja projektu
3. Testowanie i wdroenie
4. Promocja
5. Zarzdzanie i aktualizacja

<BR> - przejcie do nastpnej linii. Znacznik <EM></EM> formatuj tekst na posta


kursywy
W obrbie znacznikw, zarwno blokowych, jak i elementowych znajdowa si mog
atrybuty dokadniej charakteryzujce dany element, np. ilustracj
<img src="imagi2/bmiecznik.jpg" width="239" height="265" border="0"
alt="rozmiar: 31682 bajtw">
Atrybuty:
src- nazwa pliku graficznego, np.: logo.gif
width szeroko obrazka,
height wysoko obrazka
border grubo ramki wok obrazka
alt tekst zastpczy
Wicej na ten temat w rozdziale IV. Wybrane znaczniki
Wicej na ten temat w rozdziale VI. Wstawianie grafiki i ta
Atrybuty s przydatnym narzdziem dla webmastera ze wzgldu na moliwo
sprecyzowania wygldu danego elementu na ekranie, przy jednoczesnym uniemoliwieniu
wstawiania wartoci domylnych przez przegldark. Uywanie atrybutw skraca czas
adowania si strony w oknie przegldarki. Najwicej moliwoci formatowania daj
jednak kaskadowe arkusze stylw.

Wicej na ten temat w rozdziale X. Architektura informacji

Wicej na ten temat w rozdziale VIII. Kaskadowe arkusze stylw

Projektowanie w jzyku HTML polega na formatowaniu tekstu za pomoc


znacznikw (tags), s dwa rodzaje znacznikw: blokowe (wystpuj parami,
np.: <P></P>), oraz elementowe (pojedyncze, np.: <BR>). Dziaanie
znacznika blokowego obejmuje tekst, ktry jest nim ujty, np.:

II. Warsztat webmastera

<strong>to jest tekst pogrubiony</strong>


Znaczniki <B> oznaczaj pogrubienie tekstu, ktry znajdzie si pomidzy nimi.
Znacznik elementowe dziaaj w jednym miejscu w dokumencie, np.:
<strong>to jest tekst pogrubiony</strong >,<br>
<em>a to jest kursywa</em>

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

Do projektowania stron internetowych potrzebne s programy, z ktrych dua cze jest


dostpna za darmo, niestety czasem nie idzie to w parze z jakoci.
1.

Edytor stron WWW, np.: EzHTML (darmowy), Pajczek, Tiger 98, WebPager,
Xpress (darmowy), lub edytor tekstu (Notatnik Windows),

2.

Przegldarki WWW, co najmniej dwie: Netscape Navigator/Communicator 6.x (pol.


wersja Mozilla 1.x) i MS Internet Explorer PL 6.x

3.

Program do obrbki grafiki rastrowej: Paint Shop Pro 6.x X, , Adobe Photoshop,
GIMP (freeware), PaintNET (freeware)
7

4.

Jeeli edytor stron WWW nie ma takiej opcji, to naley jeszcze zaopatrzy
si w konwerter z Win-1250 (Latin 1) na stron kodow ISO 8859-2 (Latin
2) Ogonki 97

Dodatkowo:
5. Program do tworzenia gifw animownych: Jasc Animated Shop 2.02, Gif
Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63
6.

Galeri clipartw zbir adresw do grafik, ilustracji, tekstur i innych


przydatnych na stronach WWW obrazkw, dostpnych w Internecie pod
adresem:
http://webmaster.helion.pl/kurshtml/zasoby/grafika.html
http://www.kathais.px.pl/AGWWW/AGWWW.html

III. Szablon strony WWW


Podstawowy szablon dokumentu HTML przedstawia Rys. nr 1. Jest to tylko
osnowa, aby dokument zawiera tre lub grafik na ekranie, naley wstawi
odpowiednie znaczniki w sekcji <body> </body>.

Rys. 1 Szablon dokumentu html

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"


"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
<meta http-equiv="Creation-date" content="2004-02-26T21:29:01Z" />
<meta http-equiv="Content-Language" content="pl" />
<meta name="Description" content="Strona na temat..." />
<meta name="Author" content="Imi nazwisko" />
<title>Strona WWW</title>
</head>
<body>
<h1>Tytu strony</h1>
</body>
</html>
Rys. 2: Budowa hierarchiczna dokumentu HTML

Strona WWW zaczyna si i koczy znacznikiem <HTML>, wewntrz znajduj


si dwie oddzielne sekcje <HEAD>, czyli gowa i <BODY> - ciao
dokumentu.
W sekcji HEAD umieszcza si tzw. metainformacj (informacj o informacji)
o stronie, znaczniki <META>, ich zadaniem jest przechowywanie informacji o
treci strony: Description, Keywords, autorze strony Author, stronie kodowej
Content-type, jzyku treci strony Content-language. Informacje te s
przydatne midzy innymi dla zindeksowania strony przez tzw. roboty
wyszukiwarek, co pozwala na ich odnalezienie za pomoc wyszukiwarek
internetowych (Google, Szukacz, itp.)

Hierarchia dokumentu html zawiera:

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

Drzewo dokumentu (document tree) - hierarchiczny ukad elementw


HTML zakodowanych w dokumencie; kady element ma dokadnie
jednego rodzica, oprcz elementu najwyszego w hierarchii.
Dziecko (child) - element bdcy o jeden szczebel niej w drzewie w
stosunku do danego elementu.
Potomek (descendant) - element bdcy o jeden lub wicej szczebli
niej w drzewie w stosunku do danego elementu.
Rodzic (parent) - element o jeden szczebel wyej w drzewie w
stosunku do danego elementu.
Przodek (ancestor) - element bdcy o jeden lub wicej szczebli wyej
w drzewie w stosunku do danego elementu.
Brat (sibling) - element majcy tego samego rodzica co inny element;
jeli znajduje si obok niego, to jest to brat przylegajcy (adjacent
sibling).

</ol>
<p></p>
<span></span>
<sup></sup>
<title></title>
<ul>
<li> </li>
<li> </li>
</ul>

wypunktowanie

Znaczniki elementowe
<br>

IV. Wybrane znaczniki

<hr>
<meta name="" content="">

Znaczniki blokowe

<img src="">

V. Odsyacze (linki)

<a href=""></a>
<a name=""></a>

Odsyacze s podstawowym narzdziem nawigacji, dziki ktremu moliwe jest poruszanie


si pomidzy stronami. Istnieje wiele podziaw hiperczy, w jednym z nich wyrnia si
odsyacze semantyczne (OS) i organizacyjne (OO). OS kieruj do tekstu lub dokumentu o
podobnej tematyce, OO umoliwiaj poruszanie si po poziomach i rozdziaach w danej
hiperprzestrzeni. Z punktu widzenia webmastera odsyacze mona podzieli wg kryterium
zastosowania. I tak, wyrnia si odsyacze kierujce do:

<body></body>
<div></div>
<em></em>
<h1></h1>

a)
b)
c)
d)

<h2></h2>
<h3></h3>
<h4></h4>

stron WWW (zewntrzne)


usug sieciowych (e-mail, ftp, CHAT)
etykiet (tekstu w obrbie dokumentu - wewntrzne)
innych dokumentw, np.: txt, PDF, doc, itp.

Ad. a) hipercze do stron(y) WWW moe mie dwojak posta:

<h5></h5>
<h6></h6>

- wzgldn

<strong></strong>
<ol>
<li> </li>

<a href="strona.html" title="to jest tre dymka">etykieta odsyacza</a>


lista numerowana

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

- bezwzgldn
<a href="http://www.ap.krakow.pl/kbin/html/szablon.html"
title="to jest tre dymka">szablon strony www</a>

Adresy stron WWW powinny by pisane maymi literami bez polskich znakw,
podobnie nazwy plikw html.

HREF skrt od hypertext reference

VI. Wstawianie grafiki i ta


TITLE opis odsyacza, informacja, dokd kieruje
Ad. b) odsyacz uruchamiajcy klienta poczty elektronicznej
<a href="mailto:skorkas@poczta.fm" title="mj email">skorkas@poczta.fm</a>
-

uruchamiajcy sesj FTP:

<a href="ftp://sunsite.icm.edu.pl" title="ftp">serwer ftp</a>


Ad. c) Skada si z dwch czonw:
- odsyajcego (np.: jako fragment spisu treci):
<a href="#01">rozdzia 1</a>
- etykiety umieszczonej gdzie na stronie
<a name="01">rozdzia 1</a>
Najpopularniejsze zastosowanie to spisy treci i powrt na pocztek strony:
<a href="#top">pocztek strony</a>
W przegldarce MSIE 6.x nie jest konieczne zastosowanie etykiety
<a name=top></a>
Ad. d) kieruje do dokumentu nie bdcego stron WWW, takich jak: txt, doc
czy pdf , np.:
<a href="teksty/referat.pdf" title="tekst referatu">referat w wersji
on-line</a>
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

Pliki graficzne mog by udostpniane na stronie WWW w formacie GIF (do 256 kolorw)
i JPG (16 mln kolorw). Format GIF nadaje si do napisw, poniewa potrafi zachowa
przezroczyste to, ale ma ma liczb kolorw. Format JPG jest najlepszy do kolorowej
fotografii i obrazw.
1. Wstawianie grafiki do dokumentu
Podstawowa konstrukcja ma nastpujc posta: <img src="plik_graficzny">
IMG - skrt od sowa image (ilustracja), SRC - skrt od sowa source (rdo)
2. Warianty wywietlania ilustracji:
* wielko modyfikujemy atrybutami: width (szerokoc) i height (wysoko),
jednostk miary s piksele
Np. <img src="krajobraz.gif" width=200 height=50 alt=Krajobraz
grski>
- atrybuty te przyspieszaj adowanie si obrazka.
obramowanie: parametr BORDER=x pozwala wywietli wok obrazka
ramk o gruboci rwnej x pikseli:
Np. <img src="krajobraz.gif" width=120 height=160 alt=Tekst
zamienny style=border: 5px solid black>
- gdy ilustracja jest odsyaczem parametr BORDER: 0px spowoduje, e nie pojawi si
ramka wok ilustracji.
* odstpy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal
space) pozwalaj ustali odlego obrazka, w pikselach, od oblewajcego go tekstu:
Np. <img src="obrazek.gif" width=120 height=160 alt=tekst zamienny
hspace=50>
- ten obrazek jest oddalony 50 pikseli od tekstu w poziomie
pozycjonowanie obrazka (CSS): specjalny zesp parametrw,
text-align:left/right lub float: left/right steruje pozycj obrazka w stosunku
do oblewajcego go akapitu. Konstrukcja ma posta
10

Np. <IMG SRC="obrazek" style=text-align: right;> lub


<IMG SRC="obrazek" style=float: right> oblewanie tekstu z
prawej strony

tego wanie celu, to w przypadku projektowania dokumentw hipertekstowych pole do


zastosowania tabel jest znacznie szersze. Ale zacznijmy od podstaw.
Aby zobaczy jakkolwiek tabelk w oknie przegldarki trzeba wpisa jej oglne ramy bez
atrybutw.
<table border=1>
<tr>
<td> zawarto komrki 1</td><td> zawarto komrki 2</td>
</tr>
<tr>
<td> zawarto komrki 3</td><td> zawarto komrki 4</td>
</tr>
</table>

Jeli obrazek ma by na rodku strony to naley uj go pomidzy znaczniki :


<div style=text-align: center>
<img src= >
</div>

Due ilustracje mona pokroi na okrelon liczb kawakw, a nastpnie


wstawi je do tabeli, pozwoli to na szybsze adowanie si caego obrazka.
Wicej na ten temat w rozdziale VII. Tabela pkt. 3.

Otrzymamy:

Aby przyspieszy adowanie si grafiki mona na stronie poprzedzajcej


wstawi znacznik ilustracji z atrybutami szerokoci i wysokoci rwnymi 1,
np..:
<img src="obrazek.gif" width=1 height=1 hspace=0
vspace=0>

Zawarto komrki 1

Zawarto komrki 2

Zawarto komrki 3

Zawarto komrki 4

3. To na stronie WWW.
Definiujc <BODY> moemy wstawi parametr, ktry zadecyduje o graficznej
postaci strony.

Definicja tabeli musi by umieszczona midzy tymi dwoma znacznikami <TABLE>, ktre
stanowi jej ograniczniki. W ich ramach s umieszczane definicje rzdw <TR>, definicje
komrek w rzdach <TD>, konkretne dane w komrkach, tytu tabeli i nagwki wierszy i
kolumn <TH>.

<body style=background: url(adres_obrazka)> albo kolor


Np. <body style=background: #fff">
- wywoanie pliku .jpg z folderu images
dodatkowy parametr: bgproperties=fixed spowoduje, e w
przegldarce IE 4.x to bdzie stao w miejscu, a tekst przesuwa.
Wicej na ten temat w rozdziale VIII. Kaskadowe arkusze stylw

VII. Tabele
1. Podstawy projektowania tabel.
Adaptujc tabele dla potrzeb WWW kierowano si gwnie potrzeb prezentacji
danych tabelarycznych w postaci takiej, jak widzimy w ksikach czy
prezentacjach multimedialnych. O ile w edytorach tekstw su one gwnie do
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

Tabela w HTML samodzielnie rozkada kolumny na stronie, dostosowuje ich szeroko i


wysoko a take zawarto.
wiczenie:
Zaprojektuj tabelk z trzema kolumnami i picioma wierszami (zob. poniej).
1
2
3
4
5

11

Aby tabela zawieraa obramowanie, wystarczy rozszerzy definicj o atrybut


BORDER=n, gdzie n - liczba pixeli.
Niekiedy wycza si obramowania, gdy dodatkowe linie wpywaj ujemnie
na jej czytelno. Zamiast obramowania najlepiej jest wyrni tekst w
komrkach: pogrubieniem, kursyw lub inn czcionk itd.. Efekt bez
obramowa osiga si poleceniem: BORDER=0
2. Odstpy wewntrz tabeli. Wyrwnanie danych w komrkach
Kolejnym atrybutem pozwalajcym modyfikowa wygld tabeli jest
CELLSPACING - odlego midzy komrkami, czyli grubo
obramowania, jeli jest ono widoczne.
Mona go uy wwczas, gdy komrki (nie tabela) maj zawiera inne
obramowanie ni domylne. Innym atrybutem znacznika TABLE jest
CELLPADDING - odstp zawartoci komrki od obramowania. Obydwa
atrybuty dziaaj na wszystkich czterech cianach komrki.
Np.:
<table border=5 cellpadding=8 cellspacing=15>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Zarwno ca tabel, jaki i zawarto w jej komrkach (celach) mona ustawia
w poziomie i pionie. Pierwszy sposb zapewnia atrybut ALIGN, uycie go
razem ze znacznikiem TABLE powoduje wyrwnanie caej tabeli, wiersza,
komrki. W pionie ustawiamy zawarto poprzez atrybut VALIGN

wiersz 1
wiersz 2

<tr><td align=left></td></tr>
Dane w tej komrce przesun si do lewego marginesu, to samo mona zaprojektowa dla
kolumny w obrbie wiersza.
Np.
<td align=center></td>
Oprcz wyrwnania poziomego dane w kolumnach moemy wyrwnywa pionowo za
pomoc parametru VALIGN, ktry moe przybiera nastpujce wartoci: top (gra).
middle (rodek), bottom (d).
<td valign=top></td>
<td valign=middle></td>

gra

rodek

<td valign=bottom></td>

3. Szeroko i wysoko tabeli

Aby okreli szeroko tabeli w obrbie znacznika TABLE umieszcza si atrybut WIDTH.
Warto tego parametru mona wyrazi w procentach (wielko wzgldna) lub pikselach
(wielko bezwzgldna)
Np.
<TABLE BORDER WIDTH=60%> </TABLE>

lub

Np.:
<table border=5 cellpadding=8 cellspacing=15
align=right>

<TABLE BORDER WIDTH=600> </TABLE>

Wysoko tabeli oznacza si atrybutem HEIGHT


Ta tabela bdzie znajdowaa si przy prawym marginesie (zob. poniej), inne
polecenia: left (lewy) i center (rodek)

Wielkoci bezwzgldne najlepiej jest stosowa, gdy w komrkach tabeli znajduj si


elementy obrazka, w przeciwnym wypadku pojawi si przerwy pomidzy kawakami
obrazka.

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

12

<td>komrka dolna</td>
</tr>

Widok:
Wiersze
poczone

Komrka grna
Komrka dolna

Rys. nr 3

Wielkoci wzgldne dopasowuj si do okna i rozdzielczoci monitora, najlepiej


je stosowa, gdy w tabeli znajduje si tylko tekst.
4. Atrybuty COLSPAN i ROWSPAN
COLSPAN - liczba kolumn, na ktre rozciga si komrka (przykad nr 1)
ROWSPAN - liczba wierszy, na ktre rozciga si komrka (przykad nr 2)

5. Tabele i arkusze stylw


Tabel mona zaprojektowa take za pomoc stylw, co pozwala na precyzyjniejsze jej
dostosowanie do wasnych celw.
Kademu elementowi tabeli (komrce, ramce) mona nada inn posta.
Poniej zamieszczono cechy oraz ich wartoci przydatne przy projektowaniu tabel.
border-bottom-style - styl okrela wygld dolnej ramki
border-left-style - styl okrela wygld lewej ramki
border-right-style - styl okrela wygld prawej ramki
border-top-style - styl okrela wygld grnej ramki
Wartoci stylu:

Przykad nr 1
<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0"
cellspacing="0" align="center">
<tr>
<td colspan="2">kolumny poczone</td>
</tr>
<tr>
<td width="20%">kolumna lewa</td>
<td width="80%">kolumna prawa</td>
</tr>
</table>

Widok:
Kolumny poczone
Kolumna lewa

Kolumna prawa

Przykad nr 2:
<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0"
cellspacing="0" align="center">
<tr>
<td width="20%" rowspan="2">wiersze poczone</td>
<td width="80%">komrka grna</td>
</tr>
<tr>
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

none - nie ma ramki, warto domylna


hidden - linia ukryta
dotted - linia skadajca si z kropek
dashed - linia skadajca si z kresek
solid - linia tradycyjna
groove - linia wklsa przestrzenna
ridge - linia wypuka przestrzenna
inset - linia wklsa
outset - linia wypuka
double - linia podwjna
inherit - przejcie wartoci "rodzica",
border-left-width - styl okrela szeroko lewej ramki
-right-width
-bottom-width
-top-width
border-bottom-color - styl okrela kolor dolnej ramki
-left-color - styl okrela kolor lewej ramki
-right-color - styl okrela kolor prawej ramki
-top-color - styl okrela kolor grnej ramki

13

Przykad 1. Tabela z zastosowaniem stylw


<table style="border-style: dotted; border-width:
thin; border-color: #86708f; padding: 0px; width: 730; text-align: center;
vertical-align: top">
<tr>
<td>
<p>komrka lewa</p>
</td>
<td>
<p>komrka prawa</p>
</td>
</tr>
</table>

Przykad 2
<table style="border-top-style: dotted; background-color: #eeeeee ; width:
70%; height: 20%">
<tr><td>
<p>Pojedyncza komrka</p>
</td></tr></table>

Tabel mona konstruowa take za pomoc znacznika DIV:


<div style="position: absolute; left: 400px;
top: 195px; height: 160px; width: 270px;
background-color: #E2DDE8; border : 1px black solid;
border-color: #000033; padding-right: 1px; padding-left :
2px;">
<p>Komrka tabeli</p>
</div>
Wicej na ten temat w rozdziale VIII. Kaskadowe arkusze stylw
NOTATKI

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

14

VIII. Kaskadowe arkusze stylw


(CSS - Cascading Style Sheets)
Oglne polecenie stylu ma posta: selektor { cecha: warto } lub bardziej
rozbudowan: selektor { cecha1: warto1; cecha2: warto2 }.
Gdzie selektorem jest po prostu polecenie jzyka, np. P, LI, TD, BODY itd.
Cech jest pewna wasno danego znacznika, np. wielko i styl czcionki dla
akapitu. Warto konkretyzuje cech, np. 12pt czy bold dla czcionki.
Przykad nr 1
P {font-family: Trebuchet MS }
Selektorem jest P, cech - rodzina czcionek, wartoci - Trebuchet MS.
Style mog by umieszczane w dokumencie na kilka sposobw:
1.

Kody formatujce s umieszczane na pocztku strony i oddziauj na cay


dokument.
NP.: Fragment nagwka dokumentu z definicj znacznikw BODY i P

<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-2">
<title>Zagniedanie arkusza stylw</title >
<meta name="description" content="style">
<style type="text/css">

body {margin-top: 0px; background-color: #ffffff; color:


#000000; scrollbar-face-color: #d8c094;
scrollbar-highlight-color: #aab0bf;
scrollbar-3dlight-color: #271e0e;
scrollbar-darkshadow-color: #c0dcc4;
scrollbar-shadow-color: #271e0e;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #425241;
}
p {font-size: 10pt; font-family: arial, helvetica; font-weight:
normal}
</style>
</head>

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

2. Kody formatujce s umieszczane w rodku tekstu (in-line style) i dotycz


wybranego znacznika dokumentu (styl lokalny).
NP.: Waciwoci ujte w cudzysw dotycz tylko czci dokumentu objtej
znacznikami <P></P>
<P style="font-size: 12pt; font-weight: bold; font-family:
Helvetica">Tre akapitu</P>

3.

Klasy, obejmuj dowolny fragment dokumentu i nie s zwizane z wybranymi


znacznikami.

NP.: Daj duo moliwoci webmasterowi, pozwalaj dowolnie manipulowa akapitami


na stronie WWW. U dou klasy dla znacznika <P>, rozpoczynaj si od kropki.

<head>
<style type="text/css">
p.normalny {font-family: helvetica; font-size: 10pt}
.przypisy {font-family: helvetica; font-size: 8pt}
.uwagi {font-family: helvetica; font-size: 10pt; fontweight: bold}
.istotne {font-family: georgia, serif; font-size: 12pt;
color: red}
.ustaw {position: absolute; left: 2px; top: 3px; right:
10px; bottom: 10%}
</style>
</head>
<body>
<p class=istotne>Jaki tekst</p>
</body>

W gwnej czci dokumentu klasa zostaje wstawiona w obrbie nawiasw <>


4. Kody formatujce s umieszczane na wzorcowych stronach na serwerze, a
w dokumentach wstawiamy odpowiednie odwoania do tych stron, co
powoduje automatyczne zmiany sposobu formatowania. S to odwoania do
tzw. stylw zewntrznych.
NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane rne elementy, takie jak:
body, p., a, h1-h3, td, li

15

body {background-image: url(folder/plik.jpg);


background-repeat: no-repeat; background-position:
center; background-attachment: fixed;; margin-left:
1cm; margin-right: 1cm; margin-top: 1cm}
p {font-family: "arial", verdana, helvetica; font-size: 10pt;
font-weight: normal; text-indent: 3 em}
a {text-decoration: none; font-weight: bold}
a:link {color: #000000}
a:active {color: #660000}
a:visited {color: #666600}
a:hover {color: #0066ff}
h1 {font-size: 16pt; font-family: verdana, arial, helvetica;
font-weight: bold; color: #000000}

h1 span {font-size: 14pt; color: navy}


h2 {font-size: 14pt; font-family: arial, helvetica; fontweight: bold; color: #181539}
h3 {font-family: arial, helvetica; font-weight: bold; color:
#181539}
table, tr, td {font-family: arial, helvetica; font-size: 10pt;
font-weight: normal}
li {font-family: "arial", helvetica; font-size: 10pt; fontweight: normal}
#center {text-align: center}
.maly {font-size: 8pt}
.italic {font-style: italic}

Dokument ten znajduje si na serwerze pod podan wyej nazw, korzystaj z


niego wszystkie te strony, ktre w nagwku <HEAD> maj nastpujcy zapis:
<link rel=stylesheet href="mojstyl.css" type="text/css">
5. Kody formatujce s importowane z innej strony za pomoc polecenia
@import.
Np.: Podany jest adres bezwzgldny do arkusza stylw mojstyl.css
<style>
@import url("http://www.polbox.com.pl/style/mojstyl.css");
</style>
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

Przyklad interaktywnego menu


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title>1</title>
<meta http-equiv="Content-Language" content="pl">
<meta name="Author" content="Jacek">
<style type="text/css">
#menu {margin: 0 0 0 0; width: 200px; border-right: 1px dotted; }
#menu ul {list-style-type: none; margin: 0; padding: 0}
#menu li a {padding: 3px 3px 3px 5px; display: block; background: #09C; borderbottom: 1px solid #fff; height: 35px; font: 9pt 'Trebuchet MS',
'Lucida Grande', Arial, sans- serif; color: #fff; text-decoration: none;
border-right: 5px solid #42D0FF}
#menu li a:visited {color: #DBE3F7}
#menu li a:hover {background: #F60; color: #000; border-right: 5px solid #fff}
</style>
</head>
<body style="margin: 0 0 0 0">
<div id="menu">
<ul>
<li><a href="" title="">Okadka</a></li>
<li><a href="" title="">Karty tytuowe</a></li>
<li><a href="" title="">Materiay wprowadzajce</a></li>
<li><a href="" title="">Tekst gwny</a></li>
<li><a href="" title="">Materiay uzupeniajce tekst gwny</a></li>
<li><a href="" title="">Materiay informacyjno-pomocnicze</a> </li>
</ul>
</div>
<p><a href="05.html" title="">&laquo; poprzednia</a>&nbsp;&nbsp;<a
href="01.html" title="">nastpna &raquo</a></p>
</body>
</html>

16

IX. RAMKI
1. Wstp
Ramki uatwiaj nawigowanie w wielostronicowych dokumentach HTML,
pozwalaj na przegldanie wielu dokumentw rwnoczenie (tzw. format
metadokumentowy). Aby uy tej nowej formy prezentacji dokumentw WWW
trzeba utworzy zbir ramek na stronie podstawowej *.html, na ktrej
definiujemy liczb, wielko i pozycj ramek oraz zachowanie si innych
dokumentw w momencie uaktywnienia odsyacza hipertekstowego. Pozostae
strony, wchodzce w skad caego, wielostronicowego dokumentu, s stronami
podrzdnymi.
Na podstawowej stronie nie powinno by adnych znacznikw poza blokiem
nagwkowym i definicj samych ramek. Dopiero znaczniki NOFRAMES
pozwalaj umieci tre, ktra bdzie wywietlana przez przegldarki
nieinterpretujce ramki. Znaczniki <BODY></BODY> mog by umieszczane
jedynie w obrbie NOFRAMES.
2. Ramki w postaci kolumn
Kady z wydzielonych w pliku gwnym obszarw jest zajmowany przez
okrelon stron. U dou przykad strony podstawowej, objtej znacznikami
FRAMESET zamiast BODY, zawierajcej podzia na dwie kolumny -parametr
COLS dzieli ekran kolumny - pierwsza od lewej o szerokoci 25% ekranu,
druga o rozmiarach dalszych (75%).
Znacznik FRAME i parametr SRC przypisuje okrelonym czciom ekranu
zawarto (czyli strony WWW), atrybut SCROLLING steruje wywietlaniem
paskw przewijania i moe zawiera warto: auto, yes, no.
NAME oznacza nazw dla okrelonej czci ekranu.
<HTML>
<HEAD>
<TITLE>Ramki</TITLE>
</HEAD>
<FRAMESET COLS="25%,*%">
<FRAME SCROLLING="auto" NAME="lewa_cz"
SRC="strona.htm">
<FRAME SCROLLING="yes" NAME="prawa_cz"
SRC="strona2.htm">
</FRAMESET>
</HTML>

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

wiczenie 1:
Przepisz przykad strony z lewej nadajc mu nazw okno.htm W miejsce nazw
strona.htm i strona2.htm wpisz nazwy dwch stron utworzonych na poprzednich
zajciach. Zobacz w przegldarce jak wyglda strona okno.htm. Powinny by widoczne
dwie poprzednio wprowadzone strony

3. Ramki w postaci wierszy


Podobny schemat z wyjtkiem polecenia COLS moemy zastosowa dla innego podziau
ekranu. Parametr ROWS dzieli ekran na wiersze.
wiczenie 2:
Przepisz poniszy przykad strony podstawowej dla ramek i nadaj jej nazw okno2.htm.
Dalej postpuj tak jak w wiczeniu nr .
<HTML>
<HEAD>
<TITLE>Ramki z wierszami</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SCROLLING="auto" NAME="gra"
SRC="strona1.htm">
<FRAME SCROLLING="auto" NAME="d"
SRC="strona2.htm">
</FRAMESET>
</HTML>

4. Ramki wielodokumentowe
Objanienie (do listingu poniej)
W pierwszej linii otwieramy dokument. Konstrukcj ramek rozpoczto od zadeklarowania
w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawilimy ramk z
przypisan jej stron, gdy wiersz nie ulega adnemu podziaowi.

17

</HTML>
<FRAMESET ROWS=100,*,200>
<FRAME SRC=strona1.htm>
<FRAMESET COLS=35%,*,35%>
<FRAME SRC=strona2.htm>
<FRAME SRC=strona3.htm>
<FRAME SRC=strona4.htm>
</FRAMESET>
<FRAME SRC=strona5.htm>
</FRAMESET>
</FRAMESET>
</HTML>

Powrmy do przykadu przedstawionego wyej w wiczeniu nr 1. Strona ta skada si z


dwch ramek. Lewa zawiera spis treci, natomiast do prawej s adowane odpowiednie
strony z opisami. Lewej nadalimy nazw lewa_cz, natomiast prawej prawa_cz.
Naley dokona pewnych manipulacji na stronie, ktra jest stale widoczna w lewej ramce o
nazwie lewa_cz. Do ramki tej jest adowana strona zawarta w pliku o nazwie strona.htm.
Lista tematw zawiera odsyacze do odpowiednich stron. Naley je tak skonstruowa, aby
kliknicie na odsyaczu przywoywao wskazan stron, ale zarazem adowao j do ramki
o nazwie prawa_cz. Mona to uczyni za pomoc nastpujcej konstrukcji:
<A HREF="Egipt.html" TARGET="prawa_cz">EGIPT</A>

itd.
Analizujc poszczeglne czony powyszego zapisu:
W czwartej linii ponawiamy definicj FRAMESET (niszego rzdu), dzielc
drugi wiersz na trzy kolumny.
W pitej, szstej i sidmej linii wstawiamy definicje konkretnych trzech ramek
dla drugiego wiersza, przypisujc im odpowiednie strony.
W smej linii musimy zakoczy t "lokaln" definicj FRAMESET.
W dziewitej linii tworzymy definicj ramki dla trzeciego wiersza, przypisujc
jej odpowiedni stron.
W dziesitej linii koczymy "globaln" definicj FRAMESET. W jedenastej cay
dokument.
wiczenie 3:
Przepisz powyszy kod dla ramki wielodokumentowej. Zamiast nazw
stronaN.htm (N - numer) wpisz nazwy stron, ktre zostay zaprojektowane,
zmodyfikuj wygld tych stron, tak aby byy prawidowo wywietlane w ramce
(formatowanie tekstu, zmniejszenie czcionki itd.)
5. Odsyacze
Co zrobi, aby kliknicie na odsyaczu w jednej ramce automatycznie adowao
odpowiedni stron w innej ramce? Jest to podstawowa sprawa, jeli chcemy
wykorzysta ramki w dokumentach. Zauwamy, e kliknicie na odsyaczu w
spisie treci w lewej ramce powoduje zaadowanie dokumentu do prawej ramki,
a nie do ramki ze spisem treci. W tym miejscu wykorzystujemy nazwy, ktre
nadawalimy poszczeglnym ramkom.
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

HREF="nazwa_adowanej_strony" - dotyczy nazwy pliku, w ktrym jest zapisana


dana strona,
TARGET="nazwa_ramki" dotyczy docelowego miejsca, do ktrego ma by zaadowana
strona.
Wida tutaj rol, jak peni nazwy ramek.
Istniej cztery zastrzeone nazwy w przypadku atrybutu TARGET:
TARGET="_blank" - otwiera si nowe, czyste okno przegldarki, ktre
pojawia si przed poprzednim
TARGET="_self" - odsyacz aduje si w swoim wasnym okienku
TARGET="_parent - odsyacz aduje si w penym wymiarze okienka, nawet
gdy ogldamy je w innej ramce
TARGET="_top" - likwiduje wszystkie ramki i przenosi Ci pod wskazany
adres URL w czystym okienku przegldarki,
wiczenie 4:
Zmodyfikuj plik, ktry zastpi w wiczeniu 1 plik strona.htm, wpisujc odsyacze kierujce
strony do ramki prawej nazwanej prawa_cz,
a nastpnie wprowad jeden odsyacz kierujcy wywoan stron do czystego okna
przegldarki.
6. Inne parametry dla ramek
Do innych atrybutw przydatnych dla ramek i stosowanych dla znacznika FRAME nale:
FRAMEBORDER - wyczanie/wczanie obramowania
trjwymiarowego, np. FRAMEBORDER=0 (wyczanie),
18

MARGINHEIGHT - odstp midzy grn i doln krawdzi


ramki a jej zawartoci,
MARGINWIDTH - odstp midzy praw i lew
krawdzi a zawartoci ramki,
NORESIZE - uniemoliwienie zmiany rozmiaru ramki
(normalnie mona to robi)
Niektre atrybuty w obrbie znacznika FRAMESET:
BORDER - dodatkowy odstp pomidzy ramkami w
pikselach,
BORDERCOLOR - kolor obramowania,
COLS - podzia okna w poziomie (na kolumny),
ROWS - podzia okna w pionie (na wiersze)

NOTATKI

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

19

X. Architektura informacji stron WWW


Projektujc stron z myl o publikowaniu w Internecie, niezalenie od jej
przeznaczenia, naley pamita o tym, e bd z niej korzysta uytkownicy o
rnych umiejtnociach i wiedzy, dlatego na pocztku projektowania naley
wzi pod uwag rozmaite kryteria wpywajce na jej funkcjonalno. Zesp
kryteriw uwzgldnianych podczas tworzenia stron internetowych okrela si
mianem architektury informacji (AI) stron WWW.
AI jest procesem organizowania, oznaczania, projektowania nawigacji i
systemw wyszukiwawczych, ktre pomagaj uytkownikom w znajdowaniu i
zarzdzaniu informacj. W Polsce ten termin nie jest jeszcze zbyt popularny, ale
w Stanach Zjednoczonych posiada ju spor literatur i nadal si rozwija.
Przykadowy plan tworzenia architektury informacji

Projektowanie AI obejmuje cztery gwne obszary wymienione w definicji powyej:


1. Organizowanie informacji
2. Projektowanie systemw nawigacji
3. System oznacze
4. System wyszukiwawczy

1. Organizowanie informacji
Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie
treci, polegajce na podzieleniu caoci informacji na mniejsze fragmenty, ktre bd ze
sob powizane. Jest to szczeglnie wane przy rozbudowanych serwisach tematycznych.
Podstaw organizacji treci moe by przedmiot, zadanie, uytkownicy, geografia,
chronologia czy porzdek alfabetyczny. Najczstszym schematem organizowania jest
hierarchia (Rys. nr 4).

1. Wyznaczenie celw
2. Uytkownicy
2.1. okrelenie odbiorcw
2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze
uytkownikw)

Rys. nr 4

3. Zawarto treciowa serwisu


3.1. grupowanie informacji
3.2. organizowanie i oznaczanie treci
4. Struktura serwisu
4.1. zaprojektowanie budowy serwisu
4.2. wykonanie szkicu serwisu
4.3. zaprojektowanie systemw nawigacji globalnej i lokalnej
5. Projektowanie szaty graficznej
5.1. rozmieszczenie elementw na stronach
5.2. szkice projektowe
5.3. wykonanie serwisu na bazie projektw

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

Kryteriami, ktre powinien uwzgldni architekt informacji podczas tworzenia struktury


hierarchicznej dla zbioru stron, s szeroko i gboko. Szeroko odnosi si do liczby
opcji, z ktrych moe wybiera uytkownik na danym poziomie w hierarchii, gboko do
liczby tych poziomw w serwisie.
Wybr hierarchii powinien by uzaleniony m.in. od iloci informacji, przeznaczenia
serwisu i preferencji uytkownikw.
le zaprojektowana hierarchia sprawia, e informacje s niedostpne dla uytkownikw.
Zbyt wska i gboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentw
podczas poszukiwa, co moe sta si przyczyn zjawiska zagubienia w hiperprzestrzeni.
Z kolei zbyt szeroka i wska stawia uytkownika przed wyborem jednej z bardzo wielu
opcji, zjawisko takie nazwano przeadowaniem poznawczym.
Dla hierarchii wsko-gbokiej optymalnym rozwizaniem jest podzia do najwyej piciu
poziomw. Strona gwna (powitalna) dla serwisu opartego na hierarchii szeroko-pytkiej
powinna udostpnia wybr opcji (odnonikw) w liczbie ok. 7-9, nie wicej ni 10.
20

Przekroczenie tej granicy powoduje wspomniane ju zjawisko przeadowania


poznawczego.

Rys. nr 7

Rys. nr 5

Serwisy, w ktrych planowane jest powikszanie zasobw powinny by


projektowane z zastosowaniem raczej hierarchii szeroko-pytkiej oraz
jednoznacznych oznakowa, tak, aby zminimalizowa zabdzenie w systemie.

Rys. nr 6

Rys. nr 7
System hipertekstowy

2. Projektowanie systemw nawigacji


System nawigacji jest podstawowym narzdziem przemieszczania si, zarwno po
niewielkich zbiorach dokumentw, jak i obszernych serwisach i katalogach stron WWW.
Jennifer Fleming scharakteryzowaa potrzeby uytkownika nawigujcego, ktre warto
wzi pod uwag w trakcie projektu.
1. Gdzie jestem?
2. Dokd mog i (przemieci si)?
3. Jak si tam dosta?
4. Jak wrc do miejsca gdzie teraz jestem?
W zalenoci od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiaj si
szczegowe potrzeby, takie jak:
Skd powinienem zacz?
Czy potrzebna jest mi specjalna wiedza lub narzdzie?
Jak otrzyma odpowiedni dla mnie informacj?
Co zrobi, jeli pojawi si pytania?
To tylko niektre z potrzeb szczegowych.
Ta sama autorka podaa zasady funkcjonalnego systemu nawigacyjnego:
1. atwy do nauczenia
2. Konsekwentny
3. Zgodny z treci strony (kontekstem)
4. Dostarcza informacji (interaktywny)
5. Oferuje wybr opcji
6. Uywa jasnych i zrozumiaych oznacze
7. Zgodny z przeznaczeniem serwisu
8. Pomaga w dotarciu do celu

Oprcz hierarchicznych schematw organizacyjnych wystpuje take system


hipertekstowym, umoliwiajcy dowolne przegldanie zasobw
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

21


Wskazwki projektowania nawigacji dla webmasterw:
Rozmieszczaj informacje starannie, tak, aby uytkownik zawsze
wiedzia w ktrym miejscu systemu si znajduje
Nie zmuszaj uytkownika do przerwania jego pracy przez podawanie
odsyaczy do innych stron, aplikacji lub miejsc
Umieszczaj kontrol nawigacji w systemie
Zabezpiecz gwny kontekst poszukiwa (interakcji), aby uytkownik
nie musia go sobie odtwarza
Minimalizuj opnienia sieci poprzez czyteln i jasn nawigacj i
zredukuj czas adowania si

Ad. c/ lokalny s.n. stosowany w rozbudowanych serwisach WWW, uzupenia globalny


s.n., wykorzystywany do poczenia podstron w serwisie.

Ad. d/ dorany s.n. (ad hoc) oparty na odsyaczach znajdujcych si w tekcie,


widocznych jako wyrniony tekst.

Typy systemw nawigacji


a. hierarchiczny
b. globalny
c. lokalny
d. dorany
Ad. a/ hierarchiczny s. n. podstawowy s.n. oparty na zasadzie nadrzdnoci i
podrzdnoci, ze strony nadrzdnej odsyacze kieruj do stron podrzdnych
(Rys. nr 8).
Wicej w rozdziale 1. Organizowanie informacji

Inne podziay systemu nawigacji


- poprzeczna (pozioma) obejmuje strony z tego samego poziomu, pozwala przejrze
tre na okrelonym poziomie serwisu

- pionowa (gboka) kieruje w gb hierarchii, zgodna z przedmiotem poszukiwa

Rys. nr 8

Ad. b/ globalny s.n. najczciej uzupenia hierarchiczn organizacj


informacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u dou
kadej strony serwisu, na podstronach mog znajdowa si dodatkowo
odsyacze powrotne kierujce do strony gwnej.
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

Narzdzia nawigacji
- paski nawigacyjne
- ramki
- menu cigane (pull-down)
- mapy odsyaczy
- indeksy stron
- okruchy chleba zaznaczanie trasy nawigowania poprzez zmian koloru
odsyaczy kierujcych do odwiedzonych stron
22

widok rybiego oka umieszczenie odsyaczy do stron


znajdujcych si najbliej biecej.

O nas | Reklama u nas | Ogoszenia | Ochrona prywatnoci | Kontakt | Mapa


serwisu

3. System oznacze

Ad. b) Terminy indeksowe


Potrzebne do odnalezienia strony przez wyszukiwark, umieszcza si je w sekcji <HEAD>

Oznaczenia s to terminy, sowa i frazy uywane w serwisie do identyfikowania


jego treci.
S dwa rodzaje systemw oznacze: tekstowy i obrazkowy (ikony). Uywane s
jako:
- odsyacze do fragmentw informacji na innych stronach, jako termin
indeksowy lub jako oznaczenie (etykieta) odsyacza.
- nagwki suce do zidentyfikowania fragmentw informacji oraz do
rozdzielenia informacji na mniejsze kawaki na tej samej stronie.

<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">


<meta http-equiv="reply-to" content="autor@komputer.pl">
<meta http-equiv="content-language" content="pl">
<meta name="keywords" content="hobby, konie, psy, hodowla, ">
<meta name="description" content="strona na temat mojego hobby">
<meta name="author" content="imi nazwisko">
<title>moje hobby</title>

Typy systemw oznacze (s.o.)

Wicej na ten temat w rozdziale III. Szablon strony WWW

a)
b)
c)
d)

Oznaczenia w systemie nawigacji


Oznaczenia w postaci terminw indeksowych
Oznaczenia odsyaczy
S.o. w postaci ikon

Ad. a) Przyjto stosowanie oznacze dla czsto stosowanych znacznikw, np.:


Strona gwna, Home kieruj do strony powitalnej, organizujcej dostp do
caoci zasobw

Ad. c) Oznacze i etykiet uywa si rwnie jako odsyaczy, maj due znaczenie, gdy
ich lokalizacja oraz zawarto mog decydowa o ruchach uytkownika nawigujcego lub
poszukujcego informacji w serwisie. Odsyacze najczciej znajduj si poza gwnym
tekstem (zewntrzne) oraz w tekcie, wyrniane kolorem, gruboci lub podkreleniem.
Ad. d) Odsyacz jako ikona powinien by stosowany w sytuacjach gdy jej znaczenie jest
jednoznaczne. Zastpienie odsyacza tekstowego ikon moe sprawi, i uytkownik nie
skorzysta z niego gdy nie bdzie rozumia jego znaczenia.
Przykady niektrych ikon w roli odsyaczy:

Szukaj, Wyszukaj, Site Map, Indeks stron kieruj do narzdzia


wyszukiwawczego lub uruchamiaj akcj
Napisz do nas, Komunikaty, Webmaster informacja o autorach, zespole
redakcyjnym serwisu
Help, FAQ, Pomoc wsparcie dla odwiedzajcych serwis po raz pierwszy
Co nowego, News - informacja o ostatnich aktualizacjach, historia
aktualizacji

informacja

e-mail

strona gwna

ksiga goci

wstecz

przykad z portalu onet.pl

Przykad:
oznaczenia zamieszczone u dou strony (www.gazeta.pl):

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

23

4. Szkic strony
Projektowanie przebiega szybciej, jeeli wczeniej zostanie opracowany szkic
strony z rozmieszczonymi elemenatmi na ekranie. (layout). Poniej podano dwa
przykady szkicw.

Szkic nr 3
Rozplanowanie
zawartoci strony z
projektem kolorystyki

Szkic nr 2:
Strona gwna czasopisma
w Internecie

Szkic nr 4
Rozplanowanie zawartoci
strony

Szkic nr 3:
Strona z tekstem artykuem,
(element wikszej caoci)

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

24

DODATEK
A. Sowniczek
Najwaniejsze definicje zwizane z projektowaniem stron
internetowych.
ActiveX Obiektowa technologia rozszerzajca moliwoci jzyka HTML
opracowana przez Microsoft, umoliwia wspuytkowanie informacji przez
rne aplikacje oraz dostp do funkcji systemowych
Analiza konkurencji (competitive analysis) dokument wykazujcy rnice
pomidzy stron nad ktr pracuje grupa a konkurencyjnymi stronami.
Wykazane rnice i strony porwnawcze zale od celw analizy. Typ
dokumentacji strategicznej.
Apache bezpatny, udostpniany na zasadach Open Source, zestaw
oprogramowania dla serwerw HTTP. Apache powsta na bazie serwera NCSA
httpd 1.3. i pocztkowo przeznaczony by wycznie dla systemw UNIXowych (Linux, Solaris, AIX). Obecnie, w wersji 2 dostpny jest take dla
systemw Windows 9x/NT/2000/XP, AmigaOS, BeOS.
Architektura informacji sztuka i nauka organizowania informacji pomocnej
uytkownikom w zaspokojeniu ich potrzeb informacyjnych. AI obejmuje
badanie, analiz, projektowanie i wdraanie.
Diagramy przepywu (flow charts) wizualzacja jakiego procesu, zazwyczaj
skupiajcego si na konkretnym zadaniu lub funkcji. Dla procesu opartych na
serwisach internetowych diagram przepywu reprezentuje z reguy seri
ekranw gromadzcych i wywietlajcych informacje uytkownikom. Inne
nazwy: przepywy, przepywy uytkownika, diagramy przebiegu. Rodzaj
dokumentu projektowego
Dokumentacja dostarczana (deliverables) dokument (zbir dokumentw)
tworzony podczas opracowywania projektu serwisu WWW w celu uatwienia
komunikacji, ujcia decyzji i zachcania do innowacji. Nale tu: dokumentacja
potrzeb uytkownika (user needs documentation), dokumentacja strategiczna
(strategy documentation), dokumentacja projektowa (design documentation).

Druciana ramka, model w postaci szkieletu (wireframe) uproszczony widok zawartoci


kadego ekranu, jaki pojawi si w produkcie finalnym, pozbawiony koloru, stylw
typograficznych i ilustracji. Inne nazwy: schemat, plan, prototyp, projekt. Rodzaj
dokumentu projektowego
Dziedziczenie polega na tym, e elementy nisze w hierarchii drzewa dokumentu (Rys. nr
2) dziedzicz formatowanie elementw lecych wyej w hierarchii, chyba, e wyranie
nadamy im inne formatowanie. Przykadowo, jeli ustalimy, e tekst w jakiej tabeli ma by
przedstawiony za pomoc pogrubionej czcionki Arial, to wszystkie komrki tabeli bd w
ten sposb formatowane, gdy komrka <TD> ley niej w hierarchii (drzewie dokumentu)
ni tabela <TABLE>. Jeli natomiast nadamy odrbne formatowanie wybranej komrce
(utworzymy wyjtek), to oczywicie wygld czcionki w tej komrce zmieni si, gdy
bezporednie zdefiniowanie czcionki w wybranym miejscu ma pierwszestwo przed
oglniejszym formatowaniem tabeli (na wyszym szczeblu). Jeli wyranie nie
zdefiniujemy formatowania dla jakiego elementu, dziedziczy on wasnoci po swoich
przodkach, czyli elementach wyszych w hierarchii.
CSS (Cascading style sheets) Kaskadowe arkusze stylw
Cache - specjalny katalog w przegldarce WWW, gromadzcy grafik wczytywan w
trakcie przegldania zasobw sieci. Gdy po raz kolejny sigamy do tej samej strony,
przegldarka wczytuje na ekran grafik z cache'a, a nie z Internetu, co znacznie przyspiesza
wczytanie caej strony i oszczdza czas. Im wikszy cache, tym wiksza moliwo
magazynowania grafiki. Optymalna wielko powinna siga 10-15 megabajtw.
Cookie (ang. ciasteczko) mechanizm przechowywania stanu klienta przy kolejnych
zadaniach kierowanych do serwera. Pozwala zapamitywa informacje o uytkownikach
korzystajcych z usug internetowych.
DHTML (Dynamic HTML) termin okrelajcy jzyk HTML wraz z jego
rozszerzeniami umoliwiajcymi tworzenie interaktywnych i animowanych stron WWW.

Flash - technologia firmy Macromedia (wprowadzona w 1997 r.) pozwalajca tworzy


interaktywne, multimedialne, bazujce na grafice wektorowej elementy stron WWW. Do
tworzenia prezentacji flash suy program Flash. Wprowadza on wasny format plikw
(.swf), do odczytania ktrego niezbdne jest wyposaenie przegldarki we wtyczk Flash
Player (standardowo jest ona obecna w Internet Explorerze i Netscape Navigatorze w
wersjach 4.0 i wyszych).
Formularz - dokument internetowy, ktry pozwala czytelnikowi strony w interakcyjny
sposb pobiera lub przesya informacje. Przykadem formularza moe by ankieta
prowadzona przez autora strony, ktry zbiera od czytelnikw informacje pewnego typu (np.

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

25

wiek, pe, wykonywany zawd, posiadany sprzt itp.). Formularzem jest strona
Ankieta w niniejszym kursie, ktra zawiera pola wyboru i pola tekstowe.

Hit trafienie, adres strony WWW wywietlony przez wyszukiwark w odpowiedzi na


haso wyszukiwawcze.

Edytor HTML - program sucy do tworzenia dokumentw internetowych w


standardzie HTML. Chocia jest moliwe zbudowanie dokumentu
internetowego za pomoc kadego, nawet najprostszego edytora tekstw,
edytory HTML s tworzone, aby przyspiesza i automatyzowa proces
konstruowania stron WWW, uwalniajc uytkownika od rcznego
wprowadzania polece HTML. Wikosz edytorw pracuje w trybie
"tekstowym", wywietlajc wszystkie znaki sterujce (polecenia) HTML,
niektre pozwalaj tworzy dokumenty w trybie "graficznym", masujc kody
jzyka, a stosowane s te edytory pozwalajce wprowadza poszczeglne
elementy w sposb cakowicie zautomatyzowany, za pomoc zestawiania
"klockw".

Internet sie komputerowa rozlega (WAN) o zasigu globalnym, oglnowiatowy zbir


wzajemnie poczonych sieci komputerowych lokalnych (LAN) i rozlegych. Umozliwia
publikowanie informacji oraz komunikowanie si, najpopularniejsze usugi internetowe to:
e-mail, World Wide Web, CHAT, FTP i Usenet

Element - kod, znacznik HTML

JavaScript jzyk skryptowy interpretowany bezporednio przez przegldark WWW,


uywany do tworzenia krtkich programw doczanych do kodu HTML.

GIF (Graphic Interchange Format) format zapisu plikw posiadajcy du


moliwo kompresowania, maksymalna liczna kolorw 256, posiada
waciwo zachowywania koloru przezroczystego. Najczciej
wykorzystywany w kolorowych napisach i banerach
HTML HyperText Markup Language jzyk hipertekstowego znakowania
dokumentu, obecnie stosowana wersja nosi numer 4.0
Heksadecymalny oparty na systemie szesnastkowym; operujcy na 16
wartociach: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Hipercze (odsyacz, odnonik, link) skadnik systemu hipertekstowego element dokumentu elektronicznego kierujcy do innego fragmentu tego samego
dokumentu lub do dokumentu znajdujcego si w zupenie innej lokalizacji
Hipermedia system hipertekstowy zawierajcy elementy multimedialne
(tekst, grafika, film, dwik)
Hipertekst (system hipertekstowym) rodzaj bazy danych posiadajcej
aktywne odsyacze pozwalajce uytkownikowi skoczy do innych czci tej
bazy. H. pozwala na niesekwencyjne przegldanie zasobw. Elementami
skadowymi h. s wzy (strony WWW) i odsyacze (hipercza). Wyrnia si
dwa rodzaje s.h.: skupiony znajdujcy si w jednym miejscu (noniku) i
rozproszony wzy znajduj si na ronych, oddalonych od siebie
komputerach (WWW).

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

JPG, JPEG (joint Photographic Export Group)


Format graficzny stosowany w Internecie, najlepszy do kolorowych fotografii I obrazw,
zachowuje do 16 mln. Kolorw.
Java zorientowany obiektowo jzyk programowania niezaleny od platformy sprztowej
i systemowej, opracowany przez Sun Microsystem

Kaskadowo - polega na ustaleniu hierarchii rde stylw. Pierwszestwo maj style


zdefiniowane "bliej" konkretnego elementu. Przegldarka sprawdza, wic najpierw, czy
istniej jakie arkusze zewntrzne i stosownie do ich definicji formatuje stron. Nastpnie
sprawdza, jakie s definicje stylw w nagwku strony i modyfikuje wygld zgodnie z ich
ustaleniami. Nastpnie sprawdza style w samym dokumencie i ponownie modyfikuje
fizyczn posta strony.
Mapa strony (site map) wizualna reprezentacja struktury serwisu WWW. Inne nazwy:
model strukturalny, taksonomia, hierarchia, model nawigacji, struktura serwisu. Rodzaj
dokumentu projektowego.
Metainformacja (informacja o informacji) informacja o elementach ukadu
informacyjnego lub procesach informacyjnych
Model pojciowy (concept model) wykres prezentujcy zwizki pomidzy rnorodnymi
abstrakcyjnymi pojciami. Mona stosowa technik modelowania pojciowego w rnych
sytuacjach (warunkach) do wyjanieni a odmiennych aspektw strony internetowej. Inne
nazwy: mapa poj, diagram podobiestw. Typ dokumentacji strategicznej
Nawigowanie metoda poszukiwania informacji w hiperprzestrzeni polegajca na
poruszaniu si pomidzy dokumentami za pomoc hiperczy
Nawigacja system architektury informacji serwisu internetowego zaprojektowany w celu
poczenia ze sob poszczeglne dokumenty w hiperprzestrzeni

26

PHP - Hypertext Preprocesor. Jzyk skryptowy sucy do tworzenia


programw oraz interpreter wykonujcy je po stronie serwera (server-side
scripting). Bloki kodu PHP umieszczane s bezporednio w dokumencie HTML.
Przed wysaniem do przegldarki serwer przekazuje dokument HTML
interpreterowi PHP, ktry tumaczy komendy PHP oraz wykonuje
odpowiadajce im operacje.
Persony (personas) Sumaryczna reprezentacja docelowych uytkownikw
systemu, czsto opisywani jako realni ludzie. W kadym projekcie mona mie
jedn lub wicej person, kada reprezentowa moe odmienny typ odbiorcw
systemu. Inne nazwy: profil uytkownika, definicje rl uytkownika, profile
odbiorcw. Naley do dokumentacji potrzeb uytkownika
Plan testu uytecznoci (usability test plan) opis celw, metod i podejcia do
testu uytecznoci. PTU obejmuje kilka rnych elementw, od profili
uczestnikw testw do zarysu dyskusji z uytkownikami. Moe skada si z:
test obiektw, test logistyki, profile uytkownika i scenariusz. Typ dokumentacji
potrzeb uytkownika.
Podstrona (angielskie subpage), strona WWW dostpna ze strony biecej za
pomoc cznika hipertekstowego.
Portal rodzaj wielotematycznego serwisu internetowego poprzez, ktry
uytkownicy sieci maj dostp do najnowszych informacji z rnych dziedzin.
P. wyposaone s w mechanizm wyszukiwania plikw (stron WWW)
w Internecie oraz katalog stron WWW. Za pomoc portalu mona otrzyma
najnowsze informacje z rnych dziedzin. Najwiksze wiatowe portale to
Yahoo, Altavista czy Lycos, za w Polsce Onet i Wirtualna Polska.
Projekty ekranu (screen designs) zbir ilustracji w elektronicznym formacie
graficznym prezentujcych finalny wygld stron internetowych. Inne nazwy:
kompleksowe ekrany, makieta, projekt strony, projekt wizualny, projekt
graficzny, projekt interfejsu, projekt koncepcji, adne obrazki. Rodzaj
dokumentu projektowego
Przegldarka wyspecjalizowany program komputerowy sucy do
wyszukiwania i przegldania danych okrelonego typu, zw. udostpnianych w
rozlegych sieciach komputerowych; np. przegldarki WWW. Najpopularniejsze
obecnie p. to Microsoft Internet Explorer i Netscape Navigator.

Serwis WWW zbir stron WWW na okrelony temat, z wyrnion stron gwn
(powitaln) oraz podstronami (ang. web site).
Spis zawartoci (content inventory) lista wszystkich informacji zawartych na stronie
WWW, cznie z danymi opisujcymi informacje z wielu punktw widzenia, jak odbiorcy
docelowi lub pooenie. Inne nazwy: analiza treci, audyt treci. Typ dokumentacji
strategicznej
Strona WWW, witryna (angielskie WWW page),
dokument hipertekstowy (hipermedialny) opracowany w jzyku HTML, udostpniony na
widok publiczny w sieci Internet za pomoc usugi WWW w celach informacyjnych,
handlowych, propagandowych itp.; sieciowa wizytwka firm i poszczeglnych osb (liczba
stron WWW przekroczya ju miliard).
Strona prywatna (angielskie home page), dokumenty opracowane w jzyku HTML,
bdce wizytwk osoby lub instytucji w sieci usug hipertekstowych WWW;
Strona startowa strona WWW, ktra pojawia si na ekranie wraz z uruchomieniem
przegldarki. W opcjach kadej przegladarki mona zmienia adres strony startowej
W3C (World Wide Web Consortium) Midzynarodowe forum firm i organizacji
zajmujce si rozwojem i promocj sieci World Wide Web (rok. za. 1994), ksztatuje obraz
Sieci poprzez tworzenie nowych standardw internetowych, np.: jzyka HTML, CSS, XML
i protokou http. Dyrektorem jest Tim Berners-Lee - twrca WWW. Srona WWW:
www.w3c.org
Webmaster osoba projektujca strony i serwisy internetowe.
Wortal rodzaj portalu powicony jednej brany (dziedzinie ycia), np.: Wirtualna
historia ksiki i bibliotek
WYSIWYG (What You See Is What You Get), widzisz to, co otrzymasz tryb pracy
programu, w ktrym posta materiaw przygotowywanych zbliona jest do efektu, jaki
mona uzyska po ich wydrukowaniu.

Raport uytecznoci (usability report) naley do dokumentacji potrzeb


uytkownika. Wynik testu uytecznoci, z ktrego rezultaty daj si przeoy
na dziaanie. Typ dokumentacji strategicznej
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

27

B. Kolory
Nazwy kolorw wraz z zapisem szesnastkowym
(heksadecymalnym).
Kolor w zapisie szesnastkowym musi by poprzedzony
znakiem#,
np.: color: #FFFFFF

antiquewhite
FAEBD7
agua 00FFFF
aquamarine 7FFFD4
azure F0FFFF
beige F5F5DC
bisque FFE4DC
black 000000
blanchedalmond FFEBCD
blue 0000FF
blueviolet 8A2BE2
brown A52A2A
cornsilk FFF8DC
crimson DC143C
cyan 00FFFF
darkblue 00008B
darkcyan 008B8B
darkgoldenrod B8860B
darkgreen 006400
floralwhite FFFAF0
ghostwithe F8F8FF
gold FFD700
honeydew F0FFF0
ivory FFFFF0
khaki F0E68C
levender E6E6FA
levenderblush FFF0F5
lightyellow FFFFE0
linen FAF0E6
magenta FF00FF
maroon 800000
mediumblue 0000CD
mediumorchid BA55D3
mediumvioletred CD1585
mistyrose FFE4E1
moccasin FFE4B5
navy 000080
Projektowanie stron WWW. Materiay do wicze.
IINiB UP w Krakowie

oldlace FDF5E6
olive 808000
olivedrab 6B8E23
orange FFA500
papayawhip FFEFD5
peachpuff FFDAB9
purple 800080
red FF0000
seagreen 2E8B57
seashell FFF5EE
tomato FF6347
turquoise 40E0D0
violet EE82EE
wheat F5DEB3
white FFFFFF
whitesmoke F5F5F5
yellow FFFF00
yellowgreen 9ACD32

28

NOTATKI

Projektowanie stron WWW. Materiay do wicze.


IINiB UP w Krakowie

29

You might also like