Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00200 010852 10754777 na godz. na dobę w sumie
FrontPage 2002/XP PL. Ćwiczenia praktyczne - książka
FrontPage 2002/XP PL. Ćwiczenia praktyczne - książka
Autor: Liczba stron: 112
Wydawca: Helion Język publikacji: polski
ISBN: 83-7197-660-7 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> frontpage
Porównaj ceny (książka, ebook, audiobook).
Od pojawienia się i spopularyzowania Internetu minęło już sporo czasu. Obecna sieć bardzo różni się od tej, jaką znamy sprzed lat. Postęp przejawia się niemal w każdym aspekcie: zarówno nowe technologie, usługi, jak i programowanie zaskakują nas codziennie. Projektowanie pierwszych stron WWW wymagało od nas znajomości tajemnego kodu i wielu wyrzeczeń. W chwili premiery najnowszej wersji pakietu MS Office XP oraz edytora MS FrontPage XP wchodzącego w jego skład, wszystkie dawne problemy odejdą w zapomnienie. Strona tworzy się na naszych oczach niemal sama, przy udziale różnego rodzaju kreatorów i innych udogodnień.

Dzięki tej książce poznacie najnowszą wersję tego znanego i kontrowersyjnego edytora stron WWW, pracującego w trybie graficznym. Praca z nowym edytorem stała się prawdziwą przyjemnością, a wszelkiego rodzaju wady znane ze starszych wersji zostały poprawione. Budowa książki pozwoli szybko i łatwo poznać program i zbudować własną witrynę WWW. Szereg dokładnych opisów oraz ilustracji będzie dodatkowym ułatwieniem. Myślę, że cenny dla niemal każdego jest oddzielny rozdział poświęcony kaskadowym arkuszom stylów, które pozwalają na zastosowanie rewolucyjnych rozwiązań na stronach WWW. Dodatkowo wiele przykładów zawiera odniesienie do czystego języka HTML, dzięki czemu będzie łatwiej zrozumieć pewne pojęcia, co z pewnością zwiększy również zainteresowanie samym językiem HTML, który nadal daje nam lepszą kontrolę nad projektem.

Dla początkujących projektantów książka jest doskonałym wprowadzeniem do pracy z edytorem. Przyda się również tym, którzy znają już MS FrontPage i chcieliby jedynie zapoznać się z nowościami oferowanymi w najnowszej wersji. Mam nadzieję, że zawarte tu przykłady i ćwiczenia okażą się pomocne w poznaniu programu i jego możliwości.

W książce opisano opcje zarówno dla polskiej, jak i angielskiej wersji MS FrontPage 2002/XP.

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

Darmowy fragment publikacji:

