Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00709 010497 11036765 na godz. na dobę w sumie
Tworzenie stron WWW. Ilustrowany przewodnik - książka
Tworzenie stron WWW. Ilustrowany przewodnik - książka
Autor: Liczba stron: 184
Wydawca: Helion Język publikacji: polski
ISBN: 83-246-0608-4 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-75%), audiobook).

Stwórz i opublikuj własną stronę WWW

Trudno wyobrazić sobie współczesny świat bez internetu. Poczta elektroniczna, Gadu-Gadu, Skype, sklepy internetowe i portale są dziś równie powszechne jak kilkanaście lat temu radio i telewizja. Internet to potężne medium informacyjne i komunikacyjne. W dziesiątkach milionów witryn internetowych firmy prezentują swoją ofertę, organizacje polityczne -- swoje mniej lub bardziej niemożliwe do zrealizowania programy, a osoby prywatne -- swoje zainteresowania, fotografie i coraz częściej opowieści o własnym życiu. W sieci można znaleźć firmy oferujące nieodpłatnie konta, na których można opublikować witrynę WWW. Tylko jak ją zrobić?

W książce 'Tworzenie stron WWW. Ilustrowany przewodnik' znajdziesz odpowiedź na to pytanie. Czytając ją, poznasz wszystkie zagadnienia niezbędne do tego, aby Twoja witryna WWW pojawiła się w sieci. Dowiesz się, w jaki sposób stworzyć stronę WWW, korzystając z dostępnych w sieci narzędzi lub pisząc ją samodzielnie w języku HTML. Poznasz najpopularniejsze edytory służące do pisania kodu stron, nauczysz się przygotowywać grafikę na potrzeby sieci i rejestrować swoją witrynę w katalogach i wyszukiwarkach.

