Практическая работа № 8 «Создание «резинового» шаблона сайта»
Цель работы: получить навык по созданию html-страниц
Ширина страницы на экране пользователя разработчику не известна: она зависит от свойств монитора, разрешения экрана и размеров открытого окна. “Резиновая” структура позволяет браузеру автоматически распределять элементы на экране с учетом ширины текущего окна и не приводит к показу горизонтальной линейки протяжки даже в узких окнах.
Такая структура достигается вёрсткой на основе таблицы и блоками. Табличная вёрстка, в последнее время, потеряла актуальность (хотя и используется). Я предлагаю Вашему вниманию пример резиновой страницы на основе блоков.
Пускай будущий сайт будет иметь вид:
Начнем с html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www. w3.org/1999/xhtml">
<head>
<title>Резиновая страница</title>
</head>
<body>
<div id="container"> — открываем общий контейнер страницы;
<div id="header"></div> — контейнер заголовка;
<div id="left"></div> — контейнер левого меню;
<div id="content"></div> — контейнер контента;
<div id="clear"></div> — вспомогательный контейнер1*;
<div id="clear"></div> — вспомогательный контейнер2*;
</div> — закрываем общий контейнер страницы;
<div id="footer"></div> —контейнер подвала;
</body>
</html>
Вспомогательные контейнеры не будут наполненны содержимым, но они обязательны для коректного отображения страницы в браузере. Сохраним получившийся документ и зададим свойства созданным контейнерам при помощи Вспомогательные контейнеры не будут наполненны содержимым, но они обязательны для коректного отображения страницы в браузере. Сохраним получившийся документ и зададим свойства созданным контейнерам при помощи css:
body, html {
margin: 0px; — нулевые поля;
padding: 0px; — нулевые отступы;
text-align:center; — текст выравниваем по желанию;
height:100%; } — высоту документа растягиваем на всё окно;
#container { — свойства общего контейнера;
width: 100%; — задаём его ширину на весь экран;
margin: 0 auto; — поля прировняем нулю;
text-align:center; — примем выравнивание текста (по желанию);
height: auto; — зададим автоматическую высоту блока - "по содержанию";
background-color:#FFFFFF; } — цвет фона и закрываем скобку;
#header { — имя контейнера;
background-color:#0000CC; } — ограничимся цветом фона;
#left { — имя контейнера;
background-color:#00FF66; — цвет фона;
width: 200px; — для него зададим ширину;
float:left; — прижмём к левому краю общего контейнера;
height: 100%; — высота - автоматически;
padding: 0px; } — отступ сделаем нулевым;
#content {— имя контейнера;
background-color:#666666; — цвет фона;
margin-left: 201px; — отступ от левого края равен ширине блока "left";
padding:0px; } — нулевые отступы;
#clear {— вспомогательный контейнер, все свойства просто повторите;
height: 0px;
font-size: 1px;
line-height: 0px;
clear:both; }
#podfooter {— так же вспомогательный контейнер;
height: 35px; } — задаём высоту равную высоте блока "footer";
#footer {— имя контейнера;
background-color:#009900; — цвет фона;
padding: 0px; — нулевые отступы;
height: 35px; — зададим желаемую высоту;
margin-top:-35px;} — отрицательный отступ, идентичный высоте;
Сохраним под именем styles. css. Присоединим полученную таблицу к html-документу. Для наглядности можно заполнить полученные блоки содержимым
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
<html xmlns="http://www. w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style. css">
<title>Резиновая страница</title>
</head>
<body>
<div id="container">
<div id="header">...</div>
<div id="left">...</div>
<div id="content">...</div>
<div id="clear"></div>
<div id="clear"></div>
</div>
<div id="footer">...</div>
</body>
</html>
Заполнить сайт контентом.
Практическая работа № 9 «Работа с фреймами»
Норма времени – 2 ч
Цель работы: изучить применение фреймов в html
Теоретический материал:
Фреймы позволяют разбивать окно просмотра браузера на несколько прямоугольных подобластей, располагающихся рядом друг с другом. В каждую из подобластей можно загрузить отдельный HTML-документ, просмотр которого осуществляется независимо от других. Между фрэймами пи необходимости можно организовать взаимодействие заключающиеся в том, что выбор ссылки в одном из фреймов может привести к загрузке документа в другой фрейм. При создании страниц с фреймами разрабатываются несколько HTML-файлов. Документы разкладки (layout), используются для создания структуры Web-страниц, то есть разделения их на несколько областей. Документы содержания (content) предназначены для заполнения информацией каждой из областей.
Сфера применения фреймов.
Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:
- при необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой подобласти;
- для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания подобластей экрана.
- для представления информации, которую удобно расположить в нескольких смежных подобластях окна, каждая из которых может просматриваться независимо.
Создание Web-страниц с фреймами.
Сначала необходимо продумать разбиение экрана на области. Вторым этапом является подготовка HTML-файлов для каждой области. Они создаются по тем же правилам, что и другие гипертекстовые документы. Нужно только учитывать размер области, в которой будет демонстрироваться каждый из них.
Тэг <FRAMESET>.
Фреймы определяются в структуре <FRAMESET>, которая используется для страниц, содержащих фреймы, вместо раздела <BODY> обычного документа. Web-страницы составленные из фреймов, не могут содержать раздел <BODY> в своём HTML-коде. В свою очередь, страницы с разделом <BODY> не могут использовать фреймы.
Контейнер из тэгов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрэйма. Внутри контейнера <FRAMESET> могут содержаться только тэги <FRAME> и вложенные тэги <FRAMESET>.
Тэг <FRAMESET> имеет два параметра: rows и cols. Горизонтальное деление экрана задаётся при помощи атрибута rows, а вертикальное - при помощи атрибута cols. Значение атрибута могут быть выражены в пикселах или процентах. Кроме того используется симвод *, для обозначения оставшейся части экрана.
Приведём несколько примеров:
cols= 50%, 50% - деление области просмотра по вертикали пополам (принцип программы Norton Commander);
rows=150, 30%, *- для верхней горизонтальной области отведенно 150 пикселов, для средней - 30% доступного пространства, а для нижней всё что остаётся;
cols=*, 4*- стиль для любителей головоломок, правая вертикальная область в четыре раза шире левой; эту формулу можно записать так: cols=20%, 80%.
Ход работы:
1. Создайте четыре файла: a.htm, b.htm, c.htm, d.htm,
которые будут в дальнейшем заполнять поля фреймов.
Файл a. htm
<HTML>
<HEAD><TITLE>Страничка А</TITLE></HEAD>
<BODY bgcolor=red text=white>
<p>Страничка А</p>
</BODY>
</HTML>
Файл b.htm
<HTML>
<HEAD><TITLE>Страничка B</TITLE></HEAD>
<BODY bgcolor=yellow text=black>
<p>Страничка B</p>
</BODY>
</HTML>
Файл c.htm
<HTML>
<HEAD><TITLE>Страничка С</TITLE></HEAD>
<BODY bgcolor=green text=white>
<p>Страничка C</p>
</BODY>
</HTML>
Файл d.htm
<HTML>
<HEAD><TITLE>Страничка D</TITLE></HEAD>
<BODY bgcolor=blue text=white>
<p>Страничка D</p>
</BODY>
</HTML>
2. Создайте файлы WWW-страничек с различными вариантами расположения фреймов.
Файл index-2-frames. htm
<HTML>
<HEAD>
<TITLE>ФРЕЙМЫ-2</TITLE></HEAD>
<!-- Пример создания двух вертикальных фреймов одинаковой ширины -->
<FRAMESET cols="50%,50%">
<FRAME src="a. htm">
<FRAME src="b. htm">
</FRAMESET>
</HTML>
Файл index-4-frames-cols. htm
<HTML>
<HEAD>
<TITLE>ФРЕЙМЫ-4</TITLE></HEAD>
<!-- Пример создания четырех вертикальных фреймов. Из них 3 фрейма одинаковой ширины, а один – занимает всю оставшуюся площадь экрана -->
<FRAMESET cols="20%,20%,20%,*">
<FRAME src="a. htm">
<FRAME src="b. htm">
<FRAME src="c. htm">
<FRAME src="d. htm"> </FRAMESET></HTML>
Файл index-4-frames-rows. htm
<HTML>
<HEAD>
<TITLE>ФРЕЙМЫ-4</TITLE></HEAD>
<FRAMESET rows="20%,20%,20%,*">
<!-- Пример создания четырех горизонтальных фреймов. Из них 3 фрейма одинаковой ширины, а один – занимает всю оставшуюся площадь экрана -->
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 |
