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