Temat 5: Pozycjonowanie elementów

Slides:



Advertisements
Podobne prezentacje
Dokument HTML jest zwykłym
Advertisements

Tworzenie stron internetowych
SuperHost.pl td img {display: block;}
Metody pozycjonowania elementów na stronie www
Zastosowanie technologii medialnych i internetowych Wygląd witryny krok po kroku Wykład dr in ż. Jacek Wachowicz
Kolory, grafika, multimedia
Style CSS.
Style definiujące tabele
Zastosowanie technologii medialnych i internetowych Grafika i skrypty na stronach WWW Wykład dr in ż. Jacek Wachowicz
Narzędzia internetowe Paweł Rajba
Podstawy i rozszerzenia języka HTML
Style CSS - Pozycjonowanie
Tworzenie stron internetowych www World Wide Web
OPRACOWAŁ : KONRAD MIGAŁA iz krótki tekst Krótki tekst Do formatowania tekstu użyjemy znacznika jest to znacznik który umożliwia utworzenie akapitu.
Projektowanie stron WWW (Wykład 5) PSEUDOKLASY HTML 5 - WPROWADZENIE
języka hipertekstowego
Tworzenie stron internetowych
PROJEKT STRONY WWW KW GOPŁO KRUSZWICA
Wstawianie stylów CSS.
HTML cz. 2 Znaczniki i ich parametry
TECHNOLOGIE INTERNETOWE
Temat 7: Tekst.
Specjalizacja "Dziennikarstwo On-line„ Arkusze stylów – CSS Część 5 Prowadzący: Dariusz Jaruga
Cascading Style Sheets
CSS – Kolor tła.
Specjalizacja "Dziennikarstwo On-line„ HTML – XHTML część 3 Prowadzący: Dariusz Jaruga
Temat 10: Tabele. Tabele stanowią obecnie jeden ze sposobów prezentowania danych. Początkowo były wykorzystywane do tworzenia układów stron, które teraz.
Wprowadzenie do CSS Okiełznać style.
Część I. Grupowanie elementów  Elementy i są używane do grupowania i strukturyzowania dokumentu. Będziesz je często wykorzystywał wraz z atrybutami class.
Temat 13: Ramki.
Temat 11: Odsyłacze.
Aplikacje internetowe
Aplikacje internetowe
Elementy multimedialne na stronie
Aplikacje internetowe Tabele Ciąg dalszy. Wprowadzanie złamań wiersza Często, najprostszym sposobem wpływania na układ tabeli jest wprowadzenie łamań.
Aplikacje internetowe Grafika na stronach WWW ciąg dalszy Atrybuty znacznika body.
Tabele. TABELE Konstrukcja tabeli: Określa ramy tabeli określamy wiersz tabeli określamy komórkę tabeli.
Aplikacje internetowe
Temat 3: Właściwości CSS
Aplikacje internetowe
Aplikacje internetowe
Aplikacje internetowe Tabele. Wprowadzenie Wprowadzenie tabel przez firmę Netscape na początku 1995 roku niemal od razu zrewolucjonizowało sposób projektowania.
Projektowanie Aplikacji Internetowych
HTML.
Aplikacje internetowe
Temat 9: Obrazy i multimedia
Aplikacje internetowe
Informatyka – szkoła gimnazjalna – Scholaris - © DC Edukacja Wprowadzenie do kaskadowych arkuszy stylów Informatyka.
Temat 4: Klasy i identyfikatory
Projektowanie Aplikacji Internetowych Artur Niewiarowski Wydział Fizyki, Matematyki i Informatyki Politechnika Krakowska.
XHTML Tworzenie stylów CSS Damian Urbańczyk. Zewnętrzny plik CSS Aby ułatwić sobie pracę ze stylami, najlepiej utworzyć osobny plik, w którym będą przechowywane.
Kolumny, tabulatory, tabele, sortowanie
CSS - Selektory. Selektory Selektorem można nazwoć dowolny element języka HTML, dla którego chcemy zdefiniować parametry formatowania. Wyróżniamy następujące.
C S S 1 Cascading Style Sheets HTML pozwala zarządzać strukturą dokumentu, STYLE mają nam służyć do jego upiększania Kaskadowe Arkusze Stylów.
Temat 1: CSS Dołączanie stylów do dokumentu
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) – język wykorzystywany do tworzenia stron internetowych HTML zdefiniowanie.
Temat 5: Instrukcje: print(), echo()
Damian Urbańczyk xHTML Elementy graficzne.
Temat 2: Składnia kaskadowych arkuszy stylów. Za zmianę wyglądu witryny w kaskadowych arkuszach stylów odpowiadają reguły stylów. Każda z reguł powiązana.
Technologie internetowe
Kaskadowe arkusze stylów CSS. Reguła CSS – definiuje sposób formatowania elementów na stronie WWW Części składowe reguły CSS selektor{ właściwość: wartość;
Wykład 2 Mechatronika PWSW Informatyka. Strony WWW (World Wide Web) Mosaic – pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari.
Wykład 4 Informatyka MPDI sem.3 HTML cd. Arkusze stylów - CSS.
 Formuła to wyrażenie algebraiczne (wzór) określające jakie operacje ma wykonać program na danych. Może ona zawierać liczby, łańcuchy znaków, funkcje,
HTML, XHTML, CSS Model pudełka.  Wszystkie elementy w HTML mogą być rozważane jako pudełka. W CSS model pudełka dotyczy projektu i układu. Składa się.
ACCESS - FORMULARZE TEMAT:. Tworzenie formularza Formularz tworzony jest w celu łatwiejszego przeglądania i edytowania danych zawartych w bazie. Tworzymy.
Zasady formatowania szkolnej pracy pisemnej
Piotr Grzegorzewski klasa 1GB (rok szkolny 2011/2012)
Arkusz stylów CSS Cascading Style Sheet.
Style definiujące tekst
Zapis prezentacji:

Temat 5: Pozycjonowanie elementów

Za pomocą kaskadowych arkuszy stylów można manipulować wyglądem poszczególnych elementów oraz mieć wpływ na ich dokładne położenie na stronie. Pozycjonowanie odpowiada za umiejscowienie elementu w dowolnie wybranym miejscu przez zastosowanie właściwości position. Rozróżnia się dwa rodzaje pozycjonowania: pozycjonowanie względne (relative) oraz pozycjonowanie bezwzględne (absolute). Pozycjonowanie bezwzględne, nazywane również absolutnym, pozwala na ustalenie położenia elementu w stosunku do ram okna przeglądarki lub innego elementu nadrzędnego. Wykorzystuje się w tym celu dodatkowo cztery własności (left, right, top, bottom), którym należy przypisać konkretne własności (w pikselach lub innych jednostkach miary) odpowiadające odległości od lewej, prawej, dolnej lub górnej krawędzi okna lub innego elementu nadrzędnego. selector{ position: absolute; left: wartość; right: wartość; top: wartość; bottom: wartość; } Pozycjonować można dowolnie wybrany element na stronie. Jeśli na przykład chcemy pozycjonować obrazek (css.png) należy nadać mu określoną nazwę klasy lub identyfikatora, a następnie wprowadzić odpowiednie właściwości w kaskadowym arkuszu stylów. <img src=„css.png” id=„obrazek_css”>

Dla lepszego efektu warto usunąć domyślne marginesy i dopełnienia, ustawiając właściwości margin i padding na 0 dla selektora body. Dodatkowo wprowadzono tło strony (kratka.gif) pozwalające na zobrazowanie współrzędnych (jedna kratka = 10 pikseli). Obrazek otrzymał następujące właściwości w stylach: obramowanie ciągłe czarne oraz pozycjonowanie absolutne w odległości 80 px od lewej krawędzi okna i 40 px od górnej krawędzi okna. (HTML) <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Pozycjonowanie</title> </head> <body> <img src="css.png" id="obrazek_css"> </body> </html> (CSS) body { margin: 0; padding: 0; background-image: url(kratka.gif); } #obrazek_css { border: solid black; position: absolute; left: 80px; top: 40px;

Standardowo wyświetlany element domyślnie posiada właściwość position o wartości static. Jeżeli wartość jego właściwości position ulegnie zmianie na absolute, to staje się on elementem nadrzędnym dla znajdujących się w nim elementów. Pozycjonowane wewnątrz niego elementy będą ustawiane względem jego krawędzi. Przykład przedstawia dwa elementy: blok div oraz znajdujący się wewnątrz niego obrazek. Oba elementy mają identyfikatory pozwalające na ich modyfikację za pomocą styli css. <div id=„kwadrat”> <img src=„css.png” id=„obrazek_css”> </div> Blok div ma następujące właściwości: wysokość 290px, szerokość 170px, obramowanie – ciągła czarna linia, tło obrazkowe (kratka.gif) oraz pozycjonowanie absolutne w odległości 10px od lewej krawędzi okna i 10px od górnej krawędzi okna. Natomiast obrazek ma obramowanie ciągłe czarne oraz pozycjonowanie absolutne w odległości 80px od lewej krawędzi bloku div i 20px od górnej krawędzi bloku div.

(HTML) <html><head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Pozycjonowanie</title> </head> <body> <div id="kwadrat"> <img src="css.png" id="obrazek_css"> </div> </body></html> (CSS) body { margin: 0; padding: 0; } div#kwadrat { width: 290px; height: 170px; border: solid black; background-image: url(kratka.gif); position: absolute; left: 10px; top: 10px;

#obrazek_css { border: solid black; position: absolute; left: 80px; top: 20px; }

Pozycjonowanie względne (relative), nazywane również relatywnym, pozwala na zmianę położenia elementu w stosunku do jego położenia początkowego. Wykorzystuje się w tym celu dodatkowo cztery właściwości (left, right, top, bottom), którym należy przypisać konkretne wartości (w pikselach lub innych jednostkach miary) odpowiadające przesunięciu w lewo, prawo, w dół lub do góry. selector { position: relative; left: wartość; right: wartość; top: wartość; bottom: wartość; } Przykład przedstawia tabelę, która składa się z dwóch komórek. W pierwszej komórce znajduje się tekst informujący, że jest to przykład bez zastosowania pozycjonowania relatywnego. W drugiej komórce jest obrazek, który jako jedyne formatowanie ma czarne ciągłe obramowanie.

(HTML) <html> <head> <link rel="Stylesheet" type="text/css" href="style.css"> <title>Bez pozycjonowania</title> </head> <body> <table border> <tr> <td width="150"> brak pozycjonowania relatywnego </td> <td width="150"><img src="css.png” id="obrazek_css”></td> </tr> </table> </body> </html> (CSS) #obrazek_css{border: solid black; }

Kiedy wprowadzimy dla obrazka(css Kiedy wprowadzimy dla obrazka(css.png) pozycjonowanie relatywne, zostaje on przesunięty o 20px od prawej krawędzi obrazka (położenie początkowe) oraz o 20 px od górnej krawędzi obrazka (położenie początkowe). Po przesunięciu obrazek przysłoni wszystkie elementy rozmieszczone domyślnie. W tym przypadku przysłonięty został fragment tabeli. (HTML) <html> <head> <link rel="Stylesheet" type="text/css" href="style.css"> <title>Pozycjonowanie</title> </head> <body> <table border> <tr> <td width="150"> pozycjonowanie relatywne </td> <td width="150"><img src="css.png" id="obrazek_css"></td> </tr> </table> </body> </html>

(CSS) body { margin: 0; padding: 0; } #obrazek_css{ border: solid black; position: relative; right: 20px; top: 20px;

Jeśli zmienimy położenie kilku elementów na stronie, może się zdarzyć, że będą one na siebie nachodzić, a nawet jeden element przysłoni całkowicie inny. Wówczas warto ustalić, w jakiej kolejności elementy będą się nakładać. Służy do tego właściwość z-index, przyjmująca wartości liczbowe począwszy od 1, która oznacza element znajdujący się na samym spodzie. Element o wyższej wartości z-index będzie zakrywał wszystkie pozostałe. selektor { position: rodzaj; parametry; z-index: numer; } Przykład przedstawia akapit oraz obrazek (css.png), który zostanie wyświetlony dwukrotnie, każdemu przypisano inny identyfikator. Na samym spodzie (z-index:1) znajduje się obrazek mający identyfikator obrazek_css oraz czarne obramowanie. Został on umieszczony w odległości 20px od górnej i lewej krawędzi okna przeglądarki. Nałożono na niego obrazek (z-index:2) posiadający identyfikator obrazek2_css oraz obramowanie czerwone kreskowane. Oddalony jest od górnej krawędzi okna o 50px. Na samym wierzchu (z-index:3) umieszczono napis AKAPIT P w kolorze niebieskim, oddalony od górnej krawędzi okna o 150px oraz od lewej krawędzi o 70px.

(HTML) <html> <head> <link rel="Stylesheet" type="text/css" href="style.css"> <title>Pozycjonowanie</title> </head> <body> <p id="akapit"> AKAPIT P </p> <img src="css.png" id="obrazek_css"> <img src="css.png" id="obrazek2_css"> </body> </html> (CSS) body { margin: 0; padding: 0; } #obrazek_css{ border: solid black; position: absolute; left: 20px; top: 20px; z-index: 1;

#obrazek2_css{ border: dashed red; position: absolute; left: 50px; top: 50px; z-index: 2; } #akapit{ color: blue; font-weight: 800; left: 70px; top: 150px; z-index: 3;