Tworzenie stron WWW

w praktyce. Wydanie II
Autor: Bartosz Danowski
ISBN: 978-83-246-1284-0
Format: B5, stron: 384
Zawiera CD-ROM

Zaprojektuj wasn stron WWW

Poznaj jzyk XHTML i technologi CSS
Przygotuj elementy graficzne
Opublikuj swoj witryn i efektywnie j wypromuj!

Strony internetowe i technologia ich projektowania bardzo zmieniy si od czasu, gdy

internet by jedynie ma sieci czc orodki akademickie. Ascetyczne i proste
dokumenty publikowane na pierwszych witrynach WWW to ju zamierzcha przeszo.
Wspczesne serwisy internetowe to dziea sztuki wykorzystujce technologie Ajax
i Flash, bazy danych i jzyki skryptowe. Nadal jednak podstawowym budulcem stron
internetowych pozostaje jzyk HTML, dzi noszcy nazw XHTML. Opanowanie zasad
korzystania z niego jest niezbdne, aby projektowa zarwno proste, jak i niezwykle
rozbudowane witryny sieciowe.
Dziki ksice Tworzenie stron WWW w praktyce. Wydanie II poznasz najnowsz
specyfikacj jzyka XHTML i technologii kaskadowych arkuszy stylw, a nastpnie
wykorzystasz swoj wiedz, bez trudu tworzc wasn witryn WWW. Dowiesz si, jak
wyglda struktura dokumentu XHTML, jak umieszcza w nim elementy tekstowe
i graficzne oraz jak definiowa cza do innych stron. Nauczysz si formatowa tekst
za pomoc stylw CSS, projektowa struktur witryny, publikowa j na serwerze
i skutecznie pozycjonowa w wyszukiwarkach.

Wydawnictwo Helion
ul. Kociuszki 1c
44-100 Gliwice
tel. 032 230 98 63
e-mail: helion@helion.pl

Przygotowanie narzdzi do pracy

Struktura dokumentw XHTML
Tekst, cza, tabele i listy
Przygotowanie elementw graficznych i osadzanie ich na stronie
Formatowanie strony za pomoc kaskadowych arkuszy stylw
Projektowanie struktury witryny WWW
Tworzenie mechanizmw nawigacyjnych
Korzystanie z szablonw
Umieszczanie skryptw na stronach
Uywanie gotowych moduw dostpnych w sieci
Publikowanie witryny
Pozycjonowanie w wyszukiwarkach

Stwrz wasn stron WWW i wykorzystaj potg globalnej sieci!

Spis treci
Wstp .............................................................................................. 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 WWW ............................................ 21
Wasna domena ................................................................................................................ 23

Rozdzia 2. Jzyk XHTML i HTML sprawc caego zamieszania .......................... 25

Znacznik i jego konstrukcja ............................................................................................. 28
Podstawowe rnice pomidzy HTML i XHTML .......................................................... 29
Zasada 1. Nigdy nie krzyuj znacznikw .................................................................. 29
Zasada 2. Zawsze zamykaj wszystkie znaczniki ....................................................... 30
Zasada 3. Wpisujc znaczniki i atrybuty, zawsze uywaj maych liter .................... 30
Zasada 4. Uywaj cudzysoww dla wszystkich atrybutw ..................................... 30
Zasada 5. Przypisuj wartoci dla pustych atrybutw ................................................ 31
Zasada 6. Uwaaj ze znakami specjalnymi w skryptach .......................................... 31
Struktura dokumentu ....................................................................................................... 31
Okrelamy zgodno ze specyfikacj ........................................................................ 31
Ramy dokumentu XHTML ....................................................................................... 32
Nagwek strony ....................................................................................................... 33
Ciao dokumentu ....................................................................................................... 39
Komentarze ............................................................................................................... 40
Tworzenie szkieletu strony za pomoc edytora kED ................................................ 40
Tekst ................................................................................................................................ 42
Nagwki ................................................................................................................... 42
Akapity ...................................................................................................................... 43
Cytaty ........................................................................................................................ 44
Indeks grny i dolny .................................................................................................. 46
amanie wierszy ....................................................................................................... 46
Wyrnianie tekstu .................................................................................................... 47

Tworzenie stron WWW w praktyce

Twarda spacja ............................................................................................................ 47
Znacznik DIV ............................................................................................................ 48
Formatowanie tekstu za pomoc edytora kED .......................................................... 48
Listy ................................................................................................................................. 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. Grafika sieciowa ............................................................................ 93

Format .............................................................................................................................. 95
GIF ............................................................................................................................ 95
JPG .......................................................................................................................... 110
PNG ......................................................................................................................... 113
Inne metody redukcji rozmiaru zdj i grafiki ........................................................ 113
Pozostae formaty publikacji grafiki na stronie WWW .......................................... 116
Wygadzanie krawdzi antyaliasing ................................................................... 117
Tworzenie gotowych rozwiza na potrzeby stron WWW ........................................... 120
Prostoktne i owalne przyciski ................................................................................ 120
Przyciski o nieregularnych ksztatach ..................................................................... 126
Cicie grafiki na mniejsze elementy ....................................................................... 129
Mapa odsyaczy ....................................................................................................... 132

Rozdzia 4. Kaskadowe arkusze stylw ........................................................... 133

