Резиновая шапка. Шапка страницы
Зачастую вроде бы простые задачи верстки требуют сложной структуры HTML-разметки и использования CSS-трюков. Центрирование элементов или выравнивание контента может быть очень утомительным. Одна из таких задач - это выравнивание элементов верхней части сайта так, чтобы логотип был слева, а пункты меню - справа. Можно использовать float и position:absolute, а для выравнивания по вертикали - добавлять margin и padding разным элементам. Вроде бы ничего сложного. Но если сайт должен корректно отображаться и на мобильных устройствах, возникает много проблем.
Ниже описан лаконичный способ решения этой проблемы.
HTML-разметка максимально проста:
Super Bad First LinkSecond LinkThird Link
Высота шапки фиксированная, добавляем text-align: justify , для дочерних элементов:
Header { text-align: justify; letter-spacing: 1px; height: 8em; padding: 2em 10%; background: #2c3e50; color: #fff; }
Добавляем display: inline-block для всех элементов nav , чтобы можно было расположить их друг за другом:
Header h1, header nav { display: inline-block; }
Чтобы атрибут text-align: justify работал, как мы хотим, нужно использовать небольшой трюк с псведоэлементами, который был найден в статье Perfectly justified CSS grid technique using inline-block , автор Jelmer de Maat:
Header::after { content: ""; display: inline-block; width: 100%; }
В итоге получилось выравнивание по горизонтали, без использования float и position:absolute . Теперь необходимо выравнивание элементов по вертикали. При использовании vertical-align для элементов nav будет зависимость от высоты родительского блока - шапки. А это не очень правильно. Примеры использования vertical-align: top и vertical-align: middle на jsbin. Ниже представлен возможно наиболее удобный способ вертикального выравнивания.
Используем снова псевдоэлементы. используя пример из статьи Centering in the Unknown , упомянутый Michał Czernow:
Header h1 {
height: 100%;
}
header h1::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
В результате получается то, что нужно:
Осталось решить две задачи: корректное отображение при большом количестве текста в шапке и адаптивность. Если заголовок сайта будет слишком длинный, верстка начнет съезжать:
Используем трюк с псевдоэлементом на header
:
CSS-код
header {
text-align: justify;
height: 15em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header nav,
header div h1 {
display: inline-block;
vertical-align: middle;
}
header > div {
width: 50%;
height: 100%;
text-align: left;
}
header > div::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
Выглядит намного лучше:
Теперь перейдем к адаптивности. Есть несколько способов решения этой задачи, можно просто не задавать высоту шапке, и все внутренние элементы будут адаптивны высоте. При этом не потребуется второй трюк с псевдоэлементами, живой пример на jsbin.
CSS-код
header {
text-align: justify;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header h1,
header nav {
display: inline-block;
vertical-align: middle;
}
header h1 {
width: 50%;
text-align: left;
padding-top: 0.5em;
}
header nav {
padding-top: 1em;
}
Если же необходимо задать высоту шапки, то придется использовать и второй трюк с псевдоэлементами, и добавлять media query для экранов разных размеров:
@media screen and (max-width: 820px){ header { height: auto; } header > div, header >
Результат адаптивен и на мобильных устройствах выглядит так:
В примере используется 820px для наглядности, на живом сайте значение конечно должно быть другое, в соответствии с требованиями. Для поддержки Internet Explorer 8 необходимо вместо “::” использовать “:” для псевдоэлементов.
Финальный CSS-код
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: "Lato", sans-serif; text-transform: uppercase; letter-spacing: 1px;}
header {
text-align: justify;
height: 8em;
padding: 2em 5%;
background: #2c3e50;
color: #fff;
}
header::after {
content: "";
display: inline-block;
width: 100%;
}
header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
text-align: left;
}
header > div {
height: 100%;
}
header > div::before {
content: "";
height: 100%;
}
header > div h1 {
font-size: 3em;
font-style: italic;
}
header nav a {
padding: 0 0.6em;
white-space: nowrap;
}
header nav a:last-child {
padding-right: 0;
}
@media screen and (max-width: 720px){
header {
height: auto;
}
header > div,
header > div h1,
header nav {
height: auto;
width: auto;
display: block;
text-align: center;
}
}
Результат:
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 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 мм. Если вы печатаете документ в текстовом редакторе, то установите эти значения полей в пункте меню «Разметка страницы».
В правой верхней части листа укажите наименование адресата, которому направляется заявление. Если это должностное лицо - укажите его должность, полное наименование организацию, фамилию и инициалы, полный организации.
Текст заявления начните с обращения «Уважаемый Имя Отчество!». Сведения об имени и отчестве адресата вы можете узнать, позвонив в приемную организации, чьим руководителем он является.
Если необходимо дать предварительное пояснение к вашему обращению, то напишите вводную часть. Используя официально-деловую лексику, начните ее с фразы: «Обращаю Ваше внимание», «Довожу до Вашего сведения» или «В соответствии с таким-то законом». Кратко изложите основание, по которому вы обращаетесь с заявлением к указанному лицу.
Стандартным началом непосредственно обращения являются слова: «Прошу Вас…» или «В соответствии с вышеизложенным, прошу Вас». В этой части фиксируется сообщение граждан или организаций по поводу защиты и осуществления своих интересов и прав. В нем может быть зафиксирована просьба о принятии на работу, предоставлении очередного трудового отпуска, переводе на другую должность, допуске к экзаменам или к выполнению рабочих обязанностей.
Если к заявлению приложены документы, укажите их в тексте под обращением, оформив в виде списка с указанием номера документа, его названия и количества листов в нем.
Проставьте дату, подпись и ее расшифровку.
Видео по теме
Правильно подобранная картинка наилучшим образом характеризует направление сайта, придает ему индивидуальность. К тому же, большинство людей по своей натуре является визуалами, а это значит, что графическое изображение запомнится им куда лучше.
Инструкция
Если вы только создаете свой сайт на основе готового шаблона, то в его шапку можно с помощью простой замены. Для этого достаточно подобрать подходящее изображение и пересохранить его под именем стандартной иллюстрации. Здесь главное подогнать размеры, в противном случае ваша картинка попросту не впишется в параметры ресурса. Точно также можно поступить и с готовым сайтом, который имеет систему управления и уже отправлен в плавание по интернет-пространству.
Откройте в графическом редакторе изображение, которое вы хотите заменить, и выберите в меню «Изображение» - «Размер изображения». Запомните, а лучше запишите значения в пикселах. Можете закрывать картинку – она больше не понадобится.
Таблица с шириной 100% будет растягиваться или сжиматься в зависимости от размеров экрана пользователя.Сделайте в таблице строку, в ячейке которой разместите левую часть шапки сайта 1.gif:
 |
Создайте среднюю часть шапки сайта, состоящую из повторяющейся картинки 2.gif. Для этого в CSS-коде сделайте такую запись:
.header{background-image:url("images/2.gif");}
Теперь в строке таблицы создайте еще одну ячейку и поместите в нее средний элемент верхней части сайта, указав на его название header в CSS-коде:
| Название сайта Создав третью ячейку в строке таблицы, расположите в этой ячейке правую часть шапки сайта 3.gif:
Источники:
Когда вы создаете собственный сайт, естественно, вы хотите, чтобы он отображался как можно более привлекательно независимо от версии браузера пользователя. В частности, чтобы фоновое изображение растягивалось и подстраивалось под разрешение монитора компьютера. Вам понадобится
Инструкция Откройте код своего сайта в любом редакторе, например, программе «Блокнот» либо специальной программе для веб-дизайна, Dreamweaver. Вставьте в код следующие строки, чтобы растянуть . Пропишите Background: url (‘ «Вставьте ссылку на изображение»’). Для того чтобы размер картинки подгонялся по горизонтали, используйте следующий код: Background: url (‘ «Вставьте ссылку на изображение»’ repeat-x), по вертикали – в конце кода х замените на у. Если стиль сайта прописан в файле css, вставьте код в него. Таким образом, вы сможете поставить резиновый фон на ваш сайт. Воспользуйтесь следующим примером кода, который помещает фоновый рисунок на страницу и позволяет автоматически растянуть его, подстраиваясь под разрешение того монитора, на котором происходит просмотр страницы. Пример кода: body {background: «Вставьте ссылку на фоновое изображение» () no-repeat fixed left center; затем background-size: [...]. Используйте для растягивания фонового изображения простую вставку картинки в качестве фоновой и установите для нее ширину 100%. К примеру, вставьте в код страницы следующий текст: фоновое изображение» alt= «Введите название картинки» width="100%" / >. Таким образом, будет использоваться подгон ширины картинки, но ее пропорции будут нарушены. Аналогично можно установить растягивание рисунка по высоте, вместо атрибута width используйте height. Либо воспользуйтесь следующим примером кода для css: фоновое изображение сайта)" > и после него добавьте 100% ширину изображения, как в предыдущем примере. Также вы можете с помощью скрипта узнать разрешение экрана пользователя и отредактировать под него размеры вашей таблицы. Видео по теме «Резиновой» называется картинка, обладающая способностью масштабироваться. Создать такую картинку можно, используя компьютерные программы. Ее удобство заключается в том, что она «растягивается» в нужном направлении. Такое веб-творение успешно отображается в любом браузере. Если картинка содержит какие-то полезные элементы, «резиновые» свойства повышают ее функциональность.
Вам понадобится
Инструкция Найдите или создайте изображение, которое необходимо сделать масштабирующимся и разместить в сети интернет. Запустите программу Adobe Photoshop. Откройте это изображение в программе. На панели инструментов найдите Slice Tool. С его помощью разрежьте изображение на части. Разделите ее таким образом, чтобы вся картинка состояла из трех графических элементов и центральная была пустой. Это поможет картинке растягиваться при любом разрешении монитора. Сохраните картинку с оптимизацией для веб-формата (Save for web). При сохранении установите необходимый формат файла - gif, jpeg или png. Для того, чтобы изменить отдельные фрагменты изображения, найдите в меню опцию Slice Select Tool и измените части картинки таким образом, чтобы из размер был минимальным при наименьших потерях качества во время визуализации на экране. После изменения сохраните картинки как html и images. |
