Projektowanie stron WWW

Transkrypt

1 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); Projektowanie stron WWW Projektowanie stron WWW Wykład 3 Michał Dudkiewicz, WMiI UMK (jaymz@mat.umk.pl)

2 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); HTML (tabele) $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 2 Projektowanie stron WWW

3 HTML tabele <table> definiuje tabelę <tr> definicja wiersza (table row) <td> definicja komórki (table data) <caption> opis, domyślnie umieszczany na górze i wycentrowany względem poziomej krawędzi tabeli <th> (table header) komórka zawierająca nagłówek 3

4 HTML tabele Podstawowe atrybuty tabeli: width szerokość tabeli (komórki) rowspan rozpiętość wiersza colspan rozpiętość kolumny cellspacing odległość między komórkami cellpadding margines wewnętrzny komórki id identyfikator (tzw. kotwica) align wyrównanie w komórce/wierszu w poziomie (left, right, center) valign wyrównanie w pionie (top, bottom, middle) title opis 4

5 HTML tabele <table cellspacing="10" cellpadding="30" border="1"> <tr bgcolor="red"> <td>a</td> <td>b</td> </tr> <tr align="right" bgcolor="green" height="150"> <td valign="bottom">c</td> <td>d</td> a b </tr> </table> c d 5

6 HTML tabele a b c d e f g h i 6

7 HTML tabele A B C E D 7

8 HTML tabele A B C D E F G H I J K L M N 8

