Issuu on Google+


Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Redaktor prowadzący: Ewelina Burska Projekt okładki: Maciej Pasek

Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie?cwtww3 Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.

ISBN: 978-83-246-3395-1

Copyright © Helion 2012 Printed in Poland.

• Kup książkę • Poleć książkę • Oceń książkę

• Księgarnia internetowa • Lubię to! » Nasza społeczność


Spis treci Wstp Rozdzia 1. Informacje podstawowe

5 9

Co to jest internet? Co to jest WWW? Jak komputery komunikuj si w internecie? Surfowanie i przegldarka Jeszcze kilka sów o adresach URL Co to jest odnonik? Strona WWW, serwis WWW, serwer WWW Co to jest HTML? Elementy strony

9 10 11 12 13 15 16 17 20

Rozdzia 2. Projektowanie serwisu WWW

23

Projektowanie serwisu Projektowanie serwisu — uwagi praktyczne

23 25

Rozdzia 3. Tworzenie strony WWW

27

Tworzenie podstawowego szkieletu strony WWW Definiowanie tytuu Nagówek Dodajemy tekst Linia pozioma Dodajemy list Lista zagniedona Obrazy na stronie WWW Tekst alternatywny Podpis wiczenie do samodzielnego wykonania

Kup książkę

27 31 32 35 39 42 44 46 51 52 55

Poleć książkę


4

Tworzenie stron WWW• wiczenia praktyczne

Rozdzia 4. Odnoniki

57

Tworzenie odnonika do strony skadowej serwisu Tworzenie odnoników prowadzcych do punktów nawigacyjnych w obrbie strony Powrót do strony gównej i komunikacja midzy stronami — ikony nawigacji Obrazy aktywne Udostpnianie plików ze strony WWW Galeria obrazów na stronie WWW

Rozdzia 5. Tabele

Kaskadowe arkusze stylów Klasy Definicja CSS Czcionka To Arkusze stylów — zasady ogólne CSS a rozszerzenia HTML Troch wicej wolnej przestrzeni Formatowanie kilku znaków Tabelaryczny ukad strony bez tabeli Przyczanie arkuszy stylu do dokumentu HTML

64 68 70 75 76

79

Elementy konstrukcyjne tabeli Procedura tworzenia tabeli Tabela troch bardziej zoona Komórki rozpite na kilku wierszach lub kolumnach Tabela w rónych przegldarkach

Rozdzia 6. Kaskadowe arkusze stylów

60

79 81 84 87 91

93 93 95 96 97 99 100 102 110 117 118 135

Rozdzia 7. Testowanie stron WWW

139

Dodatek A

145

Kup książkę

Elementy jzyka HTML

Poleć książkę


2 Projektowanie serwisu WWW Projektowanie serwisu Naszym zadaniem jest przygotowanie serwisu internetowego. Jedn z najistotniejszych spraw jest zadbanie o jego poprawn organizacj.  W I C Z E N I E

2.1

Projektowanie serwisu internetowego

Rozpocznij od przygotowania scenopisu. Okrel w nim cel tworzonego serwisu i sformuuj gówne tematy, które chciaby poruszy. Zapisz je na kartce papieru lub w edytorze tekstu. Cel bdzie okrela tematyk strony, a tematy przeksztacimy pó niej w odnoniki prowadzce do odpowiednich fragmentów strony (lub do kolejnych stron). 1. Zdefiniuj cel. W tym przykadzie zaplanujemy zwyk stron reklamujc Twoj firm lub bdc Twoj prywatn wizytówk w sieci WWW. 2. Okrel podstawow zawarto serwisu. Bd to: T informacje teleadresowe, T przydatne informacje, np. dotyczce profilu Twojej firmy lub bezporednio Ciebie,

Kup książkę

Poleć książkę


24

Tworzenie stron WWW • wiczenia praktyczne T

zasobnik plików do pobrania przez odwiedzajcych Twoje strony; moesz tu umieci np. folder reklamowy w formacie .pdf, T informator o wydarzeniach. 3. Podejmij decyzj dotyczc struktury serwisu. W tym przykadzie zastosujemy struktur równoleg, najczciej stosowan w obecnie tworzonych serwisach WWW. Równie dobrze moesz si jednak ograniczy do budowy hierarchicznej lub hierarchiczno-liniowej. Co znacz te terminy, wyjaniam w tekcie uwagi. 4. Przydziel okrelone tematy konkretnym stronom (rysunek 2.1).

Rysunek 2.1. Oto struktura przygotowywanego serwisu WWW; nosi ona nazw równolegej Najatwiejsz i najbardziej logiczn jest struktura hierarchiczna. W tym przypadku przegldanie rozpoczyna si od strony gównej, na której umieszczone jest menu lub lista tematów. Wybranie tematu prowadzi do podtematów lub konkretnej treci. Struktura liniowo-hierarchiczna to kombinacja struktury liniowej (w niej strony s poczone kolejno ze sob — tak jak wagony pocigu) i hierarchicznej. Moliwe s take inne struktury: np. liniowa z alternatyw (innymi sowy — z odgazieniami) lub sieciowa, która jest form bardzo lu n. Obecnie najczciej stosowan struktur jest struktura równolega, w której wszystkie strony serwisu zawieraj nagówek i wszystkie panele suce do nawigacji w ramach serwisu — róni si tylko waciw treci. Tego typu struktura jest efektem spowszednienia wyszukiwarek internetowych, które mog skierowa czytelnika bezporednio na jedn

