Лабораторная работа 9 (LAB9 Захаров А.Е.)

Посмотреть архив целиком

МОСКОВСКИЙ ЭНЕРГЕТИЧЕСКИЙ ИНСТИТУТ (ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ)

ИНСТИТУТ АВТОМАТИКИ И ВЫЧИСЛИТЕЛЬНОЙ ТЕХНИКИ

КАФЕДРА ПРИКЛАДНОЙ МАТЕМАТИКИ






Лабораторная работа № 9v2.

Макетирование web-страниц.

Вёрстка страниц с применением слоёв.




Выполнил

студент группы А-13-08

каф. Прикладной Математики

Захаров Антон


Преподаватель

Куриленко Иван Евгеньевич











Москва, 2012

Цель работы

Получить навыки вёрстки каркасов сайтов на основе слоёв.


Подготовка к работе

  1. Ознакомиться с технологией использования слоёв для разметки содержимого сайта.

  2. Выделить общие элементы разметки в имеющихся страницах.


Порядок выполнения работы

  1. Сделать каркас сайта с применением слоёв на основе макета ниже (вариант 9).

  2. Организовать меню сайта (на основе ссылок).




Подготовка к работе.


Технология использования слоёв для разметки содержимого сайта.


Слои представляют собой структурные элементы, которые можно размещать на веб-странице путём наложения их друг на друга с точностью до пикселя. Скрипты позволяют изменять параметры слоя динамически. Это даёт возможность создавать на странице разные эффекты, такие как выпадающие меню, игры, разворачивающиеся баннеры, плавающие окна и прочее. До недавнего времени в качестве основных инструментов вёрстки выступали фреймы и таблицы. Фреймы, ввиду их некоторых проблем, уходят в прошлое: например, стандарт HTML 5 более не включает в себя поддержку фреймов.

Таблицы широко применяются в самых разных случаях: с их помощью делают рамки, задают модульные сетки, создают цветной фон, выравнивают элементы и т. п.

Более современные версии браузеров стали строже придерживаться стандартов и содержать средства по работе со слоями.

Свойства слоя удобно задавать и настраивать через стили. Возможности CSS расширяют спектр оформительских изысков. Использование стилевых таблиц позволяет несложными методами получить компактный и эффективный код.

Слой можно перемещать, прятать и показывать без перезагрузки всей страницы. С помощью всего нескольких инструкций можно создавать разные эффекты, вроде выпадающих меню, всплывающих подсказок, движущихся элементов и другое. Добавление подобных трюков хотя и увеличивает объем кода, но не требует повторной загрузки и обновления документа и происходит без лишних задержек со стороны браузера. Кроме того, выразительность и привлекательность сайта во многом повышается благодаря использованию подобных приёмов со слоями.

Слои можно накладывать друг на друга, что упрощает размещение элементов на веб-странице и предоставляет больше возможностей при вёрстке.

Слои можно размещать в окне браузера с точностью до пикселя. Положение слоя задаётся двумя координатами относительно любого угла окна браузера, родительского элемента или документа.

Слои по сравнению с таблицами отображаются быстрее. Более высокая скорость достигается за счёт компактного кода и того, что отображение содержимого слоя происходит по мере его загрузки. Правда это может привести к «скачкам» элементов страницы по мере их загрузки.

Не следует считать, что использование слоёв это панацея от всех бед. К сожалению, стандарты работы со слоями ещё не до конца устоялись, и браузеры по-разному реализуют определённые возможности. Из-за этого основная сложность вёрстки слоями – создать универсальный код, который бы одинаково и без ошибок работал в разных браузерах. Приходится вникать в тонкости поведения браузеров при использовании различных элементов стилей.

Рассмотрим, для примера, фиксированный трёхколоночный макет. Трёхколоночный макет часто используется в тех случаях, когда двух колонок уже недостаточно или требуется особым образом разделить материал. Например, одна колонка отдаётся под навигацию, вторая под контент, а в третьей публикуются новости сайта или другая информация. Три колонки обеспечивают большую свободу выбора размещения материалов вроде иллюстраций, рекламных баннеров, объявлений и т. п.

Методы формирования колонок похожи на методы для двухколоночного макета, это применение свойств float и position. Независимо от способа структура кода похожа. Контейнером выступает слой layout, для которого задаётся общая ширина макета и выравнивание, внутри располагаются слои создающие колонки.


Центральная колонка


Порядок слоёв в контейнере может меняться в зависимости от некоторых условий или вообще не играет роли, как в случае позиционирования.


Использование позиционирования.

Для слоя layout устанавливается относительное позиционирование, а для слоёв nav, content и sidebar – абсолютное. При таком сочетании положение элементов меняется относительно родителя с помощью свойств left, right, top, bottom. Впрочем, из этого набора понадобится только left и right.


Трёхколоночный макет

Центральная колонка


Из-за того, что координаты колонок устанавливаются относительно родителя, не имеет значение порядок слоёв в коде. Можно поменять слои местами, чтобы контент загружался первым, а навигация последней или наоборот.


Использование float.

Свойство float в силу своей универсальности не раз выручало нас, вот и в этот раз с его помощью можно создать трёхколоночный макет, причём двумя разными методами. Первый основан на том, что float добавляется ко всем слоям с одновременным указанием ширины.


Трёхколоночный макет

Центральная колонка


Естественно, суммарная ширина всех колонок не должна превышать ширину макета. В коде слои идут слева направо.

Второй метод использует сочетание свойств float и margin. Для левой колонки значение свойства float устанавливается left, а для правой – right, а также их ширина. Центральной колонке задаётся отступ слева и справа на соответствующую ширину левой и правой колонки.


.nav {

float: left;

width: 180px;

}

.sidebar {

float: right;

width: 200px;

}

.content {

margin: 0 200px 0 180px;

}


При этом порядок слоёв также меняется, поскольку плавающие элементы должны идти первыми.


Центральная колонка



Выполнение работы.


В данной лабораторной работе был модифицирован сайт, разработанный в лабораторных работах № 3 – 8 (изменён каркас сайта).


Сайт доступен по адресу: http://a1308.ru/tmp/vmss/lab9


Карты изображений и мультимедиа.



HTML [index.html]


<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Лабораторная работа 9title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta content="вмсс, лабораторная, МЭИ, прикладная математика, А-13-08" name="keywords" />

<base href="http://a1308.ru/tmp/vmss/lab9/" />

<link href="css/common.css" media="all" rel="stylesheet" type="text/css" />

head>

<body>

<ul id="menu-left" class="menu">

<li><a href="about.html">Обо мнеa>li>

<li><a href="bachelor.html">Бакалаврская работаa>li>

ul>


Случайные файлы

Файл
11000-1.rtf
74806-1.rtf
Project.doc
154421.rtf
20939-1.rtf




Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
Это можно сделать совершенно бесплатно. Читайте подробности тут.