Для начала распишем техническое задание. Нам необходимо создать шапку сайта, которая будет иметь блок ссылок, содержать несколько графических элементов заданной тематики и соответственно иметь некую текстовую часть, которая будет использоваться под слоган или еще что либо, так же я реализую данное творение в резиновом варианте так, чтобы размеры данной шапки изменялись вместе с размерами окна браузера.
Итак, вот что мы получим в конце урока:
Я выбрал тему рыбалки, потому что она мне очень близка и соответственно приятно что либо делать. Графику естественно я заготовил заранее в фотошопе, все сверсвтал и нарезал, как я это делал я вам не буду объяснять, так как это отдельная тема, а в этом уроке я покажу вам как это все реализуется непосредственно в коде, поэтому перейдем ближе к делу.
Вот общая картина того как выглядит эта шапка в 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
Таблица с шириной 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. Если основой макета Вашего сайта является «резиновая» таблица , то иногда возникает необходимость создать шапку сайта так, чтобы при изменении ширины окна браузера и при разных разрешениях монитора свободное место заполнялось узором. Технологии создания резинового сайта читайте в нашей статье Как создать резиновый сайт. Технологии создания бесшовного узора читайте в нашей статье Как создать бесшовный узор для фона сайта. В этой статье мы рассматриваем технологию создания «резиновой» шапки сайта . Мы будем создавать 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. Ниже приведена последовательность команд для создания нового файла из выделенной зоны:
Результат на рис. 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.
От автора: приветствуем вас на нашем блоге о сайтостроении. У любого сайта есть то, чем он обычно запоминается и выделяется среди остальных. Обычно это именно шапка сайта. CSS позволяет сделать ее такой, как вам нужно. Шапка сайта – какой она бываетПоразительно, как много может зависеть сегодня от одного только дизайна веб-ресурса. Но что особенно сильно отделяет веб-ресурс от других? Как правило, это именно шапка сайта с фирменным логотипом и уникальным оформлением. Обычно именно по ней люди запоминают какой-то интернет-проект. Это очень хорошо запоминается в памяти людей. Например, если вы видите белую букву “В” на синем фоне, то наверняка сразу делаете вывод – это иконка социальной сети Вконтакте. А изображение почтового голубя у всех сразу же ассоциируется с Twitter. Все это стало возможным потому, что в шапках у этих сайтов были именно такие изображения и они очень хорошо запомнились людям. Так, это было немного размышлений, теперь давайте перейдем непосредственно к технической части. Как в CSS можно оформить шапку сайта?Вообще шапки бывают разными. По ширине их можно разделить на две группы: выровненные по центру и те, что на всю ширину веб-страницы. Раньше шапку делали также, как и любой другой блок – обычному тегу div давали нужный идентификатор, после чего в него попадало все нужное содержимое, а потом все это оформлялось. Сегодня же уже принято верстать по-другому. Специально для создания шапки сайта в HTML5 появился парный тег – header. Его использование приветствуется, это позволяет браузерам понимать, что это за часть шаблона и за что она отвечает. Кстати, если вы хотите изучить основы HTML5, то вам прямая дорога в наш , где вы можете посмотреть уроки по этой технологии. Поэтому, для создания простейшей шапки достаточно написать в html вот такой код:
Конечно, на странице пока ничего не появится – нам еще нужно добавить в нее содержимое и оформить. Но давайте, например, сделаем блок на всю ширину экрана, а также немного оформим. header{ width: 100%; background: #D8E3AB; height: 70px; }
Вообще, если все делать по-правильному, то следовало бы задать блоку какой-то класс или даже идентификатор (поскольку это важный элемент веб-страницы), но мы пока просто обратимся к элементу по тегу. Свойство width: 100% делает так, что наш блок будет растягиваться на всю ширину вне зависимости от размеров экрана. Если же все-таки размеры нужно хоть как-то ограничить, используют дополнительно свойство max-width, где в пикселях записывают абсолютный размер, по достижению которого контейнер больше не будет расширяться. Сейчас перед нами просто полоска, окрашенная в выбранный цвет. Обычно высоту не задают – она определяется автоматически на основании тех элементов, которые будут в шапке.
Таким образом, наш верх сайта будет расположен ровно по центру. Остается только наполнить его. Рис. 1. Пока это только контейнер, в котором будет все содержимое. Что обычно содержится в шапке?Обычно там вставлен логотип, название, описание сайта. Также там может находиться какая-то контактная информация, навигация по страницам или даже реклама. Логотип обычно вставляют как фоновое изображение. Давайте, например, поставим такой: Для этого достаточно дописать некоторые правила к фону: background: #D8E3AB url(logo.png) no-repeat 5% 50%;
То есть помимо сплошного цвета даем еще и фоновую картинку (в нашем случае logo.png) и предварительно я ее положил в ту же папку, что и файл стилей. Запрещаем повторение логотипа и определяем его позицию в блоке – немного сместим влево и по центру по вертикали. Добавим в шапку какое-то содержимое. Например, заголовок и меню. Название сайта
Теперь все это оформим. Title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }
Основная сложность с резиновым макетом это обеспечить корректное отображение на разных разрешениях, от высокого до низкого. Поскольку мы ограничили ширину контента 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
, добавляемое к родителю тега На главной странице сайта картинка с названием выводится как обычно, на остальных страницах она служит ссылкой на главную страницу. Для этого достаточно слегка изменить код:
Значение / у атрибута 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; /* Сдвигаем картинку вниз */
}
|
