Zapewne już wielokrotnie spotkałeś się z pojeciem ramek, podobnie jak i wielokrotnie widzieliście ich praktyczne zastosowanie na stronie www. Na czym polega więc istota ramek? Pokrótce, na podzieleniu ekranu na kilka części. Każda taka część ekranu, zwana ramką, będzie odrębnym plikiem HTML.
Uprzedzam, że ten dział będzie miał charakter nieco inny niż pozostałe działy tego dokumentu - jest on raczej skromnym kompedium dotyczącym zagadnienia ramek, a nie zbiorem trickow z nimi związanych.
| Zawartość pliku r1.htm | Zawartość pliku r2.htm |
| Zawartość pliku r3.htm |
Jak więc ma wyglądać zawartość pliku ramki? Wyjaśnie to na prostym przykładzie:
W sekcji HEAD umieszczamy:
<FRAMESET COLS="x1,x2">
<FRAME SRC="menu.htm" NAME="lewo">
<FRAME SRC="tresc.htm" NAME="prawo">
</FRAMESET>
Taki kod wygenerowałby poniższe ramki:
Ramka o szerokości x1, której zawartość mieści się w pliku menu.htm, a nazwa to menu. | Ramka o szerokości x2, której zawartość mieści się w pliku tresc.htm, a nazwa to prawo. |
FRAMESET powoduje podzielenie strony na ramki. Tak więc:COLS="x1,x2" - powoduje podzielenie ekranu na dwie kolumny, pierwsza o szerokości x1 pikseli, a druga o szerokości x2 pikseli. Można podzielić stronę na więcej kolumn, np. COLS="x1,x2,x3,x4".BORDER=x - powoduje, że obramowanie rozdzielające ramki będzie miało szerokość x pikseli.BORDERCOLOR=x - powoduje, że obramowanie rozdzielające ramki będzie koloru x.FRAMEBORDER=0 - dzięki temu parametrowi, obramowanie rozdzielające ramki nie będzie wyświetlane. W przeciwieństwie do 0, FRAMEBORDER="1 powoduje, że obramowanie zostanie wyświetlone (jest to standardowe ustawienie). Można też zamiast liczb stosować parametry: yes oraz no (polecam jednak liczby). UWAGA - aby usunąć obramowanie w IE, zalecane jest dodanie parametru FRAMESPACING=0
<FRAMESET COLS="100,200"> - | Dzieli stronę na dwie kolumny o szerokości odpowiednio: 100 i 200 pikseli. |
<FRAMESET ROWS="10%,90%"> - | Dzieli stronę na dwa wiersze o wysokości 10% i 90% wielkości ekranu. |
<FRAMESET COLS="100,*"> - | Dzieli stronę na dwie kolumny. Pierwsza o szerokości 100 pikseli, a druga, o szerokości pozostałej części ekranu. Gwiazdka to bardzo użyteczny parametr! |
|
Parametry oczywiście można łączyć, np.: | |
<FRAMESET COLS="10%,100,*,50"> - | Ten dziwoląg wymyślony na potrzeby poradnika podzieliłby stronę na cztery kolumny, pierwsza będzie miała szerokość 10% ekranu, druga: 100 pikseli, czwarta: 50 pikseli, a trzecia - to, co zostanie. |
FRAME powoduje wstawienie ramki w miejsce podzielone znacznikiem FRAMESET. Każdą ramkę musisz w ten sposob wstawić, gdyż tylko w ten sposób możesz określić niezbędne parametry, o których dowiesz sie więcej w dalszej części poradnika.SRC="plik.htm" - po załadowaniu strony ze szkieletem ramek, plikiem źródłowym dla tej ramki będzie plik plik.htm.NAME="nazwa" - ustalisz w ten sposób, że ta ramka będzie nosić nazwę nazwa. Jak bardzo jest to istotne, zauważysz później.SCROLLING="x" - dotyczy to możliwości użycia suwaków w ramce. X może przyjąć jedną z wartości: yes (suwaki będą wyświetlone), no (suwaki nie będa wyświetlone), auto (suwaki będą wyświetlone, jeśli plik nie mieści się cały w ramce).NORESIZE - jeżeli użyjesz tego parametru, obramowania nie będzie można przesuwać myszką (czyli skalowanie ramek zostanie wyłączone).MARGINWIDTH="x" i/lub MARGINHEIGHT="y" - powoduje wstawienie marginesu do ramki - MARGINWIDTH to margines lewy i prawy (równocześnie), a MARGINHEIGHT to margines górny i dolny.
<A HREF="nazwa.htm">link</A> - Taki link, jest całkowicie poprawny. Jednak jeżeli jest on częścią strony otwartej w ramce, kliknięcie na odnośniku spowoduje otwarcie pliku nazwa.htm nie na pełnym ekranie, lecz w aktualnej ramce! Wyobraź sobie, że plik nazwa.htm zawiera kolejną deklarację ramek. Po kliknięciu ramki otworzą się w naszej ramce, po kliknięciu ponownym, otworzą się w aktualnej ramce poparzedniej ramki itd.<A HREF="nazwa.htm" TARGET="strona">link</A> - Dzięki zastosowaniu parametru TARGET, poznałeś właśnie sens tworzenia ramek, prostej nawigacji i szybszego ładownia strony. W tym przykładzie, wszystkie ramki poza ramką strona, pozostaną bez zmian. Natomiast w ramce strona, otworzy się plik nazwa.htm. Dlatego, każda ramka, której treść będzie w jakikolwiek sposób zmieniana, musi mieć nadaną nazwę (o tym wyżej).<A HREF="nazwa.htm" TARGET="_top">link</A> - Wpisanie parametru TARGET="_top" spowoduje, że link otworzy się na pełnym ekranie przeglądarki, a istniejące ramki zostaną usunięte.<A HREF="nazwa.htm" TARGET="_parent">link</A> - Wpisanie parametru TARGET="_parent" spowoduje, że link otworzy się w ramce, będącej ramką 'nadrzędną' w stosunku do ramki aktualnej.<A HREF="nazwa.htm" TARGET="_blank">link</A> - Ten parametr spowoduje wyświetlenie pliku nazwa.htm w nowym oknie przeglądarki.
FRAMESET, wstawiamy kolejne znaczniki FRAMESET. To pozwala nam na wielokrotne dzielenie ekranu na kolumny i wiersze.