Вам понадобится
- - наличие на собственном сайте нескольких страниц или разделов
- - несколько маленьких иконок по теме сайта
- - знать, как заливать картинки на сайт
Инструкция
1
Чтобы строка меню была ссылкой, запишите ее следующим образом:
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
В этой записи замените http:⁄ ⁄website.ru на адрес нужной страницы.
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
В этой записи замените http:⁄ ⁄website.ru на адрес нужной страницы.
2
Код горизонтального меню, состоящего из текстовых ссылок, записывается так:
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
|
<a href="http:⁄ ⁄website.ru/gallery">ГАЛЕРЕЯ</a>
|
<a href="http:⁄ ⁄website.ru/forum">ФОРУМ</a>
|
<a href="http:⁄ ⁄website.ru/guestbook">ГОСТЕВАЯ КНИГА</a>
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
|
<a href="http:⁄ ⁄website.ru/gallery">ГАЛЕРЕЯ</a>
|
<a href="http:⁄ ⁄website.ru/forum">ФОРУМ</a>
|
<a href="http:⁄ ⁄website.ru/guestbook">ГОСТЕВАЯ КНИГА</a>
3
Разделителями между пунктами меню, располагающегося в линию, служат вертикальные штрихи. Для набора символа "|" с клавиатуры нужно на английской раскладке одним пальцем нажать и удерживать клавишу Shift, а другим - выбрать кнопку "|/\", которая находится справа от буквы «Ъ». Обязательно до штриха и после него ставьте пробел, чтобы пункты меню находились на расстоянии друг от друга.
4
Создать вертикальное меню из ссылок можно с помощью такой записи:
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
<br>
<a href="http:⁄ ⁄website.ru/gallery">ГАЛЕРЕЯ</a>
<br>
<a href="http:⁄ ⁄website.ru/forum">ФОРУМ</a>
<br>
<a href="http:⁄ ⁄website.ru/guestbook">ГОСТЕВАЯ КНИГА</a>
<a href="http:⁄ ⁄website.ru">ГЛАВНАЯ СТРАНИЦА</a>
<br>
<a href="http:⁄ ⁄website.ru/gallery">ГАЛЕРЕЯ</a>
<br>
<a href="http:⁄ ⁄website.ru/forum">ФОРУМ</a>
<br>
<a href="http:⁄ ⁄website.ru/guestbook">ГОСТЕВАЯ КНИГА</a>
5
В этом случае разделителем частей меню выступает тег <br>, который переносит следующий за ним текст на новую строчку.
6
Если вы хотите сделать пункты меню не в виде слов или словосочетаний, а в виде изображений, которые будут выполнять роль ссылок, то сначала залейте на сайт все картинки, которые будут использованы в навигации ресурса.
7
Чтобы поместить картинку на веб-страницу, неоходимо в нужном месте поместить этот код:Для размещения собственного изображения вместо http:⁄ ⁄website/images/1.png напишите путь к нужной картинке, залитой на ваш сайт.
8
Каждый пункт графического меню пропишите таким образом:
<a href="http:⁄ ⁄website.ru"><img src="http:⁄ ⁄website/images/1.png"></a>
В этом коде замените http:⁄ ⁄website.ru на нужный адрес, а <img src="http:⁄ ⁄website/images/1.png"> на код нужной картинки.
<a href="http:⁄ ⁄website.ru"><img src="http:⁄ ⁄website/images/1.png"></a>
В этом коде замените http:⁄ ⁄website.ru на нужный адрес, а <img src="http:⁄ ⁄website/images/1.png"> на код нужной картинки.
9
Создать горизонтальное меню, состоящее из изображений, можно таким образом:
<table border=0 width=100%>
<tr>
<td>
<a href="http:⁄ ⁄website.ru"><img src="http:⁄ ⁄website/images/1.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/gallery"><img src="http:⁄ ⁄website/images/2.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/forum"><img src="http:⁄ ⁄website/images/3.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/guestbook"><img src="http:⁄ ⁄website/images/4.png"></a>
</td>
</tr>
</table>
<table border=0 width=100%>
<tr>
<td>
<a href="http:⁄ ⁄website.ru"><img src="http:⁄ ⁄website/images/1.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/gallery"><img src="http:⁄ ⁄website/images/2.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/forum"><img src="http:⁄ ⁄website/images/3.png"></a>
</td>
<td>
<a href="http:⁄ ⁄website.ru/guestbook"><img src="http:⁄ ⁄website/images/4.png"></a>
</td>
</tr>
</table>
10
В этом коде все картинки, находящиеся в ячейках, расположены в одной строке таблицы. Ширина таблицы, установленная не в пикселях, а в процентах позволяет растягивать содержимое таблицы на всю ширину окна независимо от разрешения экрана. Теги <tr> и </tr> образуют строку таблицы, а <td> и </td> - одну из ячеек.
11
Чтобы поместить на сайт такое графическое меню, замените в коде ссылки, пути к изображениям и названия разделов ресурса на свои собственные.