Самостоятельное создание сайтов.Продолжение - 27 Января 2013 - Блог

Меню сайта

Категории раздела

Создание своего сайта [1]

Уроки HTML [3]

Уроки CSS [12]

Софт [2]

Продвижение сайта [0]

Мы в Контакте

Вступайте!!!

Лайкни

Раскрутка сайта

раскрутка

FreeViral.ru - вирусный маркетинг, матрица сайтов

FreeAvalanche - Лавина Бесплатного Трафика на Ваш Сайт

Главная » » Самостоятельное создание сайтов.Продолжение

20:17

Самостоятельное создание сайтов.Продолжение

Часть 2.

Разделим нашу страницу на три колонки, и для этого опять воспользуемся таблицей но из трех колонок.

Делаем правую и левую колонки размером 200 пикселей, а середина должна растянуться автоматически под наш размер.

Итак, в файле index.html сразу после нашей шапки прописываем такие строки:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>


<td width="210px" valign="top" class="left">

Здесь будет содержимое левой колонки

</td>



<td valign="top" class="center">

Здесь будет содержимое центральной колонки

</td>



<td width="200px" valign="top" class="right">

Здесь будет содержимое правой колонки

</td>


</tr>
</table>

В файле style.css прописываем следующие данные о вносимых изменениях:

.left{ /* стиль для левой колонки */
padding-right:10px; /* внутренний отступ справа */
}

.right{ /* стиль для правой колонки */
padding-left:10px; /* внутренний отступ слева */
}

.center{ /* стиль для центральной колонки */
border-width:1px; /* толщина рамки */
border-style:dashed; /* стиль рамки (в нашем случае пунктирный) */
border-color:#333333; /* цвет рамки */
background-color:#99FFCC; /* цвет фона */
padding:10px 10px 0 10px; /* внутренние отступы (соответственно: сверху справа снизу слева) */
}

Делаем левое меню.

Левая колонка меню состоит из двух похожих блоков ссылок, пожалуй вставим сразу оба.

Там где у нас написано "Здесь будет содержимое левой колонки" вставляет следующий код с новой строки:

<div class="menu-header">Меню</div>



<div class="menu-telo">
<a href="index.html">Главная</a><br />
<a href="kot.html">Мой котэ</a><br />
<a href="http://css-standart.ru">Ссылка 3</a><br />
<a href="http://css-standart.ru">Ссылка 4</a><br />
<a href="http://css-standart.ru">Ссылка 5</a><br />
<a href="http://css-standart.ru">Ссылка 6</a><br />
<a href="http://css-standart.ru">Ссылка 7</a><br />
</div>



<div class="menu-header">Новое на сайте</div>



<div class="menu-telo">
<a href="http://css-standart.ru">Новое 1</a><br />
<a href="http://css-standart.ru">Новое 2</a><br />
<a href="http://css-standart.ru">Новое 3</a><br />
<a href="http://css-standart.ru">Новое 4</a><br />
<a href="http://css-standart.ru">Новое 5</a><br />
<a href="http://css-standart.ru">Новое 6</a><br />
<a href="http://css-standart.ru">Новое 7</a><br />
</div>

А в файл style.css дополняем следующими строками:

.menu-header{ /* стиль для заголовка меню */
height:30px; /* высота блока */
background-color:#99FFCC; /* цвет фона */
border-width:1px; /* толщина рамки */
border-style:dashed; /* стиль рамки (в нашем случае пунктирный) */
border-color:#333333; /* цвет рамки */
color:#996600; /* цвет текста */
font-size:20px; /* размер шрифта */
padding:0 0 0 15px; /* внутренние отступы (соответственно: сверху справа снизу слева) */
line-height:30px; /* высота строки */
}

.menu-telo{ /* стиль для содержимого меню */
background-color:#99FFFF; /* цвет фона */
border-width:0px 1px 1px 1px; /* толщина рамки (4 значения - соответственно: верхняя правая нижняя левая) */
border-style:dashed; /* стиль рамки (в нашем случае пунктирный) */
border-color:#333333; /* цвет рамки */
padding:5px 5px 5px 15px; /* внутренние отступы (соответственно: сверху справа снизу слева) */
margin-bottom:10px; /* внешний отступ снизу */
line-height:16px; /* высота строки */
color:#333333; /* цвет текста */
font-size:12px; /* размер шрифта */
}

.menu-telo a{ /* стиль для ссылок в меню */
color:#990033; /* цвет ссылки */
font-size:12px; /* размер шрифта */
text-decoration:none; /* убираем подчеркивание ссылки */
}

.menu-telo a:hover{ /* стиль для ссылок в меню при наведении на них */
color:#999900; /* цвет ссылки при наведении */
text-decoration:underline; /* добавляем подчеркивание ссылки при наведении */
}

Снова сохраняем изменения в файлах,обновляем страницу. Должно появится меню.

Такие же шаги проделываем и внесением правой колонки:

<div class="menu-header">Информация</div>



<div class="menu-telo">
Это мой первый супермегасайт!
Здесь я буду писать о жизни
моего котэ, выкладывать фоты,
и видео с ютуба.
</div>

Файл style.css остается неизменным потому что он соответствует параметрам левой колонки.

Заключение..