HTML-верстка страницы сайта по PSD файлу

Сайт статической ширины (под минимальную ширину окна браузера пользователя 1024px).

При уменьшении ширины окна - появляется линейка горизонтальной прокрутки.

При увеличении ширины окна - сайт размещается по центру окна, появляющееся место заполняется изображённым на PSD фоном

По высоте страница должна тянуться, например, при добавлении дополнительных пунктов меню, добавлении информации в блок [ Контакты ], при добавлении фото и текста в основную контентную часть страницы.

Кодировка - Windows-1251

Страница должна одинаково отображаться в основных броузерах (MSIE 6, 7, 8; Opera; Firefox, Chrome и др.)

Общий вид страницы сайта - в приложении. Предоставляется PSD-файл.

Требования к верстке страницы:

Хедэр:

Выполнить отдельными картинками: В левой части прямоугольник с надписью [ Гостиница "Николаев" ], в правой - фото с холлом гостиницы, в нижней части - прямоугольник с надписью [ Ценим традиции ]

Панель переключения языковых версий сайты: Надписи [ Eng ] [ Рус ] можно выполнить как текстом так и картинкой - на ваше усмотрение. При наведении мышью на кнопку или на соответствующей кнопке странице, эта кнопка (активная) - подчёркнута.

Колонка Меню навигации и Контакты:

В левой части страницы располагается колонка, где размещается блок меню навигации по сайту и блок [ Контакты ].

Полоса с надписью [ Меню ]: надпись [ Меню ] можно выполнить как текстом так и картинкой - на ваше усмотрение.

Кнопки с пунктами меню можно выполнить как текстом так и картинкой - на ваше усмотрение.

При наведении мышью на кнопку или на соответствующей кнопке странице, эта кнопка (активная) - подчёркнута.

Должно быть возможно добавление дополнительных кнопок меню без негативных последствий для внешнего вида страницы.

Блок [ Контакты ]: надпись [ Контакты ] и другая текстовая информация должна быть выполнена текстом.

[email protected] - гиперссылкой в виде mailto в активном и неактивном виде

www: nikolaev-hotel.com - гиперссылкой в виде a href

Вид указанных выше гиперссылок в режимах onMouseOver/onMouseOut устанавливается в PSD-файле в группе слоёв контакты->Group 4->активные

Контентная часть страницы:

Фотки с выравниванием "слева" или "справа" относительно текста, предусмотреть случай, когда текст отсутствует - в таком случае картинка должна прижиматься вправо или влево в соответствии с PSD.

В тексте контентной части страницы возможно наличие гиперссылок.

Вид гиперссылок при наведённой мыши и без неё (в режимах onMouseOver/onMouseOut) устанавливается в PSD-файле в группе слоёв контент->Активные/контент->Пасивные

Вид посещённых гиперссылок устанавливается в PSD-файле в группе слоёв контент->Посещеные

В правом верхнем углу нижней правой картинки (уровнем ниже картинки) размещён силует цветка. Этот цветок выполнить в отдельном слое с абсолютным позиционированием, чтоб была возможность его и его копии свободно перемещать по странице в нижнем уровне (под другими элементами)

Заголовок формы [ Бронирование номеров ] выполнить текстом.

В нижней части страницы строка с дополнительным меню. Пункты меню выполнены текстом. Активный пункт меню, т.е. при наведении мыши или на соответствующей странице - подчёркнут.

Общие требования:

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

Вся графическая часть (функциональная) на странице должна иметь подписи alt, name

Графическая часть должна быть оптимизирована для быстрой загрузки на медленных интернет-соединениях.

Использовать сввойства [ height ] и [ width ] в тэгах IMG - это позволит браузеру сразу определить сколько места потребуется под изображение, что приведет к тому, что браузер сможет загружать текст вокруг графики, без ожидания полной загрузки изображения.

Обеспечить функциональность сайта в случае, если у пользователя отключены Java-script, Java, ActiveX.

Для контентной графики создавать отдельный каталог, таким образом отделять контентные картинки от картинок, составляющих только дизайн сайта. Под контентными картинками подразумеваются те, которые могут изменяться при изменении содержимого сайта из CMS (Content Management System).

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

В именах файлов не использовать символов, которые могут быть восприняты различным ПО неоднозначно, например, символы одиночной и двойной кавычек (' и "), пробел и другие подобные.