1. Ramki - gim11.tychy.pl

Transkrypt

1
Ramki HTML
<html>
1. Ramki
Najbardziej elastycznym sposobem budowania stron jest uŜycie ramek. Ułatwiają one
nawigowanie w wielostronicowych dokumentach HTML, poprzez podział ekranu na kilka
obszarów. KaŜdy z nich zawiera własną niezaleŜną stronę.
Struktura ramki jest przechowywana w oddzielnym pliku HTML, który zamiast
znacznika <BODY> posługuje się znacznikiem <FRAMESET>...</FRAMESET>
określającym liczbę i wielkość ramek.
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
<FRAMESET>
tu rozpoczyna się definicja ramki
</FRAMESET>
</HTML>
Definiując układ ramek za pomocą znacznika <FRAMESET> naleŜy dołączyć do
definicji jeden z atrybutów znacznika: COLS lub ROWS. Atrybut COLS informuje
przeglądarkę, by podzieliła ekran na odpowiednią liczbę pionowych ramek (kolumn),
których szerokości zdefiniowane są poprzez kolejne wartości atrybutu, oddzielone
przecinkami.
<FRAMESET COLS="szerokość kolumny, szerokość kolumny, ...">
Szerokość ramki moŜe być wprowadzona na kilka sposobów:
•
•
•
bezpośrednio w pikselach, np. 100;
w procentach względem całkowitej szerokości układu ramek, np. 20%;
za pomocą znaku "*", będącym dopełnieniem do pozostałej szerokości okna.
Za pomocą atrybutu ROWS moŜemy dokonać podziału ekranu w poziomie.
Odpowiedni kod powinien wyglądać następująco:
<FRAMESET ROWS="wysokość wiersza, wysokość wiersza, ...">
Po zdefiniowaniu układu ramek naleŜy za pomocą znacznika <FRAME>, który nie
posiada odpowiednika zamykającego, przypisać jakiś dokument HTML. Aby przypisać
ramce dokument, musimy podać źródło dokumentu. NaleŜy w tym celu uŜyć konstrukcji:
<FRAME SRC="nazwa_pliku.html">
Andrzej Mazur – [email protected]
2
Ramki HTML
<HTML>
<HEAD>
<TITLE>Ramki</TITLE>
</HEAD>
<FRAMESET COLS="35%,*,*">
<FRAME SRC="dokument1.html">
</FRAMESET>
</HTML>
<html>
Taka definicja powinna pojawić się dla kaŜdej z ramek utworzonych za pomocą
znacznika <FRAMESET>.
Znacznik <FRAME> posiada szereg atrybutów, których opis zamieszczono w tabeli 8.
Tabela 8 Opis atrybutów znacznika <FRAME>
Atrybut
Wartość
Znaczenie
SCROLLING
AUTO
Domyślnie, jeśli zawartość ramki zajmuje większy obszar
niŜ obszar udostępniany przez ramkę, przeglądarka
automatycznie wyposaŜa ramkę w paski przewijania, aby
uŜytkownicy przewijając zawartość mieli dostęp do całego
dokumentu.
SCROLLING
NO
Brak pasków przewijania. UŜytkownik moŜe nie mieć dostępu
do ukrytej części dokumentu, jeŜeli ta nie zmieści się w obszarze
ramki.
SCROLLING
YES
Paski przewijania wyświetlane są w ramce zawsze, niezaleŜnie
od potrzeb.
NORESIZE
brak
Domyślnie uŜytkownicy mogą zmieniać rozmiary ramek.
Za pomocą tego atrybutu moŜna temu zapobiec.
MARGINHEIGHT
piksele
Określa szerokość marginesu, który pojawia się nad i pod ramką
(w pikselach).
MARGINWIDTH
piksele
Określa szerokość marginesu, który pojawia się z prawej i lewej
strony ramki (w pikselach).
źródło: materiały własne
3
Ramki HTML
<HTML>
<HEAD>
<TITLE>Tytuł strony</TITLE>
</HEAD>
<FRAMESET COLS="*,*">
</FRAMESET>
<NOFRAMES>
<BODY>
Tu wprowadź dowolny tekst, połączenia i znaczniki.
</BODY>
</NOFRAMES>
</HTML>
<html>
Jeśli określona przeglądarka nie obsługuje ramek, wówczas pomijana jest zawartość
znacznika
<FRAMESET>
i
wyświetlana
jest
zawartość
znacznika
<NOFRAMES>...</NOFRAMES>.
Tekst zawarty między znacznikami <NOFRAMES>...</NOFRAMES>, nie będzie
wyświetlany przez przeglądarki, które obsługują ramki. Pojawi się on jedynie tam, gdzie
obsługa ramek jest niemoŜliwa.
2. Zmiana obramowań
Wszystkie ramki utworzone za pomocą znacznika <FRAME> mają szerokie
obramowania. Korzystając z atrybutów FRAMEBORDER i BORDERCOLOR, moŜna
stosować obramowania lub z nich zrezygnować oraz definiować ich kolor. Wartością
atrybutu BORDERCOLOR moŜe być angielska nazwa koloru lub wartość
heksadecymalna, która go definiuje. Atrybut FRAMEBORDER przybiera dwie wartości
YES i NO. Oba atrybuty mogą być stosowane takŜe ze znacznikiem <FRAMESET>.
UmoŜliwiają one definiowanie domyślnych wartości dla całego układu ramek, pomimo
iŜ HTML 4.0 nie uwzględnia ich jako atrybutów tego znacznika.
3. Tworzenie złoŜonych układów ramek
To z czym zapoznałeś się w poprzednim rozdziale umoŜliwia tylko tworzenie prostych
typów ramek. Na rysunku poniŜej przedstawiony jest układ, w którym górna część
ekranu podzielona jest na dwie pionowe ramki, natomiast trzecia, umiejscowiona u dołu
ekranu rozciąga się na całą jego szerokość.
Rysunek 1
Przykład złoŜonej ramki
Cała sztuka polega na tym, Ŝe najpierw dzielimy (w naszym konkretnym przykładzie)
stronę na wiersze, a następnie w drugim deklarujemy dodatkowy podział na kolumny.
4
Ramki HTML
<FRAMESET ROWS="*,80">
</FRAMESET>
<html>
Musimy zatem rozpocząć definiowanie od układu ramek z zastosowanym atrybutem
ROWS (podział na wiersze).


