Ramki (5)
Tomasz Bartuś
Spróbujmy teraz, od podstaw zrobić pełną stronę wykorzystującą ramki.
To naprawdę nic nadzwyczajnego.
Najpierw musimy zastanowić się, jaki efekt chcemy osiągnąć. Proponuję wykonać projekt klasycznej strony, która będzie się składała z trzech części. W wierszu na górze będzie się znajdował baner reklamowy lub wydłużony element graficzny promujący stronę. W lewej części strony, w kolumnie umieścimy spis linków sterujących działaniem strony. Na prawo od kolumny z linkami sterującymi, umieścimy główne okno projektu, w którym będą wyświetlane kolejne podstrony. Na początek, utwórzmy stronę główną projektu, w której umieścimy wszystkie tagi definiujące ramki. Przypominam, że strona glówna projektu, zawsze powinna nosić nazwę index.html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset>
</frameset>
</html>
Utwórz nowy folder o nazwie /ramki i zachowaj w nim powyższy kod pod nazwą index.html. Obrazek, który wyświetlimy w poziomej ramce baneru, niech posiada napis "Ćwiczenie praktyczne". Przygotowałem go dla Ciebie. Nosi nazwę bener.gif i ma szerokość 900px i wysokość 75px. Powinien się znaleźć w tym samym folderze co plik index.html. Skopiuj go do niego.
Wróćmy do edycji pliku index.html i podzielmy w nim ekran poziomo na dwie części.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset rows="83,*">
</frameset>
</html>
Uwaga Wysokość ramki równa 83px bierze się z sumy wysokość obrazka równej 75px i 8px na marginesy (górny i dolny) (75 + 8 = 83). W związku z użyciem absolutnej deklaracji wysokości ramki (83px), jesteśmy zmuszeni użyć ramki elastycznej.
Jako źródło górnej ramki zadeklarujmy plik baner.html (za moment utworzymy ten plik). W związku z zamiarem podziału drugiego wiersza ramki na dwie kolumny, ponownie wprowadźmy tag <frameset>.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset rows="83,*">
<frame src="baner.html">
<frameset>
</frameset>
</frameset>
</html>
Podgląd index.html
Możesz oczywiście uruchomić link, ale nie zdziw się, że otrzymasz komunikat o błędzie. Ramki są jeszcze nieskończone i brakuje plików źródłowych.
Pora podzielić dolne okno na dwie części. Określimy, również źródło plików, które mają się wyświetlić w odpowiednich ramkach. W lewym okienku ma się pojawić plik katalog.html, a prawe ma zawierać home.html. Pamiętajmy, że także tych dokumentów jeszcze nie zdążyliśmy przygotować i po wświetleniu strony, należy oczekiwać odpowiednich komunikatów o błędach.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset rows="83,*">
<frame src="baner.html">
<frameset cols="20%,80%">
<frame src="katalog.html">
<frame src="home.html">
</frameset>
</frameset>
</html>
Podgląd index.html
Katalog ze wszystkimi linkami będzie się znajdował w lewej ramce, natomiast strony mają się wyświetlać w ramce prawej, powinniśmy zatem nazwać ramkę, do której będą się odwoływały atrybuty target tagów <a>. To właściwie jedyna ramka, którą musimy nazwać, ale jeżeli chcesz, można nazwać wszystkie ramki.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset rows="83,*">
<frame src="baner.html">
<frameset cols="20%,80%">
<frame src="katalog.html">
<frame src="home.html" name="tresc">
</frameset>
</frameset>
</html>
Podgląd index.html
Zrobione. Zajmijmy się teraz plikiem baner.html. Na początek do pustego pliku wprowadź poniższy kod i zachowaj go pod nazwą baner.html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - Baner</title>
<meta charset="utf-8">
</head>
<body style="background-color: #fff">
</body>
</html>
Zauważ, że zadeklarowaliśmy kolor tła jako biały.
Podgląd baner.html
Podgląd index.html
Wstawmy do pliku obrazek i wycentrujmy go za pomocą tagu <center>.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - Baner</title>
<meta charset="utf-8">
</head>
<body style="background-color: #fff">
<img style="display: block; margin-left: auto; margin-right: auto;" src="baner.gif" width="900" height="75" alt="baner">
</body>
</html>
Podgląd baner.html
Podgląd index.html
Jak widać, pojawił się drobny problem w postaci paska przewijania (z prawej). Spróbujemy też nieco poprawić wygląd ramki z banerem. Otwórzmy stronę index.html i pozbądźmy się paska przewijania i marginesów.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne</title>
<meta charset="utf-8">
</head>
<frameset rows="83,*">
<frame src="baner.html" scrolling="no" marginwidth="1" marginheight="1">
<frameset cols="20%,80%">
<frame src="katalog.html">
<frame src="home.html" name="tresc">
</frameset>
</frameset>
</html>
Podgląd index.html
Zajmijmy się teraz stroną z linkami. Wpisz do pustego pliku poniższy kod i zapisz plik pod nazwą katalog.html.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - Katalog</title>
<meta charset="utf-8">
</head>
<body style="background-color: #fff">
</body>
</html>
Podgląd katalog.html
Podgląd index.html
Dodajmy do pliku nagłówek i wpiszmy wszystkie teksty linków.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - Katalog</title>
<meta charset="utf-8">
</head>
<body style="background-color: #fff">
<h3>Katalog</h3>
<p>
Home<br>
Tutaj<br>
Tam
</p>
<p>
AGH<br>
WGGiOŚ<br>
Tomasz Bartuś
</p>
</body>
</html>
Podgląd katalog.html
Podgląd index.html
Dodajmy odpowiednie linki.
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Ćwiczenie praktyczne - katalog</title>
<meta charset="utf-8">
</head>
<body style="background-color: #fff">
<h3>Katalog</h3>
<p>
<a href="home.html">Home</a><br>
<a href="tutaj.html">Tutaj</a><br>
<a href="tam.html">Tam</a>
</p>
<p>
<a href="http://agh.edu.pl/">AGH</a><br>
<a href="http://www.wggios.agh.edu.pl/">WGGiOŚ</a><br>
<a href="http://home.agh.edu.pl/bartus/">Tomasz Bartuś</a>
</p>
</body>
</html>
Podgląd katalog.html
Podgląd index.html
To jeszcze nie wszystko. Zapraszam do następnej części kursu.