Wprowadzenie ............................................................................................................... 134
Rnice pomidzy formatowaniem za pomoc XHTML, HTML i CSS ................ 134
Umieszczanie stylw w dokumencie ...................................................................... 135
Jednostki miar i nazewnictwo kolorw stosowane w CSS ..................................... 137
Budowa stylu ........................................................................................................... 142
Dziedziczenie i kaskadowo to klucz do potgi CSS ............................................ 157

Spis treci

5
Formatowanie wygldu tekstu ....................................................................................... 160
Wyrwnanie tekstu .................................................................................................. 160
Pionowe wyrwnanie .............................................................................................. 161
Wcicie pierwszego wiersza akapitu ....................................................................... 162
Odstpy wiersze, wyrazy, litery ......................................................................... 162
Dekoracja tekstu ...................................................................................................... 163
Przeksztacanie mae i due litery ...................................................................... 164
Kontrola pustej przestrzeni ...................................................................................... 165
Wnioski ................................................................................................................... 166
Formatowanie wygldu czcionki ................................................................................... 166
Rodzaj czcionki ....................................................................................................... 167
Rozmiar ................................................................................................................... 168
Waga czcionki ......................................................................................................... 170
Styl czcionki ............................................................................................................ 171
Wariant czcionki ..................................................................................................... 172
Wnioski ................................................................................................................... 172
Formatowanie wygldu list ........................................................................................... 173
Typ listy ................................................................................................................... 173
Wasny punktor graficzny ....................................................................................... 175
Pozycjonowanie listy wzgldem punktora .............................................................. 175
Wnioski ................................................................................................................... 176
Kolor i to poszczeglnych elementw ......................................................................... 176
Kolor ........................................................................................................................ 177
To ........................................................................................................................... 178
Powielanie i zatrzymanie ta ................................................................................... 179
Pozycjonowanie graficznego ta .............................................................................. 181
Wnioski ................................................................................................................... 183
Marginesy i dopenienie ................................................................................................ 184
Marginesy zewntrzne ............................................................................................. 184
Marginesy wewntrzne dopenienie ................................................................... 186
Wnioski ................................................................................................................... 187
Obramowanie elementw .............................................................................................. 189
Styl obramowania .................................................................................................... 190
Szeroko obramowania .......................................................................................... 192
Kolor obramowania ................................................................................................. 193
Wnioski ................................................................................................................... 194
Pozycjonowanie elementw .......................................................................................... 196
Okrelanie pozycji ................................................................................................... 198
Wymiarowanie elementw ...................................................................................... 198
Pywanie i tamowanie elementw ........................................................................... 200
Kolejno nakadanych elementw ......................................................................... 202
Wnioski ................................................................................................................... 203
Tworzenie arkusza stylw za pomoc edytora kED ...................................................... 203

Rozdzia 5. Praktyczny projekt. Moja strona domowa ...................................... 207

Dlaczego jest mi potrzebna strona WWW? ................................................................... 207
Gromadz materiay ...................................................................................................... 209
Struktura witryny ........................................................................................................... 210
Przygotowuj poszczeglne elementy witryny ............................................................. 212
Strona gwna .......................................................................................................... 213
Sekcja Ksiki ..................................................................................................... 228
Sekcja Artykuy ................................................................................................... 235
Sekcja O mnie ...................................................................................................... 236

Tworzenie stron WWW w praktyce

Sekcja Przyjazne strony ....................................................................................... 236
Sekcja Sklep ......................................................................................................... 238
Sekcja Kontakt ..................................................................................................... 240
Nazwy plikw ................................................................................................................ 242
Testowanie gotowego projektu ...................................................................................... 243
Testy w rnych przegldarkach ............................................................................. 243
Testy rozdzielczoci ................................................................................................ 244
Testy zgodnoci kodu ze specyfikacj .................................................................... 247
Wnioski .......................................................................................................................... 253

Rozdzia 6. Praktyczny projekt. Strona firmowa ............................................... 255

Po co i dla kogo ta strona? ............................................................................................. 255
Zbieramy materiay ........................................................................................................ 256
Struktura strony ............................................................................................................. 257
Tworzymy poszczeglne podstrony .............................................................................. 257
Szablon strony ......................................................................................................... 258
Strona gwna .......................................................................................................... 266
Strona pojedynczego wpisu ..................................................................................... 269
Strona artykuu lub testu ......................................................................................... 269
Strona FAQ ............................................................................................................. 271
Strona redakcja .................................................................................................... 271
Strona kontakt ...................................................................................................... 274
Testowanie gotowego projektu ...................................................................................... 274
Wnioski .......................................................................................................................... 274

Rozdzia 7. Praca z szablonami ....................................................................... 275

Czym s szablony? ........................................................................................................ 275
Zalety pracy z szablonami ............................................................................................. 276
Jak to dziaa? ................................................................................................................. 276
Skd mona pobra gotowe szablony? .......................................................................... 281
Wnioski .......................................................................................................................... 282

Rozdzia 8. Darmowe usugi dostpne w sieci ................................................. 283

Statystyki ....................................................................................................................... 283
Instalacja darmowej wersji statystyk ....................................................................... 285
Dostpne informacje ............................................................................................... 288
Licznik ........................................................................................................................... 295
Status usug Gadu-Gadu oraz Tlen na stronie WWW ................................................... 296
Sonda ............................................................................................................................. 298
Biuletyn informacyjny ................................................................................................... 298
Wnioski .......................................................................................................................... 305

