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

Техника создания Динамично эластичного типа макета для страниц сайта.
Верхняя часть страницы сайта - шапка сайта.

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

Содержание материала по шапке сайта.
all systems
1. Основа, контейнер шапки сайта,
2. Скриншоты контейнера шапки,
3. Контейнер содержимого шапки,
4. Вставка графического логотипа,
5. Скриншот шапки с графическм логотипом,
6. Вставка текстового логотипа,
7. Скриншот шапки с текстовым логотипом,
8. Вставка других элементов,
9. Скриншоты фрагментов шапки с другими элементами.
1 . Основа, контейнер шапки сайта
all systems
CSS и HTML контейнера и изображения шапки страницы сайта.
2 . Скриншоты контейнера шапки
all systems
Скриншоты 1 и 2. Скриншоты контейнера шапки с изображением шапки, на мониторах с различным соотношением сторон экрана монитора. Скриншот 1 - широкоформатный 19:6, cкриншот 2 - монитор с классическим соотношеием сторон экрана 4:3. Далее в виде скриншотов будет показываться только сама шапка, верх монитора с шапкой. Так как пропорции сторон экранов мониторов ни коим образом не влияют на внешний вид шапки страницы сайта.
2 . 1 . Скриншот 1
2 . 2 . Скриншот 2
3 . Контейнер содержимого шапки
all systems
Далее в html шапки необходимо внести контейнер содержимого шапки. Относительно которого и будут располагаться все элементы шапки (форма входа, форма системного поиска, форма поиска по модулю, ссылки входа - выхода с сайта как пользователя, приветствия, даты, логотип и другие элементы).
CSS и HTML шапки и контейнера содержимого.
4 . Вставка графического логотипа
all systems
Далее в шапку вставим логотип, изображение логотипа png формата, изображение с прозрачным фоном.
Расположим его слева по средине высоты шапки.
CSS и HTML шапки с логотипом.
5 . Скриншот шапки с графическим логотипом
all systems
Скриншот 3. Скриншот шапки с размещённым логотипом. Изображение логотипа, в соответствии с классом lolgo размещено расстоянии 6em от верхнего края шапки (top: 6em;) и на расстоянии 0.6em от левого края (left: 0.6em;).
5 . 1 . Скриншот 3
6 . Вставка текстового логотипа
all systems
Далее в шапку вставим текстовый логотип - Chevrolet inside.
Расположим его слева после графического логотипа но прижатым к верхнему краю шапки.
CSS и HTML шапки с графическим и текстовым логотипом логотипом.
7 . Скриншот шапки с текстовым логотипом
all systems
Скриншот 4. Скриншот шапки с размещённым текстовым логотипом. Логотип, в соответствии с классом lolgotxt размещен расстоянии -0.68em от верхнего края шапки (top: -0.68em;) и на расстоянии 20% от левого края (left: 20%;).
7 . 1 . Скриншот 4
8 . Вставка других элементов
only for ucoz
Далее в шапку:
Вставим вывод даты, ссылку на RRS канал, расположим их слева сверху.
Вставим форму системного поиска, расположим её справа сверху
Втавим строку ссылок входа, выхода, приветствия и перехода на персональную страницу пользователя, расположим их слева снизу.
CSS и HTML шапки со строками даты, ссылки на RRS канал, ссылок входа, выхода, приветствия и перехода на персональную страницу пользователя.


При копировании и дальнейшем использовании на сайте в качестве фрагмента шаблона, исходнго текста приведённого в примере, все условные операторы и системные коды:

<?if($RSS_LINК$)?>, <?if($SЕАRCН_FОRМ$)?>, <?if($USЕR_LОGGЕD_IN$)?>, <?else?>, <?endif?>, $WDАY$, $DАТЕ$, $RSS_LINК$, $SЕАRСН_FОRМ$, $PЕRSОNАL_PАGЕ_LINК$, $USЕRNАМЕ$, $USЕR_GRОUP$, $LОGОUТ_LINК$, $RЕGISТЕR_LINК$, $LОGIN_LINК$

следует заменить на них же, скопированных из списков кодов, условных операторов в Панели управления сайта.
Скопированные отсюда работать не будут.
9 . Скриншоты фрагментов шапки с другими элементами
only for ucoz
Скриншот 5 и 6. Скриншот шапки 5, с размещёнными строками даты, ссылки на RRS канал, ссылок входа, выхода, приветствия и перехода на персональную страницу пользователя. Скриншот шапки 6, с размещённой формой системного поиска.
9 . 1 . Скриншот 5
9 . 2 . Скриншот 6
Связанные материалы
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 ─ Яндекс.Метрика