Skrypt Do Specjalizacji
-
Upload
stanislaw-skorka -
Category
Documents
-
view
34 -
download
0
description
Transcript of Skrypt Do Specjalizacji
PPrroojjeekkttoowwaanniiee aarrcchhiitteekkttuurryy iinnffoorrmmaaccjjii ssttrroonn WWWWWW
Materiały do ćwiczeń
Opracował Stanisław Skórka Instytut Informacji Naukowej i Bibliotekoznawstwa Uniwersytet Pedagogiczny w Krakowie
Rok akad. 2009/10
Spis treści
I. Wstęp ........................................................................................... 7
II. Warsztat webmastera ................................................................. 7
III. Szablon strony WWW ................................................................ 8
IV. Wybrane znaczniki ..................................................................... 9
V. Odsyłacze (linki) .......................................................................... 9
VI. Wstawianie grafiki i tła ............................................................ 10
VII. Tabele ..................................................................................... 11
VIII. Kaskadowe arkusze stylów (CSS - Cascading Style Sheets) ... 15
IX. RAMKI....................................................................................... 17
X. Architektura informacji stron WWW ........................................ 20
DODATEK ....................................................................................... 25
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
2
Tylko do własnego użytku w ramach zajęć na specjalizacji Metody pracy w bibliotece: informacja naukowa.
Instytut Informacji Naukowej i Bibliotekoznawstwa
Akademia Pedagogiczna w Krakowie
Materiały edukacyjne. Egzemplarz nie jest przeznaczony na sprzedaż
Zebrał i opracował Stanisław Skórka
Kraków październik 2008
Niniejszy skrypt jest pomocą do zajęć m.in. ze specjalizacji z informacji naukowej oraz projektowania systemów informacyjnych. Powstał w oparciu o zbiór liczne publikacje z tego zagadnienia oraz na bazie doświadczeń autora, który od kilkunastu lat zajmuje się tworzeniem stron WWW. Oprócz tego wykorzystane zostały także pozycje książkowe wymienione w bibliografii.
Zagadnienia ujęte w niniejszych materiałach nie wyczerpują całości problematyki związanej z tworzeniem stron internetowych, zostały opracowane pod kątem ćwiczeń z projektowania stron o charakterze informacyjnym i edukacyjnym.
Praca składa się z rozdziałów poświęconych poszczególnym problemom projektowania stron internetowych. Na początku zamieszczony został program
zajęć dla studentów, wraz z wyszczególnieniem celów i umiejętności, jakie będą oni nabywać oraz form realizacji zajęć. Na końcu tej części znalazła się wybrana literatura oraz odnośniki do miejsc w Internecie, gdzie znajdują się wiadomości na temat projektowania.
W poszczególnych rozdziałach znalazły się wskazówki dotyczące ogólnych
wiadomości o szkielecie dokumentu html, odnośnikach, wstawianiu grafiki, tabel, ramek, arkuszy stylów. Opisano także strategię planowania architektury informacji serwisów internetowych.
Autor ma nadzieję, iż zebrane tu materiały pomogą studentom w zrozumieniu zasad tworzenia funkcjonalnych stron internetowych, jak również okażą się pomocne w zajęciach i w samodzielnej pracy.
Materiały uzupełnione są o przykłady tabel i stylów. Zawartość będzie modyfikowana i aktualizowana sukcesywnie wraz z rozwojem technologii projektowania serwisów WWW.
Wszelkie komentarze i uwagi proszę wysyłać na adres: [email protected]
Stanisław Skórka
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
3
Metody pracy w bibliotece: informacja naukowa
Projektowanie stron WWW Syllabus
PROGRAM ZAJĘĆ
1. Opis celów.
1.1. Posługiwanie się Internetem w działalności informacyjnej i
edukacyjnej.
1.2. Zastosowanie architektury informacji w planowaniu i projektowaniu
stron i serwisów internetowych.
1.3. Poznanie języka HTML (HyperText Markup Language), XHTML,
CSS znajomość podstawowych pojęć (hipertekst, hipermedia, WWW,
DHTML, JavaScript, Script, przeglądarka, edytor HTML, gif, jpeg,
odsyłacz, znacznik, znaki specjalne, itp.)
1.4. Gromadzenie, opracowywanie i udostępnianie (prezentacja) informacji
w Internecie.
1.5. Umiejętność tworzenia stron WWW (World Wide Web), według
aktualnych wymagań i standardów (tabele, ramki, style, kolorystyka).
1.6. Posługiwanie się programami komputerowymi jak np.: edytor HTML,
klient FTP, edytor tekstu i in., do projektowania strony WWW.
1.7. Wykorzystywanie grafiki z Internetu
1.8. Znajomość zasad budowy funkcjonalnych i efektywnych w użyciu
serwisów WWW
1.9. Wykonanie samodzielnie serwisu internetowego na wybrany temat
2. Opis treści
2.1. (4 godz.) Wprowadzenie do programowania. Cechy języka HTML,
XHML zasady tworzenia dokumentu hipertekstowego. Podstawowe
polecenia (znaczniki, ang. tags).
2.1.1. charakterystyka języka HTML 4.01 i jego wersji, rola W3C w
rozwoju języka.
2.1.2. podstawowe elementy strony WWW (html, head, title, body,
meta)
2.1.3. sposób kodowania polskich znaków, opis zawartości treściowej strony
(słowa kluczowe Keywords, opis Description)
2.1.4. „etykieta webmastera”, czyli zasady, jakimi powinien się kierować
projektant stron WWW.
2.1.5. zaprojektowanie prostej strony w oparciu o Pajączka 2000 – edytor stron
WWW
2.1.6. porównanie sposobu prezentacji tego samego dokumentu w
przeglądarkach Mozilla, Opera i Internet Explorer
2.2. (6 godz.) Projektowanie strony prywatnej. Użycie odsyłaczy (odnośników,
hiperłączy - ang. links). Wykazy (listy numerowane i nienumerowane). Obsługa
edytora stron WWW Pajączek 2000.
rola odsyłaczy w dokumencie hipertekstowym,
rodzaje odnośników: etykieta (kotwica), odsyłacz
konstrukcja odnośników:
<a name=”etykieta”></a>;
<a href=”adres_strony”></a>
postać odnośnika (tekst, ilustracja, animacja).
stosowanie wykazów (list uporządkowanych i nieuporządkowanych),
Zadania:
1. Wykonanie strony na wybrany temat
2. Przygotowanie projektu pracy zaliczeniowej
2.3. (15 godz.) Elementy Kaskadowego arkusza stylów, wykorzystanie skryptów
języka JavaScript na stronie WWW.
2.3.1. rodzaje stylów: a\ dołączone do zewnętrznego arkusza (plik.css)
b\ zagnieżdżone
<style type=”text/css”></style>
c\ importowane
d\ lokalne
e\ klasy i identyfikatory
class=”klasa”; ID=”identyfikator”)
f\ rozciąganie stylu, bloki
<span></span>; <div></div>
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
4
przykłady skryptów i ich rola w dokumencie hipertekstowym
2.4. (5 godz.) Wykorzystanie grafiki na stronie WWW. Programy
graficzne i podstawy ich obsługi. Formaty plików graficznych: .gif,
.jpg.
wady i zalety stosowania grafiki w dokumencie HTML,
wstawianie grafiki do dokumentu:
<img src=”nazwa_pliku”>
poznawanie programów graficznych, Paint Shop Pro,
Micrografx, podstawowe operacje przy obróbce ilustracji dla
strony hipertekstowej,
sposób prezentowania grafiki w sieci, formaty plików i różnice
pomiędzy nimi: gif (256 kolorów), jpeg (16 mln kolorów)
tło w doku mencie, kolor i grafika jako tło.
Zadanie:
Projektowanie strony na wybrany temat (praca zaliczeniowa)
Forma realizacji: praca indywidualna studentów
3. Materiały wytworzone przez uczestników zajęć.
Podstawowym materiałem wykonanym na ćwiczeniach będzie samodzielnie
opracowany i zaprojektowany zbiór stron składający się z kilku dokumentów
WWW połączonego hipertekstowo z zastosowaniem wyżej wymienionych
elementów języka HTML. Praca ta zostanie przygotowana na dyskietce lub na
komputerze w pracowni, a następnie oddana do zaliczenia
Ocena serwisu wykonanego przez studenta będzie średnią z trzech ocen według
kryteriów zaliczanych do architektury informacji: ocena za system organizacji
treści, za system nawigacji i za szatę graficzną (layout)
Zaprojektowane strony mogą być powiązane według czterech sposobów:
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
hierarchicznie:
jjjjjjjjjjjjjjjjddd
dddddddddddjh
hhhhhhhhhhhhhh
heeeeeeeeeeeee
eeeeeeeeeeeeee
eeeeeeeeeeeeee
eIiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
iiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhh
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeee
seryjnie:
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
yyyyyyyyyyyyy
Ggggggggggggg
ggggggggggggg
gggggggggg
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhh
Lllllllllllllllllllll
llllllllllllllllllllllllllllllll
llllllllllllllllllllllllllllllll
llllllllllllllllllllllgggg
ggggggggggggg
ggggggggggggg
ggggggggg
ssssssssssssssss
sssssssssdddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
ddddddddddddd
dddd
wirtualnie:
Ffffffffffffffffff
fffff333eeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeefffffffff
ffffffffffff333
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeeeeeeeee
eeeeeefffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
ffffffffffffff
hhhhhhhhhhhhh
hhhhhhhhhhhhh
hhhhhhhhhhfffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffffffffffff
fffffffffff
uuuuuuuuuuuuu
uuuuuuuuuuuuu
uuuuuuFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFFFFFFFF
FFFFFYYYYY
YYYYYYYY
Y
Wykonane strony będą dotyczyć konkretnej dziedziny lub zjawiska związanego z pracą
dydaktyczną i informacyjną biblioteki.
4. Umiejętności nabyte podczas zajęć.
Do podstawowych umiejętności, jakie student powinien opanować należy:
1/ Projektowanie dokumentów hipertekstowych zgodnie z aktualną specyfikacją języka
HTML.
2/ Planowanie projektu stron oraz przebiegu pracy
3/ Wykorzystywanie elementów multimedialnych (ilustracja, dźwięk, film i animacja) do
wzbogacenia treści strony.
4/ Odnajdywanie informacji w Internecie.
5/ Znajomość podstaw architektury informacji dla stron WWW
6/ Ściąganie i wysyłanie plików za pomocą klienta FTP.
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
5
7/ Posługiwanie się witryną WWW w zakresie gromadzenia, przechowywania i
prezentowania informacji, oraz wykorzystywanie Internetu w działalności
dydaktycznej i informacyjnej biblioteki lub ośrodka informacji.
5. Ocena kursu
51-60 pkt. – ocena dst
61-70 pkt. – ocena + dst
71-80 pkt. – ocena db
81-90 pkt. – ocena + db
91-100 pkt. – ocena bdb
6. Prace studentów
- opracowanie planu serwisu internetowego (10)
- przygotowanie projektu organizacji serwisu (15)
- przygotowanie projektu nawigacji serwisu (15)
- zaprojektowanie układu elementów na stronach (layout) (15)
- wykonanie serwisu internetowego (min. 5 stron) (30)
Na ostateczną liczbę punktów wpływa również poziom przygotowania studenta
na zajęciach oraz frekwencja.
7. Literatura zalecana
Książki:
1. S. Krug: Nie każ mi myśleć. O życiowym podejściu do funkcjonalności
stron internetowych. Gliwice 2006. Wyd. 2.
2. E. Meyer, CSS wg Ericha Meyera. Gliwice 2005
3. J. Cohen: Serwisy WWW. Projektowanie, tworzenie i zarządzanie.
Gliwice 2004.
4. J. Nielsen: Projektowanie funkcjonalnych serwisów internetowych.
Gliwice 2003.
5. L. Rosenfeld, P. Morville: Architektura informacji w serwisach
internetowych. Gliwice 2003. Wyd. 2.
6. R. Williams, Jak składać tekst? Komputer nie jest maszyną do pisania.
Gliwice 2003. Wyd. 2
7. M. Pearrow: Funkcjonalność stron internetowych. Gliwice 2002.
8. B. Danowski, Kaskadowe arkusze stylów. Ćwiczenia praktyczne. Gliwice 2001
9. Z. Płoski, Komputer, Internet. Szkolny słownik. Wrocław 2001
10. R. Płatek, Z. Okoń, Pajączek najlepszy polski edytor stron WWW. Gliwice 2000.
11. B. Danowski,, HTML 4. Ćwiczenia praktyczne. Gliwice 2000
12. M. Sokół, Tworzenie stron WWW. Ćwiczenia praktyczne. Gliwice 2000
13. D. Siegel: Tworzenie stron WWW. Bielsko-Biała 1998
14. J. Szaniawski: Duży słownik informatyczny. Warszawa 1997
15. P. Wimmer: HTML stare i nowe. Warszawa 1997
16. M. Kasperski, A. Boguska-Torbicz, Projektowanie stron WWW. Użyteczność w
praktyce. Gliwice 2008.
Każda książka opisująca metodykę tworzenia stron WWW w języku HTML 4.0,
XHTML i CSS
Czasopisma:
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 języka HTML w odcinkach w miesięczniku CHIP, numery: 5/98, 6/98,
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. Mój serwis WWW. CHIP 2004 nr 2, s. 22-46
Strony WWW (Netgrafia):
1. CSS Templates [http://www.ssi-developer.net/main/templates/]
2. Dynamic Drive CSS Library: [http://www.dynamicdrive.com/style/]
3. Eric Meyer on CSS [http://www.ericmeyeroncss.com/dloads/]
4. Kurs języka HTML P. Wimmer: [webmaster.helion.pl]
5. WEBDESIGN w praktyce J.Stychut: [webdesign.art.pl/index.htm]
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
6
6. BRAMA - informacje na temat projektowania stron WWW P.
Andrusiewicz: [www.wsp.krakow.pl/~andrus/brama.shtml]
7. WEBMASTER – czasopismo online dla profesjonalnych twórców
stron WWW: [webmaster.pckurier.pl ]
8. WebReporter: [web.reporter.pl/html]
9. Test działania składni 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 Stanisław Skórka
Notatki
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
7
I. Wstęp Strona WWW jest plikiem tekstowym zapisanym najczęściej w formacie html
(ale może to być także php, shtml, i inne) aby zaprojektować stronę wystarczy
zwykły Notatnik z Windows, by móc oglądać jej zawartość potrzebna jest
przeglądarka stron WWW (Internet Explorer, Mozilla, Netscape).
Sieć złożona ze stron WWW wzajemnie połączonych za pomocą odsyłaczy
hipertekstowych (linków) nazywana jest World Wide Web (globalną pajęczyną)
Skrót html oznacza język projektowania: Hypertext Markup Language (język
hipertekstowego znakowania dokumentów), aby strona była widoczna w
przeglądarce trzeba ją zapisać jako plik „.html”, np.: index.html, default.html, itp.
Aby przygotować własną stronę (witrynę) przede wszystkim należy zaplanować
przebieg pracy, można to zrobić opierając się na następujących fazach:
1. Faza analityczno-projektowa
analiza wymagań
ustalenie zasad pracy
plan realizacji
projekt podziału treści i szaty graficznej
projekt nawigacji i rozmieszczenia elementów na stronie
(layout)
2. Realizacja projektu
3. Testowanie i wdrożenie
4. Promocja
5. Zarządzanie i aktualizacja
Więcej na ten temat w rozdziale X. Architektura informacji
Projektowanie w języku HTML polega na formatowaniu tekstu za pomocą
znaczników (tags), są dwa rodzaje znaczników: blokowe (występują parami,
np.: <P></P>), oraz elementowe (pojedyncze, np.: <BR>). Działanie
znacznika blokowego obejmuje tekst, który jest nim ujęty, np.:
<strong>to jest tekst pogrubiony</strong> Znaczniki <B> oznaczają pogrubienie tekstu, który znajdzie się pomiędzy nimi.
Znacznik elementowe „działają” w jednym miejscu w dokumencie, np.:
<strong>to jest tekst pogrubiony</strong >,<br> <em>a to jest kursywa</em>
<BR> - przejście do następnej linii. Znacznik <EM></EM> formatują tekst na postać
kursywy
W obrębie znaczników, zarówno blokowych, jak i elementowych znajdować się mogą
atrybuty dokładniej charakteryzujące dany element, np. ilustrację
<img src="imagi2/bmiecznik.jpg" width="239" height="265" border="0"
alt="rozmiar: 31682 bajtów">
Atrybuty:
src- nazwa pliku graficznego, np.: logo.gif width – szerokość obrazka,
height – wysokość obrazka
border – grubość ramki wokół obrazka
alt – tekst zastępczy
Więcej na ten temat w rozdziale IV. Wybrane znaczniki
Więcej na ten temat w rozdziale VI. Wstawianie grafiki i tła
Atrybuty są przydatnym narzędziem dla webmastera ze względu na możliwość
sprecyzowania wyglądu danego elementu na ekranie, przy jednoczesnym uniemożliwieniu
wstawiania wartości domyślnych przez przeglądarkę. Używanie atrybutów skraca czas
ładowania się strony w oknie przeglądarki. Najwięcej możliwości formatowania dają
jednak kaskadowe arkusze stylów.
Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów
II. Warsztat webmastera
Do projektowania stron internetowych potrzebne są programy, z których duża cześć jest
dostępna za darmo, niestety czasem nie idzie to w parze z jakością.
1. Edytor stron WWW, np.: EzHTML (darmowy), Pajączek, Tiger 98, WebPager,
Xpress (darmowy), lub edytor tekstu (Notatnik Windows),
2. Przeglądarki WWW, co najmniej dwie: Netscape Navigator/Communicator 6.x (pol.
wersja Mozilla 1.x) i MS Internet Explorer PL 6.x
3. Program do obróbki grafiki rastrowej: Paint Shop Pro 6.x – X, , Adobe Photoshop,
GIMP (freeware), PaintNET (freeware)
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
8
4. Jeżeli edytor stron WWW nie ma takiej opcji, to należy 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 gifów animownych: Jasc Animated Shop 2.02, Gif
Dispenser 1.0, Ulead Gif Animator 4.0, Gif Movie Gear 2.63
6. Galerię clipartów – zbiór adresów do grafik, ilustracji, tekstur i innych
przydatnych na stronach WWW obrazków, dostępnych 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, należy wstawić
odpowiednie znaczniki w sekcji <body> </body>.
Strona WWW zaczyna się i kończy znacznikiem <HTML>, wewnątrz znajdują
się dwie oddzielne sekcje <HEAD>, czyli głowa i <BODY> - ciało
dokumentu.
W sekcji HEAD umieszcza się tzw. metainformację (informację o informacji)
o stronie, znaczniki <META>, ich zadaniem jest przechowywanie informacji o
treści strony: Description, Keywords, autorze strony Author, stronie kodowej
Content-type, języku treści strony Content-language. Informacje te są
przydatne między innymi dla zindeksowania strony przez tzw. roboty
wyszukiwarek, co pozwala na ich odnalezienie za pomocą wyszukiwarek
internetowych (Google, Szukacz, itp.)
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
Hierarchia dokumentu html zawiera:
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
9
Drzewo dokumentu (document tree) - hierarchiczny układ elementów
HTML zakodowanych w dokumencie; każdy element ma dokładnie
jednego rodzica, oprócz elementu najwyższego w hierarchii.
Dziecko (child) - element będący o jeden szczebel niżej w drzewie w
stosunku do danego elementu.
Potomek (descendant) - element będący o jeden lub więcej szczebli
niżej w drzewie w stosunku do danego elementu.
Rodzic (parent) - element o jeden szczebel wyżej w drzewie w
stosunku do danego elementu.
Przodek (ancestor) - element będący o jeden lub więcej szczebli wyżej
w drzewie w stosunku do danego elementu.
Brat (sibling) - element mający tego samego rodzica co inny element;
jeśli znajduje się obok niego, to jest to brat przylegający (adjacent
sibling).
IV. Wybrane znaczniki
Znaczniki blokowe
<a href=""></a>
<a name=""></a>
<body></body>
<div></div>
<em></em>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<strong></strong>
<ol> <li> … </li> lista numerowana
</ol>
<p></p>
<span></span>
<sup></sup>
<title></title>
<ul> <li>… </li> <li>… </li> wypunktowanie </ul>
Znaczniki elementowe
<br>
<hr>
<meta name="" content="">
<img src="">
V. Odsyłacze (linki)
Odsyłacze są podstawowym narzędziem nawigacji, dzięki któremu możliwe jest poruszanie
się pomiędzy stronami. Istnieje wiele podziałów hiperłączy, w jednym z nich wyróżnia się
odsyłacze semantyczne (OS) i organizacyjne (OO). OS kierują do tekstu lub dokumentu o
podobnej tematyce, OO umożliwiają poruszanie się po poziomach i rozdziałach w danej
hiperprzestrzeni. Z punktu widzenia webmastera odsyłacze można podzielić wg kryterium
zastosowania. I tak, wyróżnia się odsyłacze kierujące do:
a) stron WWW (zewnętrzne)
b) usług sieciowych (e-mail, ftp, CHAT)
c) etykiet (tekstu w obrębie dokumentu - wewnętrzne)
d) innych dokumentów, np.: txt, PDF, doc, itp.
Ad. a) hiperłącze do stron(y) WWW może mieć dwojaką postać:
- względną
<a href="strona.html" title="to jest treść dymka">etykieta odsyłacza</a>
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
10
- bezwzględną
<a href="http://www.ap.krakow.pl/kbin/html/szablon.html"
title="to jest treść dymka">szablon strony www</a>
HREF – skrót od hypertext reference
TITLE – opis odsyłacza, informacja, dokąd kieruje
Ad. b) odsyłacz uruchamiający klienta poczty elektronicznej
<a href="mailto:[email protected]" title="mój e-mail">[email protected]</a>
- uruchamiający sesję FTP:
<a href="ftp://sunsite.icm.edu.pl" title="ftp">serwer ftp</a>
Ad. c) Składa się z dwóch członów:
- odsyłającego (np.: jako fragment spisu treści):
<a href="#01">rozdział 1</a>
- etykiety – umieszczonej gdzieś na stronie
<a name="01">rozdział 1</a>
Najpopularniejsze zastosowanie to spisy treści i powrót na początek strony:
<a href="#top">początek strony</a>
W przeglądarce MSIE 6.x nie jest konieczne zastosowanie etykiety
<a name=”top”></a>
Ad. d) kieruje do dokumentu nie będącego stroną WWW, takich jak: txt, doc
czy pdf , np.:
<a href="teksty/referat.pdf" title="tekst referatu">referat w wersji
on-line</a>
Adresy stron WWW powinny być pisane małymi literami bez polskich znaków,
podobnie nazwy plików html.
VI. Wstawianie grafiki i tła Pliki graficzne mogą być udostępniane na stronie WWW w formacie GIF (do 256 kolorów)
i JPG (16 mln kolorów). Format GIF nadaje się do napisów, ponieważ potrafi zachować
przezroczyste tło, ale ma małą liczbę kolorów. Format JPG jest najlepszy do kolorowej
fotografii i obrazów.
1. Wstawianie grafiki do dokumentu
Podstawowa konstrukcja ma następującą postać: <img src="plik_graficzny">
IMG - skrót od słowa image (ilustracja), SRC - skrót od słowa source (źródło)
2. Warianty wyświetlania ilustracji:
* wielkość modyfikujemy atrybutami: width (szerokośc) i height (wysokość),
jednostką miary są piksele
Np. <img src="krajobraz.gif" width=”200” height=”50” alt=”Krajobraz
górski”> - atrybuty te przyspieszają ładowanie się obrazka.
obramowanie: parametr BORDER=x pozwala wyświetlić wokół obrazka
ramkę o grubości równej x pikseli:
Np. <img src="krajobraz.gif" width=120 height=160 alt=”Tekst
zamienny” style=”border: 5px solid black”> - gdy ilustracja jest odsyłaczem parametr BORDER: 0px spowoduje, że nie pojawi się
ramka wokół ilustracji.
* odstępy od tekstu: parametry VSPACE (vertical space) i HSPACE (horizontal
space) pozwalają ustalić odległość obrazka, w pikselach, od oblewającego 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ół parametrów,
text-align:”left/right” lub float: left/right steruje pozycją obrazka w stosunku
do oblewającego go akapitu. Konstrukcja ma postać
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
11
Np. <IMG SRC="obrazek" style=”text-align: right;”> lub
<IMG SRC="obrazek" style=”float: right”> oblewanie tekstu z
prawej strony
Jeśli obrazek ma być na środku strony to należy ująć go pomiędzy znaczniki :
<div style=”text-align: center”> <img src=”…” …>
</div>
Duże ilustracje można pokroić na określoną liczbę kawałków, a następnie
wstawić je do tabeli, pozwoli to na szybsze ładowanie się całego obrazka.
Więcej na ten temat w rozdziale VII. Tabela pkt. 3.
Aby przyspieszyć ładowanie się grafiki można na stronie poprzedzającej
wstawić znacznik ilustracji z atrybutami szerokości i wysokości równymi 1,
np..:
<img src="obrazek.gif" width=”1” height=”1” hspace=0
vspace=”0”>
3. Tło na stronie WWW.
Definiując <BODY> możemy wstawić parametr, który zadecyduje o graficznej
postaci strony.
<body style=”background: url(adres_obrazka)”> albo kolor
Np. <body style=”background: #fff">
- wywołanie pliku .jpg z folderu „images”
dodatkowy parametr: bgproperties=”fixed” spowoduje, że w
przeglądarce IE 4.x tło będzie stało w miejscu, a tekst przesuwał.
Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów
VII. Tabele 1. Podstawy projektowania tabel. Adaptując tabele dla potrzeb WWW kierowano się głównie potrzebą prezentacji
danych tabelarycznych w postaci takiej, jaką widzimy w książkach czy
prezentacjach multimedialnych. O ile w edytorach tekstów służą one głównie do
tego właśnie celu, to w przypadku projektowania dokumentów hipertekstowych pole do
zastosowania tabel jest znacznie szersze. Ale zacznijmy od podstaw.
Aby zobaczyć jakąkolwiek tabelkę w oknie przeglądarki trzeba wpisać jej ogólne ramy bez
atrybutów.
<table border=”1”> <tr>
<td> zawartość komórki 1</td><td> zawartość komórki 2</td>
</tr> <tr>
<td> zawartość komórki 3</td><td> zawartość komórki 4</td> </tr>
</table>
Otrzymamy:
Zawartość komórki 1
Zawartość komórki 2
Zawartość komórki 3
Zawartość komórki 4
Definicja tabeli musi być umieszczona między tymi dwoma znacznikami <TABLE>, które
stanowią jej ograniczniki. W ich ramach są umieszczane definicje rzędów <TR>, definicje
komórek w rzędach <TD>, konkretne dane w komórkach, tytuł tabeli i nagłówki wierszy i
kolumn <TH>.
Tabela w HTML samodzielnie rozkłada kolumny na stronie, dostosowuje ich szerokość i
wysokość a także zawartość.
Ćwiczenie:
Zaprojektuj tabelkę z trzema kolumnami i pięcioma wierszami (zob. poniżej).
1
2
3
4
5
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
12
Aby tabela zawierała obramowanie, wystarczy rozszerzyć definicję o atrybut
BORDER=”n”, gdzie n - liczba pixeli.
Niekiedy „wyłącza się” obramowania, gdyż dodatkowe linie wpływają ujemnie
na jej czytelność. Zamiast obramowania najlepiej jest wyróżnić tekst w
komórkach: pogrubieniem, kursywą lub inną czcionką itd.. Efekt bez
obramowań osiąga się poleceniem: BORDER=”0”
2. Odstępy wewnątrz tabeli. Wyrównanie danych w komórkach
Kolejnym atrybutem pozwalającym modyfikować wygląd tabeli jest
CELLSPACING - odległość między komórkami, czyli grubość
obramowania, jeśli jest ono widoczne.
Można go użyć wówczas, gdy komórki (nie tabela) mają zawierać inne
obramowanie niż domyślne. Innym atrybutem znacznika TABLE jest
CELLPADDING - odstęp zawartości komórki od obramowania. Obydwa
atrybuty działają na wszystkich czterech ścianach komórki.
Np.:
<table border=”5” cellpadding=”8” cellspacing=”15”>
<tr>
<td> </td> </tr>
<tr> <td> </td>
</tr>
</table>
Zarówno całą tabelę, jaki i zawartość w jej komórkach (celach) można ustawiać
w poziomie i pionie. Pierwszy sposób zapewnia atrybut ALIGN, użycie go
razem ze znacznikiem TABLE powoduje wyrównanie całej tabeli, wiersza,
komórki. W pionie ustawiamy zawartość poprzez atrybut VALIGN
Np.:
<table border=”5” cellpadding=”8” cellspacing=”15”
align=”right”>
Ta tabela będzie znajdowała się przy prawym marginesie (zob. poniżej), inne
polecenia: left (lewy) i center (środek)
wiersz 1
wiersz 2
<tr><td align=”left”></td></tr> Dane w tej komórce przesuną się do lewego marginesu, to samo można zaprojektować dla
kolumny w obrębie wiersza.
Np.
<td align=”center”></td> Oprócz wyrównania poziomego dane w kolumnach możemy wyrównywać pionowo za
pomocą parametru VALIGN, który może przybierać następujące wartości: top (góra).
middle (środek), bottom (dół).
<td valign=”top”></td>
<td valign=”middle”></td> <td valign=”bottom”></td>
3. Szerokość i wysokość tabeli
Aby określić szerokość tabeli w obrębie znacznika TABLE umieszcza się atrybut WIDTH.
Wartość tego parametru można wyrazić w procentach (wielkość względna) lub pikselach
(wielkość bezwzględna) Np.
<TABLE BORDER WIDTH=”60%”> </TABLE>
lub
<TABLE BORDER WIDTH=”600”> </TABLE>
Wysokość tabeli oznacza się atrybutem HEIGHT
Wielkości bezwzględne najlepiej jest stosować, gdy w komórkach tabeli znajdują się
elementy obrazka, w przeciwnym wypadku pojawią się przerwy pomiędzy kawałkami
obrazka.
góra
środek
dół
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
13
Rys. nr 3
Wielkości względne dopasowują się do okna i rozdzielczości monitora, najlepiej
je stosować, gdy w tabeli znajduje się tylko tekst.
4. Atrybuty COLSPAN i ROWSPAN
COLSPAN - liczba kolumn, na które rozciąga się komórka (przykład nr 1)
ROWSPAN - liczba wierszy, na które rozciąga się komórka (przykład nr 2)
Przykład nr 1 <table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="2">kolumny połączone</td> </tr> <tr> <td width="20%">kolumna lewa</td>
<td width="80%">kolumna prawa</td> </tr> </table>
Widok:
Kolumny połączone
Kolumna lewa
Kolumna prawa
Przykład nr 2:
<table width="100%" bgcolor="#ffffff" border="1" cellpadding="0" cellspacing="0" align="center"> <tr> <td width="20%" rowspan="2">wiersze połączone</td> <td width="80%">komórka górna</td> </tr> <tr>
<td>komórka dolna</td> </tr>
Widok:
Wiersze połączone
Komórka górna
Komórka dolna
5. Tabele i arkusze stylów Tabelę można zaprojektować także za pomocą stylów, co pozwala na precyzyjniejsze jej
dostosowanie do własnych celów.
Każdemu elementowi tabeli (komórce, ramce) można nadać inną postać.
Poniżej zamieszczono cechy oraz ich wartości przydatne przy projektowaniu tabel.
border-bottom-style - styl określa wygląd dolnej ramki border-left-style - styl określa wygląd lewej ramki border-right-style - styl określa wygląd prawej ramki border-top-style - styl określa wygląd górnej ramki Wartości stylu:
none - nie ma ramki, wartość domyślna hidden - linia ukryta dotted - linia składająca się z kropek dashed - linia składająca się z kresek solid - linia tradycyjna groove - linia wklęsła przestrzenna ridge - linia wypukła przestrzenna inset - linia wklęsła outset - linia wypukła double - linia podwójna inherit - przejęcie wartości "rodzica",
border-left-width - styl określa szerokość lewej ramki -right-width -bottom-width -top-width border-bottom-color - styl określa kolor dolnej ramki -left-color - styl określa kolor lewej ramki -right-color - styl określa kolor prawej ramki -top-color - styl określa kolor górnej ramki
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
14
Przykład 1. Tabela z zastosowaniem stylów
<table style="border-style: dotted; border-width: thin; border-color: #86708f; padding: 0px; width: 730; text-align: center; vertical-align: top"> <tr> <td>
<p>komórka lewa</p> </td> <td>
<p>komórka prawa</p> </td> </tr> </table>
Przykład 2
<table style="border-top-style: dotted; background-color: #eeeeee ; width: 70%; height: 20%"> <tr><td> <p>Pojedyncza komórka</p> </td></tr></table>
Tabelę można konstruować także 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>Komórka tabeli</p>
</div>
NOTATKI
Więcej na ten temat w rozdziale VIII. Kaskadowe arkusze stylów
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
15
VIII. Kaskadowe arkusze stylów
(CSS - Cascading Style Sheets)
Ogólne polecenie stylu ma postać: selektor { cecha: wartość } lub bardziej
rozbudowaną: selektor { cecha1: wartość1; cecha2: wartość2 }.
Gdzie selektorem jest po prostu polecenie języka, np. P, LI, TD, BODY itd.
Cechą jest pewna własność danego znacznika, np. wielkość i styl czcionki dla
akapitu. Wartość konkretyzuje cechę, np. 12pt czy bold dla czcionki.
Przykład nr 1 P {font-family: Trebuchet MS }
Selektorem jest P, cechą - rodzina czcionek, wartością - Trebuchet MS.
Style mogą być umieszczane w dokumencie na kilka sposobów:
1. Kody formatujące są umieszczane na początku strony i oddziałują na cały
dokument.
NP.: Fragment nagłówka dokumentu z definicją znaczników BODY i P
2. Kody formatujące są umieszczane w środku tekstu (in-line style) i dotyczą
wybranego znacznika dokumentu (styl lokalny).
NP.: Właściwości ujęte w cudzysłów dotyczą tylko części dokumentu objętej
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ą związane z wybranymi
znacznikami.
NP.: Dają dużo możliwości webmasterowi, pozwalają dowolnie manipulować akapitami
na stronie WWW. U dołu 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; font-
weight: 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 głównej części dokumentu klasa zostaje wstawiona w obrębie nawiasów „<>”
4. Kody formatujące są umieszczane na wzorcowych stronach na serwerze, a
w dokumentach wstawiamy odpowiednie odwołania do tych stron, co
powoduje automatyczne zmiany sposobu formatowania. Są to odwołania do
tzw. stylów zewnętrznych.
NP.: Dokument o nazwie mojstyl.css zawiera zdefiniowane różne elementy, takie jak: body, p., a, h1-h3, td, li
<head> <meta http-equiv="content-type" content="text/html;
charset=iso-8859-2"> <title>Zagnieżdżanie arkusza stylów</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. Materiały do ćwiczeń. IINiB UP w Krakowie
16
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; font- weight: 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; font- weight: normal} #center {text-align: center} .maly {font-size: 8pt}
.italic {font-style: italic}
Dokument ten znajduje się na serwerze pod podaną wyżej nazwą, korzystają z
niego wszystkie te strony, które w nagłówku <HEAD> mają następujący zapis:
<link rel=stylesheet href="mojstyl.css" type="text/css">
5. Kody formatujące są importowane z innej strony za pomocą polecenia
@import.
Np.: Podany jest adres bezwzględny do arkusza stylów mojstyl.css
<style>
@import url("http://www.polbox.com.pl/style/mojstyl.css"); </style>
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; border-
bottom: 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="">Okładka</a></li> <li><a href="" title="">Karty tytułowe</a></li> <li><a href="" title="">Materiały wprowadzające</a></li> <li><a href="" title="">Tekst główny</a></li> <li><a href="" title="">Materiały uzupełniające tekst główny</a></li> <li><a href="" title="">Materiały informacyjno-pomocnicze</a> </li> </ul> </div> <p><a href="05.html" title="">« poprzednia</a> <a href="01.html" title="">następna »</a></p> </body> </html>
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
17
IX. RAMKI 1. Wstęp Ramki ułatwiają nawigowanie w wielostronicowych dokumentach HTML,
pozwalają na przeglądanie wielu dokumentów równocześnie (tzw. format
metadokumentowy). Aby użyć tej nowej formy prezentacji dokumentów WWW
trzeba utworzyć zbiór ramek na stronie podstawowej *.html, na której
definiujemy liczbę, wielkość i pozycję ramek oraz zachowanie się innych
dokumentów w momencie uaktywnienia odsyłacza hipertekstowego. Pozostałe
strony, wchodzące w skład całego, wielostronicowego dokumentu, są stronami
podrzędnymi.
Na podstawowej stronie nie powinno być żadnych znaczników poza blokiem
nagłówkowym i definicją samych ramek. Dopiero znaczniki NOFRAMES
pozwalają umieścić treść, która będzie wyświetlana przez przeglądarki
nieinterpretujące ramki. Znaczniki <BODY></BODY> mogą być umieszczane
jedynie w obrębie NOFRAMES.
2. Ramki w postaci kolumn Każdy z wydzielonych w pliku głównym obszarów jest zajmowany przez
określoną stronę. U dołu przykład strony podstawowej, objętej znacznikami
FRAMESET zamiast BODY, zawierającej podział na dwie kolumny -parametr
COLS dzieli ekran kolumny - pierwsza od lewej o szerokości 25% ekranu,
druga o rozmiarach dalszych (75%).
Znacznik FRAME i parametr SRC przypisuje określonym częściom ekranu
zawartość (czyli strony WWW), atrybut SCROLLING steruje wyświetlaniem
pasków przewijania i może zawierać wartość: „auto”, „yes”, „no”.
NAME oznacza nazwę dla określonej części 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>
Ćwiczenie 1:
Przepisz przykład strony z lewej nadając mu nazwę okno.htm W miejsce nazw
„strona.htm” i „strona2.htm” wpisz nazwy dwóch stron utworzonych na poprzednich
zajęciach. Zobacz w przeglądarce jak wygląda strona okno.htm. Powinny być widoczne
dwie poprzednio wprowadzone strony
3. Ramki w postaci wierszy
Podobny schemat z wyjątkiem polecenia COLS możemy zastosować dla innego podziału
ekranu. Parametr ROWS dzieli ekran na wiersze.
Ćwiczenie 2:
Przepisz poniższy przykład strony podstawowej dla ramek i nadaj jej nazwę okno2.htm.
Dalej postępuj tak jak w ćwiczeniu nr .
<HTML>
<HEAD>
<TITLE>Ramki z wierszami</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*">
<FRAME SCROLLING="auto" NAME="góra"
SRC="strona1.htm">
<FRAME SCROLLING="auto" NAME="dół"
SRC="strona2.htm">
</FRAMESET>
</HTML>
4. Ramki wielodokumentowe
Objaśnienie (do listingu poniżej)
W pierwszej linii otwieramy dokument. Konstrukcję ramek rozpoczęto od zadeklarowania
w drugiej linii liczby wierszy (trzy). W trzeciej linii od razu wstawiliśmy ramkę z
przypisaną jej stroną, gdyż wiersz nie ulega żadnemu podziałowi.
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
18
</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>
W czwartej linii ponawiamy definicję FRAMESET (niższego rzędu), dzieląc
drugi wiersz na trzy kolumny.
W piątej, szóstej i siódmej linii wstawiamy definicje konkretnych trzech ramek
dla drugiego wiersza, przypisując im odpowiednie strony.
W ósmej linii musimy zakończyć tę "lokalną" definicję FRAMESET.
W dziewiątej linii tworzymy definicję ramki dla trzeciego wiersza, przypisując
jej odpowiednią stronę.
W dziesiątej linii kończymy "globalną" definicję FRAMESET. W jedenastej cały
dokument.
Ćwiczenie 3:
Przepisz powyższy kod dla ramki wielodokumentowej. Zamiast nazw
stronaN.htm (N - numer) wpisz nazwy stron, które zostały zaprojektowane,
zmodyfikuj wygląd tych stron, tak aby były prawidłowo wyświetlane w ramce
(formatowanie tekstu, zmniejszenie czcionki itd.)
5. Odsyłacze Co zrobić, aby kliknięcie na odsyłaczu w jednej ramce automatycznie ładowało
odpowiednią stronę w innej ramce? Jest to podstawowa sprawa, jeśli chcemy
wykorzystać ramki w dokumentach. Zauważmy, że kliknięcie na odsyłaczu w
spisie treści w lewej ramce powoduje załadowanie dokumentu do prawej ramki,
a nie do ramki ze spisem treści. W tym miejscu wykorzystujemy nazwy, które
nadawaliśmy poszczególnym ramkom.
Powróćmy do przykładu przedstawionego wyżej w ćwiczeniu nr 1. Strona ta składa się z
dwóch ramek. Lewa zawiera spis treści, natomiast do prawej są ładowane odpowiednie
strony z opisami. Lewej nadaliśmy nazwę „lewa_część”, natomiast prawej „prawa_część”.
Należy dokonać pewnych manipulacji na stronie, która jest stale widoczna w lewej ramce o
nazwie „lewa_część”. Do ramki tej jest ładowana strona zawarta w pliku o nazwie -
strona.htm. Lista tematów zawiera odsyłacze do odpowiednich stron. Należy je tak skonstruować, aby
kliknięcie na odsyłaczu przywoływało wskazaną stronę, ale zarazem ładowało ją do ramki
o nazwie „prawa_część”. Można to uczynić za pomocą następującej konstrukcji:
<A HREF="Egipt.html" TARGET="prawa_część">EGIPT</A>
itd. Analizując poszczególne człony powyższego zapisu:
HREF="nazwa_ładowanej_strony" - dotyczy nazwy pliku, w którym jest zapisana
dana strona,
TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego ma być załadowana
strona.
Widać tutaj rolę, jaką pełnią nazwy ramek.
Istnieją cztery zastrzeżone nazwy w przypadku atrybutu TARGET:
TARGET="_blank" - otwiera się nowe, czyste okno przeglądarki, które
pojawia się przed poprzednim
TARGET="_self" - odsyłacz ładuje się w swoim własnym okienku
TARGET="_parent - odsyłacz ładuje się w pełnym wymiarze okienka, nawet
gdy oglądamy je w innej ramce
TARGET="_top" - likwiduje wszystkie ramki i przenosi Cię pod wskazany
adres URL w czystym okienku przeglądarki,
Ćwiczenie 4:
Zmodyfikuj plik, który zastąpił w ćwiczeniu 1 plik strona.htm, wpisując odsyłacze kierujące
strony do ramki prawej nazwanej „prawa_część”,
a następnie wprowadź jeden odsyłacz kierujący wywołaną stronę do czystego okna
przeglądarki. 6. Inne parametry dla ramek Do innych atrybutów przydatnych dla ramek i stosowanych dla znacznika FRAME należą:
FRAMEBORDER - wyłączanie/włączanie obramowania
trójwymiarowego, np. FRAMEBORDER=”0” (wyłączanie),
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
19
MARGINHEIGHT - odstęp między górną i dolną krawędzią
ramki a jej zawartością,
MARGINWIDTH - odstęp między prawą i lewą
krawędzią a zawartością ramki,
NORESIZE - uniemożliwienie zmiany rozmiaru ramki
(normalnie można to robić)
Niektóre atrybuty w obrębie znacznika FRAMESET:
BORDER - dodatkowy odstęp pomiędzy ramkami w
pikselach,
BORDERCOLOR - kolor obramowania,
COLS - podział okna w poziomie (na kolumny),
ROWS - podział okna w pionie (na wiersze)
NOTATKI
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
20
X. Architektura informacji stron WWW
Projektując stronę z myślą o publikowaniu w Internecie, niezależnie od jej
przeznaczenia, należy pamiętać o tym, że będą z niej korzystać użytkownicy o
różnych umiejętnościach i wiedzy, dlatego na początku projektowania należy
wziąć pod uwagę rozmaite kryteria wpływające na jej funkcjonalność. Zespół
kryteriów uwzględnianych podczas tworzenia stron internetowych określa się
mianem architektury informacji (AI) stron WWW.
AI jest procesem organizowania, oznaczania, projektowania nawigacji i
systemów wyszukiwawczych, które pomagają użytkownikom w znajdowaniu i
zarządzaniu informacją. W Polsce ten termin nie jest jeszcze zbyt popularny, ale
w Stanach Zjednoczonych posiada już sporą literaturę i nadal się rozwija.
Przykładowy plan tworzenia architektury informacji
1. Wyznaczenie celów
2. Użytkownicy
2.1. określenie odbiorców
2.2. propozycje scenariuszy (przewidywane zachowania wyszukiwawcze
użytkowników)
3. Zawartość treściowa serwisu
3.1. grupowanie informacji
3.2. organizowanie i oznaczanie treści
4. Struktura serwisu
4.1. zaprojektowanie budowy serwisu
4.2. wykonanie szkicu serwisu
4.3. zaprojektowanie systemów nawigacji globalnej i lokalnej
5. Projektowanie szaty graficznej
5.1. rozmieszczenie elementów na stronach
5.2. szkice projektowe
5.3. wykonanie serwisu na bazie projektów
Projektowanie AI obejmuje cztery główne obszary wymienione w definicji powyżej:
1. Organizowanie informacji
2. Projektowanie systemów nawigacji
3. System oznaczeń
4. System wyszukiwawczy
1. Organizowanie informacji Pierwszym krokiem przy planowaniu serwisu internetowego jest zebranie i zorganizowanie
treści, polegające na podzieleniu całości informacji na mniejsze fragmenty, które będą ze
sobą powiązane. Jest to szczególnie ważne przy rozbudowanych serwisach tematycznych.
Podstawą organizacji treści może być przedmiot, zadanie, użytkownicy, geografia,
chronologia czy porządek alfabetyczny. Najczęstszym schematem organizowania jest
hierarchia (Rys. nr 4).
Rys. nr 4
Kryteriami, które powinien uwzględnić architekt informacji podczas tworzenia struktury
hierarchicznej dla zbioru stron, są szerokość i głębokość. Szerokość odnosi się do liczby
opcji, z których może wybierać użytkownik na danym poziomie w hierarchii, głębokość do
liczby tych poziomów w serwisie.
Wybór hierarchii powinien być uzależniony m.in. od ilości informacji, przeznaczenia
serwisu i preferencji użytkowników.
Źle zaprojektowana hierarchia sprawia, że informacje są niedostępne dla użytkowników.
Zbyt wąska i głęboka hierarchia zmusza do odwiedzani nadmiernej liczby dokumentów
podczas poszukiwań, co może stać się przyczyną zjawiska „zagubienia w hiperprzestrzeni”.
Z kolei zbyt szeroka i wąska stawia użytkownika przed wyborem jednej z bardzo wielu
opcji, zjawisko takie nazwano „przeładowaniem poznawczym”.
Dla hierarchii wąsko-głębokiej optymalnym rozwiązaniem jest podział do najwyżej pięciu
poziomów. Strona główna (powitalna) dla serwisu opartego na hierarchii szeroko-płytkiej
powinna udostępniać wybór opcji (odnośników) w liczbie ok. 7-9, nie więcej niż 10.
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
21
Przekroczenie tej granicy powoduje wspomniane już zjawisko „przeładowania
poznawczego”.
Rys. nr 5
Serwisy, w których planowane jest powiększanie zasobów powinny być
projektowane z zastosowaniem raczej hierarchii szeroko-płytkiej oraz
jednoznacznych oznakowań, tak, aby zminimalizować zabłądzenie w systemie.
Rys. nr 6
Oprócz hierarchicznych schematów organizacyjnych występuje także system
hipertekstowym, umożliwiający dowolne przeglądanie zasobów
Rys. nr 7
Rys. nr 7
System hipertekstowy
2. Projektowanie systemów nawigacji
System nawigacji jest podstawowym narzędziem przemieszczania się, zarówno po
niewielkich zbiorach dokumentów, jak i obszernych serwisach i katalogach stron WWW.
Jennifer Fleming scharakteryzowała potrzeby użytkownika nawigującego, które warto
wziąć pod uwagę w trakcie projektu.
1. Gdzie jestem?
2. Dokąd mogę iść (przemieścić się)?
3. Jak się tam dostać?
4. Jak wrócę do miejsca gdzie teraz jestem?
W zależności od przeznaczenia serwisu, np.: zasoby typu edukacyjnego, pojawiają się
szczegółowe potrzeby, takie jak:
Skąd powinienem zacząć?
Czy potrzebna jest mi specjalna wiedza lub narzędzie?
Jak otrzymać odpowiednią dla mnie informację?
Co zrobić, jeśli pojawią się pytania?
To tylko niektóre z potrzeb szczegółowych.
Ta sama autorka podała zasady funkcjonalnego systemu nawigacyjnego:
1. Łatwy do nauczenia
2. Konsekwentny
3. Zgodny z treścią strony (kontekstem)
4. Dostarcza informacji (interaktywny)
5. Oferuje wybór opcji
6. Używa jasnych i zrozumiałych oznaczeń
7. Zgodny z przeznaczeniem serwisu
8. Pomaga w dotarciu do celu
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
22
Wskazówki projektowania nawigacji dla webmasterów:
Rozmieszczaj informacje starannie, tak, aby użytkownik zawsze
wiedział w którym miejscu systemu się znajduje
Nie zmuszaj użytkownika do przerwania jego pracy przez podawanie
odsyłaczy do innych stron, aplikacji lub miejsc
Umieszczaj kontrolę nawigacji w systemie
Zabezpiecz główny kontekst poszukiwań (interakcji), aby użytkownik
nie musiał go sobie odtwarzać
Minimalizuj opóźnienia sieci poprzez czytelną i jasną nawigację i
zredukuj czas ładowania się
Typy systemów nawigacji a. hierarchiczny
b. globalny
c. lokalny d. doraźny
Ad. a/ hierarchiczny s. n. – podstawowy s.n. oparty na zasadzie nadrzędności i
podrzędności, ze strony nadrzędnej odsyłacze kierują do stron podrzędnych
(Rys. nr 8).
Więcej w rozdziale 1. Organizowanie informacji
Rys. nr 8
Ad. b/ globalny s.n. – najczęściej uzupełnia hierarchiczną organizację
informacji w serwisie. Najprostszy g.s.n. zawiera pasek nawigacyjny u dołu
każdej strony serwisu, na podstronach mogą znajdować się dodatkowo
odsyłacze powrotne kierujące do strony głównej.
Ad. c/ lokalny s.n. – stosowany w rozbudowanych serwisach WWW, uzupełnia globalny
s.n., wykorzystywany do połączenia podstron w serwisie.
Ad. d/ doraźny s.n. (ad hoc) – oparty na odsyłaczach znajdujących się w tekście,
widocznych jako wyróżniony tekst.
Inne podziały systemu nawigacji
- poprzeczna (pozioma) – obejmuje strony z tego samego poziomu, pozwala przejrzeć
treść na określonym poziomie serwisu
- pionowa (głęboka) – kieruje w głąb hierarchii, zgodna z przedmiotem poszukiwań
Narzędzia nawigacji
- paski nawigacyjne
- ramki
- menu ściągane (pull-down)
- mapy odsyłaczy
- indeksy stron
- okruchy chleba – zaznaczanie trasy nawigowania poprzez zmianę koloru
odsyłaczy kierujących do odwiedzonych stron
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
23
- widok „rybiego oka” – umieszczenie odsyłaczy do stron
znajdujących się najbliżej bieżącej.
3. System oznaczeń
Oznaczenia są to terminy, słowa i frazy używane w serwisie do identyfikowania
jego treści.
Są dwa rodzaje systemów oznaczeń: tekstowy i obrazkowy (ikony). Używane są
jako:
- odsyłacze do fragmentów informacji na innych stronach, jako termin
indeksowy lub jako oznaczenie (etykieta) odsyłacza.
- nagłówki służące do zidentyfikowania fragmentów informacji oraz do
rozdzielenia informacji na mniejsze „kawałki” na tej samej stronie.
Typy systemów oznaczeń (s.o.)
a) Oznaczenia w systemie nawigacji b) Oznaczenia w postaci terminów indeksowych c) Oznaczenia odsyłaczy d) S.o. w postaci ikon
Ad. a) Przyjęto stosowanie oznaczeń dla często stosowanych znaczników, np.: Strona główna, Home – kierują do strony powitalnej, organizującej dostęp do
całości zasobów
Szukaj, Wyszukaj, Site Map, Indeks stron – kierują do narzędzia
wyszukiwawczego lub uruchamiają akcję
Napisz do nas, Komunikaty, Webmaster – informacja o autorach, zespole
redakcyjnym serwisu
Help, FAQ, Pomoc – wsparcie dla odwiedzających serwis po raz pierwszy
Co nowego, News - informacja o ostatnich aktualizacjach, historia
aktualizacji
Przykład:
oznaczenia zamieszczone u dołu strony (www.gazeta.pl):
O nas | Reklama u nas | Ogłoszenia | Ochrona prywatności | Kontakt | Mapa serwisu Ad. b) Terminy indeksowe Potrzebne do odnalezienia strony przez wyszukiwarkę, umieszcza się je w sekcji <HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="reply-to" content="[email protected]"> <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>
Więcej na ten temat w rozdziale III. Szablon strony WWW Ad. c) Oznaczeń i etykiet używa się również jako odsyłaczy, mają duże znaczenie, gdyż
ich lokalizacja oraz zawartość mogą decydować o ruchach użytkownika nawigującego lub
poszukującego informacji w serwisie. Odsyłacze najczęściej znajdują się poza głównym
tekstem (zewnętrzne) oraz w tekście, wyróżniane kolorem, grubością lub podkreśleniem.
Ad. d) Odsyłacz jako ikona powinien być stosowany w sytuacjach gdy jej znaczenie jest
jednoznaczne. Zastąpienie odsyłacza tekstowego ikoną może sprawić, iż użytkownik nie
skorzysta z niego gdyż nie będzie rozumiał jego znaczenia.
Przykłady niektórych ikon w roli odsyłaczy:
informacja e-mail strona główna księga gości wstecz
przykład z portalu onet.pl
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
24
4. Szkic strony
Projektowanie przebiega szybciej, jeżeli wcześniej zostanie opracowany szkic
strony z rozmieszczonymi elemenatmi na ekranie. (layout). Poniżej podano dwa
przykłady szkiców.
Szkic nr 2: Strona główna czasopisma w Internecie
Szkic nr 3: Strona z tekstem artykułem, (element większej całości)
Szkic nr 3 Rozplanowanie zawartości strony z projektem kolorystyki
Szkic nr 4 Rozplanowanie zawartości strony
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
25
DODATEK
A. Słowniczek
Najważniejsze definicje związane z projektowaniem stron
internetowych.
ActiveX – Obiektowa technologia rozszerzająca możliwości języka HTML
opracowana przez Microsoft, umożliwia współużytkowanie informacji przez
różne aplikacje oraz dostęp do funkcji systemowych
Analiza konkurencji (competitive analysis) – dokument wykazujący różnice
pomiędzy stroną nad którą pracuje grupa a konkurencyjnymi stronami.
Wykazane różnice i strony porównawcze zależą od celów analizy. Typ
dokumentacji strategicznej.
Apache – bezpłatny, udostępniany na zasadach Open Source, zestaw
oprogramowania dla serwerów HTTP. Apache powstał na bazie serwera NCSA
httpd 1.3. i początkowo przeznaczony był wyłącznie dla systemów UNIX-
owych (Linux, Solaris, AIX). Obecnie, w wersji 2 dostępny jest także dla
systemów Windows 9x/NT/2000/XP, AmigaOS, BeOS.
Architektura informacji – sztuka i nauka organizowania informacji pomocnej
użytkownikom w zaspokojeniu ich potrzeb informacyjnych. AI obejmuje
badanie, analizę, projektowanie i wdrażanie.
Diagramy przepływu (flow charts) – wizualzacja jakiegoś procesu, zazwyczaj
skupiającego się na konkretnym zadaniu lub funkcji. Dla procesu opartych na
serwisach internetowych diagram przepływu reprezentuje z reguły serię
ekranów gromadzących i wyświetlających informacje użytkownikom. Inne
nazwy: przepływy, przepływy użytkownika, diagramy przebiegu. Rodzaj
dokumentu projektowego
Dokumentacja dostarczana (deliverables) – dokument (zbiór dokumentów)
tworzony podczas opracowywania projektu serwisu WWW w celu ułatwienia
komunikacji, ujęcia decyzji i zachęcania do innowacji. Należą tu: dokumentacja
potrzeb użytkownika (user needs documentation), dokumentacja strategiczna
(strategy documentation), dokumentacja projektowa (design documentation).
Druciana ramka, model w postaci szkieletu (wireframe) – uproszczony widok zawartości
każdego ekranu, jaki pojawi się w produkcie finalnym, pozbawiony koloru, stylów
typograficznych i ilustracji. Inne nazwy: schemat, plan, prototyp, projekt. Rodzaj
dokumentu projektowego
Dziedziczenie polega na tym, że elementy niższe w hierarchii drzewa dokumentu (Rys. nr
2) dziedziczą formatowanie elementów leżących wyżej w hierarchii, chyba, że wyraźnie
nadamy im inne formatowanie. Przykładowo, jeśli ustalimy, że tekst w jakiejś tabeli ma być
przedstawiony za pomocą pogrubionej czcionki Arial, to wszystkie komórki tabeli będą w
ten sposób formatowane, gdyż komórka <TD> leży niżej w hierarchii (drzewie dokumentu)
niż tabela <TABLE>. Jeśli natomiast nadamy odrębne formatowanie wybranej komórce
(utworzymy wyjątek), to oczywiście wygląd czcionki w tej komórce zmieni się, gdyż
bezpośrednie zdefiniowanie czcionki w wybranym miejscu ma pierwszeństwo przed
ogólniejszym formatowaniem tabeli (na wyższym szczeblu). Jeśli wyraźnie nie
zdefiniujemy formatowania dla jakiegoś elementu, dziedziczy on własności po swoich
„przodkach”, czyli elementach wyższych w hierarchii.
CSS (Cascading style sheets)– Kaskadowe arkusze stylów
Cache - specjalny katalog w przeglądarce WWW, gromadzący grafikę wczytywaną w
trakcie przeglądania zasobów sieci. Gdy po raz kolejny sięgamy do tej samej strony,
przeglądarka wczytuje na ekran grafikę z cache'a, a nie z Internetu, co znacznie przyspiesza
wczytanie całej strony i oszczędza czas. Im większy cache, tym większa możliwość
magazynowania grafiki. Optymalna wielkość powinna sięgać 10-15 megabajtów.
Cookie – (ang. ciasteczko) mechanizm przechowywania stanu klienta przy kolejnych
zadaniach kierowanych do serwera. Pozwala zapamiętywać informacje o użytkownikach
korzystających z usług internetowych.
DHTML (Dynamic HTML) – termin określający język HTML wraz z jego
rozszerzeniami umożliwiającymi tworzenie interaktywnych i animowanych stron WWW.
Flash - technologia firmy Macromedia (wprowadzona w 1997 r.) pozwalająca tworzyć
interaktywne, multimedialne, bazujące na grafice wektorowej elementy stron WWW. Do
tworzenia prezentacji flash służy program Flash. Wprowadza on własny format plików
(.swf), do odczytania którego niezbędne jest wyposażenie przeglądarki we wtyczkę Flash
Player (standardowo jest ona obecna w Internet Explorerze i Netscape Navigatorze w
wersjach 4.0 i wyższych).
Formularz - dokument internetowy, który pozwala czytelnikowi strony w interakcyjny
sposób pobierać lub przesyłać informacje. Przykładem formularza może być ankieta
prowadzona przez autora strony, który zbiera od czytelników informacje pewnego typu (np.
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
26
wiek, płeć, wykonywany zawód, posiadany sprzęt itp.). Formularzem jest strona
Ankieta w niniejszym kursie, która zawiera pola wyboru i pola tekstowe.
Edytor HTML - program służący do tworzenia dokumentów internetowych w
standardzie HTML. Chociaż jest możliwe zbudowanie dokumentu
internetowego za pomocą każdego, nawet najprostszego edytora tekstów,
edytory HTML są tworzone, aby przyspieszać i automatyzować proces
konstruowania stron WWW, uwalniając użytkownika od ręcznego
wprowadzania poleceń HTML. Więkoszść edytorów pracuje w trybie
"tekstowym", wyświetlając wszystkie znaki sterujące (polecenia) HTML,
niektóre pozwalają tworzyć dokumenty w trybie "graficznym", masując kody
języka, a stosowane są też edytory pozwalające wprowadzać poszczególne
elementy w sposób całkowicie zautomatyzowany, za pomocą zestawiania
"klocków".
Element - kod, znacznik HTML
GIF (Graphic Interchange Format) – format zapisu plików posiadający dużą
możliwość kompresowania, maksymalna liczna kolorów 256, posiada
właściwość zachowywania koloru przezroczystego. Najczęściej
wykorzystywany w kolorowych napisach i banerach
HTML – HyperText Markup Language – język hipertekstowego znakowania
dokumentu, obecnie stosowana wersja nosi numer 4.0
Heksadecymalny – oparty na systemie szesnastkowym; operujący na 16
wartościach: 0,1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Hiperłącze (odsyłacz, odnośnik, link) składnik systemu hipertekstowego -
element dokumentu elektronicznego kierujący do innego fragmentu tego samego
dokumentu lub do dokumentu znajdującego się w zupełnie innej lokalizacji
Hipermedia – system hipertekstowy zawierający elementy multimedialne
(tekst, grafika, film, dźwięk)
Hipertekst (system hipertekstowym) – rodzaj bazy danych posiadającej
aktywne odsyłacze pozwalające użytkownikowi „skoczyć” do innych części tej
bazy. H. pozwala na niesekwencyjne przeglądanie zasobów. Elementami
składowymi h. są węzły (strony WWW) i odsyłacze (hiperłącza). Wyróżnia się
dwa rodzaje s.h.: skupiony – znajdujący się w jednym miejscu (nośniku) i
rozproszony – węzły znajdują się na rożnych, oddalonych od siebie
komputerach (WWW).
Hit – trafienie, adres strony WWW wyświetlony przez wyszukiwarkę w odpowiedzi na
hasło wyszukiwawcze.
Internet – sieć komputerowa rozległa (WAN) o zasięgu globalnym, ogólnoświatowy zbiór
wzajemnie połączonych sieci komputerowych lokalnych (LAN) i rozległych. Umozliwia
publikowanie informacji oraz komunikowanie się, najpopularniejsze usługi internetowe to:
e-mail, World Wide Web, CHAT, FTP i Usenet
JPG, JPEG (joint Photographic Export Group)
Format graficzny stosowany w Internecie, najlepszy do kolorowych fotografii I obrazów,
zachowuje do 16 mln. Kolorów.
Java – zorientowany obiektowo język programowania niezależny od platformy sprzętowej
i systemowej, opracowany przez Sun Microsystem
JavaScript – język skryptowy interpretowany bezpośrednio przez przeglądarkę WWW,
używany do tworzenia krótkich programów dołączanych do kodu HTML.
Kaskadowość - polega na ustaleniu hierarchii źródeł stylów. Pierwszeństwo mają style
zdefiniowane "bliżej" konkretnego elementu. Przeglądarka sprawdza, więc najpierw, czy
istnieją jakieś arkusze zewnętrzne i stosownie do ich definicji formatuje stronę. Następnie
sprawdza, jakie są definicje stylów w nagłówku strony i modyfikuje wygląd zgodnie z ich
ustaleniami. Następnie 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 układu
informacyjnego lub procesach informacyjnych
Model pojęciowy (concept model) – wykres prezentujący związki pomiędzy różnorodnymi
abstrakcyjnymi pojęciami. Można stosować technikę modelowania pojęciowego w różnych
sytuacjach (warunkach) do wyjaśnieni a odmiennych aspektów strony internetowej. Inne
nazwy: mapa pojęć, diagram podobieństw. Typ dokumentacji strategicznej
Nawigowanie – metoda poszukiwania informacji w hiperprzestrzeni polegająca na
poruszaniu się pomiędzy dokumentami za pomocą hiperłączy
Nawigacja – system architektury informacji serwisu internetowego zaprojektowany w celu
połączenia ze sobą poszczególne dokumenty w hiperprzestrzeni
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
27
PHP - Hypertext Preprocesor. Język skryptowy służący do tworzenia
programów oraz interpreter wykonujący je po stronie serwera (server-side
scripting). Bloki kodu PHP umieszczane są bezpośrednio w dokumencie HTML.
Przed wysłaniem do przeglądarki serwer przekazuje dokument HTML
ťinterpreterowi PHP, który tłumaczy komendy PHP oraz wykonuje
odpowiadające im operacje.
Persony (personas) – Sumaryczna reprezentacja docelowych użytkowników
systemu, często opisywani jako realni ludzie. W każdym projekcie można mieć
jedną lub więcej person, każda reprezentować może odmienny typ odbiorców
systemu. Inne nazwy: profil użytkownika, definicje ról użytkownika, profile
odbiorców. Należy do dokumentacji potrzeb użytkownika
Plan testu użyteczności (usability test plan) – opis celów, metod i podejścia do
testu użyteczności. PTU obejmuje kilka różnych elementów, od profili
uczestników testów do zarysu dyskusji z użytkownikami. Może składać się z:
test obiektów, test logistyki, profile użytkownika i scenariusz. Typ dokumentacji
potrzeb użytkownika.
Podstrona (angielskie subpage), strona WWW dostępna ze strony bieżącej za
pomocą łącznika hipertekstowego.
Portal – rodzaj wielotematycznego serwisu internetowego poprzez, który
użytkownicy sieci mają dostęp do najnowszych informacji z różnych dziedzin.
P. wyposażone są w mechanizm wyszukiwania plików (stron WWW)
w Internecie oraz katalog stron WWW. Za pomocą portalu można otrzymać
najnowsze informacje z różnych dziedzin. Największe światowe portale to
Yahoo, Altavista czy Lycos, zaś w Polsce Onet i Wirtualna Polska.
Projekty ekranu (screen designs) – zbiór ilustracji w elektronicznym formacie
graficznym prezentujących finalny wygląd stron internetowych. Inne nazwy:
kompleksowe ekrany, makieta, projekt strony, projekt wizualny, projekt
graficzny, projekt interfejsu, projekt koncepcji, ładne obrazki. Rodzaj
dokumentu projektowego
Przeglądarka – wyspecjalizowany program komputerowy służący do
wyszukiwania i przeglądania danych określonego typu, zwł. udostępnianych w
rozległych sieciach komputerowych; np. przeglądarki WWW. Najpopularniejsze
obecnie p. to Microsoft Internet Explorer i Netscape Navigator.
Raport użyteczności (usability report) – należy do dokumentacji potrzeb
użytkownika. Wynik testu użyteczności, z którego rezultaty dają się przełożyć
na działanie. Typ dokumentacji strategicznej
Serwis WWW – zbiór stron WWW na określony temat, z wyróżnioną stroną główną
(powitalną) oraz podstronami (ang. web site).
Spis zawartości (content inventory) – lista wszystkich informacji zawartych na stronie
WWW, łącznie z danymi opisującymi informacje z wielu punktów widzenia, jak odbiorcy
docelowi lub położenie. Inne nazwy: analiza treści, audyt treści. Typ dokumentacji
strategicznej
Strona WWW, witryna (angielskie WWW page), dokument hipertekstowy (hipermedialny) opracowany w języku HTML, udostępniony na
widok publiczny w sieci Internet za pomocą usługi WWW w celach informacyjnych,
handlowych, propagandowych itp.; sieciowa wizytówka firm i poszczególnych osób (liczba
stron WWW przekroczyła już miliard).
Strona prywatna (angielskie home page), dokumenty opracowane w języku HTML,
będące wizytówką osoby lub instytucji w sieci usług hipertekstowych WWW;
Strona startowa – strona WWW, która pojawia się na ekranie wraz z uruchomieniem
przeglądarki. W opcjach każdej przegladarki można zmieniać adres strony startowej
W3C (World Wide Web Consortium) – Międzynarodowe forum firm i organizacji
zajmujące się rozwojem i promocją sieci World Wide Web (rok. zał. 1994), kształtuje obraz
Sieci poprzez tworzenie nowych standardów internetowych, np.: języka HTML, CSS, XML
i protokołu http. Dyrektorem jest Tim Berners-Lee - twórca WWW. Srona WWW:
www.w3c.org
Webmaster osoba projektująca strony i serwisy internetowe.
Wortal – rodzaj portalu poświęcony jednej branży (dziedzinie życia), np.: „Wirtualna
historia książki i bibliotek”
WYSIWYG – (What You See Is What You Get), widzisz to, co otrzymasz – tryb pracy
programu, w którym postać materiałów przygotowywanych zbliżona jest do efektu, jaki
można uzyskać po ich wydrukowaniu.
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
28
B. Kolory
Nazwy kolorów 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
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
Projektowanie stron WWW. Materiały do ćwiczeń. IINiB UP w Krakowie
29
NOTATKI