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

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

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

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

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

Інструкція

  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. Щоб помістити на сайт таке графічне меню, замініть в коді посилання, шляхи до зображень і назви розділів ресурсу на свої власні.