Tworzenie stron internetowych w kodzie HTML Cz 7 7. Ramki 7.1. Wstęp Przykład: Oto przykładowy wygląd strony startowej ramek: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <title>moja strona</title> <frameset cols="200,*"> <frame name="spis" src="spis.html" /> <frame name="strona" src="home.html" /> <noframes><body><a href="spis.html">spis treści</a></body></noframes> 7.1.1 Czy stosowanie ramek jest bezpieczne? Kiedy ramki były jeszcze nowinką, mówiło się, Ŝe naleŝy ich unikać, poniewaŝ nie kaŝda przeglądarka potrafi je zinterpretować. Czy dzisiaj stwierdzenie takie ma jeszcze sens, skoro ramki - zarówno tradycyjne jak i lokalne, czyli "pływające" - zostały oficjalnie wprowadzone w rekomendacji HTML 4 z roku 1998 (pierwsza odsłona: 18 grudnia 1997)? 7.2. Gotowiec Aby stworzyć taką stronę, naleŝy wykonać następujące czynności: 1. W swoim edytorze HTML stwórz nową stronę. Wykasuj wszystkie wpisy, jeśli edytor automatycznie przy tworzeniu nowego pliku, wpisał w nim jakieś informacje domyślne. Następnie wklej poniŝszy kod: PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd"> <meta name="description" content="opis zawartości strony" /> <meta name="keywords" content="wyrazy kluczowe" /> <meta name="author" content="autor strony" /> <title>tytuł strony</title> <frameset cols="180,*" border="0" frameborder="0" framespacing="0"> <frame name="spis" noresize="noresize" frameborder="0" src="spis.html" /> <frame name="strona" noresize="noresize" frameborder="0" src="home.html" /> <noframes><body><a href="spis.html">spis treści</a></body></noframes> 2. W analogiczny sposób stwórz nową stronę i wklej na niej następujący kod: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 1 z 6
<meta name="author" content="autor strony" /> <title>spis treści</title> <style type="text/css"> <![CDATA[ a:hover { color: red } ]]> </style> <body> <h2>spis treści:</h2> <a target="strona" href="home.html">strona główna</a><br /> <a target="strona" href="rozdzial1.html">rozdział 1</a><br /> <a target="strona" href="rozdzial2.html">rozdział 2</a><br /> <a target="strona" href="linki.html">linki</a><br /> <a href="mailto:jan_kowalski@example.com">kontakt</a> </body> 3. W edytorze stwórz trzecią nową stronę i wklej na niej kod: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <meta name="author" content="utor strony" /> <title>strona główna</title> <body> <h2 align="center">strona główna</h2> <p>to jest strona główna, która zostanie załadowana na starcie.</p> <p>moŝna tutaj podać informacje o tym, co znajduje się w serwisie, krótkie streszczenie waŝniejszych rozdziałów, listę wprowadzonych ostatnio nowości, a takŝe odsyłacze do szczególnie interesujących podstron itd. (np. kliknij <a href="test.html">tutaj</a>). strona główna powinna zachęcić internautów do dokładniejszego zaznajomienia się z innymi rozdziałami serwisu oraz przedstawić ogólny zarys informacji w nim zawartych.</p> </body> 7.3. Znacznik FRAMESET <frameset>... W tym znaczniku zawierają się całe ramy struktury strony z ramkami. NaleŜy go wpisywać zawsze bezpośrednio po znaczniku zamykającym. Wewnątrz znacznika (otwierającego) <frameset> wpisuje się następujące atrybuty: 1. Podział strony na: o Kolumny: <frameset cols="x1,x2,...">... lub <frameset cols="x1%,x2%,...">... gdzie "x1, x2,..." oznaczają szerokość kolejnych kolumn (począwszy od lewej strony) w pikselach, natomiast "x1%, x2%,..." oznaczają szerokość kolejnych kolumn w procentach całego ekranu. W miejsce kropek moŝna wpisać dalsze wartości; w razie podania tylko dwóch liczb, kropki oraz końcowy przecinek 2 z 6
naleŝy pominąć. o Wiersze: <frameset rows="y1,y2,...">... lub <frameset rows="y1%,y2%,...">... gdzie "y1, y2,..." oznaczają wysokość kolejnych wierszy (począwszy od góry) w pikselach, natomiast "y1%, y2%,..." oznaczają wysokość kolejnych wierszy w procentach całego ekranu. W miejsce kropek moŝna wpisać dalsze wartości. 2. Kolor obramowania <frameset bordercolor="kolor">... gdzie "kolor" oznacza definicję koloru [zobacz: Kolory]. 3. Szerokość obramowania: <frameset border="x">... 4. Schowanie obramowania dzielącego ramki (Internet Explorer): <frameset frameborder="typ">... 7.4. Znacznik FRAME <frameset> <frame src="ścieżka dostępu do strony" name="tu podaj nazwę ramki" /> gdzie jako "ścieŝka dostępu do strony" naleŝy podać lokalizację na dysku, gdzie znajduje się strona, która na starcie ma zostać wczytana do ramki. Natomiast jako "Tu podaj nazwę ramki" moŝna wpisać dowolną nazwę, jaką ma otrzymać ramka. 1. Kolor obramowania (Internet Explorer): <frame bordercolor="kolor" /> 2. Przewijanie zawartości ramki: <frame scrolling="typ" /> gdzie jako "typ" naleŝy podać: o "yes" - umoŝliwia przewijanie zawartości ramki o "no" - ramka nie będzie przewijana o "auto" - ramka będzie przewijana (pojawią się suwaki), gdy jej zawartość nie zmieści się w całości na ekranie (domyślnie). 3. Zabezpieczenie przed zmianą rozmiarów ramki: <frame noresize="noresize" /> 4. Dodatkowe marginesy: <frame marginwidth="x" marginheight="y" /> 5. Schowanie obramowania dzielącego ramki: <frame frameborder="typ"> 7.5. Znacznik NOFRAMES <frameset> (...) <noframes> <body> Treść alternatywna 3 z 6
</body> </noframes> Między znacznikami <noframes> oraz </noframes> umieszcza się polecenia, które mają zostać wykonane w przypadku, gdy przeglądarka internetowa uŝytkownika nie akceptuje ramek. MoŜe to być np. podanie odsyłacza do strony alternatywnej (bez ramek) albo spis treści z odnośnikami do wszystkich stron serwisu. Nie zalecam umieszczania tutaj tekstu typu: Twoja przeglądarka nie obsługuje ramek! Czy nie lepiej zamiast tego wstawić po prostu np. odnośnik do "ramkowego" spisu treści, który i tak juŝ wcześniej wykonaliśmy? Co prawda strona nie będzie się wtedy prezentowała tak jak w ramkach, ale przynajmniej będzie dostępna dla wszystkich. 7.6. Wczytywanie strony do ramki <a target="cel" href="tu podaj ścieżkę dostępu do strony">opis</a> Jak widać powyŝsze polecenie jest odsyłaczem. Posiada on jednak dodatkowy atrybut target="...", pozwalający wczytać stronę do wybranej przez nas ramki, w szczególności innej niŝ ta, w której znajduje się odnośnik (przydatne przy tworzeniu spisu treści). Natomiast jako "cel" naleŝy podać: 1. "nazwę ramki", do której ma zostać załadowana strona (nazwę ramki definiuje się wcześniej na stronie startowej w znaczniku FRAME). Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, moŝna pominąć atrybut target="...". 2. Polecenia specjalne: o "_self" - strona zostanie załadowana do bieŝącej ramki, czyli do tej na której został wpisany powyŝszy odsyłacz (domyślnie - moŝna pominąć ten atrybut, a efekt będzie ten sam) o "_top" - strona zostanie wstawiona w miejsce dokumentu pierwszego w hierarchii (strony głównej) o "_parent" - strona zostanie wstawiona w miejsce dokumentu nadrzędnego w hierarchii, czyli w miejsce strony startowej struktury ramek, w której znajduje się dany odsyłacz (w przypadku większej ilości zagnieŝdŝonych stron startowych) o "_blank" - strona zostanie załadowana w nowym oknie (uruchomi nową kopię przeglądarki) 7.6.1 Wczytanie stron do dwóch ramek Jak łatwo zauwaŝyć, za pomocą pojedynczego odsyłacza moŝna wczytać nową stronę tylko do jednej ramki jednocześnie. Jeśli chcielibyśmy aby po kliknięciu odnośnika zmieniła się zawartość dwóch (lub więcej) ramek, moŝna w tym celu uŝyć JavaScriptu: <a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a> 7.7. ZagnieŜdŜanie ramek <frameset cols="x1,x2,...,*"> <frame name="nazwa_ramki_1" src="adres strony 1" /> 4 z 6
<frameset rows="y1%,...,*"> <frame name="nazwa_ramki_2" src="adres strony 2" /> (...) <frame name="nazwa_ramki_3" src="adres strony 3" /> (...) <frame name="nazwa_ramki_4" src="adres strony 4" /> gdzie kolorem czerwonym zaznaczono strukturę nadrzędną (zewnętrzną), natomiast kolorem zielonym zaznaczono strukturę podrzędną (wewnętrzną). MoŜliwe jest oczywiście dalsze zagnieŝdŝanie. 7.8. Ramki lokalne pływające (ang. inline) <iframe src="ścieżka dostępu do strony">twoja przeglądarka nie akceptuje ramek!</iframe> gdzie jako "ścieŝka dostępu do strony" naleŝy podać lokalizację, gdzie znajduje się strona, która na starcie ma zostać wczytana do ramki. Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o róŝnych rozmiarach. Dzięki temu moŝemy do takiej ramki wczytywać inne dokumenty. Tekst "Twoja przeglądarka nie akceptuje ramek", który moŝna wpisać między znacznikiem otwierającym a zamykającym (patrz powyŝej), ukaŝe się, jeśli przeglądarka internetowa uŝytkownika nie akceptuje ramek lokalnych. Oczywiście moŝna tutaj wpisać dowolny tekst, albo teŝ umieścić odsyłacz do strony alternatywnej - bez ramek. W przypadku ramek lokalnych stosuje się dodatkowe atrybuty: 1. Rozmiar ramki (lokalnej): <iframe src="ścieŝka dostępu" width="x" height="y">...</iframe> 2. Nazwa ramki lokalnej: <iframe src="ścieŝka dostępu" name="tu wpisz nazwę ramki">...</iframe> 3. Usunięcie obramowania: <iframe src="ścieŝka dostępu" frameborder="0">...</iframe> 4. Usunięcie suwaka do przewijania zawartości ramki: <iframe src="ścieŝka dostępu" scrolling="no">...</iframe> 5. Dodatkowe marginesy wewnątrz ramki: <iframe src="ścieŝka dostępu" marginwidth="x" marginheight="y">...</iframe> 6. Odległość ramki od sąsiadujących elementów strony <iframe src="ścieŝka dostępu" hspace="x" vspace="y">...</iframe> 7. Ustawienie ramki lokalnej na stronie: <iframe src="ścieŝka dostępu" align="rodzaj">...</iframe> gdzie jako "rodzaj" naleŝy wpisać: o "left" - ramka ustawiona po lewej stronie, względem otaczającego tekstu o "right" - ramka ustawiona po prawej stronie względem tekstu o "top" - tekst ustawiony na górze ramki o "middle" - tekst ustawiony na średniej wysokości względem ramki o "bottom" - tekst ustawiony na dole ramki (domyślnie) 5 z 6
7.9. OstrzeŜenie przed ramką Surfując w Internecie, często zdarza się, Ŝe odnajdujemy stronę, która wygląda jakoś dziwnie: nie posiada Ŝadnego menu ani spisu treści, w którym moŝna wybrać interesujący nas temat i swobodnie nawigować w całym serwisie 6 z 6