Rozdzia 9. Przydatne skrypty, ktrych mona uy na stronie WWW ............... 307

Nowe okno ..................................................................................................................... 307
Zamykanie otwartego okna ........................................................................................... 308
Rollover ......................................................................................................................... 308
Drukowanie zawartoci strony ...................................................................................... 308
Zmiana zawartoci paska statusu ................................................................................... 309
Dodawanie strony do Ulubionych .............................................................................. 309
Strona startowa .............................................................................................................. 309
Zmiana ta caej komrki tabeli ..................................................................................... 310
Wczytywanie arkusza w zalenoci od uywanej przegldarki .................................... 311

Spis treci

Rozdzia 10. Publikacja i utrzymanie strony ...................................................... 313

Wybr serwera hosting ............................................................................................. 313
Zakadanie konta ............................................................................................................ 316
Publikacja strony ........................................................................................................... 319
Rejestracja domeny ........................................................................................................ 322

Rozdzia 11. Promocja serwisu ......................................................................... 327

Popularne sposoby promocji strony .............................................................................. 327
Podpis poczty elektronicznej ................................................................................... 327
Grupy dyskusyjne .................................................................................................... 328
Listy mailingowe ..................................................................................................... 328
Inne formy promocji ................................................................................................ 328
Pozycjonowanie stron w wyszukiwarkach .................................................................... 329
Podstawy ................................................................................................................. 329
Prawidowa indeksacja strony ................................................................................. 331
Zdobywanie pozycji ................................................................................................ 336
Wnioski .......................................................................................................................... 341

Dodatek A ...................................................................................................... 343

Podsumowanie ............................................................................. 367
Skorowidz .................................................................................... 369

Rozdzia 6.

Praktyczny projekt.
Strona firmowa
Tym razem jako przykad strony firmowej posuy mi witryna, ktra ma sta si uzupenieniem 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 najnowsze informacje, testy i artykuy z dziedziny komputerw przenonych. Cao w poczeniu 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.

Po co i dla kogo ta strona?

Strona dostpna pod adresem http://laptopy.info.pl jest uzupenieniem dziaajcego od
dwch lat forum powiconego tej samej tematyce. Poniej w kilku punktach wymieniem najwaniejsze zaoenia, jakie mi przywiecay podczas prac nad nowym projektem.
Strona ma mie charakter informacyjny i znajd si na niej najnowsze

wiadomoci ze wiata komputerw przenonych oraz mobilnych akcesoriw.

Poza krtkimi notkami o nowociach mam w planach publikacj
zaawansowanych testw rnych modeli laptopw oraz zwizanych z nimi
dodatkw.
Szata graficzna oraz rozwizania nawigacyjne maj by moliwie najprostsze,

a przy tym odmienne od tego, co oferuje wiele rnych portali o tematyce

komputerowej.

256

Tworzenie stron WWW w praktyce

Nie mam zamiaru tworzy kolejnego wielkiego portalu o wszystkim i o niczym.

Dlatego skupiam si wycznie na tematyce laptopw. W przypadku forum

wska specjalizacja pokazaa, e to szansa na sukces. Forum w chwili obecnej
przegonio konkurencj i jest najwikszym i najpopularniejszym miejscem
tego typu w polskim kawaku sieci.
Strona w niedalekiej przyszoci ma generowa zyski. Moliwoci zarabiania

widz w publikacji reklam, sponsorowanych artykuach, wsppracy z liczcymi

si dystrybutorami sprztu oraz sprzeday laptopw i zwizanych z nimi rzeczy.
Jak widzisz, strona bdzie miaa charakter informacyjny, a forum skupi si na roli miejsca do dyskusji, wymieniania pogldw oraz niesienia sobie wzajemnej pomocy.
Odbiorcami treci publikowanych na stronie z ca pewnoci bd obecni i przyszli
uytkownicy komputerw przenonych. Licz na spore zainteresowanie wrd obecnych
uytkownikw forum. Nie wykluczam rwnie czstych odwiedzin przez ludzi zainteresowanych testami, nowinkami oraz sensacjami ze wiata komputerw mobilnych.

Zbieramy materiay
W przypadku omawianej strony zbieranie materiaw niezbdnych do jej przygotowania ograniczy si do minimum. Dokadniej mwic, aby rozpocz prac nad projektowaniem, 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 artykuw. 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 przygotowywania wszystkich materiaw zarwno tych potrzebnych na
pocztek, jak i tych, ktre maj 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.

Rozdzia 6. Praktyczny projekt. Strona firmowa

257

Kady artyku powinien by dzielony na kilka podstron, tak by korzystanie

z niego byo wygodniejsze.

Wszystkie teksty powinny by pisanie w sposb zwizy z zachowaniem

szczeglnej dbaoci o przystpn form oraz zaciekawienie czytelnika we

wstpie i zatrzymanie go podczas lektury rozwinicia.
Ze wzgldu na tematyk strony nie ma potrzeby zwracania specjalnej uwagi

na stosowanie fraz i sw kluczowych. Si rzeczy teksty bd nasycone

