Веб-дизайн и поисковая оптимизация

Создание меню для сайта

• Создание меню для сайта
• Создание выпадающего меню
• Пример горизонтального меню с выпадающим списком
• Создание простого анимированного меню
• Создание наклонного выпадающего меню

При создании статических сайтов часто возникает проблема с обновлением меню. При внесении каких-либо изменений приходится переписывать все страницы и соответственно перезагружать их на сервере. При количестве страниц сайта более десяти лучше оформить меню или другие часто меняющиеся фрагменты в виде вставок HTML-кода. В этом случае достаточно изменить содержание вставки и изменения появятся на всех страницах сайта.

Сделать вставку можно несколькими способами. Варианты с формой РНР или SSI рассматривать не будем, так как это серверные технологии и не все хостинги, особенно бесплатные, их поддерживают.

Самый простой способ создания HTML-вставки - использование тега <iframe> ...</iframe>. Это вариант обычного фрейма, но для него не требуется создавать фреймовую структуру страницы, а достаточно указать размеры области, в которой будет выводится содержимое другой страницы (HTML-файла). Именно так построена страница, которую вы сейчас просматриваете: левое и правое меню оформлены в виде отдельных <iframe> ...</iframe> (для просмотра исходного кода страницы нажмите CTRL+U в браузере).

Для корректной работы такой вставки (окна) можно использовать следующие атрибуты этого тега:

• align - выравнивание;
• frameborder - отображение границ: 0 или 1;
• height - высота окна;
• width - ширина окна;
• marginheight - верхний и нижний отступ документа в окне;
• marginwidth - левый и правый отступ документа в окне;
• name - имя окна;
• scrolling - прокрутка: yes - прокрутка разрешена, no - прокрутка запрещена, auto - полосы прокрутки выводятся только тогда, когда размеры документа превышают размеры окна IFRAME (рекомендуется);
• src - источник, адрес вставляемого документа (в нашем случае, HTML-файл меню).

Естественно, никто не мешает вам использовать правила CSS для оформления IFRAME. При задании размеров окна (атрибуты height и width) лучше задавать их с запасом, что исключит появление полос прокрутки, которые уменьшают окно и делают неудобным просмотр страницы.

Страница, которую вы будете вставлять с помощью IFRAME, не имеет каких либо особенностей и может содержать текст, рисунки, таблицы, гиперссылки и др. элементы. Следует только учесть, что для ссылок во вставке необходимо указывать окно назначения target="_top", если вы хотите открывать их в основном окне.

В некоторых случаях для создания небольших текстовых вставок вместо IFRAME удобнее использовать конструкцию JavaScript document.write(" "). Например, если у вас на всех страницах сайта имеется строчка со ссылкой, текст которой часто меняется, а адрес ссылки остается постоянным (например, новости или расписание мероприятий), то вы размещаете в нужном месте ссылку следующего вида:
<a href="news.html"><script language="javascript" type="text/javascript" src="news.js" > </script></a>.

Сам текст новости или мероприятия задаете в отдельном файле news.js:
// Java Document
document.write("Текст новости");

Теперь вам достаточно изменить содержание файла news.js, и этот текст будет отражаться на всех страницах, где есть ссылка.

Другой пример - рассмотренная ранее бегущая строка на сайте. Если её текст повторяется на нескольких страницах сайта, то его также удобно оформить в виде вставки, которую можно оперативно менять. Как и в предыдущем случае, в то место страницы, где должна быть бегущая строка, вставляете JavaScript:
<marquee><script language="javascript" type="text/javascript" src="stroka.js" > </script></marquee>,
а сам текст бегущей строки выносите в отдельный файлик stroka.js, который помещаете в ту же папку, что и страницы с бегущей строкой. Ниже приводится вариант такого файла с заданием цвета и размера шрифта выводимого текста:
// Java Document
document.write( "<font color=#cc3333><font size=4>Текст бегущей строки</font></font>");

Как видим, в виде вставок можно оформлять любые элементы HTML-кода, что позволяет значительно упростить редактирование статических сайтов, независимо от количества содержащихся в них страниц.

6.11.2011 г.

Ещё статьи по теме "Полезные мелочи веб-дизайна":
Фотогалерея jQuery со слайд-шоу
Создание иконки для сайта
Юмор и раскрутка сайта
Изображения для сайта - размещение, эффекты, прозрачность
Создание выпадающего меню
Создание формы обратной связи на сайте
Фотогалерея для интернет магазина
Создание бегущей строки на сайте
Создание фона для сайта
Вывод текущей даты на сайте
Создание "схемы проезда" на сайте
Ключевые слова и продвижение сайта
Веб-дизайн, поисковая оптимизация и продвижение сайтов в интернете
Сжатие фотографий для интернета и электронной почты