Nie wystarczy dużo wiedzieć, żeby być mądrym

• Joomla
• CSS
• HTML
• Początek
• Start

Początek

Strona Główna

HTML

Wprowadzenie

Ćw. 1 - Wstęp do HTML i XHTML

Ćw. 2 - Body i meta

Ćw. 3 - Tekst

Ćw. 4 - Odsyłacze

Ćw. 5 - Tabele

Ćw. 6 - Multimedia

Ćw. 7 - Ramki

Ćw. 8 - Formularze

Ćw. 9 - Kolory i znaki specjalne

CSS

Wprowadzenie

Ćw. 10 - CSS i wstawianie CSS

Ćw. 11 - Selektory

Ćw. 12 - Czcionki i tekst

Ćw. 13 - Tło i marginesy

Ćw. 14 - Obramowanie i wykazy

Ćw. 15 - Rozmiary i tabele

Ćw. 16 - Pozycjonowanie i kursory

Ćw. 17 - Suwaki i filtry

Ćw. 18 - Menu w CSS

Ćw. 19 - Strona na DIV-ach

Joomla

Wprowadzenie

Ćw. 20 - Instalacja i konfiguracja

Ćw. 21 - Treść, sekcje i kategorie

Ćw. 22 - Tworzenie menu

Ćw. 23 - Komponenty Joomla

Ćw. 24 - Szablony i inne atrakcje

Ćwiczenie 16 - Pozycjonowanie i kursory

Wprowadzenie:

W tym ćwiczeniu omówione zostaną kolejne własności CSS. Tym razem będą to: niezwykle istotne pozycjonowanie, czyli określanie pozycji elementów w stosunku do innych elementów oraz kursory, czyli swoiste ozdobniki strony WWW.

1. zadania do wykonania

1. spakowane pliki do zadań: pliki_16.zip (66KB)

Własności pozycjonowania:

1. pozycjonowanie relatywne
2. pozycjonowanie absolutne
3. pozycjonowanie ustalone
4. pozycjonowanie statyczne
5. kolejność nakładania
6. przycinanie elementu
7. ułożenie w pionie
8. ułożenie w poziomie
9. przyleganie elementów
10. sposób wyświetlania
11. widoczność elementu

Własności kursorów:

1. kształty kursorów
2. kursory obrazkowe

Pozycjonowanie

Pozycjonowanie relatywne

Składnia reguły:

1. selektor {position: relative; kierunek: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. kierunek:
2. "left" - odległość od lewej krawędzi naturalnego pozycjonowania
3. "top" - odległość od górnej krawędzi naturalnego pozycjonowania
4. "right" - odległość od prawej krawędzi naturalnego pozycjonowania
5. "bottom" - odległość od dolnej krawędzi naturalnego pozycjonowania

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)
9. można podawać ujemne wielkości - przesunięcie będzie w przeciwną stronę

Dzięki temu poleceniu można przesunąć wybrany element w stosunku do naturalnego pozycjonowania elementów.

Można łączyć kierunki, czyli jednocześnie ustawić odległość od na przykład lewej i górnej krawędzi. Składnia reguły będzie wyglądała następująco:

1. selektor {position: relative; left: 10px; top: 10px;}

Przykład:

do góry

Pozycjonowanie absolutne

Składnia reguły:

1. selektor {position: absolute; kierunek: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. kierunek:
2. "left" - odległość od lewej krawędzi elementu nadrzędnego
3. "top" - odległość od górnej krawędzi elementu nadrzędnego
4. "right" - odległość od prawej krawędzi elementu nadrzędnego
5. "bottom" - odległość od dolnej krawędzi elementu nadrzędnego

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)
9. można podawać ujemne wielkości - przesunięcie będzie w przeciwną stronę

Dzięki temu poleceniu można przesunąć wybrany element w stosunku do wybranych krawędzi strony lub też nadrzędnego elementu tworzącego blok. Będzie to niezależne od innych elementów, a także od miejsca wpisania reguły w dokumencie.

Należy zachować ostrożność, używając pozycjonowania absolutnego, ponieważ niekiedy może ono prowadzić do nieprzewidywalnych zachowań.

Można łączyć kierunki, czyli jednocześnie ustawić odległość od na przykład lewej i górnej krawędzi. Składnia reguły będzie wyglądała następująco:

1. selektor {position: absolute; left: 10px; top: 10px;}

Przykład:

Przykład w zewnętrznym pliku:

1. position: absolute;

do góry

Pozycjonowanie ustalone

Składnia reguły:

