Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00605 008670 10481284 na godz. na dobę w sumie
HTML. Kurs webmastera - książka
HTML. Kurs webmastera - książka
Autor: Liczba stron: 360
Wydawca: Helion Język publikacji: polski
ISBN: 83-7361-511-3 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Książka 'HTML. Kurs webmastera' to podręcznik pokazujący niemal wszystkie aspekty tworzenia witryny WWW. Kolejne rozdziały przedstawiają proces tworzenia profesjonalnej witryny WWW zgodnej z najnowszymi standardami rekomendowanymi przez konsorcjum W3C, wykorzystującej technologie XHTML i JavaScript. Książka opisuje także sposoby dołączania do witryny elementów multimedialnych, konstruowania interaktywnych formularzy i testowania witryny.

Stwórz elegancką witrynę WWW,
wykorzystując najnowsze standardy projektowania.

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREĎCI SPIS TREĎCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOĎCIACH O NOWOĎCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE HTML. Kurs webmastera Autor: Donna L. Baker T³umaczenie: Tomasz ¯mijewski ISBN: 83-7361-511-3 Tytu³ orygina³u: HTML Complete Course Format: B5, stron: 360 Ksi¹¿ka „HTML. Kurs webmastera” to podrêcznik pokazuj¹cy niemal wszystkie aspekty tworzenia witryny WWW. Kolejne rozdzia³y przedstawiaj¹ proces tworzenia profesjonalnej witryny WWW zgodnej z najnowszymi standardami rekomendowanymi przez konsorcjum W3C, wykorzystuj¹cej technologie XHTML i JavaScript. Ksi¹¿ka opisuje tak¿e sposoby do³¹czania do witryny elementów multimedialnych, konstruowania interaktywnych formularzy i testowania witryny. • Projektowanie struktury witryny • Przygotowanie elementów graficznych • Formatowanie tabel za pomoc¹ stylów • Stosowanie tabel do wyrównywania po³o¿enia obrazków • Tworzenie mechanizmów nawigacji • Korzystanie z elementów stylów CSS — klas i identyfikatorów • Osadzanie na stronie elementów multimedialnych • U¿ywanie skryptów JavaScript • Konstruowanie formularzy • Testowanie witryny • Publikacja witryny na serwerze Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl Spis treści Wstęp Na zachętę » Wstęp » Tworzenie szkieletu strony » Tworzenie pierwszej strony witryny » Tworzenie drugiej strony witryny » Dodanie do stron tekstu i grafiki » Wykańczanie witryny Część I Przygotowanie do pracy Podstawy HTML » HTML 9 13 13 14 16 18 20 23 27 27 » Oddzielenie treści od formy prezentacji 29 » Użycie arkusza stylów » Aktywna strona i interakcja z użytkownikiem » JavaScript na naszych stronach Przegląd projektu » Projekt na potrzeby kursu » Witryna związana z książką » Praca nad projektem Ogólne wskazówki oraz instrukcje do plików źródłowych » Korzystanie z plików z katalogu Tutorial Files » Instrukcje w przewodnikach » Wymagania systemowe 30 31 32 33 33 33 34 35 35 37 38 Część II Zaczynamy Lekcja 1. Tworzenie zarysu witryny 40 » Od organizacji pomysłów do organizacji witryny » Tworzenie folderów witryny 42 44 » Tworzenie pierwszej strony » Oglądanie i sprawdzanie pierwszej strony » Tworzenie stron interfejsu głównego » Tworzenie zestawu podobnych stron » Tworzenie pokazu slajdów » Podsumowanie lekcji » Inne projekty Lekcja 2. Użycie tabel do opisu układu stron » Tabele » Tworzenie szablonu tabeli » Użycie tabeli na stronie głównej witryny » Użycie tabel na stronach głównych poszczególnych ośrodków » Szerokość kolumn tabeli » Tabele na stronach nawigacyjnych » Tabela na stronie pokazu slajdów » Podsumowanie lekcji » Inne projekty Część III Elementy graficzne Lekcja 3. Przygotowanie elementów graficznych » Kolory » Przygotowanie palety kolorów na potrzeby witryny 45 47 49 52 55 56 56 58 60 61 63 66 71 72 74 76 76 80 82 85 » Wybór ustawień i preferencji rysowania 87 » Rysowanie pasków » Sprawdzanie obrazka do wypełniania tabel nawigacyjnych » Tworzenie przycisku nawigacyjnego 90 92 93 » Wykańczanie przycisku nawigacyjnego 95 » Kopiowanie i modyfikacje przycisku nawigacyjnego » Podsumowanie lekcji » Inne projekty 97 98 98 Spis treści Lekcja 4. Przygotowanie logo witryny 100 » Dodanie zastrzeżeń » Konfigurowanie obrazków muszli » Style do pokazu slajdów » Dodanie obrazków i tekstu do stron slajdów » Wiązanie stron slajdów ze stylami » Podsumowanie lekcji » Inne projekty 154 156 159 161 163 165 165 » Przygotowanie warstw na logo Sizzle » Dodatkowe warstwy w pliku logo » Manipulowanie warstwami logo i ich układanie » Wykańczanie logo Sizzle » Tworzenie logo strony pojedynczego ośrodka » Tworzenie logo kolejnych ośrodków » Eksport logo » Podsumowanie lekcji » Inne projekty 102 104 107 109 112 114 116 119 119 Część IV Grafika i obrazki na stronach Lekcja 5. Dostosowywanie tabel za pomocą stylów 122 » Tworzenie nowej strony z logo Sizzle 124 » Style i kaskadowe arkusze stylów 125 » Tworzenie kaskadowego arkusza stylów witryny Sizzle 127 » Dodanie obramowań i logo do tabel na stronach poszczególnych ośrodków » Sprawdzanie treści strony i arkusza stylów » Dodanie nowej strony z informacjami o rezerwacjach » Rozmieszczenie tabel na stronie o rezerwacjach » Dołączanie stylów do strony o rezerwacjach » Podsumowanie lekcji » Inne projekty Lekcja 6. Użycie obrazków » Dzielenie obrazka na części » Sprawdzanie jakości obrazka » Zmiana wymiarów obrazka 129 132 135 138 140 142 142 144 146 149 151 6 HTML. Kurs webmastera Część V Struktura witryny Lekcja 7. Tworzenie ramek i łączy 168 » Korzystanie z ramek » Tworzenie strony z ramkami » Podział okna przeglądarki na ramki » Ustalanie atrybutów ramek i ich zawartości » Nowe strony witryny Sizzle 170 171 172 174 175 » Nowe elementy w tabeli nawigacyjnej 177 » Wiązanie stron w ramkach » Łącza do konkretnych miejsc na stronie » Podsumowanie lekcji » Inne projekty 178 181 182 182 Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie 184 » Projektowanie nawigacji po witrynie 186 » Dodanie hiperłączy ze strony głównej » Tworzenie łączy między stronami » Przygotowanie mapy witryny » Wiązanie hiperłączy mapy witryny » Dostęp do mapy witryny z ramek » Wykorzystanie obrazków jako hiperłączy » Logo linii lotniczych jako hiperłącza » Podsumowanie lekcji » Inne projekty 187 189 191 193 195 196 198 199 199 Spis treści » Określanie współrzędnych na stronie na potrzeby mapy obrazkowej 250 » Użycie mapy obrazkowej do nawigacji 251 » Treści generowane dynamicznie za pomocą JavaScriptu » Zmiana komunikatu w pasku stanu przeglądarki » Automatyczne pokazywanie daty » Podsumowanie lekcji 253 255 257 259 259 Część VI Uatrakcyjnianie witryny Lekcja 9. Użycie stylów do tekstu i do opisu położenia » Zapis nagłówków i stylów tekstu » Stosowanie stylów nagłówków » Wykańczanie stylów nagłówków » Użycie na stronach list 202 204 206 208 210 » Tworzenie specjalnego stylu akapitu 212 » Inne projekty » Użycie stylów do rozmieszczania treści na stronie » Pozycjonowanie obrazka na stronie » Podsumowanie lekcji » Inne projekty Lekcja 10. Dołączanie stylów i elementów nawigacyjnych » Pseudoklasy i pseudoelementy » Tworzenie stylów hiperłączy witryny » Stosowanie zwielokrotnionych obrazków w tabeli nawigacyjnej » Style komórek tabeli nawigacyjnej » Kolorowanie i pozycjonowanie komórek w tabeli nawigacyjnej » Tworzenie stylów hiperłączy ramki nawigacyjnej » Użycie stylu z inicjałem » Podsumowanie lekcji » Inne projekty 215 217 219 219 222 224 227 229 230 231 234 236 238 238 Część VII Zaawansowane techniki na naszej witrynie Lekcja 12. Użycie JavaScriptu 262 » Dodanie ostatecznych wersji stylów do strony logo 264 » Ostateczne poprawki w zestawie ramek witryny Sizzle 267 » Tworzenie stylów do stron pokazu slajdów » Stosowanie stylów i łączy na stronach pokazu slajdów » Jeszcze o zmiennych i funkcjach » Skrypty nawigacyjne i przyciski z obrazkami » Tworzenie pokazu slajdów Sizzle » Podsumowanie lekcji » Inne projekty Lekcja 13. Dołączanie do witryny formularza » Wyświetlanie użytkownikowi komunikatów » Zarządzanie otwartymi oknami w JavaScripcie » Kontrolowanie wielkości okna w JavaScripcie » Definiowanie formularza 268 270 271 273 276 280 280 282 284 286 288 291 Lekcja 11. Dodanie do witryny » Tworzenie najprostszego formularza 292 nowych stron i obiektów 242 » Użycie atrybutów formularza » Dodanie do witryny pliku PDF » Włączenie filmu w technologii Flash » Tworzenie map obrazkowych 244 247 249 » Sprawdzanie poprawności danych » Podsumowanie lekcji » Inne projekty 294 298 301 301 7 Spis treści Część VIII Niech nas zobaczą Lekcja 14. Dostępność gwarantowana » Dostępność: wytyczne i standardy » Tworzenie stron bez ramek » Tabele nawigacyjne do stron bez ramek » Cała strona jako obiekt » Poprawki na głównych stronach bezramkowych » Kończymy pracę nad stronami bez ramek » Przeglądamy strony witryny Sizzle » Testowanie wyglądu stron przy zmienionych ustawieniach » Podsumowanie lekcji » Inne projekty Lekcja 15. Sprawdzanie naszej witryny » Rozdzielczość ekranu » Testowanie witryny 304 306 308 311 313 314 316 319 322 325 325 328 330 przy różnych ustawieniach ekranu 331 » Zaczynamy ostatnie testy witryny Sizzle » Kończymy przegląd witryny » Ostatnie poprawki w treści i układzie » Podsumowanie lekcji » Inne projekty Dodatki Zawartość płyty CD-ROM Skorowidz 334 337 340 343 343 347 353 8 HTML. Kurs webmastera Analiza Projektowanie nawigacji po witrynie Najlepszy sposób zapewnienia, że nasi goście zapoznają się ze wszystkim, co nasza witryna ma do zaoferowania, to udostępnienie różnych metod nawigacji po stronach. Jak na razie na witrynie umieściliśmy ramkę nawigacyjną — dogodną metodę nawigacji wykorzystującą tekst lub hiperłącza obrazkowe. Ramka nawigacyjna zawiera zestawienie najważniejszych elementów witryny i udostępnia je po kliknięciu odpowiedniego tekstu. Hiperłącza są też intensywnie używane bezpośrednio na stronach witryny. Kiedy użytkownik czyta strony naszej witryny, udostępnienie mu łączy do poszczególnych tematów jest dobrym sposobem uprzyjemnienia i ułatwienia lektury. Innym typowym elementem nawigacyjnym jest mapa witryny. Mapa taka to pewnego rodzaju szkic witryny pokazujący jej strukturę oraz prezentujący hierarchię informacji tej witryny. Witryna Sizzle jest prosta, gdyż ma tylko dwa poziomy gałęzi, ale często witryny mają bardzo dużo takich poziomów. Ba, czasem zdaje się, że poziomom tym nie ma końca! Mapa witryny może zawierać najbardziej elementarne informacje o stronach, może też być jedynie spisem łączy tekstowych. Witryny mogą zawierać menu kontrolowane przez programy JavaScript otwierające podmenu i osobne okna lub ramki. Inne przydatne elementy nawigacyjne to przyciski i menu. W lekcji 13. do stron pokazu slajdów dodamy przyciski, które za pośrednictwem JavaScriptu będą przesuwały slajdy lub zamykały pokaz. Inną metodą nawigacji jest mapa obrazkowa: specjalnie zakodowany obrazek, który pozwala realizować pewne funkcje podobnie jak JavaScript bez konieczności programowania. Na rysunku pokazano zestaw przycisków nawigacyjnych. Przyciski mogą być używane jako samodzielne elementy nawigacyjne; oprogramowuje się je w tym celu JavaScriptem. Można je też włączać w obrazki i używać w połączeniu z mapami obrazkowymi. Z punktu widzenia użytkownika zawsze zachowują się one tak samo. Mapę obrazkową na potrzeby naszej witryny stworzymy w następnej lekcji. Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Przewodnik Dodawanie hiperłączy ze strony głównej Kiedy nasza witryna jest ładowana do przeglądarki Internet Explorer, w głównej ramce pokazywana jest strona main.html stanowiąca krótkie wprowadzenie o ośrodkach Sizzle. Czytelnicy mogą przechodzić do stron poszczególnych ośrodków bezpośrednio z tej strony. W tym przewodniku dodamy do strony main.html tabelę i łącza tekstowe, które umożliwią takie przechodzenie. Otwieramy Notatnik, a w nim plik main.html. Przechodzimy do wiersza 40., wciskamy Enter, dodając pusty wiersz. Nowy kod będziemy dopisywać poczynając właśnie od 40. wiersza. OSTRZEŻENIE W poszczególnych krokach przewodnika odwołujemy się do numerów wierszy. Numery wierszy u Czytelnika mogą być nieco inne niż pokazane na zrzutach ekranów czy podawane w opisie. Numerów tych należy używać jako punktów odniesienia, ale trzeba też uważnie sprawdzać zawartość danego wiersza, aby poprawiać odpowiedni kod lub dopisywać go we właściwym miejscu. W wierszu 40. piszemy DT . Po tabeli wstawiamy koniec wiersza, aby optycznie tabele były od siebie oddzielone. W wierszach od 41. do 48. piszemy: VCDNGENCUUDQQMKPIYKFVJDQTFGT EGNNRCFFKPI VT VF 2QPCLPCUGQħTQFMKVF VF 5+ . 95 *¦ VF VF 5+ .  # *¦ VF VF 5+ . 21Đ7 0+ VF VT VCDNG Na stronę wstawiana jest jednowierszowa, czterokolumnowa tabela. Używamy w niej tej samej klasy stylu, którą przygotowaliśmy do tabel ze strony booking.html. Styl ten powoduje wyświetlenie zielonego górnego obramowania tabeli. Pozostałe atrybuty są takie same, jak w przypadku pierwszej tabeli ze strony main.html. Zapisujemy plik i oglądamy go w przeglądarce Internet Explorer. Zwróćmy uwagę na efekt zastosowania stylu do tabeli oraz na to, jak kolorowe obramowanie jest oddzielone od większej tabeli. Ukrywamy okno przeglądarki. 187 Wiersze od 44. do 46. modyfikujemy następująco: VF CJTGHUK\NGAYUEJQFJVON VCTIGVOCKP 5+ . 95 *¦ C VF VF CJTGHUK\NGAYGUVJVON VCTIGVOCKP 5+ .  # *¦ C VF VF CJTGHUK\NGAUQWVJJVON VCTIGVOCKP 5+ . 21Đ7 0+ C VF Do nazwy każdego ośrodka dodajemy hiperłącze. Wszystkie te łącza odwołują się do ramki głównej z naszego zestawu. Wybieramy z menu Plik/Zapisz i zapisujemy plik. Uruchamiamy przeglądarkę Internet Explorer, otwieramy w niej plik index.html. Ładowany jest zestaw ramek naszej witryny. Na dole głównej ramki klikamy nowe łącza, które przed chwilą dodaliśmy. Ładowane są strony poszczególnych ośrodków. Klikamy łącze O NAS w ramce nawigacyjnej, aby wrócić na stronę main.html. Przewijamy stronę w dół i sprawdzamy następne hiperłącze. UWAGA Kiedy przesuwamy kursor nad hiperłączem, jego kształt zmienia się na dłoń, a w pasku stanu pojawia się adres wskazywany przez to hiperłącze. Sprawdzamy wszystkie trzy łącza. Jeśli któreś z nich nie działa tak, jak to opisano w tym przewodniku, trzeba sprawdzić, czy w kod dodany w kroku 6. nie wkradły się jakieś błędy. Wyłączamy przeglądarkę. Do naszej strony dodaliśmy niewielką tabelę z przypisanym stylem. Dodaliśmy i sprawdziliśmy łącza wewnętrzne wskazujące strony poszczególnych ośrodków. Część V Struktura witryny 188 HTML. Kurs webmastera Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Przewodnik Tworzenie łączy między stronami Kiedy początkowo tworzyliśmy strony trzech naszych ośrodków, na dole strony dodaliśmy tekst i poziomą kreskę. W tym przewodniku, wykorzystując ten tekst, stworzymy hiperłącza do trzech stron. Po sprawdzeniu łączy na pierwszej stronie zamiast sprawdzać strony jedną po drugiej, postąpimy tak, jak zwykle postępuje się przy tworzeniu witryn: na poszczególnych stronach umieścimy hiperłącza i sprawdzimy je. Otwieramy Notatnik, a w nim otwieramy plik sizzle_east.html. Najpierw dodamy łącza do strony tego właśnie ośrodka. Przechodzimy do wiersza 36., wiersz ten modyfikujemy następująco: R CRTCUCO[PCC JTGHUUJVONVCTIGVDNCPM RQMCUNCLFÎY C R . Do wyrażenia pokaz slajdów dodaliśmy hiperłącze. Kiedy użytkownik kliknie to wyrażenie, w nowym oknie, poza ramkami, otworzy się pierwsza strona pokazu slajdów. Przechodzimy do wiersza 38., po pierwszym zdaniu dopisujemy CJTGHDQQMKPIJVONVCTIGV OCKP 4GGTYCELG676#,C . Tym razem hiperłącze dodaliśmy do wyrażenia Rezerwacje TUTAJ — kiedy użytkownik je kliknie, strona o rezerwacjach otworzy się w ramce głównej. Wybieramy z menu Plik/Zapisz, zapisując plik na dysku. Otwieramy przeglądarkę Internet Explorer, otwieramy w niej stronę sizzle_east.html. Klikamy łącze pokazu slajdów na dole strony. Otwiera się nowe okno ze stroną ss1.html. Zamykamy to okno. Klikamy łącze rezerwacji na dole strony. Plik booking.html otwiera się w nowym oknie — zamykamy je. Jeśli któreś z tych łączy nie zadziała, sprawdzamy kod dopisany w krokach 2. i 3. Zamykamy okno Internet Explorera. Sprawdziliśmy już łącza na naszej stronie. W Notatniku kopiujemy ze strony sizzle_east.html wiersze od 36. do 38. do schowka, czyli kopiujemy łącza pokazu slajdów i strony z rezerwacjami. Łącza te wkleimy do stron pozostałych ośrodków. Z menu wybieramy Plik/Otwórz, wybieramy stronę sizzle_west.html. Proszeni o zapisanie strony sizzle_east.html klikamy Tak. Wybieramy tekst z wierszy od 35. do 37. Tekst ten to dwa fragmenty tekstu i poziome odkreślenie. UWAGA Na stronie sizzle_east.html wskazaliśmy, że strona booking.html ma być otwierana w ramce głównej naszego zestawu ramek. Jednak jako że stronę sizzle_east.html otworzyliśmy poza tym zestawem, strona ta nie była kontrolowana przez te ramki i dlatego otworzone zostało nowe okno. W dalszej części tego przewodnika przetestujemy nasze łącza w ramkach. 189 Część V Struktura witryny UWAGA Zamiast kopiować i wklejać całe wiersze, można też dodać hiperłącza ręcznie. Zastąpienie tekstu gotowymi łączami jest prostsze i chroni nas przed błędami. 190 HTML. Kurs webmastera Skopiowany wcześniej tekst wklejamy w miejsce zaznaczonych wierszy. Zaznaczone wiersze są usuwane, a w ich miejsce pojawiają się wiersze z hiperłączami. Kroki od 9. do 11. powtarzamy na stronie sizzle_south.html. Zapisujemy plik sizzle_south.html. Otwieramy przeglądarkę Internet Explorer, otwieramy w niej plik index.html. Otwiera się zestaw ramek naszej witryny i do ramek ładowane są początkowe ramki. Przewijamy stronę main.html w dół. Na dole strony klikamy łącze ośrodka Sizzle Wschód. Strona tego ośrodka ładowana jest do ramki głównej. Korzystając z pasków przewijania, przesuwamy się na dół strony, do łączy na samym dole. Sprawdzamy teraz działanie łączy w ramkach. Otwieramy hiperłącze pokazu slajdów. Strona ss1.html otwiera się w nowym oknie; zamykamy to okno. Na dole strony klikamy hiperłącze Rezerwacje TUTAJ. W ramce głównej otwiera się strona booking.html. WSKAZÓWKA Wszystkie hiperłącza powinny działać tak, jak to tu opisujemy. Jeśli tak nie jest, trzeba sprawdzić kod wstawiony w wiersze od 36. do 38. Klikamy dwukrotnie przycisk Wstecz, aby wrócić na stronę main.html. Kiedy przesuwamy wskaźnik myszy nad przyciskiem Wstecz, tytuł strony pokazuje się w polu tekstowym obok tego przycisku. UWAGA Prawidłowo zaprojektowana witryna nie powinna opierać swojego działania na przyciskach nawigacyjnych przeglądarki, takich jak właśnie przycisk Wstecz. W dalszym ciągu nauki stworzymy mapę obrazkową witryny, która powiąże trzy strony poszczególnych ośrodków. Sprawdzamy pozostałe dwa łącza na stronach poszczególnych ośrodków. Pokaz slajdów otwiera się we własnym oknie, informacja o rezerwacjach otwiera się w ramce. Wyłączamy przeglądarkę Internet Explorer. Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Przewodnik Przygotowanie mapy witryny Jednym ze sposobów ułatwienia użytkownikom zorientowania się, gdzie są w danej chwili, jest udostępnienie wizualnej struktury treści. Mapy witryn są jednym z najstarszych „wynalazków” w Sieci. Zwykle są one używane na bardzo obszernych witrynach. Wprawdzie witryna Sizzle nie jest zbyt skomplikowana, ale i tak mapa będzie bardzo przydatna. W tym przewodniku przygotujemy taką mapę i wstawimy na nią tekst z dostarczonego pliku. Na dwóch innych stronach dodamy znaczniki zakładek, aby możliwe było pełne używanie łączy naszej mapy. W Notatniku otwieramy plik sitemap.txt. Plik ten znajduje się w folderze Storage. Wybieramy tekst z tego pliku i kopiujemy go do schowka. Tekstu tego użyjemy na stronie z mapą witryny. UWAGA Do tekstu tego dodano puste wiersze, aby rozgraniczyć grupy akapitów. Te puste wiersze ułatwiają podzielenie strony na części. Wybieramy z menu Plik/Otwórz, wybieramy plik basic.html. Plik ten także znajduje się w folderze Storage. Przechodzimy do wiersza 11., zaznaczamy w nim tymczasowo wstawiony tekst. Wciskamy Delete. Tekst ten zastąpimy treścią pliku sitemap.txt. Wybieramy z menu Edycja/Wstaw. Tekst skopiowany z pliku sitemap.txt jest wklejany na stronę. Upewniamy się, czy znacznik końcowy DQF[ znajduje się za wklejonym tekstem. Przechodzimy do wiersza 6. i tymczasowy tytuł strony, między znacznikami VKVNG , zastępujemy następującym: /CRCYKVT[P[5K\NG. Teraz nasza strona ma tytuł. Zapisujemy plik w folderze Sizzle jako sitemap.html. Mamy gotową następną stronę naszej witryny. Otwieramy plik fine_print.html z foldera witryny Sizzle. Na stronie tej dodamy dwie zakładki. UWAGA Zauważmy, że wiersze tekstu używane jako hiperłącza nie są jeszcze identyfikowane. W dalszej części tego przewodnika dodamy do nich zakładki. UWAGA Jeśli przejrzymy tekst łączy ze strony sitemap.html, okaże się, że znajdują się tam trzy odniesienia do zawartości strony fine_print.html. Pierwsze z nich to ubezpieczenia, które zaczynają się na górze strony, więc nie potrzebują zakładki. 191 Część V Struktura witryny Przechodzimy do wiersza 41., wciskamy Enter, dodając nowy wiersz. Przed tytułem akapitu poświęconego szczepieniom znajduje się pusty wiersz. Dodajemy drugi pusty wiersz, aby na stronie zachować optyczny podział na części. W wierszu 42. piszemy: CPCOGXCEEKPCVKQPU KFXCEEKPCVKQPU C . W ten sposób dodaliśmy nazwaną zakładkę na początku informacji o szczepieniach. Zakładki tej użyjemy w odnośniku na stronie sitemap.html. Przechodzimy do wiersza 50., wciskamy Enter, dodając kolejny pusty wiersz. Tytuł informacji wizowych też zaczyna się od pustego wiersza; podobnie jak poprzednio dodajemy pusty wiersz w celu zachowania optycznego odstępu. W wierszu 51. piszemy: CPCOGXKUCU KFXKUCU C . Dodaliśmy kolejną zakładkę, która wyznacza początek informacji wizowych. Ta zakładka także zostanie użyta jako łącze na stronie sitemap.html. Zapisujemy plik fine_print.html. Do strony tej dodaliśmy dwie zakładki. Zakładki te będą użyte w utworzonym w tym przewodniku pliku sitemap.html. 192 HTML. Kurs webmastera Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Przewodnik Wiązanie hiperłączy mapy witryny W poprzednim przewodniku stworzyliśmy stronę z mapą witryny, dodaliśmy zakładki do innych stron witryny. Teraz mamy już wszystkie łącza. W tym przewodniku przygotujemy zestaw hiperłączy strony sitemap.html. W przypadku każdego odwołania łącze jest tworzone na podstawie ważnego zdania z tekstu lub wyrażenia. Teraz trzeba jeszcze uważnie dodać znaczniki. Wszystkie znaczniki mają między innymi atrybut VCTIGV. Gdybyśmy nie podali tego atrybutu, strony docelowe byłyby ładowane w miejsce strony sitemap.html. Tekst mapy jest podzielony na dwie części i analogicznie na dwie części podzielono kroki tego przewodnika. W Notatniku otwieramy plik sitemap.html. Plik ten znajduje się w folderze witryny Sizzle. Przechodzimy do wiersza 14. Wiersze od 14. do 24. zawierają treść pierwszej grupy łączy mapy — są to informacje o ośrodkach Sizzle. Modyfikujemy pierwszą część tekstu zgodnie tabelą 8.1. Każdy wiersz wymaga znaczników początkowego i końcowego C oraz atrybutów. UWAGA W tabeli podano numery wierszy, tekst oryginalny i tekst, jaki powinien w pliku znaleźć się ostatecznie. Tekst trzech stron poszczególnych ośrodków jest zawinięty, aby poprawić czytelność kodu. Tabela 8.1. Znaczniki hiperłączy w pierwszej części strony mapy witryny Wiersz Tekst pierwotny Ostateczna postać 14 R +PHQTOCELGQIÎNPGR R CJTGHOCKPJVONVCTIGVDNCPM +PHQTOCELG QIÎNPGC R 15 – 16 17 – 18 R 5K\NG9UEJÎFVWVCLCYTGUPQYG PCLQOQħEKR R CJTGHUK\NGAGCUVJVONVCTIGVDNCPM 5K\NG 9UEJÎFC VWVCLCYTGUPQYGPCLQOQħEKR R 5K\NG CEJÎFFNCRCTMVÎTGEJEæ WEKGEQFYU[UVMKGIQR R CJTGHUK\NGAYGUVJVONVCTIGVDNCPM 5K\NG CEJÎFC FNCRCTMVÎTGEJEæWEKGEQF YU[UVMKGIQR 19 – 20 R 5K\NG2QđWFPKGFNCOKđQħPKMÎY URQTVWR R CJTGHUK\NGAUQWVJJVONVCTIGVDNCPM 5K\NG 2QđWFPKGC FNCOKđQħPKMÎYURQTVWR 21 22 23 24 R 1DGLT[LPCUHKNOR R 1PCUYUMTÎEKGR R 1FYKGFļPCUUMNGRR R 2QMCUNCLFÎYPCU[EJQħTQFMÎYR R 1DGLT[LPCUCJTGHXKFGQJVON VCTIGVDNCPM HKNOC R R 1PCUCJTGHEQPVCEVJVONVCTIGVDNCPM YUMTÎEKGC R R 1FYKGFļPCUCJTGHUVQTGJVON VCTIGVDNCPM UMNGRC R R CJTGHUUJVONVCTIGVDNCPM 2QMC UNCLFÎYC PCU[EJQħTQFMÎYR 193 Część V Struktura witryny Przechodzimy do wiersza 26. Wiersze od 26. do 32. zawierają drugą część treści hiperłączy naszej mapy; te łącza dotyczą przygotowania się do podróży. Modyfikujemy drugą część tekstu zgodnie z tabelą 8.2. Każdy wiersz wymaga znaczników początkowego i końcowego C oraz atrybutów. Zapisujemy stronę sitemap.html. Dodaliśmy do naszej mapy witryny hiperłącza do stron i do zakładek na stronach. Notatnik zostawiamy otwarty, gdyż będzie nam potrzebny w następnym przewodniku. Uruchamiamy przeglądarkę Internet Explorer. Otwieramy stronę sitemap.html. Sprawdzamy działanie hiperłączy. Klikamy kolejne hiperłącza. Pierwsze z nich powoduje otwarcie nowego okna przeglądarki, wszystkie pozostałe otwierają strony już w tym oknie. WSKAZÓWKA Trzeba przetestować wszystkie hiperłącza. Konieczne jest sprawdzenie, czy wszystkie strony ładują się prawidłowo do drugiego okna przeglądarki. Sprawdzamy, czy łącza do zakładek pokazują odpowiedni fragment strony. Jeśli któreś łącza nie będą działały prawidłowo, sprawdzamy kod dodany w krokach 3. i 5. Zamykamy oba okna przeglądarki. Tabela 8.2. Znaczniki hiperłączy w pierwszej części strony mapy witryny Wiersz Tekst pierwotny Ostateczna postać 27 28 29 30 31 R 4GGTYCELGR R CJTGHDQQMKPIJVONVCTIGVDNCPM 4GGTYCELGC R R .KPKGNQVPKEGR R CJTGHDQQMKPIJVONCKTNKPGUVCTIGVDNCPM .KPKGNQVPKEGC R R 7DGRKGEGPKCR R CJTGHHKPGARTKPVJVONVCTIGVDNCPM 7DGRKGEGPKCC R R 5EGRKGPKCR R CJTGHHKPGARTKPVJVONXCEEKPCVKQPUVCTIGVDNCPM 5EGRKGPKC C R R 9K[R R CJTGHHKPGARTKPVJVONXKUCUVCTIGVDNCPM 9K[C R 194 HTML. Kurs webmastera Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Przewodnik Dostęp do mapy witryny z ramek Utworzyliśmy mapę witryny, przygotowaliśmy łącza między mapą a poszczególnymi stronami witryny. Potrzebna jest nam metoda dostępu do mapy witryny z ramek. W tym przewodniku dodamy stosowne hiperłącze do tabeli nawigacyjnej. W Notatniku otwieramy stronę nav_left.html. W ramce nawigacyjnej dodamy hiperłącze do mapy witryny. Przechodzimy do wiersza 13., wartość atrybutu TQYURCP zmieniamy z  na . Dodajemy do tabeli jeden wiersz, więc musimy powiększyć wysokość pierwszej kolumny. Przechodzimy do wiersza 41., wciskamy Enter, dodając pusty wiersz. Umieścimy tutaj kod opisujący dodatkowy wiersz tabeli. W wierszach od 41. do 43. piszemy: VT VF CJTGHUKVGOCRJVONVCTIGVDNCPM /CRC YKVT[P[C VF VT Jest to nowy wiersz tabeli. Napis Mapa witryny jest powiązany ze stroną sitemap.html. Zapisujemy stronę nav_left.html. Zostawiamy Notatnik otwarty, gdyż będzie nam potrzebny w następnym przewodniku. Utworzyliśmy zatem hiperłącze z zestawu ramek do mapy witryny. Uruchamiamy przeglądarkę Internet Explorer, otwieramy w niej stronę index.html. Ładuje się zestaw ramek. Klikamy łącze Mapa witryny znajdujące się na dole tabeli nawigacyjnej. UWAGA Łącza zewnętrzne z naszej witryny należy tak zapisywać, aby powodowały otwieranie osobnych okien. Dzięki temu cudza witryna nie pojawi się wewnątrz naszej. Jeśli nie zdefiniujemy atrybutu VCTIGV, przeglądarka załaduje wskazywaną stronę do zestawu ramek Sizzle. Różnica między mapą witryny a witryną łatwo dostępną Stworzyliśmy i powiązaliśmy z witryną jej mapę. Wprawdzie mapa witryny pozwala użytkownikowi wyjść poza ramki, jest to co innego niż witryna bez ramek. Na mapie użytkownik może oglądać dowolną stronę, ale musi używać dwóch okien przeglądarki i w celu wybrania kolejnego hiperłącza musi wracać na stronę sitemap.html. W przypadku witryny bez ramek wszystkie elementy nawigacyjne znajdują się bezpośrednio na stronach, dzięki czemu użytkownik może oglądać witrynę w jednym oknie przeglądarki. Strony sitemap.html używamy jako podstawy do pewnej pracy w lekcji 14.; celem naszym będzie wtedy zapewnienie możliwości poruszania się po witrynie bez ramek. 195 Część V Struktura witryny Przewodnik Wykorzystanie obrazków jako hiperłączy Mapa naszej witryny jest gotowa i dostępna z ramki nawigacyjnej. Dodaliśmy do naszej strony mnóstwo hiperłączy tekstowych. Strona booking.html zawiera obrazki z logo różnych linii lotniczych. W tym przewodniku powiążemy łącza z tych logo z witrynami poszczególnych towarzystw lotniczych. Nasze towarzystwa są fikcyjne, podobnie jak ich logo i adresy internetowe. W Notatniku otwieramy plik booking.html. Do strony tej dodamy hiperłącza. Przechodzimy do wiersza 41. W wierszach 41. i 42. znajdują się znaczniki obrazka logo linii Global Airlines. Obrazek ten umieszczony jest w tabeli. Po znaczniku VF dopisujemy: C JTGHJVVRYYYINQDCNCKTZEQOVCTIGVDNCPM . Dodajemy znacznik otwierający hiperłącza, nakazujemy otwieranie wskazywanej witryny w osobnym oknie. Musimy podać pełną, czyli bezwzględną, ścieżkę do witryny. Przechodzimy na koniec znacznika z logo linii lotniczych, przed znacznikiem VF , obecnie w wierszu 43., dopisujemy C . Zakończyliśmy wpisywanie hiperłącza. Zapisujemy stronę booking.html. Uruchamiamy przeglądarkę Internet Explorer, otwieramy w niej stronę booking.html. Klikamy logo Global Airlines. Dookoła obrazka logo pojawia się kolorowa obwódka. Wskazana witryna otwiera się w nowym oknie, ale widzimy komunikat o niemożności znalezienia takiej strony — nic nie szkodzi, adres ten nie wskazuje żadnej istniejącej rzeczywiście witryny. WSKAZÓWKA Kiedy przesuwamy kursor myszy nad obrazkiem, jego kształt zmienia się w dłoń, pokazywany jest tekst zastępczy, a w pasku stanu przeglądarki pojawia się adres docelowy hiperłącza. Ukrywamy okno przeglądarki. UWAGA Kiedy dodawaliśmy łącza tekstowe, widzieliśmy niebieski, podkreślony tekst, który po kliknięciu zmieniał kolor na fiolet. Są to domyślne ustawienia przeglądarki. Innym ustawieniem domyślnym przeglądarki jest dodawanie obramowania dookoła hiperłącza w formie obrazka. Ścieżki dokumentów Aż do tej chwili dokumenty naszej witryny wskazywaliśmy, korzystając ze względnych ścieżek dokumentów. W tym wypadku docelowy dokument jest określony przez nazwę pliku i jego typ oraz, jeśli znajduje się w innym folderze, nazwę tego foldera. Aby powiązać dokument spoza witryny, trzeba użyć ścieżki bezwzględnej. Ścieżka bezwzględna zawiera pełny adres URL wskazywanego dokumentu wraz z protokołem, zwykle JVVR. Adresy witryn linii lotniczych podajemy jako ścieżki bezwzględne. UWAGA Hiperłącza można sprawdzać bezpośrednio na odpowiednich stronach, bez używania zestawu ramek. Wskazywane witryny nie są istotne w naszym przewodniku, służą jedynie jako przykłady. 196 HTML. Kurs webmastera W Notatniku na końcu definicji obrazka, w wierszu 43., dopisujemy DQTFGT. Zwróćmy uwagę, aby ten atrybut pojawił się przed znacznikiem końcowym obrazka. Zapisujemy plik booking.html. Do znacznika KOI dodaliśmy kolejny atrybut. Ponownie uruchamiamy przeglądarkę, klikamy Odśwież, aby przeładować stronę. Ładowana jest nowa wersja strony. Klikamy obrazek logo, aby ponownie go przetestować. Witryna linii lotniczych otwiera się w innym oknie przeglądarki, ale tym razem obrazek nie ma już obramowania. Zamykamy przeglądarkę. Zamykamy oba okna przeglądarki. Dodaliśmy i przetestowaliśmy łącze do obrazka, zmodyfikowaliśmy też standardowy znacznik KOI , aby usunąć pojawiające się domyślnie obramowanie. Zostawiamy Notatnik otwarty do następnego przewodnika. Szybsze ładowanie witryny Zamiast ładować nasz zestaw ramek poleceniem Plik/Otwórz, możemy ustawić tę stronę jako jedną z ulubionych. Uruchamiamy przeglądarkę Internet Explorer, ładujemy interesującą nas stronę index.html i z menu wybieramy Ulubione/Dodaj do Ulubionych…. Pojawia się okno dialogowe jak pokazane poniżej, zawierające tytuł naszej strony z ramkami. Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Adresy komputerów Zestaw protokołów, czyli pewnych reguł, nazywany TCP/IP (Transmission Control Protocol/Internet Protocol, Protokół sterowania transmisją/Protokół internetowy) określa, jakie komunikaty są przesyłane między komputerami. TCP odnosi się do procesu przenoszenia danych między komputerami, IP zaś dotyczy informacji przesyłanych w niewielkich porcjach nazywanych pakietami. Każdy komputer ma niepowtarzalny adres IP. Spójrzmy na lewy dolny róg okna przeglądarki, kiedy wejdziemy do Sieci. Często pojawiają się tam ciągi cyfr, takie jak pokazany na rysunku. Są one wyświetlane przed załadowaniem strony. Jest to adres IP strony. Kiedy klikniemy OK, strona zostanie dodana do Ulubionych i teraz możemy wybierać ją z listy ulubionych. Każda witryna ma adres w takiej właśnie postaci, choć zwykle łatwiej jest zapamiętać odpowiednik tego adresu, taki jak google.com. 197 Część V Struktura witryny Przewodnik Logo linii lotniczych jako hiperłącza W poprzednim przewodniku dodaliśmy informacje o łączu do obrazka z logo fikcyjnych linii lotniczych Global Airlines. W tym przewodniku utworzymy łącza dla pozostałych logo ze strony booking.html. Przechodzimy do wiersza 44. strony booking.html. Znajdujemy komórkę zawierającą obrazek logo TD Air. Po znaczniku początkowym VF dopisujemy: CJTGHJVVRYYYVFCKTZEQOVCTIGVDNCPM . Dodaliśmy znacznik początkowy hiperłącza, nakazaliśmy otwierać go w nowym oknie. Przechodzimy na koniec znacznika KOI . Po atrybucie CNV dopisujemy DQTFGT, aby obramowanie obrazka było niewidoczne. Przechodzimy na koniec znacznika obrazka i przed końcowym znacznikiem VF , obecnie w wierszu 46., dopisujemy C , zamykając tym samym hiperłącze. Zapisujemy plik booking.html. Dodaliśmy kolejne hiperłącze w formie obrazka. Przechodzimy do wiersza 52. Wiersz ten zawiera znaczniki początkowe obrazka logo BlueStar Air. Powtarzamy kroki od 2. do 4., tym razem adres URL to JVVRYYYDNWGUVCTKCTZEQO. Dodajemy łącze i ramkę docelową, usuwamy obramowanie obrazka. Przechodzimy do wiersza 55. Ten wiersz zawiera znaczniki początkowe obrazka Seawinds Air. Powtarzamy kroki od 2. do 4., tym razem z adresem URL JVVRYYYUGCYKPFUCKTZEQO. Dodajemy łącze i ramkę docelową, usuwamy obramowanie obrazka. Sprawdzamy w przeglądarce działanie nowych hiperłączy, ukrywamy okno przeglądarki. Zapisujemy plik, zamykamy Notatnik. Na stronie booking.html do obrazków logo linii lotniczych dodaliśmy hiperłącza. Uruchamiamy przeglądarkę, otwieramy w niej stronę index.html. Klikamy w ramce nawigacyjnej LINIE LOTNICZE. W głównej ramce ładuje się strona booking.html i ustawia się od razu na zakładce linii lotniczych. Sprawdzamy działanie pozostałych hiperłączy. Każda witryna Sieci powinna załadować się do tego samego okna przeglądarki. Zamykamy przeglądarkę. Do obrazków logo ze strony booking.html dodaliśmy hiperłącza, przetestowaliśmy je na osobnej stronie oraz w ramkach. WSKAZÓWKA Upewnijmy się, czy atrybut DQTFGT znajduje się przed zamknięciem obrazka,  . UWAGA W pliku booking.html znaczniki opisujące poszczególne obrazki zapisywane są w dwóch kolejnych wierszach. 198 HTML. Kurs webmastera Lekcja 8. Dodatkowe elementy nawigacyjne na witrynie Podsumowanie lekcji W tej lekcji do naszej witryny dodaliśmy wiele hiperłączy. Dodaliśmy łącza wewnętrzne do stron, umożliwiające użytkownikom przeglądanie witryny i pobieranie interesujących ich danych bez konieczności korzystania z menu nawigacyjnego. Obrazek na początku tej sesji pokazuje dolną część głównej strony witryny. Ostatni obrazek pokazuje tę samą stronę, ale już z nowymi hiperłączami wewnętrznymi. Nauczyliśmy się tworzyć mapę witryny i wiązać ją ze stronami. Powiązaliśmy też obrazki ze stronami, korzystając po raz pierwszy z adresów bezwzględnych. Łącza są powiązane z obrazkami logo towarzystw lotniczych, po kliknięciu powodują otwieranie witryn tych towarzystw. Są tak ustawione, aby otwierały się w nowym oknie przeglądarki, poza naszą witryną. Odpowiedzi na podane niżej pytania pomogą utrwalić sobie wiedzę z tej lekcji. Wszystkie znaleźć można w przewodnikach wskazanych w nawiasach. Czy na witrynie warto stosować więcej niż jedną metodę nawigacji? Uzasadnij odpowiedź. (Analiza. Projektowanie nawigacji po witrynie) Do czego przydaje się mapa witryny? (Analiza. Projektowanie nawigacji po witrynie) Gdzie w oknie przeglądarki można zobaczyć, co się kryje „na drugim końcu” hiperłącza? (Przewodnik. Dodajemy hiperłącza ze strony głównej) Czy można oglądać strony poza ramkami witryny? Kiedy się to robi? (Przewodnik. Tworzenie łączy między stronami) Czy podczas nawigacji po witrynie można polegać na użyciu przycisku Wstecz przeglądarki? (Przewodnik. Tworzenie łączy między stronami) Do czego służy mapa witryny? Do czego może się przydać użytkownikowi? (Przewodnik. Przygotowanie mapy witryny) Jeśli powiążemy hiperłączem informacje na stronie, to czy trzeba dodawać zakładkę na stronie docelowej, jeśli interesujące nas informacje znajdują się na górze strony? (Przewodnik. Przygotowanie mapy witryny) Kiedy trzeba dodawać atrybut VCTIGV w przypadku korzystania ze znaczników C ? (Przewodnik. Wiązanie hiperłączy z mapy witryny) Jak w atrybucie JTGH wskazuje się zakładkę? (Przewodnik. Wiązanie hiperłączy z mapy witryny) Czy podczas dodawania do tabeli nowych wierszy trzeba zmieniać wartości atrybutu TQYURCP? (Przewodnik. Dostęp do mapy witryny z ramek) Czy Internet Explorer używa do hiperłączy stylów domyślnych? (Przewodnik. Wykorzystanie obrazków jako hiperłączy) Jak można usunąć obramowanie wstawiane domyślnie przez przeglądarkę wokół łącza w formie obrazka? (Przewodnik. Wykorzystanie obrazków jako hiperłączy) Co to jest ścieżka bezwzględna? Jak się jej używa? (Przewodnik. Wykorzystanie obrazków jako hiperłączy) Co jest wyświetlane przez przeglądarkę, kiedy przesuwamy wskaźnik myszy nad obrazkiem będącym linkiem? (Przewodnik. Logo linii lotniczych jako hiperłącza) Inne projekty Użyj usługi W3C Validator do sprawdzenia stron booking.html oraz sitemap.html. Upiększ zawartość strony sitemap.html, korzystając ze stylów przygotowanych we wcześniejszych lekcjach. Oto kilka pomysłów: użyj obrazków muszli, umieść je w tekście za pomocą stylów. Dodaj tabelę i sformatuj ją za pomocą stylów. Nie modyfikuj tła, gdyż w następnej lekcji stworzymy styl opisujący tło strony. 199
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML. Kurs webmastera
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: