Professional Documents
Culture Documents
Danows ki
tl\
H e lio n
Spis treci
W s t p ................................................................................................................. 9
Uwagi techniczne ...........................................................................................11
Rozdzia 1.
Podstawowe informacje................................................................................ 13
Czym jest internet? .................................................................................................................. 13
Czym jest strona WWW, a czym witryna?............................................................................14
Dlaczego warto prowadzi wasn stron WWW? .............................................................. 15
Oprogramowanie potrzebne przy tworzeniu stron WWW a doczona pyta CD ............17
Edytory tekstu ....................................................................................................................18
Edytory grafiki ...................................................................................................................19
Programy do przygotowywania grafiki sieciowej..........................................................19
Etykieta i prawo autorskie ...................................................................................................... 20
Wybr usugodawcy, u ktrego zamiecimy stron W W W ................................................21
Wasna domena........................................................................................................................ 23
Twarda spacja...................................................................................................................47
Znacznik D IV ...................................................................................................................48
Formatowanie tekstu za pomoc edytora kE D ............................................................. 48
L isty ......................................................................................................................................... 50
Lista wypunktowana .......................................................................................................50
Lista numerowana ........................................................................................................... 50
Lista definicji....................................................................................................................51
Listy zagniedone.......................................................................................................... 51
Tworzenie list za pomoc edytora kED ........................................................................52
Grafika na stronie WWW ......................................................................................................53
Osadzanie grafiki za pomoc edytora kED ...................................................................56
Hipercza................................................................................................................................58
Hipercza tekstowe ........................................................................................................59
Hipercza graficzne........................................................................................................ 61
Mapy odsyaczy................................................................................................................62
Kotwice ............................................................................................................................ 65
Adresy wzgldne i bezwzgldne ....................................................................................66
Tworzenie hiperczy za pomoc edytora kED ............................................................ 67
Tabele ...................................................................................................................................... 69
Proste tabele ..................................................................................................................... 72
Wymiarowanie tabel ....................................................................................................... 73
Tabele niesymetryczne.................................................................................................... 76
Zagniedanie tabel......................................................................................................... 77
Dodatkowe elementy tabeli ............................................................................................ 78
Tworzenie tabel za pomoc edytora kED ..................................................................... 79
Formularze...............................................................................................................................84
Pola typu input .................................................................................................................84
Pole typu select.................................................................................................................86
Pole typu textarea .............................................................................................................87
Przesyanie treci formularza ......................................................................................... 87
Ramki....................................................................................................................................... 88
Rozdzia 3.
Rozdzia 4.
Spis treci
Rozdzia 5.
Rozdzia 6.
Rozdzia 7.
Rozdzia 8.
Rozdzia 9.
Spis treci
Dodatek A ...........................................................................................................................343
Podsumowanie ......................................................................
367
Wstp
Internet na dobre zagoci w domach wielu Polakw. Dzisiaj nie jest niczym nadzwy
czajnym robienie zakupw za jego porednictwem, rezerwacja biletw, korzystanie
z usug bankowych, ogldanie telewizji i suchanie radia czy te nawizywanie po
cze gosowych i wideo. Globalna sie staa si czym tak oczywistym i niezbdnym
jak prawo jazdy czy telefon komrkowy.
Kady wiadomy czonek spoeczestwa moe, a w niektrych przypadkach powinien
mie wasn stron WWW. Osoby prywatne dziki intemetowi m og dzieli si swoimi
zainteresowaniami, natomiast firmy powinny traktowa globaln sie jako miejsce, w kt
rym obowizkowo powinny si profesjonalnie prezentowa i wiadczy za jej pomoc
przynajmniej cz swoich usug.
Projektowanie stron WWW w cigu ostatnich lat bardzo si zmienio i cigle ewoluuje.
Kiedy strony tworzyli naukowcy w celu prezentacji wasnych osigni pracowni
kom innych uczelni. Ze wzgldu na spore ograniczenia intemetu oraz ubogie moli
woci jzyka HTML publikacje te byy mao interesujce od strony wizualnej. Charak
teryzoway si do prost konstrukcj bloki tekstu rozdzielano za pomoc poziomych
linii. Strony mogy zawiera listy wypunktowane lub numerowane oraz nagwki.
W miar pojawiania si kolejnych wersji jzyka HTML i XHTML oraz rozwoju sieci
strony wyglday coraz lepiej. Obecnie witryny to w bardzo wielu przypadkach praw
dziwe dziea sztuki internetowej, tworzone z wykorzystaniem najnowszych rozwiza,
takich jak Ajax, Adobe Flash czy te bazy danych i jzyki skryptowe dziaajce po
stronie serwera.
Przygotowanie strony WWW nie jest rzecz skomplikowan. miem twierdzi, e stron
WWW moe zrobi kady, kto bdzie mia odrobin chci. Niestety, strona stronie
nierwna. Wielu pocztkujcych adeptw popenia koszmarne bdy i raczy wiat mniej
szymi lub wikszymi potworkami. Dlatego zdecydowaem si odwiey niniejsz
ksik i przygotowa jej drugie wydanie.
Ksika pozwoli Ci zdoby solidne podstawy, dziki ktrym bdziesz mg tworzy
wasne witryny internetowe. Czytajc kolejne rozdziay, poznasz najnowsz odson
jzyka XHTML 1 oraz CSS 2, ktre s niezbdne do tworzenia stron WWW.
10
Bartosz Danowski
bartek@danowski.pl
http://danowski.pl
Uwagi techniczne
Zwarto pyty CD-ROM
Pyta doczona do tej ksiki zawiera komplet oprogramowania przydatnego do two
rzenia stron WWW. Aplikacje w wikszoci s wersjami darmowymi (freeware), cho
znajduj si tam rwnie narzdzia komercyjne (wersje trial). Pamitaj, e w przypadku
kadego programu autor sprecyzowa warunki jego uywania. Moe to by zgoda na
uywanie programu w celach edukacyjnych lub zupeny brak ogranicze. Zapoznaj si
z warunkami i uywaj programu zgodnie z licencj! Pragn nadmieni, e internet jest
peny przernych darmowych programw, ktre s odpowiednikami patnych aplika
cji, dlatego tworzc strony WWW, nie musisz pracowa na piratach .
Uwaga
12
Uwaga
Rozdzia 1.
Podstawowe informacje
Czym jest internet?
Ocena i jakakolwiek charakterystyka intemetu jest do trudna. Dlatego sprbuj opi
sa, czym jest internet w moim odczuciu. Ot kilka lat temu, gdy stawiaem swoje
pierwsze kroki na cybernetycznej drodze, uwaaem, e to kolejna chwilowa moda
i kwesti czasu jest, by pomys umar i znikn z naszego globu. Dzisiaj, gdy pomy
l, jaki byby wiat bez dostpu do sieci i oferowanych przez ni moliwoci, nie
potrafi w nim znale miejsca dla siebie. Dziki internetowi mog na bieco ledzi
notowania giedowe, czyta poranne gazety, zarzdza swoimi pienidzmi, a w kocu
pracowa i pisa ksiki. Nie wyobraam sobie chwili, w ktrej kto wyjmie wtyczk
i sie zganie stracibym prac, byskawiczny dostp do informacji, a nawet wielu
przyjaci. Czasem zastanawiam si, czy ju nie jestem uzaleniony i nie powinienem
si leczy w specjalistycznych poradniach, ale mam nadziej, e tak nie jest bo prze
cie stracibym wtedy dostp do sieci.
W moim odczuciu internet to jedno z najwikszych osigni wspczesnej cywiliza
cji. Potrafi sobie wyobrazi wiat bez ciepej wody, restauracji czy samochodu, ale nie
widz moliwoci jego istnienia bez sieci.
Oczywicie opisane zalety nie wyczerpuj zagadnienia i zupenie pomijaj drugi aspekt
sprawy. Mam tutaj na myli fakt, e internet pozwala nam rwnie aktywnie w nim
zaistnie i pozostawi czstk siebie. Jeeli poznamy jzyk HTML i XHTML i przy
swoimy sobie podstawy korzystania z sieci, to m oemy bra aktywny udzia w jej
tworzeniu, rozrastaniu si nasza praca bdzie jak tlen niezbdny do ycia.
Biblioteka
Pol. Wroc.
14
15
16
Rysunek 1.1.
D ruga wersja
w itryny danowski.pl
17
Inn rol moe spenia strona firmy usugowej, np. szewca. Zakad szewski wiad
czy jedynie usugi dla ludnoci, a jego strona powinna zawiera informacje o firmie,
adres i godziny pracy, mapk jeeli trudno do niej trafi, informacje o wiadczo
nych usugach oraz cennik. Strona taka nie wymaga czstych aktualizacji, poniewa ma
ona jedynie charakter informacyjny. Jeeli zrobisz tak witryn dla firmy, pamitaj
o tym, e dane w niej zawarte powinny by zawsze aktualne. Nie moesz sobie po
zwoli na to, by numer telefonu by nieaktualny lub poczta elektroniczna kierowana
do zakadu pozostawaa bez odpowiedzi to le wiadczy o firmie.
Moim zdaniem ciekaw funkcj ma do spenienia strona firmy produkcyjnej. Zasta
nwmy si, co powinna zawiera strona producenta gumowych uszczelek. Produkt
mao interesujcy, ale jake potrzebny na rynku. Moim zdaniem na stronie takiej firmy
szukabym informacji o asortymencie wytwarzanych uszczelek (informacje o typach,
rozmiarach), moliwoci nabycia, lokalnych przedstawicielach lub sklepach wsppra
cujcych z producentem. Bardzo w an rzecz jest to, by na stronie znalazy si in
formacje na temat warunkw wsppracy i zakupu. W tym przypadku producent raczej
nie bdzie si zajmowa sprzeda detaliczn, dlatego zakadam, e moemy pomin
tworzenie sklepu. Podobnie jak w poprzednich przykadach, rwnie i tym razem strona
powinna by zawsze aktualna, a na listy elektroniczne odpowiada naley przynajm
niej raz dziennie.
Podsumowujc, z ca pew noci mog pow iedzie, e strony firm bez wzgldu na
bran i prow adzon dziaalno m aj kilka wsplnych elementw, ktre w ym ieni
em dalej:
dane powinny by zawsze aktualne,
poczta odwiedzajcego nie moe pozosta bez odpowiedzi,
obowizkowymi elementami s dane teleadresowe.
Uwaga
Oprogramowanie potrzebne
przy tworzeniu stron WWW
a doczona pyta CD
Dokument XHTML (HTML) jest zwykym plikiem tekstowym, czyli do wykonania
strony nie jest nam potrzebny aden specjalny program ani rodowisko programi
styczne wystarczy zwyky edytor tekstu, np. N otatnik, bdcy czci skadow
kadego systemu MS Windows.
18
Niestety, Notatnik jest niezwykle prostym edytorem tekstowym i nie obsuguje XHTML
(HTML), wic wymaga szczeglnej dbaoci o wpisywany kod. Przy tworzeniu stro
ny w Notatniku nietrudno o liczne bdy oraz przeoczenia, dlatego podczas regularnej
pracy nad stron WWW warto sign po wyspecjalizowane narzdzia. Do dyspozy
cji mamy dwa rodzaje edytorw.
Edytory tekstu
Wspominaem o tym, e pliki zawierajce kod strony WWW to dokumenty tekstowe,
a co za tym idzie, do ich edycji moemy wykorzysta dowolny tekstowy edytor, np.
systemowy Notatnik. Niestety, takie rozwizanie nie naley do zbyt wygodnych, gdy
wymaga kadorazowo rcznego wklepywania wszystkich niezbdnych znacznikw
oraz pamitania o ich domykaniu. W zwizku z tym na rynku stosunkowo szybko po
jawiy si wyspecjalizowane edytory programistyczne wyposaone w szereg dodatko
wych funkcji, znacznie uatwiajcych prac webmasterowi.
Najwaniejsze cechy, jakimi powinien charakteryzowa si dobry edytor tekstowy, to:
domykanie znacznikw,
kolorowanie skadni,
kodowanie polskich znakw w standardzie ISO i UTF,
kreatory uatwiajce generowanie czci kodu,
sprawdzanie poprawnoci wygenerowanego kodu.
Na rynku moemy znale wiele bardzo dobrych i godnych polecenia edytorw tek
stowych. Dlatego ostatecznie zdecydowaem si nie proponowa konkretnego, a jedynie
przedstawi wykaz kilku ciekawych rozwiza, ktre, moim zdaniem, zasuguj na
uwag. Pragn nadmieni, e wszystkie wybrane edytory s aplikacjami darmowymi.
kED bardzo wygodny polski edytor XHTML (HTML) i CSS. W tej chwili
nie bd zachwala moliwoci edytora, poniewa opisaem go w dalszej czci
ksiki przy okazji omawiania jzyka XHTML (HTML) i CSS. Program znajduje
si rwnie na doczonej pycie CD.
1st Page 2006 bardzo rozbudowany edytor stron WWW, ktry pozwala
na prac nad stron w trybie tekstowym oraz graficznym. Warto zwrci
uwag na to, e posiada on mechanizm domykania znacznikw, kolorowania
skadni oraz wygodne podpowiedzi. Duy plus naley si autorowi za dodanie
dziesitek kreatorw, uatwiajcych utworzenie bardziej skomplikowanego
elementu na stronie, np. uzyskanie popularnego efektu rollover albo dodanie
tabeli czy galerii ze zdjciami. Prezentowane narzdzie wspiera prac z kodem
XHTM L i HTML. Strona domowa edytora to http://www.evrsoft.com.
Minusem jest brak polskiej wersji jzykowej.
19
Edytory grafiki
Tego rodzaju edytory s z reguy duo bardziej wymagajce (aspekt sprztowy), a praca
z nimi przypomina tworzenie dokumentu, np. w program ie MS Word. Programy te
oferuj wiele kreatorw i gotowych szablonw, majcych pomc w pracy nad stron.
Do istotn wad edytorw graficznych jest ograniczona kontrola kodu strony, ktry
niestety w przypadku takich programw czsto pozostawia wiele do yczenia.
Przykadem edytorw graficznych s m.in. MS FrontPage, jednak bezapelacyjnie naj
lepszy w tej kategorii jest Dreamweaver firmy Adobe (wczeniej Macromedia). Program
ten ma potne moliwoci, a przy tym jego obsuga nie jest zbyt skomplikowana.
Na temat wspomnianych programw moesz przeczyta wicej na stronach:
Dreamweaver http://www.adobe.com/products/dreamweaver
MS Front Page http://www.microsoft.com/frontpage
20
Uwaga
21
Z pewnoci zdziwisz si, ale zbierajc materia na pyt CD doczon do tej ksiki,
pytaem kadego autora, czy mog jego program opublikowa na pycie. Nie zwraca
em tutaj uwagi na to, e narzdzie jest zupenie darmowe czy te e mona je testo
wa przez okres 30 dni. Jeeli zachodzia taka potrzeba, wysyaem stosowne umowy
lub dokumenty wymagane przez autorw. Wszystko po to, by nikt nie mg mi zarzuci,
e zamaem prawo chronice jego interesy.
Wbrew pozorom zagadnienia te s oczywiste, a jednak niemal codziennie na forach
i grupach dyskusyjnych spotykam informacje o kolejnych plagiatach lub permanent
nych inspiracjach innymi projektami. Niestety, zjawisko to jest i bdzie nadal obecne
w polskiej sieci, ale mam nadziej, e Twoje podejcie bdzie odpowiednie do rangi
problemu.
Pamitaj, e uywajc pracy innych, amiesz prawo, ale prdzej czy pniej tego sa
mego moesz dowiadczy. Kto inny uyje Twoich tekstw lub szaty graficznej czy
te ukadu strony bez Twojej wiedzy i zgody.
Z pewnoci autorytetem w zakresie etyki webmasterskiej jest Pawe Wimmer, ktry
ju kilka lat tem u spisa najw aniejsze zaoenia i um ieci je w swoim kursie. N ie
bd tutaj cytowa Pawa, tylko podam odnonik do odpowiedniej strony http://
webmaster.helion.pl/kurshtml/porady/porady.htm.
Zapoznaj si z etykiet i staraj si do niej stosowa. Na pewno niczego nie stracisz,
a moim zadaniem moesz zyska szacunek i uznanie innych.
Wybr usugodawcy,
u ktrego zamiecimy stron WWW
Wybr odpowiedniego dostawcy usug internetowych nie jest prosty, gdy na rynku
dziaaj setki, o ile nie tysice firm. Podobnie jak w yciu codziennym, tak i tutaj mo
emy spotka firmy porzdne oraz nacigaczy. Dla mnie zasady panujce na rynku
usug internetowych nie zawsze s zrozumiae. Nie rozumiem i nie darz zaufaniem
firm, ktre oferuj usugi za V5 ceny proponowanej przez kilka innych, dziaajcych
znacznie duej na rynku. Zawsze mam wraenie, e to, co tanie, jest drogie, i osobicie
nie polecabym korzystania z usug bardzo tanich firm bez bazy klientw. Moim zda
niem przed podjciem decyzji o wyborze dostawcy warto go sprawdzi. Naley kon
trolowa przez jaki czas, czyjego serwery dziaaj poprawnie i stabilnie. Doskonaym
rdem wiadomoci o jakoci usug firmy moe okaza si baza klientw. Warto zwr
ci uwag na to, jacy klienci korzystaj z usug dostawcy. Duym minusem jest fakt
obsugi przez firm stron o tematyce erotycznej, gdy s one powodem ogromnego
22
obcienia serwerw i zapychania czy. Na dzie dzisiejszy coraz wicej firm oferuje
moliwo przetestowania swoich usug, zanim za nie zapacimy, dlatego warto z takiej
moliwoci skorzysta.
Oferowane usugi s bardzo zrnicowane, tote warto dokadnie czyta dostpne mate
riay reklamowe, by unikn rozczarowania.
Jeeli szukasz patnego usugodawcy na potrzeby publikacji swojej strony utworzonej
z wykorzystaniem materiaw zawartych w tej ksice, to niemal kada oferta bdzie
odpowiednia. Zakadam jednak, e na tym etapie nie zakoczysz swojej przygody,
dlatego powiniene szuka wirtualnego serwera speniajcego nastpujce warunki:
moliwo rejestracji wasnej domeny,
pojemno serwera uzaleniona od wymogw serwisu (z pewnoci
pierwsze projekty bd zajmoway po kilkaset kilobajtw, ale sugerowabym,
by pojemno przeznaczona na stron wynosia przynajmniej 100 MB
z m oliwoci poszerzenia nigdy nie wiadomo, co przyniesie przyszo),
konto e-mail o duej pojemnoci,
brak limitu na generowany przez nasz serwer ruch w sieci lub limit na tyle duy,
e nie bdzie koniecznoci dokupywania dodatkowego transferu.
moliwo rozszerzenia usugi o uruchamianie skryptw PHP i dostp
do bazy danych.
Oczywicie, nie bez znaczenia pozostaje odpowiednie wsparcie techniczne oraz do
datkowe usugi wiadczone przez operatora, np. obsuga poczty przez WWW, pakiet
pomocnych skryptw, etc.
Jeeli tworzysz stron dla firmy, bezwzgldnie powiniene skorzysta z oferty patnej,
gdy tylko ona zapewni Ci odpowiednie poczucie bezpieczestwa oraz wiarygodno.
W przypadku gdy tworzysz strony czysto hobbystycznie, miao moesz skorzysta
z oferty darmowej. Pamitaj jednak, e usugi takie m og by pozbawione wsparcia
technicznego, co w przypadku awarii lub kopotw staje si duym problemem. Umiesz
czajc projekt na darmowym serwerze, akceptujesz regulamin tam obowizujcy i jeste
zobowizany do wykonania pewnych zalece waciciela. Dlatego zanim opublikujesz
stron, przeczytaj dokadnie, jakie masz prawa i obowizki.
Dalej zamieszczam kilka odnonikw do dobrych serwerw patnych oraz ich darmo
wych odpowiednikw. Mam nadziej, e dziki temu pomog Ci podj decyzj o wy
borze lokalizacji dla Twojej strony WWW.
Serwery patne:
http://www.progreso.pl
http://www.home.pl
23
Serwery darmowe:
http://pages.google. com
http://republika.pl
http://www.prv.pl
V
Uwaga
Wasna domena
Na pocztku wyjani, czym jest domena i do czego jest ona nam potrzebna. Jak za
pewne si domylasz, dziaaniem tak rozbudowanej sieci, jak jest internet, musz rz
dzi pewne prawa i zasady. Jedno z nich dotyczy adresowania poszczeglnych miejsc.
Ma ono nastpujc posta: 213.180.130.200. Numer ten nosi nazw adresu IP. Za
pamitanie takiego adresu dla wielu z nas bywa czsto kopotliwe, w zwizku z czym
powstaa usuga pozwalajca dokona zamiany adresu IP na nazw zrozum ia dla
czowieka domen. Konwersja odbywa si automatycznie dziki specjalnym ser
werom DNS. Serwery te zaw ieraj spis numerw IP oraz przypisanych im domen.
W naszym przypadku odpowiednikiem podanego adresu IP jest http://onet.pl.
Do wyboru mamy kilkaset domen gwnych, w ktrych moemy rejestrowa swoje
adresy. W Polsce najpopularniejsze z nich to p l domena krajowa, com.pl, net.pl do
meny funkcjonalne oraz domeny regionalne skadajce si z nazwy miasta i przyrostka
kraju, np. katowice.pl.
List wszystkich domen funkcjonalnych i regionalnych obsugiwanych przez NASK
(i nie tylko) mona znale pod adresem http://www.dns.pl/dns-funk.html oraz http://
www.dns.pl/dns-regiony.html.
Nazwa domeny moe zawiera jedynie znaki alfabetu aciskiego, cyfry i znak m i
nus (-). Od niedawna jest moliwe stosowanie polskich znakw narodowych, ale
rozwizanie to jeszcze nie zyskao popularnoci i sprawia problemy w niektrych
przegldarkach. Niestety, nie mona uywa przerw w wieloczonowych nazwach,
a maksymalna liczba znakw to 63.
Posiadanie domeny wie si z dodatkowymi kosztami, ale w zamian daje adres, kt
ry jest niezaleny od usugodawcy. Zamy, e zdecydowaem si na konto w firmie
http://www.xyz.pl i korzystam z adresu, ktry firma daa mi w cenie wykupionej usu
gi; ma on posta http://www.danowski.xyz.pl. Jeeli zrezygnuj z usug firmy XYZ na
rzecz innej, np. ZYX, to niestety strac poprzedni adres. Jedynym sposobem na unik
nicie takiej sytuacji jest wasny adres domena.
24
Przy obecnej konkurencji niemal kada firma poredniczy w naszym imieniu w pro
cesie rejestracji domeny, dlatego nie bd tutaj omawia dokadnie wszystkich proce
dur z tym zwizanych. Proponuj aby zapozna si z ofert swojego dostawcy lub
zerkn do dodatku znajdujcego si na kocu niniejszej ksiki.
%
Uwaga
W asna dom ena daje Ci w olno. W kadej chwili m oesz zmieni usugodawc
i delegacj domeny. Wszystkie dokumenty i wizytwki zawsze bd aktualne, a Ty
moesz zmienia usugodawc nawet co rok.
Rozdzia 2.
26
osoby chcce budowa swoje strony przy wykorzystaniu samego jzyka HTML rw
nie znajd tu co dla siebie, poniewa XHTML i HTML s do siebie bardzo podobne.
Poniej zamieciem wykaz odnonikw do specyfikacji najnowszych wersji jzykw
XHTML, HTML i narzdzia sucego do sprawdzania poprawnoci kodu walidatora.
http://www.w3.org/TR/html4 specyfikacja HTML 4.01
http://www.w3.org/TRJxhtmll 1 specyfikacja XHTML 1.1
http://validator.w3.org walidator
Pliki zawierajce odpowiednie polecenia jzyka XHTML (HTML) znaczniki s
plikami tekstowymi i m og korzysta z rozszerze przedstawionych w tabeli 2.1.
Tabela 2.1. Podstawowe rozszerzenia plikw strony WWW
.htm
.html
.shtml
plik tekstowy zawierajcy kod HTML oraz instrukcje SSI pliki takie s przetwarzane
przez serwer przed wysaniem do przegldarki
php
,php3
.cgi
pl
pliki tekstowe zawierajce skrypty napisane w Perlu czsto poczone z kodem HTML
.CSS
27
x m l n s = " h t t p :/ / w w w . w 3 .o r g / 1 9 ' 9 9 / x h t m l w
x m l :l a n g = " p l
lang="pl">
<head>
<tite>8artosz
<meta
<meta
n a m e * "keywords
informatyka,
DanowsJci</title>
http-equiv="Content-Type"
ksika,
content="Bartosz
helion,
cdrinfo,"
cmeta
na m e * " author"
cme t a
n a m e = p u b l i s h e r "
<meta
name*"distribution"
cmeta
name=" g e n e r a t o r "
name="robots"
cmeta
name="revisit-after"
<link
rel="styles!ieet"
<link
rel="alternate"
content="pl"
informatyczna,
ksiki,
all"
/>
/>
/>
2.0.3"
/>
leave
< !
t his
for stats
>
/>
/>
content="5
days"
/>
/>
href="/wydruk.css"
type="text/css"
type="application/rss+xml"
rel="pingback"
/>
h r e f = " h t t p : / / d a n o w s k i .p i / w p - c o n t e n t / t h e m e s / d a n o w s k i / s t y l e . c s s "
Danowski"
content*"global"
content*"follow,
media="screen"
literatura
B a r c z e n t e w i c z
content*"WordPress
name*"language"
rel="Stylesheet"
ch a rset=UTF-8"
/>
c o n t e n t * "Bartosz
<meta
type="text/c33"
Danowski,
content="Mikolaj
<meta
<link
content*"text/html;
t i t l e * "Bartosz
/>
Danowski
RSS
Feed"
/>
/>
<script
<script
s r c = " h t t p :/ / d a n o w s k i . p i / j s / s c r i p t a c u l o u s . j s ? l o a d = e f f e c t s "
s r c = " h t t p : / / d a n o w s k i . p i / j 9 / g e n e r a l .j s "
Podobnie jak jzyk XHTM L (HTML), rwnie kaskadowe arkusze stylw s stan
daryzowane przez konsorcjum W 3C, a odpow iednie specyfikacje znajduj si na
stronie WWW:
http://www.w3.org/TR/REC-CSSl specyfikacja CSS1
http://www.w3.org/TR/REC-CSS2 specyfikacja CSS2
http://www.w3.org/TR/CSS21 specyfikacja CSS2.1
http://jigsaw. w3. org/css-validator walidator
Ksika wykorzystuje informacje zawarte w specyfikacjach CSS1, CSS2 oraz CSS2.1
i z oczywistych wzgldw nie zawiera opisu wszystkich moliwoci (byoby to
po prostu niemoliwe). Postanowiem skupi si jedynie na elementach uywanych
w codziennej pracy.
V
Uwaga
28
Uwaga
XHTML
<br>
<br />
<hr>
<hr />
<img>
<img />
<meta>
<meta />
<1 i nk>
<base>
<base />
29
Zwr uwag, e spacja znajduje si jedynie midzy nazw znacznika i atrybutem. Nie
ma spacji po nawiasie otwierajcym i przed zamykajcym nawiasem ktowym.
Podstawowe rnice
pomidzy HTML i XHTML
Jzyk HTML pojawi si jako pierwszy i doczeka si kilku specyfikacji oraz prze
szed wiele zmian od chwili pojawienia si. Natomiast XHTML jest nowym wciele
niem HTML, ktrego rozwijanie zakoczono na wersji 4.01.
XHTML przej wikszo elementw ze swojego starszego brata jzyka HTML.
Dlatego znajc HTML, bez wikszych problemw poradzisz sobie z przygotowaniem
dokumentu zgodnego ze specyfikacj XHTML. Naley tylko pamita o kilku kluczo
wych zmianach w skadni jzyka oraz usuniciu niektrych znacznikw i atrybutw.
V
Uwaga
30
<hr>,
<meta>,
<img>.
<meta />,
<img />.
Wane jest, aby bezporednio przed znakiem / doda spacj. Brak spacji moe powo
dowa nieprawidowe dziaanie strony WWW w niektrych przegldarkach, ktre sa
biej sobie radz z obsug jzyka XHTML.
------------------------------------------------------------------------------
31
Struktura dokumentu
Niezalenie od tego, czy korzystamy z HTML, czy XHTML, kady dokument posia
da cile okrelony szkielet, ktry nie zmienia si w zalenoci od zawartoci strony.
Oczywicie, szkielet dla strony zbudowanej w HTML rni si od szkieletu wykorzy
stywanego w stronach tworzonych w XHTML.
32
Wiersz ten okrela, i nasza strona zostaa zakodowana przy uyciu jzyka HTML w wer
sji 4.01 i nie zawiera adnych elem entw z wersji poprzednich. Informuje on rwnie
o tym, e strona nie jest oparta na ramkach.
Kolejny moliwy wpis jest widoczny poniej i informuje, e uylimy jzyka HTML 4.01
w wersji przejciowej, czyli takiej, ktra zawiera rwnie znaczniki z poprzednich
wersji jzyka HTML, np. 3.2.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/1oose.dtd">
Dla stron opartych na ramkach i HTML w wersji 4.01 przewidziano nastpujcy wpis:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http:/ /www.w3.org/TR/html4/frameset.dtd">
W przypadku kodu strony wykorzystujcej jzyk XHTML deklaracja DOCTYPE w ygl
da nieco inaczej.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-stri c t .dtd">
Pierwszy m oliw y wpis dotyczy sytuacji, w ktrej przygotowalimy stron w ykorzy
stujc w ycznie jzyk XHTM L i cile trzymamy si zalece specyfikacji. Innymi
sowy, tego typu deklaracji uywamy w stronach o najczystszym kodzie. Naley pa
mita, e gdy korzystamy z powyszej deklaracji, w kodzie strony nie moemy stoso
wa ramek.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional,dtd">
Druga wersja deklaracji DOCTYPE dotyczy sytuacji, w ktrej wykorzystujemy jzyk
XHTML, ale nie trzymamy si cile zalece specyfikacji. Dokadniej mwic, kod za
wiera elementy jzyka XHTML oraz HTML. Korzystanie z tej formy nie jest najlepszym
rozwizaniem, cho w praktyce okazuje si, e dziki agodniejszemu spojrzeniu na za
lecenia specyfikacji znacznie prociej zbudowa dziaajc stron zgodn z XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http:/ /www.w3.org/TR/xhtmll/DTD/xhtml1-frameset.dtd">
Ostatni wariant nagwka DOCTYPE dopuszcza stosowanie ramek. W pozostaych zale
ceniach niczym nie rni si od deklaracji DOCTYPE w wersji Tran sitio n a l.
33
Nagwek strony
Bezporednio po otw ierajcym znaczniku <html> pow inien si znale znacznik
<head></head>. Element ten rwnie nie zaw iera adnych atrybutw i w ystpuje
w parze ze znacznikiem zamykajcym.
<?xml version="1.0" encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp ://www.w3.org/TR/xhtmll/DTD/xhtml1-stri c t .dtd>
<html xmlns="http://www.w3.org/1999/xhtml" xml: 1ang="pl" 1ang="pl">
<head>
</head>
</html>
Strona kodowa
Zaczn od najwaniejszego elementu, ktry jest odpowiedzialny za stron kodow
tworzonego dokumentu. Jzyk HTML i XHTM L jako ponadsystemowy nonik in
formacji musi mie moliwo obsugi rnych jzykw, a co za tym idzie, rnych
znakw narodowych. W zwizku z tym zostay okrelone rne strony kodowe dla da
nych jzykw i czci wiata. Dla naszego kraju odpowiednim standardem jest strona
kodowa ISO 8859-2. Jest to strona kodowa dziaajca na wszystkich platformach
systemowych: MS Windows, Unix, Linux, Mac OS i wielu innych, dlatego jako wia
domy projektant stron musisz stosowa si do tej normy. Kto moe zauway, e prze
cie wystarczy wpisa polskie znaki w Notatniku, a i tak wszystko zadziaa. Oczywicie,
nie mona odrzuci takiego pomysu, ale naley zwrci uwag, e tak zakodowane
polskie znaki narodowe m og sprawia problem y podczas wywietlania na bardziej
oryginalnych platformach, np. w telefonach komrkowych.
By uzyska popraw n stron kodow, mamy kilka moliw oci. Pierwsza to edytor
z wbudowanym odpowiednim moduem do konwersji znakw w locie, np. uywany
przez nas kED. Druga moliwo to wstawianie polskich znakw w sposb tradycyjny,
czyli w formacie W indows 1250, a nastpnie konwertowanie za pom oc specjalnych
programw konwerterw, np. Gegka XP (znajduje si na pycie CD).
34
Uwaga
Natomiast dla strony kodowej Windows 1250 odpowiedni wpis wyglda tak:
<meta http-equiv="Content-Type" content="text/htm l; charset=windows-1250" />
W tej ksice bd uywa strony kodowej zgodnej z norm ISO 8859-2 i Tobie rw
nie radz skorzysta z tego sposobu kodowania polskich znakw.
Poza opisanymi powyej standardami kodowania polskich znakw istnieje jeszcze jedno
rozwizanie, dziki ktremu moemy tworzy dokumenty uniwersalne. cilej rzecz
biorc, chodzi o to, e podczas tworzenia strony, na ktrej zamieszczono dwa lub wicej
jzykw, nie ma moliwoci jednoczesnego poprawnego wywietlenia znakw waci
wych dla danego kraju. Rozwizaniem takiego problemu jest stosowanie Unikodu (ory
ginalna nazwa to Unicode http://www.unicode.org).
Doskonao tego rozwizania polega na przypisaniu unikatowego numeru wszystkim
znakom charakterystycznym dla rnych alfabetw, np. aciskiego czy cyrylicy. Poza
tym w Unikodzie uwzgldniono rne symbole, np. , O.
Obsuga Unikodu zostaa wprowadzona w gwnych przegldarkach, poczynajc od
numeru 4; dzi jest uwzgldniana przez wszystkie liczce si przegldarki.
Moemy wyrni trzy odmiany Unikodu: UTF-7, UTF-8 oraz UTF-16. Zrnicowa
nie zostao wprowadzone w celu umoliwienia obsugi tego standardu na rnych plat
formach i w rnych programach. Rnice pomidzy tymi typami Unikodu sprowa
dzaj si do odmiennego zapisu znakw (format 7-bitowy, 8-bitowy oraz 16-bitowy).
Uzyskanie polskich znakw zgodnych z kodowaniem UTF-8 jest moliwe dziki edyto
rowi kED lub za pom oc konwertera Gegka XP.
Odpowiednie polecenie, ktre wstawisz w znaczniku <head></head>, ma nastpuj
c posta:
<meta http-equiv="Corvtent-Type" content="text/htm l; charset=utf-8">
35
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
Tytu dokumentu
Nastpnym znacznikiem, ktry zalicza si do grona staych elementw strony WWW,
jest < title > < /title > . Odpowiada on za ustawienie tytuu strony widocznego na pasku
tytuu okna przegldarki (rysunek 2.2). Znacznik ten powinien znajdowa si pomidzy
<head></head>.
<?xm1 version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC ."-//W3C//DTD XHTML 1.0 S trict//E N "
"http://www.w3.org/TR/xhtmll/DTD/xhtni1 l- s tr ic t.d td " >
<html,xmlns="http://www.w3.org/1999/xhtml" xml : 1ang="pl" 1ang="pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l: charset=iso-8859-2" />
<title>Bartosz Danowski</title>
</head>
</html>
Rysunek 2.2.
Tytu strony
Tytu jest jedynym elementem strony, ktry znajduje si w nagwku dokumentu i jest
widoczny bez koniecznoci analizy zawartoci kodu strony.
36
V
Uwaga
<title>Bartosz Danowski</title>
</head>
</html>
37
38
Polecenie <meta http-equiv=" " /> moe jeszcze przybra nastpujce formy:
<meta http-equiv="reply-to" content="adres autora" />
Za pom oc <1 i nk /> moemy rwnie podczy zewntrzny plik zawierajcy Java
Script. O przydatnoci tego rozwizania nie musz chyba nikomu mwi. Wyobra sobie
tak sytuacj. Zbudowalimy witryn zawierajc na kadej ze stron menu napisane
39
<title>Bartosz Danowski</title>
<1 ink rel="stylesheet" href="glowny.css" type="text/css" />
</head>
</html>
Ciao dokumentu
Wiesz ju, e dokument XHTML (HTML) ma swoje okrelone ramy oraz nagwek.
Elementy te maj znaczenie czysto konfiguracyjne lub informacyjne i poza tytuem nie
s widoczne na zewntrz. Teraz przysza pora, by pozna kolejny element strony WWW,
jakim jest jej ciao <body></body>. Wszystkie informacje, ktre znajd si pomidzy
tymi znacznikami, s traktowane jako zawarto strony i zostaj wywietlone w oknie
przegldarki. Dalej przedstawiam pooenie tego elementu w stosunku do pozostaych
znacznikw.
<?xml version='T.O encoding="iso-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/htm l: charset=iso-8859-2" />
<meta name="keywords" content*"lite ra tu ra informatyczna. Bartosz Danowski. ksiki" />
<meta name="description" content="Bartosz Danowski - strona autora licznych
poradnikw informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe
materiay i przykady." />
<meta name="copyright" content="Bartosz Danowski" />
<meta name="author" content="Bartosz Danowski" />
<meta name= robots" content* index.fo l low" />
40
<title>Bartosz Danowski</title>
<link rel="stylesheet" href='glowny.css" type=text/css" />
</head>
<body>
Ta tre bdzie widoczna podczas przegldania strony WWW.
</body>
</html>
Komentarze
Tworzc dokument XHTM L (HTML), moemy wewntrz kodu umieszcza komenta
rze, dziki czemu pniejsza edycja strony bdzie znacznie prostsza. Rozwizanie to
ma szczeglne znaczenie podczas pracy grupowej nad stron lub przy tworzeniu du
ych projektw. Oczywicie m ija si z celem komentowanie wszystkich elementw
i warto przy duej liczbie komentarzy przed publikacj przynajmniej cz z nich
usun z kodu strony.
Komentarz ma nastpujc posta:
< !- -T u znajduje si kom entarz do naszej strony
- - >
Ti
H TM L 4.01 Transitional
J.B 53SSSS SM B
em
| * ' A*
X*
*J
I HI
41
W tej chwili w gwnej czci okna edytora pojawi si pena i obowizkowa struktura
kodu strony (rysunek 2.4). Oczywicie, niektre z wpisw wym agaj ingerencji.
kED 2.1.4.0 bez_n*zwy
PI*
Edyt).
Siukjj
XHTML
PHP
Ijv.Sc.ipt
r s
m U 6*3 ia M \ b i | A- a
. l a
Notatki
Opq
3 | < k <41
? & :
il J
i 28 ti B 3 * - o .3 :3
ai
di ! m m m m m
alt
!= >
; Asi
W
[Vista)
ffi <*0 i DA[System)
($LiEA [Media]
IJ
FA[Dokumenty]
ti
Ga [Pis
it
HA [Roboczy]
* ! B B H B B
Drzewo dokumentu
Elementy
Pomot
S i
/>
/>
h re f'
[n a z w a _ a r k u s z a _ s ty lo w .c s s ]
t y p e - " t e x t /c s s "
/>
-->
i < /b o d y >
< /h tm l>
.J
INS
Musisz usun cay cig znakw raz z nawiasem kwadratowym i w jego miejsce w pi
sa odpow iedni warto. Powyszy przykad po m odyfikacji pow inien wyglda
w ten sposb:
<meta name="description" content=" Bartosz Danowskl - strona autora licznych
poradnikw informatycznych. Informacje o ksikach, opinie czytelnikw, dodatkowe
materiay i przykady." />
<title>Bartosz Danowski</title
42
bez_nazwy (ISO) Q |
1
2
3
4
5
<a
0 < a h r e f = " " t i t 1 e = " t a r g e t ^ ' " id = > 1
Tekst
Do elementw odpowiedzialnych za prezentacj tekstu w jzyku XHTML i HTML mo
emy zaliczy nagwki, akapity, cytaty, indeksy grne i dolne, znaczniki amania
wiersza, poziome linie oraz znacznik <div></div>. Dalej przyjrzymy si konstrukcji
kadego z tych elementw. Pamitaj, e wszystkie one musz si znajdowa wewntrz
znacznika <body></body>.
Uwaga
Nagwki
Specyfikacja jzyka XHTM L i HTML przewiduje moliwo utworzenia nagwkw
o szeciu zrnicowanych rozmiarach. Oto oglny przepis na nagwek:
<hx>Nagwek stopnia X</hx>
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
pierwszego</hl>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
pitego</h5>
szstego</h6>
43
Akapity
Kolejnym sposobem prezentacji tekstu jest jego grupowanie w akapity. Tekst znaj
dujcy si w akapicie automatycznie dopasowuje si do szerokoci okna przegldarki
lub jak kto woli do rozdzielczoci. Dlatego na jednym komputerze akapit moe
mie trzy wiersze tekstu, a na innym wiersze m og by zaledwie dwa. Jest to rzecz
jak najzupeniej normalna i, niestety, bardzo czsto przy le zaprojektowanej stronie
moe prowadzi do powstawania problemu popularnego rozjedania si zawarto
ci okna przegldarki.
Za definicj akapitu odpowiada znacznik <p></p>, ktry zawsze wystpuje z elementem
zamykajcym.
<body>
<p>Przykad prostego akapitu.</p>
</body>
Strona moe zawiera dowoln liczb akapitw, a kady z nich jest oddzielony od po
zostaych pustym wierszem. Przerwa ta jest domylnie wstawiana przez przegldarki,
a do jej kontroli musisz uy kaskadowych arkuszy stylw.
Akapit w jzyku XHTML (HTML) domylnie nie ma wcicia pierwszego wiersza, cha
rakterystycznego dla niektrych dokumentw drukowanych, co nie oznacza, e takiego
efektu nie da si wprowadzi na stronie WWW. W ymaga to jednak uycia kaskado
wych arkuszy stylw, o ktrych napisaem w rozdziale czwartym.
Na rysunku 2.7 ukazano przykad strony, na ktrej umieciem trzy bloki tekstu oraz
dwa nagwki stopnia pierwszego. Pamitaj, e wszystkie znaczniki mona ze sob
czy w celu uzyskania ciekawie wygldajcego dokumentu.
We pod uwag, e teoretyczna moliwo stworzenia nieograniczonej liczby akapi
tw na stronie WWW nie moe by naduywana. W praktyce osoba czytajca zawar
to strony WWW przeglda jedynie zawarto pierwszych dwch ekranw monitora.
Dlatego w przypadku publikacji sporej iloci tekstu najlepiej podzieli go na kilka czci,
dziki temu bdzie on znacznie atwiej przyswajalny przez czytelnika. Przykad takiego
dziaania zamieciem na rysunku 2.8.
44
Rysunek 2.7.
W ktrej poczono
nagwki oraz akapity
Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do eiusmod tempor inddidunt ut labore et dolore
magna aliqua Ut eram ad nanim veniam, quis nostrud exercitation uDamco laboris nisi ut akquip ex ea commodo
consequat. Dms aute irure dolor in reprehenderit m vohiptate veht esse cfflum dolore eu fugiat nulla panatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit amm id est laborum
Rysunek 2.8.
D ue iloci tekstu
warto podzieli
na kilka
mniejszych stron
l X M V K K W e rs !a do druku
l 2 | 3 | nastpna strona
9 ^ W ylij znajom ym
Cytaty
Jeeli chcesz zacytowa wikszy fragment tekstu w kodzie strony, musisz skorzysta
ze znacznika <blockquote></blockquote>. Konstrukcja tego elementu jest nastpujca:
<blockquote>
Ilestibulum ante ipsum prim is in faucibus o rci luctus et u ltric e s posuere c u b ilia
Curae: Morbi b la n d it. Etiam m attis pede at lacus. Aliquam tincidunt. Nullam
fa c ilis is . Etiam quis nulla. Donee s o llic itu d in . Fusce n is i nulla. vestibulum non,
pellentesque eget. ullamcorper v e l, odio. Aliquam egestas rutrum libero. Donec
placerat. n is i eget egestas tin cid u nt, e l i t augue rhoncus e lit . sed feugiat e l i t
enim at libero. Proin egestas sapien sed n ulla. Sed a erat s i t amet arcu semper
aliquam.
</blockquote>
Jak zapewne wiesz, cytowa moemy rwnie wewntrz bloku tekstu, a w celu sko
rzystania z tej moliwoci na stronie WWW musimy sign po znacznik <q></q>.
45
<p>
Autor ksiki napisa: <q>Specyfikacja HTML 4.01 oddziela formatowanie elementu
od struktury jzyka, oddajc go w rce kaskadowych arkuszy stylw</q>. ale nie mia
do koca r a c ji, gdy uwaam, e...
</p>
46
Indeks dolny
<p>E=mc<sub>2</sub></p>
Indeks grny
E =m c2
Indeks dolny
E=mc2
amanie wierszy
Przy okazji prezentacji znacznika odpowiedzialnego za definiowanie akapitw wspo
mniaem, e ich zawarto jest automatycznie dopasowywana do rozdzielczoci ekranu.
Innymi sowy, przegldarka sama decyduje, kiedy zama dan lini. Dziaanie takie
jest przydatne, ale czasami moe utrudni prac twrcy witryny zawierajcej wiksz
ilo tekstu. Na szczcie w specyfikacji jzyka XHTML i HTML znajdziemy przy
datny znacznik, ktrego celem jest bezwzgldne wymuszenie zamania linii. Mam tutaj
na myli znacznik <br />.
<P>
Lorem ipsum dolor s it amet. consectetuer adipiscing e l it . Nunc in quam. In quam
lorem, conval lis conval lis . fermentum e t. scelerisque interdum. diam. Proin lobortis
mi porta lib e ro . Aliquam erat volutpat. Vivamus aliquam. sem in m ollis feugiat.
nisi l i gul a m ollis erat, sed lo b o rtis lig u la lectus s a g ittis pede.<br />Phasellus
id nibh eget magna egestas lo b o rtis . In interdum. tu rp is eget s a g ittis eleifend.
erat n isl varius quam, ut u ltric ie s nunc sem id lacus. Fusce u ltric ie s , lig u la s it
amet pharetra egestas, quam lig u la nonummy pede, ac viverra lib e ro lig u la s it amet
urna. Praesent sed turpis non massa imperdiet placerat.<br />Etiam tincidunt. sapien
non aliquet pellentesque. odio leo volutpat erat. sed f c il i sis nisl lorem id libero.
Donee ac nunc. Pellentesque habitant morbi tris tiq u e senectus et netus et malesuada
fames ac tu rp is egestas. Proin dictum. Curabitur sem. Sed at fe lis . Ut eu lacus.
Maecenas n isl mauris, tempus ia c u lis . posuere quis, tris tiq u e eget. erat.
</p>
Rysunek 2.11.
Przykad
amania wierszy
47
Lorem ipsum dolor sit amet, consectetuer adipiscing eft. Nunc in quam. In quam lorem, con\-aBis convaBis,
fermentum et, scelerisque interdum, cam. Proin lobortis mi porta Hbero. AHquam erat\ohrtpat. Vivamus aquam,
sem in moBis feugiat, nisi Hgula moflis erat, sed lobortis Egula lectus sagittis pede.
PhaseBus id nibh eget magna egestas lobortis. In interdum, turpis eget sagittis eleifend, erat nisl varius quam, ut
uhricies nunc sem id lacus. Fusce ultrieies, Hgula sit amet pharetra egestas, quam Hgula nonummy pede, ac viverra
Hbero Hgula sit amet uma. Praesent sed turpis non massa imperdiet placera!
Etiam tincidunt, sapien non aKquet peBentesque, odio leo vokitpat erat, sed faciEsisnisl lorem id Hbero Donec ac
nunc. PeBentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin dictum.
Curabitur sem. Sed at feHs. Ut eu lacus Maecenas nisl mauris, tempus iacuHs, posuere quis, tristique eget, erat.
Wyrnianie tekstu
Specyfikacja jzyka XTHML i HTML przewiduje kilka znacznikw, za pom oc kt
rych moemy wyrni fragment tekstu lub pojedyncze sowo czy liter.
Aby pogrubi tekst, musisz skorzysta ze znacznika <strong></strong>.
<p>Wydawnictwo <strong>Helion</strong></p>
Aby przedstawi fragment tekstu np. listing kodu programu za pomoc czcionki
o staej szerokoci, uyj znacznika <code></code>.
<p>Wydawnictwo <code>Helion</code></p>
Wydawnictwo H elion
Wydawnictwo Helion
Wydawnictwo H e l i o n
Warto w tym miejscu wspomnie jeszcze o znaczniku <span></span>, ktry sam w sobie
nie wpywa na wygld tekstu. Jednak w poczeniu z kaskadowymi arkuszami stylw
moe czyni cuda.
Twarda spacja
Jeeli w bloku tekstu lub nagwku umiecisz dodatkowe znaki spacji za pomoc kla
wiatury i klawisza spacji, to przegldarka automatycznie je zignoruje i wywietli tylko
jeden znak przerwy.
<hl>Nagwek stopnia
pierwszego</hl>
48
Jeeli chcesz wymusi kilka dodatkowych spacji w tekcie, musisz do kodu wstawi
znak twardej spacji. W praktyce oznacza to skorzystanie z nastpujcego cigu zna
kw , popularnie zwanego encj.
<hl>Nag?wek stopnia pierwszego</hl>
Pamitaj jednak o tym, e jedna spacja widoczna na ekranie to kilka literek wpisanych
w kod strony, co przy naduywaniu tego elementu moe znacznie zwikszy rozmiar
pliku strony. Dlatego znacznie lepszym rozwizaniem jest skorzystanie z moliwoci,
jakie oferuj kaskadowe arkusze stylw.
Znacznik DIV
Element <div></div> jest odpowiedzialny za grupowanie znacznikw. Dziki temu
elementowi moesz tworzy warstwy w dokumencie XHTML (HTML) i pracowa
na nich oraz rozciga dziaanie zdefiniowanego za pom oc CSS stylu na wiksz
liczb znacznikw. Wprowadzone tutaj pojcia zostay dokadnie opisane w nastp
nym rozdziale.
<div>
<p>Pierwszy blok tekstu.</p>
<p>Drugi blok tekstu.</p>
<hl>Nagwek stopnia pierwszego</hl>
</div>
Oczywicie, omawiany znacznik moe by wykorzystywany rwnie z innymi elemen
tami, np. tabelami czy listami.
49
Plik
Edycja
Szukaj
XHTML
JavaScript
Opcje
<
11 fol
Pomoc
- # | dt| aa| u -f t a i ta * g
i ? I
<
jb
itl i
! a j y j n o H
y *w4 4 H
ra M M j
<-?xm1 v e r s i o n - i . 6
e n c o d i n g - 1s o -S 8 $ 9 -2 ?>
/>
<body>
KM ;
- . H K
IN S
: - NUM
R o zm ia r;
K : 974, W
:17
50
Listy
Nastpnym elementem, z jakim moesz spotka si przy tworzeniu stron WWW, s
listy. Specyfikacja okrela trzy rodzaje list. S to: listy punktowane, numerowane oraz
definicji. Mona si jeszcze spotka z podziaem na listy uporzdkowane (numerowane)
oraz nieuporzdkowane (wypunktowane), ale to ju kwestia interpretacji.
Lista wypunktowana
Do utworzenia listy wypunktowanej bdziemy potrzebowali kombinacji dwch znacz
nikw: <ul></ul > oraz <11 ></1 i >. Znacznik <ul ></ul> okrela ramy listy, natomiast
<1 i ></1 i > to kady jej podpunkt. W praktyce wyglda to mniej wicej tak:
<ul>
<1i>Pierwsza pozycja lis t y wypunktowanej</li>
< l i >Druga pozycja lis t y wypunktowanej</M>
<M>Trzecia pozycja lis t y wypunktowanej</M>
</ul>
Lista numerowana
Drugim typem listy jest lista numerowana, ktrej konstrukcja skada si ze znaczni
kw <ol ></ol > oraz < li> < /li> . Zasada jest dokadnie taka sama jak w przypadku list
wypunktowanych.
<ol>
<M>Pierwsza pozycja lis t y numerowanej</li>
< l i >Druga pozycja lis t y numerowanej</li>
<M>Trzecia pozycja lis t y numerowanej</M>
</ol>
51
Lista definicji
Trzecim i ostatnim typem list jest lista definicji. Posiada ona bardzo podobn budow do
dwch wczeniej omawianych. Na list definicyjn skada si konstrukcja znacznikw
<dl> < /d l> , <dt></dt> oraz <dd></dd>.
<dl>
<dt>5?owo definiowane</dt>
<dd>op1s sowa definiowanego</dd>
<dt>Kolejne sowo definiowane</dt>
<dd>opis kolejnego sowa definiowanego</dd>
<dt>Jeszcze jedno sowo definiowane</dt>
<dd>op1s nowego sowa definiowanego</dd>
<dt>Ostatnie sowo defin1owane</dt>
<dd>opis ostatniego sowa definiowanego</dd>
</dl>
Sowo definiowane
opis sowa definiowanego
Kolejne sowo definiowane
opis kolejnego sowa definiowanego
Jeszcze jedno sowo definiowane
opis nowego sowa definiowanego
Ostatnie sowo definiowane
opis ostatniego sowa definiowanego
Listy zagniedone
Na koniec zosta do omwienia jeszcze jeden ciekawy przypadek. Mam tutaj na myli
list, ktra zawiera podpunkty. Takie rozwizanie bardzo czsto spotykamy w yciu co
dziennym i na pewno ju si zastanawiae, czy nie da si w jaki sposb przenie go
na stron WWW. Ot odpowied jest bardzo prosta jest to moliwe; a taka kon
strukcja wymaga zastosowania list zagniedonych. Zagniedanie polega na umiesz
czeniu wewntrz jednego elementu innego znacznika, np. w licie umieszczamy jeszcze
jedn list.
Podczas zagniedania moemy czy rne typy list, np. numerowan z wypunkto
wan. Odpowiedni przykad zamieszczam poniej, a efekt jego dziaania przedstawia
rysunek 2.17.
<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3 ,2 < /li>
< li> jo g u rt malinowy</li>
<li>mietanka do kawy</li>
</ul>
52
Rysunek 2.17.
Przykad list
zagniedonych
1. Produkt)'mleczne
o mleko 3.2
o jogurt malinowy
o mietanka do kawy
2. Owoce
o jabka
o cytrusy
pomaracze
mandarynki
o brzoskiwnie
3. Pieczywo
o chieb
o bulki
o rogaliki
</H >
<li>0woce
<ul>
<1i> ja b k a < /li>
<li>cytrusy
<ul>
<li>pomaraficze</li>
<li>mandarynki</1i>
</ul>
</1 i >
<1
</ul >
< /l i >
<li>Pieczywo
<ul>
<li> ch leb < /li>
< li> b u k i< /li>
<li>rogalik1</1i>
</ul>
</ 11>
</ol>
53
kD 2.1.4.0 - bez.nazwy
Szukaj
XHTML
PHP
JavaScript
Opcje
Pomoc
x . * ttnam kl t
|a* a* *iIM 82 83 8 S5H
" T * j i 0 * 'Q i a
'J -u J -a
a | s i=|>
b e z .r.nazwy ( tS 0 )O be z .n a zw y (BO ) Q
f? 8?9
----------------
/>
INS
VP
1C 1, W: 17
54
lwa!
Edycja
Szukaj
XHTML
PHP
1 l i B (5-=) ra i f I B !!!
JavaScript
Opcje
Pomoc
<j jC a* x *i | H H H H B S
iS i i B : S3 &
d bcz.nazwy (IS0)O O
>2 .3
! rJ ffl ( J S - i f? fr ffl
3 a
*>z_nazwy (ISO) O |
B E .:
---
'EN"
<a>
ffl <abbr>
ffl <acronym>
ffl <address>
ffl<b>
ffl <big>
ffi <blockquoce>
<body>
< b r />
< o l>
< l i> P r o d u k t y m le c zn e
<ul>
< li> m le k o 3 , 2 < / l 1 >
<1i > j o g u r t mai in o w y < /l1 >
< li> s m f e ta n k a do k a w y < /li>
ffl <buttoxi>
ffi <caption>
',*)< cl te>
ffl <code>
ffl <col>
ffl-<colgroup>
ffl-<dd>
ffl <del>
ffl <dfn>
ffl-<div>
ffl <dl>
<dt>
< /b o d y >
< /h t m l>
ffl <em>
ffl-<field3ec>
ffl <form>
ffl <frame>
ffl <frameset>
ffl-<hl>
ffl <h2>
ffl <h 3>
..iii kod
i *
INS
K.-6,W:25
55
W tym miejscu pojawia si bardzo wana kwestia, zwizana z wielkoci liter uywa
nych przy wpisywaniu znacznikw oraz atrybutw. Na pocztku napisaem, e w przy
padku stron korzystajcych z jzyka HTML wielko liter w znacznikach oraz atry
butach nie ma znaczenia, natomiast kod XHTML wymaga stosowania wycznie maych
liter. To oczywicie prawda, jednak od tej zasady istnieje pewne odstpstwo. Mam tutaj
na myli sytuacj, w ktrej znacznik zawiera odwoanie do oddzielnego pliku. W moim
przykadzie atrybut SRC zawiera informacje o pliku obrazka i w takim przypadku
spraw kluczow jest wpisanie nazwy obrazka dokadnie tak samo, jak nazwano plik.
Chodzi o to, e systemy rodziny MS Windows nie rozrniaj wielkoci liter i dla nich
p lik.g if oraz P lik.gif to jeden i ten sam plik. Natomiast systemy uniksowe s czue na
wielko liter i przykadowe pliki to dwa zupenie rne pliki. Majc na uwadze fakt,
e niemal 95% serwerw internetowych to maszyny uniksowe, musisz wpisywa nazwy
dokadnie, z uwzgldnieniem wielkoci liter.
Warto, by pamita rwnie o tym, e nazwy plikw (kady typ uywany na stronie)
nie powinny zawiera polskich liter oraz znakw spacji. Jeeli plik ma skada si z na
zwy dwuczonowej, to zamiast przerwy uyj znaku podkrelenia _.
W przypadku jzyka HTML za pomoc kolejnych atrybutw moemy okreli w iel
ko naszego obrazka. Odpowiadaj za to atrybuty width i height. Ich uywanie przy
powikszaniu naszego obrazka powoduje znaczne pogorszenie jego jakoci, lepiej wic
od razu przygotowa obrazek w zamierzonej wielkoci, ni potem dokonywa korekty
wielkoci za pomoc width i height. Przykad wywoania obrazka z podaniem wielkoci
zamieciem poniej.
<img src="hei on.gi f " alt="Obrazek oryginalny" height="64" width="94" />
<img src= "helion.gif" alt="Obrazek dwa razy wikszy" height="128" width="188 />
Uwaga
Kady element graficzny moe by tem Twojej strony. Zalecanym sposobem definicji
takiego ta s kaskadowe arkusze stylw; w zwizku z tym, jeeli szukasz informacji
na temat dodawania ta do strony, musisz sign do jednego z nastpnych rozdziaw.
56
4 > k E D 2 .1 A 0 -b e z_ n a zw y#
Pk
Edycja
Szukaj
XHTML
PHP
Ja^Script
* .* * M R
Opcje
#4.
* .......
Pomoc
j - o - uJ l 0*1 | \ j | a M t m i? j R
\ ? <>
| a a [g] M j i u / a^ * * m i i h b i b
|| aa i a an s
j
j ~ Elementy
ciga
|~ Wstawki
Notatki
[*S|
|
&
^
[ o s lH B E J
W kolejnym oknie (rysunek 2.22) odszukaj i wska obrazek, ktry ma trafi na stron
WWW. Nastpnie kliknij przycisk Otwrz. Uwaga w zalenoci od systemu operacyj
nego okno z rysunku 2.22 moe by inne. Przykad z rysunku 2.22 pochodzi z systemu
MS Windows Vista Ultimate.
Po wybraniu obrazka odpowiednie odwoanie pojawi si w polu Nazwa pliku. Teraz
przysza pora na to, aby uzupeni kolejne pola widoczne w oknie na rysunku 2.23.
Opis (alt) obowizkowe pole zawierajce alternatywny tekst wywietlany
zamiast obrazka. W ypisanie tego pola jest niezbdne do tego, aby strona by
zgodna z wszystkimi wymogami specyfikacji XHTML.
Opis (title) pole zawierajce opis pojawiajcy si w postaci chmurki
widocznej po najechaniu kursorem myszy na obrazek.
Szeroko i Wysoko pola pozwalaj na okrelenie rozmiaru obrazka.
Domylnie w obu polach pojawia si oryginalny rozmiar obrazka.
57
Otwieranie
Szukaj w:
Pulpit
Typ
Nazwa
o i
cm-
(461x614)
Data modyfikacji
&
Ostatnio
uywane miej,
Zdjcie dziaka
Folder plikw
Pulpit
! 1
B a rte k
A s'
Komputer
d l.
.
Download
Skrt
370 bajtw
Leksykon oprogramowania
DVD skrt
Cl, i *
Nazwa pliku:
PUki typu
bartek_danowskijpg
etap czwarty
B E T **
. ) Wstaw grafik
Nazwa pHku (src)
C:\Users\Bartek\Desktop\bartek_danowski.jpg
Przegldaj..
Op (alt)
Bartosz Danowski
Ofiis (title)
Bartosz Danowskj
Szeroko
461
W ysoko
614
Ustawienia stylu
class
id
Q Zamie znaki \ na /
58
joi@
kED2.1A0-C:\Users\Bartek\DeslctopVtesLhtml
Plik
Edycja
Szukaj
XHTML
PHP
JavaScript
Opcje
Pomoc
j * u ' d * s ' d t | y *l % 1 B I
f
(.') M i; I ! / ;
&
tg
* m * i T 0
i x* x, j
i)
<> I
i i .1
I e
s il i?
e c d T g - T o - 8 ^ 9 -2
< !d o c ty p e htm l
" - //w 3 c //d to
.
s tr1 c r//E N "
?~ h
t t p : / ,www. wB. o r g /T R /x h tm ll/D T D /x h tm l l - s t r 1c t . d t d >
p u b l ic
xhtm l
< h tm l xml n s - " h ttp :/,/w w w . w 3 .o r g /1 9 9 9 /x h r m l" xro l: la n g - " p l " l a n g - p l" >
<head>
<m eta h ttp -e q u iv " C o r r te m > T y p e " c o n t e n t - 't e x t h tm l; c h a r s e t - 1 s o - 8 8 5 9 - 2 / >
<m eta nam e="keyw ords" c o n t e n t = " l i t e r a t u r a in f o r m a t y c z n a , B a rto s z D anow ski,
k s i k i" / >
<tneta n a m e -d e s c r ip t io n " c o n te n t= B a r to s z Danowski - s tr o n a a u t o r a lic z n y c h
p o ra d n ik w in fo rm a ty c z n y c h , in fo r m a c je o k s i k a c h , o p in ie c z y t e ln ik w ,
dodatkow e m a t e r i a y i p r z y k a d y ." / >
<m eta nam e- c o p y r ig h t " c o n t e n t - B a rto s z D anow ski" / >
<m eta n a m e -a u tn o r
c o n t e n t - 'B a r t o s z Danow ski" / >
<m eta n a m e -r o b o ts " c o n t e n t - in d e x ,f o llo w " / >
< t i t l e > B a r t o s z D a n o w s k i< /t it le >
< l i n k r e l - s t y le s h e e t " h r e f= " g lo w n y . cs s " t y p e - ' t e x t / c s s " / >
< /h e a d >
<body>
<imq s r c - " C : /u s e r s /B a r t e k /D e s k t o p /b a r t e k _ d a n o w s k i.jp g " a l t - " B a r t o s z D anow ski
t i t l e - " B a r t o s z D anow ski" w id th = " 4 6 1 " h e ig h t - " 6 1 4 " / >
< /b o d v >
; < /h t m l>
*> . f
NUM Rozmiar. 1003 B (0,96 KB)
K: 1, W: 22
Hiperlcza
Internet nie mgby istnie w obecnej formie bez hiperczy, czyli odnonikw. Wy
obra sobie, e wchodzisz na stron, na ktrej nie ma odnonikw musiaby ww
czas zna nazwy wszystkich podstron, by mc je rcznie wczyta w celu dalszego
przegldania. Jest to niewykonalne, poniewa nie ma moliwoci zmuszenia autora
strony, by przyj z gry narzucone nazewnictwo poszczeglnych jej czci. Poza tym,
w jaki sposb sporzdzi list takich nazw?
Innym rozwizaniem problemu braku hiperczy mogoby by tworzenie dugich poje
dynczych stron. Wyobra sobie jednak, jak przy takim rozwizaniu musiaby wyglda
portal internetowy, ktry z zaoenia jest zbiorem odnonikw.
Na szczcie twrcy XHTML (HTML) przewidzieli moliwo umieszczania hiper
czy, dziki czemu nie ma najm niejszego problemu z tym, by przeglda kad ze
stron, bez wzgldu na to, czym jest i kto j tworzy.
59
Hipercza tekstowe
Budowa hipercza tekstowego jest stosunkowo prosta i wyglda tak:
<a href="strona.htm l"> K liknij tu. by dowiedzie si czego wicej o mnie.</a>
Oczywicie, musisz pamita o znaczniku zam ykajcym </a>, gdy bez niego opis
naszego odsyacza bdzie nieskoczenie dugi.
Znacznik <a></a> naley do tych elementw, w przypadku ktrych brak zamknicia ma
niszczcy wpyw na stron, dlatego bezwzgldnie musisz pamita o jego zamkniciu.
Na rysunku 2.25 przedstawiem przykad strony, na ktrej nie zamknem odnonika
zobacz, co si stao.
Jak widzisz, na rysunku 2.25 dla pierwszego elementu strony odnonik obejmuje jedy
nie sowa CAD Magazyn, drugi element przedstawia sytuacj, gdy nie zamknem
znacznika <a></a>, w efekcie czego odsyaczem jest cay tekst wystpujcy po znaczni
ku otwierajcym.
Tabela 2.3 przedstawia konstrukcj odsyaczy do rnych miejsc lub elementw w i
tryny. Pierwszy to odwoanie do pliku strony, drugi jest odsyaczem do konkretnego
obrazka, kolejny to hipercze do innej witryny dostpnej w sieci, a ostatni to cze
z serwerem FTP, na ktrym moesz przechowywa swoje programy lub inne pliki.
60
Rysunek 2.25.
Przykad hipercza
drugi z przykadw
pokazuje, co si dzieje,
gdy zapomnimy
zamkn znacznik <a>
obrazek
<a href="obrazek.gif">Opis</a>
adresy URL
adresy FTP
Nieco inaczej wyglda sprawa odsyacza do adresu e-mail, ktry umoliwia otwarcie
odpowiedniego okna program u pocztowego w celu wysania poczty. M usisz jednak
pamita, e jeeli ogldajcy Twoj stron nie posiada konta e-mail, to w ten sposb
nie bdzie mg do Ciebie napisa. Dokadniej mwic, by taki odsyacz zadziaa,
osoba, ktra go klika, musi mie na swoim komputerze skonfigurowane oprogramowa
nie do obsugi poczty e-mail, np. MS Outlook Express.
Pocztowe hipercze ma nastpujc posta:
<a href="mailto:bartek@danowski.pl">Wylij do mnie wiadomo</a>
Zmiana pojawia si rwnie w cudzysowie atrybutu href, jednak tym razem wyst
puje po adresie e-mail i ma posta ?subject=temat wiadomoci. Po klikniciu tak skon
struowanego odsyacza zostanie otwarte okno nowej wiadomoci, a w polu tematu
znajdzie si tekst: Ocena ksiki.
Rozbudowana posta hipercza jest bardzo wygodna w sytuacji, gdy chcesz narzuci
stay temat korespondencji na przykad na stronie masz dzia i odnonik do Twojej
poczty, zatytuowany Uwagi o serwisie WWW. Jeeli ustawisz temat, atwo bdziesz
mg w przyszoci sprawdzi, skd przysza poczta. Oczywicie, zmiana takiego na
rzuconego tematu wiadomoci jest moliwa, jednak zapewniam Ci, e nie jest to czsta
61
sytuacja, gdy wikszo internautw jest bardzo leniwa i nie chce si im wpisywa
nowego tematu wiadomoci lub go modyfikowa. Sam dostaj codziennie dziesitki
listw i spora ich liczba jest pozbawiona tematu lub ma on posta szcztkow.
Kady odsyacz (rwnie graficzny) moe zawiera dodatkowe i czsto przydatne
atrybuty. Mam tutaj na myli target oraz title. Pierwszy z atrybutw pozwala okreli
sposb otwierania odnonika. Dokadniej mwic, po klikniciu odnonika z atrybu
tem target moe on zosta otwarty na cztery sposoby.
Atrybut ta rg e t zawiera dodatkowo cztery zdefiniowane wartoci. S to:
target="_blank",
ta rg e t= ''_ se lf",
target="_parent",
ta rg e t-'_ to p ".
Hipercza graficzne
Skoro ju wiesz, w jaki sposb przygotowa odsyacz tekstowy oraz umieci grafik
na stronie WWW, pora zastanowi si nad sposobem tworzenia hiperczy graficznych.
W celu utworzenia odsyacza graficznego musisz odwoa si do dotychczas uzyska
nej wiedzy. Przypomnij sobie znacznik odpowiedzialny za wstawianie obrazka oraz
tworzenie hipercza. Poniej zamieciem prosty przykad odpowiedniego poczenia
wspomnianych elementw jzyka XHTML (HTML).
<a href="h ttp ://danowski,pl ">
<img src= /img/banner.gif" alt="Bartosz Danowski" width="94'' height= 19" />
</a>
62
Jak w idzisz, dodanie graficznego hipercza nie jest niczym skomplikowanym i bez
wikszego problemu sobie z tym poradzisz.
Mapy odsyaczy
Kady obrazek moe by hiperczem do jakiego pliku lub innej strony. Zwr uwa
g, e dotyczy to caego obrazka. Z chwil umoliwienia publikacji grafiki na stronie,
w erze stron opartych na grafice, zaistniaa potrzeba definiowana mapy odsyaczy
inaczej mwic, obrazka, ktrego rne czci s odsyaczami do innych miejsc.
Pierwszym rozwizaniem, jakie si nasuwa, jest pocicie naszego obrazka na mniejsze
czci i zadeklarowanie dla kadej z nich innego odsyacza. Jest to rozwizanie dobre
i czsto stosowane, ale nie zawsze spenia ono oczekiwania projektantw bo wie
si z koniecznoci wstawienia pocitych kawakw obrazka do odpowiednio zbudo
wanej tabeli.
K olejn m etod jest budowa mapy odsyaczy. Na serwerze http://www.tucows.com/
Windows moesz znale kilka dobrych programw, ktre uatwi Ci budow takiej
mapy. Poniej wym ieniem jedne z ciekawszych narzdzi dostpnych na serwerze
TUCOWS.
CoffeeCup Image Mapper,
CuteMAP,
M apEdit Imagemap Editing Software,
HTML Map Designer Pro.
Za deklaracj mapy odsyaczy odpowiada znacznik <map></map>. Zawiera on obowiz
kowy atrybut name="", ktry pniej jest wykorzystywany przy osadzaniu obrazka za
pom oc znacznika <img />. W ewntrz <map></map> znajduje si znacznik <area />,
ktry definiuje aktywny obszar danego hipercza. Jak widzisz na poniszym przyka
dzie, znacznik <area /> zawiera nastpujce atrybuty:
h ref= "" atrybut znany z definicji hiperczy,
coords=" definiuje wsprzdne kracowych punktw aktywnego obszaru,
shape="" okrela, czy aktywny obszar jest: koem, kwadratem,
obszarem dowolnym, przyjmuje nastpujce wartoci:
c ir c le koo,
re c t - kwadrat,
poi ygon wielokt.
title = " " odpowiednik atrybutu a l t , omawianego przy okazji wstawiania
obrazkw na stron.
W praktyce musisz otworzy obrazek w programie graficznym i odczyta wsprzdne
obszarw aktywnych. Na rysunkach 2.26 oraz 2.27 skorzystaem z darmowego progra
mu graficznego Paint.Net i zaznaczyem pewne obszary przyjrzyj si im.
63
|g
_ I=. i a t e a n J
File
Edit
View
Image
Layers
4 (& m
Tool: ^
Quality: Smooth
Adjustments
<
Effects
9 *
O Q.
% &
\
J
2
1
A
o
Window
Window * <
|iiu
i i'1 i i i300
zAW'
2Qu
*----
[j|
_________________
U
2
J
.*
Mi
o
Jak widzisz, na rysunku 2.26 umieciem kursor myszy w lewym grnym naroniku.
Zwr te uwag na lewy dolny rg caego rysunku 2.26 zaznaczyem w nim dwie
liczby: 253 oraz 136. S to wsprzdne pierwszego punktu, ktre s potrzebne do
stworzenia mapy odsyaczy. Sytuacja wyglda podobnie na rysunku 2.27, z tym e tym
razem zajem si prawym dolnym naronikiem obszaru.
Masz ju wsprzdne punktw oraz wiesz, e aktywne obszary obrazka s prostok
tami. Czas stworzy odpowiedni kod, definiujcy map odsyaczy na stronie WWW.
Poniej zamieciem przykadowy listing odpowiedzialny za sporzdzanie mapy odsy
aczy dla przykadowego rysunku.
<body>
<map name="test''>
<area href="http://danow ski,pl" shape="rect" coords="253.136.332.223" />
</map>
<img src="obrazek.gif" border= 0 height="346" width=324 usemap="#test" />
</body>
64
1c=>l a beiaJ'
tdrt
View
t> S 3 i d v i
Tool:
Image
b U
Layers
4
Adjustments
-1
Effects
Window
Window
- at,
Help
i f I F ] Units: Pixels
Quality. Smooth
-Z
M i
; Move Selected Pixels: Drag the selection to move. Drag the nubs to scale. Drag with nght n jj j 346 x 324
| t j 332,223
65
Kotwice
Przedstawione odsyacze odnosz si do konkretnego pliku, ale w poczeniu z kotwic
pozwalaj odwoa si do konkretnego miejsca w danym dokumencie. Oznacza to, e
odniesienie si do konkretnego pliku i do zadeklarowanej kotwicy spowoduje otwar
cie przez przegldark wskazanego pliku oraz przewinicie dokumentu tak, by linia
zawierajca kotwic bya moliwie najbliej grnej krawdzi przegldarki. Jest to roz
wizanie przydatne w przypadku tworzenia dokumentw duszych ni jedna lub dwie
dugoci ekranu monitora, gdy uatwia nawigacj.
Deklaracja kotwicy moe wyglda nastpujco:
<a id=" nazwa_kotwicy">Fragment</a> tekstu dokumentu ...
<a \d="nazwa_kotwicy"></a>
66
Odnonik taki ma jed n istotn wad: w przypadku zmiany serwera, na ktrym publi
kujemy witryn, a co za tym idzie jego adresu, bdziemy musieli poprawi wszystkie
odnoniki zapisane w ten sposb. Odnonikw bezwzgldnych powinno si uywa
do czenia zewntrznych stron, a przy dokumentach wewntrz jednego serwisu naley
stosowa odnoniki wzgldne.
Odnonik wzgldny ma nastpujc posta:
<a href="nazwa_pliku.htmT'>To je s t odnonik wzgldny</a>
Rysunek 2.28.
Przykadowe
drzewo katalogw
67
Uwaga
68
Edycja
J -
<-
Szukaj
XHTML
- - A J
PHP
JavaScript
Opcje
Pomoc
J i p * H % h ! t i ta !
t #
O ia*0 |a a a a |E s >
>Ol
a j S S 'l t '
ffl- CA[Vista]
<10 DA[System]
sa*E \ [Media]
I
EA[Dokumenty]
ffl-S#GA[Pfcil
HA[Roboczy]
15
</b od y>
< /h tm I>
j~Przegldaj... |
Tre odnonika
Bartosz Danowski
Opis (tttte)
Ofajalan strona Bartosza Danowskiego
Qkno docelowe (target)
Ustawie stylu
dass
jj
Kod
j SX
NUM Rozmiar. 8 B [0,85 KB)
K:1,W:16
69
Edycja
Szukaj
XH TM L
PH P
JavaScript
j
i i ?' ;
F ... ( j M jj ' B !!! Z o
m i a s t ! - |_%-
Po m oc
J akl J | J i
! E l M BI M SS i
P, G iaW *
at
l I - o i ^ 3 S g i B B S *
Drzewo dokumentu
J
j ^
O pcje
i (B O ) Q |
C:\fVwtal
DA (Systemj
S S * E .A [Medaj
F:\ pokumentyl
s * . G A IPHM
H hA [Roboczy]
</head>
;<body>
< a h r e f - " h t t p : //d a r s o w s k i. p i " t i t l e - 'O f i c j a l a n s t r o n a B a r to s z a D anow skieg o">
B a r to s z D a n o w s k i< /a >
I< /b o d y >
</html>
U:-
.1
km
) J * PodjWi
INS
Tabele
Wprowadzenie obsugi tabel w jzyku HTML spowodowao prawdziw rewolucj. To
wanie dziki tabelom strony nabray ciekawego wygldu i stay si bardziej prze
strzenne ni dotychczas. W tym miejscu zaryzykuj twierdzenie, e tabele stay si tak
popularne jako narzdzie wykorzystywane do budowania struktury strony, e w pew
nym momencie si przejady. W raz z popularyzacj XHTML i CSS zaprzestano
70
Adam
Strona prywatna
Na stronie znajdziesz:
Q Co o mnie
@ Kcik porad prawnych (z zakresu prawa pracy)
@ Klub Fiata Uno
@ Troch ciekawych linkw
@ A moe chcesz w cos zagra...
Stronamajiujt1mmttrwmnmwwm.rmntbNkapl
R e p u b lik a
W W W
Dzisiaj niemal kady projekt posiada kilka oddzielnych blokw, znajdujcych si obok
siebie. Przykadem takiej strony moe by moja witryna dostpna pod adresem http://
danowski.pl patrz rysunek 2.32.
Pomimo popularyzacji XHTML i CSS oraz coraz lepszej obsugi nowych rozwiza
we wspczesnych przegldarkach nadal wikszo stron jest budowana przy wykorzy
staniu tabel. We wntrzu tabel znajduj si: tekst, grafika, formularze, a nawet inne
tabele. Prawd mwic, nawet moja strona domowa w poprzedniej wersji te opieraa
Rysunek 2.32.
Przykad strony
z kilkoma kolumnami
tekstu
71
Bartosz Danowski
Danowski.pl
Szukaj
te
! C zytaj cao
> Aktualnoci
Ciekawe programy
Mozilla
Nero
Kategorie
* Nie na te m at
Ogoszenia
* Porady
Czytaj cao *
Prgierz
Opinie czytelnikw
niezmiernie
Je ste m
zadowolony z Pana
ksiki p t:
"Tworzenie stron
WWW w praktyce.
W R H T *
C zytaj c ao
Bogi
Komentarzy. 2 Edytuj
WebAucfit Blog
Co nowego...
*** 0 7.06 2007 '-O Nie ma kom entarzy * Edytuj
Od dawna nie informowaem o rzeczach n ad ktrymi aktualnie
pracuj. Dlatego przysza pora aby nadrobi zalegoci i podzieli
si z Wami informacjami, o tym co skoczyem lub wanie pisz.
m arcoos.techblog
RSS
( 3 W szystkie wpisy
..'
f l i
| J Ksiki
8 Artykuy
New sletter
Jeli c h ce sz by powiadamiany o
now ociach na stronie zaprenumeruj
b iu le ty n in fo rm a c y jn y
Czytaj cao
Uwaga
Staraj si nie uywa tabel do budowy struktury witryny. Obecnie m asz znacznie
lepsze i wydajniejsze techniki XHTML i CSS. Tabel uywaj wycznie do prezentacji
tych danych, ktre tego faktycznie wymagaj, np. mog to by jakie terminarze
albo fragmenty arkuszy kalkulacyjnych.
72
Proste tabele
Kada tabela skada si z odpowiedniej kombinacji znacznikw <table></table>,
< tr> < /tr> oraz <td></td>. Przykad prostej symetrycznej tabeli z obramowaniem.
<body>
<table border="l">
<tr>
<td>Pierwsza komrka tabel i </td>
<td>Druga komrka ta b e li</td>
< /tr>
<tr>
<td>Trzecia komrka tabeli</td>
<td>Czwarta komrka tabeli</td>
< /tr>
</table>
</body>
Uwaga
Przy tworzeniu tabel warto korzysta z tzw. wcinania kodu tak jak to wida na listin
gach, gdy dziki temu znacznie atwiej zapanowa nad skomplikowanym projektem.
73
Czwarta komrka
Wymiarowanie tabel
Kada tabela publikowana za pom oc znacznikw jzyka HTML moe mie okrelo
ny rozmiar wysoko oraz szeroko. Rozmiar moe by zdefiniowany w pikselach
(jednostki stae) lub w procentach (jednostki wzgldne). Regulacja obu wartoci jest
moliwa za pom oc atrybutw width (szeroko) oraz height (wysoko) znacznika
<table></table> lub <td></td>.
Jeeli na sztywno okrelisz wymiary tabeli, to bez wzgldu na rozmiar okna przegl
darki bdzie ona miaa sta wielko. Poniej zamieszczam przykady tabeli o wymia
rach 200 na 200 pikseli oraz szerokoci 50%. Natomiast na rysunku 2.34 wida efekt
dziaania kodu.
< !- -Tabea o wymiarach 200 na 200 p ikse i <body>
<table border="l" width="200" height="200">
<tr>
<td>l</td>
<td>2</td>
</tr>
74
Rysunek 2.34.
P rzykad tabel
z okrelonym
rozmiarem
2
4
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
</body>
< !--Tabela o wymiarach 50 na 50-->
<body>
<table border="l width="50" height="50">
<tr>
<td>l</td>
<td>2</td>
< /tr>
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
<body>
<td>2</td>
< /tr>
<tr>
<td width=''50>3</td>
<td>4</td>
< /tr>
</table>
<body>
75
V
Uwaga
<td>l</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
Brak atrybutu cel 1spaci ng zostawia domyln przerw midzy komrkami. W sytuacji,
gdy chcesz cakowicie usun odstpy (np. gdy tabela zawiera pocit na mniejsze
czci grafik), musisz uy atrybutu o nastpujcej postaci cellspacing="0".
Nastpnym atrybutem, podobnym w dziaaniu do cellspacing, jest cel 1padding, ktry
odpowiada za regulacj wewntrznych marginesw w komrce tabeli. Atrybut ten rw
nie wystpuje w znaczniku <table>.
<body>
<table brder=T ' width="200" height="200" c e li paddi ng= 25''>
<tr>
<td>l</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
</body>
Oczywicie, nic nie stoi na przeszkodzie, by na stronie w tabeli czy oba atrybuty:
cel 1spaci ng oraz cel 1paddi ng. W takim przypadku odstpy bd si sumoway. Stosow
ny przykad zamieszczam poniej.
76
<body>
<table border="l" width="200" height="200" cellpadding= 20 censpacing=''20>
<tr>
<td>l</td>
<td>2</td>
< /tr>
<tr>
<td>3</td>
<td>4</td>
< /tr>
</table>
</body>
Przy poczeniu obu atrybutw ich warto si sumuje i w efekcie uzyskujesz wikszy
odstp midzy zawartoci poszczeglnych komrek.
Tabele niesymetryczne
Dotychczas opisywane tabele byy symetryczne i zawsze zawieray tyle samo komrek
w kadym wierszu. Teraz przysza pora, by zaj si tworzeniem tabel o nieregularnych
ksztatach niesymetrycznych. Zaczn od przykadu tabeli niesymetrycznej, by do
kadnie wiedzia, o czym pisz. Przykad takiej tabeli znajduje si na rysunku 2.35.
Rysunek 2.35.
Przykad tabel
Przykad pierwszy
Przykad drugi
niesymetrycznych
1
Zwr uwag na to, e w przypadku pierwszej tabeli drugi wiersz zawiera jedn ko
mrk, ktra zostaa rozcignita na dwie kolumny. Nieco inaczej wyglda dmga tabela,
gdzie w pierwszej kolumnie rozcignem komrk na dwa wiersze.
Przedstawione dziaanie na tabelach jest moliwe dziki dwm atrybutom jzyka
XHTML (HTML), uywanym w znaczniku <td>. Mam tutaj na myli rowspan i col span.
Pierwszy z nich rozciga komrk na ssiednie wiersze, natomiast drugi na kolumny.
Poniej zamieszczam przykadowy listing dla tabel z rysunku 2.35.
<body>
<!-Pierwszy przykad-->
<table border= l " width="200" he1ght="200">
<tr>
<td>l</td>
<td>2</td>
< /tr>
77
<tr>
<td colspan="2">3</td>
< /tr>
</table>
</body>
<body>
<!Drugi przykad-->
<table border="l" width="200" height="200">
<tr>
<td rowspan=2">l</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tab!e>
</body>
Zwr uwag, e przy atrybutach rowspan i col span wystpuje warto liczbowa, kt
ra okrela, na ile wierszy lub kolumn ma zosta rozcignita formatowana komrka.
Oczywicie, tabele m og przybiera rne wymylne ksztaty, a wszystko zaley od
pomysowoci webmastera oraz jego znajomoci znacznikw jzyka XHTML (HTML).
Pamitaj, e do tworzenia tabel nie potrzeba Ci ju niczego wicej.
Zagniedanie tabel
Na pewno pamitasz, w jaki sposb zagniedalimy listy. Teraz te wiadomoci si
przydadz, poniewa zasada zagniedania tabel jest dokadnie taka sama. Poniej za
mieszczam prosty przykad tabeli zagniedonej wewntrz komrki innej tabeli. W listin
gu umieciem dodatkowo komentarze, dziki czemu bdzie Ci znacznie atwiej zrozu
mie, gdzie zaczyna si i gdzie koczy tabela. Rysunek 2.36 przedstawia uzyskany efekt.
< !-- POCZTEK GWNEJ TABELI -->
<tab1e border='T'>
<tr>
<td>
< !-- POCZTEK PIERWSZEJ ZAGNIEDONEJ TABELI -->
<table border="l'' width="200" height="200">
<tr>
<td>l</td>
<td>2</td>
< /tr>
<tr>
<td colspan="2>3</td>
< /tr>
</table>
< !-- KONIEC PIERWSZEJ ZAGNIEDONEJ TABELI -->
</td>
<td>
78
Rysunek 2.36.
Przykad
zagniedonych tabel
<td>3</td>
< /tr>
</table>
< !-- KONIEC DRUGIEJ ZAGNIEDONEJ TABELI -->
</td>
< /tr>
</table>
< !-- KONIEC GWNEJ TABELI -->
V
Uwaga
79
<tr>
<td>nagwek tabel i </td>
</tr>
</thead>
<tbody>
<tr>
<td>ciao tabeli</td>
< /tr>
</tbody>
<tfoot>
<tr>
<td>stopka tabeli</td>
</tr>
</tfoot>
</table>
</body>
W kodzie strony natomiast podpis powinien znajdowa si midzy znacznikiem <tabl e>
</table>.
<body>
<table border="l' w1dth="200" height=200">
<caption>Tabela 1.1. Kada tabela moe zawiera podpis</caption>
<tr>
<td>l</td>
<td>2</td>
</tr>
<tr>
<td colspan=2>3</td>
< /tr>
</table>
</body>
80
Edycja
Szukaj
XHTML
PHP
JavaScript
j : e * a ; .j; a?
F ... I ] M J$
-a J i S" : -
3H i
Drzewo dokumentu
SC .
*!
&
Elementy
* htm*
i
C \ [Vta[
i
DA [System}
(S- s ^ E :\ [Media}
!+!
F \ [Dokumenty]
^G\[Pki]
SI
SI
i
i
H A [Roboczy}
ii
ip
ii"
\*
Opcje
Pomoc
j t ] m * w a j ^ f
i r *1 J -a
A' X 1 *> U H H B H ____
i m. .Jl ! a8 & -> I
I . := -
Q
/ .'wir /7io-W-2"S
<body>
< ta b le x tr > c T d > |< /td > < /tr x /ta b le >
< /b o d y >
; < /h t m l>
81
Edycja
Szukaj
XHTML
PHP
JavaScript
j * p_' a * *
sr
< 1 I [FI
Opcje
Pomoc
$ ./?
y ii
j B
!!
i R 3 A . % - !:
i i-i. * B
Scaoa
test.M ualSGQ
Drzewo dokumentu
Elementy
Wstawki
M.
3 & -
ON
a a m a * a
a a is E ?
G bsz_na;wy (ISO) )
T---------------------
&
*htm
ffi
CA [Vista]
!i
E:\ [Medial
DA [System]
ffl ** E:\ [Dokumenty]
[PM
!i sin HA [Roboczy]
t t Iw a m i &
Kolumny 3
Odstpy 0
W iersze j*
Ramka
I n
Tytu tabeli (pozostaw pusty, aby pomin) jg Ostatni w iersz jako stopka
ii
Przykadowa tabela
IV
u
U
inbsp;
ntabel
Ustawienia stylu
class
id
Jt KM
INS
82
Rysunek 2 .3 9 .
Przykadowy arkusz
program u M S Excel
SjjJ Plik
Edycja
D s ia ti
2
3
4
S
6
7
8
9 1
10
11
12
13
Ml
15
16
17]
Edycja
Szukaj
XHTM L
Wstaw
Format
Narzdzia
Darte
Qkno
Pomo
f,
B
Miesic
Stycze
Luty
Marzec
Kwiecie
Maj
Czerwiec
Lipiec
Sierpie
Wrzesie
Padziernik
Listopad
Grudzie
Wpywy
1500
2345
1234
5678
924
2680
3214
2456
8724
4321
1122
2368
JOD OD
Wydatki ~||
980
1890
250
1090
156
256
1234
3085
1345
987
765
13288
E
Bilan
250
1365
-656
5428
-166
2524
2958
1222
5639
2976
135
1603
Cu4 0
"S i
_ i_ d _
PHP
JavaScript
j - o - y * * j C P >* |
5t W rm M B m /
'fi a a i S - i t ; Notatki
F23
Widok
s
Opcje
Pomoc
% U N i i H B l k k l
U M J - ra i
\ :M B ! a) *
.i
rt3 >M ies t c < / t d ><t d > w p yvty< /td > < t d>wydat k f < / t d x t d>Bf Tans < / t d>
->
iti
CA [Vista]
> s> DA [System]
+ X*. E:\ [Media]
li! W PA [Dokumenty]
ItaJtraM
Rodzaj separatora
Tabulator
Przecinek
*^ G A [P B il)
83 * H A [Roboczy]
M ie s i c ; W p y w y ;W y d a tk i; B lla n s ; ;;
S ty c z e ; 1 5 0 0 ;12 50;250;;;
L u ty ;2 3 4 5 ;9 8 0 ;1 3 6 5 ;;;
M a rz e c ;1234; i e 9 0 ; -6 5 6 ; ; ;
K w ie c ie ; 5 6 7 8 ;25 0;5428;;;
M a j; 9 2 4 ;1 0 9 0 ;-1 6 6 ;;;
C z e r w ie c ; 2 6 8 0 ;15 6;2524;;;
L ip i e c ; 3214 ;2 5 6 ;2 9 5 8 ;;;
S ie r p ie ; 2 4 5 6 ;12 34;1222;;;
W rze sie ;8 7 2 4 ;3 0 e 5 ;5 6 3 9 ;; ;
P a d z ie r n ik ; 4 321 ;13 45;2976;;;
L is t o p a d ; 1122 ;9 B 7;135 ;;;
G ru d z ie ; 2 3 6 8 ;7 6 5 ;1 6 0 3 ;;;
;36566;13 288;23278;;;
PW
IPfIM!>IIPI!IN
J
im
i , poa
INS
JO 9, W: 54
83
arie rdowe
9 -z
js
Kolumny
Odstpy 0
(>
GB
Wiersze 15
Ramka
Przykado wa tabela
id
Anuluj
CT)
</>
class
*
U
|2
Miesic
Wpywy
Wydatki
Bilans
Stycze
1500
1250
250
Luty
2345
980
1365
Marzec
1234
1890
-656
Kwiecie
5678
250
5428
Maj
924
1090
-166
Czerwiec
2680
156
2524
Linie
3214
256
2958
i9
*
Wstaw tabel
Ustawie na stylu
Jeeli tabela bdzie wyglda w naleyty sposb, kliknij przycisk Wstaw tabel. Od
powiedni kod pojawi si w miejscu, w ktrym znajdowa si kursor. Na rysunku 2.42
wida przykadow tabel po przeniesieniu na stron WWW. Oczywicie, tabela wymaga
jeszcze odpowiedniego formatowania, ale to ju zadanie dla kaskadowych arkuszy stylw.
Rysunek 2.42.
Przykad
gotowej tabeli
Przykadowa tabela
Miesic
Stycze
1500
1250
Luty
2345
980
250
1365 ,
Marzec
1234
1890
-656 I
___
Kwiecie
5678
250
5428
Maj
924
1090
-166
Czerwiec
2680
156
2524
Lipiec
3214
256
295S
Sierpie
2456
1234
1222
Wrzesie
8724
3085
5639
Padziernik 4321
1345
2976
Listopad
1122
987
135
jGnidzie
2368
765
1603
36566
13288
23278
84
Formularze
W naszym yciu wypeniamy dziesitki, jeli nie tysice formularzy. Wynika to z faktu,
e jest to najprostsza forma zdobywania cile okrelonych informacji. Jzyk XHTML
(HTML) posiada zestaw znacznikw odpowiedzialnych za generowanie elektronicz
nych formularzy.
Formularz jest uywany w bardzo wielu przypadkach. Za jego pomoc zdobywamy
informacje o odwiedzajcych stron, tworzymy ankiety, ksiki goci, a nawet zgasza
my zapytanie do internetowych serwisw katalogujcych, czy dokonujemy zakupw
w sieciowych centrach handlowych.
Ramy formularzy na stronie definiuje znacznik <form></form>. Zdye ju pozna
budow znacznikw, wic moesz si spodziewa, e <form> posiada szereg atrybutw
oczywicie, nie mylisz si.
Pierwszym atrybutem tego znacznika jest action, ktry okrela rodzaj akcji, jaka ma
zosta wykonana po naciniciu przycisku OK. Jako warto action mona poda adres
odpowiedniego skryptu bd adres e-mail. Dalej mamy atrybut method, gdzie okrela
si metod, ktra zostanie uyta do wykonania formularza. Do wyboru mamy dwie
metody: post i get. Pierwsza z nich, post, suy do zgaszania dugich da do serwe
ra, natomiast get zgasza krtkie dania. Jest to do oglnikowe wyjanienie, ale uzna
em, e zupenie wystarczy dla Twoich potrzeb. Jeli zajmiesz si pisaniem skryptw,
wtedy bdziesz musia poszerzy wiadomoci z tego zakresu.
Pora na przykad definicji ram formularza:
<form action*"matlto:email@domena.pl'' method="post"></form>
Tak ustawiony formularz wyle na adres e-mail zawarto wszystkich pl, jakie wsta
wimy w dalszej czci.
maxlength= />
85
Uwaga
86
Rysunek 2.43.
Przykadowe pola
form ularza typu input
T ext
Checkbox
Radio
Domylna warto
0
Password
FUe
Sobmit
OK |
R e se t
Anuluj )
Ptzeglqdaj. - ]
Hidden
Button
Przycisk ]
W przypadku select, podobnie jak przy polach typu input, moemy okreli jego na
zw atrybut name.
Znacznik <option></option> definiuje jedn pozycj z listy. Taka definicja pola typu
se le ct pozwala na wybranie tylko jednej pozycji z naszej listy. Aby da moliwo
wyboru kilku, nasz definicj musisz uzupeni o atrybut m u ltip le , zgodnie z tym, co
prezentuje podany przykad. Pamitaj, e w przypadku strony zgodnej ze specyfikacj
XHTML atrybut m u ltip le musi mie posta tak, jak ta na poniszym przykadzie.
<select name="nazwa_naszej_listy" m ultiple=m ultiple">
<opti on>p7erwsza pozycja</o p tion>
<option>druga pozycja</option>
<opti or\>trzecia pozycja</option>
</select>
Ostatnim atrybutem, uywanym przy polach typu select, jest size. Okrela on, ile
pozycji z listy ma by widocznych na ekranie. Podanie zmiennej jako wikszej lub
rwnej liczbie pozycji zdefiniowanych w ramach pola pozwoli nam wyeliminowa
pasek przewijania, pojawiajcy si z boku pola.
<select r\atne="nazwa_naszej_l i sty" m ultiple ''m ultiple size="5>
<opti on>p ierwsza pozycja</option>
<option>druga pozycj'a</option>
<opti on>trzecia pozycja</option>
</select>
Rysunek 2.44.
Przykad
pl formularza
typu select
S e e c t
pierwsza pozycja v
S e e c t
pierwsza pozycja
druga pozycja
trzecia pozycja
S e e c t
87
druga pozycja
trzecia pozycja
Umieszczajc tekst pomidzy znacznikami < te x ta re a > < /te x ta re a > , moemy zasuge
rowa co potencjalnemu uytkownikowi formularza. Rozwizanie to jest podobne
w dziaaniu do atrybutu value, omawianego przy poprzednich znacznikach typu in p u t.
Poprzez dodanie atrybutw rows i col s moesz regulowa wielko pola.
Rysunek 2.45 przedstawia pole typu te x ta re a .
Rysunek 2.45.
Przykadowe
pola formularza
typu textarea
Te x tare a
88
Dokadnie tak bdzie wygldaa poczta, ktr otrzymamy. Forma jest raczej mao za
dowalajca. Istniej specjalne programy, ktre s w stanie przetworzy cao na zrozu
m ia posta, ale ich stosowanie mija si z celem i jest pracochonne. Dlatego do obsugi
zaleca si stosowanie odpowiednich skryptw, np. popularnego FormMail, ktre prze
tworz odpowiednio wynik dziaania formularza, a otrzymana poczta bdzie czytelna.
Prawie kady z rodzimych dostawcw usug internetowych oferuje swoim klientom
odpowiednie skrypty do obsugi formularzy. Bardzo wiele firm udostpnia takie skrypty
bezpatnie. Wystarczy ich poszuka, np. za pomoc Google (http://google.pl). Oczywi
cie, w dodatku na kocu ksiki zamieciem zbir odnonikw do firm, ktre oferuj
darmowe skrypty do obsugi formularzy i nie tylko. Mam nadziej, e Ci si przyda.
W poprzednich podrozdziaach omwiem wszystkie dostpne pola formularza i teraz
przysza pora, by zobaczy, jak wyglda i dziaa on w praktyce. Sprbujemy przygoto
wa formularz, w ktrym uyjemy wszystkich dostpnych pl, a cao zostanie wy
sana za pom oc specjalnego skryptu. Postanowiem, e formularz bdzie miniankiet
na Twj temat, mj drogi Czytelniku. Chciabym si dowiedzie czego wicej o Tobie,
Twoich zainteresowaniach oraz o tym, co mylisz o tej ksice. Bardzo mi zaley,
by pozna Twoje zdanie, gdy to pozwoli mi napisa jeszcze lepsz ksik, spenia
jc Twoje oczekiwania.
Uwaga
Na rysunku 2.46 wida przykad formularza, bdcego ankiet. Jeeli chcesz oceni
niniejsz ksik, sprbuj przygotowa podobny formularz i wysa go do mnie.
Ramki
N a samym pocztku sprbuj odpowiedzie na pytanie, czym s ramki. Ot jest to
rozwizanie pozwalajce w jednym oknie przegldarki wywietli kilka stron. Uywa
jc ramek, m oesz podzieli okno przegldarki na kilka czci w zalenoci od
potrzeb i w nich niezalenie przeglda dokumenty.
Klasycznym przykadem uycia ramek jest sytuacja, gdy okno przegldarki dzielimy na
dwie czci; lewa, mniejsza, cz zawiera spis zawartoci witryny, natomiast w prawej,
wikszej, widzimy poszczeglne strony z treci. Wybierajc jedn z pozycji z lewej cz
ci przegldarki, powodujemy wywietlenie odpowiedniego dokumentu w prawej czci.
Rysunek 2.46.
miniankieta
Przykad
kompletnego
formularza
89
bartek@danowski.pl
Odbiorca ankiety:
Imi:
F.-matT
Pe:
Kobieta: O Mczyzna: O
Wybierz ocen v ;
[ Wylij
] [ Anuluj )
Jeeli chcesz, aby tre tego formularza trafia do Ciebie, musisz w polu Odbiorca ankiety wpisa swj
poprawny adres e-mail. Pamitaj o tym, e zaley' mi rwnie na tym, aby Twoja ocena ksiki trafia do
mnie. Dlatego najpierw' wylij formularz na domylnie podany adres, a dopiero pniej sprawd inne
moliwoci
90
</html>
Menu
</html>
Menu
Gwna tre strony
91
Nasz przykad zawiera nastpny znacznik <frame />, ktry okrela dokadniej kon
kretn ramk i przypisuje do niej nazw oraz dokument wywietlany domylnie w e
wntrz. Su do tego atrybuty name oraz src. Poza tym znajduje si tu jeszcze atrybut
s c ro llin g , odpowiedzialny za wywietlanie suwakw, pozwalajcych na przewijanie
dokumentu znajdujcego si wewntrz ramki. Moe on przybra nastpujce wartoci:
auto wwczas suwaki bd pokazywane automatycznie, jeli oka si potrzebne
(gdy dokument przypisany do danej ramki bdzie za duy), no wtedy suwaki nigdy
nie zostan pokazane, oraz yes w ym uszajcy pokazywanie suwakw niezale
nie od tego, czy s potrzebne, czy nie. Ostatnim atrybutem znacznika <frame /> jest
noresize, wymuszajcy na przegldarce zablokowanie moliwoci zmiany wielkoci
okien, ktre domylnie m aj tak moliwo.
Podane przykady pokazuj, e moemy dzieli okno przegldarki na kolumny (atry
but col s) bd wiersze (atrybut rows), ale nic nie stoi na przeszkodzie, by na naszej
stronie wiersze i kolumny poczy. Do tego celu musimy uy dobrze znanego zagnie
dania. Oto przykad:
<?xml version="1.0" encoding="IS0-8859-2"?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"h ttp ; / / www.w3.org/TR/xhtml1/DTD/xhtml 1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml: lang="pl">
<head>
<meta http-equiv=''content-type" content="text/html;charset=IS0-8859-2" />
<title>Przykad witryny z ramkami</title>
<link re i="Stylesheet" href=''style.css" type="text/css" />
</head>
<frameset rows="100,*">
<frame name="gora" src="gora.htm'' />
<frameset cols="35,*">
<frame name="lewa" src="lewa.htm" />
<frame name=''prawa src="praw.htm" />
</frameset>
</frameset>
</html>
G ra
L ew a
P ra w a
Prawda, e proste?
Skoro wiesz, jak dzieli okno na odpowiedni liczb ramek, pora pozna form adre
sowania dokumentw wewntrz ramek. Chodzi o to, e hipercza w formie, jak po
znalimy nieco wczeniej, nie zadziaaj poprawnie na stronie opartej na ramkach.
Efekt bdzie taki, e przy wywoaniu hipercza strona, do ktrej si ono odnosi, zosta
nie wywietlona w tym samym oknie, w ktrym znajdowao si hipercze. By tego
unikn, musisz okreli, w ktrym oknie wywoywany dokument ma zosta wywie
tlony i tu z pom oc przychodz nam nazwy ramek, definiowane wczeniej.
Przeanalizujmy przykad oparty na powyszej definicji ramek. Zdefiniowalimy 3 ramki
na stronie i nadalimy im nazwy: Gora, Lewa, Prawa. Dokumenty w nich wywietlane maj
podobne nazwy. Dokument lewa.html zawiera definicje nastpujcych odsyaczy:
92
Rozdzia 3.
Grafika sieciowa
Specyfikacja jzyka HTML (XHTML) pozwala na umieszczanie elementw graficz
nych na stronie WWW. Twrcy pierwszych stron wzbogaconych o grafik mieli do dys
pozycji dwa formaty plikw graficznych GIF i JPG. Z biegiem czasu przybornik
webmastera zosta rozszerzony o kolejne ciekawe formaty PNG, Flash, a ostatnio
SVG. O ile GIF, JPG i w nowszych przegldarkach PNG nie wymagaj dodatkowych
narzdzi do wywietlania grafiki na stronie, to pozostae dwa potrzebuj specjalnej
wtyczki do przegldarki, ktr ogldajcy musi pobra z sieci. Ogromna popularno
Flasha spowodowaa, e wszystkie obecnie dostpne przegldarki domylnie m aj in
stalowane odpowiednie oprogramowanie.
Na nastpnych stronach dowiesz si, czym rni si poszczeglne formaty plikw
graficznych oraz sposoby prezentacji grafiki na stronie. Na przykadzie Paint Shop Pro
poznasz sposoby przygotowania grafiki na potrzeby sieci i tworzenia popularnych roz
wiza graficznych stron WWW. Informacje tutaj zawarte bd nam potrzebne przy
tworzeniu naszych projektw i niestety nie da si pomin tego rozdziau.
Uwaga
Now wersj programu Paint Shop Pro m oesz pobra ze strony h ttp ://a p p s .
corel.com /int/pl/psppxi.htm l. W swoim opisie skorzystaem co prawda ze starszej
wersji programu (na niego wykupiem licencj, pracujc od kilku lat bardzo si do
niego przyzwyczaiem), ale myl, e bez problemu sobie poradzisz z wykonaniem
opisanych zada w nowszej wersji. Pamitaj, e na pycie CD doczonej do ni
niejszej ksiki zamieciem rwnie kilka darmowych i rozbudowanych programw
graficznych.
Zanim przejdziemy do waciwej treci, chciaem zwrci uwag na jeszcze jeden istot
ny fakt. Ot jeeli planujesz zaj si tworzeniem stron WWW w sposb komercyjny,
tzn. zaoy firm i wiadczy usugi webmasterskie, to wydaje mi si, e powiniene
wzi sobie do serca to, co zaraz napisz.
W naszym kraju ze wzgldu na due koszty pracy powsta specyficzny pogld na prac
webmastera twrcy stron WWW. Zgodnie z t w izj osoba zajmujca si tworze
niem stron WWW powinna zna si co najmniej na:
94
95
funkcja programu bdzie dla niego znajoma i bdzie wiedzia, ja k z niej skorzysta.
Jednak nie nauczy si myle jak grafik. Nie bdzie mia oryginalnych pomysw,
a wszystkie jego prace bd jedynie mniej lub bardziej udolnymi kopiami tego, co ju
kiedy powstao.
Prawda moe si wydawa do brutalna, jednak z takim spojrzeniem na stan rzeczy
zgadza si wielu ludzi zajmujcych si tworzeniem stron WWW na powanie.
Oczywicie, jeeli zajmujesz si tworzeniem stron typowo amatorsko i dla wasnej
przyjemnoci, to nic nie stoi na przeszkodzie, by poznawa wszystkie dostpne tech
niki. Pamitaj jednak, eby nie popa w samouwielbienie i nie sta si kolejnym
specjalist od stron WWW.
Po tym krtkim wstpie przejdmy do gwnego tematu rozdziau, czyli opisu stoso
wanych formatw graficznych oraz sposobu przygotowania grafiki sieciowej.
Format
Na stronie WWW moemy umieci tylko kilka z dziesitek formatw graficznych.
W dalszej czci niniejszego podrozdziau omwiem najwaniejsze formaty wraz z ich
zaletami i wadami. Uwaam, e powiniene dokadnie przyjrze si kolejnym pod
rozdziaom.
GIF jest formatem stosowanym od lat na stronach WWW; pomimo wielu ogranicze
ma si doskonale i jak na razie trudno jednoznacznie przewidzie koniec jego wyko
rzystania do tworzenia stron. Format ten powsta w 1997 roku (wersja 87a) na zamwie
nie sieci CompuServe, a nastpnie zosta zmodernizowany w roku 1999 (wersja 89a).
Kompresja danych odbywa si w oparciu o algorytm LZW i jest licencjonowana przez
waciciela firm Unisys. GIF jest formatem omiobitowym lub, jak kto woli, po
zwala na zapisanie maksymalnie 256 kolorw. Oczywicie, w razie potrzeby moemy
w nim zapisa znacznie mniej kolorw, a co za tym idzie, zredukowa palet.
Przyjrzyjmy si dokadniej metodzie kompresji, gdy jej zrozumienie pozwoli na bar
dziej wiadome korzystanie z tego formatu. Ot LZW jest bezstratn m etod kom
presji charakteryzujc si stopniem upakowania rwnym 4:1. Oznacza to, e obrazek
po zapisaniu do tego formatu ma rozmiar okoo cztery razy m niejszy ni orygina.
Natomiast bezstratna kompresja oznacza, e obrazek zawsze wyglda dokadnie tam
samo i zawiera te same kolory, co orygina.
GIF jest idealnym rozwizaniem do zapisu wszystkich elementw graficznych, ktre
nie s fotografiami, np. ozdobnych nagwkw, tekstu, wykresw i innych prostych
elementw graficznych.
96
Na rysunku 3.1 przedstawiem trzy plamy barwne w rnych odcieniach koloru szare
go. Mam nadziej, e wida rnic w odcieniach poszczeglnych elementw. Jeel
nie, to musisz uwierzy mi na sowo, e prostokt z lewej strony ma kolor szary, nato
miast element w rodku ma kolor jasnoszary. Ostatni prostokt ma kolor czarny.
Rysunek 3.1.
Prosty obrazek GIF
prba omwienia
kompresji L ZW
Rysunek 3.2 przedstawia wycinek jednej linii z rysunku 3.1. Znajduj si na nim
rwnie trzy kolory, szary, jasnoszary oraz czarny. Poza tym wida podzia na piksele
mae kwadraciki.
Rysunek 3.2.
Wycinek
z rysunku 3.1
Algorytm kompresji LZW dzieli obrazek na linie, a nastpnie w kadej linii dokonuje
sprawdzenia koloru zapisanego w kadym pikselu. Oto wynik analizy dla linii z ry
sunku 3.2:
szary 10 pikseli (dalej oznacz ten kolor liter S),
jasnoszary 16 pikseli (dalej oznacz ten kolor literami JS),
czarny 9 pikseli (dalej oznacz ten kolor liter C).
Kompresja LZW po przeprowadzeniu analizy liczby powtrze koloru w danej linii
zredukuje je do jednego i doda informacj o tym, ile razy dany piksel powinien wy
stpi. Zapis linii z rysunku 3.2 bdzie mia nastpujc posta 10S 19JS 9C.
Jeeli dane linie powtarzaj si wiele razy po sobie, to stopie kompresji jest jeszcze
lepszy. Oczywicie, podany przykad jest duym uproszczeniem zasady rzdzcej kom
presj LZW, ale daje moliwo wyrobienia sobie pogldu na temat jej zasady dziaania.
Dalej zamieszczam kilka przykadowych obrazkw, by mg jeszcze lepiej zrozumie,
jak kompresuje si obraz w formacie GIF (rysunek 3.3).
97
Rysunek 3.3.
Kilka przykadowych
obrazkw zapisanych
wformacie GIF
1326 bajtw
1040 bajtw
2682 bajtw
2823 bajtw
957 bajtw
Zwr uwag na to, e obrazki, na ktrych dany kolor powtarza si w jednej poziomej
linii, kompresuj si znacznie lepiej ni te, gdzie linia ma orientacj pionow.
Format GIF pozwala na skorzystanie z kilku ciekawych waciwoci. Mam tutaj na
myli moliwo okrelenia koloru przezroczystego (transparentnego), zastosowania
przeplotu oraz animacji. Kademu z zagadnie powiciem oddzielne podrozdziay.
W kadym z nich znajdziesz opis jednej z waciwoci oraz krtk instrukcj, jak z niej
skorzysta w programie Paint Shop Pro.
98
Rysunek 3.4.
Tworzenie
nowego rysunku
w Paint Shop Pro
Wymiary obrazka
Szeroko:
J Wysoko:
Rozdzielczo:
300
;:^i
300
78,740
HM !Piksele/cm
Jednostki:
1Piksele
Charakterystyka obrazka
To rastrowe
To wektorowe
To - rodki artystyczne
Gbia kolorw:
a
a
ii
| RGB - 8 bitw/kana
Kolor:
O Przezroczysto
Wymagana pami:
432 KB
Wymiary:
Anuluj
Pomoc
99
Edycje
ffid=k
Obr.zek
fiopMOW.nie
'. LiVi> 0 f e *
'
Eiekty
'i
Wjrstwy
O tieldy
Poprew zdjcie *
P jlety -
..P o m n ie js z
m
a*
D*
W s k a n ik
S e le kcja
P ipeta
K a d ro w a n ie
C z e rw o n e oczy
V
J ' P d z e l/A e ro g ra f
** w
lii
1
t/
0*
CS
A
T e k st
? ' K s z ta ty
?
V
V '
. ..
....
100
&k
dycja
^ id o k
Obrazek
w pasow anie
Efekty
Warstwy
Obiekty
Naznaczenia
P a le ty '
O&no
Pornos
Pomniejsz
Powiksz
Materiay
rfzie fekaK
101
Plik
fcdycja
Widok
Qbrazek
Qopasowame
fc o
; ; 0 Zachowaj gy
Efekty
T -
Warstwy
tjji
. [V;Wygadzam#opiyona
Ofeiekty
Popraw zdjcie
Naznaczenia
Pjlety
Ofcno
Pomo
_ v Pomniejsz
Sarowai:
v Powiksz
Styk:
3 400 *3 |> -j 15
n a
1: .............
**
I'
Bez przezroczystoci
Ustaw warto przezroczystoci do biecego koloru ta
62
*Q
Uwaga. W iele formatw plikw (np. mapa bitowa systemu Windows) nie obsuguje
Anutui
Uwzgldnia
Pomoc
m4 .
Wszysdu#
3QQ v
mn*
{
background-color: #8080FF:
}
</style>
</head>
<body>
<img src= "kolo.g if" />
</body>
</html>
W tym opisie przy tworzeniu obrazka od razu okrelilimy palet kolorw, z ktrej
bdziemy korzysta, ale nic nie stoi na przeszkodzie, by przygotowa obrazek w wik
szej liczbie kolorw, a nastpnie dokona redukcji. Z tej metody skorzystam nastp
nym razem, wic nic si nie martw, gdy na pewno dowiesz si, co mam na myli i jak
to zrobi.
102
Przeplot
Przeplot jest kolejn bardzo ciekaw waciwoci formatu GIF. Obrazek, w ktrym
zastosowano przeplot, wczytuje si niejako fragmentami. cilej rzecz biorc, za pierw
szym przejciem zostaje wczytana co czwarta linia obrazka, dziki czemu wida oglny
zarys caoci. Z kadym nastpnym przejciem zostaj wczytane kolejne linie, dziki
czemu obrazek wyostrza si i staje bardziej czytelny. Takich przej jest cztery i dopiero
po ostatnim przebiegu obrazek wyglda idealnie.
Pamitaj, e stosowanie przeplotu powoduje zwikszenie rozmiaru obrazka, ale daje
pozorne odczucie szybszego wczytywania si strony.
Na rysunku 3.10 przedstawiono w duym uproszczeniu, jaka jest zasada wczytywania
obrazka, w ktrym zastosowano przeplot.
Rysunek 3.10.
Schem at dziaania
przeplotu
Animowany GIF
Ogromn zalet formatu GIF jest moliwo przygotowania obrazka, ktry bdzie si
porusza. Oczywicie mam tutaj na myli animacj jakiej czynnoci wewntrz, a nie
przesuwanie caego obrazka na stronie WWW. Animacja GIF-a polega na przygoto
waniu kilku klatek, a nastpnie zapisaniu ich do jednego pliku (wraz ze specjalnymi
kodami sterujcym i) i wywietlaniu jedna po drugiej. Z pewnoci kojarzy Ci si to
z klatkami filmu i takie porwnanie jest jak najbardziej trafne.
Procesem wywietlania poszczeglnych klatek steruje przegldarka i na podstawie od
powiednich kodw sterujcych zapisanych w pliku wraz z obrazkami moe uruchomi
wybrany element naszej strony.
Rysunek 3.11.
Zapisywanie obrazka
w form acie GIF
z wczonym
przeplotem
etap pierwszy
103
1; Z a p is z ja k o
Z a p isz w:
Stel
O brazy
Nazwa
Data w yko...
Tagi
0 f
Rozmiar
* Uh B
Klasyfikacja
O statnio
uywane miej...
A
P rzykadowe obrazy
P ulpit
K om pu ter
*
-'i
Sie
Nazwa pliku:
0 b raze k 2 .gif
Zapisz jako
Rysunek 3.12.
Zapisywanie obrazka
w form acie GIF
z wczonym
przeplotem
etap drugi
Opcje zapisywania
Wersja
|
OK
O Wersja 87a
Wersja 89a
Przeplot
Anuluj
Pomoc
9 Z przeplotem
C Bez przeplotu
! Uruchom optymalizator...
104
Rysunek 3.13.
Poszczeglne klatki
animacji
iS
B ?
/ *
B a ^
s
(B a r
r t ^
(B a r t ? ^
B a r t
(B a r t ^
B a r t e k
s
B a r t
B a r t e k
B a r t e k
B a r t e i ^ / ?
B a r t e
Rysunek 3.14.
Przygotowywanie
animowanego GIF-a
etap pierwszy
105
i c=> i fa i
H
u 4-| -fr j j ? j
D
Options J
+* (B e t
! gif_anim
Wykonawcy
Album
Nr
fij 15.gif
g l6 .g if
g l7 .g if
jl8 .g r f
g jl9 .g if
Nazwa pliku
(f.gri
Pliki typu
:
Utwrz
T3
Anuluj
Ready
Aby doda kolejne klatki animacji, kliknij przycisk oznaczony strzak na rysunku 3.11 0 .
W nowym oknie wska kolejn (liczc od tyu) klatk animacji i kliknij przycisk Otwrz
Czynno t powtrz dla wszystkich klatek tworzonej animacji.
Rysunek 3.15.
Przygotowywanie
animowanego GIF-a
etap drugi
ES
?l
* M e |x |
J
i
Insert
Szukaj w: j j , gjfanm
Nazwa
Wykonawcy
Album
jt] 14.gif
g l5 . g i f
jta jl6 .g if
jb jl7 .g if
18.gif
g l9 .g if
Nazwa pliku:
Pici typu:
jl8.gif
All Supported Formats
Nr
106
M ic ro s o ft GIF A n im a to r - 19 .g if *
& y
%1b [ x 1
Options
+ 1+ 1
! ?
Animation j image |
J
Frame 81
Animation Width:
13 2
Animation Height:
P?1
Image Count:
38
F!
i"~ Looping
Repeat Count:
(l
f ~ Repeat Forever
Trailing Comment:
Frame 82
<B
Frame 83
_d
Ready
Aby okreli czas trwania animacji, przejd do zakadki Image. Nastpnie kliknij przy
cisk oznaczony za pom oc strzaki na rysunku 3.17 iw polu Duration (1/100 s) ustaw
czas, jaki musi upyn pomidzy wywietlaniem kolejnych klatek animacji.
Po wprowadzeniu wszystkich ustawie przysza pora, aby zobaczy efekt naszej pracy.
W ystarczy, e klikniesz przycisk Play widoczny w gwnym oknie programu (rysu
nek 3.18). Po chwili pojawi si nowe okno, w ktrym zobaczysz przygotowan animacj.
Jeeli chcesz wprowadzi jakie zmiany, zamknij okno podgldu (kliknij znak x w pra
wym grnym rogu). Nastpnie nanie odpowiednie korekty i ponownie sprawd efekt.
Aby zapisa gotowy obrazek, kliknij ikon symbolizujc dyskietk (rysunek 3.19),
a nastpnie w nowym oknie w polu Nazwa pliku wpisz nazw i kliknij przycisk Zapisz.
Sam proces publikacji na stronie nie rni si niczym od wstawiania zwyczajnego ob
razka. Dalej zamieszczam przykad wstawienia mojej animacji do kodu strony.
<img src="przyklad.gif" alt="ciekawa animacja" />
Rysunek 3.17.
Przygotowywanie
animowanego GIF-a
etap czwarty
107
y U la l _
a lB lT H Pl
Options j Animation
!? !
Image j
Image Width:
j376
Image Height:
|171
Left:
Frame 81
Top:
[o-
JLeave
Frame 82
Transparency
Traraparent Color:
Comment.
Frame 83
Ready
108
Rysunek 3.19.
Przygotowywanie
animowanego GIF-a
etap szsty
d|b|h1
e lx |
Options j Animation
H ?1
Image j
Z a pisyw an ie ja k o
Nazwa
Wykonawcy
_) - ey m Nr
6 jl.g if
@ 2.gif
ibj3.gif
jbj4.gif
Frame #2
jta'; 5.gif
to 6.aif
Nazwa pliku:
[przykad gif
Zapisz jako
jcompuserve (*gif)
ty p
j^^Zapisz j
3
Anuluj
Frame #3
Ready
Rysunek 3.20.
Rczna redukcja
kolorw palety
dla obrazkw
zapisywanych
w form acie GIF
1 09
r Podgld
Powikszenie:
100 H i l
f g j ]
Chwyt
j +
Ustawienia
Paleta
Opcje
Liczba kolorw:
[ : 0
Zoptymalizowane przecicie mediano we
Standardowa/D o publikacji w Internecie
Metoda redukcji
# Najbliszy kolor
Dyfuzja bdw
OK
"
j i
Anuluj
; 1
Pomoc
110
Jeeli nadal masz wraenie, e co jest nie tak, kliknij kursorem myszy przycisk Uyj
kreatora, ktry znajduje si w lewym dolnym naroniku okna widocznego na ry
sunku 3.21. Ten kreator poprowadzi Ci krok po kroku przez cay proces optymalizacji.
Rysunek 3.21.
Narzdzie
do optymalizacji
plikw GIF
Podgld
Przed:
a
Powikszenie:
.J -0
[ jjg
chwyt:
[ * ]
Ostatnio uywane
Czas pobierania
i | j ^ \ JJzyj kreatora
T olerancja
OK
| [
Anuluj
[_
Pomoc
JPG
Drugim formatem uywanym do publikacji grafiki na stronie WWW jest JPG. Format
ten zosta wprowadzony przez Joint Photographic Experts Group. Kompresja w przy
padku JPG wyglda zupenie inaczej, ni to miao miejsce z GIF. Na samym pocztku
zostaje utworzony obraz czarno-biay i oddzielnie s przechowywane informacje o ko
lorach. Nastpnie zostaje dokonana analiza i z informacji o kolorach program usuwa
pewne subtelne rnice, ktre nie s widoczne dla ludzkiego oka.
Format JPG pozwala regulowa stopie kompresji, dziki czemu grafik ma wpyw na
kocowy rozmiar ilustracji. Niestety, w tym przypadku wraz ze wzrostem kompresji
nastpuje spadek jakoci grafiki czy zdjcia. Innym sowy, kompresja JPG jest kom
presj stratn. Stopie kompresji moe wynosi nawet 1:100, jednak zazwyczaj powy
ej 1:30 jako obrazu ulega widocznemu pogorszeniu.
111
Opcje zapisywania
Kodowanie
Typ
: Kodowanie standardowe
Kompresja
Wspczynnik kompresji:
20
Najnisza kompresja,
najwysza jako
Podprbkowanie chromatyczne:
Najwysza kompresja,
najnisza jako
Profil ICC
H ] Osad profil ICC:
sRGB Color Space Profile
OK
Anului
Pomoc
Uruchom optymalizator.
1 12
Ustawienia
Format I C i pobierania
Podprbkowanie chromatyczne:
20
Mz kreatora
OK
Anuluj
Pomoc
113
PNG
Trzecim i jak na razie ostatnim popularnym formatem publikacji grafiki rastrowej
na stronie WWW jest PNG (Portable N etwork Graphics). Rozwizanie to powstao
w chwili, gdy waciciel praw patentowych do kompresji zastosowanej w formacie GIF
zacz pobiera opaty licencyjne za uywanie tego rozwizania. PNG opiera si na
oglnie dostpnych darmowych algorytmach kompresji, dziki czemu nie bdzie nigdy
koniecznoci opacania jakichkolwiek licencji.
Do podstawowych zalet tego formatu moemy zaliczy:
obsug palety do 48 bitw w kolorze oraz 16 w odcieniach szaroci,
moliwo okrelania przezroczystoci,
obsug korekcji gamma,
obsug trybu progresywnego,
bardzo efektywn i bezstratn kompresj.
Obsuga formatu PNG przez gwne przegldarki zacza si ju od wersji 4 i z chwil
pojawiania si nowszych przegldarek wyglda znacznie lepiej, jednak nadal nie jest
idealna.
Format PNG jest obsugiwany przez Paint Shop Pro. W menu Plik/Eksportuj znajduje
si specjalne narzdzie Optymalizuj pliki PNG, dziki ktremu moesz przygotowa
swoje pliki w tym formacie. Praca z tym narzdziem w zasadzie niczym nie rni si
od wykorzystania dwch podobnych kreatorw opisanych przy okazji formatw JPG
oraz GIF, dlatego nie widz koniecznoci prezentowania po raz kolejny podobnych
moliwoci; proponuj natomiast, by zapozna si z moliwociami PNG we wasnym
zakresie, gdy format ten z ca pewnoci zajmie miejsce poczciwego GIF.
114
ich skalowania; teraz dowiesz si, jak zmniejszy fizyczny rozmiar obrazka, a co za
tym idzie pliku. Jako przykad znowu posuy nam zdjcie, nad ktrym pracowa
em przy okazji omawiania formatu JPG i kompresji.
Oryginalny rozmiar tego zdjcia wynosi 1792x1200 pikseli. Informacje te mona
uzyska dziki opcji Obrazek/Informacje o obrazku (rysunek 3.24).
Rysunek 3.24.
Odczytywanie
informacji
na tem at obrazka
Typ pliku:
JPEG
Obrazek
Stan
1792 x 1200 piksele
Zmodyfikowano:
Nie
227.584 x 152.400 mm
Ma zaznaczenie:
Nie
Wymiary:
Piksele na cm:
G bia pikseli/kolorw:
Wykorzystanie pamici
78.740
RG B-8
Liczba warstw:
W pamici RAM
Na dysku
126K
6300K
Cofnij:
OK
OK
cznie:
OK
G300K
Obrazek:
Pami podrczna obrazkw:
OK
OK
Anulu
; !
Pomoc
115
Rysunek 3.25.
Zmiana rozmiaru
grafiki lub zdjcia
Wymiary oryginalne
Szeroko:
Wysoko:
Wysoko:
v Q
00
Ci ]
Rozmiar wydruku
Szeroko:
[ Milimetry
Piksele/centymetr
Dwuszeciennie
[5*1Zablokuj proporcje:
-rfr]
j 1,4933
do 1
Anuluj
Pomoc
116
Bardzo czsto bywa tak, e fotografie, jakie mamy do publikacji na stronie, zostay
wykonane w rozdzielczoci znacznie wikszej ni 72 dpi. Dlatego zanim opublikujesz
obrazek, musisz sprawdzi jego waciwoci i w razie potrzeby zredukowa rozdziel
czo. Do redukcji rozdzielczoci posuy nam to samo okno, za pomoc ktrego zmie
nialimy wymiary obrazka. Niezbdna opcja znajduje si w sekcji Rozmiar wydruku
mam tutaj ma myli pole Rozdzielczo. W ystarczy, e w tym polu zmienisz roz
dzielczo na 72 dpi i po klikniciu kursorem m yszy przycisku OK zostanie ona
zmieniona.
1 17
1 18
Uwaga
Edycja
Widok
Obrazek
Dopasowanie
Efekty
Wrstt
Na przykadzie wida, e program doda trzy odcienie koloru zielonego, dziki czemu
cae koo wydaje si idealnie gadkie. Dalej zamieszczam dokadne numery poszcze
glnych kolorw, by m ia moliwo zauwaenia rnicy na czarno-biaym rysunku.
kolor koa #00C000,
pierwsza barwa przejciowa #37CE37,
druga barwa przejciowa #9EE79E,
trzecia barwa przejciowa #E0F7E0.
119
Rysunek 3.29 przedstawia gotowe koo narysowane przy uyciu opcji antyaliasingu.
Rysunek 3.29.
Widok kola
z wczonym
wygadzaniem
120
Rysunek 3.31.
P rzykad obrazka
z gadkimi krawdziami
bez dodatkowej
obwdki
121
Rysunek 3.32.
Tworzenie przycisku
etap pierwszy
^ Wysoko:
Rozdzielczo:
\300
j 78,740
Charakterystyka obrazka
%To rastrowe
To wektorowe
To - rodki artystyczne
Gbia kolorw:
| RGB - 8 bitw/kana
Kolor:
O Przezroczysto
Wymagana pami:
432 KB
Wymiary:
j Anulu)
| Pomoc
122
Rysunek 3 .3 3 .
Tworzenie przycisku
etap drugi
Plik
U
Edycja
W ido k
Obrazek
d op aso w a n ie
E j
''
Efekty
l
Tryb:
U Jjte ll
li
i i i Ii
U I.fm 1 1u n I m
O biekty
Zaznaczeni.
P opraw zdjcie -
.- : i - :
Zaokrglony prostokt
I 1 JJUL U i J j S U W
W arstw y
Q
Palety
j Wygadzanie optyczni
Plik
U
Edycja
I
Wfidok
J
ib
fibrazek
r 4
lO
dopasowanie
'
Efekty
'
Warstwy
O
Ofaiekty
Zaznaczenia
Po pra w z d j c ie *
P a le t / -
Ofcno
.
Pornos
Po m niejsz
Pow iksz
Utwrz z * E N * a *n * zi
t. aby doda
(x:299y:172)
Udao nam si przygotowa zarys przycisku i teraz pora zaj si jego wypenieniem.
W tym celu skorzystamy z ikony wiaderka, odpowiedzialnej za wypenienie naszej
selekcji wybranym kolorem. Po wczeniu wypenienia musisz na pasku koloru z pra
wej strony wybra odpowiedni kolor, np. zielony. Nastpnie powiniene nakierowa
kursor myszy nad zaznaczony obszar i klikn lewy przycisk myszy.
123
Wygld przycisku
Podgld
1 0 P o d g ld na o brazku
Przed:
Po:
P ow ikszenie:
W y so k o :
10
K ra w d
!
P rzezro czyste
O stre
Sze ro ko:
Anuluj
Kolor:
Pom oc
124
lik
j
dycja
L ) ^
ffiidok
G
&
Qbrazek
^
dopasowanie
tu
Efekty
Warstwy
^ *kM
Obiekty
Popraw zdjcie
aznaczenia
Palety *
Ojjno
Pom o j
_ v Pomniejsz
Powiksz
m.
[yiWyk nanSt*
N i n y a t a rn a tte n ie - Klirnij i przecignij, aby- zazn aczy Oyj klaw isza S h ift abv do d a d o istniejceg o zaznaczenia lu b klaw isza C
1 25
Elik
dycja
^idok
Obrazek
dopasowanie
Efekty
Warstwy
Ofetekty
P o pra w zdjcie *
Naznaczenia
Ofcno
Pomo&
Plety
Pow iksz
Sjenwcsc go o g m t :
utwn )ta
; 4
! Wenowwe
y Q
[ Wprowadzania tekstu
Cennik
b n z e k S X * 3 0 0 x RGB -
126
a ,a r
lik
dycja
& id o k
U S }
Qbrazek
^
fiopasowame
Efekty
* **
Wjrstwy
II
Ofciekty
aznaczema
Eopraw zdjcie *
Pjlety -
OJtno
P om o i
i. , Pomniejsz
Prawo:
O rt
-0 J1 . :l' '
.* s
r
f r i | 5 y T 57j
( R 75P>.G:255 B
B X
Powiksz
- O brazek: 300 * 3(
4 o
x RGB - 8 b f t w /k a n a . ' :
\
Uwaga
Pamitaj, e zapisujc przycisk do formatu JPG, GIF lub PNG, tracisz informacje
o warstwach i dlatego koniecznie zachowaj kopi przycisku w macierzystym formacie
programu Paint Shop Pro o nazwie PSP.
1 27
I0HE
& i Corel Paint Shop Pro Photo XI - [Obrazek4* 250% (Wektorowa 1})
>
lik
l
dycja
J
#idok
Qbrazek
C>
dopasowanie
Wjrstwy
<?
Ofeiekty
Naznaczenia
Popraw zdjcie
Ronntm
.
J im ln u
Efekty
jf.nostk'n
Styl aonfei:
Wyrwna!
, .w.. b / u - i i
TsiaBmi
Palety *
Kieruneki V
J-
............................
1!
Oferta
tekst
^ a r z g d a e Tefcsk t fc n i ;ig o b ie k tu w
t e ks t u n a c ie f c e
y :t^ -
- 8 b it v ^ k a n a
Rysunek 3 .4 1 .
Przykad drugiego
przycisku
128
129
130
Pocity obrazek na stronie jest publikowany w tabeli, dla ktrej okrela si dokadny
rozmiar oraz wycza obramowanie i odstpy pomidzy komrkami, tak by wszystkie
czci ukadanki idealnie do siebie pasoway.
Przygotowanie pocitej grafiki bez specjalnych narzdzi jest rzecz do skompliko
w an i wymaga niesamowitej wrcz precyzji, dlatego wiele firm dostrzego potrzeb
przygotowania specjalnych programw, ktre zajm si krojeniem obrazw. W tej
ksice skorzystamy z dodatku, jaki znajduje si w programie Paint Shop Pro. Program
ten poza tym, e tnie obrazki, moe rwnie przygotowa odpowiedni kod tabeli wraz
z obrazkami, ktry nastpnie moemy wklei do naszej strony.
Po otwarciu obrazka z menu Plik/Eksportuj powiniene wybra opcj Kreator kawako
wania obrazka. W oknie widocznym na rysunku 3.45 pojawi si obrazek, ktry bdziemy
ci na mniejsze kawaki.
Rysunek 3.45.
Cicie obrazka
na kawaki
etap pierw szy
X:
Przejcia
WaciwoscH^omorkT
Kreator ptze|..
Adres URL: http://danowski.pl
'r
zastpczy:
'r
Bartosz Danowski
JPEG
Cel:
Lewo:
| Optymalizuj komrk...
Gra:
113
Dk
1124
Zapisz ustawienia...
Prawo:
1652
I Zapisz w schowku
Zapisz tako.
Pomoc
[ Zagaduj ustawienia...
Wyczy
Prefeienqe
Zamkmi
131
132
Mapa odsyaczy
Przy okazji opisywania graficznych odsyaczy w rozdziale pierwszym wspomniaem
o tym, jak tworzymy mapy odsyaczy. Przedstawiony tam opis bazowa na pracy z ko
dem oraz ogldaniem obrazka w programie graficznym, natomiast teraz opisz znacznie
prostsz i wygodniejsz metod.
Uywany przeze mnie w tej ksice Paint Shop Pro w menu Plik/Eksportuj zawiera na
rzdzie o nazwie Kreator mapy obrazka.
Narzdzie to jest bardzo podobne do Kreatora kawakowania obrazka, dlatego opisz je
jedynie w skrtowej formie. Na grze znajduje si zdjcie, ktre ma by m ap odsy
aczy. Wystarczy, e z paska ikon w tym oknie wybierzesz odpowiedni ksztat, ktry
chcesz zaznaczy, i na rysunku naniesiesz waciwe obszary. Do wyboru masz koo,
prostokt oraz obszar dowolny. Rysowanie aktywnych obszarw ogranicza si jedynie
do kliknicia m ysz rysunku i narysowania koa lub prostokta w taki sam sposb, jak
to robie w program ie Paint Shop Pro. N ieco inaczej wyglda oznaczenie obszaru
0 nieregularnych ksztatach. W tym przypadku klikasz pierwszy punkt na rysunku
1 zwalniasz przycisk myszy, nastpnie przesuwasz mysz w nastpny punkt i ponownie
klikasz lewym przyciskiem myszy. Czynno powtarzasz tak dugo, a oznaczysz cay
obszar. Ostatnie kliknicie powinno skoczy si w miejscu, z ktrego rozpoczynae.
Po narysowaniu wszystkich aktywnych obszarw pora doda odsyacz; w tym celu za
pom oc ikony strzaki klikasz wybrany obszar, tak by zosta on wyrniony kolorem
zielonym, a w polu Adres URL wpisujesz adres, do ktrego ma prowadzi hipercze.
Do kadego odnonika moesz doda alternatywny tekst.
Zapis obrazka na dysku niczym nie rni si od analogicznej czynnoci, ktr opisa
em przy okazji omawiania narzdzia Kreatora kawakowania obrazka.
Uywajc opisanego narzdzia, w prosty i szybki sposb stworzysz bardzo skompli
kowane mapy odsyaczy, wkadajc w to minimum pracy; dlatego warto, by sign
po rozszerzenia programu Paint Shop Pro, ktry jak ju miae okazj si przekona
jest rozwizaniem przeznaczonym dla twrcw stron WWW.
Rozdzia 4.
Kaskadowe
arkusze stylw
Piszc o jzyku XHTML lub HTML 4.01, nie sposb pomin kaskadowe arkusze
stylw. Waciwie bez CSS nie da si obecnie zrobi ciekawie wygldajcej strony,
ktra do tego jeszcze byaby zgodna ze specyfikacj wymienionych jzykw.
Na pocztku wyjanijmy sobie, czym s owe kaskadowe arkusze stylw. Pojcie to
pojawiao si w drugim rozdziale prawie na kadej stronie, ale nie zostao dokadnie
omwione. Od wersji HTML 3.2 wprowadzono pewne innowacje w strukturze jzyka
i zaczto zastpowa cz znacznikw innymi. Nowe znaczniki nazwano kaskadowy
mi arkuszami stylw i sukcesywnie je rozbudowywano. Obecnie najnowsza specyfika
cja CSS nosi numer 2.1. Prowadzone s rwnie prace nad jej trzeci odson.
Dziki stylom moemy mie pen kontrol nad formatowaniem dokumentu. Do tej
pory adne z polece jzyka XHTML czy HTML nie pozwalao nam na regulowanie
odstpw pomidzy blokami oraz nakadanie ich na siebie. Warto wspomnie o tym,
e style umoliwiaj kontrol ta poszczeglnych czci dokumentu, waciwoci czcio
nek zastosowanych na stronie, tabel, formularzy itp.
Kaskadowe arkusze stylw, w skrcie CSS, moemy okreli jako narzdzie do forma
towania wygldu dokumentw. N atom iast za pom oc samych stylw nie moemy
stworzy strony. Podobnie jak jzyk XHTML i HTML, kaskadowe arkusze stylw s
standaryzowane przez W3 i tam naley szuka odpowiedniej specyfikacji.
Uwaga
13 4
Jeeli bdziesz chcia pogbi swoj wiedz z zakresu kaskadowych arkuszy stylw,
polecam kilka tytuw z oferty wydawnictwa Helion http://helion.pl.
CSS wedug Erica Meyera. Sztuka projektowania stron WW W http://helion.pl/
ksiki/csswww. htm
CSS wedug Erica Meyera. Kolejna odsona http://helion.pl/ksiazki/cssods.htm
Zen stosowania CSS. rdo owiecenia dla projektantw stron WWW
http://helion.pl/ksiazki/zencss.htm
CSS. Antologia. 101 wskazwek i trikw http://helion.pl/ksiazki/cssant.htm
Wprowadzenie
Zanim przejdziem y do poznawania kolejnych stylw oraz oferowanych przez nie
moliwoci, niezbdne s podstawy. Dziki temu podrozdziaowi dowiesz si najwa
niejszych rzeczy, bez ktrych nie mona rozpoczyna pracy nad stron WWW, majc
wykorzystywa potg kaskadowych arkuszy stylw.
Teraz sprawdz, w jaki sposb ten sam akapit moe by poddany formatowaniu za
pom oc CSS.
<head>
<stye type="text/css">
P
{
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<f>>Tekst akapitu</p>
</body>
</html>
Listing ten jest przykadem arkusza stylw osadzonego w nagwku dokumentu. Zwr
uwag, e midzy znacznikami <style></style> znajduje si szereg polece, nadajcych
wygld akapitowi. Na moim przykadzie jest to kolor zielony oraz czcionka Arial.
135
Akurat ten przykad w stosunku do zapisu w czystym jzyku HTML (XHTML) nie
oszczdza cennych bajtw w kodzie strony, a wrcz produkuje ich znacznie wicej.
Jednak wyobra sobie, e dokument ma pi akapitw o identycznym wygldzie. W ta
kim przypadku czysty HTML (XHTML) musiaby powtarza formatowanie dla kadego
akapitu oddzielnie, natomiast CSS w postaci powyszego listingu zajmuje si komplek
sowo wszystkimi akapitami. Dopiero teraz rozumiesz, ile mona zaoszczdzi i ja k
atwo zmieni wygld wszystkich akapitw.
136
<style type="text/css">
P
{
color:green:
font-family:Arial:
}
</style>
</head>
<body>
<p>Przykadowy blok tekstu.</p>
</body>
</html>
Style wewntrzne zarwno lokalne, jak i zagniedone poza zaletami maj rw
nie do powane wady. Wemy jako przykad rozbudowany serwis, np. portal Onet.pl,
na ktry skadaj si setki lub tysice podstron. Kada z nich jest formatowana w po
dobny sposb i wykorzystuje ten sam zestaw stylw. W takim przypadku style lokalne
odpadaj, a zagniedanie definicji w nagwki <head></head> rwnie nie jest naj
lepszym pomysem. Na szczcie istnieje jeszcze trzecia moliwo styl zewntrzny
ktra opiera si na znaczniku <1 i nk />, umieszczanym bezporednio w nagwku
strony, dziki czemu taki arkusz rwnie dziaa na cay dokument. Znacznik ten po
zwala na podczenie zewntrznego arkusza stylw. Odpowiedni wpis ma nastpu
j c posta:
<?xml version="1.0" encoding*"IS0-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N "
"h ttp : / /www.w3.org/TR/xhtml 1/DTD/xhtml 1- s tr i c t .dtd">
<html xmlns*"http://www.w3.org/1999/xhtml" xml:lang=p l>
<head>
<meta http-equiv*"content-type content="text/html;charset=IS0-8859-2" />
<title>Bartosz Danowski - strona domowa</title>
<1 ink rel="Stylesheet" href="style.css" type="text/css" />
</head>
<body>
<p>Przykadowy blok tekstu</p>
</body>
</html>
{
c o lo r:green:
fo nt-fam ily A r i a l :
137
Zewntrzny arkusz powinien by zapisany w pliku o dowolnej nazwie, ktra nie zawiera
polskich znakw. Taki dokument bezwzgldnie musi posiada rozszerzenie zgodne ze
wzorem nazwa-pliku.css.
\
Uwaga
Specyfikacja CSS daje nam jeszcze moliwo zaimportowania arkusza z innej stro
ny oraz zdefiniowania kilku zewntrznych arkuszy dla tej samej strony. Rozwizania
te na tym etapie nie s Ci potrzebne. Dlatego zdecydowaem si jedynie o nich
wspomnie w formie uwagi.
Jednostki wzgldne
px piksele
p {margin-1e f t : 20px: }
Zasada dziaania tej jednostki jest stosunkowo prosta i polega na okrelaniu zaleno
ci pomidzy poszczeglnymi wielkociami. Jeeli zdefiniujem y dom yln czcion
k o wielkoci 12 punktw, to bdzie ona rwna 1 em. Przyjrzyj si poniszemu
przykadowi:
/'*Definicja stylw */
{
font-Si ze: 12pt:
margin-1eft: 2em:
1 38
Powyej zdefiniowaem wielko czcionki 12pt dla bloku tekstu. Nastpnie za pomoc
kolejnego polecenia ustawiem lewy margines jako 2em. W tym przypadku lewy mar
gines bdzie rwna si 24pt.
ex proporcje do wysokoci litery x
p {m argin-left: 2ex:}
Jednostki bezwzgldne
in cale
p {m argin-left: 2 in ;}
Podobnie jak punkt jest jednostk typograficzn. Jedna pica rwna si 12 punktom.
139
{
color: red;
}
Niestety, nazwy zostay przypisane jedynie kilkunastu podstawowym barwom (patrz
tabela 4.1) i jeeli chciaby uy innej, musisz skorzysta z odmiennej formy. Zapis
w postaci RGB moe przybiera nastpujc posta:
di v
{
color: rgb(255.0.0):
}
Tabela 4.1. Wybrane kolory, wchodzce w skad bezpiecznej palety 216 barw, z przypisanym i nazwami
Nazwa koloru
Zapis szesnastkowy
Black
#000000
Silver
#cococo
Gray
#808080
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
1 40
di v
{
color: rgb(100X,0,0$);
}
Kolejnym sposobem zapisu barw jest m etoda szesnastkowa, bdca dokadnie tym
samym, co zapis szesnastkowy, doskonale znany wszystkim, ktrzy mieli do czynienia
z komputerami.
di v
{
color: #FF0000;
}
Podane przeze mnie przykady za kadym razem okrelay kolor czerwony.
Uwaga
Opis i przykad
Window
Windowframe
Wi ndowtext
ThreeDLightShadow
ThreeDDarkShadow
ThreeDFace
ThreeDHighlight
ActiveCaption
BODY (background-color:window;}
BODY (background-color:windowframe:}
P {color:w indowtext;}
BODY{backgroud-color:ThreeDLightShadow:}
BODY{backgroud-colo r:ThreeDFace:}
BODY{backgroud-colo r :ThreeDHighli g h t; }
P{color:ActiveCaption;}
InactiveCaption
Tabela 4.2. Podstawowe kolory systemowe, z ktrych moemy skorzysta w CSS2 (cig dalszy)
W arto
Opis i przykad
ActiveBorder
AppWorkspace
ButtonFace
ButtonHighlight
P{color:ActiveBorder:}
P{co1or:AppWorkspace:}
P{color:ButtonFace:}
ButtonText
CaptionText
GrayText
Highlight
HighlightText
InfoBackground
InfoText
Pjcolor:InfoBackground;}
MenuText
Scrollbar
ThreeDDarkShadow
141
142
Budowa stylu
Oglny schemat konstrukcji stylu wyglda nastpujco:
selektor {cecha: warto: cecha: warto: e tc .:}
V
Uwaga
Warto zazwyczaj jest przypisana do danej cechy; bardzo czsto jednak bywa tak, e
moe ona by podobna do kilku zupenie rnych cech. Poniej zamieciem praktycz
ny przykad stylu.
P
{
color: green;
font-size : 14px;
'
Selektory
Pojcie selektora, o ktrym kilka razy ju wspominaem, jest jednym z najwaniej
szych elementw skadowych CSS. To wanie dziki selektorowi moemy przypisa
konkretny styl dla wybranego elementu. Selektory wykorzystywane podczas tworze
nia wasnych arkuszy stylw m og przybiera rne formy. Specyfikacja przewiduje
wykorzystanie nastpujcych ich rodzajw:
143
selektory proste,
selektory uniwersalne,
selektory potomka,
selektory dziecka,
selektory rodzestwa.
Selektory proste
Konstrukcja stylu wykorzystujcego selektor prosty nie naley do zbyt skomplikowa
nych i wyglda tak, jak na poniszym przykadzie.
P
{
c o lo r:red:
font-size:14pt:
}
Jak widzisz, selektorem jest znacznik jzyka HTML (XHTML) przypisany do elemen
tu, ktry chcesz w danym momencie formatowa. Styl zdefiniowany dla przykado
wego selektora p bdzie odnosi si wycznie do akapitw zamknitych w znacznik
< p x /p > i nie bdzie wpywa na pozostae elementy strony WWW.
Selektory uniwersalne
Styl zaprezentowany poniej jest przykadem selektora prostego i odnosi si tylko do
elementw zamknitych pomidzy znacznikami <p></p>.
P
{
c o lo r:red:
font-size:14pt:
}
W zwizku z tym wszystkie inne elementy, np. nagwki czy tabele, nadal bd for
matowane w sposb domylny. Oczywicie, sytuacja taka jest zupenie poprawna i dziki
temu praca z CSS jest bardzo prosta i przyjemna. Jeden wpis i mamy zaatwione wszyst
kie akapity - to jest to!
Zdarza si jednak, e zachodzi potrzeba zdefiniowania jakiego typu formatowania w ten
sposb, aby zadziaa on na cay dokument. Bardzo dobrym przykadem tego moe
by to, ktre zazwyczaj powinno by identyczne dla caego dokumentu. Odpowiedni
styl moe przyj nastpujc posta:
{
background-color:whi t e :
144
Warto zwrci uwag na to, e selektorem jest gwiazdka. Symbol ten jest spotykany
przy listowaniu zawartoci folderw czy te zakadaniu filtrw.
d ir * . t x t
copy * . * c:\temp
{
colorrred;
}
ul
{
color:red;
}
hl
{
color:red;
}
Definiowanie w ten sposb waciwoci wszystkich elementw mija si z celem, po
niewa jest bardzo pracochonne. Na szczcie uywajc selektora uniwersalnego, ope
racj t mona znacznie uproci, a cay arkusz skrci do jednego wpisu. Przykad
widoczny poniej pozwala na uzyskanie identycznego efektu jak we wczeniejszym
listingu.
{
color:red;
}
Innym selektorem uniwersalnym jest body.
body
{
color:red;
}
Uniwersalno body wynika z jego roli w hierarchii dokumentu. Dokadnie chodzi tu
o funkcj dziedziczenia pewnych wartoci ze znacznikw stojcych wyej.
Uwaga
145
Selektory potomka
W przypadku selektora potomka najlepszym rozwizaniem jest rozpoczcie jego oma
wiania od konkretnego przykadu. Dziki temu dziaanie tej konstrukcji powinno by
znacznie bardziej zrozumiae.
Przykadowy styl dla nagwka stopnia pierw szego wyglda tak jak w poniszym
przykadzie:
hl
{
font-size:20pt:
}
Jeeli chcemy, aby jaki fragment tego nagwka by sformatowany wedug innych za
sad, to naley arkusz uzupeni o nastpujc konstrukcj:
hl span
{
font-size:10pt;
}
Kod strony mogcy skorzysta z selektora potomka bdzie wyglda nastpujco:
<hl>Nagwek stopnia pierwszego</hl>
<hl>Nagwek stopnia pierwszego <span>w ktrym zastosowaem selektor potomka</span></hl>
{
font-size:14pt;
}
p span
{
fo n t-s ty le :i t a l i c :
font-size:20pt:
}
Przykadowy kod strony wykorzystujcej selektor potomka zadeklarowany powyej
moe przybra nastpujc form:
<p>Przykadowy kod HTML wykorzystujcy <span>selektor potomka</span> zadeklarowany
powyej moe przybra nastpujc posta.</p>
Rwnie tym razem efekt dziaania selektora potomka zobaczymy tylko dla tej czci
akapitu, ktra dodatkowo jest zamknita w znacznik <span></span>.
146
Selektory dziecka
Selektory dziecka s wynikiem zalenoci panujcych pomidzy poszczeglnymi znacz
nikami jzyka HTML. Przykad opisanego selektora znajduje si poniej.
p > span
{
font - s ty l e :i ta 1i c :
text-decorati on:underli ne;
}
Dany styl zadziaa, gdy wewntrz bloku tekstu zostanie umieszczony znacznik <span>
</span>.
<p>Dowolny tekst, w ktrym wida efekt dziaania <span>selektora dziecka</span>.</p>
W tym przypadku <span></ span > jest dzieckiem <p></p> i tylko w takiej sytuacji zo
stanie odpowiednio sformatowany. Jeeli rozbudujemy powyszy przykad o nastpne
linie, zgodnie z poniszym listingiem, to formatowaniu zostanie poddany tylko tekst
znajdujcy si wewntrz znacznika <span></span>, ktry z kolei ograniczony jest przez
<p></p>, natom iast inne elementy, niebdce dziemi <p></p>, pomimo e rwnie
zamknite s w <span></span>, pozostan bez zmian.
<p>Dowolny tekst, w ktrym wida efekt dziaania <span>selektora dziecka</span>.</p>
<span>Tekst zamknity wewntrz znacznika span, ktry nie je s t formatowany za pomoc
selektora dziecka.< /span>
Selektor dziecka nie jest poprawnie obsugiw any przez przegldark MS Internet
Explorer.
Selektory rodzestwa
Rwnie w przypadku tego typu selektorw opieramy si na zalenociach obowi
zujcych w jzyku HTML (XHTML). N a podstawie tego rodzaju selektora moemy
przypisa styl elementowi bezporednio ssiadujcemu z innymi. By warunek zosta
speniony, oba selektory m usz mie wsplnego rodzica. Przykadem moe by po
niszy listing.
p + span
{
fo n t- s ty le :ita lic ;
text-decorati on:underli ne;
}
Zgodnie z tym, co napisaem powyej, znaczniki <p></p> oraz <span></span> musz
ze sob ssiadowa.
<div>
<p>To jest tekst akapitu.</p> <span>A tutaj dziaa selektor rodzestwa.</span>
147
Selektor atrybutu
Niemal kady znacznik jzyka HTML (XHTML) moe by uzupeniony o atrybuty
przypisane do niego przez specyfikacj, np.
<hl t it le = czerwony">Nagwek stopnia pierwszego</hl>
Dziki kolejnej osonie specyfikacji CSS moemy tak skonstruowa selektor, aby od
nosi si on do konkretnego znacznika i jego atrybutu. Rozwizanie to nosi nazw
selektora atrybutu.
Przykad arkusza stylw:
h l[title ]
{
col or : red ;
}
Przykad kodu HTML:
<hl title="czarny">Pierwszy nagwek z atrybutem</hl>
<hl title="czerwony">Drugi nagwek z atrybutem</hl>
<hl>Trzeci nagwek bez atrybutw</hl>
{
c o lo r:red:
}
Przykad kodu HTML:
<hl title = "cza rn y>Pierwszy nagwek z atrybutem</hl>
<hl title="czerwony">Drugi nagwek z atrybutem</hl>
<hl>Trzeci nagwek bez atrybutw</hl>
1 48
Atrybut selektora jest poprawnie obsugiwany przez nowe wersje przegldarki Mozilla
Firefox oraz Opery. Uytkownicy starszych przegldarek oraz MS Internet Explorera
musz obej si smakiem.
Identyfikatory
Dotychczas opisane selektory pozwalay na przypisanie danego formatowania wszyst
kim elementom odpowiadajcym uytemu selektorowi. Przykadowy styl zamieszczony
poniej okrela, i wszystkie akapity powinny zosta sformatowane za pomoc czcionki
o kolorze zielonym i wysokoci 14pt.
P
{
color:green;
fo n t- si ze : 14pt;
}
Twrcy kaskadowych arkuszy stylw od samego pocztku dostrzegli konieczno zr
nicowania podobnych elementw, w efekcie czego wprowadzili identyfikator id.
Zasada dziaania identyfikatora, co wida na poniszym przykadzie, jest stosunko
wo prosta.
P
{
color:green:
font-size:14pt:
}
fpochyly
{
fo n t-s ty le :ita 1 iC ;
font-size:20pt;
}
Odpowiedni wpis skada si z selektora, do ktrego planujemy przypisa identyfikator,
oraz z nazwy poprzedzonej znakiem #. Wywoanie tak przygotowanego identyfikatora
ma nastpujc posta:
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<p id="pochyly">Blok tekstu o kolorze zielonym i czcionce 20pt</p>
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
{
color:red:
149
Klasy
Klasy s kolejnym podstawowym pojciem w kaskadowych arkuszach stylw. Budowa
klasy ma nastpujc posta:
selektor.nazwak1asy
{
font-size:12 pt:
color:green:
}
Zwr uwag na wystpowanie kropki po selektorze lub przed nazw klasy. Jest to
element obowizkowy i bez niego dalsza praca nie miaaby wikszego sensu.
Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa moe zosta uyta
tylko w tym selektorze, do ktrego zostaa przypisana, np.:
p.moja
{
color:green:
font-size:14pt;
}
Powinna zosta wywoana w znaczniku <p></p> w nastpujcy sposb:
<p cass=moja>7re.i akapitu</ p>
{
color:red:
font-size:12pt;
fo n t-s ty le n ta lic ;
}
Wywoanie tak okrelonej klasy rwnie odbywa si za pom oc atrybutu class.
<p cass="mja">Przykad akapitu z okrelon klas</p>
<hl class=moja >Przyklad nagwka z okrelon klas</hl>
150
{
fo n t-si ze: 14pt;
color:green;
}
.moja
{
fo n t-s ty e : i ta l i c ;
font-size:20pt:
c o lo r:red;
}
Przykadowy kod strony;
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<p class="moja>Blok tekstu, w ktrym uyem klasy o nazwie .moja</p>
<p>Blok tekstu o kolorze zielonym i czcionce 14pt</p>
<ol class="moja">
<1i> l i s ta , w ktrej uyem klasy o nazwie .moja</li>
<1 i >1 i sta . w ktrej uyem klasy o nazwie ,moja</1i>
</ol>
Pseudoklasy
Specyfikacja CSS przewiduje kilka cile okrelonych klas, pozwalajcych na formato
wanie niektrych elementw dokumentu. Do najpopularniejszych z ca pewnoci
zaliczaj si pseudoklasy odsyaczy.
a :lin k
{
c o lo r:red;
}
a :visite d
{
color:green;
}
Szalenie istotnym elementem w tej konstrukcji jest dwukropek, wystpujcy pomidzy
selektorem a nazw klasy.
Pierwsza z prezentowanych pseudoklas, a : 1i nk, odpowiada za wygld hipercza, jeeli
nie zostao ono jeszcze odwiedzone. Przykadowa definicja sformatuje odnonik za po
moc koloru czerwonego.
151
Uwaga
Pseudoklasa a:hover nie jest obsugiwana przez stare wersje przegldarki Netscape
Navigator. Ignoruj one jej dziaanie i elem ent nie zmienia formatowania po naje
chaniu na niego kursorem myszy. Oczywicie, mona j stosowa, gdy nie ma ona
wpywu na sam wygld domylnego odnonika.
{
font-size:12pt;
te x t-decorati on:none;
}
a:1 i nk
{
color:navy:
}
a :visite d
{
col or:green:
}
a:hover
{
color:red:
text-decoration:underline:
}
W pierwszej definicji okreliem te elementy, ktre s wsplne dla wszystkich odsy
aczy; nastpnie wpisy form atuj odsyacze przy wykorzystaniu pseudoklas i nadaj
im specyficzne cechy wygldu.
Niestety, ycie bywa trudne i wikszo nowoczesnych stron wymaga stosowania na
nich odnonikw o zrnicowanej wielkoci lub wygldzie. N a szczcie w specyfi
kacji CSS znajdziemy sposb na rnicowanie odnonikw na stronie. Do wykonania
tego zadania wystarczy poczy zdobyte wczeniej informacje o klasach oraz pseudoklasach.
Poniej znajduje si listing arkusza stylw, w ktrym uwzgldniono dwa rodzaje od
nonikw.
152
{
font-size:24pt;
text-decorati on:none:
}
a :1 i nk
{
color:navy:
}
a :visite d
{
color:green;
}
a: hover
{
col o r :red:
text-decorati on:underl i ne;
}
/ * definicja odsyacza mniejszego */
a .may
{
fo n t-si ze: 12pt;
</ul >
M ona rwnie okreli oddzielne formatowanie dla kadego stanu odnonika. Poniej
znajduje si konkretny przykad.
/*norm alne odnoniki*/
{
font-size:24pt:
text-decorati on:none;
}
a:1 i nk
color:navy;
}
a :v is i ted
{
col or:green;
}
a:hover
{
col or:red;
text-decorati on:underli ne;
153
a.may
{
font-size: 12pt:
}
a.may:1 ink
{
col o r:s il v e r::
}
a.m aly:visited
{
color:yellow :
}
a .may-.hover
{
col or:black;
text-decorati on:none;
}
Kolejn dostpn pseudoklas jest : active, ktra pozwala nada dowolne formato
wanie elementowi po nakierowaniu na niego wskanika myszy i wciniciu przycisku,
ale przed jego zwolnieniem. Pseudoklasy tej mona uywa jako uzupenienia definicji
odnonikw, o ktrych pisaem wczeniej, lub jako elementu poprawiajcego czytel
no formularzy.
a: active
{
c o lo r:s ilv e r;
}
Jeeli chcemy, by wanie wywietlany odsyacz z menu by formatowany innym
kolorem, to z pomoc moe nam przyj kolejna pseudoklasa o nazwie : focus. Jej de
finicja wyglda nastpujco:
a: focus
{
color:braun;
}
W drugiej specyfikacji kaskadowych arkuszy stylw znajduj si jeszcze pseudoklasy
: 1ang oraz : f i r s t - c h i Id. Pierwsza z nowych klas z zaoenia miaa pozwoli na for
matowanie wielojzycznych dokumentw.
<p lang=p1 ">Jak si masz</p>
<p lang="en">How are you</p>
154
{
f o n t - S i z e : 1 4 p t;
color:navy:
}
p :la n g (p l)
{
font-weight:bold;
color:black;
}
p:lang(en)
{
fo n t-s ty le :i t a l ic :
}
Pseudoklasa : lang nie jest obsugiwana poprawnie przez wszystkie przegldarki. Wrd
nowych przegldarek radz sobie z ni Mozilla Firefox oraz Opera. Uytkownicy
MS Internet Explorera kolejny raz odejd z kwitkiem.
Pseudoelementy
Ciekaw grup selektorw stanowi pseudoelementy, ktre pozwalaj na przypisanie
kolejnych wymylnych stylw do elementw strony WWW.
Pseudoelement : f i r s t - l e t t e r pozwala na formatowanie pierwszej litery w bloku tekstu.
Przykadowy arkusz spowoduje powikszenie pierwszej litery do wielkoci 100 punk
tw i nadanie jej koloru czerwonego.
P
{
color:navy;
font-size:30pt;
}
p : f i rs t- le tte r
{
c o lo r:red;
font-size:100pt;
}
Efektem dziaania powyszego arkusza stylw bdzie powikszona pierwsza litera ka
dego akapitu wystpujcego w dokumencie HTML (XHTML).
<p>Pierwsza lite r a tego akapitu zostanie powikszona za pomoc pseudoelementu
:fir s t- le tte r .< /p >
{
color:navy;
font-size:30pt;
155
{
colon red;
font-size:100pt;
}
Przykadowy kod:
<hl>Portal Onet.pl</hl>
{
color:navy:
font-size;12pt:
}
p: f i rs t-1 i ne
{
c o lo r:red;
font-size:20pt:
font-weight:bold;
}
Przykadowy kod HTML:
<p>Kolejnym pseudoelementem je s t :f i rs t-1 i ne, obejmuje formatowaniem ca pierwsz
lin i , a nie tylko pierwsz 1i te r .</p>
{
content: "WANA WIADOMO";
font-size:15pt;
fo n t- s ty le :ita lic ;
font-weight:bold:
156
p :a fte r
{
content:"AUTOR Bartosz Danowski";
font-size:15pt:
fo n t- s ty le :ita lic :
font-weight:boid;
}
Przykadowy kod:
<p>Poza : f ir s t - le t t e r oraz : f ir s t - lin e w specyfikacji umieszczono jeszcze dwa inne
pseudoelementy: :a fte r oraz ibefore. Oba su do umieszczania tekstu przed i za
formatowanym elementem strony. </p>
Grupowanie selektorw
N a pocztek prosty przykad arkusza stylw, okrelajcego kolor dla nagwkw
i akapitw.
hl
{
color:green:
}
h2
{
color:green:
}
P
{
color:green;
}
Dziki temu, e selektory mona dowolnie grupowa, jeli pewne wartoci maj obo
wizywa dla kadego z nich, powyszy zapis mona znacznie uproci poszcze
glne selektory wchodzce w skad grupy rozdzielamy przecinkami. Poniej przedsta
wiono przykad zgrupowanych selektorw h l , h 2 oraz p .
h l. h2. p
{
color:green:
}
Styl powyszego przykadu spowoduje nadanie koloru zielonego wszystkim nagw
kom stopnia pierwszego i drugiego oraz blokom tekstu. Oczywicie, nic nie stoi na
przeszkodzie, by doda tu kolejne style, np. bloku tekstu, okrelajce wysoko czcionki
jako 15 punktw.
157
hl. h2. p
{
c o lo r:red:
}
P
{
font-size:15pt;
}
Taka definicja stylw uyje koloru czerwonego do formatowania zgrupowanych ele
mentw oraz czcionki o wysokoci 15 punktw w kadym bloku tekstu.
HTML
Podczas analizy rysunku mona zobaczy, e okrelenie np. koloru tekstu jako niebie
skiego bezporednio dla body spowoduje jego uycie dla kadego elementu naszej
strony, znajdujcego si niszej w hierarchii. Jeeli dodatkowo zdefiniujesz kolor listy
<ul></ul> jako zielony, to tekst caego dokumentu bdzie niebieski poza list, ktra
zostanie sformatowana za pom oc koloru zielonego. Idc dalej tym tropem, dopisz
do stylu odpowiedzialnego za formatowanie body definicj wielkoci czcionki rwn
14 punktom. Strona wynikowa bdzie zatem sformatowana za pomoc czcionki o wiel
koci 14 punktw i w kolorze niebieskim , natomiast lista bdzie m iaa kolor zielony
i identyczn jak reszta dokumentu wielko czcionki. Innymi sowy, styl odpowiedzial
ny za definicj czcionki bdzie dziedziczony z nadrzdnego w hierarchii znacznikw
<body></body>.
158
{
background-color: white;
fo n t-size : 24pt;
color: green:
}
</style>
</head>
<body>
<p>Wydawnictwo Hel i on</p>
<table width="902" border="l">
<tr>
<td>Wydawnictwo Helion</td>
< /tr>
</table>
</body>
</html>
Rysunek 4.4.
Przykad problemw
z dziedziczeniem
Wydawnictwo Helion
Wydawnictwo Helion
Zwr uwag na wysoko tekstu w tabeli i poza ni. Domylnie mia on mie wyso
ko 24 punktw w caym dokumencie. Niestety, tabela wyczya wielko tekstu dla
swojej zawartoci. Problemy takie m og wystpi w starszych przegldarkach, a naj
prostszym sposobem na ich uniknicie jest zgrupowanie selektorw body oraz td.
body. td
{
background-color: white:
fon t-size: 24pt:
color: green:
159
{
background-color: whlte;
font-slze: 24pt;
color: green:
}
</sty1e>
</head>
<body>
<p>Wydawnictwo Helion</p>
<p style="font-size: 14pt;">Wydawnictwo Helion</p>
</body>
</html>
Zwr uwag, e w listingu poczyem dwie metody osadzania arkuszy w dokumen
cie w nagwku oraz bezporednio w znaczniku.
Zgodnie z zasad kaskadowoci najpierw zostanie zaadowany zewntrzny arkusz, na
stpnie style wpisane do nagwka <head></head>, a na samym kocu style wpisane
bezporednio do znacznika. Takie rozwizanie umoliwia pen kontrol nad doku
mentem, a w przypadku sprzecznoci zdefiniowanych stylw spowoduje, i uyty zo
stanie ten, ktry jest najbliej formatowanego elementu.
Jeeli rozpatrzysz pen wersj kaskady, to liczba moliwoci, z jak mamy do czynie
nia, wyglda imponujco. Poniej zamieszczam prosty wykaz wanoci poszczegl
nych arkuszy.
1. Arkusze stylw przegldarki.
2. Arkusze stylw internauty.
3. Arkusze stylw projektanta strony:
zewntrzne arkusze stylw,
style osadzone w nagwku dokumentu HTML,
style osadzone bezporednio w znaczniku.
1 60
Jeeli internauta wejdzie na stron, na ktrej twrca nie zastosowa adnych stylw,
strona ta zostanie wywietlona za pomoc domylnego arkusza przegldarki. Jednak gdy
internauta ma przygotowany wasny arkusz stylw zostanie on uyty do wywie
tlenia strony.
Jeli na stronie znajduj si arkusze stylw przygotowane przez jej projektanta, to one
zostan uyte do wywietlenia strony WWW. Pamitaj, e tutaj moe zachodzi ko
lejna kaskada m idzy arkuszem osadzonym w znaczniku lub pobranym z zewntrz
nych plikw.
Wyrwnanie tekstu
Istnieje moliwo wyrwnania tekstu do prawej i lewej strony oraz wyrodkowania
lub wyjustowania caego bloku. Konstrukcja odpowiedniego stylu ma nastpujc posta:
P
te x t-a lig n : le f t ;
}
P
{
te x t-a lig n : rig h t;
}
P
{
te x t-a lig n : center;
16 1
Uwaga
Pionowe wyrwnanie
Elementy umieszczone w komrce tabeli oraz wewntrz innych elementw blokowych
moesz dodatkowo wyrwna w pionie. W tym przypadku specyfikacja przewiduje na
stpujce moliwoci: gra, d, rodek, indeks grny oraz indeks dolny.
/*w y rwnanie do g ry*/
td
i
v e rtic a l-a lig n : top;
}
/ * wyrwnanie do rodka*/
td
{
v e rtic a l-a lig n : middle:
}
/* wyrwnanie do dou*/
td
{
v e rtic a l-a lig n : bottom;
}
Do zdefiniowana indeksw posu si nieco innym przykadem i skorzystam z selekto
ra potomka, dziki czemu atwiej ustawi odpowiednie wartoci. Poniej zamieszczam
przykadowy listing fragmentu kodu odpowiedzialnego za powstanie indeksw.
/*indeks dolny*/
p span
i
v e rtic a l-a lig n : sub:
}
/*indeks grny*/
p.inny span
{
v e rtic a l-a lig n : super;
}
Natomiast sam kod HTML wyglda tak:
<p>Indeks <span>Dolny</span></p>
<p class="inny">Indeks <span>Grny</span></p>
V
Uwaga
162
{
text-inde nt: Ion:
}
Jak widzisz, konstrukcja jest bardzo prosta i tradycyjnie skada si z cechy oraz war
toci, ktra w tym przypadku jest liczb i korzysta z jednostek wzgldnych lub bez
wzgldnych.
Przykad odnosi si do wszystkich blokw tekstu akapitw, a kady z nich bdzie
mia wcity pierwszy wiersz o jeden centymetr.
{
lin e-height: 9pt;
}
Powyszy listing spowoduje, e odstp midzy poszczeglnymi wierszami akapitu b
dzie wynosi 9 punktw.
Uywajc tej cechy, musisz pamita o tym, e zbyt may lub za duy odstp midzy
wierszami moe spowodowa trudnoci w czytaniu, co w konsekwencji moe zniech
ci odwiedzajcego do lektury zawartoci strony.
Odstpy midzy wierszami m og rwnie przybiera wartoci ujemne, dziki czemu
tekst si zagszcza.
163
{
line-height: -3pt;
}
Skoro mona kontrolowa odstpy midzy wierszami tekstu, to czemu nie regulowa
odlegoci midzy wyrazami. Twrcy kaskadowych arkuszy stylw dostrzegli t cech
tekstu i stworzyli polecenie word-spaci ng, za pomoc ktrego mona kontrolowa za
gszczenie wyrazw.
hl
{
word-spacing: lcm
}
lub
P
{
word-spacing: -3pt:
}
Jak wida, rwnie w tym przypadku warto cechy moe by liczb ujemn, co wie
si ze zmniejszeniem odstpw i zagszczeniem wyrazw.
Pamitaj, e zbytnie rozstrzelenie lub zagszczenie utrudnia czytanie tekstu.
Uwaga
{
letter-spacing: -2pt;
}
Warto cechy moe zawiera liczby dodatnie zwikszenie odstpu, lub ujemne
jego zm niejszenie. Rwnie tym razem m usisz pam ita o czytelnoci tekstu.
Moim zadaniem raczej nie zagszczaj ani nie rozrzedzaj zbyt duych partii tekstu,
poniewa moe to znacznie utrudni czytanie. Oczywicie, ozdobne nagwki czy te
fragmenty tekstu, ktre chcesz wyrni, jak najbardziej moesz okrela za pomoc
tej cechy. Takie dziaanie w odpowiednim kierunku z pewnoci poprawi funkcjonal
no strony.
Dekoracja tekstu
Kaskadowe arkusze stylw pozwalaj na kontrol wygldu tekstu i przypisywanie mu
dekoracji. Dokadniej mwic, za pomoc cechy text-decoration mona spowodowa,
e formatowany tekst na stronie bdzie podkrelony, przekrelony, nadkrelony lub
migajcy. Oglna konstrukcja ma nastpujc posta:
164
selektor
{
text-decoration: warto;
}
gdzie warto moe przybiera jedn z nastpujcych nazw:
underline (podkrelony),
over! i ne (nadkrelony),
line -th rou gh (przekrelony),
b link (migajcy).
hl
{
text-decoration: overline:
{
text-decoration: none:
}
Na rysunku 4.6 wida przykad tekstu, ktry zosta nadkrelony.
Wydawnictwo HELION
z dekoracj w postaci
nadkrelenia
{
text-transform : warto;
}
Zamiast sowa warto mona podstawi jeden z nastpujcych stylw przeksztacenia:
uppercase tylko due litery,
1owercase tylko mae litery,
capi ta l i ze pierwsza litera kadego sowa zostaje zamieniona nad du,
165
warto domylna.
hl
text-transform : uppercase;
}
Rysunek 4.7 przedstawia nagwek stopnia pierwszego, w ktrym za pom oc stylu
te xt-tra n sform dokonaem przeksztacenia tekstu na due litery.
Rysunek 4.7.
Nagwek hl
WYDAWNICTWO HELION
form atowany
za pom oc stylu
text-transform
{
white-space; warto:
}
gdzie warto jest zastpowana przez jed n z nastpujcych moliwoci:
normal stan domylny; spacje s redukowane do jednej,
pre - wymusza zachowanie dokadnie takiej liczby spacji, jaka znajduje si
faktycznie w tekcie; z pewnoci widzisz analogi do znacznika <pre></pre>,
nowrap kady wiersz wchodzcy w skad akapitu jest automatycznie amany
1 66
Wnioski
Kady podrozdzia powicony funkcjom kaskadowych arkuszy stylw bd koczy
maym podsumowaniem, w ktrym znajdzie si tabela zawierajca wszystkie cechy
i wartoci stylw skadajcych si na dane zagadnienie. Poza tym w tabeli 4.3 znaj
dziesz przykady zastosowania danego stylu.
Tabela 4 .3 . Zbiorcze zestaw ienie waciwoci tekstu
Deklaracja
Dostpne w artoci
text-align
vertical-align
text-indent
text-decoration
text-transform
letter-spacing
word-spacing
white-space
{
te x t-a lig n : center:
te xt-ind ent: lcm;
text-transform : ca p ita lize ;
167
styl,
wariant.
Rodzaj czcionki
Pod pojciem rodzaju czcionki kryje si rodzina czcionki, np. Arial lub Times. Za
pomoc kaskadowych arkuszy stylw mona okreli, z jakiego rodzaju czcionki ko
rzystamy przy wywietlaniu wybranego elementu na stronie. Oczywicie, nic nie stoi
na przeszkodzie, by na jednej stronie rne elementy byy wywietlone za pom oc
kilku rodzajw czcionki.
Oglna konstrukcja stylu ma posta:
selektor
{
font-fam ily: nazwa_wasna_czcionki lub nazwa_rodzajowa_czcionki:
Okrelanie rodzaju czcionki moe si odbywa za pomoc jej nazw wasnych, np. Arial,
Times New Roman.
body
{
font-fam ily: a ria !, helvtica, verdana:
}
Drugim sposobem jest uycie nazw rodzajowych: serif, sans-serif, monospace, cursive
oraz fantasy.
body
{
font-fam ily: s e rif;
}
Czcionki okrelane mianem se rif s proporcjonalne, gdy kada litera ma inn szero
ko porwnaj np. liter m oraz 1. Dodatkowo kada czcionka z tej rodziny
posiada ozdobniki, zwane szeryfami. Typow czcionk nalec do grupy rodzajowej
s e n /je s t Times New Roman.
Druga grupa czcionek to sans-serif ktre rwnie s proporcjonalne. Rnica polega
na braku ozdobnikw. Przykadami czcionek nalecych do tej grupy m og by Arial,
Helvtica oraz Verdana. Ten rodzaj je st duo lepszy do czytania, w zwizku z tym
przyjto, e to wanie sans-serif powinien by uywany na stronie.
Kolejna grupa to monospace. Czcionki tego typu s nieproporcjonalne, co oznacza, e
kada litera ma tak sam szeroko (np. m ma tak sam szeroko jak 1). Ten
rodzaj jest doskonale znany z maszyn do pisania bd te starych drukarek igowych.
Ciekaw cech tego typu pisma jest to, e czcionka moe mie szeryf lub nie. Przy
kadem takiej czcionki jest Courier New.
168
Nastpna grupa rodzajowa czcionek to cursive. Nie naley myli tej nazwy z tekstem
pochyym napisanym kursyw, gdy ta grupa rodzajowa obejmuje wszystkie czcionki,
ktre s podobne do odrcznego pisma. Innymi sowy, mog one zawiera rne ozdob
niki w postaci zawijasw. Przykadowa czcionka cursive to Comic Sans MS.
Ostatnia grupa nosi nazw fantasy i zawiera czcionki, ktrych nie da si zaklasyfiko
wa do adnego z pozostaych stylw rodzajowych. Przykadowa nazwa to Dziurki
Sto, ktrej osobicie nie potrafi zaklasyfikowa nigdzie indziej.
W tym miejscu warto zwrci uwag na to, w jaki sposb przegldarka uywa czcio
nek na stronie WWW. Ot wszystkie czcionki, ktre zdefiniowano w arkuszu sty
lw, przegldarka pobiera z komputera uytkownika ogldajcego stron WWW. Je
eli internauta nie posiada uytej czcionki, to przegldarka zastpi j domyln
czcionk dla danego systemu. W zwizku z tym moe si zdarzy, e przy zastoso
waniu innej czcionki caa strona si rozsypie i bdzie zupenie nieczytelna. Dlatego
proponuj, by nie uywa czcionek spoza listy najpopularniejszych, tzn. Times,
Times New Roman, Arial, Helvetica, Courier oraz nazw rodzajowych.
Bardzo dobrym nawykiem przy definiowaniu listy czcionek jest uywanie nazw kilku
podobnych czcionek oraz uzupenianie ich o nazw rodzajow.
body
{
fo n t-fa m ily: a ria l. Helvetica, verdana, sans-serif:
}
Jeeli strona z czcionkami okrelonymi w ten sposb zostanie otwarta na komputerze,
gdzie nie ma czcionki Arial, to automatycznie zostanie podjta prba wywietlenia
tekstu za pom oc czcionki Helvetica lub Verdana. W sytuacji, gdy ogldajcy nie po
siada adnej z zaproponowanych czcionek, jego przegldarka sprbuje odszuka do
woln, nalec do grupy sans-serif.
Oczywicie, jeeli zdarzy si tak, e nie bdzie w komputerze ani jednej z okrelo
nych czcionek, jak rwnie przegldarka nie dopasuje innej czcionki, nalecej do
danego rodzaju, to zostanie pobrana domylna czcionka z komputera ogldajcego.
Jednak przy dobrze dobranych nazwach czcionek oraz dopasowanych rodzajach
prawdopodobiestwo takiego zdarzenia jest niewielkie.
Rozmiar
Rne elementy na stronie m og mie odmienny rozmiar czcionki zastosowanej do
ich wywietlenia. Za pom oc kaskadowych arkuszy stylw moesz kontrolowa roz
miar, uywajc do tego celu jednostek wzgldnych i bezwzgldnych, opisanych na
pocztku tego rozdziau. Konstrukcja oglna stylu ma nastpujc posta:
selektor
{
font-size : warto:
169
{
font-size: 20pt;
}
lub
P
{
font-size: 12px:
}
Przyjrzyj si nastpujcemu arkuszowi:
body
{
font-size: 20pt:
}
.wikszy
{
font-size: 40pt;
}
.procenty
{
font-size: 2002:
}
Domylny tekst ma rozmiar 20 punktw, natomiast tekst w bloku, ktry ma przypisan
klas o nazwie .wikszy 40 punktw. Ciekawostk jest klasa o nazwie .procenty,
gdy jej uycie ustawi tekst o rozmiarze 200% tekstu podstawowego. W tym przypadku
domylnym rozmiarem tekstu jest 20 punktw, czyli tekst formatowany za pom oc
klasy . procenty bdzie mia rozmiar 40 punktw tak jak klasa . wi ekszy.
Poza opisanymi sposobami okrelania wielkoci tekstu zgodnie ze specyfikacj mo
na rwnie uywa zdefiniowanych wielkoci. Zostao ich przewidzianych siedem:
xx-sma11, x-sm all, smali,medium, large, x-la rge , xx-large.
p.duzy
{
font-size: xx-large;
}
Ciekaw waciwoci kaskadowych arkuszy stylw jest moliwo okrelania wzgld
nych rozmiarw za pom oc opcji 1arger oraz smal 1er.
body
{
font-size: large:
}
.wikszy
{
font-size: larger:
170
.mniejszy
{
fon t-size: smal 1e r;
}
Powyszy listing przedstawia typow konstrukcj, jak mona spotka niemal codzien
nie. Na pocztku ustawiem dom yln wielko tekstu jako large. Nastpnie za po
m oc klas zdefiniowaem tekst o jeden stopie niszy smal 1er czyli w tym przy
padku medi um oraz o jeden stopie wyszy 1arger w tym przypadku bdzie to
x-large. Na rysunku 4.8 wida efekt dziaania listingu, ktry wanie opisaem.
Rysunek 4.8.
Przykad
zrnicowania
rozmiaru czcionki
za pom oc CSS
W y d a w n ic t w o H E L I O N - t e k s t w i k s z y
Wydawnictwo HELION - tekst mniejszy
Korzystanie z tych dwch wartoci w czasie pracy nad stron jest bardzo wygodne,
gdy potrzeba tylko trzech wielkoci tekstu. W ystarczy zdefiniowa domylny rozmiar
czcionki, a potem opiera si na zalenociach smal 1er i 1arger.
Waga czcionki
Pod pojciem wagi czcionki naley rozumie jej grubo, a nie faktyczny ciar liczony
w kilogramach. Odpowiednia konstrukcja ma nastpujc posta:
selektor
{
font-weight: warto:
}
Uarto moe by okrelona za pom oc liczb z przedziau od 100 do 900 oraz nazw
boid, bolder, lig h te r i normal.
P
{
font-weight: boid:
}
W artoci bolder i lig h te r dziaaj dokadnie tak samo, jak opcje 1arger i smali er,
dostpne przy okrelaniu wielkoci czcionki. Dokadniej mwic, pozwalaj na uzy
skanie czcionki ciszej lub lejszej o jeden stopie w skali.
Rysunek 4.9 przedstawia poszczeglne wagi czcionki. Szczeglnie interesujce s
rnice w interpretacji poszczeglnych wag przez rne przegldarki.
17 1
M o z illa F ire fo x 2 .0 .4
MS IE 7
O p e ra 9.x
S a fa ri 3 .0 .2
T ek st o w ad ze 6 0 0
T ek st o w adze 700
T ekst o w ad ze 700
T ek st o w adze 800
T ek st o wadze bold
T ek st o wradze bold
T ek st o wradze bolder
T ek st o wadze bolder
T ek st o wradze bold er
T ek st o w adze 900
Rysunek 4 .9 . Poszczeglne wagi czcionki. Zwr uwag na rnice w interpretacji p rzez przegldarki
Styl czcionki
Czcionka publikowana na stronie WWW, poddana procesowi formatowania za po
moc kaskadowych arkuszy stylw, moe zmienia swj styl. Specyfikacja okrela
dwa rodzaje stylw czcionki.
Pierwszy z nich to i ta l i c.
P
{
fo n t-style : i ta l i c :
}
Myl, e tumaczenie tego, jak wyglda i ta l i c, nie ma wikszego sensu, bo przecie
kady spotka si z tekstem pochyym, czyli kursyw.
Druga opcja przy okrelaniu stylu czcionki to obi i que.
P
{
fo n t-s ty le : oblique:
172
Wariant czcionki
To enigmatyczne pojcie odpowiada za przeksztacenie tekstu w kapitaliki. Tekst przed
stawiony za pom oc kapitalikw skada si z wielkich liter, a oprcz tego pierwsze
litery kadego wyrazu s wyranie wiksze anieli pozostae. Konstrukcja stylu jest
nastpujca:
hl
{
fo n t-va ria n t: small-caps;
}
Domyln wartoci tego stylu jest opcja normal, dziki ktrej moemy wyczy dzia
anie stylu.
Wnioski
Podobnie jak w przypadku waciwoci tekstu, rwnie cechy czcionki moemy do
wolnie ze sob czy.
P
{
fo n t-fa m ily: a ria l, helvtica, verdana, sans-serif:
font-size: 12px;
font-weight: bold;
fo n t-s ty le : it a lic :
fo n t-va ria n t: small-caps;
}
Oczywicie, nic nie stoi na przeszkodzie, by doda do podanej definicji wybrane cechy
waciwoci tekstu.
P
{
fo n t-fa m ily: a ria l, helvtica, verdana, sans-serif;
font-size: 12px;
font-weight: bold;
fo n t-s ty le : it a lic ;
fo n t-va ria n t: small-caps;
te x t-a lig n : center;
word-spacing: 6px;
173
Dostpne w artoci
font-fam ily
font-style
p {fo n t-s ty le : it a l ic ; }
font-variant
font-w eight
font-size
fo n t
p {font-weight: bold;}
smal 1 I medi urn
font-size-adjust
Typ listy
Listy punktowane i numerowane m og rni si wygldem punktora lub sposobem
numeracji. Wemy np. listy numerowane, ktre m og by ponumerowane za pomoc
liter lub cyfr. Dodatkowo litery m og by mae lub due, natomiast liczby m og by
rzymskie lub arabskie. Podobnie wyglda sprawa punktora w listach wypunktowanych.
W tym przypadku mona rwnie wyrni kilka punktorw, np. kwadrat, koo lub okrg.
1 74
{
lis t-s ty le -ty p e : warto:
}
Warto moe przybra jed n z nastpujcych postaci:
none brak punktora,
disc peen okrg,
c ir c le okrg,
square peen kwadrat.
Gdy okrelasz punktor listy wypunktowanej selektorem, musisz uy znacznika ul, tak
jak w poniszym przykadzie.
ul
{
lis t-s ty le -ty p e : square:
}
Nieco inne wartoci mona przypisa dla listy numerowanej, poniewa w tym przy
padku mamy niejako dwa gwne typy numeracji liczby oraz litery, a kady z nich
dzieli si jeszcze na podtypy.
Wartoci dla listy wypunktowanej m og przybra nastpujc posta:
none brak punktora,
}
Teoretycznie, moesz za kadym razem uywa tego samego selektora i przypisywa
inne wartoci dla cechy, jednak kontrola takich list jest znacznie utrudniona, dlatego
warto zada sobie trud i trzyma si przyjtych prawide.
1 75
{
list-style-im age: url ("p u n k to r .g if):
}
Oczywicie, zam iast punktor .g i f naley poda nazw wasnego obrazka. Pamitaj
o tym, e nie moe on by zbyt duy, gdy na stronie bdzie wyglda bardzo nie
estetycznie. Przyjrzyj si rysunkowi 4.10, na ktrym wida przykad zastosowania
punktora na stronie.
Rysunek 4.10.
Przykad zastosowania
wasnego graficznego
punktora
L IST A Z A K U P W
I. P r o d u k t y m c z n e
W ,p ,z .n n ,
mka ziemniaczana
mka krupczatka
II. O w o c e
% b lk a
banany
^ cy tru sy
cytryny
mandarynki
'
' pomaracze
arbuzy_________________
{
lis t-s ty le -p o s itio n : warto:
176
Rysunek 4.11.
Przykad listy,
w ktrej okrelono
pooenie tekstu
wzgldem punktora.
Pierwsza lista uywa
wartoci outside,
a druga inside
Lorem ipsum door sit amet, consectetuer adtpiscing et. Vestibuhmi et puras. Sed
varias semper nibh Quisque tempor, risas nec facisis dictum, lacus teBus auctor
diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sk amet, consectetuer adipiscing elit Vestrbuhim et puras. Sed
varius semper nibh. Quisque teinpor, risus nec. facilisis dictum, lacus telhis auctor
diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sit amet consectetuer adipiscing eht. Vestibahim et parus.
Sed vanus sender nibh. Quisque tensor, risus nec facilisis dietmn, lacus tehis
auctor diam, porttitor suscipit lectus massa et sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing et. Vestibuhim et puras.
Sed varias semper nibh. Quisque tempor, risus nec facilisis dictum, lacus telus
auctor diam, porttitor suscipit lectus massa et sapien.
Oczywicie, jeeli lista zawiera krtkie wpisy w kadym punkcie, to nie wida rni
cy midzy wartociami wyrnionymi powyej. Innymi sowy, stosowanie cechy l i s t -s ty le -p o s itio n ma sens tylko w przypadku list, w ktrych kady z punktw zajmuje
wicej ni jeden wiersz.
ol
{
lis t-s ty le -p o s itio n : inside:
Wnioski
Cechy list bez wikszych problemw moesz czy ze sob lub z innymi elementami
kaskadowych arkuszy stylw.
OL
{
lis t-s ty le -ty p e : c irc le ;
font-size: 12px;
177
Dostpne w artoci
list-style-type
list-style-image
list-style-position
list-style
Kolor
Za pomoc CSS mona przypisa dowolny kolor, np. bloku tekstu czy nagwka.
selektor
color: warto:
}
W praktyce przypisanie koloru nagwka stopnia pierwszego moe wyglda tak, jak
na poniszym przykadzie:
hl
color: red:
}
lub
P
color: #8999e4;
}
Niestety, za pomoc tej cechy nie da si okreli np. koloru obramowania tabeli, gdy
do tego celu su inne opcje dostpne w specyfikacji CSS. Dlatego zapamitaj, e za
pomoc cechy color moesz kontrolowa kolor jedynie tekstu.
Poniej zamieciem prosty przykad zdefiniowana na stronie ciekawych odnonikw,
ktre po najechaniu na nie kursorem myszy zmieniaj kolor.
a
{
text-decoration: none;
font-size: lOpt;
color: black:
178
a:hover
{
color: red;
To
We wstpie do tego podrozdziau wspomniaem, e tem moe by definicja koloru lub
obrazek. W zalenoci od rodzaju ta naley skorzysta z dwch rnych cech wyszcze
glnionych w specyfikacji CSS.
To moesz ustawi dla kadego elementu wykorzystanego na stronie WWW. Tak wic
to moe posiada caa tabela (< ta b le > < /ta b le > ) lub jej komrka (<td></td>), jak rw
nie blok tekstu (<p></p>). Nic nie stoi na przeszkodzie, by okreli to dla pseudoklas
odsyaczowych i zmienia je za pomoc pseudoklasy a : hover.
Definicja koloru jako ta ma nastpujcy wygld:
selektor
{
background-color: warto;
}
W praktyce moe to wyglda np. tak:
table
{
background-color: s ilv e r;
}
Drugim typem ta jest to graficzne, ktre w praktyce jest obrazkiem umieszczonym pod
tekstem lub innym elementem na stronie WWW.
selektor
{
background-image: URKnazwa . gi f ) :
}
W tym przypadku selektorem moe by praktycznie dowolny element jzyka HTML
(XHTML), natomiast obrazek, ktrego nazwa znajduje si w nawiasie, musi by zapi
sany w jednym z dostpnych formatw jp g , g i f lub png.
body
{
background-image: U R L (tlo .g if);
}
Jeeli chcesz stosowa graficzne to, powiniene wiedzie, e posiada ono ciekaw
waciwo: jest ono powielane w pionie i poziomie w zalenoci od potrzeb. Dlatego
wystarczy nieduy obrazek, by mie na stronie ciekawe to.
Jeeli uywasz ta graficznego, zastanw si, czy nie mona go przygotowa w taki
sposb, by udao si wykorzysta naturalne powielanie w pionie i poziomie patrz
rysunek 4.12. Dziki temu moesz przyspieszy wczytywanie strony.
179
Plik
Edycja
Widok
Historia
Zakadki
Narzdzia
Pomoc
Danowski
Cookies
Haidwaie
CSS*
] Forms*
Wiadomoci
00owanie
LG PotyC|
Miscellaneous- .
Outline* , , Resize*
Zscene.-tmc
Materiay ks/azki
Tools*
Sowniki
<
View Source-
Piogiamy
Options*
Pawowe
T
Rysunek 4 .1 3 . Pasek, ktry p o powieleniu daje to z rysunku 4.12
Powielanie i zatrzymanie ta
Za pomoc kaskadowych arkuszy stylw mona kontrolowa powielanie oraz zatrzy
ma to tak, by nie przewijao si wraz z zawartoci strony WWW.
180
{
background-repeat: warto;
}
Zamiast sowa warto mona w tym przypadku podstawi jedn z czterech moliwoci:
no-repeat to nie bdzie powielane i wywietli si tylko raz,
repeat -x
to zostanie powielone tylko w poziomie,
repeat -y to zostanie powielone tylko w pionie,
repeat to bdzie powielane zarwno w pionie, jak i w poziomie.
body
{
background-repeat: repeat-x:
}
Na rysunku 4.14 przedstaw iem prosty przykad, na ktrym obrazek, bdcy tem
dokum entu, zosta pow ielony w poziomie, natom iast powielanie w pionie zostao
zatrzymane.
Drug cech, ktra jest szczeglnie przydatna na stronie z tem, jest moliwo jego
zatrzymania tak, by nie przesuwao si razem z zawartoci strony. Efekt ten mona
porwna do sytuacji, w ktrej masz jed n kartk papieru z tem oraz przezroczyst
foli, na ktrej znajduje si tekst; po naoeniu folii na kartk papieru moesz prze
suwa foli, a to pozostanie pod spodem i bdzie nieruchome.
Rozwizanie to pozwala ustawi w tle strony np. zdjcie i dziki temu uzyska bardzo
ciekawy efekt. Jednak pamitaj, e nie kade zdjcie nadaje si, by ustawi je w tle;
czasami mona doprowadzi do sytuacji, w ktrej tekst stanie si zupenie nieczytelny.
Oglny schemat blokowania ta wyglda nastpujco:
body
{
background-image: u rK tlo . jpg):
background-attachment: fixed;
}
Jak si zapewne domylasz, nie ma sensu blokowanie ta np. dla tabeli czy te innych
nieduych elementw. Moim zdaniem wykorzystanie tej cechy ma sens jedynie w przy
padku, gdy ustawisz to dla caej strony WWW.
181
sft.
I
' o
H nhM j u
w w m fc i
U ) Poiyqonow*me
G o o g l. R t . d U INGOnlin.
iJ
M a tm * f c * *
S t a m k i | l_ J P m j n m y
0.4905
&
Pozycjonowanie graficznego ta
Obrazek ustawiony w tle moe by dowolnie pozycjonowany za pomoc kaskadowych
arkuszy stylw wzgldem caego okna lub lewego grnego naronika. Oglny schemat
zamieciem w poniszym listingu.
body
{
background-image: u r l ( t lo . g if ) ;
background-repeat: no-repeat;
background-position: warto;
}
Warto dla cechy background-position moe tu przybra nastpujc form;
center to bdzie wyrodkowane,
1e ft to znajdzie si z lewej strony,
r ig h t to znajdzie si z prawej strony,
182
to p to znajdzie si u gry,
bottom to znajdzie si na dole,
{
background-image: u r lC tlo .g if);
background-repeat: no-repeat;
background-position: rig h t bottom:
}
Nieco inaczej bdzie wyglda zapis w przypadku, gdy zdecydujesz si na okrelenie
ta za pomoc wartoci liczbowych. Pozycja jest bowiem liczona wzgldem lewego
grnego naronika okna przegldarki. Jednostki, jakich uyjesz do pozycjonowania ta,
m og przybiera wartoci wzgldne lub bezwzgldne dokadny opis znajdziesz we
wstpie do tego rozdziau.
body
{
background-image: u r l ( t l o . g i f ) ;
background-repeat: no-repeat:
background-position: 2cm 2cm:
}
N a rysunku 4.15 wida przykad ta, ktre zostao ustawione w odlegoci 2 cm od
lewej i grnej krawdzi okna przegldarki.
Rysunek 4.15.
Przykad ta
pozycjonowanego
wzgldem lewego
naronika okna
przegldarki
Plik
Edycja
W id o k
H istoria
I2cm
Zakadki
Narzd
183
Wnioski
W swoich projektach moesz niemal dowolnie czy ta bdce kolorem lub obrazkiem.
body
{
background-color: black;
background-image: u r l( tlo .jp g ) ;
}
Specyfikacja nie przewiduje ustawienia dwch obrazkw w tle dla jednego elementu,
czyli nastpujcy listing jest bdny:
body
{
background-image: u r K tlo .jp g ) ;
background-image: u r l ( t lo l. jp g ) ;
}
Oczywicie, na jednej stronie dla kadego elementu moesz przypisa inny obrazek
w tle i to zadziaa, jednak moim zdaniem efekt bdzie mierny, by nie napisa tra
giczny. Wyjtkiem jest sytuacja w ktrej tworzysz zaawansowany i z gry przemy
lany projekt.
Pamitaj, e waciwoci ta dla jednego elementu moesz czy z formatowaniem
wygldu innych elementw strony. Nie jest tak, e to wykorzystane dla selektora
<body></body> uniem oliwia przypisanie dla tego selektora np. koloru tekstu czy te
wyrwnania zawartoci bloku prawego marginesu.
Tabela 4.6 . Zbiorcze zestawienie waciwoci koloru i ta
Deklaracja
Dostpne w artoci
color
background-color
background-image
background-attachment
body{background-image: u r l( t lo . g if ) }
body {background-attachment: fixed}
background-position
background-repeat
background
184
Marginesy i dopenienie
Specyfikacja kaskadowych arkuszy stylw okrela dwa rodzaje odstpw pomidzy
elementami. Pierwszym sposobem regulacji jest margines, natomiast druga metoda to
dopenienie, ktre bywa popularnie zwane marginesem wewntrznym.
Marginesy zewntrzne
Na zewntrzne m arginesy skadaj si nastpujce marginesy: prawy, lewy, grny
oraz dolny. Do okrelania marginesu uywa si cechy margin. Oglny schemat definicji
ma tu posta:
selektor
{
margin-strona: warto;
}
Zamiast sowa strona naley podstawi jedn z poniszych nazw, okrelajcych stron
okna przegldarki:
1e f t lewa strona,
ri ght prawa strona,
top gra,
bottom d.
{
m argin-left: lcm:
m argin-right: lcm;
margin-top: 2cm:
margin-bottom: 3cm;
}
W tym przykadzie ustawiem rne szerokoci marginesw, w zwizku z tym dla ka
dego elementu musiaem dokadnie okreli cech. Jednak na stronie, na ktrej wszyst
kie marginesy s identyczne, mona stosowa skrcony zapis, np.:
body
{
margin: lcm:
185
Powyszy listing ustawi margines o szerokoci 1 cm dla wszystkich bokw okna prze
gldarki. Zwr uwag na to, jaka to oszczdno kodu.
Ciekaw waciwoci marginesw jest to, e marginesy rnych elementw si sumu
j. Dokadniej mwic, jeeli ustawi si np. 11-procentowy lewy margines dla selektora
body, a nastpnie oddzielny margines o szerokoci 2 cm dla akapitw, to faktyczny od
stp od lewego brzegu okna dla akapitu bdzie wynosi a 11% + 2 cm (rysunek 4.16).
Bartosz Danowski - Mozila Firefox
Plik
Edycja
<S
Helion
Widok
Historia
Zakadki
ja
Danowslo
Narzdzia
Pomoc
i im m
>> .
file:///C:/Users/8artelc/Deslrtop/Strona%20WWW/test.html
Hardware
. CSS* ~ l Forms-
Wiadomoci
Images* 0
Pozycjonowanie
Information-
/ Google Reader
Miscellaneous-
ING Online
Outline-
, Resize*
Materiay ksijri
Zakoczono
.............
186
table
{
m argin-left: auto:
m argin-right: auto:
{
padding-strona: warto;
}
Podobnie jak w przypadku ju opisanych marginesw zewntrznych, zamiast sowa
strona mona wpisa jed n z czterech dostpnych stron (oczywicie w jzyku an
gielskim): l e f t , r ig h t, bottom oraz top. Natomiast warto ma zawiera liczby dodatnie
lub ujemne oraz jednostki wzgldne lub bezwzgldne.
Do zrozumienia rnicy midzy marginesem zewntrznym a wewntrznym bdzie po
trzebny prosty przykad. Dla uwidocznienia rnicy pomidzy nagwkami dodatkowo
wczyem to.
N a rysunku 4.17 wida sytuacj, w ktrej zadziaay marginesy zewntrzne grny
i dolny. Zwr uwag na to, e to znajduje si dokadnie pod tekstem i brak dodatko
wego obramowania dookoa tekstu.
Teraz dla tych sam ych nagwkw zam iast marginesw zewntrznych ustawiem
wewntrzne.
hl
padding-top: lcm;
padding-bottom: lcm;
}
Porwnaj rysunki 4.17 oraz 4.18 i zwr uwag na to, e odlego midzy tami nie
rni si niczym od domylnego stanu, jaki moesz zaobserwowa w oknie przegl
darki po umieszczeniu w nim trzech nagwkw, natomiast odlego tekstu jest w tym
przypadku do znaczna i wynosi ponad 2 cm. Zauwa, e obramowanie dookoa tekstu
niejako si zwikszyo.
N a tym w anie polega rnica midzy zewntrznym i wewntrznym marginesem.
Pamitaj o tym, e stosujc kady z nich, moesz uzyska podobny efekt, jednak w prak
tyce oba typy znacznie si rni.
187
Edycja
Widok
Historia
J L
Zakadki
I
Helion
Danowski
Disable* &
Cookies* J CSS* S
Narzdzia
Pomoc
'W
fit e / / /C:/Users/Bartdc/Deslctop/Strona%20WWW/test.html
Hardware
Forms*
Wiadomoci
Pozycjonowanie
Images* C l Information*
Google Reader Lj
Miscellaneous*
ING Online
Outline*
2*
Resize*
Materiay ksiki
' Tools*
View Source*
PageRank Compete
63405
Qf<
{
padding: lcm:
Wnioski
Definicje marginesw oraz dopenienia moesz ze sob dowolnie czy, ale pamitaj
o tym, e faktyczna odlego bdzie sum wartoci dopenienia i marginesu.
Definicje marginesw za kadym razem m og by dowolnie uzupeniane przez inne
elementy kaskadowych arkuszy stylw.
188
Ig | l l tSM l
Edycja
*
Helion
Widok
* ( g
Disable-
Historia
L-
Danowski
Cookies-
Zakadki
ULj
i 0
Narzdzia
Pomoc
Hardware
!) Wiadomoci | L
Images- 0
} Pozycjonowanie
Inform ation-
| }>
:W
Miscellaneous-
Outline-
| Wikipedia
\i
* Resize-
Materiay ksiki
' Tools- Q
PagoRank Compete
Zakoczono
Dostpne w artoci
margin-left
margin-right
margin-top
auto | in h e rit
p{margin-top: 20px;}
margin-bottom
auto | in h e rit
p{margin-bottom: lcm:}
margin
0.600s
View Source-
8W *
1 89
Dostpne w artoci
padding-left
padding-right
padding-top
padding-bottom
padding
Obramowanie elementw
Za pomoc kaskadowych arkuszy stylw mona kontrolowa obecno i rodzaj ob
ramowania np. bloku tekstu czy te tabeli. Odpowiednie polecenie ma posta:
selektor
{
border-strona: warto:
}
W tym przypadku zamiast sowa strona podstawiamy jedn z poniszych moliwoci:
1e f t lewa strona,
ri ght prawa strona,
top gra,
bottom d.
Warto okrela natomiast styl lub grubo obramowania. Innymi sowy, w praktyce
wczenie obramowania dla akapitu na stronie moe wyglda tak:
P
{
b o rde r-left: solid ;
border-right: solid ;
border-top: solid ;
border-bottom: so lid ;
190
{
border: solid ;
}
C iekaw ostkjest to, e pierwszy sposb definiowania obramowania nie dziaa w star
szych wersjach przegldarki Netscape Navigator, natomiast skrcony zapis nie sprawia
jej adnych problemw.
Styl obramowania
Obramowanie danego elementu lub tabeli moe przybra dowolny styl. Oglny schemat
odpowiedniego polecenia wyglda mniej wicej tak:
selektor
{
border-style: warto:
}
Warto w tym przypadku moe przybra jedn z poniszych form:
{
border-style: none;
}
Linia ramki jest niewidoczna:
{
border-style: hidden:
}
Linia ramki skada si z linii wykropkowanej (zaley od przegldarki):
P
{
border-style: dotted;
}
Linia ramki skada si z linii przerywanej:
{
border-style: dashed;
}
Linia ramki skada si z linii cigej:
P
{
border-style: solid:
191
{
border-style: double:
}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P
{
border-style: groove;
}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P
{
border-style: ridge;
}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P
{
border-style: inset:
}
Linia ramki skada si z linii sprawiajcej wraenie wypukoci poprzez zastosowanie
dwch kolorw:
P
{
border-style: outset:
}
Na rysunku 4.19 wida przykad dziaania poszczeglnych rodzajw obramowania.
Pamitaj jednak, e przegldarki na rne sposoby interpretuj niektre style obra
mowania.
Stosujc odpowiedni konstrukcj stylw, mona kontrolowa wygld tylko niekt
rych krawdzi tabeli. Poniej zamieszczam odpowiednie polecenia.
Grna krawd:
border-top-style:
Lewa krawd:
border-le ft- s ty le :
Dolna krawd:
b o rd e r-b o tto m -sty le :
192
Rysunek 4.1 9.
P rzykad dostpnych
stylw obramowania
Przykad ob ram ow ania - DO TTED.
Prz^Wad ob ram ow ania - D ASH ED .
Prawa krawd:
b o rd er-righ t-style :
{
border-top-style: dashed:
b o rd e r-rig h t-style : double:
Szeroko obramowania
Obramowanie wybranych elementw moe mie rn grubo. Odpowiedni styl ma
nastpujc posta:
selektor
{
border-width: warto:
}
Warto w tym przypadku moe by dowoln dodatni liczb uzupenion o jednostki,
ktre opisaem na pocztku tego rozdziau.
193
Lewa krawd:
border-left-w idth:
Dolna krawd:
border-bottom-width:
Prawa krawd:
border-right-width:
Kolor obramowania
Ostatnim elementem obramowania, jaki mona kontrolowa, jest kolor. Do tego celu
suy polecenie border-color.
hl
{
border-color: red:
border-width: 3mm;
border-style: so lid :
}
Rwnie w tym przypadku mamy do czynienia z m oliwoci okrelania koloru tylko
wybranych krawdzi. Uywamy wtedy nastpujcych polece:
Grna krawd:
border-top-color:
Lewa krawd:
b o rd e r-le ft-c o lo r:
1 94
Dolna krawd:
border-bottom-color:
Prawa krawd:
border-right-color:
Wnioski
Style odpowiedzialne za wygld obramowania moesz dowolnie ze sob czy, dziki
czemu strona bdzie wygldaa znacznie ciekawiej. Definiujc obramowanie dla ja
kiego elementu, moesz sprbowa za jednym razem zapisa kilka waciwoci. Oto
prosty przykad:
P
{
border: solid 3mm green:
}
Oglnie rzecz ujmujc, zasada zbiorczego zapisu jest nastpujca: najpierw podajesz
rodzaj obramowania, nastpnie jego szeroko, a na kocu kolor.
Oczywicie, nic nie stoi na przeszkodzie, by zbiorczy zapis stosowa dla wybranej
krawdzi, tak jak to przedstawiono na nastpnym przykadzie.
P
{
border-bottom: so lid lmm red:
border-right: so lid lmm red:
}
Kontrola wygldu obramowania jest szczeglnie przydatna podczas formatowania tabel.
W ystarczy odpowiednie style przypisa do selektorw ta b le oraz td zamiennie z th.
table
{
background-color: s ilv e r:
font-size: 12px;
color: black;
te x t-a lig n : center;
}
Ciekawostk jest to, e moesz okreli niektre elementy niejako dwa razy raz dla
caej tabeli i drugi raz dla komrki. Przyjrzyj si przykadowi.
table
{
background-color: navy:
}
td
{
background-color: s ilv e r;
195
Takie rozwizanie spowoduje utworzenie tabeli, ktra bdzie miaa szare to we wszyst
kich komrkach oraz granatowe linie podziau. Rozwizanie to pozwala na przygoto
wanie bardzo ciekawych tabel przy minimalnym nakadzie pracy.
W pierwszym rozdziale przy okazji omawiania tabel wspomniaem o trzech dodatko
wych znacznikach, ktre wprowadza nowa specyfikacja jzyka HTML. Mam tutaj na
myli <thead></thead>, <tbody></tbody> oraz < tfo o d > < /tfo o d> . Jeeli uyjesz tych
znacznikw, m oesz w ten sposb kontrolow a zaw arto wybranej czci tabeli
nagwka, ciaa lub stopki. W niektrych przypadkach rozwizanie to jest bardzo
wygodne i warto o nim pamita.
Za pomoc kaskadowych arkuszy stylw moesz rwnie kontrolowa wygld samej
tabeli. Mam tutaj na myli rodzaj obramowania czy te jego kolor.
W tym przypadku dla selektorw ta b le , td lub th moesz uy stylu odpowiedzialne
go za rodzaj, kolor i grubo obramowania. Style te opisaem w poprzednim podroz
dziale, dlatego teraz zamieszcz jedynie kilka przykadowych listingw wraz z rysun
kami obrazujcymi ich dziaanie.
table
m argin-left: auto;
margin-right: auto;
border: 2mm double green;
T a b e l a 1.1. S p r ze d a p o m id o r w
1997
1998
1999
2000
Producent X
1 5 .2 3 4
1 8 ,1
2 ,2 2
0 ,1 1 9
Producent Y
1 ,0 1 0
1 1 ,1
1 3 ,1 3 3 1
1 4 ,2 2 5
Producent Z
2 4 ,1
2 8 ,1 2 2 1
3 2 ,1
3 0 ,1
TH. TD
{
border: dotted green;
}
TH.brak
{
border: none;
background-color: white:
}
TD.mini
{
b o r d e r : n one ;
196
Rysunek 4.21.
P rzykad
zmodyfikowanej
tabeli
T a b e l a 1 .1 . S p r z e d a p o m id o r w
* * *MAM:!!
i 1 9 9 7 : 1 9 9 8 : 1 9 9 9 :: 2 0 0 0
* i i' IV r v; T T!t "*'i r / * 1 v
15.234 ;
18,1
::
0.119
; Producent Y
} 1/
1lyf*
1.010
11,1
i 13,1331 :!
14,225
: Producent Z "
24,1
28,1221
32,1
30,1
Producent X "
1SM BBBBEcl
2,22
::
Dostpne wartoci
b o rd e r
border-top
border-right
border-left
border-bottom
b o r d e r - s t y le
border-left-style
border-right-style
border-top-style
border-bottom-style
b o r d e r - y v id t h
border-lefi-width
border-right-width
border-top-width
border-bottom-width
b o r d e r - c o lo r
border-left-color
border-right-color
border-top-color
border-bottom-color
Pozycjonowanie elementw
Za pomoc odpowiednich polece kaskadowych arkuszy stylw mona pozycjono
wa na stronie dowolne elementy tabele, nagwki, bloki tekstu czy te obrazki.
Specyfikacja CSS rozrnia nastpujce metody pozycjonowania:
s t a t i c (statyczne) kady element umieszczony na stronie ma nadane
pozycjonowanie statyczne; jest to jego domylne pooenie.
rei a ti ve (wzgldne) punktem odniesienia do okrelania pooenia wzgldnego
elementu jest jego domylna lokalizacja na stronie. Pozycjonowanie wzgldne
jest powizane bezporednio z konkretnym znacznikiem lub moe zosta
rozcignite za pom oc <di v></di v>.
197
position:relative;
top :1cm;
left :1cm;
position:absol ute;
left:80px;
top:80px;
}
fixed (ustalone) jest odmian pozycjonowania bezwzgldnego, jednak element,
ktrego dotyczy, zawsze pozostaje w widocznej czci okna przegldarki.
W praktyce wyglda to tak, jakby na stronie zostaa zastosowana ramka.
div.lewa
{
position:fixed:
top:10px:
width:180px;
}
Przyjrzyj si poniszym przykadom arkusza oraz rysunkom 4.22 i 4.23
mam nadziej, e dziki temu zauwaysz rnic midzy pozycjonowaniem
bezwzgldnym i wzgldnym.
di v
{
position: absolute;
top: lcm;
le f t : lcm;
Rysunek 4.22.
Elementy (nagwek
oraz blok tekstu)
na strome zostay
ustawione w sposb
bezwzgldny
Ulubione
N a rzdzie
Pomoc
\W yszuka)
A d re s
; f i Ulubione
^ M u ltim e d ia
N o rto n Antivirus
Online
198
{
position: re la tiv e :
top: lcm;
le f t : 1cm:
}
Rysunek 4.23.
B lok tekstu zosta
ustawiony na stronie
w sposb wzgldny
3 T y tu S tr o n y W W W
PRk
E d y c ja
W id ok
M ic r o s o ft In te r n e t E x p lo re r
Ulubione
21
A d re s
c z a
N a rzdzia
Pomoc
W y s zu k a j
[ j j Ulubione
f M ultim edia
) benchm ark.pl
P C .com .pl
g J J a m a M a st a h a
j| | | |
3
'^ ]B S K Online
[w j * d
No rto n Antivirus
] In fo s e e k
g ] Helion
4J G o tow e
| f M j kom puter
Okrelanie pozycji
Niezalenie od metody ustawiania elementw na stronie ich pozycja jest okrelana za
pom oc polece l e f t , r ig h t, to p oraz bottom, uzupenionych o warto liczbow lub
procentow. Poniej zamieciem kilka prostych przykadw:
P
{
position: re la tiv e ;
top: lcm;
le f t : lcm:
}
div.lewa
{
p o sitio n :fixe d ;
top:10px;
width:180px:
Wymiarowanie elementw
Dla wybranych elementw mona rwnie zdefiniowa wysoko oraz szeroko. Za
okrelanie tych rozmiarw odpowiadaj dwa polecenia: w id th i h e ig ht. Przykad uy
cia wymiarowania elementu znajduje si poniej.
199
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=IS0-8859-2">
<style type="text/CSS">
p.jeden
{
position: absolute:
le f t : 10px;
top: 1cm:
te x t-a lig n : ju s tify :
border: 1mm so lid :
width: 250px:
}
p.dwa
{
position: absolute;
le f t : 300px;
top: lcm:
te x t-a lig n : ju s tify ;
border: 1mm solid;
width: 250px;
}
< /s ty le>
</head>
<body>
<p class="jeden">Przykadowy blok tekstu...</p>
<p class="dwa">Przyk?adowy blok tekstu...</p>
</body>
</html>
Na rysunku 4.24 przedstawiem dwa bloki tekstu, ktrych szeroko zostaa okrelona
na 250 pikseli. Dodatkowo uyem jeszcze polecenia border, by pokaza, e s to dwa
bloki zupenie niezalene od siebie.
Rysunek 4.24.
Przykad
wymiarowania
elementw
i M ozilla Firefox
Plik
Edycja
Widok
mm
Historia
Zakadki
Narzdzia
Pomoc
lip Danowski
Helion
Disable* &
3 Hardware
Wiadomoci O
Images*
Pozycjonowanie
Information*
Miscellaneous*
Outline* * * Resize
200
Oczywicie, tekstem moemy oblewa nie tylko obrazki, ale rwnie inne elementy.
Na rysunku 4.25 zamieciem przykad, w ktrym tekst oblewa zawarto znacznika
<d iv> < /div> .
Danowski Mozilla Firefo*
Plik
Edycja
Widok
Historia
* ./ - i*: v j Haiion
. .
t-2 Danowski
;! Disable* Q, Cookies'
Zakadki
Narzdzia
Pomoc
j| http d l danowski.pt/ksazki/wedtug-terii/rtandarri/pozycjonowanie-j-optymafaaga-stron-wo
J Hardware
CSS
J Wiadomosci
Forms
; j filei.V/C-yUsers/...20WWW/testl html
Images-
Pozycjonowame
Information
Miscellaneous
Outline-
j W * ; Bartosz Danowski
J Materialy
ksiazki
t, Resize
Slowntto
Programy
-------
Options t /
Kategorie
Bestseller Wydawnictwa
Helion
czerwiec 2007
Pozycjonow anie
P r a k ty c z n y p rz e w o d n ik po
stron WWW
In te rn e c ie
J M TO E MOI
* Internet
i o p ty m a liz a c ja
s k u te c z n e } p ro m o c ji w
__________
Fotografia cyfrowa
Sk V I
+ir
* Komputer PC
Konfiguracja
1optymalizacja
<
Monta 1naprawa
Podkrcanie i tuning
* Monta wideo
* Nagrywanie pyt
* Programy biurowe
Systemy operacyjne
* Tworzenie stron WWW
* W edug serii
ABC
wiczenia
Ebooki
Ilustrowany przewodnik
Kurs
k Po prostu
Standard
0
Comp*. } 3.969s
201
Podczas tworzenia stron WWW czasem chcemy, by jaki element nie by oblany. Wtedy
z pomoc przychodz nam polecenie e le a r i wartoci l e f t , r ig h t, both oraz none.
<hl s ty le = " c le a r:le ft;>
Poniszy przykad prezentuje tabel oblan przez blok tekstu oraz nagwek stopnia
pierwszego.
<html>
<head>
<meta http-equiv="Content-type content="text/html ;charset IS0-8859-2">
<title>Tytu? Strony WWW</title>
<style type="text/css">
di v
{
width:400px:
}
td
{
border:solid lpx black;
}
table
{
width:200px;
height:400px;
f lo a t : le f t ;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>l</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>
<p>Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. Przykadowy blok tekstu oblewajcy tabel. Przykadowy blok tekstu oblewajcy
tabel. </p>
<hl>Nagwek HI, ktry ma znale si pod tabel</hl>
</body>
</html>
{
c le a rile ft:
202
Rysunek 4.26.
P rzykad dziaania
stylu elear
1
Nagwek H I, ktry ma
znale si pod tabel
Oczywicie, w zalenoci od uytej wartoci, moemy tamowa pywanie elementw
z prawej ( r ig h t ) , lewej ( l e f t ) lub obu stron jednoczenie (both).
{
position: absolute:
left:80px;
top: 80px;
font-size : 50pt:
font-weight: bold;
color: black;
z-index: 1:
}
p#cien
{
position: absolute;
left:88px;
top: 88px;
fon t-size: 50pt;
font-weight: bold;
Rysunek 4.27.
Ustalanie kolejnoci
nakadanych
elementw
203
Wydawnictwo
HELION
color: s ilv e r:
z-index: 2:
}
plwydawnictwo
{
position: absolute:
left:80px:
top: 60px:
font-size: 20pt:
font-weight: bold;
fo n t-style : it a lic :
color: black:
z-index: 3:
Wnioski
Jak si zapewne domylasz, pozycjonowanie elementw pozwala Ci na dowolne okre
lenie wszystkich elementw na stronie WWW, a co za tym idzie, masz ogromn kon
trol nad caoci. Pozycjonowanie w moim odczuciu jest rozwizaniem na miar
wprowadzenia tabel i oferuje znacznie wiksz swobod tworzenia. Jednak zanim opu
blikujesz stron wykonan w ten sposb, musisz j dokadnie sprawdzi, by pniej
nie okazao si, e sjakie problemy w poszczeglnych przegldarkach.
204
kD 2.1.4.0 - bcz_nazwy
PiiiTl Edycja
Szukaj
Nowy plik
Now y z szablonu
XHTML
PHP
JavaScript
Opcje
Ctrl+N
C3 Otwrz plik...
Pomoc
li I
i 1!.
C tr* 0 >
L? Ostatnio uywane
| | Otwrz ponownie
S hift* C trlfO
Zapisz plik
X F tT M L U
Ctr+S
WML
S hift* Ctr+S
Kana RSS
Szablon uytkownika
ta h o m a ,
a r ia l,
H e lv e tic a ,
s a n s - s e r if;
Podgld dokumentu
S 3 Zamknij plik
p a dl a i nn gg : O
px;
f o n t - s i z e : le m ;
t e x t - a lig n : le f t ;
S hift* C trl* W
i mg
{ b o r d e r : O p x;
Drukuj dokument...
Kolorowanie skadni
Zmie stron kodow...
hi*
{ f o n t - s i z e : 1 .4 e m ;
f o n t - w e ig h t : b o ld ;
F4
Tffrargmr-TTpy
C trl* W
S hift* C trl* V
Alt+F4
h2
{ fo n t- s iz e :
1 .2 e m ;
1____________
Dostpne w artoci
position
left
top
p (position: absolute;}
p ( le f t : 1cm;}
p (top: 1cm:}
bottom
right
width
height
z-index
flo a r
clear
p (height: lOOpx;}
p (z-index: 1;}
img ( f lo a t : r ig h t:}
205
bez_nazwy (VWn) Q j
b o r d e r - w id t h
;i| azimuth:
v background:
v, bac kg round-attachauj
background-colcr:
,i background-image:
. background-positioi
.. background-repeat:
border:
border-widt^i
her dr-st j
inherit
$ border-collapse:
border-color:
border-spacing:
border-style:
border-top:
3, border-right:
3; border-bottom:
border-left:
x border-top-color:
bcrder-nght-color
($; border-bottons-colo:
border-left-color:
border-top-style:
k n r r t T - r i a h r r v l m
Podgld
INS
( A - ; N U M R o z m ia r 4 B (0,02KB)
K :1 5 ,W :3
206
Rozdzia 5.
Praktyczny projekt.
Moja strona domowa
Mamy za sob niezbdn cz teoretyczn, nadszed zatem czas, by zaj si prak
tycznym przygotowaniem strony domowej. M am nadziej, e zdajesz sobie spraw
z tego, e nie wystarczy nauczy si skadni jzyka HTML (XHTML) czy CSS, by do
brze przygotowywa strony. Sprawa nie jest tak prosta, jak to si moe wydawa, po
niewa tworzenie stron WWW wymaga praktyki. Oczywicie, bez prb i bdw nie
zdobdziesz dowiadczenia, dlatego dokadnie czytaj wszystko, co zawieraj strony
tej ksiki. Mam nadziej, e dziki kolejnym rozdziaom zdobdziesz wiele wanych
informacji i bdziesz mg bardziej wiadomie projektowa strony.
208
Uwaga
209
Jeeli po przeczytaniu tego wywodu na temat posiadania strony WWW nadal uwaasz,
e chcesz j mie, pora zastanowi si nad kilkoma wanymi sprawami.
V
Uwaga
Gromadz materiay
Zanim zaczniemy prac z edytorem i kodem, warto zebra wszystkie materiay, tak
by pniejsza praca moga przebiega gadko i bez komplikacji. Osobicie bardzo nie
lubi robi przerw wynikajcych z braku odpowiedniego tekstu na jedn z podstron.
Przygotowanie odpowiedniego tekstu wybija mnie z rytmu i zazwyczaj nie potrafi
stworzy czego dobrego na zawoanie. W efekcie praca przeciga si na nastpny
dzie, a kady pretekst jest dobry, by nie usi przed komputerem.
W zwizku z tym zanim zaczniesz tworzy stron, spokojnie usid i przemyl, co
chcesz na niej umieci. Nastpnie zbierz lub przygotuj odpowiednie teksty, zdjcia
lub inne elementy przewidziane do publikacji. Pamitaj, e przygotowanie tych mate
riaw jest nieuniknione i prdzej czy pniej bdziesz musia to zrobi.
Postanowiem, e kolejna wersja mojej strony WWW bdzie zawieraa nastpujce dziay:
Strona gwna przejcia do poszczeglnych dziaw, informacje o nowociach
na stronie, formularz umoliwiajcy zapisanie si na m oj list mailingow,
za pom oc ktrej bd informowa staych goci o zmianach na stronie.
Ksiki krtki opis kadej pozycji, poprawki, przykady oraz dodatkowe
informacje, ktre nie znalazy si w ksice.
Artykuy dzia ten ma zawiera kopie moich artykuw, ktre zostay
opublikowane w prasie komputerowej. Poza tym znajd si tam zwizane
z moimi zainteresowaniami artykuy, ktre nie byy nigdzie publikowane,
a uznaem, e warto je gdzie zaprezentowa. Planuj rozbudowywa t cz
strony o nowe opracowania w miar swoich moliwoci i wolnego czasu.
O mnie skrcony yciorys, zdjcia, odnoniki do ciekawych stron zwizanych
z miastem, w ktrym mieszkam, informacje o ulubionych filmach, muzyce,
ktrej sucham, i wszystkim, co ma na mnie mniejszy lub wikszy wpyw.
Przyjazne strony zbir odnonikw do innych ciekawych stron.
Kontakt formularz pozwalajcy na nawizanie ze m n kontaktu.
Sklep prosty sklep w ktrym znajdzie si wykaz wszystkich moich ksiek.
Udao mi si okreli mniej wicej zawarto mojej strony, a teraz duga droga do
skompletowania zawartoci poszczeglnych dziaw.
2 10
Tworzc teksty na potrzeby strony WWW, musisz pamita o tym, e dziaanie to nie
jest takie proste, jak si moe wydawa. Badania przeprowadzone na internautach ju
dawno wykazay, e m aj oni specyficzne podejcie do czytanego tekstu. Piszc tekst
przeznaczony do publikacji, musisz pamita o kilku poniszych zasadach.
Tekst powinien by krtki i zwarty. W intemecie ludzie nie przepadaj
za czytaniem dugich elaboratw i wol, gdy si im dostarcza sam esencj.
Najwaniejsze elementy powinny znajdowa si w pocztkowej czci tekstu.
Internauci bardzo rzadko przewijaj stron, aby zobaczy, co znajduje si poza
obszarem widocznym na ekranie monitora. Na rysunku 5.1 przedstawiem
przykad dugiej strony, ramka oznacza obszar widoczny na ekranie monitora.
Staraj si tak skonstruowa tekst, aby to, co wida, zachcio internaut
do przewinicia strony.
Staraj si uywa sw kluczowych w tekcie. Z myl o dobrej pozycji strony
w wyszukiwarce staraj si uywa w tekstach przeznaczonych do publikacji
na stronie sw kluczowych, pod ktrymi strona ma by widoczna. Tekst musi
by naturalny i przede wszystkim kierowany do czowieka, a nie robota
wyszukiwarki. Wicej informacji na temat sw kluczowych oraz ich doboru
znajdziesz w dalszej czci ksiki.
Struktura witryny
Teraz przyszed moment, w ktrym musimy popracowa przez chwil z kartk papie
ru, poniewa potrzebna jest jasna i przemylna struktura witryny w celu rozplanowa
nia systemu nawigacji. N a rysunku 5.2 przedstawiem wstpny schemat rozwizania
problemu nawigacji na mojej starej stronie.
Przyjrzyj si rysunkowi 5.2 i zwr uwag na to, e wszystkie linie czce poszcze
glne dziay s odpowiednikami odsyaczy. Moesz przyj, e niemal kady z tych
odnonikw dziaa w dwie strony. cilej rzecz biorc, ogldajcy stron zawierajc
mj yciorys po klikniciu odsyacza do moich zainteresowa muzycznych i filmowych
zawsze bdzie mia moliwo powrotu do poprzednio ogldanej strony. Poza tym
zaplanowaem rwnie moliwo swobodnego przejcia na kolejne poziomy. Skompli
kowana struktura odsyaczy pomidzy podstronami mojego serwisu jest sporym wy
zwaniem, gdy atwo pogubi si w tej pltaninie, co prowadzi moe do sytuacji,
w ktrej wystpi zerwane, puste odnoniki prowadzce donikd.
Pamitaj, e im lepsza struktura wewntrznych odnonikw, tym lepiej dla Ciebie.
Dokadniej mwic, internauta bdzie mia wicej swobody w dotarciu do poszcze
glnych dziaw witryny, a robot wyszukiwarki sieciowej dokadniej zindeksuje po
szczeglne czci strony.
211
Rysunek 5.1.
Przykad dugiej
strony, dodatkowo
za pom oc ramki
oznaczyem
obszar widoczny
na pierwszym
ekranie monitora
Bartosz Danowski
l i t e r a t u r a i n f o r m a t y c z na
SOom gMwna II KsIZki j| artykuy |f O mftls l'ir.yjjziie attony | Kontakt ' 'Mkd I
nwmyki.pl Standard
Kategorie
Bestseller Wydawnictwa
Heiofi
czerw iec 2007
- Fotografia cyfrowa
* Konfiguracja i optymakzac
Skdwyszukiwarki bior
aiformacje o wywietlanych
v Monta i naprawa
Podkrgcanie i tuning
Monta wideo
przed konkurencja?
- Nagrywanie pyt
Dziaanie wyszukiwarek
Dobr odpowiednich stwkluczowych
Poprawny uktad elementw stron
UZywame odsyaczy wewntrznych 1z
Uatwianie indeksacji witryny
Monitorowanie ruchu na stronie i je) popularnoci
Zapewniam funkcjonalnoci witryny
Dodatkowe rechndn promocji stron
Wystrzeganie si nieuczciwych pc
Wyprzedi konkurencj I uatw swoim ki
swojej oferty.
Zobacz to:
Darmoweopogremowanie. Leksykon
komputer PC pie.uln* kupujcego
Liczba komentarzy: 4
Cd nowego * Bartosz Oanowii f l
S Pozycjonowanie 1 optymakzacja st
si robi obszerny poradmfc na temat
optymalizacji stron WWW. Wnajbliszych dniachksika
powinna pojawi si w sprzeday. Uwag jest to projekt
nad ktrym pracowaamwsplnie z Michaem. j
Nowa ciekawa puu-nocjia Bartosz Oanows*i H
iw I U'*
le j ksika Pozycjonowanie 1optymakzacja stron wyrw.
Jak s* to rotajest objta now i mamnadziej ciekaw
- promocj. (...)
* Ilustrowany przewodnik
Tumaczenia
Optnt czytelnikw
nejoekawyszch
programw iv form
ksiki to doskonay'
pomys. kupdem,
uywam i dzikuj.
R E W m l
D arm ow e |
Bogi
Poradnik webmastera
- marcoos.techbiog
RSS
i i Wszystkie wpisy
Kmzki
u3 Artykuy
ML
Newsletter
)esh chcesz by powiadamiany o
nowociach na strome zaprenumeruj
biuletyn Informacyjny -
'
212
Przygotowuj poszczeglne
elementy witryny
Skoro wiesz ju, co chcesz umieci na stronie, nadal jeste pewien sensu jej posiada
nia oraz przygotowae materiay i okrelie odbiorc, czas zaj si tworzeniem pro
jektu. Przedstawi krok po kroku opis powstawania mojej witryny; jednak by byo to
moliwe, musiaby zapozna si z ni w intemecie. Wystarczy, e odwiedzisz nast
pujcy adres http://danowski.pl.
W zwizku z tym, e nie wszyscy m og w tym momencie odwiedzi moj stron, po
stanowiem prezentowa zrzut ekranu wybranego fragmentu strony, a nastpnie opisy
wa, jak powstaa strona na nim widoczna. W ydaje mi si, e takie rozwizanie jest
dobre i pozwoli zrozumie, co robiem.
Uwaga
Cay projekt opisany w dalszej czci opiera si na jzyku XHTML w wersji Strict,
a co za tym idzie, struktura strony i ukad poszczeglnych elementw zostay opra
cowane przy wykorzystaniu kaskadowych arkuszy stylw. Innymi sowy, na stronie
nie znajdziesz tabel.
213
Strona gwna
Najpierw zajmijmy si stron gwn, a po jej stworzeniu zaczniemy si posuwa coraz
dalej. W zwizku z tym, e chc m oj witryn skierowa do moliwie duego grona
uytkownikw intemetu, postanowiem maksymalnie ograniczy ilo elementw gra
ficznych. W przypadku strony gwnej grafika wystpuje zaledwie w kilku miejscach
i jest bardzo skromna. Pozostae elementy uzyskaem, stosujc moliwoci jzyka HTML
(XHTML) oraz CSS.
Ukad strony rwnie jest bardzo prosty, ale dziki temu sprawia wraenie lekkoci
oraz bez wtpienia jest czytelny, a o to mi chodzio. Grne menu nawigacyjne zawie
ra wykaz najwaniejszych dziaw strony. Natomiast boczne menu to dodatkowy po
dzia kadego z gwnych dziaw strony oraz krtkie recenzje ksiek i kilka dodat
kw, o ktrych wspomn w odpowiednim momencie. Rysunek 5.3 przedstawia widok
kompletnej strony gwnej. Warto w tym miejscu zauway, e jej ukad w duej czci
jest podstaw kolejnych podstron.
Cay projekt moemy bez problemu podzieli na cztery gwne czci; nagwek, stop
k oraz szersz lew oraz wsz praw kolumn. Dziki temu przygotowanie caego
projektu moemy podzieli na kilka mniejszych etapw, ktre opisaem w kolejnych
podrozdziaach.
214
Rysunek 5.3.
Strona gwna
serwisu danowski.pl
inform a t y czna
_________________
Skep
Plagiat
3 2 8 .0 6 .2 0 0 7 > K om entarzy: 7
KHka dni tem u trafi do mnie mail z odnonikiem d o stro n y z
pirackimi kopiami ksiek (e-b o o k i). W rd kilkunastu tytuw s
moje publikacje. S praw a nie je s t now a i o d d aw n a wiem o tym, e
kilka ksiek z o stao z esk an o w y ch i nielegalnie u d o stp n io n ych w
sieci. Jed n ak tym razem p o d c za s ru ty n o w y ch ogldzin moj
u w ag przykua ksika, k t ra jak d o [...]
Czytaj cao
Opinie czytelnikw
Zdecydowaam si
do Ciebie napisa,
poniewa bardzo
spodobaa m i si
konwencja ksiki
"Komputer PC wiczenia
praktyczne. Wydanie
IT ... naprawd
super. Wszystko je s t napisane jasno,
zwile i klarownie...
atw o mona znae to czego si
Bogi
Tako rze cz e Shrew
WebAudit Blog
i Poradnik w ebm astera
m a rcoos.techbiog
n e t to
RS5
3 W szystkie wpisy
KsiZki
Artykuy
C z y ta j c ao
N ew sletter
J Powered by Wordpnws
21 5
Plik
Edycja
Widok
Histor
Zakadki
jU
Helion
Danowski
Hardware
CSS-
Narzdzia
Pomoc
'ir
filg/Z/C^sers/Bartek/Desktop/StronaVQW W W /danowski.pl/index.html
Forms-
Wiadomoci
Images-
Pozycjonowanie
Information-
Miscellaneous-
# Outline-
2 Resize-
Matenay ks.zfc.
Tools- -
Z Z Z Imj
W Sownik.
j View Source-
Programy
Options-
P*g*R*nk Comp
i 0520s
[/OH
Aby uzyska to widoczne na rysunku 5.4 naley przygotowa wski obrazek o pio
nowej orientacji z odpowiednimi kolorami. Nastpnie to naley wstawi za pom oc
kaskadowych arkuszy stylw, przypisa je do selektora body i zablokowa jego powie
lanie w pionie. Przy okazji mona wyczy podkrelenia dla odnonikw. Odpowiedni
fragment arkusza stylw znajduje si poniej.
body
{
background-image: u rl(o b ra z k i/tlo .jp g );
background-color: white;
background-repeat: repeat-x;
}
a
{
text-decorati on:none:
}
Pierwsze polecenie ustawia obrazek w tle strony, drugie ustawia biay kolor ta, a ostat
nie wymusza powielanie obrazka wycznie w poziomie.
216
Teraz pora sign po kaskadowe arkusze stylw i za ich pomoc wymusi ukad na
gwka zgodny z naszymi oczekiwaniami. Przypomn tylko, e dymy do sytuacji,
w ktrej projekt bdzie wyglda tak samo jak przykad widoczny na rysunku 5.3.
W pierwszej kolejnoci dla selektora body musimy doda style odpowiedzialne za usta
wienie zerowych marginesw. Dla pewnoci warto zdefiniowa margines i dopenienie.
Odpowiedni wpis bdzie wyglda tak:
body
{
background-image: u rl(o b ra z k i/tlo .jp g ):
background-color: white:
background-repeat: repeat-x:
margin:0;
padding:0:
}
Logo widoczne w nagwku jest obrazkiem oraz odnonikiem do gwnej strony. Dla
tego kolejnym krokiem jest wyczenie obramowania oraz dopenienia dla wszystkich
obrazkw. Robimy to, dodajc do zewntrznego arkusza stylw poniszy fragment kodu.
i mg
{
border; 0:
paddi ng:0;
217
Teraz przysza pora, aby elementy zamknite w znacznik <di v i d="nagl owek''></di v>
ustawi na waciwym miejscu, okreli szeroko i wysoko kadego z nich oraz wy
rodkowa go na stronie. Wszystkie wymienione czynnoci znowu wykonujemy, korzy
stajc z odpowiednich wpisw w zewntrznym pliku kaskadowych arkuszy stylw.
div#naglowek
{
background-color:#9F3B43:
wi d th :770px:
height: 106px:
m argin-left:auto;
.
margin-right:auto;
'
{
margi n - e f t : 10px;
margin-top:9px;
}
Drugim elementem nagwka jest menu, ktre w tej chwili jest zwyk list wypunk
towan. Oczywicie, musimy to zmieni. W tym celu do zewntrznego arkusza stylw
musimy dopisa nastpujcy kod. Dziki temu rozwizaniu nadal korzystamy ze znacz
nikw listy, ale nakazujemy przegldarce, aby traktowaa ten element ja k element
blokowy o rozmiarze automatycznie dopasowujcym si do zawartoci. Rwnie w tym
przypadku skorzystaem z selektora potomka.
div#naglowek l i
{
d isp la y:in lin e ;
width:auto;
flo a t: le f t;
}
Dalsze czynnoci ograniczaj si ju tylko do okrelenia pooenia poszczeglnych
elementw oraz wczenia obramowania i ta. W swoim projekcie rozwizaem to za
pomoc nastpujcych wpisw do zewntrznego arkusza stylw.
218
div#naglowek ul
{
paddlng:0;
margin-top:4px;
margin-1eft:10px:
div#naglowek l i
{
display:bock:
width:auto;
f 1o a t:1e f t :
paddi ng:5px:
border:lpx solid white:
border-bottom:none;
margin-right:2px:
background-color:#91242A;
}
Pierwszy selektor okrela pooenie listy wzgldem lewego i grnego marginesu. Do
datkowo zostao wyczone dopenienie. Natomiast druga grupa wpisw ustawia dope
nienie dla poszczeglnych przyciskw, dziki czemu tekst bdzie znajdowa si na ich
rodku. Poza tym wczyem obramowanie oraz ustawiem kolor ta. Zwr uwag
na to, e najpierw ustawiem kompletne obramowanie dla wszystkich krawdzi, a na
stpnie wyczyem je dla dou. Dziki temu zaoszczdziem kilka bajtw kodu.
Aby nagwek uzna za gotowy brakuje nam jeszcze odpowiedniego formatowania hiperczy, a dokadnie tekstu widocznego na naszych przyciskach. Zmiany, ktre naley
wprowadzi, nie s skomplikowane i tradycyjnie wprowadzimy je za pomoc kaskado
wych arkuszy stylw. Wpisy, ktre m usz si znale w oddzielnym arkuszu stylw,
s widoczne poniej.
a
{
font-weight:bolder;
color:w hite;
text-decoration:none:
}
Jeeli chcemy zmienia wygld przycisku, wystarczy dopisa do arkusza stylw dodat
kowy selektor wraz z waciwociami.
div#naglowek li:h o v e r
{
border-bottom:solid 3px white:
background-color:#9F3B43:
padding:5px:
}
Pora zaj si stopk. Podobnie jak w przypadku nagwka, rwnie tym razem po
midzy znacznikami <di v></di v> zamykamy wszystkie elementy majce znale si na
kocu strony. Dodatkowo dla znacznika przypisujemy identyfikator id=stopka'. Od
powiedni kod stopki mojej strony wyglda mniej wicej tak:
<div id="stopka">
Bartosz Danowski to p y Wszystkie prawa zastrzeone
< /di v>
219
Pamitaj, e w tej chwili stopka znajdzie si bezporednio pod nagwkiem, ale ule
gnie to zmianie po tym, jak dodamy pozostae elementy.
Efekt dotychczasowej pracy jest widoczny na rysunku 5.5.
Bartosz D anowski
l ite r a t u ra i n f o rm a ty c z n a
220
<div id="tresc">
<div id="lewa">
</div>
<div id="prawa">
</div>
</div>
221
Przykadowy kod wpisu musi znale si pomidzy znacznikami <di v i d=" 1ewax / d i v>
i wymaga odpowiedniego formatowania za pomoc kaskadowych arkuszy stylw. Do
kadniej mwic, naley okreli rozmiar czcionki, kolory, odstpy pomidzy akapi
tami oraz rozmiary pojedynczego wpisu. Niezbdne polecenia zamieciem poniej
i rozdzieliem stosownymi komentarzami.
h2.tytu
{
font-size:14pt;
padding:0;
margin:0;
}
Powysza definicja okrela rozmiar czcionki nagwka stopnia drugiego oraz wycza
dopenienie i marginesy.
p.data
{
font-size:9pt;
paddi ng:0:
margi n: 0:
color:#2F63B3;
}
p.data span
{
font-weight:bolder;
222
- , Noc pozycjonerw
B R Autor: Bartosz Daaowito Data:
\2.(P200'komentarz)
| &
doczeka spotkana
W rd patronw imprezy znajduj si Onet pl, Helion pl, Home.pl, LAB,
Netsprmt.pl. [ ]
?; Wicej
Nero - problemy z jzykiem polskim
Autor: Bartosz Danowski Data: i9.06.200'1Komentarzy: 0
Wicej
Wicej
Plagiat
Autor: Bartosz Daoowila Data: 28.06.200' Komentarz)-; 0
Wicej
prawa kolumna
Bartosz Danowski C Wszystkie prawa zastrzeone
223
div#stopka
{
color:white:
width:100:
height:30px;
background-color:#9F3B43;
text-align :center;
cleariboth;
}
di v#l ewa
{
paddi ng:5px;
margi n:0:
wi dth:440px;
padding-top:20px:
background-color:#EFEDED:
f 1oat: le f t ;
}
div#prawa
{
width:320px:
f l o a tirig h t;
background-color:whi t e :
}
224
225
W pierwszej kolejnoci naley wczy grn krawd moduu z menu. W tym celu
wystarczy wprowadzi drobn zmian w ju istniejcym arkuszu stylw.
div#szukaj, div#kategorie
{
border-top:solid 4px green:
padding:10px:
}
Dla caej listy majcej sta si menu wyczamy punktory oraz marginesy i dopenienia.
div#kategorie ul
{
list-style :n o n e ;
margin:0;
paddi ng:0:
}
226
Widok gotowej
strony gwnej
I N o c p o zycjo n cr w
I
S zu k a j
'(fi!
Szukaj
K a te g o rie
N e ro - p ro b le m y z j zy k ie m p o lsk im
Anton Bsrtnw. Dmowski D m : 14 04-20071
Dostaem kilka pyta dotyczcych tego samego problemu W skrcie
chodzi o to, e oryginalny zakupiony w polskim sklepie pakiet Nero 7 me
wywietla si w jzyku polskim Przyczyn takiego stanu rzeczy jest bd
instalatora N a szczcie rozwizanie jest bardzo proste
Ogoszenia
Porady
-----------------------------Pozycjonowane stron
p,gjCTz
Strony W W W i internet
Wie
R e w e la c y jn a w ty c zk a do F ire fo k s a
Autor:
P la g ia t
tutor: Bartosz Dkot * D i i i : 2t.0&3!Xf kominiarzy: 5
Kilka dni temu trafi do mnie mail z odnonikiem do strony z pirackimi
kopiami ksiek (e-boctd) Wrd kilkunastu tytuw s moje
publikacje Sprawa nie jest nowa i od dawna wiem o tym, e kilka
ksiek zostao zeskanowych i nielegalnie udostpnionych w sieci
Jednak tym razem podczas rutynowych ogldzin moj uwag przykua
ksika, ktra jak do [. .]
W icej
227
Rysunek 5.8.
Strona z przykadow
notatk
A Mapa 3tiony
informatyczna
Kontakt 1 Sklep ]
w m m
Szukaj
Kategorie
* A ktualnoci
Ciekaw e program y
Mozilla
7
Pobierz program General CleanToot,
Nero
Nie na te m a t
Zobacz te:
Nielegalne legalne Nero 7
O goszenia
Porady
Pozycjonow anie stro n
Prgierz
S tro n y WWW i in te rn et
W anie pisz
B IO S
Bogi
- Poradnik w eb m aste ra
n e t to
m arc o o s.te ch b lo g
Tako rze cz e Shrew
W ebAudit Blog
RSS_________________
1*3 W szystkie w pisy
O Ksiki
Q Artykuy
PS
N ew sletter
Jeli c h c e s z b y pow iadam iany o
now o ciac h na stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y *
228
</lll>
<p>0d te j chw ili Nero powinno prawidowo dziaa w naszym rodzimym jzyku.</p>
<h3>Zobacz te:</h3>
<ul>
<1 i><a href="nieleg_nero7.html'i>Nielegalne legalne Nero 7</a></li>
<li><a href="nowe_nero7.html">Nowa wersja Nero 7</a></li>
<1 i><a href-"nero7082.html">Nowe Nero 7 .0 .8 .2</a></li>
</ul>
Rysunek 5.9 przedstawia efekt dziaania powyszego kodu. Akurat w tym przypadku
dodatkowe formatowanie nie jest wymagane. Jeeli jednak uznasz, e pewne elementy
powinny wyglda inaczej, oczywicie moesz to zrobi za pomoc kaskadowych ar
kuszy stylw.
Rysunek 5.9.
Bartosz Danowski
W y n ik d zia a n ia
p o w yszeg o kodu
l it e r a t u r a i n i o r m a t ycz n a
p i
Szukaj
[ .......... -
.....................
M m
Kategorie
Aktualnoci
Ciekawe program-.
Zobacz te:
MonBa
Nero
Nie oa temat
Ogoszenia
Porady
Pozycjonowanie stron
Prgierz
Strony W W W i internet
Wanie pisz
e*
prawa zastrzeone
Sekcja Ksiki
Osoby, ktre na mojej stronie WWW klikn przycisk Ksiki, trafi do oddzielnej czci
witryny, zawierajcej wykaz napisanych przeze mnie ksiek. Podobnie jak na stronie
gwnej, mamy do czynienia z krtkimi notatkami i dopiero po klikniciu odnonika
Czytaj cao moemy zobaczy peny opis danej publikacji. Rysunek 5.10 przedsta
wia widok listy krtkich zapowiedzi. Zwr uwag, e obok kadej pozycji znajduje si
maa okadka ksiki. Zmianie ulego rwnie menu widoczne z prawej strony.
Za utworzenie kadego ze skrconych wpisw odpowiadaj te same struktury znacz
nikw co w przypadku strony gwnej. Innymi sowy, mamy prawie gotowy arkusz
stylw do tego, aby sformatowa pojedynczy wpis. Poniej zamieciem przykadowy
kod, ktry powinien znale si pomidzy znacznikami <d iv id = "le w a "> < /d iv> . Do
datkowo pogrubiem fragment odpowiedzialny za wstawienie obrazka.
229
Rysunek 5.10.
Widok sekcji Ksiki
lite r a tu r a in f o r m a ty c z n a
Stro n a gw na || K si k i || Artykuy
_________ ______ _
Danowski.pl Ksiki
K ontakt 1 Sklep
Szukaj
Ksiki
Kategorie
F otografia cyfrow a
In te rn e t
Komputer PC
* K onfiguracja i optym alizacja
* M onta i napraw a
* P odkrcanie i tunm g
M onta wideo
N agryw anie pyt
Program y biurowe
C zytaj c a o
S ystem y opera cy jn e
W edug serii
* ABC
wiczenia
SUMWWW
C z y ta j c ao
Opinie czytelnikw_________
Jestem ju z trz y
miesice po
studiowaniu Pana
ksiZek ktre sa
super!
1 7 .0 4 .2 0 0 7 ^ K o m en ta rz y : 2 E dytuj
m a rc o o s. te chblog
n e t to
T ako rze cz e Shrew
W ebAudit Blog
Poradnik w eb m aste ra
C z y ta j c a o
RSS
3 W szystkie wpisy
3 Ksiki
3 Artykuy
N ew sletter
Jeli c h c e s z b y pow iadam iany o
now o ciac h na stronie zaprenum eruj
b iu le ty n I n fo r m a c y jn y
n o n e I Wetwies.iM' "'koiaj
230
<d1v class="wpis">
<h2 class="tytul">ABC sam optymalizuj komputer</h2>
<p class="data"><span>Autor:</span> Bartosz Danowski <span>Data:</span> 12.07.2007
<span>Komentarzy:</span> 0</p>
<p><a href="abcopt.html"><img src="obrazki/abcopt.jpg" alt="ABC sam optymalizuje
komputer" title="ABC sam optymalizuje komputer" width=125" height="163" /></a>
Pierwsza z deklaracji okrela sposb, w jaki obrazek zostanie oblany tekstem. W tym
przypadku obrazek znajdzie si z prawej, a tekst z lewej strony. Kolejne wpisy defi
niuj wygld ramki oraz margines i dopenienia. Ostateczny efekt jest widoczny na
rysunku 5.11.
Rysunek 5.11.
P rzykad wykazu
ksiek krtki opis
p lus okadka ksiki
Bartosz Danowski
lit e r a t u ru in f o r m a t y c z n a
! Strona glowo j j! Ksiki |j Artykalyi O ma ii
--------- 1
Prgierz
mWW
W
Czytaj cafo
231
A Mapa strony
Bartosz Danowski
i Srrv*M gk>w**a ' K siki '! Aityfcuy j o m w j Przyjazna strony '[ Kontakt jj Sklep
Oanowski.pl ABC
Szukaj
ISzukaj na shonie
Kategorie
la k zapewni stabilne
funkcjonowanie komputera?
...JESI
Fotografia cyfrow a
Intern e t
Komputer PC
e Konfiguracja i optymalizacja
Cena:
Monta
1 napraw a
Podkrcanie i tumng
Monta wideo
Nagrywanie pyt
Programy biurowe
S ystem y operacyjne
Tworzenie stron WWW
- Wedug serii
ABC
wiczenia
Ebooki
Ilustrow any przewodnik
e Po prostu
S tandard
Tablice inform atyczne
Tumaczenia
Opinie czytelnikw
Wanie
przeczytaem Pana
ksik "ABC sam
naprawiam
komputer". Tak ja k
poprzednie je s t
napisana bardzo
zrozumiaym
jzykiem dla laika
komputerowego, takiego ja k ja . To
dobrze, Ze unikn Pan tych wszystkich
fachowych terminw, zrozumiaych dla
specjalistw.
Zobacz te:
ABC tw orzenia stron w w w , W ydanie drugie
Bogi
RSS
( 3 Wszystkie wpisy
3 Ksiki
3 Artykuy
Newsletter
Jesi chcesz by powiadamiany o
nowociach na stronie zaprenumeruj
biu le ty n in fo rm a c y jn y
232
233
<ul>
<li><a href="#">ABC tworzenia stron WWW. Wydanie drugie</a></li>
<li><a href="#">ABC sam naprawiam komputer</a></li>
<li><a href=''#">ABC sam skadam komputer. Wydanie II< /a > < /li>
</ul>
</div>
Bartosz Danowski
Dodaj do koszyka
W ykorzystaj petui moliwoci
swojego komputera
Jak zapewni stabilne funkcjonowanie komputera?
Jak przyspieszy dziaanie programw1
Jak poprawi komfort pracy w systemie operacyjnym
W wielu przypadkach komputer po wymianie podzespow i
skonfigurowaniu nadal nie dziaa tak, jak uytkownik oczekiwa N a
pozr najprostszym wyjciem jest wtedy zakup nowego sprztu, jednak
jest to kosztowne rozwizanie i, co gorsza, czsto nie gwarantuje
spodziewanych efektw N a szczcie istnieje lepszy i taszy sposb.
Wspczesne komputery i systemy operacyjne daj wiele moliwoci w
zakresie samodzielnej poprawy szybkoci oraz stabilnoci dziaania
programw, a take zwikszania komfortu i efektywnoci pracy.
Pozycjonowanie stron
Z o b a c z te:
A B C tworzenia stron W W W . Wydanie drugie
A B C sam naprawiam komputer
A B C sam skadam komputer Wydanie II
Bartosz Dauowski
234
Nastpny kawaek arkusza dotyczy ceny ksiki. Okreliem rozmiar, kolor oraz wag
czcionki.
div#legenda p
{
border: lpx so lid s ilv e r:
background-col o r :#D7D5D5:
padding: 5px;
padding-left:20px;
padding-right:20px;
te xt-a lig n :ce n te r;
font-weight:bolder;
235
8B
[ s b T 978-83-24(>-1037-2
F o ra a t B5 sirei 384
Da>
p DF
ta0m t
v
t lliJ . o V .
.
* Z
Dodaj do koszyka
Z o b a c z te:
A B C tworzenia stron W W W Wydanie thugie
.ABC sam naprawiam komputer
Sekcja Artykuy
Strona gwna sekcji Artykuy nie rni si niczym od tego, co do tej pory zrobilimy.
Podobnie ma si z podstron konkretnego artykuu. Dlatego nie bd opisywa, w jaki
sposb zostaa utworzona.
Przy okazji sekcji Artykuy chc tylko zwrci Twoj uwag na jedn kwesti, o ktrej
wspominaem nieco wczeniej. Publikujc dugie teksty, np. artykuy, musisz mie na
uwadze, e naley je dzieli na mniejsze czci podstrony. Podzia na podstrony
przypiesza ich wczytywanie, uatwia czytanie i pozytywnie wpywa na liczb podstron,
co z kolei przydaje si podczas pozycjonowania witryny.
236
Ti M apa strony
informatyczna
K ontakt
Sklep
Szukaj
P ra w id o w a k o n fig u ra c ja n a p d w IDE
Niemal codziennie n a fdom i.cdrinfo.pl pojaw iaj ei p y tan ia na
te m a t te g o w jaki sp o s b popraw nie podczy nagryw ark IDE do
k om putera. Ze w zgldu n a sp o r ilo moliwych konfiguracji
poniej zam ieszczam kilka propozycji. Mam nad ziej, ze wielu
uytkownikom zaprez en to w a n e porad y pom o g pozby si
problemw zw izanych z nieprawidowo p o d p itym urzdzeniami
IDE - zarw no dyskw ja k i n apdw o p ty czn y ch .
Kontroler in terfejsu IDE d o st p n y w kadym kom puterze skada si
z dw ch kanaw , do k t ry ch m oemy p odczy p o dw a
u rzdzenia. Kade z u rzd ze musi mie sw oje okrelone m iejsce.
Do te g o celu su sp ecjaln e zworki z n ajd u jce si z tyu
u rzdzenia.
Na jednym kanale m og p raco w a dw a u rzdzenia. Jednak by to
byo moliwe, kade z ruch musisz odpowiednio skonfigurowa.
Z asad a konfiguracji try b u p rac y urzd ze IDE je s t ta k a sam a
zarw no dla dyskw tw ard y ch , jak i n apdw o p ty czn y ch . Jedno
urzdzenie naley u sta w i w trybie pracy MASTER, a drugie w
trybie SLAVE. Na jednym kanale nie m og p raco w a dw a
urzdzenie u staw io n e w tym samym trybie np. SLAVE.
Dokadny opis spo so b u ustaw ien ia zworek n a tylnym panelu
nagryw arki znajdziesz w dokum entacji nagryw arki lub n a jej
obudowie.
CDRinfo
CHIP
Cyber
M agazyn INTERNET
Opinie czytelnikw
Mam prawie
wszystkie Pana
ksiki szczeglnie
ceni sobie to, te
pisane s jasnym
precyzyjnym
jzykiem.
7 .- - '
B ogi...
* m arcoos.techblog
' Poradnik w ebm astera
n e t to
Zobacz te:
RSS
* WebAudit Bog
5 W szystkie wpisy
0 Ksiki
3 Artykuy
O l
N ew sletter
Jeli c h ce sz by pow iadamiany o
now ociach na stronie zaprenumeruj
b iu le ty n I n fo r m a c y jn y
I WebOewn. M.koS)
I Powered Iw WonJpreu
Sekcja O mnie
Sekcja O mnie nie rni si niczym od tego, co do tej pory zrobilimy. Dlatego nie bd
opisywa, w jaki sposb zostaa utworzona.
237
Rysunek 5.16.
Sekcja
Przyjazne strony
i n f o r m a t yc z n a
literatura
jj O mnie
]! P r z y ja z n e s t r o n y || k o n ta k t
Sklep ]
Szukaj
P r z y j a z n e s tro n y
1Szukaj na stronie
Oplnte czytelnikw
'
Dzikuj z a pom oc w
utworzeniu poczty
e-rnar/.
_ ;E S 1
------------ --
Kompot PC
1 i
pyrchla.pl
6lol
T ako rzecze Shrew
n e t to
Maja Kierzkowska
W ebAudit Blog
Rafa Kochanowski
Pozycjonow anie
m arc o o s.te ch b lo g
Poradnik w eb m aste ra
Dziecko w sieci
H ato n
fWOJSPC p!
Twoi-
Poradnik w eb m aste ra
Szum an
Paw e Wknmer
stro n a p ry w atn a
RSS ....
t j W szystkie wpisy
IfcJ Ksiki
Artykuy
(E j
N ew sletter
E dytuj,
Bartosz Danowski
238
Po sprawdzeniu, jak wyglda strona po dopisaniu treci, okazuje si, e uyte do tej
pory style idealnie pasuj do formatowania nowej treci. Jedynym elementem, ktry
wymaga poprawy, jest cytat. Aby to zmieni, do arkusza stylw powinnimy dopisa
nastpujcy fragment kodu, ktry okrela kolor i rodzaj czcionki, dopenienie i lew
krawd caego bloku.
blockquote
{
b o rd e r-le ft:sol id 5px gray:
fo n t-f ami 1y :monospace:
color: green:
padding: 5px;
}
Strony W W W i internet
Sekcja Sklep
Sekcja Sklep zawiera krtki wykaz poszczeglnych ksiek wraz z najwaniejszymi
informacjami, moliwoci zakupu lub przejcia do penej strony z opisem. Na rysun
ku 5.18 przestawiem efekt, ktry chcemy uzyska.
239
Rysunek 5.18.
Przykad strony Sklep
lite ra tu ra in fo rm atyczna
Stro n a gw na
_
Przyjazne stro n y
K ontakt |j S k e p |
Danowski.pl
Sklep
ABC sam optymalizuj? komputer
ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2
Form at: B5, stro n : 384
D ata w y dania: 2 0 0 7 -0 7 -1 2
C en a : 3 9 .0 0 z
D odaj d o koszyka
C e n a : 3 9 .9 0 z
. D odaj d o koszyka
kcD'ovo C e n a : 3 4 .9 0 z
jE te lS
o d a j do koszyka
Vista Pt
Koszty w ysytki
K raj
0,00 z - p a tn o k a rt kredytow ,
3 ,5 0 z w ysyka zwyk p o c z t za
pobraniem ,
1 1 ,9 9 z - w ysyka p o c z t kunersk.
Z a g r a n ic a
+ 70<Wi c e n y k s ld - pa tn o k a rt
kredytow i w ysyka zwyk p o c z t ,
* 1309*> c e n y k s i k i - pa tn o k a rt
kredytow i w ysyka p o c z t lotnicz.
Opinie czytelnikw
Wanie
przeczytaem Pana
. '
ksik "ABC sam
sam
naprawiam
kom puter". Tak ja k
poprzednie je s t
napisana bardzo
zrozumiaym
jzykiem dla laika
kom puterowego, takiego ja k ja . To
dobrze, i e unikn Pan ty c h wszystkich
fa chowych term inw, zrozumiaych dla
j3
B lo,,
- T ako rzec;
Poradnik w
C en a : 19 .0 0 z
D odaj d o koszyka
m a rcoos.techblog
* W ebAudit Blog
C e n a : 19 .0 0 z
RSS
W szystkie wpisy
I Ksiki
Artykuy
D odaj d o koszyka
7i
D ata wvdan*a: 20 0 7 -0 2 -0 1
C e n a : 17.90 z
0 D odaj do koszyka
Bartota Oanowsk. t wsrysllco prawa zistijato n e ! Web J.:*>orr Mikoaj Barezortewicz I Pomnwl By wordprest
2 40
Za pom oc stylw w pierwszej kolejnoci ustalamy dla caoci szeroko oraz wyso
ko, kolor ta oraz rozmieszczenie poszczeglnych elementw. W praktyce moemy
do tego uy kodu widocznego poniej.
div#sklep
{
border:sol id lpx s ilv e r:
background-color:#D7D5D5:
margin:10px:
padding:10px;
Dalej naley wymusi, aby tekst obla obrazek z prawej strony. Przy okazji okrelimy
odstp tekstu od obrazka. Odpowiedni kod moe wyglda tak:
di v#sklep i mg
{
flo a t : le f t :
border:solid lpx s ilv e r:
padding:5px:
}
Sekcja Kontakt
Ostatnim elementem mojej strony jest dzia Kontakt. Nie musz chyba nikomu mwi,
jak wany jest to element i e musi si on znajdowa na kadej szanujcej si stronie.
Rysunek 5.19 przedstawia m oj stron kontaktow.
24 1
Rysunek 5.19.
Podstrona Kontakt
B artosz D anowski
l i t e r at u r a i nf o r m a t yczna _
S tro n a g w n j
Ksiki
Artykuy
O mtue
___________
P izy ja/r.e stro n y ji K o n ta k t
D anowski.pl K ontaktu
Sklep
Siukaj
K o n ta k t
Uwaga, zanim do mnie nap iszesz uw anie p rze cz y taj informacje
zam ieszczone poniej.
Jeeli c h c e sz sk o rzy sta z form ularza k o n tak to w eg o musisz
bezw zgldnie wypeni w szystkie pola, P o d a n ie b d n e g o
a d r e s u u n ie m o liw i m i o d p o w ie d n a T w o j w ia d o m o .
Jeeli c h ce sz b y informowany o no w o ciach n a te j stronie
zamw mj biuletyn informacyjny.
U dostpniony form ularz suy w ycznie d o korespondencji
p ry w atnej z moimi czytelnikami. N ie y c z s o b ie
o tr z y m y w a n ie z a m a w ia n y c h in fo rm a c ji h a n d lo w y c h
o raz sp am u .
formatmri kom*kowy 1
Imi:
O pinie czytelnikw
Zdecydowaam si
do Ciebie napisa,
poniewa bardzo
spodobaa m i si
konwencja ksiki
p t. 'Kom puter PC wiczenia
praktyczne"...
naprawd super.
Wszystko je s t napisane jasno, zwile i
klarownie...
Boci
m a rcoos.techblog
Tako rze c z e Shrew
n e t to
T re w iadom oci:
- W eb Audit Bog
Poradnik w ebm astera
RSS
3 W szystkie wpisy
j Ksiki
Wyik,:
3 Artykuy
N ew sletter
Jek c h ce sz by pow iadam iany o
now ociach n a stronie zaprenum eruj
b iu le ty n in f o r m a c y jn y *
242
{
wi d th :350px:
}
legend
{
border:sol id lpx s ilv e r;
padding:3px;
background-colo r:#EEEEEE;
}
fie ld s e t
{
border:solid lpx green;
Nazwy plikw
Przygotowaem ju wszystkie elementy strony i utworzyem kilkadziesit plikw podstron witryny. Cao zostaa poczona i tworzy mj internetowy wizerunek.
Na zakoczenie tego rozdziau warto napisa kilka sw na temat nazw plikw, ktre
odpowiadaj poszczeglnym podstronom. Wbrew pozorom jest to bardzo wana spra
wa, gdy brak konsekwencji w nazewnictwie poszczeglnych plikw w przypadku
duych i rozbudowanych witryn jest przyczyn wielu problemw. Dlatego te staraj si
243
tak dobiera nazwy plikw, by byy one moliwie krtkie i zwizane z zawartoci
danej strony. Oczywicie, nie zawsze jest to moliwe, dlatego warto opracowa jaki
klucz. Na przykad w przypadku nazw plikw moich ksiek mona uy nastpuj
cego schematu nazewnictwa poszczeglnych plikw:
a b co p t.h tm l,
a b co p t_ sp is. htm l,
p o zo p t.h tm l,
p o z o p t s p is . htm l,
Oczywicie, nazwa taka moe si wydawa mao zrozumiaa, ale mnie mwi bardzo
duo. Zacznijmy od tego, e kada ksika wymaga dwch plikw. Pierwszy z plikw
zawiera opis ksiki i jego nazwa skada si z identyfikatora. Natomiast drugi plik to
spis treci i w tym przypadku na pocztku wystpuje identyfikator, a po podkreleniu
dodatkowo sowo sp is. Dziki takiemu nazewnictwu pliki ksiki zawsze bd obok
siebie i atwo bdzie mona znale odpowiedni ksik.
Uwaga
Kolejn bardzo wan spraw jest wielko liter stosowanych w nazwach. Jeeli uwa
nie czytasz niniejsz ksik, z pewnoci pamitasz, e ju o tym wspomniaem.
Dlatego teraz jedynie przypomn w duym skrcie zasady, jakie panuj w wiecie
internetowych publikacji. Ot serwery internetowe w zdecydowanej wikszoci pra
cuj pod kontrol systemw z rodziny Unix, a te rozrniaj wielkoci uytych liter
i np. P lik .h tm l oraz p lik .h tm l to dwa zupenie rne pliki. W zwizku z tym proponu
j, by w nazwach zawsze uywa maych liter, a dziki temu unikniesz problemw.
Zasada ta tyczy si zarwno plikw strony, ja k i obrazkw.
244
jest w duej mierze uywane przez mniej wymagajcych oraz pocztkujcych inter
nautw. Mozilla Firefox to ponad 30% udziau w rynku i przegldarka ta jest wyko
rzystyw ana przez bardziej zaawansowanych i wymagajcych uytkownikw. Opera
goci na ok. 6% wszystkich komputerw podczonych do sieci i jest wykorzystywa
na przez wiadomych i wymagajcych uytkownikw. Powysze dane pochodz z ran
kingw publikowanych na stronie http://ranking.pl.
Rysunki 5.20, 5.21, 5.22 oraz 5.23 pokazuj widok wybranej podstrony w rnych
przegldarkach. W ten sam sposb naley sprawdzi wszystkie podstrony witryny.
i ABC sam optym alizuj kom puter Bartosz Danowski - W in dow s in ternet Explorer
tacza
&
9 1
| *| xj | fcogie
'||
1 - Strona
Narzdzia
Ja k za p e w n i sta b iln e
fu n k cjo n o w a n ie ko m p utera?
Jak p rz y s p ie s z y dziaanie
p rogram w ?
Ja k p o p raw i ko m fo rt p ra c y
K o n fig u racja
1 o p ty m a liza cja
w sy ste m ie o p era cy jn ym ?
fr M o n ta i nap raw a
W w ielu p rz y p a d k a ch k o m p ute r p o
w ym ianie p o dze sp o w
4 P od k r ca n ie
Stro.na d om ow a ksiki
* N ag ryw an ie p y t
S p is tre c i
ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2
* Program y biurow e
S y s te m y o p e ra cy jn e
* T w o rz e n ie stro n W W W
Cena: 39.00 z
= W edug serii
.T D odaj d o k o szy ka
* ABC
o p e ra cy jn e d a j w iele m oliw o ci
http://danowski.pl/mapa-strony/
1 tuning
* M o n ta w ideo
%100%
Testy rozdzielczoci
Kolejnym bardzo wanym testem, jaki naley przeprowadzi przed publikacj, jest
sprawdzenie wygldu strony w rnej rozdzielczoci. Musisz wiedzie, e internauci
pracuj na rnych kom puterach i m aj rn rozdzielczo ekranu. W edug danych
publikowanych na stronie http://ranking.pl pierwsza pitka zestawienia uywanej roz
dzielczoci wyglda nastpujco:
24 5
tdycja
Widok
Historia
Zakadki
Narzdzia
Pom oc
Helion
Danowski
Hardware
i CSS*
JWiadomoci
] Forms* * Images*
Pozycjonowanie
Information*
Miscellaneous* _
W*
Materiay ksizki
Outline* * Resize-
Tools*
Sowniki O Programy
View Source*
Options-
A Mapa strony
Bartosz Danowski
literatura informatyczna
| Strona gwna [ K s i k i || Artykuy || O mnie J| Przyjazne strony [ Kontakt
11 Sklep 1
Danowski.pl ABC
Szukaj
1E S 1
W y k o r z y s t a j p e n i m o liw o c i
Kategorie
s w o je g o k o m p u t e r a
Fotografia cyfrow a
Internet
* Komputer PC
1optymalizacja
4* Monta 1naprawa
Podkrcanie 1 tunmg
<* Konfiguracja
Nagrywanie pyt
Programy biurowe
ISBN: 978-83-246-1037-2
Format: B5, stron: 384
me gwarantuje spodziewanych
efektw. Na szczcie istnieje
System y operacyjne
Cena: 3 9 .0 0 z
Wedug seni
O j P ig tf M
Cen*
2.224i
Edycja
<r*
Widok
Zakadki
ii * *
er
4
* S
-#
Widzety
Narzdzia
o-
J ja y e g g g g a a a o i
Q?
Bartosz Danowski
literatu ra in fo rm a ty c/n a
Strona gwna [ K s i k i! Artykuy
Kontakt
Sklep
Danowskt.pl * ABC
Kategorie_____
s w o je g o k o m p u t e r a
* Fotografia cyfrow a
* Internet
* Komputer PC
programw?
Jak poprawi komfort pracy
w systemie operacyjnym?
i Konfiguracja
1optym alizacja
Monta i naprawa
Pomoc
Podkrcanie i tunmg
Monta wideo
Strona domowa ksiki
Spis treci
ISBN: 978-83-246-1037-2
Format: B5, stron: 384
Data wydania: 2007-07-12
* System y operacyjne
C e n a : 3 9 .0 0 z
* Wedug seni
45
system y
Dodaj do koszyka
operacyjne daj wiele moliwoci
w zakresie samodzielnej poprawy
TMhknn nr a t.stahiinnri tn aania- ncnnamu.
- Nagrywanie pyt
Programy biurowe
ABC
k wiczenia
0 ^ Googl
-J 6 d
246
IQ *
! m
Apple
Amazon
eBay
Yahoo*
News (361 *
Bartosz Danowski
Laptopy.
i W
. tablety
hMapa strony
Bartosz Danowski
Kontakt Sklep j
S zu k a j
I Szukaj na stroni...
EH
W y k o r z y s ta j p e n i m o liw o c i
K a te g o r ie
s w o je g o k o m p u te ra
Fotografia cyfrow a
Internet
Komputer PC
&Monta i naprawa
&Podkrcanie i tuning
Monta wideo
3 9 .0 0 z
* ABC
wiczenia
1. 58% 1024x768
2. 18% 1280x1024
3. 7% 800x600
4. 7% 1152x864
5. 6% 1280x800
247
Rysunek 5.24.
Zmiana
rozdzielczoci ekranu
Przecignij ikony, aby o dp ow ia da y m o n ito ro m .
Rozdzielczo:
~Q
Niska
1280 na 1024
W ysoka
iksel^
Ustawienia zaawansowane...
Anuluj
Edycja
-4
Helion
Widok
Historia
'
Narzdzia
=naiiHil'
*"
Pomoc
j http://danowski.pl/
Danowski
Disable* S Cookies*
Zakadki
Hardware ,.J
CSS*
Forms*
i
Images*
Pozycjonowanie
'&$Information*
Google Reader
WG Online
Miscellaneous* .
Materiay ksiaiki
Arty k u y
O innie
Sowniki
Programy
Options*
y Q
a p a stro n y
literatura informatyczna
I S t r o n a g w n a ] K siki
::fs
W ikipedia
Bartosz Danowski
P rzy ja z n e stro n y
800*600
1024x768
O anow ski.pl
''.- N ie m a k o m e n t a r z y
E d v tu t
Rysunek 5 .2 5. WebDeveloper
248
Edycja
Widok
Historia
Zakadki
Narzdzia
Pomo
'.,
Heiion
'Danowski
s Disabter . Cookies
Hardwarf
. CSS*
Vt*
Wiadomo&i
j Forms*
Images'
Information''
Miscellaneous*,.
l i t e r a t u r a i nf or mat yczna
! S t r o n a g w n a jj Ksiki j A rtykuy
ING OrAnt
Outline*
Resize*
Tools-
Stowmlu
View Source*
Program)
Options* /
_______________
O mnie
Prz y jaz n e s tr o n y
D anow ski.pl
K on ta k t
S klep |
Szukaj
| Szukaj ni
P N ie m a k o m e n tarz y E d y tu j
Kategorie
"ABC s a m o p ty m a liz u j k o m p u t e r to
p rz y st p n y p o radnik dla o s b , k t re c h c
moliwie n a jlepiej p rz y g o to w a sw o jeg o
p e c e ta d o w y d a jn e j i k o m fo rto w ej p ra c y .
Dziki te j k si c e n a u c z y sz s i sk u te c z n ie
A ktualnoci
* Ciekaw e program y
Mozilla
Nero
Nie n a te m a t
O goszenia
ro zp la n o w a p rze ch o w y w an ie d a n y c h .
D ow iesz si ta k 2 e , jak z w ik sz y b e z p ie c z e stw o s y s te m u i k t re
e lem e n ty k o m p u te ra w a rto w ym ieni, jeN zaw io d in n e sp o so b y
p o p raw y w y d ajn o ci.
P orady
* P o zy cjo n o w anie stro n
Prgierz
C z y ta j c a o
* S tro n y WWW i in te r n e t
Noc pozycjonerw
Matenety ksiaZki ..
2 4 .0 6 .2 0 0 7
W anie p isz
Opinie czytelnikw
{( 0
Widok
Hison*
&
Helion
Dmowski
gaktodlo
Naotdiia
Pomoc
.IS hp:'/dnojki.pl/
. Hwdwwe . J Wiadomoci
/Pozycjonowani*
i Disable- & Cookier* _j CSS- ' . Porm* ' Images* ii! Information*
Google Rtadar
Mrscl*neoirt*
ING Online
i Melenely kuii
Sowniki
; Programy
Options* /
Bartosz Danowski
literatura informatyczna
Sklep
Danowsla.pl
Noc pozycjonerw
* 29.06.2007 /
Opinie czytelnikw
Ostatnio zakupiem
Pana fantastyczn
ksik o programie
Przeczytaem j
ca.
C zytaj c ao
Bogi
Plagiat
*28.0 6.2007
Komentarzy: 7 Edytuj
C<*T*M $
3.372s
249
Edycja
Szukaj
J - -
m M i ) I J
i a J A,
XHTML
PHP
JavaScript
Opcje
Pomoc
A A' x x . ! H
H 13 1
8
9
10
11
/>
12
13
14
15
20
21
J j Kod
Ukryj
Zapisz..
1 .0
T ra n s itio n a l
No w a rn in g s o r e r r o r s w ere fo u n d
To l e a r n more a b o u t HTML T id y s ee h t t p : / / t i d y . s o u r c e f o r g e . n e t
P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g
HTML and CSS s p e c i f i c a t i o n s a r e a u a i l a b l e fro m h t t p : / / w w w . w 3 . o r g /
Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m
INS
f c l,W : l
Dla porwnania rysunek 5.29 przedstawia sytuacj, w ktrej kod strony zawiera
kilka bdw.
Po przeanalizowaniu komunikatu moemy stwierdzi, e kod zawiera sze bdw.
W takiej sytuacji za pom oc suwaka widocznego po prawej stornie dolnego okna mu
simy cao przewin do gry, aby znale dokadne informacje o bdach i ich lokali
zacji. Poniej zamieciem fragment komunikatu.
250
Edycja
J * a
Szukaj
XHTML
PHP
* A * J i at
t a ( j psi a
JavaScript
Opcje
<% i X % !
ii, w
z? i H
3J *M J l iJ I s l B
A X1 * 1
A"
0 indexhtm! i lS 0 ) O
7
&
8
\ '*
31
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
J j Kod
i in fo r m a ty c z n e j. B i o g r a f i a / p u b l i k a c j e , o p in ie c z y t e ln ik w ." />
<m eta name= K eyw ords" c o n t e n t - 'B a r t o s z D a now ski, L i t e r a t u r a in fo r m a ty c z n a , spam,
i n e ro , b io s , m onta k o m p u te ra , in s t a l a c j a w indow s" / >
<m eta n a m e = "A u th o r" c o n te n t= " B a rto s z D a now ski" / >
<m eta name=" G e n e ra to r" c o n te n t-" k E D " / >
< t it le > L it e r a tu r a
Podgktd
Zapisz..
~T
j 4 a jj
i^
Pomoc
13*
I n f n - D n rn n p n t r n n t . p t In n k s l i k e XHTMI
6 w a r n in g s , 0 e r r o r s w ere foun d? I
1 .0
T r a n s itio n a l
INS
K: 35, W: 20
lin e
lin e
lin e
25 1
Edycja
Szukaj
j * -
XHTML
- *
PHP
&
fja a jr tS M f:
JavaScript
Opcje
Pomoc
x
u . w m . 1 1
r a* x*
i-i g jn jia s-< > |& 3 S S |e i=
12
13
14
15
rtiiM Idniuaiii
< lix a
< 1 ix a
: c lix a
I <11 x a
< lix a
I < lix a
i < lix a
r < / u l>
: < /d 1 v>
19
20
21
22
23
24
25
Kod I Po<i9M
Ukryj
Zapisz
W y n ik i w a l i d a c j i :
lin e
lin e
lin e
lin e
lin e
lin e
In fo :
In fo :
K: 143, W: 17
Tak wanie jest w moim przypadku. Zwr uwag na drugi z wytknitych bdw
linia 20., brak zamknitego znacznika <a>. Jeden drobiazg pociga za sob szereg
kolejnych bdw.
Zgodnie z powysz zasad niezbdne jest usunicie wszystkich bdw. To jednak
nie wystarczy po naprawieniu kodu za pom oc edytora kED sugeruj skorzystanie
z jeszcze jednego narzdzia. Mam tutaj na myli walidator (narzdzie do analizy po
prawnoci kodu) udostpniony przez konsorcjum W3C na stronie http://validator.w3.org.
Zasada korzystania z tej strony jest stosunkowo prosta i ogranicza si do podania adresu
strony, ktra ma zosta sprawdzona. Odpowiedni adres wklejamy w polu Address i kli
kamy przycisk Check. Rysunek 5.31 przedstawia wynik analizy mojej strony gwnej.
Akurat na przykadowym rysunku wida, e strona nie zawiera bdw. Natomiast w sy
tuacji gdy zostan wykryte jakie pomyki, zostaniesz o nich powiadomiony w podobny
sposb, jak w edytorze kED. Zasada usuwania usterek jest identyczna z t, ktr przed
stawiem w opisie korzystania z podobnego narzdzia wbudowanego w edytor kED.
252
V\ R
Q ^ u j . M a r k u p V a l i d a t i o n S e r v ic e y o ? 4
DUMB
Home
At>oul
News
Result:
Address:
Encoding:
Doctype:
Root Namespace:
Revalidate ]:
Docs
Help & F A Q
___
m ?
Feedback
Jump To:
Passed validation
Results
htip://danowski pi/
utf-8
(detect automatically)
(detect automatically)
http://www w3.org/1999/xhtml
! Show Source
Q Validate error pages
03 Show Outline
Verbose Output
Help
on
th e
options
available
The document located at <http //danowski pl/> was checked and found to be valid XHTML 1 0 Strict This means that the
resource in question identified itself as "XHTML 1 0 Strict" and that we successfully performed a formal validation using
an SGML or XML Parser (depending on the markup language used)
W3C ?
0 show your readers ,hat yu have taken the
to create an interoperable Web page, you may display
------^ this icon on any page that validates Here is the HTML you could use to add this icon to your Web page
<P>
<a
h r e f= " h t t p : / / v a l i d a t o r . w 3. o r g /c h e c k ? u r i= r e fe r e r " X im g
s rc = " h t t p : //w w w .w 3 .o r g /Ic o n s /v a lid -x h tm llO "
a l t = " V a l i d X HTM L 1 . 0 S t r i c t " h e i g h t = " 3 1 " w i d t h = " 8 8 " / X / a >
< /p >
ff you like, you can download a copy of this image (in PNG or GIF format) to keep in your local web directory, and change
the HTML fragment above to reference your local image rather than the one on this server
A full list of icons, with links to alternate formats and colors, is also available
If you use CSS in your document, you should also check it for validity using the W3C CSS Validation Service
If you would like to create a link to this page (i.e., this validation result) to make it easier to revalidate this page in the
future or to allow others to validate your page, the URI is
<http //validator w3 org/check<?uri=http%3A%2F%2Fdanowski pl%2F> (or you can just add the current page to your
bookmarks or hotlist)
W3C ( T O 7*
253
Wnioski
Strona jest ju gotowa i mona przystpi do jej publikacji w sieci (odpowiedni opis
znajdziesz w jednym z nastpnych rozdziaw). Jednak zanim przejdziesz do kolejnych
zagadnie, warto przypomnie o kilku wanych zasadach, ktre wypunktowaem poniej.
Dbaj o jako publikowanych tekstw i pamitaj, e powinny by one zwarte
i jasno napisane. Internauci nie lubi zbyt duo czyta, wic staraj si
w minimalnej iloci tekstu zawrze maksimum treci.
Dbaj o poprawno kodu i jego zgodno ze specyfikacjami. Dziki temu
unikniesz problemw z dziaaniem strony w rnych przegldarkach.
Sprawdzaj gotowy projekt w kilku przegldarkach i rnej rozdzielczoci.
Staraj si, aby strona wygldaa i poprawnie dziaaa w najpopularniejszych
przegldarkach i w rnej rozdzielczoci.
Uywaj kaskadowych arkuszy stylw do kontroli wygldu strony, a jzyka
HTML (XHTML) do nadawania struktury.
Pamitaj o konsekwencji w tworzeniu nazw oraz znaczeniu duych i maych
liter. Dziki temu unikniesz problemw zwizanych ze znalezieniem
odpowiedniej podstrony lub niedziaajcym odnonikiem. Do wszystkich
wewntrznych odsyaczy uywaj odwoa wzgldnych.
Staraj si nie naduywa grafiki i innych efektw specjalnych. Dziki temu
strona bdzie szybciej dziaa nawet na wolnych czach.
Optymalizuj publikowan na stronie WWW grafik. Zdjcia publikuj
w formacie JPG.
Ucz si, podgldajc innych projektantw. To nic zego, e zerkasz do kodu
innych stron i podpatrujesz uyte tam rozwizania. Takie dziaanie pozwoli Ci
lepiej pozna moliwoci jzyka i tworzy ciekawsze strony WWW.
254
Rozdzia 6.
Praktyczny projekt.
Strona firmowa
Tym razem jako przykad strony firmowej posuy mi witryna, ktra ma sta si uzu
penieniem forum o komputerach przenonych. W tej chwili forum dziaa na stronie
http://forum.laptopy.info.pl. Natomiast strona, ktr wsplnie zaprojektujemy pojawi si
pod adresem http://laptopy.info.pl.
Tworzona strona bdzie miaa charakter mini portalu i internauci znajd na niej naj
nowsze informacje, testy i artykuy z dziedziny komputerw przenonych. Cao w po
czeniu z forum ma by jednym z waniejszych miejsc dla wszystkich potencjalnych
jak i aktualnych uytkownikw laptopw. Tak si skada, e forum ju zdobyo miano
najwikszego i najlepszego w polskiej sieci. Teraz dziki stronie informacyjnej bd
stara si dotrze go kolejnej grupy potencjalnych goci.
256
Zbieramy materiay
W przypadku omawianej strony zbieranie materiaw niezbdnych do jej przygotowa
nia ograniczy si do minimum. Dokadniej mwic, aby rozpocz prac nad projek
towaniem, potrzebne s nastpujce informacje:
dwie lub trzy przykadowe wiadomoci o komputerach przenonych,
przykadowy artyku,
przykadowy test,
zawarto strony z informacjami o firmie prowadzcej portal,
zawarto strony kontaktowej.
Caa reszta treci bdzie dodawana w chwili, gdy strona zostanie ju zaprojektowana
i uruchomiona. Innymi sowy, podczas projektowania wystarczy minimum treci do
stworzenia ukadu prezentowanych elementw. Dopiero po zakoczeniu budowy strony
i przed jej oficjaln prezentacj warto doda kilkanacie wiadomoci oraz kilka arty
kuw. Dalej pozostaje ju tylko dba o to, aby na stronie nowe treci pojawiay si
regularnie. Nie moe by tak, e jednego dnia dodamy pi wpisw, a pniej przez
kolejne dwa ani jednego.
Podczas przygotow yw ania wszystkich materiaw zarwno tych potrzebnych na
pocztek, ja k i tych, ktre m aj by dodawane po uruchomieniu portalu trzymamy
si nastpujcych zasad:
Kada wiadomo powinna si skada z krtkiego wprowadzenia widocznego
na stronie gwnej, rozwinicia widocznego na dedykowanej podstronie
oraz zdjcia prezentowanego produktu.
257
Struktura strony
Uznaem, e struktura mojej nowej strony ma by maksymalnie uproszczona. Im mniej
zakamarkw, tym prociej co znale. W skrcie caa witryna zostanie podzielona na
nastpujce dziay:
Strona gwna wszystkie wiadomoci (aktualnoci, testy, artykuy, etc.)
w skrconej postaci.
Aktualnoci wycznie aktualnoci.
Testy wycznie testy.
Artykuy wycznie artykuy.
FAQ odpowiedzi na najczciej zadawane pytania.
Kontakt wszystkie dane kontaktowe.
Wszystkie wymienione wyej dziay trafi do grnego menu nawigacyjnego. Strona nie
bdzie zawiera dodatkowego bocznego menu.
Uwaga
Prezentowany w tym rozdziale projekt w oryginalnej wersji zosta przeze mnie zam
wiony w firmie CRE8, a nastpnie poprawiony przeze mnie tak, by odpowiada moim
potrzebom.
258
Szablon strony
Ukad strony gwnej, a co za tym idzie, wszystkich podstron, bdzie taki sam. Poza
nagwkiem i stopk witryny cao zostanie podzielona na dwie kolumny. Lewa ko
lumna zajmie 2/3 dostpnego obszaru i bdzie zawiera publikowane treci. Natomiast
po prawej stronie znajd si moduy z wykazem ostatnio dodanych testw oraz recenzji.
Dlatego zanim zaczniemy tworzy poszczeglne podstrony, warto przygotowa ogl
ny szablon.
2 59
W tej chwili niezbdne jest signicie do kaskadowych arkuszy stylw w celu nada
nia stworzonym elementem odpowiedniego wygldu i naleytej pozycji.
Na pocztku warto ustawi kilka globalnych waciwoci strony. Mam tutaj na myli
wyczenie marginesw, dopenienie oraz okrelenie koloru ta. Odpowiednie wpisy za
mieciem poniej.
body
{
margin:0:
paddi ng: 0:
background-color:whi t e :
260
Kolejne zmiany dotycz rodkowej czci nagwka strony. Poniej znajduje si listing
zastosowanych stylw wraz z moim komentarzem.
div#menusrodek
{
height: 150px:
}
261
W tym miejscu zajem si zm ian wygldu pola formularza. Zmieniem kolor ta,
wczyem obramowanie, ustawiem rozm iar pola i w yczyem m arginesy oraz do
penienie.
Ostatnim elementem grnego nagwka jest jego dolna cz. Poniszy listing ustawia
to, wycza marginesy, wymusza lewy margines, ustala wysoko elementu, wyrodkowuje tekst, powiksza rozmiar czcionki i przeksztaca j w due litery.
ul#menudol
{
background-c o lo r:#518AB5;
margi n:0 ;
margi n-1e f t :300px;
hei ght:40px:
te xt-align:center:
font-size:large:
text-transform:uppercase;
Mapa s tr o n y
R sd alrcja
K o r.takt
ksai
LAPTOPY
2 62
W tej chwili prawa kolumna znalaza si na swoim miejscu, ale reszta tekstu j przy
krywa. W zwizku z tym naley dla szerszej kolumny ustawi prawy i grny margines
tak, by ten element pasowa do reszty.
N a rysunku 6.2 przedstawiem gotowy projekt z podziaem na dwie kolumny. Dodat
kowo dla uatwienia poszczeglne bloki m aj ustawione rne ta.
RSS W iadom oci
R e d akcja
K o n ta k t
LAPTOPY
Lorem ipsum dolor sit amet, consectetur adipisicing dit, sed do dusrnod tempor incididunt ut labore et dolore
magna aqua U t anm ad minim veruam qins nostrud exercitation uamco laboris nisi ut ahquip ex ea commodo
consequat Duis aute irure dolor m reprehenderit invohiptate veto esse chirn dolore eu fgiat nulla pariatur
Excepteur sint occaecal cupidatat non proident sunt in cuipa qui officia deserunt mollit anim id est laborum
Lorem ipsirni dolor sit amet, consectetur adipisicing et, sed do etusmod tempor incididunt ut labore et dolore
magna aqua U t emm ad minim veniam, quis nostrud exercitation uflamco laboris nisi ut abquqp ex ea commodo
consequat. Duis aute inire dolor in reprehenderit in voluptate vet esse dlium dolore eu fugiat nulla pariatur
Excepteiv sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt moQit anim id est laborum
Szukaj
263
Jak widzisz uzyskanie dwch kolumn byo bardzo proste i ograniczyo si zaledwie
do kilku prostych wpisw w arkuszu stylw.
\
Uwaga
W pierwszej kolejnoci dla selektorw body, html oraz dla identyfikatora #zawartosc,
ktry jest przypisany do szerszej kolumny, ustawiem wysoko rwn 100% oraz mi
nimaln wysoko rwn 100%.
html>body, html>body fzawartosc
{
height:auto;
}
264
div#stopka
{
width:100*;
height:40px:
background:#EEEEEE u r l( o b r a z k i/tlo .g if) :
padding-top:10px;
padding-bottom:10px;
position:absolute;
bottom:0:}
Dla znacznika stopki ustawiem szeroko, wysoko, kolor ta, grne i dolne dope
nienie oraz cay element usytuowaem na sztywno przy dolnej krawdzi okna prze
gldarki.
div#stopka p
{
margi n:0;
paddi ng-1 eft:20px;
font-size:sm aller;
}
Mapa a r r o n y
R ed a k c ja
Kenn ale:
LAPTOPY
Hm i
Lorian ipsum dolor sit amet, consectetur adiptsicmg efe, sed do etusmod tempor beididunt ut labore et dolore
magna afiqua. Ut enim ad mmim vemam, quis nostrud exercitation ullamco laboris nisi ut afiquip ex ea commodo
consequat Duis aute trure dolor in reprehender in 'ohrptafe vefe esse ciDum dolore eu fugtat ufla pariatur
Excepteur sint occaecat cupidatat non proident, sunt in cfca qt offida desenmt mofl anim id est laborum
Lorem ipsum dolor sit amet consectetur adtpisicing efe, sed do etusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aquip ex ea commodo
consequat. Duis aute trure dolor in reprehender in voiuptate vefe esse ciflum dolore eu fiigiat milla pariatur
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia desenmt mofl anim id est laborum.
m wm
265
W pierwszej kolejnoci dla prawej kolumny ustawiem to oraz okreliem jej maksy
maln szeroko. Odpowiednie style powinny zosta wpisane do selektora div#nawigacja
zgodnie z poniszym przykadem.
div#nawigacja
{
position:absolute;
right:10px;
top:15em;
width:300px;
max-width:300px;
background-image:url(obrazki/tlol.png);
background -repeat:no -repeat;
padding:5px;
margin:0:
}
266
N a rysunku 6.4 zamieciem widok gotowego szkieletu strony. W tej chwili moemy
bra si do opracowywania poszczeglnych dziaw witryny.
RSS Wiadomoci
Mapa strony
Redakcja
Kont
LAPTOPY
0
AKTUALNOCI TESTY ARTYKUY F.A.Q. FORUM
Lorem ipsum dolor sit amet, consectetur adipisicing eht, sed do dusmod tempor incididunt ut labore et
dolore magna aiiqua. U t enim ad minsn veniam, quis nostrud exercitation uilamco laboris nisi ut aliquot ex
ea commodo consequat Duis aute irure dolor in reprehenderit in voioptate veht esse cilhun dolore eu
fugjat nua pariatur Excepteur sint occaecat cupidatat non protdent; sunt in culpa qui officia deserunt
molht anim id est laborum
Lorem ipsum dolor sit amet, consectetur adipisicing et, sed do etusmod tempor incididunt ut labore et
dolore magna aiiqua U t enim ad minim veniam, quis nostrud exercitation uHamco laboris nisi ut ahquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in vohiptate veht esse ciBum dolore eu
fugjat nua pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
molht anim id est laborum
Artykuy
Baterie - praw da t mity
Partycje i noniki recovery
nLite - mtegracja sierowmkow
Testy
IBM Thm kPad 142
IB M ThinkPad T60
IBM ThinkPad X60
Strona gwna
Strona gwna w centralnej czci bdzie przedstawia wiadomoci w skrconej po
staci. Kady wpis ma skada si z wprowadzenia, zdjcia oraz odnonika pozwalaj
cego na przejcie do kompletnej notatki. Innymi sowy, nie wymyliem tutaj nic od
krywczego.
Struktura pojedynczego wpisu bdzie stosunkowo prosta. Tytu zostanie przedstawio
ny jako nagwek stopnia drugiego, tre zamknie si pomidzy znacznikami <p></p>.
Uzupenieniem bdzie obrazek ustawiony w lewym grnym rogu i oblany tekstem.
Cao dodatkowo zostanie zamknita pomidzy znacznikiem <div id = 'w p is ''x /d iv > ,
dziki czemu atwiej bdzie kontrolowa cao. Poniej zamieciem kod przyka
dowego wpisu.
<div id=wpis">
<h2><a href="news01.html">Nowy Flybook VM</a></h2>
<p class=data"><strong>Data:</strong> 20.07.2007 <strong>Autor:</strong> Bartosz
Danowski</p>
<img src= "o bra zki/flybook.jpg" alt="Flybook MV" />
<p>Co pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM
posiada ekran mogcy ustawi si w pozycji normalnego ekranu LCD. tak aby uytkownik
mi a? wygodniejsz pozycj podczas uytkowania komputera. Szczeglnie przydatne je s t
267
Dla caego moduu ustawiem dolny margines i dopenienie. Nastpnie wczyem dolne
obramowanie.
div#wpis img
{
f 1oat: 1e f t :
padding:2px;
border:solid 2px s ilv e r;
margin-right:5px;
marg in -bottom:5px;
Okreliem sposb oblew ania obrazkw przez tekst, w czyem dopenienie oraz
ramk. Poza tym zdefiniowaem prawy i dolny margines, aby wymusi odstp ob
razka od tekstu.
div#wpis p
{
margin-top:0,5em:
}
268
div#wpis p.zrodlo
{
te x t-a lig n :rig h t;
margin-top:30px;
cl ear:both;
}
Dla odnonika widocznego pod tekstem ustawiem wyrwnanie do prawej strony oraz
zdefiniowaem grny margines, aby odnonik wyranie oddzieli od tekstu. Poza tym
na wszelki wypadek zablokowaem moliwo oblania obrazka przez ten element.
div#wpis h2
{
margin:0:
padding:0;
}
H EJ
LAPTOPY
AKTUALNOCI
TESTY
Nowy Flybook VM
A RTY K U Y
F .A .Q .
FO R U M
A rty k u y
\rM
Flybook
moe wyglda jak normalny laptop, lecz w
rzeczywistoci twrcy laptopa maj aspiracje, aby ich produkt
konkiaowal z desktopami Laptopa mona bdzie kupie pod
koniec miesica w
Testy
IBM ThinkPad T l 2
IBM ThinkPad T 60
IB M ThinkPad X6G
269
270
M a pa s t r o n y
R e d a ic c j
S zu k a j
mmmmm
LAPTOPY
AKTUALNOCI
TESTY
rdo: w w u laptopmg.com
F.A.Q.
FORUM
Artykuy
Baterie - prawda i muy
Partycje i noniki recovery
s it
A R lY K l'L Y
Test>
IBM ThinkPad T42
IBMThinkPad T60
IBMThinkPad X60
27 1
Strona FAQ
Po dugich przemyleniach uznaem, e odnonik FAQ w chwili obecnej bdzie pro
wadzi do odpowiedniego dziau forum, ktry jest regularnie aktualizowany. Mam
jednak w planach stworzy odpowiedni stron i na niej publikowa najczciej zada
wane pytania wraz z odpowiedziami.
Najlepszym rozwizaniem dla FAQ jest wykorzystanie nagwkw oraz list. Za pomoc
nagwkw moemy podzieli cao na kilka czci, np. problemy sprztowe, proble
my z programowaniem. Natomiast listy bd zawiera wykaz odnonikw do stron, na
ktrych opisano dany problem. Pojedyncza strona bdzie zawiera powtrzenie pytania
oraz dokadny opis.
Strona redakcja
W przypadku mojego miniportalu wanym miejscem bdzie strona redakcja. To wa
nie w tym miejscu znajdzie si ca struktura redakcji wraz z informacjami na temat
poszczeglnych redaktorw. Poniej przedstawiem przykadowy kod odpowiedzialny
za publikacj treci w tym miejscu.
<p>Redakcj portalu <strong>Laptopy.info.pl</strong> tworz sami fachowcy doskonale
obeznani w tematyce komputerw przenonych oraz p u blikacji tre ci w internecie.
Kady z redaktorw wkada cae swoje serce w to . aby prezentowane przez niego
m ateriay byy ciekawe i zawsze aktualne. Niniejsza strona ma pozwoli na to .
aby mg b li e j pozna kadego z nas.</p>
<div id="redakcja">
<h2>Redaktor naczelny</h3>
<img src "obrazki/bd.jpg" alt="Bartosz Danowski - redaktor naczelny" />
<ul>
<li>Im i i nazwisko: <strong>Bartosz Danowski</strong></li>
<1 i >Stanowi sko: <strong>Redaktor naczelny/waci e l</strong></1i >
<li>Obowiazki: <strong>Kierowanie prac portalu, kontakt z klientami
i reklamodawcami</strong></li>
<1 i >Kontakt: <strong>danowski1aptopy. i nfo.p l</strong></1i >
< /ul >
</div>
272
<div id="redakcja">
<h3>Redaktor dziau Wiadomoci</h3>
<img src="obrazki/xx.jpg" alt="Jan Nowak - redaktor dziau wiadomoci" />
<ul>
<1i>Imi i nazwisko: <strong>Jan Nowak</strong></li>
<li>Stanowisko: <strong>Redaktor dziau wiadomoci</strong></li>
<li>Obowiazki: <strong>Przygotowanie i publikacja wiadomoci ze wiata komputerw
przenonych.< /strong></li >
<1i>Kontakt: <strong>nowak@laptopy. in fo .pl</strong></li >
</ul>
</div>
273
Wczyem oblewanie obrazkw przez tekst oraz ustawiem ramk, dopenienie i mar
ginesy.
div#redakcja p
{
cleanboth;
}
Na koniec dla wszystkich akapitw wystpujcych w znaczniku <d iv id = "re d a k c ja >
< /di v> wyczyem oblewanie obrazkw.
Rysunek 6.7 przedstawia przykadow stron z informacjami na temat redakcji. Oczy
wicie, w praktyce dzia ten bdzie rozrasta si w zalenoci od liczby pracownikw.
RSS W iadom oci
Mapa s t r o n y
R e d a k c ja
J^SzukajJS
K ontakt-
LAPTOPY
<
A K T U A LN O C I
TESTY
ARTY KU Y
F .A .Q .
A rtykuy
Baterie - prawda i mity
Partycje i noniki recovery
Testy
IBM Thaik?
R ed ak to r naczelny
Imi i nazwisko: B artosz D a no w s ki
Stanowsiko R edak tor naczelny w aciel
Obowizki: K ierow anie prac portalu, kontakt z klientam i i
reklamodawcami
K ontakt danow skitaiaptopy.info.pl
FO R U M
IB M ThinkPad 16 0
IB M ThinkPad X60
274
Strona kontakt
Strona kontaktowa w przypadku portalu powinna zawiera szersze informacje, ni miao
to miejsce w witrynie domowej. Dokadniej mwic, poza nazw i adresem firmy warto
umieci formularz kontaktowy, adres e-mail oraz numery telefonw i faksu.
Przygotowanie strony kontaktowej nie jest raczej skomplikowane i niewiele rni si
od tego, co robilimy przy okazji witryny prywatnej. W zwizku z tym szczerze wierz,
e uda Ci si ten problem rozwiza samemu.
Wnioski
Projekt strony firmowej jest ju gotowy i moesz go opublikowa w sieci. Poniej za
mieciem jeszcze kilka istotnych uwag, ktre przydadz si podczas tworzenia wasnej
strony firmowej.
Staraj si uywa stonowanych kolorw. Strona firmowa powinna by spokojna
i przyjemna dla oka.
Unikaj zmuszania goci do zmiany przyzwyczaje. Dokadniej mwic, nie
stosuj rozwiza, ktre s nietypowe i zbyt innowacyjne. Niestety dziaania
takie spowoduj, e Twoi gocie m og czu si zagubieni i zamiast szuka
potrzebnych informacji, przenios si na konkurencyjn witryn.
Dbaj o to, aby strona szybko si wczytywaa. Spraw bardzo wan jest szybki
serwer oraz optymalizacja kodu i grafiki. Jestem zwolennikiem stron firmowych,
ktre s oszczdne, jeli chodzi o elementy graficzne. Dzisiaj dziki CSS
moesz zbudowa rewelacyjn i ciekaw stron praktycznie bez grafiki.
Pamitaj, e strona firmowa to praktycznie same obowizki. Dbaj o to,
aby publikowane inform acje zawsze byy aktualne. Poza tym regularnie
czytaj poczt i odpowiadaj na e-maile trafiajce do firmy. Staraj si,
aby czas odpowiedzi na e-mail nie by duszy ni 24 godziny.
Rozdzia 7.
Praca z szablonami
Rozdzia ten zawiera przykadowy opis pracy z szablonami stron WWW. Skorzystaj
z niego ci Czytelnicy, dla ktrych moliwoci czystego jzyka HTML (XHTML) s
zbyt skpe.
Czytajc kolejne podrozdziay, dowiesz si, czym s szablony, poznasz zalety i wady
pracy z szablonami, nauczysz si szuka darmowych szablonw w intemecie, stworzysz
wasne szablony oraz poznasz wybrane elementy jzyka PHP, dziki czemu tworzenie
stron WWW za pom oc szablonw stanie si dla Ciebie prawdziw przyjemnoci.
W tym miejscu chciabym podzikowa Tomkowi Wieliczce z firmy Xann Design
(,http://www.xann.pl), ktry przygotowa zestaw kilku szablonw zamieszczonych na
pycie CD doczonej do tej ksiki.
Wszystkich projektw zamieszczonych na pycie mona uywa bezpatnie do two
rzenia swoich stron WWW, jednak prosibym o zamieszczenie informacji, i autorem
projektu jest firma Xann Design. W ydaje mi si, e to niezbyt wygrowana cena za
uywanie gotowych, darmowych projektw.
Czym s szablony?
Niemal codziennie moemy si spotka z szablonami. Jednak nie wszyscy zdaj sobie
spraw, czym tak na prawd jest szablon, dlatego dalej przytoczyem sownikow de
finicj tego pojcia:
wzr, wedug ktrego wykonuje si tamowo identyczne przedmioty;
wykonanie czego w jednakowy sposb; take wzr do automatycznego
odtwarzania rysunkw, cyfr, kopia, wzornik;
bezmylne, mechaniczne dziaanie, mylenie wedug jakiego schematu.
Dla nas z ca pew noci przydatna okae si pierwsza definicja, a dokadniej jej
pocztek.
276
W przypadku tworzenia stron WWW szablon jest uywany w celu uatwienia pracy
ze stron. Przypomnij sobie, jak wygldao tworzenie mojej strony firmowej. Wszystkie
podstrony miay identyczny wygld, a rnice polegay jedynie na zmianie zawartoci
centralnej czci ekranu. Wspomniaem po utworzeniu pierwszej strony, e mamy sza
blon, na ktrym bdziemy bazowa, tworzc nastpne strony.
Niestety, takie rozwizanie ma sporo wad. W yobra sobie, e musz doda jeszcze
jedn pozycj do menu. To z pozoru proste zadanie wymagaoby poprawek we wszyst
kich plikach, jakie wchodz w skad mojej strony. Ta z pozoru baha czynno w przy
padku duej liczby plikw moe by szalenie mczca.
W zwizku z tym, e nie mam za duo czasu na aktualizacj swojej strony, nie wyobra
am sobie, e powic kilka godzin na wprowadzenie tych zmian. Dlatego czytajc
nastpne strony, dowiesz si, jak rozwizaem ten problem.
Jak to dziaa?
Do ju wychwalania zalet szablonw pora zaj si prac z nimi. Zanim jednak
to nastpi, musisz zainstalowa na swoim komputerze serwer z obsug PHP. Nic si
nie martw, wszystko jest na pycie doczonej do tej ksiki.
Musisz odszuka i zainstalowa program o nazwie VertrigoServ, ktry jest pocze
niem serwera HTTP, kompilatora PHP i bazy danych mySQL. Po instalacji swoj stron
moesz przechowywa w folderze lProgram Files\VertrigoServ\www lub zmieni usta
wienia serwera Apache i wskaza inny katalog.
Teraz moesz wczy serwer. W tym celu z menu Start wybierz opcj VertigoServ,
a nastpnie VertigoServ. Dopiero teraz bdziesz mg pracowa z PHP i szablonami
wykorzystujcymi ten jzyk.
Uwaga
277
Jeeli uywasz kom unikatora Skype, to przed wczeniem VertigoServ wycz go.
W przeciwnym wypadku mog w ystpi problem y z Inlcjallzacj serw era Apache.
Jako przykad do dalszych rozwaa posuy mi prosta strona, ktr przeksztac tak,
by wykorzystywaa szablon oraz PHP. Oto zmodyfikowany kod strony:
<body>
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<li><a href="mapa-strony.html">Mapa strony</a></li>
<1 i ><a href="redakcja.html">Redakcja</a></li>
<11><a href=''kontakt.html">Kontakt</a></li>
</ul>
<div id="menusrodek">
<a href="/"><img src="obrazki/laptop.jpg" alt="Laptop, notebooki, tab le ty" /></a>
<a href=7"><img src="obrazki/logo.gif" alt="Laptop. notebooki, ta b le ty /></a>
<form method="get" id= searchform" action=h ttp ://la p to p y .in fo .p l">
<input type="text" value="" name="s" id="s" class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" class="przycisk" />
</form>
</div>
<ul id="menudol">
<!--Kod PHP (staa tre)-->
</ul>
</div>
<div id="zawartosc">
<!- -Kod PHP (zmienna tre)->
</div>
<div id="nawigacja">
<!--Kod PHP (staa tre)-->
</div>
<div i d="stopka">
<p>Wszelkie prawa zastrzeone. Copyright ©: 2005-2006 <a href="/">Laptopy</a>.</p>
<p>Strona stworzona przez: <a href="http://www.cre8.pl/">CRE8 - tworzenie stron w3c
i optymalizacja</a></p>
<p><a href="sitemape.xml">XML SiteMap</a></p>
</div>
</body>
Teraz do kodu strony naley doda polecenia jzyka PHP, dziki ktrym bdziemy
mogli dynamicznie tworzy strony po stronie serwera. W praktyce bdzie to wygl
dao tak, e zostanie otwarty szablon i w odpowiednie miejsca dynamicznie zostanie
wstawiony tekst ze wskazanego przeze mnie rda.
Najpierw bezporednio pod otwierajcym znacznikiem <body> musz wstawi nast
pujcy cig znakw:
278
<?
/ / D o m y ln e u sta w ie n ia s tro n y g w n e j
$b="body":
?>
Jest to deklaracja domylnych ustawie strony. Chodzi o to, e jeeli otworzymy stron
bez dodatkowych parametrw, to zostan podstawione domylne elementy okrelone
w tym kodzie.
W praktyce bdzie to wygldao tak, e jeeli szablon zostanie otwarty bez dodatko
wych parametrw, to domylnie zostanie do niego doczony plik o nazwie body.
Teraz musz okreli miejsca, w ktre bd chcia wstawi dane. W przypadku mojej
strony postanowiem , e lewa kolum na bdzie dynamicznie wstawiana do szablonu
i podmieniana w zalenoci od potrzeb. Natomiast gwne menu nawigacyjne oraz lewa
kolumna zostan jedynie wstawione do kodu strony. W zwizku z tym zmodyfikowany
kod szablonu bdzie wyglda nastpujco:
<body>
<?
// Domylne ustawienia strony gwnej
$b="body";
?>
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<li><a href="mapa-strony.html">Mapa strony</a></li>
<1 i><a href="redakcja.html">Redakcja</a></li>
<1 i><a href="kontakt.html">Kontakt</a></l i >
</u1>
<div id="menusrodek">
<a href='7"><img src='o b ra z k i/laptop.jpg" alt="Laptop. notebooki, tablety" /></a>
<a href="/"><img src="obrazki/1ogo.gif alt="Laptop. notebooki, tablety" /></a>
<form method="get" id="searchform" action="h ttp ://la p to p y .in fo .p l">
<input type="text" value="" name="s" id -"s " class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" class="przycisk" />
</form>
</div>
<ul id="menudol ">
<?php include ('menu.inc'); ?>
</ul >
</div>
<div id="zawartosc">
<?
if($bo) {includeC'Sbo.inc");} else {include("$b.inc");}
?>
</div>
279
<div id=nawigacja">
<?php include C praw a.inc'); ?>
</div>
<div id="stopka">
<p>Wszelkie prawa zastrzeone. Copyright © 2005-2006 <a href="/">Laptopy</a>.</p>
<p>Strona stworzona przez: <a href="http://www.cre8.pl/">CRE8 - tworzenie stron w3c
i optymalizacja</a></p>
<p><a href="sitemape.xml">XML SiteHap</a></p>
</div>
</body>
Aby trwale wstawi dane do strony z innego pliku, musimy skorzysta z funkcji i ncl ude.
Odpowiedni kod zam ieciem poniej. Efekt dziaania przykadowego wpisu bdzie
taki, e podczas wczytywania strony automatycznie i na stae wczytana zostanie za
warto pliku menu.inc.
<?php include O menu.in c ); ?>
i f ( $bo) {in clude ("$ b o .inc");} else {in c lu d e ("$ b .in c "l:} ?>
Oznaczenie $bo to parametr, ktry bdziemy wywoywa w sytuacji, gdy zmianie bdzie
miaa podlega centralna cz strony. Natomiast druga cz else {in c lu d e ("$ b .in c ")
nakazuje w przypadku braku parametru wczyta w to miejsce domylne wartoci, ktre
zadeklarowalimy zaraz na pocztku <body>. Gotowy szablon musisz koniecznie zapisa
pod nazw index.php. W przeciwnym wypadku uyty kod PHP nie zadziaa.
Przygotowaem szablon, wic teraz pora zaj si plikami, ktre bd dynamicznie
wstawia do szablonu. Oczywicie, s to dokumenty tekstowe. W przypadku strony
gwnej postanowiem, e tekst na niej zawarty znajdzie si w pliku o nazwie body.inc,
menu zapisaem jako menu.inc, a zawarto prawej kolumny jako praw a.inc. Zwr
uwag na to, e pliki m aj rozszerzenie inc, ktre wystpowao rwnie przy kodzie
PHP w szablonie.
Poniej zamieciem przykadow zwarto pliku body.inc. Dziki temu bdziesz mg
zobaczy jego zawarto.
<div id="wpis">
<h2><a href="news01">Nowy Flybook VM</a></h2>
<p class="data"><strong>Data:</strong> 20.07.2007 <strong>Autor:</strong> Bartosz
Danowsk1</p>
<img src= "obra zki/flybook.jpg" alt="Flybook MV" />
<p>Co pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM
posiada ekran mogcy ustawi si w pozycji normalnego ekranu LCD, tak aby uytkownik
mia wygodniejsz pozycj podczas uytkowania komputera. Szczeglnie przydatne je s t
to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo ma powierzchni
na pooenie notebooka, np. w samolocie.</p>
<p>Flybook VM moe wyglda jak normalny laptop, lecz w rzeczywistoci twrcy laptopa
maj aspiracje, aby ich produkt konkurowa z desktopami. Laptopa mona bdzie kupi
pod koniec miesica w cenie $2,899.</p>
<p class="zrodlo"><a href="http.7/www.notebookcheck.net">Wicej »</a></p>
</div>
280
<div id="wpis">
<h2><a href="news02.html">Fujitsu LifeBook P7230</a></h2>
<p class="data"><strong>Data:</strong> 22.07.2007 <strong>Autor:</strong> Bartosz
Danowski</p>
<img s rc = "o b ra z k i/lifebook_miniatura.jpg" alt="Lifebook P7230" />
<p>Fujitsu o g o s i dostpno w USA LifeBooka P7230. ultraprzenonego laptopa
z matryca 10.6". F ujitsu LifeBook P7230 way poniej 1,4 kg i ma ok 3 cm gruboci.
Twierdzi si. e je s t to najmniejszy i najlejszy notebook z wbudowan zatok
do obsugi nagrywarki DVD. czy drugiej b a te rii - zwiksza ona czas pracy notebooka
do prawie 10 godzin.</p>
<p>Notebook je s t wyposaony w procesor Core Solo U1400 P7230, oparty na chipsecie
945GMA, oraz w kart graficzn Intel Graphics Media Accelerator 950. Obsuguje do 2 GB
pamici RAM i moe posiad dysk twardy do 80 GB (4200 rpm).</p>
<p class="zrodlo"><a href="news02.html">Wicej »:</a></p>
</div>
Zwr uwag, e otwieram plik index.php (to szablon), a tu po nim znajduje si znak
zapytania oraz parametr bo, ktry zadeklarowaem w szablonie. Nastpnie po znaku
rwnoci znajduje si nazwa pliku, ktry chc wczyta do szablonu w miejsce, gdzie
znajduje si kod PHP z param etrem bo. Pamitaj, e podajc nazw pliku, pomijasz
rozszerzenie inc, gdy jest ono domylnie zadeklarowane w kodzie PHP szablonu.
Na rysunku 7.2 wida efekt dziaania strony, w ktrej szablon zosta wywoany wraz
z dodatkowym parametrem.
l_ ; Heion
Dm ow ski
w Oisable- *
Cookies-
H irdw are
.
281
W iadom oci
'
CSS- . O F o rm i-
Imeges- 0
Pozycjonowanie
Materiay M ia k i O
Sowniki
i Program
Information-
Laptopy, n o te b o o k i ta b lety - p r o f _ Q
LAPTOPY
p r o f e s jo n a ln e c e n t r o m in fo r m a c y jn e
AKTUA LN O CI
TESTY
N ow y F ly b o o k V M
ARTYKUY
___
FORUM
A rtvkntv
Baterie - p r a w d a i naty
Partycje i noniki recovery
C o pocztkow o wyglda n a tuzinkowego laptopa, wcae nim nie
jest. Flybook VM posiada ekran mogcy ustawi si w pozycji
normalnego ekranu LCD, tak, aby uytkownik mia wygodniejsz
pozycj podczas uytkowania kom putera Szczeglnie przydatne
jest to w czasie korzystania z laptopa w miejscach, gdzie mamy
bardzo ma powierzchni na pooenie notebook, np w samolocie.
Testy
IB M ThinkPad T42
IB M ThinkPad T60
IBM ThinkPad X 60
W icej
F u jitsu L ifeB o o k P 7 2 3 0
P*9Rnk Compit
0 790s
282
Edycja
W idok
Histeria
4>L - H elion
D anow ski
Cookies-
Disable H
U
Zakadki
H ardw are
Pom oc
W iad o m o ci
CSS- V J Form s-
R5S K i a c t o j s o c i
Narzdzia
M apa s t r o n y
G o o g le Reader j M G O nline
M iscellaneous*
O utline-
* Resize-
Program y
O ptions-
R e d a k c je
I B I ;
LAPTOPY
A K T l A N O SCI
TESTY
F u jits u L ife B o o k P 7 2 3 0
A R T Y K U Y
F .A .Q .
T O R l'M
Artykuy
Baterie - prawda i mity
P arty cje i noniki rec o v ery
N otebook jest wyposa om w procesor C ore Sok) U 1400 P 7230 opartvm na chipsecie 945GM A
oraz w kart graficzna Intel Graphics M edia Accelerator 950 Obsuguje do 2GB pamici RAM i
moe postadc dysk twardy do 80GB (4200rpm)
Fujitsu LifeBook P 7230 jest wyposaony w bezprzew odow kart sieciow Intel PR O Wireless
3945b g Posiada rwnie wbudow any modem, kart sieciow 1GB oraz Bluetooth Fujitsu LifeBook
P 7230 jest zaopatrzony w dw a porty USB, port IEEE 1394, port wideo, port na karty I II PCM C IA i
port do obsugi kart M emory Stick, M em ory Stick PRO . Secure Digital (SD)
Uhraprzenony laptop Fujitsu jest dostpny w wersji z obudow pokryt czarn lub bia skor
M ona wybra wersje z svstemem Windows Vista Home Basic W indows Vista Business ub
W indows XP Professional LifeBook P '2 3 0 bdzie kosztowa od S 1,699 za podstawow
konfiguracj
PgeRank. Compele
S c.! a-,
I"' i
Wnioski
*
Wyobra sobie rozbudow strony WWW, ktra skada si z tysica podstron. W przy
padku zmiany wygldu caej witryny, ktra nie uywa szablonw, moesz liczy si
z tygodniami cikiej i mozolnej pracy. Teraz pomyl o tej samej stronie, ale zbudo
wanej z wykorzystaniem szablonu. Zwykle wystarczy zmiana jednego lub kilku plikw
odpowiedzialnych za wygld i po kopocie.
Podsumowujc, korzystanie z szablonw oraz jzyka PHP znacznie uatwia proces
budowy strony WWW. Opisany przeze mnie przykad opiera si na pobieraniu danych
z innych plikw, ale nic nie stoi na przeszkodzie, aby skorzysta z bazy danych i z niej
pobiera dane.
Rozdzia 8.
Darmowe usugi
dostpne w sieci
Rozpoczynajc pisanie tej ksiki, postanowiem nauczy Ci tworzenia stron WWW
w moliwe najprostszy sposb. Dlatego te skupiem si na jzyku HTML (XHTML)
i kaskadowych arkuszach stylw. Jeli chodzi o reszt spraw, chciabym, aby wiedzia,
e w zasadzie wszystko, co jest Ci potrzebne, znajdziesz w sieci i wystarczy z tego
umie skorzysta. Tak byo z szablonami pokazaem, jak mona z nich korzysta
bez znajomoci PHP. Wystarczy, e tylko nieznacznie zmodyfikujesz moje przykady
i ju moesz dziaa po stronie serwera.
W tym rozdziale chciaem Ci pokaza, jak skorzysta z popularnych wodotryskw,
ktre m og urozmaici stron. Oczywicie, bdziemy korzysta z darmowych usug
dostpnych w intemecie.
Statystyki
Stat.pl to polski system statystyk, ktry mona uzna za obowizujcy standard. W a
ciciele witryn utrzymujcych si z reklam, a take reklamodawcy uywaj rozwiza
dostpnych na stronie http://stat.pl do prowadzenia rozmw i przygotowywania kam
panii reklamowych.
Stat.pl udostpnia kilka wersji swoich statystyk, ktre rni si cen oraz oferowanymi
moliwociami. Na rysunku 8.1 przedstawiem tabel ze szczegowym porwnaniem
poszczeglnych wersji statystyk.
Usuga w wersji stat.pl/PBI jest oferowana bezpatnie wraz z pewnymi ograniczenia
mi. Osoby wybierajce darm ow wersj statystyk m usz pogodzi si z tym, e ich
witryna od czasu do czasu bdzie wywietla nowe okno z reklam. Poza tym darmowa
wersja statystyk pozwala kontrolowa ruch z rozbiciem na dwie strony. Chodzi o to,
e moemy niezalenie monitorowa cay serwis oraz jedn wybran podstron. Wersje
284
Rysunek 8.1.
Porwnanie
wersji statystyk
oferowanych przez
Stat.pl. Tabela
pochodzi ze strony
http://stat.pl
1E l
&
100
500
. bez
bez
000 /miesic 000 /miesic limitu /cennik limitu /cennik
lim it odson
bez limitu
skrypty
zliczajce
emisja ankiet
badawczych na
serwisie
logo na stronie
gwnej
100
skryptw
200
skryptw
*
+
administracja
prawa edycji
skryptw
usuwanie
odsyaczy
blokada
adresw IP
>
prawa dostpu
(dodawanie
loginw )
**
*
**
J
-*
LOGO
Inform acje o
koncie
Dane adresowe
lyV
>
ranking
liczniki
**
pozwala zlicza
strony HTML,
PHP, ASP...
<9
strony FLASH
kliknicia w URL
t
w
y
M
kliknicia w
elementy FLASH
wt
strony SSL
J #
s/
y>
y>
>
prezentacja danych
>
w ykresy
dane
tabelaryczne
kopiowanie
w artoci do
schowka
dane
podsumowujce
W
y*
y*
quick stats
odsony
a
j*
a
redni czas
trw ania odsony
rednia pozycja
w wizycie
liczba
pocztkw w izyt
liczba zakocze
w izyt
uytkownicy
W izyty
**
V
V*
y>
V
V*
285
Uwaga
286
Rysunek 8.2.
Rejestracja
i zakadanie konta
z dostpem do usug
oferowanych
przez Stat.pl
mps strony
tonwfc?
stat24
login:
r
hasto:
zapamitaj mnie
i* Nie pamitam hasa
Rejestruj
'b-iC-sfe i3 !)o u a p .e .B
stat.pl
rejestracja statystyk
s ta tB iz n e s /
sta tB iz n e sP R O
s ta tO p tim u m /
s ta tO p tim u m P L U S
D a n e k o n ta
s ta t.p l/ P B I
s ta tR a p o r t
Z a s to s o w a n ie s t a ty s ty k
[G s ta t .p l/ P B I
U s u g a *
C e n n ik
s t a t O p t im u m
J a k d o k o n a o p a t
s ta t O p t im u m P L U S
R e je s t r a c ja
s t a t B iz n e s
s t a t B iz n e s P r o
P o r w n a n ie w e r s ji
s ta tD e m o
L o g o w an ie
zamw
bezpatn
konsultacj
I m i i n a zw isk o i
L o g in *
la p to p y in fo.pl
H a s o *
Powtrz haso*
E m a il
a d re s @ e m a il.c o m
A d r e s w it r y n y *
h ttp.//lapo py in fo.pl
W ersja jzyko w a*
j p d W a T ~ ]B
K a t e g o r ia w itr y n y *
j lrternet. kompiitefy ^
P o d k a t e g o n a w it r y n y
[ko m p u te ry
T y tu ( d o 2 5 z n a k w )
L a p to p y , notebo oki
O p is ( d o 1 0 0 z n a k w )
F o ru m p o w i c o n e k o m p u
e -m a ilr
T e le fo n
( z n r k ie ru n k o w y m )1
T e m a t r o z m o wy t
oferta partnerska
| |
T erm in ic o n te k tu :
25-10-2008
&
D o d a j m o j s t r o n d o r a n k m o .s t a t. D l
R e g u la m in w ia d c z e n ia u s u g m o n ito r o w a n ia
w it r y n y in t e r n e t o w e j
Rozdzia I.
Postanowienia oglne
Hi
iii
1. Definicje
a) Usuga bezpatna - statystyki
ogldalnoci witryny internetowej
udostpniane przez Usugodawc na
warunkach niniejszego regulaminu
zgodnie ze specyfikacj zamieszczon na
stronach internetowych stat24;
b) Klient - podmiot zlecajcy
Usugodawcy wiadczenie Usugi
bezpatnej poprzez wypenienie
elektronicznego formularza
rejestracyjnego dostpnego na stronach
internetowych http://www.stat.pl;
v
I*
A k c e p t u j p o w y s z y r e g u la m in "
287
stat.pl/PBI
W y k o rz y sta n e sk r y p ty : 2 /
ir
krypty
Dnito) nomy sk ry p i
<script type^text/javaicript*)
document.writeinCV+je rV ip t tvpe="teKt/(avasortpt !ro='htp.//s3hit.j1at.pl/-+(neuj
DateO).9etTimeO+Vcript)?tdfiprrqeLMCft9/ioOKP2MIYH2G?HINHUiEWCI3KrOr'.U?/lr11"></'+'or,+'lpl>');
</oript>
roacmueoTopy.inrojH
...
* (Wntinijt.-tK.io. * i
POMOI.
WIZYTY
* HW1INIS1RttC IB - IOOO
OOSONY
OOSYRCZE
GEaOKfltlZfiCW
TECHNICZNE
RflNKJNGI
KONWERSJA
h
I P o b lare logo ui p o s ta c i w e k to ro w e j
W ybiorz kolor:
4*
*
R0MMSTIWC
13 tak
Ne
I i Po klikniciu przekieruj na witryn uiuicu.jtat.pl
28 8
Dostpne informacje
Informujc o darmowej wersji statystyk, wspominaem, e m aj one pewne ograni
czenia. Jednak nie powinny stanowi one duej przeszkody w przypadku mniejszych
witryn i osb, ktrym nie przeszkadzaj pojawiajce si od czasu do czasu reklamy.
W tym podrozdziale opisalimy kilka najwaniejszych danych, do ktrych mamy dostp.
Uytkownicy
W sekcji Uytkownicy (rysunek 8.5) zawarte s dane na temat liczby uytkownikw
ogldajcych stron. Sposb badania liczby uytkownikw zakada, e kady go
odwiedzajcy stron uywa tylko jednej przegldarki i jednego ciasteczka cookie.
W uproszczeniu mona przyj, e zliczane s unikalne cookies. Darmowa wersja staty
styk daje jedynie dostp do podsumowania. Dane m og by prezentowane w zestawie
niu rnych okresw, np. ostatnie dwa lata albo poprzedni lub biecy rok.
Warto zwrci uwag, e dostpne wyniki rozbijaj uytkownikw na nowych i na
powracajcych. To cenne informacje, poniewa pozwalaj stwierdzi, czy podjte wy
siki majce na celu lepsze wypozycjonowanie strony przyniosy efekt. Napyw nowych
uytkownikw oraz zmiany, jakie w napywie tym zachodz, to wskanik obrazujcy
rezultat podjtych przez Ciebie dziaa. Natomiast dane na temat uytkownikw po
wracajcych przydaj si przy okrelaniu tego, czy witryna spenia pokadane w niej
oczekiwania. Jeeli liczba powracajcych uytkownikw jest dua, wiadczy to o tym,
e strona znalaza grup wiernych czytelnikw.
Wizyty
W sekcji Wizyty (rysunek 8.6) przedstawione zostay dokadniejsze dane na temat za
chowania uytkownika strony. Wizyta w rozumieniu prezentowanych statystyk oznacza
cig nastpujcych po sobie odson poszczeglnych podstron, wykonanych przez jed
nego uytkownika. Istotnym czynnikiem jest tutaj czas. Ot midzy poszczeglnymi
odsonami nie moe upyn wicej ni 30 minut. Jeeli czas ten zostanie przekroczony,
mamy ju do czynienia z kolejn wizyt.
LPTOPYJMf O.Pl
podstrony
Strona louina witryny
289
0 0 0
1$
Z 117 865
2 036 7721
30 593
& pouiraoafccv
O nowi
O irednia na mieaac
i
m
Stycze
Luty
Marseo
Kwiecie
Maj
Czerwiec
Lipiec
Sierpie
2005
6 pwjjracajacs-
O now.
t5 750
13 V
250
Stycze
lu ty
Marzec
Kwieoie
Maj
Czerwiec
Upiec
Sierpie
Wrzesie Padzior
Grudzie
: freama na misko
290
Dziki danym o wizytach moemy wycign wnioski na temat tego, czy dana witry
na spenia swoje zaoenia. Cennym parametrem, do ktrego mamy dostp, jest dugo
wizyty obrazujca, ile podstron odwiedzi uytkownik podczas swojej bytnoci na stro
nie. Jeeli dodatkowo zestawimy te dane z czasem wizyty, moemy stwierdzi, czy go
strony zainteresowa si treci, czy te tylko poklika i poszed sobie.
Uzupenieniem s szczegowe dane na temat ostatnich 50 wizyt. Dziki nim moemy
dowiedzie si, skd pochodzi uytkownik, w jaki sposb trafi na stron i czego szu
ka. Dane te pozw alaj zebra wicej informacji na temat zachowa konkretnych
uytkownikw. Z punktu widzenia pozycjonera, szczeglnie cenne s informacje do
tyczce sw kluczowych, po wpisaniu ktrych uytkownik trafi na stron.
Odsony
W sekcji Odsony (rysunek 8.7) przedstawione zostay dane na temat wywietle ka
dej strony przez przegldark uytkownika. Parametr ten najwierniej prezentuje wzrost
lub spadek popularnoci witryny. W przypadku wersji bezpatnej moemy sprawdzi
liczb odson strony gwnej oraz wszystkich pozostaych podstron. Zrnicowanie
jest mae i nie pozwala zweryfikowa, jaka jest popularno poszczeglnych czci
witryny. Nie zmienia to faktu, e moemy wyrobi sobie zdanie na temat oglnych
tendencji panujcych na analizowanej witrynie.
RDMMSTfiflOft
LneroPVJNro.pl
H I podstrony
Strona qloamo mitryny
2 11/ 5
2 096 772
30 333
m
m
291
Odsyacze
W kolejnej sekcji, o nazwie Odsyacze (rysunek 8.8), zawarte zostay najcenniejsze
z punktu widzenia osoby zajmujcej si pozycjonow aniem stron informacje.
W podsumowaniu moemy uzyska informacje na temat udziau wej z wyszukiwa
rek, katalogw, zwykych stron i bezporednich wej.
BOB
a Zwykle witryny
. Wyszukiwarki Katalogi
**
Wrzesie 2006
Lipiec 2006
Padziernik 006
Miesic
0 bezpccreonie
V.
Padziernik 2006
Wrzesie 2006
Sier pie 2006
Lipiec 2006
19 SIS
25 186
58.3%
59.3%
Ulitryfiy
1 759
6 752
V.
m%
15.7%
i,IM w a r i. i
Katalogi
9 092
10 792
272%
25.1J4
113
0
1
O.HX
0X
W podmenu Strony odsyajce (rysunek 8.9) mieci si wykaz stron, z ktrych miay
miejsce odwoania. Lista przedstawia 20 najpopularniejszych stron, ktre odsyay do
Twojej witryny. Tabele zawieraj dane o adresie strony, dugoci i czasie wizyty. Do
datkowo wyniki podzielono na strony polskie, zagraniczne i nierozpoznane.
Na szczegln analiz zasuguje podmenu Wyszukiwarki (rysunek 8.10), w ktrym za
prezentowane zostay dane na temat odwoa z wyszukiwarek. Dostpne dane przed
stawiaj nazw wyszukiwarki, liczb wej z polecenia danej wyszukiwarki oraz dugo
i czas trwania wizyty. W arto zauway, e poszczeglne wyszukiwarki s podzie
lone wedug silnikw. W naszym przykadzie z silnika Google korzystaj strony http://
www.google.pl,http://interia.pl i http://mysearch.com. Liczba wej z wyszukiwarki
Google jest prezentowana oglnie dla wszystkich witryn uywajcych silnika Google
oraz dla kadej oddzielnie. Dodatkowe dane na temat dugoci wizyty pozwalaj oceni
warto uytkownikw odsyanych przez konkretne wyszukiwarki. Dziki temu mo
emy na przykad intensyfikowa lub ogranicza dziaania majce na celu uzyskanie
lepszych pozycji w wynikach wyszukiwania.
292
UYTKOWNCY
WCVTY
OOStNY
OOSYlftCZE
GEOLOKHUZROfl
TECWC2TC
RftfWNGI
KONWERSJA
- ' .
fiDTWSTRfiOfl
"
<
POMOC
LIPIEC 2006
W2CSN 2006
3IEPPIEM 2006
H | podrtrony
EU Strona glowna witryny
2 086 772
30 593
OD
2 1 1 ,9 6 5
j 1 tp
LRPTOPY.INFO.PL
SKRYPTY
Kaaba w izyt
S 853
dtugotf w zyty
ts
1 : B P o lsk a - H 676
forum.laptopy.info.pl <6> - 2 76H
W im iy top-IOO.pl <t) - 3HI
[p. forum.purepc pl <2> - IH3
- laptopyjnfo.pl <3> - 125
www fraipe.pl <6> - 99
[-0 forum ldg.pl <6> - 95
* WWWtotoi.pl <2 > -78
- www laptopy infopl ( 0 - 55
www cdrinfo.pl <6> - HI
pocztalO o2.pl <0 - HO
poczta.onot.pl <2> - 38
P www.myapplo.pl < 0 - 3 7
forumjnfojama.pl <1> - 31
fi twojopc.pl <3> - 31
poczta.wp.pl <6> - 30
S komputery.katalogi.pl <3> - 29
B forum.cdrinfo.pl <6) - 28
Si forum.gazota.pl <1> - 26
3 www.fkn.pl <3) - 25
iii wwwJaptopnews.pl <H) - 21
oo ;
8.3
10.9
12
6.2
123
6.6
51
13
13.3
12.0
6
8.8
33
13.7
7.9
10.7
H.6
9.7
12.8
10
16.8 .
I2m I9s
17m 36s
31s
7m Ws
13m 28s
9m 25s
5m 2k
Im 37s
16m 38$
10m 3Hs
8m19s
7m 56$
2m2s
1Hm HHs
Hm 7s
17m HHs
5m 19$
9m 27$
lim 33$
0$
Nm 32$
6m 3Hs
10$
16m 18$
6m 3s
1$
2m 58$
32m 31$
Os
H2m 32$
i~ Z a g r a n ic a - 79
T j www.iimiy.not <6> - 17
BI wwwJtaidto.org < 0-10
t my.opera.oom <1) - 10
* wwwgjrzomo org <0 - 5
- www.frozita.not <0 - H
:.t dolicio.ui <2) - 3
i www.p35-forum de <2> - 3
* forum.ostoskop.not <0 - 2
55
1.1
117
5.9
i2 :
2.0
32.3
1.0
205
Rysunek 8.9. Panel adm inistracyjny system u Stat.pl sekcja Odsyacze/Strony odsyajce
stat.pl/PBl
W m tm m m
* >.: ; ,
SKRYPTY
WIZYTY
ODStONY
* WYSZUKIWARKI
POMOC
| podstrony
I Strona gwna witryny
tVTKOWTCV
ODSYtfiCZE
RRNKNG
KONWERSJA
ROMKSSTRROfi
i- >>
Ms
ftecWoM
2 086 772
30 593
WSZYSTKIE - 9 025
7m
6.5
Googlo - 8 587
- googlo com <31) - 8 538
p lntorta.pl <28) - H7
aol.com <0 - 1
32 mysearch.com <0 - 1
7m 6s
7m 6s
6m 37$
0$
Os
6.5
6.5
8.0
N e tS p r ln t 253
- wp.pl <31) - 230
t komputorswiat.pl <5) - 10
' o2pl <5> - 5
notsprint.pl <5> - 5
- gery.pl <1) - 2
ti polska.pl <1) - 1
Hm lis
Hm 20$
Im 51$
0$
8m 31s
0$
15$
H.8
H.8
3.H
10
10.2
10
M o rfe o - 178
1% onet.pl <31) - 178
5m HHs
SmHHs
60
6.0
Y ah o o - 6
>: yahoo.com <3) - 6
Hm H8s
HmHSs
7.3
7.3
Os
0$
1.0
Szukacz- 1
3 szukaoz.pl <!> - 1
to
10
2.0
10
293
stat.pl/PBI
UYTKO W CY
Od>yt<v
SKRYIMY
WIZYTY
ODSONY
ODSYACZE
GEOtOKALIZMCJA
TECHMCZ*
RflNKlNGl
KOHWeRSK
RDMWTROC
POMOC
tece o6
sCrpc tm
worrseft ooo
is*$rifeii; :oo6 ;
O S E3
2 117 365
2m m
30 393
WSZYSTKIE - 113
1
P o ls k a - 113
- litalo.on*t.pl <3> - 39
prezost27.itartotuy.oom <D - M2
: UHiAU.qkueb.mfo <3> - 6
f.
.+;
'
uAuuj.tuebuAueb.pl 0> - 3
katatoq.reqotvoompl <t) - 1
uAUtu.QUtiazdor.pl <t> - 1
jzukaj onet.pl <0 - 1
S
Ora 9s
t n 57s
13m HOs
Ol
2m 3i
Ol
Ol
Oi
Z a g ra n ic a
Os
N iero z p o zn a n e p a stw o - O
Os
OB
3.0
IM
7.M
t.0
17
to
10
10
0.0
0.0
Geolokalizacja
Odpowied na pytanie, skd przychodz Twoi gocie, znajdziesz w sekcji Geolokali
zacja (rysunek 8.12). Moesz sprawdzi kontynent i kraj pochodzenia, a w przypadku
polskich uytkownikw masz moliwo okrelenia wojewdztwa oraz orodka. Dane
geolokalizacyjne przydaj si podczas okrelania profilu goci strony oraz sprawdza
nia pozycjonowania witryn firm lub sklepw majcych swoje rzeczywiste siedziby.
29 4
*
SKRYPTY
o<#'
Padziernik 2006
Wrzesie 2006
Oglnie
910
I 21/
6 162
67.1%
6?.7%
59.8%
399
530
3 770
28.6%
28.8%
366%
35
35
208
26%
19%
21%
10
t/
8
0.8%
1%
09%
0
12
50
0.6%
0.7%
0.6%
1
3
31
0.3%
0.2%
01%
Techniczne
Ostatnim elementem, na ktry chc zwrci Tw oj uwag, jest sekcja Techniczne (ry
sunek 8.13). Dane tutaj zebrane okazuj si szczeglne przydatne podczas optymali
zacji strony w celu uatwienia uytkownikom korzystania z niej. Moesz sprawdzi
nastpujce parametry:
rodzaj i wersja systemu operacyjnego,
rodzaj i wersja przegldarki stron WWW,
rozdzielczo ekranu,
liczba kolorw.
Dane te s przydatne nie tylko podczas optymalizacji strony, ale rwnie przy two
rzeniu profilu goci. Na przykad rodzaj systemu lub przegldarki wiadczy o stopniu
zaawansowania i wiadomoci uytkownika. Jeeli Twj go uywa Firefoksa, mona
to zinterpretowa tak, e wiadomie wybra alternatywne rozwizanie dla MS Internet
Explorera, ktry jest dostarczany domylnie w kadej wersji MS Windows. Oznacza
to, e taki uytkownik ma wiksze wymagania dotyczce bezpieczestwa i moliwoci
oferowanych przez przegldark, jest zatem bardziej wiadomy ni ten, ktry uywa
produktu firmy M icrosoft. Dziki tego typu informacjom moesz lepiej dostosowa
ofert i tematyk poruszan na stronie.
WIZYTY
iw topy tneo^K
LRPTOPYJNFO.PL
2 117 365
poditrony
2 086 772
30 593
u jy b ie r?
0D30NY
29 5
TECHNCZTC
RflMWW
KONVYERS
RCWMSTRflC
|j || J J J
>
1
2
3
H
5
6
7
8
9
10
11
12
13
11
15
16
17
18
19
system
WlndoujsXP!;]
Wmdoujs98 0
WmdouK2000 :
Linux 2)
WindouK2OO30
WindouisME 13
WindowsNT Tj
MacOSXg]
Windoujs95 3
t-findoujsCE '/}
FretBSOCil
MacOSS:
SunOS 0
Symbian 0
HPUX0
PalmOS 0
BeOS H
NetBSOf!
OpenBSO
ui'/Uoujnicy
67 26S
3 57
3 821
2 203
871
701
216
188
61
27
17
10
3
3
2
2
1
1
1
81.623%
1.979%
1.808%
2772%
1.226%
0886%
0.31%
0.237%
0.077%
0.031%
0.022%
0.013%
0.007%
0.001%
0.003%
0.003%
0.002%
0.002%
0.002%
Licznik
Licznik jest jednym z najczciej wykorzystywanych gadetw na stronie WWW; jego
zadaniem jest zliczanie goci odwiedzajcych stron. W dalszej czci niniejszego pod
rozdziau opisaem, w jaki sposb w kodzie swojej strony umieci darmowy licznik
udostpniony na stronie http://www.stat.pl.
Uwaga
296
stat.pl/PBI
KONWERSJA
Pr auta dcrtfpu Skrypty Logo
rWSTfMCJH
* ADMMlSTRRCM - LICZNIK
Liczniki s ta t2 4 prezentuj w izyty,
odsony lub u ytkow nikw
odwiedzajcych stron w
dowolnym rozbiciu czasowym: dzi,
wczoraj, w poprzednim miesicu.
Licznik graficzny:
sta t2 4 proponuje szeroki wybr
kolorowych licznikw prezentujcych dane
o ogldalnoci witryny dla rnych
przedziaw czasowych.
Typ w y w ie tla n y c h d a n y c h
O odsfony 0 wizyty 0 uytkownicy
P r z e d z ia c z a s o u iy
F I dzii 0 wczoraj 0 zoszty tydzie 0 zeszy miesic 0 oglni?
Witryna oglnie
2
3
In stalacja:
Po wybraniu licznika oraz jego
param etrw naley umieoc kod licznika
na stronie www w miejscu, w ktrym
Bczniek ma by wywietlany.
Licznik tekstow y:
U cznk tekstow y mona atw o formatowa
w htmkj np. poprzez umieszczenie skryptu
np. w znaczniku < font color=*f:F0000'
siz e= 2face*'V erdan a> ... < /fo n t> .
C J E H E S E S a r-,C E H .t n D O E E I E E D
a n m 013112223 [ i e b s u ncmmESD
n c ta s a a a c*EBEaa
1,
u sM
123456
i
a /!! n
12
45
61
1
13
2
13
21
35
4;
S y s te m k c n i t
- GG:XXXXXX" />
W miejsce znakw XXXXXXX musisz wpisa swj numer Gadu-Gadu, w przeciwnym
razie usuga nie zadziaa.
RSS WiadoBsoiei
Mapa strony
R edakc}
297
XJ
;a k t
LAPTOPY
A K T U A LN O C I
TESTY
N o w y F ly b o o k V M
A R T Y K U Y
F .A .Q .
FO RU M
Artykuy
Testy
IB M ThinkPad T42
IB M ThinkPad T60
Wicej
F u jitsu L ife B o o k P 7 2 3 0
Wicej
298
Uwaga
Sonda
Jednym z bardziej przydatnych elementw strony jest sonda lub, jak kto woli, ankieta.
Zasada dziaania tego rozwizania jest bardzo prosta. Zdajemy pytanie, udostpniamy
kilka odpowiedzi, a internauci gosuj. Sonda moe zosta wykorzystana na przykad
do sprawdzenia, czy nowy projekt strony podoba si odwiedzajcym.
W dalszej czci niniejszego podrozdziau opisaem, w jaki sposb skorzysta z sond
oferowanych bezpatnie na stronie http://websonda.pl. Warto tutaj wspomnie, e wy
brany przeze mnie serwis nie wymaga rejestracji.
Po wejciu na stron http://websonda.pl wprowadzamy tytu sondy, okrelamy liczb
odpowiedzi i decydujemy, czy gosujcy m aj do czynienia z pojedyncz, czy wielo
krotn odpowiedzi (rysunek 8.16). Dodatkowo moemy zabezpieczy si przed nie
potrzebnym nabijaniem wynikw. Po wprowadzeniu niezbdnych danych, kliknij
przycisk dalej.
Rysunek 8.17 przedstawia nastpny etap, ktry wymaga wpisania odpowiedzi na zda
nie pytanie. Po wprowadzeniu odpowiednich danych kliknij przycisk dalej. Zwr
uwag, e po prawej stronie pojawi si podgld okna sondy.
Nastpny etap (rysunek 8.18) umoliwia zmian wygldu okna sondy. Dokadniej m
wic, m oesz zmieni kolory poszczeglnych elementw, nazwy opcji oraz sposb
prezentacji wynikw. Wszystkie zmiany bdziesz mg zobaczy na podgldzie. Po przy
gotowaniu idealnie wygldajcej sondy kliknij przycisk dalej.
Ostatni etap widoczny na rysunku 8.19 zawiera kod, ktry naley umieci na swojej
stronie. W zalenoci od potrzeb moesz uy zwartoci sekcji JavaScript, Wstaw sond
ja k o ramk oraz Link na Twojej strome. Pierwsze dwie opcje umieszcz modu sondy
na Twojej stronie. Natomiast ostatnia z opcji doda jedynie odsyacz do strony http://
www.websonda.pl, na ktrej znajduje si Twoja ankieta.
Biuletyn informacyjny
Biuletyn informacyjny, zwany inaczej list mailingow, jest bardzo przydatnym na
rzdziem w promocji strony. Dziki biuletynowi moemy wysya informacje o zmia
nach na stronie bezporednio do osoby, ktra je zamwi. Rozwizanie to lata wietnoci
ma ju za sob i obecnie ustpuje pola kanaom RSS. Jednak warto zauway, e nadal
wielu ludzi korzysta z biuletynw. Poza tym nie wszystkie strony s wyposaone w me
chanizmy RSS i w takim przypadku jedynym rozwizaniem moe by wanie biuletyn.
Rysunek 8.16.
Tworzymy sond
etap pierwszy
299
O H)sr*
O Facj
li Rwurn
O Potonjt
10 Kontakt
WEBSONDA
Logn:
0ARMf)VW HOSTING
Logu j
Haso:
f ORUM W6RMASTFRW
KATALOG STRON
OARMOWf DOMf.NY
Krok 1 Pytonie
wasna, niepowtarzalne
SONDA w4krokach:
2a
Wybierz charakter odpov,vedr:
wymylasz in te rn u j c * pytanie
fwor/yj? odpowiedzi
dobierasz indywidualny fty l
wstawiasz kod no stron i wiesz ca m y k im l
w*tokrotna odpowied
N ajpopularniejsze - osta tn ie 30 dn i
Ra k o g o g o so w a e 7
> Co sztM o m u nd u rk ac h ?
> Co cl s to w e m n ie p o d o b a
lub ch o cia widzieli;)
a pojedyncza odpowed
R a ja d n e p z a
Tylko dbi ty c h k t rz y a
> Kto t o j e s t \
Statystyki
> (jruchomsamr nowy serwis z produktami
finansowymi m2m. yoyo.oi.
K atalog sond
' '
TAO
O W ebSondzie *
j i --
P ro m u j WetrSonde
K o n ta k t
..
a PodaeSzk - najlepsze wideo w b r a
L-.Ibgi Karty Kredytowe Konta Osobiste Kredyty samochodowe l okaty i obigacje Kredyty hipotecne Konta mtodaeowe
O firmie * Kasze serwisy Reklama Kontakt
TYOYO
;t. ragulnarui c :: peSyfclprywakKjeei
300
Rysunek 8.1 7.
Tworzymy sond
etap drugi
ibnjeitnKj
WEBSONDA
logre
DARMOWY HOSTING
O forum
B ck j
iim
O Konbikl
Hasto:
Krok 2. Odpowiedzi
lo g u ]
KATALOG STRON
DARMOWEUOMIMY
* T yto/pytane sondy:
# Tak
C ' Nie
OdpcKvd nr U
Tak
Goski
Zobacz wynik
CESO
O WebSondzie Katalog sond Prom uj WebSonde f AQ K ontakt
-Na*eosr/daimowy hosbng YCr/OPl Forum (to Webmasterw WebDps.pi Darmowe t e e i a&asy pocztowe w *7.pi
tja r / s Podzielvk - rvepsze wwieo w se o
r v Karty Kredytorve <Konta Osobiste Kredyty s m tx irm rrr Lokaty! obligacje Kredyty ftpoteczne Konta modzieowe
0 firmie Nasze serwisy * Reklama Kontakt
"YOYO
* v-/ v -'
Rysunek 8.18.
Tworzymy sond
etap trzeci
WUm> a r taWtattm YW
(3 Rajolncj
WEBSONDA
to Fm
Lon:
UARMOWY HOSTING
FORUM WCBMASTt-ROW
O Forum
Q Po* ras
Hasto:
lo g u )
KATALOG STRON
DARMOWY. DOMt-NY
#FFCC66
To sondy:
-FFFCC -
# 606
#990033
V-
Kotor opdowrede:
#330066
mccoooo v
#663366
Szeroko sondy;
150
C zy po dob a C i si now y
wygld strony?
Tak
V Nm
Gowi
Z obacz wyniki
poMitd by
T ek st
Przydsfc grasowana:
G losuj
lok do wynikw;
Z o b a c z wyniki
WtrzysBcb gosow.
WszysSoch go s w
W szystkich gosw: 14
ooear.d by WebSond.
(j
* Jzerowf pedgijek: i m kat* sond
# Tak
* Tak
Tak
;.hw
Tek
O f* *
ra e
I n fo rm a c je
* Twili m dl;
* Twoja strona www^itog/Tbrum:
bartek.danow3Ki@grr.ail com
hSp://danowski pl
ceses
0 WebSondrie Katalog sond * Prom uj WebSone * FAQ K ontakt
ii's
Najlepszy darmowy hosting YOYO.Pl Foiom dla Webmasterw WebTpc.i Darmo itomeny l aiasy pocztowe w XT pi
Rn*- rs Poaeksk - najlepsze Mdeo w skro
1Arfuo Karty Kredytowe Korna Cstfwt* Kredyty samoctottor , lokaty obkgaeje Kredyty htpntoczne Konta mtodnetowe
0 firrwe Nasze serwis Reklama Kontakt
"^"YOYO*3
B Kontakt
Rysunek 8.19.
Tworzymy sond
etap czwarty
30 1
B ftejMTKja
O Faq
O Forum
U Bo<a o *
O Kontakt
WEBSONDA**
Login:
DARM OW Y M O S N tj
FOfUM W F B M A S IfcR G W
lo g u j
Hasto:
K A T A LO G STRON
D A R M O W I DOMENY
S o n d a n a T w o je) s tr o n ie
jeeli chcesz zobaczy swoj sond
k lik n ij tu ta )
J a v a S c rip t
< 1 - P o c z te k k o d u h a a l H v w .w e b e o n d a .p l >
< s c r i p t e t c " h t t p ; <Vwwvi..wb*onda p l 'p o ic * * * o iM to /1 9 1 7 /"
t y p e = t e x t / 3 s v a s c z i p s * * * / Mas i p c
< ! - K o.ni.ec k o d u ta tm l w v w .w e b e o n d a .p l >
W s t a w s o n d ja k o ra m k ( I f r a m e )
l e e l i n i e a o e e z w s ta w i a k o d u J e ir a S c r ip t: d o e w o je g o b o g a
l u b f o ru m d y a k .u a y jn a g o p r b u j u m i e * c l e e o r.d n a t t r o n i ja k o
raaO t, w k l e j 3 e p o n i s z y k o d HTML o r a z m o d y f ik u j c w y z o k o
ra m k i.
< ! P o c z te k k o d u h t j a l w w w .w e b s o n d e .p l >
< i f r e a e SEC " h t t p : //w w w .w e b so n d a p l/ p o k s z r a m k e 11 9 1 7 "
a t y l " v i d t i : 1 6 0 p x ;" s c r o l l n g " B C " a ie r g in w id th * " Q "
o u i r g in h ig h t " 0 " fr* a * b o rd e r-= * 0 " v p a c e " 0 hpece>="0"
< ! - K o n ie c k o d u ta tm l w w w .w 4 itaaan d a.p l
L in k n a T w o je j s tr o n ie
L in k d o s o n d y
(Normalny tak do sondy na stronie vzww.websor.da.pl)
< h r e f ' h t t p : / ' ,w w w . w e b s o n c l a . p l / y l o s o v * n i e / 1 9 1 7 / l i n k Z e g io 3 U j
w m o je j o n d * ie < / >
Skopiuj kod M m l i wklej na swoj stron.
O W ebSo n d a e
K atalo g s o n d *
01 (.'ibuwsic'(>.
P ro m u j W eb S o n d
FAQ
K o n ta k t
fiajtooszy darmowy hosting rOYO.Pl .Forum d a Webmasterw WebTips.pl i Darmowe domeny i atosy poczt! w XT.pl
TYOYO*
* * v
Korr Ssmw ' ;" w. if-Mdi' akrseor rapubmino e r po*yki pcywabtoo
SUBskrypcj
E -m a ilin g to n a js k u t e c z n ie js z a fo r m a p r o m o c ji i
r e k la m y w I n te rn e c ie . W y k o rz y s t a j j !
em h a s a
N ie m a m je s z c z e k o n ta
S tro n a g w n a 4f r e e .PL
a d m in is tr a c ja
s tro n a DEMO
FAQ - p y ta n ia i odp .
P rzy k a d k o m p o n e n tu
Za list e-mailow. Bdziesz gromadzi adresy e-m ail osb zainteresowanych
Tw o j stron, produktem . Ze stron adm inistracji rozelesz jed n ym klikniciem
tysice wiadomoci!
302
S ta r t fr e e
/<$>
b U B s k r y p c ji
T w o je k o n t o
U s ta e m a ili
W ia d o m o c i
N o w a w ia .
P o b ie r z k o d
login: e a th a n
uid: 108541
@: e a th a n @ irc .p l
Z m ie d a n e | W y lo g u j si
S U B s k r y p c ji
S tro n a g w n a 4 fre e .P L
a d m in is tra c ja
s tro n a DEMO
FAQ p y ta n ia i odp .
^
T w o je k o n to
T w o je konto
Sprawd swoje konto.
Zobacz ile moesz jeszcze wysa wiadomoci.
U tw rz NO W A SU B skrypcje
rz swj nowy kom ponent - SUBsjs
Do TwojeJTTSty brdiopfsyw^cTi^czy te lnicy,
a Ty bdziesz im mg rozsya wiadomoci e-mailowe
> Co to je s t 4 fre e ?
^ Zapomniaem hasa!
0 Dlaczego za darmo ;-)
D> Regulamin
&> Masz problem - n a p is z
W odpowiednie pola, widoczne na rysunku 8.22, musisz wpisa nazw swojej listy oraz
krtki opis, a nastpnie klikn przycisk Dalej.
Rysunek 8.22.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap trzeci
Start 4 free
S DSskrypct
ioje ko n t o
B m B S lffl S g ii
Lista emaili
Wiadomoci
N o w a wiad.
Pobierz ko
| n o w a S U B s k ry p c ja
NOWA s u b s k ry p c ja
T w o r z e n ie n o w e j lis t y e - m a ilo w e j
K ro k : 1 z 4
S u b s k r y p c ja - p a r a m e t r y p o d s ta w o w e
N a z w a s u b s k r y p c ji :
lwww.danowski.pl
bidzMi w y ry h r ,i w nt-gwku k t d tj wiadomoci, np "S ubskrypcji BiznoNtz"
O p is s u b s k r y p c ji :
Porzu |
Kolejne okno (rysunek 8.23) suy do wpisania tekstu powitalnego dla uytkownikw,
ktrzy zdecyduj si dopisa do naszej listy. Jeeli uznasz, e domylny tekst jest nie
odpowiedni, moesz go zastpi innym. Nastpnie kliknij przycisk Dalej.
Rysunek 8.23.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap czwarty
3 03
NOWA subskrypcja
T w o r z e n i e n o w e j lis t y e - m a ilo w e j
Krok: 2 z 4
S u b s k r y p c ja
w ia d o m o p o w it a ln a
N a g w e k w ia d o m o c i p o w it a l n e j ( s u b j e c t ) : ___________________________
| w it a m y n a li c ie " N A Z W A "
Wiadomopo witalna dostanie czytelnik po zapisaniu si do Twojej subskrypcji
I d o stp n e kody:
s k o p iu j te kody w tre wiadomoci,
I program zastpi je prawidowymi
| wartociami (pamitaj o znakach @)
\ NAZW A
nazwa Twojej subskrypcji podana w
edycji parametrw oglnych
| O P IS
0pis subskrypcji podany w edycji
parametrw oglnych
T r e w ia d o m o c i p o w it a l n e j:
W ita j EM AIL !
Z a p is a le s s ie n a lis t N A Z W A
O d t e j p o ry j e s t e s c z e s c ia n a s z e j s p o e c z n o c i! B e d z ie s z o tr z y m y w a
w s z y s t k ie p r z y g o to w a n e p r z e z n a s w ia d o m o c i.
J e e li c h c e s z s ie s k o n ta k t o w a z a d m in is t r a t o r e m lis t y , n a p is z po d
a d re s : @ A D M IN _ EM A IL @
W k a d e j w ia d o m o c i o t r z y m a s z in fo r m a c je , j a k z re z y g n o w a z te j lis ty .
E M A IL
adres e-maii Twojego czytelnika
| @ A D M IN _ E M A IL @
Twj adres e-mai! podany przy
rejestracji konta 4free
P o rz u |
<<< P o w r t
| C~ D a le j >>>
W oknie widocznym na rysunku 8.24 musisz wpisa tekst poegnalny dla goci, ktrzy
zrezygnowali z dalszego otrzymywania naszych informacji. W tym przypadku domylny
tekst moesz rwnie zastpi innym, bardziej odpowiednim. Po wprowadzeniu zmian
kliknij przycisk Dalej.
Rysunek 8.24.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap pity
NOW A subskrypcja
T w o r z e n i e n o w e j lis t y e - m a i l o w e j
Krok: 3 z 4
S u b s k r y p c ja
w ia d o m o p o e g n a l n a
N a g w e k w ia d o m o c i p o e g n a l n e j: _____________________________________
[ R e z y g n a c ja z lis t y N A ZW A "
wiadomo poegnaln dostanie czytelnik po wypisaniu si z Twojej subskrypcji
d o stp n e kody:
I s k o p iu j te kody w tre wiadomoci,
I program zastpi je prawidowymi
1 wartociami (pam itaj o znakach 9 )
\ @ N A ZW A @
T r e w ia d o m o c i p o e g n a l n e j:
W ita j E M A IL !
W a n ie z re z y g n o w a e z n a s z e j S U B s k r y p c ji " N A Z W A . O d t e j p o ry
n ie b e d z ie s z o t r z y m y w a n a s z y c h w ia d o m o c i. J e e li z m ie n is z z d a n ie s k o n ta k t u j s ie z n a m i p o d a d r e s e m : @ A D M IN _ E M A IL @
d
treci moesz korzysta z kodw podanych po lew ej stronie
P o rz u
< << P o w r t
304
ty
<> { W
Wiadomoci
L is ta Tw oich s u b s k ry p c ji z a d re sa m i e m ail
. :
Rysunek 8.25.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap szsty
-/
W a n a in f o r m a c ja J
G ra tu la c je !
Z m ia n y z o s t a y z a p i s a n e p r a w id o w o '
Je e li w k le ie ju k o d te g o k o m p o n e n tu n a s w o j s tro n w w w m e m u s is
w k le ja g o p o n o w n ie ' W s z y s t k ie z m ia n y s o d r a z u a u to m a t y c z n ie w id o c z n e
n a T w o je j s tro n ie w w w .
U lv r z n o w a
Lp
B 1.
nazw a
w w w .d a n o w s k l.D l
il o
c m a il - i
0
subskrvDcie
a k c ja
C ^ S i t a e - n n i l i 1 d o d a i e - n ia il~ T ^ d v c ia i w a c iw o c i. . .
Teraz przysza pora, by doda odpowiedni kod do naszej strony WWW, tak by gocie
mieli moliwo dodawania swoich e-maili do listy i usuwania ich. W tym celu kliknij
ikon o nazwie Pobierz kod, w idoczn na rysunku 8.25 w prawym grnym rogu.
M usisz zaznaczy list (rysunek 8.26), dla ktrej chcesz wygenerowa kod, a nastp
nie moesz wprowadzi zmiany w wygldzie elementu, ktry pojawi si na stronie.
Wydaje mi si, e nie ma wikszego sensu opisywanie poszczeglnych opcji i najlepiej
bdzie, jeli sam sprawdzisz, jak to dziaa. Kod zostanie wygenerowany po klikniciu
przycisku Generuj kod i pojawi si na kolejnej stronie. Musisz go skopiowa, a nastp
nie wklei na swojej stronie w miejscu, gdzie ma by widoczny.
W celu wysania wiadomoci do ludzi, ktrzy zapisali si na list mailingow, naley
si zalogowa na stronie http://www.sub.4jree.pl. W panelu administracyjnym pojawi
si nowe opcje. Musisz klikn odnonik Utwrz now wiadomo (rysunek 8.27). Na
nastpnej stronie pojawi si dwa okna formularza. Pierwsze suy do wpisania hasa,
natomiast drugie jest przeznaczone na tre wiadomoci.
Po wpisaniu caej wiadomoci musisz klikn przycisk Zakocz i utwrz. Na kolejnej
stronie zobaczysz list wiadomoci, jakie zostay utworzone; obok kadej z nich znaj
duje si odnonik o nazwie Rozelij. Po jego klikniciu pojawi si kolejna strona, na
ktrej bdziesz mg okreli, kiedy ma nastpi wysyka i do czonkw ktrej listy.
Wysyka rozpocznie si po klikniciu przycisku Rozelij wiadomo.
Rysunek 8.26.
Konfiguracja
i uruchomienie
biuletynu
informacyjnego
etap sidmy
30 5
L is ta d o s t p n y c h S U B s k ry p c ji
W y b ie r z s u b s k r y p c je , d la k t r y c h c h c e s z w y g e n e r o w a kod:
m oesz wygenerowa kod dl kitko subskrycji jednoczenie
"N,
11
nazw a: w w w .d a n o w s k i.p l
liczba a k tyw n ych e -m a ili: 0 (w ty m a kc e p tu je HTML: 0 )
P a r a m e t r y k o d u S U B s k ry p c ji
S z e ro k o :
|i6 Q pt -1
wybierz warto 1 0 0 %, rozcigniesz okienko na ca szeroko
Ram ka:
[J
T | k o lo r: # 0 0 8 0 0 0
ko)or. |#66oc99
N a g w e k :
T re *:
W y b ie r z k o lo r
W y b ie r z k o lo r
K o lo r ta :
j # eeffee
W y b ie r z k o lo r
B rak
Lista ^ R adiobutton
w k o lo rz e : [# 0 0 9 9 0 0
W y b ie r z k o lo r
Rysunek 8.27.
Rozsyanie biuletynu
Start 4free
S UBskrypcji
G e n e ru j kod
Tw o j e k o n t o
U s t a emaili
W i aid
d oommooci
ci
N o w a wiad.
wla
Pobierz ko d
A d m in is tra c ja S U B s k ry p c ji
W ita m y na s tro n a c h a d m in is tr a c ji s u b s k ry p c ji!
lo g in : e a t h a n
u id : 1 0 8 5 4 1
@>: e a t h a n @ i r c . p l
N a w ig a c j w s y s t e m ie u a tw i C i g rn e m e n u ik o n e k .
P o n i e j s w s z y s t k ie d o s t p n e d la C ie b ie o p c je s y s t e m u .
M a s z p y t a n ia ? N ie w ie s z j a k d z ia a j a k a o p c ja ? K lik n ij w k la w is z p o m o c y :
Z m i e d a n e | W y l o g u j s i
S tr o n a g w n a 4 fr e e .P L
a d m in is t r a c ja
s tro n a DEM O
F A Q - p y t a n ia i o d p .
c e n tru m p o m o c y
C o to je s t 4 f r e e ?
D> Z a p o m n ia e m h a s a !
Twoje konto
/A
Lista emaili
vi
S p r a w d s w o je k o n t o .
Z o b a c z ile m o e s z j e s z c z e w y s a w ia d o m o c i.
Tw o je subskrypcj
P r z e g l d a j i z a r z d z a j T w o im i lis t a m i e - m a ilo w y m i.
A d r e s y e - m a il s p o g r u p o w a n e w s u b s k r y p c je .
U tw a rz jT o w w ia d o m o
S tw r z w ia d o m o , k t r r o z e le s z d o T w o ic h j * y t e ln ik w
C> D la c z e g o z a d a r m o ;- )
C> R e g u la m in
b M a s z p r o b le m - n a p i s z
P o b ie rz k o d
K o d H T M L S U B s k r y p c ji d o w k le je n ia n a T w o j s tr o n W W W
Wnioski
W intemecie znajdziesz wiele darmowych rozwiza, ktre pozwol Ci usprawni dzia
anie i funkcjonalno strony. W ystarczy tylko skorzysta z Google i poszuka. Dla
niecierpliwych zamieciem poniej adresy kilku stron, ktre oferuj darmowe dodatki
do stron WWW.
306
http://www.4free.pl
http://free4web.pl
http://server.com
Decydujc si na korzystanie z darmowych dodatkw do stron, pamitaj, e czsto
m aj one pewne mankamenty, np. zawieraj reklamy. Z tego powodu darmowe dodatki
nie zawsze nadaj si do wykorzystania na profesjonalnych stronach WWW. Na szcz
cie w przypadku powanej firmowej strony moesz skorzysta z gotowych rozwiza,
ktre moesz samodzielnie zainstalowa na serwerze. Ogromna kolekcja tego typu
skryptw jest dostpna m.in. na stronach, ktrych adresy podaem poniej.
http://www.hotscripts.com
http://php.resourceindex.com
http://cgi.resourceindex. com
Rozdzia 9.
Przydatne skrypty,
ktrych mona uy
na stronie WWW
W tym rozdziale zamieciem opis kilku skryptw, ktrych mona uy na stronie WWW
w celu poprawy jej funkcjonalnoci i wygldu. Przykady pochodz z nastpujcych
serwisw WWW:
http://webmaster.helion.pl
http://www.hotscripts.com
http://www.CodeLifter.com
Nowe okno
Jest to jeden ze skryptw, ktrych si w sieci naduywa. Z pewnoci nie raz spotka
e si ze stronami zasypujcymi twj ekran lawin okienek. Pomimo to zdecydowaem
si opisa ten skrypt, za pom oc ktrego moesz otworzy nowe okno po klikniciu
odnonika. Mam jednak nadziej, e bdziesz go uywa z umiarem.
W celu dodania moliwoci otwierania nowego okna, wpisz w nagwku swojej strony
nastpujcy kod:
<SCRIPT>
<! -
function displayWindowturl. width, height) {
var Win = window.open(url, "displayWindow", 'w idth*' + width + ' .height
+ height + ,resizable=0.scrollbars=yes,menubar=no') ;
}
//-->
</SCRIPT>
'
308
Rollover
Efekt popularnie zwany rolloverem polega na dynamicznej podmianie obrazka po naje
chaniu na niego kursorem myszy. W zwizku z tym wymagane jest przygotowanie
dwch obrazkw nieznacznie si rnicych np. kolorem.
<a href "# onmouseover="if(document.images) document.aO.src=2.g if
onmouseout="if(document.images) document.a 0.src=i. g i f ;">
<img name="aO" s r c = " l.g if' width="184" height="181" border="0"></a>
}
</scrip t>
309
Jak widzisz, skrypt musi zawiera adres strony, ktr chcesz doda, oraz krtki opis,
pod jakim ma by ona widoczna na licie ulubionych odsyaczy.
Strona startowa
Za pomoc JavaScript moesz utworzy odnonik, ktry ustawi Twoj stron jako
startow w przegldarce osoby, ktra go kliknie. Odpowiedni skrypt ma posta:
<a href"#" o n C lick= "th is.style .behavior'url(#default#homepage)':
th is .setHomePageCh ttp ://h e lion .p l/'):">U staw jako stron startow</a>
31 0
<td>HELION</td>
<td cla ss= "tlo " OnMouseOver "this.style.background='#C0C0C0' ;
t h i s . s ty l e .c o lor='#FFFFFF'"
OnMouseOut="this.s t y le .background #FFFFFF ; t h is . s t y le .c o lor= #C0C0C0'">
<a href="http://www .helion.pl ">Wydawnictwo Flelion</a>
</td>
</tr>
<tr>
31 1
<!
document.write (navigator.appName);
// Rozpoznaje przegldark Netscape i wczytuje odpowiedni arkusz
i f (navigator.appName.indexOf("Netscape") != -1)
{
document.write ( '<1 i nk re i="stylesheet" type="text/css" href="nc.css">') ;
{
document.write(' <1 i nk rel="stylesheet" type="text/css" href=''opera.css">'):
}
eise if(navigator.appName.indexOf("Microsoft ) != -1)
{
//Rozpoznajeprzegldark MS IE i wczytuje odpowiedni arkusz
document.write(' <1 i nk rel="stylesheet" type="text/css" h re f= ''ie .css"> ') ;
}
else
{
//Jeeli nie rozpozna przegldarki, wczytuje oddzielny arkusz
document.write( ' <1 i nk re i="stylesheet" type="text/css" href="inny.css">');
}
//-->
</script>
Zasada dziaania skryptu jest bardzo prosta. Na pocztku sprawdza on, czy ogldajcy
uywa przegldarki Netscape Navigator jeeli tak, to do dokumentu zostanie wczy
tany zewntrzny arkusz stylw o nazwie nc.css.
Nastpna cz skryptu wykonuje podobne zadanie, z tym e sprawdza, czy ogldajcy
uywa przegldarki Opera i w przypadku pozytywnego testu uruchamia arkusz o na
zwie opera. css.
312
Rozdzia 10.
Publikacja
i utrzymanie strony
Po przygotowaniu strony przysza pora na to, aby si ni pochwali wiatu. Zadanie
to sprawia wiele problemw pocztkujcym twrcom stron WWW i z tego powodu
zdecydowaem si na dokadny opis caego procesu. Uznaem rwnie, e warto po
wici kilka stron na instrukcj zakadania patnego serwera oraz rejestracji wasnej
unikalnej domeny.
Uwaga
W ybraem patne konto, poniewa oferuje ono o w iele wicej m oliw oci ni jego
darmowy odpow iednik m .in. m oliw o rejestracji w asnej dom eny. Na te m a t
darmowego hostingu napisano ju bardzo wiele i bez problemu stosow ne inform acje
zajdziesz za pomoc wyszukiwarki. Jeeli chcesz skorzysta z bezpatnej moliwoci
udostpnienia strony WWW, odwied stron h t t p : / / r e p u b l ik a . o n e t . p l / o f e r t a . h t m l
i wybierz konto R e p u b lik a S ta r t. Na uwag zasuguje rwnie strona h t t p : / / w w w . f r e e -w e b h o s ts .c o m , na ktrej znajdziesz bardzo rozbudowany wykaz darmowych serwerw.
314
315
.progreso hosting'
Czonkowie
a to m
uytkownicy
Przycz
si
Szuka | a i i i i y t u g r r - s n i
Informacie o grupach
Google
si
w i c e j
Sortui wg daty
... dziaanie dostp i uptime serwera / sie c i / prdu ) pozdr - Adam Szendzielorz
adam [at] p ro g re so (kropka] pi G S F 600 S "03 (black)
p l.c o m p .w w w 31 S ie 2005 01 01 wg Adam Szendzielorz - 11 wiadomoci - 9
autoiow
hotnq?
... p r o g r e s o pl to dobry wybr, ale m y sie sto su n e k c e n y d o tran sferu tro c h e ich
dyskwalifikuje ja z e sw ojej stro n y m og polecic fr.pl -rwnie szy b k i i tam h o s tin g ...
p l.c o m p .w w w - 24 Kwi 2005 02 49 wg butel - 36 wiadomoci
14 autorw
Linki sponsorowane
H ostin g od 3.99 PLN
Do 6 G B powierzchni 900G B transferu
Domeny za 36 % ceny
www webd pl
W W W Hostin g
w pakiecie domena z a 1 z
pl eu com
www punkt pl
a d s l knux y s e rv id o r d e d n s p r o p io
... t cn ic o del otro un mail del uno. asi. al h a ce r m ovim ientos d e p r o g r e s o d e un ...
E so
m e p a s c u an d o mov' mi dominio d e s d e un h o s tin g a mi ADSL, (h ar c a s i ...
e s .c o m p - o s .li n u x .r e d e s - 24 G ru 2001 00 06 wg Xavier Montero - 9 wiadomoci 5
autorw
Hoting PHP
- n a w e t 20 g i g a - c o p o l e c i c i e ?
... jeli m a s z d ziw na p o trze b e p o sia d an ia h ostingu w P o ls c e , to - stro n n ic zo (bo
koledzy)
http://www p r o g r e s o pl (ch o c m aja napraw d dobra oferte) - lub h ttp // k e i ...
p l.c o m p .la n g .p h p - 20 Marz 11:07 wg [sis] - 6 wiadomoci - 5 autorw
la p .p l
o d rad z am
horting
hotinq
... T eraz realnie ? ,-) p ozdr - A d am S z end zielo rz, a d a m [at] p r o g r e s o [kropka] pl
h ttp //www p r o g r e s o pl h o s tin g - 0801 307 301 G S F 6 0 0 S 03 (black)
p l.in te m e t.p o lip - 10 Kw i 2006 10.00 wg Adam Szendzielorz - 77 wiadomoci - 25
autorw
Rysunek 10.1. Grupy dyskusyjne s nieocenionym rdem wiedzy na temat jakoci usug hostingowych
Jeeli nie lubisz grup dyskusyjnych, opinii na temat firm hostingowych moesz szu
ka na stronach i forach dyskusyjnych powiconych tematyce internetu i tworzenia
stron WWW.
Uwaga
Pam itaj, e przedstaw iona m etoda sprawdzania wiarygodnoci i solidn oci firm y
hostingowej je s t je d n z najskuteczniejszych i obiektyw nych. Jednak dla pewnoci
przed podjciem ostatecznej decyzji skorzystaj z bezpatnego okresu prbnego, ktry
oferuj w szystkie liczce si firm y.
3 16
Zakadanie konta
Po wybraniu i zweryfikowaniu firmy hostingowej przysza pora na zaoenie konta.
Procedura wyglda mniej wicej podobnie, niezalenie od tego, z usug jakiej firmy
korzystamy, i ogranicza si do wypenienia stosownego formularza oraz wybrania
rodzaju usugi.
Uwaga
Jako przykad do dalszego opisu wybraem ofert firm y Progreso, poniewa uwaam
j za jedn z ciekawszych. Na mj wybr m ia rwnie wpyw okres testowy, z ktrego
mona skorzysta, zakadajc nowe konto. Polega on na tym , i bez zobowiza
m oesz spraw dzi ja k o oferow anych usug i dziki te m u na spo kojnie podj
decyzj.
Aby obejrze ofert firmy Progreso, klikamy przycisk Oferta, a nastpnie Serwery
wirtualne. Na ekranie monitora pojawia si wwczas przejrzyste zestawienie waciwo
ci poszczeglnych serwerw wirtualnych rysunek 10.2.
Rysunek 10.2.
Zestawienie
waciwoci
serwerw
wirtualnych
PLANY
BIZNES
pojemno
transfer roczny
BIZNES PLUS
5GB
10 GB
300 GB
600 GB
konta e-mail
bez ogranicze
bez ogranicze
konta ftp
bez ogranicze
bez ogranicze
domeny
bez ogranicze
bez ogranicze
subdomeny
bez ogranicze
bez ogranicze
bazy SQL
bez ogranicze
bez ogranicze
i
wasny adres IP
SSL (opcja)
shell
ii!
ii
ii
i)
ii
i)
jextraneti
ii
ii
sklep internetowy
ii
cena / 12 m-cy
250 PIN
500 PIN
cena / 6 m-cy
150 PN
300 PI N
317
..._ . . .
PE SE L:
NP:
dotychczasowy adres e-mail:
brt k@danpwski.pl
telefon: j [
1 'J J
Rysunek 10.4.
Zakadanie nowego
konta etap drugi.
Login i haso to
elementy niezbdne
do poczenia si
z serwerem w celu
dokonania zmiany
ustawie
i zarzdzania kontem.
Adres startowy to
tymczasowy adres
strony WWW,
ktry ulegnie zmianie
p o zarejestrowaniu
wasnej domeny
ksiazka
haso: *
haso (powtrz): *
adres startowy: *
ksiazka
.civ.p l
abonament: x
0 biznes
Q biznes plus
0 roczny (12 miesicy)
O proczny (6 miesicy)
(sprawd kod)
kod promocyjny:
l i. l
31 8
Rysunek 10.5.
Zakadanie nowego
konta etap trzeci
(jbebb D
ADRES KORESPONDENCYJNY
adres:* * * * * * *
kod i miasto: * ka to wice
dopisek: nie podano
I p o p raw 1
DANE SERWERA
login:* * * * * * *
haso:* * * * * * *
adres startowy:* ksiazka.civ.pl
plan hostmgowy:* biznes
abonament:* 12 m -cy
cena netto / brutto: 2 S 0 .0 0 PLN / 3 0 5 . 0 0 PLN
kod promocyjny: nie podano
( pop ]
319
Rysunek 10.6.
Potwierdzenie
zaoenia konta
(D
j j
Publikacja strony
Skoro konto zostao ju zaoone, moesz miao poczy si z serwerem i opubli
kowa uprzednio przygotowan stron WWW.
Do wykonania tego zadania bdziesz potrzebowa dodatkowego programu klienta
FTP. W dalszym opisie zdecydowaem si wykorzysta darm ow FileZill, ktr
mona pobra ze strony http://sourceforge.net/projects/filezilla. Program ten dostpny
jest w polskiej wersji jzykowej, a jego obsuga jest bardzo prosta.
Uwaga
Instalacja jest prosta i nie sprawi nikomu najm niejszych problemw. Po wczeniu
programu zobaczysz okno podobne do tego z rysunku 10.7.
W pierwszej kolejnoci kliknij ikon oznaczon na rysunku 10.7 strzak. Nastpnie
w kolumnie widocznej poniej strzaki odszukaj dysk i folder, w ktrym znajduj si
pliki przeznaczone do wysania na serwer.
Do pl Adres, Uytkownik i Haso wpisz odpowiednie dane. Jeeli zapomniae danych,
jakie podae podczas rejestracji, skorzystaj z pliku PD F z danymi konta lub sprawd
e-mail, ktry trafi do Ciebie po jego aktywacji. Po wpisaniu wszystkich danych (pa
mitaj, e wielko liter ma znaczenie) kliknij przycisk Szybko pocz i zaczekaj, a
zostanie nawizane poczenie z serwerem patrz rysunek 10.8.
3 20
Transfer
2.2.1 8
Kolejka
Serwer
Widok
Pomoc
> a s a 1r * r ?
a*
Nazwa pMcu
O O obrazki
:3j| lll.htm i
!3l|cssl.css
530
98
400
sE 2E S E 3
3 ) forrmJarz-nekon.html
3 i| ksiazka. css
3 | hstaodnosrskow. css
3 j pisalionas.css
33| przyidad-formularz.html
przyWad-ksazka.html
S ili* ! * )
2KB
887
208
336
2006-07-07 09:57
2006-07-07 12:06
2006-07-06 18:01
2006-07-09 22:29
PBeHTML
Kaskadowy ark...
Kaskadowy ark...
Kaskadowy ark...
PkkHTML
PkkHTML
2006-07-05 10:53
2006-07-10 22:01
2006-07-10 22:10
2006-07-07 10:29
Roznar
Uprawni-
Zmodyfikowany
Typ
Folder pkkw
PkkHTML
Kaskadowy ark...
Kaskadowy arie...
2KB
4KB
2KB .PSkHTML
Czas
. .....
2006-07-09 22:29
2006-0709 18:09
2 0 0 6 0 7 0 6 18:38
Prze zna...
<, ............
Sotowy
P o d c zo n y d o k s ia z k a .c iv .p l
Transfer
Kolejka
Serwer
Widok Pomoc
T-lfH^iiB '. o r t
Odpowied:
Komenda
Odpowied
Komenda
Odpowied
Odpowiedz
s:
Adres
Uiytkowr*
k siazkaa
anowsla12 H asio:
-s
Folder pkkw
Folder pikw
|i
Zmodyfikowany
530
98
400
2KB
887
208
3 przyHad-fbrmiiarz.html
| przyklad-kslazka.html
Pr?ytod%tapdnosr*o.u
Nazwa pHcu lokalnego
Folder plikw
PkkHTML
Kaskadowy ark...
Kaskadowy ark...
PkkHTML
Kaskadowy ark...
Kaskadowy ark...
2JS^SJ1ML_
R oznar
20064)7-07 09:57
2006-07-07 12:06
2006-07-06 18:01
2006-07-09 22:29
2006-07-05 10:53
2006-07-10 22:01
2006-07-10 22:10
2006-07-07 10:29
2006-07-09 22:29
2006-07-09 18:09
2006-07-06 18:38
Przezna...
Nazwa piku n
2
Rysunek 10.8 . Wysyamy stron na serw er etap drugi
2006-07-18 1S:S6
2006-07-18 15:56
<kwx~x
32 1
Edycja
Transfer
Kolejka
Serwer
ki iW Q iH El
iwied:
Komenda
Odpowiedz
Komenda:
Odpowied
Odpowied:
Status
Widok
&
Pomoc
''
ks<azkaciv.pl
H aso:
Wient ! D:\Moje dokumentyV - HEUONV W trakcie pisaniaM .ABC _t worzenia _stron_ W W W 'p v
S
przykady
-(3) obrazki
S erw er /p u b S cJitm i/
N azwa pliku
R o z m ia r...
Typ
D ata
Czas
Uprawnu
Komputer - kolor
i D ane osobow e
Rozmiar...
400
Zmodyfikowany
Kaskadowy a rk ...
2 006-07-09 22:29
2 KB
Plik HTML
2 006-07-05
887
Kaskadowy a rk ..,
208
Kaskadowy a rk .,
1KB
Plik HTML
2006-07-06 17:32
969
Plik HTML
2 0 06-07-07 10:22
266
Kaskadowy a rk ...
2006-07-06 17:37
Rozmiar
Pr ze z n a ...
Kolejka: 0 b ajty
322
F ile Z illa - P o d c z o n y do k s ia z k a .c iv .p l
I Pfik
Edycja
1 :'
Odpowied
Komenda.
O dpow ied
Komenda
Odpowied
O dpow ied
Stalus
Transfer
Kolejka
fefQI
Serwer
Widok
Pomoc
O& R
El
Adres
l^ gbkojm lgzjv
jksazkaovpl
CJ przykady
O
Jak to zrobi
i f
R ozm iar.,.
).
i lll.h tm l
517
Sdlcssl.css
93
33! formularz.css
3! formularz-hefcon.html
365
2190
Typ
Data
Czas
Uprawni
Pik HTML
2006-07-18
19:54
-rw -r-r-
Kaskadowy...
2006-07-18
19:54
rw-f-r-
Kaskadowy...
2006-07-18
19:54
-fw -r-r
Pik HTML
2006-07-18
19:54
-rw -r-r-
Siiksiazka.css
821
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
i3 | listaodnosnkow .css
189
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
306
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
2695
Pik HTML
2006-07-18
19:54
-rw-r-r
4975
PSk HTML
2006-07-18
19:54
-rw -r-r-
Pik HTML
2006-07-18
19:54
-rw -f-r-
Pik HTML
2006-07-18
19:54
-rw -r-r-
2006-07-18
19:54
-rw -r-r-
2006-07-18
19:54
-rw -r-r-
Typ
Zmodyfikowany
Kaskadowy ark...
2006-07-09 22:29
2KB
Pik HTML
2006-07-05 10:53
887
Kaskadowy ark...
2006-07-10 22:01
3! przykad-Sstaodnosnko...
2482
208
Kaskadowy ark...
2006-07-10 22:10
,331przydad-tistatop.html
1081
336
Kaskadowy ark...
2006-07-07 10:29
;23] przyklad-pisalionas.html
949
P ik HTML
2KB
P ik HTML
2006-07-09 22:29
243
Kaskadowy..
4KB
Pik HTML
2006-07-09 18:09
400
2KB
P ik H T M
2006-07-06 18:38
1KB
Plik HTML
2006-07-06 17:32
969
Pik HTML
2006-07-07 10:22
266
Kaskadowy ark...
2006-07-06 17:37
obrazki
;S3) ptsahonas.css
.23! przyklad-formularz.htjl
2i| przykad-ksazka.html
1531style.css
Pr ze zna...
Kolejta: 0 bajty
Uwaga
Rejestracja domeny
Jeli udao Ci si ju zaoy konto, uruchomi wirtualny serwer oraz opublikowa
pliki strony, pora dowiedzie si czego na temat wasnej domeny.
Zacznijmy od wyjanienia pojcia domeny. Kady komputer podczony do internetu
ma wasny, unikalny adres. To podstawa dziaania kadej sieci komputerowej, w prze
ciwnym razie nie byoby moliwe zidentyfikowanie poszczeglnych maszyn oraz prze
syanie midzy nimi informacji. Adres internetowy wystpuje w dwch postaciach:
numerycznej oraz symbolicznej, czyli literowej. Ta pierwsza jest uywana przez kom
putery, ktre, jak wiadomo, nie rozumiej niczego innego poza cyferkami. Adres
numeryczny, zwany inaczej adresem IP, skada si z czterech 8-bitowych liczb i wy
glda np. tak: 217.97.150.194.
323
Po zmianie zawartoci okna w sekcji Sprawd domen rysunek 10.12, wpisz adres
domeny, ktr chcesz zarejestrowa. Odpowiedni skrypt sprawdzi, czy jest ona wolna,
a przy okazji poda list innych propozycji, zblionych do Twoich oczekiwa.
324
extranet | progreso
H e lp d e s k 2 4 / h
K a ta lo g i i p lik i
S tro n y w w w
P o c z ta
FTP
B a z y d a n y c h (S Q L )
P ia n h o s tin g a w y
zamwienie
T:
z a m w ie n ie
a l o g o w a n y u y tk o w n ik ; d a n o w s k i l 2 ( w y lo g u j)
z a m w ie n ie
k o le jk a (0 )
W r a m a c h p r o m o c j i p r z y s u g u j e Ci j e d n a w y b r a n a d o m e n a g r a t i s , n a o k r e s j e d n e g o r o k u .
Z a p o m o c p o n i s z e g o f o r m u l a r z a m o e s z d o k o n a j e j w y b o ru .
D o m e n a z o s ta n ie z a r e je s tr o w a n a a u to m a t y c z n ie p o o p a c e n iu se rw e ra *
S p ra w d d o m e n :
n a z w a / d o m e n a : jd a n o w s io 2
f if
182233
i n n e d o m e n y / p o k a g lo w n
nazw a d om eny
s ta n
c e n a n e tto / r e k
d o s t p n a
BO PLN
1 1 d a n o w B k iZ .c o m
d o s t p n a
5 0 PLN
1 1 d a n o w s k iX 2 .n e t
d o s t p n a
5 0 PLN
Billing
D O M ENA PO L SK A
D om eny
a d fe
d a n o w s k ii2 .p l
a d m in is tra c ja
D O M E N Y G L O B A LN E
z a m w ie n i
tra n s fe r
z m i a n a d e l e g a c ji
d a n a w s k ii2 .o r g
n i e d o s t p n a w p r o m o c ji
D O M E N Y FU N K C JO N A L N E
O
d a n a w s k il2 .c o m .p l
d o s t p n a
6 0 PLN
d a n o w s k i X 2 . n e t. p l
d o s t p n a
6 0 PLN
1 1 d a n o w s k i l 2 . o r g . p!
d o s t p n a
6 0 PLN
0EE231
Jeeli wybrae odpowiadajc Ci domen, kliknij may kwadrat widoczny obok jej
nazwy, a nastpnie nacinij przycisk Dalej.
W kolejnym oknie, ktre jest widoczne na rysunku 10.13, sprawd poprawno danych
do faktury i jeeli wszystko si zgadza, kliknij przycisk Zamw.
Akurat w moim przykadzie domena nic nie kosztuje, poniewa trafiem na promo
cj w przypadku wykupienia konta i opacenia abonamentu otrzymam bezpatnie
domen na rok. Dopiero po upywie tego czasu bd paci za jej utrzymanie. Oczywi
cie, w przypadku gdy promocja si skoczy, odpowiednie ceny pojawi si w oknie
przedstawionym na rysunku 10.3.
Gdy ju wylesz wniosek rejestracyjny, spokojnie czekaj. W przypadku promocji, na
ktr trafiem, domena zostanie zarejestrowana po opaceniu konta. Natomiast w sytu
acji, gdyby bya zamawiana w zwyky sposb, zostaaby zarejestrowana po jej opace
niu. Dane niezbdne do dokonania patnoci znajdziesz w panelu administracyjnym.
V
Uwaga
325
extranet | progreso
H elp d esk 2 4 /h
K a t a l o g i i p lik i
S tro n y w w w
:J
-
P o c z ta
Ti
zamwienie
& 1- zamwienie
~vj
z a o g o w a n y u y tk o w n ik ; d a n o w s k i l 2 (w y lo g u j)
z a m w ie n ie
W r a m a c h p ro m o c ji p r z y s u g u je Ci je d n a w y b ra n a d o m e n a g r a tis , n a o k r e s je d n e g o r o k u .
Z a p o m o c p o n i s z e g o f o r m u l a r z a m o z e s z d o k o n a j e j w y b o ru .
D o m e n a z o s ta n ie z a r e je s t r o w a n a a u t o m a t y c z n ie p o o p a c e n iu s e rw e ra *
FTP
B a z y d a n y c h (S Q L )
a dom eny
P la n h o s tin g o w y
pl
e C o m m e rc e
B iffing
D om eny
ty p
s ta n
p o ls k a
d o s t p n a
o k r e s r e je s tr a c ji
( 1
St~l r o k / l a t
s u m a n e tto :
d a n e d o f a k tu ry :
B a rto s z D an o w sk i
a d re s k o re sp o n d e n c y jn y :
B a rto s z D an o w sk i
cen a n e tto
0 PLN
0 .0 0 P I H
a d m in is tra c ja
z a m w ie n ie
tra n s fe r
z m i a n a d e le g a c ji
U w a g a * J e e l i p o w y s z e d a n e s n ie p r a w id o w e n i e d o k o n u j
n a m i c e l e m ic h z m i a n y !
d a m e n ( y ) . s k o n t a k t u j s i n a jp ie r w z
326
Rozdzia 11.
Promocja serwisu
Kady twrca strony chce, by po jej publikacji bya ona oblegana przez tumy odwie
dzajcych. Niestety, w praktyce sprawa odwiedzin oraz popularnoci strony nie wygl
da tak dobrze. Aby rozpropagowa swoj witryn, musisz sign po wiele rozwiza
i sztuczek, ktre postanowiem opisa poniej w zwizej formie.
Uwaga
328
V
Uwaga
Grupy dyskusyjne
Moliwa jest take promocja strony na grupach dyskusyjnych, w tym celu powstaa
specjalna grupa o nazwie pl.com p.www.nowe-strony. Tam moesz bez obaw wysya
informacje o swojej stronie i o tym, gdzie si ona znajduje.
Poza wspomnian grup moesz take sprbowa zareklamowa stron na innych gru
pach tematycznie zwizanych z zawartoci witryny. Jednak pamitaj, e nie wszdzie
jest to mile widziane i zanim polesz wiadomo, postaraj si zapozna z zasadami
panujcymi na wybranej przez Ciebie grupie dyskusyjnej.
Listy mailingowe
Promocja strony WWW czy te usug oferowanych w internecie za pomoc poczty
elektronicznej jest tak stara, jak sam internet. Decydujc si na ten sposb promocji
strony, musisz pamita o kilku wanych rzeczach.
Moim zdaniem najwaniejsz spraw jest grono adresatw poczty. Nie powiniene
wysya poczty elektronicznej do grupy ludzi, ktrych adresy znalazy si w bazie
danych, bdcej w Twoim posiadaniu. Takie dziaanie zazwyczaj spotyka si z wro
goci odbiorcw, bowiem czsto okazuje si, e ich adresy e-mail trafiy do takiej bazy
bez ich wiedzy i zgody.
V
Uwaga
329
Pozycjonowanie stron
w wyszukiwarkach
Zdecydowanie najlepszym sposobem na wzrost popularnoci Twojej strony jest jej
optymalizacja, przygotowanie do indeksacji przez wyszukiwarki oraz zdobywanie wy
sokich pozycji w wynikach wyszukiwania.
Uwaga
Podstawy
Na samym pocztku przeanalizuj tre swojej strony i na tej podstawie wybierz kilka
sw kluczowych. Powinny to by sowa lub frazy, ktre najlepiej oddaj zawarto
strony i s wykorzystywane przez ludzi szukajcych informacji w sieci. Aby praw i
dowo wykona to zadanie, warto wczu si w rol osoby szukajcej, a nie pozycjo
nujcej stron.
Analizujc zwarto mojej strony, doszedem do wniosku, e kada z podstron oma
wiajcych ksiki korzysta z innych sw i fraz kluczowych. Dlatego jako przykad
do dalszych rozwaa posuy mi strona jednej z ostatnich ksiek Nero 7. Nagrywanie
pyt CD i DVD. wiczenia praktyczne http://danowski.pl/ksiazka/cwner7. Wytypo
wane przeze mnie sowa kluczowe wypisaem poniej.
Nero
Nagrywanie pyt
Nero Buming ROM
Wypalanie pyt
Pyty CD DVD
Kopiowanie pyt.
Majc wybrany zestaw kluczowych fraz i sw, moesz zabra si do optymalizacji
kodu strony. W pierwszej kolejnoci musisz zadba o odpowiednie opisane znacznikw
<meta />. Poniej zamieciem przykad odpowiednich znacznikw wraz z wpisanymi
sowami kluczowymi. Pamitaj, e oba elementy m usz znajdowa si w nagwku
strony pomidzy znacznikami <head></head>.
<meta name="keywords" content="nero, nagrywanie p y t, nagrywanie p y t. kopiowanie
p y t. kopiowanie p y t. wypalanie p y t. wypalanie, p y ty CD DVD " />
<meta name="description" content="Poznaj moliwoci pakietu Nero i naucz si
nagrywa pyty CD oraz DVD />
330
Kolejnym istotnym elementem, ktry musi znale si w kodzie strony, jest znacznik
<meta name="robots" />, ktry informuje robota wyszukiwarki o tym, co mona in
deksowa na stronie. Poniej znajduje si przykadowy wpis, pozwalajcy na pen
indeksacj wszystkich podstron serwisu.
<meta name="robots" content="index,follow" />
331
332
3
> WITAM SERDECZNIE
Teraz moesz by legalnym
bez w ydaw ana pienidzy
Uaktualnienia
Tsss&sw sm
Strona powstaa jako przykad dla ksiki p t:T warzenie stron WWW
w praktyoe", ale z czasem okazao si, e odwiedza mnie wielu
goci a z tymczasowoci powstao ciao stae Obecnie witryna
spenia istotn funkcj informacyjn i prezentuje moje
dotychczasowe osignicia
SrttkBtS
8 Mnie
le s /ta
'
find Snany
k o n ia k i
553555^25553515351515
Fotografia cyfrow a | Przeczytaj t ksik, je ili
! chcesz zachowa pen
: kontrol nad kolekcj
I cyfrowych zdj_______
Rysunek 1 1 .1 . System nawigacji oparty na Adobe Flash jest zym rozwizaniem z punktu widzenia
pozycjonowania stron
rit/Cu
V
Uwaga
Rysunek 11.3.
Mapa strony bardzo
dobrze wpywa
na lepsz indeksacj
strony
333
MAPA STRONY
Strona gwna
A rchiw um wiadom o
Wanie pisz
Napisane ksiki
Seria - wiczenia
Seria - ABC
Seria - Standard
Seria - Kurs
Seria - Po prostu
Tumaczenia
CYBER
Magazyn INTERNET
CDRinfo.pl
CHIP
Przyjazne strony
Dane kontaktow e
Regulamin
S t ro n a g w n a
K s i k i
A r t y k u y
B log
W a n ie p is z
U a k t u a ln ie n ia
O m n ie
S k le p
R e s z ta
C ie k a w e s t r o n y
K o n ta k t
334
Arkusz stylw
ulfdanowski
{
lis t - s ty le : none;
margin: 0;
padding: 0;
}
#menu
{
width: 150px:
border-style: so lid so lid none s o lid ;
border-color: #F4F4F4;
border-size: lpx;
border-width: lpx;
margin: 10px;
}
#menu l i a
{
height: 32px;
voice-fam ily:
voice-fam ily: in h e rit;
height: 24px;
text-decoration: none:
o u tlin e -s ty le : none:
335
{
color: #404040:
display: block:
background: url(images/menul.g if) ;
padding: 8px 0 0 10px;
o u tlin e -style : none;
}
#menu l i a:hover
{
color: #26370A:
background: url(images/menul.g if) 0 -32px;
padding: 8px 0 0 10px:
}
#menu l i a:active
{
color: I26370A;
background: url(images/menul.g if) 0 -64px;
padding: 8px 0 0 10px;
}
Na rysunku 11.5 wida obrazek wykorzystany do przygotowania menu.
Rysunek 11.5.
Zmylna konstrukcja
obrazka powoduje,
e animacja menu je s t
pynna niezalenie
od posiadanego cza
Uwaga
336
Rysunek 11.6.
Zadbaj o wzajemne
pow izania
poszczeglnych stron
seria
Po prostu Hero 7
Strona domowa ksiki
ISBN: 83-246-0001 -9
Format: B5. stron: 280
Data wydania: 02/2006
S B
mmmm
:cych do zapisywania i
Inn e k s i k i o N ero
Nero 7 Nagrywanie
iDVD. wiczenia praktyczne
Nero 6 Nagrywanie pyt CD i DVD wiczenia praktyczne
Nero Burning ROM Nagrywanie pyt CD wiczenia praktyczne
Po prostu Nero 6
Zdobywanie pozycji
Skoro kod strony zosta poprawiony a konstrukcja poszczeglnych podstron zopty
malizowana tak, by poprawnie bya analizowana i indeksowana przez roboty wyszu
kiwarek, moemy zaj si zdobywaniem pozycji.
337
Rysunek 11.7.
Wynik dziaania
polecenia site:
_t
Sie
Google
V?
Grafika
Grucv dvskusvine
Kataloa
w iecei *
"...'.s o k t
S ie
Bartosz Danowski
Kategone. Aktualnoci Ciekawe programy Mozilla - Nero - Nie na temat Ogoszenia
Porady Pozycjonowanie stron Prgierz Strony WWW i internet ...
danowski.fi/page/12/ - 24k - Konta - Podobna strony - Zanotuj
stmna
G o o o o o o o o o o g i e
1 2 3 4 5 6 7 8 9 10 N a s te o n a
site danowski pl
338
339
Bartosz Danowski
M 3p a s t r o n y
1i t r t u ra i n t o r m a t y c z n a
[
T l?
'- f l
S t r o n a g w n a 11 K s i k i 11 A r t y k u y
If 0
m n ie
D a n o w s k i.p l A B C t w o r z e n i a s t r o n w w w
P r z y ja z n e s tro n y
Pj
J e i e li c h c e s z a b y T w j o d n o n ik z n a la z s i n a t e j s tr o m e
K o n ta k t
II S k le p 1
S zukaj
| S z u k a j n a s tr o n ie .
musis2
u m ie c i o d w o a n ie d o m o je j w it r y n y o t r e c i w id o c z n e j p o n i 2ej.
N a s t p n ie p o w ia d o m m n ie o ty m i p r z y lij t r e o d s y a c z a .
O p in ie c z y te ln ik w
O s ta tn io m iaem
p rz y je m n o
p rz e c z y ta tw o j
ksik "ABC
M O N T E R - T u m a c z e n ia p r o g r a m w
tw o rz e n ia s tro n
P o r y c jo n o w a m e
WWW". Ksika
W y c e n a N ie r u c h o m o c i
b ardzo m i si
R a fa K o c h a n o w s k i
spodobaa.
S a f e L o c k - p r o g r a m d o z a b e z p ie c z e C D
K a t a lo g C ie k a w y c h S t r o n
B ogi
4 M A X - s k le p in t e r n e t o w y
* P o r a d n ik w e b m a s t e r a
P o r t a l C D R in fo .p l - r d o w ie d z y o n a g r y w a n iu p y t C D / D V D
M a ja K ie r z k o w s k a
D z ie c k o w s ie c i
RSS
U l W s z y s t k ie w p is y
O il P e a k : r o p a n a ft o w a
P o r a d n ik w e b m a s te r a - P a w e W im m e r
K s i k i
A r t y k u y
P rze p ro w a d zk i
O t w a r t y K a t a lo g I n t e r n e t o w y
T w o je P C . p l - T w o je r d o in fo r m a c ji o S p r z c ie
H e lio n - L it e r a t u r a in f o r m a t y c z n a w n a jle p s z y m w y d a n iu
G r z e g o rz H a r a s im o w ic z
N e w s le tte r
Podaj e-mail
J e li c h c e s z b y p o w ia d a m ia n y o
Na rysunku 11.9 wida wyniki, jakie Google pokazao dla powyszego zapytania. Te
stowa strona posiada a 3520 odnonikw z innych witryn.
W tym miejscu pragn zwrci uwag na fakt, e odnoniki z innych witryn w po
czeniu z dobrze zbudowan stron daj piorunujce wraenie. Przykadem takiej sy
tuacji moe by podstrona mojego serwisu powicona ksice o Nero. Dla zapytania
o treci nero pojawia si ona na pierwszej stronie wynikw rysunek 11.10. N ie
skromnie pochwal si tym, e dla tego sowa kluczowego konkurencja jest bardzo
dua i Google ma ok. 66 milionw wynikw.
3 40
Zalogui
S ie
G O O J le
G rafika
G rupy d y sk u sy jn e
Katalog
[lwicWp7/helion.p .....
w i c e j
l l Szukaj 1
S zu k a j w Internecie O
S zu k a j na stronach kategorii P o ls k i
S ie
26 marca - Hehonica
Wydarzenia na wiecie stycze - luty - marzec - kwiecie - maj - czerwiec - lipiec - sierpie wrzesie - padziernik listopad - grudzie ...
helionica.pl/index pbp/26_m arca - 14k - Kopia - Podobne strony
QuickTim e - Helionica
Z heioniki. wolnej encyklopedii informatycznej (Przekierowano z Quicklime) QuickTime system multimediw firmy Apple Dla zwykych uytkownikw dostpny ...
helionica.pl/index php/Q uicktim e - 14k - K o p ia - Po dobn e strony
Google
V /
S ie
G rafika
d y sk u sy jn e
G rupy *
S z u k jl^ K r a c t e
K a ta log
w i c e j
iI
O
S zu k a j 1
S zu k a j na stronach kategorii P o ls k i
Sie
Nero6 6 0 16
p b k i.p l
341
Wnioski
Prawidowa promocja i pozycjonowanie strony ma wpyw na jej popularno. Wyso
ka pozycja w wynikach wyszukiwania wpywa na wzrost odwiedzin, a te z kolei
przekadaj si na wzrost dochodw z reklam bd sprzeday prowadzonej za pored
nictwem witryny. Dlatego w przypadku strony firmowej od samego pocztku zadbaj
o to, aby bya dobrze widoczna w intemecie.
Sporo przydatnych informacji na temat pozycjonowania i optymalizacji stron znajdziesz
w ksikach oraz na licznych stronach internetowych. Poniej zamieciem dwa cie
kawe odnoniki.
http://forum.optymalizacja.com
Pozycjonowanie i optymalizacja stron WWW. Jak to si robi
http://helion.pl/ksiazki/pozopt.htm
342
Dodatek A
W dodatku tym zamieciem kilka ciekawych informacji, ktre nie znalazy si w gw
nej czci ksiki. Mam nadziej, e oka si one przydatne i pom og Ci w pracy
nad stron WWW.
Statystyki
Ten podrozdzia pierwotnie mia zawiera wykresy najwaniejszych trendw panuj
cych w intemecie. Jednak po przemyleniu wszystkich za i przeciw, postanowiem zre
zygnowa z tego zamiaru, poniewa w chwili publikacji ksiki i tak wikszo danych
byaby ju nieaktualna.
W zwizku z tym gorco polecam adres http://www.ranking.pl, pod ktrym znajduj
si w zasadzie wszystkie moliwe zestawienia na temat trendw panujcych w pol
skim intemecie.
Gegka
Gegka jest doskonaym narzdziem pozwalajcym konwertowa znaki pomidzy
rnymi stronami kodowymi. Dokadniej mwic, moemy stworzy stron w Notat
niku i uywa znakw w formacie W indow s-1250, a nastpnie za pom oc Gegki
zmieni je na zgodne z ISO 8859-2.
Po uruchomieniu programu kliknij prawym przyciskiem myszy centraln cz okna
i z podrcznego menu wybierz opcj Dodaj pliki (rysunek A .l). W nowym oknie od
szukaj i wska pliki, ktre chcesz podda konwersji. Po zaznaczeniu plikw kliknij
przycisk Otwrz.
344
Rysunek A .l.
Zmiana
strony kodowej
etap pierw szy
Dodane pliki pojawi si na licie (rysunek A.2). W dolnej czci gwnego okna, w polu
widocznym przy lewej dolnej krawdzi, ustaw Automatyczny. Nastpnie na przycisku
po prawej stornie ustaw odpowiedni stron kodow, np. ISO 8859-2. Aby rozpocz
konwersj, kliknij przycisk Start.
Rysunek A.2.
Zmiana
strony kodowej
etap drugi
Edycja
Narzdzia
Pomoc
Plik / Folder
C: 'iJse rs^a rtekd e skto p \Strona WWWVaptopy.infoVndex.html
345
Dodatek A
Zestawienie waciwoci
kaskadowych arkuszy stylw
Waciwoci tekstu
Poziome wyrwnanie tekstu
te xt-a lig n
Dostpne wartoci
Warto domylna
le f t
Przykad
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
baseline
Przykad
Dziedziczenie
nie
Wcicie tekstu
text-indent
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
tak
Dekoracja tekstu
text-decoration
Dostpne wartoci
Warto domylna
none
Przykad
p {text-decoration:underline;}
Dziedziczenie
nie
346
Przeksztacanie tekstu
te x t- transform
Dostpne wartoci
Warto domylna
none
Przykad
p {text-transform : uppercase;}
Dziedziczenie
tak
Dostpne wartoci
normal
Warto domylna
normal
Przykad
Dziedziczenie
tak
| dugo | in h e rit
Dostpne wartoci
norma!
Warto domylna
normal
| dugo | in h e rit
Przykad
p{word-spaci ng:3 p t: }
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
normal
Przykad
p{l i ne-height:100*: }
Dziedziczenie
tak
Pusta przestrze
white-space
Dostpne wartoci
Warto domylna
normal
Przykad
p{whi te-space:nowrap;}
Dziedziczenie
tak
Dodatek A
34 7
Orientacja tekstu
direction
Dostpne wartoci
I t r 1 r t l 1 in h e rit
Warto domylna
Itr
Przykad
p {d ir e c tio n :r tl;}
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
normal
Przykad
p{unicode-bidi:embed;}
Dziedziczenie
nie
Waciwoci czcionki
Rodzaj czcionki
font-fam ily
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
tak
Rozmiar czcionki
font-size
Dostpne wartoci
Warto domylna
medium
Przykad
p{font-size:20pt;}
Dziedziczenie
tak
348
Waga czcionki
font-wei ght
Dostpne wartoci
normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
| bolder | lig h te r | in h e rit
Warto domylna
normal
Przykad
p{font-w eight:bold:}
Dziedziczenie
tak
Styl czcionki
fo n t-s ty le
Dostpne wartoci
Warto domylna
normal
Przykad
p {fo n t-s ty le :i ta l i c ;}
Dziedziczenie
tak
Warianty czcionki
font-variant
Dostpne wartoci
Warto domylna
normal
Przykad
Dziedziczenie
tak
Szeroko czcionki
font-stre tch
Dostpne wartoci
Warto domylna
normal
Przykad
Dziedziczenie
tak
Proporcja czcionki
font-size-adjust
Dostpne wartoci
Warto domylna
none
Przykad
p{fo nt-size-adjust:0.58:}
Dziedziczenie
tak
Dodatek A
349
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
tak
Waciwoci list
Typ listy
lis t-s ty le -ty p e
Dostpne wartoci
Warto domylna
disc
Przykad
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
none
Przykad
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
outside
Przykad
Dziedziczenie
tak
350
Dostpne wartoci
< lis t-s ty le -ty p e > | < lis t-s ty le -p o s itio n > | <list-style-im age>
Warto domylna
Przykad
Dziedziczenie
Kolor i to
Kolor elementu
color
Dostpne wartoci
Warto domylna
Przykad
p {color:#FF0000;}
Dziedziczenie
tak
Kolor ta
background-color
Dostpne wartoci
Warto domylna
transparent
Przykad
p {background-color:#FF0000:}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
none
Przykad
Dziedziczenie
nie
Zatrzymanie graficznego ta
background-attachment
Dostpne wartoci
sc ro ll | fixed | in h e rit
Warto domylna
scro ll
Przykad
Dziedziczenie
nie
Dodatek A
35 1
Dostpne wartoci
Warto domylna
repeat
Przykad
Dziedziczenie
nie
Pozycjonowanie graficznego ta
background-position
Dostpne wartoci
Warto domylna
0* 0
Przykad
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
nie
Marginesy
Lewy margines
margin-left
Dostpne wartoci
Warto domylna
Przykad
p {m argin-left:lcm ;}
Dziedziczenie
nie
3 52
Prawy margines
margin-right
Dostpne wartoci
Warto domylna
Przykad
p {margi n- r i g h t:lcm:}
Dziedziczenie
nie
Grny margines
margin-top
Dostpne wartoci
Warto domylna
Przykad
p {m argin-topilcm ;}
Dziedziczenie
nie
Dolny margines
margin-bottom
Dostpne wartoci
Warto domylna
Przykad
p {margin-bottom:lcm;}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
Przykad
p {margin:lcm 3cm;}
Dziedziczenie
nie
Dopenienie
Lewe dopenienie
padding-left
Dostpne wartoci
Warto domylna
Przykad
p {padding-left:lcm ;}
Dziedziczenie
nie
Dodatek A
353
Prawe dopenienie
padding-right
Dostpne wartoci
Warto domylna
Przykad
p {padding-right: le n ;}
Dziedziczenie
nie
Grne dopenienie
padding-top
Dostpne wartoci
Warto domylna
Przykad
p {padding-top:lcm;}
Dziedziczenie
nie
Dolne dopenienie
padding-bottom
Dostpne wartoci
Warto domylna
Przykad
p {padding-bottom:lcm;}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
nie
Obramowanie
Styl obramowania
border-top-style | border-right-style | border-bottom-style | b o rd e r-le ft-s ty le | border-style
Dostpne wartoci
Warto domylna
none
Przykad
p {border-top-style:dotted;}
Dziedziczenie
nie
354
Szeroko obramowania
border-top-width | border-right-width | border-bottom-width | border-left-width | border -width
Dostpne wartoci
Warto domylna
none
Przykad
p {border-top-width:5px;}
Dziedziczenie
nie
Kolor obramowania
border-top-color | border-right-color | border-bottom-color | border-left-color | border--color
Dostpne wartoci
Warto domylna
Przykad
p {border-top-color:red:}
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
Wymiary elementw
Szeroko
width
Dostpne wartoci
Warto domylna
auto
Przykad
p {wi d th :30X:}
Dziedziczenie
nie
Dodatek A
355
Minimalna szeroko
min-width
Dostpne wartoci
Warto domylna
Przykad
p {mln-width:90px:}
Dziedziczenie
nie
Maksymalna szeroko
max-width
Dostpne wartoci
Warto domylna
none
Przykad
p {max-width:100px;}
Dziedziczenie
nie
Wysoko
height
Dostpne wartoci
Warto domylna
auto
Przykad
p { hei g h t :30^:}
Dziedziczenie
nie
auto | in h e rit
Minimalna wysoko
min-height
Dostpne wartoci
Warto domylna
Przykad
p {min-height :90px;}
Dziedziczenie
nie
in h e rit
Maksymalna wysoko
max-height
Dostpne wartoci
Warto domylna
none
Przykad
p {max-height:100px;}
Dziedziczenie
nie
356
Tabele
Podpis tabeli
caption-side
Dostpne wartoci
Warto domylna
top
Przykad
table {caption-side:bottom;}
Dziedziczenie
tak
Generowanie tabeli
table-layout
Dostpne wartoci
Warto domylna
auto
Przykad
Dziedziczenie
nie
Pojedyncze obramowanie
border-collapse
Dostpne wartoci
Warto domylna
separate
Przykad
table {border-collapse:collapse:}
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
show
Przykad
Dziedziczenie
tak
Dodatek A
357
Pozycjonowanie elementw
Rodzaj pozycjonowania
position
Dostpne wartoci
Warto domylna
s ta tic
Przykad
p {posi t i on:absolute: }
Dziedziczenie
nie
Okrelanie pozycji
top
rig h t | bottom | le f t
Dostpne wartoci
Warto domylna
auto
Przykad
p {position:absolute; to p : 10px;}
Dziedziczenie
nie
Pywanie elementw
flo a t
Dostpne wartoci
Warto domylna
none
Przykad
img {float:right;}
Dziedziczenie
nie
Tamowanie elementw
elear
Dostpne wartoci
Warto domylna
none
Przykad
img {c le a r : r ig h t: }
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
auto
Przykad
p {z-index:2;}
Dziedziczenie
nie
358
Efekty wizualne
Sterowanie wymiarowanymi elementami
overflow
Dostpne wartoci
Warto domylna
v is ib le
Przykad
p {overflow :scroll :}
Dziedziczenie
nie
Kadrowanie
c lip
Dostpne wartoci
Warto domylna
auto
Przykad
Dziedziczenie
nie
Ukrywanie elementw
v i s ib ilit y
Dostpne wartoci
Warto domylna
v is ib le
Przykad
p { v is ib i'l ity :h id d e n :}
Dziedziczenie
tak
Dostpne wartoci
Warto domylna
in lin e
Przykad
Dziedziczenie
nie
Dodatek A
359
Drukowanie
Tworzenie oddzielnych stylw dla wydruku
@media
Dostpne wartoci
Warto domylna
Przykad
@media p rin t { }
Dziedziczenie
Dostpne wartoci
Warto domylna
auto
Przykad
hi {page-break-before:always;}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
auto
Przykad
hi {page-break-after:always;}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
auto
Przykad
hi {page-break-inside:avoid;}
Dziedziczenie
nie
Wdowy
wi dows
Dostpne wartoci
Warto domylna
Przykad
P {widows:4;}
Dziedziczenie
tak
360
Sieroty
orphans
Dostpne wartoci
Warto domylna
Przykad
P {orphans:4:}
Dziedziczenie
tak
Interfejs uytkownika
Kursory
cursor
Dostpne wartoci
Warto domylna
auto
Przykad
a {cursor:help;}
Dziedziczenie
tak
Grubo konturu
outline-w idth
Dostpne wartoci
Warto domylna
medium
Przykad
Dziedziczenie
nie
Styl konturu
o u tlin e -s ty le
Dostpne wartoci
Warto domylna
none
Przykad
a {outline-style:dashed:}
Dziedziczenie
nie
Dodatek A
361
Kolor konturu
o u tlin e-color
Dostpne wartoci
Warto domylna
Przykad
a {outline-color:green:}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
Przykad
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
normal
Przykad
Dziedziczenie
nie
Cytowanie
quotes
Dostpne wartoci
Warto domylna
wg ustawie przegldarki
Przykad
Dziedziczenie
tak
362
Resetowanie licznika
counter-reset
Dostpne wartoci
Warto domylna
none
Przykad
BODY {counter-reset:lic z n ik ;}
Dziedziczenie
nie
Dostpne wartoci
Warto domylna
none
Przykad
Dziedziczenie
nie
Opera 6.0
Opera
6 .0 1
Mozilla
0 .9 8 PL
Firefox
1.5
IE 6
Opera
8.52
!important
tak
tak
tak
tak
tak
tak
@import
nie
nie
nie
tak
tak
tak
@media
tak
tak
tak
tak
tak
tak
background
tak
tak
tak
tak
tak
tak
background
-attachment
tak
tak
tak
tak
tak
tak
background-color
tak
tak
tak
tak
tak
tak
background-image
tak
tak
tak
tak
tak
tak
background-position
tak
tak
tak
tak
tak
tak
background-repeat
tak
tak
tak
tak
tak
tak
border
tak
tak
tak
tak
tak
tak
border-bottom
tak
tak
tak
tak
tak
tak
border-bottom-color
tak
tak
tak
tak
tak
tak
border-bottom-style
tak
tak
tak
tak
tak
tak
border-bottom-width
tak
tak
tak
tak
tak
tak
border-collapse
tak
tak
nie
tak
tak
tak
border-color
tak
tak
tak
tak
tak
tak
Dodatek A
element
border-left
363
Opera 6.0
tak
Opera
6 .01
tak
Mozilla
0 .9 8 PL
Fi refox
1 .5
IE 6
tak
tak
Opera
8 .52
tak
tak
border-left-color
tak
tak
tak
tak
tak
tak
border-left-style
tak
tak
tak
tak
tak
tak
border-left-width
tak
tak
tak
tak
tak
tak
border-right
tak
tak
tak
tak
tak
tak
border-right-color
tak
tak
tak
tak
tak
tak
border-right-style
tak
tak
tak
tak
tak
tak
border-right-width
tak
tak
tak
tak
tak
tak
border-spacing
tak
tak
tak
nie
tak
tak
border-style
tak
tak
tak
tak
tak
tak
border-top
tak
tak
tak
tak
tak
tak
border-top-color
tak
tak
tak
tak
tak
tak
border-top-style
tak
tak
tak
tak
tak
tak
border-top-width
tak
tak
tak
tak
tak
tak
border-width
tak
tak
tak
tak
tak
tak
bottom
nie
nie
tak
tak
tak
tak
caption-side
nie
nie
tak
nie
tak
nie
clear
tak
tak
tak
tak
tak
tak
tak
tak
tak
tak
tak
tak
tak
tak
clip
nie
nie
color
tak
tak
content
tak
tak
tak
nie
tak
tak
counter-increment
tak
tak
nie
nie
tak
tak
counter-reset
tak
tak
nie
nie
tak
tak
cursor
nie
nie
tak
tak
tak
tak
empty-cells
nie
nie
nie
nie
tak
nie
float
tak
tak
tak
tak
tak
tak
font
tak
tak
tak
tak
tak
tak
font-family
tak
tak
tak
tak
tak
tak
font-size
tak
tak
tak
tak
tak
tak
nie
font-size-adjust
nie
nie
nie
nie
tak
font-stretch
nie
nie
nie
nie
nie
nie
font-style
tak
tak
tak
tak
tak
tak
font-variant
tak
tak
tak
tak
tak
tak
font-weight
tak
tak
tak
tak
tak
tak
height
tak
tak
tak
tak
tak
tak
left
tak
tak
tak
tak
tak
tak
letter-spacing
tak
tak
tak
tak
tak
tak
36 4
elem ent
Opera 6.0
Opera
6 .0 1
Mozilla
0 .9 8 PL
Fi refox
1.5
IE 6
Opera
8.52
line-height
tak
tak
tak
tak
tak
tak
link
tak
tak
tak
tak
tak
tak
list-style
tak
tak
tak
tak
tak
tak
list-style-image
tak
tak
tak
tak
tak
tak
list-style-position
tak
tak
tak
tak
tak
tak
list-style-type
tak
tak
tak
tak
tak
tak
margin
tak
tak
tak
tak
tak
tak
margin-bottom
tak
tak
tak
tak
tak
tak
margin-left
tak
tak
tak
tak
tak
tak
margin-right
tak
tak
tak
tak
tak
tak
margin-top
tak
tak
tak
tak
tak
tak
max-height
tak
tak
tak
nie
tak
tak
max-width
tak
tak
tak
nie
tak
tak
min-height
tak
tak
tak
nie
tak
tak
min-width
tak
tak
tak
nie
tak
tak
open type
tak
tak
nie
tak
nie
nie
orphans
tak
tak
nie
nie
nie
tak
outline
nie
nie
nie
nie
tak
tak
outline-color
nie
nie
nie
nie
tak
tak
outline-style
nie
nie
nie
nie
tak
tak
outline-width
nie
nie
nie
nie
tak
tak
overflow: auto
nie
nie
tak
tak
tak
tak
overflow: hidden
tak
tak
tak
tak
tak
tak
overflow: scroll
nie
nie
tak
tak
tak
tak
overflow: visible
tak
tak
tak
tak
tak
tak
padding
tak
tak
tak
tak
tak
tak
padding-bottom
tak
tak
tak
tak
tak
tak
padding-left
tak
tak
tak
tak
tak
tak
padding-right
tak
tak
tak
tak
tak
tak
padding-top
tak
tak
tak
tak
tak
tak
page-break-after
tak
tak
nie
tak
tak
tak
page-break-before
tak
tak
nie
tak
tak
tak
page-break-inside
tak
tak
nie
tak
tak
tak
position: absolute
tak
tak
tak
tak
tak
tak
position: fixed
tak
tak
tak
nie
tak
tak
position: relative
tak
tak
tak
tak
tak
tak
position: static
tak
tak
tak
tak
tak
tak
Dodatek A
element
36 5
Opera 6.0
Opera
6 .0 1
Mozilla
0 .9 8 PL
Fi refox
1.5
IE 6
Opera
8.52
pseudoelement:after
tak
tak
tak
nie
tak
tak
pseudoelement
:before
tak
tak
tak
nie
tak
tak
pseudoelement
:first-letter
tak
tak
tak
tak
tak
tak
pseudoelement
:first-line
pseudoklasa
:first-child
tak
tak
tak
tak
tak
tak
nie
nie
nie
nie
tak
tak
tak
tak
tak
tak
tak
tak
pseudoklasa :active
pseudoklasa :focus
nie
nie
tak
nie
tak
tak
pseudoklasa :hover
tak
tak
tak
tak
tak
tak
pseudoklasa :lang
nie
tak
nie
nie
nie
tak
tak
pseudoklasa :link
tak
tak
tak
tak
tak
pseudoklasa :visited
tak
tak
tak
tak
tak
tak
quotes
tak
tak
tak
nie
tak
tak
right
nie
nie
tak
tak
tak
tak
selektor atrybutu
nie
nie
nie
nie
tak
tak
selektor dziecka
tak
tak
tak
nie
tak
tak
selektor potomka
tak
tak
tak
tak
tak
tak
selektor rodzestwa
tak
tak
tak
nie
tak
tak
table-layout
nie
nie
nie
tak
tak
tak
text-align:center
tak
tak
tak
tak
tak
tak
text-align:justify
tak
tak
tak
tak
tak
tak
text-align:left
tak
tak
tak
tak
tak
tak
text-align:right
tak
tak
tak
tak
tak
tak
text-decoration:
line-through
tak
tak
tak
tak
tak
tak
text-decoration: blink
tak
tak
nie
tak
tak
text-decoration:
overline
tak
tak
nie
tak
tak
tak
tak
text-decoration:
underline
tak
tak
tak
tak
tak
tak
text-indent
tak
tak
tak
tak
tak
tak
text-transform:
capitalize
tak
tak
tak
tak
tak
tak
text-transform:
lowercase
tak
tak
tak
tak
tak
tak
text-transform:
upperrcase
tak
tak
tak
tak
tak
tak
366
elem ent
Opera 6.0
Opera
6.0 1
Mozilla
0.9 8 PL
Fi refox
1.5
IE 6
Opera
8.52
top
tak
tak
tak
tak
tak
tak
true doc
nie
nie
tak
tak
tak
nie
vertical-align
tak
tak
tak
tak
tak
tak
visibility: collapse
tak
tak
tak
nie
tak
tak
visibility: hidden
tak
tak
tak
tak
tak
tak
visibility: visible
tak
tak
tak
tak
tak
tak
white-space:normal
tak
tak
tak
tak
tak
tak
white-space:nowrap
tak
tak
tak
tak
tak
tak
white-space:pre
tak
tak
tak
tak
tak
tak
white-space :pre-line
nie
nie
nie
nie
nie
tak
white-space:pre-wrap
nie
nie
nie
nie
nie
tak
widows
tak
tak
nie
nie
nie
tak
width
tak
tak
tak
tak
tak
tak
word-spacing
tak
tak
tak
tak
tak
tak
z-index
tak
tak
tak
tak
tak
tak
Podsumowanie
Tutaj koczy si nasza wsplna przygoda z praktycznym tworzeniem stron WWW
zgodnych z najnowszymi standardami. Mam nadziej, e nie nudzie si, czytajc ko
lejne rozdziay i zmagajc si z kodem.
Moim zamiarem byo pokazanie moliwie prosto i przystpnie, jak stworzy wasn
stron WWW. Staraem si przedstawi wszystko w taki sposb, by nawet osoba po
cztkujca znalaza w tej ksice co dla siebie, a po przeczytaniu jej staa si posia
daczem swojej pierwszej internetowej witryny.
Jak zapewne zauwaye, skupiem si na najwaniejszych elementach, ktrych zna
jom o jest niezbdna podczas tw orzenia stron WWW. Poza tym opisaem, w jaki
sposb korzysta z gotowych rozwiza dostpnych w intemecie oraz jak opublikowa
i wypromowa stron.
Mam nadziej, e zdobye cho troch wiedzy na temat tworzenia stron WWW. Pa
mitaj jednak, e to zbyt mao, by tworzy due komercyjne witryny w celach zarob
kowych. Zanim bdziesz mg zarabia na projektowaniu stron WWW, musisz zdo
by dowiadczenie, pozna dodatkowe jzyki skryptowe, nauczy si pracowa po
stronie serwera czy wreszcie pozna Flash. W szystko zatem przed Tob. Doskonaym
sposobem nauki jest podgldanie pracy innych. Nie bj si zaglda do kodu stron,
ktre Ci zaciekawi, i staraj si dochodzi do tego, w jaki sposb je zbudowano.
W tym miejscu chciaem serdecznie podzikowa za zakup ksiki i zaufanie, jakim
mnie obdarzye. Mam nadziej, e si nie zawiode. Jeeli masz jakie uwagi lub pro
pozycje zwizane z t ksik napisz do mnie. Twj list na pewno nie pozostanie bez
odpowiedzi.
1 bybym zapomnia zagldaj na m oj stron http://danowski.pl.
Bartosz Danowski
bartek@danowski.pl
http://danowski.pl
36 8
Skorowidz
, 48
:active, 153
:after, 155
:before, 155
.first-child, 153
rfirst-letter, 154
:first-line, 155
:hover, 151, 225
dang, 153
dink, 150
:visited, 151
@media, 359
blank, 61
parent, 61
self, 61, 92
top, 61
<!- > , 40
<!DOCTYPE>, 32
<a>, 59
href, 59
target, 61
title, 61
<area>, 62, 64
<base>, 38
<blockquote>, 44
<body>, 39
<br />, 46
<caption>, 79
<code>, 47
<dd>, 51
<div>, 42, 48
<dl>, 51
<dt>, 51
<em>, 47
<form>, 84
action, 84
method, 84
<frame>, 91
<frameset>, 90
<head>,33
<html>, 32
<hx>,42
<img>, 55
alt, 55
height, 55
src, 55
width, 55
<input>, 84
maxlength, 85
name, 85
size, 85
type-'button", 85
type="checkbox",
type="file", 85
type="hidden", 85
type="password",
type="radio", 85
type="reset", 85
type="submit", 85
type="text", 84
value, 85
<li>, 50
<link>, 38, 136
<map>, 62, 64
<meta>, 36, 329
<ol>, 50
<option>, 86
<p>, 43
<pre>, 165
<q>, 45
<script>, 307
<select>, 86
<span>, 47, 220
<strong>, 47
370
<sub>, 46
<sup>, 46
<table>, 72
<tbody>, 78
<td>, 72
<textarea>, 87
<tfoot>, 78
<th>, 72
<thead>, 78
<title>, 35, 330
<tr>, 72
<ul>, 50
1st Page 2006, 18
A
a:active, 153
a:hover, 151
a:link, 150
a:visited, 150
absolute, 197
action, 84
Adobe Flash, 116
adres
autor witryny, 38
bezwzgldny, 66
e-mail, 60
FTP, 60
grupa dyskusyjna, 60
IP, 23
URL, 60, 66, 131
wzgldny, 66
akapity, 42, 43
aktywne obszary obrazka, 63
alt, 55
alternatywny tekst, 55
analiza poprawnoci kodu, 249
animowany GIF, 102
antyaliasing, 117, 118
arkusz programu MS Excel, 82
Artykuy, 235
atrybuty, 28, 30
wartoci, 31
automatyczne odwieanie dokumentu, 37
autor strony, 36
awaryjno serwera, 314
B
background-attachment, 180
background-color, 143, 178, 183, 194
background-image, 178, 180, 183
background-position, 181
background-repeat, 180
c
capitalize, 164
cel tworzenia strony WWW, 207
cellpadding, 75
cellspacing, 75
center, 160, 181
ciao dokumentu, 39
cicie grafiki, 129
circle, 174
class, 149
clear, 201, 204
clip, 358
cm, 138
color, 143, 152, 177
cols, 91
colspan, 76, 77
content, 37, 361
coords, 62
counter-increment, 362
counter-reset, 362
CSS, Patrz kaskadowe arkusze stylw
CSS1, 27
CSS2, 27, 140
CSS2.1,27
cudzysowy, 30
cursive, 168
cursor, 360
CVS, 81
Skorowidz
371
D
darmowe usugi, 283
dashed, 190
decimal, 174
deklaracja kotwicy, 65
dekoracja tekstu, 163
description, 35
display, 358
displaywindow(), 308
DNS, 23
DOCTYPE, 32, 90
dodawanie strony do Ulubionych, 309
dokumenty XHTML, 17,31
akapity, 43
ciao, 39
formularze, 84
grafika, 53
hipercza, 58
komentarze, 40
listy, 50
nagwek strony, 33, 36
nagwki, 42
prolog, 31
ramki, 88
ramy, 32
strona kodowa, 33
struktura, 31
tabele, 69
tytu, 35
zgodno ze specyfikacj, 31
doczanie zewntrznych plikw, 38
domena, 23
rejestracja, 322
dopenienie, 186, 352
dostawca usug internetowych, 21
dotted, 190
double, 191
DrawPlus 4, 20
Dreamweaver, 19
drukowanie, 359
zawarto strony, 308
drzewo katalogw, 67
dziedziczenie, 157
problemy, 158
E
edytor grafiki, 19
edytor tekstu, 18
efekt rollover, 126, 308
efekty wizualne, 358
elementy blokowe, 225
elementy witryny, 212
em, 137
e-mail, 60
etykieta, 20
ex, 138
F
fantasy, 168
FAQ, 271
FileZilla, 319
FireFTP, 319
fixed, 197
Flash, 116
float, 200, 204
font-family, 167, 168
font-size, 143, 152, 153, 168, 169
font-style, 171
font-variant, 172
font-weight, 170
formatowanie, 134
czcionki, 166
listy, 53, 173
tekst, 48, 160
wielojzyczne dokumenty, 153
formaty graficzne, 54, 93, 116
FormMail, 88
formularz wyszukiwania, 260
formularze, 84
akcja, 84
elementy, 84
metoda wykonania, 84
przesyanie treci, 87
przycisk wykonania, 85
ramy, 84
FTP, 60
G
Gadu-Gadu, 296
GET, 84
GIF, 95, 131
animacja, 102
przeplot, 102
redukcja palety kolorw, 108
transparentno, 97
372
GIMP, 20
gbia kolorw, 98
Google, 336
grafika, 53, 93
Adobe Flash, 116
alternatywny tekst, 55
cicie, 129
formaty plikw, 54, 93, 95
GIF, 95
gbia kolorw, 98
JPG, 110
mapa odsyaczy, 132
osadzanie, 56
PNG, 113
przeplot, 102
przyciski, 120
rastrowa, 118
redukcja rozmiaru, 113
rozdzielczo, 98
sieciowa, 19
SVG, 117
transparentno, 97
wielko obrazka, 55
wygadzanie krawdzi, 117
gromadzenie materiaw, 209
groove, 191
grubo konturu, 360
grupowanie
selektory, 156
znaczniki, 48
grupy dyskusyjne, 60, 328
Gegka, 343
H
height, 55, 73, 198, 204
hidden, 190
hipercza, 58
graficzne, 61
kotwice, 65
tekstowe, 59
hosting, 313
href, 59, 62
HTML, 13,25,29
http-equiv, 37
http-equiv="content-type'', 38
http-equiv="creation-date", 38
http-equiv="refresh", 37
http-equiv=reply-to", 38
I
identyfikatory, 148
in, 138
indeksacja strony, 331
indeksy, 42, 46
informacje
autor strony, 36
prawa autorskie, 37
input, 84
inset, 191
inside, 176
interfejs uytkownika, 360
internet, 9, 13
Internet Explorer, 243
ISO 8859-2, 33
italic, 171
J
JavaScript, 307, 308
jednostki miar, 137
jzyk
HTML, 14,25
PHP, 277
XHTML, 14, 25
JPG, 110, 131
stopie kompresji, 111
justify, 161
K
kadrowanie, 358
kaskada stylw, 159
kaskadowe arkusze stylw, 26, 133, 345
@media, 359
background-attachment, 180
background-color, 178
background-image, 178, 180
background-position, 181
background-repeat, 180
border, 189, 190
border-bottom, 189
border-bottom-color, 194
border-bottom-style, 191
border-bottom-width, 193
border-color, 193
border-left, 189
border-left-color, 193
border-left-style, 191
border-left-width, 193
border-right, 189
border-right-color, 194
border-right-style, 192
border-right-width, 193
border-style, 190
border-top, 189
border-top-color, 193
border-top-style, 191
border-top-width, 193
Skorowidz
border-width, 192
budowa stylu, 142
class, 149
clear, 201
color, 177
content, 361
counter-increment, 362
counter-reset, 362
cursor, 360
czcionki, 152, 166, 172, 173, 347
dekoracja tekstu, 163
dopenienie, 186, 189, 352
drukowanie, 359
drzewo hierarchii, 157
dziedziczenie, 157
efekty wizualne, 358
float, 200
font-family, 167
font-size, 168
font-style, 171
font-variant, 172
font-weight, 170
formatowanie wielojzycznych
dokumentw, 153
grupowanie selektorw, 156
identyfikatory, 148
interfejs uytkownika, 360
jednostki bezwzgldne, 138
jednostki miar, 137
jednostki wzgldne, 137
kaskadowo, 157, 159
klasy, 149
kolejno nakadanych elementw, 202
kolor elementw, 176
kolor obramowania, 193
kolory, 137, 139, 177, 350
kolory systemowe, 140
kontrola pustej przestrzeni, 165
left, 198
letter-spacing, 163
licznik, 361
line-height, 162
list-style-image, 175
list-style-position, 175
list-style-type, 174
listy, 173, 177, 349
margin, 184
margin-bottom, 184
marginesy, 184, 188,351
marginesy wewntrzne, 186
marginesy zewntrzne, 184
margin-left, 184
margin-right, 184
margin-top, 184
373
37 4
L
large, 169
larger, 169
left, 160, 181, 198, 204
legenda, 234
letter-spacing, 163
licznik, 295
konfiguracja, 296
lighter, 170
line-height, 162
line-through, 164
LinkVault, 338
lista wyboru, 86
listing kodu programu, 47
list-style-image, 175
list-style-position, 175
list-style-type, 174
listy, 50, 349
definicji, 51
kaskadowe arkusze stylw, 173
numerowane, 50
pozycjonowanie wzgldem punktora, 175
punktor graficzny, 175
typ, 173
wypunktowane, 50
zagniedone, 51
listy mailingowe, 328
lower-alpha, 174
lowercase, 164
lower-roman, 174
LZW, 95
amanie
strona, 359
wiersz, 46
M
mailto:, 60
mapa odsyaczy, 62, 132
mapa strony, 332
margin, 184
margin-bottom, 184
marginesy, 184, 351
wewntrzne, 186
zewntrzne, 184
margin-left, 184, 186
margin-right, 184
margin-top, 184
maxlength, 85
medium, 169
menu, 225
method, 84
middle, 161
mm, 138
model RGB, 139
monospace, 167,260
375
Skorowidz
overflow, 358
overline, 164
owalne przyciski, 120
P
N
nagwek strony, 33
nagwki, 42
name, 37, 62, 85
narzdzia do tworzenia stron WWW, 17
nazwy
domena, 23
kolory, 137
pliki, 242
no-repeat, 180
noresize, 91
normal, 165, 170
notatki, 227
nowe okno, 307
nowrap, 165
O
O mnie, 236
oblique, 171
obramowanie, 189, 196,260, 353
kolor, 193
styl, 190
szeroko, 192
tabela, 72
obsuga stylw przez przegldarki, 362
odnajdywanie bdw, 251
odnoniki, 58
odstpy, 162
odsyacze, 59, 60
OnMouseOut, 310
OnMouseOver, 310
Opera, 243
opis strony, 35, 330
orphans, 360
osadzanie grafiki, 56
otwieranie
nowe okno przegldarki, 307
odnonik w nowym oknie przegldarki, 61
outline, 361
outline-color, 361
outline-style, 360
outline-width, 360
outset, 191
outside, 176
padding, 186
padding-bottom, 186
padding-left, 189
padding-right, 189
padding-top, 186
page-break-after, 359
page-break-before, 359
page-break-inside, 359
PageRank, 338, 341
Paint Shop Pro, 93, 98
antyaliasing, 118
informacje na temat obrazka, 114
kolor transparentny, 101
Kreator kawakowania obrazka, 132
Kreator mapy obrazka, 132
mapa odsyaczy, 132
narzdzia, 99
Optymalizacja plikw JPEG, 112
Optymalizator plikw GIF, 109
Optymalizuj pliki PNG, 113
redukcja palety kolorw, 108
rysowanie, 98
tworzenie rysunku, 98
zmiana rozmiaru grafiki, 115
Paint.NET, 20
pasek statusu przegldarki, 309
pc, 138
PHP, 276
pica, 138
pionowe wyrwnanie, 161
pliki, 242
CVS, 81
pywanie elementw, 200
PNG, 113, 131
pochylenie tekstu, 47
podpis poczty elektronicznej, 327
pogrubienie tekstu, 47
pola formularza, 84
pole tekstowe, 84
polskie znaki, 33, 34
pomoc techniczna, 314
poprawianie bdw, 251
popularno strony, 314
position, 204
absolute, 197
fixed, 197
relative, 197
376
POST, 84
powielanie ta, 179
pozycjonowanie
elementy, 196, 357
graficzne to, 181
lista wzgldem punktora, 175
pozycjonowanie strony w wyszukiwarkach, 329
<meta>, 329
indeksacja strony, 331
LinkVault, 338
mapa strony, 332
opis strony, 330
PageRank, 338, 341
sowa kluczowe, 330
system wewntrznych odnonikw pomidzy
stronami, 335
zdobywanie pozycji, 336
prawa autorskie, 20, 37
pre, 165
Presell Page, 339
prezentacja tekstu, 43
procenty, 138
program do przygotowywania grafiki sieciowej, 19
projektowanie stron WWW, 9
prolog dokumentu XHTML, 31
promocja serwisu, 327
grupy dyskusyjne, 328
listy mailingowe, 328
podpis poczty elektronicznej, 327
sposoby, 327
promocja strony w wyszukiwarkach, 35
prostoktne przyciski, 120
przegldarki, 243
przeplot, 102
przesyanie treci formularza, 87
przycisk wykonania formularza, 85
przyciski, 85
nieregularne ksztaty, 126
owalne, 120
prostoktne, 120
Przyjazne strony, 236
pseudoelementy, 154
pseudoklasy, 150
PSPad, 19
pt, 138
publikowanie strony, 313, 319
hosting, 313
klient FTP, 319
przegrywanie plikw na serwer, 319
rejestracja domeny, 322
serwer, 313
zakadanie konta, 316
punktor, 173
graficzny, 175
puste atrybuty, 31
px, 137
Q
quotes, 361
R
ramki, 88
deklaracja wygldu, 90
suwaki, 91
ramy dokumentu XHTML, 32
ramy formularzy, 84
redukcja palety kolorw, 108
redukcja rozmiaru grafiki, 113
rejestracja domeny, 322
rei, 136
relative, 196
repeat, 180
repeat-x, 180
repeat-y, 180
resetowanie licznika, 362
RGB, 139
ridge, 191
right, 160, 181,204
robots, 38, 330
rodzaj czcionki, 167
rollover, 126, 308
rows, 91
rowspan, 76, 77
rozdzielczo
ekran, 244
obrazek, 98
rozmiar czcionki, 168
rozszerzenia plikw, 26
s
Safari, 243
sans-serif, 167
scrolling, 91
selektor, 142
atrybutu, 147
dziecka, 146
grupowanie, 156
potomka, 145
prosty, 143
rodzestwa, 146
uniwersalny, 143
serif, 167
serwer, 313
HTTP, 276
serwisy indeksujce, 35
shape, 62, 64
sieroty, 360
size, 85
skalowanie obrazka, 55
377
Skorowidz
Sklep, 238
skrypty, 307
dodawanie strony do Ulubionych, 309
drukowanie zawartoci strony, 308
nowe okno, 307
rollover, 308
strona startowa, 309
wczytywanie arkusza w zalenoci
od uywanej przegldarki, 311
zamykanie otwartego okna, 308
zmiana ta caej komrki tabeli, 310
zmiana zawartoci paska statusu, 309
sowa kluczowe, 35, 330
smali, 169
smaller, 169
solid, 190
sonda, 298
square, 174
src, 55, 91
Stat.pl, 283
dostpne informacje, 288
Geolokalizacja, 293
instalacja darmowej wersji statystyk, 285
licznik, 295
Odsony, 290
Odsyacze, 291
rejestracja, 286
Techniczne, 294
Uytkownicy, 288
Wizyty, 288
zakadanie konta, 286
static, 196
status usug Gadu-Gadu oraz Tlen, 296
statystyki, 283, 343
stopka, 263
Strona firmowa, 255
artykuy, 269
formularz wyszukiwania, 260
materiay, 256
moduy w prawej kolumnie, 265
nagwek, 258
podzia na kolumny, 261
stopka, 263
strona kontakt, 274
strona redakcja, 271
strona artykuu lub testu, 269
strona FAQ, 271
strona gwna, 258, 266
strona pojedynczego wpisu, 269
struktura strony, 257
szablon strony, 258
testy, 269
ukad strony gwnej, 258
wpisy, 269
T
tabele, 69, 72, 356
arkusz programu MS Excel, 82
cellpadding, 75
cellspacing, 75
ciao, 78
colspan, 76
importowanie tekstu, 82
kaskadowe arkusze stylw, 195
nagwek, 78
37 8
tabele
niesymetryczne, 76
obramowanie, 72
podpis, 79
rowspan, 76
stopka, 78
wstawianie, 72
wymiarowanie, 73
zagniedanie, 77
tamowanie elementw, 200
target, 61, 92
tekst, 42,210, 345
akapity, 43
cytaty, 44
formatowanie, 160
indeksy, 46
amanie wierszy, 46
nagwki, 42
twarda spacja, 47
wyrnianie, 47
testowanie projektu, 243, 274
testy rozdzielczoci, 244
testy w rnych przegldarkach, 243
testy zgodnoci kodu ze specyfikacj, 247
text-align, 160
textarea, 87
text-decoration, 152, 153, 164
text-indent, 162
text-transform, 164
title, 61, 62
Tlen, 296
to, 350
elementy, 176
graficzne, 178
top, 161, 182, 198, 204
TopStyle Lite, 19
transparentno, 97
twarda spacja, 47
tworzenie
animowany GIF, 104
arkusze stylw, 203
hipercza, 67
listy, 52
okno, 307
przyciski, 121
szkielet strony, 40
tabele, 79
tytu dokumentu, 35
U
ukrywanie elementw, 358
Ulubione, 309
umieszczanie stylw w dokumencie, 135
underline, 164
Unicode, 34
Unikod, 34
upper-alpha, 174
uppercase, 164
upper-roman, 174
URL, 60, 66
usugodawca, 21
UTF-16, 34
UTF-7, 34
UTF-8, 34
utrzymanie strony, 313
V
value, 85
vertical-align, 161
VertrigoServ, 276
visibility, 358
W
W3C, 25
waga czcionki, 170
wariant czcionki, 172
wcicie pierwszego wiersza akapitu, 162
wczytywanie arkusza w zalenoci od uywanej
przegldarki, 311
wdowy, 359
webmaster, 93
white-space, 165
widows, 359
width, 55,73, 198, 199, 204
wielko liter tekstu, 164
wielko obrazka, 55
window.close(), 308
w indw .external .addFavorite(), 309
Windows 1250, 33
witryna, 14
word-spacing, 163
wprowadzanie hasa, 85
wybr dostawcy usug internetowych, 21
wybr serwera, 313
wygld strony w rnej rozdzielczoci, 244
wygadzanie krawdzi, 117
wymiarowanie
elementy, 198, 354
tabele, 73
wyrwnanie tekstu, 160
wyrnianie tekstu, 47
wysyanie strony na serwer, 320
wyszukiwarki, 35
379
Skorowidz
X
XHTML, 13,25,29
XHTML 1.0, 25
XHTML 1.0 Strict, 40, 247
x-large, 169
x-small, 169
xx-large, 169
xx-small, 169
z
zagniedanie
tabele, 77
znaczniki, 29
zakadanie konta, 316
zamykanie otwartego okna, 308
zamykanie znacznikw, 29, 30
zatrzymanie ta, 179
zbiorczy zapis waciwoci konturu, 361
zgodno kodu ze specyfikacj, 247
z-index, 202, 204
zmiana
rozmiar grafiki, 115
to caej komrki tabeli, 310
zawarto paska statusu, 309
znaczniki, 26, 28
<a>, 59
<area>, 62
<base>, 38
<blockquote>, 44
<body>,39
<br />, 46
<caption>, 79
<code>,47
<dd>,51
<div>, 48
<dl>, 51
<dt>, 51
<em>, 47
<form>, 84
<frame>, 91
<frameset>, 90
<head>,33
<html>, 32
<hx>, 42
<img>, 55
<input>, 84
<li>, 50
<link>, 38, 136
<map>, 62
<meta>, 36
<ol>, 50
<option>, 86
<p>, 43
<pre>, 165
<q>, 45
<select>, 86
<span>, 47
<strong>, 47
<sub>, 46
<sup>,46
<table>, 72
<tbody>, 78
<td>, 72
<textarea>, 87
<tfoot>, 78
<th>, 72
<thead>, 78
<title>, 35, 330
<tr>, 72
<ul>, 50
atrybuty, 28, 30
grupowanie, 48
nazwy, 30
zagniedanie, 29
zamykanie, 29, 30
znaczniki amania, 42
znaki specjalne, 31