Kup książkę

Poleć książkę


Rozdzia 2. • Projektowanie serwisu WWW

25

ze stron skadowych serwisu, a nie na stron gówn. W takim przypadku równoprawno wszystkich stron serwisu uatwia przejcie do innego tematu lub odszukanie strony gównej. Wybór struktury zaley przede wszystkim od tematyki strony, która moe narzuca pewien logiczny kierunek nawigacji.

Projektowanie serwisu — uwagi praktyczne Przygotowanie porzdnego projektu jest równie wane dla stron WWW, jak i wszelkich innych konstrukcji. Fakt, e informacje prezentowane s na ekranie, a nie na papierze, nie zwalnia z obowizku uczynienia wszystkiego, aby przekaz by przyjemny dla oka i atwy w odbiorze. Projektowanie stron WWW jest tym trudniejszym zadaniem, e konieczne jest take zapewnienie elastycznoci stron w tym sensie, e powinny one równie prawidowo dziaa na rónych platformach, przy rónych rozmiarach okna przegldarki oraz przy rónej wielkoci czcionkach. Oto kilka rad, które pomog Ci w poprawieniu czytelnoci stron. T Stosuj zasad: jeden temat — jedna strona. Jeli to niemoliwe, umieszczaj na jednej stronie tematy, które wi si ze sob. Nie przesad jednak z przeadowaniem strony. Pamitaj, e kilka niezbyt przeadowanych stron bdzie si adowa szybciej ni jedna ogromna strona. T Rozwa bardzo pieczoowicie kwesti odnoników midzy stronami. Musisz przemyle dokadnie wszystkie aspekty przemieszczania si midzy stronami (lub w ich obrbie), aby czytelnik nie zagubi si w niefortunnie zaprojektowanym „labiryncie”. T Zastanów si, jakie informacje umieci na stronie gównej — opis tego, co znajduje si dalej, czy te odnoniki. T Wiersze tekstu nie powinny by zbyt dugie, aby uatwi czytelno. Jest to szczególnie wane, gdy odstp midzy liniami jest za may — przy maych odstpach czytelnik bdzie bezwiednie przeskakiwa wzrokiem co drugi wiersz. Kup książkę

Poleć książkę


26

Tworzenie stron WWW • wiczenia praktyczne

T Zachowaj umiar w korzystaniu z pogrubienia i kursywy.

T T T T T T

T

T T T

Szczególnie tej ostatniej naley raczej unika. Czcionka o maym rozmiarze, pisana kursyw, jest cakowicie nieczytelna. Unikaj take korzystania z czcionki podkrelonej, poniewa tekst podkrelony wyglda jak odnonik. Nie wyróniaj zwykego tekstu za pomoc znacznika nagówka. Zachowuj podobny ukad stron (np. umieszczaj cza do pozostaych stron w tym samym miejscu). Definiujc odnonik, unikaj okrelenia „tutaj”. Nie twórz niepotrzebnego toku, nadmiar obrazów i kolorów jest niekorzystny. Wielu projektantów umieszcza w nagówku obrazy — mona je samodzielnie przygotowa, korzystajc np. z programu PhotoShop i zapisa w formacie GIF. Nadaj one stronom indywidualny charakter. Pamitaj jednak, e strona bdzie si wówczas adowaa duej i aby nie zniechca uytkownika, powiniene umieci w kodzie tekst alternatywny, korzystajc z atrybutu alt znacznika <img>. Oto przykadowa definicja: <img src="kot.gif" alt="[obraz kota]">. Pamitaj, e uytkownicy nie tylko mog korzysta z rónych rozdzielczoci, lecz take maj do dyspozycji opcj pozwalajc na zwikszanie lub zmniejszanie rozmiaru czcionki. Tak wic wzgldne relacje midzy tekstem a obrazem mog by u uytkowników najróniejsze. Projektujc stron, powiniene wzi te kwestie pod rozwag i uwzgldni je przy testowaniu. Kreatywne operowanie woln przestrzeni ekranu jest zawsze najbezpieczniejsze i daje bardzo ciekawe efekty. Nie dowierzaj wygldowi strony WWW w Twojej przegldarce i testuj swoje strony w rónych przegldarkach. Sprawd ortografi! Nawet ortograficzne ory robi bdy. Pamitaj o podpisaniu swojej strony WWW. Odnonik umoliwiajcy bezporednie wysanie wiadomoci e-mail do autora kodu HTML umoliwia uytkownikom serwisu szybkie i atwe zgaszanie zauwaonych bdów.

Kup książkę

Poleć książkę



Tworzenie stron WWW. wiczenia praktyczne. Wydanie III