Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00454 006291 13846947 na godz. na dobę w sumie
Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II - książka
Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II - książka
Autor: Liczba stron: 224
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-2621-2 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook (-25%), audiobook).

Twórz witryny, które będą rządzić w sieci

Projektować strony WWW może niemal każdy. Jednak tworzenia projektów wysokiej jakości to już spore wyzwanie. Internet jest pełen nieczytelnych, przeładowanych treścią albo grafiką witryn, które przynoszą swoim właścicielom więcej szkody niż pożytku. Technologia pędzi do przodu, podczas gdy niektórzy projektanci wyraźnie za nią nie nadążają. Jeśli chcesz mieć pewność, że efekty Twojej pracy to zawsze produkt najwyższej jakości, tak pod względem funkcjonalności, jak i estetyki, a także jeśli chcesz nauczyć się projektować witryny wyróżniające się spośród milionów przeciętnych półproduktów, nadszedł czas, by zacząć wreszcie działać z rozmachem.

W drugim wydaniu książki 'Tworzenie stron WWW. Ilustrowany przewodnik ' znajdziesz przydatne narzędzia, ułatwiające pracę projektantom stron WWW. Dowiesz się, dlaczego warto używać aplikacji Macromedia Dreamweaver oraz Adobe GoLive i czemu lepiej mieć kilka aplikacji, które robią to samo, niż jedną aplikację, która robi wszystko. Przeczytasz także o tym, czym różnią się formaty GIF, JPEG i PNG oraz którego z nich warto używać w jakiej sytuacji. Nauczysz się podstaw języków HTML i XHTML i odkryjesz, jak rozwinąć skrzydła w dziedzinie pisania skryptów, ponieważ poznasz bliżej język skryptowy JavaScript. W zakończeniu znajdziesz praktyczne porady dotyczące tego, co i w jakich proporcjach powinno znajdować się w doskonale zaprojektowanej witrynie.

Projektuj pierwszorzędne witryny i twórz nową jakość w Internecie

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

Darmowy fragment publikacji:

