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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</head>
<frameset rows="83,*">
<frame src="baner.html">
<frameset>
</frameset>
</frameset>
</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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</head>
<frameset rows="83,*">
<frame src="baner.html">
<frameset cols="20%,80%">
<frame src="katalog.html">
<frame src="home.html">
</frameset>
</frameset>
</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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</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>
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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - Baner</title>
</head>
<body style="background-color: #fff">
Tu będzie baner strony www.
</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ą CSS i nadania tagowi <img> właściwości bloku (aby zachowywała się nie jak obiekt inline, lecz jak obiekt blokowy), oraz poprzez nadanie nowemu elementowi blokowemu właściwości:style="display: block; margin-left: auto; margin-right: auto;".
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - Baner</title>
</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>
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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne</title>
</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>
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>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - Katalog</title>
</head>
<body style="background-color: #fff">
Tu będą linki.
</body>
</html>
Zamienmy tekst "Tu będą linki" na jakiś nagłówek i wpiszmy wszystkie teksty linków.
<!DOCTYPE html>
<html lang="pl">
;<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - Katalog</title>
</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>
Dodajmy odpowiednie linki.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Ćwiczenie praktyczne - katalog</title>
</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="https://agh.edu.pl/">AGH</a><br>
<a href="https://www.wggios.agh.edu.pl/">WGGiOŚ</a><br>
<a href="https://home.agh.edu.pl/bartus/">Tomasz Bartuś</a>
</p>
</body>
</html>
To jeszcze nie wszystko. Zapraszam do następnej części kursu.