Vvedenie_v_Veb_programmirovanien_2 / Vvedenie_v_Veb_programmirovanien_2

Пример 2. Трехколоночный контейнерный макет сайта с применением css.

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="right-side"> right-side </div>

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

</div>

<div id="footer"> footer

</div>

</body>

</html>

Проверьте сайт на валидность.

http://validator.w3.org/unicorn

Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
.Добавьте в свой сайт страницу, созданную на основе одного из стандартных шаблонов предоставляемых DreamWeaver.
Познакомьтесь с ресурсом http://www.csszengarden.com/tr/russian/. На этом сайте наглядно демонстрируется то, что может быть достигнуто визуально посредством дизайна на основе CSS. На сайте собрано большое число вариантов дизайна. Содержимое контента не меняется, изменяется только стилевой файл и картинки. Код исходной html-страницы сайта и стилевой css-файл доступны для скачивания. Можно выбрать любой вариант дизайна из списка, загрузить его и просмотреть стилевой файл. На основе исходных файлов можно попытаться построить свой дизайн. Файлы примеров достаточно хорошо прокомментированы, так что даже новички в CSS смогут использовать их в качестве отправной точки.

Главная страница сайта:

Примеры дизайнов:

Продемонстрируйте возможность использования готового кода. На одной из страничек сайта заголовок обрамите рамочкой с закругленными углами. Воспользуйтесь стилями приведенными в книге Романчика В.С. «Web – программирование Средства разработки клиентских приложений», ср. 95.

Пример 3. Сглаженные закругленные углы без использования изображений.

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

</body>

</html>

Проверьте сайт на валидность.

http://validator.w3.org/unicorn

Проверьте сайт на кроссбраузерность (правильность отображения вашего сайта в различных браузерах).
Информеры. Погода, афиша, курсы валют, гороскоп: например, на afn.by

border=”0”/> </a> – включение инфорера

Баннеры.
Разместите сайт на любом бесплатном хостинге.

Содержание