Przekonaj się, że zaprojektowanie witryny WWW
leży w zasięgu Twoich możliwości.

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. Ilustrowany przewodnik Autor: Aleksandra Tomaszewska-Adamarek ISBN: 83-246-0608-4 Format: A5, stron: 184 Stwórz i opublikuj w³asn¹ stronê WWW (cid:129) Wykorzystaj edytory wizualne (cid:129) Poznaj jêzyk HTML i JavaScript (cid:129) Umieœæ stronê w sieci Trudno wyobraziæ sobie wspó³czesny œwiat bez internetu. Poczta elektroniczna, Gadu-Gadu, Skype, sklepy internetowe i portale s¹ dziœ równie powszechne jak kilkanaœcie lat temu radio i telewizja. Internet to potê¿ne medium informacyjne i komunikacyjne. W dziesi¹tkach milionów witryn internetowych firmy prezentuj¹ swoj¹ ofertê, organizacje polityczne — swoje mniej lub bardziej niemo¿liwe do zrealizowania programy, a osoby prywatne — swoje zainteresowania, fotografie i coraz czêœciej opowieœci o w³asnym ¿yciu. W sieci mo¿na znaleŸæ firmy oferuj¹ce nieodp³atnie konta, na których mo¿na opublikowaæ witrynê WWW. Tylko jak j¹ zrobiæ? W ksi¹¿ce „Tworzenie stron WWW. Ilustrowany przewodnik” znajdziesz odpowiedŸ na to pytanie. Czytaj¹c j¹, poznasz wszystkie zagadnienia niezbêdne do tego, aby Twoja witryna WWW pojawi³a siê w sieci. Dowiesz siê, w jaki sposób stworzyæ stronê WWW, korzystaj¹c z dostêpnych w sieci narzêdzi lub pisz¹c j¹ samodzielnie w jêzyku HTML. Poznasz najpopularniejsze edytory s³u¿¹ce do pisania kodu stron, nauczysz siê przygotowywaæ grafikê na potrzeby sieci i rejestrowaæ swoj¹ witrynê w katalogach i wyszukiwarkach. (cid:129) Tworzenie w³asnego blogu (cid:129) Edytory kodu i narzêdzia wizualne (cid:129) Przetwarzanie grafiki (cid:129) Elementy tekstowe (cid:129) Tworzenie formularzy (cid:129) Formatowanie stron za pomoc¹ arkuszy stylów (cid:129) Tworzenie elementów dynamicznych w JavaScript (cid:129) Przygotowywanie animacji w programie Macromedia Flash (cid:129) Rejestracja witryny w wyszukiwarkach Przekonaj siê, ¿e zaprojektowanie witryny WWW Spis treści Wstęp..............................................................................................................6 Rozdział 1. Trzy,.dwa,.jeden….START!.................................................................. 9 Blog...........................................................................................................10 Serwisy.stron.WWW..................................................................................16 Rozdział 2. Edytory WYSIWYG, czyli chłopcy od brudnej roboty....................... 22 Edycja kodu...............................................................................................4 Szablony....................................................................................................40 Zarządzanie szablonami...........................................................................4 Rozdział 3. Grafika................................................................................................44 Dodawanie obrazków do strony................................................................49 Tworzenie grafiki.......................................................................................54 Kadrowanie...............................................................................................56 Photoshop.............................................................................................56 Fireworks...............................................................................................56 Zmiana wielkości i rozdzielczości..............................................................57 Photoshop.............................................................................................57 Fireworks...............................................................................................57 Obracanie..................................................................................................58 Photoshop.............................................................................................58 Fireworks...............................................................................................58 Wyostrzanie i rozmazywanie.....................................................................59 Photoshop.............................................................................................59 Fireworks...............................................................................................59 Stosowanie filtrów efektów artystycznych.................................................61 Photoshop.............................................................................................61 Fireworks...............................................................................................61 Darmowa grafika.......................................................................................62 Tworzenie elementów rollover...................................................................64 Dzielenie obrazów na fragmenty...............................................................67  Tworzenie stron WWW. Ilustrowany przewodnik Rozdział 4. HTML – język Internetu...............................................................70 Podstawy i struktura dokumentu...............................................................71 Polecenia w nagłówku...........................................................................7 Ciało dokumentu...................................................................................75 Nagłówki................................................................................................75 Akapity...................................................................................................76 Cytaty....................................................................................................76 Listy.......................................................................................................77 Łącza.....................................................................................................78 Tabele....................................................................................................80 Formularze............................................................................................8 Pole.INPUT.......................................................................................8 Pole.SELECT....................................................................................84 Pole.TEXTAREA...............................................................................84 Ramki....................................................................................................86 Adresowanie dokumentów wewnątrz ramek.........................................88 Dodatkowe.znaczniki.............................................................................88 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS...........................90 Formatowanie ...........................................................................................98 Pionowe i poziome wyrównanie tekstu..................................................98 Wcięcie pierwszego wiersza akapitu.....................................................98 Odstępy.................................................................................................98 Dekoracja tekstu....................................................................................99 Małe i wielkie litery..............................................................................100 Formatowanie wyglądu czcionki..........................................................100 Kolor i tło.............................................................................................104 Marginesy............................................................................................105 Programy do tworzenia arkuszy stylów...................................................109 Rozdział 6. Tworzenie dynamicznych stron WWW, czyli JavaScript w akcji............................................................. 111 Typy danych............................................................................................ 114 Boolean............................................................................................... 114 Number................................................................................................ 114 String................................................................................................... 114 Null i Undefined....................................................................................... 115 Wyrażenia i warunki................................................................................ 116 Inne operatory......................................................................................... 118 Wprowadzanie poleceń........................................................................... 119 4 Spis treści Wprowadzanie poleceń w elemencie SCRIPT........................................120 Łączenie poleceń w funkcje....................................................................12 Sterowanie przepływem..........................................................................125 if...else.................................................................................................125 while....................................................................................................126 do...while.............................................................................................126 for........................................................................................................126 break i continue...................................................................................127 switch...................................................................................................127 Okna........................................................................................................129 Tworzenie nowego okna przeglądarki.....................................................11 Uruchamianie skryptów za pomocą zdarzeń...........................................1 Rozdział 7. Animacja Flash................................................................................16 Przygotowywanie grafiki..........................................................................17 Proste obiekty geometryczne..............................................................19 Wypełnienie.........................................................................................141 Linie.....................................................................................................144 Transformacje......................................................................................144 Skalowanie i obracanie.......................................................................145 Przekształcenia numeryczne...............................................................146 Tekst....................................................................................................146 Animacje..............................................................................................147 Przesuwanie grafiki po ścieżce...........................................................152 Dźwięk.....................................................................................................156 Eksportowanie i publikowanie filmów......................................................158 Wskazówki pomocne w optymalizowaniu animacji Flash.......................166 Rozdział 8. Promocja..................................................................................161 Wyszukiwarki internetowe.......................................................................162 Rejestracja..............................................................................................165 Element TITLE.....................................................................................165 Reklama..................................................................................................169 Katalogi.internetowe................................................................................171 Ogłoszenia prasowe................................................................................172 Poczta.elektroniczna...............................................................................17 Banery reklamowe...................................................................................174 Agencje reklamowe.................................................................................176 Skorowidz....................................................................................................177 5 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Przyciski, paski menu, zdjęcia, obrazy — nieodłączne części stron WWW. Wiesz już, jak je tworzyć i jak budować z nich całość za pomocą edytorów teks- towych oraz programów WYSIWYG. Znasz podstawy języka HTML, a teraz nadszedł czas, aby wyjaśnić, co to są te kaskadowe arkusze stylów, które wielo- krotnie pojawiały się w poprzednich roz- działach. W Paryżu lub Nowym Jorku określenie „mieć styl” oznacza, że cho- dzisz w butach od Gucciego, marynar- kach od Armaniego i dżinsach od Mar- ca Jacobsa. Na szczęście w wirtualnym świecie styl kosztuje dużo mniej. Aby mieć styl, wystarczy się zapoznać ze specyfikacją kaskadowych arkuszy sty- lów i stosować tę technologię do budowy tworzonych stron. Kaskadowe arkusze stylów (ang. casca- ding style sheets — CSS) są stosowane do formatowania stron i pozwalają uzy- skać doskonałą kontrolę nad wyglądem całego dokumentu. Sensowność korzy- stania z kaskadowych arkuszy stylów nietrudno udowodnić — wyobraź sobie witrynę składającą się z dużej liczby stron WWW, nad którą pracuje cała gru- pa programistów. Mając już wyobraże- 90 nie o stopniu skomplikowania zadania polegającego na stworzeniu kilku stron, na których używana będzie ta sama sty- listyka — krój, kolor, wielkość czcionki, kolorystyka elementów czy wygląd ta- bel, wyobraź sobie, jak trudno jest zapa- nować nad tymi wszystkimi elementami, gdy masz do ogarnięcia kilkaset stron projektowanych przez kilka różnych osób. Korzystanie z kaskadowych arkuszy sty- lów oznacza również oszczędność miej- sca, ponieważ styl każdego elementu jest definiowany jednokrotnie w pliku defi- nicji stylów, a nie przy każdym wystą- pieniu elementu na stronie, czyli w przy- padku takich elementów jak na przykład akapit czy nagłówek kilkadziesiąt razy na każdej stronie. Wskazówka Szczegółowe informacje na temat kaska- dowych arkuszy stylów znajdziesz pod adresem: http://www.w3.org/TR/REC-CSS 2 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Definicje stylów można wprowadzać do opisu strony na kilka sposobów, które teraz omówię. Pamiętaj, że każdy z tych sposobów ma swoje wady i zalety, a wy- bór najlepszego sposobu zależy od prefe- rencji programisty oraz sytuacji, w której styl ma być zastosowany. Sposób 1. p style=”color: blue; font-family: Arial; font-size: 12pt; ” Zawartość akapitu itd. itd. itd. /p Definicja stylu jest umieszczona bezpo- średnio w znaczniku. Zaletą tego rozwią- zania jest prostota jego użycia. Styl jest umieszczony wewnątrz znacznika tak, jak umieściłbyś tam odpowiednie atry- buty znacznika. Wadą jest konieczność powtarzania tej definicji dla każdego kolejnego znacznika umieszczanego na stronie. Sposób 2. html head style type=”text/css” p { color: blue; font-family: Arial; font-size: 12pt; } /style /head body p Pierwszy akapit /p p Drugi akapit /p /body /html Definicja stylu jest umieszczona w na- główku dokumentu. Tak zdefiniowany styl odnosi się do wszystkich znaczni- ków tego typu w dokumencie. W naszym przykładzie styl dotyczy wszystkich aka- pitów, które zostaną umieszczone w do- kumencie. Ale jeśli znajdą się w nim również nagłówki, obrazy czy tabele, to definicja stylu nie będzie się już do nich odnosić — będą one wyświetlane zgodnie z domyślnymi wartościami. Ta- kie rozwiązanie pozwala na jednokrotną definicję stylu dla elementu w obrębie strony. Jeśli jednak zechcesz użyć tego samego stylu na innych stronach, to mu- sisz go ponownie zdefiniować w nagłów- kach tych stron. Sposób 3. html head link href=”style.css” rel=”stylesheet” type=”text/css” /head body p Pierwszy akapit /p p Drugi akapit /p /body /html 91 Tworzenie stron WWW. Ilustrowany przewodnik Trzecim sposobem jest umieszczenie definicji stylów w osobnym pliku o roz- szerzeniu *.css, który jest powiązany z dokumentem strony poprzez użycie znacznika LINK . Atrybut href wskazuje ścieżkę dostępu do pliku arkuszy stylów. Wywołanie zewnętrznego arkusza sty- lów znajduje się w nagłówku i dotyczy całej strony WWW, czyli wszystkich ele- mentów danego typu. W pliku zewnętrznego arkusza stylów znajdują się wyłącznie wpisy definiu- jące style określonych elementów. Do tak zdefiniowanego arkusza można pod- łączyć wiele stron witryny i wszystkie będą miały zdefiniowane te same style. Dzięki temu w jednym miejscu możesz definiować i zarządzać wyglądem całej witryny. Arkusz stylów może mieć w tym wypad- ku postać: p { color: blue; font-family: Arial; font-size: 12pt; • za pomocą zewnętrznego arkusza stylów — styl jest definiowany dla danego typu elementu dla wszystkich stron powiązanych z arkuszem. Filozofia kaskadowych arkuszy stylów łączy w sobie elastyczny sposób kontro- li stylów stron WWW i poszczególnych elementów na stronach z odpowiednią hierarchią stylów, która pozwala unikać konfliktów, jeśli style elementów są de- finiowane na kilku poziomach. Sposób 1. (atrybut style) ma najwyższą rangę w hierarchii, sposób 2. (element STYLE) ma wyższą rangę niż styl definiowany przez zewnętrzny arkusz stylów, ale niższą niż atrybut style. Jak łatwo się domyślić, naj- niższą rangę ma styl przypisywany przez zewnętrzny arkusz stylów. Takie rozwią- zanie pozwala uniknąć konfliktów, które Wskazówka Pamiętaj, że zarówno element STYLE , jak i element LINK muszą być umiesz- czone wewnątrz nagłówka strony. } Kaskadowe arkusze stylów nieprzypad- kowo noszą taką nazwę, bo jak wiesz, style można wprowadzać na trzech róż- nych poziomach: • za pomocą atrybutu style (sposób 1.) • za pomocą elementu STYLE (sposób 2.) — styl definiowany kolejno dla po- szczególnych elementów na stronie; — styl elementu jest określany dla ca- łej strony; 92 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS mogłyby wyniknąć, jeśli na stronie uży- libyśmy wszystkich trzech metod defi- niowania stylów. Hierarchia — struktura stylów — przypomina stopnie wodospa- du, stąd bierze się w nazwie określenie kaskadowy. Hierarchizacja stylów obejmuje nie tyl- ko różne sposoby definiowania stylów, ale również sytuację, gdy do jednej stro- ny podłączonych jest kilka różnych ze- wnętrznych arkuszy stylów. Przeglądarka uwzględnia w takim wypadku kolejność wprowadzania stylów. Zewnętrzny ar- kusz wprowadzony jako pierwszy do- minuje nad arkuszem, który jest wpro- wadzony jako następny w kolejności. Problem polega na tym, że jeśli w ze- wnętrznych arkuszach stylów występują wzajemne konflikty, trudno przewidzieć efekt graficzny, dopóki strona nie zosta- nie wyświetlona w przeglądarce. Do określenia wartości atrybutów arku- sze stylów wykorzystują względne i bez- względne jednostki miary oraz określone definicje kolorów. Jednostki względne: wana w oparciu o pojedyncze punkty świetlne monitora; • px — piksele — jednostka definio- • em — określa zależność pomiędzy • ex — proporcje do wysokości litery; • — procenty — określenie wielko- wysokością elementu a wielkością zdefiniowanej czcionki; ści względem wartości domyślnej. Wskazówka Istnieje także możliwość importowania ar- kusza stylów wewnątrz innego arkusza sty- lów. W tym celu należy użyć następującej konstrukcji: @import url(style.css) ; body {background-image: url(obraz. gif) ;} W takiej sytuacji importowany arkusz ma niższy priorytet niż arkusz, do którego im- port następuje. Jednostka em jest jednostką umowną, któ- ra jest równa innej zdefiniowanej wartości. Jeśli ustalimy wielkość czcionki na 12 pt, to 1em będzie równy właśnie tej ustalonej wartości, czyli 12 pt. Jeśli określę inny atrybut jako 2 em, będzie on dwukrotnoś- cią wcześniej zdefiniowanej wartości (czy- li w tym wypadku będzie to 24 pt). Jednostki bezwzględne: in — cale — jednostka najczęściej uży- wana w USA, rzadko używana w Polsce (1 in = 2,54 cm); pt — punkty — wywodzą się z typogra- fii, gdzie są standardową jednostką mia- ry (72 pt = 1 in); cm — centymetry — jednostka pochod- na systemu metrycznego, często stoso- wana w Europie; mm — milimetry — jednostka pochodna systemu metrycznego, często stosowana w Europie; pc — pica — jednostka wywodząca się z typografii (1 pica = 12 pt). 93 Tworzenie stron WWW. Ilustrowany przewodnik W kaskadowych arkuszach stylów moż- na definiować kolory poprzez użycie ich nazw angielskich, jak blue czy yellow. Wszystkie kolory, które nie zostały zde- finiowane przez użycie ich nazw, mu- szą być określone przez wykorzystanie modelu RGB. Polega on na przypisaniu liczb całkowitych z przedziału od 0 do 255 każdej z wartości składowych palety RGB. Na przykład color: rgb(0,12,255). Kolor można również zapisać, definiując procent nasycenia danej barwy, na przy- kład color: rgb(10 , 50 , 0 ). Kolor można również zapisać, stosując metodę szesnastkową, na przykład co- lor: #ff2c00. #000000 black #008000 green #C0C0C0 silver #00FF00 lime #808080 gray #808000 olive #FFFFFF white yellow #FFFF00 maroon #800000 #000080 navy #FF0000 red #0000FF blue purple #800080 teal #008080 fuchsia #FF00FF aqua #00FFFF 94 Schemat konstrukcji stylu można zapisać w następujący sposób: selektor {cecha: wartość; cecha: war- tość; itd.} języka HTML, np. p to paragraf, h1 — na- główek pierwszy, a table — tabela. • selektor — znacznik • cecha — wpis określony specyfi- kacją kaskadowych arkuszy stylów. Przykładowe właściwości określone przez specyfikację kaskadowych arku- szy stylów to background-color, bor- der-style, font-family itd. Wartość jest zazwyczaj przypisana do danej ce- chy, ale może się zdarzyć, że będzie po- dobna dla kilku zupełnie różnych cech. Ogólnie przyjmujemy, że selektor to dowol- ny znacznik języka HTML. Możemy jed- nak wyróżnić kilka rodzajów selektorów: • Selektory proste — selektor będący pojedynczym znacznikiem języka HTML, odnoszący się jedynie do tego elementu. Jest to najczęściej spotyka- ny rodzaj selektora. • Selektor uniwersalny — używany, • Potomek — selektor zbudowany gdy jakieś cechy i wartości są uniwer- salne i powinny dotyczyć wszystkich elementów na stronie. w oparciu o zależności panujące po- między poszczególnymi znacznikami języka HTML. Przykłady selektorów uniwersalnych: * {color: blue;} BODY {color: blue} Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Tak zapisane selektory działają dla wszystkich elementów strony — na- główki, akapity, listy itd. będą miały ko- lor niebieski. Przykłady potomków: p {color: blue} p span {font-style: italic} Kolor tekstu akapitu będzie niebieski, ale dodatkowo, jeśli wewnątrz akapitu pojawi się znacznik SPAN , to otoczony nim tekst będzie pochylony. Specyfikacja kaskadowych arkuszy stylów dopuszcza również możliwość grupowa- nia selektorów. Jeśli na przykład chciałbyś, aby wszystkie listy, które wystąpią w do- kumencie, miały kolor czerwony, zamiast definiować styl dla każdego typu listy mo- żesz zastosować następujący zapis: ul, ol, dl { color: red } Selektory ID pozwalają określić styl da- nego elementu na stronie, co pozwala zróżnicować formatowanie elementów tego samego typu na stronie. Wyobraź sobie, że wszystkie akapity na stronie mają mieć kolor granatowy, ale w jed- nym tekst powinien być czerwony, bo zawiera on szczególnie ważne informa- cje. W tym celu możesz zdefiniować sty- le w następujący sposób: p {color: navy} p#wazne {color: red} Aby utworzyć akapit zawierający tekst w kolorze czerwonym, musisz go wywo- łać przez użycie zdefiniowanej nazwy: p id=”wazny” Bardzo ważne informa- cje wyróżnione kolorem czerwonym /p Pozostałe akapity będziesz tworzyć, uży- wając znacznika p . Definicja identyfikatora może również mieć następującą postać: #duzy_czerwony_tekst {font-size: 20pt; color: red} Identyfikator ten możesz wywołać w do- wolnym znaczniku, korzystając z atrybu- tu ID. Uwaga Deklaracja selektora ID musi być poprze- dzona znakiem #, ale znaku tego nie używa się do odwoływania się do wartości atry- butu ID. Kolejnym podstawowym elementem specyfikacji kaskadowych arkuszy sty- lów jest klasa. Klasę konstruuje się w na- stępujący sposób: selektor.nazwa_klasy {cecha: wartość} Tak zdefiniowana klasa może być wy- wołana tylko w znaczniku, dla którego została utworzona. Aby wywołać klasę w dokumencie, nale- ży użyć atrybutu CLASS. 95 Tworzenie stron WWW. Ilustrowany przewodnik Na przykład tworząc klasę akapitu za- wierającego tekst w kolorze czerwonym, należy wpisać definicję: p.czerwony {color: red} Aby wywołać tę klasę w dokumencie, wpisz: p class=”czerwony” Czerwony tekst /p Uwaga Pamiętaj, aby definiując klasę, umieścić znak kropki między selektorem a nazwą klasy. Dziedziczenie i kaskadowość to cechy, którym kaskadowe arkusze stylów za- wdzięczają swój dynamiczny rozwój i pozycję. O kaskadowości rozmawia- liśmy już wcześniej w tym rozdziale, a teraz warto wspomnieć kilka słów o dziedziczeniu. Jeśli chcesz określić kolor tekstu w ko- mórce tabeli, zrobisz to przez użycie elementu TD. Możesz to również zro- bić przez użycie elementu TABLE i wte- dy wszystkie komórki tabeli, zarówno w wierszach, jak i w nagłówkach, będą miały określony dla tabeli kolor. Ale mo- żesz to również zrobić, definiując kolor tekstu dla elementu BODY. Wtedy nie tyl- ko tekst w komórkach tabeli będzie miał określony kolor, ale również tekst w aka- pitach, nagłówkach, listach będzie miał określony kolor. Na tym właśnie polega dziedziczenie w kaskadowych arkuszach stylów — elementy nadrzędne domyśl- nie przekazują zdefiniowane właściwo- ści elementom, które znajdują się niżej w hierarchii. W naszym przykładzie kolor niebieski dla tekstu zdefiniowany w elemencie BODY będzie oznaczał również niebieski kolor tekstu we wszystkich komórkach tabeli. Jeśli jednak określimy atrybut elementu podrzędnego, to nie przekaże on tej właściwości w górę hierarchii. W naszym przykładzie niebieski tekst zdefiniowany dla komórki tabeli nie będzie oznaczał niebieskiego tekstu dla wszystkich elementów wewnątrz ele- mentu BODY. 96 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Dziedziczenie działa domyślnie, czy- li dla tych elementów, dla których nie określono innej wartości właściwości niż ta, którą wskazano dla elementu nad- rzędnego. Możemy zdefiniować czerwo- ny tekst w komórkach tabeli, mimo że dla elementu BODY zdefiniowano, że tekst ma być niebieski. Większość ludzi ogranicza wykorzy- stanie kaskadowych arkuszy stylów do określania koloru tekstu w dokumencie lub kroju czcionki w nagłówkach. Jed- nak istnieją również ciekawsze zasto- sowania kaskadowych arkuszy stylów — mogą one służyć do tworzenia menu, do którego większość projektantów za- angażowałaby JavaScript. html head link rel=”stylesheet” href=”menu.css” type=”text/css” /head body ul id=”menu” li Firma ul li a href=” ” Misja /a /li li a href=” ” Historia /a /li li a href=” ” Kontakt /a /li /ul /li li Ofetra ul li a href=” ” Outsourcing /a /li li a href=” ” Konsulting /a /li li a href=” ” Projektowanie apli- kacji /a /li /ul /li /ul Menu utworzone bez użycia JavaScriptu, a wyłącznie z wykorzystaniem kaskado- wych arkuszy stylów /body /html menu.css: body{background-color: lightblue; font-size: larger} #menu { background-color: blue; float: left } #menu li {font-size: x-large; color: yellow} #menu li a {color: lime} #menu li a hover {color: navy; ba- ckground-color: white; font-size: larger } 97 Tworzenie stron WWW. Ilustrowany przewodnik Formatowanie Pionowe i poziome wyrównanie tekstu Specyfikacja kaskadowych arkuszy sty- lów pozwala na kontrolowanie następu- jących właściwości tekstu: Wcięcie pierwszego wiersza akapitu Aby uzyskać efekt wcięcia pierwszego wiersza w akapicie, należy użyć pole- cenia text-indent i określić głębokość tego wcięcia w jednostkach względnych lub bezwzględnych. Na przykład: p {text-indent: 1 cm} 98 • wyrównanie poziome i pionowe, • wcięcie, • odstępy między wierszami, • odstępy między wyrazami, • odstępy między literami, • dekoracja tekstu, • przekształcanie tekstu, • kontrola pustej przestrzeni. • do prawej — text-align: left, • do lewej — text-align: right, • wyśrodkowanie — text-align: • wyjustowanie bloku tekstu — text- • do góry — vertical-align: top, • do środka — vertical-align:middle, • do dołu — vertical-align: bottom, • indeks dolny — vertical-align: sub, • indeks górny — vetical-align: super. align: justify, center, Odstępy Za sterowanie odstępem pomiędzy wier- szami tekstu odpowiada polecenie line- height, które może przyjmować wartości dodatnie i ujemne. Przy użyciu wartości dodatnich odstępy między wierszami się zwiększają, a gdy użyjesz wartości ujem- nych, tekst będzie się zagęszczał. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Dekoracja tekstu Używając kaskadowych arkuszy stylów, twórcy stron mogą kontrolować wygląd tekstu za pomocą właściwości text-de- coration. Korzystając z tego parametru, mogą oni sprawić, że tekst będzie: podkreślony — text-decoration: un- derline, przekreślony — text-decoration: line- through, nadkreślony — text-decoration: over- line, migający — text-decoration: blink, nie będzie dekoracji tekstu — text-de- coration: none. Korzystając z tego parametru, możesz na przykład wyłączyć podkreślenia wszyst- kich łączy na stronie: A {text-decoration: none;} Kaskadowe arkusze stylów pozwalają również definiować odstępy pomiędzy poszczególnymi wyrazami tekstu. Właś- ciwość ta jest określana przez parametr word-spacing. Również i w tym wypadku możliwe jest podanie wartości dodatnich (zwiększenie odstępu między wyrazami) i ujemnych (zmniejszenie odstępu mię- dzy wyrazami). Twórcy kaskadowych arkuszy stylów poszli jeszcze o krok dalej i pozwolili projektantom stron wpływać nawet na odstęp liter w tekście. Efekt ten można uzyskać korzystając z polecenia letter- spacing. Na przykład: P {letter-spacing: 5pt} 99 Tworzenie stron WWW. Ilustrowany przewodnik Formatowanie wyglądu czcionki Zgodnie ze specyfikacją kaskadowych arkuszy stylów możliwe jest definiowane następujących własności czcionki: • rodzaju — atrybut font-family, • rozmiaru — atrybut font-size, • wagi — atrybut font-weight, • stylu — atrybut font-style. Pod pojęciem rodzaju czcionki kryje się rozróżnienie pomiędzy krojami czcionek lub rodzinami czcionek. Za pomocą ka- skadowych arkuszy stylów możesz okre- ślić rodzaj czcionki, z którego chcesz ko- rzystać przy wyświetlaniu wskazanego fragmentu tekstu. Konstrukcja stylu jest budowana według następującej definicji: selektor {font-family: nazwa własna czcionki lub nazwa rodzajowa czcionki} nazwa własna czcionki — np. Arial, Times New Roman, Verdana; na- zwa rodzajowa czcionki — jed- na z pięciu wartości: serif, sans-serif, monospace, cursive lub fantasy. Czcionki szeryfowe (serif) charakteryzują się tym, że każda litera posiada ozdobni- ki zwane szeryfami. Dodatkowo czcionki tego typu są proporcjonalne, gdyż każ- da litera ma inną szerokość. Typowym przedstawicielem tej grupy czcionek jest czcionka Times New Roman. Przykład czcionki szeryfowej (serif) Małe i wielkie litery Nie trudząc się zbytnio, możesz zamie- nić cały tekst na stronie na wielkie litery, chociaż oryginalnie w pliku jest on wpi- sany małymi literami. Na taką wygodę pozwala parametr text-transform. Może on przyjmować następujące wartości: lowercase, uppercase, • tylko duże litery — text-transform: • tylko małe litery — text-transform: • każda pierwsza litera w słowie jest • bez zmian — text-transform: none. zamieniana na wielką — text-trans- form: capitalize, Zamiast wstawiać do dokumentu twar- de spacje, możesz użyć parametru whi- te-space, który przyjmuje następujące wartości: • normal — spacje są redukowane do • pre — zachowanie dokładnej liczby • nowrap — blokuje automatyczne ła- spacji znajdujących się w tekście, manie wierszy. jednej, 100 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Czcionki typu fantasy to czcionki, których nie da się zakwalifikować do żadnego z opisanych powyżej rodzajów czcionek. Przykład czcionki typu fantasy Czcionki bezszeryfowe nie mają żadnych ozdobników na czcionce, ale również są proporcjonalne. Ten rodzaj czcionek jest najczęściej używany do tworzenia tekstu przeznaczonego do czytania (treść stro- ny). Typowym przedstawicielem tej gru- py czcionek jest czcionka Arial. Przykład czcionki bezszeryfowej (sans- serif) Czcionki tego typu są nieproporcjonalne, co oznacza, że każda litera ma taką samą szerokość. Ten rodzaj czcionek automa- tycznie kojarzy się z tekstem napisa- nym na maszynie do pisania. Typowym przedstawicielem tej grupy czcionek jest czcionka Courier New. Przykład czcionki typu monospace Uwaga Należy pamiętać, że czcionki zdefiniowane w arkuszu stylów są pobierane z kompu- tera użytkownika przeglądającego stronę. Jeśli w systemie nie ma zainstalowanej czcionki określonej przez arkusz stylów, przeglądarka zastąpi ją domyślną czcion- ką dla danego systemu. Dlatego przy pro- jektowaniu stron nie należy używać zbyt wymyślnych i rzadko spotykanych krojów czcionek. Warto trzymać się najpopular- niejszych, jak Times, Arial czy Helvetica. Czcionki tego typu charakteryzują się dużym podobieństwem do pisma od- ręcznego, mogą też zawierać różnego rodzaju ozdobniki w postaci zawijasów. Przykładem czcionki typu cursive może być czcionka Comic Sans MS. Przykład czcionki typu cursive Za rozmiar czcionki użytej na stronie odpowiada parametr font-size. Rozmiar czcionki może być podany w jednostkach względnych lub bezwzględnych. Możesz w związku z tym używać następujących definicji rozmiarów czcionki: • font-size: 20 pt, • font-size: 12 px, • font-size: 200 . Ciekawym rozwiązaniem jest również możliwość korzystania ze zdefiniowa- nych wielkości: xx-small, x-small, me- dium, large, x-large, xx-large. 101 Tworzenie stron WWW. Ilustrowany przewodnik Dodatkowo istnieje również możliwość określenia względnych rozmiarów za pomocą opcji larger oraz smaller. Na przykład: BODY {font-size: large;} .wiekszy { font-size: larger;} .mniejszy {font-size: smaller;} Pojęcie wagi czcionki odnosi się do jej grubości, a do definiowania grubości czcionki używany jest atrybut font- weight. Wartość może być określona za pomocą liczb z przedziału od 100 do 900 oraz nazw bold, bolder, lighter i normal. Styl czcionki jest definiowany przez pa- rametr font-style, który może przyjmo- wać jedną z dwóch wartości — italic (kursywa) lub oblique. 102 Kontrola nad wyglądem list za pomo- cą kaskadowych arkuszy stylów polega na sterowaniu właściwościami użytej czcionki oraz określaniu typu listy, uży- tego punktora graficznego oraz definio- waniu pozycji elementów listy wzglę- dem punktora. Typy list dzielimy na punktowane, nu- merowane i definicje. Od typu listy uza- leżnione są rodzaje punktorów, których możemy użyć w liście. Dla list nume- rowanych punktorami mogą być litery (małe lub wielkie) oraz cyfry (arabskie lub rzymskie). Dla list punktowanych możemy użyć takich punktorów jak kwadrat, koło lub okrąg. Typ listy określa właściwość list-sty- le-type. Dla listy punktowanej może on przyjmować wartości: • disc — punktor ma postać koła; • circle — punktor ma postać okręgu; • square — punktor ma postać kwadratu. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Dla listy numerowanej właściwość list- style-type może przyjmować wartości: liczbom rzymskim; • decimal — odpowiada liczbom arab- • lower-roman — odpowiada małym • upper-roman — odpowiada dużym • lower-alpha — odpowiada małym li- • upper-alpha — odpowiada dużym li- • none — brak wypunktowania. liczbom rzymskim; skim; terom; terom; Czasem może również wystąpić ko- nieczność regulacji położenia tekstu względem punktora. Do tego celu służy parametr list-style-position. Parametr list-style-position przyjmu- je następujące wartości: • outside — punktor znajduje się wy- • inside — punktor jest schowany raźnie poza listą; w tekście listy. Czasem projektanci chcą zabłysnąć zu- pełnie nową i niestandardową koncepcją listy, i właśnie na takie okazje twórcy ka- skadowych arkuszy stylów przygotowali parametr list-style-image, który po- zwala użyć jako punktora listy wskaza- nego pliku graficznego w formacie GIF, JPG lub PNG. Należy jednak pamiętać, że obrazek nie powinien być zbyt duży, gdyż będzie psuł efekt listy. Jeżeli lista zawiera krótkie wpisy w każ- dym punkcie, to różnica pomiędzy usta- wieniami parametru list-style-posi- tion będzie dla użytkownika trudna do zauważenia. Stosowanie tego parametru jest zasadne, jeśli każda pozycja listy składa się z więcej niż jednego wiersza. 103 ne i zostanie wyświetlone tylko jeden • no-repeat — tło nie będzie powiela- raz;• repeat-x — tło będzie powielane wy- • repeat-y — tło będzie powielane wy- • repeat — tło będzie powielane w pio- łączenie w poziomie; łącznie w pionie; nie i w poziomie. Tworzenie stron WWW. Ilustrowany przewodnik Kolor i tło Każdy element strony, który możesz sformatować przez użycie kaskadowych arkuszy stylów, może mieć zdefiniowany kolor i tło. Jako tło elementy mogą mieć zdefiniowany kolor lub użycie wskaza- nego obrazu. Aby przypisać kolor do elementu stro- ny, należy użyć parametru color i po- dać wartość koloru przez użycie jego zwyczajowej nazwy angielskiej, zapisu palety rgb lub określenie wartości szes- nastkowej koloru. Szczegółowe sposoby definiowania kolorów znajdziesz wcześ- niej w tym rozdziale. Tło elementu możesz określić poprzez podanie koloru tła: selektor {background-color: wartość;} lub wskazanie obrazu, który ma zostać użyty jako tło obiektu: selektor {background-image: URL (obraz.gif)} Obraz użyty jako tło elementu strony musi być zapisany w formacie JPG, GIF lub PNG. Jeśli rozmiar obrazu użytego jako tło elementu jest mniejszy niż rozmiar tego elementu, to obraz w tle będzie powiela- ny, aby wypełnić całkowicie tło. Jednak za pomocą kaskadowych arkuszy stylów możliwe jest wprowadzenie kontroli nad powielaniem oraz zablokowanie przewi- jania tła. 104 Za powielanie obrazu w obrębie ele- mentu, dla którego zdefiniowane jest tło będące obrazem, odpowiada parametr background-repeat, który może przyj- mować następujące wartości: Dodatkowo istnieje możliwość zatrzyma- nia tła, aby nie przesuwało się wraz z za- wartością całej strony. Do tego celu uży- wa się parametru background-attachment z ustawioną wartością fixed. Na przykład: BODY {background-image: url(tlo.gif); background-attachment: fixed; } Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Specyfikacja kaskadowych arkuszy sty- lów pozwala nie tylko zdefiniować spo- sób powtarzania obrazu umieszczonego w tle elementu, ale również pozwala określić pozycję obrazu względem okna przeglądarki lub jego lewego górnego rogu. Właściwość tę określa parametr background-position, który może przyj- mować jedną z następujących wartości: • center — tło wyśrodkowane, • left — tło z lewej strony okna, • right — tło z prawej strony okna, • top — tło znajduje się na górze okna, • bottom — tło znajduje się na dole • wartość liczbowa — określa odle- głość tła od lewego górnego rogu okna przeglądarki. okna, Wartości parametrów można ze sobą łą- czyć, dzięki czemu można na przykład umieścić tło w prawym górnym rogu okna przeglądarki, stosując zapis background-position: right top Jeśli zdecydowałeś się na użycie warto- ści liczbowych do określenia położenia tła, możesz stosować wartości względne lub bezwzględne. Szczegółowy opis wartości względnych i bezwzględnych stosowanych w kaska- dowych arkuszach stylów znajdziesz wcześniej w tym rozdziale. Marginesy Podczas tworzenia stron WWW można definiować dwa rodzaje marginesów: zewnętrzne i wewnętrzne. Marginesy zewnętrzne strony to margines lewy, pra- wy, górny i dolny. Do określania szero- kości marginesu należy użyć parametru margin w połączeniu z określeniem poło- żenia marginesu: • margin-left — lewy margines, • margin-right — prawy margines, • margin-top — górny margines, • margin-bottom — dolny margines. 105 Tworzenie stron WWW. Ilustrowany przewodnik Parametr przyjmuje wartości liczbowe względne i bezwzględne. Marginesy są definiowane w sposób niezależny od siebie (górny może być inny niż dolny, a prawy może być inny niż lewy) i mogą przyjmować wartości ujemne. Uwaga Pamiętaj, że marginesy różnych elemen- tów się sumują. Jeśli na przykład ustawisz lewy margines dla elementu BODY na 2 cm, a następnie umieścisz na stronie tabelę, dla której ustawisz lewy margines na 2 cm, to lewa krawędź tabeli zostanie odsunięta od lewej krawędzi strony o 4 cm. Przykładowa definicja marginesów na stronie: BODY { margin-left: 1 cm; margin-right: 2 cm; margin-top: 1 cm; margin-bottom: 3 cm; } Margines wewnętrzny jest definiowany za pomocą parametru padding w połą- czeniu z określeniem strony, której do- tyczy margines. Określenie strony na- leży podać w języku angielskim: right (prawy), left (lewy), top (górny) i bot- tom (dolny). 106 Wskazówka Jeśli chcesz ustawić identyczne wartości dla wszystkich marginesów, możesz to zro- bić, używając wyłącznie parametru mar- gin, na przykład: BODY { margin: 12 pt } Kaskadowe arkusze stylów pozwalają pozycjonować na stronie dowolne ele- menty. Możesz to robić na trzy sposoby: • bezwzględnie, • względnie, • statycznie. Pozycjonowanie bezwzględne polega na określaniu dokładnego położenia elementów względem lewego górnego rogu okna przeglądarki. Przyjmuje się, że lewy górny róg okna przeglądarki ma współrzędne (0, 0). Elementy na stronie pozycjonuje się przez podanie warto- ści trzech parametrów: position, left i top. Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Przykład pozycjonowania bezwzględne- go tabeli: TABLE { position: absolute; left: 100px; top: 150px; } Dla wybranych elementów można rów- nież zdefiniować ich wysokość i szero- kość. Do tego celu w kaskadowych ar- kuszach stylów służą parametry width i height. Korzystając z pozycjonowania i wymiarowania, możesz stworzyć dwa akapity tekstu, które będą umieszczone obok siebie i w określonym miejscu na stronie. Przykład wymiarowania elementów za pomocą kaskadowych arkuszy stylów: Pozycjonowanie względne definiuje się również przez podanie wartości dla parametrów left i top, ale właściwość position przyjmuje wartość relative. Pozycjonowanie względne odnosi się do domyślnego położenia elementu na stronie. Przykład definicji stylu dla pozycjono- wania względnego: DIV { position: absolute; top: 20px; left: 20px; } html head style type=”text/css” p.pierwszy {position: absolute; left: 20px; top: 20 px; width: 200px; } p.drugi {position: absolute; left: 250px; top: 20 px; width: 200px; } 107 Tworzenie stron WWW. Ilustrowany przewodnik Parametr border-style może przyjmo- wać następujące wartości: wykropkowanej; • none, hidden — ramka jest niewi- • dotted — ramka składa się z linii • solid — ramka składa się z linii • double — ramka składa się z linii • groove; ridge, outset — ramka daje • inset — ramka daje efekt wklęsło- efekt wypukłości elementu; ści elementu. doczna; ciągłej; podwójnej; Grubość obramowania elementów może mieć różną wartość i jest definiowana przez użycie parametru border-width. Również w przypadku tego parametru możemy definiować grubość krawędzi dla każdej strony elementu osobno, na przykład border-bottom-width. Kolor obramowania jest definiowany przez użycie parametru border-color. Jeśli chcesz, aby każda z krawędzi ele- mentu miała inny kolor, możesz zastoso- wać następujący kod: P{ border-top-color: blue; border-bottom-color: navy; border-left-color: #FF0080; border-right-color: #008080; border-style: double; } /style /head body p class=”pierwszy” Zawartość pierwszego akapitu, ... /p p class=”drugi” Zawartość drugiego akapitu, ... /p /body /html Obecność i wygląd obramowania takich elementów jak tabele czy akapity można również kontrolować z wykorzystaniem kaskadowych arkuszy stylów. Służy do tego celu parametr border używany w połączeniu z określeniem strony ele- mentu, której dotyczy definicja obramo- wania, np. border-left lub border-top. Parametrowi należy przypisać war- tość solid, aby określić, że obramo- wanie dla elementu ma być widoczne. Na przykład: TABLE{ border-left: solid; border- right: solid; border-top: solid; bor- der-bottom: solid} lub TABLE {border: solid;} Kolejnym parametrem określającym wygląd obramowania jest jego styl de- finiowany za pomocą parametru border- style. Parametr boder-style może być określo- ny dla całego elementu lub tylko dla nie- których jego stron, na przykład border- left-style lub border-top-style. 108 Rozdział 5. Co to znaczy mieć styl, czyli słów kilka o CSS Programy do tworzenia arkuszy stylów Mam dla Ciebie dobrą wiadomość — nie zawsze będziesz musiał tworzyć kaskado- we arkusze stylów samodzielnie, ponieważ istnieją programy, które zrobią za Ciebie „brudną robotę”. W takie funkcje wypo- sażone są dobre edytory WYSIWYG (jak na przykład Dreamweaver, o czym mó- wiliśmy szczegółowo w rozdziale 2.), ale programy do tworzenia arkuszy stylów możesz również pobrać z sie- ci. Do takich programów należy Style Master, którego testową wersję możesz pobrać pod adresem http://www.westciv. com/style_master. 109 Tworzenie stron WWW. Ilustrowany przewodnik http://www.w3schools.com/css/ Jeśli zainteresowała Cię tematyka kaska- dowych arkuszy stylów, możesz pogłę- bić swoją wiedzę, odwiedzając witryny poświęcone tematyce kaskadowych ar- kuszy stylów. http://www.csszengarden.com http://www.kurshtml.boo.pl/ 110
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Tworzenie stron WWW. Ilustrowany przewodnik
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ą: