Совет 1: Как сделать меню на сайте

Информационные технологии развиваются с каждым днем. А то, что раньше казалось чем-то недосягаемым, сегодня уже доступно практически каждому обывателю. И совсем необязательно обладать сверхъестественными способностями и знаниями, чтобы сделать собственный сайт. А если речь идет только о том, чтобы добавить на свой ресурс меню, то здесь может справиться даже школьник.
Вам понадобится
  • Компьютер с подключением к интернету
Инструкция
1
Зайдите на сайт сервиса PureCSSMenu. Здесь вы увидите визуальный редактор, с помощью которого быстро и легко сможете сделать меню для любого сайта.
2
Чтобы перейти на страницу, где выложены шаблоны меню, нажмите на кнопку «Templates», которая находится слева. Затем вам необходимо выбрать понравившейся шаблон и щелкнуть по нему. В окне «Preview» вы увидите реально работающее меню, которое создано с помощью таблиц каскадных стилей.
3
Просмотрите каждый из предложенных шаблонов, чтобы выбрать наиболее подходящий для вашего сайта. Если цвет и шрифт, понравившегося вам по стилю меню, не подходят к цветовой гамме сайта, то эти параметры вы можете поменять нажав на вкладку «Parametrs».
4
Измените цвет и шрифт с помощью HTML кода или выберете его из предлагаемой ресурсом палитры, щелкнув на понравившейся оттенок.
5
Теперь создайте структуру меню для своего сайта. Для этого нажмите кнопку «Items». В открывшейся вкладке вы увидите кнопку с большим плюсиком и надписью «Add Item». Нажмите на эту кнопку, и в конце меню будет добавлен новый пункт. Чтобы вставить новый пункт в середину меню, выделите вкладку после которой должно быть добавление и нажмите кнопку с надписью «Add Next Item».
6
Чтобы добавить вложенный пункт в выпадающее меню нажмите кнопку с надписью «Add Subitem», предварительно выделив тот пункт меню, который будет содержать новую вкладку. Если вы хотите удалить какой-то из пунктов, то выделите его и нажмите кнопку «Remove Item».
7
В области «Item Parameters» необходимо заполнить все поля для корректной работы нового меню. В поле «Text» впишите название пункта меню, в поле «Link» впишите адрес страницы, на которую будет происходить переход после нажатия этой кнопки. Чтобы выбрать каким способом должна открываться страница, в поле «Target» поставьте значение «_self» или «_blank». При первом варианте страница будет открываться в этом же окне, при выборе функции «_blank» - в новом.
8
Теперь вам нужно вставить код созданного меню в ваш сайт. Для этого нажмите на кнопку «Download», которая находится в правом нижнем углу, и выберите папку на своем компьютере, в которую будет сохранен архив purecssmenu-com.zip. После сохранения файла распакуйте этот архив и откройте файл purecssmenu.html, в котором содержится код вашего меню. Скопируйте этот код и вставьте в файл шаблона вашего сайта.

Совет 2: Как создать меню на сайте

Красивое, удобное и функциональное меню – залог популярности и привлекательности сайта для посетителей. Без понятного и стильного меню сайт не будет обладать достойной навигацией, интуитивно понятной даже тому человеку, который впервые посетил вашу страницу.
Инструкция
1
Откройте программу и просмотрите список стилей кнопок в нижнем левом углу окна. Выберите для себя подходящий стиль, кликнув на него левой кнопкой мыши. Скопируйте появившийся код в отдельный текстовый файл, а затем кликните на пункт Add Item, чтобы активировать кнопку.
2
Теперь займитесь ее настройками – в правой панели откройте вкладку Button и укажите желаемый шрифт для текста кнопки, его цвет и размер. Затем дайте ссылку в разделе Link на ту страницу, на которую ведет нажатие кнопки (например, index.php).
3
Если вы хотите, чтобы при наведении на кнопку курсора, появлялся всплывающий текст-подсказка, во вкладке Hint введите нужный текст для проявления. Во вкладке Icon укажите иконку, которая должна быть рядом с текстом; настройте выравнивание (например, по левому краю экрана) и снимите галочку во вкладке Stick to text.
4
После этого откройте раздел Button style и снимите галочку с пункта Auto size. Укажите фиксированные размеры ваших кнопок. После этого отредактируйте стиль меню – укажите цвет контура, и в разделе Misc отметьте желаемые эффекты (прозрачность, плавное проявление, тень, и так далее).
5
Повторяя все вышеуказанные действия, создавайте все остальные пункты меню, настраивая кнопки. Чтобы сделать на каждую кнопку дополнительное подменю, нажмите Add Subitem. Каждый созданный пункт и каждую созданную кнопку настройте аналогично первой.
6
После того, как меню – горизонтальное или вертикальное – создано, зайдите в меню программы и нажмите на пункт «Вставить в веб-страницу», отметив, что вы хотите только сгенерировать код. Укажите путь к папке menu images, в которой будут сохранены графические элементы меню в формате png.
7
Для того чтобы установить созданное меню на ваш сайт, скопируйте в корневой каталог папку с изображениями, а сохраненный в начале код установите на главную страницу.
Видео по теме
Источники:
  • как создать на сайте меню