odpowiednimi sowami i stosunkowo szybko zajm wysokie pozycje w wynikach
wyszukiwania. Naley jednak zwraca uwag na zawarto nagwkw,
ktre bezwzgldnie powinny by sugestywne i nasycone sowami kluczowymi
dla prezentowanego zagadnienia.

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.

Tworzymy poszczeglne podstrony

Pora zaj si projektowaniem strony. Tym razem zmieniem sposb prezentacji projektu i najpierw opisz w kilku sowach, co chc uzyska, nastpnie przedstawi odpowiedni kod i na kocu zamieszcz rysunek prezentujcy ostateczny wynik.
Prezentowany w tym rozdziale projekt w oryginalnej wersji zosta przeze mnie zamwiony w firmie CRE8, a nastpnie poprawiony przeze mnie tak, by odpowiada moim
potrzebom.

258

Tworzenie stron WWW w praktyce

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 kolumna 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 oglny szablon.

Etap pierwszy nagwek

Tworzenie projektu zaczniemy od przygotowania nagwka, w ktrym umieszczone
zostanie menu nawigacyjne, wyszukiwarka oraz jaki element graficzny. Menu nawigacyjne zostanie podzielone na dwie czci i dodatkowo zrnicowane rozmiarem. Gwne menu znajdzie si na dole nagwka i bdzie zauwaalnie wiksze. Natomiast menu
dodatkowe znajdzie si na samej grze nagwka i bdzie mniejsze. Dodatkowe menu
bdzie zawiera odnoniki do strony z kontaktami, informacjami o redakcji i kilka innych
potrzebnych elementw.
Kod nagwka musimy podzieli na trzy czci. Dodatkowo cao powinna by zamknita pomidzy znacznikami <div></div>, dziki czemu atwiej bdzie kontrolowa
cao. Zwr uwag, e obie czci menu nawigacyjnego zbudowaem, wykorzystujc
listy wypunktowane, a nastpnie sformatowaem je za pomoc CSS. rodek nagwka
to motyw graficzny oraz wyszukiwarka. Stosowny kod XHTML gotowego nagwka
zamieciem poniej.
<div id="naglowek">
<ul id="menugora">
<li><a href="feed">RSS Wiadomoci</a></li>
<li><a href="mapa-strony.html">Mapa strony</a></li>
<li><a href="redakcja.html">Redakcja</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
<div id="menusrodek">
<a href="/"><img src="obrazki/laptop.jpg" /></a>
<a href="/"><img src="obrazki/logo.gif" /></a>
<form method="get" id="searchform" action="http://laptopy.info.pl">
<input type="text" value="" name="s" id="s" class="pole" />
<input type="submit" id="searchsubmit" value="Szukaj" />
</form>
</div>
<ul id="menudol">
<li><a href="/">Aktualnoci</a></li>
<li><a href="/testy">Testy</a></li>
<li><a href="/artykuly">Artykuy</a></li>
<li><a href="/faq">FAQ</a></li>
<li><a href="http://forum.laptopy.info.pl">Forum</a></li>
</ul>
</div>

Rozdzia 6. Praktyczny projekt. Strona firmowa

259

W tej chwili niezbdne jest signicie do kaskadowych arkuszy stylw w celu nadania 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 zamieciem poniej.
body
{
margin:0;
padding:0;
background-color:white;
}

Dopiero teraz moemy zaj si nagwkiem witryny. Powinnymy zacz od okrelenia szerokoci oraz waciwoci dolnej krawdzi dla bloku tworzonego przez znacznik
<div id=naglowek></div>. Odpowiednie deklaracje stylw maj nastpujc posta:
div#naglowek
{
width:100%;
border-bottom:solid 5px #518AB5;
}

Nastpny krok to zmiana waciwoci obu list wypunktowanych wystpujcych w nagwku strony. Listy musimy przeksztaci na elementy liniowe oraz okreli lewy
margines. Zwr uwag, e dziki uyciu selektora potomka style bd odnosi si
wycznie do list znajdujcych si pomidzy znacznikami <div id=naglowek></div>.
div#naglowek li
{
display:inline;
margin-left:15px;
}

Nie moemy zapomnie o okreleniu wygldu odsyaczy znajdujcych si w menu.

Dla wszystkich odsyaczy ulokowanych w nagwku strony wyczamy podkrelenie,
ustawiamy kolor na biay oraz wczamy doln krawd obramowania. Wane jest, aby
krawd miaa taki sam kolor jak to belki menu. Nastpnie dla odsyaczy, nad ktrymi znajdzie si kursor, okrelamy szary kolor czcionki i szary dla dolnej krawdzi
obramowania. W obu przypadkach korzystamy z selektora potomka.
div#naglowek a
{
text-decoration:none;
color:white;
border-bottom:solid 5px #518AB5;
}
div#naglowek a:hover
{
color:silver;
border-bottom:solid white 3px;
}

260

Tworzenie stron WWW w praktyce

Czas zaj si dodatkowym menu nawigacyjnym. W swoim projekcie wyczyem marginesy, okreliem wysoko caego paska dodatkowego menu, ustawiem kolor ta
i wyczyem listy. Uzupenieniem caoci jest wymuszenie stosowania czcionki maszynowej z rodziny monospace.
ul#menugora
{
margin:0;
height:30px;
background-color:#518AB5;
list-style:none;
font-family:monospace;
}