1. selektor {position: fixed; kierunek: wielkość;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. kierunek:
2. "left" - odległość od lewej krawędzi okna
3. "top" - odległość od górnej krawędzi okna
4. "right" - odległość od prawej krawędzi okna
5. "bottom" - odległość od dolnej krawędzi okna

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)
9. można podawać ujemne wielkości - przesunięcie będzie w przeciwną stronę

Dzięki temu poleceniu można ustawić na stałe wybrany element w stosunku do krawędzi okna.

Można łączyć kierunki, czyli jednocześnie ustawić odległość od na przykład lewej i górnej krawędzi. Składnia reguły będzie wyglądała następująco:

1. selektor {position: fixed; left: 10px; top: 10px;}

Przykład:

do góry

Pozycjonowanie statyczne

Składnia reguły:

1. selektor {position: static;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

Dzięki temu poleceniu można przywrócić naturalne pozycjonowanie elementów oparte na kolejności występowania w dokumencie HTML. Podanie jakiejkolwiek odległości nie ma żadnego wpływu na pozycję elementu.

Przykład:

do góry

Kolejność nakładania

Składnia reguły:

1. selektor {position: rodzaj; kierunek: wielkość; z-index: kolejność;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. rodzaj:
2. "relative" - pozycjonowanie relatywne
3. "absolute" - pozycjonowanie absolutne
4. "fixed" - pozycjonowanie ustalone

1. kierunek:
2. "left" - odległość od lewej krawędzi okna
3. "top" - odległość od górnej krawędzi okna
4. "right" - odległość od prawej krawędzi okna
5. "bottom" - odległość od dolnej krawędzi okna

1. wielkość - jednostki miary:
2. piksele - px
3. punkty edytorskie - pt
4. wysokość litery "x" - ex
5. wysokość aktualnej czcionki - em
6. centymetry lub milimetry - cm, mm
7. części dziesiętne centymetra pisane z kropką np.: 0.5cm
8. cale - in (1in=2.54cm)
9. można podawać ujemne wielkości - przesunięcie będzie w przeciwną stronę

1. kolejność:
2. liczba określającą kolejność
3. kolejność rośnie wraz z numeracją
4. element z najmniejszą liczbą będzie na samym spodzie
5. "auto" - przywraca naturalną kolejność

Dzięki temu poleceniu można ustalić kolejność nakładania się elementów. W normalnym stanie elementy nakładają się w kolejności wpisywania do dokumentu HTML. Można to zmienić wstawiając własną kolejność.

Kolejność nakładania dotyczy elementów pozycjonowanych.

Przykład:

do góry

Przycinanie elementu

Składnia reguły:

1. selektor {position: absolute; clip: rect(współrzędne);}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. współrzędne:
2. punkty, od których element będzie przycięty
3. współrzędne liczone są od lewego górnego rogu
4. podaje się je w odpowiedniej kolejności:
5. góra
6. prawo
7. dół
8. lewo

Dzięki temu poleceniu można przyciąć element z czterech stron: od góry, prawej strony, od dołu i od lewej strony. Możliwe jest to tylko przy position: absolute;. Przycięty fragment może być tylko prostokątem. Wartości określają rogi prostokąta: górny-prawy i dolny-lewy.

Składnia reguły z przykładowymi wartościami ma następujący wygląd:

selektor {position: absolute; clip: rect(10px 100px 10px 10px);}

Przykład:

W poniższym przykładzie, ażeby móc zastosować pozycjonowanie absolutne, grafiki i zdanie do przycięcia umieszczone zostały w elemencie nadrzędnym czyli znaczniku <div>...</div> (każdy w osobnym) pozycjonowanym relatywnie.

do góry

Ułożenie w pionie

Składnia reguły:

1. selektor {vertical-align: sposób;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w linii lub do komórek w tabeli.

źródło: www.kurshtml.boo.pl

Dzięki temu poleceniu można ustalić pionowe wyrównanie elementów względem siebie.

Przykład:

do góry

Ułożenie w poziomie

Składnia reguły:

1. selektor {float: kierunek;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. kierunek:
2. "left" - element ułożony na lewo od elementów sąsiadujących
3. "right" - element ułożony na prawo od elementów sąsiadujących
4. "none" - element bez elementów sąsiadujących

Dzięki temu poleceniu można ustalić poziome wyrównanie elementu w stosunku do elementów sąsiadujących. Polecenie nie działa przy pozycjonowaniu absolutnym: position: absolute;.

Przykład:

do góry

Przyleganie elementów

Składnia reguły:

1. selektor {clear: miejsce;}

Wyraz selektor ma zastosowanie do elementów wyświetlanych w bloku.

1. miejsce:
2. "left" - lewa krawędź elementu nie będzie stykała się z elementem pływającym poprzedzającym
3. "right" - prawa krawędź elementu nie będzie stykała się z elementem pływającym poprzedzającym
4. "both" - obie krawędzie elementu nie będą stykały się z elementem pływającym poprzedzającym
5. "none" - bez zmian (domyślnie)

Dzięki temu poleceniu można ustalić położenie elementu następującego po elemencie pływającym poprzedzającym. Polecenie definiuje, która krawędź nie będzie przylegać.

Przykład:

do góry

Sposób wyświetlania

Składnia reguły:

1. selektor {display: sposób;}

Wyraz selektor ma zastosowanie do wszystkich elementów .

1. sposób:
2. "block" - wyświetla jako element blokowy (domyślna)
3. "inline" - wyświetla jako element liniowy
4. "inline-block" - wyświetla jako element liniowy z wnętrzem blokowym
5. "list-item" - wyświetla jako listę
6. "none" - ukrywa element
7. "compact" - wyświetla jako zagęszczony akapit bez odstępów
8. "run-in" - wyświetla jako element liniowy, jeżeli następny jest element blokowy
9. "marker" - wyświetla jako znak wykazu
10. "table-header-group" - wyświetla jako nagłówek tabeli
11. "table-footer-group" - wyświetla jako stopkę tabeli
12. "table" - wyświetla jako tabelę
13. "inline-table" - wyświetla jako tabelę
14. "table-caption" - wyświetla jako podpis tabeli
15. "table-cell" - wyświetla jako komórkę tabeli
16. "table-row" - wyświetla jako rząd tabeli
17. "table-row-group" - wyświetla jako grupę rzędów tabeli
18. "table-column" - wyświetla jako kolumnę tabeli
19. "table-column-group" - wyświetla jako grupę kolumn tabeli

Dzięki temu poleceniu można nadać określony sposób wyświetlania, inny niż naturalny. Na przykład element wyświetlany w linii, może być wyświetlany w bloku i na odwrót.

Internet Explorer nie wyświetla poprawnie sposobów dotyczących tabel, inline-block, ani też run-in.

Przykład:

do góry

Widoczność elementu

Składnia reguły:

1. selektor {visibility: stan;}

Wyraz selektor ma zastosowanie do wszystkich elementów .

1. stan:
2. "visible" - element jest wyświetlany (domyślnie)
3. "hidden" - element jest niewidoczny, ale zajmuje miejsce
4. "collapse" - dotyczy tabel i jest nieobsługiwany przez Internet Explorera

Dzięki temu poleceniu można ukryć określony element, aby nie był wyświetlany w przeglądarce. W jego miejscu pojawia się puste pudełko.

Przykład:

do góry

Kursory

Kształty kursorów

Składnia reguły:

1. selektor {cursor: kształt;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. kształt:
2. "default" - strzałka (domyślny)
3. "auto" - automatyczny wybór kształtu (zależny od rodzaju elementu)
4. "crosshair" - krzyżyk
5. "pointer" - wskaźnik
6. "move" - kursor przesuwania
7. "wait" - kursor oczekiwania (klepsydra)
8. "progress" - kursor postępu
9. "help" - kursor pomocy
10. "text" - kursor tekstowy pionowy
11. "vertical-text" - kursor tekstowy poziomy
12. "n-resize" - strzałka zmiany rozmiaru w górę
13. "ne-resize" - strzałka zmiany rozmiaru w górę i na prawo
14. "e-resize" - strzałka zmiany rozmiaru w prawo
15. "se-resize" - strzałka zmiany rozmiaru w dół i na prawo
16. "s-resize" - strzałka zmiany rozmiaru w dół
17. "sw-resize" - strzałka zmiany rozmiaru w dół i na lewo
18. "w-resize" - strzałka zmiany rozmiaru na lewo
19. "nw-resize" - strzałka zmiany rozmiaru w górę i na lewo
20. "col-resize" - strzałka zmiany rozmiaru kolumn
21. "row-resize" - strzałka zmiany rozmiaru wierszy
22. "not-allowed" - znak zakazu

Dzięki temu poleceniu można ustawić kształt kursora po najechaniu myszką na dany element. Należy zachować ostrożność przy definiowaniu kursorów i postępować zgodnie z przyjętym zwyczajem.

Przykład:

do góry

Kursory obrazkowe

Składnia reguły:

1. selektor {cursor: url(adres), kształt;}

Wyraz selektor ma zastosowanie do wszystkich elementów.

1. adres:
2. względna ścieżka dostępu z miejsca w miejsce
3. należy wpisać drogę uwzględniając wszystkie foldery
4. wchodząc do folderu wpisujemy jego nazwę/
5. wychodząc z folderu wpisujemy ../
6. na końcu podajemy nazwę pliku z rozszerzeniem .cur
7. jeżeli jest to zewnętrzny arkusz CSS, to ścieżkę podajemy względem niego

Dzięki temu poleceniu można wstawić własny obrazek jako kursor. Te grafiki muszą być z rozszerzeniem .cur (kursory zwykłe) .ani (kursory animowane). W regule stylu należy podać na końcu alternatywny kształt kursora z listy ogólnych kursorów.

do góry

Zadania do wykonania:

W tym ćwiczeniu należy zastosować własności CSS dotyczące pozycjonowania i kursorów do sformatowania plików HTML. Zadanie polega na sformatowaniu dwóch plików HTML jednym, zewnętrznym plikiem CSS, w którym użyte będą własności dotyczące pozycjonowania i kursorów. W pliku plik_2.html zostanie dokonana również lokalna modyfikacja wewnątrzwierszowymi arkuszami stylów. Konieczne będzie także użycie klas selektorów.

1. Należy zacząć od przygotowania struktury folderów i plików:

1. foldery:
2. cw_16 - główny
3. pliki - zawarty w głównym
4. style - zawarty w głównym
5. grafiki - zawarty w głównym

1. pliki:
2. plik_1.html - w folderze pliki
3. plik_2.html - w folderze pliki
4. style.css - w folderze style
5. zdjęcia i kursory - w folderze grafiki
6. spakowane pliki do zadań: pliki_16.zip (66KB)

2. W obu plikach HTML należy umieścić taką samą treść:

1. zawartość plików HTML:
2. szablon HTML 4.01 Transitional
3. w sekcji <head>...</head>:
4. łącze do arkusza stylów - patrz tutaj
5. w znaczniku <title>...</title> nazwa pliku
6. w sekcji <body>...</body>:
7. znacznik <div>...</div> z klasą: klasa_1
8. w nim wzajemne łącza do plików
9. znacznik <div>...</div> z klasą: klasa_2
10. w nim zdanie w akapicie: Pudełko przyczepione w tym miejscu.
11. znacznik <span>...</span> z klasą: klasa_3
12. w nim znacznik <h3>...</h3> z klasą: klasa_4
13. w nim nazwa pliku: Plik 1 lub Plik2
14. znacznik <div>...</div> z klasą: klasa_5
15. w nim znacznik <img /> z klasą: klasa_6
16. w nim zdjęcie: grafika_1.jpg
17. w tym samym znaczniku <div>...</div> z klasą: klasa_5:
18. trzy wstawki Lorem w akapicie
19. tutaj znacznik zamykający od znacznika <div>...</div> z klasą: klasa_5
20. tak wyglądają pliki HTML przed formatowaniem: klasa_1 - klasa_6
21. znacznik <div>...</div> z klasą: klasa_7
22. w nim znacznik <p>...</p> z klasą: klasa_8
23. w nim zdanie: Rozmiary: 250x200px
24. znacznik <span>...</span> z klasą: klasa_9
25. w nim znacznik <img />
26. w nim zdjęcie: grafika_4.jpg
27. znacznik <span>...</span> z klasą: klasa_10
28. w nim znacznik <img /> z klasą: klasa_11
29. w nim zdjęcie: grafika_4.jpg
30. znacznik <p>...</p> z klasą: klasa_8
31. w nim słowa: Po przycięciu:
32. tutaj znacznik zamykający od znacznika <div>...</div> z klasą: klasa_7
33. tak wyglądają pliki HTML przed formatowaniem: klasa_7 - klasa_11
34. znacznik <div>...</div> z klasą: klasa_12
35. w nim znacznik <img />
36. w nim zdjęcie: grafika_1.jpg
37. znacznik <div>...</div> z klasą: klasa_13
38. w nim znacznik <img />
39. w nim zdjęcie: grafika_2.jpg
40. znacznik <div>...</div> z klasą: klasa_14
41. w nim znacznik <img />
42. w nim zdjęcie: grafika_3.jpg
43. tak wyglądają pliki HTML przed formatowaniem: klasa_12 - klasa_14

Spakowane pliki do zadań: pliki_16.zip (66KB).

Po wpisaniu całej zawartości pliki powinny wyglądać tak - bez żadnego formatowania:

Krok 1: klasa_1 - klasa_6

Krok 1: klasa_7 - klasa_11

Krok 1: klasa_12 - klasa_14

3. W pliku CSS należy przygotować dla wszystkich czternastu klas, czternaście różnych reguł formatujących pozycjonowanie i kursory, uwzględniających ich właściwości.

1. zawartość pliku CSS:
2. klasa_1:
3. wielkość czcionki: 20pt;
4. wszystkie marginesy: 30px;
5. odstęp między słowami: 25px;
7. klasa_2:
8. pozycja: fixed; right: 25px; bottom: 100px;
9. obramowanie: 5px double #00ff00; (lime)
10. kolor tła: #ff00ff; (fuchsia)
11. szerokość: 100px;
12. wyrównanie tekstu: center;
13. wszystkie marginesy wewnętrzne: 10px;
15. klasa_3:
16. kursor: not-allowed;
18. klasa_4:
19. pozycja: absolute; right: 50px; top: 150px;
20. kolor tekstu: #ffffff; (white)
21. wyrównanie tekstu: center;
22. kolor tła: #800000; (maroon)
23. szerokość: 100px;
24. wszystkie marginesy wewnętrzne: 10px;
26. klasa_5:
27. margines dolny: 30px;
29. klasa_6:
30. ułożenie w poziomie: left;
31. tak wyglądają pliki HTML po formatowaniu: klasa_1 - klasa_6
33. klasa_7:
34. margines dolny: 30px;
35. kolor tła: #c0c0c0; (silver)
36. wszystkie marginesy wewnętrzne: 30px;
38. klasa_8:
39. sposób wyświetlania: inline;
40. margines lewy: 10px;
42. klasa_9:
43. kursor: progress;
45. klasa_10:
46. kursor: help;
48. klasa_11:
49. pozycja: absolute;
50. przycinanie: rect(40px 180px 160px 70px);
51. tak wyglądają pliki HTML po formatowaniu: klasa_7 - klasa_11
53. klasa_12:
54. pozycja: relative;
56. klasa_13:
57. pozycja: relative; left: 50px; bottom: 120px;
59. klasa_14:
60. pozycja: relative; left: 100px; bottom: 240px;
61. tak wyglądają pliki HTML po formatowaniu: klasa_12 - klasa_14

Efekt powinien być taki, że oba pliki HTML będą tak samo sformatowane. Wygląda to następująco:

oba pliki - klasa_1 - klasa_6

oba pliki - klasa_7 - klasa_11

oba pliki - klasa_12 - klasa_14

4. W pliku: plik_2.html należy dokonać lokalnych wewnątrzwierszowych modyfikacji:

1. wewnątrzwierszowe modyfikacje w pliku: plik_2.html:
2. klasa_2:
3. pozycja: fixed; right: 250px; bottom: 300px;
5. klasa_3:
6. kursor: row-resize;
7. pozycja: absolute; left: 250px; top: 50px;
9. klasa_6:
10. ułożenie w poziomie: right;
11. tak wygląda plik_2.html po formatowaniu: klasa_1 - klasa_6
13. pierwszy akapit z klasą klasa_8:
14. sposób wyświetlania: block;
16. klasa_9:
17. kursor obrazkowy: kursor_1.cur, pointer;
19. klasa_11:
20. kursor obrazkowy: kursor_2.cur, crosshair;
21. przycinanie: rect(70px 240px 120px 10px);
22. tak wygląda plik_2.html po formatowaniu: klasa_7 - klasa_11
24. klasa_12:
25. pozycja: relative; left: 100px; bottom: 0px; z-index: 3;
27. klasa_13:
28. pozycja: relative; left: 50px; bottom: 120px; z-index: 2;
30. klasa_14:
31. pozycja: relative; left: 0px; bottom: 240px; z-index: 1;
32. tak wygląda plik_2.html po formatowaniu: klasa_12 - klasa_14

Spakowane pliki do zadań: pliki_16.zip (66KB).

Po wszystkich zmianach plik plik_2.html powinien wyglądać następująco:

plik_2.html - klasa_1 - klasa_6

plik_2.html - klasa_7 - klasa_11

plik_2.html - klasa_12 - klasa_14

Oceniany będzie folder cw_16 z trzema podfolderami: pliki, style i grafiki, w których zawarte będą odpowiednio pliki: w folderze pliki: plik_1.html i plik_2.html, w folderze style plik: style.css, a w folderze grafiki pliki graficzne: zdjęcia i kursory.

Pliki HTML powinny być sformatowane zgodnie z poleceniami za pomocą zewnętrznego arkusza stylów z pliku style.css. Formatowanie obejmuje pozycjonowanie i kursory - użyte są własności formatowania tych dwóch elementów. Ponadto w pliku plik_2.html dokonana ma zostać lokalna wewnątrzwierszowa modyfikacja wyżej wspomnianych elementów.

Strona Główna

do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki