Друзья всем привет.

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

1. Для начала советую создать несколько фотографий для фона с более приемлемым разрешением 1330 в ширину и 760 в высоту и сохранить в формате GIF (save for web). Сделать это можно в адоб фотошопе. Сохраним картинки в заранее созданную нам папку «ФОТО» в проекте сайта.

2. Вторым шагом создадим фон для менюшки сайта. Фон меню создадим также в фотошопе с размерами 1330 в ширану и 62 в высоту, делаем заливку черным цветом, далее делаем фон прозрачным на 60% (Opacity) в и сохранить в формате PNG (save as). Сохраним картнку в папку фон для меню в папке проекта сайта. Такое меню сайта будет выглядеть стильным. Когда у нас готовы фоны переходим к следующему шагу 3.

3. Теперь создаем новый проект в WebsiteX5 и выбраем любой шаблон с горизонтальным меню из раздела Общие настройки/выбор шаблона.
4. Переходим в раздел слева Общие настройки, а там уже Стиль шаблона а потом выбираем Структура основного шаблона. Все манипуляции с структурой сайта будут проиходить именно здесь моэтому остаемся на этом «ПОЛЕ» до конца настроек структуры сайта.

5. Теперь будем настраивать структуру основного шаблона. Начнем с настройки меню. В разделе ТИП МЕНЮ Выбраем горизонтальное меню над шапкой. В РАЗДЕЛЕ СТРАНЦЫ выбираем меню. Установим фон меню выбрав маленбкую картиночку папки в ФАЙЛ ИЗОБРАЖЕНИЯ и там ищем нашу папку фон меню и выбираем ранее созданный нами фон для меню. Настроим ПОЛОЖЕНИЕ ставим повторение по горизонтали. Установим высоту на 62 (так как у нас фон меню высотой 62 пискеселей). ПОЛЯ – 5;5;20;5. ВЫРАВНИВАНИЕ - слева. С настройками МЕНЮ мы закончили, теперь в этом же разделе переходим к настройке ШАПКИ.

6. В РАЗДЕЛЕ СТРАНИЦЫ выбираем ШАПКА (хедер) страницы. Удаляем фон шапки в ФАЙЛ ИЗОБРАЖЕНИЯ (достаточно клкнуть на этот пункт и нажать на делейт на клаве). Настроим размеры: Ширина 1330 и высота 20. После этого выбора наша странчка будет шириной 1330 пикс. С настройкой шапки мы закончили теперь перейдем к настройке контента страницы.

7. Контент страницы это то место где будет отражаться материал с сайта, это тексты, картинки и т.п. Фон контента также будет без фотографии поэтому здесь также как и в предыдущем шаге удаляем фон кликнув на ФАЙЛ ИЗОБРАЖЕНИЕ и кнопку делейт на клаве. Теперь настроим высоту контента. Для этого в МИНИМАЛЬНАЯ ВЫСОТА ставим 500 или 700 пикселей . СВОЙСТВА КОНТЕНТА – 0;0;0;0;. С настройками контента закончили. Теперь перейдем к разделу настройки структуры сайта, это ПОДВАЛ (футер) страницы.

8. Размеры подвала ставим любые в зависимости от того какой хотите его видеть, в моем случае его не будет, поэтому ставим любой размер, я поставил 260, а также удаляем фон подвала, как и в предыдущих шагах мы это делали. С настройками подвала страницы мы завершили, теперь перейдем к последнему в этом разделе (СТРУКТУРА ОСНОВНОГО ШАБЛОНА) это ФОН СТРАНИЦЫ, для этого в РАЗДЕЛЕ СТРАНИЦЫ выберем ФОН. Картинку для фона страницы мы выберем одну из тех которую мы создал в фотошопе. (обратите внимание что картинка установленная здесь будет видна только на странице где будут отражаться новости из БЛОГА), и ставим галочку ФИКСИРОВАННЫЙ ФОН. Положение картинки фона БЕЗ ПОВТОРЕНИЯ, а выравнивание сверху-слева. ПОЛЯ 15;15;0;15;. Все с настройками в этом разделе мы завершили.

9. Теперь будем настраивать стиль пунктов меню. Для это перейдем в Общие настройки, далее Главное меню, Общие. Для начала настраиваем ширину, поля и шрифт. Ширину ставим на 135. Поля – по горизонтали – 5 , по вертикали -5. Шрифт 12. Здесь же на верхней правой панели программы переходим в ПУНКТЫ МЕНЮ. В пункте меню у нас 1)пункт меню, 2) элемент при наведении курсора мыши, 3) элемент для текущей страницы. Начнем с 1) пункта меню – цвет фона – прозрачный, цвет текста – белый. 2) Эелемент при наведении курсора – цвет фона – цвет текста – красный. 3) Элемент для текщей страницы – цфет фона – прозрачный, цвет текста – красный, стиль шрифта – полужирный.Здесь все. Теперь перейдем к разделу где будем настраивать фон каждой страницы по отдельности.

10. В левой части программы Переходим в СОЗДАНИЕ СТРАНИЦЫ. По умолчанию у нас 4 страниц. Создаем сколько нам нужно и переименовываем каждую. После чего будем производить одинаковые действия с каждой страницей. Начнем. И так выбираем первую страницу из списка, в правой части программы выбираем кнопочку СВОЙСТВА, открывается страница настройки ОБЩИЕ, но мы выбираем ГРАФИКА (в правой верхней части). Ставим галочку на РАЗРЕШИТЬ СВОИ НАСТРОЙКИ, далее ФАЙЛ ИЗОБРАЖЕНИЯ выбираем картинку из папки фоны для сайта; ПОЛОЖЕНИЕ ставим по ШИРИНЕ ОКНА; ВЫРАВНИВАНИЕ – 1-Сверху слева; Ставим галочку на ФИКСИРВАННЫЙ ФОН и нажимаем на ОК в зеленом кружочке. На этом все, такие же действия проделываем с каждой страницей.