Tworzenie stron WWW. Ilustrowany przewodnik. Wydanie II Autor: Aleksandra Tomaszewska ISBN: 978-83-246-2621-2 Format: 140×208, stron: 224 Twórz witryny, które będą rządzić w sieci • Zaprzyjaźnij się z językiem CSS • Poznaj zasady przygotowywania i obróbki grafiki • Odkryj skuteczne sposoby na promocję w Internecie Projektować strony WWW może niemal każdy. Jednak tworzenia projektów wysokiej jakości to już spore wyzwanie. Internet jest pełen nieczytelnych, przeładowanych treścią albo grafiką witryn, które przynoszą swoim właścicielom więcej szkody niż pożytku. Technologia pędzi do przodu, podczas gdy niektórzy projektanci wyraźnie za nią nie nadążają. Jeśli chcesz mieć pewność, że efekty Twojej pracy to zawsze produkt najwyższej jakości, tak pod względem funkcjonalności, jak i estetyki, a także jeśli chcesz nauczyć się projektować witryny wyróżniające się spośród milionów przeciętnych półproduktów, nadszedł czas, by zacząć wreszcie działać z rozmachem. W drugim wydaniu książki „Tworzenie stron WWW. Ilustrowany przewodnik” znajdziesz przydatne narzędzia, ułatwiające pracę projektantom stron WWW. Dowiesz się, dlaczego warto używać aplikacji Macromedia Dreamweaver oraz Adobe GoLive i czemu lepiej mieć kilka aplikacji, które robią to samo, niż jedną aplikację, która robi wszystko. Przeczytasz także o tym, czym różnią się formaty GIF, JPEG i PNG oraz którego z nich warto używać w jakiej sytuacji. Nauczysz się podstaw języków HTML i XHTML i odkryjesz, jak rozwinąć skrzydła w dziedzinie pisania skryptów, ponieważ poznasz bliżej język skryptowy JavaScript. W zakończeniu znajdziesz praktyczne porady dotyczące tego, co i w jakich proporcjach powinno znajdować się w doskonale zaprojektowanej witrynie. • Zasady pisania i formatowania tekstu oraz edytory stron WWW • Praca z elementami graficznymi przy użyciu takich narzędzi, jak Photoshop i Fireworks • Kaskadowe arkusze stylów – formatowanie i programy do tworzenia arkuszy • Tworzenie dynamicznych stron WWW, czyli JavaScript w akcji • Przygotowywanie i optymalizowanie animacji Flash • Język HTML – podstawy i struktura dokumentu Projektuj pierwszorzędne witryny i twórz nową jakość w Internecie Idź do • Spis treści • Przykładowy rozdział Katalog książek • Katalog online • Zamów drukowany katalog Twój koszyk • Dodaj do koszyka Cennik i informacje • Zamów informacje o nowościach • Zamów cennik Czytelnia • Fragmenty książek online Kontakt Helion SA ul. Kościuszki 1c 44-100 Gliwice tel. 32 230 98 63 e-mail: helion@helion.pl © Helion 1991–2011 SpiS treści rozdział 1. trzy, dwa, jeden… StArt! . . . . . . . . . . . . . . . . . . . . . . 5 Blog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Serwisy stron WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 rozdział 2. edytory WYSiWYG, czyli chłopcy od brudnej roboty . . 26 edytory HtML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 edytory WYSiWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Korzystanie z edytora WYSiWYG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 rozdział 3. Grafika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Dodawanie obrazków do strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 tworzenie grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Darmowa grafika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 rozdział 4. HtML — język internetu . . . . . . . . . . . . . . . . . . . . . . . . 88 Składnia języka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 rozdział 5. Wykorzystanie formularzy i ramek . . . . . . . . . . . . . . 109 Formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 ramki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Dodatkowe znaczniki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 rozdział 6. co to znaczy mieć styl, czyli słów kilka o cSS . . . . . 120 Formatowanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Dekoracja tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Kolor i tło . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Marginesy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 programy do tworzenia arkuszy stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 3 tWorzenie Stron WWW. ilustrowany przewodnik rozdział 7. tworzenie dynamicznych stron WWW, czyli JavaScript w akcji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 typy danych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 Wyrażenia i warunki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Wprowadzanie poleceń . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 okna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 rozdział 8. Animacje Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 przygotowywanie grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170 Animacje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182 eksportowanie i publikowanie filmów . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 rozdział 9. promocja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Wyszukiwarki internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 reklama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Katalogi internetowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 ogłoszenia prasowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 poczta elektroniczna . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 Banery reklamowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 rozdział 10. poradnik, czyli od czego zacząć . . . . . . . . . . . . . . . 207 Struktura witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Szablon witryny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213 projektowanie zawartości stron . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 4 rozDziAł 6 co to znaczy mieć styl, czyli słów kilka o cSS Przyciski, paski menu, zdjęcia, obrazy — nieodłączne elementy stron WWW. Dotychczas dowiedziałeś się, jak je tworzyć i budować z nich całość za pomocą edytorów tekstowych lub aplikacji WYSIWYG. Poznałeś również podstawy ję- zyka HTML. Czas zaprzyjaźnić się z CSS, czyli kaskadowymi arkuszami stylów. Styl w wirtualnym świecie nie wymaga dużych nakładów finansowych, a jedynie zainwestowania odrobiny czasu w opracowanie stylistyki strony i konsekwentne realizowanie przyjętych założeń. Kaskadowe arkusze stylów (ang. cascading style sheets — CSS) są stosowane do formatowania stron i pozwalają na uzyskanie doskonałej kontroli nad jednolitym wyglądem poszczególnych stron i całej witryny. Wyobraź sobie witrynę składa- jącą się z dużej liczby stron WWW, nad którą pracuje cała grupa programistów. Mając wyobrażenie o stopniu skomplikowania zadania polegającego na stwo- rzeniu kilku stron, na których używana będzie ta sama stylistyka — krój, kolor, wielkość czcionki, kolorystyka elementów czy wygląd tabel, wyobraź sobie, jak trudno zapanować nad tymi wszystkimi elementami, gdy masz do ogarnięcia kil- kaset stron projektowanych przez kilka różnych osób. Do tego celu niezawodnie przydają się kaskadowe arkusze stylów. Korzystanie z CSS oznacza również oszczędność miejsca, ponieważ styl każdego elementu jest definiowany jednokrotnie w pliku definicji stylów, a nie przy każ- dym wystąpieniu elementu na stronie, czyli w przypadku takich elementów jak na przykład akapit czy nagłówek kilkadziesiąt razy na każdej stronie. W s k a z ó W k a Szczegółowe informacje na temat kaskadowych arkuszy stylów znajdziesz pod adresem http://www.w3.org/Style/CSS/. 120 co to znaczy mieć styl, czyli słów kilka o cSS Definicje stylów można wprowadzać do opisu strony na kilka sposobów. Pamiętaj, że każdy z tych sposobów ma swoje wady i zalety, a wybór najlepszego sposobu zależy od preferencji programisty oraz sytuacji, w której styl ma być zastosowany. Sposób I p style=”color:blue; font-family:Arial; font-size:12pt;” Zawartość akapitu /p Definicja stylu jest umieszczona bezpośred- nio w znaczniku. Jest to analogiczna skład- nia do umieszczania w znaczniku atrybutów tego znacznika. Zaleta: prostota użycia. Wada: konieczność powtarzania definicji dla każdego kolejnego znacznika umieszczane- go na stronie. Sposób II 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 nagłówku dokumentu. Tak zdefiniowany styl odnosi się do wszystkich znaczników tego typu w doku- mencie. Zaleta: jednokrotna definicja stylu dla ele- mentu w obrębie strony. Wada: dla tego samego znacznika na innych stronach musisz ponownie zdefiniować style znacznika wewnątrz nagłówków tych stron. Sposób III html head link href=”style.css” rel=”stylesheet” type=”text/css” /head body p Pierwszy akapit /p p Drugi akapit /p /body /html Definicja stylu jest umieszczona w osobnym pliku o rozszerzeniu *.css, który jest powiązany z dokumentem strony poprzez użycie znacz- nika link . Atrybut href wskazuje ścieżkę dostępu do pliku arkuszy stylów. Wywołanie zewnętrznego arkusza stylów znajduje się w nagłówku i dotyczy całej strony WWW, czyli wszystkich elementów danego typu. Zaleta: do tak zdefiniowanego arkusza moż- na podłączyć wiele stron witryny i wszyst- kie będą miały zdefiniowane te same style. Zmiana stylu danego elementu na wszyst- kich stronach witryny wymaga jedynie zmia- ny odpowiednich wpisów w arkuszu stylów. 121 tWorzenie Stron WWW. ilustrowany przewodnik W s k a z ó W k a Pamiętaj, że zarówno element style , jak i element link muszą być umiesz- czone wewnątrz nagłówka strony. Najbardziej zalecanym, najefektywniejszym i dającym najlepsze wyniki sposo- bem używania arkuszy stylów jest sposób III. W pliku zewnętrznego arkusza stylów znajdują się wyłącznie wpisy definiują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ć wygląd całej witryny i nim zarządzać. Plik arkusza stylów może mieć postać: p { color:blue; font-family:Arial; font-size:12pt; } Kaskadowe arkusze stylów nieprzypadkowo noszą taką nazwę, bo jak już wiesz, style można wprowadzać na trzech różnych poziomach: vv za pomocą atrybutu style (sposób I) — styl definiowany kolejno dla po- vv za pomocą elementu style (sposób II) — styl elementu jest określany dla vv za pomocą zewnętrznego arkusza stylów — styl jest definiowany dla danego szczególnych elementów na stronie; całej strony; typu elementu dla wszystkich stron powiązanych z arkuszem stylów. Filozofia CSS łączy w sobie elastyczny sposób kontroli 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ą definiowane na kilku po- ziomach. Sposób I (atrybut style) ma najwyższą rangę w hierarchii, sposób II (element style) ma wyższą rangę niż styl definiowany przez zewnętrzny ar- kusz stylów, ale niższą niż atrybut style. Najniższą rangę ma styl przypisywany przez zewnętrzny arkusz stylów. Takie rozwiąza- nie pozwala uniknąć konfliktów, które mogłyby wyniknąć, jeśli na stronie użylibyśmy wszystkich trzech metod definiowania stylów. Hierarchia — struktura stylów — przypomina stopnie wodo- spadu, stąd bierze się w nazwie określenie kaska- dowy (rysunek 6.1). zewnêtrzny arkusz stylów atrybut style element STYLE Rysunek 6.1. Style poszczególnych elementów są uporządkowane w określonej kolejności 122 co to znaczy mieć styl, czyli słów kilka o cSS Hierarchizacja stylów obejmuje nie tylko różne sposoby definiowania stylów, ale również sytuację, gdy do jednej strony podłączonych jest kilka różnych zewnętrz- nych arkuszy stylów. W takim wypadku przeglądarka uwzględnia kolejność wprowadzania stylów. Zewnętrzny arkusz wprowadzony jako pierwszy dominuje nad arkuszem, który jest wprowadzony jako następny w kolejności. Problem po- lega na tym, że jeśli w zewnętrznych arkuszach stylów występują wzajemne kon- flikty, trudno przewidzieć efekt graficzny, dopóki strona nie zostanie wyświetlona w przeglądarce. Do określenia wartości atrybutów arkusze stylów wykorzystują względne i bez- względne jednostki miary oraz określone definicje kolorów. Jednostki względne: vv px — piksel — jednostka definiowana w oparciu o pojedyncze punkty vv em — proporcje wysokości do czcionki danego elementu — określa zależ- vv ex — proporcje do wysokości litery; vv — procent — określenie wielkości względem wartości domyślnej. świetlne monitora; ność pomiędzy poszczególnymi wielkościami; W s k a z ó W k a Istnieje także możliwość importowania arkusza stylów wewnątrz innego arkusza styló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 import następuje. Zasada działania jednostki em jest następująca — przy zdefiniowaniu określonej wartości (na przykład czcionki o wielkości 12 pt) jest ona przyjmowana jako 1 em. Jeśli określę inny atrybut jako 2 em, to będzie on dwukrotnością wcześniej zdefiniowanej wartości (czyli w tym wypadku będzie to 24 pt). Jednostki bezwzględne: vv in — cal — jednostka najczęściej używana w USA, rzadko używana w Pol- vv pt — punkt — wywodzi się z typografii, gdzie jest standardową jednostką vv cm — centymetr — jednostka pochodna systemu metrycznego, często sto- sce (1 in = 2,54 cm); miary (72 pt = 1 in); sowana w Europie; 123 tWorzenie Stron WWW. ilustrowany przewodnik vv mm — milimetr — jednostka pochodna systemu metrycznego, często sto- vv pc — pica — jednostka wywodząca się z typografii (1 pica = 12 pt). sowana w Europie; 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 zdefi- niowane przez użycie ich nazw, muszą 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 ), a także stosując metodę szesnastkową, na przykład color: #ff2c00 (tabela 6.1). Tabela 6.1. Tablica nazw kolorów oraz ich odpowiedników w systemie szesnastkowym black silver gray white maroon red purple fuchsia #000000 #C0C0C0 #808080 #FFFFFF #800000 #FF0000 #800080 #FF00FF green lime olive yellow navy blue teal aqua #008000 #00FF00 #808000 #FFFF00 #000080 #0000FF #008080 #00FFFF Schemat konstrukcji stylu można zapisać w następujący sposób: selektor {cecha: wartość; cecha: wartość; itd.} pierwszy, a table — tabela. vv selektor — znacznik języka HTML, np. p to paragraf, h1 — nagłówek vv cecha — wpis określony specyfikacją kaskadowych arkuszy stylów. Przykładowe właściwości określone przez specyfikację kaskadowych arkuszy stylów to background-color, border-style, font-family itd. Wartość jest zazwyczaj przypisana do danej cechy, ale może się zdarzyć, że będzie podobna dla kilku zupełnie różnych cech. Ogólnie przyjmujemy, że selektor to dowolny znacznik języka HTML. Możemy jednak wyróżnić kilka rodzajów selektorów: vv 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 elektora. 124 co to znaczy mieć styl, czyli słów kilka o cSS vv Selektor uniwersalny — używany, gdy jakieś cechy i wartości są uniwersalne vv Potomek — selektor zbudowany w oparciu o zależności panujące pomiędzy i powinny dotyczyć wszystkich elementów na stronie. poszczególnymi znacznikami języka HTML. Przykłady selektorów uniwersalnych: * {color: blue;} BODY {color: blue} Tak zapisane selektory działają dla wszystkich elementów strony — nagłówki, akapity, listy itd. będą miały kolor 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 po- jawi się znacznik span , otoczony nim tekst będzie pochylony. Specyfikacja kaskadowych arkuszy stylów dopuszcza również możliwość grupo- wania selektorów. Jeśli na przykład chciałbyś, aby wszystkie listy, które wystąpią w dokumencie, miały kolor czerwony, to 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 określonego 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 jednym tekst powinien być czerwony, ponieważ zawiera on szczególnie ważne informacje. W tym celu możesz zdefiniować style 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 informacje wyróżnione kolorem czerwonym /p Pozostałe akapity będziesz tworzyć, używając znacznika p . 125 tWorzenie Stron WWW. ilustrowany przewodnik 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 dowolnym znaczniku, korzystając z atry- butu ID. Kolejnym podstawowym elementem specyfikacji kaskadowych arkuszy stylów jest klasa. Klasę konstruuje się w następujący sposób: selektor.nazwa_klasy {cecha: wartość} Tak zdefiniowana klasa może być wywołana tylko w znaczniku, dla którego zo- stała utworzona. Aby wywołać klasę w dokumencie, należy użyć atrybutu CLASS. Na przykład tworząc klasę akapitu zawierają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 U W a g a Deklaracja selektora ID musi być poprzedzona znakiem #, ale znaku tego nie na- leży używać do odwoływania się do wartości atrybutu ID. U W a g a 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 była mowa już wcześniej w tym rozdziale, a teraz warto napisać kilka słów o dziedziczeniu. Jeśli chcesz określić kolor tekstu w komórce tabeli, zrobisz to przez użycie ele- mentu td . Możesz to również zrobić przez użycie elementu table i wtedy 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 tylko tekst w komórkach tabeli będzie miał określony kolor, ale również określony kolor będzie mieć tekst w akapitach, na- główkach i listach. Na tym właśnie polega dziedziczenie w kaskadowych arku- szach stylów — elementy nadrzędne domyślnie przekazują zdefiniowane właści- wości elementom, które znajdują się niżej w hierarchii (rysunek 6.2). 126 co to znaczy mieć styl, czyli słów kilka o cSS HTML HEAD BODY P H1 TABLE UL TH TR TD TD Rysunek 6.2. Schemat dziedziczenia w kaskadowych arkuszach stylów W naszym przykładzie kolor niebieski dla tekstu, zdefiniowany w elemencie body , będzie oznaczał również niebieski kolor tekstu we wszystkich komór- kach 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 zde- finiowany dla komórki tabeli nie będzie oznaczał niebieskiego tekstu dla wszyst- kich elementów wewnątrz elementu body . Dziedziczenie działa domyślnie, czyli dla tych elementów, dla których nie okre- ślono innej wartości właściwości niż ta, którą wskazano dla elementu nadrzęd- nego. Możemy zdefiniować czerwony tekst w komórkach tabeli, mimo że dla elementu body zdefiniowano, że tekst ma być niebieski. Większość ludzi ogranicza wykorzystanie kaskadowych arkuszy stylów do okre- ślania koloru tekstu w dokumencie lub kroju czcionki w nagłówkach. Jednak ist- nieją również ciekawsze zastosowania kaskadowych arkuszy stylów — mogą one służyć do tworzenia menu, do czego większość projektantów zaangażowałaby JavaScript (rysunek 6.3). Rysunek 6.3. Menu utworzone z wykorzystaniem kaskadowych arkuszy stylów 127 tWorzenie Stron WWW. ilustrowany przewodnik 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= Konsulting /a /li li a href= Projektowanie aplikacji /a /li /ul /li /ul /body /html Menu utworzone bez użycia JavaScriptu, a wyłącznie z wykorzystaniem kaskado- wych arkuszy stylów wykorzystuje osobny plik o nazwie menu.css o następującej zawartości: 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; background-color: white; font-size: larger } Formatowanie tekstu Specyfikacja kaskadowych arkuszy stylów pozwala na kontrolowanie następują- cych właściwości tekstu: vv wyrównanie poziome i pionowe, vv wcięcie, vv odstępy między wierszami, 128 co to znaczy mieć styl, czyli słów kilka o cSS vv odstępy między wyrazami, vv odstępy między literami, vv dekoracja tekstu, vv przekształcanie tekstu, vv kontrola pustej przestrzeni. Pionowe i poziome wyrównanie tekstu: vv do prawej — text-align: left, vv do lewej — text-align: right, vv wyśrodkowanie — text-align: center, vv wyjustowanie bloku tekstu — text-align: justify, vv do góry — vertical-align: top, vv do środka — vertical-align:middle, vv do dołu — vertical-align: bottom, vv indeks dolny — vertical-align: sub, vv indeks górny — vetical-align: super. Wcięcie pierwszego wiersza akapitu Aby uzyskać efekt wcięcia pierwszego wiersza w akapicie, należy użyć parametru text-indent i określić głębokość tego wcięcia w jednostkach względnych lub bezwzględnych (rysunek 6.4). Na przykład: p {text-indent: 1 cm} Rysunek 6.4. Wcięcie akapitu uzyskano przez użycie parametru text-indent 129 tWorzenie Stron WWW. ilustrowany przewodnik odstępy Za sterowanie odstępem pomiędzy wierszami tekstu odpowiada parametr line-height, który 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 war- tości ujemnych, tekst będzie się zagęszczał (rysunek 6.5). Rysunek 6.5. Parametr line-height umożliwia dokładne określenie odstępu między wierszami Kaskadowe arkusze stylów pozwalają również definiować odstępy pomiędzy po- szczególnymi wyrazami tekstu przy wykorzystaniu parametru word-spacing. Również i w tym wypadku możliwe jest podanie wartości dodatnich (zwiększe- nie odstępu między wyrazami) i ujemnych (zmniejszenie odstępu między wyra- zami) (rysunek 6.6). Rysunek 6.6. Słowa zostały ściśnięte, ponieważ parametr word-spacing ma wartość ujemną 130 co to znaczy mieć styl, czyli słów kilka o cSS Twórcy kaskadowych arkuszy stylów poszli jeszcze o krok dalej i pozwolili pro- jektantom stron wpływać nawet na odstępy pomiędzy literami w tekście. Efekt ten można uzyskać, korzystając z parametru letter-spacing. Na przykład: p {letter-spacing: 5pt} Dekoracja tekstu W kaskadowych arkuszach stylów twórcy stron mogą kontrolować wygląd tekstu za pomocą właściwości text-decoration. Korzystając z tego parametru, mogą sprawić, że tekst będzie: vv podkreślony — text-decoration: underline, vv przekreślony — text-decoration: line-through, vv nadkreślony — text-decoration: overline, vv migający — text-decoration: blink, vv bez dekoracji tekstu — text-decoration: none. Korzystając z tego parametru, możesz na przykład wyłączyć podkreślenia wszyst- kich łączy na stronie: A {text-decoration: none;} Małe i wielkie litery Nie trudząc się zbytnio, możesz zamienić cały tekst na stronie na wielkie litery, chociaż oryginalnie w pliku jest on wpisany małymi literami. Na taką wygodę pozwala parametr text-transform. Może on przyjmować następujące wartości: vv tylko wielkie litery — text-transform: uppercase (rysunek 6.7), vv tylko małe litery — text-transform: lowercase, vv każda pierwsza litera w słowie jest zamieniana na wielką — text-trans- vv bez zmian — text-transform: none. form: capitalize, Zamiast wstawiać do dokumentu twarde spacje, możesz użyć parametru white- space, który przyjmuje następujące wartości: vv normal — spacje są redukowane do jednej, vv pre — zachowanie dokładnej liczby spacji znajdujących się w tekście, vv nowrap — blokuje automatyczne łamanie wierszy. 131 tWorzenie Stron WWW. ilustrowany przewodnik Rysunek 6.7. Wszystkie litery zostały automatycznie zamienione na wielkie przez użycie parametru text-transform: uppercase Formatowanie wyglądu czcionki Zgodnie ze specyfikacją kaskadowych arkuszy stylów możliwe jest definiowanie następujących własności czcionki: vv rodzaju — atrybut font-family, vv rozmiaru — atrybut font-size, vv wagi — atrybut font-weight, vv stylu — atrybut font-style. Pod pojęciem rodzaju czcionki kryje się rozróżnienie pomiędzy krojami czcionek lub rodzinami czcionek. Za pomocą kaskadowych arkuszy stylów możesz okre- ślić rodzaj czcionki, z którego chcesz korzystać 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; nazwa rodzajowa czcionki — jedna z pięciu wartości: serif, sans-serif, mono- space, cursive lub fantasy. Czcionki szeryfowe (serif) charakteryzują się tym, że każda litera posiada ozdob- niki 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) przed- stawiono na rysunku 6.8. 132 co to znaczy mieć styl, czyli słów kilka o cSS Rysunek 6.8. Czcionka szeryfowa Czcionki bezszeryfowe nie mają żadnych ozdobników na czcionce, ale są one również proporcjonalne. Ten rodzaj czcionek jest najczęściej używany do two- rzenia tekstu przeznaczonego do czytania (treść strony). Typowym przedstawi- cielem tej grupy czcionek jest czcionka Arial. Przykład czcionki bezszeryfowej (sans-serif) przedstawiono na rysunku 6.9. Rysunek 6.9. Czcionka bezszeryfowa Czcionki tego typu są nieproporcjonalne, co oznacza, że każda litera ma taką samą szerokość. Ten rodzaj czcionek automatycznie kojarzy się z tekstem napisa- nym na maszynie do pisania. Typowym przedstawicielem tej grupy czcionek jest czcionka Curier New (rysunek 6.10). Rysunek 6.10. Przykład czcionki typu monospace Czcionki typu cursive charakteryzują się dużym podobieństwem do pisma odręcz- nego, mogą też zawierać różnego rodzaju ozdobniki w postaci zawijasów. Przykła- dem czcionki typu cursive może być czcionka Comic Sans MS (rysunek 6.11). Rysunek 6.11. Przykład czcionki typu cursive Czcionki typu fantasy to czcionki, których nie da się zakwalifikować do żadnego z opisanych powyżej rodzajów czcionek (rysunek 6.12). Rysunek 6.12. Przykład czcionki typu fantasy 133 tWorzenie Stron WWW. ilustrowany przewodnik U W a g a Należy pamiętać, że czcionki zdefiniowane w arkuszu stylów są pobierane z kom- putera użytkownika przeglądającego stronę. Jeśli w systemie nie ma zainstalo- wanej czcionki określonej przez arkusz stylów, przeglądarka zastąpi ją domyślną czcionką dla danego systemu. Dlatego przy projektowaniu stron nie należy uży- wać zbyt wymyślnych i rzadko spotykanych krojów czcionek. Warto trzymać się najpopularniejszych, jak Times, Arial czy Helvetica. 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: vv font-size: 20 pt, vv font-size: 12 px, vv font-size: 200 . Ciekawym rozwiązaniem jest również możliwość korzystania ze zdefiniowanych wielkości: xx-small, x-small, medium, large, x-large, xx-large. 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 definicji 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 parametr font-style, który może przyjmować jedną z dwóch wartości — italic (kursywa) lub oblique. Kontrola nad wyglądem list za pomocą kaskadowych arkuszy stylów polega na sterowaniu właściwościami użytej czcionki oraz określaniu typu listy, użyte- go punktora graficznego oraz definiowaniu pozycji elementów listy względem punktora. Typy list dzielimy na punktowane, numerowane i definicje. Od typu listy uza- leżnione są rodzaje punktorów, których możemy użyć w liście. Dla list numero- wanych 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. 134 co to znaczy mieć styl, czyli słów kilka o cSS Typ listy określa właściwość list-style-type. Dla listy punktowanej może ona przyjmować wartości: vv disc — punktor ma postać koła, vv circle — punktor ma postać okręgu, vv square — punktor ma postać kwadratu. Dla listy numerowanej właściwość list-style-type może przyjmować war- tości: vv decimal — odpowiada liczbom arabskim, vv lower-roman — odpowiada małym liczbom rzymskim, vv upper-roman — odpowiada dużym liczbom rzymskim, vv lower-alpha — odpowiada małym literom, vv upper-alpha — odpowiada dużym literom, vv none — brak wypunktowania. Czasem projektanci chcą zabłysnąć zupełnie nową i niestandardową koncepcją listy, i właśnie na takie okazje twórcy kaskadowych arkuszy stylów przygotowali parametr list-style-image, który pozwala użyć jako punktora listy wskazane- go 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 (rysunek 6.13). Czasem może również wystąpić konieczność regulacji położenia tekstu wzglę- dem punktora. Do tego celu służy parametr list-style-position. Rysunek 6.13. Punktor w liście można zastąpić niewielkim plikiem graficznym Parametr list-style-position przyjmuje następujące wartości: vv outside — punktor znajduje się wyraźnie poza listą, vv inside — punktor jest schowany w tekście listy. 135 tWorzenie Stron WWW. ilustrowany przewodnik Jeżeli lista zawiera krótkie wpisy w każdym punkcie, to różnica pomiędzy usta- wieniami parametru list-style-position 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. Kolor i tło Każdy element strony, który możesz sformatować przez użycie kaskadowych ar- kuszy stylów, może mieć zdefiniowany kolor i tło. Jako tło elementy mogą mieć zdefiniowany kolor lub użycie wskazanego obrazu. Aby przypisać kolor do ele- mentu strony, należy użyć parametru color i podać wartość koloru przez użycie jego zwyczajowej nazwy angielskiej, zapisu z palety rgb lub określenie wartości szesnastkowej 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. Domyślnie obraz użyty jako tło elementu jest powielany do rozmiaru elementu, jeśli jego rozmiar jest mniejszy niż rozmiar elementu, którego tło stanowi. Jednak za pomocą kaskadowych arkuszy stylów możliwe jest wprowadzenie kontroli nad powielaniem oraz zablokowanie przewijania tła. Za powielanie obrazu w obrębie elementu, dla którego zdefiniowane jest tło bę- dące obrazem, odpowiada parametr background-repeat, który może przyjmo- wać następujące wartości: vv no-repeat — tło nie będzie powielane i zostanie wyświetlone tylko jeden vv repeat-x — tło będzie powielane wyłączenie w poziomie, vv repeat-y — tło będzie powielane wyłącznie w pionie, vv repeat — tło będzie powielane w pionie i w poziomie. Dodatkowo istnieje możliwość zatrzymania tła, aby nie przesuwało się wraz z za- wartością całej strony. Do tego celu służy parametr background-attachment z ustawioną wartością fixed. Na przykład: raz, body {background-image: url(tlo.gif); 136 co to znaczy mieć styl, czyli słów kilka o cSS background-attachment: fixed; } Specyfikacja kaskadowych arkuszy stylów pozwala nie tylko zdefiniować sposó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 przyjmować jedną z następujących wartości: vv center — tło wyśrodkowane, vv left — tło z lewej strony okna, vv right — tło z prawej strony okna, vv top — tło znajduje się na górze okna, vv bottom — tło znajduje się na dole okna, vv wartość liczbowa — określa odległość tła od lewego górnego rogu okna przeglądarki. 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, prawy, górny i dolny. Do określania szerokości marginesu należy użyć parametru margin w połączeniu z określeniem położenia marginesu: vv margin-left — lewy margines. vv margin-right — prawy margines, vv margin-top — górny margines, vv margin-bottom — dolny margines. Parametr przyjmuje wartości liczbowe względne i bezwzględne. Marginesy są de- finiowane 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. Przykładowa definicja marginesów na stronie: 137 tWorzenie Stron WWW. ilustrowany przewodnik body { margin-left: 1 cm; margin-right: 2 cm; margin-top: 1 cm; margin-bottom: 3 cm; } U W a g a Pamiętaj, że marginesy różnych elementó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. W s k a z ó W k a Jeśli chcesz ustawić identyczne wartości dla wszystkich marginesów, możesz to zrobić, używając wyłącznie parametru margin, na przykład: body { margin: 12 pt } Margines wewnętrzny jest definiowany za pomocą parametru padding w połą- czeniu z określeniem miejsca na stronie, którego dotyczy margines. Określenie to należy podać w języku angielskim: right (prawy), left (lewy), top (górny) i bottom (dolny). programy do tworzenia arkuszy stylów Mam dla Ciebie dobrą wiadomość — nie zawsze będziesz musiał tworzyć ka- skadowe arkusze stylów samodzielnie, ponieważ istnieją programy, które zrobią za Ciebie „brudną robotę”. W takie funkcje wyposażone są dobre edytory WY- SIWYG (jak na przykład Dreamweaver, o czym mówiliśmy szczegółowo w roz- dziale 2.), ale możesz również pobrać programy do tworzenia arkuszy stylów z sieci. Do takich programów należy Style Master, którego testową wersję możesz pobrać pod adresem http://www.westciv.com/style_master (rysunek 6.14). 138 co to znaczy mieć styl, czyli słów kilka o cSS Rysunek 6.14. Program Style Master pozwala w prosty sposób tworzyć kaskadowe arkusze stylów Jeśli zainteresowała Cię tematyka kaskadowych arkuszy stylów, możesz pogłębić swoją wiedzę, odwiedzając witryny poświęcone tej tematyce: vv http://www.csszengarden.com (rysunek 6.15), vv http://www.kurshtml.boo.pl/, vv http://www.w3schools.com/css/. 139 tWorzenie Stron WWW. ilustrowany przewodnik Rysunek 6.15. W sieci WWW znajdziesz wiele witryn szczegółowo omawiających tematykę kaskadowych arkuszy stylów 140
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

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