Меню для сайта – в прошлом уроке данного курса – «Как создать сайт в блокноте», мы с Вами определились, что на нашем сайте будет три страницы. Мы наметили тематику для статей каждой из страниц, и придумали имена файлов страниц.

Теперь мы готовы к формированию меню для сайта, непосредственно в html коде.

Как я уже ранее высказывался, меню для сайта, это ссылки на определенные страницы сайта.

Что такое ссылка и как ее создать на странице, мы изучили в уроке 13, который так и называется - html ссылка.

Итак, на нашем сайте будет три пункта меню: «Главная», «О сайте», «Новости», которые должны открывать файлы трех наших страниц: «index.html», «about.html», «news.html».

Соответственно мы получаем следующий HTML код для меню нашего сайта:

<a href="index.html">Главная</a><br>

<a href="about.html">О сайте</a><br>

<a href="news.html">Новости</a><br>

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

Чтобы каждый пункт меню начинался с новой строки, я использовал в выше приведенном коде тег перевода строки <br>.

Теперь откроем блокнотом наш файл index.html и добавим в него выше приведенный html код в ячейку таблицы, зарезервированную нами для меню.

Сохраним файл в блокноте и откроем для просмотра в браузере. Мы увидим, что меню добавилось.

Теперь, давайте улучшим внешний вид меню. Для этого, добавим к началу каждого пункта меню небольшую картинку. В нашем случае, это будет картинка небольшой угловой закрывающей скобки, вот такого вида:

>

Файл картинки называется arrow.jpg. Скачать архив картинки можно по ссылке:

Скачать картинку для меню сайта: arrow.zip

После скачивания архива картинки для меню, распакуйте его и скопируйте файл arrow.jpg в папку – img нашего проекта.

Ну что же, теперь мы с Вами можем добавить картинку к каждому пункту меню в htmlкоде страницы, в результате, мы получим:

<img src="img/arrow.jpg"><a href="index.html">Главная</a><br>

<img src="img/arrow.jpg"><a href="about.html">О сайте</a><br>

<img src="img/arrow.jpg"><a href="news.html">Новости</a><br>

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

Теперь у нас каждый пункт меню начинается с картинки угловой скобки. Думаю, Вы понимаете, что можно использовать любую картинку, которая Вам понравится.

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

Чтобы исправить данную ситуацию, давайте пропишем в коде отступы. Для задания отступов для пунктов меню, добавим параметр hspace="6" для тега IMG.

<img src="img/arrow.jpg" hspace="6"><a href="index.html">Главная</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="about.html">О сайте</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="news.html">Новости</a><br>

Обновим страницу браузера, теперь картинка в меню имеет отступ, как от рамки таблицы, так и текста меню.

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

На мой взгляд, меню в целом, нужно переместить ниже от его настоящего положения. Для того, чтобы это сделать, вновь используем тег перевода строки <br>.

Добавим тег перевода строки перед меню и после меню:

<br>

<img src="img/arrow.jpg" hspace="6"><a href="index.html">Главная</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="about.html">О сайте</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="news.html">Новости</a><br>

<br>

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

Смотрим, как это можно сделать в html справочнике. Находим в справочнике описание тега TD.

Мы видим, что ширина ячейки таблицы (тег TD), задается параметром width.

Возвращаемся к нашему html коду, открытому в блокноте. Находим в нем ячейку таблицы, в котором находится меню, и добавляем параметр width="170".

Вот так выглядит html код меню для сайта, вместе с ячейкой таблицы, в которой меню находится:

<td width="170">

<br>

<img src="img/arrow.jpg" hspace="6"><a href="index.html">Главная</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="about.html">О сайте</a><br>

<img src="img/arrow.jpg" hspace="6"><a href="news.html">Новости</a><br>

<br>

</td>

Вновь обновляем страницу в браузере и смотрим на изменения, если ширина ячейки таблицы для меню Вас не устраивает, меняем значение аргумента параметра width.

Ну что же, мы с Вами создали меню для нашего сайта, в следующем уроке, мы напишем html код, для нижней части сайта – который называют футер или подвал сайта.

Перейти к Уроку 17: Футер сайта

Перейти к Уроку 15: Меню для сайта Часть 1