9 <?php Ming_setScale(1.0); $string = "Ming"; $f = new SWFFont("ComicSansMS.fdb"); $m = new SWFMovie(); $m->setrate(24.0); $m->setdimension(2400, 1600); $m->setbackground(0xff, 0xff, 0xff); function text($r, $g, $b, $a) { global $f, $m; $t = new SWFText(); $t->setfont($f); $t->setcolor($r, $g, $b, $a); $t->setheight(960); $t->moveto(-($t->getwidth($string))/2, 220); CSS (model blokowy) $t->addstring($string); $i = $m->add($t); $i->x = $x; $i->y = $y; $i->rot = $rot; $i->s = $scale; $i->rotateto($rot); 9 Projektowanie stron WWW

10 CSS model blokowy Model blokowy w CSS pozwala na zdefiniowanie bloków, które są generowane dla elementów HTML. Każdy z bloków może być niezależnie lub zależnie pozycjonowany na stronie, posiadać różne właściwości (marginesy zewnętrzny i wewnętrzny, obramowanie, tło itp.) oraz różną treść. margin border padding zawartość 10

11 CSS model blokowy margin: określa odległość każdej ze stron do sąsiedniego elementu (lub obramowania dokumentu) margin-top: wartość od góry; margin-right: wartość od prawej; margin-bottom: wartość od dołu; margin-left: wartość od lewej; lub w skróconym zapisie margin: 100px 40px 10px 70px top right bottom left np.: dla całej strony body {margin: 100px 40px 10px 70px;} 11

12 CSS model blokowy Marginesy zewnętrze mogą być również stosowane w analogiczny sposób do innych elementów. w CSS h1 { color:blue; background-color: yellow; margin: 20px 20px 20px 20px; } w HTML <h2>strona o słoniach z CSS</h2> <h1>na wycieczkę zabieramy</h1> <div id="lista"><ul> <li>parasol</li> <li>zapałki</li> <li>śpiwór</li> </ul> </div> 12

13 CSS rozmiar marginesów Rozmiar marginesów Właściwości: margin-top, margin-right, margin-bottom, margin-left,margin: mogą przyjmować wartości określane jako: n pt n px n in n cm n mm n pc n em n ex m% auto n liczba dodatnia pt punkty (1/72 cala), px piksele, in cale, cm centymetry, mm milimetry, pc picas 1 pc= 12 pt, em rozmiar bieżącego fontu, ex rozmiar znaku x w bieżącym foncie, m wartość w procentach (liczba dodatnia), auto wartość marginesu dopasowana automatycznie. np.: div.margin{margin-left: 10%; margin-right: 20%; margin-top: 40%; margin-bottom: 10%;} 13

14 CSS model blokowy (padding) padding - określa odległość tekstu (lub innej zawartości bloku) od każdej ze stron bloku padding-top: wartość od góry; padding-right: wartość od prawej; padding-bottom: wartość od dołu; padding-left: wartość od lewej; lub w skróconym zapisie padding: 40px 20px 20px 20px np.: dla całej strony body {padding: 40px 20px 10px 20px;} 14

15 CSS model blokowy (obramowanie) border: - pozwala na zdefiniowanie obramowania danego bloku, border-width: określa szerokość obramowania, może przyjmować wartości thin, medium, thick lub wartości w pikselach np.: 6px border-color: określa kolor obramowania border-style: określa styl obramowania, możliwe wartości to: dotted dashed solid double groove ridge inset outset none, hidden wyłącza obramowanie Obramowania mogą być w różny sposób interpretowane przez różne przeglądarki! 15

16 CSS model blokowy (obramowanie) Można również ustawić konkretne właściwości oddzielnie dla każdej krawędzi, dodając w składni odpowiednio: top, bottom, right, left, np.: h1 { border-top-width: thick; border-top-style: dotted; border-top-color: red; border-bottom-width: 3px; border-bottom-style: dashed; border-bottom-color: blue; border-right-width: 8px; border-right-style: groove; border-right-color: green; border-left-width: 7px; border-left-style: solid; border-left-color: teal; } 16

17 CSS model blokowy (obramowanie) Przykładowy kod: h1 { border-width: 1px; border-style: solid; border-color: blue; } może być zapisany w skróconej formie jako h1 { border: 1px solid blue; } analogicznie kod h1 {border-top-width: thick; border-top-style: dotted; border-top-color: red;} można zapisać jako h1 {border-top: thick dotted blue;} 17

18 CSS model blokowy (display) display: pozwala na określenie sposobu wyświetlania elementu możliwe wartości: block element jest wyświetlany jako osobny blok inline element jest wyświetlany jako ciąg dalszy (obok) poprzedniego elementu. Pozwala na wyświetlanie jakiegoś elementu obok innego elementu, mimo że ma on charakter blokowy (wartość domyślna). none element nie jest wyświetlany alternatywnie visibility: hidden - element nie jest wyświetlany, ale cały czas zajmuje miejsce na stronie 18

19 CSS model blokowy (rozmiar bloku) width pozwala na określenie szerokości wyświetlanego bloku height pozwala na określenie wysokości wyświetlanego bloku div.box { height: 500px; width: 200px; border: 1px solid black; background: red; } 19

20 CSS model blokowy (rozmiar bloku, overflow) Wielkość bloku i overflow CSS #scroll { background-color:#00ffff;width:30px;height:30px;overflow:scroll; } #hidden { background-color:#00ff00;width:30px;height:30px;overflow:hidden; } HTML <div id="scroll">toruń to bardzo ładne miasto z pięknymi zabytkami.</div> <div id="hidden">uniwersytet Mikołaja Kopernika w Toruniu jest uczelnią wyższą.</div> 20

21 CSS model blokowy (float) float umożliwia ustawienie elementu na lewo (left) lub na prawo (right) od innego elementu, lub przyjąć wartość none. CSS #obraz{float: left; width: 150px;} #tekst {width: 700px;} HTML <div id="obraz"><img src="slon.jpg" alt="slon ></div> <div id="tekst">ala ma kota.</div> Uwaga! Kolejność bloków w pliku jest istotna!!! 21

22 CSS model blokowy (clear) clear pozwala na kontrolę nad kolejnym elementem występującym po elemencie pływającym. Standardowo, kolejne elementy przesuwają się w taki sposób, aby zapełnić puste miejsce stworzone przez element pływający. Właściwość clear może przyjmować wartości: left, right, both lub none. clear: both oznacza, że górny margines obramowania tego elementu będzie zawsze poniżej dolnego marginesu obramowania elementu nad nim pływającego. 22

23 CSS model blokowy (położenie elementu) position: absolute pozwala na określenie absolutnego (bezwzględnego) położenia elementu na stronie Po określeniu tej właściwości podajemy położenie bloku określając jego odległość od dwóch wybranych krawędzi okna. Właściwości: top: określa położenie od górnej krawędzi left: określa położenie od lewej krawędzi right: określa położenie od prawej krawędzi bottom: określa położenie od dolnej krawędzi np.: h1 { position:absolute; top: 100px; left: 200px; } 23

24 CSS model blokowy (położenie elementu) position: relative pozwala na określenie relatywnego (względnego) położenia elementu na stronie względem jego oryginalnej pozycji Po określeniu tej właściwości podajemy położenie bloku określając jego odległość od dwóch wybranych krawędzi okna. Właściwości (mogą przyjmować również wartości ujemne): top: określa położenie od górnej krawędzi left: określa położenie od lewej krawędzi right: określa położenie od prawej krawędzi bottom: określa położenie od dolnej krawędzi np.: h1 { position: relative; top: 100px; left: 200px; } 24

25 CSS cursor, z-index cursor pozwala na określenie wyglądu kursora nad danym obiektem, wartości: crosshair hand move e-resize ne-resize nw-resize n-resize se-resize sw-resize w-resize text wait help default z-index pozwala na określenie numeru warstwy, elementy z wyższym numerem nakładają się na elementy z niższym numerem. Elementów nie trzeba numerować od 1 nie muszą też być numerowane po kolei, liczy się tylko hierarchia. 25

26 CSS model blokowy (możliwe problemy) Problemy z BoxModel div { width: 160px; padding: 15px; border: 3px ;} Interpretacja standardowa width określa miejsce wyłącznie dla treści, całkowita szerokość elementu to 160px+2*15px+2*3px=196px Interpretacja Internet Explorer width określa całkowitą szerokość elementu 160px, obszar dla treści to 160px-2*15px-2*3px=124px 26

27 CSS model blokowy (rozwiązanie problemów) Stosowanie komentarzy warunkowych. Ogólna postać:  Styl osadzony:  27

28 CSS model blokowy (rozwiązanie problemów) Stosowanie komentarzy warunkowych. Zdefiniowanie stylu dla wersji IE   Operatory: gt - wersja większa od podanej, gte - wersja większa lub równa podanej, lt-wersja mniejsza od podanej, lte - wersja mniejsza lub równa podanej,! - wersja różna od podanej. 28

29 CSS tekst text-align odpowiada za wyrównanie tekstu (left, right, center, justify) text-decoration umożliwia dodanie różnych efektów do tekstu (underline podkreślenie, overline linia nad tekstem, line through przekreślenie) np.: h1.podkr{ text-decoration: underline; } h1.nad{ text-decoration: overline; } h1.skresl { text-decoration: line-through; } letter-spacing odpowiada za odstępy pomiędzy literami word-spacing odpowiada za odstępy pomiędzy wyrazami np.: p.szesc{ letter-spacing: 6px; word-spacing:10px; } p.trzy{ letter-spacing: 3ex; word-spacing:2em;} 29

30 CSS tekst (odstępy między wierszami) line-height pozwala określić odstępy między wierszami. możliwe wartości: n pt n px n in n cm n mm n pc n em n ex m% normal n liczba dodatnia pt punkty (1/72 cala), px piksele, in cale, cm centymetry, mm milimetry, pc picas 1 pc= 12 pt, em rozmiar bieżącego fontu, ex rozmiar znaku x w bieżącym foncie m wartość w procentach (liczba dodatnia), normal wartość domyślna np.: p {line-height: 30px; } h2{line-height: 21mm;} div.19pt {line-height: 19pt;} div.ex{line-height: 4.3ex;} 30

31 CSS tekst (wcięcia) text-indent pozwala określić wcięcie dla pierwszej linii akapitu. możliwe wartości: n pt n px n in n cm n mm n pc n em n ex m% n liczba dodatnia pt punkty (1/72 cala), px piksele, in cale, cm centymetry, mm milimetry, pc picas 1 pc= 12 pt, em rozmiar bieżącego fontu, ex rozmiar znaku x w bieżącym foncie m wartość w procentach (liczba dodatnia), normal wartość domyślna np.: p {text-indent: 30px; } h2{text-indent: -21mm;} div.wciencie{text-indent: 19pt;} div.akapit{text-indent: 4.3ex;} 31

32 CSS tekst (transformacja) text-transform pozwala zmienić wielkość wyświetlanej czcionki w tekście umieszczonym w kodzie HTML, możliwe wartości: capitalize zamienia na dużą literę wszystkie pierwsze litery w wyrazach to jest napis na To Jest Napis uppercase zamienia wszystkie litery na duże to jest napis na TO JEST NAPIS lowercase zamienia wszystkie litery na małe To JeStNaPIs na to jest napis none tekst bez transformacji np.: h1 { text-transform: uppercase; } li { text-transform: capitalize; } 32

33 CSS linki Odnośniki a { color: blue; } zdefiniowanie stylu dla odnośnika a:link { color: blue; } zdefiniowanie stylu dla podklasy nieodwiedzony a:visited { color: red; } zdefiniowanie stylu dla podklasy odwiedzony a:active { background-color: #FFFF00; } zdefiniowanie stylu dla podklasy aktywny a { text-decoration:none;} usunięcie podkreślenia z odnośnika a:hover { color: orange; font-style: italic; } zdefiniowanie stylu dla podklasy wskazany np.: a:hover { letter-spacing: 10px; font-weight:bold; color:red; } a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color: yellow; } 33

34 CSS listy list-style-type pozwala na określenie punktoróww listach, możliwe wartości: disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha disc koło circle okrąg square kwadrat decimal liczby (cyfry arabskie) lower-roman liczby (małe cyfry rzymskie) upper-roman liczby (duże cyfry rzymskie) lower-alpha kolejne małe litery alfabetu łacińskiego upper-alpha kolejne duże litery alfabetu łacińskiego 34

35 CSS listy CSS.dis {list-style-type: disc;}.cir {list-style-type: circle;}.squ {list-style-type: square;}.dec {list-style-type: decimal;}.lro {list-style-type: lower-roman;}.uro {list-style-type: upper-roman;}.lal {list-style-type: lower-alpha;}.ual {list-style-type: upper-alpha;} HTML <ul> <li class="dis">element 1</li> <li class="cir">element 2</li> <li class="squ">element 3</li> <li class="dec">element 4</li> <li class="lro">element 5</li> <li class="uro">element 6</li> <li class="lal">element 7</li> <li class="ual">element 8</li> </ul> 35

36 CSS listy list-style-image pozwala na użycie obrazów jako punktorów w listach, wartości none brak obrazu url("punkt.jpg") wskazuje obraz, (obraz nie jest skalowany) list-style-position - pozwala na określenie położenia punktorów, wartości: outside inside np.: ul {list-style-image: url("punkt.jpg"); list-style-position: outside;} 36

37 Zakończenie 37