docProjektowanie stron internetowych
download 
Reklamacja Transkrypt
Projektowanie stron internetowych
Podstawy arkuszy stylów i JS
CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie
rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych
stron
www, stron dynamicznych (JavaScript, PHP, Java, Python itp.) jak i do stron
przygotowywanych w systemach CMS (Yoomla, Wordpress, Drupal).
Tworzenie stylów w HTML
umieszczenie <LINK REL=STYLESHEET TYPE="text/css"
HREF="sheetaddress" TITLE="Sheetname"> w części nagłówkowej
<HEAD>
użycie tagów <STYLE> w części nagłówkowej :
<STYLE TYPE="text/css"> <!-@import url(sheetaddress) mediatype;
H1 { color: blue }
--> </STYLE>
.........
<H1>This headline becomes blue</H1>
użycie @import url(sheetaddress) w secji STYLE, aby wykorzystać style
określone w zewnętrznych plikach, jak to pokazano wyżej. mediatype to
opcjonalna, oddzielona przecinkiem lista mediów obsługiwanych przez arkusz.
użycie atrybutów STYLE w ramach tagów HTML, choć nie jest to zalecane:
<P STYLE="color: green">paragraph is green.</P>
Ogólna konstrukcja informacji o stylu CSS
:
selector1,selector2,...,selectorn
{
property1: value ;
property2: value ;
}
np.
H1,H5 { color: blue}
#krzyzyk {cursor:crosshair}
.cl1 {border: 1px solid blue}
#przyklad2 { position: absolute; top: 250px; left: 300px; z-index: 2; background-color: red }
<TABLE
ALIGN=LEFT
WIDTH=30%
HEIHT=20%
style="border-
collapse:collapse;empty-cells:show;border: 1px solid blue;cursor:crosshair" >
Efektywne wykorzystanie arkuszy stylów do formatowania dokumentów HTML wymaga
znajomości podstawowych atrybutów i ich dopuszczalnych wartości. Tabele od 1 do 6
zawierają najważniejsze atrybuty CSS pogrupowane kategoriami, zaś listing 5 prezentuje
sposoby użycia części atrybutów.
lp.
1. text-align
2.
Poprawne wartości
Atrybut
verticalalign
justify, left, right, center
baseline, sub, super, top, text-top, middle, bottom, textbottom, długość
Opis
wyrównanie
poziome
wyrównanie
pionowe
Tabela 1. Wyrównanie pionowe i poziome
lp.
Atrybut
1.
2.
3.
4.
5.
6.
7.
Poprawne
wartości
długość
długość
długość
długość
długość
długość
długość
width
height
max-width
max-height
min-width
min-height
margin
margin-left, margin-right, margin-top,
8.
długość
margin-bottom
9. padding
długość
padding-left, padding-right, padding-top,
10.
długość
padding-bottom
Opis
szerokość
wysokość
maksymalna szerokość
maksymalna wysokość
minimalna szerokość
minimalna wysokość
marginesy (wszystkie cztery)
marginesy lewy, prawy, górny
i dolny
otaczanie (z czterech stron)
otaczanie z lewej, prawej,
górne i dolne
Tabela 2. Wysokość, szerokość, marginesy i otaczanie
lp. Atrybut
font1.
family
2. font-size
font3.
weight
4. font-style
font5.
variant
6.
fontstretch
Poprawne wartości
nazwa kroju czcionki,
np. Courier, Verdana, Arial, Serif
długość, larger, smaller
normal, bold, bolder, lighter,
100, 200, 300, 400, 500, 600, 700, 800, 900
normal, italic, oblique
Opis
nazwa kroju
czcionki
wielkość czcionki
normal, small-caps
kapitaliki
normal, wider, narrower,
ultra-condensed, extra-condensed, condensed, semicondensed,
semi-expanded, expanded, extra-expanded, ultraexpanded
rozstrzelenie liter
grubość kroju
kursywa
kombinacja powyższych wartości oddzielonych białymi
znakami
7. font
Tabela 3. Czcionki
lp.
Atrybut
1. text-indent
2. text-decoration
3. text-transform
4. word-spacing
5. white-space
6. letter-spacing
7. line-height
Poprawne wartości
Opis
długość
wielkość wcięcia akapitu
none, underline, overline, line-through, blink dekoracja tekstu
capitalize, uppercase, lowercase, none
przekształcanie tekstu
normal, długość
odstępy między słowami
normal, pre, nowrap
interpretacja białych znaków
normal, długość
odstępy między literami
normal, długość
wysokość linii
Tabela 4. Tekst
lp.
Atrybut
1. border-style
2.
3.
4.
5.
6.
border-style-left,
border-styleright,
border-style-top,
border-stylebottom
border-width
border-leftwidth,
border-rightwidth,
border-topwidth,
border-bottomwidth
border-color
border-leftcolor,
border-rightcolor,
border-top-color,
border-bottomcolor
Poprawne wartości
none, hidden, dotted, dashed,
solid, double, groove ridge,
inset, outset
9. border-left,
rodzaj obramowania (linia ciągła,
przerywana, itd.)
takie jak border-style
rodzaj obramowania każdej krawędzi z
osobna
thin, medium, thick, długość
grubość obramowania
takie jak border-width
grubość obramowania każdej krawędzi
z osobna
kolor
kolor obramowania
kolor
kolor obramowania każdej krawędzi z
osobna
7. border-collapse collapse, separate
8. border
Opis
kombinacja wszystkich
właściwości
oddzielonych białymi znakami
kombinacja wszystkich
złączanie krawędzi sąsiadujących
komórek tabeli
border-right,
border-top,
border-bottom
właściwości
oddzielonych białymi znakami
w stosunku do każdej krawędzi
z osobna
Tabela 5. Obramowanie
Poprawne wartości
disc, circle, square,
decimal, decimal-leading-zero, lowerroman, upper-roman,
lower-greek, lower-alpha, lower-latin,
1. list-style-type
upper-alpha,
upper-latin, hebrew, armenian, georgian,
cjk-ideographic, hiragana, katakana,
hiragana-iroha, katakana-iroha, none
list-style2.
inside, outside
position
list-style3.
adres uri obrazu
image
lp.
Atrybut
Opis
styl numerowanie i
wypunktowania
położenie numeracji
względem tekstu
ikona wypunktowania
Pozycjonowanie
Element „position” najczęściej jest związany z tagiem <div>. Może przyjąć następujące
wartości.
static (statyczne)
relative (relatywne)
absolute (absolutne)
fixed (ustalone)
Pozycjonowanie statyczne
Elementy z position:static. Jest to wartość domyślna dla wszystkich elementów.
Umieszczenie elementu zależy od pozycji w dokumencie.
Pozycjonowanie relative
Elementy z position:relative. Możemy przesunąć element w dowolnym kierunku od miejsca
w którym by się znalazł domyślnie.
Możliwości przesunięcia to top, bottom, left, right. Jeśli przesuniemy element nadając mu
top:10px to element przesunie się o 10px w dół. Zajmuje on miejsce tam gdzie powinien być
domyślnie wyświetlany a pokazywany jest w innym miejscu. Można nadawać też wartości
ujemne.
Tak pozycjonowany element staje się kontenerem dla wszystkich innych, które są absolutnie
w nim pozycjonowane.
Pozycjonowanie
absolut
Elementy z position:absolute. Możemy przesunąć element w dowolnym kierunku od miejsca
położenia w kontenerze. Kontenerem są elementy z position relative, absolute, fixed. Gdy
niema takiego elementu nadrzędnego to wybiera go przeglądarka. Może to być body ale nie
musi.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób
nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar
w przeglądarce.
position:relative i position:absolute
Pozycjonowanie fixed
Elementy z position:fixed. Możemy przesunąć element w dowolnym kierunku od miejsca
położenia kontenera, którym w tym przypadku zawsze jest okno przeglądarki.
Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób
nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar
z-index
Elementy pozycjonowane mają wagę widoczności elementu na osi-z czyli warstwy.
Widoczność określa nam atrybut z-index. Czym wartość liczbowa jest większa tym większy
jest priorytet widoczności.
Zadania:
1. Utwórz dla dowolnych kilku zdjęć dokument, w którym zdjęcia te będą sprawiały
wrażenie rzuconych jedno na drugie
2. Zmień kolor suwaka paska przewijania.
3. Utwórz tabelę 3 na 3, w której każda komórka ma inny kolor tła.
4. Stwórz element, po najechaniu na który kursor myszy będzie zamieniał się w krzyżyk.
5. Stwórz kilka odnośników, z których każdy będzie przyjmował inny kolor po
odwiedzeniu, inny po najechaniu myszką a inny jeśli odnośnik nie jest odwiedzony.
Pozmieniaj układ i kolory w przykładach 1-5
JavaScript to język rozszerzający HTML o elementy dynamiczne. Działa po tronie
przeglądarki (klienta) w przeciwieństwie do języków serwerowych (PHP, ASP, Java Server
Pages).
Uruchom przykłady przedstawione w pierwszej części laboratorium, wyodrębnij elementy w
tagu <script>, przeanalizuj działanie skryptów.
