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

top
left-side	center	right-side
footer

<html><head>

<style>

#left-side { float:left;

width:200px; }

#wrapper { margin-left:200px;

background-color: yellow; }

#right-side { float:right;

width:200px; }

#center {}

#footer { clear:both; }

</style>

</head> <body>

<div id="top"> top </div>

<div id="content">

<div id="left-side"> left-side </div>

<div id="wrapper">

<div id="right-side"> right-side </div>

<div id="center"> center </div>

</div>

</div>

<div id="footer"> footer </div>

</body> </html>

18. На одной из страничек сайта заголовок обрамите рамочкой с закругленными углами. Сглаженные закругленные углы без использования изображений.

<html>

<head>

<title>Сглаженные закругленные углы без использования изображений</title>

<style>

.b1, .b2, .b3, .b4, .b5,

.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,

.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,

.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {

height: 1px;

font-size: 1px;

overflow: hidden;

border-style: solid;

border-width: 0 1px;

display: block;

}

.b1 {

margin: 0 2px;

background: #EBEEF0;

border: none;

}

.b1 b {

margin: 0 1px;

background: #B8C3C8;

border-color: #CBD3D7;

}

.b2 {margin: 0 1px; border-color: #D6DCDF;}

.b2 b {border-color: #B8C3C8;}

.b2 i {border-color: #E4E8EA;}

.b2 q {border-color: #F7F8F9;}

.b3 {border-color: #EBEEEF;}

.b3 b {border-color: #BCC6CB;}

.b3 i {border-color: #F9FAFB;}

.b4 {border-color: #CAD2D6;}

.b4 b {border-color: #E5E9EB;}

.b5 {border-color: #B5C0C6;}

.b5 b {border-color: #FAFBFB;}

.text {

border: 1px solid #B0BCC2;

border-width: 0 1px;

padding: 0 12px;

}

</style>

</head>

<body>

<div class="b1"><b></b></div>

<div class="b2"><b><i><q></q></i></b></div>

<div class="b3"><b><i></i></b></div>

<div class="b4"><b></b></div>

<div class="b5"><b></b></div>

<div class="text"> каждый угол состоит из пяти расположенных

специальным образом пикселей, придающих углу закругление.  </div>

<div class="b5"><b></b></div>

<div class="b4"><b></b></div>

<div class="b3"><b><i></i></b></div>

<div class="b2"><b><i><q></q></i></b></div>

<div class="b1"><b></b></div>

</body> </html>

19. Добавить информеры: погода, курсы валют, гороскоп: например:

<a href= "http://www.afn.by/">

<ima stc= http://www.afn.by/finances/ticket/ border="0"/>

</a> – включение информера

20. Добавить баннеры.

21. Проверить сайт на валидность (http://validator.w3.org/unicorn)

22. Проверьте сайт на кроссбраузерность (правильность отображения сайта в различных браузерах).

23. Разместить сайт на любом бесплатном хостинге.

Темы для создания сайтов в Приложении 1, курсовые работы 1,2

Лабораторная работа 4. Применение каскадных таблиц стилей css

1. Создайте шаблон для сайта в Adobe Dreamweaver (файл с расширением .dwt). Для создания шаблона используйте меню: Вставка –> Объекты шаблона – >Создать шаблон. Для вставки контейнеров (частей макета) используйте Вставка ‑> Объекты макета ‑> Тег Div. Для создания редактируемых областей Вставка –> Объекты шаблона –> Редактируемая область. Продумайте, какие области в шаблоне могут быть постоянными, а какие должны изменяться. Создайте страницу на основе созданного шаблона Файл ‑> Создать... –> Страница из шаблона.

2. Добавьте на сайт, созданный в лабораторной работе 3 графическую навигационную карту. В качестве изображения можно использовать любую фотографию. При щелчке на отдельных объектах изображения должен осуществляться переход на страничку с детальной информацией об объекте. Например, если на фотографии изображены Вы с котом Барсиком на руках на фоне дачного домика, то при клике мышкой на Вашем изображении будет открыта страничка с Вашей биографией, при клике на Барсике – страничка о котах, при щелчке по дому – описание схемы проезда до дачи. Для создания графической навигационной карты воспользуйтесь возможностями Adobe Dreamweaver. Выделите изображение, внизу страницы в редакторе свойств отобразятся инструменты для выделения горячих областей.

Первая кнопка предназначена для редактирования уже существующих областей (при нажатой клавише Ctrl вершины многоугольника можно перемещать), а 2-4 для создания прямоугольной, круглой области и области сложной формы. Как только Вы выберите тип области и приступите к ее выделению на изобржении, Dreamweaver подставит в поле Map редактора свойств слово Map (имя навигационной карты), можно его изменить. Для каждой области надо указать адрес перехода по ссылке, где будет открыта ссылка и замещающий текст.

3. Блочная верстка сайтов

Блоком считают фрагмент страницы, помещенный в контейнеры <p>, <div>, <body> и др. Новые блоки появились в HTML5. Форматированием блока является изменение ширины, высоты блока, отступов от границ и других характеристик. Размеры блока указываются в свойствах width и height. Для переменных габаритов блока в CSS предусмотрены свойства min-width, min-height и max-widht/max-height. Внешние отступы от блока диктуют параметры: margin (отступы одинаковые), margin-left (отступ слева), margin-right (отступ справа), margin-top (отступ сверху) и margin-bottom (отступ снизу). Аналогично применяется свойство padding (отступ внутри блока).

Для изменения параметров рамки блока применяются свойства, начинающие со слова border. При помощи border-width можно устано­вить одинаковые значения для всех четырёх границ блока, а в значениях border-left-width, border-right-width, border-top-width и border-bottom-width описывается конкретная граница. По анало­гичному представлению при­меняются: border-color (цвет линий рамки) и border-style (внешний вид линий). Стили рамки имеют не­сколько, значений:

solid, groove, ridge, double - линии рамки будут сплошными, вдавлен­ными, вы­пуклыми и двойными соответственно. inset - блок полностью вдавленный. outset - объёмный вид блока. none - нет линий.

Приведем пример стилей блока:

.box{width: 200px; height: 100px; margin-left: 5px; margin-right: 5px; margin-top: 10px; margin-bottom: 15px; padding: 5px; border-width-left: 1px; border-width-right: 0px; border-width-top: 0px; border-width-bottom: 5px; bor­der-color: #20; border-style: solid}

Некоторые подсказки по синтаксису CSS: