Wykład 16
Tworzenie stron WWW
Ramki
Wykład 16
Tworzenie stron WWW
Ramki
Ramki
Definicja ramek znajduje się w głównym
dokumencie tworzącym stronę. Same
ramki są osobnymi plikami HTML. W
ramach głównego dokumentu definiują-
cego
ramki
nie
używamy
tagów
<BODY>, chyba że chcemy przekazać
informacje dla tych przeglądarek, które
nie obsługują ramek.
Ramki - konstrukcja
główna
<HTML>
<HEAD> <TITLE>
Ramki
</TITLE> </HEAD>
<FRAMESET COLS=”30%,40%,30%” >
<FRAME NAME=”Ramka1” SRC=”ramki/ramka1.html” >
<FRAME NAME=”Ramka2” SRC=”ramki/ramka2.html” >
<FRAME NAME=”Ramka3” SRC=”ramki/ramka3.html” >
<NOFRAMES>
<BODY>
Jeśli widzisz ten napis, Twoja przeglądarka
nie obsługuje ramek!
</BODY> </NOFRAMES>
</FRAMESET>
</HTML>
Ramki - tag <FRAMESET>
Podział na kolumny:
<FRAMESET COLS=”30%,40%,30%” >
albo:
<FRAMESET COLS=”30%,*,30%” >
Podział na wiersze:
<FRAMESET ROWS=”150,300,*” >
Szerokość i kolor belki między ramkami:
<FRAMESET COLS=”5%,*,5%” BORDER=10
BORDERCOLOR=„red”>
Likwidujemy belkę między ramkami:
<FRAMESET COLS=”30%,*,30%” BORDER=0 FRAMEBORDER=0
FRAMESPACING=0 >
Ramki w wierszach i
kolumnach
Jak uzyskać taki efekt?
Ramka 1
Ramka 5
Ramka 2
Ramka 4
Ramka 3
Trzeba zagnieździć definicje ramek!
Ramki w wierszach i
kolumnach
Podział na trzy wiersze:
<FRAMESET ROWS=”200,*,200” >
<FRAME NAME=”R1” SRC=frame1.html >
Podział drugiego wiersza na trzy kolumny:
<FRAMESET COLS=”33%,*,33%” >
<FRAME NAME=”R2” SRC=frame2.html >
<FRAME NAME=”R3” SRC=frame3.html >
<FRAME NAME=”R4” SRC=frame4.html >
</FRAMESET>
<FRAME NAME=”R5” SRC=frame5.html >
</FRAMESET>
Definicja ramki -
<FRAME>
Początkowa zawartość każdej ramki jest określona przez
tag <FRAME> nie wymagający zakończenia:
<FRAME NAME=”R2” SRC=frame2.html SCROLLING=”yes”
NORESIZE MARGINHEIGHT=10 MARGINWIDTH=20>
Nazwa
NAME
przyda nam się przy tworzeniu odsyłaczy!
SRC
to plik, który zostanie wczytany domyślnie, zaraz po
otwarciu strony.
SCROLLING= yes, no, auto
- definiuje, czy chcemy
wstawić suwak do przewijania zawartości strony
NORESIZE
blokuje zmianę rozmiarów ramki (zmiana taka
jest domyślnie dozwolona)
Odsyłacze w ramkach
Załóżmy, że nasza struktura ramek wygląda
tak:
<FRAMESET COLS=”20%,80%” >
<FRAME NAME=”spis” SRC=spis.html >
<FRAME NAME=”główna” SRC=main.html >
</FRAMESET>
Co musi zawierać plik spis.html, aby po
kliknięciu na jeden z jego odnośników
odpowiedni dokument otworzył się
w drugiej
ramce o nazwie „główna”
?
Odsyłacze w ramkach
Przykładowa zawartość pliku spis.html:
<HTML>
<HEAD> <TITLE>
Spis treści
</TITLE> </HEAD>
<BODY>
<A HREF=main.html TARGET=”główna” >
O mnie
</A>
<A HREF=muz.html TARGET=”główna” >
Muzyka
</A>
<A HREF=film.html TARGET=”główna” >
Film
</A>
<A HREF=zdj.html TARGET=”główna” >
Moje zdjęcia
</A>
</BODY>
</HTML>
Argumenty polecenia
TARGET
<A HREF=main.html TARGET=”_self” >
O mnie
</A>
<A HREF=main.html TARGET=”_blank” >
O mnie
</A>
<A HREF=main.html TARGET=”_top” >
O mnie
</A>
_self
(domyślna wartość) otwiera podany plik w tej
samej ramce, w której był plik wywołujący
_blank
otwiera dla wywołanego pliku nowe okno
_top
otwiera wywołany plik w aktualnym oknie
przeglądarki, ale jako pojedynczą stronę (bez ramek)
Ramki „pływające”
Pływające (lokalne) ramki definiowane są „w
miejscu użycia” i wyglądają jak okienka w
treści strony. Przesuwają się przy przewijaniu
strony, stąd ich nazwa. Nie wymagają one
konstrukcji </FRAMESET>, można je więc
deklarować w miarę potrzeby bez obaw o
sposób podziału ekranu. Komendą definiującą
taką ramkę jest tag
<IFRAME>
, który (w
odróżnieniu od <FRAME>) powinien być
zamknięty przez </IFRAME>.
Ramki „pływające”
<HTML>
<HEAD> <TITLE>
Ramki pływające
</TITLE> </HEAD>
<BODY>
<P>
Poniżej wkleimy ramkę
</P>
<P ALIGN=center > <IFRAME WIDTH=300 HEIGHT=250
SRC=ramka.html>
Jeśli widzisz ten tekst, nie masz
obsługi pływających ramek...
</IFRAME> </P>
<P>
W pliku ramka1.html może się kryć dowolny
dokument HTML
</P>
</BODY>
</HTML>
Ramki „pływające”
Modyfikatory polecenia <IFRAME>:
WIDTH=50%
- szerokość ramki (piksele lub %)
HEIGHT=250
- wysokość ramki (piksele lub %)
SRC=ramka.html
- plik do wczytania
NAME=”nazwa”
- po co nadajemy nazwę? O tym dalej...
SCROLLING=yes, no
- suwak do przewijania
FRAMEBORDER=1, 0
- obwódka wokół ramki; 0 = brak
Zmieniamy treść ramek
<HTML>
<HEAD> <TITLE>
Ramki pływające
</TITLE> </HEAD>
<BODY>
<P
ALIGN=right>
<IFRAME
WIDTH=300
HEIGHT=250
NAME=zoo
SRC=tygrys.html>
Nie masz ramek...
</IFRAME> </P>
<P>
Kliknij
<A HREF=żyrafa.html TARGET=zoo>
tutaj
</A>
a w ramce pojawi się żyrafa
</P>
<P>
Kliknij
<A HREF=tygrys.html TARGET=zoo>
tutaj
</A>
a tygrys powróci do ramki
</P>
</BODY>
</HTML>