Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00131 008397 11000622 na godz. na dobę w sumie
Tworzenie stron WWW. Nieoficjalny podręcznik - książka
Tworzenie stron WWW. Nieoficjalny podręcznik - książka
Autor: Liczba stron: 568
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0411-1 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Wykorzystaj nieodpłatne narzędzia do tworzenia witryn WWW

Trudno dziś wyobrazić sobie internet bez witryn WWW, stanowiących zapewne najczęściej wykorzystywane zasoby globalnej sieci. Pierwsze strony WWW, powstające na przełomie lat 80. i 90., były wręcz ascetyczne. Ostatnie lata przyniosły dynamiczny rozwój technologii umożliwiających tworzenie witryn internetowych. Współczesne strony internetowe to interaktywne aplikacje wzbogacone o elementy multimedialne. Zagadnień, które należy poznać, by stworzyć funkcjonalną i zgodną ze standardami sieciowymi witrynę internetową, jest coraz więcej, a wolnego czasu niestety coraz mniej. Co więc zrobić, jeśli chcemy zbudować stronę WWW, a brakuje nam czasu lub ochoty na poznawanie wszystkich tajników tej sztuki?

Odpowiedź brzmi: należy sięgnąć po książkę 'Tworzenie stron WWW. Nieoficjalny podręcznik'. Znajdziesz w niej omówienia wszystkich zagadnień związanych z tworzeniem stron internetowych. Nie ma tu zbędnych opisów teoretycznych i niepotrzebnych informacji. Czytając tę książkę, poznasz elementy języków HTML i XHTML oraz nauczysz się odpowiednio je wykorzystywać. Poznasz sposoby wzbogacania strony o animacje Flash i interaktywne formularze oraz dowiesz się, jak zarejestrować stronę w wyszukiwarkach internetowych. Nauczysz się korzystać z języka JavaScript i umieścisz na swojej stronie reklamy kontekstowe Google AdSense.