Spowoduje to podzielenie ekranu na dwie sekcje: małą ramkę o wysokości 80 pikseli
umieszczoną u dołu ekranu i duŜą ramkę zajmującą pozostałą górną część. Znaczniki
<FRAME> definiują zawartość kaŜdej z ramek.
ZagnieŜdŜanie znaczników <FRAMESET>
Kolejny krok to podzielenie w pionie górnej ramki na dwie. Chcąc osiągnąć ten efekt
musimy umieścić drugi element <FRAMESET> w podstawowym bloku <FRAMESET>.
Aby zagnieździć jeden element <FRAMESET> w innym, zagnieŜdŜany znacznik musi
zastąpić jeden ze znaczników <FRAME> nadrzędnego układu ramek.
<FRAMESET COLS="70,*">
<FRAME SRC="dokument1.html"> 
</FRAMESET>
<FRAME SRC="dokument3.html"> 
</FRAMESET>
Atrybut COLS osadzonego układu ramek definiuje dwie kolumny - jedną o szerokości
70 pikseli i drugą, która zajmuje pozostałą jego szerokość. Ponadto, pomiędzy
znacznikami <FRAMESET> i </FRAMESET> osadzone są dwa znaczniki <FRAME>,
które definiują zawartość kaŜdej z kolumn.
Dokument 1.
Dokument 2.
Dokument 3.
Rysunek 2
Przykład złoŜonej ramki z osadzonymi dokumentami
Definiowanie nazw poszczególnych ramek
<html>
5
Ramki HTML
Teraz powinniśmy się zastanowić, co zrobić, aby kliknięcie na odsyłaczu w jednej
ramce automatycznie ładowało odpowiednią stronę w innej ramce. Jest to kluczowa
sprawa, jeśli chcemy wykorzystać ramki w dokumentach. Cel ten moŜna osiągnąć
rozpoczynając od nadania wszystkim ramkom nazw.
<FRAMESET COLS="70,*">
<FRAME SRC="dokument1.html" NAME="spis">
<FRAME SRC="dokument2.html" NAME="pokaz">
</FRAMESET>
<FRAME SRC="dokument3.html" NAME="stopka">
</FRAMESET>
Tworzenie połączeń między ramkami a dokumentami
Chcąc skierować dokument do określonego okna, naleŜy do znacznika <A> dodać
atrybut TARGET. Atrybut ten ma za zadanie wskazać ramkę, do której ma być
załadowany dokument.
Dokument 1.
<UL>
<LI><A HREF="nowa1.html" TARGET="pokaz">Odnośnik 1</A>
<LI><A HREF="nowa2.html" TARGET="pokaz">Odnośnik 2</A>
<LI><A HREF="nowa3.html" TARGET="pokaz">Odnosnik 3</A>
</UL>
Dokument 1.
Dokument 2.
• Odnośnik 1
• Odnośnik 2
• Odnośnik 3
Dokument 3.
Rysunek 3
Przykładowe połączenie między ramkami
Warto jeszcze zwrócić uwagę na zastrzeŜone nazwy atrybutu TARGET. Atrybut ten
moŜe przyjmować pewne specjalne wartości, których opis przedstawia tabela 9.
6
Ramki HTML
Tabela 9 Opis wartości atrybutu TARGET
Znaczenie
TARGET="_blank"
przywoływany dokument zostanie załadowany do nowego, pustego okna
(uruchomi nową kopię przeglądarki).
TARGET="_self"
(przypadek domyślny) nowy dokument zamieni w ramce dokument,
z którego dokonujemy skoku.
TARGET="_parent"
przywoływany dokument zamieni dokument nadrzędny w hierarchii
do bieŜącego dokumentu.
TARGET="_top"
przywoływany dokument zostanie wstawiony na miejsce dokumentu
pierwszego w hierarchii naszych skoków, a więc na samą "górę".
<html>
Atrybut
Szczególnie przydatny i często stosowany jest ten ostatni atrybut. UŜycie "_top"
pozwoli uniknąć dość kłopotliwej sytuacji, gdy do ramki jest ładowany dokument, który
sam składa się z ramek. "_top" usuwa więc wszelkie istniejące ramki i wyświetla
dokument "na czysto". Naturalnie moglibyśmy tutaj z powodzeniem uŜyć "_blank",
ale pozbawiamy się w ten sposób "historii" skoków.
4. Ramki lokalne
Ramki
lokalne
(pływające)
tworzone
są
za
pomocą
znacznika
<IFRAME>...</IFRAME>. Klasyczne ramki pozwalają dzielić ekran przeglądarki
na odrębne okna. Pływająca ramka jest ramką umieszczoną w dowolnym miejscu strony
i jest prostsza w konstrukcji, gdyŜ ogranicza się w zasadzie do jednego polecenia:
<IFRAME SRC="dokument.html" WIDTH="200" HEIGHT="200">
To jest ramka lokalna
</IFRAME>
Znacznik ten posiada kilkanaście kluczowych atrybutów, z których kilka jest
rozszerzeniem przeglądarki Internet Explorer. Pozostałe są zgodne ze specyfikacją HTML
4.0. Pływające ramki są interpretowane obecnie przez przeglądarki: Internet Explorer,
Mozilla Firefox i Opera.
Opis atrybutów przedstawiono w tabeli 10.
7
Ramki HTML
Tabela 10 Opis atrybutów znacznika <IFRAME>
Znaczenie
WIDTH
określa szerokość (w pikselach) ramki lokalnej
HEIGHT
określa wysokość (w pikselach) ramki lokalnej
SRC
określa adres URL dokumentu HTML, który będzie wyświetlony w ramce
NAME
określa nazwę ramki, umoŜliwiając tworzenie połączeń
FRAMEBORDER
wskazuje, czy wokół ramki ma być wyświetlone obramowanie, wartość
1 - obramowanie występuje, wartość 0 - obramowania brak
BORDER
określa szerokość obramowania w pikselach*
BORDERCOLOR
określa kolor obramowania*
FRAMESPACING
określa odstęp między krawędziami ramek (w pikselach)*
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 YES, NO
lub AUTO (domyślna)
VSPACE
definiuje wysokość marginesu*
HSPACE
definiuje szerokość marginesu*
ALIGN
określa umiejscowienie ramki względem linii tekstu - wartości: LEFT,
MIDDLE, RIGHT, TOP i BOTTOM (domyślna)
* Rozszerzenie Internet Explorer
<html>
Atrybut

1. Ramki - gim11.tychy.pl

Transkrypt

Podobne dokumenty

RAMKI Układ ramek jest definiowany w pliku HTML, w

INFORMACJE DO ZAPAMIĘTANIA

Pobierz powyższy dokument

Instrukcja montażu/Assembly instruction Produkt/Product

WCPR - Tworzenie stron internetowych w kodzie HTML

HTML (ang. HyperText Markup Language) hipertekstowy język

TworzenieStron-Ramki [tryb zgodności]

R Wszystkie zmienne, dane, funkcje, wyniki itp. są

Flash jako narzędzie do tworzenia pomocy dydaktycznych.

Czym są ramki w dokumencie HTML? Wszystkie ważniejsze

Materiał Pokrywy wykonane z anodyzowanego aluminium. Ramki

Akcesoria kratek i nawiewników

Edytor tekstu MS WORD Ćwiczenie 5: elementy graficzne