Совет 3: Как оформить меню на сайте

Меню используется для облегчения навигации пользователю по разделам на сайте. Чтобы привлечь внимание посетителя, меню должно быть функциональным, удобным в использовании и при этом сочетаться с дизайном всего ресурса.
Инструкция
1
Перед созданием меню определитесь с его типом. Вы можете создать выпадающий горизонтальный или вертикальный блок, который будет показан пользователю при наведении на него курсором мышки. При выборе того или иного меню вы можете руководствоваться тем, насколько посетителям будет удобно его применять и как оно будет сочетаться с дизайном.
2
После выбора типа меню откройте ваш файл страницы при помощи любого текстового редактора, который вы используете для редактирования HTML. Перейдите к нужному участку кода, в который вы хотите вставить ваш элемент интерфейса.
3
После этого сделайте список опций, создав блок <div> и сделав нумерованный список с присвоенными к нему id. Например:

<div id = "panel">
<ul><li><a href = "адрес">Ссылка 1</a></li>
<li><a href = "адрес">Ссылка 2</a></li>
<li><a href = "адрес" id = “open”>Ссылка 3</a></li></ul></div>

В данном примере был создан маркированный список из трех элементов, который помещен в слой div с присвоенным идентификатором panel.
4
Перейдите в блок <style> раздела <head></head> вашей страницы и создайте соответствующую меню каскадную таблицу стилей. Если вы хотите создать горизонтальное меню, для полученного списка вы можете включить атрибут inline:

<head><style type = "text/css">
#panel ul li { display: inline; }
5
Чтобы создать горизонтальную линию по всей длине страницы вы можете воспользоваться следующим кодом:

#panel ul { margin-left: 0; padding: 2px 0; }
6
Затем вы можете сделать визуальное разделение на прямоугольники:

#panel ul li a { margin-left: 3px; border: 1px; padding: 2px 3px; background: blue; }

Данный код задает отступы текста от элементов границы через атрибуты margin-left и padding, а также присваивает фоновый цвет для каждого из элементов списка. В данном примере цвет указан blue, однако изменить вы его можете по собственному усмотрению.
7
Чтобы указать на пункт текущей страницы, которая выбрана во вкладке, задайте классу open соответствующие параметры:

#menu ul li a#open { background: red; border-bottom: 1px; }
</style>
<!-- Дальнейший код -->
</head>

Текущая страница, выбранная в панели, теперь будет отображаться красным цветом.
8
Сохраните изменения в файле и проверьте работоспособность написанного кода, открыв вашу страницу через браузер. Чтобы задать дополнительные параметры отображения, вы всегда можете добавить код CSS или HTML для усовершенствования внешнего вида объекта.
Видео по теме

Совет 4: Как сделать меню навигации

Чтобы посетители не заблудились на сайте и с любой страницы могли обратиться к нужному разделу ресурса, необходимо сделать меню навигации. Указывающие элементы должны быть размещены на веб-страницах таким образом, чтобы они не мешали чтению текста и в то же время их можно было без труда найти на сайте. В нужные части ресурса посетители могут попадать при клике по соответствующим словах или изображениям. Для снабжения ресурса таким меню достаточно вписать несложный код в нужные части сайта.
Вам понадобится
  • - наличие на собственном сайте нескольких страниц или разделов
  • - несколько маленьких иконок по теме сайта
  • - знать, как заливать картинки на сайт
Инструкция
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
Чтобы поместить на сайт такое графическое меню, замените в коде ссылки, пути к изображениям и названия разделов ресурса на свои собственные.
Видео по теме
Источники:
  • ihtut.net
Видео по теме
Источники:
  • Блог о создании сайтов
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500