IDZ DO IDZ DO PRZYK£ADOWY ROZDZIA£ PRZYK£ADOWY ROZDZIA£ SPIS TRE(cid:140)CI SPIS TRE(cid:140)CI KATALOG KSI¥flEK KATALOG KSI¥flEK KATALOG ONLINE KATALOG ONLINE ZAM(cid:211)W DRUKOWANY KATALOG ZAM(cid:211)W DRUKOWANY KATALOG TW(cid:211)J KOSZYK TW(cid:211)J KOSZYK DODAJ DO KOSZYKA DODAJ DO KOSZYKA CENNIK I INFORMACJE CENNIK I INFORMACJE ZAM(cid:211)W INFORMACJE ZAM(cid:211)W INFORMACJE O NOWO(cid:140)CIACH O NOWO(cid:140)CIACH ZAM(cid:211)W CENNIK ZAM(cid:211)W CENNIK CZYTELNIA CZYTELNIA FRAGMENTY KSI¥flEK ONLINE FRAGMENTY KSI¥flEK ONLINE Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl FrontPage 2002/XP PL. ˘wiczenia praktyczne Bartosz Danowski Autor: ISBN: 83-7197-660-7 Format: B5, stron: 112 Od pojawienia siŒ i spopularyzowania Internetu minŒ‡o ju¿ sporo czasu. Obecna sie(cid:230) bardzo r(cid:243)¿ni siŒ od tej, jak„ znamy sprzed lat. PostŒp przejawia siŒ niemal w ka¿dym aspekcie: zar(cid:243)wno nowe technologie, us‡ugi, jak i programowanie zaskakuj„ nas codziennie. Projektowanie pierwszych stron WWW wymaga‡o od nas znajomo(cid:156)ci tajemnego kodu i wielu wyrzeczeæ. W chwili premiery najnowszej wersji pakietu MS Office XP oraz edytora MS FrontPage XP wchodz„cego w jego sk‡ad, wszystkie dawne problemy odejd„ w zapomnienie. Strona tworzy siŒ na naszych oczach niemal sama, przy udziale r(cid:243)¿nego rodzaju kreator(cid:243)w i innych udogodnieæ. DziŒki tej ksi„¿ce poznacie najnowsz„ wersjŒ tego znanego i kontrowersyjnego edytora stron WWW, pracuj„cego w trybie graficznym. Praca z nowym edytorem sta‡a siŒ prawdziw„ przyjemno(cid:156)ci„, a wszelkiego rodzaju wady znane ze starszych wersji zosta‡y poprawione. Budowa ksi„¿ki pozwoli szybko i ‡atwo pozna(cid:230) program i(cid:160) zbudowa(cid:230) w‡asn„ witrynŒ WWW. Szereg dok‡adnych opis(cid:243)w oraz ilustracji bŒdzie dodatkowym u‡atwieniem. My(cid:156)lŒ, ¿e cenny dla niemal ka¿dego jest oddzielny rozdzia‡ po(cid:156)wiŒcony kaskadowym arkuszom styl(cid:243)w, kt(cid:243)re pozwalaj„ na zastosowanie rewolucyjnych rozwi„zaæ na stronach WWW. Dodatkowo wiele przyk‡ad(cid:243)w zawiera odniesienie do czystego jŒzyka HTML, dziŒki czemu bŒdzie ‡atwiej zrozumie(cid:230) pewne pojŒcia, co z pewno(cid:156)ci„ zwiŒkszy r(cid:243)wnie¿ zainteresowanie samym jŒzykiem HTML, kt(cid:243)ry nadal daje nam lepsz„ kontrolŒ nad projektem. Dla pocz„tkuj„cych projektant(cid:243)w ksi„¿ka jest doskona‡ym wprowadzeniem do pracy z(cid:160) edytorem. Przyda siŒ r(cid:243)wnie¿ tym, kt(cid:243)rzy znaj„ ju¿ MS FrontPage i chcieliby jedynie zapozna(cid:230) siŒ z nowo(cid:156)ciami oferowanymi w najnowszej wersji. Mam nadziejŒ, ¿e zawarte tu przyk‡ady i (cid:230)wiczenia oka¿„ siŒ pomocne w poznaniu programu i jego mo¿liwo(cid:156)ci. W ksi„¿ce opisano opcje zar(cid:243)wno dla polskiej, jak i angielskiej wersji MS FrontPage 2002/XP. Rozdział 1. Wprowadzenie.................................................................................................................................... 5 Nowe możliwości MS FrontPage 2002/XP ...................................................ś.............................6 Rozdział 2. Poszczególne operacje edycyjne............................................................................................ 9 Wprowadzanie tekstu ...................................................ś...................................................ś............9 Właściwości strony ...................................................ś...................................................ś.............13 Formatowanie tekstu ...................................................ś...................................................ś...........19 Nagłówki...................................................ś...................................................ś.............................25 Listy ...................................................ś...................................................ś....................................26 Umieszczanie grafiki w dokumencie HTML...................................................ś.........................35 Hiperłącza ...................................................ś...................................................ś...........................48 Hiperłącze tekstowe i graficzne...................................................ś.......................................49 Kotwice...................................................ś...................................................ś.........................52 Mapa odsyłaczy ...................................................ś...................................................ś............53 Tabele...................................................ś...................................................ś..................................54 Proste tabele...................................................ś...................................................ś..................54 Zagnieżdżanie tabel ...................................................ś...................................................ś......59 Formularze ...................................................ś...................................................ś..........................60 Ramki ...................................................ś...................................................ś..................................68 Ramki tradycyjne...................................................ś...................................................ś..........68 Ramki pływające ...................................................ś...................................................ś..........73 Rozdział 3. Kaskadowe arkusze stylów na przykładzie MS FrontPage 2002/XP PL ..............77 Krótkie wprowadzenie do CSS ...................................................ś..............................................77 Atrybuty stylów ...................................................ś...................................................ś............78 Selektory ...................................................ś...................................................ś.......................81 Klasy ...................................................ś...................................................ś.............................82 ID ...................................................ś...................................................ś..................................84 Rozdział 4. Projekt kompletnego ośrodka WWW .................................................................................. 91 Od czego zacząć...................................................ś...................................................ś..................91 Układ strony...................................................ś...................................................ś..................91 Kolorystyka...................................................ś...................................................ś...................92 4 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Zaczynamy ...................................................ś...................................................ś..........................92 Konstruujemy stronę krok po kroku ...................................................ś................................92 Formatowanie szkieletu strony ...................................................ś........................................95 Czegoś brakuje...................................................ś...................................................ś..............99 Rozdział 5. Publikujemy naszą stronę...................................................................................................... 103 Serwer — zakładamy konto na naszą stronę ...................................................ś.......................103 Publikujemy stronę za pomocą MS FrontPage 2002/XP PL ..................................................105 Publikujemy stronę za pomocą klienta FTP ...................................................ś........................107 Dodatek ......................................................................................................................................................................... 109 Długo się zastanawiałem, jak bez sięgania do teorii opisać tak ważny element, jak kaska- dowe arkusze stylów zaimplementowane w MS FrontPage 2002/XP PL. Doszedłem do wniosku, że nie jest to możliwe, dlatego w dalszej części rozdziału zamieściłem dość dokładny opis zasad konstrukcji i działania arkusza CSS, a następnie zanalizowałem, jak cała ta teoria ma się do MS FrontPage 2002/XP PL. Mam nadzieję, że takie rozwiązanie będzie najlepsze. Wydaje mi się, że dokładne przeczytanie poniższych podrozdziałów będzie pomocne w zrozumieniu zasady działania implezmentacji CSS w edytorze. Wyjaśnijmy najpierw, czym są kaskadowe arkusze stylów. Pojęcie to pojawiało się w po- przednim rozdziale prawie na każdej stronie, ale nie zostało dokładnie omówione. Od cza- su pojawienia się wersji HTML 3.2 wprowadzono do struktury języka pewne innowacje i zaczęto część znaczników zastępować innymi. Nowe znaczniki nazwano kaskadowymi arkuszami stylów i zaczęto stopniowo je rozbudowywać. Dzięki stylom możemy mieć pełną kontrolę nad formatowaniem dokumentu. Żadne z poleceń języka HTML nie po- zwalało nam na regulowanie odstępów pomiędzy blokami oraz nakładanie ich na siebie. Warto wspomnieć, że style pozwalają na kontrolę tła poszczególnych części dokumentu, właściwości stosowanych na stronie czcionek, tabel, formularzy i wielu innych ele- mentów. 78 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Kaskadowe arkusze stylów, w skrócie CSS, możemy określić jako narzędzie formato- wania wyglądu dokumentów. Nie możemy jednak stworzyć za ich pomocą strony. Po- dobnie jak język HTML, kaskadowe arkusze stylów są standaryzowane przez W3 i tam należy szukać odpowiedniej dla nich specyfikacji. Na dzień dzisiejszy dostępne są specy- fikacje w wersji 1. oraz 2. Konsorcjum W3 pracuje aktuazlnie nad trzecią specyfikacją, któ- ra nie została jeszcze zatwierdzona, ale jej projekt jest dostępny razem z obowiązującymi dokumentami. Używanie stylów wiąże się z pewnym ryzykiem, gdyż przeglądarki interpretują tak forma- towaną stronę na różne sposoby. Poczynając od wersji 3. przeglądarek, specyfikacja pierw- sza jest obsługiwana w mniejszym lub większym stopniu. Czwarta generacja przeglądarek jest bardziej zgodna ze specyfikacją. Podobnie jak w przypadku języka HTML, przeglą- darka MS Internet Explorer o wiele lepiej radzi sobie zz CSS niż Netscape Navigator. Nasze arkusze możemy, podobnie jak język HTML, opatrywać komentarzem wewnątrz. Komentarz musi być umieszczony w następujący sposób: (cid:2)3/28+6.+.39/289-77(cid:2) Jak wspominałem we wprowadzeniu, style mogą formatować wiele elementów strony, ale w tym opracowaniu skupimy się jedynie na formatowaniu czcionek, tekstu, kolorów, tła, marginesów oraz pozycjonowaniu (MS FrontPage 2002/XP PL obsługuje tylko małą tego część). Zacznijmy od umieszczania stylów na naszej stronie. Pierwszą możliwością jest dekla- racja stylów wewnątrz dokumentu: 8 /+. #$$ 8/8 -77 (cid:31)(cid:31) /+6+-/78#; (cid:31)(cid:31)  #$  /+. ,3.  ,3.  8 Jak widać na przykładzie, deklaracja stylów jest umieszczana w nagłówku dokumentu pomiędzy znacznikami style /style . Takie rozwiązanie jest stosunkowo wygodne i ma ogromną przewagę nad umieszczaniem deklaracji stylów bezpośrednio w kodzie HTML, gdyż posiadamy wtedy stosunkowo prostą możliwość formatowania dokumentu. Kolejną możliwością umieszczania stylów w naszym dokumencie jest przygotowanie ich w oddzielnym pliku. Plik ten musi mieć rozszerzenie CSS: nazwa.css. Tak przygotowany plik wywołujemy w naszym dokumencie HTML w następujący sposób: 8 /+.  #$#$ 2+;+ -77$ 8/8 -77  /+. ,3.  ,3.  8 Rozwiązanie to ma wiele zalet. Tak przygotowany arkusz może być zastosowany w każ- dym pliku HTML naszej strony; ułatwia to ingerowanie w wygląd tejże strony. Wszystkie opisy i ćwiczenia przedstawione w dalszej części rozdziału opierać się będą na tym rozwiązaniu. Podpinanie zewnętrznego arkusza w edytorze MS FrontPage 2002/XP PL jest możliwe dzięki opcji Łącza arkusza stylów (Sheet Style Links) w menu Format (Format). Doda- wanie arkusza odbywa się za pomocą przycisku Dodaj (Add) i typowego okna, znanego z wyszukiwania plików na dysku. Przydatną opcją jest również Usuń formatowanie (Remove Formatting) z menu Format (Format), usuwa ona wszystkie wpisy formatujące znajdujące się w kodzie HTML. Rysunek 3.1. Podłączanie zewnętrznego arkusza Definiowanie arkusza rozpoczynamy od nadania mu etyzkiety (w celach informacyjnych): (cid:2) 6o+.+697+ (cid:2) ,3..4  328(cid:31)#/ 48 328+ $/7/; 3+2 . /6.+2+  Jak widzimy na przykładzie, pierwsza część określa, który element języka HTML ma być formatowany przez CSS — w naszym przypadku zajmiemy się BODY oraz P . Opis formatowania znajduje się pomiędzy nawiasami klamrowymi {} i składa się z dwóch członów. Pierwszy oddzielony jest od drugiego dwukropkiem, a po ostatnim znajduje się średnik. 80 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Przy formatowaniu kroju czcionki możemy zadeklarować kilka wartości, rozdzielając je przecinkami. Zalecany przez nas krój warto zamknąć pzomiędzy znakami ’ ’. Definicja stylów w MS FrontPage 2002/XP PL polega na utworzeniu nowego, pustego pliku arkusza. Robimy to za pomocą menu Plik/Nowy/Strona lub sieć Web (File/New/ Page or Web), który otwiera Okno zadań (Task Panel). Z Okna zadań (Task Panel) znajdującego się po prawej stronie wybieramy opcję Szablony strony (Page Templates). W nowo otwartym oknie przechodzimy do zakładki Arkusze stylów (Style Sheets), na któ- rej znajduje się kilkanaście zdefiniowanych typowych arkuszy oraz jeden pusty Normalny arkusz stylów (Normal Style Sheet), z którego będziemy korzystać. Rysunek 3.2. Nowy arkusz stylów Został utworzony nowy dokument, który jest widoczny na pasku zakładek plików otwartych w MS FrontPage 2002/XP PL, oraz pasek z przyciskiem Styl (Style), dzięki któremu możemy definiować nowe wpisy do arkusza. Rysunek 3.3. Definicja wpisów Na powyższym rysunku dokładnie widać spis wszystkich dostępnych znaczników, które możemy dowolnie formatować za pomocą przycisku Modyfikuj (Modify). Formatowanie odbywa się za pomocą nowo otwartego okna. Rysunek 3.4. Definicja wpisów — ciąg dalszy Za pomocą przycisku Format możemy zmienić następujące atrybuty dla każdego z obiektów: L Czcionka (Font) — krój, wygląd, wielkość, kolor i inne właściwości, ozmawiane przy okazji właściwości tekstu, L Akapit (Paragraph) — wszystkie właściwości bloków tekstu omawiane na pozczątku książki, L Obramowanie (Border) — obramowania i ramki dowolnych obiektów, L Numerowanie (Numbering) — właściwości list, L Pozycja (Position) — pozycjonowanie elementów. Dzięki opcjom Klasa (Class) i Identyfikator (ID) możemy w prosty sposób odwołać się do już istniejących klas lub ID (o których napiszę za zchwilę). Po zatwierdzeniu wszystkich deklaracji w naszym arkuszu powinny pojawić się pierwsze wpisy, podobne do tych z powyższych przykładów. Selektory to podstawa CSS. Ich zadaniem jest wskazywanie obiektu, któremu przypi- sujemy jakąś wartość. Przykłady zastosowania selektorów znajdowały się przy opisie poszczególnych elementów CSS. Tutaj postaram się jeszcze raz wyjaśnić dokładniej rolę selektorów. Przykładem może być P : 0328(cid:31)0+6+ Selektor ten przypisze Arial jako czcionkę domyślną dlza każdego znacznika P . 82 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Specyfikacja CSS pozwala nam na grupowanie selektorów:  ..-3366/. Dzięki temu wszystkie nagłówki H1, H2, H3 będą miały kolor czerwony. Grupowanie selektorów może wyglądać również następujząco: . .  -3362+:  Z selektorami spotkaliśmy się w MS FrontPage 2002/XP PL wcześniej, przy omawia- niu przykładów, teraz jedynie dowiedzieliśmy się, że tak się nazywają i że można je dowolnie grupować. Prawie każdy znacznik języka HTML 4 zawiera atrybut o nazwie CLASS= , który od- powiada za jego formatowanie za pomocą CSS. Zasada jego działania jest bardzo pro- sta. W pliku arkusza stylów definiujemy jakąś klasę, którą potem możemy wywołać za pomocą atrybutu CLASS= w dowolnym znaczniku. Metoda wywołania nie jest skom- plikowana: 4-+772+;+)+7 4 W MS FrontPage 2002/XP PL przypisywanie klas dla elementów HTML polega na przejściu do tekstowego trybu edycji i przypisaniu odpowiedniemu elementowi atrybutu class= . By ograniczyć zakres poszukiwań, możemy posłużyć się prostą sztuczką: w try- bie graficznym ustawiamy kursor w miejscu, dla którego ma być przypisana klasa i dopie- ro wtedy przechodzimy do zakładki HTML. Kursor zostanie automatycznie umieszczony w odpowiednim miejscu. Konstrukcja klasy w arkuszu stylów również nie powiznna sprawić problemu: 2+;+)+7 0328(cid:31)7/ 48 Definiowanie klas może też przybierać następującą posztać: 0328(cid:31)7/ 48 +0328(cid:31)7/48 Taka konstrukcja określa dla każdego znacznika P domyślną wielkość na 10 pt. Na- tomiast druga linia,P.maly {font-size: 8 pt;}, tworzy klasę definiującą tekst o wielkości 8 pt. W tworzonym dokumencie wszystkie elementy zamknięte w znaczniku P będą posiadały wielkość 10 pt, natomiast elementy zamknięte w P class= maly pokażą tekst o wielkości 8 pt. Jak widzimy, jest to rozwiązanie bardzo wygodne; pozwala ono różnicować wyglądy poszczególnych selektorów. Edytor MS FrontPage 2002/XP PL pozwala nam definiować własne klasy. Proces defi- niowania polega na kliknięciu przycisku Styl (Style) i wybraniu przycisku Nowy (New) z nowo otwartego okna (pojęcie to jest nam dobrze zznane). Rysunek 3.5. Definicja klasy Proces definicji naszej klasy polega na wpisaniu w polu Nazwa selektor (Name (selector)) dowolnej nazwy i określeniu odpowiednich reguł za pozmocą przycisku Format. Kaskadowe arkusze stylów posiadają pewne zdefiniowane, standardowe klasy — pseudo- klasy. W pierwszej specyfikacji CSS zdefiniowano ich kilka; odnoszą się one do nastę- pujących elementów: tekstu i odnośników. Najpierw zajmiemy się najpopularniejszymi pseudoklasami, czyli odnośnikami. Każdy na pewno widział na stronach odnośniki bez podkreśleń, które często zmieniają kolor w chwili przesuwania ponad nimi kursora myszy (efekt bajecznie prosty do uzy- skania za pomocą CSS i pseudoklas). Za deklarowanie wyglądu odnośników odpowia- dają następujące pseudoklasy:   #$ $  Pseudoklasy używa się następująco: 2 (cid:2)78+2.+6.3;3.232(cid:2)  0328(cid:31)7/ 48 -3362+:  :78/. (cid:2)3.2323.;/.32(cid:2)  0328(cid:31)7/ 48 -336,9/  3:/6 (cid:2)3.232432+/-+292+2/137(cid:2)  0328(cid:31)7/ 48 -3366/.  84 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Efektem działania takiej definicji będzie zmiana koloru wszystkich odnośników na stronie na NAVY — granat i wielkość 10 pt, a także zmiana odwiedzonych odnośników na BLUE — niebieski oraz zmiana odnośników, nad którymi znajduje się kursor myszy, na RED — czerwony. Efekt działania definicji jest nam już znany; wiemy, że odnosi się on globalnie do każ- dego odnośnika na stronie, na której używamy tego arkusza. Na pewno wielu z Was na- suwa się pytanie, co zrobić, by zróżnicować odnośniki w ramach jednej strony. Sprawa wbrew pozorom jest stosunkowo prosta: musimy utworzyć dodatkowe klasy dla na- szych odnośników. Przykład poniżej przedstawia, jak to powinno wyglądazć.  +2 (cid:2)3.2322/73.78+2.+6.3;/13(cid:2)  0328(cid:31)7/48   +:78/. (cid:2)3.2322/73.3.;/.32/13(cid:2)  0328(cid:31)7/48   +3:/6 (cid:2)3.2322/7432+/-+292+2/137+(cid:2)  0328(cid:31)7/48  Zwróćmy uwagę, że przy deklaracji nowej klasy użyliśmy już tylko innych wielkości, gdyż chcieliśmy jedynie pomniejszyć nasz odnośnik. Pozostałe wartości zostały bez zmian przeniesione z głównej definicji wyglądu odnośników. O dziedziczeniu należy pamiętać i warto z niego korzystać w pracy nad dokuzmentami HTML. MS FrontPage 2002/XP PL posiada pseudoklasy na liście dostępnych znaczników, dzięki czemu będziemy w stanie je sformatować w bardzo prosty sposób. Dodatkowo, w oknie właściwości strony znajduje się odpowiednia opcja, pozwalająca na włączenie zmian odnośników po najechaniu na nie kursorem myszy. Moim zdaniem lepiej jednak zdefiniować odpowiednie wpisy w arkuszu samodzielnize. W przeciwieństwie do klas, które są dziedziczone przez kolejne znaczniki, ID odnosi się tylko do jednego znacznika, któremu przypiszemy odpowiednie ID. Definiowanie ID w arkuszu stylów wygląda tak: /32-33616//2 Wywołanie takiego ID w dokumencie przedstawia się następująco: 4/32$/28/78,G.//32 4 Efektem działania takiej konstrukcji będzie wyświetlenie zawartości P w kolorze zielonym. Zakres działania ID ograniczy się wyłącznie do tego jednego P . Oczywiście, działać będzie również taka deklaracja: /02-+;+6979 /32-33616//2 ;3o+2/;$ 4##/32$/28/78,G.//32 4 dla tego jednego znacznika P , ponieważ zadeklarowaliśmy klasę, ale nie przypisali- śmy do niej żadnego selektora. Rozwiązanie to jest nieco mniej eleganckie, ale efek- tywne. Jak na pewno zaobserwowałeś, przy formatowaniu jednego selektora lub klasy starałem się skrupulatnie mieszać różne elementy CSS. Chciałem uzmysłowić Wam, jak potężne możliwości daje CSS. Na koniec podam jeszcze przykład, który nie powinien być dla Was zaskoczeniem. 2 (cid:2)3.2322/73.78+2.+6.3;/13(cid:2)  0328(cid:31)7/48 -336,9/  :78/. (cid:2)3.2322/73.3.;/.32/13(cid:2)  0328(cid:31)7/48 -33616//2 ,+-16392.(cid:31)-3367:/6  3:/6 (cid:2)3.2322/7432+/-+292+2/137(cid:2)  0328(cid:31)7/48 -3366/. ,+-16392.(cid:31)-336/3;  Jak widać, określiłem kolor dla tła pod naszymi odnośnikami. Domyślnie odnośnik nie posiada żadnego zdefiniowanego koloru dla tła. Odwiedzony odnośnik będzie miał tło zielone, a odnośnik, nad którym właśnie znajduje się kursor myszki, zmieni kolor tła na żółty, natomiast tekst będzie czerwony. Skoro potrafimy w tak prosty sposób zmieniać kolor tła odnośnika, to wydaje nam się, że nie musimy już nikogo przekonywać do sto- sowania CSS. Niestety, klasa :Hover nie jest obsługiwana przez przeglądarkę Netscape Navigator, ale mam nadzieję, że zostanie ona szybko wprowadzona do użytku (wersja beta szóstego wydania już interpretuje tę klasę). Warto wspomnieć, że w celu uzyskania podobnego efektu (bez użycia CSS) musielibyśmy sięgać po Java Script i pisać dość rozbudowany skrypt, który musiałby przewidywać dodatkowo rodzaj zastosowanej przeglądarki. MS FrontPage 2002/XP PL nie obsługuje wielu elementów CSS, ale nic nie stoi na przeszkodzie, byśmy sami dopisali je do naszego arkusza ręcznie. gNależy przy tym zachować konstrukcję stosowaną przez edytor. Poniżej, w tabelach, znajduje się opis poszczególnych deklaracji CSS i dostępnych wartości. Dodatkowo znajdują się w niej proste przykzłady dla każdego z elementów. 86 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Tabela 3.1. Właściwości czcionek Deklaracja Dostępne wartości font-family Dostępne kroje pisma: p {font-family: Verdana, Arial;} font-style font-variant font-weight font-size normal | italic | oblique | inherit p {font-style: italic;} normal | small-caps | inherit p {font-variant: small-caps;} normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit p {font-weight: bold;} absolute-size | relative-size | length | percentage | inherit p {font-size: 10pt;} Przykładem definicji rozbudowanego arkusza, określającego parametry czcionki we- wnątrz akapitu P , może być poniższy fragment listy. Efektem jej działania będzie wyświetlenie tekstu za pomocą pogrubionej czcionki VERzDANA o wielkości 16 pt.  0328(cid:31)0+ /6.+2+  0328(cid:31)7/ 48 0328(cid:31);/18,3.  Fragment ten może również dotyczyć innych elementów,z np.: .  0328(cid:31)0+ /6.+2+  0328(cid:31)7/ 48 0328(cid:31);/18,3.  Ten wpis będzie formatował bloki tekstu zamknięte w P oraz DIV . O wygodzie przedstawionego powyżej wpisu nie muszę chyba nikogzo przekonywać. Tabela 3.2. Właściwości tekstu Deklaracja Dostępne wartości text-decoration text-transform text-align text-indent vertical-align letter-spacing word-spacing none | underline | overline | line-through | blink p {text-decoration: underline;} capitalize | uppercase | lowercase | none p {text-transform: capitalize;} left | right | center | justify p {text-align: left;} length | percentage p {text-indent: 3pt;} baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage p {vertical-align: baseline;} normal | length p {letter-spacing: 3pt;} normal | length p {word-spacing: 3pt;} Nasz tekst możemy również dowolnie formatować za pomocą CSS — podkreślać, prze- kreślać, regulować odstępy pomiędzy słowami i znakami, równać do lewej, prawej, środkować i justować. Dodatkowo całość możemy również pozycjonować w pionie, co jest szczególnie przydatne przy pozycjonowaniu tekstu w tabeli. Przykładem zastoso- wania formatowania właściwości tekstu jest poniższy wzpis: $  8/8(cid:31)+12-/28/6 :/68-+(cid:31)+12,3883  Dzięki takiemu arkuszowi będziemy mogli wyśrodkować zawartość komórek w tabeli zarówno w pionie, jak i w poziomie. Tabela 3.3. Kolor i tło dokumentu Deklaracja Dostępne wartości color deklaracje koloru w postaci: #FFFFFF p {color: #FFCCFF;} background-color background-image background-repeat background-attachment background-position color | transparent | inherit h1 {background-color: #FF00CC} url | none | inherit body {background-image: url(obrazek.jpg)} repeat | repeat-x | repeat-y | no-repeat | inherit body {background-repeat: repeat-y;} scroll | fixed | inherit body {background-image: url(imagefilename);} background-attachment: fixed;} top | center | bottom | left | center | right percentage | length | percentage | length background-position: 0 3cm; background-position: 100 ; background-position: 100 100 ; Definicja kolorów i tła jest szczególnie ważna przy projektowaniu stron. Każdy chce mieć możliwość zdefiniowania tła strony, tła tabeli, tła będącego obrazkiem, a także koloru tekstu. Poniżej podaję przykład, w którym połączyłem kilka wcześniej pozna- nych właściwości:   ,+-16392.(cid:31)-336;8/ ,+-16392.(cid:31)+1/96M+1/7 2+;+ 10N ,+-16392.(cid:31)6/4/+823(cid:31)6/4/+8 -336,+-   0328(cid:31)78/ /6.+2+ 0328(cid:31)7/ 48 8/8(cid:31)+129780 -3362+:  88 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne Taka lista CSS pozwoliła nam określić następujące właściwości: BODY L kolor tła — biały; L obrazek tła — nazwa.gif; L brak powtarzania tła; L domyślny kolor tekstu — czarny. P L czcionka — Verdana; L wielkość — 12 pt; L tekst — wyjustowany; L kolor tekstu akapitu — granatowy. Tabela 3.4. Marginesy Deklaracja Dostępne wartości margin-top margin-right margin-left margin-bottom margin padding-top padding-right padding-bottom padding-left padding length | percentage | auto | inherit body {margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em;} length | percentage | auto | inherit BODY {margin: 1em, 2em;} length | percentage | auto | inherit H1 {margin-top: 2em;} length | percentage | length | percentage | inherit H1 {padding: 1em, 2em;} Wprowadzenie formatowania marginesów za pomocą CSS było wielkim krokiem na- przód. Wyobraźmy sobie, że tworzymy stronę zawierającą kilka akapitów tekstu i sytu- acja wymaga od nas, by co drugi akapit był w całości wcięty bardziej niż pozostałe. Wobec braku CSS musimy użyć tabeli. Poniżej przedstawiam przykład.z Treść pierwszego akapitu bez wcięcia... Treść drugiego akapitu wciętego w całości w stosunkug do pierwszego... Treść trzeciego akapitu bez wcięcia.... Dla takiej tabeli musieliśmy określić krawędzie jako niewidoczne i wówczas formato- wanie zostało wykonane. Dziś z pomocą przychodzi nam CSS, możemy zapomnieć o stosowaniu tabeli. Poniżej przedstawiam ten sam przykład zdefiniowany w oparcizu o CSS. Definicja w arkuszu stylów:  0328(cid:31)7/ 48 +612(cid:31)/08    ;-/8  +612(cid:31)/08  Wygląd kodu HTML:  $6/4/6;7/13++489,/;-G-+ 4  -+77;-/8$6/.691/13++489;-G8/13;-+o3-;7837929.3 4/6;7/13    $6/86/-/13++489,/;-G-+  Jak widać, definiowanie oparte na CSS jest znacznie wygodniejsze niż definiowanie ta- beli. Warto zwrócić uwagę, że w przypadku pierwszego rozwiązania, formatowanie tek- stu wewnątrz tabeli za pomocą CSS może nam przysporzyć wielu problemów z prze- glądarką Netscape Navigator. Natomiast drugie rozwiązanie jest znacznie bardziej dla niej przyjazne. Tabela 3.5. Listy Deklaracja Dostępne wartości list-style-type list-style-image list-style-position list-style disc | circle | square | decimal | lower-roman | upper-rogman | lower-alpha | upper-alpha | none OL {list-style-type: lower-alpha;} inside | outside UL {list-style-image: url(images/obrazek.gif)} length | percentage | auto | inherit UL {list-style: outside} [disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none] || [inside | outside] || [ url | none] UL {list-style: upper-roman inside} Przy okazji omawiania list w języku HTML wspominałem, że CSS oferuje dość rozbu- dowane wsparcie dla formatowania tego elementu. Domyślnie HTML może definiować listy posortowane OL oraz nieposortowane UL . Jeśli chodzi o listy sortowane, domyślnie są one numerowane (1, 2, 3...), a uzyskanie list numerowanych za pomocą liczb było możliwe dzięki atrybutowi TYPE= . Jednak HTML 4 uznaje ten atrybut za przestarzały i sugeruje użycie do tego celu CSS. Defi- niowanie listy numerowanej za pomocą liter w CSS wygląda następująco: 90 MS FrontPage 2002/XP PL. Ćwiczenia praktyczne   78(cid:31)78/(cid:31)84/3;/6(cid:31)+4+ -3366/. 8/8(cid:31)+12/08 +612(cid:31)/08  Tym wpisem do arkusza stylów określiliśmy, że nasza lista OL ma być numerowana za pomocą małych liter. Lista będzie miała kolor czerwony i zostanie wyrównana do- myślnie do lewego marginesu, który ma być wcięty o 5 w stosunku do pozostałych elementów na stronie. Jak zauważyliście, rozdział ten nie zawiera ćwiczeń, ale nie martwcie się, wszystko nadrobimy w trakcie realizacji projektu z kolejnegoz rozdziału.
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

FrontPage 2002/XP PL. Ćwiczenia praktyczne
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ą: