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>