Kolejne zmiany dotycz rodkowej czci nagwka strony. Poniej znajduje si listing
zastosowanych stylw wraz z moim komentarzem.
div#menusrodek
{
height:150px;
}

W tym miejscu okreliem wysoko rodkowej czci nagwka.

div#menusrodek img, div#menusrodek a
{
border:0;
}

Wyczyem obramowanie dla obrazkw i odnonikw znajdujcych si w nagwku strony.

div#menusrodek img
{
vertical-align:middle;
}

Skorzystaem z wyrwnania w pionie i wymusiem, aby wszystkie obrazki ustawiy si

w na rodku dostpnego obszaru.
div#menusrodek form
{
position:absolute;
right:10px;
top:1px;
}

Za pomoc funkcji pozycjonowania ustawiem formularz wyszukiwania w prawym grnym naroniku.

div#menusrodek input.pole
{
background-color:silver;
border:1px solid white;
width:150px;
padding:0;
margin:0;
}

Rozdzia 6. Praktyczny projekt. Strona firmowa

261

W tym miejscu zajem si zmian wygldu pola formularza. Zmieniem kolor ta,
wczyem obramowanie, ustawiem rozmiar pola i wyczyem marginesy oraz dopenienie.
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-color:#518AB5;
margin:0;
margin-left:300px;
height:40px;
text-align:center;
font-size:large;
text-transform:uppercase;
}

Na rysunku 6.1 przedstawiem widok kompletnego nagwka mojej strony. Przekrelony obszar zostawiem pusty z myl o tym, aby w tym miejscu umieci banner
reklamowy.

Rysunek 6.1. Gotowy nagwek witryny

Etap drugi podzia na dwie kolumny

Po zakoczeniu pracy nad nagwkiem strony pora zaj si centraln czci witryny.
Zaplanowaem, e strona zostanie podzielona na dwie kolumny. Lewa cz bdzie
zajmowa mniej wicej 2/3 ekranu i ma zawiera publikowane treci. Natomiast po
prawej stronie, w wszej czci, znajd si dwa moduy z list ostatnio dodanych recenzji oraz artykuw.
Do utworzenia obu kolumn wykorzystamy znaczniki <div></div> wraz z odpowiednimi identyfikatorami. Poniej zamieciem przykadowy kod, ktry powinien trafi
do tworzonego dokumentu bezporednio przed zamykajcym znacznikiem </body>.
<div id="zawartosc">
</div>
<div id="nawigacja">
</div>

262

Tworzenie stron WWW w praktyce

Ukad kolumnowy przygotujemy w caoci za pomoc kaskadowych arkuszy stylw.

W tym celu do arkusza naley doda ponisze deklaracje. Kady z selektorw zosta przeze mnie dodatkowo skomentowany. Dziki temu atwiej bdzie Ci zrozumie,
o co chodzi.
div#nawigacja
{
position:absolute;
right:0;
top:15em;
width:300px;
padding:0;
margin:0;
}

Pierwszy z wpisw dotyczy wszej kolumny. Na pocztku ustawiem blok tak, by

znalaz si przy prawej krawdzi przegldarki i poniej nagwka strony. Skorzystaem
z jednostki em, dziki czemu ukad strony bdzie elastyczny i niezaleny od rozdzielczoci. Nastpnie okrelamy szeroko prawej kolumny i wyczamy marginesy i dopenienie.
div#zawartosc
{
margin-right:20em;
margin-left:1em;
}

W tej chwili prawa kolumna znalaza si na swoim miejscu, ale reszta tekstu j przykrywa. W zwizku z tym naley dla szerszej kolumny ustawi prawy i grny margines
tak, by ten element pasowa do reszty.
Na rysunku 6.2 przedstawiem gotowy projekt z podziaem na dwie kolumny. Dodatkowo dla uatwienia poszczeglne bloki maj ustawione rne ta.

Rysunek 6.2. Ukad kolumnowy strony

Rozdzia 6. Praktyczny projekt. Strona firmowa

263

Jak widzisz uzyskanie dwch kolumn byo bardzo proste i ograniczyo si zaledwie
do kilku prostych wpisw w arkuszu stylw.
Aby zamieni miejscami obie kolumny, wystarczy wsz rubryk pozycjonowa do
lewej krawdzi okna przegldarki. Nastpnie dla szerszej kolumny naley okreli
lewy margines.

Etap trzeci stopka

W tej chwili moemy zaj si stopk witryny. W moim projekcie stopka bdzie bardzo
prosta i bdzie jedynie zawiera informacje o prawach autorskich oraz autorze strony.
Kod stopki bdzie skada si ze znacznika <div id=stopka></div> oraz trzech linijek tekstu. Listing widoczny poniej powinien znale si kodzie strony bezporednio przed zamykajcym znacznikiem </body>.
<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</a></p>
<p><a href="sitemape.xml">XML SiteMap</a></p>
</div>

Stopka w postaci widocznej na listingu wymaga dodania odpowiednich wpisw do

