Як зробити меню навігації

Як зробити меню навігації


Щоб відвідувачі не заблукали на сайті і з будь-якої сторінки могли звернутися до потрібного розділу ресурсу, необхідно зробити меню навігації. Елементи, що вказують, мають бути розміщені на веб-сторінках так, щоб вони не заважали читанню тексту і в той же час їх можна було без зусиль знайти на сайті. У потрібні частини ресурсу відвідувачі можуть потрапляти при кліці по тих, що відповідають словах або зображенням. Для постачання ресурсу таким меню досить вписати нескладний код в потрібні частини сайту.


 

Вам знадобиться

  • - наявність на власному сайті декількох сторінок або розділів
  • - декілька маленьких іконок по темі сайту
  • - знать, як заливати картинки на сайт

Інструкція

1. Щоб рядок меню був посиланням, запишіть її таким чином:

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

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>

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> на код потрібної картинки.

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>

10. У цьому коді усі картинки, що знаходяться в осередках, розташовані в одному рядку таблиці. Ширина таблиці, встановлена не в пікселях, а у відсотках дозволяє розтягувати вміст таблиці на усю ширину вікна незалежно від дозволу екрану. Теги <tr> і </tr> утворюють рядок таблиці, а <td> і </td> - один з осередків.

11. Щоб помістити на сайт таке графічне меню, заміните в коді посилання, шляхи до зображень і назви розділів ресурсу на свої власні.