Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: [email protected]PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ IDZ DO IDZ DO ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG KATALOG KSI¥¯EK KATALOG KSI¥¯EK TWÓJ KOSZYK TWÓJ KOSZYK CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE O NOWOCIACH ZAMÓW INFORMACJE O NOWOCIACH ZAMÓW CENNIK ZAMÓW CENNI K CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE SPIS TRECI SPIS TRECI DODAJ DO KOSZYKA DODAJ DO KOSZYKA KATALOG ONLINE KATALOG ONLINE Projektowanie stron WWW. Jak to zrobiæ? Autorzy: Robin Williams, John Tollet T³umaczenie: S³awomir Dzieniszewski (rozdz. 1 - 8), £ukasz Ko³odziej (rozdz. 9), Sebastian Marek (rozdz. 10 - 13, dod. A) ISBN: 83-7361-234-3 Tytu³ orygina³u: The Non-Designer's Web Book, 2nd Edition Format: B5, stron: 300 Gdyby tworzenie stron internetowych by³o zarezerwowane jedynie dla profesjonalistów, internet wieci³by pustkami. Ka¿dy, równie¿ Ty, mo¿e spróbowaæ swoich si³ w projektowaniu stron. Byæ mo¿e Twoja witryna bêdzie niezbyt skomplikowana i mniej rozbudowana, ni¿ strony tworzone przez zawodowców, ale to nie znaczy, ¿e musi byæ nieatrakcyjna i niefunkcjonalna. W ksi¹¿ce „Projektowanie stron WWW. Jak to zrobiæ?” Robin Williams przekazuje amatorom tworzenia stron internetowych ca³¹ wiedzê, niezbêdn¹ by zaistnieæ w sieci. Nie jest to podrêcznik HTML-a jakich wiele: znajdziesz tu komplet informacji potrzebnych do stworzenia strony, której nie bêdziesz musia³ siê wstydziæ, a wiêc tak¿e wskazówki dotycz¹ce tworzenia uk³adu strony, grafiki, umieszczania strony na serwerze i jej promocji. A wszystko to podane przystêpnie i prosto. Dziêki ksi¹¿ce dowiesz siê: • Jak korzystaæ z mo¿liwoci internetu i wyszukiwaæ w nim informacje • Gdzie szukaæ miejsca, w którym umieciæ witrynê • Czym ró¿ni¹ siê publikacje internetowe od klasycznych drukowanych • Jakie s¹ podstawowe zasady projektowania, które musz¹ znaæ nawet pocz¹tkuj¹cy • Na czym polega projektowanie systemu nawigacji po stronach internetowych • Jak tworzyæ grafikê na potrzeby stron WWW • Jak w³aciwie dobraæ krój pisma • Jakie sztuczki mo¿esz zastosowaæ, by uatrakcyjniæ stronê • Jak przes³aæ swoj¹ stronê na serwer • Jakie s¹ metody promocji gotowej witryny WWW Wieloletnie dowiadczenie Robin Williams i jej wyj¹tkowy styl, trafiaj¹cy w potrzeby osób bez specjalistycznego przygotowania sprawi, ¿e nauka projektowania stron stanie siê satysfakcjonuj¹c¹ przygod¹. Jeli dopiero rozpoczynasz zabawê z tworzeniem stron internetowych — zacznij odtej ksi¹¿ki.
Gdyby tworzenie stron internetowych było zarezerwowane jedynie dla profesjonalistów, internet świeciłby pustkami. Każdy, również Ty, może spróbować swoich sił w projektowaniu stron. Być może Twoja witryna będzie niezbyt skomplikowana i mniej rozbudowana, niż strony tworzone przez zawodowców, ale to nie znaczy, że musi być nieatrakcyjna i niefunkcjonalna.
W książce "Projektowanie stron WWW. Jak to zrobić?" Robin Williams przekazuje amatorom tworzenia stron internetowych całą wiedzę, niezbędną by zaistnieć w sieci. Nie jest to podręcznik HTML-a jakich wiele: znajdziesz tu komplet informacji potrzebnych do stworzenia strony, której nie będziesz musiał się wstydzić, a więc także wskazówki dotyczące tworzenia układu strony, grafiki, umieszczania strony na serwerze i jej promocji. A wszystko to podane przystępnie i prosto.
Dzięki książce dowiesz się:
* Jak korzystać z możliwości internetu i wyszukiwać w nim informacje * Gdzie szukać miejsca, w którym umieścić witrynę * Czym różnią się publikacje internetowe od klasycznych drukowanych * Jakie są podstawowe zasady projektowania, które muszą znać nawet początkujący * Na czym polega projektowanie systemu nawigacji po stronach internetowych * Jak tworzyć grafikę na potrzeby stron WWW * Jak właściwie dobrać krój pisma * Jakie sztuczki możesz zastosować, by uatrakcyjnić stronę * Jak przesłać swoją stronę na serwer * Jakie są metody promocji gotowej witryny WWW
Wieloletnie doświadczenie Robin Williams i jej wyjątkowy styl, trafiający w potrzeby osób bez specjalistycznego przygotowania sprawi, że nauka projektowania stron stanie się satysfakcjonującą przygodą.
Jeśli dopiero rozpoczynasz zabawę z tworzeniem stron internetowych -- zacznij od tej książki.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Ta bezprzewodowa skrzynka grająca nie ma żadnej wyobrażalnej wartości handlowej. Kto będzie chciał płacić za przesyłanie wiadomości do nieznanego odbiorcy?
Wspólnicy Dawida Sarnoffa w odpowiedzi na jego usilne prośby o zainwestowanie w radio, rok 1920
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 264
Zanim udostępnisz stronę całemu światu, musisz jeszcze sprawdzić, czy działa poprawnie.Zapewniamy cię, iż wyjątkiem jest strona, która po przesłaniu na serwer wygląda ide-alnie. W tym rozdziale powiemy o oprogramowaniu wspomagającym zarządzanie wit-rynami internetowymi, które pomoże zapanować nad poszczególnymi częściami witry-ny. Poprowadzimy cię także przez proces testowania strony oraz poprawiania prostychbłędów. Mimo iż jest to najbardziej frustrujący etap procesu tworzenia witryny WWW,nie można sobie pozwolić na jego pominięcie.
14Przetestuji popraw witrynę
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 265
Oprogramowanie wspomagającezarządzanie witrynami internetowymiW całej książce staraliśmy się przewidzieć sytuacje, w jakich możesz popełnić błędy.Pamiętaj, aby umieszczać pliki graficzne w odpowiednim folderze, zanim zostaną wyko-rzystane na stronie. Nie przenoś plików do innych folderów ani nie zmieniaj ich nazw popołączeniu ze stroną. Jeżeli zastosujesz się do naszych zaleceń, nie będziesz musiał póź-niej poprawiać łączy do stron i plików graficznych. Zaoszczędzisz tym samym wiele cza-su. Załóżmy, że zapisałeś ilustrację w pliku home.gif oraz że wykorzystujesz ją na każdejstronie WWW. Jeżeli przeniesiesz ten plik do innego folderu albo zmienisz jego nazwęna gohome.gif, będziesz musiał zmienić nazwę tego pliku na każdej stronie, na której onwystępuje. Nie stanowi to wielkiego problemu w przypadku, gdy witryna składa się z pię-ciu stron. Jeżeli jednak pracujesz nad witryną składającą się z 30, 150 lub 600 stron,wykonanie takiej zmiany jest już większym problemem. Podobna sytuacja wystąpi wte-dy, gdy planujesz stworzenie witryny składającej się tylko z pięciu stron, ale w miaręupływu czasu rozrasta się ona do 120 stron i w związku z tym wymaga reorganizacji,stworzenia folderów dla nowych sekcji itd. Ręczne wprowadzanie takich zmian jest bar-dzo czasochłonne i nudne. W takich przypadkach zastosowanie znajduje oprogramowaniewspomagające zarządzanie witrynami WWW.
Oprogramowanie to, jak sama nazwa wskazuje, pomaga w zarządzaniu witryną, którątworzysz. Dobry program potrafi przeszukać wszystkie strony witryny i poinformowaćo znalezionych błędach. Możesz zmienić nazwę pliku, a program poprawi za ciebie błędyzwiązane z nieprawidłową budową łącza. Poinformuje cię także o tym, które ilustracjenie znajdują się tam, gdzie powinny.
Wiele programów wspomagających tworzenie witryn internetowych posiada narzędziado zarządzania witrynami. Dreamweaver może dołączyć do serwisu pliki graficzne, któ-re na początku znajdowały się w innym folderze. Microsoft FrontPage posiada kilka przy-datnych opcji we wbudowanym narzędziu, zwanym FrontPage Explorer. Adobe GoLiveposiada potężne narzędzia do zarządzania całą witryną WWW i sprawowania nad niąkontroli.
BBEdit jest najpopularniejszym edytorem HTML dla komputerów Macintosh, dostar-czanym razem z Dreamweaverem. Luckman’s WebEdit Pro i Sausage Software’s HotDog Proto popularne edytory HTML dla systemu operacyjnego Windows. Wielu użytkowni-ków wykorzystuje je do tworzenia nieskomplikowanych witryn. Za ich pomocą możnaprzeszukać cały folder witryny i zamienić tekst jednocześnie w wielu plikach, włączającw to łącza. Ale takie oprogramowanie nie podpowie, jakie błędy wkradły się na stronę.BBEdit można pobrać z witryny www.barebones.com, HotDog Pro z witryny www.sausa-ge.com, natomiast WebEdit Pro znajduje się na wielu witrynach internetowych. Wystarczyskorzystać z popularnych wyszukiwarek, aby go odszukać.
266 P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 266
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę 267
MacromediaDreamweaver, jakwiększość programówwspomagającychzarządzanie witrynamiWWW, bez problemuradzi sobiez otwieraniem stronWWW stworzonych
w innychprogramach tegotypu. Posiadarównieżmechanizmy,które pozwalająkilku projektantomna jednoczesnąpracę nad tą samąwitryną.
Adobe GoLive posiada narzędzia, którepomagają w zarządzaniu istniejącymijuż witrynami. Może też zostaćwykorzystany do projektowanianowych witryn za pomocą tzw. strontymczasowych (placeholder pages).
Jeżeli korzystasz z programuMicrosoft FrontPage, zwróć
uwagę na wbudowanegow niego FrontPage Explorera,który pomaga w zarządzaniu
serwisem.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 267
Testowanie witrynyWażne jest, aby przed umieszczeniem witryny na serwerze, przetestować ją i zobaczyć,jak działa. Upewnij się, że:
■ wszystkie ilustracje znajdują się w odpowiednich folderach i pokazują się na stronie,
■ wszystkie łącza działają,
■ nie ma żadnych problemów z formatowaniem oraz rozmieszczeniem tekstu na stronie.
Witryna powinna zostać przetestowana w różnych przeglądarkach oraz na różnych plat-formach (przynajmniej Linux oraz Windows), przy użyciu różnych monitorów z różnymiustawieniami, z wyłączonym wyświetlaniem grafiki oraz przy odmiennych ustawie-niach rodzaju i rozmiaru domyślnej czcionki. Różnorodność środowisk, w jakich możnaoglądać witrynę, sprawia, że projektowanie witryn WWW jest jednocześnie zabawnei frustrujące. Jeżeli weźmiesz to wszystko pod uwagę, zwiększysz szanse na to, że zapro-jektowana przez ciebie witryna będzie wyglądała tak, jak tego oczekujesz.
Jeżeli projektujesz małą witrynę, na której nie spodziewasz się dużego ruchu, nie ma sen-su testować jej przy tak wielu różnych parametrach. Ale jeżeli tworzysz witrynę dla fir-my, w wielu wersjach językowych lub o dużym znaczeniu kulturalnym, lepiej przetes-tuj ją dokładnie.
Najpierw przenieś swój folderNajlepszym sposobem na przetestowanie strony jest przeniesienie całego folderu, w któ-rym znajduje się witryna, do innego folderu na twardym dysku. Otwórz stronę głównąi podążaj za wszystkimi znajdującymi się na niej łączami, aby sprawdzić, czy wszystkiedziałają poprawnie. Jeżeli umieściłeś na stronie element, który wcześniej znajdował sięw innym folderze, test ten pozwoli ci wykryć błąd związany z brakiem pliku (np. ilus-tracja na stronie nie pojawi się). W takim przypadku, przed poprawieniem łącza na stro-nie, spróbuj najpierw odszukać brakujący plik i umieścić go w odpo-
wiednim folderze witryny.
Test w przeglądarce w trybie offlineTworząc witrynę, na bieżąco sprawdzaj, jak strony prezentują się w przeglądarce. Uniknieszwtedy przykrych niespodzianek.
1. Na komputerze klasy Mac stwórz alias do twojej przeglądarki, a na komputerzeklasy PC — skrót.
2. Umieść alias lub skrót w widocznym miejscu na Pulpicie.
3. Nie łącz się z internetem (oczywiście możesz to zrobić, jednak nie jest topotrzebne do przeprowadzenia testu).
4. Przeciągnij ikonę strony, którą chcesz przetestować, i upuść ją na alias lub skrótprzeglądarki. Uruchomi się przeglądarka, która automatycznie wyświetli tęstronę bez próby połączenia się z internetem.
5. Wyświetlona przez przeglądarkę strona będzie prawdopodobnie wyglądać trochęinaczej niż w programie do tworzenia witryn WWW. Jeżeli zauważysz błędy na
268 P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 268
stronie, otwórz ją w tym programie. Jeśli twój monitor jest dostatecznie duży,umieść ją sąsiadująco w pionie obok strony wyświetlonej w przeglądarce.
Popraw błędy na stronie, wykorzystując do tego program do tworzenia witrynWWW.
Zapisz stronę. Ta czynność jest bardzo istotna. Nie zauważysz zmianw przeglądarce, dopóki nie zapiszesz strony.
W przeglądarce kliknij przycisk Reload (Załaduj) lub Refresh (Odśwież) albowybierz Reload lub Refresh z menu View (Widok). Zobaczysz wtedy, jakie zmianyzostały wprowadzone na stronie. Jeżeli na stronie nic się nie zmieniło,prawdopodobnie zapomniałeś o zapisaniu zmian w programie do tworzeniawitryn WWW.
6. Zanim prześlesz witrynę na serwer, sprawdź łącza do zewnętrznych stronWWW. Większość programów pozwala określić, w jakiej przeglądarce takiestrony powinny się otwierać — odszukaj odpowiednie ustawienie w opcjachprogramu i wybierz przeglądarkę. Połącz się z internetem i sprawdź, czyzewnętrzne łącza działają poprawnie. Połączenie z internetem w żaden sposób niewpływa na witrynę ładowaną z lokalnego dysku twardego. Ciągle możeszotwierać te strony w przeglądarce. Po dokonaniu zmian na stronie wystarczy jątylko przeładować w przeglądarce.
Obserwuj innych, jak przeglądają twoją witrynęNie mów nic, tylko obserwuj innych podczas przeglądania twojej witryny. Bez żadnegowyjaśniania, przepraszania, wskazywania na pomocne opcje czy mówienia, w któremiejsca należy się udać. Obserwuj, jak poruszają się po witrynie, w których miejscachutkną, gdzie spędzają najwięcej czasu, co pomijają, co działa, a co nie działa. Następnieweź długopis i rób notatki — zapisuj, co trzeba poprawić. Na koniec zapytaj użytkow-ników, o czym myśleli podczas przeglądania witryny. Nic nie mów, tylko słuchaj. Dokonajwszelkich koniecznych poprawek i usprawnień.
Różne przeglądarki dla różnych ludziNawet najprostsza strona będzie wyglądała trochę inaczej w różnych przeglądarkach, nakomputerze klasy Mac lub PC, przy innych ustawieniach rozdzielczości monitora czy teżz innym rodzajem lub rozmiarem czcionki. Spodziewaj się różnic — musisz tylko zad-bać o to, aby strona w innej przeglądarce nie wyglądała brzydko.
Najbardziej polecaną przeglądarką jest Netscape. Microsoft Internet Explorer, jak wszystkieinne programy firmy Microsoft, nie zawsze trzyma się obowiązujących standardów.Dzięki Billowi Gatesowi projektowanie stron internetowych jest bardziej skomplikowa-ne, niż mogłoby być (opinia Robin). Dostosowywanie stron do Internet Explorera możebyć bardzo drażniące.
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę 269
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 269
PoprawkiPrzeglądanie stron w przeglądarce może ujawnić szczegóły, które cię zaskoczą. A to spac-je są tam, gdzie nie powinny, wers kończy się w innym miejscu, przestrzeń wokół ilus-tracji nie jest taka, jak chciałeś, elementy na stronie układają się inaczej, tabele wyglądajązabawnie. I ty myślałeś, że to koniec pracy?
■ Problemy ze znakiem spacji. Pamiętaj, że przeglądarka nie wyświetla dodatkowychznaków spacji, utworzonych za pomocą klawisza spacji — wyświetlany jest tyl-ko jeden znak spacji między wyrazami. Często akapit wygląda inaczej, niż się tegospodziewasz (zwłaszcza przed lub za ilustracją). Sztuczka z zamalowanymi krop-kami lub przeźroczystym GIF-em pomoże ci uzyskać odpowiednią przestrzeń tam,gdzie tego potrzebujesz, na przykład wokół ilustracji (patrz: strony 258. i 271).
■ Porozjeżdżane tabele. Musisz wrócić do programu wspomagającego tworzenie wit-ryn WWW i upewnić się, że całej tabeli, jak i jej każdej komórce, przypisałeś odpo-wiedni rozmiar. Sprawdź, czy każda komórka jest prawidłowo wyrównana, zarów-no w pionie, jak i w poziomie. Nie zapomnij o obramowaniu oraz odstępach międzykomórkami. W starszych przeglądarkach nie są widoczne kolory poszczególnychkomórek. Twój program może także wyświetlić większą przestrzeń między komór-kami, niż będzie to widoczne w przeglądarce.
■ Nie pokazują się ilustracje. Gdy nie pojawi się żadna ilustracja, najpierw sprawdź,czy nie zostało wyłączone pokazywanie grafiki w przeglądarce. Jeżeli opcja ta jestwłączona, prawdopodobnie przeniosłeś lub zmieniłeś nazwę pliku po umieszcze-niu obrazka na stronie. Powróć do programu i upewnij się, że plik znajduje sięw odpowiednim folderze — albo w tym samym, co reszta stron, albo przynajmniejw folderze z ilustracjami, znajdującym się wewnątrz folderu witryny. W przy-padku, gdy ilustracja została przeniesiona albo gdy zmieniona została nazwa jejpliku, najpierw usuń ją ze strony, a następnie wstaw w to miejsce tę, która znaj-duje się w folderze witryny. Nawet jeżeli program potrafi naprawić błąd związanyz łączem, to i tak musisz umieścić tę ilustrację w folderze z witryną przed przesła-niem jej na serwer.
■ Nie działają łącza. Jeżeli zmieniłeś nazwę strony lub przeniosłeś ją w inne miejsce jużpo połączeniu jej z witryną, łącze będzie nieprawidłowe. Wróć do programu wspo-magającego tworzenie witryn WWW i utwórz łącze na nowo. Oczywiście najpierwupewnij się, że strona znajduje się w odpowiednim folderze — w tym samym, coreszta stron1.
1 Na stronie 75. znajdują się wskazówki dotyczące edycji kodu HTML w celu poprawy łączydo obrazków i stron internetowych. Oczywiście edycja kodu ma sens tylko wtedy, jeżeliwcześniej upewniłeś się, że obrazek lub strona znajdują się w odpowiednim folderze.
270 P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 270
Inne wskazówkiJednym z największych problemów podczas projektowania witryn internetowych jestpozostawianie wolnej przestrzeni na stronie. Istnieją dwa sposoby rozwiązania tego prob-lemu. Jeden jest bardzo prosty i poręczny, gdy tło strony ma jednolity kolor. Drugi przy-da się w przypadku, gdy kolor tła jest niejednolity.
Tło jednolite. Wstaw kilka kropek lub liter (np. xxx) w miejscu, w którym chcesz uzys-kać trochę przestrzeni, na przykład między ilustracjami lub między łączami. Następnieprzypisz tym znakom taki kolor, jaki ma tło strony (spójrz poniżej).
Tło niejednolite. Stwórz małego, przeźroczystego GIF-a — może być nawet wielkości 1×1piksel. Wykorzystaj do tego celu jakiś program graficzny albo program wspomagającytworzenie witryn internetowych. Taki przeźroczysty GIF może zostać użyty do oddzie-lania słów. Na przykład umieść go między dwoma pierwszymi łączami w linii kilku łączy(tak jak na rysunku poniżej), a następnie rozciągnij do potrzebnych rozmiarów, skopiuji wklej pomiędzy inne łącza. Jeżeli potrzebna ci jest przestrzeń nad albo pod ilustracją,wstaw przeźroczysty obrazek w to miejsce i nadaj mu wymagany rozmiar. Sposób tenmożna również wykorzystać do uzyskania wcięć w akapicie.
Każde tło. Aby uzyskać większą przestrzeń między liniami tekstu, zaznacz znak spacjimiędzy dwoma wyrazami i zwiększ jego rozmiar. Najlepiej do tego celu wykorzystaćznak spacji występujący po kropce lub przecinku. Taka zmiana jest wtedy mniej widocz-na. Ponieważ nie wiadomo, w którym miejscu nastąpi złamanie linii w przeglądarceużytkownika, staraj się zmienić rozmiar znaku spacji parę razy w jednej linii.
1 4 : P R Z E T E S T U J I P O P R A W W I T R Y N Ę 271
StwórzprzeźroczystegoGIF−a.
Umieść tego GIF−amiędzy wyrazami, aby zwiększyć przestrzeńmiędzy nimi.
Aby zwiększyć przestrzeń międzyliniami tekstu, tak jak to pokazanoponiżej, zwiększ rozmiar kilkuznaków spacji w danej linii.
Rozmiar tegoznaku spacjijest większy niżreszty tekstu.Zobacz równieżprzykładprzedstawionyna stronie 235. Użyj przeźroczystego
GIF−a do uzyskania efektuwcięcia tekstu w akapicie.Jeżeli tło strony jest jednolitego koloru, wstaw kilka znaków
przed akapitem i nadaj im taki sam kolor, jaki posiada tło.Staną się one wtedy niewidoczne.
Proj_Stron_WWW_R14.qxd 27-11-03 01:55 Page 271
quiz!Poniżej, po lewej, przedstawiona jest strona, otwarta w programie wspomagającym two-rzenie witryn internetowych. Po prawej — ta sam strona w przeglądarce internetowej.Wskaż pięć różnic między nimi. Które różnice stanowią problem i jak go rozwiązać? Określ,dlaczego pozostałe różnice nie mają znaczenia.
1
2
3
4
5
272 P R O J E K T O W A N I E S T R O N W W W . J A K T O Z R O B I Ć ?