RAMKI Układ ramek jest definiowany w pliku HTML, w
Transkrypt
RAMKI Układ ramek jest definiowany w pliku HTML, w
RAMKI Układ ramek jest definiowany w pliku HTML, w którym element body zastąpiono elementem frameset Definicja układu ramek: <html> <head> </head> <frameset atrybut=”wartość”> <frame src=”url”> … <frame src=”url”> </frameset> </html> Znacznik frameset przyjmuje dwa atrybuty: rows oraz cols. Pierwszy z nich umożliwia określenie liczby wierszy, na które zostanie podzielone okno przeglądarki, a więc liczby ramek poziomych, a drugi atrybut oznacza ilość kolumn, na które zostanie podzielone okno przeglądarki, a więc liczby ramek pionowych. Przykład: <frameset cols=”szerokość_kolumny, szerokość_kolumny, szerokość_kolumny…”> - szerokości można definiować w pikselach lub procentach oraz za pomocą znaku *, który oznacz przydzielenie ramce maksymalną szerokość <frameset cols=”25%,50%,25%”> Aby podzielić okno ramki na jednakowe szerokości, należy atrybutowi cols przypisać wartości *, np. <frameset cols=”*,*,*”> - układ pionowy trzech jednakowych ramek Przykład: <html> <head> </head> <frameset cols=”25%,50%,25%”> <frame src=”ramka1.html”> <frame src=”ramka2.html”> <frame src=”ramka3.html> </frameset> </html> Ramka1.html; ramka2.html; ramka3.html to oddzielny dokument html, które są zapisane w tym samym folderze. ćw 1. Stwórz stronę za pomocą układu ramek: - Otwórz Notatnik i wpisz następujący kod HTML: <html> <head> <title>Ramki w pionie</title> </head> <frameset cols="25%,75%"> <frame src="nawigacja.html" name="nawigacja"> <frame src="strona.html" name="strona"> </frameset> </html> - Zapisz jako ramki.html - Otwórz nowy dokument tekstowy i wpisz następujący kod HTML: <html> <head> <title>nawigacja</title> </head> <body> <h3>Wybierz interesujący Cię temat:</h3> <ul> <li><a href="strona.html" target="strona">strona 1</a> <li><a href="strona1.html" target="strona">strona 2</a> <li><a href="strona2.html" target="strona">strona 3</a> </ul> </body> </html> target jego wartością jest nazwa szerszej ramki strona, w której zostanie wyświetlona określona zawartość dokumentu html - Zapisz jako nawigacja.html - Otwórz nowy dokument tekstowy i wpisz następujący kod HTML: <html> <head> <title>Strona</title> </head> <body> <h2>To jest plik o nazwie strona</h2> <p> Jeżli chcesz wyświetlić inny plik, kliknij połączenie ....</p> </body> </html> - Zapisz jako stron.html - Dodatkowo stwórz dwa dokumenty tekstowe: strona1.html i strona2.html - Wszystko umieść w jednym folderze OBRAMOWANIE RAMEK Aby pozbyć się obramowań należy skorzystać z definicji znacznika: <frameset rows=”75,*” border=”0” frameborder=”0” framespacing=”0”> WYSOKOŚĆ WIERSZA <frameset rows=”wysokość_wiersza,wysokość_wiersza”> BANDER Aby stworzyć w dokumencie HTML napis reklamowy należy posłużyć się znacznikiem <marquee>, np.: <marquee><h1>Oto moja strona www</h1></marquee> Atrybuty znacznika marquee: Atrybut behavior=”scroll|sidle|alternate” direction=”right|left” lopp=”liczba|infinite” bgcolor=”definicja koloru” height=”wartość %|piksele” width=” wartość %|piksele” hspace;vspace=”piksele” align=”top|bottom|middle” Działanie scroll – napis przesuwa się z prawej strony do lewej; sidle – napis przesuwa się do lewego marginesu i zatrzymuje się alternate – tekst pojawia się z lewej strony, po czym odbija się od marginesów używany tylko z atrybutem scroll; określa kierunek animowanego tekstu liczba przewinięć tekstu zmienia kolor obszaru, po którym przesuwa się napis wymiary, po których przesuwa się napis odległość obszaru od bocznych (hspace)oraz górnej i dolnej (vspace) krawędzi okna określa wyrównanie tekstu względem obszaru, po którym przesuwa się napis RAMKI MIESZANE Przykład definiowania ramek mieszanych na stronie www: <html> <head> </head> <frameset rows=”50%,50%”> <frame src=”ramka_A.html”> <frameset cols=”25%,75%”> <frame src=”ramka_B.html”> <frame src=”ramka_C.html”> </frameset> </html> Konieczne jest oczywiście przygotownie plików ramka_A.html – zawartość górnej ramki; ramka_B.html – zawartość dolnej lewej ramki oraz rama_C.html – zawartość dolnej prawej ramki TO JEST RAMKA_A.HTML TO JEST RAMKA_C.HTML TO JEST RAMKA_B.HTML NAZWY TARGET Nazwa target=”_blank” target=”_self” target=”_parent” target=”_top” Opis Powoduje, że dokument wskazany w znaczniku <a> jest ładowany do nowego okna nie mającego nazwy Powoduje, że dokument wskazany w znaczniku <a> jest ładowany do tego samego okna lub ramki, czyli bieżącej Powoduje, że dokument ładowany jest do ramki nadrzędnej wobec ramki zawierającej bieżący dokument Powoduje, że dokument ładowany zajmuje całe okno przegladarki RAMKI LOKALNE Tworzy się je za pomocą znacznika <iframe>. Podobnie jak obrazy, ramki te pojawiają się jako wpisane w dokument. Atrybuty ramki lokalnej(pływającej) Atrybut Opis width Określa szerokość ramki w pikselach height Określa wysokość ramki w pikselach src Określa adres URL dokumentu HTML, który będzie wyświetlany w ramce name Określa nazwę ramki frameborder Określa obramowanie ramki. Wartość 1 odpowiada obecności obramowania, a wartość 0 wskazuje jego brak marginwidth Definiuje szerokość marginesu w pikselach marginheight Definiuje wysokość marginesu w pikselach noresize Wskazuje, że użytkownik nie ma możliwości zmiany rozmiarów ramki scrolling Wskazuje, czy maj być wyświetlane paski przewijania. Wartości to YES lub NO vspace Definiuje wysokość marginesu hspace Definiuje szerokość marginesu align Określa umiejscowienie ramki względem linii tekstu. Możliwe wartości to: left, right, top, bottom, middle Przykład: <html> <head> </head> <body bgcolor=”#ffcc99”> <h2>Nie ma mnie przy biurku, gdyż….</h2> <p align=”center”> <a href=”powod1.html” target=”powod”>Powód 1</a> <a href=”powod2.html” target=”powod”>Powód 2</a> <a href=”powod3.html” target=”powod”>Powód 3</a> <div align=”center”> <iframe name=”powod” src=”powod1.html” width=”450” height=”315”> </div> </body> </html>