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

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

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

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