arkusza stylw. Musimy zadba o kolor ta, wygld tekstu oraz wymiary caego elementu. Dodatkowo bardzo wane jest to, aby stopka zawsze znajdowaa si na dole ekranu. Musisz bowiem wiedzie, e umieszczana jest ona zawsze pod treci strony. Jeeli
treci jest na tyle duo, e wypenia ca widoczn cz ekranu, to stopka znajduje
si na kocu. Natomiast w przypadku gdy treci jest mao, stopka moe znale si na
przykad w poowie ekranu. Na szczcie problem ten moemy rwnie rozwiza,
stosujc odpowiednie style.
Poniej zamieciem listing z odpowiednimi wpisami do arkusza stylw oraz moimi
komentarzami. Mam nadziej, e dziki temu atwiej bdzie Ci zrozumie, w jaki sposb trwale powiza stopk z doln krawdzi okna przegldarki.
body, html, #zawartosc
{
min-height:100%;
height:100%;
}

W pierwszej kolejnoci dla selektorw body, html oraz dla identyfikatora #zawartosc,
ktry jest przypisany do szerszej kolumny, ustawiem wysoko rwn 100% oraz minimaln wysoko rwn 100%.
html>body, html>body #zawartosc
{
height:auto;
}

Nastpnie, korzystajc z selektorw dziecka, ponownie okreliem wysoko dla body

oraz #zawartosc. Jednak tym razem wysoko zostaa ustawiona jako auto.

264

Tworzenie stron WWW w praktyce

div#stopka
{
width:100%;
height:40px;
background:#EEEEEE url(obrazki/tlo.gif);
padding-top:10px;
padding-bottom:10px;
position:absolute;
bottom:0;}

Dla znacznika stopki ustawiem szeroko, wysoko, kolor ta, grne i dolne dopenienie oraz cay element usytuowaem na sztywno przy dolnej krawdzi okna przegldarki.
div#stopka p
{
margin:0;
padding-left:20px;
font-size:smaller;
}

Ostatnie zmiany dotycz tekstu umieszczonego w stopce. Dziki ustawieniu zerowego

marginesu zmniejszyem odstpy pomidzy poszczeglnymi liniami. Dodatkowo zdefiniowaem lewe dopenienie, aby odsun tekst od krawdzi. Na koniec pomniejszyem czcionk.
Na rysunku 6.3 zamieciem widok stopki oraz pozostaych elementw strony. Zwr
uwag, e stopka mimo maej iloci tekstu znajduje si na samym dole.

Rysunek 6.3. Podstawowa struktura strony

Rozdzia 6. Praktyczny projekt. Strona firmowa

265

Etap czwarty moduy w prawej kolumnie

Uznaem, e prawa kolumna ma zawiera dwa moduy, w ktrych bd pojawia si
odnoniki do ostatnio dodanych artykuw oraz testw sprztu. Moduy maj by maksymalnie proste i nieskomplikowane. W zwizku z tym skorzystaem z nagwkw
stopnia trzeciego, list wypunktowanych, a cao zostanie umieszczona pomidzy istniejcym ju znacznikiem <div id=nawigacja></div>. Przykadowy kod znajduje
si poniej.
<h3>Artykuy</h3>
<ul>
<li><a href="artukuly/baterie">Baterie - prawda i mity</a></li>
<li><a href="artukuly/recovery">Partycje i noniki recovery</a></li>
<li><a href="artukuly/nlite">nLite - integracja sterownikw</a></li>
</ul>
<h3>Testy</h3>
<ul>
<li><a href="testy/ibmt42">IBM ThinkPad T42</a></li>
<li><a href="testy/ibmt60">IBM ThinkPad T60</a></li>
<li><a href="testy/ibmx60">IBM ThinkPad X60</a></li>
</ul>

W pierwszej kolejnoci dla prawej kolumny ustawiem to oraz okreliem jej maksymaln 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/tlo1.png);
background-repeat:no-repeat;
padding:5px;
margin:0;
}

Nastpne zmiany dotycz ju bezporednio tekstu umieszczonego w prawej kolumnie.

Naley zaj si wygldem nagwkw oraz list wypunktowanych. Poniej znajduj si
przykadowe wpisy do mojego arkusza stylw.
div#nawigacja h3
{
margin:0;
padding:0;
font-weight:bold;
}
div#nawigacja ul
{
margin:3px;
}

266

Tworzenie stron WWW w praktyce

Na rysunku 6.4 zamieciem widok gotowego szkieletu strony. W tej chwili moemy
bra si do opracowywania poszczeglnych dziaw witryny.

Rysunek 6.4. Widok gotowego szkieletu strony

Strona gwna
Strona gwna w centralnej czci bdzie przedstawia wiadomoci w skrconej postaci. Kady wpis ma skada si z wprowadzenia, zdjcia oraz odnonika pozwalajcego na przejcie do kompletnej notatki. Innymi sowy, nie wymyliem tutaj nic odkrywczego.
Struktura pojedynczego wpisu bdzie stosunkowo prosta. Tytu zostanie przedstawiony 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=wpis></div>,
dziki czemu atwiej bdzie kontrolowa cao. Poniej zamieciem kod przykadowego 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="obrazki/flybook.jpg" alt="Flybook MV" />
<p>Co pocztkowo wyglda na tuzinkowego laptopa, wcale nim nie jest. Flybook VM
posiada ekran mogcy ustawi si w pozycji normalnego ekranu LCD, tak aby uytkownik
mia wygodniejsz pozycj podczas uytkowania komputera. Szczeglnie przydatne jest

