Ver.mod. 03.12.2013
C чего начинается Родина, с картинки в твоём букваре ...

Техника создания Динамично эластичного типа макета для страниц сайта.
Общий фиксированный фон страницы сайта во весь экран обозревателя.

Техника создания Общего фиксированного фона страницы сайта, из целого изображения во весь экран, не имеет ни чего общего со стандартным для HTML методом размещения фонового изображения в элементе страницы сайта. Особенность в том, что фон страницы сайта является отдельным самостоятельным элементом-контейнером не связанным с остальными элементами страницы - дизайна. Фактически фон состоит из изображения вписанного в габариты окна обозревателя. Свойства общего фона как элемента заключаются в его абсолютно - фиксированном позицировании слоёв тегов div, при минимальном значении тега z-index, служащих оболочкой для изображения используемого в качестве фона, и максимальных значений размеров изображения как по высоте так и по ширине.

Содержание материала по общему фону страницы
1. Исходный текст фиксированного фона страницы,
2. Рекомендации по подбору изображения,
3. Ньюансы и скриншоты применения изображений,
3.1 Скриншоты мониторов с пропорциями сторон 4:3,
3.2 Скриншоты мониторов с пропорциями сторон 19:6,
3.3 Скриншоты мониторов с пропорциями сторон 19:6 и 4:3,
3.4 Скриншоты мониторов с пропорциями сторон 19:6 и 4:3 с нижним позицированием,
3.5 Скриншоты мониторов с пропорциями сторон 19:6 и 4:3 с верхним позицированием.
1 . 1 . Исходный текст фиксированного фона страницы
all systems
CSS и HTML общего фиксированного фона страницы сайта
1 . 2 . Полный исходный текст html фиксированного фона страницы
all systems
HTML общего фиксированного фона страницы сайта, как первый элемент страницы, устанавливается в шаблон непосредственно после тега <body>.
Следует заметить, что к элементу фиксированного фона, так же имеет отношение следующий элемент страницы. Элемент-контейнер для всего остального шаблона страницы, образованным слоем с абсолютным позицированнием и значением тега z-index, большим по значению чем у элемента фона страницы. Следующим непосредственно за html кодом общего фиксированного фона страницы сайта. Конец же в виде закрывающего тега </div> прописывается непосредствено перед закрывающим тегом </body>.
CSS и HTML фона и контейнера шаблона.
2 . Рекомендации по подбору изображения используемому в качастве фона
all systems
Формат изображения не имеет значения и может быть любым (jpg, png, gif).
Следует исходить из того что минимальные размеры изображения должны быть как минимум 1024 х 768 пикселей. То есть с оотношением сторон равным пропроции 4:3. Размер по горизонтали (1024px) может иметь и иные, большие по значению величины (1200px, 1600px, 1900px и прочие). Однако не следует применять изображения с размерами - разрешениями более 2000px. Изображение с разрешением 2000px как правило в 4 раза "тяжелее" такого же изображения с разрешением 1024px.
Для уменьшения объёма изображения так же следует изменить глубину цветовой гаммы изображения на 256 цветов (8 бит). Это как правило позволяет уменьшить объём файла в несколько раз (2 - 4 раза). Однако ухудшения качества цвета бояться не следует, так как по большому счёту общий фон сайта как правило по большей части площади перекрывается контентом сайта и не виден.
3 . Ньюансы применения изображений для общего фона
all systems
1. Скриншоты мониторов с пропорциями сторон 4:3,
2. Скриншоты мониторов с пропорциями сторон 19:6,
3. Скриншоты мониторов с пропорциями сторон 19:6 и 4:3,
4. Скриншоты мониторов с пропорциями сторон 19:6 и 4:3 с нижним позицированием,
5. Скриншоты мониторов с пропорциями сторон 19:6 и 4:3 с верхним позицированием.
3 . 1 . Скриншоты мониторов с пропорциями сторон 4:3
all systems
Скриншоты 1 и 2. Представлены скриншот экрана монитора, окна обозревателя, страницы с изображением автомобиля и изображения абстрактной графики в качестве общего фона страницы сайта. Скриншоты экранов мониторов с классическим соотношением сторон экрана монитора - 4:3.
3 . 1 . 1 . Скриншот 1
3 . 1 . 2 . Скриншот 2
3 . 2 . Скриншоты мониторов с пропорциями сторон 19:6
all systems
Скриншоты 3 и 4. Скриншоты тех же страниц на экране монитора со соотношением сторон экрана монитора - 16:9. На скриншотах видно что пропорции соотношения сторон изображений изменились. Пропорциональность изображений изменились в соответствии с пропорциями сторон широкоформатного монитора.
На левом скриншоте изображение автомобиля непропорционально исказилось, это резко бросается в глаза и может быть неприемлимо.
На скриншоте справа искажения так же присутствуют. Но так как изображение носит характер абстрактного рисунка, изменение пропорций не бросается в глаза и в данном случае вопрос искажений не критичен.
3 . 2 . 1 . Скриншот 3
3 . 2 . 2 . Скриншот 4
3 . 3 . Скриншоты мониторов с пропорциями сторон 19:6 и 4:3
all systems
Скриншоты 5 и 6. Скриншоы, широкоформатного монитора, страницы с фоном, с изображением автомобиля с пропорциями сторон 16:9 и классического монитора с пропорциями 4:3 той же страницы. Левый скриншот характерен для вёрстки только под широкоформатные мониторы, что при отображении страницы на классических соотношениях сторон монитора приводит к искажению отображения автомобиля. Во избежание искажений, отображённых на правом скриншоте, широкоформатное изображение следует использовать с другими стилями.
3 . 3 . 1 . Скриншот 5
3 . 3 . 2 . Скриншот 6
3 . 4 . Скриншоты мониторов с пропорциями сторон 19:6 и 4:3
all systems
Скриншоты 7 и 8. Скриншоты страницы на широкоформатном и классическом мониторе с изменёнными стилями широкоформатного изображения фона. Изображение фона позиционируется по нижнему краю монитора без каких либо искажений. Так же возможно позицирование широкоформатного изображения и по верхней стороне экрана.
CSS для широкоформатного изображения с нижним позицированием.
.fon {position: absolute; bottom: 0px; left: 0px; width: 100%;}
3 . 4 . 1 . Скриншот 7
3 . 4 . 2 . Скриншот 8
3 . 5 . Скриншоты мониторов с пропорциями сторон 19:6 и 4:3
all systems
Скриншоты 9 и 10. Скриншоты страницы на широкоформатном и классическом мониторе с изменёнными стилями широкоформатного изображения фона. Изображение фона позиционируется по верхнему краю монитора без каких либо искажений.
CSS для широкоформатного изображения с верхним позицированием.
.fon {width: 100%;}
3 . 5 . 1 . Скриншот 9
3 . 5 . 2 . Скриншот 10
Связанные материалы
1. Скрипт масштабирования шрифтов
2. Шапка, верхняя часть сайта
3. Формы поиска по сайту
4. Форма входа на сайт
5. Форма обратной связи
6. Flash проигрыватель формата FLV
7. Flash проигрыватель формата MP3
8. Представление PDF формата
9. Динамично эластичный тип макета
olympic
Динамично эластичный тип макета ─ dynamically expandable elastic / double adaptive dynamically expandable elastic.
It is made priority in Russia DEE ― DAD-EE ™, Profile SV_team_ESQ
Esq team Copyright © 27.04.2009 ─ Яндекс.Метрика