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

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

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

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

Лабораторная работа № 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.

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

.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;

}

Левая колонка

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

Правая колонка

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

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

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

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

.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; }

Левая колонка

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

Правая колонка

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

Второй метод использует сочетание свойств 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]

• Обо мне
• Бакалаврская работа

• Формула
• Таблицы
• Списки
• Слои
• Карты изображений

CSS [css/map.css]

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

{

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

font: inherit;

}

html

{

overflow-y: scroll;

height: 100%;

}

body

{

line-height: 1;

color: black;

background: white;

}

:focus

{

outline: 0;

-moz-outline: 3px solid #fff !important;

}

html

{

background: #fff url('../images/bg.png') repeat-x top left;

font: 14pt "Segoe UI", Candara, "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

}

body

{

margin-top: 150px;

}

#menu-left

{

left: 0;

}

#menu-right

{

right: 0;

}

.menu

{

list-style: none;

display: block;

position: fixed;

top: 0;

bottom: 0;

background-color: #222;

width: 250px;

padding: 40px 1px;

z-index: 5;

}

.menu li

{

display: block;

height: 42px;

}

.menu li a

{

display: block;

padding: 8px 15px;

line-height: 26px;

height: 26px;

color: #fff;

text-decoration: none;

text-shadow: 0 1px 0 #888;

}

.menu li a:hover, .menu li.current a

{

background-color: #8EBFE5;

color: #333;

}

#content

{

min-width: 600px;

margin: 250px 270px 60px 270px;

}

#content .title

{

text-align: center;

}

#content .title span

{

color: #8EBFE5;

}

#content .title div

{

color: #333;

font-size: 30px;

margin-top: 15px;

font-weight: bold;

}

#content .page-title

{

padding: 25px 0;

font: 1.5em serif;

text-align: center;

}

#content p

{

text-align: justify;

line-height: 120%;

padding-top: 15px;

text-indent: 45px;

}

.slides > img

{

display: block;

width: 90%;

padding: 5px;

margin: 25px auto;

overflow: hidden;

-webkit-box-shadow: 0 5px 20px #111;

-moz-box-shadow: 0 5px 20px #111;

box-shadow: 0px 5px 20px #111;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

}

.menu li.valid

{

margin: 30px 10px;

}

.menu li.valid a

{

padding: 5px 0;

height: 33px;

}

.menu li.valid img

{

display: block;

}

Используемые источники.

1. Фиксированный трёхколоночный макет

[http://htmlbook.ru/samlayout/tipovye-makety/fiksirovannyi-trekhkolonochnyi-maket]

1. Муссиано Ч., Кеннеди Б. HTML и XHTML. Подробное руководство, 6_е издание. – Пер. с англ. – СПб: Символ_Плюс, 2008. – 752 с., ил.

1. Матросов А. В., Сергеев А. О., Чаунин М. П. HTML 4.0. – СПб.: БХВ-Петербург, 2003. – 672 с.: ил.

1. Шмитт К. CSS. Рецепты программирования. 2-е изд: Пер. с англ. – М.: Издательство «Русская Редакция»; СПб.: «БХВ-Петербург», 2009. – 592 с.: ил.

1. Мейер Э. CSS – каскадные таблицы стилей. Подробное руководство, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 576 с., ил.