WCPR - Tworzenie stron internetowych w kodzie HTML

Transkrypt

Warszawskie Centrum Pomocy Rodzinie
ul. Rakowiecka 21, 02-517 Warszawa, tel: 646-53-13, 646-53-15, 646-18-11, 646-52-54
fax: w. 102, [email protected], www.wcpr.pl
Tworzenie stron internetowych w kodzie HTML
Cz 7
7. Ramki
7.1. Wstęp
Przykład:
Oto przykładowy wygląd strony startowej ramek:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Moja strona</title>
</head>
<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>
</frameset>
</html>
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:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta name="Description" content="Opis zawartości strony" />
<meta name="Keywords" content="Wyrazy kluczowe" />
<meta name="Author" content="Autor strony" />
<title>Tytuł strony</title>
</head>
<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>
</frameset>
</html>
2. W analogiczny sposób stwórz nową stronę i wklej na niej następujący kod:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
1 z 6
Projekt „Integracja dla samodzielności”
współfinansowany jest przez Unię Europejską
w ramach Europejskiego Funduszu Społecznego
<meta name="Author" content="Autor strony" />
<title>Spis treści</title>
<style type="text/css">
<![CDATA[
a:hover { color: red }
]]>
</style>
</head>
<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:[email protected]">Kontakt</a>
</body>
</html>
3. W edytorze stwórz trzecią nową stronę i wklej na niej kod:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta name="Author" content="utor strony" />
<title>Strona główna</title>
</head>
<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>
</html>
7.3. Znacznik FRAMESET
<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 </head>. Wewnątrz znacznika
(otwierającego) <frameset> wpisuje się następujące atrybuty:
1. Podział strony na:
o Kolumny:
<frameset cols="x1,x2,...">...</frameset>
lub
<frameset cols="x1%,x2%,...">...</frameset>
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
o
naleŜy pominąć.
Wiersze:
<frameset rows="y1,y2,...">...</frameset>
lub
<frameset rows="y1%,y2%,...">...</frameset>
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">...</frameset>
gdzie "kolor" oznacza definicję koloru [zobacz: Kolory].
3. Szerokość obramowania:
<frameset border="x">...</frameset>
4. Schowanie obramowania dzielącego ramki (Internet Explorer):
<frameset frameborder="typ">...</frameset>
7.4. Znacznik FRAME
<frameset>
<frame src="ścieżka dostępu do strony" name="tu podaj nazwę ramki" />
</frameset>
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>
</frameset>
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%,... ,*">
(...)
</frameset>
(...)
</frameset>
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

WCPR - Tworzenie stron internetowych w kodzie HTML

Transkrypt

Podobne dokumenty

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

INFORMACJE DO ZAPAMIĘTANIA

Ramki osadzone - Artur Bartoszewski

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

1. Ramki - gim11.tychy.pl

Zestaw zadań nr 4 – ramki

Pobierz powyższy dokument

Instrukcja montażu/Assembly instruction Produkt/Product

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

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

Pływające ramki

Załącznik nr 9 - opis naklejki

TworzenieStron-Ramki [tryb zgodności]