Ramki www ========= http://webmaster.helion.pl/index.php/xhtml-ramki Skocz do głównej treści strony Skocz do głównej nawigacji Skocz do pierwszej kolumny Skocz do drugiej kolumny KURS JĘZYKA HTML I CSSPoradnik webmasteraZwiększ rozmiar czcionki Domyślny rozmiar czcionki Zmniejsz rozmiar czcionki SZUKAJ znajdź w witrynie Start Kurs HTML Kurs CSS Kurs JavaScript Podręcznik CSS Kurs PHP Kurs MySQL Kurs XHTML Inne Ramki piątek, 23 lipiec 2010 09:37 Administrator Email Drukuj PDF Możliwość podzielenia strony na niezależne obszary — ramki — w których wyświetlana była zawartość różnych plików XHTML, zrewolucjonizowała swego czasu pojęcie serwisu internetowego, kończąc erę luźno powiązanych, odmiennych stylistycznie stron podrzędnych składających się na serwis internetowy. Ramki, po raz pierwszy wprowadzone przez firmę Netscape w jej przeglądarce Navigator, ujednoliciły wygląd wielu serwisów internetowych i pozwoliły zdecydowanie ułatwić nawigację w ramach serwisu. Stale obecne w oknie przeglądarki menu nawigacyjne pozwalało w każdym momencie zmienić aktywną sekcję serwisu — czytelnik strony nie mógł po prostu stracić orientacji. Dzisiaj z ramek coraz częściej się rezygnuje. Nowoczesne narzędzia umożliwiające dynamiczne komponowanie kodu XHTML na podstawie szablonów ograniczyły potrzebę wydzielania fragmentu strony w oddzielnej ramce, a języki dynamicznego komponowania stron — takie jak ASP lub PHP — umożliwiły tworzenie serwisów, których każda strona zawiera aktualizowane na bieżąco menu nawigacyjne. Niektórzy twórcy stron WWW ułatwiają też nawigację po tworzonych przez siebie serwisach za pomocą stale obecnych na ekranie menu tworzonych w języku JavaScript. Mimo to jednak mechanizm ramek wciąż jest obecny w każdej nowoczesnej przeglądarce. Możliwe, że Twoja wizja serwisu internetowego doskonale współgra z ideą ramek — w takim przypadku nic nie stoi na przeszkodzie, by wykorzystać ten mechanizm. Możesz też połączyć ramki z nowoczesnymi technikami dynamicznego komponowania kodu XHTML lub językiem JavaScript, osiągając niepowtarzalne rezultaty. Budowa serwisu składającego się z ramek Na kilkunastu następnych stronach przedstawię — krok po kroku — proces budowy prostego serwisu internetowego korzystającego z mechanizmu ramek. Do podzielenia okna przeglądarki na trzy ramki według poniższego schematu (rysunek 8.1) potrzebne będą co najmniej cztery pliki XHTML: Rysunek 8.1. Typowy układ serwisu WWW plik główny, definiujący podział okna przeglądarki na ramki, plik definiujący zawartość ramki tytułu, plik definiujący zawartość ramki menu, plik definiujący zawartość ramki treści. Przygotowanie czterech plików wymaga znacznie więcej pracy niż przygotowanie pojedynczej, niepodzielonej na ramki strony WWW. Nie zniechęcaj się jednak — mechanizm ramek pozwoli Ci wykorzystać raz przygotowane ramki zawierające tytuł strony i menu nawigacyjne na każdej stronie podrzędnej serwisu! Tworząc kod XHTML opisujący podział okna przeglądarki na ramki, pamiętaj o podstawowej zasadzie: w danym momencie można dokonywać podziału okna na pasy wyłącznie w poziomie lub w pionie. Zatem aby stworzyć układ ramek przedstawiony na powyższym rysunku, musisz wykonać dwa kroki: podzielić okno przeglądarki w pionie na dwa poziome pasy: pas tytułu strony (u góry) oraz pas zawierający menu i treść strony (u dołu), podzielić dolny pas na dwa pionowe pasy: pas menu (po lewej) oraz pas treści strony (po prawej). W jednym kroku możesz utworzyć dowolną liczbę pasów, jednak wszystkie one muszą być względem siebie równoległe. Każdy z nich może też podlegać kolejnym, dowolnym podziałom. Podział strony na ramki Prace zaczniemy od głównego dokumentu, dzielącego obszar okna przeglądarki na poszczególne ramki. W efekcie pierwszego podziału powstaną dwa poziome pasy — jeden pod drugim, a w efekcie drugiego — dolny pas zostanie podzielony na dwa pionowe paski. Kod dokumentu głównego, dzielącego okno na ramki, wygląda prawie identycznie jak kod zwykłej strony WWW, różni się jednak dwoma istotnymi szczegółami. Po pierwsze, zmianie ulega deklaracja typu dokumentu, czyli element <!DOCTYPE>. W przypadku dokumentu składającego się z ramek musi ona wyglądać następująco: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Drugą istotną zmianą jest brak elementu <body>. Zamiast niego musisz użyć elementu <frameset>. Każdy element <frameset> stanowi o podziale obszaru, w którym się znajduje, na dowolną liczbę poziomych lub pionowych pasków o określonych szerokościach. Na przykład poniższy kod elementu tworzy podział na dwa poziome pasy: <frameset rows="55,*"> ... </frameset> a taki fragment kodu spowoduje utworzenie trzech pionowych pasów: <frameset cols="55,40,*"> ... </frameset> Wewnątrz atrybutów rows (wiersze) lub cols (kolumny) podaje się szerokości pasów. Zamiast jednej z nich powinna być wprowadzona gwiazdka — tak oznaczony pas nie będzie miał stałej szerokości, a jego rozmiar będzie się zmieniał wraz z rozmiarem okna przeglądarki. Praktycznie zawsze tak oznaczonym obszarem jest obszar treści dokumentu — dzięki temu w zależności od rozmiaru okna przeglądarki WWW tekst może zajmować mniej lub więcej miejsca, zaś rozmiary pól tytułu strony i menu nawigacyjnego pozostaną niezmienne. Wewnątrz elementu <frameset> musi znaleźć się seria tylu elementów, na ile wierszy lub kolumn jest on podzielony. Elementy te mogą należeć tylko do dwóch rodzajów: elementy <frame> odpowiadające ramce zawierającej treść, elementy <frameset> tworzące dalszy, głębszy podział. Każdy element <frame> musi zostać wyposażony w unikatową nazwę, określoną za pomocą atrybutu name. Nazwa ramki będzie potem służyła do kierowania odnośników do właściwej ramki składowej — gdyby nie ona, kolejne strony byłyby zawsze otwierane w ramce zawierającej sam odnośnik, a to uniemożliwiałoby stworzenie menu nawigacyjnego strony w osobnej ramce. Nasza przykładowa strona WWW ma być zbudowana z trzech ramek: w efekcie pierwszego podziału mają powstać dwa poziome pasy jeden pod drugim, a w efekcie drugiego — dolny pas ma zostać podzielony na dwa pionowe paski. Kod tworzący taki podział — tym razem kompletny, wraz z całą otoczką — będzie wyglądał następująco: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Serwis WWW podzielony na ramki</title> </head> <frameset rows="50,*"> <frame name="tytul" /> <frameset cols="150,*"> <frame name="menu" /> <frame name="tresc" /> </frameset> </frameset> </html> Przeanalizuj dokładnie hierarchię elementów <frameset> i <frame>. Aby ułatwić Ci zadanie, zastosowałem wcięcia podkreślające zależność każdego elementu od elementu nadrzędnego. Na pasku tytułowym okna przeglądarki wyświetlany będzie wyłącznie tytuł strony podany w głównym pliku serwisu internetowego. Tytuły podane w plikach składowych — których zawartość będzie wyświetlana w pojedynczych ramkach — będą ignorowane. Sprawdź teraz, jak tak skonstruowana strona wygląda w przeglądarce WWW (rysunek 8.2). Choć ramki nie zawierają jeszcze żadnej treści, sam podział powinien być wyraźnie widoczny i odpowiadać naszym wcześniejszym założeniom. Rysunek 8.2. Podział strony WWW na ramki (na razie pozbawione treści) Ramki składowe Jak już wspominałem, zadaniem głównego pliku XHTML jest tylko i wyłącznie dokonanie podziału obszaru okna przeglądarki WWW na ramki. W dokumencie tym nie można i nie wolno wprowadzać żadnej treści pojawiającej się we wnętrzu ramek, bowiem każda z ramek prezentuje osobny plik XHTML. Poniżej znajdziesz instrukcje umożliwiające stworzenie plików wypełniających ramki składowe serwisu treścią. Tworzenie ramki z tytułem serwisu Dla zachowania prostoty przykładu w ramce prezentującej nazwę serwisu WWW niech wyświetlany będzie na razie tylko prosty nagłówek składający się z elementu <h1>. Przygotuj zatem kod pustej strony WWW (normalnej — nie zmodyfikowanej z myślą o ramkach!), wewnątrz elementu <body> dodaj element <h1> z dowolną nazwą i zapisz plik na dysku w tym samym katalogu, w którym znajduje się też główny plik tworzący podział na ramki. Nazwą pliku może być tytul.html. Pisząc kod XHTML, który będzie służył za zawartość ramki, pomiń element <title> znajdujący się w sekcji nagłówka strony. Przeglądarka na swoim pasku tytułu i tak będzie wyświetlała zawartość elementu <title> znajdującego się w pliku XHTML definiującym podział strony na ramki. Na razie zaprojektowana strona nigdzie nie będzie wyświetlana, jednak przygotowany kod przyda się nam już za chwilę. Tworzenie ramki menu nawigacyjnego Kolejną ramką czekającą na zapełnienie jest wąska ramka znajdująca się po lewej stronie okna przeglądarki. Jej zadaniem będzie prezentowanie menu nawigacyjnego służącego do sterowania zawartością sąsiedniej, największej ramki, w której ma być wyświetlana treść stron. Tak jak w powyższym punkcie, przygotuj kod zwykłej, pustej strony (pomijając jedynie element <title>), a wewnątrz elementu <body> wprowadź zbiór odnośników — na przykład takich: <p style="text-align: center;"> <a href="http://www.onet.pl/">Onet</a><br /> <a href="http://www.wp.pl/">Wirtualna Polska</a><br /> <a href="http://www.interia.pl">Interia</a><br /> <a href="http://www.grush.one.pl/">Świat Owoców</a><br /...
tebulaj