Przestań być wyłącznie biernym użytkownikiem internetu. Dzięki tej książce możesz zostawić w nim również własny ślad.

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

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TREœCI SPIS TREœCI KATALOG KSI¥¯EK KATALOG KSI¥¯EK KATALOG ONLINE KATALOG ONLINE ZAMÓW DRUKOWANY KATALOG ZAMÓW DRUKOWANY KATALOG TWÓJ KOSZYK TWÓJ KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAMÓW INFORMACJE ZAMÓW INFORMACJE O NOWOœCIACH O NOWOœCIACH ZAMÓW CENNIK ZAMÓW CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥¯EK ONLINE FRAGMENTY KSI¥¯EK ONLINE Wydawnictwo Helion ul. Koœciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Tworzenie stron WWW. Nieoficjalny podrêcznik Autor: Matthew MacDonald T³umaczenie: Wojciech Moch ISBN: 83-246-0411-1 Tytu³ orygina³u: Creating Web Sites: The Missing Manual Format: B5, stron: 568 Wykorzystaj nieodp³atne narzêdzia do tworzenia witryn WWW (cid:129) Poznaj jêzyki HTML i XHTML (cid:129) Wykorzystaj skrypty do uatrakcyjnienia swojej strony WWW (cid:129) Zarejestruj stronê w przegl¹darkach i zarabiaj na niej Trudno dziœ wyobraziæ sobie internet bez witryn WWW, stanowi¹cych zapewne najczêœciej wykorzystywane zasoby globalnej sieci. Pierwsze strony WWW, powstaj¹ce na prze³omie lat 80. i 90., by³y wrêcz ascetyczne. Ostatnie lata przynios³y dynamiczny rozwój technologii umo¿liwiaj¹cych tworzenie witryn internetowych. Wspó³czesne strony internetowe to interaktywne aplikacje wzbogacone o elementy multimedialne. Zagadnieñ, które nale¿y poznaæ, by stworzyæ funkcjonaln¹ i zgodn¹ ze standardami sieciowymi witrynê internetow¹, jest coraz wiêcej, a wolnego czasu niestety coraz mniej. Co wiêc zrobiæ, jeœli chcemy zbudowaæ stronê WWW, a brakuje nam czasu lub ochoty na poznawanie wszystkich tajników tej sztuki? OdpowiedŸ brzmi: nale¿y siêgn¹æ po ksi¹¿kê „Tworzenie stron WWW. Nieoficjalny podrêcznik”. Znajdziesz w niej omówienia wszystkich zagadnieñ zwi¹zanych z tworzeniem stron internetowych. Nie ma tu zbêdnych opisów teoretycznych i niepotrzebnych informacji. Czytaj¹c tê ksi¹¿kê, poznasz elementy jêzyków HTML i XHTML oraz nauczysz siê odpowiednio je wykorzystywaæ. Poznasz sposoby wzbogacania strony o animacje Flash i interaktywne formularze oraz dowiesz siê, jak zarejestrowaæ stronê w wyszukiwarkach internetowych. Nauczysz siê korzystaæ z jêzyka JavaScript i umieœcisz na swojej stronie reklamy kontekstowe Google AdSense. (cid:129) Struktura strony WWW (cid:129) Anatomia adresów URL (cid:129) Wybór i rejestracja domeny internetowej (cid:129) Narzêdzia do tworzenia witryn WWW (cid:129) Stosowanie arkuszy stylów (cid:129) Umieszczanie hiper³¹czy w dokumencie (cid:129) Promowanie witryny WWW (cid:129) Tworzenie efektów specjalnych za pomoc¹ DHTML (cid:129) Budowanie elementów nawigacyjnych (cid:129) Dodawanie do strony elementów multimedialnych (cid:129) Tworzenie bloga Przestañ byæ wy³¹cznie biernym u¿ytkownikiem internetu. Dziêki tej ksi¹¿ce mo¿esz zostawiæ w nim równie¿ w³asny œlad. Spis treści Nieoficjalna czołówka ..........................................................................................7 Wprowadzenie .................................................................................................... 9 Część I Witamy w sieci WWW ........................................................15 Rozdział 1. Przygotować się na sieć .................................................................. 17 Wprowadzenie do WWW ........................................................................... 17 Planowanie witryny WWW ....................................................................... 23 Składniki witryny WWW ........................................................................... 30 Rozdział 2. Tworzenie pierwszej strony .......................................................... 33 Anatomia strony WWW ............................................................................ 34 Znacznik HTML ....................................................................................... 39 Dokument HTML .................................................................................... 44 XHTML .................................................................................................... 58 Rozdział 3. Umieszczanie strony w sieci .......................................................... 63 Jak działa udostępnianie stron WWW ........................................................ 63 Nazwy domen ........................................................................................... 67 Swoje miejsce w internecie ........................................................................ 76 Przenoszenie plików .................................................................................. 87 Rozdział 4. Skuteczne narzędzia ...................................................................... 93 Wybieranie narzędzia ................................................................................ 94 Praca z edytorem HTML ......................................................................... 104 Część II Tworzenie lepszych stron WWW ...................................121 Rozdział 5. Tekstowe znaczniki HTML ........................................................... 123 Tekst i sieć WWW ...................................................................................123 Podstawowe znaczniki tekstowe ..............................................................130 Znaczniki HTML opisujące listy ..............................................................140 Formatowanie wewnątrzwierszowe ..........................................................144 Rozdział 6. Arkusze stylów ..............................................................................151 Podstawowy arkusz stylów .......................................................................152 Czcionki ..................................................................................................172 Rozdział 7. Dodawanie grafiki ........................................................................ 199 Obrazki w sieci WWW .............................................................................199 Obrazy i style ...........................................................................................211 Techniki używania grafiki .......................................................................222 Gdzie znaleźć darmową grafikę ................................................................225 Rozdział 8. Łączenie stron .............................................................................. 229 Znacznik kotwicy ....................................................................................229 Dodawanie zakładek ................................................................................243 Kiedy psują się dobre łącza .......................................................................245 Rozdział 9. Narzędzia układu strony: tabele i style ....................................... 251 Tabele HTML .........................................................................................252 Układanie strony za pomocą stylów .........................................................266 Rozdział 10. Ramki ...........................................................................................279 Problem z powtarzającą się zawartością stron ...........................................279 Podstawy obsługi ramek ..........................................................................282 Tworzenie lepszych stron z ramkami .......................................................290 Część III Komunikowanie się z odwiedzającymi stronę ............ 301 Rozdział 11. Przyciągnie odwiedzających ...................................................... 303 Plan promocji witryny WWW ..................................................................303 Przekazywanie informacji ........................................................................305 Dodawanie znaczników meta ..................................................................311 Katalogi i wyszukiwarki stron ..................................................................315 Odwiedzający ..........................................................................................326 4 S P I S T R E Ś C I Rozdział 12. Umożliwianie użytkownikom komunikowania się z nami (i ze sobą) ......................................................................................................... 329 Przekształcanie witryny w społeczność .................................................... 330 Ułatwianie użytkownikom wysyłania e-maili .......................................... 332 Dodawanie do witryny forów i grup dyskusyjnych ...................................... 341 Rozdział 13. Zarabianie za pomocą swojej witryny ...................................... 353 Zarabianie w sieci WWW ........................................................................ 354 Google AdSense ...................................................................................... 355 Amazon Associates ................................................................................. 372 Narzędzia PayPal .................................................................................... 380 Część IV Upiększanie stron WWW ............................................. 395 Rozdział 14. JavaScript i DHTML: interaktywne strony WWW .................... 397 Poznać język JavaScript ........................................................................... 397 JavaScript ................................................................................................ 400 Dynamiczny HTML ................................................................................ 412 Skrypty dostępne w sieci .......................................................................... 429 Rozdział 15. Wymyślne przyciski i menu ........................................................ 435 Tworzenie wymyślnych przycisków ......................................................... 435 Tworzenie ładnych menu ........................................................................ 451 Rozdział 16. Audio i wideo ...............................................................................461 Czym są multimedia ............................................................................... 462 Odtwarzanie muzyki w tle ....................................................................... 466 Filmy ...................................................................................................... 473 Animacje ................................................................................................ 477 Część V Blogi ................................................................................................ 485 Rozdział 17. Blogi ............................................................................................. 487 Czym są blogi .......................................................................................... 488 Zaczynamy pracę nad blogiem ................................................................. 494 Część VI Dodatki ..........................................................................509 Dodatek A Skrócony podręcznik języka HTML ............................................... 511 Dodatek B Przydatne witryny WWW ............................................................. 535 Skorowidz ........................................................................................................ 545 S P I S T R E Ś C I 5 ROZDZIAŁ rozdziale 2. przygotowaliśmy stronę WWW, wykorzystując przy tym prosty edytor tekstowy i nadwyrężając nerwy. Dokładnie tak zaczynali karierę wszyscy zawodowi twórcy stron WWW. Jeżeli chcemy dobrze poznać język HTML, musimy zacząć prace z nim praktycznie od zera. Później większość autorów stron zaprzestaje używania prostych edytorów albo używa ich co najwyżej do tworzenia najprostszych stron. Wynika to z tego, że ty- powa strona HTML wypełniona jest ogromną ilością drobnych szczegółów. Jeżeli samodzielnie musielibyśmy zapisywać każdy akapit, nowy wiersz albo znacznik formatujący, niemal na pewno w którymś miejscu popełnilibyśmy błąd. Nawet je- żeli uda się nam wpisać wszystko bez błędu, to z samego oglądania nawiasów ostrych nie będziemy w stanie określić ostatecznego wyglądu strony WWW. Problem ten zaczyna narastać, jeżeli zaczniemy bawić się w tworzenie naprawdę złożonych stron WWW zawierających duże ilości grafiki albo takich, w których układ defi- niowany jest za pomocą tabel. Niestety, decyzja o zmianie Notatnika lub TextEdita na bardziej zaawansowane narzędzia może okazać się kosztowna. Profesjonalne narzędzia do tworzenia stron WWW mogą kosztować nawet kilkaset złotych. Dawniej firmy tworzące opro- gramowanie planowały wprowadzenie narzędzi do tworzenia stron WWW do sys- temów operacyjnych takich jak Windows lub Mac OS X. Co więcej, niektóre starsze wersje systemów Windows dostarczane były z okrojoną wersją programu FrontPage, o nazwie FrontPage Express. Dzisiaj nie ma już takich dodatków do systemów, dlatego każdy musi sam znaleźć najlepszy dla siebie edytor stron WWW. Na szczęście w sieci dostępne są też darmowe odpowiedniki komercyjnych narzędzi. W tym rozdziale dowiemy się, jak należy pracować z edytorami HTML. Dokona- my też pewnej oceny prezentowanych edytorów, która ma pomóc w wybraniu pro- gramu najlepiej dopasowanego do naszych wymagań. Przedstawię również niektóre z niedrogich i darmowych edytorów dostępnych w sieci. Jeżeli chodzi o podstawo- wą obsługę stron, większość edytorów WWW jest do siebie zadziwiająco podobna. Oznacza to, że początek prac z wybranym narzędziem — FrontPage’em, Dream- weaverem albo darmowym Nvu — zasadniczo się od siebie nie różni. Wybieranie narzędzia Wybieranie narzędzia Narzędzia, takie jak Notatnik albo TextEdit, na początek są całkiem dobrym roz- wiązaniem. Wymuszają tworzenie prostych konstrukcji i nie modyfikują samo- dzielnie kodu HTML, tak jak mają w zwyczaju robić procesory tekstu. W celu przejrzenia wyników naszej pracy wystarczy kliknąć w przeglądarce przycisk Odśwież. Dlaczego zatem wszyscy mówią, że kiedyś będzie trzeba porzucić ten pro- sty edytorek? · Nikt nie jest doskonały — w edytorze tekstowym popełnienie jakiegoś błędu (na przykład wpisanie znacznika b zamiast /b ) jest tylko kwestią czasu. Niestety, takiego błędu można nie wykryć, nawet przeglądając stronę w prze- glądarce. (Proszę pamiętać, że część przeglądarek samodzielnie koryguje takie błędy, ale inne nie są tak „uprzejme”). Dobry edytor HTML może wytykać nam takie błędy, co pomaga w ich korygowaniu. · Edytuj, zapisz, odśwież. Powtórz 1000 razy — edytory tekstowe są bardzo wygodne do tworzenia prostych stron. Nie są już jednak zbyt komfortowe, je- żeli mamy zamiar odpowiednio wyskalować grafikę albo wyrównać kolumnę tabeli. Można oczywiście cały czas przełączać się między edytorem a przeglą- darką, za każdym razem zapisując plik i odświeżając widok. Taki proces two- rzenia strony może zajmować dosłownie całe godziny. Dobry edytor HTML udostępnia nam narzędzia typu „przeciągnij i upuść” bardzo ułatwiające do- pasowywanie szczegółów wyglądu strony. Wystarczy tylko kilka takich popra- wek, a edytor sam odpowiednio zmodyfikuje kod strony HTML. · Pomocy, tonę w HTML-u! — jedną z najprzyjemniejszych funkcji edytorów HTML jest kolorowanie składni. Dzięki niej możemy mieć pewność, że nawet najdrobniejsze znaczniki HTML będą się wyróżniały z morza kodu strony. Bez tej funkcji w ciągu kilku godzin można dostać oczopląsu! · Wpisz ul li /li /ul — tak oczywiście tworzy się listę wypunkto- waną. Chyba jeszcze nikt o tym nie zapomniał. Niestety, większość autorów stron WWW nie zapamiętuje wszystkich znaczników. Dzięki zastosowaniu edytora WWW nie ma takiej potrzeby. Jeżeli o czymś zapomnimy, najczęściej można skorzystać z pomocy albo odpowiedniej pozycji menu, która wpro- wadzi właściwe znaczniki. Bez tak pomocnego narzędzia musimy polegać na swojej pamięci. Oczywiście używanie graficznego edytora HTML pociąga za sobą pewne ryzyko. To właśnie dlatego nasze prace rozpoczęliśmy od najprostszych edytorów i dlatego w większej części tej książki będziemy poznawać tajniki języka HTML. Jeżeli nie będziemy dostatecznie dobrze znali funkcjonowania tego języka, w czasie tworze- nia stron co chwilę będziemy wpadali w różne pułapki. Na przykład w graficznym edytorze możemy próbować zastosować w tekście jakąś wymyślną czcionkę. Jakież będzie nasze zaskoczenie, gdy oglądając stronę na in- nym komputerze, na którym nie zainstalowano tej czcionki, stwierdzimy, że na stronie zastosowana została brzydka i zupełnie niepasująca do niej czcionka (wię- cej informacji na ten temat podawać będę w rozdziale 6.). Podobnie taki edytor może samodzielnie wprowadzać do kodu HTML elementy, które nie są obsługiwane 94 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W przez niektóre przeglądarki albo grafikę niewyświetlającą się właściwie na wszyst- kich komputerach. Poza tym nawet najlepszy edytor HTML nie zwolni nas z obo- wiązku przeglądania kodu HTML i korygowania drobnych nieścisłości lub wkleja- nia elementów kodu z innych stron. Wybieranie narzędzia Typy edytorów HTML Dostępnych jest wiele różnych edytorów HTML, ale wszystkie można zaszere- gować do jednej z trzech kategorii: · Tekstowe — takie edytory zmuszają nas do pracy bezpośrednio z kodem źró- dłowym stron HTML. Podstawową różnicą między zwyczajnym edytorem tek- stowym a tekstowym edytorem HTML jest wygoda pracy. W takich edytorach najczęściej znajdziemy specjalne przyciski pozwalające na szybkie wstawie- nie znaczników lub kombinacji znaczników, a także na zapisanie dokumentu i otwarcie go w przeglądarce za pomocą jednego kliknięcia. W skrócie można powiedzieć, że tekstowe edytory HTML są zwyczajnymi edytorami uzupeł- nionymi o pewne funkcje wspomagające edycję dokumentów HTML. · Z podzielonym oknem — takie edytory również pozwalają na ręczne edyto- wanie kodu HTML. Różnica polega na tym, że w osobnym oknie wyświetlają one wyniki naszej pracy, które można obserwować jednocześnie z tworze- niem kodu. Innymi słowy, możemy „na żywo” oglądać tworzoną stronę, dzięki czemu nie musimy przerywać pracy, aby zobaczyć jej wyniki. · WYSIWYG (What You See Is What You Get — dostajesz to, co widzisz) — ta- kie edytory są już bardzo podobne do procesorów tekstu. Oznacza to, że nie musimy w nich samodzielnie wpisywać znaczników HTML. Wystarczy, że w oknie edytora wpiszemy jakiś tekst, sformatujemy go i wstawimy rysunki, tak jak robilibyśmy to w jakimkolwiek procesorze tekstu. Edytor HTML wyge- neruje za nas odpowiedni zbiór znaczników HTML tworzących dokument. Każdy z tych typów edytorów HTML doskonale zastąpi najprostszy edytor tekstu. Wybrany przez nas rodzaj edytora zależy głównie od tego, jakich funkcji wyma- gamy od nowego narzędzia, jaki styl pracy będzie dla nas wygodniejszy i ile pie- niędzy chcemy przeznaczyć na taki program. Najlepsze edytory zaczynają zacierać różnice między opisanymi typami, ponieważ pozwalają dowolnie zmieniać wi- dok dokumentu. Ważne jest też, żeby niezależnie od stosowanego rodzaju edytora HTML znać choćby podstawy języka. Bez tego nigdy nie uzyskamy zaplanowanych efektów. Nawet w edytorze WYSIWYG konieczne jest ręczne wprowadzanie delikatnych poprawek do kodu strony. Poza tym znajomość działania języka HTML pozwoli od razu stwierdzić, co możemy zrobić, a czego nam nie wolno, i jakich strategii należy użyć w celu uzyskania najlepszych efektów na stronie. Nawet w edytorze WYSIWYG będziemy musieli przeglądać kod HTML tworzonych stron. R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 95 Wybieranie narzędzia Jak znaleźć darmowy edytor HTML Jeżeli nie masz tyle szczęścia i nie posiadasz jeszcze najbardziej zaawansowanego edytora stron WWW, takiego jak FrontPage lub Dreamweaver, to zapewne za- stanawiasz się teraz, skąd wytrzasnąć jakiś niedrogi, ale dobry edytor HTML. W końcu w sieci prawie wszystko można dostać z darmo! Co prawda, nie uda się za darmo zdobyć tak zaawansowanych narzędzi jak FrontPage, ale całkiem niezły edytor można pobrać nawet bez otwierania portfela. Uwaga: Jak zapewne wszyscy wiedzą, programy typu Shareware można pobrać z sieci, za darmo wypróbować ich działanie, a nawet wysłać znajomym. Jeżeli program nam się spodoba, to jego au- tor zawsze grzecznie prosi o zapłatę za korzystanie z efektów jego pracy (a po zakończeniu okresu próbnego już nie tak grzecznie zablokuje możliwość uruchomienia programu). Oprogramowanie typu Freeware nie kosztuje nic. Jeżeli jakiś program tego typu się nam podoba, możemy z niego korzy- stać bez żadnych opłat. Niestety, najczęściej nie uzyskamy do takich programów żadnego wsparcia technicznego. Autorzy niektórych programów freeware proszą ich użytkowników o jakieś wsparcie. C Z Ę S T O Z A D A W A N E P Y T A N I A Zapisz jako HTML Procesor tekstu i arkusz kalkulacyjny udostępniają moż- liwość zapisania dokumentu jako strony WWW. Czy można używać tej opcji? odstępy wokół niego. W dokumentach tych nie ma też żadnych łączy, a poza tym stosowane są w nich całko- wicie inne układy niż na stronach WWW. W ciągu ostatniej dekady internet stał się jednym z naj- ważniejszych elementów działań marketingowych. Nie- mal każdy dostępny program w ten czy w inny sposób uzupełniany jest o różne funkcje obsługi sieci WWW. Na przykład niemal wszystkie procesory tekstu wyposa- żane są już w możliwość eksportowania dokumentów do formatu HTML. Nie należy jednak z niej korzystać. Niestety, takie funkcje eksportu do HTML-a nie dzia- łają najlepiej. Najczęściej problemy wynikają z tego, że dokumenty przygotowywane dla jednego nośnika (zwy- kle do druku) próbuje się „wcisnąć” w całkowicie inne medium (czyli sieć WWW). Dokumenty tworzone przez procesory tekstu po prostu nie przypominają stron WWW, najczęściej mają one znacznie większe margi- nesy i stosowane są w nich wymyślne czcionki, dodat- kowo zawierają znacznie więcej tekstu i stosują większe Zupełnie inną kategorią problemów jest to, że funkcje eksportu do HTML-a tworzą zwykle wyjątkowo skom- plikowaną mieszankę znaczników. W efekcie takiego eks- portu najczęściej otrzymamy stronę WWW, której nie sposób edytować, ponieważ nie pozwala na to dziwacz- ny kod HTML. Dopóki nie „przegryziemy się” przez ten nieczytelny kod HTML, nigdy nie będziemy mieli pewno- ści, czy tak przygotowana strona będzie prawidłowo wyświetlana na innych komputerach i w przeglądarkach. Co z tego wynika? Jeżeli można, należy unikać stoso- wania takich funkcji. Znacznie lepszym wyjściem będzie skopiowanie zawartości dokumentu i wklejenie jej do pliku HTML w postaci czystego tekstu. Dopiero po- tem należy zacząć formatować tekst odpowiednimi znacznikami. Dobrze jest samodzielnie wypróbować różne edytory (to zawsze jest dobry po- mysł), choć zanim znajdziemy swój ulubiony program, zwykle konieczne jest zainstalowanie i wypróbowanie wielu różnych aplikacji. Oto lista witryn WWW udostępniających najróżniejsze programy typu shareware, wśród których są oczy- wiście również edytory HTML (proszę też spojrzeć na rysunek 4.1): 96 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W · http://downloads-zdnet.com — najstarsza firma udostępniająca oprogramo- wanie typu shareware. Jej ogromny katalog z programami dostępny był, jeszcze zanim internet stał się tak popularny. Na podanej witrynie można przeglądać programy poszeregowane w ramach dobrze przemyślanych kategorii, a także zapoznać się z recenzjami poszczególnych programów. Zdecydowanie pole- cam skorzystanie z tej strony. Wybieranie narzędzia Rysunek 4.1. Na górze: strona firmy Z-Net udo- stępnia przebogaty ka- talog oprogramowania. Na początek dobrze jest w oknie wyszukiwania wpisać „HTML editor” i kliknąć przycisk GO. (Jeżeli zainteresowani jesteśmy oprogramo- waniem na komputery Macintosh, to na liście rozwijalnej należałoby wybrać jeszcze pozycję „In Downloads” zamiast domyślnej „In Windows”, a w wyszukiwanej frazie dodać słowo „Mac”). Na dole: w wyświetlonej tabeli dobrze jest kliknąć nagłówek „Downloads”. W ten sposób na po- czątku tabeli pojawią się najpopularniejsze programy. Proszę też sprawdzić rodzaj licencji każdego programu, czy jest to program typu Trialware (działa przez krótki czas po- zwalający na jego wy- próbowanie; w ten spo- sób można przetestować programy Dreamweaver i HomeSite), czy też freeware (takimi są na przykład programy HTML-Kit i CoffeeCup). Na koniec można wy- brać interesujący pro- gram i pobrać go zgodnie z instrukcjami podawanymi na stronie www.download.com — kolejna firma (CNET) udostępniająca najnowsze wer- · sje oprogramowania typu shareware. R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 97 Wybieranie narzędzia www.tucows.com — ta strona zaśmiecona jest, niestety, ogromną ilością re- · klam, ale i na niej znajdziemy solidny zbiór oprogramowania. Bardzo szybko przekonamy się, że w internecie dostępne są setki darmowych edy- torów HTML. Wiele z nich ma bardzo dziwaczne i niewygodne ułożenie przyci- sków i menu. W części z nich szybko znajdziemy poważne błędy, a więc wyszuka- nie najodpowiedniejszego dla nas programu może trochę potrwać. Przedstawiam tutaj kilku kandydatów, którym warto poświęcić trochę czasu: · Nvu — to jeden z nowszych edytorów stron, ale już od początku staje się jed- nym z najlepszych darmowych edytorów kodu HTML. Co więcej, jest jedynym programem działającym w systemach Windows, Mac OS X i Linux. Pozwala na edytowanie dokumentów HTML w trybie WYSIWYG i w trybie tekstowym. · HTML-Kit — to bardzo popularny — choć nieco ekscentryczny — darmowy edytor HTML przeznaczony dla systemów Windows. Pozwala na korzystanie z trybu tekstowego, ale generuje też podgląd edytowanej strony. · CoffeCup Free HTML Editor — jest to ograniczona wersja rozbudowanego edytora dla systemów Windows: CoffeeCup HTML Editor 2005. W pełnej wer- sji programu można edytować dokumenty zarówno w trybie tekstowym, jak i w trybie WYSIWYG, ale w darmowej wersji tryb WYSIWYG został wyłączony. W kolejnych podpunktach tym trzem edytorom przyjrzymy się nieco bliżej. Nvu Edytor Nvu (nazwę wymawia się n-wjiu) jest jedynym darmowym edytorem do- stępnym w wersjach pracujących w systemach Windows, Mac OS X i Linux. Jest też programem będącym na bieżąco z aktualnymi standardami (bardzo często po- jawiają się nowe wersje), a poza tym udostępnia użytkownikom bardzo wygodny interfejs i wiele ciekawych funkcji. Nvu jest względnie nowym programem; jego pierwsze wydanie datuje się na czerwiec 2005 (wcześniej dostępny był jedynie w wersjach beta i testowych). Edytor Nvu przygotowany został na podstawie kawałków kodu pakietu Mozilla (przodek popularnej ostatnio przeglądarki Firefox) i uzupełniony funkcjami sko- piowanymi z edytora FrontPage. Nvu tworzony jest w ramach projektu o otwartym kodzie źródłowym, co oznacza, że możemy nie tylko za darmo pobrać go i uży- wać, ale dowolny programista może też przejrzeć kod programu i wprowadzić do niego różne usprawnienia. Każdy zapalony twórca stron WWW od razu zakocha się w widokach dokumentu udostępnianych przez Nvu. Pozwala on między inny- mi na przeglądanie kolorowanych znaczników dokumentu HTML i udostępnia pełny podgląd dokumentu w trybie WYSIWYG (proszę spojrzeć na rysunek 4.2). Największym ograniczeniem w pracy z edytorem Nvu jest możliwość wyświe- tlania dokumentu w tylko jednym widoku na raz. Oznacza to, że w czasie edycji dokumentu w widoku źródła nie będziemy mieli możliwości natychmiastowego oglądania wyników prac, ale zobaczymy je dopiero po przełączeniu się do wi- doku podglądu. 98 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Wybieranie narzędzia Rysunek 4.2. Na górze: normal- ny widok programu Nvu pozwala edytować tekst formatowany tak jak w zwyczajnym proceso- rze tekstu. Widok ten włączany jest w momencie uruchomienia edytora Nvu i otwarcia dowolne- go pliku. W celu zmiany tego wi- doku na inny należy skorzystać z zakładek znajdujących się w dolnej części okna programu. Na środku: jeżeli musimy samo- dzielnie poprawić znaczniki HTML, wystarczy przełączyć się do wi- doku Źródła. W widoku tym kolo- rowana jest składnia kodu HTML, a wiersze kodu są numerowane. Na dole: potrzebny jest nam wi- dok pośredni? Widok Znaczników HTML pozwala na edytowanie tekstu sformatowanego, a przy okazji wyświetla też znaczniki w postaci małych prostokącików. Dzięki temu w przypadku wykry- cia jakichkolwiek nieprawidłowości można przełączyć się do widoku źródła i szybko je skorygować R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 99 Wybieranie narzędzia Edytor Nvu wyposażony jest w wiele funkcji, które udostępniają też komercyjne programy, takie jak możliwość cofnięcia ostatniej operacji (wystarczy wybrać z me- nu Edycja/Cofnij), sprawdzanie pisowni (Edycja/Sprawdź pisownię), wstawianie znaków specjalnych (Wstaw/Znaki i symbole) i oczywiście przydatna porada dnia. Program można pobrać ze strony www.nvu.com1. Uwaga: Edytor Nvu cały czas zyskuje na popularności, dlatego w tej książce od czasu do czasu podawać będę wskazówki dotyczące jego użytkowania. HTML-Kit Edytor HTML-Kit oferuje użytkownikowi interfejs, który zachwyci chyba tylko programistów. Jest bardzo nietypowy, zawikłany i mocno niezrozumiały. Z drugiej strony, HTML-Kit jest całkowicie darmowy, względnie skuteczny i pozwala na do- pasowywanie się do potrzeb użytkownika. HTML-Kit (www.html-kit.com) pozwala na edytowanie dokumentów z jedno- czesnym podglądem wyników prac. Niestety, taki tryb działania nie jest w tym edytorze dostępny domyślnie. Musimy najpierw nakazać mu wyświetlanie obu widoków dokumentu jednocześnie. Można to zrobić tak: 1. Uruchomić edytor HTML-Kit. Należy wybrać z menu systemowego Programy/HTML-Kit/HTML-Kit. Pojawi się wtedy okno dialogowe otwierania plików, pozwalające też utworzyć nowy dokument. 2. Wybrać opcję Open an existing file i kliknąć przycisk OK. Dopiero wtedy pojawi się typowe systemowe okno otwierania plików. 3. Wyszukać jeden z plików résumé, z jakimi pracowaliśmy w rozdziale 2. (można je też pobrać ze strony Missing CD pod adresem www.missing- manuals.com2), zaznaczyć jeden z nich i kliknąć przycisk OK. W oknie z zakładkami pojawi się kod HTML otwartego dokumentu. Można teraz kliknąć zakładkę Preview, aby zobaczyć graficzną reprezentację doku- mentu. Później można kliknąć zakładkę Editor, aby powrócić do widoku kodu dokumentu. Z zakładki Split View można skorzystać w celu włączenia obu tych widoków jednocześnie. Niestety, często zdarza się, że ta funkcja z nie- wyjaśnionych przyczyn nie działa prawidłowo i zamiast podglądu dokumen- tu zobaczymy tylko pustą stronę. Jeżeli tak się zdarzy, trzeba wykonać ko- lejne kroki. 4. Z menu wybrać pozycję View/Preview/Active Preview Window (można też nacisnąć klawisze Ctrl+F8). Pojawi się wtedy dodatkowe okno z widokiem dokumentu HTML. 1 Strona polskiej wersji edytora to www.aviary.pl/nvu. 2 Pliki można też pobrać z serwera FTP wydawnictwa Helion. 100 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W 5. Z menu wybrać pozycję Window/Tile Horizontally (w ten sposób okna zo- staną ułożone jedno nad drugim) albo Window/Tile Vertically (w ten sposób okna znajdą się obok siebie). Wybieranie narzędzia Okna zostaną ułożone tak, że będziemy mogli wygodnie przeglądać jednocze- śnie kod dokumentu HTML i jego podgląd (proszę spojrzeć na rysunek 4.3). Rysunek 4.3. Edytujemy dokument po lewej stronie, a wyniki prac oglądamy po prawej stronie. Czyż może być coś prostszego? Co jakiś czas edytor HTML-Kit samodzielnie aktualizuje okno podglądu, tak żeby przedstawiało ono ostatnie poprawki. Jeżeli chcemy samodzielnie wy- wołać taką aktualizację, wystarczy nacisnąć klawisze Ctrl+F8. Największą wadą edytora HTML-Kit (oprócz niezwykle barokowego układu pro- gramu) jest brak wygodnych przycisków pozwalających na szybkie wstawianie ty- powych znaczników HTML-a. Jeżeli ktoś lubi używać skrótów klawiaturowych, może przejrzeć całe menu i zapamiętać sposoby szybkiego wstawiania nawiasów ostrych albo przechodzenia z jednego znacznika do innego. Mimo to takie skróty przydają się tylko tym, którzy są w stanie szybko zapamiętać znaczenie tak dziw- nych kombinacji jak Ctrl+ przecinek (polecenie przejścia do poprzedniego znacznika) albo Ctrl+ kropka (przejście do następnego znacznika). Możliwości edytora HTML-Kit można jeszcze rozbudować za pomocą wielu plu- ginów dostępnych na stronie www.html-kit.com, choć ich nazwy (na przykład avwEncodeEmail lub hkMakeOptionsList) czasami mogą trochę odstraszać. Na R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 101 Wybieranie narzędzia stronie WWW na szczęście podawane są opisy pluginów rzucające nieco więcej światła na ich funkcjonowanie. Jeden z ciekawszych dostępny jest pod adresem www.chami.com/html-kit/plugins/info/hkh_w3c_offline. Po jego zainstalowaniu w samym edytorze będziemy mogli uzyskać wyczerpujący opis każdego elemen- tu języka HTML. Wystarczy tylko przenieść kursor nad znacznik w dokumencie i nacisnąć klawisz F1. CoffeeCup CoffeeCup Free HTML Editor jest „okrojoną” wersją edytora CoffeeCup HTML Editor 2005. Charakteryzuje się on wyjątkowo ładnym ułożeniem pozycji menu i przycisków na paskach narzędzi (proszę przyjrzeć się rysunkowi 4.4). Udostęp- nia też listę plików, na której znajdują się wszystkie pliki zapisane w bieżącym katalogu, a także zestaw przycisków przeznaczonych do wstawiania typowych znaczników HTML. Rysunek 4.4. Na górze: najprzyjemniejszą cechą edytora CoffeCup jest możliwość korzystania z przycisków paska na- rzędzi pozwalających na wstawianie typowych znaczników HTML. Na dole: kliknięcie zakład- ki Preview pozwala uzy- skać wygląd przygoto- wywanej strony. Trzeba jednak uważać, żeby nie kliknąć zakładki Visual Editor, ponieważ zare- zerwowana jest ona wy- łącznie dla użytkowników wersji płatnej 102 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Wybieranie narzędzia Oczywiście i ten edytor ma pewne wady. Jeżeli chcemy zobaczyć podgląd doku- mentu HTML, musimy skorzystać z zakładek i przełączyć program z widoku kodu na widok podglądu. Niestety, nie ma szans na wyświetlenie dokumentu w dwóch widokach jednocześnie. Bardzo denerwująca jest też zakładka teoretycz- nie pozwalająca na edycję dokumentu w trybie WYSIWYG, ale niestety wyłączona w darmowej wersji edytora. Jeżeli niechcący klikniemy tę zakładkę, wyświetlone zostanie okno z prośbą o zakupienie pełnej wersji edytora. To wszystko oznacza, że edytor ten pracować może tylko jako tekstowy edytor HTML. To oczywiście bar- dzo przydatny tryb, ale są znacznie przyjemniejsze metody pracy. Edytor CoffeCup Free HTML Editor pobrać można ze strony http://coffeecup.com. Profesjonalne edytory HTML Chyba wszyscy mają już dość zmagania się z niewielkimi edytorami HTML i śro- dowiskami edycyjnymi wyglądającymi tak, jakby zaprojektował je M. C. Escher. Jeżeli zainteresujemy się profesjonalnym pakietem oprogramowania do projekto- wania stron WWW, okaże się, że mamy niewielkie możliwości wyboru. Po prostu dzisiaj istnieją tylko dwa naprawdę zaawansowane edytory stron WWW. · Macromedia Dreamweaver — to ulubiony program grafików komputerowych i najbardziej zaangażowanych twórców stron. Wyposażony jest w multum różnych funkcji i pozwala na dokładną kontrolę nad każdym elementem do- kumentu HTML. · Microsoft FrontPage — to program ze „stajni” Microsoftu. Wystarczy zacząć w nim cokolwiek pisać, a od razu można się przekonać, dlaczego jest to ulu- biony program osób pierwszy raz pracujących nad stronami HTML. Tryb edy- cji WYSIWYG jest tak doskonały, że trudno go odróżnić od zwykłego procesora tekstu. Wszystkie menu, paski narzędzi oraz funkcja automatycznego spraw- dzania pisowni niemal idealnie odwzorowują funkcje znane z procesora Word. Jedną z cech wyróżniających te dwa edytory na tle konkurentów jest ilość róż- nych narzędzi niezbędnych dla początkujących twórców stron WWW. Na przykład programy te pozwalają na tworzenie arkuszy stylów (ta zaawansowana funkcja opisywana będzie w rozdziale 6.), zmienianie wielkości obrazków i przenoszenie ich dowolnie na stronie WWW, a nawet zarządzanie całą witryną WWW. Kolejną zaletą jest niezwykła łatwość użycia obu tych edytorów. Co prawda wypchane są one po brzegi najbardziej zaawansowanymi funkcjami edycyjnymi, ale nie ma prost- szego sposobu edycji prostych dokumentów HTML. W przeszłości Dreamweaver cieszył się reputacją tak skomplikowanego, że aż od- straszał osoby zaczynające dopiero zabawę z językiem HTML. Z drugiej strony, FrontPage miał opinię wyjątkowo prostego w obsłudze edytora, który jednak miał kilka nieprzyjemnych „nawyków”. Na przykład wstawiał do kodu HTML wiele niepotrzebnych znaczników HTML i często stosował na stronach funkcje, które mogły być realizowane tylko za pomocą specjalnych serwerów WWW (więcej in- formacji na ten temat podaję w ramce „Foldery edytora FrontPage”). Najnowsze wersje obu edytorów niemal całkowicie wyeliminowały swe wcześniejsze słabości. R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 103 Praca z edytorem HTML Dzisiaj Dreamweaver jest tak prosty w użyciu jak FrontPage, a FrontPage 2003 jest tak samo dojrzałym edytorem jak Dreamweaver. Co więcej, w typowych pra- cach nad stronami WWW oba programy są niezwykle podobne do siebie. Co z tego wynika? Niezależnie od tego, które narzędzie wybierzemy, na pewno będziemy z niego zadowoleni. Jeżeli ktoś nadal nie jest przekonany, może pobrać 30-dniowe wersje próbne obu edytorów. Darmową próbną wersję edytora FrontPage pobrać można ze strony www.microsoft.com/office/frontpage/prodinfo/trial.mspx, natomiast podobną wersję edytora Dreamweaver ze strony www.macromedia.com/go/trydreamweaver. Uwaga: Dokładniejszy opis funkcji edytora Dreamweaver znaleźć można w książce Dreamweaver MX 2004: The Missing Manual, natomiast równie dokładny opis funkcji edytora FrontPage znajdziemy w książce FrontPage 2003: The Missing Manual. Praca z edytorem HTML Po wybraniu edytora HTML następnym krokiem powinno być poznanie jego funkcjonowania. W tym podrozdziale dowiemy się, jak można szybko przygoto- wać prosty dokument HTML i umieścić go w sieci, a to wszystko za pomocą swo- jego ulubionego edytora HTML. Firmy tworzące oprogramowanie spędziły całe dziesięciolecie na kopiowaniu róż- nych funkcji z konkurencyjnych produktów, w wyniku czego sposoby wykony- wania różnych zadań w edytorach FrontPage, Dreamweaver i Nvu są do siebie bardzo zbliżone. Oznacza to, że niezależnie od wybranego programu informacje z tego podrozdziału na pewno znajdą zastosowanie, przynajmniej w zakresie pod- stawowych operacji. Po zaznajomieniu się z wybranym edytorem będziemy mogli przejść do dalszej części książki i poznać tajniki języka HTML. P R Z Y S P I E S Z A M Y Edytory HTML Jeszcze kilka lat temu na rynku funkcjonowało kilka średniej wielkości edytorów HTML. Dzisiaj większość z nich już nie istnieje. Pozostałe na rynku edytory tej klasy najczęściej nie są warte wydawanych na nie pie- niędzy. Dużo lepszym posunięciem jest zaciśnięcie pa- sa i zakupienie jednego z najbardziej rozbudowanych edytorów HTML — FrontPage’a albo Dreamweavera. Z tej dwójki FrontPage jest zdecydowanie atrakcyjniej- szy cenowo, ale to Dreamweavera używa większość zawodowych twórców stron WWW. Na rynku znaleźć można też akademickie (dla studentów i nauczycieli) wydania obu programów, które są zwykle „okrojone” z części funkcji, ale mają też o wiele niższą cenę. Aby zdobyć taką wersję edytora, najczęściej trzeba udowod- nić, że jest się studentem lub głodującym nauczycielem. Jednym z wartych uwagi średniej wielkości edytorów HTML jest program HomeSuite firmy Macromedia. Jest to zdecydowanie mniej rozbudowany program, który został kupiony od innej firmy w czasie, gdy Macromedia próbowała uzupełnić swoją paletę oprogramowania do tworzenia stron WWW. Edytor HomeSuite wyceniany jest na mniej więcej 100$, przez co można sobie na niego pozwolić znacznie łatwiej niż na FrontPage’a lub Dreamweavera. Czasami warto też rozważyć pozosta- nie przy przyjaznym (i darmowym) edytorze Nvu i do- piero późniejszą przesiadkę na bardziej zaawansowany program. 104 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Wskazówka: Co prawda w kolejnych rozdziałach nie będę podawał szczegółów obsługi edytorów HTML, ale w ramkach i wskazówkach od czasu do czasu prezentował będę przydatne skróty i techniki, które można stosować w swoim ulubionym edytorze. Praca z edytorem HTML Zaczynamy Oto pierwsze kroki, jakie należy wykonać, aby zacząć pracę z wybranym przez sie- bie edytorem: 1. Pierwszy krok to oczywiście uruchomienie edytora za pomocą podwójnego kliknięcia odpowiedniej ikony albo wyszukania właściwej pozycji w me- nu Start. Pojawi się wtedy okno edytora. 2. Niektóre edytory HTML na początek wyświetlają poradę dnia (Nvu) albo od razu otwierają stronę początkową (Dreamweaver). Po zamknięciu takie- go okna dostaniemy się do głównego okna programu. Czasami konieczne będzie też usunięcie kilku innych „zakłócaczy”. We Front- Page’u po prawej stronie pojawia się irytujący panel Wprowadzenie. Aby go usunąć, wystarczy kliknąć ikonę z krzyżykiem w jego górnym prawym rogu. W Dreamweaverze dobrze jest też przesunąć przeszkadzające panele (proszę spojrzeć na rysunek 4.5). 3. Teraz z menu wybrać można pozycję Plik/Otwórz i odszukać jeden z przy- kładowych plików, nad którymi pracowaliśmy w rozdziale 2. (pliki te pobrać można też ze strony Missing CD pod adresem www.missingmanuals.com). Ten krok jest bardzo prosty. Otwieranie dokumentu HTML przebiega do- kładnie tak samo jak otwieranie dokumentu w każdym innym programie edycyjnym. Wiele widoków Jak już wcześniej mówiłem, istnieje kilka różnych sposobów przeglądania do- kumentu HTML, z których można korzystać w zależności od tego, czy chcemy uzyskać prostotę obsługi porównywalną z procesorem tekstu, czy też pełną kon- trolę nad tworzonym kodem HTML. Większość edytorów HTML daje możliwość wyboru sposobu pracy z dokumentem i pozwala na szybkie przechodzenie z jedne- go widoku dokumentu na inny. W celu zmiany widoku trzeba wyszukać w oknie programu kilka niewielkich przycisków, które najczęściej wyświetlane są tuż pod albo tuż nad wyświetlanym dokumentem. Rysunek 4.6 powinien ułatwić wyszu- kiwanie tych przycisków. Większość edytorów HTML uruchamia się domyślnie w widoku WYSIWYG, w któ- rym zobaczyć można sformatowany dokument HTML. Oznacza to, że strona powinna wyglądać w edytorze mniej więcej tak, jak wyglądać ma w przeglądarce WWW. Po przełączeniu do widoku kodu HTML będziemy mogli przejrzeć wszyst- kie szczegóły strony — zobaczymy w nim znajomy tekstowy wygląd dokumentu R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 105 Praca z edytorem HTML HTML ze znacznikami i innym tekstem. Te dwa widoki są podstawą tworzenia stron WWW. Mimo to najprzydatniejszym rozwiązaniem jest zastosowanie wido- ku dzielonego, który daje nam możliwość jednoczesnego korzystania z obu wi- doków (proszę spojrzeć na rysunek 4.7). Rysunek 4.5. Na górze: Dreamweaver jest prze- ładowany funkcjami. Wiele z nich dostępnych jest poprzez specjalizo- wane panele, które moż- na wygodnie „wsunąć” w prawą i dolną krawędź okna programu. Na tym rysunku przedstawiony został domyślny wygląd okna programu pojawia- jący się zaraz po jego uruchomieniu. Na razie jednak zajmować bę- dziemy się podstawami, więc można schować wszystkie panele, klikając zaznaczone na rysunku strzałki. Na dole: można też ukryć wszystkie pa- nele na raz, wybierają z menu pozycję View/Hide panels (gdy będziemy go- towi na korzystanie z tych paneli, można z menu wy- brać pozycję View/Show panels). Na tym rysunku wszystkie specjalne funk- cje zostały ukryte, dzięki czemu powiększyło się okno głównego widoku dokumentu Niektóre edytory HTML udostępniają też ciekawy tryb, w którym na widoku WYSIWYG nakładane są informacje o zastosowanych w dokumencie znaczni- kach. W edytorze Nvu taki tryb nazywa się Znaczniki HTML i na podglądzie do- kumentu wyświetla nazwy używanych znaczników zapisane w żółtych prostoką- tach (widok ten można zobaczyć na rysunku 4.2). Podobny widok można też wywołać w edytorze FrontPage, wybierając z menu pozycję Widok/Wyświetl tagi. Tworzenie strony WWW Najlepszym sposobem na poznanie edytora HTML jest przygotowanie w nim nowego dokumentu HTML. 106 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Praca z edytorem HTML Dobrze jest zastosować na początek opisywany wcześniej widok kodu HTML, dzięki czemu będziemy mieli pełną kontrolę nad wprowadzanymi znacznikami HTML. Teraz wystarczy wprowadzić wszystkie znaczniki i tekst dokumentu, tak jak robiliśmy to wcześniej w Notatniku lub edytorze TextEdit (można teraz wró- cić do rozdziału 2. i przypomnieć sobie metody wpisywania kodu HTML). W czasie wpisywania kodu na pewno zauważymy, że edytor wspiera nas różnymi funkcja- mi. Na przykład we FrontPage’u i Dreamweaverze w czasie pisania edytor wyświe- tlać będzie małe menu z różnymi sugestiami. Można wtedy od razu wybrać znacz- nik HTML albo kontynuować pisanie. Poza tym, gdy wprowadzimy otwierający znacznik elementu kontenerowego (na przykład nagłówka h1 ), to edytor (Front- Page lub Dreamweaver) automatycznie wprowadzi znacznik zamykający (na przy- kład /h1 ). Rysunek 4.6. Niemal wszystkie edytory HTML udostępniają przyciski po- zwalające na zmianę wi- doku dokumentu. W po- szczególnych edytorach przyciski te mogą mieć różne nazwy i mogą być umieszczane w różnych miejscach, co doskonale widać na tym rysunku, na którym pokazano okna programów FrontPage (na górze), Dreamweaver (na środku) i Nvu (na dole). W tym przykładzie wszyst- kie trzy programy przełą- czone zostały w widok WYSIWYG (dokładniejszy opis tego trybu podany został na stronie 95.) R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 107 Praca z edytorem HTML Tworzenie i formatowanie strony w trybie WYSIWYG to znacznie bardziej inte- resujące zadanie, ponieważ wymaga wiedzy na temat miejsc, gdzie ukryte są w edy- torze różne opcje formatujące. Rysunek 4.7. Widok dzielony jest bardzo wygodną funkcją edytorów HTML, która dzieli okno edytora na dwie części. Na tym rysunku widać okno programu Dreamweaver, w którym kliknięty został przycisk widoku dzielonego (został na rysun- ku wyróżniony). Najczęściej z takiego widoku korzystać będziemy w czasie ręcznego wpisywania znaczników HTML i jednoczesnego podglądania wyników wprowadzanych modyfi- kacji. Można oczywiście pracować też „w drugą stronę”, czyli edyto- wać dokument w trybie WYSIWYG i sprawdzać, jakie znaczniki HTML wprowadzane są do dokumentu (w ten sposób można łatwo nauczyć się języka HTML). Opcja widoku dzielonego dostępna jest w edyto- rach FrontPage i Dreamweaver, ale brakuje jej w Nvu FrontPage, Dreamweaver i Nvu wspomagają nas tutaj, wyświetlając na paskach narzędzi część narzędzi języka HTML. Aby dodać do dokumentu znacznik w try- bie WYSIWYG, należy najpierw zaznaczyć część tekstu, którą chcemy poddać formatowaniu, a następnie kliknąć odpowiedni przycisk na pasku narzędzi. Na koniec można przełączyć edytor w widok kodu HTML i sprawdzić, czy uzyskali- śmy pożądane efekty. Na przykład w celu pogrubienia części tekstu należy ją za- znaczyć i kliknąć na pasku zadań przycisk z literą B. W odpowiedzi edytor wstawi znacznik b tuż przed początkiem zaznaczenia i znacznik /b zaraz za końcem tego zaznaczenia. Na rysunku 4.8 przedstawione zostały najbardziej użyteczne paski narzędzi edytora Nvu. Wskazówka: Tylko od nas zależy, czy stronę WWW będziemy tworzyć w widoku kodu HTML, czy też w widoku WYSIWYG. Początkowo tryb WYSIWYG jest zdecydowanie prostszy i wygodniejszy, ale mo- że generować w dokumencie wiele znaczników wymagających skontrolowania, przez co przysparza pracy w przyszłości. W celu przetestowania trybu WYSIWYG możemy spróbować odtworzyć jedną z przykładowych stron z rozdziału 2. (minirésumé, jakie przygotowaliśmy na stronie 51.). Tym razem, zamiast wprowadzać ręcznie każdy znacznik, możemy po prostu wpisać tekst strony i odpowiednio go sformatować za pomocą przycisków z paska narzędzi i pozycji menu. Oto kilka kroków, jakie trzeba w tym celu wykonać: 108 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W 1. Zaczynamy od wybrania z menu pozycji Plik/Nowy i utworzenia nowej strony WWW. Praca z edytorem HTML Edytor poprosi o podanie typu tworzonego pliku. Rysunek 4.8. Edytor Nvu oferuje łatwy dostęp do wielu ciekawych funkcji języka HTML. Trzeba pamiętać, że istnieje różnica między odnalezieniem funkcji na pasku narzędzi a umiejętnością jej użycia. W dalszej części tej książki poznamy różne pułapki, w jakie można wpaść w czasie pracy z rysunkami, czcionkami i tabelami 2. We FrontPage’u nową stronę utworzymy po wybraniu opcji Utwórz nową normalną stronę. W Dreamweaverze trzeba wybrać kategorię Basic page i podkategorię HTML. W Nvu wystarczy wybrać opcję Pusty dokument i kliknąć przycisk Otwórz. Pojawi się wtedy czysty dokument, zawierający tylko ogólny szkielet doku- mentu HTML. Jeżeli przyjrzymy się mu w ramach widoku kodu HTML, zoba- czymy przygotowane już podstawowe znaczniki html , head i body . Wskazówka: Niektóre edytory HTML, takie jak FrontPage, udostępniają różnego rodzaju szablony pozwalające na szybkie przygotowanie różnych projektów stron. Podobne rozwiązania oferuje też Dreamweaver, ale jego szablony dokumentów są względnie skomplikowane i wymagają użycia stylów, o których mówić będziemy w rozdziale 6. Opcje edytora FrontPage, niestety, dość mocno ograniczają twórcę stron — oczywiście proponowane szablony są ładne, ale nie dają wielkich moż- liwości zróżnicowania wyglądu. Najlepiej będzie zatem unikać ich stosowania do czasu, aż będzie- my w stanie tworzyć własne projekty. R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 109 Praca z edytorem HTML 3. Przełączamy widok w tryb WYSIWYG i wpisujemy tytuł strony: Za- trudnij mnie! Wpisany tekst pojawi się w normalnym rozmiarze. 4. Zaznaczamy wprowadzony tekst, a na pasku zadań lub w menu wyszu- kujemy opcję pozwalającą na zmianę tego tekstu w nagłówek, czyli doda- nie znaczników h1 i /h1 . W edytorze FrontPage najprościej jest wybrać z listy rozwijalnej stylów styl Nagłówek 1. W Dreamweaverze istnieje kilka możliwości zmiany stylu. Po pierwsze, można wybrać z menu pozycję Text/Paragraph Format/Heading 1 albo skorzystać ze skrótu klawiaturowego Ctrl+1. Po drugie, można skorzystać z paska narzędzi, tak jak zostało to opisane na rysunku 4.9, albo z okna Pro- perties (jeżeli nie jest ono widoczne, z menu wybrać trzeba pozycję Window/ Properties). W Nvu jedyną możliwością jest wybranie z menu pozycji Format/ Akapit/Nagłówek 1. Niestety, ten znacznik nie „załapał” się do paska narzędzi. 5. Naciskamy klawisz Enter w celu przejścia do następnego akapitu. Przywrócony zostanie wtedy normalny styl tekstu, a my będziemy mogli wpi- sać pozostałą część strony. Tutaj wyzwaniem będzie utworzenie listy wypunk- towanej. Wszystkie trzy omawiane edytory pozwalają na przygotowanie takiej listy za pomocą przycisków umieszczonych na pasku narzędzi. W gąszczu znaczników można się bardzo łatwo pogubić. Każdy z omawianych edytorów ułatwia nam określenie bieżącej pozycji wśród znaczników, wyświe- tlając na górze lub na dole okna aktualny selektor znacznika (proszę spojrzeć na rysunek 4.10). 6. Teraz można spróbować wstawić do dokumentu rysunek. Nvu bardzo ułatwia wykonanie tej operacji dzięki odpowiedniemu przyciskowi umieszczonemu na pasku narzędzi. FrontPage i Dreamweaver udostępniają podobne przyciski, ale w ich przypadku łatwiej jest wybrać odpowiednią funk- cję bezpośrednio z menu (we FrontPage’u należy wybrać pozycję Wstaw/Obraz/ Z pliku, a w Dreamweaverze pozycję Insert/Image). Uwaga: Przy wykonywaniu tych operacji plik z obrazkiem powinien znajdować się w tym samym katalogu co plik strony WWW. Jeżeli tak nie będzie, niektóre edytory mogą wstawić do dokumentu znacznik img zawierający odnośnik z bezwzględną ścieżką na dysku. Takie odnośniki zawsze będą sprawiały problem, ponieważ przeglądający taką stronę w internecie nie będą mieli dostępu do na- szego dysku. Należy zatem dokładnie sprawdzić, czy wszystko zapisane zostało prawidłowo, przej- rzeć znaczniki img w widoku kodu HTML i skontrolować, czy atrybuty src nie zaczynają się od przedrostka file://. Jeżeli tak się zdarzy, trzeba ręcznie poprawić znacznik img , tak jak robiliśmy to w rozdziale 2. (na stronie 50.). 7. Edytor poprosi o wybranie pliku obrazu, a wtedy należy wybrać przykła- dowy plik jankowalski.jpg. (Plik ten można też pobrać ze strony Missing CD pod adresem www.missingmanuals.com). 110 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Program wstawi wówczas do dokumentu odpowiednio przygotowany znacz- nik img . Zaraz po wstawieniu obrazka do dokumentu możemy zacząć doce- niać zalety trybu WYSIWYG. W opisywanych tutaj edytorach HTML mo- żemy przeciągać brzegi tak wstawionego obrazu i dowolnie zmieniać jego wielkość. Praca z edytorem HTML Rysunek 4.9. W edytorze Dreamweaver pasek narzędzi to tak naprawdę osiem pasków w jednym. Na górze: najpierw trzeba wybrać potrzebny pasek (tutaj odpowiedni przycisk wska- zywany jest strzałką). Na środku: następnie trzeba wybrać pasek, z którego chcemy skorzystać. Na tym rysunku jest to pasek narzędzi tekstowych. Na dole: na pasku narzędzi tekstowych znajduje się przycisk wstawiający znaczniki HTML nagłówka po- ziomu pierwszego (przycisk „h1” wskazywany jest na obrazie przez strzałkę) R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 111 Praca z edytorem HTML Zarządzanie witryną WWW Edytory HTML nie ograniczają możliwości edytowania wielu stron jednocześnie. Niemal każdy z nich pozwala na przeglądanie kilku dokumentów na raz. W edyto- rach FrontPage, Dreamweaver i Nvu kolejno otwierane dokumenty reprezento- wane są dokładnie w ten sam sposób — nad oknem dokumentu pojawiają się ko- lejne zakładki z nazwami dokumentów. Na rysunku 4.11 przedstawiony został ekran edytora FrontPage z otwartymi wieloma oknami. Rysunek 4.10. Zaznaczony na ry- sunku selektor znaczników bardzo przydaje się wtedy, gdy szukamy ściśle określonej części strony WWW, którą chcemy poddać edycji. Po przeniesieniu kursora we właści- we miejsce można skontrolować se- lektor znaczników, upewniając się, że na pewno znajdujemy się we właściwym miejscu. Selektor znacz- ników wypisuje wszystkie znaczniki obowiązujące w danym miejscu do- kumentu. W tym przykładzie kursor znajduje się wewnątrz znacznika b (pogrubianie tekstu) znajdują- cego się wewnątrz znacznika p (akapit), który z kolei znajduje się wewnątrz znacznika body obej- mującego całość dokumentu HTML. Klikając pasek znaczników, można szybko wybrać dowolny z nich Rysunek 4.11. We FrontPage’u można otwierać dowolną ilość do- kumentów. Wystarczy kilka razy wybrać z menu pozycję Plik/Otwórz. Dla każdego otwartego dokumentu pojawi się nowa zakładka (w tym przypadku widoczne są dwa otwar- te dokumenty). Przejście z jednego dokumentu do innego następuje po kliknięciu zakładki. W celu zamknięcia dokumentu należy kliknąć przycisk X znajdujący się po prawej stronie paska zakładek 112 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W Dzięki możliwości jednoczesnego edytowania kilku stron WWW wiele edytorów HTML pozwala też na zarządzanie całymi witrynami WWW. Praca z edytorem HTML Uwaga: Witryna WWW jest po prostu jedną stroną lub kolekcją wielu stron WWW i oczywiście wszystkich plików powiązanych ze stronami (na przykład obrazków). Najwygodniej jest zatem za- rządzać tymi plikami za pomocą edytora HTML. W ten sposób znacznie łatwiej dodaje się łącza do pozostałych stron witryny (więcej na ten temat w rozdziale 8.), ponieważ utrzymywana jest spój- ność stron. Poza tym zawsze mamy możliwość przeniesienia gotowej strony na serwer WWW, co w edytorze wymaga zwykle tylko kilku kliknięć. Definiowanie witryny we FrontPage’u W celu przygotowania witryny WWW we FrontPage’u należy wykonać nastę- pujące kroki: 1. Wybrać z menu pozycję Plik/Otwórz witrynę. Pojawi się wtedy okno dialogowe Otwórz witrynę. Wygląda ono jak najzwy- klejsze okno wybierania plików, od którego różni się tylko jednym szczegółem — nie wyświetla żadnych plików. Można w nim zobaczyć wyłącznie katalogi. 2. Odszukać odpowiedni katalog, wybrać go i kliknąć przycisk Otwórz. Moż- na na przykład skorzystać z katalogu, w którym zapisywaliśmy przykłady z rozdziału 2. Pojawi się wtedy okno dialogowe z pytaniem, czy chcemy do witryny dodać informacje edytora FrontPage (zobaczyć je można na rysunku 4.12). Rysunek 4.12. Jeżeli chcemy skorzystać z funkcji zarządzania wi- tryną WWW udostępnianych przez FrontPage’a, musimy pozwo- lić edytorowi na dodanie do katalogu witryny różnych specjalizo- wanych katalogów. Katalogi te można przeglądać w Eksploratorze Windows — otrzymują one nazwy takie jak _private, _vti_cnf lub _vti_pvt. FrontPage tworzy też podkatalog o nazwie images, w którym można przechowywać obrazki przeznaczone do wyświe- tlania na stronach WWW. Na rysunku widać okno dialogowe poja- wiające się w momencie, gdy po raz pierwszy otwieramy dany katalog, traktując go jak katalog witryny WWW 3. Kliknąć Tak i dodać informacje edytora. FrontPage utworzy teraz swoją strukturę katalogów, a po lewej stronie okna programu pojawi się lista foldery, na której wypisane będą wszystkie pliki skła- dające się na witrynę WWW (proszę spojrzeć na rysunek 4.13). Przesyłanie witryny na serwer w edytorze FrontPage Jedną z najprzyjemniejszych cech edytora FrontPage jest możliwość przesłania gotowej witryny WWW na serwer bez konieczności wykorzystywania osobnego programu do obsługi protokołu FTP (takie programy omawiane były na stronie 89.). R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 113 Praca z edytorem HTML Aby wykorzystać te funkcje dla naszej witryny, musimy wykonać wszystkie opi- sane wyżej kroki i poinformować w ten sposób edytor, że wskazany folder jest czę- ścią naszej witryny WWW. Następnie można przesyłać witrynę na serwer, którą to operację wykonuje się w poniższych etapach: Rysunek 4.13. Lista folderów (na tym ry- sunku widać ją po lewej stronie) pozwala nam łatwiej orientować się w zawartości witryny WWW. W celu otwarcia dokumentu wystarczy kliknąć go dwukrotnie, a po klik- nięciu prawym przyciskiem myszy można przejrzeć inne opcje dotyczące poszczegól- nych plików 1. Wybrać z menu pozycję Plik/Publikuj witrynę. Przy pierwszym publikowaniu witryny pojawi się okno dialogowe Właściwości zdalnej witryny sieci Web. W oknie tym można podać wszystkie ustawienia połączenia, takie jak na przykład nazwa serwera FTP (proszę spojrzeć na ry- sunek 4.14). Rysunek 4.14. Firma udostępniająca w in- ternecie stronę WWW powinna przekazać nam wszystkie informacje, jakie teraz przy- dadzą się do wypełnienia pól okna Właści- wości zdalnej witryny sieci Web. Najczęściej potrzebować będziemy nazwy serwera FTP, nazwy katalogu na tym serwerze, w którym przechowywana będzie nasza witryna, oraz nazwy i hasła naszego konta FTP. Te wszyst- kie informacje wystarczy wprowadzić tylko raz. Po udanym pierwszym połączeniu FrontPage zapisze te dane i będzie ich uży- wać w czasie kolejnych aktualizacji witryny 114 C Z Ę Ś Ć I ¨ W I T A M Y W S I E C I W W W 2. Wprowadzić wszystkie informacje wymagane do ustanowienia połączenia z serwerem WWW i kliknąć przycisk OK. Praca z edytorem HTML Można też skorzystać z zaawansowanych funkcji dostępnych na zakładce Pu- blikowanie. Przede wszystkim można tam zaznaczyć, żeby FrontPage przesy- łał na serwer tylko zmienione lub nowe pliki (jest to ustawienie domyślne), ale można też nakazać edytorowi za każdym razem kopiować całą zawartość witryny WWW zapisaną na komputerze. 3. Na tym etapie FrontPage poprosi o podanie nazwy użytkownika i hasła po- trzebnego do połączenia z serwerem FTP. Po wprowadzeniu właściwych informacji można kliknąć przycisk OK. FrontPage zawsze zapamiętuje nazwę użytkownika i używa jej przy kolejnych aktualizacjach, ale to, czy chcemy pozwolić mu na podobne traktowanie hasła, zależy już tylko od nas. Po ustanowieniu połączenia FrontPage wyświetli obok siebie dwie listy pli- ków, dzięki którym będziemy mieli możliwość porównania zawartości wi- tryny WWW zapisanej na naszym komputerze z tą znajdującą się już na serwerze WWW. 4. W celu zaktualizowania witryny WWW należy wybrać opcję Z lokalnej do zdalnej i kliknąć przycisk Publikuj witrynę sieci Web. Proces publikowa- nia witryny zostanie rozpoczęty. Proszę spojrzeć na rysunek 4.15). Opcja Ze zdalnej do lokalnej przydaje się tylko wtedy, gdy na serwerze WWW znajdują się pliki nowsze niż te znajdujące się na komputerze. Taka sytuacja może się zdarzyć, gdy daną witrynę WWW edytujemy na kilku kompute- rach. Opcja Synchronizuj jest jakby połączeniem opcji Ze zdalnej do lokalnej i Z lokalnej do zdalnej. Kontroluje ona każdy plik i aktualizuje wszystkie star- sze pliki znajdujące się na serwerze WWW i na komputerze. Rysunek 4.15. Publikując witry- nę WWW, FrontPage sprawdza wszystkie składające się na nią pliki i kopiuje tylko te z nich, które od czasu ostatniej publikacji zo- stały zmienione lub dodane. Na rysunku zaznaczony został pasek postępu, z którego można odczytać nazwę kopiowanego aktualnie pliku oraz przybliżony czas, jaki zajmie ta operacja R O Z D Z I A Ł 4 . ¨ S K U T E C Z N E N A R Z Ę D Z I A 115 Praca z edytorem HTML Wskazówka: Jeżeli część plików witryny skopiowaliśmy na serwer WWW samodzielnie, za pomocą programu do obsługi protokołu FTP, możemy mieć problemy z aktualizacją witryny za pomocą edy- tora FrontPage. Roz
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Nieoficjalny podręcznik
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


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