Html резиновая шапка. Шапка страницы
Если основой макета Вашего сайта является «резиновая» таблица , то иногда возникает необходимость создать шапку сайта так, чтобы при изменении ширины окна браузера и при разных разрешениях монитора свободное место заполнялось узором. Технологии создания резинового сайта читайте в нашей статье Как создать резиновый сайт. Технологии создания бесшовного узора читайте в нашей статье Как создать бесшовный узор для фона сайта.
В этой статье мы рассматриваем технологию создания «резиновой» шапки сайта .
Мы будем создавать web-страницу, как показано на рисунке 1. Также Вы можете просмотреть ее по этой ссылке . Изменяйте ширину браузера и понаблюдайте, как работает «резиновая» шапка сайта .
Рисунок 1
Шапка сайта создана из изображения, показанного на рисунке 2.
Рисунок 2
Нарезка изображений для создания «резиновой» шапки1. Откройте в Photoshop файл shapka.jpg . .
2. Установите направляющие как на рисунке 3, «вытянув» их из линейки файла. Если линейки не отображаются, выполните команду View - Rules (Вид - Линейки) .
Рисунок 3
3. Включите функцию Snap в меню View (Вид) .
4. Инструментом прямоугольного выделения выделите часть изображения до первой направляющей (рис. 4). При выделении пунктирная линия выделения должна «прилипать» к направляющей благодаря включенной функции Snap . Это обеспечивает точность выделения при нарезке изображения.
Рисунок 4
5. Из выделенной части создайте новый файл, сохраните под именем shapka_01.jpg. Ниже приведена последовательность команд для создания нового файла из выделенной зоны:
- Edit - Copy (Правка - Копировать);
- File - New (Файл - Новый), нажать OK;
- Edit - Paste (Правка - Вставить);
- Layer - Flatten Image (Слой - Соединить слои):
- File - Save As… (Файл - Сохранить как…), задать имя файла shapka_1.jpg.
Результат на рис. 5.
Рисунок 5
6. Аналогичным образом инструментом прямоугольного выделения выделите часть изображения между направляющими (рис. 6).
Рисунок 6
7. Из выделенной части создайте новый файл, сохраните под именем shapka_2.jpg . Результат на рисунке 7.
Рисунок 7
8. Сделаем из файла shapka_2.jpg повторяющийся узор. Для этого сначала увеличьте холст изображения вправо ровно в два раза больше. Для этого выполните команду Image-Image Size… (Изображение-Размер холста…) и увеличьте размер по ширине в два раза (у меня этот размер равен 65х2=130 пикселей), анкор поставьте в левый средний квадрат, как на рисунке 8. Результат на рисунке 9.
Рисунок 8
Рисунок 9
9. Выделите цветную часть изображения. Скопируйте этот фрагмент командой Edit-Copy (Редактировать-Копировать) , а затем вставьте Edit-Paste (Редактировать-Вставить) .
10. Откройте палитру слоев Window-Layers (Окно-Слои) . В палитре должно быть два слоя, как на рис. 10.
Рисунок 10
11. Инструментом перемещения сдвиньте верхний слой и установите, как показано на рисунке 11.
Рисунок 11
12. Теперь верхний слой надо развернуть по горизонтали. Для этого выполните команду Edit-Transform-Flip Horizontal (Редактировать-Трансформация-Развернуть по горизонтали) . Результат на рисунке 12.
Рисунок 12
13. Склейте все слои командой Layer-Flatten Image (Слой-Выполнить сведение) . В результате в палитре слоев у Вас должен снова образоваться один слой (рис. 13).
Рисунок 13
14. Сохраните файл. Изображения для «резиновой» шапки готовы.
16. Для создания «резиновой» таблицы , нам необходимо знать размеры изображения shapka_1.jpg . Откройте в Photoshop файл shapka_1.jpg . Выполните команду Image - Image Size (Изображение - Размер изображения) . Установите параметры, как на рисунке 14.
Рисунок 14
17. Код страницы для «резиновой» шапки приведен на рисунке 15.
Рисунок 15
18. Ячейка с фоном shapka_2.jpg будет «резиновой» , т.к. в коде не описан параметр ширины ячейки width и она будет растягиваться в зависимости от свободного места экрана. Обратите внимание, что для первой ячейки мы делаем ширину width="347" , т.е. меньше на 2px , чем ширина изображения shapka_1.jpg .
19. Откройте шаблон в блокноте и измените код, как показано на рисунке 15.
20. Запустите web-страницу в браузере. Результат на рис. 16.
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 760 пикселами, картинку в шапке стоит разместить так, чтобы более важная часть изображения вписывалась в этот размер. На рис. 6.3 показано, как это сделать. Тёмным цветом выделена центральная часть шириной 760px, буквой А обозначены одинаковые по ширине оставшиеся фрагменты.
Рис. 6.3. Ширина шапки
Само добавление картинки в шапке делается через фоновый рисунок, который необходимо выровнять по центру элемента .
Header { display: block; /* Для старых браузеров */ height: 405px; /* Высота шапки */ background: url(images/header-bg.png) no-repeat center bottom; }
В идеале рисунок должен иметь большую ширину от 2000 пикселов, тогда практически при любом разрешении монитора рисунок будет показывать центральную часть, обрезая всё, что не помещается в окно. Но беда в том, что изначально картинка не настолько широкая, а рисовать бесконечно тянущиеся по бокам чёрные полоски не хочется. Один из вариантов решения это включить повторение фона по горизонтали. Те, у кого разрешение 1280 пикселов по ширине и меньше, увидят единственную картинку, а владельцы широких мониторов смогут полюбоваться сразу несколькими животными и одновременно заходящими солнцами. Здесь важно подредактировать рисунок так, чтобы он без стыков совмещался сам с собой по горизонтали (рис. 6.4). Градиент для наглядности спрятан.
Рис. 6.4. Совмещение изображения по горизонтали
На данном рисунке место стыка обозначено стрелкой и промежутком, чтобы стык можно было заметить. Если правильно отредактировать правую и левую часть фоновой картинки, то она будет повторяться по горизонтали без видимых стыков, как один сплошной рисунок. Остаётся слегка подправить стиль, заменив значение no-repeat (без повторения) на repeat-x (повторение по горизонтали).
Header { display: block; height: 405px; background: url(images/header-bg.png) repeat-x center bottom; }
Рис. 6.5. Фоновая картинка для шапки
В формате PNG-24 файл с фоном размером 1325х405 пикселов занимает около 32 Кб, а в PNG-8 с 256-цветовой палитрой, где качество градиента несколько хуже - около 15 Кб. Можно разбить фон на две составные части - градиент и картинку и сохранить каждое изображение в своём формате, что должно привести к повышению качества отображения градиента. Впрочем, 32 Кб для столь большого изображения это немного и дополнительную оптимизацию кто-то посчитает «экономией на спичках». Тем не менее, альтернативный подход к созданию шапки сайта кому-то окажется полезным, а при желании вы можете его пропустить.
Оптимизация шапкиПоскольку градиент в шапке повторяется по горизонтали, его можно вырезать из макета и установить как фоновую картинку. На рис. 6.6 показан градиент высотой 405 пикселов, подготовленный для этой цели. Формат PNG-24 не вносит искажения в изображение, а градиенты хорошо сжимает (итоговый объем 402 байта), так что в этом случае однозначно следует использовать именно его. Рамка вокруг рисунка добавлена для наглядности.
Рис. 6.6. Градиентный рисунок (header-gradient.png)
Картинка с силуэтными животными делается на прозрачном фоне и высотой 198 пикселов, нет смысла делать её на всю высоту шапки, поскольку она занимает лишь часть. Фрагмент изображения показан на рис. 6.7. Шахматное поле означает прозрачность.
Рис. 6.7. Фоновая картинка с прозрачностью (header-animal.png)
Поскольку сохранение этой картинки идет в формате PNG-8, у которого только один уровень прозрачности, в отличие от 256 уровней формата PNG-24, важно обеспечить корректное наложение на градиентный фон. Для этого при сохранении в Photoshop-е надо указать цвет краёв (Matte) близкий к средней части градиента, где идёт наложение силуэта. Примерно это цвет #9de1f0. В этом случае не возникнет грязных контуров вокруг деревьев и животных, а картинка при наложении на градиент будет восприниматься как единое целое.
Два рисунка для фона шапки подготовлены, пишем код HTML.
И стиль для элемента и слоя header-bg .
Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; }
В итоге объем файлов оказался 12,5 Кб, что даже меньше ожидаемого.
Название сайтаНазвание написано на облаке с растушёванными краями, что должно создать трудности при наложении на градиент. Есть два способа, как их обойти.
Очевидно, что второй способ имеет ряд недостатков - изображение нельзя сдвинуть даже на пару пикселов, оно привязано к градиенту, и если его градиент изменить, придётся менять и картинку. Так что сохраняем заголовок в формате PNG-24. Код HTML останется прежним, а стили расширятся.
Header { background: #00b0d8 url(images/header-gradient.png) repeat-x; } .header-bg { background: url(images/header-animal.png) repeat-x center bottom; height: 405px; /* Высота шапки */ text-align: center; /* Выравнивание по центру */ } .header-bg img { position: relative; /* Относительное позиционирование */ top: 40px; /* Сдвигаем картинку вниз */ }
Выравнивание по центру делается через свойство text-align
, добавляемое к родителю тега
, а сдвиг вниз через свойство top
. Чтобы это свойство сработало, необходимо для картинки задать относительное позиционирование с помощью свойства position
со значением relative
.
На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута href указывает на главную страницу и работает только на веб-сервере, но никак не локально.
Окончательный код для шапки приведён в примере 6.14.
Пример 6.14. Шапка сайта
HTML5 CSS 2.1 IE Cr Op Sa Fx
Как поймать льва в пустыне?
body { margin: 0; }
header {
display: block;
background: #00b0d8 url(images/header-gradient.png) repeat-x;
/* Градиент */
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
/* Животные */
height: 405px; /* Высота шапки */
text-align: center; /* Выравнивание по центру */
}
.header-bg img {
position: relative; /* Относительное позиционирование */
top: 40px; /* Сдвигаем картинку вниз */
}
Для начала распишем техническое задание. Нам необходимо создать шапку сайта, которая будет иметь блок ссылок, содержать несколько графических элементов заданной тематики и соответственно иметь некую текстовую часть, которая будет использоваться под слоган или еще что либо, так же я реализую данное творение в резиновом варианте так, чтобы размеры данной шапки изменялись вместе с размерами окна браузера.
Итак, вот что мы получим в конце урока:
Я выбрал тему рыбалки, потому что она мне очень близка и соответственно приятно что либо делать. Графику естественно я заготовил заранее в фотошопе, все сверсвтал и нарезал, как я это делал я вам не буду объяснять, так как это отдельная тема, а в этом уроке я покажу вам как это все реализуется непосредственно в коде, поэтому перейдем ближе к делу.
Вот общая картина того как выглядит эта шапка в html:
Рыбалка
НовостиКрючкиУдочкиЛескаО проекте
#header {
width: 100%;
height: 157px;
background: url(bg.jpg);
}
#links {
width: 100%;
height: 33px;
background:url(linkbg.jpg);
font-size: 14px;
font-weight: bold;
color:#FFFFFF;
}
#links div {
padding: 5px;
text-align:center;
width: 150px;
float: left;
}
.text {
color: #FFFFFF;
padding: 10px;
font-size: 24px;
float: left;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 50px;
font-weight: bold;
color: #FFFFFF;
}
Как вы могли заметить код достаточно короткий и при этом очень эффективный, я буду разбирать все по порядку и соответственно комментировать каждый шаг:
Тег тела документа, здесь мы сразу обнуляем все возможные отступы от краев окна браузера и внутри самого тега body, соответствующими параметрами margin:0px; padding: 0px; это нам необходимо для того чтобы не было белых пробелов по краям окна браузера, да и в принципе это применяется всегда при любой нормальной верстке сайта.
Это у нас начало шапки мы создаем контейнер с заданными параметрами:
#header {
width: 100%;
height: 157px;
background: url(bg.jpg);
}
а именно первым делом задаем ширину шапки в процентах width: 100%; что дает нам возможность создать так называемую резиновую верстку, затем высоту height: 157px; и соответственно фоновый рисунок background: url(bg.jpg); который лежит у нас в той же папке что и файл шапки. Следующим делом нам необходимо создать три контейнера внутри данного, для того чтобы разместить там рисунки и текст:
Рыбалка
Рыбачьте с нами и поймаете...
Первому контейнеру мы задаем выравнивание к левой части чтобы он соответственно был слева, для этого мы используем параметр позиционирования float: left; и просто вставляем туда наше изображение, размер контейнера будет определяться размером изображения. Следующий контейнер мы так же выравниваем с помощью параметра float чтобы он у нас был на одной линии и не перешел на следующею строчку. Здесь мы используем класс class="text":
Text {
color: #FFFFFF;
padding: 10px;
font-size: 24px;
float: left;
}
В первую очередь задали цвет шрифта color: #FFFFFF; отступы от текста внутри контейнера padding: 10px; размер шрифта font-size: 24px; и выравнивание в лево. Так же в данном контейнере присутствует тег которому, так же отдельно прописали параметры:
h1 {
margin: 0px;
padding: 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 50px;
font-weight: bold;
color: #FFFFFF;
}
Первым делом мы убрали все возможные отступы margin: 0px; padding: 0px; далее задали шрифт font-family:Verdana, Arial, Helvetica, sans-serif; размер шрифта font-size: 50px; вес шрифта font-weight: bold; и цвет color: #FFFFFF; вот и все. Остался последний третий бокс который мы выравниваем в право, так же параметром float для того чтобы как и в прошлый раз он был на одной строчке и вставляем второй рисунок. Если у вас возникли затруднения с понятием свойств параметра float советую прочитать урок «CSS позиционирование основные моменты» и вам все станет ясно. На этом наша верхушка закончена, остался блок ссылок:
НовостиКрючкиУдочкиЛескаО проекте
Итак, делаем полосу с фоном:
#links div {
padding: 5px;
text-align:center;
width: 150px;
float: left;
border-right: 1px solid #000;
}
Для красоты отображения делаем отступы в 5 пикселей по всем сторонам padding: 5px; затем выравниваем содержимое контейнеров по центру text-align:center; задаем ширину width: 150px; выравниваем сами контейнеры к левому краю, и осталось только разделить наши ссылки с помощью элементарной обводки краев контейнера справа, а именно border-right: 1px solid #000; мы задали обводку границы справа, полосой шириной в 1 пиксель, стиль solid и цвет черный.
Вот и все, вот так получилась шапка сайта с резиновой версткой, очень удобно и практично и как я надеюсь вы заметили при верстке было использовано очень мало html кода поскольку основная нагрузка ложится на CSS, что позволяет создавать более оптимизированные сайты к которым поисковые системы будут более предрасположены.
Конечно, это не единственный вариант реализации шапки сайта и в будущем я обязательно постараюсь написать еще несколько уроков на данную тему.
Дата публикации:2011-10-11
Вы уже заранее подготовили для размещения в сети, и затем разрежьте его на части, используя инструмент Slice Tool на панели инструментов. Разрежьте шапку так, чтобы центральная ее была пустой, и чтобы в итоге у вас получилось три графических элемента. Это позволит шапке растягиваться под любое разрешение экрана.
После того, как вы разрежете шапку, сохраните ее, оптимизируя файлы при сохранении для веб-формата (Save for web). Установите нужный формат файла для сохранения – например, gif, jpeg или png. Для изменения каждого фрагмента изображения кликните в меню на опцию Slice Select Tool и измените так, чтобы их размер был как можно меньше при наименьших потерях в качестве визуального отображения на экране. Сохраните отредактированные картинки как html и images.
После того как картинки будут сохранены, отредактируйте HTML-код, открыв сохраненный html-документ с помощью Блокнота. В блокноте сотрите все ненужные строки кода. Оставьте только необходимые строки – данные о таблице, в которую встроены ваши картинки:
В данных строках вместо yourimage.gif должен быть указан путь к вашим изображениям с соответствующей шириной и высотой.
Для того чтобы средняя часть изображения растягивалась, разводя крайние изображения по сторонам, пропишите соответствующие атрибуты кода в строках. Все параметры ширины и высоты в коде указывайте свои собственные.
Загрузите созданные картинки для шапки в корневой каталог своего сайта, а затем отредактируйте HTML-код, указав новые пути к изображениям шапки на сервере. Вставьте код шапки между тегами .
Видео по теме
Заявление – официально сделанное в устной, а чаще письменной форме, сообщение. Оно относится к категории официальных документов, поэтому оформляется в соответствии с ГОСТ Р.6.30-2003. Заявление пишется в произвольной форме, но к его тексту предъявляются стандартные требования.
Инструкция
Некоторые заявления, которые пишут физические лица, требуется писать от руки, но это требование должно быть специально внутренним регламентом по делопроизводству. Во всех остальных случаях заявление может быть напечатано на компьютере.
Печатается заявление на стандартном листе писчей бумаги формата А4. Предусматривается, что размеры полей должны быть не менее следующих значений: левое – 20 мм, правое – 10 мм, верхнее и нижнее – 20 мм. Если вы печатаете документ в текстовом редакторе, то установите эти значения полей в пункте меню «Разметка страницы».
В правой верхней части листа укажите наименование адресата, которому направляется заявление. Если это должностное лицо - укажите его должность, полное наименование организацию, фамилию и инициалы, полный организации.
Текст заявления начните с обращения «Уважаемый Имя Отчество!». Сведения об имени и отчестве адресата вы можете узнать, позвонив в приемную организации, чьим руководителем он является.
Если необходимо дать предварительное пояснение к вашему обращению, то напишите вводную часть. Используя официально-деловую лексику, начните ее с фразы: «Обращаю Ваше внимание», «Довожу до Вашего сведения» или «В соответствии с таким-то законом». Кратко изложите основание, по которому вы обращаетесь с заявлением к указанному лицу.
Стандартным началом непосредственно обращения являются слова: «Прошу Вас…» или «В соответствии с вышеизложенным, прошу Вас». В этой части фиксируется сообщение граждан или организаций по поводу защиты и осуществления своих интересов и прав. В нем может быть зафиксирована просьба о принятии на работу, предоставлении очередного трудового отпуска, переводе на другую должность, допуске к экзаменам или к выполнению рабочих обязанностей.
Если к заявлению приложены документы, укажите их в тексте под обращением, оформив в виде списка с указанием номера документа, его названия и количества листов в нем.
Проставьте дату, подпись и ее расшифровку.
Видео по теме
Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.
Инструкция
Если вы только создаете свой сайт на основе готового шаблона, то в его шапку можно с помощью простой замены. Для этого достаточно подобрать подходящее изображение и пересохранить его под именем стандартной иллюстрации. Здесь главное подогнать размеры, в противном случае ваша картинка попросту не впишется в параметры ресурса. Точно также можно поступить и с готовым сайтом, который имеет систему управления и уже отправлен в плавание по интернет-пространству.
Откройте в графическом редакторе изображение, которое вы хотите заменить, и выберите в меню «Изображение» - «Размер изображения». Запомните, а лучше запишите значения в пикселах. Можете закрывать картинку – она больше не понадобится.
