13. ramki - strona główna
Transkrypt
13. ramki - strona główna
KURS HTML 13. RAMKI Ramka, to tak naprawdę strona, dzięki której w jednym okienku przeglądarki mogą pojawić się dwie strony, lub więcej. JeŜeli nie korzystamy z Ŝadnych skryptów przechowujących pewną treść strony to na pewno nam się przydadzą. Do czego? Np. do umieszczenia w jednej z ramek spisu treści, który po kliknięciu na wybrany dział otwiera nam stronę w ramce przeznaczonej do prezentowania większej ilości treści. MoŜna takŜe umieścić logo serwisu, albo jakąś stopkę nawigacyjną, aby była zawsze widoczna. Ramki mają własne paski przewijania więc starajmy się, aby na rozdzielczości 800x600 pasek przewijania był tylko dla jednej – prawej ramki, gdyŜ głupio wyglądają strony z paskiem przewijania w środku strony, bądź nawet kilkoma paskami przewijania. Są dwa typy ramek – ramki standardowe i ramki wewnętrzne (takŜe zwane wbudowane). Najpierw umówmy ramki standardowe. Ramki standardowe Ramki standardowe składają się z wielu znaczników i atrybutów. W przeciwieństwie do poznanych juŜ nam instrukcji, jak poprawnie tworzyć stronę ramki większość swoich znaczników mają pomiędzy znacznikami </HEAD, a <BODY> więc nie są w Ŝadnej sekcji. Jeden natomiast znacznik zawiera w sobie sekcje <BODY>, która wyświetla się uŜytkownikom przeglądarek nie uŜywających ramek. Główna konstrukcja ramek znajduje się pomiędzy znacznikiem <FRAMESET>. Ma on dwa atrybuty, których wartości wyglądają tak samo i to samo znaczą: • COLS - ramki pionowe • ROWS - ramki poziome Wartość to rozmiar ramek. W zaleŜności od ilości chcianych ramek, które później "zbudujemy" umieszczamy określoną ilość liczb, które są pikselami, jednakŜe w HTMLu jednostek nigdy nie podajemy. JeŜeli chcemy moŜemy takŜe podać procenty. JeŜeli chcemy, aby jedna ramka miała określony rozmiar, a druga dopasowywała się do rozmiarów okienka zamiast cyfry umieszczamy zmiennik w postaci gwiazdki * , co zalecam robić, gdyŜ jeŜeli przeglądarka moŜe wyświetlić więcej niŜ jej kaŜemy efekt moŜe być paskudny. www.INFORMATYKA.cba.pl KURS HTML Określanie ilości ramek i ładowanego dokumentu Czas zbudować same ramki. Pomiędzy znacznikiem <FRAMESET> umieszczamy tyle znaczników <FRAME>, ile chcemy mieć ramek. Pamiętajmy, Ŝe ramki muszą być odpowiedniej kolejności, w zaleŜności od ustawionej wcześniej wartości ich rozmiaru! NajwaŜniejszym atrybutem jest NAME, którego wartość oznacza nazwę ramki. Dzięki temu, jeŜeli klikniemy z ramki, która jest spisem treści, na taki link: <A HREF="dzial.htm" TARGET="ramka">Dział</A> strona zostanie otworzona w ramce przeznaczonej na prezentowanie treści, pod warunkiem, Ŝe będzie ona nazwana "ramka". Kolejnym waŜnym atrybutem jest SRC, w którego wartości umieszczamy ścieŜkę do dokumentu, który zostanie otwarty w ramce po załadowaniu ramki. ChociaŜ rozmiar ramki został określony to i tak uŜytkownik moŜe go zmienić po najechaniu na pasek rozdzielający ramki. Aby temu zapobiec musimy uŜyć atrybutu NORESIZE. Za pomocą SCROLLING decydujemy o zachowaniu się pasków przewijania. Wartości tego atrybutu to: • yes - pasek przewijania zawsze widoczny • no - pasek przewijania zawsze niewidoczny (nawet jeŜeli zawartość ramki jest większa, niŜ sama ramka) • auto - pasek przewijania widoczny, jeŜeli zawartość ramki jest większa niŜ sama ramka (jeŜeli zawartość ramki jest mniejsza, pasek nie pojawi się) Ostatnim atrybutem wartym opisania jest FRAMEBORDER (ang. obramowanie ramki), który decyduje o pojawieniu się, bądź nie pojawieniu się obramowania ramki. Jego wartości to: • yes (takŜe 1) –obramowania • no (takŜe 0) – brak obramowania Uwaga: moŜe wydawać się to dziwne, Ŝe jeŜeli mamy dwie ramki musimy uŜywać w kaŜdej z nich atrybutów NORESIZE i FRAMEBORDER, aby pozbyć się obramowania i moŜliwości przewijania ramki. Wszystko jest dokładnie przemyślane. JeŜeli mielibyśmy np. trzy ramki i chcielibyśmy, aby tylko dwie ostatnie nie mogły być przewijane i, aby były bez obramowania, to wpisując te atrybuty do środkowej ramki, to skąd przeglądarka wiedziałaby, czy usunąć obramowanie pomiędzy pierwszą, a drugą ramką, czy, drugą, a trzecią? MoŜna odpowiedzieć, Ŝe wystarczyłoby umieścić te atrybuty w trzeciej ramce, ale w przypadku www.INFORMATYKA.cba.pl KURS HTML większej ilości ramek i chęci zmiany tych elementów dla środkowych ramek byłoby to albo niemoŜliwe, albo na kaŜdej przeglądarce wyglądałoby inaczej. Te atrybuty wpisujemy do obu ramek, pomiędzy którymi ma zniknąć moŜliwość przewijania i widoczność obramowania. Uwaga: pamiętajmy, Ŝe w dokumencie, który przechowuje kod ramek moŜemy umieścić sekcję HEAD, w które moŜemy umieścić niektóre niedługo poznane metatagi, a takŜe tytuł, jednakŜe te wartości nie oznaczają tego, iŜ moŜemy sobie odpuścić je w dokumentach wyświetlających się w ramkach. Uwaga: pamiętajmy, Ŝe w dokumencie przechowującym ramki musimy nadać inną specyfikację (znacznik <!DOCTYPE>, który zawsze powinien być przed znacznikiem <HTML>). Zamiast kodu, który został umieszczony w drugiej lekcji uŜyjmy poniŜszego: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> Uwaga: jeŜeli chcemy zrobić ramki mieszane, czyli pionowe i poziome naraz, musimy w jednym, lub w większej ilości dokumentów domyślnych dla ramek umieścić ponownie kod ramek, z przeciwnym typem ich rozmieszczenia – dla COLS będzie to ROWS i na odwrót. Zastosowanie ramek Skończyliśmy juŜ opisywanie znacznika <FRAMESET> więc teraz zajmijmy się alternatywą ramek. Całą sekcję BODY umieszczamy pomiędzy znacznikiem NOFRAMES (ang. nie ramki). To co będzie zawierać sekcja BODY wyświetli się nam na ekranie, w przypadku przeglądarki nie obsługującej ramek. Najlepiej umieścić tam informacje, Ŝe "Twoja przeglądarka nie obsługuje ramek", albo najlepiej wszystkie linki do podstron serwisu, dzięki czemu uŜytkownik i tak będzie mógł zobaczyć to, co oferuje serwis. PoniŜsze przykłady prezentują dwa kody ramek – pierwszy dla ramek pionowych, a drugi dla ramek poziomych: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> </HEAD> <FRAMESET COLS="100,*"> <FRAME SCROLLING="auto" NAME="spis" SRC="spis.htm" NORESIZE FRAMEBORDER="0"> <FRAME SCROLLING="yes" NAME="tresc" SRC="strona_glowna.htm" NORESIZE FRAMEBORDER="0"> www.INFORMATYKA.cba.pl KURS HTML </FRAMESET> <NOFRAMES> <BODY> niestety twoja przeglądarka nie obsługuje ramek<br /> zapraszam na <A HREF="strona_glowna.htm">stronę główną</A></BODY> </NOFRAMES> </HTML> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"> <HTML> <HEAD> </HEAD> <FRAMESET ROWS="100,*"> <FRAME SCROLLING="auto" NAME="spis" SRC="spis.htm" NORESIZE FRAMEBORDER="0"> <FRAME SCROLLING="yes" NAME="tresc" SRC="strona_glowna.htm" NORESIZE FRAMEBORDER="0"> </FRAMESET> <NOFRAMES> <BODY> niestety twoja przeglądarka nie obsługuje ramek<br /> zapraszam na <A HREF="strona_glowna.htm">stronę główną</A></BODY> </NOFRAMES> </HTML> Pływająca ramka czyli ramka wewnętrzna Czas na ramki wewnętrzne. W tym przypadku nie musimy zmieniać Ŝadnego typu dokumentu, ani Ŝadnych zbędnych elementów. Ramka wbudowana, to specjalny kod umieszczony wewnątrz najzwyklejszego dokumentu HTML (obok treści, w tabelce, gdziekolwiek chcemy), który po załadowaniu wyświetli nam załączony za pomocą specjalnego atrybutu dokument. Znacznik ramki wewnętrznej to <IFRAME>. Jej atrybuty, podobnie jak w ramkach standardowych to: NAME - nazwa ramki, SRC adres domyślnego dokumentu, SCROLLING - ustawienie pasków przewijania (te same www.INFORMATYKA.cba.pl KURS HTML wartości), FRAMEBORDER - ustawienie obramowania (te same wartości), ale i takŜe znane nam juŜ atrybuty: WIDTH - długość ramki, HEIGHT - wysokość ramki i jeŜeli chcemy ALIGN - oblanie tekstem, lub innymi elementami ramki. <IFRAME> jest znacznikiem opcjonalnym, pomiędzy którym umieszczamy tekst, który wyświetli się posiadaczom przeglądarek niezdolnym do wyświetlenia ramki. Przykładowy kod ramki: <IFRAME SCROLLING="auto" NAME="irama" SRC="irama.htm" FRAMEBORDER="0" WIDTH="200" HEIGHT="200"> niestety twoja przeglądarka nie obsługuje ramek<br /> zapraszam <A HREF="irama.htm">tutaj</A> </IFRAME> Uwaga: JeŜeli chcemy zrobić link, który w ramkach standardowych nie otwiera się w ramce, w której był link, tylko zastępuje cały dokument z ramkami w jego atrybucie TARGET musimy umieścić wartość _top, a jeŜeli chcemy, aby otworzył się w innej ramce... przeczytaj wcześniejsze "uwagi" z tej lekcji. www.INFORMATYKA.cba.pl