RAMKI

Czym są ramki w dokumencie HTML?

Wszystkie ważniejsze przeglądarki potrafią interpretować ramki,

które stały się już oficjalnym standardem języka HTML. Ramki

ułatwiają nawigowanie w wielostronicowych dokumentach HTML

i dlatego są chętnie stosowane przez wielu webmasterów.
Najbardziej typowym przykładem użycia ramek jest

umieszczenie w jednej spisu treści i przeznaczenie drugiej na

wywoływane dokumenty (odrębne strony HTML), dowiązane do

poszczególnych pozycji spisu. Gdyby ktoś się martwił, że ramka

przeznaczona na dokumenty jest zbyt mała, może ją łatwo

powiększyć, przeciągając po prostu jej brzegi za pomocą myszki

(o ile ramka nie jest zablokowana przez autora strony). W ten

sposób można powiększyć ramkę do wielkości niemal całego

obszaru roboczego przeglądarki, niezależnie od domyślnych

parametrów utworzonych przez autora strony.

RAMKI

Ogólna struktura strony
Podstawową rolę w "ramkowym"
dokumencie pełni specjalna strona, na której
definiujemy liczbę, wielkość i pozycję ramek
oraz zachowanie się innych dokumentów w
momencie uaktywnienia łącza
hipertekstowego. Pozostałe strony,
wchodzące w skład całego,
wielostronicowego dokumentu, są stronami
podrzędnymi.

RAMKI

Na podstawowej stronie nie powinno być
żadnych znaczników poza blokiem
nagłówkowym i definicją samych ramek.
Dopiero znaczniki NOFRAMES pozwalają
umieścić treść, która będzie wyświetlana
przez przeglądarki nie interpretujące ramek.
Znaczniki <BODY></BODY> mogą być
umieszczane jedynie w obrębie NOFRAMES,
aczkolwiek ich obecność nie jest konieczna.

RAMKI

Kluczowe znaczenie ma para
znaczników <FRAMESET>
</FRAMESET>. Stanowią one, z
dodatkowymi parametrami, ramy dla
całej konstrukcji i między nimi są
umieszczane bardziej szczegółowe
znaczniki, dotyczące liczby ramek,
podziału strony i wielkości ramek.

RAMKI

Znacznik <FRAME> służy do
wprowadzenia konkretnej ramki.
Znacznik jest uzupełniany
dodatkowymi parametrami,
mówiącymi o zawartości
(zagnieżdżone strony), o tym, czy
ramka zawiera suwaki, a także
definiującymi nazwę ramki.

RAMKI

Aby konstrukcja mogła działać, konieczne jest

podzielenie strony - pionowe lub poziome. Poniższy

kod zawiera informację o podzieleniu strony na dwie

kolumny. Służy do tego parametr COLS="x,y",

umieszczany w otwierającym znaczniku FRAMESET.

Liczby x i y służą do liczbowego określenia

szerokości ramek. Możemy podać obie wartości w

pikselach, w procentach szerokości strony, a także

określić szerokość jednej kolumny i oznaczyć

szerokość drugiej za pomocą wieloznacznika * (ma

to sens przy podziale na większą liczbę kolumn lub

wierszy).

RAMKI

Poniżej przedstawiono stronę z trzema
ramkami, w których zdefiniowano
wielkość ramek i kolor obramowania
(BORDERCOLOR=red)

RAMKI

<HTML>
<HEAD>
<TITLE>Zadanie 19a - RAMKI</TITLE>

</HEAD>

</HTML>

ZADANIE 19a

Na potrzeby wykonania ćwiczeń z tego rozdziału kursu

utwórz folder „ZADANIE 19 RAMKI” Wszystkie pliki zapisuj w

tym folderze.

Utwórz plik na bazie kodu podanego w poprzednim slajdzie.

Plik zapisz pod nazwą zadanie 19a.html. Dodatkowo utwórz

trzy pliki html o nazwach odpowiadających nazwom podanym

w kodzie strony. W pliku spis_tresci.html wprowadź w

oddzielnych wierszach używając nagłówka 3-go stopnia

teksty:

ryby
płazy
gady
ptaki
ssaki
W pliku banner.html wpisz tekst KRĘGOWCE stosując

nagłówek 1-ego stopnia. W pliku tresc-strony.html wpisz

tekst „strona w budowie”

RAMKI

Nazwy ramek
Ponieważ stosując ramki używamy
jednocześnie często odsyłaczy,
powinniśmy jakoś nazwać naszą
ramkę. Nazwa będzie służyć jako
punkt orientacyjny dla odsyłaczy.
<FRAME NAME="jakaś_tam_nazwa">

ZADANIE 19b

Zmodyfikuj kodu z zadania 19a w ten sposób

by każda z ramek otrzymała nazwę:

•

Ramka pierwsza (lewa) spis_tresci

•

Ramka druga (prawa górna) banner

•

Ramka trzecia (prawa dolna) tresc

Plik zapisz pod nazwą zadanie19b.html.

Parametr NAME= wstawiaj za poleceniem
FRAME.

RAMKI

Odsyłacze
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. Zauważmy, że

kliknięcie na odsyłaczu w spisie treści w lewej ramce

powoduje załadowanie dokumentu do prawej ramki,

a nie do ramki ze spisem treści. W tym miejscu

wykorzystujemy nazwy, które nadawaliśmy

poszczególnym ramkom.

RAMKI

W oknie w którym chcemy stworzyć spis treści

budujemy odsyłacze do odpowiednich stron. Należy

je tak skonstruować, aby kliknięcie na odsyłaczu

przywoływało wskazaną stronę, ale zarazem

ładowało ją do ramki o nazwie (w naszym

przypadku) „TREŚĆ”. Można to uczynić za pomocą

następującej konstrukcji:
<A HREF=ryby.html TARGET=tresc>RYBY</A>

<A HREF=plazy.html TARGET=tresc>PŁAZY</A>

itd.
Polecenie <A HREF> było omówione wcześniej.

RAMKI

HREF=„ryby.html" dotyczy nazwy pliku, w którym jest zapisana

dana strona

TARGET="nazwa_ramki" dotyczy docelowego miejsca, do którego

ma być załadowana strona. Widzimy tutaj rolę, jaką pełnią nazwy

ramek.

RYBY, PŁAZY są konkretnymi tematami w ich spisie,

pozwalającymi po prostu wybrać interesujące nas zagadnienie.

Możemy tu oczywiście użyć wcześniej poznanych poleceń

pozwalających na umieszczaniu nazw w oddzielnych akapitach,

zapisywania ich np. jako nagłówek określonej wielkości,

definiowania koloru tekstu itp..

Oczywiście należy pamiętać o poprawnej konstrukcji, a więc

ZADANIE 19c

W pliku spis_tresci.html umieść odsyłacze do

stron ryby, płazy… Kod zapisz tak by był nadal
zachowany styl nagłówka 3-go stopnia, a
wszystkie odsyłacze znajdowały się w
oddzielnych akapitach. Otwierana strona ma
pojawiać się w ramce „TREŚĆ”. Utwórz pliki ze
stronami ryby, płazy… Sprawdź jak działa
wasza strona. Plik zapisz pod nazwą
zadanie19c.html.

Document Outline

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9
Slide 10
Slide 11
Slide 12
Slide 13
Slide 14
Slide 15

kurs html rozdział IX

Document Outline