Rozdzia 6. Praktyczny projekt. Strona firmowa

267

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="news01.html">Wicej &#187;</a></p>
</div>

Poniej przestawiem fragment arkusza stylw, ktry odpowiada za kontrol wygldu

pojedynczego wpisu. Kady z selektorw zosta przeze mnie skomentowany.
div#wpis
{
padding-bottom:20px;
border-bottom:solid 2px silver;
margin-bottom:20px;
}

Dla caego moduu ustawiem dolny margines i dopenienie. Nastpnie wczyem dolne
obramowanie.
div#wpis img
{
float:left;
padding:2px;
border:solid 2px silver;
margin-right:5px;
margin-bottom:5px;
}

Okreliem sposb oblewania obrazkw przez tekst, wczyem dopenienie oraz

ramk. Poza tym zdefiniowaem prawy i dolny margines, aby wymusi odstp obrazka od tekstu.
div#wpis p
{
margin-top:0,5em;
}

Ustawiem wikszy odstp pomidzy poszczeglnymi blokami tekstu.

div#wpis p.data
{
padding:0;
margin:0;
font-size:smaller;
color:silver;
margin-bottom:30px;
}

Dla dodatkowych informacji widocznych bezporednio pod nagwkiem wyczyem

marginesy i dopenienia. Nastpnie zmniejszyem czcionk i nadaem jej szary kolor.
Poza tym wczyem dolne dopenienie, aby zwikszy odstp pomidzy nagwkiem
i reszt wpisu.

268

Tworzenie stron WWW w praktyce

div#wpis p.zrodlo
{
text-align:right;
margin-top:30px;
clear: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;
}

Ostatnia zmiana wycza marginesy i dopenienie dla nagwkw stopnia drugiego.

Dziki temu tekst uzupeniajcy nagwek znajdzie si bezporednio pod nim.
Na rysunku 6.5 przedstawiem widok strony gwnej z kilkoma wpisami.
Rysunek 6.5.
Widok strony gwnej
z kilkoma wpisami

Rozdzia 6. Praktyczny projekt. Strona firmowa

269

Strona pojedynczego wpisu

Pora zaj si wygldem strony z pojedynczym wpisem. W tym przypadku skorzystamy z kodu XHTML skrconych wpisw na stronie gwnej i uzupenimy je o kilka
dodatkowych elementw oraz stylw.
<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 src="obrazki/lifebook_miniatura.jpg" alt="Lifebook P7230" />
<p>Fujitsu ogosi dostpno w USA LifeBooka P7230, ultraprzenonego laptopa
z matryc 10,6". Fujitsu LifeBook P7230 way poniej 1,4 kg i ma ok. 3 cm gruboci.
Twierdzi si, e jest to najmniejszy i najlejszy notebook z wbudowan zatok
do obsugi nagrywarki DVD, czy drugiej baterii - zwiksza ona czas pracy notebooka
do prawie 10 godzin.</p>
<p>Notebook jest wyposaony w procesor Core Solo U1400 P7230, oparty na chipsecie
945 GMA, oraz w kart graficzn Intel Graphics Media Accelerator 950. Obsuguje
do 2 GB pamici RAM i moe posiada dysk twardy do 80 GB (4200 rpm).</p>
<p>Fujitsu LifeBook P7230 jest wyposaony w bezprzewodow kart sieciow Intel PRO/
Wireless 3945b/g. Posiada rwnie wbudowany modem, kart sieciow 1 GB oraz Bluetooth.
Fujitsu LifeBook P7230 jest zaopatrzony w dwa porty USB, port IEEE 1394, port wideo,
port na karty I/II PCMCIA i port do obsugi kart Memory Stick, Memory Stick PRO,
Secure Digital (SD).</p>
<p>Ultraprzenony laptop Fujitsu jest dostpny w wersji z obudow pokryt czarn
lub bia skr. Mona wybra wersj z systemem Windows Vista Home Basic, Windows
Vista Business lub Windows XP Professional. LifeBook P7230 bdzie kosztowa od $1,699
za podstawow konfiguracj.</p>
<p class="obrazek"><img src="obrazki/lifebook_duzy.jpg" alt="LifeBook" /></p>
<p class="obrazek"><img src="obrazki/lifebooks_duzy1.jpg" alt="LifeBook" /></p>
<p class="zrodlo">rdo: <a href="http://laptoping.com">www.laptoping.com</a></p>
</div>

Dodatkowe wpisy do arkusza bd dotyczy wycznie dodatkowych obrazkw dodanych do penej treci wiadomoci. Przykadowy wpis moe wyglda mniej wicej tak:
div#wpis p.obrazek
{
margin-left:5%;
}

Rysunek 6.6 przedstawia gotow stron z pen treci wiadomoci.

Strona artykuu lub testu

Strona, na ktrej publikuj artyku lub test, niczym nie rni si od przykadowej
strony wpisu zbudowanej i opisanej w poprzednim podrozdziale. W zwizku z tym
uznaem, e nie ma potrzeby przygotowywa oddzielnego opisu. W dalszej czci zamieciem jedynie kilka uwag, ktrych warto si trzyma, aby strona z du iloci
tekstu i grafiki bya funkcjonalna.

