sobota, 30 Październik 2010
Umożliwia wybranie stosowanych czcionek. Tekst na stronie WWW zostanie wyświetlony pierwszym z wybranej listy krojów czcionki, o ile jest on zainstalowany na komputerze użytkownika. W przeciwnym razie zastosowana zostanie druga w kolejności czcionka i tak do skutku. Możesz zdefiniować własną listę krojów pisma.
Określa rozmiar czcionki w pikselach lub względem otaczającego tekstu. Tak więc, konieczne jest podanie wartości liczbowej i jednostki. Jednostkę wybiera się z listy rozwijanej umieszczonej z prawej strony pola Size. Wielu projektantów woli stosować piksele, ponieważ zapewnia to powtarzalność efektu w różnych przeglądarkach.
Określa grubość czcionki. Można ją zdefiniować w pikselach lub względem otaczającego tekstu. Poeksperymentuj z różnymi ustawieniami i wybierz najlepsze według Ciebie. Zwykłemu tekstowi odpowiada wartość 400, a czcionce pogrubionej 700.
Umożliwia zdefiniowanie pisma zwykłego, kursywy i pochyłego.
Pozwala przełączać się między czcionką zwykła a kapitalikami. W przypadku wybrania kapitalików, cały tekst jest wyświetlany wielkimi literami, a wersaliki są nieco większe niż zwykłe litery.*
Definiuje wysokość wiersza (musisz podać liczbę i jednostkę). Jest to odstęp między kolejnymi wierszami dokumentu, zazwyczaj o wartości kilku pikseli. Odstęp ten można dowolnie zwiększać lub
zmniejszać.*
Przekształca tekst w tekst pisany wielkimi lub małymi literami, albo wersalikami.
Umożliwia dodanie podkreślenia, nadkreślenia i przekreślenia oraz efektu migającego tekstu. Tego ostatniego efektu nie nadużywaj. Irytuje on wielu użytkowników. Opcje tej sekcji pozwalają wyłączyć podkreślanie połączeń, czego tak bardzo pragną twórcy stron WWW.
Umożliwia wybranie koloru tekstu.
Ustawienia kategorii Background służą wyłącznie do definiowania tła dokumentów. Początkowo tła stron były automatycznie składane z kafelków – identycznych obrazów powtarzających się w pionie i poziomie. Nie dość, że ograniczało to kreatywność, to jeszcze na dodatek działało irytująco po odwiedzeniu iluś tam stron. Dzięki arkuszom CSS znacznie powiększyła się kontrola projektanta nad tłem strony.
Umożliwia wybranie koloru tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia wybranie obrazu jako tła, które będzie stosowane poprzez arkusz stylów CSS.
Umożliwia złożenie tła z powtarzalnych elementów i określenie sposobu zestawiania elementów. Do wyboru są cztery możliwości. Ustawienie no-repeat wymusza jednokrotne wyświetlenie obrazu, bez powtórzeń. Opcja Repeat działa podobnie jak domyślna metoda składania tła z kafelków – obraz jest powtarzany w pionie i w poziomie strony. Opcja Repeat-x powoduje wyświetlenie powtórzeń tylko w poziomie, a Repeat-y – tylko w pionie.
Pozwala wybrać, czy tło ma przewijać się wraz ze stroną, czy też pozostać nieruchome i niezależne od przewijania strony.
Umożliwia zdefiniowanie pozycji obrazu wskazanego jako tło (na osi x). Pozycja jest określana względem elementu HTML, do którego styl jest dołączony.
Ustawienia kategorii Border pozwalają skonfigurować i wyświetlić obramowania wokół różnych elementów, takich jak obrazy lub tekst. Są one bardzo użyteczne przy umieszczaniu akapitów tekstu w ramkach. Poszczególne ustawienia tej kategorii
Umożliwia zdefiniowanie grubości obramowania w oparciu o miarę względną lub liczbową.
Umożliwia wybranie koloru krawędzi obramowania.*
Pozwala wybrać styl obramowania (dla wszystkich czterech krawędzi). Wśród opcji są: dotted (kropki), dashed (linia przerywana), solid (linia ciągła), double (linia podwójna), groove (pseudo 3D – rowek), ridge (pseudo 3D – linia wypukła), inset (wypukłe) i outset (wklęsłe).
Tagi: css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone
czwartek, 28 Październik 2010
Tam, gdzie kończy się HTML, tam zaczyna się CSS – a przynajmniej w aspekcie układu i stylu dokumentu internetowego. Wraz z rozwojem przeglądarek i śmiałości twórców stron WWW, termin kaskadowe arkusze stylów przejdzie do codzienności, a same arkusze CSS będą stosowane na niemal wszystkich stronach WWW. Ponieważ to wiemy, nie możemy nie sięgnąć po tę technologię. Zacznijmy od zastanowienia się nad tym, czym w rzeczywistości są arkusze CSS.
O impresji dzieła multimedialnego lub wizualnego wywieranej na publiczność decydują dwa czynniki: treść i styl. Tak jest zawsze, niezależnie od tego, czy dzieło ma postać wirtualną, jak strona WWW, czy też materialną. W odniesieniu do publikacji sieciowych termin treść oznacza zawartość strony WWW. To przede wszystkim zawartość przyciąga czytelników. Z drugiej strony styl to finezja, dekoracja i ostatnie muśnięcie, dzięki którym danie staje się bardziej smakowite.
Tradycyjny HTML usiłuje wspomóc projektanta w stylizacji stron, ale bieżąca implementacja języka jest mało precyzyjna i ma ograniczone możliwości. I tu właśnie pojawiają się kaskadowe arkusze stylów, propozycja autorstwa W3C standaryzacji zaawansowanych atrybutów stylu do zastosowań na stronach WWW. Dzięki arkuszom stylów nie ma już potrzeby stosowania stylu do każdego elementu, czy nawet każdej strony. Jeden styl może być wykorzystywany w całej witrynie, a jego aktualizacja wymaga jedynie zmian w jednym pliku. Co więcej, wszelkie zmiany wprowadzone w procesie aktualizacji są natychmiast uwzględniane na wszystkich stronach, do których styl został zastosowany. Arkusze stylów wykazują dwojakiego rodzaju przewagę nad tradycyjnym formatowaniem HTML:
W kwestii stylu umożliwiają uzyskanie efektów, które są praktycznie nie do realizacji za pomocą języka HTML. Dotyczy to wykorzystania warstw i innych efektów dynamicznych.
W kwestii ekonomiki pracy zdecydowanie przyspieszają i ułatwiają aktualizację stylów stron WWW.
Podobnie jak w przypadku potraw, styl i stopień perfekcji jego definicji zależą od dwóch spraw. Pierwsza to czas i pieniądze. Budżet i ograniczenia czasowe określające termin przygotowania witryny wymuszają włączenie bądź wyłączenie pewnych rozwiązań (podobnie jak w przypadku wyboru między barem szybkiej obsługi a restauracją z prawdziwego zdarzenia). Drugim czynnikiem są Twoi czytelnicy. Typowy kierowca ciężarówki zamówi z dużym prawdopodobieństwem solidny stek, a typowa nastolatka dbająca o linię będzie preferowała sałatkę szefa. Zawsze więc staraj się przeanalizować Twoją potencjalną publiczność pod kątem preferencji i w oparciu o taką analizę równoważ zawartość i styl każdej aplikacji.
Arkusze stylów budowane są z reguł, które rezydują w dokumencie lub osobnym pliku połączonym z dokumentem. Reguła zawiera dwa elementy: selektor i deklarację. Deklarację tworzy z kolei para: właściwość i wartość. Oto przykład reguły CSS:
h3 {text-decoration: underline }
W tym przykładzie h3 to selektor. To on właśnie wiąże arkusz stylów z dokumentem. W tym przypadku definiowany jest styl elementu HTML jakim jest nagłówek Heading 3. Wyrażenie text-decoration: underline to deklaracja – definicja sposobu, w jaki chcesz wpłynąć na znacznik <H3>. W naszym przykładzie text-decoration to właściwość, a underline wartość. Tak więc reguła spowoduje zastosowanie podkreślenia do tekstu zawartego między znacznikami <H3></H3>. Jak zauważysz, inne atrybuty znacznika <H3> nie zostaną usunięte – innymi słowy formatowanie poprzez arkusze CSS nie usuwa formatowania domyślnego, a jedynie go rozszerza. Nie oznacza to jednak, że nie masz możliwości całkowitej zmiany definicji stylu H3. Jest taka możliwość, a w dalszej części rozdziału dowiesz się jak z niej korzystać.
Jak widzisz, zmiana właściwości znacznika jest bardzo prosta. Co więcej, jak już wspominałem, można zmienić także całą definicję znacznika. Jak to zrobić? Tutaj dochodzimy do innej cechy kaskadowych arkuszy stylów. Reguła arkusza CSS może zawierać wiele deklaracji. Rozbudowując poprzedni przykład możesz dodać deklaracje koloru i rozmiaru, podobne to przedstawionych poniżej:
h3 { text-decoration: underline; color: blue; font-size: 14pt }
Nie tylko deklaracje można grupować, lecz także selektory. O ile deklaracje oddziela się średnikami, to grupowane selektory przecinkami. Oto przykład arkusza CSS, w którym definiowane są identyczne style dla tekstu nagłówka H3 i tekstu pogrubionego:
h3, b { text-decoration: underline; color: blue; font-size: 14pt }
Inną charakterystyczną cechą arkuszy CSS jest możliwość ich zastosowania do wielu znaczników poprzez dziedziczenie. Elementy zawarte w selektorze CSS będą dziedziczyć deklarację stylu tego selektora. Na przykład jeżeli w obszarze elementu H3 znajdują się inne znaczniki, odziedziczą one deklaracje stylu określone dla H3. Oto przykład tego, o czy tu mówiliśmy:
<h3>Witam na mojej <em>NOWEJ</em> stronie WWW</h3>
W tym przykładzie tekst NOWEJ odziedziczyłby właściwości takie jak podkreślenie, niebieski kolor tekstu i rozmiar czcionki 14 punktów, o ile oczywiście zastosowana zostałaby deklaracja stylu H3 taka, jak w poprzednim przykładzie. Znacznik <em> również wpłynąłby na styl tekstu, powodując dodanie emfazy (kursywa).
Dziedziczenie funkcjonuje także w relacji element nadrzędny-element podrzędny. Dzięki tej zależności istnieje możliwość określenia atrybutów stylu stosowanych na całej stronie za pomocą jednego stylu. Można to uzyskać definiując selektor body, tak jak w tym oto przykładzie:
body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt }
W ten sposób wszystkie elementy dokumentu HTML domyślnie dziedziczą zdefiniowane w deklaracji właściwości (oczywiście o ile mogą mieć takie właściwości). Nie jest to żelazna reguła, od której nie ma odstępstwa. Odstępstwa są możliwe, a wprowadza się je bezpośrednio dla danego przypadku.
Mówiąc o cechach kaskadowych arkuszy stylów CSS ograniczaliśmy się na razie do dwóch członów ich nazwy. Poruszaliśmy kwestię stylu i arkusza. Trzeci aspekt, także znajdujący odzwierciedlenie w nazwie, jest niewątpliwie decydujący i chyba równie ważny co pozostałe. To oczywiście termin kaskadowy. Termin ten opisuje zasadę przejmowania pierwszeństwa przez style lokalne nad stylami zdefiniowanymi na poziomie strony, które z kolei dominują nad stylami globalnymi.
Wyobraź sobie, że korzystasz z zewnętrznego arkusza stylów, który definiuje styl całego tekstu przypisując mu krój czcionki Arial, rozmiar 12 pt i kolor czarny (można by to osiągnąć poprzez zmianę definicji znacznika <body>). Taka definicja miałaby wpływ na wszystkie elementy dokumentu HTML, dla których dopuszczalne jest stosowanie którejkolwiek z tych trzech właściwości. Jest to dobra metoda ustanawiania i stosowania ogólnego układu i stylu strony WWW. Jeśli na przykład zdecydowałbyś się na dodanie do fotografii podpisów pisanych kursywą
o rozmiarze 8 punktów drukarskich i na dodatek chciałbyś zastosować do tego celu styl nagłówka H1, aby wyróżnić znacząco podpisy, należałoby utworzyć nowy styl, stanowiący redefinicję stylu H1. Wówczas w arkuszu stylów styl lokalny zdominuje styl wyższego poziomu. Umożliwi to zastosowanie stylu podpisu do podpisów i zapewni im żądany wygląd nawet w warunkach zasad stylu globalnego.
Atrybuty stylu
W metodzie najniższego poziomu wykorzystuje się atrybuty stylu, które umieszczane są w znaczniku HTML, do którego styl ma być zastosowany. Ustawienia stylu wprowadzone w ten sposób dominują nad wszelkimi innymi definicjami stylu (tego typu zastosowanie stylu nosi nazwę stylu wpisanego – przypis tłum.). Oto przykład typowego zastosowania atrybutów stylu:
<div id=”Layer1” style=”position:absolute; width:358px; height:378px; zindex:1; left: 160px; top: 225px”></div>
Jest to kod definiujący element DHTML zwany warstwą. Jak możesz zobaczyć, położenie warstwy na stronie WWW określone jest w arkuszu CSS. Ponieważ warstwy zazwyczaj miewają różne pozycje, reguły CSS są definiowane w obrębie każdego znacznika warstwy osobno.
Style osadzone
W metodzie pośredniego poziomu styl stosowany jest w obrębie strony, lecz nie w poszczególnych znacznikach. Takie podejście pozwala zdefiniować styl strony bez potrzeby przygotowywania odrębnego pliku. Jedną z największych zalet takiego rozwiązania jest szybka aktualizacja stylu – mówiliśmy o tym wcześniej. Chociaż regułę stylu można wpisać w dowolnym miejscu dokumentu, standardowo przyjmuje się, że miejscem osadzonego stylu CSS jest sekcja HEAD dokumentu. Oto typowa definicja stylu osadzonego:
<head>
<meta blah blah…>
<head>
<style type=”text/css”>
<!-.
background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
–>
</style>
</head>
</head>
Analizując ten kod źródłowy zauważysz w pierwszej kolejności, że osadzony arkusz stylów jest zawarty w elemencie STYLE, którego wartością atrybutu type jest text/css. Zauważysz także prawdopodobnie, choć być może nie będziesz wiedział na razie co to oznacza, że rzeczywista definicja stylu umieszczona jest w znacznikach komentarza HTML.
W tych przeglądarkach, które nie potrafią obsługiwać arkuszy stylów, znaczniki komentarza obejmujące wszystkie reguły CSS spowodują potraktowanie kodu jako komentarza (i pominięcie go). Z kolei te przeglądarki, którym arkusze CSS nie są obce, wiedzą, że między znacznikami zawarte są definicje stylów.
Zewnętrzne arkusze stylów
Ostatnia z metod wykorzystuje zewnętrzne arkusze stylów. Jest to idealne rozwiązanie tam, gdzie celem jest stworzenie ogólnego stylu całej witryny (na przykład witryny firmy). Zmiana jednej reguły, wpłynie na styl wszystkich stron, na których umieszczono odwołania do zewnętrznego arkusza stylów. Jest to jeden z powodów, dla których arkusze CSS mają tak szerokie możliwości.
Zewnętrzne arkusze stylów są łączone z dokumentem za pomocą połączenia. Aby zastosować do dokumentu zewnętrzny arkusz CSS, możesz skorzystać z dwóch metod. Pierwsza metoda opiera się na imporcie. Oto jej przykład:
<style type=”text/css”> @import”arkusz_stylow.css”; </style>
W metodzie alternatywnej definiowane jest połączenie do pliku zewnętrznego zawierającego arkusz CSS:
<link rel=”stylesheet” href=”arkusz_stylow.css” type=”text/css”>
Wyrażenie to powinno znaleźć się na zewnątrz jakichkolwiek znaczników określających styl, lecz nadal w obrębie znaczników <head></head>. Ta metoda uznana jest za standardową metodę łączenia zewnętrznych arkuszy stylów z dokumentem. Wynika to między innymi z tego, że połączenia jako takie są obsługiwane przez większość przeglądarek. Zawartość pliku .css ma taką samą postać jak w przypadku każdego innego arkusza stylów. Oto przykładowa definicja:
.background { background-color: #0066FF; background-image: url(bg.gif);background-repeat: no-repeat }
p { font-family: Arial, Helvetica, sans-serif; font-size: 12 pt }
Tagi: arkusz, css, style
Kategoria: Tworzenie stron | Komentarze są wyłączone
wtorek, 24 Listopad 2009
Podstawowe informacje na temat warstw
Aby efektywnie posługiwać się warstwami, musisz znać podstawy. Musisz wiedzieć, jak rysować warstwy, jak je organizować, jak wstawiać zawartość i jak pozycjonować warstwy na stronie. Te właśnie informacje znajdziesz tutaj. Ponadto, będziesz mógł je sprawdzić w praktyce, wykonując ćwiczenie po przeczytaniu tekstu.
Rysowanie warstw
Warstwę można narysować na istniejącej zawartości, która nie znajduje się na innej warstwie. Można też utworzyć stronę składającą się wyłącznie z warstw. Nie istnieje ograniczenie liczby stosowanych warstw, jednak nie należy zbyt przesadzać z ich mnożeniem, a szczególnie wówczas, gdy się nakładają.
Warto wstawianym warstwom nadawać nazwy, bowiem ułatwia identyfikację.
Kod HTML i warstwy
Domyślnie, tworzy warstwę stosując znacznik <DIV>. Przełącz się do widoku kodu, aby zobaczyć kod źródłowy definiujący warstwę. Będzie on przypominał przykładowy kod, zaprezentowany poniżej. Kod ten umieszczany jest w sekcji BODY:
<div id=?Layer1? style=?position:absolute; width:200px; height:115px?>Zawartość warstwy</div>
Inne znaczniki HTML także umożliwiają definiowanie warstw. Oto one: <SPAN>, <ILAYER> i
<LAYER>. Znaczniki <DIV> i <SPAN> są interpretowane przez wersje 4 obu przeglądarek:
Netscape i Internet Explorer. Znaczniki <ILAYER> i <LAYER> pozwalają zdefiniować warstwy
wyświetlane tylko przez przeglądarki Netscape.
Chociaż czasami istnieją powody, aby definiować warstwy niewidzialne, na razie zakładamy, że będziemy umieszczać na warstwie jakąś zawartość, której nie zamierzasz ukrywać przed odbiorcami strony.
Umieszczanie zawartości na warstwie to prosta operacja.
Tagi: css, div, warstwy
Kategoria: Tworzenie stron | Komentarze są wyłączone
czwartek, 5 Listopad 2009
Konwersja baz danych i arkuszy kalkulacyjnych do stron WWW. Czy masz bazę danych lub arkusz kalkulacyjny, z których chętnie skorzystałbyś na stronach swojej witryny? Jeśli dane przechowywane są w pliku tekstowym z polami rozseparowanymi znakami tabulacji, znane programy edycjyjne przeniesie dane do swojej tabeli, nie naruszając nic w konstrukcji i zawartości tabeli. Jeśli plik został zapisany w innym formacie, możesz zapisać go we właściwej formie korzystając z odpowiedniej opcji arkusza danych lub programu obsługi baz danych.Wybierz pozycję Tabular Data w menu Insert i kliknij przycisk Browse, aby wybrać plik danych w formacie TXT. Określ pozostałe opcje okna dialogowego Insert Tabular Data i naciśnij OK.
Aby powstała udana witryna sieciowa, musisz rozwijać swoje umiejętności tworzenia i modyfikacji tabel. Chociaż tabele nie zostały przewidziane jako narzędzie definiowania układu strony, tym właśnie się stały. Ponieważ są zazwyczaj obsługiwane przez wszystkie typy przeglądarek, stanowią w tej chwili podstawową metodę kontroli układu strony. A jeszcze lepsze są kaskadowe arkusze stylów, lecz ciągle mało popularne, a warto nauczyć się ich nauczyć i korzystać przy projektowaniu stron.
Tabele znajdują zastosowanie w tej chwili głównie przy mailingu i starszych wersjach przeglądarek lub systemów. Są też dość popularnie stosowane przy tworzeniu stron za pomocą różnych automatów wspomagających edycję i projektowanie.
Tagi: css, tabele
Kategoria: Tworzenie stron | Komentarze są wyłączone