Примеры верстки «шапок» для сайтов. Занимаясь разработкой шапок, нам часто приходиться верстать их для наших клиентов, т. Некоторые заказчики верстают «шапочки» сами, но многие из них опять возвращаются к нам. В связи с этим хочу показать основные моменты при верстке «шапок» для сайтов. Конечно же, верстка «шапок» ничем не отличается от верстки сайта или верстки какого- либо другого его участка. Давайте посмотрим несколько примеров.
- . Как сделать шапку для сайта фиксированной ширины? Делаем шапку сайта из готового изображения. Создаем собствнную. Модульная сетка. Фиксированный и резиновый дизайн (1) - Duration: 17:34. jnetclass 6,545 views. Как создать и установить флеш часы на сайт. - Duration: 7:40.
- Пример 2 – Шапка для сайта с «плавающими» размерами ( резиновая). Вполне можно было бы сделать резиновую шапку на весь монитор с шириной.
- Как сделать flash шапку у сайта? Ринат. Версия Drupal. Было бы хорошо, если Вы написали, например, в файле page.tpl.php от Garland куда (в каком месте) и какие команды (тэги) прописать надо, чтоб в шапку вставить флэш. и чтоб эта флэш-шапка 'резиновой' стала..
Пример 1 – Шапка для сайта со статическими размерамишапка для одного бизнес сайта, разработанная нами. Как правило, такого рода шапки заказывают для сайтов со статическими размерами, которые не меняются при изменении ширины окна. Верстка таких шапок самая простая и сводится к простой вставке фоновой картинки в блок шапки. Ширина и высота нашей шапочки 9. HTML- код< div id="header"> < /div> < !- - Блок с шапкой - -> CSS- код#header {background: #a. В html коде мы вставили блок нашей шапки и дали ему идентификатор header, а в CSS указали этому идентификатору параметры фона, ширины и высоты.
Резиновый flash-баннер на всю ширину. Занимаясь во flash мне необходимо было сделать, что бы баннер отображался на всю 100% ширину сайта, не зависимо от размера монитора пользователей..
Из статьи « Как сделать flash анимацию для сайта – руководство для чайников» вы узнали, что с помощью программы Sothink SWF Easy сделать.
Кстати, помимо фонового рисунка я указал еще и цвет фона #a. Параметр no- repeat говорит о том, что фон не будет повторяться. Пример 2 – Шапка для сайта с «плавающими» размерами (резиновая). Вариант 1. Шапочка находится в нашем портфолио. Верстка шапок для сайтов с «плавающими размерами» или как их называют – «резиновые» может быть нескольких видов.
Это зависит от самой шапки. На примере вы видите шапочку, которая подходит под любое разрешение на данный момент, так как ее максимальная ширина составляет 1. Создание такой шапки должно учитывать все основные разрешения монитора и на любом из них должна быть законченная смысловая картинка. Верстка же практически не отличается от предыдущего варианта.
HTML- код< div id="header"> < /div> < !- - Блок с шапкой - -> CSS- код#header {background: #a. Как вы видите, мы добавили к свойству фона параметр center, который центрирует наше фоновое изображение. Ширину указывать нет необходимости, так как шапка под любую ширину окна браузера, но не более 1. При увеличении или уменьшении окна браузера, шапочка будет показана во всю ширину окна.
Так как концы шапки, не попадающие в область окна браузера, обрезаются, то вид такой шапки на разных разрешениях должен быть хорошо продуман дизайнером. Пример 3 – Шапка для сайта с «плавающими» размерами (резиновая). Вариант 2. Шапка для сайта 7doors. Ну и напоследок вариант посложнее. Для верстки такого рода «шапки» под сайт с плавающими размерами необходимо выделить участки, которые будут повторяться (фон), а так же участки, которые будут менять свое положения на фоне в зависимости от разрешения вашего браузера. На картинке вы видите 5 основных блоков — нарезок.
Все эти блоки будут размещены на нашем повторяющемся фоне стены и паркета. Фон стены и паркета. HTML- код< div id="header"> < !- - Блок с шапкой - -> < div id="header- l"> < !- - Крайняя левая дверь - -> < div id="header- c"> < !- - Центральная часть с лого - -> < div id="text"> < /div> < !- - Надпись межкомнатные двери - -> < /div> < /div> < div id="header- r. Первая правая дверь - -> < div id="header- r.
Вторая правая дверь - -> < /div> < /div> CSS- код/** Блок header задает фон всей шапки повторяя картинку №0 **/#header {background: #cc. Картинка №1**/width: 6. Примерная ширина в процентах двух блоков №1 и №2**/float: left; /** Притягивание блоков с картинками №3 и №4**/}#header- c {background: url(img/header- c.
Картинка №2**/margin- left: 1. Отступ слева в размере Картинки №1**/}/** header- r. Картинка №3**/width: 3. Притягивание к правой части шапки**/}#header- r.
Картинка №4**/}/** Значение высоты блоков №1,2,3,4**/#header, #header- l, #header- c, #header- r. Позиционирование надписи «межкомнатные двери»**/#text {background: url(img/text. Данный вариант будет смотреться на всех разрешениях от 8.
В данной верстке пришлось использовать прозрачный фон в формате . Так как IE6 не понимает прозрачный . Png. Fix. На этом все. Представленных вариантов должно хватить, чтобы сверстать любую: smile: шапочку.
Если что- то упустил, то в комментариях дополню.