Придаем вид левой колонке и вставляем навигацию.

Итак придадим вид левой колонке где у нас будет навигация с помощью таблицы стилей. Открываем файл stile.css и пропишем туда следующий код

.left{ background-color:#FFFFFF;border-right:1px solid #424242;} Сохраняем файл stile.css

Зажимаем клавишу Ctrl + клик левой кнопки по левой колонке. Это выделит левую колонку. Затем клик правой кнопкой по этой же левой колонке и выбираем пункт CSS Styles -> left. Сохраняем и проверяем все в браузере. Должно получится так:

Самое время вставить меню навигации в нашу страничку. Для этого воспользуемся готовым кодом.

Здесь нужно внимательно . Часть кода меню навигации нужно вставить в файл index.html, а другую часть stile.css

Этот код вставляем в index.html следующим образом:

1.Копируем следующий код:

<p align="center" class="title">Навигация</p>
<div id="coolmenu">
<a href="index.php">Главная</a>
<a href="articles.php">Статьи</a>
<a href="lessons.php">Уроки</a>
<a href="contacts.php">О нас</a>
</div>

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

(обязательно) иначе меню может вставится где угодно. Курсор должен быть в левом верхнем углу левой колонки. Ничего не меняя переходим в код страницы с помощью

У вас курсор будет мигать возле знака неразрывного пробела как на картинке

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

Дальше копируем этот код и вставляем в файл stile.css чуть ниже наших записей

p.title {
background-color: #A72E37;
color: #ffffff;
font-weight:bold;
margin:5px;
padding:5px;
}

#coolmenu{
border: 1px solid gray; /*Стиль рамки */
border-bottom-width: 0;
width: 93%; /*Ширина меню */
background-color: #f6f6f6; /*Фоновый цвет ячейки*/
margin:8px; /*Ширина отступов*/
}

* html #coolmenu{
width: 150px;/*Ширина меню для Internet Explorer*/
}

#coolmenu a{
font: bold 13px Verdana; /*Шрифт текста*/
padding: 2px; /*Внутренний отсутп текста ссылки от краев ячейки*/
padding-left: 4px;/*Внутренний отсутп текста ссылки от левого края ячейки*/
display: block;
width: 100%; /*Ширина ячейки*/
color: #000000; /*Цвет текста*/
text-decoration: none; /*Подчеркивание у ссылок - нет*/
border-bottom: 1px solid gray;
}

html>body #coolmenu a{
width: auto;
}

#coolmenu a:hover{
background-color: #cccccc; /*Фоновый цвет ячейки при наведение курсора*/
color: #000000; /*Цвет текста при наведении курсора*/
}

сохраняем файл stile.css. у вас появится следующее

Мы видим что надпись навигация вылазит и навигация смотрится отвратительно, сейчас мы это подправим.

Откроем файл stile.css

найдем здесь такую надпись

* html #coolmenu{ width:150px;/*Ширина меню для Internet Explorer*/

и заменим 150px на 220px

Сохраняем файл stile.css и проверяем в браузере.

Должно быть все в порядке. Если - нет поиграйте с цифрами пока не добьетесь нужного результата.

Проверять нужно в Mozila и Internet Explorer поочередно так как эти браузеры поразному отображают один и тот же код. Иными словами в одном из них сайт может отображаться нормально, а в другом нет.