Spis treści W s tę p ................................................................................................................. 9 Uwagi techniczne ...........................................................................................11 Rozdział 1.
Podstawowe informacje................................................................................ 13 Czym jest internet? .................................................................................................................. 13 Czym jest strona WWW, a czym witryna?............................................................................14 Dlaczego warto prowadzić własną stronę WWW? .............................................................. 15 Oprogramowanie potrzebne przy tworzeniu stron WWW a dołączona płyta CD ............17 Edytory tekstu ....................................................................................................................18 Edytory grafiki ...................................................................................................................19 Programy do przygotowywania grafiki sieciowej..........................................................19 Etykieta i prawo autorskie ...................................................................................................... 20 Wybór usługodawcy, u którego zamieścimy stronę W W W ................................................21 Własna domena........................................................................................................................ 23
Rozdział 2. Język XHTML i HTML sprawcą całego zamieszania ................................25 Znacznik i jego konstrukcja.................................................................................................... 28 Podstawowe różnice pomiędzy HTML i XHTML...............................................................29 Zasada 1. Nigdy nie krzyżuj znaczników....................................................................... 29 Zasada 2. Zawsze zamykaj wszystkie znaczniki............................................................30 Zasada 3. Wpisując znaczniki i atrybuty, zawsze używaj małych liter ......................30 Zasada 4. Używaj cudzysłowów dla wszystkich atrybutów ........................................ 30 Zasada 5. Przypisuj wartości dla pustych atrybutów ....................................................31 Zasada 6. Uważaj ze znakami specjalnymi w skryptach ............................................. 31 Struktura dokumentu ...............................................................................................................31 Określamy zgodność ze specyfikacją..............................................................................31 Ramy dokumentu XHTML ..............................................................................................32 Nagłówek strony ...............................................................................................................33 Ciało dokumentu ...............................................................................................................39 Komentarze ....................................................................................................................... 40 Tworzenie szkieletu strony za pomocą edytora kED ....................................................40 Tekst ......................................................................................................................................... 42 Nagłówki ............................................................................................................................42 Akapity...............................................................................................................................43 Cytaty .................................................................................................................................44 Indeks górny i dolny......................................................................................................... 46 Łamanie wierszy ...............................................................................................................46 Wyróżnianie tekstu............................................... 47
4
Tworzenie stron WWW w praktyce
Twarda spacja...................................................................................................................47 Znacznik D IV ...................................................................................................................48 Formatowanie tekstu za pomocą edytora kE D ............................................................. 48 L isty ......................................................................................................................................... 50 Lista wypunktowana .......................................................................................................50 Lista numerowana ........................................................................................................... 50 Lista definicji....................................................................................................................51 Listy zagnieżdżone.......................................................................................................... 51 Tworzenie list za pomocą edytora kED ........................................................................52 Grafika na stronie WWW ......................................................................................................53 Osadzanie grafiki za pomocą edytora kED ...................................................................56 Hiperłącza................................................................................................................................58 Hiperłącza tekstowe ........................................................................................................59 Hiperłącza graficzne........................................................................................................ 61 Mapy odsyłaczy................................................................................................................62 Kotwice ............................................................................................................................ 65 Adresy względne i bezwzględne ....................................................................................66 Tworzenie hiperłączy za pomocą edytora kED ............................................................ 67 Tabele ...................................................................................................................................... 69 Proste tabele ..................................................................................................................... 72 Wymiarowanie tabel ....................................................................................................... 73 Tabele niesymetryczne.................................................................................................... 76 Zagnieżdżanie 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 Przesyłanie treści formularza ......................................................................................... 87 Ramki....................................................................................................................................... 88
Rozdział 3.
Grafika sieciowa ........................................................................................... 93 Format...................................................................................................................................... 95 GIF .................................................................................................................................... 95 JPG ...................................................................................................................................110 P N G ..................................................................................................................................113 Inne metody redukcji rozmiaru zdjęć i grafiki ............................................................113 Pozostałe formaty publikacji grafiki na stronie WWW ........................................... 116 Wygładzanie krawędzi — antyaliasing........................................................................117 Tworzenie gotowych rozwiązań na potrzeby stron W W W .............................................. 120 Prostokątne i owalne przyciski......................................................................................120 Przyciski o nieregularnych kształtach ..........................................................................126 Cięcie grafiki na mniejsze elementy ............................................................................129 Mapa odsyłaczy.............................................................................. :.............................. 132
Rozdział 4.
Kaskadowe arkusze stylów .......................................................................133 Wprowadzenie .......................................................................................................................134 Różnice pomiędzy formatowaniem za pomocą XHTML, HTML i C S S ................. 134 Umieszczanie stylów w dokumencie ...........................................................................135 Jednostki miar i nazewnictwo kolorów stosowane w CSS ........................................137 Budowa stylu .................................................................................................................. 142 Dziedziczenie i kaskadowość to klucz do potęgi C S S ............................................... 157
Spis treści
5
Formatowanie wyglądu tekstu.............................................................................................. 160 Wyrównanie tekstu..........................................................................................................160 Pionowe wyrównanie ......................................................................................................161 Wcięcie pierwszego wiersza akapitu............................................................................. 162 Odstępy — wiersze, wyrazy, litery ............................................................................. 162 Dekoracja tekstu .............................................................................................................. 163 Przekształcanie — małe i duże litery ............................................................................164 Kontrola pustej przestrzeni............................................................................................. 165 Wnioski ............................................................................................................................ 166 Formatowanie wyglądu czcionki..........................................................................................166 Rodzaj czcionki ............................................................................................................... 167 Rozmiar ............................................................................................................................ 168 Waga czcionki ................................................................................................................. 170 Styl czcionki.....................................................................................................................171 Wariant czcionki ............................................................................................................. 172 Wnioski ............................................................................................................................ 172 Formatowanie wyglądu list .................................................................................................. 173 Typ listy ............................................................................................................................ 173 Własny punktor graficzny .............................................................................................. 175 Pozycjonowanie listy względem punktora.......................................:........................... 175 Wnioski ............................................................................................................................ 176 Kolor i tło poszczególnych elementów ............................................................................... 176 Kolor................................................................................................................................. 177 Tło .....................................................................................................................................178 Powielanie i zatrzymanie tła .......................................................................................... 179 Pozycjonowanie graficznego tła .....................................................................................181 Wnioski .......................................................................................................................... 183 Marginesy i dopełnienie ........................................................................................................184 Marginesy zewnętrzne.....................................................................................................184 Marginesy wewnętrzne — dopełnienie.......................................................................186 Wnioski ............................................................................................................................ 187 Obramowanie elementów ......................................................................................................189 Styl obramowania............................................................................................................ 190 Szerokość obramowania................................................................................................. 192 Kolor obramowania.........................................................................................................193 Wnioski ............................................................................................................................ 194 Pozycjonowanie elementów ................................................................................................. 196 Określanie pozycji...........................................................................................................198 Wymiarowanie elementów............................................................................................. 198 Pływanie i tamowanie elementów.................................................................................200 Kolejność nakładanych elementów...............................................................................202 Wnioski ............................................................................................................................203 Tworzenie arkusza stylów za pomocą edytora k E D .......................................................... 203
Rozdział 5.
Praktyczny projekt. Moja strona domowa .............................................. 207 Dlaczego jest mi potrzebna strona WWW?........................................................................ 207 Gromadzę materiały ..............................................................................................................209 Struktura witryny...................................................................................................................210 Przygotowuję poszczególne elementy witryny ..................................................................212 Strona główna..................................................................................................................213 Sekcja „Książki” .............................................................................................................228 Sekcja „Artykuły” .......................................................................................................... 235 Sekcja „O mnie” ..............................................................................................................236
6
Tworzenie stron WWW w praktyce
Sekcja „Przyjazne strony” ............................................................................................ 236 Sekcja „Sklep” ................................................................................................................238 Sekcja „Kontakt” ............................................................................................................240 Nazwy plików ....................................................................................................................... 242 Testowanie gotowego projektu........................................................................................... 243 Testy w różnych przeglądarkach..................................................................................243 Testy rozdzielczości ...................................................................................................... 244 Testy zgodności kodu ze specyfikacją ........................................................................ 247 Wnioski.................................................................................................................................. 253
Rozdział 6.
Praktyczny projekt. Strona firm ow a........................................................ 255 Po co i dla kogo ta strona?................................................................................................... 255 Zbieramy materiały...............................................................................................................256 Struktura strony .................................................................................................................... 257 Tworzymy poszczególne podstrony ...................................................................................257 Szablon strony................................................................................................................ 258 Strona głów na.................................................................................................................266 Strona pojedynczego w pisu.......................................................................................... 269 Strona artykułu 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 działa? .........................................................................................................................276 Skąd można pobrać gotowe szablony?...............................................................................281 W nioski.................................................................................................................................. 282
Rozdział 8.
Darmowe usługi dostępne w sieci ...........................................................283 Statystyki ............................................................................................................................... 283 Instalacja darmowej wersji statystyk............................................................................285 Dostępne informacje ..................................................................................................... 288 Licznik................................................................................................................................... 295 Status usług Gadu-Gadu oraz Tlen na stronie W W W ...................................................... 296 Sonda ..................................................................................................................................... 298 Biuletyn informacyjny..........................................................................................................298 Wnioski.................................................................................................................................. 305
Rozdział 9.
Przydatne skrypty, których można użyć na stronie WWW .................. 307 Nowe okno.............................................................................................................................307 . Zamykanie otwartego okna ................................................................................................. 308 Rollover ................................................................................................................................. 308 Drukowanie zawartości strony ............................................................................................308 Zmiana zawartości paska statusu........................................................................................ 309 Dodawanie strony do „Ulubionych” ................................................................................... 309 Strona startowa ..................................................................................................................... 309 Zmiana tła całej komórki tabeli ...........................................................................................310 Wczytywanie arkusza w zależności od używanej przeglądarki ...................................... 311
Spis treści
7
Rozdział 10. Publikacja i utrzymanie strony ..................................................................313 Wybór serwera — hosting.................................................................................................... 313 Zakładanie 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 Prawidłowa indeksacja strony....................................................................................... 331 Zdobywanie pozycji ....................................................................................................... 336 Wnioski................................................................................................................................... 341
Dodatek A ...........................................................................................................................343 Podsumowanie ......................................................................
Wstęp Internet na dobre zagościł w domach wielu Polaków. Dzisiaj nie jest niczym nadzwy czajnym robienie zakupów za jego pośrednictwem, rezerwacja biletów, korzystanie z usług bankowych, oglądanie telewizji i słuchanie radia czy też nawiązywanie połą czeń głosowych i wideo. Globalna sieć stała się czymś tak oczywistym i niezbędnym jak prawo jazdy czy telefon komórkowy. Każdy świadomy członek społeczeństwa może, a w niektórych przypadkach powinien mieć własną stronę WWW. Osoby prywatne dzięki intemetowi m ogą dzielić się swoimi zainteresowaniami, natomiast firmy powinny traktować globalną sieć jako miejsce, w któ rym obowiązkowo powinny się profesjonalnie prezentować i świadczyć za jej pomocą przynajmniej część swoich usług. Projektowanie stron WWW w ciągu ostatnich lat bardzo się zmieniło i ciągle ewoluuje. Kiedyś strony tworzyli naukowcy w celu prezentacji własnych osiągnięć pracowni kom innych uczelni. Ze względu na spore ograniczenia intemetu oraz ubogie możli wości języka HTML publikacje te były mało interesujące od strony wizualnej. Charak teryzowały się dość prostą konstrukcją— bloki tekstu rozdzielano za pomocą poziomych linii. Strony mogły zawierać listy wypunktowane lub numerowane oraz nagłówki. W miarę pojawiania się kolejnych wersji języka HTML i XHTML oraz rozwoju sieci strony wyglądały coraz lepiej. Obecnie witryny to w bardzo wielu przypadkach praw dziwe dzieła sztuki internetowej, tworzone z wykorzystaniem najnowszych rozwiązań, takich jak Ajax, Adobe Flash czy też bazy danych i języki skryptowe działające po stronie serwera. Przygotowanie strony WWW nie jest rzeczą skomplikowaną. Śmiem twierdzić, że stronę WWW może zrobić każdy, kto będzie miał odrobinę chęci. Niestety, strona stronie nierówna. Wielu początkujących adeptów popełnia koszmarne błędy i raczy świat mniej szymi lub większymi potworkami. Dlatego zdecydowałem się odświeżyć niniejszą książkę i przygotować jej drugie wydanie. Książka pozwoli Ci zdobyć solidne podstawy, dzięki którym będziesz mógł tworzyć własne witryny internetowe. Czytając kolejne rozdziały, poznasz najnowszą odsłonę języka XHTML 1 oraz CSS 2, które są niezbędne do tworzenia stron WWW.
10
Tworzenie stron WWW w praktyce
W kolejnych rozdziałach przedstawiam proces tworzenia dwóch kompletnych stron WWW — prywatnej i firmowej. Dowiesz się, jakimi kryteriami należy się kierować przy doborze konta — wirtualnego serwera, niezbędnego do publikacji gotowego pro jektu. Poznasz tajniki przygotowania grafiki na potrzeby intemetu i nauczysz się pra cować z gotowymi, darmowymi szablonami dostępnymi w sieci. Nie nauczę Cię jednak, jak pisać własne skrypty, ponieważ wiedzę tę znajdziesz w innych książkach — uważam, że do przygotowania dobrze wyglądającej strony nie jest potrzebna znajomość PHP, gdyż wszystko, co jest konieczne, możemy znaleźć w sieci. Nauczysz się zatem, w jaki sposób korzystać z dobrodziejstw intemetu. Wydaje mi się, że dzięki temu książka będzie bardziej przydatna dla szerszego grona Czytelników. Jeżeli po jej przeczytaniu wykonasz dobre strony i uznasz, że zawarte tutaj informacje to zbyt mało, by sprostać Twoim już sprecyzowanym wymaganiom, będziesz mógł świadomie sięgnąć po inne, bardziej szczegółowe opracowania dostępne na polskim rynku. Moim założeniem było praktyczne przedstawienie tworzenia stron WWW, dlatego w książce nie ma opisów o charakterze czysto teoretycznym — ich miejsce zajęły konkretne porady i rozwiązana. Uzupełnieniem całości jest płyta CD, na której umieściłem niezbędne narzędzia wy korzystywane przy tworzeniu stron WWW. Dobierając programy, starałem się wybierać narzędzia, które są bezpłatne i można legalnie używać ich w domu. Wiele z progra mów znajdujących się na płycie zostało wykorzystanych i omówionych w niniejszej książce. Jeżeli podczas lektury lub po jej zakończeniu będziesz miał jakieś pytania albo po prostu postanowisz podzielić się uwagami na temat książki, możesz to zrobić za po średnictwem mojej strony WWW lub poczty e-mail. Odpowiednie adresy znajdują się poniżej.
Uwagi techniczne Zwartość płyty CD-ROM Płyta dołączona do tej książki zawiera komplet oprogramowania przydatnego do two rzenia stron WWW. Aplikacje w większości są wersjami darmowymi (freeware), choć znajdują się tam również narzędzia komercyjne (wersje trial). Pamiętaj, że w przypadku każdego programu autor sprecyzował warunki jego używania. Może to być zgoda na używanie programu w celach edukacyjnych lub zupełny brak ograniczeń. Zapoznaj się z warunkami i używaj programu zgodnie z licencją! Pragnę nadmienić, że internet jest pełny przeróżnych darmowych programów, które są odpowiednikami płatnych aplika cji, dlatego tworząc strony WWW, nie musisz pracować „na piratach” .
Uwaga
W książce Darmowe oprogramowanie. Leksykon (http://helion.pl/ksiazki/daropl.htm ) znajdziesz opis kilkuset darmowych programów. Wszystkie aplikacje zostały podzie lone na grupy tematyczne i uzupełnione o opis możliwości oraz informacje o tym, które z komercyjnych programów mogą zastąpić.
Płytę CD podzieliłem na następujące działy: ♦ Oprogramowanie — zbiór przydatnych programów (edytory XHTML, narzędzia graficzne, przeglądarki, serwery WWW i PHP) ♦ Specyfikacje — zbiór specyfikacji XHTML (1.0, 1.1), HTML (4.01) oraz CSS (1,2.1) ♦ Szablony — przykładowe szablony stron WWW ♦ Przykłady — kilka przykładów do zagadnień omawianych w książce
Tworzenie stron WWW w praktyce
12
Oznaczenia stosowane w książce Informacje zawarte w książce są odpowiednio sformatowane, dzięki czemu czytanie całości jest znacznie wygodniejsze. Oczywiście, na początku warto w skrócie przed stawić, jakie formy zapisu przyjąłem na następnych stronach. Jeżeli odwołuję się do nazwy pliku, to tekst będzie miał następującą postać: plik.html. W sytuacji, gdy pragnę zwrócić uwagę na pewne elementy, stosuję pogrubienie. Kolej ną form ą zapisu używ aną w tej książce jest tekst wyróżniony. Będę go używał wtedy, gdy uznam pewne elementy za szczególnie ważne lub będę odwoływał się do menu programów. W szystkie odnośniki do stron internetowych będą miały następującą postać: http:// www.helion.pl. W książce znajdziesz sporo listingów, przeróżnych przykładów kodu XHTML i HTML i taki tekst będzie wyglądał podobnie do następującego przykładu:
Ponadto w tekście m ogą się pojawić uwagi, w których będę sukcesywnie zamieszczał* porady o kluczowym znaczeniu dla omawianego zagadnienia:
Uwaga
Tworzenie stron WWW może być prawdziwą przyjemnością, jeżeli weźmiesz sobie do serca wszystkie porady i uwagi zam ieszczone na następnych stronach.
Znaczniki XHTML występujące w tekście zostały dodatkowo wyróżnione, np.:
. Dzięki temu nie będą zlewać się z resztą tekstu.
Rozdział 1.
Podstawowe informacje Czym jest internet? Ocena i jakakolwiek charakterystyka intemetu jest dość trudna. Dlatego spróbuję opi sać, czym jest internet w moim odczuciu. Otóż kilka lat temu, gdy stawiałem swoje pierwsze kroki na „cybernetycznej drodze”, uważałem, że to kolejna chwilowa moda i kwestią czasu jest, by pomysł umarł i zniknął z naszego globu. Dzisiaj, gdy pomy ślę, jaki byłby świat bez dostępu do sieci i oferowanych przez nią możliwości, nie potrafię w nim znaleźć miejsca dla siebie. Dzięki internetowi mogę na bieżąco śledzić notowania giełdowe, czytać poranne gazety, zarządzać swoimi pieniędzmi, a w końcu pracować i pisać książki. Nie wyobrażam sobie chwili, w której ktoś wyjmie wtyczkę i sieć zgaśnie — straciłbym pracę, błyskawiczny dostęp do informacji, a nawet wielu przyjaciół. Czasem zastanawiam się, czy ju ż nie jestem uzależniony i nie powinienem się leczyć w specjalistycznych poradniach, ale mam nadzieję, że tak nie jest — bo prze cież straciłbym wtedy dostęp do sieci. W moim odczuciu internet to jedno z największych osiągnięć współczesnej cywiliza cji. Potrafię sobie wyobrazić świat bez ciepłej wody, restauracji czy samochodu, ale nie widzę możliwości jego istnienia bez sieci. Oczywiście opisane zalety nie wyczerpują zagadnienia i zupełnie pomijają drugi aspekt sprawy. Mam tutaj na myśli fakt, że internet pozwala nam również aktywnie w nim zaistnieć i pozostawić cząstkę siebie. Jeżeli poznamy język HTML i XHTML i przy swoimy sobie podstawy korzystania z sieci, to m ożemy brać aktywny udział w jej tworzeniu, rozrastaniu się — nasza praca będzie jak tlen niezbędny do życia.
Biblioteka Pol. Wrocł.
Tworzenie stron WWW w praktyce
14
Łatwość dostępu do sieci i prostota korzystania z niej umożliwiają każdemu prowa dzenie własnej strony domowej zawierającej informacje o jego zainteresowaniach czy rodzinie, a nawet stworzenie prawdziwej elektronicznej gazety. W sieci nie mamy żadnych ograniczeń i jeżeli tylko chcem y, to możemy zrobić wszystko. Prowadze nie poczytnego portalu czy strony o hodowli rybek akwariowych to tylko dwie z wielu możliwości. Wszystko ogranicza się do języka HTML i XHTML, a bardzo często pro wadzi do spełnienia marzeń. Wielu autorów doskonałych serwisów zarobiło dzięki nim spore pieniądze lub otrzymało ciekawe propozycje pracy. Musisz pamiętać o jednej podstawowej zasadzie — anonimowość w sieci jest tylko pozorna. Do chwili, gdy nie naruszysz obowiązujących norm, możesz być anonimowy. W przypadku złamania prawa lub dobrych obyczajów prędzej czy później spodziewaj się odkrycia Twojej prawdziwej tożsamości — dlatego zanim popełnisz głupstwo, za stanów się dwa razy. Moim zdaniem internet to piękne osiągnięcie i nie pozwólmy go zniszczyć przez brak ogłady. Zwróć uwagę, że to dzięki błyskawicznemu rozwojowi sieci powstały idee tworzenia darmowego oprogramowania, a nawet całych systemów operacyjnych. To wła śnie sieć pozwala walczyć z uprzedzeniami oraz przedstawiać prawdę. Oczywiście, usłyszę głosy, że sieć jest źródłem wszelakiego zła (pornografia, treści o charakterze nazistowskim czy też piractwo). Nie sposób nie zgodzić się z takimi ar gumentami, ale weź pod uwagę, że wina za taki stan rzeczy leży po naszej stronie. Gdyby nie było zainteresowania pornografią, to nie powstawałyby nowe strony jej poświęcone, a ludzie nie zarabialiby na tym procederze. Dlatego pamiętaj, że nikt nie zmusza Cię do korzystania z ciemnej strony sieci.
Czym jest strona WWW, a czym witryna? Znasz już moje zdanie na temat sieci. Zakładam, że skoro kupiłeś tę książkę, to miałeś bądź masz styczność z internetem i zainteresowało Cię tworzenie własnych, dobrze wy glądających i działających stron WWW. Zanim zajmiemy się konkretami, niezbędne jest wyjaśnienie dość często spotykanych pojęć strona WWW oraz witryna. Otóż pierwsze z nich określa pojedynczy plik tek stowy zawierający odpowiednie polecenia języka HTML (XHTML). Utarło się, żeby nazwę tę stosować w odniesieniu do całego zbioru stron, jakim bez wątpienia jest wi tryna. N a pewno spotkałeś się z pytaniem: „Czy masz stronę WWW?”. Taka forma jest z pewnością bardzo wygodna, chociaż nie do końca zgodna z prawdą. Nie będę jednak zmieniał Twojego sposobu nazewnictwa.
Rozdział 1. ♦ Podstawowe informacje
15
Dlaczego warto prowadzić własną stronę WWW? Odpowiedź na to z pozoru proste pytanie nie jest taka oczywista. Zastanówmy się, dlaczego zdecydowałem się wykonać swoją stronę WWW. Otóż pomysł narodził się już dość dawno, a pierwsze wydanie tej książki pozwoliło go zrealizować. Pisanie ksią żek oraz inne prace pochłaniały mnie na tyle, że nie miałem czasu, by zaprojektować ciekawie w yglądającą stronę, a następnie ją opublikować. N a szczęście pojawiła się propozycja napisania książki o praktycznym tworzeniu stron WWW. Przyznam się, że od razu zgodziłem się pisać, gdyż na jednym ogniu mogłem upiec dwie pieczenie. Po pierwsze, dorobiłem się swojej własnej strony WWW; po drugie, napisałem — mam nadzieję — ciekawą książkę. Pora przytoczyć poważne argumenty, które skłoniły mnie do utworzenia strony domowej. Było mi potrzebne miejsce, gdzie mógłbym rozwijać myśli i przykłady zaprezentowane w książkach lub artykułach. Książka czy też gazeta m ają to do siebie, że po ich wy drukowaniu nie mamy już wpływu na zawartość, a bardzo często wraz z pojawieniem się nowej przeglądarki czy programu pojawiają się nowe możliwości. Dzięki stronie, której adres znajdzie się w książce, Czytelnik będzie mógł na bieżąco uzupełniać wiedzę. Strona WWW daje mi możliwość pisania o różnych innych ciekawych sprawach, które niekoniecznie nadają się na temat książki czy też artykułu do gazety. Jeżeli pewnego dąia obudzę się po ciężkiej nocy spędzonej na przymuszaniu przeglądarki do tego, by mnie słuchała, i będę chciał się komuś wyżalić, to strona mnie wysłucha i pozwoli udo stępnić moje wnioski innym. Posiadanie strony może zaowocować ciekawymi propozycjami udziału w różnych pro jektach. Moje pierwsze kroki i przygotowanie strony WWW zostały uwieńczone kilka lat temu artykułem w miesięczniku o nazwie „Cyber” (pewnie starsze pokolenie pa mięta takie czasopismo). Od tamtego czasu zmieniły się moje zainteresowania i poglądy na wiele spraw — dorosłem, jednak to doskonały przykład, jaki wpływ na nasze życie może mieć strona domowa. Dzisiaj również nie mogę narzekać na brak ofert współpra cy. Zaledwie kilka dni temu dostałem propozycję napisania kilku książek wraz z innym autorem, nie tak dawno temu oferowano mi napisanie książki na zamówienie pewnej znanej firmy działającej na rynku open source, nie wspominam tutaj o dziesiątkach pro pozycji pisania artykułów do mniej lub bardziej znanych gazet. Patrząc na powyższe argumenty z perspektywy czasu i pracy nad drugim wydaniem książki, nasuwa mi się kilka dodatkowych myśli, którymi chcę się z Tobą podzielić. Przez te wszystkie lata moja strona stała się podstawową platformą kontaktu z Czytelni kiem. To właśnie na stronie domowej Czytelnik sprawdza, jakie książki napisałem, szuka odpowiedzi na swoje pytania, nawiązuje kontakt ze mną, a także korzysta z do datkowych materiałów. Druga wersja strony, która jest widoczna na rysunku 1.1, była efektowna i budziła zainteresowanie, jednak dopiero obecna forma i rozwiązania spo wodowały, że mam nieskrępowane możliwości realizacji głównych celów, które sta wiałem sobie kilka lat temu. To wszystko zasługa m inimalistycznego szablonu oraz wygodnego systemu CMS do zarządzania treścią. M ożna powiedzieć, że stałem się
Tworzenie stron WWW w praktyce
16
Rysunek 1.1. D ruga wersja w itryny danowski.pl
minimalistą w kwestii wyglądu i żarliwym zwolennikiem maksymalnej przejrzystości i funkcjonalności. W dalszej części niniejszej książki z całą pewnością zobaczysz efekty zmiany mojego nastawienia do strony WWW. Mam nadzieję, że spodoba Ci się nowe podejście do tego zagadnienia. Pamiętaj, że m inimalistyczny wygląd wcale nie idzie z parze unikaniem stosowania ciekawych rozwiązań kodu strony. Nieco inaczej wygląda sprawa internetowej wizytówki firmy. Instytucja taka może mieć charakter handlowy, usługowy, produkcyjny, etc. Również i strona WWW spełnia różne funkcje. W przypadku firmy handlowej na stronie możemy zamieścić informa cje o firmie, jej działalności, ofercie, promocjach oraz sklep internetowy. Taka witry na może przy dobrym prowadzeniu i odpowiednim podejściu właściciela zaowocować w stosunkowo bliskiej przyszłości zyskami ze sprzedaży. Doskonałym przykładem takiej strony jest największa na świecie księgarnia internetowa http://www.amazon.com lub strona wydawnictwa Helion — http://helion.pl, na której możesz kupić wszystkie książki, jakie znajdują się w ofercie. Warto podkreślić, że odpowiednie podejście sze fostwa firmy pozwoliło stworzyć naprawdę doskonale działającą stronę, której można pozazdrościć. Pragnę podkreślić, że strony firmy handlowej powinny ciągle ewoluować — żyć, kusić promocjami i now ą ofertą. Decydując się na stronę dla takiej firmy, mu sisz pamiętać, że prowadzenie serwisu jest bardzo pracochłonne i na ogół wymaga za trudnienia pracownika, który będzie się tylko tym zajmował. Nie możesz pozwolić, by strona zwolniła tempo, ponieważ ludzie przestaną przychodzić i kupować. Stare ceny, nieaktualna oferta oraz nieciekawe promocje zniechęcą internautów do odwiedzin.
Rozdział 1. ♦ Podstawowe informacje
17
Inną rolę może spełniać strona firmy usługowej, np. szewca. Zakład szewski świad czy jedynie usługi dla ludności, a jego strona powinna zawierać informacje o firmie, adres i godziny pracy, mapkę — jeżeli trudno do niej trafić, informacje o świadczo nych usługach oraz cennik. Strona taka nie wymaga częstych aktualizacji, ponieważ ma ona jedynie charakter informacyjny. Jeżeli zrobisz taką witrynę dla firmy, pamiętaj o tym, że dane w niej zawarte powinny być zawsze aktualne. Nie możesz sobie po zwolić na to, by numer telefonu był nieaktualny lub poczta elektroniczna kierowana do zakładu pozostawała bez odpowiedzi — to źle świadczy o firmie. Moim zdaniem ciekawą funkcję ma do spełnienia strona firmy produkcyjnej. Zasta nówmy się, co powinna zawierać strona producenta gumowych uszczelek. Produkt mało interesujący, ale jakże potrzebny na rynku. Moim zdaniem na stronie takiej firmy szukałbym informacji o asortymencie wytwarzanych uszczelek (informacje o typach, rozmiarach), możliwości nabycia, lokalnych przedstawicielach lub sklepach współpra cujących z producentem. Bardzo w ażną rzeczą jest to, by na stronie znalazły się in formacje na temat warunków współpracy i zakupu. W tym przypadku producent raczej nie będzie się zajmował sprzedażą detaliczną, dlatego zakładam, że możemy pominąć tworzenie sklepu. Podobnie jak w poprzednich przykładach, również i tym razem strona powinna być zawsze aktualna, a na listy elektroniczne odpowiadać należy przynajm niej raz dziennie. Podsumowując, z całą pew nością mogę pow iedzieć, że strony firm bez względu na branżę i prow adzoną działalność m ają kilka wspólnych elementów, które w ym ieni łem dalej: ♦ dane powinny być zawsze aktualne, ♦ poczta odwiedzającego nie może pozostać bez odpowiedzi, ♦ obowiązkowymi elementami są dane teleadresowe.
Uwaga
Nieaktualna lub błędnie wykonana strona to antyreklama firmy. W zasadzie takiej strony nie powinno być w sieci.
Oprogramowanie potrzebne przy tworzeniu stron WWW a dołączona płyta CD Dokument XHTML (HTML) jest zwykłym plikiem tekstowym, czyli do wykonania strony nie jest nam potrzebny żaden specjalny program ani środowisko programi styczne — wystarczy zwykły edytor tekstu, np. N otatnik, będący częścią składową każdego systemu MS Windows.
18
Tworzenie stron WWW w praktyce
Niestety, Notatnik jest niezwykle prostym edytorem tekstowym i nie obsługuje XHTML (HTML), więc wymaga szczególnej dbałości o wpisywany kod. Przy tworzeniu stro ny w Notatniku nietrudno o liczne błędy oraz przeoczenia, dlatego podczas regularnej pracy nad stroną WWW warto sięgnąć po wyspecjalizowane narzędzia. Do dyspozy cji mamy dwa rodzaje edytorów.
Edytory tekstu Wspominałem o tym, że pliki zawierające kod strony WWW to dokumenty tekstowe, a co za tym idzie, do ich edycji możemy wykorzystać dowolny tekstowy edytor, np. systemowy Notatnik. Niestety, takie rozwiązanie nie należy do zbyt wygodnych, gdyż wymaga każdorazowo ręcznego „wklepywania” wszystkich niezbędnych znaczników oraz pamiętania o ich domykaniu. W związku z tym na rynku stosunkowo szybko po jawiły się wyspecjalizowane edytory programistyczne wyposażone w szereg dodatko wych funkcji, znacznie ułatwiających pracę webmasterowi. Najważniejsze cechy, jakimi powinien charakteryzować się dobry edytor tekstowy, to: ♦ domykanie znaczników, ♦ kolorowanie składni, ♦ kodowanie polskich znaków w standardzie ISO i UTF, ♦ kreatory ułatwiające generowanie części kodu, ♦ sprawdzanie poprawności wygenerowanego kodu. Na rynku możemy znaleźć wiele bardzo dobrych i godnych polecenia edytorów tek stowych. Dlatego ostatecznie zdecydowałem się nie proponować konkretnego, a jedynie przedstawić wykaz kilku ciekawych rozwiązań, które, moim zdaniem, zasługują na uwagę. Pragnę nadmienić, że wszystkie wybrane edytory są aplikacjami darmowymi. ♦ kED — bardzo wygodny polski edytor XHTML (HTML) i CSS. W tej chwili nie będę zachwalać możliwości edytora, ponieważ opisałem go w dalszej części książki przy okazji omawiania języka XHTML (HTML) i CSS. Program znajduje się również na dołączonej płycie CD. ♦ 1st Page 2006 — bardzo rozbudowany edytor stron WWW, który pozwala na pracę nad stroną w trybie tekstowym oraz graficznym. Warto zwrócić uwagę na to, że posiada on mechanizm domykania znaczników, kolorowania składni oraz wygodne podpowiedzi. Duży plus należy się autorowi za dodanie dziesiątek kreatorów, ułatwiających utworzenie bardziej skomplikowanego elementu na stronie, np. uzyskanie popularnego efektu rollover albo dodanie tabeli czy galerii ze zdjęciami. Prezentowane narzędzie wspiera pracę z kodem XHTM L i HTML. Strona domowa edytora to http://www.evrsoft.com. Minusem jest brak polskiej wersji językowej.
Rozdział 1. ♦ Podstawowe informacje
19
♦ P SP ad— zaawansowany edytor programistyczny, obsługujący wiele języków programowania, w tym HTML, XHTML i CSS. Posiada on wszystkie niezbędne udogodnienia ułatwiające pracę, został też wyposażony przez autora w moduł sprawdzania pisowni — również polskiej. Z aletąjest polskojęzyczny interfejs i wygoda obsługi. Warto również wspomnieć o integracji z darmowym edytorem kaskadowych arkuszy stylów (TopStyle Lite) oraz sprawdzaniu poprawności kodu i obsłudze wielu dodatków, które można pobrać ze strony domowej — http://www.pspad.com/en. ♦ TopStyle Lite — jest wysoce wyspecjalizowanym edytorem CSS. Program stosuje kolorowanie składni, domykanie znaczników oraz używa wygodnego mechanizmu podpowiedzi. Dzięki kreatorom i przejrzystemu interfejsowi stworzenie własnego, nawet najbardziej rozbudowanego, arkusza stylów jest rzeczą banalnie łatwą. Na uwagę zasługują: podgląd działania budowanego arkusza, walidator sprawdzający poprawność kodu arkusza oraz możliwość integracji edytora z PSPadem.
Edytory grafiki Tego rodzaju edytory są z reguły dużo bardziej wymagające (aspekt sprzętowy), a praca z nimi przypomina tworzenie dokumentu, np. w program ie MS Word. Programy te oferują wiele kreatorów i gotowych szablonów, mających pomóc w pracy nad stroną. Dość istotną wadą edytorów graficznych jest ograniczona kontrola kodu strony, który — niestety — w przypadku takich programów często pozostawia wiele do życzenia. Przykładem edytorów graficznych są m.in. MS FrontPage, jednak bezapelacyjnie naj lepszy w tej kategorii jest Dreamweaver firmy Adobe (wcześniej Macromedia). Program ten ma potężne możliwości, a przy tym jego obsługa nie jest zbyt skomplikowana. Na temat wspomnianych programów możesz przeczytać więcej na stronach: ♦ Dreamweaver — http://www.adobe.com/products/dreamweaver ♦ MS Front Page — http://www.microsoft.com/frontpage
Programy do przygotowywania grafiki sieciowej Nowoczesna strona nie może obejść się już dzisiaj bez elementów graficznych. Dla tego myśląc poważnie o przygotowaniu swojej pierwszej strony, powinieneś zaopa trzyć się w odpowiednie narzędzie (lub narzędzia) graficzne. Musisz wiedzieć, że na rynku istnieje wiele bardzo dobrych i profesjonalnych programów do obróbki grafiki, np. Adobe Photoshop czy Corel PHOTO-PAINT, ale niestety wszystkie m ają jedną podstawową wadę — w ysoką cenę. N a szczęście m ożna znaleźć darmowe lub tanie zamienniki wymienionych powyżej aplikacji. Tak się składa, że w swojej codziennej pracy używam programu Paint Shop Pro w wersji 7. Program ten pozwala pracować na warstwach, obsługuje formaty plików g i f p ng oraz jp eg, używane na stronach WWW. Poniżej natomiast wymieniłem kilka darmowych rozwiązań, które powinny Cię zain teresować ze względu na oferowane możliwości.
20
Tworzenie stron WWW w praktyce
♦ P aint.N E T— jest bardzo rozbudowanym edytorem grafiki rastrowej. Program jest rozwijany przez studentów Uniwersytetu Washingtona, a dodatkowo wspierany przez firmę Microsoft. Pozwala on na obrabianie różnego rodzaju grafiki rastrowej. Wspiera korzystanie z warstw, wielopoziomową opcję cofania zmian oraz efekty specjalne. Do wymienionych zalet należy doliczyć przejrzysty interfejs oraz możliwość instalacji innych wersji językowych. Niestety, polska wersja programu nie jest jeszcze dostępna. Strona domowa programu to http://www.eecs.wsu.edu/paint.net. ♦ GIMP — jest darmowym narzędziem do obróbki grafiki rastrowej. Za pomocą tego programu możesz edytować zdjęcia lub tworzyć własne grafiki, na przykład na potrzeby projektowanej strony WWW. GIMP oferuje wiele zaawansowanych funkcji, a do najważniejszych można zaliczyć: obsługę warstw, wykorzystanie ogromnej ilości wtyczek, możliwość tworzenia własnych makr oraz wiele innych. Warto również wspomnieć o rozbudowanej selekcji, pracy z kanałami alfa, obsłudze antyaliasingu, skalowaniu i przekształcaniu obrazów, wsparciu dla animowanych GIF-ów, tworzeniu map odnośników czy łączeniu tekstu z grafiką. W śród obsługiwanych formatów graficznych znajdują się m.in. jp eg , bmp, png, xpm , tiff.\ tga, mpeg, ps, pdf, pcx, gif. Program dostępny jest m.in. w polskiej wersji językow ej, a w połączeniu z nakładką GIMPShop (http://plasticbugs.com/?page_id=294) obsługa aplikacji jest zbliżona do Adobe Photoshop, ponieważ układ menu i skróty klawiszowe są identyczne. Warto również wspomnieć o tym, że GIMP dostępny jest w wersjach dla różnych systemów operacyjnych. M ożna go pobrać ze strony http://gimp.eu.org. ♦ DrawPlus 4 — to bardzo funkcjonalne narzędzie do tworzenia grafiki wektorowej. Program posiada wiele rozwiązań niezbędnych podczas pracy z tego typu grafiką, a do tego ma bardzo przyjazny interfejs. Należy wspomnieć o tym, że aplikacja pozwala na pracę z wykorzystaniem warstw, grupowanie elementów oraz zamianę tekstu na krzywe. Ciekawostkąjest również, że dzięki niej możemy przygotować animacje, a wyniki pracy wyeksportować do kilku popularnych formatów rastrowych. Program można pobrać ze strony http:// www.freeserifsoftware.com. Niestety, polska wersja językowa nie jest dostępna.
Etykieta i prawo autorskie Etykieta i respektowanie praw autorskich to zagadnienia o zasadniczym znaczeniu przy tworzeniu stron WWW. Nie możemy od tak po prostu zabrać komuś jego strony, de likatnie przerobić i opublikować jako własną. To samo tyczy się przycisku czy innego elementu graficznego znajdującego się na stronie. Prawem autorskim jest chroniony również opublikowany na stronie tekst, dlatego jego także nie możemy wykorzystać do swoich celów. Pamiętaj, że istnieje coś takiego jak możliwość cytowania innego autora, ale wymaga to podania źródła i ograniczenia się jedynie do fragmentu tekstu. W dobrym tonie jest zapytanie autora, czy nie ma nic przeciw takiemu działaniu.
Rozdział 1. ♦ Podstawowe informacje
Uwaga
21
W ostatnich latach rozpowszechnił się zwyczaj oznaczania tekstów za pomocą licen cji Creative Commons — http://creativecom m ons.pl. Dzięki temu wiadomo, czy dany tekst możemy wykorzystać do swoich potrzeb i w jakim zakresie możemy to zrobić.
Z pewnością zdziwisz się, ale zbierając materiał na płytę CD dołączoną do tej książki, pytałem każdego autora, czy mogę jego program opublikować na płycie. Nie zwraca łem tutaj uwagi na to, że narzędzie jest zupełnie darmowe czy też że można je testo wać przez okres 30 dni. Jeżeli zachodziła taka potrzeba, wysyłałem stosowne umowy lub dokumenty wymagane przez autorów. Wszystko po to, by nikt nie mógł mi zarzucić, że złamałem prawo chroniące jego interesy. Wbrew pozorom zagadnienia te są oczywiste, a jednak niemal codziennie na forach i grupach dyskusyjnych spotykam informacje o kolejnych plagiatach lub „permanent nych inspiracjach” innymi projektami. Niestety, zjawisko to jest i będzie nadal obecne w polskiej sieci, ale mam nadzieję, że Twoje podejście będzie odpowiednie do rangi problemu. Pamiętaj, że używając pracy innych, łamiesz prawo, ale prędzej czy później tego sa mego możesz doświadczyć. Ktoś inny użyje Twoich tekstów lub szaty graficznej czy też układu strony bez Twojej wiedzy i zgody. Z pewnością autorytetem w zakresie etyki webmasterskiej jest Paweł Wimmer, który już kilka lat tem u spisał najw ażniejsze założenia i um ieścił je w swoim kursie. N ie będę tutaj cytował Pawła, tylko podam odnośnik do odpowiedniej strony — http:// webmaster.helion.pl/kurshtml/porady/porady.htm. Zapoznaj się z etykietą i staraj się do niej stosować. Na pewno niczego nie stracisz, a moim zadaniem możesz zyskać szacunek i uznanie innych.
Wybór usługodawcy, u którego zamieścimy stronę WWW Wybór odpowiedniego dostawcy usług internetowych nie jest prosty, gdyż na rynku działają setki, o ile nie tysiące firm. Podobnie jak w życiu codziennym, tak i tutaj mo żemy spotkać firmy porządne oraz naciągaczy. Dla mnie zasady panujące na rynku usług internetowych nie zawsze są zrozumiałe. Nie rozumiem i nie darzę zaufaniem firm, które oferują usługi za V5 ceny proponowanej przez kilka innych, działających znacznie dłużej na rynku. Zawsze mam wrażenie, że to, co tanie, jest drogie, i osobiście nie polecałbym korzystania z usług bardzo tanich firm bez bazy klientów. Moim zda niem przed podjęciem decyzji o wyborze dostawcy warto go sprawdzić. Należy kon trolować przez jakiś czas, czyjego serwery działają poprawnie i stabilnie. Doskonałym źródłem wiadomości o jakości usług firmy może okazać się baza klientów. Warto zwró cić uwagę na to, jacy klienci korzystają z usług dostawcy. Dużym minusem jest fakt obsługi przez firmę stron o tematyce erotycznej, gdyż są one powodem ogromnego
22
Tworzenie stron WWW w praktyce
obciążenia serwerów i zapychania łączy. Na dzień dzisiejszy coraz więcej firm oferuje możliwość przetestowania swoich usług, zanim za nie zapłacimy, dlatego warto z takiej możliwości skorzystać. Oferowane usługi są bardzo zróżnicowane, toteż warto dokładnie czytać dostępne mate riały reklamowe, by uniknąć rozczarowania. Jeżeli szukasz płatnego usługodawcy na potrzeby publikacji swojej strony utworzonej z wykorzystaniem materiałów zawartych w tej książce, to niemal każda oferta będzie odpowiednia. Zakładam jednak, że na tym etapie nie zakończysz swojej przygody, dlatego powinieneś szukać wirtualnego serwera spełniającego następujące warunki: ♦ możliwość rejestracji własnej domeny, ♦ pojemność serwera uzależniona od wymogów serwisu (z pewnością pierwsze projekty będą zajmowały po kilkaset kilobajtów, ale sugerowałbym, by pojemność przeznaczona na stronę wynosiła przynajmniej 100 MB z m ożliwością poszerzenia — nigdy nie wiadomo, co przyniesie przyszłość), ♦ konto e-mail o dużej pojemności, ♦ brak limitu na generowany przez nasz serwer ruch w sieci lub limit na tyle duży, że nie będzie konieczności dokupywania dodatkowego „transferu”. ♦ możliwość rozszerzenia usługi o uruchamianie skryptów PHP i dostęp do bazy danych. Oczywiście, nie bez znaczenia pozostaje odpowiednie wsparcie techniczne oraz do datkowe usługi świadczone przez operatora, np. obsługa poczty przez WWW, pakiet pomocnych skryptów, etc. Jeżeli tworzysz stronę dla firmy, bezwzględnie powinieneś skorzystać z oferty płatnej, gdyż tylko ona zapewni Ci odpowiednie poczucie bezpieczeństwa oraz wiarygodność. W przypadku gdy tworzysz strony czysto hobbystycznie, śmiało możesz skorzystać z oferty darmowej. Pamiętaj jednak, że usługi takie m ogą być pozbawione wsparcia technicznego, co w przypadku awarii lub kłopotów staje się dużym problemem. Umiesz czając projekt na darmowym serwerze, akceptujesz regulamin tam obowiązujący i jesteś zobowiązany do wykonania pewnych zaleceń właściciela. Dlatego zanim opublikujesz stronę, przeczytaj dokładnie, jakie masz prawa i obowiązki. Dalej zamieszczam kilka odnośników do dobrych serwerów płatnych oraz ich darmo wych odpowiedników. Mam nadzieję, że dzięki temu pomogę Ci podjąć decyzję o wy borze lokalizacji dla Twojej strony WWW. ♦ Serwery płatne: http://www.progreso.pl http://www.home.pl
Rozdział 1. ♦ Podstawowe informacje
23
♦ Serwery darmowe: http://pages.google. com http://republika.pl http://www.prv.pl
V Uwaga
Pamiętaj, że możliwości serwera mogą znacznie pomóc w tworzeniu strony WWW. Jeżeli serwer oferuje dostęp do PHP, to Twoja strona może zawierać wiele ciekawych skryptów rozszerzających jej możliwości (formularz, licznik, książka gości, grupa dyskusyjna czy wyszukiwarka). Poza tym m ożesz korzystać z wygodnych rozwiązań typu CMS, które ułatwiają aktualizację i prowadzenie strony.
Własna domena Na początku wyjaśnię, czym jest domena i do czego jest ona nam potrzebna. Jak za pewne się domyślasz, działaniem tak rozbudowanej sieci, jaką jest internet, muszą rzą dzić pewne prawa i zasady. Jedno z nich dotyczy adresowania poszczególnych miejsc. Ma ono następującą postać: 213.180.130.200. Numer ten nosi nazwę adresu IP. Za pamiętanie takiego adresu dla wielu z nas bywa często kłopotliwe, w związku z czym powstała usługa pozwalająca dokonać zamiany adresu IP na nazwę zrozum iałą dla człowieka — domenę. Konwersja odbywa się automatycznie dzięki specjalnym ser werom DNS. Serwery te zaw ierają spis numerów IP oraz przypisanych im domen. W naszym przypadku odpowiednikiem podanego adresu IP jest http://onet.pl. Do wyboru mamy kilkaset domen głównych, w których możemy rejestrować swoje adresy. W Polsce najpopularniejsze z nich to p l — domena krajowa, com.pl, net.pl — do meny funkcjonalne oraz domeny regionalne składające się z nazwy miasta i przyrostka kraju, np. katowice.pl. Listę wszystkich domen funkcjonalnych i regionalnych obsługiwanych przez NASK (i nie tylko) można znaleźć pod adresem http://www.dns.pl/dns-funk.html oraz http:// www.dns.pl/dns-regiony.html. Nazwa domeny może zawierać jedynie znaki alfabetu łacińskiego, cyfry i znak m i nus (-). Od niedawna jest możliwe stosowanie polskich znaków narodowych, ale rozwiązanie to jeszcze nie zyskało popularności i sprawia problemy w niektórych przeglądarkach. Niestety, nie można używać przerw w wieloczłonowych nazwach, a maksymalna liczba znaków to 63. Posiadanie domeny wiąże się z dodatkowymi kosztami, ale w zamian daje adres, któ ry jest niezależny od usługodawcy. Załóżmy, że zdecydowałem się na konto w firmie http://www.xyz.pl i korzystam z adresu, który firma dała mi w cenie wykupionej usłu gi; ma on postać http://www.danowski.xyz.pl. Jeżeli zrezygnuję z usług firmy XYZ na rzecz innej, np. ZYX, to niestety stracę poprzedni adres. Jedynym sposobem na unik nięcie takiej sytuacji jest własny adres — domena.
Tworzenie stron WWW w praktyce
24
Przy obecnej konkurencji niemal każda firma pośredniczy w naszym imieniu w pro cesie rejestracji domeny, dlatego nie będę tutaj omawiał dokładnie wszystkich proce dur z tym związanych. Proponuję abyś zapoznał się z ofertą swojego dostawcy lub zerknął do dodatku znajdującego się na końcu niniejszej książki.
% Uwaga
W łasna dom ena daje Ci w olność. W każdej chwili m ożesz zmienić usługodawcę i delegację domeny. Wszystkie dokumenty i wizytówki zawsze będą aktualne, a Ty możesz zmieniać usługodawcę nawet co rok.
Rozdział 2.
Język XHTML i HTML sprawcą całego zamieszania Strony, które oglądasz niemal każdego dnia podczas godzin spędzonych w sieci, są wy nikiem działania języka HTML lub jego odmian. Służy on do prezentowania tekstu i grafiki w postaci niezależnej od platform y sprzętowej i systemowej. Dlatego pracę nad stroną WWW musimy rozpocząć od zdobycia kilku podstawowych wiadomości. Strona WWW, którą oglądasz, jest wynikiem odpowiedniej interpretacji zestawu po leceń — np. języka HTML — przez przeglądarkę. Prace na językiem HTML rozpo częto kilkanaście lat temu, a kontrolę nad ich postępem sprawowało konsorcjum W3C — http://www.w3.org. Pierwsza oficjalna specyfikacja języka została ostatecznie za twierdzona w 1994 roku. Oferowała ona jednak zaledwie namiastkę tego, co znajduje się w stosowanym obecnie języku HTM L 4.01 lub jego bezpośrednim następcy XHTML 1.0. Dlatego też prace trwały nadal i w 1996 roku ukazała się kolejna ofi cjalna specyfikacja, oznaczona numerem 3.2. W tej formie język został wzbogacony 0 wiele nowych możliwości, a jed n ą z najważniejszych były tabele, które zrewolucjo nizowały stronę WWW. Następne lata przyniosły kolejną specyfikację i w 1998 roku została zatwierdzona wersja oznaczona numerem 4.0, a w 1999 roku pojawiła się wersja poprawiona 4.01. Pracę nad językiem HTML zostały przerwane na wersji 4.01 i rozpoczęto tworzenie kolejnego języka opisu strony, lepiej dopasowanego do obecnych realiów. W ten spo sób powstał XHTML 1.0 oraz 1.1. Najważniejsze różnice pomiędzy językiem HTML 1 XHTML dotyczą oddzielenia formatowania od struktury strony. Struktura jest two rzona za pomocą poleceń języka XHTML, a formatowaniem zajmują się wyłącznie ka skadowe arkusze stylów. W tym opracowaniu będę wykorzystywał specyfikację — XHTML 1.0, w której wpro wadzono wiele zmian, a jed n ą z najważniejszych jest oddzielenie elementów forma tujących od znaczników grupujących tekst w bloki, listy czy też tabele. Oczywiście,
26
Tworzenie stron WWW w praktyce
osoby chcące budować swoje strony przy wykorzystaniu samego języka HTML rów nież znajdą tu coś dla siebie, ponieważ XHTML i HTML są do siebie bardzo podobne. Poniżej zamieściłem wykaz odnośników do specyfikacji najnowszych wersji języków XHTML, HTML i narzędzia służącego do sprawdzania poprawności kodu — walidatora. ♦ http://www.w3.org/TR/html4 — specyfikacja HTML 4.01 ♦ http://www.w3.org/TRJxhtmll 1 — specyfikacja XHTML 1.1 ♦ http://validator.w3.org — walidator Pliki zawierające odpowiednie polecenia języka XHTML (HTML) — znaczniki — są plikami tekstowymi i m ogą korzystać z rozszerzeń przedstawionych w tabeli 2.1. Tabela 2.1. Podstawowe rozszerzenia plików strony WWW .htm
p lik te ksto w y zawierający kod HTML, czasami też kod JavaScript
.html
plik tekstowy zawierający kod HTML, czasami też kod JavaScript
.shtml
plik tekstowy zawierający kod HTML oraz instrukcje SSI — pliki takie są przetwarzane przez serwer przed wysłaniem do przeglądarki
php
pliki tekstowe zawierające kod HTML połączony ze skryptami PHP4
,php3
pliki tekstowe zawierające kod HTML połączony ze skryptami PHP3
.cgi
pliki tekstowe zawierające skrypty napisane w Perlu bądź Shellu — często połączone z kodem HTML
■pl
pliki tekstowe zawierające skrypty napisane w Perlu — często połączone z kodem HTML
pliki tekstowe zawierające skrypty napisane w języku JavaScript
Jeżeli otworzysz za pom ocą przeglądarki dowolną stronę WWW, a następnie skorzy stasz z opcji podglądu źródła dokumentu (w przeglądarce MS Internet Explorer wy starczy, że klikniesz prawym przyciskiem myszy kod strony i z podręcznego menuwybierzesz opcję Pokaż źródło), to zobaczysz zawartość dokumentu. Na rysunku 2.1 przedstawiam fragment kodu źródłowego przykładowej strony. Z tego prostego przykładu wynika jeden ważny wniosek — do tworzenia stron WWW nie jest potrzebny żaden wymyślny program i wystarczy zwyczajny tekstowy edytor (np. systemowy Notatnik). Oczywiście, takie narzędzie jest mało funkcjonalne i wymaga doskonałej znajom ości poleceń języka XHTM L oraz jego konstrukcji. W związku z tym na samym początku odrzucamy pracę w Notatniku. Przy tworzeniu stron będę starał się zachęcić Cię do tego, byś używał CSS (kaskado wych arkuszy stylów) do kontrolowania wyglądu strony. Style od dawna są dobrze znane użytkownikom edytorów tekstu i zostały z dużym entuzjazmem przyjęte w świat ku webmasterów. Dzięki CSS projektanci dostali do rąk potężne narzędzie, pozwalające określać wygląd niemal każdego elementu strony. Obecny XHTML (HTML) zawiera jedynie zestaw znaczników odpowiedzialnych za grupowanie tekstu w bloki, tworzenie tabel, list, ramek, osadzanie grafiki, natomiast cały proces formatowania i pozycjono wania wszystkich elementów został przejęty przez CSS — kaskadowe arkusze stylów. Rozwiązanie takie jest bardzo wygodne i daje ogromne możliwości.
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
27
<'Ü O C T Y P E html P U B L I C " - / / S 3 C / / B T D X H T M L 1 . 0 S t r i c t / Z E N " "ht t p : / / v v v .v3. o r g / T R / x h fcro11 / D T D / x h t m l l - s t r i c t . d t d " > Chtml
x m l n s = " h t t p :/ / w w w . w 3 .o r g / 1 9 ' 9 9 / x h t m l w
x m l :l a n g = " p l ”
lang="pl">
8artosz
n a m e * "keywords”
informatyka,
DanowsJci
http-equiv="Content-Type"
książka,
content="Bartosz helion,
cdrinfo,"
cmeta
na m e * " author"
cme t a
n a m e = ”p u b l i s h e r "
name*"distribution"
cmeta
name=" g e n e r a t o r "
name="robots"
cmeta
name="revisit-after"
rel="styles!ieet"
rel="alternate"
content="pl"
informatyczna,
książki,
all"
/>
/>
/> 2.0.3"
/>
leave
< ! —
t his
for stats
—
>
/>
/>
content="5
days"
/>
/>
href="/wydruk.css"
type="text/css"
type="application/rss+xml"
rel="pingback"
/>
h r e f = " h t t p : / / d a n o w s k i .p i / w p - c o n t e n t / t h e m e s / d a n o w s k i / s t y l e . c s s "
href*"ht t p : / / d a n o wski.pl/feed/ " d i n k
Danowski"
content*"global"
content*"follow,
media="screen"
literatura
B a r c z e n t e w i c z ”
content*"WordPress
name*"language"
rel="Stylesheet"
,
ch a rset=UTF-8"
/>
c o n t e n t * "Bartosz
type="text/c33"
Danowski,
content="Mikolaj
content*"text/html;
m edi a * " p r i n t "
t i t l e * "Bartosz
/>
Danowski
RSS
Feed"
/>
href="htt p : / / d a n o w s ki.pl / x m l r p c . p h p "
/>
src="http: / /danowski .pi/js/prototype. js"
t y p e = " t e x t / j a vascript " x / s o r i p t >
s r c = " h t t p :/ / d a n o w s k i . p i / j s / s c r i p t a c u l o u s . j s ? l o a d = e f f e c t s "
type** text/javascript " x / scrip t>
s r c = " h t t p : / / d a n o w s k i . p i / j 9 / g e n e r a l .j s "
t y p e = " t e x t / j a v a s c r i p t " x / s c r i p t >
Rysunek 2.1. Fragment przykładowego kodu XHTM L
Podobnie jak język XHTM L (HTML), również kaskadowe arkusze stylów są stan daryzowane przez konsorcjum W 3C, a odpow iednie specyfikacje znajdują się na stronie WWW: ♦ http://www.w3.org/TR/REC-CSSl — specyfikacja CSS1 ♦ http://www.w3.org/TR/REC-CSS2 — specyfikacja CSS2 ♦ http://www.w3.org/TR/CSS21 — specyfikacja CSS2.1 ♦ http://jigsaw. w3. org/css-validator — walidator Książka wykorzystuje informacje zawarte w specyfikacjach CSS1, CSS2 oraz CSS2.1 i z oczywistych względów nie zawiera opisu wszystkich możliwości (byłoby to po prostu niemożliwe). Postanowiłem skupić się jedynie na elementach używanych w codziennej pracy.
V Uwaga
Pamiętaj, że tworzenie stron WWW zgodnych ze standardami konsorcjum W3C po zwoli Ci uniknąć licznych problemów związanych z niepoprawnym działaniem strony w różnych przeglądarkach. Oczywiście, nie będziesz miał stu procent gwarancji, że strona poprawnie zadziała, ale będzie łatwiej i prościej szukać i poprawiać ewentu alne różnice w interpretacji poszczególnych poleceń przez różne przeglądarki.
28
Tworzenie stron WWW w praktyce
Znacznik i jego konstrukcja Język XHTM L składa się z szeregu znaczników, których forma jest ściśle określona przez wspomnianą wcześniej specyfikację. Każdy znacznik ma tak zwany znacznik otwie rający, który występuje w parze ze znacznikiem zamykającym. Oto schemat zapisu znacznika:
W praktyce wygląda to mniej więcej tak:
Znacznik otwierający może zawierać atrybut, który umieszczony jest wewnątrz na w iasu kątowego. A trybut niem al zawsze je st opcjonalny. Przykład znacznika wraz z atrybutem zamieściłem poniżej.
Uwaga
W przypadku języka HTML znaczniki i atrybuty możemy wpisywać, używając zarów no dużych, jak i małych liter. Wyjątkiem są te elementy, które zawierają odwołania do innych plików; tu nazwa pliku musi być pisana dokładnie tak samo, jak wygląda w rzeczywistości. Jeżeli jednak zdecydujesz się na korzystanie z języka XHTML, m usisz pamiętać, że w tym przypadku nazwy znaczników oraz atrybuty wpisujemy, używając zawsze małych liter. W przypadku atrybutów wartości występujące po znaku równości należy zawsze zapisywać, używając cudzysłowu. Dla dokumentów korzystających z języka HTML cudzysłów można pominąć.
Znaczniki zamykające nigdy nie zawierają dodatkowych parametrów. Wspomniałem już o tym, że znaczniki prawie zawsze występują w parach — znacznik otwierający i za mykający, czyli, jak łatwo się domyślić, od tej zasady istnieją wyjątki. Jest ich nie.wiele, ale są. Poniżej w tabeli 2.2 wypisałem najważniejsze pojedyncze znaczniki wraz z odpowiednią formą zapisu dla języka HTML i XHTML. Tabela 2.2. Pojedyncze znaczniki — zapis zgodny z HTML i XHTM L HTML
XHTML
<1 i nk>
< lin k />
•
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
29
Jeżeli tworzysz stronę zgodną ze specyfikacją HTML, to wymienione powyżej znacz niki nie muszą być zamykane. Natomiast w przypadku witryny zgodnej z XHTML konieczne jest zamknięcie znaczników zgodnie z przykładem. Zamknięcie wszystkich znaczników je st warunkiem niezbędnym do uzyskania strony WWW o poprawnym kodzie XHTML. Bardzo ważną sprawą jest umieszczenie spacji wewnątrz znacznika. Nie wstawiaj jed nak zbędnych spacji, gdyż tylko niepotrzebnie zwiększysz rozmiar pliku. Poniżej przed stawiam przykład poprawnie zapisanego znacznika. *
Zwróć uwagę, że spacja znajduje się jedynie między nazwą znacznika i atrybutem. Nie ma spacji po nawiasie otwierającym i przed zamykającym nawiasem kątowym.
Podstawowe różnice pomiędzy HTML i XHTML Język HTML pojawił się jako pierwszy i doczekał się kilku specyfikacji oraz prze szedł wiele zmian od chwili pojawienia się. Natomiast XHTML jest nowym wciele niem HTML, którego rozwijanie zakończono na wersji 4.01. XHTML przejął większość elementów ze swojego starszego brata — języka HTML. Dlatego znając HTML, bez większych problemów poradzisz sobie z przygotowaniem dokumentu zgodnego ze specyfikacją XHTML. Należy tylko pamiętać o kilku kluczo wych zmianach w składni języka oraz usunięciu niektórych znaczników i atrybutów.
V Uwaga
Zapamiętaj, że stosując się do większości zaleceń specyfikacji, możesz tworzyć stro ny w czystym języku HTML i będą one poprawnie obsługiwane przez większość prze glądarek. W dalszej części książki będę stosować się do wymogów języka XHTML.
Zasada 1. Nigdy nie krzyżuj znaczników Pierwszą i jed n ą z najważniejszych zasad obowiązujących podczas tworzenia stron WWW jest odpowiednie zagnieżdżanie znaczników. Innymi słowy, chodzi o to, aby unikać krzyżowania znaczników w kodzie strony. Przyjrzyj się poniższemu przykłado wi, który prezentuje skrzyżowane znaczniki.
Przyk?ad bloku tekstu ze skrzyżowanymi znaczni kami
Teraz przykład, w którym znaczniki zostały prawidłowo zagnieżdżone.
Przykład bloku tekstu ze skrzyżowanymi znacznikami
30
Tworzenie stron WWW w praktyce
Zasada 2. Zawsze zamykaj wszystkie znaczniki N astępną bardzo w ażną regułą, o której należy pamiętać, budując stronę WWW na podstawie języka XHTML, jest bezwzględne zamykanie każdego znacznika. Sprawa jest prosta i oczywista w przypadku większości znaczników, gdyż znaczniki zawsze występują w parze: znacznik otwierający i znacznik zamykający.
Przykład bloku tekstu
Problemy m ogą się zacząć w przypadku tych elementów, które w specyfikacji języka HTML nie miały przewidzianych znaczników zamykających. Mam tutaj na myśli na stępujące znaczniki: ♦ ,
♦ , ♦ , ♦ .
Na szczęście w specyfikacji XHTML znajdziemy rozwiązanie tego problemu. Wystar czy, że na końcu znacznika przez znakiem > dodamy /. Oto przykład: ♦ , ♦ ,
♦ , ♦ .
Ważne jest, aby bezpośrednio przed znakiem / dodać spację. Brak spacji może powo dować nieprawidłowe działanie strony WWW w niektórych przeglądarkach, które sła biej sobie radzą z obsługą języka XHTML.
Zasada 3. Wpisując znaczniki i atrybuty, zawsze używaj małych liter Tworząc kod strony, należy pamiętać o tym, że wszystkie znaczniki oraz ich atrybuty m uszą być pisane od małej litery.
Przykładowy blok tekstu z własną klasą
1
Zasada 4. Używaj cudzysłowów dla wszystkich atrybutów Podczas określania atrybutów dla znaczników zawsze używaj cudzysłowów. Odpo wiedni przykład znajduje się poniżej.
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
Zasada 5. Przypisuj wartości dla pustych atrybutów Niektóre znaczniki w języku HTML m ają puste atrybuty. Dokładniej mówiąc, chodzi o takie rozwiązanie, gdy atrybut sam w sobie wymusza jakieś działanie i nie wymaga określania dodatkowych wartości. Przykładem połączenia znacznika i pustego atrybutu może być . Prawidłowy (zgodny ze specyfikacją XHTML) zapis tego znacznika widać poniżej.
Jak widzisz, nazwa pustego atrybutu została powtórzona w cudzysłowie.
Zasada 6. Uważaj ze znakami specjalnymi wskryptach Tworząc kod zgodny z XHTML, zam iast znaków specjalnych, np. < czy &, używaj encji, np. &11; i &.
Struktura dokumentu Niezależnie od tego, czy korzystamy z HTML, czy XHTML, każdy dokument posia da ściśle określony szkielet, który nie zmienia się w zależności od zawartości strony. Oczywiście, szkielet dla strony zbudowanej w HTML różni się od szkieletu wykorzy stywanego w stronach tworzonych w XHTML.
Określamy zgodność ze specyfikacją W przypadku strony wykorzystującej język XHTML pierwszym wpisem jest:
Element ten popularnie jest nazywany prologiem i odpowiada za określenie wersji ję zyka XML oraz sposobu kodowania znaków. Prawidłowa forma wpisu musi wyglądać tak, jak na powyższym przykładzie, i jest niezmienna. Oczywiście, w przypadku ko rzystania z języka HTML prolog jest zbędny i nie stosuje się go. Pierwszym wspólnym i obowiązkowym — dla HTML i XHTML — elementem szkie letu strony jest wpis określający rodzaj wykorzystywanego do jej stworzenia języka. W przypadku strony wykorzystującej język HTML pierwszy wpis może przyjmować następującą postać: < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ''h ttp : //www.w3. org/TR/html 4 /s tri c t . dtd">
Tworzenie stron WWW w praktyce
32
Wiersz ten określa, iż nasza strona została zakodowana przy użyciu języka HTML w wer sji 4.01 i nie zawiera żadnych elem entów z wersji poprzednich. Informuje on również o tym, że strona nie jest oparta na ramkach. Kolejny możliwy wpis jest widoczny poniżej i informuje, że użyliśmy języka HTML 4.01 w wersji przejściowej, czyli takiej, która zawiera również znaczniki z poprzednich wersji języka HTML, np. 3.2. Dla stron opartych na ramkach i HTML w wersji 4.01 przewidziano następujący wpis: W przypadku kodu strony wykorzystującej język XHTML deklaracja DOCTYPE w yglą da nieco inaczej. Pierwszy m ożliw y wpis dotyczy sytuacji, w której przygotowaliśmy stronę w ykorzy stującą w yłącznie język XHTM L i ściśle trzymamy się zaleceń specyfikacji. Innymi słowy, tego typu deklaracji używamy w stronach o „najczystszym” kodzie. Należy pa miętać, że gdy korzystamy z powyższej deklaracji, w kodzie strony nie możemy stoso wać ramek. Druga wersja deklaracji DOCTYPE dotyczy sytuacji, w której wykorzystujemy język XHTML, ale nie trzymamy się ściśle zaleceń specyfikacji. Dokładniej mówiąc, kod za wiera elementy języka XHTML oraz HTML. Korzystanie z tej formy nie jest najlepszym rozwiązaniem, choć w praktyce okazuje się, że dzięki łagodniejszemu spojrzeniu na za lecenia specyfikacji znacznie prościej zbudować działającą stronę zgodną z XHTML. Ostatni wariant nagłówka DOCTYPE dopuszcza stosowanie ramek. W pozostałych zale ceniach niczym nie różni się od deklaracji DOCTYPE w wersji Tran sitio n a l.
Ramy dokumentu XHTML Pierw szym o b o w ią z k o w y m elem entem języka HTML jest znacznik , który określa ramy naszego dokumentu. N ależy w ięc uściślić, że to, co znajduje się pomiędzy wspomnianymi ramami, jest naszym dokumentem HTML.
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
33
W przypadku strony budowanej w języku HTML znacznik nigdy nie za wiera dodatkowych atrybutów. Natomiast strona tworzona przy wykorzystaniu XHTML wymaga, aby otwierający znacznik obowiązkowo zapisać w postaci widocz nej poniżej.
Dodatkowe atrybuty służą do określania znaczenia poszczególnych znaczników wy korzystywanych w kodzie strony.
Nagłówek strony Bezpośrednio po otw ierającym znaczniku pow inien się znaleźć znacznik . Element ten również nie zaw iera żadnych atrybutów i w ystępuje w parze ze znacznikiem zamykającym. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "h ttp ://www.w3.org/TR/xhtmll/DTD/xhtml1-stri c t .dtd“>
Pomiędzy znacznikami znajduje się kilka ważnych dla konstrukcji całej strony elementów. Poszczególne wpisy, które m ogą znaleźć się w nagłówku strony opisałem w kilku kolejnych podrozdziałach.
Strona kodowa Zacznę od najważniejszego elementu, który jest odpowiedzialny za stronę kodową tworzonego dokumentu. Język HTML i XHTM L jako ponadsystemowy nośnik in formacji musi mieć możliwość obsługi różnych języków, a co za tym idzie, różnych znaków narodowych. W związku z tym zostały określone różne strony kodowe dla da nych języków i części świata. Dla naszego kraju odpowiednim standardem jest strona kodowa ISO 8859-2. Jest to strona kodowa działająca na wszystkich platformach systemowych: MS Windows, Unix, Linux, Mac OS i wielu innych, dlatego jako świa domy projektant stron musisz stosować się do tej normy. Ktoś może zauważyć, że prze cież wystarczy wpisać polskie znaki w Notatniku, a i tak wszystko zadziała. Oczywiście, nie można odrzucić takiego pomysłu, ale należy zwrócić uwagę, że tak zakodowane polskie znaki narodowe m ogą sprawiać problem y podczas wyświetlania na bardziej oryginalnych platformach, np. w telefonach komórkowych. By uzyskać popraw ną stronę kodową, mamy kilka możliw ości. Pierwsza to edytor z wbudowanym odpowiednim modułem do konwersji znaków „w locie”, np. używany przez nas kED. Druga możliwość to wstawianie polskich znaków w sposób tradycyjny, czyli w formacie W indows 1250, a następnie konwertowanie za pom ocą specjalnych programów — konwerterów, np. Gżegżółka XP (znajduje się na płycie CD).
34
Tworzenie stron WWW w praktyce
Uwaga
Konwersja strony kodowej za pom ocą programu Gżegżółka XP została dokładnie opisana w dodatku do niniejszej książki.
W zależności od tego, z jakiej strony kodowej korzystamy, w nagłówku dokumentu należy wstawić odpowiedni znacznik. Dla strony kodowej ISO 8859-2 odpowiedni wpis ma postać:
Natomiast dla strony kodowej Windows 1250 odpowiedni wpis wygląda tak:
W tej książce będę używał strony kodowej zgodnej z normą ISO 8859-2 i Tobie rów nież radzę skorzystać z tego sposobu kodowania polskich znaków. Poza opisanymi powyżej standardami kodowania polskich znaków istnieje jeszcze jedno rozwiązanie, dzięki któremu możemy tworzyć dokumenty uniwersalne. Ściślej rzecz biorąc, chodzi o to, że podczas tworzenia strony, na której zamieszczono dwa lub więcej języków, nie ma możliwości jednoczesnego poprawnego wyświetlenia znaków właści wych dla danego kraju. Rozwiązaniem takiego problemu jest stosowanie Unikodu (ory ginalna nazwa to Unicode — http://www.unicode.org). Doskonałość tego rozwiązania polega na przypisaniu unikatowego numeru wszystkim znakom charakterystycznym dla różnych alfabetów, np. łacińskiego czy cyrylicy. Poza tym w Unikodzie uwzględniono różne symbole, np. ®, O. Obsługa Unikodu została wprowadzona w głównych przeglądarkach, poczynając od numeru 4; dziś jest uwzględniana przez wszystkie liczące się przeglądarki. Możemy wyróżnić trzy odmiany Unikodu: UTF-7, UTF-8 oraz UTF-16. Zróżnicowa nie zostało wprowadzone w celu umożliwienia obsługi tego standardu na różnych plat formach i w różnych programach. Różnice pomiędzy tymi typami Unikodu sprowa dzają się do odmiennego zapisu znaków (format 7-bitowy, 8-bitowy oraz 16-bitowy). Uzyskanie polskich znaków zgodnych z kodowaniem UTF-8 jest możliwe dzięki edyto rowi kED lub za pom ocą konwertera Gżegżółka XP. Odpowiednie polecenie, które wstawisz w znaczniku , ma następują cą postać:
Struktura dokum entu XHTM L (HTM L) po dodaniu znacznika odpowiedzialnego za definicję strony kodowej wygląda następująco: < !00CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "h ttp : / /www.w3.org/TR/xhtml1/DTD/xhtml 1- s tr i c t .dtd">
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
35
Tytuł dokumentu Następnym znacznikiem, który zalicza się do grona stałych elementów strony WWW, jest < title > < /title > . Odpowiada on za ustawienie tytułu strony widocznego na pasku tytułu okna przeglądarki (rysunek 2.2). Znacznik ten powinien znajdować się pomiędzy . Bartosz Danowski
Rysunek 2.2. Tytuł strony
$
Bartosz Danowskr - MoziSla H refox
Tytuł jest jedynym elementem strony, który znajduje się w nagłówku dokumentu i jest widoczny bez konieczności analizy zawartości kodu strony.
Słowa kluczowe i opis strony We wstępie założyłem, że korzystasz już z sieci, dlatego oczywisty jest fakt, że kiedyś wyszukiwałeś interesujące Cię strony za pom ocą specjalnych wyszukiwarek lub ka talogów internetowych. W związku z tym, że nie mam pewności, czy wiesz, skąd w używanej przez Ciebie wyszukiwarce znalazły się strony, postaram się wprowadzić Cię w to ciekawe zagadnienie. Oczywiście, pod koniec książki wrócimy do tego tematu, gdy będziemy dodawać stronę do wyszukiwarek i promować ją w sieci. Otóż strony trafiają do serwisów indeksujących w dość prosty sposób; autor zgłasza stronę bądź jest ona odnajdywana na podstawie odnośników z innych popularnych wi tryn, a następnie wyszukiwarka wysyła specjalnego robota, który sprawdza stronę i dodaje ją do ogromnej bazy danych. To bardzo skrócona i uproszczona metoda działania. Robot sprawdza w kodzie strony kilka elementów i na tej podstawie dodaje ją do bazy. Pierwszym elementem jest znacznik < title > < /title > , o którym już wspominałem nieco wcześniej. Następnym elementem są słowa kluczowe (ang. keywords) witryny oraz opis (ang. description) strony. Poniżej zamieszczam odpowiednie znaczniki zawierające słowa kluczowe oraz opis strony.
36
Tworzenie stron WWW w praktyce
Konstrukcja znacznika jest stosunkowo prosta, pomimo że składa się on z kilku ele mentów.
V Uwaga
Znacznik może przybierać przeróżne formy, o których wspomnę na następ nych stronach. W przypadku języka XHTML znacznik wymaga zamknięcia w następu jący sposób: .
Zwróć uwagę na fakt, że słowa kluczowe zostały oddzielone od siebie za pom ocą przecinków i m ogą składać się z kilku wyrazów. W przypadku opisu strony zawiera on jedno, dwa zdania na temat zawartości strony, które pojawią się jako wynik szuka nia. Na podstawie tych zdań internauta najczęściej podejmuje decyzję o odwiedzeniu strony, którą znalazł za pomocą wyszukiwarki. Odpowiednie przygotowanie tytułu, słów kluczowych oraz opisu ma szczególne zna czenie dla odpowiedniej indeksacji strony przez wyszukiwarki oraz tego, jak ą pozycję zajmie ona w bazie danych. W związku z tym na końcu książki zamieściłem specjal ny rozdział, w którym znajdą się wszystkie niezbędne informacje związane z odpo wiednim przygotowaniem strony do indeksacji w bazach sieciowych wyszukiwarek. Na razie jednak wystarczą Ci dane na temat składni tych elementów. Przyjrzyjmy się teraz strukturze kodu strony uzupełnionej o słowa kluczowe i opis. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "http://www.w3.org/TR/xhtm ll/DTD/xhtm ll-strict.dtd">
Bartosz Danowski
Inne elementy składowe nagłówka strony Nagłówek może zawierać jeszcze kilka innych znaczników związanych z określeniem właściwości strony lub spełniających funkcję informacyjną. Tak się składa, że elementy te są związane ze znacznikiem .
Podany wpis ma charakter informacyjny i dzięki niemu możemy w kodzie zamieścić informacje o autorze strony. Dane te nie są widoczne na zewnątrz.
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
37
Następny element mogący wchodzić w skład nagłówka zawiera infor macje o prawach autorskich. Również w tym przypadku wpisy te nie są widoczne na zewnątrz i m ają charakter typowo informacyjny.
Wewnątrz strony możemy również zamieścić informacje na temat narzędzia, za pomocą którego został wykonany dany dokument. Z tego znacznika bardzo chętnie korzystają autorzy edytorów i w ten sposób reklam ują swój produkt. Podobnie jak elementy opi sane poprzednio, również i tym razem wpis ma charakter informacyjny i nie jest widocz ny na stronie. ma charakter ty powo informacyjny i specyfikacja dopuszcza, by autor strony sam tworzył dodatkowe wpisy informacyjne. W związku z tym możemy użyć takiej konstrukcji:
Oczywiście, to tylko przykład i jeżeli uznasz, że jest Ci potrzebna jeszcze jakaś in formacja, to możesz wymyślić odpowiednie słowo i wstawić je do odpowiedniego znacz nika. Pamiętaj jednak, że bardzo ważne jest, byś zachował ogólną konstrukcję znacznika. Nazwa powinna zostać wpisana do atrybutu name=" ", natom iast wartość musi być umieszczona w atrybucie content»" ". Znacznik może występować z jeszcze jednym atrybutem, h ttp -e qu iv, który zawiera informacje będące nagłówkiem HTTP:
Dla atrybutu http -e qu iv przewidziano kilka wartości, i tak:
spowoduje automatyczne odświeżanie dokumentu co x sekund. Polecenie to jest szcze gólnie przydatne na stronach, które są bardzo często aktualizowane i autorowi zależy, by odwiedzający zawsze widział aktualne dane, a nie zawartość przechowywaną w plikach tymczasowych przeglądarki na dysku. Polecenie to może również przybrać formę:
Spowoduje ono automatyczne przeniesienie odwiedzającego po upływie x sekund pod nowy adres zadeklarowany w sekcji URL. O przydatności tego polecenia nie muszę chyba nikogo przekonywać. Wiersz ten roz wiązuje problem ze zm ianą adresu i utratą odwiedzających — wystarczy pod starym adresem umieścić plik index.html z deklaracją http-equiv="refresh" i określonym no wym adresem, pod którym umieściliśmy naszą stronę. Każdy, kto wejdzie pod stary adres, zostanie automatycznie przekierowany pod jego aktualną wersję.
38
Tworzenie stron WWW w praktyce
Polecenie może jeszcze przybrać następujące formy:
definiuje adres autora witryny,
określa, kiedy nasza strona została wykonana,
wskazuje stronę kodową; zostało to już omówione. Warto wiedzieć, że część serwisów indeksujących korzysta z , który określa, czy dana strona powinna być indeksowana oraz czy linki na niej zawarte również m ają być dodane do bazy serwisu katalogującego. Przy zasto sowaniu polecenia robots atrybut content zawiera następujące dyrektywy informujące o dopuszczonych operacjach dla naszej strony: ♦ i ndex — strona powinna być zaindeksowana, ♦ noi ndex — strona nie powinna być zaindeksowana, ♦ f o l i ow — linki z tej strony powinny być zaindeksowane, ♦ nofol Iow — linki z tej strony nie powinny być zaindeksowane,
♦ al 1 równa się i ndex. fo l 1ow — wartość domyślna, ♦ none równa się noi ndex, nofol 1ow.
Dalej przedstawiam przykład zastosowania omawianego polecenia dla strony, która ma być indeksowana, natomiast odnośniki zawarte na niej mają zostać pominięte:
Kolejnym znacznikiem występującym w nagłówku strony jest polecenie , określające bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w jego treści.
Przydatność doskonale widać przy przenoszeniu dokumentów do innych ka talogów. Jak się później dowiemy, odsyłacze m ają różne formy, dlatego przy takiej operacji nietrudno o zerwanie odnośników, a pamiętanie przy przenoszeniu o zmianie każdego z nich jest kłopotliwe. Ostatnim poleceniem wchodzącym w skład znacznika jest < lin k />, który w naszym przypadku będzie odpowiedzialny za dołączanie zewnętrznego arkusza stylów. Element <1 i nk /> ma następującą konstrukcję: <1 ink rel="sty1esheet" href=”glowny.css" type="text/css" />
Za pom ocą <1 i nk /> możemy również podłączyć zewnętrzny plik zawierający Java Script. O przydatności tego rozwiązania nie muszę chyba nikomu mówić. Wyobraź sobie taką sytuację. Zbudowaliśmy witrynę zawierającą na każdej ze stron menu napisane
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
39
w JavaScript. Normalnie każdy z plików musiałby zawierać to samo menu i za każdym razem jego zawartość byłaby na nowo pobierana. Zastąpienie tego skryptu wewnątrz pliku XHTML (HTM L) znacznikiem < link /> oraz umieszczenie samego skryptu w oddzielnym pliku z rozszerzeniem skrypt.js pozwala nam raz załadować wspomniany skrypt bezpośrednio z sieci, a następnie w każdej z następnych stron pobierać go lo kalnie z katalogu plików tymczasowych, znajdującego się w każdym z systemów i sta nowiącego integralną część każdej przeglądarki. Poniżej znajduje się przykład rozbudowanego nagłówka strony WWW. Moim zdaniem wpisane elementy to optymalny wybór dla większości stron. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S tr ic t//EN" "h ttp :7/ www.w3.org/TR/xhtml1/DTD/xhtml 1- s t r i c t .dtd">
Ciało dokumentu Wiesz już, że dokument XHTML (HTML) ma swoje określone ramy oraz nagłówek. Elementy te mają znaczenie czysto konfiguracyjne lub informacyjne i poza tytułem nie są widoczne na zewnątrz. Teraz przyszła pora, by poznać kolejny element strony WWW, jakim jest jej ciało — . Wszystkie informacje, które znajdą się pomiędzy tymi znacznikami, są traktowane jako zawartość strony i zostają wyświetlone w oknie przeglądarki. Dalej przedstawiam położenie tego elementu w stosunku do pozostałych znaczników. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
Tworzenie stron WWW w praktyce
40
Bartosz Danowski
X*
*J
I HI
Rozdział 2. ♦ Język XHTML i HTML sprawcą całego zamieszania
41
W tej chwili w głównej części okna edytora pojawi się pełna i obowiązkowa struktura kodu strony (rysunek 2.4). Oczywiście, niektóre z wpisów wym agają ingerencji. kED 2.1.4.0 • bez_n*zwy PI*
Edyt).
Siukjj
XHTML
i
PHP
Ijv.Sc.ipt
r s
k
»
m U 6*3 ia M \ b ■ i «« | A- a‘
.» l a
[
Notatki
Opq«
3 | < k <41
? & :
il ■■J
i 28 ti B ¿3 * - o .3 :3
ai
di ! » ■ » m m m m m
alt
!= >
i [^g] 0 bez_nazwy (ISO) Q I <^x»1 v e r s i o n - i . 0 en co cH n g - -łs o -Ó Ś 5 $ -2 ?> < ; OOC TYPE h tm l PUBLIC " -//W 3 C //O T D XHTML 1 . 0 S t r i c t / / E N " " D T D /x h tm l1 - s t r i e t . d t d 'V < h tm l x m ln s -''h t t p : //w w w . w3. o r g /1 9 9 9 /x h t m l" xml : l a n g - " p l " la n g « " p l" a
; Asi
W [Vista) ffi <*0 i DA[System) ($L«i»EA [Media] IłJ FA[Dokumenty] ćti Ga [Pisą i£t HA [Roboczy]
< lin k r e l-" s ty le s h e e t" < /h e a d > --
h re f'
tutaj wstaw tresc strony
[n a z w a _ a r k u s z a _ s ty lo w .c s s ]
” t y p e - " t e x t /c s s "
/>
-■->
i < /b o d y > < /h tm l>
.J
‘ INS
NUM Rozmiar 716 B (0.70 KB)
Rysunek 2.4. Tworzenie struktury dokumentu za pom ocą edytora k E D — etap drugi
Przyjrzyj się uzyskanej strukturze strony WWW i zwróć uwagę, że w niektórych znacznikach wpisano wartości zamknięte w kwadratowe nawiasy. Poniżej zamieści łem stosowny przykład. < title > [ t y tu ł strony] < /title >
Przyklad witryny z ramkami <1 ink rel="Stylesheet" href="style.css" type="text/css" />
Menu Główna treść strony
Pierwszą rzucającą się w oczy różnicą w stosunku do klasycznej strony (bez ramek) jest deklaracja DOCTYPE. Sprawa jest jasna i nie wymaga dalszego omawiania. Miejsce znacznika zajmuje znacznik , który jest odpowiedzialny za deklaracje wyglądu naszych ramek. Otwierającemu znacznikowi
G ó ra L ew a
P ra w a
Prawda, że proste? Skoro wiesz, jak dzielić okno na odpowiednią liczbę ramek, pora poznać formę adre sowania dokumentów wewnątrz ramek. Chodzi o to, że hiperłącza w formie, jak ą po znaliśmy nieco wcześniej, nie zadziałają poprawnie na stronie opartej na ramkach. Efekt będzie taki, że przy wywołaniu hiperłącza strona, do której się ono odnosi, zosta nie wyświetlona w tym samym oknie, w którym znajdowało się hiperłącze. By tego uniknąć, musisz określić, w którym oknie wywoływany dokument ma zostać wyświe tlony — i tu z pom ocą przychodzą nam nazwy ramek, definiowane wcześniej. Przeanalizujmy przykład oparty na powyższej definicji ramek. Zdefiniowaliśmy 3 ramki na stronie i nadaliśmy im nazwy: Gora, Lewa, Prawa. Dokumenty w nich wyświetlane mają podobne nazwy. Dokument lewa.html zawiera definicje następujących odsyłaczy:
Tymczasem my chcemy, by po wybraniu dowolnego z tych odsyłaczy odpowiednia strona została pokazana w ramce o nazwie Prawa. Aby to osiągnąć, nasz odnośnik w pliku lewa.htm l m usim y w zbogacić o atrybut target="nazwa ramki docelowej". W naszym przypadku będzie to wyglądało tak: Informacje lInformacje 2
Atrybut target zawiera dodatkowo cztery zdefiniowane wartości. Są to: ♦ target="_blank", ♦ ta rg e t= "_ s e lf", ♦ target="_parent", ♦ ta rg e t= "_ to p ” .
Pierwsza wartość spowoduje otwarcie nowego okna przeglądarki i wyświetlenie w nim żądanego dokumentu. Kolejna, "_sel f ", jest domyślna i spowoduje, że dokument zosta nie wyświetlony w ramce, z której chcieliśmy dokonać przekierowania. Wartość trzecia dokona zamiany dokumentu nadrzędnego dla bieżącego dokumentu. Ostatnia natomiast spowoduje ponowne wczytanie zawartości okna i wyświetlenie nowego dokumentu, czyli dokona zmiany na miejscu dokumentu pierwszego w hierarchii skoków. Ostatnia wartość jest szczególnie przydatna, jeśli z dokumentu zawierającego zdefinio wane ramki ładujemy inny dokument, również zawierający ramki, np. jeśli chcemy je dynie za pom ocą HTML ponownie wczytać zawartość dwóch ramek.
Rozdział 3.
Grafika sieciowa Specyfikacja języka HTML (XHTML) pozwala na umieszczanie elementów graficz nych na stronie WWW. Twórcy pierwszych stron wzbogaconych o grafikę mieli do dys pozycji dwa formaty plików graficznych — GIF i JPG. Z biegiem czasu przybornik webmastera został rozszerzony o kolejne ciekawe formaty — PNG, Flash, a ostatnio SVG. O ile GIF, JPG i w nowszych przeglądarkach PNG nie wymagają dodatkowych narzędzi do wyświetlania grafiki na stronie, to pozostałe dwa potrzebują specjalnej „wtyczki” do przeglądarki, którą oglądający musi pobrać z sieci. Ogromna popularność Flasha spowodowała, że wszystkie obecnie dostępne przeglądarki domyślnie m ają in stalowane odpowiednie oprogramowanie. Na następnych stronach dowiesz się, czym różnią się poszczególne formaty plików graficznych oraz sposoby prezentacji grafiki na stronie. Na przykładzie Paint Shop Pro poznasz sposoby przygotowania grafiki na potrzeby sieci i tworzenia popularnych roz wiązań graficznych stron WWW. Informacje tutaj zawarte będą nam potrzebne przy tworzeniu naszych projektów i niestety nie da się pominąć tego rozdziału.
Uwaga
Nową wersję programu Paint Shop Pro m ożesz pobrać ze strony h ttp ://a p p s . corel.com /int/pl/psppxi.htm l. W swoim opisie skorzystałem co prawda ze starszej wersji programu (na niego wykupiłem licencję, pracując od kilku lat bardzo się do niego przyzwyczaiłem), ale myślę, że bez problemu sobie poradzisz z wykonaniem opisanych zadań w nowszej wersji. Pamiętaj, że na płycie CD dołączonej do ni niejszej książki zamieściłem również kilka darmowych i rozbudowanych programów graficznych.
Zanim przejdziemy do właściwej treści, chciałem zwrócić uwagę na jeszcze jeden istot ny fakt. Otóż jeżeli planujesz zająć się tworzeniem stron WWW w sposób komercyjny, tzn. założyć firmę i świadczyć usługi webmasterskie, to wydaje mi się, że powinieneś wziąć sobie do serca to, co zaraz napiszę. W naszym kraju ze względu na duże koszty pracy powstał specyficzny pogląd na pracę webmastera — twórcy stron WWW. Zgodnie z tą w izją osoba zajmująca się tworze niem stron WWW powinna znać się co najmniej na:
94
Tworzenie stron WWW w praktyce
♦ języku opisu strony (HTML, XHTML, CSS, XML), ♦ językach skryptowych client-side (JavaScript, VBS, Ajax, JSP), ♦ językach działających po stronie serwera server-side (PHP, CGI, ASP), ♦ bazie danych (mySQL), ♦ grafice (statyczna, Flash), ♦ muzyce (przygotowanie dźwięków do animacji Flash), ♦ typografii, ♦ administracji serwerami. Powyższe wyliczenie ma jedynie charakter poglądowy i bardzo często może wyglą dać zupełnie inaczej. Jednak idea jest zawsze taka sama — twórca stron WWW musi znać się na wszystkim. W moim odczuciu jest to totalną bzdurą. Dla porównania przyjrzyjmy się, jak to wygląda w cywilizowanych krajach, gdzie nad jednym pro jektem pracuje zespół ludzi. Niezbędnym minimum jest grafik, który przygotuje wszyst kie elem enty graficzne użyte na stronie, czuwa nad kolorystyką i układem całości. N astępną osobą jest programista, który pisze niezbędne skrypty lub aplikacje działające po stronie serwera. Za odpowiednią konfigurację serwerów odpowiada administrator. Nad całością projektu czuwa webmaster, zajmujący się tworzeniem gotowej strony, którą możemy podziwiać. Oczywiście, webmaster jest kierownikiem całego projektu i zleca wykonanie odpowiedniego skryptu czy aplikacji programiście, a wspólnie z grafikiem obmyśla wygląd i charakter witryny. Jak widzisz, nad projektem pracują co najmniej cztery osoby, pomiędzy które roz dziela się obowiązki. Takie rozwiązanie daje pewność, że strona będzie dobrze wyglą dała pod każdym względem. Niestety, specyfika naszego kraju wymusza, by webmaster znał się na wszystkim, bo tak jest taniej. Jeżeli spojrzymy na to od strony pracodawcy, to zatrudnienie jednej osoby znającej się na wszystkim kosztuje cztery razy mniej niż przyjęcie czteroosobowego zespołu specjalistów. Załóżmy, że jeden pracownik dostanie nawet większą wypłatę niż pierwotnie przewidywano, to i tak ostateczny koszt będzie znacznie niższy. Otóż wychodzę z założenia, że jeżeli webmaster zna się na wszystkim (grafika, typografia, programowanie, bazy danych, administracja serwerami), to jest przeciętny w każ dej z tych dziedzin. Natomiast osoba znająca się na jednym czy dwóch zagadnieniach może być prawdziwym ekspertem w swojej dziedzinie. Oczywiście, zdarzają się nieliczne wyjątki, kiedy jeden człowiek jest wybitnym spe cjalistą w wielu dziedzinach, jednak sytuacje takie są niezmiernie rzadkie. I choć mo głoby się nawet wydawać, że w naszym kraju takich specjalistów od wielu zagadnień jest dość sporo, to tak naprawdę może uda się ich zliczyć na palcach jednej ręki. Nato miast cała reszta „specjalistów” to osoby, które nie są do końca dobre w żadnym za gadnieniu. Przedstawię prosty przykład. Czy programista może być dobrym grafikiem? Moim zdaniem nie da się nauczyć grafiki komputerowej w prosty sposób, tak jak np. języka PHP. Oczywiście, programista może doskonale poznać program graficzny, każda
Rozdział 3. ♦ Grafika sieciowa
95
funkcja programu będzie dla niego znajoma i będzie wiedział, ja k z niej skorzystać. Jednak nie nauczy się myśleć jak grafik. Nie będzie miał oryginalnych pomysłów, a wszystkie jego prace będą jedynie mniej lub bardziej udolnymi kopiami tego, co już kiedyś powstało. Prawda może się wydawać dość brutalna, jednak z takim spojrzeniem na stan rzeczy zgadza się wielu ludzi zajmujących się tworzeniem stron WWW na poważnie. Oczywiście, jeżeli zajmujesz się tworzeniem stron typowo amatorsko i dla własnej przyjemności, to nic nie stoi na przeszkodzie, byś poznawał wszystkie dostępne tech niki. Pamiętaj jednak, żeby nie popaść w samouwielbienie i nie stać się kolejnym „specjalistą” od stron WWW. Po tym krótkim wstępie przejdźmy do głównego tematu rozdziału, czyli opisu stoso wanych formatów graficznych oraz sposobu przygotowania grafiki sieciowej.
Format Na stronie WWW możemy umieścić tylko kilka z dziesiątek formatów graficznych. W dalszej części niniejszego podrozdziału omówiłem najważniejsze formaty wraz z ich zaletami i wadami. Uważam, że powinieneś dokładnie przyjrzeć się kolejnym pod rozdziałom.
GIF jest formatem stosowanym od lat na stronach WWW; pomimo wielu ograniczeń ma się doskonale i jak na razie trudno jednoznacznie przewidzieć koniec jego wyko rzystania do tworzenia stron. Format ten powstał w 1997 roku (wersja 87a) na zamówie nie sieci CompuServe, a następnie został zmodernizowany w roku 1999 (wersja 89a). Kompresja danych odbywa się w oparciu o algorytm LZW i jest licencjonowana przez właściciela — firmę Unisys. GIF jest formatem ośmiobitowym lub, jak kto woli, po zwala na zapisanie maksymalnie 256 kolorów. Oczywiście, w razie potrzeby możemy w nim zapisać znacznie mniej kolorów, a co za tym idzie, zredukować paletę. Przyjrzyjmy się dokładniej metodzie kompresji, gdyż jej zrozumienie pozwoli na bar dziej świadome korzystanie z tego formatu. Otóż LZW jest bezstratną m etodą kom presji charakteryzującą się stopniem upakowania równym 4:1. Oznacza to, że obrazek po zapisaniu do tego formatu ma rozmiar około cztery razy m niejszy niż oryginał. Natomiast bezstratna kompresja oznacza, że obrazek zawsze wygląda dokładnie tam samo i zawiera te same kolory, co oryginał. GIF jest idealnym rozwiązaniem do zapisu wszystkich elementów graficznych, które nie są fotografiami, np. ozdobnych nagłówków, tekstu, wykresów i innych prostych elementów graficznych.
Tworzenie stron WWW w praktyce
96
Na rysunku 3.1 przedstawiłem trzy plamy barwne w różnych odcieniach koloru szare go. Mam nadzieję, że widać różnicę w odcieniach poszczególnych elementów. Jeżel nie, to musisz uwierzyć mi na słowo, że prostokąt z lewej strony ma kolor szary, nato miast element w środku ma kolor jasnoszary. Ostatni prostokąt ma kolor czarny. Rysunek 3.1. Prosty obrazek GIF — próba omówienia kompresji L ZW
Rysunek 3.2 przedstawia wycinek jednej linii z rysunku 3.1. Znajdują się na nim również trzy kolory, szary, jasnoszary oraz czarny. Poza tym widać podział na piksele — małe kwadraciki. Rysunek 3.2. Wycinek z rysunku 3.1
Algorytm kompresji LZW dzieli obrazek na linie, a następnie w każdej linii dokonuje sprawdzenia koloru zapisanego w każdym pikselu. Oto wynik analizy dla linii z ry sunku 3.2: ♦ szary — 10 pikseli (dalej oznaczę ten kolor literą S), ♦ jasnoszary — 16 pikseli (dalej oznaczę ten kolor literami JS), ♦ czarny — 9 pikseli (dalej oznaczę ten kolor literą C). Kompresja LZW po przeprowadzeniu analizy liczby powtórzeń koloru w danej linii zredukuje je do jednego i doda informację o tym, ile razy dany piksel powinien wy stąpić. Zapis linii z rysunku 3.2 będzie miał następującą postać 10S 19JS 9C. Jeżeli dane linie powtarzają się wiele razy po sobie, to stopień kompresji jest jeszcze lepszy. Oczywiście, podany przykład jest dużym uproszczeniem zasady rządzącej kom presją LZW, ale daje możliwość wyrobienia sobie poglądu na temat jej zasady działania. Dalej zamieszczam kilka przykładowych obrazków, byś mógł jeszcze lepiej zrozumieć, jak kompresuje się obraz w formacie GIF (rysunek 3.3).
97
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.3.
Kilka przykładowych obrazków zapisanych wformacie GIF 1326 bajtów
1040 bajtów
2682 bajtów
2823 bajtów
957 bajtów
Zwróć uwagę na to, że obrazki, na których dany kolor powtarza się w jednej poziomej linii, kompresują się znacznie lepiej niż te, gdzie linia ma orientację pionową. Format GIF pozwala na skorzystanie z kilku ciekawych właściwości. Mam tutaj na myśli możliwość określenia koloru przezroczystego (transparentnego), zastosowania przeplotu oraz animacji. Każdemu z zagadnień poświęciłem oddzielne podrozdziały. W każdym z nich znajdziesz opis jednej z właściwości oraz krótką instrukcję, jak z niej skorzystać w programie Paint Shop Pro.
Transparentność — kolor przezroczysty Transparentność lub przezroczystość w przypadku formatu GIF umożliwia zdefiniowa nie jednego koloru, który nie będzie widoczny w przeglądarce. Pamiętaj, że każdy ele ment graficzny zawsze ma kształt prostokąta i nie ma możliwości, by to zmienić. Ściślej rzecz biorąc, nie da się przygotować okrągłej grafiki. W praktyce z funkcji transparentności formatu GIF musisz skorzystać w przypadku, gdy chcesz uniknąć um ieszczania na stronie elementów o prostokątnych kształtach. Doskonałym przykładem będzie okrągły przycisk. Mam nadzieję, że po przygotowaniu pierwszego obrazka zrozumiesz, o co mi chodzi. Wspomniałem już wcześniej, że będziemy pracować z programem Paint Shop Pro, dla tego musisz go zainstalować na komputerze. Po uruchomieniu aplikacji tworzymy nowy obrazek, np. o rozmiarach 300x300 pikseli. W tym celu z menu P lik wybieram y opcję Nowy. W nowo otwartym oknie, widocz nym na rysunku 3.4, musisz określić rozmiar obrazka — Szerokość oraz Wysokość.
98
Tworzenie stron WWW w praktyce
Rysunek 3.4. Tworzenie nowego rysunku w Paint Shop Pro
®Tło rastrowe Tło wektorowe Tło - środki artystyczne Głębia kolorów:
a a ii
| RGB - 8 bitów/kanał
Kolor:
O Przezroczystość Wymagana pamięć:
432 KB
Wymiary:
300 x 300 Piksele OK
Anuluj
Pomoc
Następnie w polu Rozdzielczość określ rozdzielczość obrazka, tak by wynosiła 78 piksele/ cm. W związku z tym, że pracujemy z obrazkiem w formacie GIF, możemy od razu ustawić paletę kolorów na 256; służy do tego pole Głębia kolorów. W celu ułatwienia dalszej pracy z PSP (Paint Shop Pro) zamieszczam tu opis wyglądu okna programu oraz ważniejszych narzędzi (rysunek 3.5 i 3.6). Od teraz będę używał nazw z rysunku, natomiast Ty będziesz klikał właściwe ikony odpowiadające nazwom. Po utworzeniu nowego obrazu pora narysować kółko. W tym celu wybierz narzędzie o nazwie Kształty (rysunek 3.7) i na górnym pasku narzędzi wybierz koło z listy do stępnych kształtów. Dodatkowo wyłącz opcje Zachowaj styl i Utwórz w postaci wek torowej. Po prawej stronie na pasku z paletą kliknij w pierwszy z małych prostokątów oznaczonych strzałką. W nowym oknie wybierz kolor. Czynność powtórz dla drugiego prostokąta. W obu przypadkach wybierz ten sam kolor. Dopiero teraz możesz narysować w oknie obrazka (to ten biały kwadrat na środku) swoje koło. Wyobraź sobie, że rysujesz kwadrat i zaczynasz od jednego z narożników, a z pewnością uda Ci się za pierwszym razem narysować idealne koło. Musisz ustawić kursor w lewym górnym narożniku wyobrażonego kwadratu, nacisnąć i przytrzymać lewy przycisk myszy, a następnie przesunąć kursor w prawo i w dół. Dopiero teraz możesz zwolnić przycisk myszy.
Rozdział 3. ♦ Grafika sieciowa
99
«1 Corel Peint Shop Pro Photo XI - Obnzek2 | lf t
Edycje
ffid=k
Obr.zek
fiopMOW.nie
'. LiViś> 0 f e * «
'
Eiekty
'i
Wjrstwy
O tieldy Poprew zdjęcie *
_
P jlety -
I
..P o m n ie js z
„
Rysunek 3.5. Wygląd głównego okna programu Rysunek 3.6. Opis najważniejszych narządzi
m a*
D* «■
W s k a ź n ik S e le kcja P ipeta K a d ro w a n ie C z e rw o n e oczy
V J ' P ę d z e l/A e ro g ra f ** w lii— 1 t/ 0* CS A
T e k st ? ' K s z ta łty ? V ’ V ' . ..
....
Tworzenie stron WWW w praktyce
100
¿ J Corel Paint Shop Pro Photo XI - [Obrazek2* ® 150% (Tło)] O
&k
£dycja
^ id o k
Obrazek
w pasow anie
Efekty
Warstwy
Obiekty
Eopraw zdjęcie '
Naznaczenia P a le ty '
O&no
Pornos
Pomniejsz
.
Powiększ
Materiały
rfzie łfekaK
300 X 300 * RGB - 8 b itw
Rysunek 3 .7 . Tworzenie prostego rysunku opartego na kształcie koła
Teraz przyszła pora na określenie koloru, który ma być niewidoczny na stronie WWW. W tym celu z menu Obrazek w ybieram y opcję Paleta/Ustaw przezroczystość palety (skrót Ctrl+Shift+V). W nowym oknie nic nie zmieniaj i kliknij przycisk OK. Po chwili na ekranie monitora pojawi się nowe okno (rysunek 3.8). W nowo otwartym oknie wybieramy opcję Ustaw wartość przezroczystości dla wpisu palety, a następnie przesuwamy kursor myszy nad obrazek i klikamy kolor, który ma być niewidoczny. W polu obok wybranej opcji pojawi się numer koloru, który zosta nie ukryty. Teraz pozostaje tylko zapisanie obrazka na dysku w formacie GIF i umieszczenie go na stronie o zdefiniowanym tle. Sam zapis nie różni się niczym od podobnych czyn ności znanych z innych programów. W skrócie wygląda to tak, że klikamy kursorem myszy menu Plik i wybieramy opcję Zapisz jako. W nowo otwartym oknie wybiera my lokalizację dla pliku i nadajemy mu nazwę, a następnie w polu o nazwie Zapisz ja k o typ z listy wybieramy format GIF. Oczywiście, pamiętam, że jeszcze nie wiesz, w jaki sposób zdefiniować tło dla strony, dlatego przepisz podany listing i zmień w nim jedynie nazwę obrazka będącego transparentnym GIF-em.
101
Rozdział 3. ♦ Grafika sieciowa
4 l Corel Paint Shop Pro Photo W O
Plik
fcdycja
Widok
'Obrazek?* ® 150% (Tto)l
Qbrazek
Qopasowame fc o
i
; ; 0 Zachowaj gył
i
Efekty T -
Warstwy tjji
gjUtwóa w postaci wakwowaj
. [V;Wygładzam#opiyona
Ofeiekty
Popraw zdjęcie ’
Naznaczenia Pjlety ’
Ofcno
Pomo£
_ v Pomniejsz Sarowaić:
i
ł v Powiększ Styk:
Lm* wytai osrwe:
3 400 *3 |> -j 15
I
¿ n a
1: .............
**
I'
Bez przezroczystości Ustaw wartość przezroczystości do bieżącego koloru tła
# Ustaw wartość przezroczystości do wpisu palety:
62
*Q
i
Uwaga. W iele formatów plików (np. mapa bitowa systemu Windows) nie obsługuje
Anutui
Uwzględniał
Pomoc
w
m4 .• ®
Wszysdu#
fic6? y:7c)'i - *R ?55 G-?S5.??55 C 255; •- Obrazek
' skorzystać z Pomocy, hacrinii klawisz FI
3QQ v
mnąóń*
y »ndefcs - paleta M -k o fe rtw a
(
Rysunek 3.8 . Określamy kolor transparency Tansparentny G IF
W tym opisie przy tworzeniu obrazka od razu określiliśmy paletę kolorów, z której będziemy korzystać, ale nic nie stoi na przeszkodzie, by przygotować obrazek w więk szej liczbie kolorów, a następnie dokonać redukcji. Z tej metody skorzystam następ nym razem, więc nic się nie martw, gdyż na pewno dowiesz się, co mam na myśli i jak to zrobić.
102
Tworzenie stron WWW w praktyce
Przeplot
i
Przeplot jest kolejną bardzo ciekawą właściwością formatu GIF. Obrazek, w którym zastosowano przeplot, wczytuje się niejako fragmentami. Ściślej rzecz biorąc, za pierw szym przejściem zostaje wczytana co czwarta linia obrazka, dzięki czemu widać ogólny zarys całości. Z każdym następnym przejściem zostają wczytane kolejne linie, dzięki czemu obrazek wyostrza się i staje bardziej czytelny. Takich przejść jest cztery i dopiero po ostatnim przebiegu obrazek wygląda idealnie. Pamiętaj, że stosowanie przeplotu powoduje zwiększenie rozmiaru obrazka, ale daje pozorne odczucie szybszego wczytywania się strony. Na rysunku 3.10 przedstawiono w dużym uproszczeniu, jaka jest zasada wczytywania obrazka, w którym zastosowano przeplot. Rysunek 3.10. Schem at działania przeplotu
Przygotowanie obrazka z przeplotem w programie Paint Shop Pro ogranicza się jedy nie do dokonania pewnych zmian w procesie zapisu do pliku. Dalej dokładnie opisałem, gdzie i co musisz zmienić, by otrzymać obrazek z przeplotem. Z menu Plik wybierz opcję Zapisz jako. W oknie zapisu po wybraniu formatu GIF mu sisz kliknąć przycisk Opcje znajdujący się w prawym dolnym narożniku okna zapisu. Przeplot zostanie włączony w zapisywanym obrazku, gdy uaktywnisz opcję Z prze plotem w okienku widocznym na rysunku 3.12. Po zmianie domyślnych ustawień klik nij przycisk OK. Następnie w oknie z rysunku 3.11 wpisz nazwę obrazka, określ lokali zację, w której będzie zapisany plik, i kliknij Zapisz.
Animowany GIF Ogromną zaletą formatu GIF jest możliwość przygotowania obrazka, który będzie się poruszał. Oczywiście mam tutaj na myśli animację jakiejś czynności wewnątrz, a nie przesuwanie całego obrazka na stronie WWW. Animacja GIF-a polega na przygoto waniu kilku klatek, a następnie zapisaniu ich do jednego pliku (wraz ze specjalnymi kodami sterującym i) i wyświetlaniu jedna po drugiej. Z pewnością kojarzy Ci się to z klatkami filmu i takie porównanie jest jak najbardziej trafne. Procesem wyświetlania poszczególnych klatek steruje przeglądarka i na podstawie od powiednich kodów sterujących zapisanych w pliku wraz z obrazkami może „uruchomić” wybrany element naszej strony.
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.11. Zapisywanie obrazka w form acie GIF z włączonym przeplotem — etap pierwszy
Rysunek 3.12. Zapisywanie obrazka w form acie GIF z włączonym przeplotem — etap drugi
▼
Opcje zapisywania Wersja |
OK
]
O Wersja 87a • Wersja 89a Przeplot
Anuluj Pomoc
9 Z przeplotem C Bez przeplotu
! Uruchom optymalizator...
1
Zacznijmy od przygotowania poszczególnych klatek za pom ocą programu Paint Shop Pro. Na rysunku 3.13 przedstawiłem wszystkie klatki dla naszej animacji. Najprostszym sposobem przygotowania takiej animacji jest rozpoczęcie pracy od końca i przygoto wanie gotowego napisu, a następnie sukcesywne jego skracanie, by na końcu dojść do etapu, gdy w klatce pozostanie jedynie mały fragment pierwszej litery. W celu wsta wienia tekstu musisz skorzystać z ikony Tekst. W nowo otwartym oknie powinieneś wpisać tekst i całość zatwierdzić za pom ocą przycisku OK. Oczywiście, należy pamiętać podczas stosowania takiej metody, że ostatni obrazek bę dzie miał numer jeden, natomiast ten, od którego zaczynałeś pracę, będzie oznaczony ostatnim z dostępnych numerów.
Tworzenie stron WWW w praktyce
104
Rysunek 3.13. Poszczególne klatki animacji
iS
B « ?
B
b
/ *
B a ^ s (B a r
B
a
r t ^
(B a r t ? ^
B a r t
(B a r t ^
B a r t e k
^
s B a r t ę
B a r t e k
B a r t e k
B a r t e i ^ / ?
B a r t e
£
W moim przypadku przygotowałem dziewiętnaście klatek, a następnie zapisałem je na dysku twardym, nadając im nazwy będące numerami klatki w całej animacji, dzięki czemu znacznie wygodniej będzie mi pracować przy generowaniu animowanego GIF-a. Teraz przyszła pora, by uruchomić program do tworzenia animowanych GIF-ów. Nie stety najnowsza wersja Paint Shop Pro została pozbawiona wygodnego narzędzie do animacji plików GIF w związku z czym skorzystałem z darmowego programu o nazwie MS GIF Animator — http://www.jhepple.com/gif_animator.htm. Po uruchomieniu programu kliknij ikonę segregatora (rysunek 3.14) i w nowym oknie wskaż ostatnią klatkę animacji. Zatwierdź wybór, klikając przycisk Otwórz.
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.14. Przygotowywanie animowanego GIF-a — etap pierwszy
^
105
i c=> i fa i
Microsoft GIF Animator
s
r
H« u 4-| -fr j ►j ? j
D Options J
P Thumbnails Reflect image Otwieranie
+* (B e t
! gif_anim Wykonawcy
Album
Nr
j
¡fij 15.gif g l6 .g if g l7 .g if § jl8 .g r f
v
g jl9 .g if Nazwa pliku
(fś.gri
Pliki typu
: Utwórz
All Supported Formats
T3
I
Anuluj
Ready
Aby dodać kolejne klatki animacji, kliknij przycisk oznaczony strzałką na rysunku 3.11 „0 . W nowym oknie wskaż kolejną (licząc od tyłu) klatkę animacji i kliknij przycisk Otwórz Czynność tę powtórz dla wszystkich klatek tworzonej animacji. Rysunek 3.15. Przygotowywanie animowanego GIF-a — etap drugi
ES
\Microsoft GIF Animator - 19.gif
► ?l
* M e |x |
J i
Options I Animation | Image j
P
Thumbnails Reflect Image
Insert Szukaj w: j j , gjfanm Nazwa
Wykonawcy
Album
’jtó] 14.gif g l5 . g i f jta jl6 .g if jb jl7 .g if £ 18.gif g l9 .g if Nazwa pliku: Pici typu:
jl8.gif All Supported Formats
Nr
i
Tworzenie stron WWW w praktyce
106
Jeżeli chcesz, aby animacja trwała w nieskończoność, przejdź do zakładki Animation (rysunek 3.16) i zaznacz opcję Looping. Następnie dla animacji trwającej w nieskoń czoność zaznacz Repeat Forever. Możesz również określić, ile razy dana animacja ma zostać otworzona. Wystarczy, że w polu Image Count wpiszesz odpowiednią wartość. Rysunek 3.16. Przygotowywanie animowanego GIF-a — etap trzeci
^
M ic ro s o ft GIF A n im a to r - 19 .g if *
□ & y
m
%1b [ x 1 Options
+ 1+ 1
►! ?
Animation j image |
*
J Frame 81
Animation Width:
13 2
Animation Height:
P?1
Image Count:
38
“ F!
i"~ Looping
S
Repeat Count:
(l
f ~ Repeat Forever Trailing Comment: Frame 82
Frame 83
_d
Ready
Aby określić czas trwania animacji, przejdź do zakładki Image. Następnie kliknij przy cisk oznaczony za pom ocą strzałki na rysunku 3.17 iw polu Duration (1/100 s) ustaw czas, jaki musi upłynąć pomiędzy wyświetlaniem kolejnych klatek animacji. Po wprowadzeniu wszystkich ustawień przyszła pora, aby zobaczyć efekt naszej pracy. W ystarczy, że klikniesz przycisk Play widoczny w głównym oknie programu (rysu nek 3.18). Po chwili pojawi się nowe okno, w którym zobaczysz przygotowaną animację. Jeżeli chcesz wprowadzić jakieś zmiany, zamknij okno podglądu (kliknij znak x w pra wym górnym rogu). Następnie nanieś odpowiednie korekty i ponownie sprawdź efekt. Aby zapisać gotowy obrazek, kliknij ikonę symbolizującą dyskietkę (rysunek 3.19), a następnie w nowym oknie w polu Nazwa pliku wpisz nazwę i kliknij przycisk Zapisz. Sam proces publikacji na stronie nie różni się niczym od wstawiania zwyczajnego ob razka. Dalej zamieszczam przykład wstawienia mojej animacji do kodu strony.
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.17. Przygotowywanie animowanego GIF-a — etap czwarty
107
m
M icrosoft GIF Anim ator - l i
D
y U la l _
a lB lT H Pl Options j Animation
►!? ! Image j
Image Width:
j376
Image Height:
|171
Left: Frame 81 Top:
[o-
Duration (1/100 s): Undraw Method:
JLeave Frame 82
V
Transparency Traraparent Color:
□
Comment.
Frame 83 Ready
Na dołączonej płycie CD, w dziale Przykłady, znajdziesz opisany tutaj animowany GIF oraz poszczególne klatki, dzięki czemu będziesz mógł sprawdzić, jak wyglądają elementy składowe oraz gotowa animacja.
Redukcja palety kolorów Przy okazji omawiania formatu GIF postanowiłem również opisać, w jaki sposób można zredukować liczbę kolorów w palecie. Ściślej rzecz biorąc, chodzi o to, że nie ma większego sensu zapisywać pełnej palety 256 kolorów dla obrazka, w którym użyto zaledwie kilkunastu kolorów. Jako przykładowy obrazek posłuży mi element o wymia rach 200x200 pikseli, który w całości jest wypełniony gradientowym tłem (płynne przejście z jednego koloru w drugi). Ze względu na fakt, że obrazki w tej książce są czarno-białe, nie będę tutaj ich publi kował, ale jeżeli jesteś zainteresowany tym, ja k w yglądają po wykonaniu opisanych czynności, odsyłam do płyty CD, gdzie w dziale Przykłady zamieściłem wszystkie obrazki z różnych etapów. Najprostszym sposobem zredukowania kolorów jest skorzystanie z opcji Zmniejsz głębią kolorów znajdującej się w menu Obrazek. Znajdują się tam dodatkowe opcje, dzięki którym można ograniczyć liczbę kolorów do 16 (4-bitowy) lub 2 (1-bitowy). Oczywi ście, to za mało, dlatego warto zwrócić uwagę na opcję o nazwie X-Kolorów, dzięki której możemy redukować w niemal dowolny sposób liczbę kolorów ilustracji. Okno widoczne na rysunku 3.20 pozwala na ręczne ograniczenie palety z 256 do 2 ko lorów. Cały proces wymaga odrobiny zacięcia i kilku prób, by poznać zasadę działania tego narzędzia. Redukcję zaczynamy od określenia palety, z której chcemy skorzystać. Autorzy PSP przewidzieli w tym oknie dwie możliwości; pierwsza nosi nazwę Zoptymalizowane przej ścia m edianowe, druga Standardowa/D o publikacji w internecie. Paleta o nazwie Standardowa/Do publikacji w internecie wywodzi się z czasów, gdy przeglądarki miały
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.20. Ręczna redukcja kolorów palety dla obrazków zapisywanych w form acie GIF
1 09
r Podgląd
{?] Podgląd na obrazku
Powiększenie:
100 H i l
f g j ]
Chwyt
j +
Ustawienia
Paleta
Opcje
Liczba kolorów:
0 Wzmocnij oznaczone kolory o.
1
[» : 0 « Zoptymalizowane przecięcie mediano we Standardowa/D o publikacji w Internecie
0
U względnij kolory systemu Windows Zmr«ejs2 spad koloru
Metoda redukcji # Najbliższy kolor
Dyfuzja błędów
|
OK
"
j i
Anuluj
; 1
Pomoc
problemy z poprawnym odw zorow aniem kolorów. Twórcy przeglądarki Netscape Navigator stworzyli wtedy sześcian barw, na który składało się 216 bezpiecznych kolo rów. Stosowanie tego sześcianu dawało pewność, że strona będzie wyglądała na każdym komputerze dokładnie tak samo, jak życzył sobie tego autor. Dzisiaj nie musisz już pamiętać o tym archaicznym rozwiązaniu, ponieważ liczba osób pracujących na kom puterach przy wykorzystaniu palety 256 kolorów może być przedstawiana w promilach. W związku z tym odrzucamy bezpieczną paletę i ustawiamy opcję Zoptymalizowane przejścia medianowe. Następną ważną sprawą jest określenie sposobu redukcji. Również i tym razem okno zawiera dwie możliwości, Najbliższy kolor oraz Dyfuzja błędów. Teraz wystarczy w polu Liczba kolorów ustawić odpowiednią liczbę kolorów i kliknąć przycisk OK. Na ekranie od razu zobaczymy efekt redukcji kolorów. Jeżeli nie zadowala Cię jakość obrazka, spróbuj użyć opcji cofania — Edycja/Cofnij. Następnie wybierz inną liczbę kolorów lub zmień sposób redukcji. Na płycie CD zamieściłem przykłady kilku obrazków oraz sposobów, w jakie zostały w nich zredukowane kolory. Warto tam zajrzeć, ponieważ da Ci to możliwość wyrobienia sobie własnego zdania na temat re dukcji kolorów. Paint Shop Pro pozwala korzystać z bardzo wygodnego kreatora przydatnego przy zapi sywaniu plików do formatu GIF. N arzędzie to jest dostępne z menu Plik/Eksportuj i nosi nazwę Optymalizator plików GIF. Jeżeli uważasz, że opisana metoda jest zbyt skomplikowana, spróbuj uruchomić wspomniany dodatek i zobacz, jak on działa. W za sadzie wszystkie opcje, które tam zgromadzono, odpowiadają temu, o czym już napi sałem poprzednio.
110
Tworzenie stron WWW w praktyce
Jeżeli nadal masz wrażenie, że coś jest nie tak, kliknij kursorem myszy przycisk Użyj kreatora, który znajduje się w lewym dolnym narożniku okna widocznego na ry sunku 3.21. Ten kreator poprowadzi Cię krok po kroku przez cały proces optymalizacji. Rysunek 3.21. Narządzie do optymalizacji plików GIF
▼ Podgląd Przed:
a Powiększenie:
.¡¡¡¡¡J -0
[ jjg
chwyt:
[ * ]
Ostatnio używane
Z kompresją: 2 211 bajty
Bez kompresji: 90124 bajty Przezroczystość
Częściowa przezroczystość j Kolory ! Format
Czas pobierania
Które obszary obrazka mają stać się przezroczyste? O Żadne Istnieiąca przezroczystość obrazka lub warstwy W bieżącym zaznaczeniu Poza bieżącym zaznaczeniem Obszary pasujące do tego koloru
i | j ^ \ JJzyj kreatora
I
1
T olerancja
OK
| [
Anuluj
|
[_
Pomoc
JPG Drugim formatem używanym do publikacji grafiki na stronie WWW jest JPG. Format ten został wprowadzony przez Joint Photographic Experts Group. Kompresja w przy padku JPG wygląda zupełnie inaczej, niż to miało miejsce z GIF. Na samym początku zostaje utworzony obraz czarno-biały i oddzielnie są przechowywane informacje o ko lorach. Następnie zostaje dokonana analiza i z informacji o kolorach program usuwa pewne subtelne różnice, które nie są widoczne dla ludzkiego oka. Format JPG pozwala regulować stopień kompresji, dzięki czemu grafik ma wpływ na końcowy rozmiar ilustracji. Niestety, w tym przypadku wraz ze wzrostem kompresji następuje spadek jakości grafiki czy zdjęcia. Innym słowy, kompresja JPG jest kom presją stratną. Stopień kompresji może wynosić nawet 1:100, jednak zazwyczaj powy żej 1:30 jakość obrazu ulega widocznemu pogorszeniu.
Rozdział 3. ♦ Grafika sieciowa
111
Niestety, nie da się jednoznacznie określić, jaki współczynnik kompresji jest ideal nym rozwiązaniem, ponieważ każdy z obrazków jest inny i wymaga indywidualnego traktowania. Format JPG pozwala na zapisanie pełnej 24-bitowej palety kolorów — ponad 16 mi lionów kolorów. Dzięki temu idealnie nadaje się do przechowywania fotografii oraz bardzo kolorowych grafik. Jeżeli chcesz zapisać obrazek w formacie JPG, nie musisz redukować kolorów, ponieważ nie będzie to miało istotnego wpływu na rozmiar pliku, a spowoduje jedynie pogorszenie jego jakości. Podobnie jak w przypadku formatu GIF, również JPG pozwala na stworzenie progre sywnego obrazka — czyli takiego, który ładuje się „na raty”. Ściślej rzecz biorąc, niemal od razu widzimy rozmyty obraz, a z każdą chwilą (kolejnym przebiegiem) na biera on wyrazu. Przyjrzyjmy się teraz, w jaki sposób możemy stworzyć własny JPG. Do pracy będzie nam potrzebny Paint Shop Pro. Na razie zakładam, że mamy już odpowiedni obrazek, z którego chcemy skorzystać. Przy zapisie obrazka na dysku musisz w polu Zapisz ja k o typ wybrać format JPG; na stępnie wprowadź nazwę dla pliku i kliknij przycisk Opcje. Pierwsza sekcja widoczna na rysunku 3.22 pozwala na stworzenie obrazka, który bę dzie wyświetlany od razu lub progresywnie. Wystarczy, że rozwiniesz listę i wybierzesz jedną z dostępnych opcji (Kodowanie standardowe lub Kodowanie progresywne). Rysunek 3.22. Możliwości form atu JPG
Opcje zapisywania Kodowanie Typ
P/| Zapisz informacje EXIF
: Kodowanie standardowe
Kompresja Współczynnik kompresji: 20
Najniższa kompresja, najwyższa jakość
Podpróbkowanie chromatyczne:
Najwyższa kompresja, najniższa jakość
¡YCbCr 1x1 1x1 1x1 (brak)
Profil ICC H ] Osadź profil ICC: sRGB Color Space Profile
OK
Anului
Pomoc
Uruchom optymalizator.
Druga z widocznych sekcji odpowiada za regulację stopnia kompresji. Znajduje się tam suwak, którym ustalasz współczynnik kompresji. Bliżej lewej strony obrazek ma lepsząjakość, ale zajmuje więcej miejsca. Natomiast im bliżej strony prawej, tym ob razek mniejszy, ale jego jakość wyraźnie spada. Niestety, w tym oknie nie masz moż liwości sprawdzenia jakości obrazka po zastosowaniu kompresji, dlatego proponuję, byś nie używał tej metody zapisu.
Tworzenie stron WWW w praktyce
1 12
Znacznie wygodniejszym sposobem kompresji i zapisu obrazków w formacie JPG jest opcja Plik/Eksportuj/Optymalizacja plików JPEG. Na rysunku 3.23 przedstawiono okno narzędzia Optymalizator plików JPEG. Zdjęcie widoczne z lewej strony jest obrazkiem w postaci nieskompresowanej, natomiast fo tografia widoczna z prawej strony to podgląd ilustracji poddanej kompresji o współ czynniku 15. Mniej więcej w centralnej części znajduje się pole Ustaw wartość kompre sji na, w którym możesz regulować współczynnik kompresji, a efekt działania będzie widoczny na bieżąco. Druga zakładka pozwala włączyć tworzenie progresywnego ob razka. Natomiast w ostatniej zakładce znajduje się symulacja czasu pobierania danego zdjęcia przez modemy o różnych prędkościach. Rysunek 3.23. Optymalizacja plików JPG
Ustawienia
Bez kompresji: 2 359 420 bajty Jakość j
Z kompresją: 239 688 bajty
Format I C i» pobierania
Ustaw współczynnik kompresji obrazka. Uwaga: Większe wartości kompresji zmniejszają rozmiar pliku lecz pogarszają jakość obrazka.
Ustaw wartość kompresji na:
Podpróbkowanie chromatyczne:
20
lYCbCr 1x1 1x1 1x1 (brak)
O Zapisz dane EXIF (dostępne tylko w formacie Standardowy)
Mz» kreatora
OK
Anuluj
Pomoc
Po dobraniu odpowiedniego współczynnika kompresji i kliknięciu przycisku OK zo staną wprowadzone zmiany w obrazku i na ekranie pojawi się okno zapisu, w którym musisz podać nazwę oraz lokalizację dla pliku. N a dołączonej płycie CD w dziale Przykłady zamieściłem kilka przykładów zdjęcia skompresowanego w formacie JPG. Możesz tam zobaczyć obrazek nieskompresowany oraz przykłady obrazków o kompresji 20, 50 oraz 90. Gorąco polecam, byś zobaczył,
Rozdział 3. ♦ Grafika sieciowa
113
co się dzieje ze zdjęciem podczas stosowania różnych współczynników kompresji. Spróbuj dokonać porównania poszczególnych zdjęć i zwróć uwagę na to, że obrazek o stopniu kompresji 1:50 nadal ma akceptowalnąjakość.
PNG Trzecim i jak na razie ostatnim popularnym formatem publikacji grafiki rastrowej na stronie WWW jest PNG (Portable N etwork Graphics). Rozwiązanie to powstało w chwili, gdy właściciel praw patentowych do kompresji zastosowanej w formacie GIF zaczął pobierać opłaty licencyjne za używanie tego rozwiązania. PNG opiera się na ogólnie dostępnych darmowych algorytmach kompresji, dzięki czemu nie będzie nigdy konieczności opłacania jakichkolwiek licencji. Do podstawowych zalet tego formatu możemy zaliczyć: ♦ obsługę palety do 48 bitów w kolorze oraz 16 w odcieniach szarości, ♦ możliwość określania przezroczystości, ♦ obsługę korekcji gamma, ♦ obsługę trybu progresywnego, ♦ bardzo efektywną i bezstratną kompresję. Obsługa formatu PNG przez główne przeglądarki zaczęła się już od wersji 4 i z chwilą pojawiania się nowszych przeglądarek wygląda znacznie lepiej, jednak nadal nie jest idealna. Format PNG jest obsługiwany przez Paint Shop Pro. W menu Plik/Eksportuj znajduje się specjalne narzędzie Optymalizuj pliki PNG, dzięki któremu możesz przygotować swoje pliki w tym formacie. Praca z tym narzędziem w zasadzie niczym nie różni się od wykorzystania dwóch podobnych kreatorów opisanych przy okazji formatów JPG oraz GIF, dlatego nie widzę konieczności prezentowania po raz kolejny podobnych możliwości; proponuję natomiast, byś zapoznał się z możliwościami PNG we własnym zakresie, gdyż format ten z całą pewnością zajmie miejsce poczciwego GIF.
Inne metody redukcji rozmiaru zdjęć i grafiki Podrozdział ten dotyczy zarówno obrazków zapisanych w formacie JPG, jak i GIF czy PNG, więc proszę, byś informacji tutaj zawartych używał w odniesieniu do wszystkich typów grafiki rastrowej przeznaczonej na potrzeby sieci. Jednym z najprostszych sposobów zredukowania rozmiaru obrazka jest zmiana jego fizycznej wielkości. Zazwyczaj jest tak, że posiadane zdjęcia są zbyt duże do publika cji na stronie i wypadałoby je przeskalować. Skalowanie obrazka może odbywać się z poziomu języka HTML (XHTM L) za pom ocą atrybutów w id th i h e ig h t lub CSS. Niestety, takie postępowanie nie przynosi żadnego spadku rozmiaru pliku z obrazkiem. Pisałem, że zawsze publikujemy obrazki o takich rozmiarach, by nie było potrzeby
Tworzenie stron WWW w praktyce
114
ich skalowania; teraz dowiesz się, jak zmniejszyć fizyczny rozmiar obrazka, a co za tym idzie — pliku. Jako przykład znowu posłuży nam zdjęcie, nad którym pracowa łem przy okazji omawiania formatu JPG i kompresji. Oryginalny rozmiar tego zdjęcia wynosi 1792x1200 pikseli. Informacje te można uzyskać dzięki opcji Obrazek/Informacje o obrazku (rysunek 3.24). Rysunek 3.24. Odczytywanie informacji na tem at obrazka
44 Informacje o bieżącym obrazku
m
«
m
N o m a c * o obrazku { In to n a cje o twórcy | M o m a ą e o in a ku wodnym j M o m a q e EXIFj Plik źródłowy Nazwa pliku:
F:\Moje dokumenty\! - HELIONM W trakcie pisania \Tworzenie stron W W W w praktyce. Wydanie ll\CD-ROM\Przyklady^pg\duzy.jpg
Typ pliku:
JPEG
Obrazek
Stan 1792 x 1200 piksele
Zmodyfikowano:
Nie
227.584 x 152.400 mm
Ma zaznaczenie:
Nie
Wymiary:
Piksele na cm: G łębia pikseli/kolorów: Wykorzystanie pamięci
78.740 RG B-8
Liczba warstw:
1
Liczba kanałów alfa:
0
W pamięci RAM
Na dysku 126K
6300K
Cofnij:
OK
OK
Łącznie:
OK
G300K
Obrazek: Pamięć podręczna obrazków:
OK
[
OK
J
}
Anulu
; !
Pomoc
Dla porównania najpopularniejsze rozdzielczości ekranu to 1024x768 i 1280x 1024. Teraz mamy już jasność, że posiadany obrazek jest stanowczo za duży do publikacji na stronie i musi być zmniejszony. Przy oryginalnym rozmiarze po zapisaniu z kompresją 1:50 obrazek zajmuje na dysku 129 679 bajtów. Warto, byś sobie zapamiętał tę liczbę w celu późniejszego porównania z pomniejszonym obrazkiem. Pomniejszanie obrazka jest możliwe tylko w palecie 24-bitowej, a służy do tego opcja o nazwie Zmień rozmiar, dostępna w menu Obrazek. Pomniejszanie fotografii czy też grafiki jest możliwe na kilka sposobów. Pierwszy z nich to podanie w sekcji Wymiary w pikselach rozmiaru obrazka i ustawienie jako jednostki wartości Piksele. Zwróć uwagę, że po w pisaniu jednej z w artości druga jest określana automatycznie na podstawie
115
Rozdział 3. ♦ Grafika sieciowa
Rysunek 3.25. Zmiana rozmiaru grafiki lub zdjęcia
Wymiary oryginalne Szerokość:
Piksele: 1792 (227,584 Milimetry)
Wysokość:
Piksele: 1200 (152,400 Milimetry)
Rozdzielczość: 78,740 Piksele/centymetr Wymiary w pikselach (1792 x 1200 pikseli) Szerokość:
Wysokość:
r
3
v Q
n
00
Ci ▼]
Rozmiar wydruku Szerokość: [ Milimetry
Piksele/centymetr
J Zmień rozmiar/rozdzielczość metodą
▼
Dwusześciennie
¡ 0 Zachowaj oryginalny rozmiar wydruku
[5*1Zablokuj proporcje:
-rfr]
j 1,4933
do 1
( 2 Zmień rozmiar wszystkich warstw OK
l
;
Anuluj
]
|
Pomoc
współczynnika określonego w polu Zablokuj proporcje. W spółczynnik ten pozwala na zachowanie proporcji skalowanego obrazka, ale w niektórych sytuacjach można go wyłączyć i wtedy musisz ręcznie wprowadzić zarówno wysokość, jak i szerokość. Drugą metodą skalowania jest określenie procentowego rozmiaru obrazka względem oryginału. Wystarczy, że w sekcji Wymiary w pikselach ustawiasz Procenty i wpiszesz np. wartość dwadzieścia i obrazek będzie stanowił zaledwie jed n ą piątą oryginalnego rozmiaru. Pamiętaj, że wartość sto to obraz o oryginalnym rozmiarze. Przykładowo ten sam obrazek pomniejszony do dwudziestu procent oryginału na dysku zajmuje już je dynie 21 274 bajtów, czyli jest ponad sześć razy mniejszy, a jego rozmiar jest już do zaakceptowania dla potrzeb sieci. Na dołączonej płycie CD zamieściłem obrazek o ory ginalnych rozmiarach oraz jego pomniejszoną wersję; jeżeli chcesz zobaczyć, jak wy gląda on po zmniejszeniu, to zapraszam do działu Przykłady. Innym równie ciekawym sposobem redukcji wielkości pliku z obrazkiem jest spraw dzenie i zmniejszenie jego rozdzielczości. Zanim jednak opiszę, co mam na myśli, potrzebujesz kilku słów tytułem wprowadzenia. Otóż monitor komputerowy w zależno ści od jego jakości wyświetla obraz z rozdzielczością około 72 dpi. Dlatego też obrazek przeznaczony do publikacji w sieci nie musi mieć większej rozdzielczości niż wspo mniane 72 dpi. Oczywiście fotografie, które mają być poddawane dalszej obróbce i dru kowaniu, powinny mieć znacznie większe rozdzielczości, np. moja drukarka może wydrukować fotografię z rozdzielczością 2400 dpi, a skaner może odczytać obrazek w rozdzielczości większej niż 9600 dpi.
Tworzenie stron WWW w praktyce
116
Bardzo często bywa tak, że fotografie, jakie mamy do publikacji na stronie, zostały wykonane w rozdzielczości znacznie większej niż 72 dpi. Dlatego zanim opublikujesz obrazek, musisz sprawdzić jego właściwości i w razie potrzeby zredukować rozdziel czość. Do redukcji rozdzielczości posłuży nam to samo okno, za pomocą którego zmie nialiśmy wymiary obrazka. Niezbędna opcja znajduje się w sekcji Rozmiar wydruku — mam tutaj ma myśli pole Rozdzielczość. W ystarczy, że w tym polu zmienisz roz dzielczość na 72 dpi i po kliknięciu kursorem m yszy przycisku OK zostanie ona zmieniona.
Pozostałe formaty publikacji grafiki na stronie WWW W tym podrozdziale postanowiłem opisać kilka formatów używanych obecnie do pre zentacji elementów graficznych na stronie WWW, wymagających do działania specjal nych dodatków — pluginów. Mam tutaj na myśli rozwiązanie oferowane przez Adobe Flash oraz format SVG, który zdobywa rynek. Pierwsze rozwiązanie służy do publikacji na stronie grafiki w postaci wektorowej, dzięki czemu bardzo skomplikowane elementy zajmują niewiele miejsca. Ogromną zaletą gra fiki wektorowej jest to, że jest ona niezależna od rozdzielczości i wraz z jej wzrostem grafika ta nie traci na jakości. Strona oparta na technologii Flash jest niezależna od rozdzielczości. Ogromnym plusem tego rozwiązania jest fakt, że pozwala ono na animowanie dowol nych elementów oraz dodawanie dźwięków i muzyki, dzięki czemu możemy stworzyć doskonałe strony. Oczywiście, jak każde rozwiązanie, również Flash ma swoje wady; jest to bez wątpienia chociażby konieczność instalacji specjalnego dodatku do przeglądarki, dzięki któremu możemy oglądać te zapierające w dech w piersiach efekty. W zasadzie wszystkie nowe przeglądarki zawierają już niejako fabrycznie wbudowaną wspomnianą wtyczkę. Insta lując pełną wersję MS Internet Explorera, mamy możliwość oglądania stron, na których użyto technologii Adobe Flash. Dalej zamieszczam kilka ciekawych stron poświęconych technologii Flash oraz przed stawiających sporo ciekawych rozwiązań; mam nadzieję, że zachęcą Cię one do spraw dzenia się w tworzeniu animowanych projektów przy wykorzystaniu technologii Flash: ♦ http://www.adobe.com ♦ http://www.flashzone.pl ♦ http://www.2advanced.com ♦ http://www.favouritewebsiteawards.com ♦ http://helion.pl/search.cgi?szukaj =Flash Drugim bardzo ciekawym form atem prezentacji grafiki na stronie WWW jest SVG. Śmiało mogę napisać, że format SVG jest hitem ostatnich lat i ogromnym zagrożeniem dla rozwiązania oferowanego przez firmę Adobe.
Rozdział 3. ♦ Grafika sieciowa
1 17
Zacznę jednak od początku i wyjaśnię, czym je st SVG — SCALABLE VECTOR GRAPHICS. Otóż je st to rozw iązanie pozw alające na publikację na stronie WWW grafiki i tekstu w postaci wektorowej. Podobnie jak Adobe Flash format ten potrze buje specjalnej wtyczki, którą można pobrać ze strony http://www.adobe.com. SVG powstał jako rozszerzenie możliwości języka XML, a tworzenie dokumentów jest możliwe za pomocą zwyczajnego edytora tekstowego lub wyspecjalizowanych narzę dzi. Do najważniejszych możliwości formatu SVG możemy zaliczyć tworzenie sta tycznych i animowanych dokumentów, pracę z filtrami i możliwość łączenia grafiki rastrowej i wektorowej na stronie. Niestety, z braku miejsca w tej książce nie będę zagłębiał się w opis szczegółów i niu ansów SVG, natomiast dalej zamieściłem kilka odnośników do stron WWW, na któ rych możesz poczytać o SVG i zobaczyć praktyczne przykłady zastosowania (pamiętaj jednak o konieczności instalacji wtyczki): ♦ http://www.adobe.com/svg ♦ http://www.inkscape.org Wspomniałem, że do tworzenia grafiki przy wykorzystaniu SVG wystarczy zwyczajny tekstowy edytor, jednak ten sposób jest bardzo pracochłonny; powstało kilka ciekawych narzędzi do graficznego tworzenia dokumentów SVG. Dalej zamieszczam odpowiednie odsyłacze: ♦ http://www.adobe.com/products/golive/mobile.html ♦ http://www. inks cape, org O ile oprogramowanie firmy Adobe jest kosztownym rozwiązaniem, to z całą pewno ścią każdy początkujący twórca stron WWW może zainteresować się darmowym pro gramem Inkscape.
Wygładzanie krawędzi — antyaliasing Grafiki przygotowane na potrzeby publikacji w intemecie, np. przyciski, w przypadku gdy składają się z krzywych lub ukośnych linii, z całą pewnością będą miały poszar pane krawędzie, tak jak w przykładzie widocznym na rysunku 3.26. W powiększeniu krawędzi koła widać wyraźnie „zęby”, które są wynikiem ograniczeń grafiki rastrowej. Rysunek 3.26. Przykład poszarpanych krawędzi
1 18
V
Tworzenie stron WWW w praktyce
Grafika rastrowa to zbiór pikseli rozmieszczonych na układzie współrzędnych.
Uwaga
Poszarpane krawędzie w wielu przypadkach bardzo brzydko wyglądają na stronie WWW, zwłaszcza gdy mamy do czynienia z elementami o dużym kontraście, np. granatowymi przyciskami na białym tle. N a szczęście istnieje kilka sposobów na ukrycie nierów nych krawędzi. Najczęściej spotykanym rozwiązaniem jest stosowanie antyaliasingu. Metoda ta bazuje na niedoskonałości ludzkiego oka i polega na dodaniu przejściowych barw pomiędzy dwoma kolorami. W naszym przypadku niech to będzie białe tło i zielony element. Z antyaliasingu możesz korzystać tylko w 24-bitowej palecie i dlatego jeżeli przygo towujesz przycisk w formacie GIF, musisz wykonać go w pełnej palecie kolorów, a na stępnie dokonać redukcji do potrzebnej liczby kolorów. Antyaliasing m ożesz stosować zarówno podczas tworzenia elementów graficznych (figur, linii), jak i tekstu. Niezbędna opcja o nazwie Wygładzanie optyczne znajduje się w oknie właściwości wybranego narzędzia (rysunek 3.27). Rysunek 3.27. Włączanie wygładzania
Corel Paint Shop Pro Photo XI - Obrazek3 Plik
Edycja
Widok
Obrazek
Dopasowanie
Efekty
Wąrstt
N a rysunku 3.28 zamieściłem przykład tego samego okręgu co na rysunku 3.26, z tą różnicą, że został on wykonany przy włączonym antyaliasingu. Przyjrzyj się dokładnie krawędzi koła i zwróć uwagę na to, że automatycznie zostały dodane barwy przejściowe pomiędzy kolorem koła (zielonym) i tła (białym). Rysunek 3.28. Przykład działania wygładzania
Na przykładzie widać, że program dodał trzy odcienie koloru zielonego, dzięki czemu całe koło wydaje się idealnie gładkie. Dalej zamieszczam dokładne numery poszcze gólnych kolorów, byś m iał możliwość zauważenia różnicy na czarno-białym rysunku. ♦ kolor koła — #00C000, ♦ pierwsza barwa przejściowa — #37CE37, ♦ druga barwa przejściowa — #9EE79E, ♦ trzecia barwa przejściowa — #E0F7E0.
Rozdział 3. ♦ Grafika sieciowa
119
Rysunek 3.29 przedstawia gotowe koło narysowane przy użyciu opcji antyaliasingu. Rysunek 3.29. Widok kola z włączonym wygładzaniem
Stosowanie antyaliasingu jest wskazane przy tworzeniu wszystkich elementów, których krawędzie są zaokrąglone lub położone pod skosem. Natomiast nie powinno się go stosować w elementach o równych krawędziach, np. kwadratach czy prostokątach, gdyż w takim przypadku powoduje to pogorszenie jakości i niepotrzebnie zwiększa wielkość pliku. Niestety, poza sporymi zaletami antyaliasing ma również wadę, która ujawnia się pod czas próby połączenia formatu GIF i efektu transparentności. Problem polega na tym, że dookoła źle przygotowanego obrazka pojawia się cienka obwódka w kolorze innym niż tło strony WWW. Załóżmy, że publikujemy niebieski przycisk na stronie o kolorze czarnym. W takim przypadku obwódka, która pojawi się przy obrazku, może być biała. Na rysunku 3.30 dokładnie widać opisany przeze mnie efekt. Najprostszym sposobem pozwalającym na uniknięcie problemu z dodatkową obwódką jest przygotowanie ob razka na tle podobnym do tego, na którym będzie on publikowany. Następnie kolor tła określamy jako przezroczysty i obwódka jest niewidoczna na stronie, ponieważ barwy przejściowe są dopasowane do tła strony. Rysunek 3.30. Przykład brzydkiej białej otoczki. Jest to efekt połączenia antyaliasingu oraz funkcji transparentności
Innym sposobem pozwalającym uniknąć problemu z niechcianą obwódką jest przy gotowanie obrazka w dużo większym rozmiarze niż wymaga tego strona bez antyalia singu, a następnie przeskalowanie go w programie Paint Shop Pro do odpowiednich wymiarów potrzebnych na stronie WWW i zapisanie z określeniem koloru przeźro czystego (rysunek 3.31). Dzięki takiej prostej operacji obrazek nie ma obwódki ani po strzępionych krawędzi, a przy tym antyaliasing nie ma wpływu na wielkość samego pliku, ponieważ nie są dodawane barwy przejściowe.
Tworzenie stron WWW w praktyce
120
Rysunek 3.31. P rzykład obrazka z gładkimi krawędziami bez dodatkowej obwódki
Tworzenie gotowych rozwiązań na potrzeby stron WWW Zdobyłeś ju ż niezbędną wiedzę na temat formatów graficznych stosowanych na stro nie WWW. Poznałeś sposoby zmniejszania objętości grafiki przeznaczonej do publikacji w sieci, a teraz przyszła pora na przygotowanie kilku konkretnych rozwiązań przydat nych na każdej stronie.
Prostokątne i owalne przyciski Zaczniemy od przygotowania przycisków prostokątnych i owalnych, gdyż jest to naj prostsza czynność, a w następnym podrozdziale dowiesz się, jak wykonać przycisk o nieregularnych kształtach lub zaokrąglonych narożnikach. Wszystkie opisy starałem się maksymalnie uprościć, tak by nawet początkujący grafik mógł przygotować własny przycisk gotowy do użycia na stronie WWW. Oczywiście, osoby mające styczność z grafiką komputerową znają inne, znacznie doskonalsze spo soby tworzenia przycisków czy też innych elementów graficznych strony, dlatego na samym początku chciałem napisać, że moje przykłady to jedynie najprostsze sposoby wykonania podstawowych czynności. Pracę rozpoczynamy od utworzenia nowego obrazka. Rozmiar tego elementu może być większy niż planow any przycisk, dzięki czemu będzie nam znacznie wygodniej pracować nad całym projektem. Za tworzenie nowego projektu odpowiada opcja Plik/ Now y lub ikona symbolizująca białą kartkę. Pamiętaj, że rozdzielczość tworzonego obrazka nie powinna być większa niż 72 dpi, a do pracy powinieneś użyć 24-bitowej palety kolorów. Na rysunku 3.32 przedstawiono przykład zalecanych ustawień.
Pamiętając o problemach z przezroczystym elementem, w którym użyto antyaliasingu, warto ustawić kolor tła całego nowo tworzonego obrazka, tak by był zbliżony do ko lorystyki strony, na której przycisk zostanie użyty. Ma to szczególne znaczenie w przy padku tworzenia przycisków owalnych. Tło m ożesz definiować na samym początku w oknie nowego projektu lub po jego utworzeniu „wylać farbę” na cały obszar pro jektu. Ze względu na czytelność rysunków zamieszczonych w tej książce postanowiłem przygotować przycisk przeznaczony na stronę o białym tle, ale nic nie stoi na prze szkodzie, byś u siebie zmienił kolorystykę całości, tak by pasowała do Twojego projektu. Tworzenie przycisku rozpoczniem y od wybrania narzędzia selekcji (rysunek 3.33). W górnej części okna, w polu Typ zaznaczania, możesz określić kształt selekcji. Do wyboru masz kilka kształtów, np. prostokąt, owal, zaokrąglony prostokąt, etc. Po wybra niu odpowiedniego kształtu selekcji pozostaje włączenie opcji Wygładzanie optyczne. Pamiętaj, że antyaliasingu używamy tylko dla elementów, które mają okrągłe lub owalne elementy; natomiast jest on niewskazany dla prostokątów czy kwadratów, które są umieszczone idealnie w pionie czy też poziomie. Następnym krokiem jest narysowanie naszego przycisku w obszarze roboczym. Od powiedni przykład znajduje się na rysunku 3.34. Obsługa narzędzia selekcji ogranicza się do umieszczenia kursora w jednym z narożników, wciśnięcia i przytrzymania lewe go przycisku myszy, a następnie przesunięcia kursora, tak by powstał prostokąt o wy maganych rozmiarach.
122
Tworzenie stron WWW w praktyce
Rysunek 3 .3 3 .
& fl Corel Paint S hop Pro P hoto XI - [0 b ra ze k4 @ 250% (Tło)]
i Pu i i I u i ilu.,u l??l ll j U l iu u lx L u llJ X ll I.I..
! C o rd Paint Shop Pro Photo XI - [Obrazeki- ® 250% Cite)] ' O
Plik U
Edycja I •
Wfidok J
ib
fibrazek r 4
lO
dopasowanie '
Efekty '
r
Warstwy O
Ofaiekty
Zaznaczenia
Po pra w z d ję c ie *
P a le t / -
Ofcno .
Pornos
Po m niejsz
*
Pow iększ
Utwórz z * E N * a *n * zi
t. aby dodać
(x:299y:172)
!- O b ra ze k 300* 300 » RGB - 8 bitdw /kan ał
Rysunek 3 .3 4 . Tworzenie przycisku — etap trzeci
Udało nam się przygotować zarys przycisku i teraz pora zająć się jego wypełnieniem. W tym celu skorzystamy z ikony „wiaderka”, odpowiedzialnej za wypełnienie naszej selekcji wybranym kolorem. Po włączeniu wypełnienia musisz na pasku koloru z pra wej strony wybrać odpowiedni kolor, np. zielony. Następnie powinieneś nakierować kursor myszy nad zaznaczony obszar i kliknąć lewy przycisk myszy.
123
Rozdział 3. ♦ Grafika sieciowa
Mamy już przygotowany element o określonym kształcie i kolorze, jednak jest on zu pełnie płaski i nie ma nic wspólnego z efektownymi przyciskami, jakie znamy z innych stron. Nie martw się tym, bo teraz dodamy efekt przestrzenności do tego obrazka, dzięki czemu będzie on wyglądał o niebo lepiej. Odpowiednie narzędzie pozwalające stworzyć przestrzenny przycisk znajduje się w menu Efekty/Efekty 3D/W ygląd przycisku. Pamiętaj jednak, że w celu skorzystania z tego narzędzia nadal musisz mieć w łączoną selekcję przycisku na stronie; w przeciwnym razie opcja Wygląd przycisku nie zadziała. Jeżeli wyłączyłeś selekcję, to możesz sko rzystać z narzędzia Magiczna różdżka lub utworzyć przycisk od początku. Dodam, że w niektórych przypadkach lepszym rozwiązaniem jest stworzenie przycisku od nowa ze względu na pewne niedokładności różdżki. Praca z narzędziem do tworzenia przycisku jest bardzo prosta i ogranicza się jedynie do eksperymentów z suwakami znajdującymi się w oknie widocznym na rysunku 3.35. Sporą zaletą tego narzędzia jest możliwość podglądania na bieżąco uzyskanego efektu. Rysunek 3 .3 5 . Tworzenie przycisku — etap czwarty
Wygląd przycisku ▼ Podgląd
1 0 P o d g ląd na o brazku
Przed:
Po:
P ow iększenie:
W y so k o ść:
10
K ra w ę dź !
P rzezro czyste
C
O stre
Sze ro kość:
Anuluj
Kolor:
i
Pom oc
|
Po wprowadzeniu odpowiednich ustawień i kliknięciu przycisku OK na ekranie mo nitora pojawi się piękny przycisk stwarzający wrażenie przestrzennego obiektu (rysu nek 3.36). Dopiero teraz możesz wyłączyć migające linie selekcji — w tym celu uaktyw nij narzędzie selekcji, a następnie kliknij prawym przyciskiem myszy okno rysunku, jednak na zewnątrz zaznaczonego obszaru.
N i n y a t Ż a rn a tte n ie - Kliłrnij i przeciągnij, aby- zazn aczyć Ożyj klaw isza S h ift abv do d a ć d o istniejąceg o zaznaczenia lu b klaw isza C
Oczywiście, sam przycisk to nie wszystko i musisz się ze mną zgodzić, że powinien on zawierać jakiś tekst — opis. Dodanie opisu nie stanowi dla Ciebie problemu, po nieważ robiłeś to ju ż przy okazji tworzenia animowanego GIF-a. Jednak w przypadku przycisków, których zazwyczaj na stronie znajduje się kilka lub kilkanaście, a każdy jest inaczej opisany, warto dodać now ą warstwę i na niej umieścić nasz tekst. Dodatko wym atutem Paint Shop Pro jest możliwość pracy z grafiką wektorową, dzięki czemu każda zmiana opisu przycisku będzie dziecinnie prosta. Po wybraniu ikony odpowiedzialnej za wstawianie tekstu ustaw na górnym pasku rozmiar i rodzaj czcionki lub nadaj inne formatowanie. Następnie wybierz kolor tekstu i dla opcji Wygładzanie optyczne ustaw wartość Gładkie oraz dla opcji Utwórz jako ustaw Wektorowe. Kliknij przycisk odpowiedzialny za wprowadzenie tekstu i w no wym oknie wpisz opis przycisku (rysunek 3.37). W pisane dane zatwierdź, klikając przycisk Zastosuj. W tej chwili w roboczej części okna programu pojawi się tekst. Zwróć uwagę na to, że tekst znajduje się w ramce, a na jej narożach umieszczono miniaturowe kwadraty. Dzięki takiemu rozwiązaniu możesz skalować wielkość tekstu oraz jego wysokość lub szerokość. Wystarczy, że umieścisz kursor myszy na jednym z tych punktów, wciśniesz lewy przycisk myszy i przesuniesz go bez puszczania przycisku.
Rozdział 3. ♦ Grafika sieciowa
1 25
¿1 Corel Paint Shop Pro Photo XI - [Obrazek4* @100% {Wektorowa 1}] O
Elik
£dycja
^¿idok
Obrazek
dopasowanie
Efekty
Warstwy
Ofetekty
P o pra w zdjęcie *
Naznaczenia
Ofcno
Pomo&
Pąlety
Pow iększ Sjenwcsc go o łg m t» :
utwón )®ta
; ¿4
! Wenowwe
y Q
[ Wprowadzania tekstu Cennik
:e. Ń s r u n i i p rey m fc Ałi • kliknij a b y utw o > rv
Ć b n z e k S X ł * 3 0 0 x RGB -
Rysunek 3.37. Tworzenie przycisku— etap szósty Utworzony tekst musi znajdować się nad naszym przyciskiem, dlatego umieść kursor bezpośrednio nad środkiem tekstu, tak by pojawił się kursor w kształcie krzyża za kończonego strzałkami, a następnie trzymając wciśnięty lewy przycisk myszy, przesuń go w odpowiednie miejsce i zwolnij przycisk myszy. W tej chwili możesz przeskalować tekst, tak by współgrał rozmiarem z całym obrazkiem. Rysunek 3.38 przedstawia przycisk z opisem. Teraz przyszła pora na usunięcie zbędnej części obrazka za pomocą narzędzia odpo wiedzialnego za kadrowanie. Wystarczy, że po uaktywnieniu odpowiedniego narzędzia narysujesz prostokąt dookoła przycisku, a następnie dwa razy szybko klikniesz jego środek. Gotowy przycisk przedstawiono na rysunku 3.38. Na koniec tego krótkiego opisu warto jeszcze dodać kilka słów o tym, w jaki sposób zmienić tekst widoczny na rysunku. Z pewnością pamiętasz, że został on utworzony na wektorowej warstwie. Pierwszym krokiem, jaki musimy wykonać w celu zmiany tekstu, jest otwarcie okna właściwości warstw. W tym celu naciśnij klawisz F8 na klawiaturze. W prawej czę ści głównego okna programu pojawi się dodatkowe okno z widocznymi warstwami (rysunek 3.39).
Tworzenie stron WWW w praktyce
126
a ,¡¡¡a r
Corel Paint Shop Pro Photo XI - [Obrazek4* ® 250% (Tto)l O
£lik
£dycja
& id o k U S }
Qbrazek ^
fiopasowame
Efekty
* **
Wjrstwy II
Ofciekty
¿aznaczema
Eopraw zdjęcie *
Pjlety -
OJtno
P om o i
i. , Pomniejsz
.
Prawo:
“
O rt
-0 J1 . :l' ‘ '
• .* s r
[N a rzę d zie K adro w an ie - K liknij i przeciągnij. a b v narysować prostokąt k a d ro w a n ia . KTiknij
f r i | 5 y T 57j
( R 75P>.G:255 B
B X
Powiększ
-• O brazek: 300 * 3(
%
•4 o
x RGB - 8 b f tó w /k a n a ł . ' :
Rysunek 3.38. Tworzenie przycisku— etap siódmy Obok wektorowej warstwy będzie widoczny przycisk ze znakiem plusa. Kliknij go lewym przyciskiem myszy, a następnie dwukrotnie kliknij opcję, która pojawi się po niżej. W tej chwili w nowym oknie będziesz mógł zmienić opis przycisku. W celu za chowania zmian kliknij przycisk Zastosuj.
\ Uwaga
Pamiętaj, że zapisując przycisk do formatu JPG, GIF lub PNG, tracisz informacje o warstwach i dlatego koniecznie zachowaj kopię przycisku w macierzystym formacie programu Paint Shop Pro o nazwie PSP.
Pracując z warstwami, w prosty sposób możesz przygotować przyciski do strony, na której chcesz użyć efektu rollover — po najechaniu kursorem myszy na przycisk ulega on zmianie na inny. Dokładny opis, jak to zrobić, znajdziesz w jednym z następnych rozdziałów.
Przyciski o nieregularnych kształtach W tym podrozdziale zajmiemy się przygotowaniem przycisku o bardzo nieregularnych kształtach — takich, jakich nie da się uzyskać za pomocą typowych selekcji opisanych kilka stron wcześniej.
Rozdział 3. ♦ Grafika sieciowa
1 27
IÍÍ0HE
& i Corel Paint Shop Pro Photo XI - [Obrazek4* ® 250% (Wektorowa 1}) >
£lik l
£dycja J
V
¡#idok
Qbrazek
C>
dopasowanie
Wjrstwy
<«?
Ofeiekty
Naznaczenia
Popraw zdjęcie ’
Ronntm
.» J im ln u
Efekty
j«f.nostk'n
Styl aóonfei:
Wyrówna™»!
, .w.. b / u - i i
m
TsiaBmi
Palety *
Kieruneki V
J-
”
............................
M| | I II I | | | | l^i | | | | | || | . I II PPMI | | | I i | I I I I I'?? I I I I I I i I I I I I Pu3.! I I I II I U I I H?I I I I I I I I I I I I
1!
Wgrewadz tekst tutaj:
Oferta
tekst
^ a r z g d a e Tefcsk tó fc n ię ;ig o b ie k tu w
e
¿
t
o
¡
o
w
^
o
t e ks t u n a ś c ie f c e
y :t^ -
- 8 b itó v ^ k a n a í
j
Rysunek 3 .3 9 . Zmiana tekstu dostępnego na warstwie w ektorow ej — etap pierw szy
Na rysunkach 3.40 i 3.41 widać przykładowe przyciski, które wspólnie stworzymy. Teraz, kiedy wiemy, co nas czeka, możemy zabierać się do pracy. Zwróć uwagę, że przykłady są diametralnie różne, ponieważ w przypadku pierwszego rozszerzamy głów ny element o dodatkowe ozdoby — koła w narożnikach. Natomiast w drugim przypad ku główny element obcinamy o pewne fragmenty. Rysunek 3 .4 0 . Przykład pierwszego przycisku
Rysunek 3 .4 1 . Przykład drugiego przycisku
Tworzenie stron WWW w praktyce
128
Zacznijmy od stworzenia nowego obrazka, tak jak to robiliśmy poprzednio — rów nież i tym razem powinien mieć rozdzielczość 72 dpi oraz 24-bitową paletę kolorów. Następnie konieczne jest włączenie siatki ułatwiającej rozplanowanie elementów na stronie. Robi się to za pom ocą opcji Siatka z menu Widok. Zacznijmy od pierwszego przykładu. Opierając się na siatce, za pomocą selekcji o od powiednim kształcie rysujemy koło, które będzie się znajdowało w jednym z narożni ków. W eź pod uwagę, że musisz jeszcze dorysować pozostałe elementy, a do tego potrzeba miejsca. Pierwsze koło ju ż mamy, ale teraz nasuwa się pytanie, w jaki sposób dodać pozostałe trzy. Rozwiązanie jest bardzo proste wystarczy, że przytrzymasz wciśnięty klawisz Shift, a obok kursora pojawi się mały znak plusa, co oznacza, że możesz rysować kolejne elementy bez obawy, że nowa selekcja wyłączy poprzednią. Pamiętaj jednak, że klawisz ten musisz przez cały czas trzymać wciśnięty i możesz go zwolnić dopiero wtedy, gdy narysujesz ostatnie, czwarte koło (rysunek 3.42). Rysunek 3.42. Tworzenie pierwszego przycisku — etap pierwszy
Następnym etapem tworzenia elementu z pierwszego przykładu jest dodanie kolejnej selekcji w kształcie prostokąta. Również i tym razem musisz w czasie rysowania przy trzymać wciśnięty klawisz Shift. Prostokąt musimy wrysować tak, by środki jego na rożników pokrywały się ze środkami poszczególnych okręgów. W tym momencie bar dzo potrzebna okaże się pom ocnicza siatka, którą włączyłeś na samym początku. Po narysowaniu ostatniego elementu i zwolnieniu klawisza Shift na ekranie powinien po jawić się zaznaczony obszar o kształcie zgodnym z naszym przykładem (rysunek 3.43). Jak ju ż zapewne zauważyłeś, selekcje zostały połączone w całość. Rysunek 3.43. Tworzenie pierwszego przycisku — etap drugi
Rozdział 3. ♦ Grafika sieciowa
129
Teraz pozostaje wypełnienie selekcji za pom ocą dowolnego koloru i dodanie efektu wypukłości. W tym przypadku nie będziemy mogli skorzystać z opcji Wygląd przycisku, ale zamiast niej spróbujemy użyć opcji Faza zewnętrzna, która znajduje się w menu Efekty/Efekty 3D. W nowo otwartym oknie musisz poeksperymentować ze znajdującymi się tam opcjami, tak by uzyskać zadowalający efekt. Drugi przykład jest zupełnie inny, gdyż z jednego obszaru wyciąłem pewne fragmenty. Przyjrzyjmy się dokładnie, jak zrobić przycisk z drugiego przykładu. Również tym razem tworzymy nowy rysunek, włączamy siatkę selekcji i rysujemy za pom ocą na rzędzia selekcji prostokąt. Następnie wybieramy selekcję w kształcie koła, wciskamy kla wisz Ctrl i zaczynamy rysować okrąg. Musisz jednak pamiętać, że selekcja w kształcie koła jest rysowana od środka okręgu, dlatego kursor umieść dokładnie na narożniku prostokąta i narysuj okrąg, tak by jego obwód stykał się z przeciwległym wierzchoł kiem prostokąta. Wycięcie drugiego boku prostokąta wygląda dokładnie tak samo, z tą drobną różnicą, że tym razem środkiem okręgu powinien być wierzchołek znajdujący się po przekątnej. Na rysunku 3.44 widać pierwszy etap pracy. Rysunek 3.44. Tworzenie drugiego przycisku
Na koniec pozostało dodanie efektu wypukłości i tym razem skorzystamy z innej opcji o nazwie Wycinek, znajdującej się w menu Efekty/Efekty 3D. Teraz również po winieneś poeksperymentować z ustawieniami tej funkcji w celu uzyskania dobrego efektu. Pamiętaj, że na bieżąco możesz kontrolować wszystkie zmiany w oknie pod glądu znajdującym się w górnej części.
Cięcie grafiki na mniejsze elementy W drugim rozdziale dowiedziałeś się, jak wstawiać obrazki na stronie oraz jak defi niować graficzne odnośniki do innych stron. Teraz przyszła pora, byś dowiedział się, jak tworzyć elementy graficzne, które są publikowane na stronie WWW, ale składają się z mniejszych części. Wydaje mi się, że trafnym porównaniem dla tej techniki są puzzle, gdzie z małych kawałków powstaje cały obraz. Cięcie na mniejsze kawałki grafiki przeznaczonej do publikacji na stronie ma kilka zalet: ♦ pozwala przyśpieszyć wczytywanie strony, ♦ umożliwia stworzenie obrazka będącego odnośnikiem do kilku miejsc bez konieczności używania mapy odsyłaczy, ♦ daje możliwość przygotowania bardzo ciekawych graficznych stron WWW.
Tworzenie stron WWW w praktyce
130
Pocięty obrazek na stronie jest publikowany w tabeli, dla której określa się dokładny rozmiar oraz wyłącza obramowanie i odstępy pomiędzy komórkami, tak by wszystkie części układanki idealnie do siebie pasowały. Przygotowanie pociętej grafiki bez specjalnych narzędzi jest rzeczą dość skompliko w aną i wymaga niesamowitej wręcz precyzji, dlatego wiele firm dostrzegło potrzebę przygotowania specjalnych programów, które zajmą się „krojeniem” obrazów. W tej książce skorzystamy z dodatku, jaki znajduje się w programie Paint Shop Pro. Program ten poza tym, że tnie obrazki, może również przygotować odpowiedni kod tabeli wraz z obrazkami, który następnie możemy wkleić do naszej strony. Po otwarciu obrazka z menu Plik/Eksportuj powinieneś wybrać opcję Kreator kawałko wania obrazka. W oknie widocznym na rysunku 3.45 pojawi się obrazek, który będziemy ciąć na mniejsze kawałki. Rysunek 3.45. Cięcie obrazka na kawałki — etap pierw szy
X: Przejścia WłaściwoscH^omorkT Kreator ptze|ść.. Adres URL: http://danowski.pl
'r
zastępczy:
'r
Bartosz Danowski
JPEG
Cel:
Lewo:
| Optymalizuj komórkę...
j
H3 Zastosuj optymalizację do całego obrazka 497
Góra:
113
Dók
1124
Zapisz ustawienia... Prawo:
Ptzeiścia włóczone nie
1652
[ y l Uwzględnij komórkę w tabeli
I Zapisz w schowku
Zapisz tako.
Pomoc
J
[ Zagaduj ustawienia...
Wyczyść
Prefeienqe
Zamkmi
Sam proces podziału obrazka ogranicza się do wybrania ikony noża znajdującej się w lewym górnym narożniku opisywanego okna. Następnie przesuwamy kursor myszy na obrazek w oknie podglądu i trzymając wciśnięty lewy przycisk myszy, przesuwamy go nad obrazkiem. Po puszczeniu przycisku myszy powinna pojawić się czerwona linia podziału. Jeżeli mamy narysowanych już kilka linii, np. pionowych, i chcemy doryso wać linie poziome, to program automatycznie rysuje linie pomiędzy dwiema pionowy mi kreskami. Jeżeli chcemy przesunąć naszą linię podziału, to wystarczy kursorem myszy przejechać poza pionową linię podziału i zwolnić przycisk myszy.
Rozdział 3. ♦ Grafika sieciowa
131
Obrazek może być podzielony na dowolną liczbę prostokątnych elementów, a w razie pomyłki możemy za pomocą ikony gumki usunąć zbędne linie podziału. Oczywiście, nic nie stoi na przeszkodzie, by przesuwać już naniesione podziały. Wystarczy umieścić nad nimi kursor myszy i po jego zmianie na strzałkę skierowaną w praw ą i lewą stro nę nacisnąć lewy przycisk myszy i przesunąć linię podziału. W oknie narzędzia Właściwości komórki możemy dla każdej części dodać odnośnik. Wystarczy, że wybierzesz ikonę strzałki i wskażesz fragment obrazka, który ma być od nośnikiem — zostanie on wyróżniony zielonym obramowaniem. Następnie w polu Adres URL powinieneś wpisać adres strony lub pliku, do którego ma prowadzić odsyłacz. Poza tym w polu znajdującym się poniżej możesz określić tekst alternatywny, który zostanie wyświetlony u osób, które nie m ają graficznej przeglądarki lub też wyłączyły wyświetlanie obrazków na stronie. W chwili gdy określimy wszystkie linie podziału oraz wprowadzimy odsyłacze, pozo staje nam określenie formatu, w jakim obrazki zostaną zapisane na dysku. Służy do tego opcja o nazwie Format. Z listy powinieneś wybrać jeden z dostępnych na niej forma tów zapisu grafiki — GIF, JPG lub PNG. Następnie za pomocą opcji Optymalizuj ko mórką możesz włączyć narzędzia umożliwiające kontrolę właściwości danego formatu (zostały one już opisane nieco wcześniej). Po określeniu formatu obrazka pozostaje zapisanie całości na dysku; w tym celu kli kamy kursorem myszy przycisk Zapisz jako. W nowo otwartym oknie musimy okre ślić jedynie nazwę pliku, w którym zostanie zapisany kod strony, natomiast program automatycznie ponumeruje obrazki. Kliknięcie kursorem myszy przycisku Zapisz jest równoznaczne z wykonaniem operacji pocięcia obrazka na mniejsze części. Na rysunku 3.46 przedstawiono przykład obrazka pociętego na mniejsze części. Roz myślnie zwiększyłem odstęp pomiędzy komórkami, tak byś mógł zobaczyć, z ilu części składa się przykładowy obrazek. Rysunek 3.46. Podgląd strony z pociętym obrazkiem
132
Tworzenie stron WWW w praktyce
Mapa odsyłaczy Przy okazji opisywania graficznych odsyłaczy w rozdziale pierwszym wspomniałem o tym, jak tworzymy mapy odsyłaczy. Przedstawiony tam opis bazował na pracy z ko dem oraz oglądaniem obrazka w programie graficznym, natomiast teraz opiszę znacznie prostszą i wygodniejszą metodę. Używany przeze mnie w tej książce Paint Shop Pro w menu Plik/Eksportuj zawiera na rzędzie o nazwie Kreator mapy obrazka. Narzędzie to jest bardzo podobne do Kreatora kawałkowania obrazka, dlatego opiszę je jedynie w skrótowej formie. Na górze znajduje się zdjęcie, które ma być m apą odsy łaczy. Wystarczy, że z paska ikon w tym oknie wybierzesz odpowiedni kształt, który chcesz zaznaczyć, i na rysunku naniesiesz właściwe obszary. Do wyboru masz koło, prostokąt oraz obszar dowolny. Rysowanie aktywnych obszarów ogranicza się jedynie do kliknięcia m yszą rysunku i narysowania koła lub prostokąta w taki sam sposób, jak to robiłeś w program ie Paint Shop Pro. N ieco inaczej wygląda oznaczenie obszaru 0 nieregularnych kształtach. W tym przypadku klikasz pierwszy punkt na rysunku 1 zwalniasz przycisk myszy, następnie przesuwasz mysz w następny punkt i ponownie klikasz lewym przyciskiem myszy. Czynność powtarzasz tak długo, aż oznaczysz cały obszar. Ostatnie kliknięcie powinno skończyć się w miejscu, z którego rozpoczynałeś. Po narysowaniu wszystkich aktywnych obszarów pora dodać odsyłacz; w tym celu za pom ocą ikony strzałki klikasz wybrany obszar, tak by został on wyróżniony kolorem zielonym, a w polu Adres URL wpisujesz adres, do którego ma prowadzić hiperłącze. Do każdego odnośnika możesz dodać alternatywny tekst. Zapis obrazka na dysku niczym nie różni się od analogicznej czynności, którą opisa łem przy okazji omawiania narzędzia Kreatora kawałkowania obrazka. Używając opisanego narzędzia, w prosty i szybki sposób stworzysz bardzo skompli kowane mapy odsyłaczy, wkładając w to minimum pracy; dlatego warto, byś sięgnął po rozszerzenia programu Paint Shop Pro, który — jak już miałeś okazję się przekonać — jest rozwiązaniem przeznaczonym dla twórców stron WWW.
Rozdział 4.
Kaskadowe arkusze stylów Pisząc o języku XHTML lub HTML 4.01, nie sposób pominąć kaskadowe arkusze stylów. Właściwie bez CSS nie da się obecnie zrobić ciekawie wyglądającej strony, która do tego jeszcze byłaby zgodna ze specyfikacją wymienionych języków. Na początku wyjaśnijmy sobie, czym są owe kaskadowe arkusze stylów. Pojęcie to pojawiało się w drugim rozdziale prawie na każdej stronie, ale nie zostało dokładnie omówione. Od wersji HTML 3.2 wprowadzono pewne innowacje w strukturze języka i zaczęto zastępować część znaczników innymi. Nowe znaczniki nazwano kaskadowy mi arkuszami stylów i sukcesywnie je rozbudowywano. Obecnie najnowsza specyfika cja CSS nosi numer 2.1. Prowadzone są również prace nad jej trzecią odsłoną. Dzięki stylom możemy mieć pełną kontrolę nad formatowaniem dokumentu. Do tej pory żadne z poleceń języka XHTML czy HTML nie pozwalało nam na regulowanie odstępów pomiędzy blokami oraz nakładanie ich na siebie. Warto wspomnieć o tym, że style umożliwiają kontrolę tła poszczególnych części dokumentu, właściwości czcio nek zastosowanych na stronie, tabel, formularzy itp. Kaskadowe arkusze stylów, w skrócie CSS, możemy określić jako narzędzie do forma towania wyglądu dokumentów. N atom iast za pom ocą samych stylów nie możemy stworzyć strony. Podobnie jak język XHTML i HTML, kaskadowe arkusze stylów są standaryzowane przez W3 i tam należy szukać odpowiedniej specyfikacji.
Uwaga
W niniejszym rozdziale omówiłem tylko część możliwości, jakie oferują kaskadowe arkusze stylów. Wybór padł na rozwiązania popularne i często stosowane w budowie prostych stron WWW. Natomiast w dodatku do niniejszej książki znajdziesz pełen wy kaz właściwości wszystkich stylów wchodzących w skład specyfikacji C SS1 i CSS2.1. Poza tym dodatek zawiera również zestaw ienie obsługi stylów przez popularne przeglądarki.
Tworzenie stron WWW w praktyce
13 4
Jeżeli będziesz chciał pogłębić swoją wiedzę z zakresu kaskadowych arkuszy stylów, polecam kilka tytułów z oferty wydawnictwa Helion — http://helion.pl. ♦ CSS według Erica Meyera. Sztuka projektowania stron WW W— http://helion.pl/ książki/csswww. htm ♦ CSS według Erica Meyera. Kolejna odsłona — http://helion.pl/ksiazki/cssods.htm ♦ Zen stosowania CSS. Źródło oświecenia dla projektantów stron WWW — http://helion.pl/ksiazki/zencss.htm ♦ CSS. Antologia. 101 wskazówek i trików — http://helion.pl/ksiazki/cssant.htm
Wprowadzenie Zanim przejdziem y do poznawania kolejnych stylów oraz oferowanych przez nie możliwości, niezbędne są podstawy. Dzięki temu podrozdziałowi dowiesz się najważ niejszych rzeczy, bez których nie można rozpoczynać pracy nad stroną WWW, mającą wykorzystywać potęgę kaskadowych arkuszy stylów.
Różnice pomiędzy formatowaniem za pomocą XHTML, HTML i CSS Zacznę od prostego przykładu formatowania akapitu za pom ocą atrybutów samego języka HTML (XHTML). Pamiętaj, że to sposób już przestarzały i niezalecany przez konsorcjum W3C.
P
{ color: green; font-family: Arial;
}
>Tekst akapitu
Listing ten jest przykładem arkusza stylów osadzonego w nagłówku dokumentu. Zwróć uwagę, że między znacznikami znajduje się szereg poleceń, nadających wygląd akapitowi. Na moim przykładzie jest to kolor zielony oraz czcionka Arial.
Rozdział 4. ♦ Kaskadowe arkusze stylów
135
Akurat ten przykład w stosunku do zapisu w czystym języku HTML (XHTML) nie oszczędza cennych bajtów w kodzie strony, a wręcz produkuje ich znacznie więcej. Jednak wyobraź sobie, że dokument ma pięć akapitów o identycznym wyglądzie. W ta kim przypadku czysty HTML (XHTML) musiałby powtarzać formatowanie dla każdego akapitu oddzielnie, natomiast CSS w postaci powyższego listingu zajmuje się komplek sowo wszystkimi akapitami. Dopiero teraz rozumiesz, ile można zaoszczędzić i ja k łatwo zmienić wygląd wszystkich akapitów.
Umieszczanie stylów w dokumencie Kaskadowe arkusze stylów m ogą być osadzone w kodzie strony na kilka sposobów. Specyfikacja przewiduje następujące rozwiązania: ♦ Style wewnętrzne ♦ lokalne ♦ zagnieżdżone ♦ Style zewnętrzne ♦ dołączone ♦ importowane Pierwszym rozwiązaniem jest umieszczenie deklaracji stylu bezpośrednio w formato wanym znaczniku. Rozwiązanie takie nosi nazwę stylu lokalnego, gdyż działa wyłącznie na zawartość znacznika, w którym się znajduje.
Treść dokumentu
Treść dokumentu
Wadą powyższego rozwiązania jest spore utrudnienie w przypadku zmiany sposobu formatowania danego elementu oraz niepotrzebne powiększanie kodu. Weźmy na przy kład dokument, w którym umieszczono czterdzieści bloków tekstu i każdy z nich ma wyglądać identycznie. Aby to osiągnąć, do każdego z nich należy wpisać odpowied nie style. Wiąże się to z wykonaniem dodatkowej pracy, stratą czasu oraz zwiększe niem objętości kodu. Sytuację taką przewidzieli twórcy kaskadowych arkuszy stylów, dzięki czemu mamy drugą możliwość: umieszczanie CSS w kodzie XHTML i HTML. Metoda ta polega na zdefiniowaniu odpowiednich wpisów bezpośrednio w nagłówku strony. Rozwiązanie to nazywane jest stylem zagnieżdżonym i dzięki jego zastosowaniu polecenia form atujące obejm ują swym działaniem całą zwartość . < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "h ttp : //www.w3.org/TR/xhtml1/DTD/xhtml1 -s tri c t .dtd"> P
{ color:green: font-family:Arial:
}
Przykładowy blok tekstu.
Style wewnętrzne — zarówno lokalne, jak i zagnieżdżone — poza zaletami mają rów nież dość poważne wady. Weźmy jako przykład rozbudowany serwis, np. portal Onet.pl, na który składają się setki lub tysiące podstron. Każda z nich jest formatowana w po dobny sposób i wykorzystuje ten sam zestaw stylów. W takim przypadku style lokalne odpadają, a zagnieżdżanie definicji w nagłówki również nie jest naj lepszym pomysłem. Na szczęście istnieje jeszcze trzecia możliwość — styl zewnętrzny — która opiera się na znaczniku <1 i nk />, umieszczanym bezpośrednio w nagłówku strony, dzięki czemu taki arkusz również działa na cały dokument. Znacznik ten po zwala na podłączenie zewnętrznego arkusza stylów. Odpowiedni wpis ma następu ją c ą postać: Bartosz Danowski - strona domowa <1 ink rel="Stylesheet" href="style.css" type="text/css" />
Przykładowy blok tekstu
Atrybut h re f odpowiada za określenie nazwy oraz lokalizacji wybranego arkusza. Ko lejny element, r e i , definiuje relacje, które w przypadku CSS zawsze m ają wartość stylesheet. Ostatni element — type — zawsze posiada wartość te xt/css. Dzięki temu przeglądarka „wie”, z jakim arkuszem ma do czynienia. Działanie tego elementu do cenimy w przyszłości, gdy powstaną inne arkusze i zajdzie potrzeba korzystania z nich. Zewnętrzny arkusz jest zwyczajnym plikiem tekstowym, a jego zawartość może wy glądać tak ja k w poniższym przykładzie. / * To je s t p rzykła d zewnętrznego arkusza stylów */
P
{ c o lo r:green: fo nt-fam ily A r i a l :
Rozdział 4. ♦ Kaskadowe arkusze stylów
137
Zewnętrzny arkusz powinien być zapisany w pliku o dowolnej nazwie, która nie zawiera polskich znaków. Taki dokument bezwzględnie musi posiadać rozszerzenie zgodne ze wzorem nazwa-pliku.css.
\ Uwaga
Specyfikacja CSS daje nam jeszcze możliwość zaimportowania arkusza z innej stro ny oraz zdefiniowania kilku zewnętrznych arkuszy dla tej samej strony. Rozwiązania te na tym etapie nie są Ci potrzebne. Dlatego zdecydowałem się jedynie o nich wspomnieć w formie uwagi.
Jednostki miar i nazewnictwo kolorów stosowane w CSS Do określania wielkości czcionki, grubości obramowania czy też szerokości margine sów kaskadowe arkusze stylów wykorzystują względne i bezwzględne jednostki miary. Podobnie wygląda sprawa używanych definicji kolorów. Poniżej pokrótce omówiłem wszystkie względne i bezwzględne jednostki oraz formy zapisu koloru.
Jednostki względne px — piksele p {margin-1e f t : 20px: }
Jednostka ta opiera się na pojedynczych punktach w idocznych na ekranie monitora — pikselach. Jeżeli dokładniej przyjrzysz się ekranowi monitora, powinieneś zauwa żyć drobne punkty. W zależności od ustawionej rozdzielczości ich liczba może być różna, np. 800x600. Pierwsza wartość podaje liczbę punktów w poziomie, natomiast druga określa, ile pikseli mieści się w pionie. Oczywiście, rozdzielczości m ogą być bardzo różne, np. 1024x768 czy 1600x 1200, a do tego m ogą się różnić w zależności od systemu operacyjnego czy też typu monitora. Dlatego też stosowanie takiej jednostki nie zawsze daje dobre rezultaty we wszystkich warunkach. em — proporcje wysokości do czcionki danego elementu p {margin-1eft: 2em;}
Zasada działania tej jednostki jest stosunkowo prosta i polega na określaniu zależno ści pomiędzy poszczególnymi wielkościami. Jeżeli zdefiniujem y dom yślną czcion kę o wielkości 12 punktów, to będzie ona równa 1 em. Przyjrzyj się poniższemu przykładowi: /'*Definicja stylów */
P
{ font-Si ze: 12pt: margin-1eft: 2em:
Tworzenie stron WWW w praktyce
1 38
Powyżej zdefiniowałem wielkość czcionki 12pt dla bloku tekstu. Następnie za pomocą kolejnego polecenia ustawiłem lewy margines jako 2em. W tym przypadku lewy mar gines będzie równał się 24pt. ex — proporcje do wysokości litery x p {m argin-left: 2ex:}
Stosowanie jednostki ex wiąże się z rodzajem użytej czcionki. Weźmy np. stronę, na której użyto kilku rodzajów czcionek. Jak już nieraz się przekonałeś, każda czcionka inaczej wygląda, a co za tym idzie, ma inną wielkość podstawową, dlatego czcionka Arial o wielkości 2ex nie będzie równa czcionce Times New Roman o wielkości 2ex. X — procenty p {fo n t-size : 10*;}
Procenty służą do określania w ielkości względem wartości domyślnej. Przykładowa definicja spowoduje ustawienie wielkości czcionki na poziomie 1/10 domyślnego roz miaru, jaki został skonfigurowany w przeglądarce.
Jednostki bezwzględne in — cale p {m argin-left: 2 in ;}
Cale w ywodzą się z amerykańskiego systemu miar i głównie tam są wykorzystywane. W naszym przypadku ta jednostka raczej nie będzie używana. p t — punkty p {fo n t-size : 12pt;}
Punkty wyw odzą się z typografii, gdzie są standardową jednostką miary. W praktyce 72 punkty odpow iadająjednem u calowi, a ten z kolei równa się 2,54 centymetra. cm — centymetry p {fo n t-size : lcm;}
Centymetr jest podjednostką systemu metrycznego stosowanego w większości krajów na świecie. Jeden centymetr odpowiada 0,39 cala. mm — milimetry p {fo n t-size : 12mm:}
Milimetry są jednostką m niejszą niż centymetr. W ystępują w systemie metrycznym. Na jeden centymetr składa się 10 milimetrów. pc — pica p {fo n t-size : 12pc;}
Podobnie jak punkt jest jednostką typograficzną. Jedna pica równa się 12 punktom.
Rozdział 4. ♦ Kaskadowe arkusze stylów
139
Nazewnictwo kolorów używane w CSS Kolejną ważną cechą oferowaną przez kaskadowe arkusze stylów jest możliwość okre ślania nazw kolorów. Do tego, podobnie jak w języku HTML, można użyć nazw kolo rów, np. red, green czy blue. di v
{ color: red;
} Niestety, nazwy zostały przypisane jedynie kilkunastu podstawowym barwom (patrz tabela 4.1) i jeżeli chciałbyś użyć innej, musisz skorzystać z odmiennej formy. Zapis w postaci RGB może przybierać następującą postać: di v
{ color: rgb(255.0.0):
} Tabela 4.1. Wybrane kolory, wchodzące w skład bezpiecznej palety 216 barw, z przypisanym i nazwami Nazwa koloru
Zapis szesnastkowy
Black
#000000
Silver
#cococo
Gray
#808080
White
#FFFFFF
Maroon
#800000
Red
#FF0000
Purple
#800080
Fuchsia
#FF00FF
Green
#008000
Lime
#00FF00
Olive
#808000
Yellow
#FFFF00
Navy
#000080
Blue
#0000FF
Teal
#008080
Aqua
#00FFFF
Zapis kolorów wykorzystujący model RGB przypisuje liczby całkowite z przedziału od 0 do 255 każdej z wartości składowych palety RGB (red, green, blue), stąd liczb może być aż dziewięć. Oczywiście, można jeszcze zapisać kolor w postaci RGB, definiując procent nasyce nia danej barwy.
1 40
Tworzenie stron WWW w praktyce
di v
{ color: rgb(100X,0£,0$);
} Kolejnym sposobem zapisu barw jest m etoda szesnastkowa, będąca dokładnie tym samym, co zapis szesnastkowy, doskonale znany wszystkim, którzy mieli do czynienia z komputerami. di v
{ color: #FF0000;
} Podane przeze mnie przykłady za każdym razem określały kolor czerwony. Uwaga
Specyfikacja CSS2 dopuszcza dodatkowo zastosowanie odwołań do kolorów użytych przez osobę oglądającą stronę. Przykładowo, mogę stworzyć stronę mającą tło iden tyczne z kolorem Twojego pulpitu lub okna. Wartości odpowiedzialne za definicje tych kolorów są ściśle określone i znajdują się w tabeli 4.2. Tabela 4 .2 . Podstawowe kolory systemowe, z których możemy skorzystać w CSS2 W artość Background
Opis i przykład
Pobiera kolor pulpitu: BODY {background-color:background:}
Window
Pobiera kolor tła z okna:
Windowframe
Pobiera kolor ramki okna:
Wi ndowtext
Pobiera kolor tekstu z okna:
ThreeDLightShadow
Pobiera kolor jasnego cienia z elementów 3D:
ThreeDDarkShadow
Pobiera kolor ciemnego cienia z elementów 3D:
ThreeDFace
Pobiera kolor powierzchni z elementów 3D:
ThreeDHighlight
Pobiera kolor podświetlenia z elementów 3D:
ActiveCaption
Pobiera kolor paska tytułu aktywnego okna:
BODY (background-color:window;}
BODY (background-color:windowframe:}
P {color:w indowtext;}
BODY{backgroud-color:ThreeDLightShadow:}
BODY{ backgroud-color:ThreeDDa rkShadow;}
BODY{backgroud-colo r:ThreeDFace:}
BODY{backgroud-colo r :ThreeDHighli g h t; }
P{color:ActiveCaption;} InactiveCaption
Pobiera kolor paska tytułu nieaktywnego okna: P{col o r : Inacti veCaption:}
Rozdział 4. ♦ Kaskadowe arkusze stylów
Tabela 4.2. Podstawowe kolory systemowe, z których możemy skorzystać w CSS2 (ciąg dalszy) W artość
Opis i przykład
ActiveBorder
Pobiera kolor obramowania głównego okna:
AppWorkspace
Pobiera kolor tła z aplikacji pracującej na wielu oknach:
ButtonFace
Pobiera kolor z powierzchni przycisków:
ButtonHighlight
Pobiera kolor z obramowania przycisków:
P{color:ActiveBorder:}
P{co1or:AppWorkspace:}
P{color:ButtonFace:}
P {color:B uttonH ighlight;} ButtonShadow
Pobiera kolor z cienia przycisku: P{color:ButtonShadow:}
ButtonText
Pobiera kolor z tekstu umieszczonego na przycisku: P{color:ButtonText;}
CaptionText
Pobiera tekst z nagłówków: P{color:CaptionText;}
GrayText
Pobiera kolor z nieaktywnego tekstu: P{color:GrayText;}
Highlight
Pobiera kolor z wybranego elementu:
HighlightText
Pobiera kolor z tekstu w wybranych elementach:
InfoBackground
Pobiera kolor z tła podpowiedzi:
InfoText
Pobiera kolor z tekstu podpowiedzi:
P{color:Hi g h lIg h t:}
P{color:Hi g hli ghtText: }
Pjcolor:InfoBackground;}
P jco lo r:In fo T e xt;} Menu
Pobiera kolor z tła menu: P{color:Menu:}
MenuText
Pobiera kolor z tekstu znajdującego się w menu: P{color:MenuText:}
Scrollbar
Pobiera kolor tła z paska przewijania: P {color:Scrol1bar;}
ThreeDDarkShadow
Pobiera kolor z ciemnego cienia paska przewijania: P{color:ThreeODa rkShadow; }
141
142
Tworzenie stron WWW w praktyce
Budowa stylu Ogólny schemat konstrukcji stylu wygląda następująco: selektor {cecha: wartość: cecha: wartość: e tc .:}
W schemacie budowy stylu widocznym w poprzednim podrozdziale zamiast słowa s e le k to r należy podstawić odpow iednią nazwę — innymi słowy, znacznik z języka HTML (XHTML). Jest to bardzo proste. Jeśli chcesz formatować akapity, to selektorem jest znacznik
, z tą różnicą, że pomijasz wówczas nawiasy kątowe. Cecha jest wpisem ściśle określonym przez specyfikację kaskadowych arkuszy stylów.
W ybrane cechy dostępne w specyfikacji opiszę w następnych podrozdziałach. Przy wyborze elem entów kierowałem się ich przydatnością i mam nadzieję, że dzięki temu wiedzy do przyswojenia nie będzie zbyt wiele, ale za to okaże się ona przydatna w praktyce.
V Uwaga
Osoby zainteresowane szerszym opisem kaskadowych arkuszy stylów zachęcam do zapoznania się z internetowym kursem mojego autorstwa. Szczegółów na temat kursu m ożesz szukać na stronie h ttp ://d a n o w s k i.p l. Warto również zainteresować się innymi książkam i z oferty wydawnictwa Helion. Najciekawsze pozycje zostały przeze mnie zrecenzowane na mojej stronie domowej.
Wartość zazwyczaj jest przypisana do danej cechy; bardzo często jednak bywa tak, że
może ona być podobna do kilku zupełnie różnych cech. Poniżej zamieściłem praktycz ny przykład stylu. P
{ color: green; font-size : 14px;
}
'
Oczywiście, nic nie stoi na przeszkodzie, by stosować inny zapis: p {colo r: green: fo n t-size : 14px:}
Pamiętaj, że po każdej cesze zawsze musi znaleźć się dwukropek, a po wartości śred nik. Brak tych znaków może skończyć się problemami z interpretacją stylu przez przeglądarkę.
Selektory Pojęcie selektora, o którym kilka razy już wspominałem, jest jednym z najważniej szych elementów składowych CSS. To właśnie dzięki selektorowi możemy przypisać konkretny styl dla wybranego elementu. Selektory wykorzystywane podczas tworze nia własnych arkuszy stylów m ogą przybierać różne formy. Specyfikacja przewiduje wykorzystanie następujących ich rodzajów:
Selektory proste Konstrukcja stylu wykorzystującego selektor prosty nie należy do zbyt skomplikowa nych i wygląda tak, jak na poniższym przykładzie. P
{ c o lo r:red: font-size:14pt:
} Jak widzisz, selektorem jest znacznik języka HTML (XHTML) przypisany do elemen tu, który chcesz w danym momencie formatować. Styl zdefiniowany dla przykłado wego selektora p będzie odnosił się wyłącznie do akapitów zamkniętych w znacznik < p x /p > i nie będzie wpływał na pozostałe elementy strony WWW.
Selektory uniwersalne Styl zaprezentowany poniżej jest przykładem selektora prostego i odnosi się tylko do elementów zamkniętych pomiędzy znacznikami
. P
{ c o lo r:red: font-size:14pt:
} W związku z tym wszystkie inne elementy, np. nagłówki czy tabele, nadal będą for matowane w sposób domyślny. Oczywiście, sytuacja taka jest zupełnie poprawna i dzięki temu praca z CSS jest bardzo prosta i przyjemna. Jeden wpis i mamy załatwione wszyst kie akapity -— to jest to! Zdarza się jednak, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał on na cały dokument. Bardzo dobrym przykładem tego może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu. Odpowiedni styl może przyjąć następującą postać: ♦ { background-color:whi t e :
Tworzenie stron WWW w praktyce
144
Warto zwrócić uwagę na to, że selektorem jest gwiazdka. Symbol ten jest spotykany przy listowaniu zawartości folderów czy też zakładaniu filtrów. d ir * . t x t copy * . * c:\temp
W każdym przykładzie gwiazdka zastępowała jakieś elementy, np. w pierwszym pole cenie di r wyświetla wszystkie pliki z rozszerzeniem txt, natomiast w drugim następuje kopiowanie wszystkich plików z bieżącej lokalizacji do katalogu temp na dysku C:L Również kaskadowe arkusze stylów m ają podobne podejście do roli gwiazdki, dzięki czemu istnieje możliwość zdefiniowania uniwersalnych stylów. Innymi słowy, użycie gwiazdki zwalnia od wpisywania nazw poszczególnych selektorów. Przyjrzyjmy się pierwszej sytuacji, w której zależało mi na tym, aby ustawić kolor czerwony dla wszystkich akapitów, nagłówków stopnia pierwszego i list na przykła dowej stronie. P
{ colorrred;
} ul
{ color:red;
} hl
{ color:red;
} Definiowanie w ten sposób właściwości wszystkich elementów mija się z celem, po nieważ jest bardzo pracochłonne. Na szczęście używając selektora uniwersalnego, ope rację tę można znacznie uprościć, a cały arkusz skrócić do jednego wpisu. Przykład widoczny poniżej pozwala na uzyskanie identycznego efektu jak we wcześniejszym listingu. ★ { color:red;
} Innym selektorem uniwersalnym jest body. body
{ color:red;
} Uniwersalność body wynika z jego roli w hierarchii dokumentu. Dokładnie chodzi tu o funkcję dziedziczenia pewnych wartości ze znaczników stojących wyżej.
Uwaga
Pojęcie dziedziczenia zostało szczegółowo opisane w dalszej części niniejszego rozdziału.
Rozdział 4. ♦ Kaskadowe arkusze stylów
145
Selektory potomka W przypadku selektora potomka najlepszym rozwiązaniem jest rozpoczęcie jego oma wiania od konkretnego przykładu. Dzięki temu działanie tej konstrukcji powinno być znacznie bardziej zrozumiałe. Przykładowy styl dla nagłówka stopnia pierw szego wygląda tak jak w poniższym przykładzie: hl
{ font-size:20pt:
} Jeżeli chcemy, aby jakiś fragment tego nagłówka był sformatowany według innych za sad, to należy arkusz uzupełnić o następującą konstrukcję: hl span
{ font-size:10pt;
} Kod strony mogący skorzystać z selektora potomka będzie wyglądał następująco: Nagłówek stopnia pierwszegoNagłówek stopnia pierwszego w którym zastosowałem selektor potomka
Pierwszy z przykładowych nagłówków stopnia pierwszego ma wysokość rów ną 20pt. W drugim nagłówku użyto selektora potomka, dzięki czemu połowa tekstu ma wyso kość 20pt — czyli tak jak pierwszy nagłówek, natomiast druga część została wyświe tlona czcionką o wysokości równej lO pt. Poniżej zamieszczam jeszcze jeden przykład zastosowania selektora potomka. Arkusz stylów ma następującą postać: P
{ font-size:14pt;
} p span
{ fo n t-s ty le :i t a l i c : font-size:20pt:
} Przykładowy kod strony wykorzystującej selektor potomka zadeklarowany powyżej może przybrać następującą formę:
Przykładowy kod HTML wykorzystujący selektor potomka zadeklarowany powyżej może przybrać następującą postać.
Również tym razem efekt działania selektora potomka zobaczymy tylko dla tej części akapitu, która dodatkowo jest zamknięta w znacznik .
Tworzenie stron WWW w praktyce
146
Selektory dziecka Selektory dziecka są wynikiem zależności panujących pomiędzy poszczególnymi znacz nikami języka HTML. Przykład opisanego selektora znajduje się poniżej. p > span
{ font - s ty l e :i ta 1i c : text-decorati on:underli ne;
} Dany styl zadziała, gdy wewnątrz bloku tekstu zostanie umieszczony znacznik .
Dowolny tekst, w którym widać efekt działania selektora dziecka.
W tym przypadku jest dzieckiem i tylko w takiej sytuacji zo stanie odpowiednio sformatowany. Jeżeli rozbudujemy powyższy przykład o następne linie, zgodnie z poniższym listingiem, to formatowaniu zostanie poddany tylko tekst znajdujący się wewnątrz znacznika , który z kolei ograniczony jest przez , natom iast inne elementy, niebędące dziećmi , pomimo że również zamknięte są w , pozostaną bez zmian.
Dowolny tekst, w którym widać efekt działania selektora dziecka.
Tekst zamknięty wewnątrz znacznika span, który nie je s t formatowany za pomocą selektora dziecka.< /span>
Selektor dziecka nie jest poprawnie obsługiw any przez przeglądarkę MS Internet Explorer.
Selektory rodzeństwa Również w przypadku tego typu selektorów opieramy się na zależnościach obowią zujących w języku HTML (XHTML). N a podstawie tego rodzaju selektora możemy przypisać styl elementowi bezpośrednio sąsiadującemu z innymi. By warunek został spełniony, oba selektory m uszą mieć wspólnego rodzica. Przykładem może być po niższy listing. p + span
{ fo n t- s ty le :ita lic ; text-decorati on:underli ne;
} Zgodnie z tym, co napisałem powyżej, znaczniki oraz muszą ze sobą sąsiadować.
To jest tekst akapitu.
A tutaj działa selektor rodzeństwa.
Natomi ast ten tekst, pomimo że je s t zamknięty w span, już nie je s t formatowany, bo nie sąsiaduje bezpośrednio z akapitem.
Rozdział 4. ♦ Kaskadowe arkusze stylów
147
W powyższym kodzie wyraźnie widać, iż blok tekstu sąsiaduje ze znacznikiem , natomiast dmgi znacznik bezpośrednio nie sąsiaduje z . Podobnie jak selektor dziecka, również ten przykład nie działa w przeglądarce MS In ternet Explorer.
Selektor atrybutu Niemal każdy znacznik języka HTML (XHTML) może być uzupełniony o atrybuty przypisane do niego przez specyfikację, np. Nagłówek stopnia pierwszego
Dzięki kolejnej osłonie specyfikacji CSS możemy tak skonstruować selektor, aby od nosił się on do konkretnego znacznika i jego atrybutu. Rozwiązanie to nosi nazwę selektora atrybutu. Przykład arkusza stylów: h l[title ]
{ col or : red ;
} Przykład kodu HTML: Pierwszy nagłówek z atrybutemDrugi nagłówek z atrybutemTrzeci nagłówek bez atrybutów
Efektem działania powyższych listingów będzie wyświetlenie wszystkich nagłówków stopnia pierwszego z atrybutem t i t l e za pom ocą koloru czerwonego. Natomiast na główki bez atrybutu zachowają domyślne formatowanie. Idąc za ciosem, można jeszcze dokładniej przypisać formatowanie i uzależnić je od wartości, jak ą przybiera wybrany atrybut. hl[title=czerwony]
{ c o lo r:red:
} Przykład kodu HTML: Drugi nagłówek z atrybutemTrzeci nagłówek bez atrybutów
W tym przypadku tylko drugi z przykładowych nagłówków będzie w yświetlony za pom ocą koloru czerwonego, ponieważ tylko jego atrybut oraz wartość odpow iadają definicji stylu w przykładowym arkuszu.
Tworzenie stron WWW w praktyce
1 48
Atrybut selektora jest poprawnie obsługiwany przez nowe wersje przeglądarki Mozilla Firefox oraz Opery. Użytkownicy starszych przeglądarek oraz MS Internet Explorera muszą obejść się smakiem.
Identyfikatory Dotychczas opisane selektory pozwalały na przypisanie danego formatowania wszyst kim elementom odpowiadającym użytemu selektorowi. Przykładowy styl zamieszczony poniżej określa, iż wszystkie akapity powinny zostać sformatowane za pomocą czcionki o kolorze zielonym i wysokości 14pt. P
{ color:green; fo n t- si ze : 14pt;
} Twórcy kaskadowych arkuszy stylów od samego początku dostrzegli konieczność zróż nicowania podobnych elementów, w efekcie czego wprowadzili identyfikator — id. Zasada działania identyfikatora, co widać na poniższym przykładzie, jest stosunko wo prosta. P
{ color:green: font-size:14pt:
} fpochyly
{ fo n t-s ty le :ita 1 iC ; font-size:20pt;
} Odpowiedni wpis składa się z selektora, do którego planujemy przypisać identyfikator, oraz z nazwy poprzedzonej znakiem #. Wywołanie tak przygotowanego identyfikatora ma następującą postać:
Blok tekstu o kolorze zielonym i czcionce 14pt
Blok tekstu o kolorze zielonym i czcionce 20pt
Blok tekstu o kolorze zielonym i czcionce 14pt
Raz zdefiniowanego identyfikatora możemy bez problemu użyć w innych akapitach, o ile zajdzie taka konieczność. Co prawda nie jest to zgodne z zaleceniami specyfikacji, ale działa. Jeżeli chcem y przygotować identyfikator uniwersalny, którego użycie jest możliwe w dowolnym elemencie strony, to powinien on przybrać następującą postać: #czerwony
{ color:red:
}
Rozdział 4. ♦ Kaskadowe arkusze stylów
149
W ywołanie takiego identyfikatora wygląda dokładnie tak samo jak poprzednio, z tą drobną różnicą, że może nastąpić w dowolnym znaczniku.
Treść nagłówka stopnia pierwszego
Tekst wewnątrz komórki
Klasy Klasy są kolejnym podstawowym pojęciem w kaskadowych arkuszach stylów. Budowa klasy ma następującą postać: selektor.nazwak1asy
{ font-size:12 pt: color:green:
} Zwróć uwagę na występowanie kropki po selektorze lub przed nazwą klasy. Jest to element obowiązkowy i bez niego dalsza praca nie miałaby większego sensu. Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa może zostać użyta tylko w tym selektorze, do którego została przypisana, np.: p.moja
{ color:green: font-size:14pt;
} Powinna zostać wywołana w znaczniku w następujący sposób:
7re.ić akapitu
Jak widać na powyższym przykładzie, klasa jest wywoływana w dokumencie za po mocą atrybutu c la ss, który może zostać umieszczony niemal w dowolnym znaczniku kodu HTML. Specyfikacja CSS przewiduje możliwość zdefiniowana takiej klasy, której użycie jest możliwe w różnych znacznikach. Odpowiednia konstrukcja może mieć następu jącą postać: .moja
{ color:red: font-size:12pt; fo n t-s ty le n ta lic ;
} Wywołanie tak określonej klasy również odbywa się za pom ocą atrybutu class.
Przykład akapitu z określoną klasą
Przyklad nagłówka z określoną klasą
150
Tworzenie stron WWW w praktyce
Dokładniejsza analiza uniwersalnych definicji klas oraz identyfikatorów prowadzi do wniosku, że w działaniu niczym się one nie różnią. Jednak specyfikacja zakłada, iż dany identyfikator może wystąpić w całym dokumencie tylko raz, natomiast klasę można powielać do woli. Oczywiście, najczęściej używane przeglądarki nie są w tym przy padku do końca zgodne ze specyfikacją, dlatego identyfikatorów, podobnie jak klas, możemy używać tyle razy, ile uznamy to za konieczne. Poniżej znajduje się prosty przykład, w którym wyraźnie widać zasadę działania klas w dokumencie HTML (XHTML). P
{ fo n t-si ze: 14pt; color:green;
} .moja
{ fo n t-s ty łe : i ta l i c ; font-size:20pt: c o lo r:red;
} Przykładowy kod strony;
Blok tekstu o kolorze zielonym i czcionce 14pt
<1i> l i s ta , w której użyłem klasy o nazwie .moja <1 i >1 i sta . w której użyłem klasy o nazwie ,moja
Pseudoklasy Specyfikacja CSS przewiduje kilka ściśle określonych klas, pozwalających na formato wanie niektórych elementów dokumentu. Do najpopularniejszych z całą pewnością zaliczają się pseudoklasy odsyłaczy. a :lin k
{ c o lo r:red;
} a :visite d
{ color:green;
} Szalenie istotnym elementem w tej konstrukcji jest dwukropek, występujący pomiędzy selektorem a nazw ą klasy. Pierwsza z prezentowanych pseudoklas, a : 1i nk, odpowiada za wygląd hiperłącza, jeżeli nie zostało ono jeszcze odwiedzone. Przykładowa definicja sformatuje odnośnik za po mocą koloru czerwonego.
Rozdział 4. ♦ Kaskadowe arkusze stylów
151
Element a :v is ite d odpowiada za formatowanie hiperłącza już odwiedzonego i w na szym przypadku taki odnośnik będzie miał kolor zielony. Oczywiście, zdefiniowane pseudoklasy nie kończą się na tych dwóch zaprezentowa nych powyżej i specyfikacja przewiduje jeszcze kilka dodatkowych. Dzięki pseudoklasie a : hover możliwe jest dokonanie zmiany pewnych elementów po najechaniu na nie urządzeniem wskazującym (np. myszą). N a pewno każdy widział takie strony WWW, na których odnośniki tekstowe zmieniały kolor po najechaniu na nie kursorem myszy — to właśnie dzięki tej pseudoklasie.
\
Uwaga
Pseudoklasa a:hover nie jest obsługiwana przez stare wersje przeglądarki Netscape Navigator. Ignorują one jej działanie i elem ent nie zmienia formatowania po naje chaniu na niego kursorem myszy. Oczywiście, można ją stosować, gdyż nie ma ona wpływu na sam wygląd domyślnego odnośnika.
Poniżej znajduje się przykład prostego arkusza stylów odpowiedzialnego za formato wanie wyglądu wszystkich odnośników w dokumencie HTML (XHTML). /* definicja odsyłacza podstaw owego */
a
{ font-size:12pt; te x t-decorati on:none;
} a:1 i nk
{ color:navy:
} a :visite d
{ col or:green:
} a:hover
{ color:red: text-decoration:underline:
} W pierwszej definicji określiłem te elementy, które są wspólne dla wszystkich odsy łaczy; następnie wpisy form atują odsyłacze przy wykorzystaniu pseudoklas i nadają im specyficzne cechy wyglądu. Niestety, życie bywa trudne i większość nowoczesnych stron wymaga stosowania na nich odnośników o zróżnicowanej wielkości lub wyglądzie. N a szczęście w specyfi kacji CSS znajdziemy sposób na różnicowanie odnośników na stronie. Do wykonania tego zadania wystarczy połączyć zdobyte wcześniej informacje o klasach oraz pseudoklasach. Poniżej znajduje się listing arkusza stylów, w którym uwzględniono dwa rodzaje od nośników.
152
Tworzenie stron WWW w praktyce
/ * definicja odsyłacza podstaw owego */
a
{ font-size:24pt; text-decorati on:none:
} a :1 i nk
{ color:navy:
} a :visite d
{ color:green;
} a: hover
{ col o r :red: text-decorati on:underl i ne;
} / * definicja odsyłacza mniejszego */
a .mały
{ fo n t-si ze: 12pt;
W celu zróżnicowania rozmiaru czcionki w odnośnikach w kodzie strony należy sko rzystać z klasy o nazwie mały.
M ożna również określić oddzielne formatowanie dla każdego stanu odnośnika. Poniżej znajduje się konkretny przykład. /*norm alne odnośniki*/
a
{ font-size:24pt: text-decorati on:none;
} a:1 i nk
{
color:navy;
} a :v is i ted
{ col or:green;
} a:hover
{ col or:red; text-decorati on:underli ne;
Rozdział 4. ♦ Kaskadowe arkusze stylów
153
/*m ale odnośniki*/
a.mały
{ font-size: 12pt:
} a.mały:1 ink
{ col o r:s il v e r::
} a.m aly:visited
{ color:yellow :
} a .mały-.hover
{ col or:black; text-decorati on:none;
} Kolejną dostępną pseudoklasą jest : active, która pozwala nadać dowolne formato wanie elementowi po nakierowaniu na niego wskaźnika myszy i wciśnięciu przycisku, ale przed jego zwolnieniem. Pseudoklasy tej można używać jako uzupełnienia definicji odnośników, o których pisałem wcześniej, lub jako elementu poprawiającego czytel ność formularzy. a: active
{ c o lo r:s ilv e r;
} Jeżeli chcemy, by właśnie wyświetlany odsyłacz z menu był formatowany innym kolorem, to z pomocą może nam przyjść kolejna pseudoklasa o nazwie : focus. Jej de finicja wygląda następująco: a: focus
{ color:braun;
} W drugiej specyfikacji kaskadowych arkuszy stylów znajdują się jeszcze pseudoklasy : 1ang oraz : f i r s t - c h i Id. Pierwsza z nowych klas z założenia miała pozwolić na for matowanie wielojęzycznych dokumentów.
Jak się masz
How are you
Przyjrzyjmy się powyższemu listingowi, na którym zostały zadeklarowane dwa aka pity. Pierwszy z nich posiada przypisany atrybut lan g= "p l " i powinien zawierać tekst w języku polskim. Drugi natomiast ustawia język akapitu jako angielski. Dla tak przy gotowanego dokumentu za pomocą pseudoklasy :lang możemy w prosty sposób przy pisać dowolne formatowanie.
Tworzenie stron WWW w praktyce
154
P
{ f o n t - S i z e : 1 4 p t;
color:navy:
} p :la n g (p l)
{ font-weight:bold; color:black;
} p:lang(en)
{ fo n t-s ty le :i t a l ic :
} Pseudoklasa : lang nie jest obsługiwana poprawnie przez wszystkie przeglądarki. Wśród nowych przeglądarek radzą sobie z nią Mozilla Firefox oraz Opera. Użytkownicy MS Internet Explorera kolejny raz odejdą z kwitkiem.
Pseudoelementy Ciekaw ą grupę selektorów stanowią pseudoelementy, które pozwalają na przypisanie kolejnych wymyślnych stylów do elementów strony WWW. Pseudoelement : f i r s t - l e t t e r pozwala na formatowanie pierwszej litery w bloku tekstu. Przykładowy arkusz spowoduje powiększenie pierwszej litery do wielkości 100 punk tów i nadanie jej koloru czerwonego. P
{ color:navy; font-size:30pt;
} p : f i rs t- le tte r
{ c o lo r:red; font-size:100pt;
} Efektem działania powyższego arkusza stylów będzie powiększona pierwsza litera każ dego akapitu występującego w dokumencie HTML (XHTML).
Pierwsza lite r a tego akapitu zostanie powiększona za pomocą pseudoelementu :fir s t- le tte r .< /p >
Oczywiście, nic nie stoi na przeszkodzie, by pseudoelement : f i r s t - l e t t e r stosować z innymi znacznikami. Przykładem takiego postępowania może być poniższy listing, na którym połączyłem ten element z nagłówkiem stopnia pierwszego. hl
{ color:navy; font-size:30pt;
}
Rozdział 4. ♦ Kaskadowe arkusze stylów
155
h l:f i rs t-1 e tte r
{ colon red; font-size:100pt;
} Przykładowy kod: Portal Onet.pl
Na rysunku 4.1 widać przykład wykorzystania pseudoelementu : fi rst-1 e tte r . Rysunek 4.1. Przykład działania pseudoelementu :first-letter
Kolejnym pseudoelementem jest : f i r s t - 1i ne, który obejmuje formatowaniem całą pierw szą linię, a nie tylko pierwszą literę. P
{ color:navy: font-size;12pt:
} p: f i rs t-1 i ne
{ c o lo r:red; font-size:20pt: font-weight:bold;
} Przykładowy kod HTML:
Kolejnym pseudoelementem je s t :f i rs t-1 i ne, obejmuje formatowaniem całą pierwszą lin ię , a nie tylko pierwszą 1i te rę .
Zarówno : f i r s t - l e t t e r , jak i : f i r s t - l i n e są poprawnie obsługiwane przez najpo pularniejsze przeglądarki stron WWW. Poza : f i r s t - l e t t e r oraz : f i r s t - l i n e w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: : a fte r oraz : before. Oba służą do umieszczania tekstu bądź elementu graficznego przed i za formatowanym elementem strony. Poniżej zamieszczam odpo wiedni przykład. p:before
{ content: "WAŻNA WIADOMOŚĆ"; font-size:15pt; fo n t- s ty le :ita lic ; font-weight:bold:
}
156
Tworzenie stron WWW w praktyce
p :a fte r
{ content:"AUTOR Bartosz Danowski"; font-size:15pt: fo n t- s ty le :ita lic : font-weight:boid;
} Przykładowy kod:
Poza : f ir s t - le t t e r oraz : f ir s t - lin e w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: :a fte r oraz ibefore. Oba służą do umieszczania tekstu przed i za formatowanym elementem strony.
Oba prezentowane pseudoelementy :a f te r oraz :b e fo re działają poprawnie w Operze i Mozilli. Użytkownicy przeglądarki MS Internet Explorer efekt działania tej funkcji m ogą zobaczyć na rysunku 4.2. WAŻNA WIADOMOŚĆ Prócz Srst-letter oraz first-line w specyfikacji umieszczono jeszcze dwa inne pseudoelementy: rafter oraz before. Oba elementy dużą do umieszczania tekstu przed i za formatowanym elementem strony. A UTOR Bartosz DatlOWSki
Rysunek 4 .2 . Przykład działania pseudoelem entów :after oraz :before
Grupowanie selektorów N a początek prosty przykład arkusza stylów, określającego kolor dla nagłówków i akapitów. hl
{ color:green:
} h2
{ color:green:
} P
{ color:green;
} Dzięki temu, że selektory można dowolnie grupować, jeśli pewne wartości mają obo wiązywać dla każdego z nich, powyższy zapis można znacznie uprościć — poszcze gólne selektory wchodzące w skład grupy rozdzielamy przecinkami. Poniżej przedsta wiono przykład zgrupowanych selektorów h l , h 2 oraz p . h l. h2. p
{ color:green:
} Styl powyższego przykładu spowoduje nadanie koloru zielonego wszystkim nagłów kom stopnia pierwszego i drugiego oraz blokom tekstu. Oczywiście, nic nie stoi na przeszkodzie, by dodać tu kolejne style, np. bloku tekstu, określające wysokość czcionki jako 15 punktów.
Rozdział 4. ♦ Kaskadowe arkusze stylów
157
hl. h2. p
{ c o lo r:red:
} P
{ font-size:15pt;
} Taka definicja stylów użyje koloru czerwonego do formatowania zgrupowanych ele mentów oraz czcionki o wysokości 15 punktów w każdym bloku tekstu.
Dziedziczenie i kaskadowość to klucz do potęgi CSS Pojęcie dziedziczenia wiąże się z hierarchią ważności poszczególnych znaczników ję zyka HTML (XHTML). Zależności te doskonale widać na rysunku 4.3. Rysunek 4.3. Drzewo hierarchii
HTML
Podczas analizy rysunku można zobaczyć, że określenie np. koloru tekstu jako niebie skiego bezpośrednio dla body spowoduje jego użycie dla każdego elementu naszej strony, znajdującego się niższej w hierarchii. Jeżeli dodatkowo zdefiniujesz kolor listy
jako zielony, to tekst całego dokumentu będzie niebieski poza listą, która zostanie sformatowana za pom ocą koloru zielonego. Idąc dalej tym tropem, dopisz do stylu odpowiedzialnego za formatowanie body definicję wielkości czcionki równą 14 punktom. Strona wynikowa będzie zatem sformatowana za pomocą czcionki o wiel kości 14 punktów i w kolorze niebieskim , natomiast lista będzie m iała kolor zielony i identyczną jak reszta dokumentu wielkość czcionki. Innymi słowy, styl odpowiedzial ny za definicję czcionki będzie dziedziczony z nadrzędnego w hierarchii znaczników .
158
Tworzenie stron WWW w praktyce
Z przykładem dziedziczenia zetknąłeś się już na poprzednich stronach tego rozdziału, np. przy tworzeniu zróżnicowanych odnośników na stronie WWW. Mam tutaj na myśli sytuację, w której chciałeś stworzyć odnośniki o dwóch różnych wielkościach. W de finicji klasy .mała wystarczyło podać jedynie cechy, które miały ulec zmianie, nato miast wszystkie pozostałe elementy były dziedziczone z nadrzędnej pseudoklasy. Starsze wersje przeglądarek miały problemy z dziedziczeniem, jeśli na stronie znaj dowała się tabela. Poniżej znajduje się prosty przykład (rysunek 4.4.), w którym część tekstu umieściłem w tabeli, a część poza nią. Następnie ustawiłem kilka cech bezpo średnio dla selektora body. Tworzenie stron WWW w p raktyce
Wydawnictwo Hel i on
Wydawnictwo Helion
< /tr>
Rysunek 4.4.
Przykład problemów z dziedziczeniem
Wydawnictwo Helion Wydawnictwo Helion
Zwróć uwagę na wysokość tekstu w tabeli i poza nią. Domyślnie miał on mieć wyso kość 24 punktów w całym dokumencie. Niestety, tabela wyłączyła wielkość tekstu dla swojej zawartości. Problemy takie m ogą wystąpić w starszych przeglądarkach, a naj prostszym sposobem na ich uniknięcie jest zgrupowanie selektorów body oraz td. body. td
{ background-color: white: fon t-size: 24pt: color: green:
Rozdział 4. ♦ Kaskadowe arkusze stylów
159
Kolejnym ważnym pojęciem, z którym stykasz się już w samej nazwie „kaskadowe arkusze stylów”, jest kaskadowość. Odpowiada ona za zdefiniowanie zależności między różnymi sposobami umieszczania stylów w dokumencie. Z całą pewnością pamiętasz, że style możemy wpisać bezpośrednio do znacznika, osadzić w nagłówku dokumentu, pobrać z zewnętrznego arkusza czy zaimportować; poza tym każda przeglądarka ma swoje domyślne arkusze, a do tego dochodzi jeszcze możliwość stworzenia własnego arkusza przez internautę. Jak widać, możliwości jest całkiem sporo i dlatego specyfika cja określa priorytety dla każdej z tych metod. Przyjrzyj się następującemu przykładowi, który jest wzorem bardzo prostej kaskady. Tworzenie stron WWW w praktyce
l
2
3
4
Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę. Przykładowy blok tekstu oblewający tabelę.
Nagłówek HI, który ma znaleźć się pod tabelą
Korzystając z funkcji e le a r, możemy wymusić, aby nagłówek stopnia pierwszego znalazł się bezpośrednio pod tabelą i nie oblewał jej, jak to widać na rysunku 4.26. Odpowiedni wpis do arkusza stylów ma postać: hl
{ c le a rile ft:
}
202
Tworzenie stron WWW w praktyce
Rysunek 4.26. P rzykład działania stylu elear 1
2
3
4
Przykładowy błok tekstu oblewający tabelą Przykładowy blok tekstu oblewający tabelą Przykładowy blok tekstu oblew ający tabelą. Przykładowy blok tekstu oblewający tabelą Przykładowy blok tekstu oblewający tabelą. Przykładowy blok tekstu oblewający tabelą Przykładowy blok tekstu oblewający tabelą. Przykładowy blok tekstu oblewający tabelą Przykładowy blok tekstu oblewrający tabelą. Przykładowy blok tekstu oblewrający tabelą.
Nagłówek H I, który ma znaleźć się pod tabelą Oczywiście, w zależności od użytej wartości, możemy tamować pływanie elementów z prawej ( r ig h t ) , lewej ( l e f t ) lub obu stron jednocześnie (both).
Kolejność nakładanych elementów Przy nakładaniu elementów nasuwa się pytanie, czy nie ma możliwości określenia ko lejności poszczególnych warstw. Otóż kaskadowe arkusze stylów wprowadzają spe cjalne polecenie z - index, za pom ocą którego możesz kontrolować kolejność warstw. Przyjrzyj się listingowi przykładu z rysunku 4.27 i zwróć uwagę na sposób zastosowa nia wspomnianego elementu z-in d e x. P
Rysunek 4.27. Ustalanie kolejności nakładanych elementów
203
Wydawnictwo
HELION
color: s ilv e r: z-index: 2:
} plwydawnictwo
{ position: absolute: left:80px: top: 60px: font-size: 20pt: font-weight: bold; fo n t-style : it a lic : color: black: z-index: 3:
}
Wnioski Jak się zapewne domyślasz, pozycjonowanie elementów pozwala Ci na dowolne okre ślenie wszystkich elementów na stronie WWW, a co za tym idzie, masz ogromną kon trolę nad całością. Pozycjonowanie w moim odczuciu jest rozwiązaniem na miarę wprowadzenia tabel i oferuje znacznie większą swobodę tworzenia. Jednak zanim opu blikujesz stronę wykonaną w ten sposób, musisz ją dokładnie sprawdzić, by później nie okazało się, że sąjakieś problemy w poszczególnych przeglądarkach.
Tworzenie arkusza stylów za pomocą edytora kED Tworzenie zewnętrznego arkusza lub dodawanie stylów bezpośrednio do dokumentu HTML (XHTML) możemy usprawnić dzięki możliwościom, jakie ofemje edytor kED. Poniżej opisałem możliwości, jakie otrzymaliśmy z chw ilą instalacji promowanego przeze mnie edytora. Wsparcie dla CSS oferowane przez kED skupia się na dwóch rzeczach. Po pierwsze, edytor pozwala na skorzystanie z szablonu gotowego zewnętrznego arkusza, w który wprowadzamy tylko niezbędne poprawki. Po drugie, kED automatycznie zamyka na wiasy {}, w których spisujemy definicje stylów. M ożemy również skorzystać z po mocy i jednym kliknięciem myszy wstawić potrzebą definicję stylu. Zacznijmy od korzystania z gotowego szablonu. Wystarczy, że z klikniesz w menu Plik, a następnie wybierzesz opcję Nowy z szablonu i Szablon arkusza CSS (rysunek 4.28).
204
Tworzenie stron WWW w praktyce
k£D 2.1.4.0 - bcz_nazwy PiiiTl Edycja
Szukaj
J
Nowy plik
J
Now y z szablonu
XHTML
PHP
JavaScript
Opcje
Ctrl+N
C3 Otwórz plik...
Pomoc
M
li I
i 1!.
C trł* 0 >
L? Ostatnio używane | | Otwórz ponownie
rł
XHTML 1,0 Frameset
S hift* C trlfO
Zapisz plik
J
X F tT M L U
Ctrł+S
J
WML
S hift* Ctrł+S
J
Kanał RSS
J
Szablon użytkownika
Zapisz plik jako...
0
Zapisz wszystkie pliki
M Szablon arkusza CSS a,
ta h o m a ,
a r ia l,
H e lv e tic a ,
s a n s - s e r if;
Zapisz otwarte pliki ja ko projekt... ►
Podgląd dokumentu S 3 Zamknij plik ®
Zamknij wszystkie pliki
p a dl a i nn gg : O ‘ px; f o n t - s i z e : le m ; t e x t - a lig n : le f t ;
S hift* C trl* W
i mg { b o r d e r : O p x;
Drukuj dokument... ►
Kolorowanie składni Zmień stronę kodową...
hi* { f o n t - s i z e : 1 .4 e m ; f o n t - w e ig h t : b o ld ;
F4
| | Sprawdź poprawność dokumentu... Zamknij program
Tffrargmr-TTpy
C trl* W
S hift* C trl* V Alt+F4
h2 { fo n t- s iz e :
1 .2 e m ;
1____________
Rysunek 4.28. Wbudowany szablon arkusza CSS Tabela 4 .1 0 . Zbiorcze zestawienie właściwości pozycjonowania i wymiarowania elementów Deklaracja
Dostępne w artości
position
s ta tic | re la tiv e | absolute | fixed | in h e rit
left
auto | wartość liczbowa \ wartość procentowa | in h e rit
top
auto | wartość liczbowa | wartość procentowa | in h e rit
p (position: absolute;}
p ( le f t : 1cm;}
p (top: 1cm:} bottom
auto | wartość liczbowa \ wartość procentowa | in h e rit p (bottom: 1cm;}
right
auto | wartość liczbowa | wartość procentowa \ in h e rit p (rig h t: 1cm:}
width
wartość liczbowa \ wartość procentowa | auto | in h e rit p (width: lOOpx:}
height
wartość liczbowa \ wartość procentowa \ auto | in h e rit
z-index
auto | wartość liczbowa określająca pozycję w stosie | in h e rit
flo a r
l e f t | rig h t | none | in h e rit
clear
l e f t | rig h t | none | both | in h e rit
p (height: lOOpx;} p (z-index: 1;}
img ( f lo a t : r ig h t:}
hi (cl ear: r i g h t:}
205
Rozdział 4. ♦ Kaskadowe arkusze stylów
Gotowy arkusz warto poddać własnej obróbce, tak by odpowiadał potrzebom. Do kładniej mówiąc, szablon można traktować jako punkt wyjścia do dalszych działań. Pracując ze stylami, warto pamiętać o tym, że kED daje szybki dostęp do listy stylów i umożliwia ich wstawienie do dokumentu. W ystarczy, że w lewej kolumnie przej dziesz do zakładki Ściąga i z listy wybierzesz opcję Właściwości i wartości CSS. Dalej wystarczy już tylko ustawić kurs w miejscu, gdzie ma zostać wstawiona odpowiednia definicja stylu, odszukać ją na liście po lewej stronie i dwukrotnie kliknąć lewym przy ciskiem myszy.
;i| azimuth: v background: v, bac kg round-attachauj background-colcr: ,i background-image: . background-positioi .. background-repeat: border: border-widt^i her d“r-st j inherit $ border-collapse: border-color: border-spacing: border-style: ® border-top: 3, border-right: 3; border-bottom: ® border-left: x border-top-color: bcrder-nght-color ($; border-bottons-colo: ® border-left-color: ® border-top-style: ® k n r r t T - r i a h r —« r v l m
Podgląd INS
( A - ; N U M R o z m ia r ¿ 4 B (0,02KB)
Rysunek 4 .2 9 . Korzystanie z pom ocy wbudowanej w edytor kED
K :1 5 ,W :3
206
Tworzenie stron WWW w praktyce
Rozdział 5.
Praktyczny projekt. Moja strona domowa Mamy za sobą niezbędną część teoretyczną, nadszedł zatem czas, by zająć się prak tycznym przygotowaniem strony domowej. M am nadzieję, że zdajesz sobie sprawę z tego, że nie wystarczy nauczyć się składni języka HTML (XHTML) czy CSS, by do brze przygotowywać strony. Sprawa nie jest tak prosta, jak to się może wydawać, po nieważ tworzenie stron WWW wymaga praktyki. Oczywiście, bez prób i błędów nie zdobędziesz doświadczenia, dlatego dokładnie czytaj wszystko, co zawierają strony tej książki. Mam nadzieję, że dzięki kolejnym rozdziałom zdobędziesz wiele ważnych informacji i będziesz mógł bardziej świadomie projektować strony.
Dlaczego jest mi potrzebna strona WWW? Zanim zaczniesz tworzyć stronę domową, warto zastanowić się, czy jest Ci ona po trzebna. Moim zdaniem nie ma sensu projektować witryny domowej, jeżeli jest to jednorazowy przypływ entuzjazmu, ale nie masz wizji rozwoju projektu. W sytuacji, gdy od razu zakładasz, że po publikacji nie będziesz się więcej zajmował swoją stroną, w moim odczuciu taka praca nie ma większego sensu. Zastanów się, czy nie szkoda Twojego czasu na naukę języka oraz innych zasad zwią zanych z projektowaniem stron WWW. Jeżeli planujesz publikację swojego projektu na jednym z darmowych serwerów, musisz wziąć pod uwagę fakt, że jednym z ogra niczeń takiego rozwiązania jest konieczność regularnego czytania poczty stanowiącej integralną część całego konta. Jeżeli nie masz zamiaru czytać poczty i godzisz się z tym, że Twoja strona zniknie z sieci za kilka tygodni, od razu zrezygnuj z pomysłu tworze nia strony WWW.
208
Uwaga
Tworzenie stron WWW w praktyce
Dzisiejszy poziom rozwoju usług internetowych je st na tyle zaawansowany, że do posiadania własnej strony nie je st wymagana znajomość XHTML czy CSS. Google udostępnia doskonałe narzędzie do wizualnego projektowania stron, a błogi stały się tak popularne, że po prostu wypada je prowadzić. To wszystko sprawia, że pro jektowanie własnej strony domowej staje pod znakiem zapytania i zmusza do za stanowienia się nad skorzystaniem z gotowych rozwiązań.
Jeżeli planujesz przygotować stronę dom ową i chcesz to zrobić profesjonalnie, warto zastanowić się nad wykupieniem konta płatnego, które oferuje znacznie więcej moż liwości aniżeli jego bezpłatny odpowiednik. W moim przypadku postanowiłem wyku pić konto płatne oraz własną domenę, ponieważ zamierzam prowadzić stronę „na po w ażnie” i chcę być niezależny od mojego dostawcy usług internetowych, a własna domena daje mi taki komfort. Nie interesuje mnie również zależność od platform blogowych czy innych nowoczesnych rozwiązań. Po prostu chcę, aby moje internetowe oblicze było inne od całej reszty. M am nadzieję, że ju ż w ystarczająco Cię zniechęciłem do posiadania własnej strony i jeżeli nadal czytasz to opracowanie, pora przedstawić korzyści, które wynikają z po siadania własnej strony WWW. Jak zapewne widzisz, piszę książki, artykuły oraz mam szereg zainteresowań, którymi chciałbym się podzielić z innymi ludźmi. Uważam, że strona da mi możliwość uzu pełniania informacji zawartych w różnych publikacjach. Wychodzę z założenia, że my lić się jest rzeczą ludzką, ale niestety w książce po jej wydaniu nie mam już możliwości naniesienia stosownych poprawek. Natomiast posiadając swoją stronę WWW, na której dla każdej książki wydzielę oddzielny obszar, mogę uzupełniać, poprawiać i dodawać nowe przykłady. Zakładam, że wydawane książki będą zawierały stosowne informa cje o mojej stronie WWW, dzięki czemu każdy z Czytelników będzie wiedział, gdzie mnie szukać. O czywiście, na umieszczeniu mojego adresu internetowego w książce się nie skończy, a strona zostanie zarejestrowana, prawidłowo wypozycjonowana i wy promowana. Planuję wykorzystać swoją stronę W WW jako dodatkowy pomost pomiędzy Czytel nikiem czy też Internautą a mną. Zakładam, że dzięki temu uda mi się zdobyć szereg ciekawych informacji, zapoznać się z krytyką oraz propozycjami, co w konsekwencji bę dzie prowadziło do powstawania nowych, lepszych i z pewnością ciekawszych książek. Poza m oją książkow ą działalnością chciałbym za pom ocą swojej strony wyrazić po glądy na zagadnienia, które nie zawsze nadają się na temat książki czy też artykułu. Strona domowa będzie również idealnym miejscem, w którym będę mógł się przed stawić światu, umieścić swoje zdjęcia i napisać kilka słów o sobie, dzięki czemu nie będę jednym z wielu milionów anonimowych użytkowników intemetu. Mam nadzieję, że moja strona domowa z czasem będzie się coraz lepiej rozwijała i pew nego dnia stanie się zbiorem solidnych i ciekawych informacji na tematy związane z tw orzeniem stron WWW oraz innymi moimi zainteresowaniami; jednak zanim to nastąpi, czeka mnie jeszcze sporo pracy.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
209
Jeżeli po przeczytaniu tego wywodu na temat posiadania strony WWW nadal uważasz, że chcesz j ą mieć, pora zastanowić się nad kilkoma ważnymi sprawami.
V Uwaga
Zanim zaczniesz projektować stronę, zapoznaj się z dodatkiem, w którym znalazły się zestawienia najważniejszych informacji na temat rozdzielczości, przeglądarki czy palety kolorów. Moim zdaniem warto wiedzieć, czego używają obecnie internauci, i koniecznie należy na bieżąco te informacje śledzić.
Gromadzę materiały Zanim zaczniemy pracę z edytorem i kodem, warto zebrać wszystkie materiały, tak by późniejsza praca mogła przebiegać gładko i bez komplikacji. Osobiście bardzo nie lubię robić przerw wynikających z braku odpowiedniego tekstu na jedną z podstron. Przygotowanie odpowiedniego tekstu wybija mnie z rytmu i zazwyczaj nie potrafię stworzyć czegoś dobrego na zawołanie. W efekcie praca przeciąga się na następny dzień, a każdy pretekst jest dobry, by nie usiąść przed komputerem. W związku z tym zanim zaczniesz tworzyć stronę, spokojnie usiądź i przemyśl, co chcesz na niej umieścić. Następnie zbierz lub przygotuj odpowiednie teksty, zdjęcia lub inne elementy przewidziane do publikacji. Pamiętaj, że przygotowanie tych mate riałów jest nieuniknione i prędzej czy później będziesz musiał to zrobić. Postanowiłem, że kolejna wersja mojej strony WWW będzie zawierała następujące działy: ♦ Strona główna — przejścia do poszczególnych działów, informacje o nowościach na stronie, formularz umożliwiający zapisanie się na m oją listę mailingową, za pom ocą której będę informował stałych gości o zmianach na stronie. ♦ Książki — krótki opis każdej pozycji, poprawki, przykłady oraz dodatkowe informacje, które nie znalazły się w książce. ♦ Artykuły — dział ten ma zawierać kopie moich artykułów, które zostały opublikowane w prasie komputerowej. Poza tym znajdą się tam związane z moimi zainteresowaniami artykuły, które nie były nigdzie publikowane, a uznałem, że warto je gdzieś zaprezentować. Planuję rozbudowywać tę część strony o nowe opracowania w miarę swoich możliwości i wolnego czasu. ♦ O mnie — skrócony życiorys, zdjęcia, odnośniki do ciekawych stron związanych z miastem, w którym mieszkam, informacje o ulubionych filmach, muzyce, której słucham, i wszystkim, co ma na mnie mniejszy lub większy wpływ. ♦ Przyjazne strony — zbiór odnośników do innych ciekawych stron. ♦ Kontakt — formularz pozwalający na nawiązanie ze m ną kontaktu. ♦ Sklep — prosty sklep w którym znajdzie się wykaz wszystkich moich książek. Udało mi się określić mniej więcej zawartość mojej strony, a teraz długa droga do skompletowania zawartości poszczególnych działów.
2 10
Tworzenie stron WWW w praktyce
Tworząc teksty na potrzeby strony WWW, musisz pamiętać o tym, że działanie to nie jest takie proste, jak się może wydawać. Badania przeprowadzone na internautach już dawno wykazały, że m ają oni specyficzne podejście do czytanego tekstu. Pisząc tekst przeznaczony do publikacji, musisz pamiętać o kilku poniższych zasadach. ♦ Tekst powinien być krótki i zwarty. W intemecie ludzie nie przepadają za czytaniem długich elaboratów i wolą, gdy się im dostarcza samą esencję. ♦ Najważniejsze elementy powinny znajdować się w początkowej części tekstu. Internauci bardzo rzadko przewijają stronę, aby zobaczyć, co znajduje się poza obszarem widocznym na ekranie monitora. Na rysunku 5.1 przedstawiłem przykład długiej strony, ramka oznacza obszar widoczny na ekranie monitora. Staraj się tak skonstruować tekst, aby to, co widać, zachęciło internautę do przewinięcia strony. ♦ Staraj się używać słów kluczowych w tekście. Z myślą o dobrej pozycji strony w wyszukiwarce staraj się używać w tekstach przeznaczonych do publikacji na stronie słów kluczowych, pod którymi strona ma być widoczna. Tekst musi być naturalny i przede wszystkim kierowany do człowieka, a nie robota wyszukiwarki. Więcej informacji na temat słów kluczowych oraz ich doboru znajdziesz w dalszej części książki.
Struktura witryny Teraz przyszedł moment, w którym musimy popracować przez chwilę z kartką papie ru, ponieważ potrzebna jest jasna i przemyślna struktura witryny w celu rozplanowa nia systemu nawigacji. N a rysunku 5.2 przedstawiłem wstępny schemat rozwiązania problemu nawigacji na mojej starej stronie. Przyjrzyj się rysunkowi 5.2 i zwróć uwagę na to, że wszystkie linie łączące poszcze gólne działy są odpowiednikami odsyłaczy. Możesz przyjąć, że niemal każdy z tych odnośników działa w dwie strony. Ściślej rzecz biorąc, oglądający stronę zawierającą mój życiorys po kliknięciu odsyłacza do moich zainteresowań muzycznych i filmowych zawsze będzie miał możliwość powrotu do poprzednio oglądanej strony. Poza tym zaplanowałem również możliwość swobodnego przejścia na kolejne poziomy. Skompli kowana struktura odsyłaczy pomiędzy podstronami mojego serwisu jest sporym wy zwaniem, gdyż łatwo pogubić się w tej plątaninie, co prowadzić może do sytuacji, w której wystąpią zerwane, puste odnośniki prowadzące donikąd. Pamiętaj, że im lepsza struktura wewnętrznych odnośników, tym lepiej dla Ciebie. Dokładniej mówiąc, internauta będzie miał więcej swobody w dotarciu do poszcze gólnych działów witryny, a robot wyszukiwarki sieciowej dokładniej zindeksuje po szczególne części strony.
211
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
Rysunek 5.1. Przykład długiej strony, dodatkowo za pom ocą ramki oznaczyłem obszar widoczny na „pierwszym ekranie” monitora
Bartosz Danowski
l i t e r a t u r a i n f o r m a t y c z na SOom gMwna II KsIąZki j| artykuły |f O mftls l'ir.yjjziie attony | Kontakt ' 'Mkd I nwmyki.pl • Standard
Kategorie
Bestseller Wydawnictwa Hełiofi czerw iec 2007
- Fotografia cyfrowa
* Konfiguracja i optymakzac
• Skądwyszukiwarki biorą aiformacje o wyświetlanych
v Montaż i naprawa • Podkrgcanie i tuning
• Jaksprawie, aby Twoja firma
• Montaż wideo przed konkurencja?
- Nagrywanie płyt
i związanych z tym zysków' surfowania po Internecie znataziei ciekawą ofertą. Po pewnym u które] znajduje sią interesujący Oą produkt, ale nie pemiątasz jej y tumy Wpisujesz wyszukiwarce narwą przedmiotu, ojawiają się setki innych.
Fragmont książki w PDF C e n a : 39.90 z ł «6 Oucie] do koszyka A Hiooli mast szukanej witryny kupujesz produkt u
Jak to sią robi" zrozumiesz, jak działają wyszukiwarki, jak wpływa to na kolejność wyświetlania odnośników do znalezionych nmtenałów, a pizode wszystkim —jak uZyć tej wiedzy do tworzenia stron, które bądą zajmowały wysokie pozycje w poprawą funkcjonalności witryny or a osób odwiedzających strony
• Działanie wyszukiwarek • Dobór odpowiednich stówkluczowych • Poprawny uktad elementów stron • UZywame odsyłaczy wewnętrznych 1z • Ułatwianie indeksacji witryny • Monitorowanie ruchu na stronie i je) popularności • Zapewniam« funkcjonalności witryny • Dodatkowe rechndn promocji stron • Wystrzeganie sią nieuczciwych pc Wyprzedi konkurencją I ułatw swoim ki swojej oferty. Zobacz toż: • Darmoweopłogremowanie. Leksykon • komputer PC pie.uln* kupującego •
Liczba komentarzy: 4 Cd nowego * Bartosz Oanowiłi f l S Pozycjonowanie 1 optymakzacja st się robi • obszerny poradmfc na temat optymalizacji stron WWW. Wnajbliższych dniachksiążka powinna pojawić sią w sprzedały. Uwagą jest to projekt nad którym pracowałamwspólnie z Michałem. j Nowa ciekawa puu-nocjia » Bartosz Oanows*i H
» » ‘iw I U'»*«« le j książka Pozycjonowanie 1optymakzacja stron wyrw. Jak s*ą to rotajest objęta nową i mamnadzieją ciekawą - promocją. (...)
l.,l Osoby zainteresowane nabyciem książki Pozycjonowania i oprymafatacja stron WWW. Jak to sią rota w promocyjnoj cena (jedyne 25 z* tka gości Imprezy) oraz autogiafem Michała Mafcaiuka. cnar mojej skromnej
Leny na swoán btoguH zamieście krótką lecenzją książki. Byt maza bądzże ona pomocna dla osób, któie mają zamiar kupić tą pozycją. Pozostaw komentarz Załogowany jako Saitocz Danowski. Wyleguj •
* Ilustrowany przewodnik
Tłumaczenia Optnt« czytelników nejoekawyszch programów iv form« książki to doskonały' pomysł. kupdem, używam i dziękuję.
¡R E W m l D arm ow e |
Błogi Poradnik webmastera - marcoos.techbiog
RSS i i Wszystkie wpisy Kmązki u3 Artykuły
ML
Newsletter )esh chcesz być powiadamiany o nowościach na strome zaprenumeruj biuletyn Informacyjny -
'
.
212
Tworzenie stron WWW w praktyce
Rysunek 5.2. Przykład struktury witryny
Przygotowuję poszczególne elementy witryny Skoro wiesz już, co chcesz umieścić na stronie, nadal jesteś pewien sensu jej posiada nia oraz przygotowałeś materiały i określiłeś odbiorcę, czas zająć się tworzeniem pro jektu. Przedstawię krok po kroku opis powstawania mojej witryny; jednak by było to możliwe, musiałbyś zapoznać się z nią w intemecie. Wystarczy, że odwiedzisz nastę pujący adres — http://danowski.pl. W związku z tym, że nie wszyscy m ogą w tym momencie odwiedzić moją stronę, po stanowiłem prezentować zrzut ekranu wybranego fragmentu strony, a następnie opisy wać, jak powstała strona na nim widoczna. W ydaje mi się, że takie rozwiązanie jest dobre i pozwoli zrozumieć, co robiłem.
Uwaga
Cały projekt opisany w dalszej części opiera się na języku XHTML w wersji Strict, a co za tym idzie, struktura strony i układ poszczególnych elementów zostały opra cowane przy wykorzystaniu kaskadowych arkuszy stylów. Innymi słowy, na stronie nie znajdziesz tabel.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
213
Strona główna Najpierw zajmijmy się stroną główną, a po jej stworzeniu zaczniemy się posuwać coraz dalej. W związku z tym, że chcę m oją witrynę skierować do możliwie dużego grona użytkowników intemetu, postanowiłem maksymalnie ograniczyć ilość elementów gra ficznych. W przypadku strony głównej grafika występuje zaledwie w kilku miejscach i jest bardzo skromna. Pozostałe elementy uzyskałem, stosując możliwości języka HTML (XHTML) oraz CSS. Układ strony również jest bardzo prosty, ale dzięki temu sprawia wrażenie lekkości oraz bez wątpienia jest czytelny, a o to mi chodziło. Górne menu nawigacyjne zawie ra wykaz najważniejszych działów strony. Natomiast boczne menu to dodatkowy po dział każdego z głównych działów strony oraz krótkie recenzje książek i kilka dodat ków, o których wspomnę w odpowiednim momencie. Rysunek 5.3 przedstawia widok kompletnej strony głównej. Warto w tym miejscu zauważyć, że jej układ w dużej części jest podstawą kolejnych podstron. Cały projekt możemy bez problemu podzielić na cztery główne części; nagłówek, stop kę oraz szerszą lewą oraz węższą prawą kolumnę. Dzięki temu przygotowanie całego projektu możemy podzielić na kilka mniejszych etapów, które opisałem w kolejnych podrozdziałach.
Etap pierwszy — struktura strony W tym miejscu zajmiemy się przygotowaniem ogólnej struktury kodu strony oraz przy gotowaniem odpowiedniego tła dla witryny. To podstawowa operacja, której wykonanie nie powinno stanowić problemu. Na rysunku 5.4 widać pożądany przeze mnie wynik. Kod XHTML odpowiedzialny za przygotowanie zawartości rysunku 5.4 jest widocz ny poniżej. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 S trict//E N " "DTD/xhtmll-s tr ic t.d td " > < title > L ite ra tu ra informatyczna - Bartosz Danowski
214
Tworzenie stron WWW w praktyce
Rysunek 5.3. Strona główna serwisu danowski.pl
B artosz Danow ski l i t e r a t u ra
inform a t y czna
_________________
; S t r o n a g łó w n a |[ Książki I Artykuły |! o mnie j| Przyjazne stro n y | Kontakt
Skłep
Plagiat ¡ 3 2 8 .0 6 .2 0 0 7 ’£> K om entarzy: 7 KHka dni tem u trafił do mnie mail z odnośnikiem d o stro n y z pirackimi kopiami książek (e-b o o k i). W śród kilkunastu tytułów s ą moje publikacje. S praw a nie je s t now a i o d d aw n a wiem o tym, że kilka książek z o stało z esk an o w y ch i nielegalnie u d o stęp n io n ych w sieci. Jed n ak tym razem p o d c za s ru ty n o w y ch oględzin moją u w ag ę przykuła książka, k tó ra jak d o [...] Czytaj całość »
Nero • problemy z językiem polskim * 3 1 9 .0 6 .2 0 0 7
Nie ma k om entarzy * Edytuj
D ostałem kilka p y ta ń d o ty c z ą c y c h te g o sam ego problem u. W skrócie chodzi o to . że oryginalny zakupiony w polskim sklepie p ak iet Nero 7 nie w yśw ietla się w język u polskim. Przy czy n ą takiego s ta n u rze c z y j e s t błąd in stala to ra. Na sz częście rozw iązanie j e s t bard zo p ro ste . C zytaj c ało ść »
Opinie czytelników Zdecydowałam się do Ciebie napisać, ponieważ bardzo spodobała m i się konwencja książki "Komputer PC ćwiczenia praktyczne. Wydanie IT ... naprawdę super. Wszystko je s t napisane jasno, zwięźle i klarownie... łatw o można znałeść to czego się
Rew elacyjna w tyczka do Firefoksa “
1 9 .06.2007 'C ' Nie ma k o m en tarzy » Edytuj
Scio e n g ra b j e s t bard zo p rak ty c zn ą w ty c zk ą d o przeglądarki Mo/illa Eirefo*. D odatek pozw ala n a sp raw n e i szybkie wykonanie zrz u tu ekran u z z a w arto śc ią przeglądanej stro n y WWW. C zy taj c ało ść »
Błogi Tako rze cz e Shrew WebAudit Blog i Poradnik w ebm astera
Nowa ciekaw a promocja
• m a rcoos.techbiog
13 15.06.2007 r< 5 iW in a k o m entarzy » E dytuj
» n e t to
Książka Pozycjonow anie i o ptym alizacja stro n WWW. Jak się to robi je s t o b ję ta n o w ą - i mam nadzieję c iek aw ą - prom ocją. OtóZ c e n a ksiąZki z o stała cza so w o obniżona i k ażdego dnia w z ra s ta o 2 zł, a ż d o chwili osiągnięcia p ierw otnej w arto śc i (39,90 zł). D zisiejsza c e n a książki to 33.90 zl, a ju tro będzie o 2 zł w ięcej... Na [...]
RS5 £ 3 W szystkie wpisy KsiąZki Artykuły
C z y ta j c ało ść •
N ew sletter
Pozycjonowanie i o ptym alizacja stron WWW. Ja k to się robi
Jeśli c h ce sz być pow iadam iany o now ościach na stronie zaprenum eruj b iu le ty n in f o r m a c y jn y »
! 3 12.06.2007 'C 1K om entarzy: 4 » E dytuj Dzięki k siążce "Pozycjonowanie I op tym alizacja stron W WW . Jak to się robi'' zrozum iesz, ja k d ziałają wyszukiwarki, jak w pływ a to n a kolejność w yśw ietlania sini WWW odnośników do znalezionych m aten ałó w , a p rze d e w szystkim — ja k u żyć te j w iedzy do tw orzenia stro n , k tó re b ę d ą zajmow ały w ysokie p o zy cje w w ynikach w yszukiwania. Poznasz ta k ż e techniki umożliwiające p opraw ę funkcjonalności w itryny oraz dodatk o w e sp o so b y je j prom ow ania, dzięki czem u liczba osób odw ied zający ch stro n y T w o jej firmy szybko w zrośnie, podobnie jak g en ero w a n e przez n ią zyski. C zy taj calośŁ »
Pnitosz Danowski K Wuyatloe p--i»
J Powered by Wordpnws
21 5
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
£
Litei-atufa .n farm a t|«~ ñ a - Bartosa D a n o w a k i; MoztHa
Plik
Edycja
Widok
Histor
Zakładki jU
Helion
Danowski
■0 Disable- & Cookies[¿)1 Bartosz Danowski
Hardware CSS-
J
Narzędzia
Pomoc
'ir
filg/Z/C^üsers/Bartek/Desktop/StronaVQW W W /danowski.pl/index.html
Aby uzyskać tło widoczne na rysunku 5.4 należy przygotować wąski obrazek o pio nowej orientacji z odpowiednimi kolorami. Następnie tło należy wstawić za pom ocą kaskadowych arkuszy stylów, przypisać je do selektora body i zablokować jego powie lanie w pionie. Przy okazji można wyłączyć podkreślenia dla odnośników. Odpowiedni fragment arkusza stylów znajduje się poniżej. body
{ background-image: u rl(o b ra z k i/tlo .jp g ); background-color: white; background-repeat: repeat-x;
} a
{ text-decorati on:none:
} Pierwsze polecenie ustawia obrazek w tle strony, drugie ustawia biały kolor tła, a ostat nie wymusza powielanie obrazka wyłącznie w poziomie.
Tworzenie stron WWW w praktyce
216
Etap drugi — nagłówek i stopka Teraz przyszła pora na to, aby przygotować nagłówek i stopkę witryny. W przypad ku mojego projektu szczególnie istotny jest nagłówek, który zawiera główne menu nawigacyjne. Do tworzenia góry strony wykorzystamy nagłówek, listę wypunktowaną oraz kaska dowe arkusze stylów. N a początku musimy po prostu osadzić w dokumencie obrazek oraz listę. Całość powinna znaleźć się pomiędzy znacznikiem , dla którego dodatkowo ustawiamy identyfikator. Kompletny listing znajduje się poniżej i raczej nie wymaga dodatkowego omówienia.
Teraz pora sięgnąć po kaskadowe arkusze stylów i za ich pomocą wymusić układ na główka zgodny z naszymi oczekiwaniami. Przypomnę tylko, że dążymy do sytuacji, w której projekt będzie wyglądał tak samo jak przykład widoczny na rysunku 5.3. W pierwszej kolejności dla selektora body musimy dodać style odpowiedzialne za usta wienie zerowych marginesów. Dla pewności warto zdefiniować margines i dopełnienie. Odpowiedni wpis będzie wyglądać tak: body
{ background-image: u rl(o b ra z k i/tlo .jp g ): background-color: white: background-repeat: repeat-x: margin:0; padding:0:
} Logo widoczne w nagłówku jest obrazkiem oraz odnośnikiem do głównej strony. Dla tego kolejnym krokiem jest wyłączenie obramowania oraz dopełnienia dla wszystkich obrazków. Robimy to, dodając do zewnętrznego arkusza stylów poniższy fragment kodu. i mg
{ border; 0: paddi ng:0;
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
217
Teraz przyszła pora, aby elementy zamknięte w znacznik Bartosz Danowski to p y Wszystkie prawa zastrzeżone < /di v>
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
219
Samo formatowanie stopki ogranicza się do określenia jej szerokości, która musi w y nosić 100%. Dodatkowo ustawiłem kolor tekstu, jego wyrównanie do środka oraz tło samej stopki. Jak widzisz, nie jest to nic wyszukanego. di v#stopka { color:white; width:100£; height:30px; background-color:#9F3B43: te xt-a lign:cen ter: }
Pamiętaj, że w tej chwili stopka znajdzie się bezpośrednio pod nagłówkiem, ale ule gnie to zmianie po tym, jak dodamy pozostałe elementy. Efekt dotychczasowej pracy jest widoczny na rysunku 5.5.
Bartosz D anowski l ite r a t u ra i n f o rm a ty c z n a
i Strona główna Y K s ią ż k illA rts k u ły II O muip || Przyjazno strony |iKont"akt jf Sklep
Bartosz Danowski £ Wszystkie prawa zastrzeżone
Rysunek 5.5. Efekt dotychczasowych działań
Etap trzeci — lewa kolumna Kolejnym elementem, jaki należy zaprojektować, jest lewa kolumna, w której publi kowane są poszczególne wiadomości w skróconej formie. Kolumna w moim przy padku ma mniej więcej 2/3 całej szerokości strony WWW. Aby uprościć sobie pracę, proponuję w pierwszej kolejności pomiędzy nagłówkiem i stopką dopisać następujący fragment kodu:
220
Tworzenie stron WWW w praktyce
Znacznik ). Niezbędne jest określenie za pomocą kaskadowych arkuszy stylów szerokości tej kolumny oraz marginesów i dopełnienia. Odpowiedni wpis do arkusza stylów znajduje się poniżej. di v#lewa { padding:5px: margimO: w idth:440px: padding-top:20px;
Pora na przygotowanie pojedynczego wpisu. N a mojej stronie wpis został utworzony przy wykorzystaniu nagłówka stopnia drugiego i kilku akapitów zamkniętych pomiędzy znacznikami . Przykładowy kod zamieściłem poniżej.
Tym razem na szybko i typowo informacyjnie. W sobotę i niedzielę (30.06-01.07) odbędzie się I ogólnopolska Noc pozycjonerów. Organizatorzy przygotowali szereg niespodzianek i już nie mogę się doczekać spotkania.
Wśród patronów imprezy znajdują się Onet.pl, H elion.pl. Home.pl. IAB. N e tsp rint.pl. [,..]< /p >
Zwróć uwagę, że niektóre słowa dodatkowo zostały zamknięte pomiędzy znaczniki . Działanie takie ma na celu ułatwienie nadania im odmiennego formato wania niż pozostałym elementom w ramach tego akapitu.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
221
Przykładowy kod wpisu musi znaleźć się pomiędzy znacznikami . div.wpis { border-bottom:solid 2px s ilv e r: margin-bottom:10px: } div.wpis a { font-w e ig h t:lig h te r; color:#2F63B3; }
Kolejne wpisy włączają dolne obramowanie modułu z pojedynczym wpisem. Rozwią zanie to ma rozdzielić graficznie poszczególne elementy. Poza tym niezbędne było wprowadzenie dolnego marginesu, aby zwiększyć światło pomiędzy sąsiadującymi wpi sami. Ostatnia definicja formatuje odnośnik znajdujący się na końcu każdej wiadomości. Na rysunku 5.6 przedstawiłem ostateczny efekt. Dodatkowo na potrzeby przykładu wyróżniłem za pom ocą szarego tła sekcję z wpisami. Jak widzisz, utworzenie lewej kolumny nie było skomplikowane. Ważne jest tylko to, aby podczas dodawania kolejnych wpisów trzymać się schematu i konsekwentnie uży wać tych samych znaczników.
222
Tworzenie stron WWW w praktyce
- , Noc pozycjonerów B R Autor: Bartosz Daaowito Data:
\2.(P200'komentarz)
9
■| &
Tym razem aa szybko i typow o informacyjnie W sobotę i niedzielę 111 (30.06-01.07) odbędzie się I ogólnopolska N oc pozycjonerów Organizatorzy przygotowali szereg niespodzianek i już me mogę się
■
doczekać spotkana W śród patronów imprezy znajdują się Onet pl, Helion pl, Home.pl, LAB, Netsprmt.pl. [ ]
?; Więcej» Nero - problemy z językiem polskim Autor: Bartosz Danowski Data: i9.06.200'1Komentarzy: 0
Dostałem lalka pytań dotyczących tego samego problemu W skrócie chodzi o to, że oryginalny zakupiony w polskim sklepie pakiet Nero 7 nie wyświetla się w języku polskim Przyczyną takiego stanu rzeczy jest błąd instalatora. N a szczęście rozwiązanie jest bardzo proste.
Screengrab jest bardzo praktyczną wtyczką do przeglądarki M ozfia Fkefox. Dodatek pozwala na sprawne i szybkie wykonanie zrzutu ekranu z zawartością przeglądanej strony W W W .
K ilka dni temu tra fi do mnie mail z odnośnikiem do strony z pirackimi kopiami książek (e-boold) W śród kilkunastu tytułów są moje publikacje. Sprawa nie jest nowa i od dawna wiem o tym, że kilka książek zostało zeskanowych i nielegalnie udostępnionych w sieci Jednak tym razem podczas rutynowych oględzin moją uwagę przykuła książka, która jak do [. .]
Więcej» prawa kolumna Bartosz Danowski C Wszystkie prawa zastrzeżone
Rysunek 5.6. Gotowa sekcja z w pisam i — lewa kolumna
Etap czwarty — prawa kolumna Ostatnim elementem strony głównej, którym musimy się zająć, jest prawa kolumna, zawierająca dodatkowe menu oraz kilka ogólnych informacji. Do przygotowania tego elementu wykorzystałem listę wypunktowaną, nagłówki stopnia trzeciego i formularz. Zanim zaczniemy dodawać pozycje do prawej kolumny, warto ją umieścić w odpowied nim miejscu oraz określić jej szerokość. Możemy to zrobić za pomocą CSS i wartości odpowiedzialnych za pływanie oraz tamowanie elementów. Przyjrzyj się poniższym listingom i wyróżnione wpisy dodaj do swojego arkusza w odpowiednich miejscach. Jeżeli któregoś selektora jeszcze nie posiadasz, to wpisz go w całości.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
223
div#stopka { color:white: width:100£: height:30px; background-color:#9F3B43; text-align :center; cleariboth; } di v#l ewa { paddi ng:5px; margi n:0: wi dth:440px; padding-top:20px: background-color:#EFEDED: f 1oat: le f t ; } div#prawa { width:320px: f l o a tirig h t; background-color:whi t e : }
Zwróć uwagę na to, że selektor odpowiedzialny za kontrolę wyglądu prawej kolumny zawiera dodatkowo definicję szerokości oraz koloru tła. Dopiero w tej chwili możemy zacząć tworzyć poszczególne elementy składowe pra wej kolumny. W dalszej części niniejszego podrozdziału opiszę, w jaki sposób przy gotować dwa elementy, które znajdują się w tym miejscu na mojej stronie. Uznałem, że nie ma większego sensu opisywać każdej z pozycji, bo tworzy się je dokładnie tak samo. Zgodnie z zasadami funkcjonalności strony w prawym górnym rogu witryny powinna się znaleźć wyszukiwarka. Tak też została zaprojektowana moja strona domowa. Jeżeli tworzysz stronę statyczną, do jej przeszukiwania możesz wykorzystać rozwiązanie oferowane przez Google. Mam tutaj na myśli m ożliwość personalizacji najbardziej znanej wyszukiwarki i takiej jej skonfigurowanie, aby poszukiwała informacji w ob rębie jednej witryny. Oczywiście, aby korzystać z dobrodziejstw Google niezbędna jest prawidłowa indeksacja witryny, co jest równoznaczne z tym, że wyszukiwarka swoją skuteczność zyska dopiero po kilku bądź kilkunastu dniach. Kod spersonalizowanej wyszukiwarki możesz przygotować na stronie http://www.google.com/coop. Do przygotowania modułu wyszukiwarki, umieszczonego w prawej kolumnie, wykorzy stałem nagłówek, znaczniki oraz pola formularza. Odpowiednia struktura znaczników może przybrać następującą postać:
Powyższy kod w prosty sposób możemy doprowadzić do postaci zgodnej z wymaga niami całego projektu strony. W ystarczy dla użytego nagłówka wyłączyć marginesy i dopełnienie. Następnie dla znacznika
Jeżeli uznasz, że wygląd formularza Ci nie odpowiada, to możesz go zmienić, korzy stając z odpowiednich stylów. Drugim opisanym przeze mnie elementem jest dodatkowe menu nawigacyjne. W przy padku mojej witryny pozwala ono na dodatkową segregację treści dostępnych w wy branym dziale. Na przykład w sekcji Książki boczne menu pozwala na wybranie ksią żek z konkretnej serii lub o zadanej tematyce. Oczywiście, boczne menu zmienia się w zależności od głównego działu witryny. Do przygotowania bocznego menu tradycyjnie wykorzystałem listę wypunktowaną. Kod kompletnej listy znajduje się poniżej.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
225
W pierwszej kolejności należy włączyć górną krawędź modułu z menu. W tym celu wystarczy wprowadzić drobną zmianę w ju ż istniejącym arkuszu stylów. div#szukaj, div#kategorie { border-top:solid 4px green: padding:10px: }
Następny etap wymaga przekształcenia listy wypunktowanej w atrakcyjnie wygląda jące menu. Zadanie nie jest skomplikowane i oczywiście w całości zostanie przepro wadzone za pom ocą kaskadowych arkuszy stylów. Na początku przypomnę, że menu znajduje się pomiędzy znacznikami , dlatego do jego sformatowania będziemy musieli użyć selektora potomka. W pierwszej kolejności dla poszczególnych elementów listy musimy określić zerowy margines i dopełnienie. Następnie ustawiamy obramowanie. div#kategorie l i { border-bottorrcsolid lpx black: padding:0px; margin:0; }
Dla całej listy mającej stać się menu wyłączamy punktory oraz marginesy i dopełnienia. div#kategorie ul { list-style :n o n e ; margin:0; paddi ng:0: }
Teraz przyszła pora, aby się zająć odsyłaczami. Ustawiamy właściwości czcionki od syłacza, za pomocą dopełnienia określamy wymiary przycisku i na końcu za pom ocą stylu di spl ay przekształcamy odnośniki na elementy blokowe. Dzięki temu cały obszar przycisku będzie aktywnym hiperłączem. Dodatkowo w tym miejscu możemy ustawić kolor tła przycisku. div#kategorie a { color:black: fo nt-w e ight:lighte r: di splay:block; padding:5px:
Na końcu za pom ocą pseudoklasy : hover m ożem y określić zachowanie przycisku w chwili, gdy znajdzie się nad nim kursor. Akurat w moim projekcie zmienia on kolor na inny. div#kategorie a:hover { background-colo r:si 1ve r; }
Tworzenie stron WWW w praktyce
226
Na rysunku 5.7 widać przykład kompletnej strony głównej. Oczywiście, to ogólny projekt i zapewne różni się szczegółam i od tego, co możesz zobaczyć na stronie http://danowski.pl. Między innymi brakuje pozostałych elementów prawej kolumny, ale jak już zapewne zauważyłeś, można je dodać w podobny sposób jak pole wyszu kiwarki czy menu. Rysunek 5.7.
B artosz D anow ski
Widok gotowej strony głównej
lite ra tu ra inform atyczna ; Stron a giunuu
k s ią ż k i ¡j A rtykuły ; O innif || Przyjazne stro n \ !! k o n ta k t ¡1 S klep 1
I N o c p o zycjo n cró w I
Bmotz D*rrwłi: Duła: 1.'
S zu k a j '(fi! Szukaj
Tym larem na szybko t typowo «formacyjnie W sobotę i niedzielę
H (30 06 01 07) odbędzie się 1ogolnopolska Noc pozvc jouerow
K a te g o rie
I
Organizatorzy przygotowali szeteg mespodzmnek i juz nie mogę się doczekac spotkana W śród patrooow anprer. znajdują się Onet pl. Hebon p i Home pł. LAB. N etspratpl ( ]
N e ro - p ro b le m y z ję zy k ie m p o lsk im Anton Bsrtnw. Dmowski D m : 14 04-20071 Dostałem kilka pytań dotyczących tego samego problemu W skrócie chodzi o to, że oryginalny zakupiony w polskim sklepie pakiet Nero 7 me wyświetla się w języku polskim Przyczyną takiego stanu rzeczy jest błąd instalatora N a szczęście rozwiązanie jest bardzo proste
Ogłoszenia Porady -----------------------------Pozycjonowane stron p,ęgjCTz Strony W W W i internet
Wie R e w e la c y jn a w ty c zk a do F ire fo k s a Autor:
DmowskiDala: ¡2.0",200' Kumratorzj: 0
Screengrab jest bardzo praktyczną wtyczką do przeglądarki MoziDa Fireftn. Dodatek pozwala na sprawne i szybkie wykonanie zrzutu ekranu z zawartością przeglądanej strony W W W
P la g ia t tutor: Bartosz Dkot * D i i i : 2t.0&3!Xf kominiarzy: 5 Kilka dni temu trafi do mnie mail z odnośnikiem do strony z pirackimi kopiami książek (e-boctłd) Wśród kilkunastu tytułów są moje publikacje Sprawa nie jest nowa i od dawna wiem o tym, że kilka książek zostało zeskanowych i nielegalnie udostępnionych w sieci Jednak tym razem podczas rutynowych oględzin moją uwagę przykuła książka, która jak do [. .] W ięcej»
Etap piąty — pojedynczy wpis Po kliknięciu hiperłącza Czytaj całość widocznego obok pojedynczych wpisów na stro nie głównej, pojawi się pełna treść notatki. Przygotowanie takiej strony z pojedynczym wpisem ogranicza się do wprowadzenia zmian wyłącznie w zawartości lewej kolumny. N a rysunku 5.8 widać przykładową notatkę z mojej strony WWW. Do przygotowania struktury notatki wykorzystałem nagłówek stopnia drugiego oraz trzeciego i znaczniki odpowiedzialne za tworzenie akapitów i list wypunktowanych. Stosowny kod XHTML może wyglądać mniej więcej tak:
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
227
Rysunek 5.8. Strona z przykładową notatką
A Mapa 3tiony
B artosz D anow ski literatura
informatyczna
Strona główna II Książki li Artykuły | o mnie |f Przyjazne strony Danowski.pi » Nero
Kontakt 1 Sklep ]
w m m
Szukaj
Nero - problem y z językiem polskim Dostałem kilka p y ta ń d o ty c z ą c y c h te g o sam eg o problem u. W skrócie chodzi o to , ż e oryginalny zakupiony w polskim sklepie p a k iet Nero 7 me w yśw ietla się w języ k u polskim. Przy czy n ą takiego s ta n u rze cz y je s t błąd in stala to ra. Na sz cz ęśc ie rozw iązanie j e s t bard zo p ro ste . W y starczy z a sto s o w a ć się do instrukcji zam ieszczo nej poniżej:
Kategorie * A ktualności » Ciekaw e program y • Mozilla
• Ze stro n y p ro d u ce n ta pobierz n a jn o w szą polską ,
7 • Pobierz program General CleanToot,
• Nero » Nie na te m a t
• O dinstałuj aktualnie p o sia d a n ą w ersję Nero 7, • W yczyść kom p u ter z a p o m o c ą program u General CleanTool, • Z ainstaluj n o w ą w ersję Nero 7 (u ży j oryginalnego num eru seryjn eg o ). Od te j chwili Nero pow inno praw idłow o działać w n aszym rodzim ym języku.
Zobacz też: • Nielegalne legalne Nero 7
■ O głoszenia • Porady Pozycjonow anie stro n Pręgierz » S tro n y WWW i in te rn et • W łaśnie piszę
• Nowa w ersja Nero 7 • Nowe Nero 7 .0 .8 .2
O pinie czyteln ików Nie dawno książkę pC. "BIOS. Przewodnik. Wydanie U" k tó ra wiele mnie nauczyła t pomogła lepiej poznać BIOS.
B IO S
m
Błogi - Poradnik w eb m aste ra • n e t to m arc o o s.te ch b lo g Tako rze cz e Shrew ® W ebAudit Blog
RSS_________________ 1*3 W szystkie w pisy O Książki Q Artykuły
PS
N ew sletter Jeśli c h c e s z b yć pow iadam iany o now o ściac h na stronie zaprenum eruj b iu le ty n in f o r m a c y jn y *
Nero - problemy z językiem polskim
Dostałem kilka pytań dotyczących tego samego problemu. W skrócie chodzi o to. że oryginalny zakupiony w polskim sklepie pakiet Nero 7 nie wyświetla się w języku polskim. Przyczyną takiego stanu rzeczy je s t błąd in sta la to ra . Na szczęście rozwiązanie je s t bardzo proste. Wystarczy zastosować się do in s tru k c ji zamieszczonej poniżej:
<1 i>Ze strony producenta pobierz najnowszą polską wersję Nero 7 < /li>
Rysunek 5.9 przedstawia efekt działania powyższego kodu. Akurat w tym przypadku dodatkowe formatowanie nie jest wymagane. Jeżeli jednak uznasz, że pewne elementy powinny wyglądać inaczej, oczywiście możesz to zrobić za pomocą kaskadowych ar kuszy stylów. Rysunek 5.9.
Bartosz Danowski
W y n ik d zia ła n ia p o w yższeg o kodu
l it e r a t u r a i n i o r m a t ycz n a
i Si runa główna j[ K s ią ż k i! A rtykuły II O mote lj Przyjazne strony j| k on takt |f S klep i
p i
Szukaj
Nero - problem y z języ kiem polskim Dostałem kilka p tar. dołcczaocb tego samego problemu W skrócie chodn o to. że or. gmakw zakupione u- polskim sklepie pakiet Nero ~
wyświetla się w jęzvku polskim Przyczyną takiego stanu tzeczy jest bł j e mstakitoi.’. Na szczęście rozwiązanie jest tardzo proste Wystarczyzastosować się do tnitrukcji zamieszczonej potaże)
[ .......... -
.....................
M m
Kategorie Aktualności Ciekawe program-.
• • • • •
Ze strony producenta pobierz najnowsza polską wersję Nero 7 Pobierz program Generał CleanTooł, Odinstahij aktnałnie posiadaną ssersję Nero '. Wyczyśc komputer za pomocą programu General CleanTooł, Zamstalli) nowa wersję Nero 7 (nżyj oi -ginałnego numeru seryjnego)
O d tej chwib Nero powinno ptaurdkiwc działać w nasr.rn rodzonym jęrdni
Zobacz też:
MonBa Nero Nie oa temat Ogłoszenia Porady Pozycjonowanie stron Pręgierz Strony W W W i internet
♦ Niełegałne legalne Nero 7 ♦ N ow a wer sja Nero 7 ♦Nowe N ero 7.0.8
Właśnie piszę
2
J
i
e*
|
|
prawa zastrzeżone
Sekcja „Książki” Osoby, które na mojej stronie WWW klikną przycisk Książki, trafią do oddzielnej części witryny, zawierającej wykaz napisanych przeze mnie książek. Podobnie jak na stronie głównej, mamy do czynienia z krótkimi notatkami i dopiero po kliknięciu odnośnika Czytaj całość możemy zobaczyć pełny opis danej publikacji. Rysunek 5.10 przedsta wia widok listy krótkich zapowiedzi. Zwróć uwagę, że obok każdej pozycji znajduje się mała okładka książki. Zmianie uległo również menu widoczne z prawej strony. Za utworzenie każdego ze skróconych wpisów odpowiadają te same struktury znacz ników co w przypadku strony głównej. Innymi słowy, mamy prawie gotowy arkusz stylów do tego, aby sformatować pojedynczy wpis. Poniżej zamieściłem przykładowy kod, który powinien znaleźć się pomiędzy znacznikami < /d iv> . Do datkowo pogrubiłem fragment odpowiedzialny za wstawienie obrazka.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
229
Rysunek 5.10. Widok sekcji Książki
B artosz D anow ski
r
lite r a tu r a in f o r m a ty c z n a Stro n a głów na || K sią żk i || Artykuły
_________ ______ _
0 mnie | Przyjazne stro n y
Danowski.pl • Książki
K ontakt 1 Sklep
Szukaj
Książki
ABC sam o ptym alizuję komputer ¡ 5 1 2 .07.2007
Kategorie
O Nie ma ko m en taizy « Edytuj
"ABC sam o p tym alizu ję kom puter" to p rzy stęp n y poradnik dla o só b , któ re c h c ą możliwie najlepiej p rzy g o to w ać sw ojego p e c e ta do w ydajnej i kom fortow ej p rac y . Dzięki te j k siążce n a u cz y sz się sk u teczn ie optym alizow ać działanie kom putera, odpow iednio konfigurując ustaw ien ia BIO S-u, sy ste m u o p era cy jn e g o i u żyw anych program ów . Z o b aczy sz, jak podzielić dyski i rozplanow ać przechow yw anie d an y ch . Dowiesz się ta k ż e , ja k zw iększyć b e zp ie cz eń stw o sy ste m u i k tó re elem e n ty kom p u tera w arto wymienić, jeśli z aw io d ą inne spo so b y p opraw y w ydajności.
» F otografia cyfrow a • In te rn e t • Komputer PC * K onfiguracja i optym alizacja * M ontaż i napraw a * P odkręcanie i tunm g • M ontaż wideo • N agryw anie płyt » Program y biurowe
C zytaj c a ło ść »
• S ystem y opera cy jn e
Pozycjonowanie 1 o ptym alizacja stron WWW. Ja k to się robi
• Tw orzenie stro n WWW
5
» W edług serii
12.06.2007 »p Kom entarzy: 4 » E d y tu j
* ABC
Dzięki k siążce "Pozycjonowanie i op tym alizacja stron W WW. Jak to się r o b i'1 zrozum iesz, ja k d ziałają wyszukiwarki, ja k w pływ a to n a kolejność w yśw ietlania odnośników do znalezionych m ateriałów , a p rze d e w szystkim — jak użyć te j w iedzy do tw orzenia stro n , k tó re b ę d ą zajmowały w ysokie p o z y cje w w ynikach w yszukiwania. Poznasz ta k ż e techniki umożliw iające p o p raw ę funkcjonalności w itryny oraz d o d atk o w e sp o so b y je j prom ow ania, dzięki czem u liczba osób o d w ie d za jąc y ch stro n y Tw ojej firmy szybko w zrośnie, podobnie ja k g en ero w a n e przez m ą zyski.
«► Ćwiczenia
SUMWWW
C z y ta j c ało ść »
•» Ilustrow any przewodnik 4» Kurs * Po p ro stu 4 S ta n d a rd * Tablice inform atyczne * T łum aczenia
Opinie czytelników_________
Nagrywanie płyt CD 1 DVD. Kurs. Wydanie II “
Jestem ju z trz y miesiące po studiowaniu Pana ksiąZek które sa super!
1 7 .0 4 .2 0 0 7 ^ » K o m en ta rz y : 2 » E dytuj
Książka "Nagrywanie p łyt CD i DVD. Kurs. W ydanie n ' pom oże każdem u użytkownikowi w rozwianiu wszelkich w ątpliw ości z w iązanych z zapisyw aniem d a n y ch n a p ły ta ch . C z y ta jąc ją , n a u czy sz się n ag ryw ać p ły ty z danymi, plikami mp3 i filmami, tw orzyć cyfrow e albumy fo to g raficzn e i p ły ty OVO. P o zn asz różne narzęd zia słu ż ąc e d o p rac y z nagryw arkam i, sp o so b y zoptym alizow ania działania sy ste m ó w o p era cy jn y c h p o d k ą tem w spółpracy z tymi urządzeniam i oraz m e to d y tw orzenia archiw ów d a n y ch n a p ły ta ch CD. P rz ec zy ta sz takZe o zapisie w ielosesyjnym i projektow aniu okładek n a płyty.
m a rc o o s. te chblog n e t to T ako rze cz e Shrew W ebAudit Blog Poradnik w eb m aste ra
C z y ta j c a ło ść »
Windows V ista PL. Instalacja i naprawa. Ćwiczenia praktyczne
RSS ¿ 3 W szystkie wpisy
*5 2 8 .0 3 .2 0 0 7 '■‘P Nie ma k om entarzy » E dytuj
¿ 3 Książki
Dzięki k siążce "Windows Vista PL. In stalacja I naprawa. Ćwiczenia praktyczne" błyskaw icznie zain stalu jesz now e okna t p rzy g o tu jesz je d o p rac y . Dowiesz się, jaki kom puter je s t p o trzeb n y , a b y k o rzy stać z V isty, jakie s ą możliwości p o szczegó lny ch w ersji te g o sy ste m u , a ta k że ja k z ain stalo w ać g o n a p u sty m dysku lub zaktualizow ać W indows XP. Z o b aczy sz, jak a k ty w o w ać sy ste m , a n a stęp n ie pielęgnow ać go, d o d a jąc ak tu alizacje i w łączając zab ezp ieczen ia. N auczysz się konfigurow ać V istę i in stalo w ać sterow niki p o trze b n e do działania ko m p u tera, a ta k że p o z n asz p rzy d a tn e techniki zab ezp ieczania d a n y ch oraz rozw iązyw ania rozm aitych problem ów, c o pozwoli C kom fortow o k o rzy stać z te g o sy ste m u .
£ 3 Artykuły
■
Banów Dflnowtk- c Wszystkie pi
N ew sletter Jeśli c h c e s z b yć pow iadam iany o now o ściac h na stronie zaprenum eruj b iu le ty n I n fo r m a c y jn y «
ABC sam optymalizuję komputer to przystępny poradnik dla osób, które chcą możliwie n a jle p ie j przygotować swojego peceta do wydajnej i komfortowej pracy. Dzięki te j książce nauczysz się skutecznie optymalizować działanie komputera, odpowiednio konfigurując ustawienia BIOS-u. systemu operacyjnego i używanych programów. Zobaczysz, jak podzielić dyski i rozplanować przechowywanie danych. Dowiesz się także, jak zwiększyć bezpieczeństwo systemu i które elementy komputera warto wymienić, je ś li zawiodą inne sposoby poprawy wydajności,
Jedyną zm ianą w arkuszu stylów jest dodanie poleceń określających oblewanie ob razka tekstem oraz utworzenie wokół niego ramki. Odpowiednie wpisy powinny wy glądać mniej więcej tak: div.wpis img { f l o a t:rig h t: border:sol id 2px s ilv e r: padding:2px; margin:5px;
Pierwsza z deklaracji określa sposób, w jaki obrazek zostanie oblany tekstem. W tym przypadku obrazek znajdzie się z prawej, a tekst z lewej strony. Kolejne wpisy defi niują wygląd ramki oraz margines i dopełnienia. Ostateczny efekt jest widoczny na rysunku 5.11. Rysunek 5.11. P rzykład wykazu książek — krótki opis p lus okładka książki
Bartosz Danowski lit e r a t u ru in f o r m a t y c z n a ! Strona glowo j j! Książki |j Artykalyi O ma ii
--------- 1
ABC sam optymalizuje komputer to przystępny poradnik
Pozycjonowanie l optymalizacja stron W W W . J a k to
Pręgierz
Auer:Bsn«z r>aw«*in D«l»: i: .V200' Komiourr' 0 Dzięki książce Pozycjonowanie i optymalizacja stron WWW. Ja k to się robi zrozumiesz, jak działają wyszukiwarki, jak wpływa to na kolejność wyświetlania odnośników do znalezionych materiałów a przede wszystkim jak użyć tej wiedzy do tworzenia stron, które będą zajmowały wysokie pozycje w wynikach ; wyszukiwania Poznasz także techniki umoźiwiayące poprawę finkcjonaioości witryny oraz dodatkow e sposoby jej promowana, dzięki czemu liczba osób odwiedzających strony Twojej firm\ wzrośnie, podobnie jak generowane przez nią zyski
«mWW W
Czytaj cafość
Rnrlo-.r Danowski 5 Wszystkie prawa ustrzeżone
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
231
Z nieco bardziej skomplikowanym rozwiązaniem mamy do czynienia na podstronie konkretnej książki (rysunek 5.12). Również tym razem cały kod powinien znaleźć się w głównym kodzie strony, pomiędzy znacznikami
♦ Montaż
1 napraw a
♦ Podkręcanie i tumng • Montaż wideo ■ Nagrywanie płyt • Programy biurowe ® S ystem y operacyjne » Tworzenie stron WWW - Według serii ♦ ABC ♦ Ćwiczenia ♦ Ebooki •» Ilustrow any przewodnik
•e Po prostu ♦ S tandard ♦ Tablice inform atyczne ♦ Tłumaczenia
Opinie czytelników Właśnie przeczytałem Pana książkę "ABC sam naprawiam komputer". Tak ja k poprzednie je s t napisana bardzo zrozumiałym językiem dla laika komputerowego, takiego ja k ja . To dobrze, Ze uniknął Pan tych wszystkich fachowych terminów, zrozumiałych dla specjalistów.
Zobacz też: • ABC tw orzenia stron w w w , W ydanie drugie
Błogi
• ABf sam n a p ra w o m komputer • ABC sam składam komputer. W ydanie II ■ Poradnik webmastera WebAudit Biog marcoos.techbłog • Tako rzecze Shrew
RSS ( 3 Wszystkie wpisy ¿3 Książki ¿3 Artykuły
Newsletter Jesłi chcesz być powiadamiany o nowościach na stronie zaprenumeruj biu le ty n in fo rm a c y jn y »
Bono» O»now»ło C Wuysliue |«m u
1
Tworzenie stron WWW w praktyce
232
Do przygotowana strony książki wykorzystałem nagłówek stopnia drugiego i trzeciego, kilka bloków tekstu oraz listy wypunktowane. Dodatkowo ramka ze szczegółowymi informacjami na temat książki wykorzystuje znacznik oraz listę wypunk towaną. Przykładowy kod jest widoczny poniżej.
Jak poprawić komfort pracy w systemie operacyjnym?
W wielu przypadkach komputer po wymianie podzespołów i skonfigurowaniu nadal nie działa tak, jak użytkownik oczekiwał. Na pozór najprostszym wyjściem je s t wtedy zakup nowego sprzętu, jednak je s t to kosztowne rozwiązanie i . co gorsza, często nie gwarantuje spodziewanych efektów. Na szczęście is tn ie je lepszy i tańszy sposób. Współczesne komputery i systemy operacyjne dają wiele możliwości w zakresie samodzielnej poprawy szybkości oraz stabilności działania programów, a także zwiększania komfortu i efektywności pracy.
ABC sam optymalizuję komputer to przystępny poradnik dla osób, które chcą możliwie n a jle p ie j przygotować swojego peceta do wydajnej i komfortowej pracy. Dzięki te j książce nauczysz się skutecznie optymalizować działanie komputera, odpowiednio konfigurując ustawienia BIOS-u. systemu operacyjnego i używanych programów. Zobaczysz, jak podzielić dyski i rozplanować przechowywanie danych. Dowiesz się także, jak zwiększyć bezpieczeństwo systemu i które elementy komputera warto wymienić, je ś li zawiodą inne sposoby poprawy wydajności,
Ustawianie opcji BI0S-u
Dobór i konfigurowanie sterowników
Efektywne zarządzanie systemem plików
Optymalizowanie systemu operacyjnego Windows XP/Vista
Zapewnianie bezpieczeństwa systemu
Archiwizowanie danych w systemie Windows Windows XP/Vista
Podkręcanie procesora, karty graficznej i pamięci
Wymiana przestarzałego sprzętu
Stosowanie przydatnych programów narzędziowych
Zastosuj sprawdzone techniki optymalizacji i tc h n ij nowe życie w swój komputer.
Zobacz też:
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
Myślę, że komentowanie poszczególnych elementów powyższego listingu jest zbędne i nie ma w nim nic, co nie zostało opisane do tej pory w książce. Zwróć tylko uwagę na dodatkowe identyfikatory, które dopisałem w kilku miejscach. Dla ułatwienia po grubiłem je w przykładowym listingu. Rysunek 5.13 przedstawia wygląd strony z opi sem książki bez odpowiedniego formatowania. Rysunek 5.13. Wynik działania kodu odpowiadającego ze stronę z opisem książki. Zwróć uwagę na to, że obrazek je s t form atowany za pom ocąjednego z wcześniejszych wpisów. Będziemy to musieli teraz zmienić
Bartosz Danowski
lite ra !u r.i in form a tycz na
! Mruua głowa* ¡ K sią żki j Artykuły j: O mai>-!; Pr/s jasne « ro m j| k u m a ki ¡; Sklep
ABC sam optymalizuję komputer • • • • • •
Strona domowa książki Spis treści ISBN: 978-83-246-1037-2 Format B5, stron: 384 Datawydama 2007-07-12 Ftagment książki w PDF
Dodaj do koszyka W ykorzystaj petuię możliwości swojego komputera • Jak zapewnić stabilne funkcjonowanie komputera? • Jak przyspieszyć działanie programów1 • Jak poprawić komfort pracy w systemie operacyjnym’ W wielu przypadkach komputer po wymianie podzespołów i skonfigurowaniu nadal nie działa tak, jak użytkownik oczekiwał N a pozór najprostszym wyjściem jest wtedy zakup nowego sprzętu, jednak jest to kosztowne rozwiązanie i, co gorsza, często nie gwarantuje spodziewanych efektów N a szczęście istnieje lepszy i tańszy sposób. Współczesne komputery i systemy operacyjne dają wiele możliwości w zakresie samodzielnej poprawy szybkości oraz stabilności działania programów, a także zwiększania komfortu i efektywności pracy.
Pozycjonowanie stron
Strony W WW' i internet
A B C sam optymalizuję komputer to przystępny poradnik
Ustawianie opcji BIOS-u Dobor i konfigurow ane sterowników Efektywne zarządzanie systemem pików Optymalizow anie systemu operacyjnego Windows X P Vista Zapewnianie bezpieczeństwa systemu Archiwizowanie danych w systemie Windows Windows X P Vista Podkręcanie procesora, karty graficznej i pomięci Wymiana przestarzałego sprzętu Stosowanie przydatnych programów narzędziowych
Zastosuj sprawdzone techniki optymalizacji i tchnij nowe życie w swój komputer.
Z o b a c z też: • A B C tworzenia stron W W W . Wydanie drugie • A B C sam naprawiam komputer • A B C sam składam komputer Wydanie II
Bartosz Dauowski
¡iWszystkie ptaw a zastrzeżone
Szybka analiza rysunku 5.13 pokazuje, że zmiany są konieczne. N a szczęście nie ma ich zbyt wiele i dotyczą właściwie modułu, w którym znajdują się szczegółowe infor macje na temat książki.
234
Tworzenie stron WWW w praktyce
Moduł ze szczegółami książki ma przypisany własny identyfikator o nazwie legenda i to właśnie do niego dodamy wpisy odpowiedzialne za zmianę wyglądu. Zaczynamy od określenia szerokości, koloru tła i obramowania. Dodatkowo ustawiamy dopeł nienie i wymuszamy, aby element został oblany tekstem z lewej strony. Odpowiedni kod CSS znajduje się poniżej. div#legenda { wi dth:195px: background-color:#DEDCDC; border: so lid lpx s ilv e r: padding:5px: flo a t:r ig h t:
Dalsze zmiany polegają na wyłączeniu punktora listy i formatowaniu wyglądu tekstu. Widoczne poniżej fragmenty kodu należy dopisać do arkusza stylów. ul#ramka { list-style -typ e :n o n e ; padding:0; line-height:l,5em : }
Powyższy fragment wyłącza punktor listy, likwiduje dopełnienie i zwiększa odstępy pomiędzy poszczególnymi pozycjami. span#cena { font-size:30px: color:red; font-weight:bold;
Następny kawałek arkusza dotyczy ceny książki. Określiłem rozmiar, kolor oraz wagę czcionki. div#legenda p { border: lpx so lid s ilv e r: background-col o r :#D7D5D5: padding: 5px; padding-left:20px; padding-right:20px; te xt-a lig n :ce n te r; font-weight:bolder;
Ostatni element dotyczy przycisku odpowiadającego za dodanie książki do koszyka. W tym przypadku włączyłem obramowanie, ustawiłem tło, dodałem zróżnicowane do pełnienie oraz wyśrodkowałem i pogrubiłem tekst. Zwróć uwagę na wykorzystanie selektora potomka.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
235
Na rysunku 5.14 przedstawiłem ostateczny efekt. Zwróć uwagę, że formatowanie po zostałych elementów nie jest wymagane. Rysunek 5.14. Gotowa strona książki ‘ ABC sam optymalizuję komputer | W ykorz) staj pełnię n o tlń ro tc i snojego komputera
ÍÜ8ÜB
• Jak zapewnie stabilne ♦ Jak przvspmszyc działame * Jak poprawić komfort pracy v
_ W widu przypadkach komputer po skonfigurowaniu m itil nie H;mt» tak, jak użytkownik oczekiwał. N a pozór najprostszsTO wyjściem jest wtedy iakup nowego spueto, jednak jestto kositowne rozwiązani, i, co goesia. czeito nie gwaroMa* ^edziew an,^ efektów. N a oea«ida fimieje lapazy i tańszy' sposób. Współczesne komputery i systemy operacyjne dają wiele możliwości w zakresie
[ s b ŃT 978-83-24(>-1037-2 F o ra a t B5 siróei 384 ’ Da> „ p DF
ta0m t v
t lliJ . o V .
. * Zł
samodzielnej poprawy szybkości oraz stabilności działania programów a także zwiększania komfortu i efektywności pracy
Dodaj do koszyka
A B C sam optymalizuję komputer to przystępny poradnik dla osób, które chcą mozfcwre najlepiej przygotować swojego peceta do wydajnej i komfortowej pracy Dzięki tej książce nauczysz się skutecznie optymalizować działanie komputera, oĄjow ieAno konfigurując ustawienia B lO S -u, systemu operacyjnego i używanych programów Zobaczysz, jak podzielić dyski i rozplanować przechowywanie danych. Dowiesz się także, jak zwiększyć bezpieczeństwo systemu i które elementy komputera warto wymienić, jeśk zawiodą inne sposoby poprawy wydajności * Ust >r i k o m plików ♦ Optymalizowanie systemu operacyjnego Windows X P Vista ♦ Zapewnianie bezpieczeństwa systemu ♦ Archiwizowanie danych w systemie Windows Windows X P V is i ♦Podkręcanie procesora, karty graficznej i pamięci ♦ Wymiana przestarzałego sprzętu ♦ Stosowanie przydatnych programów narzędziowych Zastosuj sprawdzono techniki optym alizacji i tchnij nowe życie w swój komputer.
Z o b a c z też: ♦A B C tworzenia stron W W W Wydanie thugie ♦.ABC sam naprawiam komputer
Sekcja „Artykuły” Strona główna sekcji Artykuły nie różni się niczym od tego, co do tej pory zrobiliśmy. Podobnie ma się z podstroną konkretnego artykułu. Dlatego nie będę opisywał, w jaki sposób została utworzona. Przy okazji sekcji Artykuły chcę tylko zwrócić Twoją uwagę na jedną kwestię, o której wspominałem nieco wcześniej. Publikując długie teksty, np. artykuły, musisz mieć na uwadze, że należy je dzielić na mniejsze części — podstrony. Podział na podstrony przyśpiesza ich wczytywanie, ułatwia czytanie i pozytywnie wpływa na liczbę podstron, co z kolei przydaje się podczas pozycjonowania witryny.
236
Tworzenie stron WWW w praktyce
Na rysunku 5.15 pod tekstem znajduje się dodatkowe menu nawigacyjne, które po zwala przejść do kolejnych podstron artykułu. Rysunek 5.15. Podstrona artykułu — do je j utworzenia wykorzystałem typowe rozwiązania, o których wiele razy była mowa w tym rozdziale
•Ti M apa strony
Bartosz Danow ski literatura
informatyczna
f S tro n a główna l i Kwążki || A rty k u ły |j O mnie || Przyjażne stro n y D anow ski.pl» CDRinfo
K ontakt
Sklep
Szukaj
P ra w id ło w a k o n fig u ra c ja n a p ę d ó w IDE Niemal codziennie n a fdom i.cdrinfo.pl pojaw iają eią p y tan ia na te m a t te g o w jaki sp o só b popraw nie podłączyć nagryw arkę IDE do k om putera. Ze w zglądu n a sp o rą ilość możliwych konfiguracji poniżej zam ieszczam kilka propozycji. Mam nad zieją, ze wielu użytkownikom zaprez en to w a n e porad y pom o g ą pozbyć sią problemów zw iązanych z nieprawidłowo p o d p iętym urządzeniami IDE - zarów no dysków ja k i n apędów o p ty czn y ch . Kontroler in terfejsu IDE d o stę p n y w każdym kom puterze składa się z dw óch kanałów , do k tó ry ch m ożemy p odłączy p o dw a u rządzenia. Każde z u rząd zeń musi mieć sw oje określone m iejsce. Do te g o celu słu ż ą sp ecjaln e zworki z n ajd u jące się z tyłu u rządzenia. Na jednym kanale m ogą p raco w ać dw a u rządzenia. Jednak by to było możliwe, każde z ruch musisz odpowiednio skonfigurować. Z asad a konfiguracji try b u p rac y urząd zeń IDE je s t ta k a sam a zarów no dla dysków tw ard y ch , jak i n apędów o p ty czn y ch . Jedno urządzenie należy u sta w ić w trybie pracy MASTER, a drugie w trybie SLAVE. Na jednym kanale nie m ogą p raco w ać dw a urządzenie u staw io n e w tym samym trybie — np. SLAVE. Dokładny opis spo so b u ustaw ien ia zworek n a tylnym panelu nagryw arki znajdziesz w dokum entacji nagryw arki lub n a jej obudowie.
• CDRinfo • CHIP • Cyber • M agazyn INTERNET
Opinie czytelników Mam prawie wszystkie Pana książki szczególnie cenię sobie to, te pisane są jasnym precyzyjnym językiem.
»
L
7 .- — - '
ó1
1
B łogi... * m arcoos.techblog ' Poradnik w ebm astera
W dalszych przykładach b ę d ę b azo w ać n a konfiguracji c z te re c h u rządzeń IDE — dw a dyski tw ard e oraz nagryw arka i n ap ęd CD/DVD-ROM. Dzięki tem u będzie możliwe przedstaw ienie z d ecy d ow an ej w iększości przypadków , z którymi m ożesz mieć do czynienia. Jeżeli w Twoim kom puterze p o siad asz n p . tylko jeden dysk, to w y sta rc zy , te z o staw isz p u ste m iejsce.
• n e t to
Zobacz też:
RSS
- Tako rzecze Shrew
* WebAudit Błog
• In tern e to w a a ktualizacja Nero 7
¿ 5 W szystkie wpisy
• Nero a pra.vo do zapisu w Windows 2000/X P
0 Książki ¿ 3 Artykuły
■ O l
N ew sletter Jeśli c h ce sz być pow iadamiany o now ościach na stronie zaprenumeruj b iu le ty n I n fo r m a c y jn y •
I WebOewęn. M.kołS)
I Powered Iw WonJprełu
Sekcja „O mnie” Sekcja O mnie nie różni się niczym od tego, co do tej pory zrobiliśmy. Dlatego nie będę opisywał, w jaki sposób została utworzona.
Sekcja „Przyjazne strony” Kolejna część mojej witryny zawiera wykaz odnośników do stron, które odwiedzam (rysunek 5.16). Podczas tworzenia tej strony wykorzystałem nagłówek stopnia drugie go, blok tekstu, cytat oraz listę wypunktowaną.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
237
Rysunek 5.16.
iii Mapa strony
B artosz D anow ski
Sekcja Przyjazne strony
i n f o r m a t yc z n a
literatura
| S tro n a głów na |j Ksią/kł || Artykuły
jj O mnie
]! P r z y ja z n e s t r o n y || k o n ta k t
Danowslu.pl » Przyjazne stro n y
Sklep ]
Szukaj
P r z y j a z n e s tro n y
1Szukaj na stronie
Jeżeli c h c e s z ab y Tw ój odnośnik znalazł się n a te j stro n ie musisz u m ieścić odw ołanie d o mojej w itryny o treści w idocznej poniżej. N astępnie pow iadom mnie o tym i przyślij tre ś ć o d sy łacza.
• m o n it r - Tłum aczenia program ów • Przeprowadzki
B
1 i
• k a talo g C iekawych Stro n • Przeprowadzki • S a lo lo c k - program do z ab e zp ie cz eń CD • 4MAX - sklep tn tern eto w y • P o rta l coRjnfo.pl - ziódło wiedzy o nag ry w an iu płyt CD/QVD • K omputery to n a sza p a s ja
pyrchla.pl
6lo«l ♦ T ako rzecze Shrew » n e t to
• Maja Kierzkowska » W ebAudit Blog
• Rafał Kochanowski • Pozycjonow anie
• m arc o o s.te ch b lo g
• O tw arty Katalog In tern e to w y
• Poradnik w eb m aste ra
• Dziecko w sieci • H ato n
L iteratura in fo rm aty czn a w najlepszym w ydaniu
• fWOJSPC p!
Twoi-
• Poradnik w eb m aste ra • Szum an
Paw eł Wknmer
stro n a p ry w atn a
• e p p u - inform atyka i multimedia Przem ysław Danowski, o u tsou rcin g n
RSS .... t j W szystkie wpisy IfcJ Książki Artykuły
(E j
• Grze goi z Harasim owicz
N ew sletter
• Oil P eak , ro p a n a fto w a
Jeśli c h c e s z b yć pow iadam iany o n o w ościach n a stronie zaprenum eruj b iu le ty n in f o r m a c y jn y »
E dytuj,
Bartosz Danowski
t' W tív s U "* otawa le a rte n irn I Aebdesipr: Mikołaj barrzrntswicz I Powered by W c S c n :
Odpowiednia struktura kodu wygląda mniej więcej tak:
Przyjazne strony
Jeżeli chcesz aby Twój odnośnik znalazł się na te j stronie, musisz umieścić odwołanie do mojej witryny o tre ści widocznej poniżej. Następnie powiadom mnie o tym i p rz y ś lij treść odsyłacza.
Po sprawdzeniu, jak wygląda strona po dopisaniu treści, okazuje się, że użyte do tej pory style idealnie pasują do formatowania nowej treści. Jedynym elementem, który wymaga poprawy, jest cytat. Aby to zmienić, do arkusza stylów powinniśmy dopisać następujący fragment kodu, który określa kolor i rodzaj czcionki, dopełnienie i lewą krawędź całego bloku. blockquote { b o rd e r-le ft:sol id 5px gray: fo n t-f ami 1y :monospace: color: green: padding: 5px; }
Katalog Ciekawych Stron Rafał Kochanowski Sznman - strona prywatna M aja Kierzkowska Przeprowadzki TwojePC pl - Twoje źrodło informacji o Sprzede Helion - Literatura informatyczna w najlepszym wydaniu Grzegorz Harasimowicz 4 M A X - sklep internetowy Pozycjonowanie Portal CDRinfo.pl - żródb wiedzy o nagrywaniu płyt CD/DVT) Dziecko w sied Komputery to nasza pasja : pvrchla.pl Otwarty Katalog Internetowy M O N T E R - Tłumaczema programów SafeLock - program do zabezpieczeń C D eppu - informatyka i multimedia Przemysław Danowski.
Strony W W W i internet
• Poradnik webmastera - Paweł Wimmer • Oil Peak ropa naftowa • Przeprowadzki Bartosz D anowski t w szystkie praw a zastrzeżone
Sekcja „Sklep” Sekcja Sklep zawiera krótki wykaz poszczególnych książek wraz z najważniejszymi informacjami, możliwością zakupu lub przejścia do pełnej strony z opisem. Na rysun ku 5.18 przestawiłem efekt, który chcemy uzyskać.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
239
Rysunek 5.18. Przykład strony Sklep
B artosz D anow ski
lite ra tu ra in fo rm atyczna Stro n a głów na
Książki i Artykuły ¡ O mnie
_ Przyjazne stro n y
K ontakt |j S k łe p |
Danowski.pl
Sklep ABC sam optymalizuj? komputer ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2 Form at: B5, stro n : 384 D ata w y dania: 2 0 0 7 -0 7 -1 2
C en a : 3 9 .0 0 zł D odaj d o koszyka
i optymalizacja itron WWW. Jak to si? ISBN: 9 7 8 -8 3 -2 4 6 -0 6 9 0 -0 F o rm at: B5, stro n : 264 D ata w y dania: 2 0 0 7 -0 6 -1 2
C e n a : 3 9 .9 0 zł .«ł D odaj d o koszyka
Nagrywani# płyt CD ( DVD. Kurs. Wydani# II ISBN: 9 7 0 -8 3 -2 4 6 -0 7 9 9 -0 Form at: B5, stro n : 328 D ata w y dania: 2 0 0 7 -0 4 -1 6
kcD'íovo C e n a : 3 4 .9 0 z ł jE te lS
° o d a j do koszyka
Windows Vista PL. Instalacja i naprawa. Ćwiczenia ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 4 -1 Form at: A5, stro n : 224 D ata w y dania: 2 0 0 7 -0 3 -2 7
Vista Pt
Koszty w ysytki K raj
0,00 z ł - p ła tn o ść k a rtą kredytow ą, 3 ,5 0 z ł w ysyłka zwykłą p o c z tą za pobraniem , 1 1 ,9 9 z ł - w ysyłka p o c z tą kunerską. Z a g r a n ic a + 70 c e n y k s ią ż k i - pła tn o ść k a rtą kredytow ą i w ysyłka p o c z tą lotniczą. Opinie czytelników Właśnie przeczytałem Pana . ' książkę "ABC sam sam naprawiam kom puter". Tak ja k poprzednie je s t napisana bardzo zrozumiałym językiem dla laika kom puterowego, takiego ja k ja . To dobrze, i e uniknął Pan ty c h wszystkich fa chowych term inów, zrozumiałych dla
j3
B lo,, - T ako rzec; Poradnik w
C en a : 19 .0 0 z ł •Ą D odaj d o koszyka
m a rcoos.techblog * W ebAudit Blog
Windows XP. Naprawa i optymalizacja. Ćwiczenia praktyczne ; ISBN: 9 7 8 -8 3 -2 4 6 -0 7 0 2 -0 : Form at: AS, stro n : 224
!
I Windows XP Data wydarua: 2007-02-21
C e n a : 19 .0 0 z ł
RSS W szystkie wpisy ¿ I Książki Artykuły
i
D odaj d o koszyka
Nero 7 Essenttals. Ćwiczenia praktyczne ; |SBN: 9 7 8 -8 3 -2 4 6 -0 4 6 0 -9 I mTTmhIi N g IO
n o w ościach na stronie zaprenum eruj b iu le ty n in f o r m a c y jn y *
' Form at: AS, stro n : 176
7i
D ata wvdan*a: 20 0 7 -0 2 -0 1
C e n a : 17.90 z ł »0 D odaj do koszyka
Bartota Oanowsk. t wsrysllco prawa zistijato n e ! Web J.:*>orr Mikołaj Barezortewicz I Pomnwl By wordprest
Do sporządzenia pojedynczego modułu, widocznego na liście, wystarczy nagłówek stopnia drugiego, kilka akapitów oraz okładka książki. Stosowny kod może wyglądać mniej więcej tak:
Za pom ocą stylów w pierwszej kolejności ustalamy dla całości szerokość oraz wyso kość, kolor tła oraz rozmieszczenie poszczególnych elementów. W praktyce możemy do tego użyć kodu widocznego poniżej. div#sklep { border:sol id lpx s ilv e r: background-color:#D7D5D5: margin:10px: padding:10px;
Dalej należy wymusić, aby tekst oblał obrazek z prawej strony. Przy okazji określimy odstęp tekstu od obrazka. Odpowiedni kod może wyglądać tak: di v#sklep i mg { flo a t : le f t : border:solid lpx s ilv e r: padding:5px: }
W tej chwili pozostało już tylko zająć się odpowiednim formatowaniem tekstu. Roz myślnie skorzystałem z oddzielnych akapitów, aby uzmysłowić Ci, że w ten sposób też można budować stronę i formatować odpowiednie elementy. Poniższy fragment ar kusza stylów odpowiada za określenie dostępów pomiędzy akapitami, kolom tekstu i tła. di v#sklep p { margin:0: padding:0: } p#cena { font-size:25px; c o lo r:red; font-weight:bold: } p#koszyk { border: lpx solid s ilv e r: background-color:#D7D5D5; padding: 5px; padding-left:20px; padding-right:20px; te xt-a lig n :ce n te r: font-w eight:boi der;
Sekcja „Kontakt” Ostatnim elementem mojej strony jest dział Kontakt. Nie muszę chyba nikomu mówić, jak ważny jest to element i że musi się on znajdować na każdej szanującej się stronie. Rysunek 5.19 przedstawia m oją stronę kontaktową.
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
24 1
Rysunek 5.19. Podstrona Kontakt
B artosz D anowski l i t e r at u r a i nf o r m a t yczna _ S tro n a głó w n j
Książki
Artykuły
O mtue
___________ P izy ja/r.e stro n y ji K o n ta k t
D anowski.pl • K ontaktu
Sklep ¡
Siukaj
K o n ta k t Uwaga, zanim do mnie nap iszesz uw ażnie p rze cz y taj informacje zam ieszczone poniżej. • Jeżeli c h c e sz sk o rzy stać z form ularza k o n tak to w eg o musisz bezw zględnie wypełnić w szystkie pola, P o d a n ie b łę d n e g o a d r e s u u n ie m o ż liw i m i o d p o w ie d ź n a T w o ją w ia d o m o ś ć . • Jeżeli c h ce sz b y ć informowany o no w o ściach n a te j stronie zamów mój biuletyn informacyjny. • U dostępniony form ularz służy w yłącznie d o korespondencji p ry w atnej z moimi czytelnikami. N ie ż y c z ę s o b ie o tr z y m y w a ć n ie z a m a w ia n y c h in fo rm a c ji h a n d lo w y c h o raz sp am u .
formatmri kom*kłowy 1 Imię:
O pinie czytelników Zdecydowałam się do Ciebie napisać, ponieważ bardzo spodobała m i się konwencja książki p t. 'Kom puter PC Ćwiczenia praktyczne"... naprawdę super. Wszystko je s t napisane jasno, zwięźle i klarownie...
Błoci m a rcoos.techblog Tako rze c z e Shrew » n e t to
T reść w iadom ości: - W eb Audit Błog Poradnik w ebm astera
RSS ¿ 3 W szystkie wpisy Łj Książki Wyik,:
¿ 3 Artykuły
N ew sletter Jeśk c h ce sz być pow iadam iany o now ościach n a stronie zaprenum eruj b iu le ty n in f o r m a c y jn y *•
W dalszej części niniejszego podrozdziału opisałem tylko, w jaki sposób zbudować formularz i sformatować go za pomocą kaskadowych arkuszy stylów. M usisz jednak pamiętać, że formularz kontaktu musi być obsłużony przez odpowiedni skrypt. W prze ciwnym wypadku treści wysłane za jego pośrednictwem są nieczytelne. Więcej infor macji na temat obsługi formularza znajdziesz w dodatku do niniejszej książki. Zwróć uwagę na to, że zrezygnowałem z podawania adresu e-mail, a zamiast tego udo stępniłem formularz kontaktowy. Takie rozwiązanie pozwala wysłać do mnie wiado mość bez konieczności posiadania własnego konta. Poza tym formularz skutecznie chroni mój adres przed spamem. Uzupełnieniem formularza są krótkie zasady kontaktu, które m ają usprawnić cały proces. Kod XHTM L odpowiedzialny za przygotowanie strony kontaktowej znajduje się poniżej. Zwróć uwagę na ciekawe zastosowanie listy definicji do budowy formularza.
Kontakt
Uwaga, zanim do mnie napiszesz uważnie przeczytaj informacje zamieszczone poniżej,
Jeżeli chcesz skorzystać z formularza kontaktowego musisz bezwzględnie wypełnić wszystkie pola. Podanie błędnego adresu uniemożliwi mi odpowiedź na Twoją wi adomość.
242
Tworzenie stron WWW w praktyce
Jeżeli chcesz być informowany o nowościach na te j stronie zamów mój biuletyn inform acyjny.
Udostępniony formularz służy wyłącznie do korespondencji prywatnej z moimi czytelnikami. Nie życzę sobie otrzymywać niezamawianych informacji handlowych oraz spamu.
Oczywiście, kod XHTML wymaga stosownej obróbki za pomocą kaskadowych arkuszy stylów. Musimy określić rozmiar pól, właściwości etykiety, kolor obramowania i parę innych drobiazgów. Przykładowy zestaw poleceń przydatnych w tym przypadku za mieściłem poniżej. #lewa input, textarea ■ { wi d th :350px: } legend { border:sol id lpx s ilv e r; padding:3px; background-colo r:#EEEEEE; } fie ld s e t { border:solid lpx green;
Nazwy plików Przygotowałem już wszystkie elementy strony i utworzyłem kilkadziesiąt plików — podstron witryny. Całość została połączona i tworzy mój internetowy wizerunek. Na zakończenie tego rozdziału warto napisać kilka słów na temat nazw plików, które odpowiadają poszczególnym podstronom. Wbrew pozorom jest to bardzo ważna spra wa, gdyż brak konsekwencji w nazewnictwie poszczególnych plików w przypadku dużych i rozbudowanych witryn jest przyczyną wielu problemów. Dlatego też staraj się
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
243
tak dobierać nazwy plików, by były one możliwie krótkie i związane z zawartością danej strony. Oczywiście, nie zawsze jest to możliwe, dlatego warto opracować jakiś klucz. Na przykład w przypadku nazw plików moich książek można użyć następują cego schematu nazewnictwa poszczególnych plików: a b co p t.h tm l, a b co p t_ sp is. htm l, p o zo p t.h tm l, p o z o p t s p is . htm l,
Oczywiście, nazwa taka może się wydawać mało zrozumiała, ale mnie mówi bardzo dużo. Zacznijmy od tego, że każda książka wymaga dwóch plików. Pierwszy z plików zawiera opis książki i jego nazwa składa się z identyfikatora. Natomiast drugi plik to spis treści i w tym przypadku na początku występuje identyfikator, a po podkreśleniu dodatkowo słowo sp is. Dzięki takiemu nazewnictwu pliki książki zawsze będę obok siebie i łatwo będzie można znaleźć odpowiednią książkę.
Uwaga
Pamiętaj, że nadając nazwy poszczególnym plikom, nie m ożesz stosow ać spacji rozdzielającej poszczególne człony nazwy. Zalecam, byś wieloczęściowe nazwy zaw sze rozdzielał za pomocą podkreślenia lub myślnika.
Kolejną bardzo ważną sprawą jest wielkość liter stosowanych w nazwach. Jeżeli uważ nie czytasz niniejszą książkę, z pewnością pamiętasz, że już o tym wspomniałem. Dlatego teraz jedynie przypomnę w dużym skrócie zasady, jakie panują w świecie internetowych publikacji. Otóż serwery internetowe w zdecydowanej większości pra cują pod kontrolą systemów z rodziny Unix, a te rozróżniają wielkości użytych liter i np. P lik .h tm l oraz p lik .h tm l to dwa zupełnie różne pliki. W związku z tym proponu ję, byś w nazwach zawsze używał małych liter, a dzięki temu unikniesz problemów. Zasada ta tyczy się zarówno plików strony, ja k i obrazków.
Testowanie gotowego projektu W tej chwili możemy przyjąć, że strona WWW jest prawie gotowa. Do pełni szczę ścia niezbędnych jest jeszcze kilka testów. Musimy sprawdzić, jak poszczególne podstrony działają w różnych przeglądarkach, w różnej rozdzielczości oraz czy są zgodne z wymaganiami specyfikacji.
Testy w różnych przeglądarkach Testowanie wyglądu w różnych przeglądarkach ogranicza się do otwarcia poszczegól nych podstron w następujących przeglądarkach: Internet Explorer, Mozilla Firefox, Opera oraz Safari. Pierwsze trzy przeglądarki są szczególnie ważne, bo to do nich należy spora część rynku. Internet Explorer to ponad 60% udziału w rynku i rozwiązanie to
• Ja k za p e w n ić sta b iln e fu n k cjo n o w a n ie ko m p utera? • Jak p rz y s p ie s z y ć działanie p rogram ów ? • Ja k p o p raw ić ko m fo rt p ra c y
❖ K o n fig u racja
1 o p ty m a liza cja
w sy ste m ie o p era cy jn ym ? «fr M o n ta ż i nap raw a W w ielu p rz y p a d k a ch k o m p ute r p o w ym ianie p o dze sp o łó w
1
«4 P od k rę ca n ie
sko nfig urow a niu n a d a l nie działa tak , ja k u ży tk o w n ik o cze k iw ał. Na p o zó r n ajp ro stsz y m w y jśc ie m je s t w te d y zakup n o w eg o sp rzę tu , je d n a k j e s t to k o szto w n e ro zw ią za n ie i, c o g o rsz a , c z ę s to nie g w a ra n tu je s p o d z ie w a n y ch e fe k tó w . Na s z c z ę ś c ie istn ieje le p sz y i ta ń s z y sp o só b . W sp ó łcz e sn e k o m p ute ry i s y ste m y
Stro.na d om ow a książki
* N ag ryw an ie p ły t
S p is tre śc i ISBN: 9 7 8 -8 3 -2 4 6 -1 0 3 7 -2
* Program y biurow e
Form at: 85, stro n: 384 D a ta w y da nia : 2 0 0 7 -0 7 -1 2
» S y s te m y o p e ra cy jn e
Fra g m e n t k siążki w PDF
* T w o rz e n ie stro n W W W
Cena: 39.00 zł
= W edług serii
.TÓ D odaj d o k o szy ka
* ABC
o p e ra cy jn e d a ją w iele m ożliw o ści http://danowski.pl/mapa-strony/
1 tuning
* M o n ta ż w ideo
9
Í&Internet | Tryb chroniony, włączony
%100%
Rysunek 5 .2 0 . Widok podstrony w M S Internet Explorer 7
Jeżeli w którejś z przeglądarek coś nie działa poprawnie, należy to poprawić. Na szczę ście w przypadku gdy trzymasz się specyfikacji, problemy będą występować spora dycznie.
Testy rozdzielczości Kolejnym bardzo ważnym testem, jaki należy przeprowadzić przed publikacją, jest sprawdzenie wyglądu strony w różnej rozdzielczości. Musisz wiedzieć, że internauci pracują na różnych kom puterach i m ają różną rozdzielczość ekranu. W edług danych publikowanych na stronie http://ranking.pl pierwsza piątka zestawienia używanej roz dzielczości wygląda następująco:
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
24 5
ABC Mm optymalizuję komputer » Bartosz Danowski - Mozifla Firefox Plik
tdycja
Widok
Historia
Zakładki
Narzędzia
Pom oc
.[ ¿ I http://danowski.pl/ksiazki/w edlug-sem /abc/abc-sam-optym alizuje-kom puter/
• Jak poprawić komfort pracy w systemie operacyjnym? W wielu przypadkach komputer po wymianie podzespołów i skonfigurowaniu nadał nie działa tak, jak użytkownik oczekiwał. Na pozór najprostszym wyjściem je st w tedy zakup nowego sprzętu, jednak je st to kosztowne rozwiązanie i, co gorsza, często
<* Konfiguracja
< Montaż wideo Strona domowa książki Spis treści
Nagrywanie płyt Programy biurowe
ISBN: 978-83-246-1037-2 Format: B5, stron: 384
me gwarantuje spodziewanych efektów. Na szczęście istnieje
» System y operacyjne
Data wydania: 2007-07-12 Fragm ent książki w PDF
• Tworzenie stron WWW
lepszy i tańszy sposób. Współczesne komputery i system y
Rysunek 5 .2 1 . W idokpodstrony w Mozilli Firefox 2.0.0.4 'S
4 } ABC M m optymalizuję komputer • Bartosz Danowski - Opera Pld
Edycja
Widok
Zakładki
ii« * * er ‘4 * S
-#
Widzety
Narzędzia
o-
J ja y e g g g g a a a o i
Q?
[/>) http://danowski.pl/ksiazki/ według ■ senu abc/abc •sam -optymalizuje •komputer '
Bartosz Danowski literatu ra in fo rm a ty c/n a Strona główna [ K s ią ż k i! Artykuły
O mnie | Przyjazne strony
Kontakt
Sklep
Danowskt.pl * ABC
ABC sam optym alizuję kom puter W y k o r z y s t a j p e łn ię m o ż liw o ś c i
Kategorie_____
s w o je g o k o m p u t e r a
* Fotografia cyfrow a
• Jak zapewnić stabilne funkcjonowanie komputera?
* Internet
• Jak przyspieszyć działanie
* Komputer PC
programów? • Jak poprawić komfort pracy w systemie operacyjnym?
i» Konfiguracja
skonfigurowaniu nadal nie działa tak, jak użytkownik oczekiwał. Na pozór naprostszym w yjściem jest wtedy zakup nowego sprzętu, jednak je s t to kosztowne rozwiązanie , co gorsza, często me gwarantuje spodziewanych efektów. Na szczęście istnieje
1
lepszy tańszy sposób. Współczesne komputery
1
1optym alizacja
♦ Montaż i naprawa
W wielu przypadkach komputer po wymianie podzespołów i
1
U
Pomoc
«► Podkręcanie i tunmg » Montaż wideo Strona domowa książki Spis treści ISBN: 978-83-246-1037-2 Format: B5, stron: 384 Data wydania: 2007-07-12
* System y operacyjne
Fragm ent książki w PDF
» Tworzenie stron WWW
C e n a : 3 9 .0 0 z ł
* Według seni
45
system y Dodaj do koszyka operacyjne dają wiele możliwości w zakresie samodzielnej poprawy — ŁTMhknćn nr a t.stahiinnśri łtn aŁania- ncnnŁamółu.
Rysunek 5.22. Widok podstrony w Operze 9.2
- Nagrywanie płyt » Programy biurowe
♦ ABC ■k Ćwiczenia
0 ^ Googl«
-J 6 d
246
Tworzenie stron WWW w praktyce
ABC sam optymalizuję komputer » Bartosz Danowski Fil. Edit mmi
Ü IQ *
View History Bookmarks Window Help
^^¡[*c j^ -F ^)¿I t |j^hnp://danowskl.pł/ksiazki/wedlug-scrii/abc/abc-sam-optyrMltzuje-komputer/^^
! m
Apple
Amazon
eBay
Yahoo*
News (361 *
Bartosz Danowski
Laptopy.
i W
Google
. tablety
¡hMapa strony
Bartosz Danowski
literatu ra in form atyczna Strona główna j: K sią ż k i : A rtykuły ¡¡ O m nie ¡j Przyjazne strony
Danow ski.pl * ABC
Kontakt ¡¡ Sklep j S zu k a j I Szukaj na stronię...
ABC sam o ptym a lizu ję kom puter
EH
W y k o r z y s ta j p e łn ię m o ż liw o ś c i
K a te g o r ie
s w o je g o k o m p u te ra
• Jak zapew nić stabilne funkcjonowanie komputera?
• Fotografia cyfrow a • Internet
• Jak p rzyspieszyć działanie program ów?
• Komputer PC
• Jak popraw ić kom fort pracy w system ie operacyjnym ?
Konfiguracja 1 optym alizacja
W w ielu przypadkach komputer po w ym ianie podzespołów i skonfigurow aniu nadal nie działa tak, ja k użytkow nik oczekiw ał. Na pozór najprostszym w yjściem Strona domowa książki Jest wtedy zakup nowego sprzętu, Spis treści jednak jest to kosztowne ISBN: 978-83-246-1037-2 rozw iązanie i, co gorsza, często Format: B5, stron: 384 nie gwarantuje spodziewanych Dato wydania: 2007-07-12 efektów. Na szczęście istnieje Fragm ent książki w PDF lepszy i tańszy sposób. W spółczesne kom putery i Cena: system y operacyjne dają w iele ,;ó Dodaj do koszyka m ożliwości w zakresie sam odzielnej poprawy szybkości oraz stabilności działania program ów, a także zw iększania
&Montaż i naprawa &Podkręcanie i tuning • Montaż wideo
• Nagryw anie płyt • Program y biurowe » System y operacyjne • Tworzenie stron WWW Według serii
3 9 .0 0 z ł
* ABC Ćwiczenia
Rysunek 5 .2 3 . Widok podstrony w Safari 3.0.2 dla Windows
Podsumowując, strona powinna prawidłowo wyglądać w najpopularniejszych warian tach rozdzielczości. Idealnym rozwiązaniem jest taki projekt witryny, który automatycz nie dopasowuje się do rozdzielczości przeglądarki. Oczywiście, nie jest to możliwe w przypadku każdego projektu, ale mimo to warto o to zabiegać. Testowanie w różnej rozdzielczości może odbywać się na dwa sposoby. Możesz zmie nić swoją rozdzielczość za pomocą mechanizmów wbudowanych w system operacyjny (rysunek 5.24) lub skorzystać z przeglądarki Mozilla Firefox wyposażonej w dodatek o nazwie W eb D evelo p er. O ile pierwszy sposób testowania nie wymaga dokładniejszej analizy, to w przypadku drugiego warto poświęcić mu kilka słów. Dodatek W ebDeveloper możemy pobrać ze strony h ttp s://a d d o n s.m o zilla .o rg /p l/fire fo x/a d d o n /6 0 . Po zainstalowaniu go pojawi się dodatkowy pasek przy górnej krawędzi ekranu (rysunek 5.25). Po kliknięciu przycisku R e size wybieramy opcję E d it R e size D im en sio n s i w nowym oknie wpisujemy rozdziel czość, która nas interesuje.
247
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
Rysunek 5.24. Zmiana rozdzielczości ekranu Przeciągnij ikony, aby o dp ow ia da ły m o n ito ro m .
[1. Rodzajowy monitor PnP na NVIDIA GeForce 7600 GS 0 To jest mój monitor główny 0 Powiększ pulpit do rozmiarów tego monitora Kolory:
literatura informatyczna I S t r o n a g łó w n a ] K siążki
::fs
W ikipedia
' Tools* ł- J View Source* Display Window Size
Bartosz Danowski
« •
P rzy ja z n e stro n y
800*600 1024x768
O anow ski.pl
ABC sam optymalizuję komputer 1 2 .0 7 .2 Q Q 7
''.-■ N ie m a k o m e n t a r z y
E d v tu t
Rysunek 5 .2 5. WebDeveloper
Po zdefiniowaniu odpowiedniej rozdzielczości, w której będziemy testować stronę, mo żemy zająć się testowaniem strony. Wystarczy kliknąć przycisk Resize i wybrać z listy rozdzielczość, w której chcemy sprawdzić wygląd strony. Na rysunkach 5.26 i 5.27 pokazałem widok mojej strony w rozdzielczości 1024x768 oraz 1280* 1024. W przypadku wykrycia ewentualnych problemów z działaniem strony w danej roz dzielczości niezbędna jest korekta kodu i usunięcie problemu.
Testy zgodności kodu ze specyfikacją Ostatnim i najważniejszym z testów jest sprawdzenie kodu pod względem zgodności ze specyfikacją, z której korzystaliśmy podczas tw orzenia strony. W moim przypadku sprawdzimy, czy witryna została poprawnie stworzona na podstawie XHTML 1.0 Strict.
Tworzenie stron WWW w praktyce
248
$
Danowski - MoziHa Fi: Pbk
Edycja
Widok
Historia
-
Zakładki
Narzędzia
Pomo£
'., •• ■
Heiion
'Danowski
¿s Disabter .£ Cookies’
Hardwarf . CSS*
• ► Vt*
Wiadomo&i
j Forms*
Pozycjonowanie ; FV Google Reader
Images'
Information''
Miscellaneous*,.
B arto sz D anow ski
l i t e r a t u r a i nf or mat yczna ! S t r o n a g łó w n a jj Książki j A rtykuły
ING OrAnt
Outline*
„Resize*
Tools-
Stowmlu
View Source*
Program) Options* /
•Q
•_______________
O mnie
Prz y jaz n e s tr o n y
D anow ski.pl
K on ta k t
S klep |
Szukaj | Szukaj ni
ABC sam optymalizuję komputer 1 2 .0 7 .2 0 0 7
’P N ie m a k o m e n tarz y » E d y tu j
Kategorie
"ABC s a m o p ty m a liz u ję k o m p u t e r ’ to p rz y stę p n y p o radnik dla o só b , k tó re c h c ą możliwie n a jlepiej p rz y g o to w a ć sw o jeg o p e c e ta d o w y d a jn e j i k o m fo rto w ej p ra c y . Dzięki te j k sią żc e n a u c z y sz s ię sk u te c z n ie
• A ktualności * Ciekaw e program y • Mozilla
o p ty m alizo w ać działanie k o m p u tera, o dpow iednio k o nfigurując u sta w ien ia B IO S-u, sy ste m u o p e ra c y jn e g o i u ry w a n y c h program ów . Z o b ac zy sz, ja k podzielić dyski i
• Nero ■ Nie n a te m a t O głoszenia
ro zp la n o w ać p rze ch o w y w an ie d a n y c h . D ow iesz się ta k 2 e , jak z w ięk sz y ć b e z p ie c z e ń stw o s y s te m u i k tó re e lem e n ty k o m p u te ra w a rto w ym ienić, jeśN zaw io d ą in n e sp o so b y p o p raw y w y d ajn o ści.
» P orady * P o zy cjo n o w anie stro n Pręgierz
C z y ta j c a ło ść »
* S tro n y WWW i in te r n e t
Noc pozycjonerów “
Matenety ksiaZki ..
2 4 .0 6 .2 0 0 7
W łaśnie p iszę
Nie m a k o m e n tarz y » Edytuj
Tym raz em n a szyb ko i ty p o w o inform acyjnie. W s o b o tę i niedzielę . /.m .n R -J lI.m rn d h fflłriB u n i nnolnonnlsJc* N n r n a n i n n o m i w .............
Opinie czytelników
P*pn«* Comp«t* Q 3 372,
{•( 0
Rysunek 5 .2 6 . Widok strony w rozdzielczości 1024 x 768 §dyqa
ABC sam optymalizuję komputer 5 ! 12 07.2007 '•ÓNw ma kom entarzy » Edytuj ‘ABC s a m o p ty m a liz u ję k o m p u te r ’ to przystępny poradnik dla osób. które c h cą możliwie najtępiej przygotow ać swojego p e c e ta do w ydajnej i komfortowej pracy Dzięki tej książce nauczysz się sk u te cz n e optymalizować działanie komputera, odpowiednio konfigurując ustaw ienia BIOS-u. sy stem u operacyjnego i używanych programów. Z obaczysz, jak podzielić dyski i rozplanować przechow yw anie danych. Dowiesz się tak że, jak zwiększyć b ezpieczeństw o system u i które elem enty kom putera w arto wymienić, jeśli zaw iodą inne sposoby popraw y wydajności. Czytaj c ało ść *
Noc pozycjonerów “ * 29.06.2007 /
Nie ma kom entarzy » Edytuj
Tym razem na szybko i typow o informacyjnie. W so b o tę i niedzielę (30.0 6 -0 1 .0 7 ) odbędzie się ! ogólnopolska Noc jjozycjonerów . O rganizatorzy przygotowali szereg niespodzianek i juz nie mogę się d oczekać spotkania... W śród patronów imprezy znajdują się O net.pl, Helion.pl, Home.pl, IAB, Netspnnt.pl. Osoby zainteresow ane nabyciem książki Pozycjonowanie i optymalizacja stro n WWW. Jak to się robi w promocyjnej cenie (jedyne [ ..]
Opinie czytelników Ostatnio zakupiłem Pana fantastyczną książką o programie Przeczytałem ją całą.
C zytaj c ało ść »
Błogi
Plagiat “ *28.0 6.2007
Komentarzy: 7 » Edytuj
» Poradnik w ebm astera )
Rysunek 5 .2 7 . Widok strony w rozdzielczości 1280*1024
Rozdział 5. ♦ Praktyczny projekt. Moja strona domowa
249
Testy możemy przeprowadzić na dwa sposoby. Podczas tworzenia kodu w edytorze kED warto skorzystać z wbudowanego narzędzia do analizy poprawności kodu. Wystar czy, że po zapisaniu pliku na dysku wybierzesz z menu Plik opcję Sprawdź poprawność dokumentu. Jeżeli test przebiegnie pomyślnie i nie zostaną znalezione błędy, to w dolnej części ekranu pojawi się stosowana informacja (rysunek 5.28). kED 2.1.4.0 - C:\Users\Bartek\Desktop\Strona WWW\danowski.pl\sktep.html Plik
Edycja
Szukaj
J - Ö -
a
-
m M i ) I® J Ï ® i a J A,
XHTML
PHP
JavaScript
Opcje
Pomoc
aj I d l I ar* *»1 X » i a U > t Ł > a » | < t B II! /
™
A A' x’ x . ! H
Ü
H 13 1
0 mdex.html (ISO)Q 0 »Wep.htmł (ISO) Q i
n
8 9
10 11
< 1DOCTYPE htm l PUBLIC ” -//W 3C//D TD XHTML 1 . 0 S t r 1 c t / / E N " " D T D / x h t m ll- S t H C t . d td"> cm eta name« A u th o r " c o n t e n t « " B a r t o s z D an o w sk i" />
/>
< t it le > L it e r a t u r a in f o r m a t y c z n a - B a r t o s z D a n o w s k i< /t1 tle >
12
13 14 15
20
21
< lin k r e l« " s t y le s h e e t " h r e f « "d a n o w s k i. c s s " t y p e « 't e x t / c s s " /> < d iv id « "n a g lo w e k "> i .
To l e a r n more a b o u t HTML T id y s ee h t t p : / / t i d y . s o u r c e f o r g e . n e t P le a s e send bug r e p o r t s t o h t m l - t id y d w 3 .o r g HTML and CSS s p e c i f i c a t i o n s a r e a u a i l a b l e fro m h t t p : / / w w w . w 3 . o r g / Lobby y o u r company t o j o i n W3C, s ee h t t p : //w w w .w 3 .o r g /C o n s o r t iu m
INS
NUM Rozmiar 3873 B (3,78 KB)
f c l,W : l
Rysunek 5 .2 8 . Strona bez błędów
Dla porównania rysunek 5.29 przedstawia sytuację, w której kod strony zawiera kilka błędów. Po przeanalizowaniu komunikatu możemy stwierdzić, że kod zawiera sześć błędów. W takiej sytuacji za pom ocą suwaka widocznego po prawej stornie dolnego okna mu simy całość przewinąć do góry, aby znaleźć dokładne informacje o błędach i ich lokali zacji. Poniżej zamieściłem fragment komunikatu.
W tej chwili niezbędne jest sięgnięcie do kaskadowych arkuszy stylów w celu nada nia stworzonym elementem odpowiedniego wyglądu i należytej pozycji. Na początku warto ustawić kilka globalnych właściwości strony. Mam tutaj na myśli wyłączenie marginesów, dopełnienie oraz określenie koloru tła. Odpowiednie wpisy za mieściłem poniżej. body { margin:0: paddi ng: 0: background-color:whi t e :
Dopiero teraz możemy zająć się nagłówkiem witryny. Powinnyśmy zacząć od określe nia szerokości oraz właściwości dolnej krawędzi dla bloku tworzonego przez znacznik . Odpowiednie deklaracje stylów mają następującą postać: div#naglowek { width:100£; border-bottom:solid 5px #518AB5;
►Pozycja numer jeden ►Pozycja numer jeden ►Pozycja numer jeden * Pozycja numer jeden
Rozdział 6. ♦ Praktyczny projekt. Strona firmowa
265
Etap czwarty — moduły w prawej kolumnie Uznałem, źe prawa kolumna ma zawierać dwa moduły, w których będą pojawiać się odnośniki do ostatnio dodanych artykułów oraz testów sprzętu. Moduły mają być mak symalnie proste i nieskomplikowane. W związku z tym skorzystałem z nagłówków stopnia trzeciego, list wypunktowanych, a całość zostanie umieszczona pomiędzy ist niejącym już znacznikiem
W pierwszej kolejności dla prawej kolumny ustawiłem tło oraz określiłem jej maksy malną szerokość. Odpowiednie style powinny zostać wpisane do selektora div#nawigacja zgodnie z poniższym przykładem. div#nawigacja { position:absolute; right:10px; top:15em; width:300px; max-width:300px; background-image:url(obrazki/tlol.png); background -repeat:no -repeat;
padding:5px; margin:0: }
Następne zmiany dotyczą już bezpośrednio tekstu umieszczonego w prawej kolumnie. Należy zająć się wyglądem nagłówków oraz list wypunktowanych. Poniżej znajdują się przykładowe wpisy do mojego arkusza stylów. div#nawigacja h3 { margi n:0: paddi ng:0: font-weight:boid; } div#nawigacja ul { margin:3px:
Tworzenie stron WWW w praktyce
266
N a rysunku 6.4 zamieściłem widok gotowego szkieletu strony. W tej chwili możemy brać się do opracowywania poszczególnych działów witryny. RSS WiadomoÄci
Mapa strony
Redakcja
1
Kont
LAPTOPY
profesjonalne centrum informacyjne
0 AKTUALNOŚCI TESTY ARTYKUŁY F.A.Q. FORUM
Lorem ipsum dolor sit amet, consectetur adipisicing eht, sed do dusmod tempor incididunt ut labore et dolore magna aiiqua. U t enim ad minsn veniam, quis nostrud exercitation uilamco laboris nisi ut aliquot ex ea commodo consequat Duis aute irure dolor in reprehenderit in voioptate veht esse cilhun dolore eu fugjat nuüa pariatur Excepteur sint occaecat cupidatat non protdent; sunt in culpa qui officia deserunt molht anim id est laborum Lorem ipsum dolor sit amet, consectetur adipisicing eüt, sed do etusmod tempor incididunt ut labore et dolore magna aiiqua U t enim ad minim veniam, quis nostrud exercitation uHamco laboris nisi ut ahquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in vohiptate veht esse ciBum dolore eu fugjat nuüa pariatur Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt molht anim id est laborum
Artykuły ♦ Baterie - praw da t mity ♦ Partycje i nośniki recovery ♦ nLite - mtegracja sierowmkow
Testy ♦ IBM Thm kPad 142 ♦ IB M ThinkPad T60 ♦ IBM ThinkPad X60
Wszelkie prawa zastrzeżone Copyright £ 2005-2006 Laptopy. Strona stw orzona przez: CR£8 - tworzenie stron w3c t oprytsafazacja X M L SiteMap
Rysunek 6 .4 . Widok gotowego szkieletu strony
Strona główna Strona główna w centralnej części będzie przedstawiać wiadomości w skróconej po staci. Każdy wpis ma składać się z wprowadzenia, zdjęcia oraz odnośnika pozwalają cego na przejście do kompletnej notatki. Innymi słowy, nie wymyśliłem tutaj nic od krywczego. Struktura pojedynczego wpisu będzie stosunkowo prosta. Tytuł zostanie przedstawio ny jako nagłówek stopnia drugiego, treść zamknie się pomiędzy znacznikami . Uzupełnieniem będzie obrazek ustawiony w lewym górnym rogu i oblany tekstem. Całość dodatkowo zostanie zamknięta pomiędzy znacznikiem
, dzięki czemu łatwiej będzie kontrolować całość. Poniżej zamieściłem kod przykła dowego wpisu.
Co początkowo wygląda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM posiada ekran mogący ustawić się w pozycji normalnego ekranu LCD. tak aby użytkownik mi a? wygodniejszą pozycję podczas użytkowania komputera. Szczególnie przydatne je s t
Rozdział 6. ♦ Praktyczny projekt. Strona firmowa
267
to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo małą powierzchnię na położenie notebooka, np. w samolocie.
Flybook VM może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkurował z desktopami. Laptopa można będzie kupić pod koniec miesiąca w cenie $2,899.
Poniżej przestawiłem fragment arkusza stylów, który odpowiada za kontrolę wyglądu pojedynczego wpisu. Każdy z selektorów został przeze mnie skomentowany. div#wpis { padding-bottom:20px; border-bottom:solid 2px s ilv e r; margin-bottom:20px;
Dla całego modułu ustawiłem dolny margines i dopełnienie. Następnie włączyłem dolne obramowanie. div#wpis img { f 1oat: 1e f t : padding:2px; border:solid 2px s ilv e r; margin-right:5px; marg in -bottom:5px;
Określiłem sposób oblew ania obrazków przez tekst, w łączyłem dopełnienie oraz ramkę. Poza tym zdefiniowałem prawy i dolny margines, aby wymusić odstęp ob razka od tekstu. div#wpis p { margin-top:0,5em: }
Ustawiłem większy odstęp pomiędzy poszczególnymi blokami tekstu. div#wpis p.data { paddi ng;0 ; margin:0; font-size:sm aller; c o lo r:s il ver; margin-bottom:30px: }
Dla dodatkowych informacji widocznych bezpośrednio pod nagłówkiem wyłączyłem marginesy i dopełnienia. Następnie zmniejszyłem czcionkę i nadałem jej szary kolor. Poza tym włączyłem dolne dopełnienie, aby zwiększyć odstęp pomiędzy nagłówkiem i resztą wpisu.
268
Tworzenie stron WWW w praktyce
div#wpis p.zrodlo { te x t-a lig n :rig h t; margin-top:30px; cl ear:both; }
Dla odnośnika widocznego pod tekstem ustawiłem wyrównanie do prawej strony oraz zdefiniowałem górny margines, aby odnośnik wyraźnie oddzielić od tekstu. Poza tym na wszelki wypadek zablokowałem możliwość oblania obrazka przez ten element. div#wpis h2 { margin:0: padding:0; }
Ostatnia zm iana w yłącza m arginesy i dopełnienie dla nagłówków stopnia drugiego. Dzięki temu tekst uzupełniający nagłówek znajdzie się bezpośrednio pod nim. Na rysunku 6.5 przedstawiłem widok strony głównej z kilkoma wpisami. Rysunek 6.5.
H EJ
Widok strony głównej z kilkoma wpisami
LAPTOPY AKTUALNOŚCI
TESTY
Nowy Flybook VM
A RTY K U ŁY
F .A .Q .
FO R U M
A rty k u ły
C o początkowo wygląda na tuzinkowego laptopa, wcale nim nie jest Flybook V M posiada ekran mogący ustawić się w pozycji normalnego ekranu L C D , tak, aby użytkownik miał wygodniejszą pozycję podczas użytkowania komputera. Szczególnie przydatne jest to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo małą powierzchnię na położenie notebook, np w samolocie
\rM
Flybook może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkiaowal z desktopami Laptopa można będzie kupie pod koniec miesiąca w
Fujitsu LifcBook P7230 Fujitsu ogłosił dostępność w U S A LifeBook’a P7230, utaa-przenośnego laptopa t 10.6’ matrycą. Fujitsu LifeBook P7230 waży poniżej 1,4kg i ma ok 3cm grubości Twierdzi się, że jest to najmniejszy i najlżejszy notebook z wbudowaną zatoką do obsługi nagrywarki D V D . czy drugiej baterii - zwiększa ona czas pracy notebooka do prawie 10 godzin. Notebook jest wyposażony w procesor Core Solo L'1400 P7230, opartym na chipsecie 945GM A oraz w kartę graficzną Intel Graphics Media Accelerator 950 Obsługuje do 2GB pamięci R A M i może posiadć dysk twardy do SOGB (4200rpm)
• Baterie praw da i nwty • Partycje i nośniki r m w a y • ul ile - intcgracjs storo* taków
Testy • IBM ThinkPad T l 2 • IBM ThinkPad T 60 • IB M ThinkPad X6G
Rozdział 6. ♦ Praktyczny projekt. Strona firmowa
269
Strona pojedynczego wpisu Pora zająć się wyglądem strony z pojedynczym wpisem. W tym przypadku skorzy stamy z kodu XHTML skróconych wpisów na stronie głównej i uzupełnimy je o kilka dodatkowych elementów oraz stylów.
Fujitsu o głosił dostępność w USA LifeBooka P7230, ultraprzenośnego laptopa z matrycą 10,6". F ujitsu LifeBook P7230 waży poniżej 1.4 kg i ma ok. 3 cm grubości. Twierdzi się. że je s t to najmniejszy i najlżejszy notebook z wbudowaną zatoką do obsługi nagrywarki DVD, czy drugiej b a te rii - zwiększa ona czas pracy notebooka do prawie 10 godzin.
Notebook je s t wyposażony w procesor Core Solo U1400 P7230, oparty na chipsecie 945 GMA, oraz w kartę graficzną Intel Graphics Media Accelerator 950. Obsługuje do 2 GB pamięci RAM i może posiadać dysk twardy do 80 GB (4200 rpm).
Fujitsu LifeBook P7230 je s t wyposażony w bezprzewodową kartę sieciową Intel PRO/ Wireless 3945b/g. Posiada również wbudowany modem, kartę sieciową 1 GB oraz Bluetooth. Fujitsu LifeBook P7230 je s t zaopatrzony w dwa porty USB, port IEEE 1394, port wideo, port na karty I / I I PCMCIA i port do obsługi kart Memory S tick. Memory Stick PRO, Secure D igital (SD).
Ultraprzenośny laptop Fujitsu je s t dostępny w wersji z obudową pokrytą czarną lub białą skórą. Można wybrać wersję z systemem Windows Vista Home Basic, Windows Vista Business lub Windows XP Professional. LifeBook P7230 będzie kosztować od $1.699 za podstawową konfigurację.
Dodatkowe wpisy do arkusza będą dotyczyć wyłącznie dodatkowych obrazków doda nych do pełnej treści wiadomości. Przykładowy wpis może wyglądać mniej więcej tak: div#wpis p.obrazek { margin-left:5£: }
Rysunek 6.6 przedstawia gotową stronę z pełną treścią wiadomości.
Strona artykułu lub testu Strona, na której publikuję artykuł lub test, niczym nie różni się od przykładowej strony wpisu zbudowanej i opisanej w poprzednim podrozdziale. W związku z tym uznałem, że nie ma potrzeby przygotowywać oddzielnego opisu. W dalszej części za mieściłem jedynie kilka uwag, których warto się trzymać, aby strona z dużą ilością tekstu i grafiki była funkcjonalna.
270
Tworzenie stron WWW w praktyce
M a pa s t r o n y
R e d a ic c j
S zu k a j ■
mmmmm
*
LAPTOPY
profesjonalno centrum informacyjne
AKTUALNOŚCI
TESTY
Fujitsu LifeBook P7230 Onia: 22.Û7 2'Jß' A u to r. H a rtoi„•
Fujitsu orosił dostępność w USA LifeBook-a P7230, uhra-przenośnego laptopa z 10.6’ matrycą Fujitsu LifeBook P7230 waży poniżej 1,4kg i ma ok 3cm grubości-Twierdzi się. ie jest to najmniejszy i najlżejszy notebook z wbudowaną zatoką do obsługi nagrywarid DVD. czy drugiej baterii - zwiększa ona czas pracy notebooka do prawie 10 godzin. Notebook jest wyposażony w procesor Core Soło U 1400 P7230. opartym na chipsecie 945GMA oraz w kartę graficzną Intel Graphics Media Accelerator 950 Obsługuje do 2GB pamięci RAM i może posiadć dysk twardy do 80GB (4200rpm). Fujitsu LifeBook P7230 jest wyposażony w bezprzewodową kartę sieciową Intel PROWireless 3945b'g. Posiada również wbudowany modem, kartę sieciową 1GB oraz Bluetooth Fujitsu LifeBook P7230 jest zaopatrzony w dwa porty USB. port IEEE 1394. port wideo, port na karty LU PCMCIA i port do obsługi kart Memory Stick, Memory Stick PRO, Secure Digital (SD). LTtraprzenośny laptop Fujitsu jest dostępny w w-ersji z obudową pokrytą czarną lub białą skórą Można wybrać wersję z systemem Windows Vista Home Basic. Windows Vista Business lub Windows XP Professional LifeBook P7230 będzie kosztować od S I.699 za podstawową konfigurację
Źródło: w w u laptopmg.com
Rysunek 6 .6 . Strona z pełną treścią wiadomości
F.A.Q.
FORUM
Artykuły • Baterie - prawda i muy • Partycje i nośniki recovery
s it
W szelkie prawa zastrzeżone Copyright C 2005-2006 Laptopy. Strona stworzona przez: C7t.ES - tworzenie stron w3e i optymalizacja X M L SiteMap
A R lY K l'L Y
• nLite - integracja sterow ników
Test> • IBM ThinkPad T42
• IBMThinkPad T60 • IBMThinkPad X60
Rozdział 6. ♦ Praktyczny projekt. Strona firmowa
27 1
♦ Dziel duże ilości tekstu na kilka mniejszych stron. Rozwiązanie to pozwoli skrócić czas wczytywania strony oraz poprawi komfort korzystania z niej. Dodatkowe menu nawigacyjne zamieść na początku i na końcu strony, aby można było szybko przejść do następnej lub poprzedniej części artykułu. ♦ W treści publikuj małe zdjęcia i twórz z nich odsyłacze do większych kopii. Dzięki temu strona będzie szybciej się wczytywać. Nie martw się o to, że obrazki będą mniej czytelne, bo osoby nimi zainteresowane powiększą je, klikając w utworzony przez Ciebie odsyłacz. ♦ Staraj się pisać zwięzłe artykuły, bo internauci nie lubią zbyt wiele czytać. Pamiętaj, że każdy problem można przedstawić w sposób zwięzły. Jeżeli jednak poruszasz poważne tematy i mimo szczerych chęci nie jesteś wstanie skrócić artykułu lub testu, zastanów się, czy nie można go podzielić na dwa oddzielne tematy.
Strona FAQ Po długich przemyśleniach uznałem, że odnośnik FAQ w chwili obecnej będzie pro wadzić do odpowiedniego działu forum, który jest regularnie aktualizowany. Mam jednak w planach stworzyć odpowiednią stronę i na niej publikować najczęściej zada wane pytania wraz z odpowiedziami. Najlepszym rozwiązaniem dla FAQ jest wykorzystanie nagłówków oraz list. Za pomocą nagłówków możemy podzielić całość na kilka części, np. problemy sprzętowe, proble my z programowaniem. Natomiast listy będą zawierać wykaz odnośników do stron, na których opisano dany problem. Pojedyncza strona będzie zawierać powtórzenie pytania oraz dokładny opis.
Strona „redakcja” W przypadku mojego miniportalu ważnym miejscem będzie strona redakcja. To wła śnie w tym miejscu znajdzie się całą struktura redakcji wraz z informacjami na temat poszczególnych redaktorów. Poniżej przedstawiłem przykładowy kod odpowiedzialny za publikację treści w tym miejscu.
Redakcję portalu Laptopy.info.pl tworzą sami fachowcy doskonale obeznani w tematyce komputerów przenośnych oraz p u blikacji tre ści w internecie. Każdy z redaktorów wkłada całe swoje serce w to . aby prezentowane przez niego m ateriały były ciekawe i zawsze aktualne. Niniejsza strona ma pozwolić na to . abyś mógł b liż e j poznać każdego z nas.
Redaktor naczelny
Im ię i nazwisko: Bartosz Danowski
<1 i >Stanowi sko: Redaktor naczelny/właści e l
Obowiazki: Kierowanie pracą portalu, kontakt z klientami i reklamodawcami
<1 i >Kontakt: danowski1aptopy. i nfo.p l < /ul >
272
Tworzenie stron WWW w praktyce
Redaktor działu Wiadomości
<1i>Imię i nazwisko: Jan Nowak
Stanowisko: Redaktor działu wiadomości
Obowiazki: Przygotowanie i publikacja wiadomości ze świata komputerów przenośnych.< /strong>
<1i>Kontakt: nowak@laptopy. in fo .pl
W ygląd strony m a być maksymalnie uproszczony, a co za tym idzie, nie będę tutaj stosować szczególnie wyszukanego formatowania. Poniżej zamieściłem odpowiednie style, z których skorzystałem w tym przypadku. Dodatkowo każdy z selektorów został przeze mnie omówiony. div#redakcja { padding:10px; background-c o lo r:#FAFAFA: margin-bottom:10px; }
Informacja o każdym z autorów jest publikowana w oddzielnym module. Ustawiłem kolor tła, dopełnienie oraz dolny margines. #redakcja h2, h3 { clear:both:
Dla nagłówków stopnia drugiego i trzeciego wyłączyłem możliwość oblewania nimi innych elementów. Zwróć uwagę, że powyższy zapis tyczy się wyłącznie tych na główków, które znajdują się wewnątrz innego elementu posiadającego identyfikator #redakcja. div#redakcja ul { paddlng:20px: list-style -typ e :n o n e ; }
Do prezentacji danych wykorzystałem listy. W yłączyłem punktory oraz ustawiłem dopełnienie. div#redakcja img { flo a t: le f t ; border:2px solid s ilv e r; padding:2px; margin:5px;
Rozdział 6. ♦ Praktyczny projekt. Strona firmowa
273
Włączyłem oblewanie obrazków przez tekst oraz ustawiłem ramkę, dopełnienie i mar ginesy. div#redakcja p
{ cleanboth;
} Na koniec dla wszystkich akapitów występujących w znaczniku
Teraz do kodu strony należy dodać polecenia języka PHP, dzięki którym będziemy mogli dynamicznie tworzyć strony po stronie serwera. W praktyce będzie to wyglą dało tak, że zostanie otwarty szablon i w odpowiednie miejsca dynamicznie zostanie wstawiony tekst ze wskazanego przeze mnie źródła. Najpierw bezpośrednio pod otwierającym znacznikiem muszę wstawić nastę pujący ciąg znaków:
278
Tworzenie stron WWW w praktyce
$b="body":
?> Jest to deklaracja domyślnych ustawień strony. Chodzi o to, że jeżeli otworzymy stronę bez dodatkowych parametrów, to zostaną podstawione domyślne elementy określone w tym kodzie. W praktyce będzie to wyglądało tak, że jeżeli szablon zostanie otwarty bez dodatko wych parametrów, to domyślnie zostanie do niego dołączony plik o nazwie body. Teraz muszę określić miejsca, w które będę chciał wstawić dane. W przypadku mojej strony postanowiłem , że lewa kolum na będzie dynamicznie wstawiana do szablonu i podmieniana w zależności od potrzeb. Natomiast główne menu nawigacyjne oraz lewa kolumna zostaną jedynie wstawione do kodu strony. W związku z tym zmodyfikowany kod szablonu będzie wyglądał następująco:
Aby trwale wstawić dane do strony z innego pliku, musimy skorzystać z funkcji i ncl ude. Odpowiedni kod zam ieściłem poniżej. Efekt działania przykładowego wpisu będzie taki, że podczas wczytywania strony automatycznie i na stałe wczytana zostanie za wartość pliku menu.inc.
W celu wstawiania, a następnie podmieniania jakiegoś elementu strony w zależności od parametru niezbędny jest inny fragmentu kodu PHP, który zamieściłem poniżej.
i f ( $bo) {in clude ("$ b o .inc");} else {in c lu d e ("$ b .in c "l:} ?>
Oznaczenie $bo to parametr, który będziemy wywoływać w sytuacji, gdy zmianie będzie miała podlegać centralna część strony. Natomiast druga część else {in c lu d e ("$ b .in c ") nakazuje w przypadku braku parametru wczytać w to miejsce domyślne wartości, które zadeklarowaliśmy zaraz na początku . Gotowy szablon musisz koniecznie zapisać pod nazwą index.php. W przeciwnym wypadku użyty kod PHP nie zadziała. Przygotowałem szablon, więc teraz pora zająć się plikami, które będę dynamicznie wstawiał do szablonu. Oczywiście, są to dokumenty tekstowe. W przypadku strony głównej postanowiłem, że tekst na niej zawarty znajdzie się w pliku o nazwie body.inc, menu zapisałem jako menu.inc, a zawartość prawej kolumny jako praw a.inc. Zwróć uwagę na to, że pliki m ają rozszerzenie inc, które występowało również przy kodzie PHP w szablonie. Poniżej zamieściłem przykładową zwartość pliku body.inc. Dzięki temu będziesz mógł zobaczyć jego zawartość.
Co początkowo wygląda na tuzinkowego laptopa, wcale nim nie je s t. Flybook VM posiada ekran mogący ustawić się w pozycji normalnego ekranu LCD, tak aby użytkownik miał wygodniejszą pozycję podczas użytkowania komputera. Szczególnie przydatne je s t to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo małą powierzchnię na położenie notebooka, np. w samolocie.
Flybook VM może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkurował z desktopami. Laptopa można będzie kupić pod koniec miesiąca w cenie $2,899.
Fujitsu o g ło s ił dostępność w USA LifeBooka P7230. ultraprzenośnego laptopa z matryca 10.6". F ujitsu LifeBook P7230 waży poniżej 1,4 kg i ma ok 3 cm grubości. Twierdzi się. że je s t to najmniejszy i najlżejszy notebook z wbudowaną zatoką do obsługi nagrywarki DVD. czy drugiej b a te rii - zwiększa ona czas pracy notebooka do prawie 10 godzin.
Notebook je s t wyposażony w procesor Core Solo U1400 P7230, oparty na chipsecie 945GMA, oraz w kartę graficzną Intel Graphics Media Accelerator 950. Obsługuje do 2 GB pamięci RAM i może posiadć dysk twardy do 80 GB (4200 rpm).
Dodatkowo przedstawiłem jeszcze zawartość pliku menu. inc. <1 i>
href=“ /">Aktualności href="/testy">Testy href="/ artykuly">Artykuły href="/faq">F.A.Q. href="h ttp : //forum .1aptopy.in fo .pl">Forum
Jak widzisz na przykładach, wszystkie pliki z rozszerzeniem inc zawierają fragmenty kodu XHTML, który w połączeniu z index.php tworzy kompletną stronę. W tej chwili możesz umieścić wszystkie pliki strony w katalogu serwera i sprawdzić, czy strona działa prawidłowo. W ystarczy, że w oknie przeglądarki wpiszesz adres 127.0.0.1 i naciśniesz Enter. Rysunek 7.1 przedstawia efekt działania strony zbudowa nej dynamicznie. Teraz pokażę, w jaki sposób tworzyć odsyłacze dynamicznie podmieniające zawartość wybranej części strony. Po otwarciu szablonu domyślnie zostały do niego wczytane elementy zapisane w plikach body. inc, menu.inc oraz prawa.inc. Jeżeli tak się nie stało, znaczy to, że gdzieś po drodze został popełniony błąd. W takim przypadku spróbuj przepisać moje przykłady. Odnośnik mogący zmienić pewien fragment szablonu — w moim przykładzie lewą kolumnę — może mieć postać: Więcej
Zwróć uwagę, że otwieram plik index.php (to szablon), a tuż po nim znajduje się znak zapytania oraz parametr bo, który zadeklarowałem w szablonie. Następnie po znaku równości znajduje się nazwa pliku, który chcę wczytać do szablonu w miejsce, gdzie znajduje się kod PHP z param etrem bo. Pamiętaj, że podając nazwę pliku, pomijasz rozszerzenie inc, gdyż jest ono domyślnie zadeklarowane w kodzie PHP szablonu. Na rysunku 7.2 widać efekt działania strony, w której szablon został wywołany wraz z dodatkowym parametrem.
Rozdział 7. ♦ Praca z szablonami
l_ ; Hełion
Dm ow ski
w Oisable- *
Cookies-
H irdw are .
281
W iadom ości
'
CSS- . O F o rm i-
j j Laptopy, notebooki, tablety - profe...
Q
Imeges- 0
Pozycjonowanie
\ j Google Reader (_J iN G Online
Materiały M ia łk i O
Słowniki
i Program
Information-
Laptopy, n o te b o o k i ta b lety - p r o f _ Q
LAPTOPY
p r o f e s jo n a ln e c e n t r o m in fo r m a c y jn e
AKTUA LN O ŚCI
TESTY
N ow y F ly b o o k V M
ARTYKUŁY
___
FORUM
A rtvkntv ♦ Baterie - p r a w d a i naty ♦ Partycje i nośniki recovery C o początkow o wygląda n a tuzinkowego laptopa, wcałe nim nie jest. Flybook VM posiada ekran mogący ustawić się w pozycji normalnego ekranu LCD, tak, aby użytkownik miał wygodniejszą pozycję podczas użytkowania kom putera Szczególnie przydatne jest to w czasie korzystania z laptopa w miejscach, gdzie mamy bardzo małą powierzchnię na położenie notebook, np w samolocie.
♦ nLite - integracja sterowników
Testy • IB M ThinkPad T42 • IB M ThinkPad T60 • IBM ThinkPad X 60
Fłybook V M może wyglądać jak normalny laptop, lecz w rzeczywistości twórcy laptopa mają aspiracje, aby ich produkt konkurował z desktopami. Laptopa można będzie kupić p o d koniec miesiąca w cenie S2,899.
Skąd można pobrać gotowe szablony? Internet jest pełny darmowych dodatków oraz rozszerzeń, a także darmowych szablonów stron WWW. W tym podrozdziale zamieściłem kilka odnośników do stron, z których możesz pobrać darmowe szablony dla swojej strony: ♦ http://szablony.stron.pl ♦ http://szablonownia.atesites. com ♦ http://tworzenie-stron.atticlab.pl ♦ http://szablony.skryptoteka.pl ♦ http://www.szablony.com ♦ http://www.szablon.pl
282
Tworzenie stron WWW w praktyce
Laptopy, notebooki, tablety - profesjonalne centrum in form acji - Mozslla Firefox Plik
Edycja
W idok
Histeria
4>L - H elion
D anow ski
^
Cookies-
Disable» H U
Zakładki
1‘
H ardw are
Pom oc
W iad o m o ści
CSS- V J Form s-
Laptopy, notebooki, tablety - profe...
R5S K i a c t o j s o ś c i
Narzędzia
h ttp ://1 2 7 .0 X l.l/t« t/in d e d .p h p ? b o = n e w 5 0 2 P o zy cjo n o w an ie
Images- -.*• Inform atio n-
ń
j_j Laptopy, n otebo oki, ta blety - pr of —
M apa s t r o n y
G o o g le Reader ¡ j M G O nline
M iscellaneous*
O utline-
M ateriały księzki l J Słowniki
* Resize-
Tools- ; : View Source-
Program y O ptions-
Q
Ł ‘ Fabryka Kurs CSS: Tabela porówna...
R e d a k c je
I B I ;
LAPTOPY
prśfesjońalh^ c*nłrum informócyjns
%
A K T l A ŁN O SCI
TESTY
F u jits u L ife B o o k P 7 2 3 0
A R T Y K U ŁY
F .A .Q .
T O R l'M
Artykuły ♦ Baterie - prawda i mity ♦ P arty cje i nośniki rec o v ery
Fujitsu ogłosił dostępność w USA LifeBook-a P7230, ułtra-przenośnego laptopa z 10.6" matrycą- Fujitsu LifeBook P 7230 waży poniżej l,4kg i m a ok 3 cm grubosci.Twierdzi się, że jest to najmniejszy i najlżejszy' notebook z wbudowaną zatoką do obsługi nagrywarlć DVD. czy drugiej baterii - zwiększa ona czas pracy notebooka do prawie 10 godzin.
♦ nLite - integracja sterowników Testy ♦ IBM ThinkPad T42 ♦ IBM ThinkPad T60 ♦ IBM ThinkPad X 60
N otebook jest wyposaż om w procesor C ore Sok) U 1400 P 7230 opartvm na chipsecie 945GM A oraz w kartę graficzna Intel Graphics M edia Accelerator 950 Obsługuje do 2GB pamięci RAM i może postadc dysk twardy do 80GB (4200rpm) Fujitsu LifeBook P 7230 jest wyposażony w bezprzew odow ą kartę sieciową Intel PR O Wireless 3945b g Posiada również wbudow any modem, kartę sieciową 1GB oraz Bluetooth Fujitsu LifeBook P 7230 jest zaopatrzony w dw a porty USB, port IEEE 1394, port wideo, port na karty I II PCM C IA i port do obsługi kart M emory Stick, M em ory Stick PRO . Secure Digital (SD) Uhraprzenośny laptop Fujitsu jest dostępny w wersji z obudow ą pokrytą czarną lub białą skorą M ożna wybrać wersje z svstemem Windows Vista Home Basic W indows Vista Business łub W indows XP Professional LifeBook P '2 3 0 będzie kosztować od S 1,699 za podstawow ą konfigurację
PígeRank. Compele
«S c.! a-,
¿
I"' i
Rysunek 7.2. E fekt działania strony dynamicznej p o wywołaniu szablonu z parametrem Poza tym przypominam, że na dodanej do tej książki płycie CD znajdziesz kilka cie kawych szablonów.
Wnioski * Wyobraź sobie rozbudowę strony WWW, która składa się z tysiąca podstron. W przy padku zmiany wyglądu całej witryny, która nie używa szablonów, możesz liczyć się z tygodniami ciężkiej i mozolnej pracy. Teraz pomyśl o tej samej stronie, ale zbudo wanej z wykorzystaniem szablonu. Zwykle wystarczy zmiana jednego lub kilku plików odpowiedzialnych za wygląd i po kłopocie. Podsumowując, korzystanie z szablonów oraz języka PHP znacznie ułatwia proces budowy strony WWW. Opisany przeze mnie przykład opierał się na pobieraniu danych z innych plików, ale nic nie stoi na przeszkodzie, abyś skorzystał z bazy danych i z niej pobierał dane.
Rozdział 8.
Darmowe usługi dostępne w sieci Rozpoczynając pisanie tej książki, postanowiłem nauczyć Cię tworzenia stron WWW w możliwe najprostszy sposób. Dlatego też skupiłem się na języku HTML (XHTML) i kaskadowych arkuszach stylów. Jeśli chodzi o resztę spraw, chciałbym, abyś wiedział, że w zasadzie wszystko, co jest Ci potrzebne, znajdziesz w sieci i wystarczy z tego umieć skorzystać. Tak było z szablonami — pokazałem, jak można z nich korzystać bez znajomości PHP. Wystarczy, że tylko nieznacznie zmodyfikujesz moje przykłady i już możesz działać po stronie serwera. W tym rozdziale chciałem Ci pokazać, jak skorzystać z popularnych „wodotrysków”, które m ogą urozmaicić stronę. Oczywiście, będziemy korzystać z darmowych usług dostępnych w intemecie.
Statystyki Stat.pl to polski system statystyk, który można uznać za obowiązujący standard. W ła ściciele witryn utrzymujących się z reklam, a także reklamodawcy używają rozwiązań dostępnych na stronie http://stat.pl do prowadzenia rozmów i przygotowywania kam panii reklamowych. Stat.pl udostępnia kilka wersji swoich statystyk, które różnią się ceną oraz oferowanymi możliwościami. Na rysunku 8.1 przedstawiłem tabelę ze szczegółowym porównaniem poszczególnych wersji statystyk. Usługa w wersji stat.pl/PBI jest oferowana bezpłatnie wraz z pewnymi ograniczenia mi. Osoby wybierające darm ową wersję statystyk m uszą pogodzić się z tym, że ich witryna od czasu do czasu będzie wyświetlać nowe okno z reklamą. Poza tym darmowa wersja statystyk pozwala kontrolować ruch z rozbiciem na dwie strony. Chodzi o to, że możemy niezależnie monitorować cały serwis oraz jedną wybraną podstronę. Wersje
284
Rysunek 8.1. Porównanie wersji statystyk oferowanych przez Stat.pl. Tabela pochodzi ze strony http://stat.pl
Tworzenie stron WWW w praktyce
1E l
&
100 500 . bez bez 000 /miesiąc 000 /miesiąc limitu /cennik limitu /cennik
lim it odsłon
bez limitu
skrypty zliczające
2 skrypty 30 skryptów 50 skryptów
emisja ankiet badawczych na serwisie logo na stronie głównej
100 skryptów
200 skryptów
£
*
a
9
M
*
+
* +
U
administracja prawa edycji skryptów usuwanie odsyłaczy
*
blokada adresów IP
■>
prawa dostępu (dodawanie loginów )
**
* •**
■J -*
LOGO Inform acje o koncie Dane adresowe
«/
y»
lyV
•>
ranking liczniki
«/
**
V
pozwala zliczać strony HTML, PHP, ASP...
<9
strony FLASH kliknięcia w URL
§t w
U
y M
kliknięcia w elementy FLASH
n
wt
X
strony SSL
9
’J #
a
s/
y>
y>
>
prezentacja danych
>
w ykresy dane tabelaryczne kopiowanie w artości do schowka dane podsumowujące
y»
W y*
y»
a
y*
quick stats
odsłony
a j* a
średni czas trw ania odsłony
a
średnia pozycja w wizycie
X
liczba początków w izyt
S
liczba zakończeń w izyt
m
użytkownicy W izyty
**
V V*
«/
y> V
V*
Rozdział 8. ♦ Darmowe usługi dostępne w sieci
285
płatne umożliwiają niezależną kontrolę nawet do 200 podstron. Kolejnym mankamen tem wersji darmowej jest obowiązek umieszczenia logo Stat.pl na stronie, na której działają statystyki. Najważniejsze ograniczenia dotyczą liczby prezentowanych danych. Darmową wersję statystyk cechuje w tym zakresie szereg ograniczeń, które widać podczas analizy tabeli z rysunku 8.1. Nie zmienia to faktu, że darmowe statystyki wystarczają do zdobywa nia informacji na temat zachowania się strony oraz jej gości. Płatne wersje statystyk można testować przez 14 dni. Dodatkowo powinieneś mieć na uwadze fakt, że istnieje możliwość przejścia z bezpłatnych statystyk na płatne z zachowaniem zgromadzonych do tej pory wyników.
Instalacja darmowej wersji statystyk Uznałem, że warto poświęcić kilka słów instalacji i uruchomieniu darmowej wersji statystyk udostępnionej przez firmę Stat.pl. C ałą operację zaczynamy od rejestracji i założenia darmowego konta na stronie http://stat.pl/pl/oferta/rejestracja. Wystarczy, że wypełnisz dostępny na podanej przeze mnie stronie formularz widoczny na rysun ku 8.2, a następnie klikniesz przycisk rejestruj. Pamiętaj, że obowiązkowo musisz wypełnić wszystkie pola oznaczone gwiazdką. Moim zdaniem powinieneś również uzupełnić te pola, które nie są obowiązkowe, a odpo wiadają za opis strony, wybór podkategorii oraz dodanie strony do rankingu. Po kliknięciu przycisku rejestruj system sprawdzi, czy podane przez Ciebie dane są po prawne. Jeżeli wszystko będzie się zgadzało, konto zostanie utworzone i ukaże się nowe okno z panelem administracyjnym statystyk (rysunek 8.3). W górnej części znajdziesz dwie pozycje: Strona główna witryny oraz Podstrony. Po zaznaczeniu jednej z wymienionych pozycji w dolnej części okna pojawi się kod skryptu, który musisz umieścić na swojej stronie. Skrypt opisany jako Strona główna witryny powinien trafić do kodu strony głównej. Natomiast drugi ze skryptów musi znaleźć się we wszystkich podstronach serwisu.
Uwaga
Skrypty wystarczy skopiować i wkleić do kodu strony między znaczniki . Autorzy sta tystyk zalecają, aby skrypt znalazł się przed zam ykającym znacznikiem . Nie wprowadzamy żadnych zmian, ponieważ może się to odbić negatywnie na działaniu statystyk.
Po umieszczeniu kodu odpowiedzialnego za działanie statystyk w treści witryny pozo staje już tylko dopełnić regulaminu. M am tutaj na myśli dodanie kodu odpowiedzial nego za wyświetlanie małego znaczka z logo serwisu. Odpowiedni kod znajdziesz, wybierając opcj^Adm inistracja/Logo (rysunek 8.4). Logo może występować w dwóch postaciach. Pierwsza to animowany przycisk wyko nany w technologii Adobe Flash. Jeżeli wybierzemy ten wariant, możemy kontrolować kolory oraz rozmiar logo. Dmgie z rozwiązań pozwala na skorzystanie ze zwyczajnego pliku graficznego w formacie .gif.
Tworzenie stron WWW w praktyce
286
Rysunek 8.2. Rejestracja i zakładanie konta z dostępem do usług oferowanych przez Stat.pl
\
m»ps strony
tonwfc?
stat24
login: r
hasto:
zapamiętaj mnie i* Nie pamiętam hasła
» Rejestruj
'b-iC-sfe i3 !)o u a p .e .B
stat.pl rejestracja statystyk
s ta tB iz n e s / sta tB iz n e sP R O s ta tO p tim u m / s ta tO p tim u m P L U S
D a n e k o n ta
s ta t.p l/ P B I s ta tR a p o r t Z a s to s o w a n ie s t a ty s ty k
[G s ta t .p l/ P B I
U s łu g a *
C e n n ik
s t a t O p t im u m
J a k d o k o n a ć o p ła t
s ta t O p t im u m P L U S
r
R e je s t r a c ja
s t a t B iz n e s s t a t B iz n e s P r o
P o r ó w n a n ie w e r s ji s ta tD e m o L o g o w an ie
zamów bezpłatną konsultację I m ię i n a zw isk o i
L o g in *
la p to p y in fo.pl
H a s ło *
••••••
Powtórz hasło*
••••••
E m a il“
a d re s @ e m a il.c o m
A d r e s w it r y n y *
h ttp.//lapło py in fo.pl
W ersja języko w a*
j p d W a T ~ ]B
K a t e g o r ia w itr y n y *
j lrternet. kompiitefy ^
P o d k a t e g o n a w it r y n y
[ko m p u te ry
T y tu ł ( d o 2 5 z n a k ó w )
L a p to p y , notebo oki
O p is ( d o 1 0 0 z n a k ó w )
F o ru m p o św ię c o n e k o m p u
e -m a ilr
T e le fo n ( z n r k ie ru n k o w y m )1
T e m a t r o z m o wy t oferta partnerska
| |
_
T erm in ic o n te k tu :
25-10-2008
&
D o d a j m o ją s t r o n ę d o r a n k m o .s t a t. D l
R e g u la m in ś w ia d c z e n ia u s łu g m o n ito r o w a n ia w it r y n y in t e r n e t o w e j Rozdział I.
Postanowienia ogólne
Hi iii
1. Definicje a) Usługa bezpłatna - statystyki oglądalności witryny internetowej udostępniane przez Usługodawcę na warunkach niniejszego regulaminu zgodnie ze specyfikacją zamieszczoną na stronach internetowych stat24; b) Klient - podmiot zlecający Usługodawcy świadczenie Usługi bezpłatnej poprzez wypełnienie elektronicznego formularza rejestracyjnego dostępnego na stronach internetowych http://www.stat.pl; v I*
A k c e p t u j ę p o w y ż s z y r e g u la m in "
Rozdział 8. ♦ Darmowe usługi dostępne w sieci
287
stat.pl/PBI
W cełu m onitorowania w itryn y za pomocą s ta ty styk s tat24 konieczne je s t umieszczenie skryptów zliczających w kodzie stron witryny.
W y k o rz y sta n e sk r y p ty : 2 / ir
«krypty
W tym celu należy w ykonać poniższe kroki: U tw orzyć nowy skrypt - w tym celu należy kliknąć w przycisk dodaj nowy sk ry p t ;
Dnito) nomy sk ry p i
Podać nazw ę d a nowego skryptu oraz wybrać typ skryptu, a następnie wcisnąć przycisk 'zatw ierdź'. Nazwa skryptu może mieć maksymalnie 30 znaków oraz musi być unikalna w ramach konta (czyli nie jest możliwym założenie dwóch skryptów o takie) samej nazwie).dd
W zależności od w ersji s tatystyk, można definiować typ: htm l - skrypt do monitorowania odsłon stron typu html (dotyczy zarówno stron pisanych bezpośrednio w html, jak też pisanych w językach skryptowych typu php, a sp itp .) klik h tm l - skrypt do monitorowania kliknięć na inki (np. przełoerowama do innego serwisu ki) pobranie pików z witryny) fłash - skrypt do monitorowania odsłon stron stworzonych w technologii Flash kkk flash - skrypt do monitorowania kikrnęć na elementy wykonane w
'
308
Tworzenie stron WWW w praktyce
Natomiast odnośnik otwierający okno musi mieć postać: strona l
W odnośniku zamiast pl i k. ht ml musisz wpisać nazwę pliku lub zdjęcia, które ma zo stać otwarte w nowym oknie. Natomiast zamiast XXX powinieneś podać rozmiar okna (wysokość i szerokość).
Zamykanie otwartego okna Skoro wiesz, jak otworzyć nowe okno, warto byś zamieścił w nim odnośnik umożli wiający jego zamknięcie. Odpowiedni kod JavaScript ma postać: Zamknij to okno
Rollover Efekt popularnie zwany rolloverem polega na dynamicznej podmianie obrazka po naje chaniu na niego kursorem myszy. W związku z tym wymagane jest przygotowanie dwóch obrazków nieznacznie się różniących np. kolorem.
Zamiast plików l . g i f oraz 2 . g i f musisz podstawić odpowiednie nazwy swoich ob razków — i to wszystko.
Drukowanie zawartości strony Za pom ocą JavaScript nie można rozpocząć drukowania strony, jednak istnieje moż liwość otwarcia okna właściwości druku. Służy do tego podany skrypt. W nagłówku musisz wstawić następujący kod:
Zasada działania skryptu jest bardzo prosta. Na początku sprawdza on, czy oglądający używa przeglądarki Netscape Navigator — jeżeli tak, to do dokumentu zostanie wczy tany zewnętrzny arkusz stylów o nazwie nc.css. Następna część skryptu wykonuje podobne zadanie, z tym że sprawdza, czy oglądający używa przeglądarki Opera i w przypadku pozytywnego testu uruchamia arkusz o na zwie opera. css.
312
Tworzenie stron WWW w praktyce
Jeżeli skrypt rozpozna, że internauta używa przeglądarki Microsoftu, do formatowania strony użyje arkusza o nazwie ie.css. W sytuacji, gdy przeglądarka oglądającego nie zostanie rozpoznana, do wyświetlenia strony skrypt użyje arkusza o nazwie inny.css.
Rozdział 10.
Publikacja i utrzymanie strony Po przygotowaniu strony przyszła pora na to, aby się nią pochwalić światu. Zadanie to sprawia wiele problemów początkującym twórcom stron WWW i z tego powodu zdecydowałem się na dokładny opis całego procesu. Uznałem również, że warto po święcić kilka stron na instrukcję zakładania płatnego serwera oraz rejestracji własnej unikalnej domeny.
Uwaga
W ybrałem płatne konto, ponieważ oferuje ono o w iele więcej m ożliw ości niż jego darmowy odpow iednik — m .in. m ożliw ość rejestracji w łasnej dom eny. Na te m a t darmowego hostingu napisano już bardzo wiele i bez problemu stosow ne inform acje zajdziesz za pomocą wyszukiwarki. Jeżeli chcesz skorzystać z bezpłatnej możliwości udostępnienia strony WWW, odwiedź stronę h t t p : / / r e p u b l ik a . o n e t . p l / o f e r t a . h t m l i wybierz konto R e p u b lik a S ta r t. Na uwagę zasługuje również strona h t t p : / / w w w . f r e e -w e b h o s ts .c o m , na której znajdziesz bardzo rozbudowany wykaz darmowych serwerów.
Wybór serwera — hosting Hosting to nic innego jak usługa firmy udostępniającej serwery, na których za sto sowną opłatą możemy przechowywać swoją stronę W WW i pokazywać ją światu. Na rynku usług internetowych mamy ogromną konkurencję, a oferty poszczególnych firm bardzo się różnią, dlatego w ybór odpowiedniego miejsca dla strony nie je st łatwy. Konieczna jest tutaj dokładna analiza wszystkich aspektów oraz dobranie oferty do własnych potrzeb. Wybierając odpowiedni hosting dla strony, należy brać pod uwagę kilka kluczowych czynników, które pozwoliłem sobie wymienić poniżej.
314
Tworzenie stron WWW w praktyce
♦ Rozwiązania technologiczne wykorzystywane przy budowie strony. Jeżeli korzystasz z baz danych, języka PHP, skryptów CGI lub potrzebujesz własnej dom eny albo kilku kont e-mail, powinieneś wybrać ofertę, która sprosta Twoim oczekiwaniom. ♦ Popularność strony. Jeżeli tworzysz stronę, która będzie cieszyć się dużą popularnością, wybierając odpowiedni hosting, musisz wziąć pod uwagę limity transferu przypisane do danej oferty. Dokładniej mówiąc, chodzi o to, że niemal każda firma ogranicza korzystanie ze swoich usług, nakładając miesięczne limity transferu. Musisz wiedzieć, że każdy odwiedzający Twoją stronę ściąga jej zawartość na dysk, a pobrane dane zmniejszą Twój miesięczny limit. Dla przykładu, moja strona domowa http://danowski.pl, która zawiera głównie tekst i zoptymalizowane obrazki, miesięcznie potrzebuje 1 GB transfem. ♦ Awaryjność serwera. To kolejny czynnik, mający kluczowe znaczenie podczas wyboru odpowiedniego serwera dla strony. Jeżeli serwer usługodawcy ma ciągłe awarie, koniecznie poszukaj innej oferty. Pamiętaj, że dla Twoich gości ciągłe problemy z dostaniem się na stronę są wystarczającym powodem do tego, aby zrezygnować z odwiedzin. ♦ Szybkość wczytywania się strony. Przeciętny użytkownik intemetu oczekuje, że oglądana przez niego strona zostanie wczytana w kilka sekund. Dlatego zadbaj o to, by wybrane przez Ciebie konto działało szybko. Skorzystaj z usług firmy, która pozwala na bezpłatne przetestowanie oferty. Dzięki temu sam będziesz mógł sprawdzić, jak szybko działa strona. Warto również poprosić znajomych o sprawdzenie szybkości testowanej usługi. ♦ Pomoc techniczna. Nawet najlepszy usługodawca ma prawo do wpadek i awarii. Dlatego należy zadbać o wybór takiej firmy, która dysponuje sprawnym, całodobowym serwisem. Dzięki temu w razie wystąpienia awarii zostanie ona natychmiast zlokalizowana i usunięta. Jak widzisz, wymogów, jakie powinien spełniać dobry hosting, jest całkiem sporo. Na szczęście w sieci dostępne są rozwiązania ułatwiające znalezienie odpowiedniego do stawy usług. Poszukiwania dobrego hostingu warto zacząć od przejrzenia rankingu największych polskich firm z tej branży. Stosowne zestawienie znajdziesz na stronie http://toplOO.pl, a podstaw ą do jego tw orzenia jest liczba domen utrzymywanych przez poszczegól ne firmy. Szybka analiza rankingu pozwala na wyłonienie liderów rynku oraz umożliwia sprawne przeniesienie się na stronę usługodawcy celem sprawdzenia jego oferty. W ten sposób możemy porównać propozycje poszczególnych firm. Pozycja w rankingu jest wyznacznikiem jakości świadczonych usług oraz wiarygod ności, pamiętaj jednak, że nie zawsze jest tak, iż firma zajmująca dalsze miejsce jest zła. Wręcz przeciwnie, możemy mieć do czynienia z młodą firmą, która dopiero zdo bywa klientów i pnie się w rankingu. Sam swego czasu zdecydowałem się skorzystać
Rozdział 10. ♦ Publikacja i utrzymanie strony
315
z usług firmy Progreso — http://www.progreso.pl. Znajduje się ona co prawda mniej więcej w połowie stawki, ale oferuje ciekawie dobrane konto, dostęp do shella (co jest wyjątkiem), a przy tym swoje usługi wyceniła na rozsądnym poziomie. Niezależnie od tego, z której oferty chcesz skorzystać, warto zasięgnąć języka i do wiedzieć się, co sądzą klienci danego operatora. W brew pozorom, nie jest to wcale skomplikowane i wystarczy do tego komputer połączony z intemetem oraz wyszuki warka Google. Za jej pomocą możemy przeprowadzić wyszukiwanie grup dyskusyjnych: wpisujemy nazwę wybranej firmy i klikamy przycisk Szukaj. Na rysunku 10.1 widać wyniki wyszukiwania wiadomości dostępnych na grupach dyskusyjnych, zawierających w swojej treści słowa progreso i hosting. Strona główna grup Google | Pom oc | Zalogui Steć
Grafika | G ru p y d yskusyjn e | Katalog
.progreso hosting'
Członkowie
a to m
użytkownicy
Przyłącz się
:
Szuka¡ | a i i i i y t u g r r - s n i
Przeszukano wszystkie grupy
W yników 1 -1 0 z 204 dia p ro g re so h o stin g ( 0.30 sekund) P o so rto w a n e w g istotn ości
Informacie o grupach Google
się
w ię c e j »
Sortui wg daty
SUPERHOST - NAJGORSZY HOSTING
I
... działanie dostęp i uptime serwera / sie c i / prądu ) pozdr - Adam Szendzielorz adam [at] p ro g re so (kropka] pi G S F 600 S "03 (black) p l.c o m p .w w w 31 S ie 2005 01 01 wg Adam Szendzielorz - 11 wiadomości - 9 autoiow
ho»tłnq? ... p r o g r e s o pl to dobry wybór, ale m y sie sto su n e k c e n y d o tran sferu tro c h e ich dyskwalifikuje ja z e sw ojej stro n y m ogę polecic fr.pl -równie szy b k i i tam h o s tin g ... p l.c o m p .w w w - 24 Kwi 2005 02 49 wg butel - 36 wiadomości 14 autorów
Linki sponsorowane H ostin g od 3.99 PLN Do 6 G B powierzchni 900G B transferu Domeny za 36 % ceny www webd pl W W W Hostin g w pakiecie domena z a 1 zł pl eu com www punkt pl
a d s l knux y s e rv id o r d e d n s p r o p io ... té cn ic o del otro un mail del uno. asi. al h a ce r m ovim ientos d e p r o g r e s o d e un ... E so m e p a só c u an d o moví' mi dominio d e s d e un h o s tin g a mi ADSL, (h ará c a s i ... e s .c o m p - o s .li n u x .r e d e s - 24 G ru 2001 00 06 wg Xavier Montero - 9 wiadomości 5 autorów
H ostin g - 9 lat na rynku od 55 zł/rok 5 G B transferu na m-c domeny pl od 65 zł www e a s y łS P pl
Ho»ting PHP
Serwery W W W od 2.5 zł/m-c Profesjonalny i stabilny h osting Domeny od 15 zf. konta reseller www.netatiefa.pl
- n a w e t 20 g i g a - c o p o l e c i c i e ? ... jeśli m a s z d ziw na p o trze b e p o sia d an ia h ostingu w P o ls c e , to - stro n n ic zo (bo koledzy) http://www p r o g r e s o pl (ch o c m aja napraw dę dobra oferte) - lub h ttp // k e i ... p l.c o m p .la n g .p h p - 20 Marz 11:07 wg [sis] - 6 wiadomości - 5 autorów la p .p l
o d rad z am
Z obacz tu swoją wiadomość.
horting
Oma 20-03-2006, pon o godzinie 0 9 5 6 +0100. [sis] n ap isal(a) a o d n o śnie hostingu, ja w ybierałbym p o m ięd zy 3 -m a - h ttp //www p r o g r e s o pl - http://kei.pl ... p l.c o m p .w w w 21 M arz 19 45 wg [sis] - 26 wiadomości - 11 autorów m ł o d o c ia n y
ho»tinq
... T eraz realnie ? ,-) p ozdr - A d am S z end zielo rz, a d a m [at] p r o g r e s o [kropka] pl h ttp //www p r o g r e s o pl h o s tin g - 0801 307 301 G S F 6 0 0 S ’03 (black) p l.in te m e t.p o lip - 10 Kw i 2006 10.00 wg Adam Szendzielorz - 77 wiadomości - 25 autorów
Rysunek 10.1. Grupy dyskusyjne są nieocenionym źródłem wiedzy na temat jakości usług hostingowych
Jeżeli nie lubisz grup dyskusyjnych, opinii na temat firm hostingowych możesz szu kać na stronach i forach dyskusyjnych poświęconych tematyce internetu i tworzenia stron WWW.
Uwaga
Pam iętaj, że przedstaw iona m etoda sprawdzania wiarygodności i solidn ości firm y hostingowej je s t je d n ą z najskuteczniejszych i obiektyw nych. Jednak dla pewności przed podjęciem ostatecznej decyzji skorzystaj z bezpłatnego okresu próbnego, który oferują w szystkie liczące się firm y.
3 16
Tworzenie stron WWW w praktyce
Zakładanie konta Po wybraniu i zweryfikowaniu firmy hostingowej przyszła pora na założenie konta. Procedura wygląda mniej więcej podobnie, niezależnie od tego, z usług jakiej firmy korzystamy, i ogranicza się do wypełnienia stosownego formularza oraz wybrania rodzaju usługi.
Uwaga
Jako przykład do dalszego opisu wybrałem ofertę firm y Progreso, ponieważ uważam ją za jedną z ciekawszych. Na mój wybór m iał również wpływ okres testowy, z którego można skorzystać, zakładając nowe konto. Polega on na tym , iż bez zobowiązań m ożesz spraw dzić ja k o ś ć oferow anych usług i dzięki te m u na spo kojnie podjąć decyzję.
Aby obejrzeć ofertę firmy Progreso, klikamy przycisk Oferta, a następnie Serwery wirtualne. Na ekranie monitora pojawia się wówczas przejrzyste zestawienie właściwo ści poszczególnych serwerów wirtualnych — rysunek 10.2. Rysunek 10.2. Zestawienie właściwości serwerów wirtualnych
Serwer w irtualny to najpopularniejszy sposób na publikację stron w sieci. Przygotowaliśmy 2 plany hostingowe, które wychodzą na przeciw potrzebom i możliwościom finansowym naszych obecnych i przyszłych klientów. Wysoka przepustowość zwielokrotnionych łącz i stabilne serwery pozwalają nam zapewnić Tobie 9 9 ,5 % g w a r a n c ję d o s tę p n o ś c i utrzym ywanych stron WWW. Sprawdź nas - masz na to 14 d n i i jest to zupełnie darmowe. Dzięki systemowi natychm iastowej aktyw acji tw ój serwer będzie gotowy do pracy w ciągu kilku sekund' T e ra z d o k a ż d e g o p la n u h o s tin g o w e g o d o m e n a .p l g ra tis ! Sprawdź koniecznie nasze autorskie oprogram owanie, które dostępne jest tylko u nas - potężny i przyjazny e x tr a n e t dla klientów.
Pamiętając o wymogach technicznych strony, którą chcesz opublikować, wybierasz od powiednią wersję usługi i klikasz przycisk Zamów. Kolejny etap wymaga oznaczenia rodzaju klienta (osoba prywatna lub firma) oraz zaakceptowania regulaminu. Następne etapy rejestracji i zakładania nowego konta polegają na wypełnieniu sto sownych formularzy, które zostały pokazane na rysunkach 10.3, 10.4 i 10.5. Powinieneś wypełnić wszystkie pola oznaczone czerwoną gwiazdką. Aby przejść do kolejnych etapów, kliknij przycisk Dalej. Rysunek 10.3. Zakładanie nowego konta — etap pierwszy
KROK 3. REJESTRACJA DANYCH (OSOBA PRYWATNA) Wypełnienie pól oznaczonych * jest niezbędne do pomyślnego przeprowadzenia rejestracji. imię i nazwisko: x Bartosz Danowski adres zamieszkania: x kod i miasto: x Katowice Q powyższy adres jest adresem korespondencyjnym
Rysunek 10.4. Zakładanie nowego konta — etap drugi. Login i hasło to elementy niezbędne do połączenia się z serwerem w celu dokonania zmiany ustawień i zarządzania kontem. Adres startowy to tymczasowy adres strony WWW, który ulegnie zmianie p o zarejestrowaniu własnej domeny
KROK 5. DANE SERWERA WIRTUALNEGO Wypełnienie pól oznaczonych * jest niezbędne do pomyślnego przeprowadzenia rejestracji. login: *
ksiazka
hasło: * hasło (powtórz): * adres startowy: *
ksiazka
.civ.p l
Swoją domenę/y będziesz mógł skonfigurować, przenieść własna domena/y: lub zarejestrować w extraneae po aktywacji serwera. plan hostingowy: *
abonament: x
0 biznes Q biznes plus 0 roczny (12 miesięcy) O półroczny (6 miesięcy)
dodatkowe informacje / uwagi:
(sprawdź kod)
kod promocyjny: l • « • i. l
1
Tworzenie stron WWW w praktyce
31 8
Rysunek 10.5. Zakładanie nowego konta — etap trzeci
KROK 6. WERYFIKACJA DANYCH To już ostatni, weryfikujący etap rejestracji serwera. Sprawdź proszę raz jeszcze dane, które podałeś. Jeżeli coś się nie zgadza - możesz je wygodnie poprawić. Wypełnienie pól oznaczonych * jest niezbędne do pomyślnego przeprowadzenia rejestracji. DANE KLIENTA imię i nazwisko:* Bartosz Danowski adres zamieszkania: * * * * * * kod i miasto: * Katowice NP: P E S a:
(jbebb D ADRES KORESPONDENCYJNY adres:* * * * * * * kod i miasto: * ka to wice dopisek: nie podano
I p o p raw 1 DANE SERWERA login:* * * * * * * hasło:* * * * * * * adres startowy:* ksiazka.civ.pl plan hostmgowy:* biznes abonament:* 12 m -cy cena netto / brutto: 2 S 0 .0 0 PLN / 3 0 5 . 0 0 PLN kod promocyjny: nie podano ( pop««» ]
[ Akceptuję - rejestruję serwer! ]
Ostatni etap, widoczny na rysunku 10.5, zawiera zestawienie wszystkich wprowadzo nych danych. Korzystając z przycisku Popraw, możesz wprowadzić ostatnie zmiany. W celu akceptacji zamówienia kliknij przycisk Akceptują — rejestrują serwer. Po zakończeniu rejestracji na ekranie Twojego monitora pojawi się komunikat z in form acją o tym, że cały proces przebiegł pomyślnie — rysunek 10.6. Poza tym strona zawiera odnośniki do plików, w których znajduje się szczegółowa konfiguracja serwera oraz faktura pro forma. Dodatkowo potwierdzenie aktywacji zostanie wysłane na adres e-mail podany podczas rejestracji. Od tej chwili możesz ju ż korzystać z nowo założonego konta i nic nie stoi na prze szkodzie, aby wysłać pliki strony na serwer.
319
Rozdział 10. ♦ Publikacja i utrzymanie strony
Rysunek 10.6. Potwierdzenie założenia konta
T w ó j s e r w e r z o s ta ł a k ty w o w a n y . Możesz rozpocząć korzystanie z niego. Poniżej znajdziesz isto tn e d a n e dotyczące korzystania z Tw o jego serwera wirtualnego. 5ugerujem y zapisać te dokum enty tokaine na dysku k łkając p ra w y m przyciskiem myszy na odpow*edn*ej iko n « wybierając z menu opcje Zapisz e le m e n t d o c e lo w y ja k o ...
(D j j
dane konf. serwera (pdf, 64 KB)
faktura pro form a (pdf, 60KB)
TX^ dane konf. serwera (txt, 5 KB) D ziękujem y za wybranie naszej firm y. Masz teraz 14 d n i aby przetestować swój serwer. Jesteśmy przekonani, że nasza współpraca będzie owocna dla obu stron. Cały czas służymy pomocą - do Tw ojej dyspozycji jest obszerna dokum entacja, infolinia 0 80 1 307 301 , telefoniczna pomoc techniczna ( 3 2 ) 4 7 6 21 6 4 oraz system pomocy w extranecie. W ciągu kilku dni z w y k łą p o c z tą otrzymasz od nas p ró b n ą fakturę pro forma oraz wypełnione polecenie przelewu/wpłaty, dzięki którem u w razie zdecydowania się na nasze usługi będziesz mógł opłacić swój serwer. Za nasze usługi możesz zapłacić nie ruszając się z domu - dla Tw ojej wygody uruchomiliśmy system p ła tn o ś c i o n - lin e autoryzowany przez firm ę E-card. Płatność możesz wykonać bezpośrednio z extranetu.
Możesz teraz pierwszy raz zalogować się do e x tr a n e tu i skonfigurować swój serwer.
Publikacja strony Skoro konto zostało już założone, możesz śmiało połączyć się z serwerem i opubli kować uprzednio przygotowaną stronę WWW. Do wykonania tego zadania będziesz potrzebował dodatkowego programu — klienta FTP. W dalszym opisie zdecydowałem się wykorzystać darm ową FileZillę, którą można pobrać ze strony http://sourceforge.net/projects/filezilla. Program ten dostępny jest w polskiej wersji językowej, a jego obsługa jest bardzo prosta.
Uwaga
Ciekawą alternatyw ą dla FileZilli je s t specjalna „w tyczka” do przeglądarki M ozilla Firefox o nazwie F ire F T P — h t t p : / / f ir e f t p . m o z d e v . o r g . Dzięki tem u rozwiązaniu nie po trzebujesz dodatkowego programu i wszystko masz wbudowane w swoją przeglądarkę.
Instalacja jest prosta i nie sprawi nikomu najm niejszych problemów. Po włączeniu programu zobaczysz okno podobne do tego z rysunku 10.7. W pierwszej kolejności kliknij ikonę oznaczoną na rysunku 10.7 strzałką. Następnie w kolumnie widocznej poniżej strzałki odszukaj dysk i folder, w którym znajdują się pliki przeznaczone do wysłania na serwer. Do pól Adres, Użytkownik i Hasło wpisz odpowiednie dane. Jeżeli zapomniałeś danych, jakie podałeś podczas rejestracji, skorzystaj z pliku PD F z danymi konta lub sprawdź e-mail, który trafił do Ciebie po jego aktywacji. Po wpisaniu wszystkich danych (pa miętaj, że wielkość liter ma znaczenie) kliknij przycisk Szybko połącz i zaczekaj, aż zostanie nawiązane połączenie z serwerem — patrz rysunek 10.8.
töwrt | DAMoje dokumentyV - HEUONV W trakcie ptaaniaYI ABC_twexzeraa_aron_WWW'p v a O przykłady ¡¿3 obrazki ¿ 3 2.N agrywana płyt. Przewodnie lustrowany t:~~j 3.Bementarz montażu komputera. P - . 1 4.Pozyc)onowanie i opłumakzaja stron. Jak to zrobić <¿3 Hardware, leksykon pojęć sprzętowych. Wydanie n ii (¿3 Komputer - kolor R oznar...
Nazwa pMcu O O obrazki :3j| lll.htm i !3l|cssl.css
530 98 400
s»E 2E S E 3 3 ) forrmJarz-nekon.html 3 i| ksiazka. css 3 | hstaodnosrskow. css 3 j pisalionas.css 33| przyidad-formularz.html przyWad-ksazka.html S ili* « ! » * » » )
200 Type set to A PASV 227 Entenng Passive Mode (85 219 199 120 192.245) LIST 150 Opermg ASCII mode d. 226 Transfer complete Wyfcstowarue katalogu powiodło ae
Wient: j DAMoje dokumentyV1 • HELIONA! W trakcie pisantaM .ABCJworzona_stron_WWWNp y - _ j przykłady i A obrazki lr~A 2.Nagrywar*e płyt. Przewodnie lustrowany 3.Bementarz montażu komputera. Przewodnik ilustrowany Q 4. Pozycjonowanie i optumalizaja stron. Jak to zrobić Hardware. Leksykon pojęć sprzętowych. Wydarte n Komputer - kolor irA Dane osobowe
2 Ł Rysunek 10.8 . Wysyłamy stroną na serw er— etap drugi
2006-07-18 1S:S6 2006-07-18 15:56
Rozdział 10. ♦ Publikacja i utrzymanie strony
32 1
Po nawiązaniu połączenia w prawej części okna zobaczysz zawartość swojego konta znajdującego się na serwerze. W przypadku firmy Progreso stronę umieszczamy w ka talogu public html. Oczywiście, w przypadku innych firm hostingowych katalog może mieć inną nazwę lub może go nie być wcale. Aby wysłać pliki na serwer, w pierwszej kolejności musisz otworzyć folder public_ html. W tym celu kliknij dwukrotnie nazwę katalogu, widoczną w prawej części głów nego okna programu. Po chwili powinna zostać wyświetlona zawartość folderu. Teraz możesz przesłać pliki na serwer. Jeżeli postępujesz zgodnie z moimi instruk cjami, w lewej kolumnie powinieneś widzieć pliki strony, a w prawej otwarty folder public_html. Wystarczy zaznaczyć pliki w lewym oknie, nacisnąć lewy przycisk myszy i przeciągnąć kursor do prawej kolumny, tak jak to pokazuje strzałka na rysunku 10.9. Kopiowanie plików rozpocznie się po zwolnieniu przycisku myszy. f? FileZilla - Podłączony do ksiazka.civ.pl Plik
Edycja
Transfer
Kolejka
Serwer
ki iW Q iH El iwiedź: Komenda Odpowiedz Komenda: Odpowiedź Odpowiedź: Status
Widok &
Pomoc ''■
^
ks
Użytkownik: anow ski12
H asło:
200 Type set to A PASV 227 Entering Passive Mode (85.219,195.120.195.57). U ST 150 Opening ASCII mode data connection for file Ust 226 Transfer complete Wyhstowanie katalogu powiodło stę
Wient ! D:\Moje dokumentyV - HEUONV W trakcie pisaniaM .ABC _t worzenia _stron_ W W W 'p v S Ó
przykłady -(¿3) obrazki
S erw er /p u b S cJitm i/ N azwa pliku
¿ 2 ) 2 .N agrywanie p ły t. Przewodnik ilustrow any
R o z m ia r...
Typ
D ata
Czas
Uprawnu
< P usta Bsta ka talogu >
jr~A 3 .Elementarz montażu kom putera. Przewodnik ilustrow any y~*i 4.Pozycjonowanie i o p tu m aizaja stro n . Jak to zrobić ¡ £ 2 H ardw are. Leksykon pojąć sprzętow ych. W ydanie n Ś
Komputer - kolor i D ane osobow e Rozmiar... 400
Zmodyfikowany Kaskadowy a rk ...
2 006-07-09 22:29
2 KB
Plik HTML
2 006-07-05
887
Kaskadowy a rk ..,
208
Kaskadowy a rk .,
1KB
Plik HTML
2006-07-06 17:32
969
Plik HTML
2 0 06-07-07 10:22
266
Kaskadowy a rk ...
2006-07-06 17:37
Zaznaczono 13 pików z 17382 bajtami. Nazwa pbku lokalnego
Rozmiar
Pr ze z n a ...
N azwa pBoi n a serw erze
Kolejka: 0 b ajty
» 9
Rysunek 10.9. Wysyłamy stroną na serw er— etap trzeci
Na rysunku 10.10 widać zawartość folderu public_html po wysłaniu wszystkich pli ków strony. W tej chwili wszystkie pliki znalazły się już na serwerze i korzystając z przeglądarki, możesz zobaczyć efekt swojej pracy. Wystarczy, że w pasku adresu przeglądarki wpi szesz adres swojej strony, np. http://danowski.pl.
322
Tworzenie stron WWW w praktyce
Ę F ile Z illa - P o d łą c z o n y do k s ia z k a .c iv .p l I Pfik
Edycja
1 ¡Ü:' Odpowiedź Komenda. O dpow iedź Komenda Odpowiedź O dpow iedź Stalus
Transfer
Kolejka
fefQIÜ
Serwer
Widok
Pomoc
O& R
El
f
Adres
l^ gbkojm lgzjv
jksazkaovpl
200 Type set to A PASV 227 Entering Passive Mode (85.219.199 120.194.61). LIST 150 Opening ASCII m ode d a ta conn ectio n for fie 1st 226 Transfer com plete Wyttsfowame katalogu powiodło się
Klient ID:\Moje dokumentyV - H E U O N V W trakcie pisaniaM ABC_tworzenia_stn>n_WWWNp • £
a T Hardware. Leksykon pojęć sprzętowych. Wydanie II da Komputer - kolor T Dane osobowe Rozmiar...
i f§ ■ R ozm iar.,.
£ ).• § i lll.h tm l
517
¡Sdlcssl.css
93
’33! formularz.css ¿3! formularz-hefcon.html
365 2190
Typ
Data
Czas
Uprawni
Pik HTML
2006-07-18
19:54
-rw -r-r-
Kaskadowy...
2006-07-18
19:54
■rw-f-r-
Kaskadowy...
2006-07-18
19:54
-fw -r-r—
Pik HTML
2006-07-18
19:54
-rw -r-r-
Siiksiazka.css
821
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
i3 | listaodnosnkow .css
189
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
306
Kaskadowy...
2006-07-18
19:54
-rw -r-r-
2695
Pik HTML
2006-07-18
19:54
-rw-r-r—
4975
PSk HTML
2006-07-18
19:54
-rw -r-r-
Pik HTML
2006-07-18
19:54
-rw -f-r-
Pik HTML
2006-07-18
19:54
-rw -r-r-
2006-07-18
19:54
-rw -r-r-
2006-07-18
19:54
-rw -r-r-
Typ
Zmodyfikowany
Kaskadowy ark...
2006-07-09 22:29
2KB
Pik HTML
2006-07-05 10:53
887
Kaskadowy ark...
2006-07-10 22:01
£3! przykład-Sstaodnosnko...
2482
208
Kaskadowy ark...
2006-07-10 22:10
,331przyłdad-tistatop.html
1081
336
Kaskadowy ark...
2006-07-07 10:29
;23] przyklad-pisalionas.html
949
P ik HTML
2KB
P ik HTML
2006-07-09 22:29
243
Kaskadowy..
4KB
Pik HTML
2006-07-09 18:09
400
2KB
P ik H T M
2006-07-06 18:38
1KB
Plik HTML
2006-07-06 17:32
969
Pik HTML
2006-07-07 10:22
266
Kaskadowy ark...
2006-07-06 17:37
Zaznaczono 13 plików z 17382 bajtami. Nazwa piku lokalnego
Serwer: j/pu blc _html/ Nazwa piku
obrazki
;S3) ptsahonas.css .23! przyklad-formularz.htjłłl
2i| przykład-ksazka.html
1531style.css
13 pików z 16906 bajtami. Rozmiar
Pr ze zna...
Nazwa piku na serwerze
Kolejta: 0 bajty ♦ »
Rysunek 1 0 .1 0 . Wysyłamy stroną na serw er— etap czwarty
Uwaga
Jeżeli za m ia st strony widzisz lis tę plików , to znaczy, że brakuje pierwszego pliku strony. Zapam iętaj, że pierwszy plik strony zawsze m usi mieć nazwę in d e x .h tm lub in d e x . h t m l czy in d e x .p h p .
Rejestracja domeny Jeśli udało Ci się ju ż założyć konto, uruchomić wirtualny serwer oraz opublikować pliki strony, pora dowiedzieć się czegoś na temat własnej domeny. Zacznijmy od wyjaśnienia pojęcia domeny. Każdy komputer podłączony do internetu ma własny, unikalny adres. To podstawa działania każdej sieci komputerowej, w prze ciwnym razie nie byłoby możliwe zidentyfikowanie poszczególnych maszyn oraz prze syłanie między nimi informacji. Adres internetowy występuje w dwóch postaciach: numerycznej oraz symbolicznej, czyli literowej. Ta pierwsza jest używana przez kom putery, które, jak wiadomo, „nie rozumieją” niczego innego poza cyferkami. Adres numeryczny, zwany inaczej adresem IP, składa się z czterech 8-bitowych liczb i wy gląda np. tak: 217.97.150.194.
Rozdział 10. ♦ Publikacja i utrzymanie strony
323
O tym, jakie konkretnie liczby pojawiają się na poszczególnych miejscach, decydują dość skomplikowane reguły. Mają one charakter czysto techniczny i dlatego nie będzie my się tu zajmowali tym zagadnieniem. Istotne jest to, że zapamiętanie adresów IP byłoby dla ludzi raczej trudne, poza tym takie adresy nic nikomu nie mówią. W związku z tym jeszcze podczas powstawania intemetu postanowiono, że każdy adres będzie miał swój odpowiednik symboliczny, czyli literowy. Adresy w tej postaci są po pierwsze łatwe do zapamiętania, a po drugie m ogą stanowić np. nazwę firmy, nazwę usługi, slogan reklamowy itd. Dzięki temu zamiast posługiwać się szeregami nic nieznaczących cyfr, operujemy adresami typu www.yahoo.com ,w ww .whitehouse.gov,www.interia.pl itd. Wszystko proste, wszystko jasne. Podczas zakładania konta na serwerze zazwyczaj dostajesz jakiś adres, jest on jednak dalece odległy od Twoich potrzeb. Dlatego wielu dostawców usług hostingowych daje możliwość rejestracji własnej domeny i powiązania jej z założonym kontem. Sam proces rejestracji nie jest skomplikowany i najwygodniej go przeprowadzić za po mocą mechanizmów udostępnionych przez firmę, z której usług korzystamy. W przy padku firmy Progreso musimy zalogować się do panelu administracyjnego, który do stępny jest pod adresem http://extranet.progreso.pl. Dane niezbędne do logowania to te same, których używałeś przy połączeniu z serwerem w celu wysłania strony. Po zalogowaniu się do panelu administracyjnego w menu dostępnym, po lewej stro nie, odszukaj sekcję o nazwie Domeny, kliknij j ą i z menu wybierz opcję Zamówienie — patrz rysunek 10.11. e x lra n « t | p ro g re so
pom oc tech. O 8 0 1 3 0 7 301
Po zmianie zawartości okna w sekcji Sprawdź domeną — rysunek 10.12, wpisz adres domeny, którą chcesz zarejestrować. Odpowiedni skrypt sprawdzi, czy jest ona wolna, a przy okazji poda listę innych propozycji, zbliżonych do Twoich oczekiwań.
324
Tworzenie stron WWW w praktyce
extranet | progreso
H e lp d e s k 2 4 / h
»
K a ta lo g i i p lik i
*
S tro n y w w w
■»
P o c z ta
*
FTP
-
B a z y d a n y c h (S Q L )
*
P ia n h o s tin g a w y
»
zamówienie
T:
f
z a m ó w ie n ie
a l o g o w a n y u ż y tk o w n ik ; d a n o w s k i l 2 ( w y lo g u j)
z a m ó w ie n ie
k o le jk a (0 )
W r a m a c h p r o m o c j i p r z y s ł u g u j e Ci j e d n a w y b r a n a d o m e n a g r a t i s , n a o k r e s j e d n e g o r o k u . Z a p o m o c ą p o n i ż s z e g o f o r m u l a r z a m o ż e s z d o k o n a ć j e j w y b o ru . D o m e n a z o s ta n ie z a r e je s tr o w a n a a u to m a t y c z n ie p o o p ła c e n iu se rw e ra *
S p ra w d ź d o m e n ę : n a z w a / d o m e n a : jd a n o w s io ł2
f if
182233
i n n e d o m e n y / p o k a ż g lo w n
nazw a d om eny
s ta n
c e n a n e tto / r e k
d o s tę p n a
BO PLN
1 1 d a n o w B k iłZ .c o m
d o s tę p n a
5 0 PLN
1 1 d a n o w s k iX 2 .n e t
d o s tę p n a
5 0 PLN
Billing D O M ENA PO L SK A D om eny a d fe
d a n o w s k ii2 .p l
a d m in is tra c ja D O M E N Y G L O B A LN E
z a m ó w ie n i« tra n s fe r z m i a n a d e l e g a c ji
d a n a w s k ii2 .o r g
n i e d o s t ę p n a w p r o m o c ji
D O M E N Y FU N K C JO N A L N E O
d a n a w s k il2 .c o m .p l
d o s tę p n a
6 0 PLN
Q
d a n o w s k i X 2 . n e t. p l
d o s tę p n a
6 0 PLN
1 1 d a n o w s k i l 2 . o r g . p!
d o s tę p n a
6 0 PLN
0EE231
Rysunek 1 0 .1 2 . Rejestracja własnej dom eny — etap drugi
Jeżeli wybrałeś odpowiadającą Ci domenę, kliknij mały kwadrat widoczny obok jej nazwy, a następnie naciśnij przycisk Dalej. W kolejnym oknie, które jest widoczne na rysunku 10.13, sprawdź poprawność danych do faktury i jeżeli wszystko się zgadza, kliknij przycisk Zamów. Akurat w moim przykładzie domena nic nie kosztuje, ponieważ „trafiłem” na promo cję — w przypadku wykupienia konta i opłacenia abonamentu otrzymam bezpłatnie domenę na rok. Dopiero po upływie tego czasu będę płacił za jej utrzymanie. Oczywi ście, w przypadku gdy promocja się skończy, odpowiednie ceny pojawią się w oknie przedstawionym na rysunku 10.3. Gdy już wyślesz wniosek rejestracyjny, spokojnie czekaj. W przypadku promocji, na którą trafiłem, domena zostanie zarejestrowana po opłaceniu konta. Natomiast w sytu acji, gdyby była zamawiana w zwykły sposób, zostałaby zarejestrowana po jej opłace niu. Dane niezbędne do dokonania płatności znajdziesz w panelu administracyjnym.
V Uwaga
Korzystając z opcji dostępnych w panelu adm inistracyjnym , możesz przenieść do meny z innego serw era lub przypisać je do odpow iednich katalogów na serwerze. Dzięki tem u, mając jedno konto, możesz prowadzić kilka pozornie niezależnych witryn.
325
Rozdział 10. ♦ Publikacja i utrzymanie strony
extranet | progreso
H elp d esk 2 4 /h
-
K a t a l o g i i p lik i
-
S tro n y w w w
:J -
P o c z ta
Ti
zamówienie
& 1- zamówienie
~vj
z a ło g o w a n y u ż y tk o w n ik ; d a n o w s k i l 2 (w y lo g u j)
z a m ó w ie n ie
W r a m a c h p ro m o c ji p r z y s łu g u je Ci je d n a w y b ra n a d o m e n a g r a tis , n a o k r e s je d n e g o r o k u . Z a p o m o c ą p o n i ż s z e g o f o r m u l a r z a m o z e s z d o k o n a ć j e j w y b o ru . D o m e n a z o s ta n ie z a r e je s t r o w a n a a u t o m a t y c z n ie p o o p ła c e n iu s e rw e ra *
FTP
B a z y d a n y c h (S Q L ) a dom eny P la n h o s tin g o w y
pl
e C o m m e rc e
V
B iffing
:
D om eny
-
ty p
s ta n
p o ls k a
d o s tę p n a
o k r e s r e je s tr a c ji ( 1
St~l r o k / l a t s u m a n e tto :
d a n e d o f a k tu ry :
B a rto s z D an o w sk i
a d re s k o re sp o n d e n c y jn y :
B a rto s z D an o w sk i
cen a n e tto 0 PLN 0 .0 0 P I H
a d m in is tra c ja z a m ó w ie n ie tra n s fe r z m i a n a d e le g a c ji
U w a g a * J e ż e l i p o w y ż s z e d a n e s ą n ie p r a w id ło w e n i e d o k o n u j n a m i c e l e m ic h z m i a n y !
d a m e n ( y ) . s k o n t a k t u j s i ą n a jp ie r w z
Rysunek 10.1 3. Rejestracja własnej dom eny— etap trzeci
Na koniec zapamiętaj, że w przypadku płatnego hostingu strony możesz ze swoimi problemami zgłosić się do pomocy technicznej. Dobra firma utrzymująca serwery po siada całodobowy serwis, który je st po to, aby Ci pomóc. Dlatego warto korzystać z tej możliwości.
326
Tworzenie stron WWW w praktyce
Rozdział 11.
Promocja serwisu Każdy twórca strony chce, by po jej publikacji była ona oblegana przez tłumy odwie dzających. Niestety, w praktyce sprawa odwiedzin oraz popularności strony nie wyglą da tak dobrze. Aby rozpropagować swoją witrynę, musisz sięgnąć po wiele rozwiązań i sztuczek, które postanowiłem opisać poniżej w zwięzłej formie.
Uwaga
Jeżeli interesuje Cię te m a t pozycjonowania i optymalizacji stron WWW, odwiedź moją stronę i poszukaj tam stosownych inform acji i porad. Zainteresuj się również książ ką P o z y c jo n o w a n ie i o p ty m a liz a c ja s t r o n W W W . J a k to s ię r o b i — h t t p : / / h e l i o n . p l / k s ia z k i/p o z o p t. h tm .
Popularne sposoby promocji strony W niniejszym podrozdziale opisałem kilka prostych i popularnych sposobów promo cji strony. Większość przedstawionych rozwiązań nie wymaga specjalnej wiedzy oraz dużego nakładu pracy. Dzięki temu świetnie nadają się one na start.
Podpis poczty elektronicznej Najprostszym sposobem reklamy strony jest dodanie do wysyłanej poczty e-mail odpo wiedniej stopki lub podpisu, zawierającego adres serwisu. Jeżeli wysyłasz dużo e-maili, to z całą pewnością w bliskiej przyszłości taka forma promocji odniesie skutek. Dalej zamieściłem przykład swojej stopki, która jest częścią każdego listu wysyłanego z komputera. Bartosz Danowski :: http://danow ski.pl :: Jak walczyć ze spam-em - http://danowski.pl/ksiazka/spam
Tworzenie stron WWW w praktyce
328
W swoim przykładowym podpisie poza imieniem i nazwiskiem zamieściłem adres strony internetowej oraz reklamę losowo wybranej książki.
V Uwaga
Tworząc s to p kę poczty, m usisz p a m ię ta ć o tym , by nie zaw ierała ona więcej niż cztery wiersze — w przeciwnym razie możesz spotkać się z krytyką takiego działania ze strony innych użytkowników internetu.
Grupy dyskusyjne Możliwa jest także promocja strony na grupach dyskusyjnych, w tym celu powstała specjalna grupa o nazwie pl.com p.www.nowe-strony. Tam możesz bez obaw wysyłać informacje o swojej stronie i o tym, gdzie się ona znajduje. Poza wspomnianą grupą możesz także spróbować zareklamować stronę na innych gru pach tematycznie związanych z zawartością witryny. Jednak pamiętaj, że nie wszędzie jest to mile widziane i zanim poślesz wiadomość, postaraj się zapoznać z zasadami panującymi na wybranej przez Ciebie grupie dyskusyjnej.
Listy mailingowe Promocja strony WWW czy też usług oferowanych w internecie za pomocą poczty elektronicznej jest tak stara, jak sam internet. Decydując się na ten sposób promocji strony, musisz pamiętać o kilku ważnych rzeczach. Moim zdaniem najważniejszą sprawą jest grono adresatów poczty. Nie powinieneś wysyłać poczty elektronicznej do grupy ludzi, których adresy znalazły się w bazie danych, będącej w Twoim posiadaniu. Takie działanie zazwyczaj spotyka się z wro gością odbiorców, bowiem często okazuje się, że ich adresy e-mail trafiły do takiej bazy bez ich wiedzy i zgody.
V Uwaga
Zanim zdecydujesz się rozsyłać e-maile z reklam am i swojej strony, koniecznie zapo znaj się z książką S p a m . P ro fila k ty k a i o b ro n a — h t t p : / / d a n o w s k i. p l/ k s ia z k a / s p a m .
Dlatego skorzystaj z systemów do prowadzenia biuletynów informacyjnych i umożliw swoim czytelnikom dopisywanie swoich adresów do Twojej bazy. Dzięki temu unik niesz problemów z posądzaniem o spamowanie.
Inne formy promocji Do innych form promocji można zaliczyć zamieszczenie adresu strony na papierze fir mowym, wizytówkach, folderach reklamowych oraz w branżowych magazynach. Dzięki temu o Twojej stronie dow iedzą się ludzie, którzy są zainteresowani tym, co robisz lub co oferujesz.
Rozdział 11. ♦ Promocja serwisu
329
Pozycjonowanie stron w wyszukiwarkach Zdecydowanie najlepszym sposobem na wzrost popularności Twojej strony jest jej optymalizacja, przygotowanie do indeksacji przez wyszukiwarki oraz zdobywanie wy sokich pozycji w wynikach wyszukiwania.
Uwaga
Porady zamieszczone poniżej potraktuj ja k o w stę p do pozycjonowania stron WWW, gdyż te m a t ten je s t na tyle obszerny, że wym aga osobnej ksią żki. Nie zm ienia to fa k tu , że n ie któ re rady tu zam ieszczone są na tyle u n iw e rsalne i ponadczasow e, że ich stosow anie w niczym nie zaszkodzi, a często przyniesie pożądany e fe kt w po staci dobrych m iejsc w w ynikach wyszukiwania.
Podstawy Na samym początku przeanalizuj treść swojej strony i na tej podstawie wybierz kilka słów kluczowych. Powinny to być słowa lub frazy, które najlepiej oddają zawartość strony i są wykorzystywane przez ludzi szukających informacji w sieci. Aby praw i dłowo wykonać to zadanie, warto wczuć się w rolę osoby szukającej, a nie pozycjo nującej stronę. Analizując zwartość mojej strony, doszedłem do wniosku, że każda z podstron oma wiających książki korzysta z innych słów i fraz kluczowych. Dlatego jako przykład do dalszych rozważań posłuży mi strona jednej z ostatnich książek Nero 7. Nagrywanie płyt CD i DVD. Ćwiczenia praktyczne — http://danowski.pl/ksiazka/cwner7. Wytypo wane przeze mnie słowa kluczowe wypisałem poniżej. ♦ Nero ♦ Nagrywanie płyt ♦ Nero Buming ROM ♦ Wypalanie płyt ♦ Płyty CD DVD ♦ Kopiowanie płyt. Mając wybrany zestaw kluczowych fraz i słów, możesz zabrać się do optymalizacji kodu strony. W pierwszej kolejności musisz zadbać o odpowiednie opisane znaczników . Poniżej zamieściłem przykład odpowiednich znaczników wraz z wpisanymi słowami kluczowymi. Pamiętaj, że oba elementy m uszą znajdować się w nagłówku strony pomiędzy znacznikami . , który informuje robota wyszukiwarki o tym, co można in deksować na stronie. Poniżej znajduje się przykładowy wpis, pozwalający na pełną indeksację wszystkich podstron serwisu.
Oczywiście, w zależności od potrzeb wartości wpisane do atrybutu content mogą przybierać inną postać, np.: ♦ ' i ndex' — strona powinna być zaindeksowana, ♦ ' noi ndex' — strona nie powinna być zaindeksowana, ♦ ' fol 1ow1 — linki z tej strony powinny być zaindeksowane, ♦ ' nofol 1ow' — linki z tej strony nie powinny być zaindeksowane, ♦ ' a l l ' równa się 'index, follow ' — wartość domyślna, ♦ 'none' równa się 'noindex, nofol low'. Uwaga, wszystkie opisane w niniejszym podrozdziale znaczniki języka HTML (XHTML) powinny znaleźć się w nagłówku każdej z podstron serwisu. Po zmianach kodu strony przyszła pora na to, aby przyjrzeć się treści pozycjonowanej strony. Poprawnie napisany tekst przeznaczony do prezentacji na stronie WWW powi nien spełniać kilka surowych kryteriów, dzięki którym będzie trafiał do czytającego oraz wpłynie na poprawę wyników wyszukiwania. ♦ Tekst powinien być możliwie krótki i zwarty. ♦ Najważniejsze elementy powinny być umieszczone na początku tekstu. ♦ Wewnątrz tekstu powinny zostać umiejętnie wplecione frazy i słowa kluczowe, które zostały wybrane do pozycjonowania.
Rozdział 11. ♦ Promocja serwisu
331
♦ Tekst powinien być napisany poprawną polszczyzną i w pierwszej kolejności kierowany do osoby czytającej, a dopiero później do robotów wyszukiwarek. ♦ Staraj się używać w treści strony nagłówków. Pamiętaj, że nagłówek stopnia pierwszego może wystąpić tylko raz na stronie. W miarę możliwości nagłówki powinny zawierać w sobie pozycjonowane frazy lub słowa kluczowe. ♦ Używaj znaczników odpowiedzialnych za wyróżnianie tekstu. W yróżnienia powinny dotyczyć pozycjonowanych fraz lub słów kluczowych. Ważne jest jednak, aby wyróżniać z umiarem i tylko to, co faktycznie jest istotne.
Prawidłowa indeksacja strony Po dobraniu słów kluczowych, prawidłowym opisie istotnych znaczników w kodzie strony i optymalizacji tekstów przyszła pora na to, aby zadbać o należytą indeksację strony przez wyszukiwarki. Zanim jednak przejdziemy do konkretów, kilka ważnych informacji na temat tego, w jaki sposób działają roboty wyszukiwarek. W dużym uproszczeniu robot wyszukiwarki jest samodzielną przeglądarką, która anali zuje zawartość strony i wyniki swoich obserwacji przesyła do bazy danych. Robot po wypuszczeniu z „klatki” zaczyna swoją wędrówkę po sieci i przemieszcza się pomię dzy indeksowanymi stronami dzięki odnośnikom. Dlatego bardzo ważnym elementem jest prawidłowe połączenie wszystkich stron w serwisie. Robot musi mieć swobodę „skakania” ze strony na stronę, tak by zapoznał się ze wszystkimi częściami serwisu. Niestety robot sieciowej wyszukiwarki w zależności od tego, z jakim serwisem ma cierzystym jest powiązany, ma szereg braków i ograniczeń, które musimy brać pod uwagę podczas tworzenia strony. Zacznijmy od najważniejszego ograniczenia. Otóż większość robotów nie potrafi anali zować stron wykorzystujących technologię Adobe Flash (dawniej Macromedia Flash) lub robi to nieudolnie. Efektem tych ograniczeń może być zerowa lub szczątkowa in deksacja Twojej strony. W przypadku mojej strony domowej (starej wersji) boczne menu nawigacyjne zostało wykonane za pomocą programu Adobe Flash — rysunek 11.1, co zaowocowało w pierw szej fazie problemami z indeksacją strony. Niestety, roboty indeksowały wyłącznie stronę główną oraz podstrony, do których odnośniki znajdowały się w kolumnie aktualności i w głównej treści strony. Łącznie w indeksie znajdowało się zaledwie kilkanaście procent całego serwisu. Opisany powyżej problem można rozwiązać przynajmniej na trzy sposoby, które po zwoliłem sobie szerzej opisać poniżej. Najszybszym rozwiązaniem jest dodanie drugiego, tekstowego menu nawigacyjnego, przeznaczonego głównie dla robotów. W przypadku mojej strony domowej takie menu pojawiło się w stopce strony — rysunek 11.2.
Tworzenie stron WWW w praktyce
332
3 > WITAM SERDECZNIE Teraz możesz być legalnym bez w ydaw ana pieniędzy Uaktualnienia
♦
Witaj nieznany wędrow cze w mojej skromnej oazie smutku, radości oraz spokoju Skoro trafiłeś na tę stronę to z całą pewnością musiały Ci w tym pomóc moje książki, artykuły lub wyszukiwarka
Tsss&sw sm
Strona powstała jako przykład dla książki p t:T warzenie stron WWW w praktyoe", ale z czasem okazało się, że odwiedza mnie wielu gości a z tymczasowości powstało ciało stałe Obecnie witryna spełnia istotną funkcję informacyjną i prezentuje moje dotychczasowe osiągnięcia
SrttkBtS 8 Mnie
*•
le s /ta
'¥ ■
find»«« Snany
+•
k o n ia k i
#■
Moje kstążki o MoziA w pakiecie OpenOffice firmy UXjH
j
|
L ite ra tu ra in fo rm a tyczn a mojego autorstwa porusza następujące zagadnienia nagrywanie płyt (CO i DVD), tworzenie stron WWW (HTML, CSS, Java Script), montaż i budowa komputera PC, modding i tuning PC, wyciszanie podzespołów komputerowych, montaż wideo, Neostrada, konfiguracja BIOS a także opisuje programy Nero, Ghost, Drive Image, Excel, Front Page, Easy CD Creator, WinOnCD, Gadu Gadu, Tlen, Ulead Video Studio, MoziBa Firefox, Mozilla Thunderbird i wiele innych
553555^25553515351515 Fotografia cyfrow a | » Przeczytaj tę książkę, je ili ! chcesz zachować pełną : kontrolę nad kolekcją I cyfrowych zdjęć_______
|
1
Rysunek 1 1 .1 . System nawigacji oparty na Adobe Flash jest złym rozwiązaniem z punktu widzenia pozycjonowania stron
rit/Cu
UAWUHÍ.WÉWAi ARTYKUŁY O M KK SiClEP ; S E S ÍT M
! P K T O K N Z 8W0KV | KONTAKT | «*>* STOOWV,
Rysunek 1 1 .2 . Dodatkowe tekstowe menu nawigacyjne wpływa na lepszą indeksacją strony Drugim rozwiązaniem, które wymaga odrobinę więcej zachodu, jest utworzenie mapy strony. W praktyce taka mapa jest wykazem odnośników do wszystkich podstron serwisu. Rysunek 11.3 przedstawia przykładową mapę mojej strony domowej. Tworząc mapę strony, warto skorzystać z list wypunktowanych lub numerowanych, a gotową podstronę bezwzględnie należy podpiąć do głównej strony serwisu za pomocą tekstowego odnośnika. Na przykładowej witrynie odnośnik do mapy strony znajdziesz w tekstowym menu nawigacyjnym, umieszczonym w stopce — rysunek 11.2.
V Uwaga
Liczące się w yszukiwarki ud ostęp niły specjalne narzędzie do tworzenia map oraz zarządzania nim i. Dzięki tem u strony mają być jeszcze lepiej i dokładniej indekso wane. Przykładem takie go rozwiązania może być G o o g le S ite m a p — h t t p : / / w w w . g o o g le . c o m / w e b m a s t e r s / s it e m a p s .
Rozdział 11. ♦ Promocja serwisu
Rysunek 11.3. Mapa strony bardzo dobrze wpływa na lepszą indeksacją strony
333
► MAPA STRONY Strona główna A rchiw um wiadom ość Właśnie piszę Napisane książki • • • • • •
Seria - Ćwiczenia Seria - ABC Seria - Standard Seria - Kurs Seria - Po prostu Tłumaczenia
Pełna lista książek Uaktualnienia do napisanych książek A rtykuły i poradniki publikow ane w prasie • • • •
Publikacje Publikacje Publikacje Publikacje -
CYBER Magazyn INTERNET CDRinfo.pl CHIP
Inform acje o autorze Różne inform acje - nagrody, wyróżnienia, wyjazdy • • • • •
Nagroda "Najlepszy z Najlepszych" 100.000 sprzedanych książek Wyjazd do Złotego Potoku Skok na bunge z 62 metrów Spotkanie z Kevinem Mitnickiem
Przyjazne strony Dane kontaktow e Regulamin
Ostatnim i chyba najbardziej wymagającym rozwiązaniem jest zmiana systemu nawi gacji strony i zastąpienie go lepszym oraz nowocześniejszym rozwiązaniem, jakim są kaskadowe arkusze stylów. Na rysunku 11.4 widać alternatywne menu nawigacyjne mojej strony domowej, wykonane za pom ocą CSS. Rysunek 11.4. Za pom ocą CSS można utworzyć równie atrakcyjne, a przy tym funkcjonalne menu nawigacyjne
S t ro n a g łó w n a K s ią ż k i A r t y k u ły B log W ła ś n ie p is z ę U a k t u a ln ie n ia O m n ie S k le p R e s z ta C ie k a w e s t r o n y K o n ta k t
Tworzenie stron WWW w praktyce
334
Powyższy projekt nigdy nie został wykorzystany na stronie, ponieważ zdecydowałem o zmianie jej charakteru i wyglądu, o czym sam możesz się przekonać, odwiedzając ją. Nie zm ienia to faktu, że przykładowe menu jest wygodne w codziennym użyciu, działa poprawnie w różnych przeglądarkach i świetnie „współpracuje” z robotami wyszukiwarek. Poniżej zamieściłem przykładowy arkusz stylów oraz kod strony WWW z prezentowa nym menu. Mam nadzieję, że dzięki informacjom zawartym w poprzednich rozdziałach niniejszej książki poradzisz sobie z przygotowaniem podobnego systemu nawigacji. Kod XHTML
} Na rysunku 11.5 widać obrazek wykorzystany do przygotowania menu. Rysunek 11.5. Zmyślna konstrukcja obrazka powoduje, że animacja menu je s t płynna niezależnie od posiadanego łącza
Szalenie ważnym czynnikiem poprawiającym dokładną indeksację strony jest system wewnętrznych odnośników pomiędzy stronami. Innymi słowy, w miarę możliwości zadbaj o to, aby poszczególne strony były powiązane między sobą. Zwróć uwagę, że na przykładowej stronie głównej można np. znaleźć odnośnik do strony o książce omawia jącej program Nero. Po otwarciu odpowiedniej podstrony pod opisem książki znajdziesz kilka kolejnych odnośników do innych książek na ten sam temat — rysunek 11.6. Tworząc system wzajemnych powiązań, staraj się wykorzystywać w odsyłaczach słowa kluczowe wybrane do pozycjonowania strony.
Uwaga
Jeżeli z ja kich ś powodów dany odsyłacz ma nie być analizowany przez robota wy szukiwarki, można skorzystać z atrybutu re l= "n o fo l Iow".
Musisz wiedzieć, że wszystkie zmiany w wyszukiwarkach wymagają czasu i co za tym idzie, efekty Twojej pracy mogą być widoczne dopiero po kilku tygodniach, a w szcze gólnych przypadkach nawet po kilku miesiącach.
Tworzenie stron WWW w praktyce
336
Rysunek 11.6. Zadbaj o wzajemne pow iązania poszczególnych stron
►seria
Po prostu Hero 7 Strona domowa książki ISBN: 83-246-0001 -9 Format: B5. stron: 280 Data wydania: 02/2006
Cena książki: 34.90 zł
O
S B
B
mmmm
W ciągu ostatnich 10 lat flagowa aplikacja firmy Nero AG - Nero B u rn in g ROM zyskała św ia tow ą popularność i miano najlepszego oprogramowania do nagrywania płyt CD i DVD. Jej najnowsza edycja - N e ro 7 P re m iu m to uniwersalny pakiet multimedialny do obsługi pików audio, foto, wideo oraz oglądania telewizji. Zawiera absolutną now ość - H e ro H om e - rozbudowany program łączący funkcjonalność peceta i telewizora, umożliwiający użytkownikowi zarządzanie plikami multimedialnymi przechowywanym i na twardym dysku nawet przy użyciu zwykłego pilota Pakiet wyposażono w wiele nowych narzędzi i funkcji, a te, które były znane z poprzednich wersji, zostały rozbudowane i udoskonalone Książka Po p ro s tu Nero 7 to bardzo dobrze opracowany przewodnie. W czasie lektury poznasz wszystkie tajemnice tytułowego produktu Nauczysz się instalować i konfigurować składniki pakietu N e ro 7, nagrywać płyty CD, VideoCD i DVD, odtwarzać pliki multimedialne, testować napędy i projektować okładki płyt Każde zagadnienie przedstawione jest w postaci bogato ilustrowanych sekwencji czynności, co bardzo ułatwia zrozumienie prezentowanych treści. ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦
Instalacja pakietu i nakładki polonizującej Uruchamianie aplikaqi z poziomu Nero StartSmart Nagrywanie płyt za pomocą Nero Express Konfiguracja programu Nero Burning ROM Nagrywanie płyt hybrydowych Przygotowywanie płyt ze zdjęciami Nagrywanie płyt DVD i VideoCD za pomocą Nero Vision Kopiowanie płyt CD i DVD Projektowanie okładek płyt Obróbka plików multimediakiych
Poznaj najpopularniejszy pakiet aplikacjij p archiwizowania danych.
:ących do zapisywania i
Inn e k s ią ż k i o N ero ♦ ♦ ♦ ♦
Nero 7 Nagrywanie iDVD. Ćwiczenia praktyczne Nero 6 Nagrywanie płyt CD i DVD Ćwiczenia praktyczne Nero Burning ROM Nagrywanie płyt CD Ćwiczenia praktyczne Po prostu Nero 6
Kontrola stopnia indeksacji witryny jest możliwa za pomocą specjalnych poleceń, które możemy wpisać w okno wyszukiwarki. Na przykład w przypadku najpopular niejszej sieciowej wyszukiwarki — Google, polecenie ma następującą postać: s ite :http://danow ski.pl
Bezpośrednio po poleceniu s ite : podajemy adres strony, która ma zostać sprawdzo na. Rysunek 11.7 przedstawia przykładowe wyniki dla mojej strony domowej. W chwili wykonywania testu liczba zindeksowanych stron w bazie Google wynosiła 9440. Pamiętaj o tym, że wyniki dla zapytania s ite : nigdy nie pokazują stu procent stanu faktycznego i każdego dnia m ogą być inne — to normalne.
Zdobywanie pozycji Skoro kod strony został poprawiony a konstrukcja poszczególnych podstron zopty malizowana tak, by poprawnie była analizowana i indeksowana przez roboty wyszu kiwarek, możemy zająć się zdobywaniem pozycji.
1 Rezultaty od 1 -10 z około 9,440 z danowski.pl | włączonym (Znaleziono w 0.20 sek )
Bartosz Danowski - 10odwiedzin -12 bo Strona autora książek i artykułów o tematyce informatycznej. Biografia, publikacje, opinie czytelników danowski pP • 22k -17 Lip 2007 - Kopia - Podobne strony - Zanotuj
Kuba Danowski Home Home Login Kuba Oanowski. Internetowa galeria Album list Last uploads Last comments Most viewed Top rated My Favontes Search ... kuba danowski pu - S4k - Kopia - Podobne strony - Zanotuj
Bartosz Danowski 2 odwiedzin - is Mar Tym razem na szybko i typowo informacyjnie W sobotę i niedzielę (30.06-01.07) odbędzie się I ogólnopolska Noc pozycjonerow.... danowski pWeed/ - 30k - Konwi - Podobne strony - fonohn Porady » Bartosz Danowski Kategone Aktualności Ciekawe programy Mozills - Nero Nie na temat Ogłoszenia Porady Pozycjonowanie stron Pręgierz Strony WWW i internet... danowski.pl/pwady - 15k - Konia - Podobne stropy - Ząnotyi Kontakt » Bartosz Danowski Opinie czytelników Komputer PC Ćwiczenia praktyczne Wydanie II Zdecydowałam się do Ciebie napisać ponieważ bardzo spodobała mi się konwencja książki ... danowakLpl/kontaMr - l i k - Kąp« - Podobne.strony - Zanotui
Artykuły » Bartosz Danowski Opinie czytelników Montaż komputera PC Ilustrowany przewodnik. Chciałem panu serdecznie podziękować za lo co pan robi tzn wydaje książki i poradniki o ... danowski pł/kategone/artykuly/ - 22k - Kwia -
Bartosz Danowski Kategone. Aktualności Ciekawe programy Mozilla - Nero - Nie na temat Ogłoszenia Porady Pozycjonowanie stron Pręgierz Strony WWW i internet ... danowski.fi/page/12/ - 24k - Konta - Podobna strony - Zanotuj
Mapa strony » Bartosz Danowski Opinie czytelników ABC sam składam komputer Bardzo dziękuję za książkę pt. "ABC sam składam komputer". Dzięki tej pozycji mogłem samodzielnie przygotować ... oanowski.pl/mapa-strony/ - 34k - Koga • Podobne strony - Zanotuj
Aktualności» Bartosz Danowski Kategorie Aktualności Ciekawe programy Mozilla Nero Nie na temat Ogłoszenia Porady Pozycjonowanie stron Pręgierz Strony WWW i internet... danowski pl/kaiegone/akiualnosc»/ - 20k - Koena - Podobne strony - Zanotuj
stmna
G o o o o o o o o o o g i e ► 1 2 3 4 5 6 7 8 9 10 N a s te o n a
j
site danowski pl
Szukai w wynikach 1Narzędzia iezvkowe 1Wskazówki wyszukiwania
Ze względu na poglądowy charakter tego opisu skupię się tutaj wyłącznie na wyszu kiwarce Google. Pamiętaj jednak, że konkurencja stara się naśladować lidera rynku, więc żadna z opisanych poniżej metod Ci nie zaszkodzi, a może jedynie pomóc. Pod pojęciem zdobywania pozycji rozumiem to, że dla konkretnego zapytania zada nego wyszukiwarce zwróci ona adres Twojej witryny na możliwie najwyższym miejscu. Osobiście uważam, że zadowalającym rezultatem jest pierwsza podstrona wyników. Ostatnie miesiące pokazują, że do zdobycia wysokiej lokaty w wynikach wyszukiwania wystarczy odpowiednia liczba odsyłaczy prowadzących do strony z innych witryn. Odnośniki takie m uszą mieć następującą postać: NeroKsiążka Nero