270

Rysunek 6.6. Strona z pen treci wiadomoci

Tworzenie stron WWW w praktyce

Rozdzia 6. Praktyczny projekt. Strona firmowa

271

Dziel due iloci tekstu na kilka mniejszych stron. Rozwizanie to pozwoli

skrci czas wczytywania strony oraz poprawi komfort korzystania z niej.

Dodatkowe menu nawigacyjne zamie na pocztku i na kocu strony,
aby mona byo szybko przej do nastpnej lub poprzedniej czci artykuu.
W treci publikuj mae zdjcia i twrz z nich odsyacze do wikszych kopii.

Dziki temu strona bdzie szybciej si wczytywa. Nie martw si o to,

e obrazki bd mniej czytelne, bo osoby nimi zainteresowane powiksz je,
klikajc w utworzony przez Ciebie odsyacz.
Staraj si pisa zwize artykuy, bo internauci nie lubi zbyt wiele czyta.

Pamitaj, e kady problem mona przedstawi w sposb zwizy. Jeeli jednak

poruszasz powane tematy i mimo szczerych chci nie jeste wstanie skrci
artykuu lub testu, zastanw si, czy nie mona go podzieli na dwa
oddzielne tematy.

Strona FAQ
Po dugich przemyleniach uznaem, e odnonik FAQ w chwili obecnej bdzie prowadzi do odpowiedniego dziau forum, ktry jest regularnie aktualizowany. Mam
jednak w planach stworzy odpowiedni stron i na niej publikowa najczciej zadawane 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, problemy 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 wanie 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 publikacji treci w internecie.
Kady z redaktorw wkada cae swoje serce w to, aby prezentowane przez niego
materiay byy ciekawe i zawsze aktualne. Niniejsza strona ma pozwoli na to,
aby mg bliej pozna kadego z nas.</p>
<div id="redakcja">
<h2>Redaktor naczelny</h3>
<img src="obrazki/bd.jpg" alt="Bartosz Danowski - redaktor naczelny" />
<ul>
<li>Imi i nazwisko: <strong>Bartosz Danowski</strong></li>
<li>Stanowisko: <strong>Redaktor naczelny/waciel</strong></li>
<li>Obowiazki: <strong>Kierowanie prac portalu, kontakt z klientami
i reklamodawcami</strong></li>
<li>Kontakt: <strong>danowskilaptopy.info.pl</strong></li>
</ul>
</div>

272

Tworzenie stron WWW w praktyce

<div id="redakcja">
<h3>Redaktor dziau Wiadomoci</h3>
<img src="obrazki/xx.jpg" alt="Jan Nowak - redaktor dziau wiadomoci" />
<ul>
<li>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>
<li>Kontakt: <strong>nowak@laptopy.info.pl</strong></li>
</ul>
</div>

Wygld strony ma by maksymalnie uproszczony, a co za tym idzie, nie bd tutaj

stosowa szczeglnie wyszukanego formatowania. Poniej zamieciem odpowiednie
style, z ktrych skorzystaem w tym przypadku. Dodatkowo kady z selektorw zosta
przeze mnie omwiony.
div#redakcja
{
padding:10px;
background-color:#FAFAFA;
margin-bottom:10px;
}

Informacja o kadym z autorw jest publikowana w oddzielnym module. Ustawiem

kolor ta, dopenienie oraz dolny margines.
#redakcja h2, h3
{
clear:both;
}

Dla nagwkw stopnia drugiego i trzeciego wyczyem moliwo oblewania nimi

innych elementw. Zwr uwag, e powyszy zapis tyczy si wycznie tych nagwkw, ktre znajduj si wewntrz innego elementu posiadajcego identyfikator
#redakcja.
div#redakcja ul
{
padding:20px;
list-style-type:none;
}

Do prezentacji danych wykorzystaem listy. Wyczyem punktory oraz ustawiem

dopenienie.
div#redakcja img
{
float:left;
border:2px solid silver;
padding:2px;
margin:5px;
}

Rozdzia 6. Praktyczny projekt. Strona firmowa

273

Wczyem oblewanie obrazkw przez tekst oraz ustawiem ramk, dopenienie i marginesy.
div#redakcja p
{
clear:both;
}

Na koniec dla wszystkich akapitw wystpujcych w znaczniku <div id=redakcja>

</div> wyczyem oblewanie obrazkw.
Rysunek 6.7 przedstawia przykadow stron z informacjami na temat redakcji. Oczywicie, w praktyce dzia ten bdzie rozrasta si w zalenoci od liczby pracownikw.

Rysunek 6.7. Widok strony z informacjami na temat redakcji

274

Tworzenie stron WWW w praktyce

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.

Testowanie gotowego projektu

W przypadku strony firmowej szczeglnie istotnym elementem procesu tworzenia jest
bardzo staranne przetestowanie witryny. Bezwzgldnie musimy sprawdzi wygld strony
w rnych przegldarkach oraz podda analizie poprawno kodu. Caa procedura testowa zostaa bardzo dokadnie opisana w poprzednim rozdziale i w tym miejscu pragn
Ci tam odesa.

Wnioski
Projekt strony firmowej jest ju gotowy i moesz go opublikowa w sieci. Poniej zamieciem 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 mog 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 informacje 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.