Professional Documents
Culture Documents
PRZYKADOWY ROZDZIA
SPIS TRECI
KATALOG KSIEK
KATALOG ONLINE
ZAMW DRUKOWANY KATALOG
TWJ KOSZYK
DODAJ DO KOSZYKA
CENNIK I INFORMACJE
ZAMW INFORMACJE
O NOWOCIACH
ZAMW CENNIK
CZYTELNIA
FRAGMENTY KSIEK ONLINE
Wydawnictwo Helion
ul. Chopina 6
44-100 Gliwice
tel. (32)230-98-63
e-mail: helion@helion.pl
Kurs tworzenia stron internetowych to idealna pozycja dla osb, ktre stawiaj
pierwsze kroki w wiecie Internetu. Dowiesz si z niej, jak rozpocz tworzenie swojej
wasnej strony WWW i co zrobi, by bya ona atrakcyjna graficznie, przyjazna dla
uytkownika i zgodna z sieciowymi standardami.
Autor nie poprzestaje na omwieniu podstaw potrzebnych do stworzenia strony, takich
jak jzyk HTML i style CSS. Unikajc skomplikowanego argonu, w przystpny sposb
przedstawia take bardziej zaawansowane zagadnienia: tworzenie skryptw w jzyku
JavaScript, dynamicznych stron WWW, formularzy oraz wzbogacanie stron
o mechanizmy e-commerce.
Spis treci
O Autorze ........................................................................................ 13
Wstp ............................................................................................. 15
Cz I
Cz II
Rozdzia 11. Zaawansowane waciwoci obrazkw oraz mapy obrazkowe .......... 199
Poprawianie wygldu obrazkw .....................................................................................199
Optymalizacja obrazkw ..........................................................................................200
Kompresja obrazkw i kodowanie progresywne......................................................201
Przezroczysto ta obrazka ......................................................................................202
Tworzenie animowanych obrazkw................................................................................204
Jasc Animation Shop.................................................................................................205
Wykorzystanie map obrazkw ........................................................................................206
Tworzenie map obrazkw dziaajcych po stronie klienta............................................206
Dodawanie atrybutu usemap do elementu <img /> ..................................................207
Elementy <map> oraz <area />.................................................................................207
Wykorzystanie map dziaajcych po stronie serwera ...............................................209
Podsumowanie ................................................................................................................210
Tworzenie ramek.............................................................................................................216
Tworzenie dokumentu ukadu ramek........................................................................217
Elementy <frame /> oraz <noframes> ......................................................................218
Przypisywanie nazw do ramek oraz definiowanie ramek docelowych ....................219
Atrybuty elementu <frame /> ...................................................................................222
Zagniedanie elementw <frameset> .....................................................................222
Zaawansowane funkcje ramek ........................................................................................223
Specjalne wartoci atrybutu target oraz usuwanie ramek .........................................224
Wywietlanie witryny bez ramek..............................................................................225
Element <iframe> .....................................................................................................227
Podsumowanie ................................................................................................................228
Rozdzia 14. Projektowanie ukadu caej witryny za pomoc arkuszy stylw ........ 247
Arkusze stylw obowizujce w caej witrynie ..............................................................247
Przykadowa witryna ................................................................................................248
Planowanie stylw ....................................................................................................250
Korzyci z wykorzystania arkuszy stylw................................................................252
Uatwienia dostpu konfigurowane za pomoc arkuszy stylw .....................................254
Kwestie midzynarodowe ...............................................................................................256
lang oraz <q> ............................................................................................................256
Kierunki wywietlania tekstu....................................................................................257
Podsumowanie ................................................................................................................257
Cz V
Narzdzia wspomagajce
projektowanie witryn internetowych..............................405
10
Dodatki .......................................................................................453
Dodatek A Leksykon polece XHTML i CSS ..................................................... 455
Elementy dokumentu XHTML-a ....................................................................................455
Deklaracja DTD ........................................................................................................455
Element <html> ........................................................................................................456
Element <head> ........................................................................................................456
Element <body>........................................................................................................457
Element komentarza..................................................................................................457
Skorowidz...................................................................................... 481
Rozdzia 2.
Podstawowe zasady
projektowania stron WWW
Projektowanie stron WWW odbywa si na rnych paszczyznach, poczynajc od
planowania pojedynczych stron WWW, a po projektowanie caej witryny, skadajcej
si z rnych, poczonych ze sob stron WWW. Rozpocznijmy od projektowania
pojedynczej strony czyli zastanwmy si, jak powinna ona wyglda oraz jakich
naley unika bdw, zwizanych ze stawianiem pierwszych krokw w wiecie projektowania stron WWW. W tym punkcie omwimy podstawowe reguy projektowania
stron WWW:
Teori lec u podstaw XHTML-a i arkuszy stylw.
Organizowanie strony zgodnie z logik HTML-a i XHTML-a.
38
Pod koniec tego punktu omwimy kilka przykadw stron WWW i rozpatrzymy zalety
ich projektu.
40
Rysunek 2.1.
Z lewej strony
przedstawiona
jest jednolita strona
tekstu, a z prawej
ta sama strona
podzielona
za pomoc
nagwkw i list
wypunktowanych
Obrazek dodany do strony WWW zwiksza jej przejrzysto i uatrakcyjnia jej projekt
graficzny. Dodatkowo, za pomoc obrazka mona szybciej przekaza rne informacje.
Rysunek 2.3 przedstawia przykad strony WWW, ktra wykorzystuje grafik do prezentowania informacji.
Obrazki s wietnym narzdziem witryn o charakterze katalogowym, witryn reklamowych, a take stron zawierajcych komunikaty prasowe. Naley si jednak wystrzega
umieszczania na stronach obrazkw, ktre nie przekazuj waciwie informacji lub
umieszczania zbyt duej iloci obrazkw na pojedynczej stronie WWW. Pamitaj
take, by unika obrazkw, ktre nie s zwizane z treci danej strony, poniewa
tylko wyduaj niepotrzebnie jej czas pobierania z serwera.
Elementy multimedialne stwarzaj jeszcze wiksze moliwoci prezentowania informacji, lecz ich wykorzystywanie niesie ze sob potencjalne problemy. Dodawanie klipw
wideo, elementw dwikowych lub animacji, pozwala znacznie uatrakcyjni witryn
internetow, lecz cen za to jest dugi czas pobierania stron WWW przez przegldark.
42
Rysunek 2.3.
Wykorzystanie
obrazka moe
uatrakcyjni ukad
graficzny strony,
a take zwikszy
jej czytelno
i funkcjoalno
Poniewa czas pobierania stron z Internetu jest jednym z najwaniejszych czynnikw decydujcych o atrakcyjnoci witryny, obiekty multimedialne powinny by uywane tylko
wtedy, jeli jest to absolutne niezbdne do przekazania danej informacji. Najlepszym rozwizaniem jest zamieszczanie obiektw multimedialnych na stronach WWW w formie
dodatkowej opcji. Dziki temu, uytkownicy posiadajcy cze z Internetem o duej przepustowoci wci mog skorzysta z tych elementw, a uytkownicy o wolnym poczeniu nie s zmuszeni do dugiego wyczekiwania na ich zaadowanie na stronie WWW.
Przepustowo cza jest to ilo danych, ktra moe zosta przesana przez okrelone poczenie w jednostce czasu. cza o duej przepustowoci s dostpne
w wielu firmach, a take w domach, za porednictwem DSL, telewizji kablowej i innych
technologii. Jednak jest to wci rynek w fazie rozwoju, a wikszo uytkownikw
uywa tradycyjnych modemw podczonych do linii telefonicznej lub inne, wolniejsze
poczenia.
Elementy interaktywne (takie jak menu, przyciski lub inne elementy umoliwiajce
wybr opcji) mona take wykorzysta do uatwienia uytkownikom nawigacji wrd
stron swojej witryny. Wymaga to woenia wikszej pracy w tworzenie witryny, lecz
uatwia korzystanie z jej zasobw. Aby oywi statyczne strony, moesz nawet wykorzysta specjalne polecenia, ktre pozwol zaprogramowa okrelone czynnoci,
wywoywane po wskazaniu mysz rnych fragmentw strony.
Zakres wykorzystania elementw interaktywnych zwizany jest wci z podstawowym
zagadnieniem zwizanym z projektowaniem stron. Czy przyciski, menu i aktywne
elementy przekazuj dodatkow informacj? Czy uatwiaj nawigacj na danej stronie
lub wrd zasobw witryny? Jeli nie, prostsza strona moe okaza si lepszym rozwizaniem.
44
Planowanie witryny
Przedstawilimy ju elementy, ktre definiuj dobr stron WWW. Czciej bdziesz jednak tworzy ca witryn, a nie tylko pojedyncz stron. Zanim jednak zabierzesz si za
tworzenie witryny, warto powici troch czasu na jej zaplanowanie. Sposb projektowania witryny wpywa na wiele rzeczy, na przykad na sposb projektowania pojedynczych stron WWW, ich zapisywanie na serwerze WWW, a nawet na kwesti doboru odpowiedniego projektu graficznego stron, zwaszcza przy korzystaniu z arkuszy stylw.
Rysunek 2.6.
Zauwa, e witryna
informacyjna Gazety
Wyborczej posiada
obrazki, lecz s one
uywane z umiarem
jako uzupenienie
prezentowanych
informacji
W tym punkcie rozwaymy kilka zagadnie, ktre naley wzi pod uwag w trakcie
planowania witryny:
Kwesti odbiorcw twojej witryny i w jaki sposb wpywa ona na projekt
witryny.
Rne opcje projektowania i tworzenia witryny.
Elementy gwarantujce dobr witryn.
46
Brzmi niewykonalnie? Aby twoja witryna bya przyjazna dla uytkownika, wykorzystaj
ponisze wskazwki:
Zorganizuj swoj witryn Postaraj si uatwi swoim odbiorcom
Organizowanie witryny
Rozwaylimy ju zagadnienia zwizane z grup odbiorcw witryny. Nadszed czas
na podjcie decyzji o sposobie jej organizacji. Organizacja witryny zaley ju wycznie
od ciebie, lecz moemy omwi kilka oglnych zasad, ktre warto wzi pod uwag.
Rysunek 2.7.
Strony Yahoo!
posiadaj dobrze
zorganizowan,
bogat zawarto,
ktra jest wietnie
wywietlana
we wszystkich
rodzajach
przegldarek
48
Co mona jednak zrobi, jeli ta sama strona posiada hipercza do oddzielnych stron,
opisujcych kady z domw w ofercie agencji nieruchomoci? W danym momencie
moe by dostpnych zamy 10 15 domw na sprzeda, wic trudno byoby umieszcza u gry strony hipercza do kadej ze stron opisujcych te domy. Zamiast tego,
mona utworzy oddzieln stron, zawierajc hipercza do stron opisujcych oferty
domw na sprzeda.
Teraz organizacja naszej witryny, przedstawiona na rysunku 2.9, staa si nieco bardziej
skomplikowana.
Rysunek 2.9.
W miar
rozbudowy witryny,
jej organizacja staje
si coraz bardziej
skomplikowana
W tym momencie musisz rozpocz podejmowanie decyzji. Kada ze stron zawierajcych opis domw na sprzeda mogaby zawiera hipercza do pozostaych stron z opisami domw, lecz rozwizanie to utrudni w duszej perspektywie aktualizacj witryny.
Kada z tych stron mogaby take zawiera bezporednie hipercza do stron z informacjami o kontakcie z agencj nieruchomoci i informacjami o kredytach hipotecznych,
lecz nie jest to zbyt jasne rozwizanie z punktu widzenia uytkownikw.
Inny sposb mgby polega na zastosowaniu strategii witryny Yahoo!, polegajcej na
wywietleniu cieki hiperczy wiodcych do biecej strony bezporednio na danej
stronie (zobacz rysunek 2.10). Zauwa, e strona przedstawiona na tym rysunku zawiera
zarwno ciek hiperczy do biecej strony, jak i tradycyjn list hiperczy umieszczon u gry strony. Jeli ten ukad nawigacyjny bdzie konsekwentnie stosowany na
wszystkich stronach witryny, nawigacja wrd jej stron bdzie atwa i przyjemna.
W miar rozrastania si witryny i przybywania kolejnych stron bdziesz mg doskonali
dalej t strategi. Warto j rozway, zwaszcza biorc pod uwag, e jest z powodzeniem
stosowana na tak duych witrynach, jak Yahoo! czy About.com.
Rysunek 2.10.
U gry strony
znajduje
si tradycyjne
menu nawigacyjne,
a pod nim cieka
hiperczy
do biecej strony
Pomijajc ju kwesti organizacji witryny, zachowanie konsekwencji w jej projektowaniu przynosi jeszcze dwojakie korzyci. Po pierwsze, dziki temu mona atwo zaprojektowa spjny, przejrzysty interfejs nawigacyjny. Dla wikszoci witryn oznacza
to tworzenie na kadej stronie podstawowych, tekstowych hiperczy nawigacyjnych,
nawet jeli na stronach tych nawigacja odbywa si take za pomoc obrazkw lub elementw multimedialnych.
Po drugie, konsekwentny ukad graficzny mona bardzo atwo zaprojektowa za pomoc arkuszy stylw. Arkusze stylw, omwione w rozdziale 10., Arkusze stylw,
czcionki oraz znaki specjalne i w rozdziale 14., Projektowanie ukadu caej witryny
za pomoc arkuszy stylw, umoliwiaj zdefiniowanie kroju czcionki, koloru i wielu
innych atrybutw odpowiedzialnych za styl wywietlanego na stronie tekstu, akapitw
i innych elementw. Arkusze stylw s bardzo przydatne w projektowaniu spjnego
ukadu graficznego witryny, poniewa mona wykorzysta jeden arkusz stylw dla
zaprojektowania caej witryny. Dziki temu, mona od razu atwo zaprojektowa schemat
graficzny witryny oraz jednoczenie zachowa zgodno ze standardem XHTML.
Dodatkowo zapewnia to zgodno projektowanych stron z rnorodnymi aplikacjami
i urzdzeniami. Tworzc strony na podstawie informacji przedstawionych w kolejnych
rozdziaach, pamitaj, e moesz zawsze nada im unikaln szat graficzn za pomoc
arkuszy stylw, omawianych w rozdziale 10.
50
Uatwienia dostpu
Najnowszy standard XHTML-a uatwia w rny sposb odczytywanie stron WWW
przez uytkownikw niepenosprawnych. Na przykad, element obrazka moe zawiera
take alternatywny tekst, ktry moe by wywietlany zamiast obrazka. (Temat ten zosta
omwiony w rozdziale 6., Dodawanie grafiki). Tekst ten moe zosta wykorzystany
przez przegldarki nie pracujce w trybie graficznym do przedstawienia opisu obrazka
(take w formie dwikowej). W okrelonych przypadkach moesz nawet utworzy
specjalne hipercza do duszego, wycznie tekstowego opisu obrazka, ktry moe
zosta wykorzystany przez osoby niewidome do zapoznania si z treci przekazywan
przez dany obrazek.
Take inne elementy XHTML oferuj opcje uatwienia dostpu. Na przykad, elementy
wykorzystywane do tworzenia formularzy na stronie WWW elementy menu, przyciskw wyboru i pl tekstowych teraz posiadaj dodatkowe funkcje uatwie dostpu.
Dziki temu, niepenosprawni uytkownicy wyposaeni w specjalne przegldarki mog
take korzysta z zasobw twojej witryny.
Najwaniejszym czynnikiem, decydujcym o uzyskaniu szerokiego krgu odbiorcw,
jest zaprojektowanie moliwie jak najbardziej prostych i logicznych stron WWW. Efekt
ten mona uzyska, stosujc nagwki, akapity, listy wypunktowane i inne elementy
pozwalajce wyrni zawarto strony na tle jej ukadu graficznego. Jeli przykadowo
umiecimy na stronie nawet zwyke elementy tabeli XHTML-a, pomagajce zaprojektowa ukad graficzny strony WWW, przegldarki nie pracujce w trybie graficznym
bd miay problemy z jej odczytaniem. Mniej skomplikowana strona WWW, posiadajca nagwki i akapity, bdzie moga by przegldana przez rne urzdzenia korzystajce z sieci WWW.
Ustawienia midzynarodowe
XHTML posiada kilka elementw i atrybutw, ktre uatwiaj projektowanie elastycznych stron dla midzynarodowej grupy odbiorcw. Na przykad, wiele elementw moe
korzysta z atrybutu , ktry umoliwia wybr jzyka uywanego do przedstawiania
okrelonego elementu. Atrybut ten moe zosta wykorzystany przez przegldarki do
zinterpretowania w okrelony sposb elementu strony lub wywietlenia go w odmienny
sposb. Atrybut ten, wraz z elementem (ktry moe zosta wykorzystany do wywietlania cytowanego tekstu w rnych formatach, w zalenoci od zdefiniowanego
jzyka), zostan omwione w rozdziale 5., Formatowanie tekstu.
Innym aspektem midzynarodowych ustawie jest wykorzystanie aplikacji automatycznie tumaczcych twoje strony na inne jzyki. Generalnie, programy te osigaj
najlepsze rezultaty przy przetwarzaniu stosunkowo prostych zda. Aby uatwi innym
tumaczenie i odczytywanie swoich stron, powiniene si postara, by napisa je jak
najbardziej przejrzystym jzykiem. Staraj si uywa prostych zda i regu gramatycznych i unika zwrotw potocznych, metafor i sloganw. (Na przykad zdanie Nastaa
cisza jak makiem zasia. nie zostaoby tak dobrze przetumaczone, jak Stao si bardzo
cicho). Moesz nawet utworzy specjalne, uproszczone wersje stron witryny, zaprojektowane pod ktem dokonywania automatycznego tumaczenia. Przykadem witryn
oferujcych funkcje tumacze s:
Google.com szczegy odnajdziesz na stronie
http://www.google.com/help/faq_translation.html,
AltaVista.com oferuje usug BabelFish, dostpn na stronie
http://babelfish.altavista.com,
FreeTranslations.com inny przykad witryny, ktra przetumaczy
Podsumowanie
W tym rozdziale zostay przedstawione podstawowe zasady projektowania stron i witryn
internetowych. Im prostsza bdzie zaprojektowana strona i jej ukad nawigacyjny, tym
bardziej bdzie ona dostpna dla szerokiego krgu odbiorcw. Temat ten obejmuje
waciwe zorganizowanie pojedynczych stron i caych witryn internetowych. Musisz
take rozway, w jaki sposb zaprojektowane strony bd wywietlane u wszystkich
twoich potencjalnych uytkownikw, take w przegldarkach nie pracujcych w trybie
graficznym lub przegldarkach interpretujcych strony jako tekst czytany, tekst zapisany
w alfabecie Braillea lub tumaczony na inne jzyki. Omwilimy tutaj take kilka
przykadw dobrze zorganizowanych witryn oraz kilka pomysw wartych naladowania.
W nastpnym rozdziale zostan przedstawione narzdzia do tworzenia dokumentw
na potrzeby sieci WWW i sposoby publikowania dokumentw w sieci WWW.