МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)
ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ
КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ
Лабораторная работа № 9v2.
Макетирование web-страниц. Вёрстка страниц с применением слоёв.
Выполнил
студент группы А-13-08
каф. Прикладной Математики
Захаров Антон
Преподаватель
Куриленко Иван Евгеньевич
Москва, 2012
Цель работы
Получить навыки вёрстки каркасов сайтов на основе слоёв.
Подготовка к работе
Ознакомиться с технологией использования слоёв для разметки содержимого сайта.
Выделить общие элементы разметки в имеющихся страницах.
Порядок выполнения работы
Сделать каркас сайта с применением слоёв на основе макета ниже (вариант 9).
Организовать меню сайта (на основе ссылок).
Подготовка к работе.
Технология использования слоёв для разметки содержимого сайта.
Слои представляют собой структурные элементы, которые можно размещать на веб-странице путём наложения их друг на друга с точностью до пикселя. Скрипты позволяют изменять параметры слоя динамически. Это даёт возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее. До недавнего времени в качестве основных инструментов вёрстки выступали фреймы и таблицы. Фреймы, ввиду их некоторых проблем, уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов.
Таблицы широко применяются в самых разных случаях: с их помощью делают рамки, задают модульные сетки, создают цветной фон, выравнивают элементы и т. п.
Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.
Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.
Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приёмов со слоями.
Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при вёрстке.
Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задаётся двумя координатами относительно любого угла окна браузера, родительского элемента или документа.
Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счёт компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их загрузки.
Не следует считать, что использование слоёв это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись, и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность вёрстки слоями – создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.
Рассмотрим, для примера, фиксированный трёхколоночный макет. Трёхколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдаётся под навигацию, вторая под контент, а в третьей публикуются новости сайта или другая информация. Три колонки обеспечивают большую свободу выбора размещения материалов вроде иллюстраций, рекламных баннеров, объявлений и т. п.
Методы формирования колонок похожи на методы для двухколоночного макета, это применение свойств float и position. Независимо от способа структура кода похожа. Контейнером выступает слой layout, для которого задаётся общая ширина макета и выравнивание, внутри располагаются слои создающие колонки.
<div class="layout">
<div class="nav">Левая колонка</div>
<div class="content">Центральная колонка</div>
<div class="sidebar">Правая колонка</div>
</div>
Порядок слоёв в контейнере может меняться в зависимости от некоторых условий или вообще не играет роли, как в случае позиционирования.
Использование позиционирования.
Для слоя layout устанавливается относительное позиционирование, а для слоёв nav, content и sidebar – абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left, right, top, bottom. Впрочем, из этого набора понадобится только left и right.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Трёхколоночный макет</title>
<style type="text/css">
.layout {
width: 980px;
margin: auto;
position: relative;
}
.nav, .content, .sidebar {
position: absolute;
color: #FFF;
}
.nav {
background: #7895A4; /* Цвет фона */
width: 180px;
}
.content {
background: #F0EAD6; width: 600px; color: #000;
left: 180px;
}
.sidebar {
background: #C38A6D; width: 200px;
right: 0;
}
</style>
</head>
<body>
<div class="layout">
<div class="nav">Левая колонка</div>
<div class="content">Центральная колонка</div>
<div class="sidebar">Правая колонка</div>
</div>
</body>
</html>
Из-за того, что координаты колонок устанавливаются относительно родителя, не имеет значение порядок слоёв в коде. Можно поменять слои местами, чтобы контент загружался первым, а навигация последней или наоборот.
Использование float.
Свойство float в силу своей универсальности не раз выручало нас, вот и в этот раз с его помощью можно создать трёхколоночный макет, причём двумя разными методами. Первый основан на том, что float добавляется ко всем слоям с одновременным указанием ширины.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Трёхколоночный макет</title>
<style type="text/css">
.layout { width: 980px; margin: auto; }
.nav, .content, .sidebar {
float: left;
}
.nav { width: 180px; background: #7895A4; color: #FFF; }
.content { width: 600px; background: #F0EAD6; }
.sidebar { width: 200px; background: #C38A6D; color: #FFE; }
</style>
</head>
<body>
<div class="layout">
<div class="nav">Левая колонка</div>
<div class="content">Центральная колонка</div>
<div class="sidebar">Правая колонка</div>
</div>
</body>
</html>
Естественно, суммарная ширина всех колонок не должна превышать ширину макета. В коде слои идут слева направо.
Второй метод использует сочетание свойств float и margin. Для левой колонки значение свойства float устанавливается left, а для правой – right, а также их ширина. Центральной колонке задаётся отступ слева и справа на соответствующую ширину левой и правой колонки.
.nav {
float: left;
width: 180px;
}
.sidebar {
float: right;
width: 200px;
}
.content {
margin: 0 200px 0 180px;
}
При этом порядок слоёв также меняется, поскольку плавающие элементы должны идти первыми.
<div class="nav">Левая колонка</div>
<div class="sidebar">Правая колонка</div>
<div class="content">Центральная колонка</div>