Внимание! Сайт переехал на новый домен sayt-sozdat.ru. Пожалуйста, обновите страницы закладок с новыми URL
×
Закрытие
2
×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Устанавливаем графический редактор GIMP

  1. Выбор графического редактора
  2. Устанавливаем программу GIMP
  3. Устанавливаем Руководство пользователя

Здравствуйте уважаемый посетитель!

При создании и развитии сайта не обойтись без графического редактора. Этот инструмент необходим для формирования и обработки различных графических элементов, без которых сайт попросту не сможет существовать. Поэтому в наборе инструментов вебмастера графический редактор занимает важнейшее место.

В статье Устанавливаем бесплатный графический редактор GIMP речь пойдет о бесплатной программе GIMP, которая позволяет в полной мере решать вопросы по созданию элементов дизайна веб-страниц. И будет показано, как ее установить на локальный компьютер.

Кроме того здесь можно будет посмотреть, как в этот редактор добавить встроенное "Руководство пользователя", а также приведен бесплатный видеокурс, где можно поближе с ним познакомиться.

Для тех же, кто хочет заниматься дизайном на платном Adobe Photoshop (фотошоп), здесь также упомянут и такой вариант, основанный на использовании продления льготного бесплатного периода фотошопа на неопределенное время...

Cайт на практическом примере

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние сайта, создаваемого в рамках цикла статей Самописный сайт с нуля своими руками.

Исходные файлы данного сайта можно скачать из прилагаемых к статьям дополнительных материалов.

Вы здесь: Главная → Сборник статей → Верстка → Оформление элементов шапки сайта стилями CSS


Автор: / Дата:

Оформление элементов шапки сайта стилями CSS

Оформляем элементы шапки сайта стилями CSS

Здравствуйте, уважаемый посетитель!

Сегодня, используя стили CSS оформим имеющиеся элементы шапки: фавикон, заголовок названия сайта, ключевую фразу, и таким образом, приведем внешний вид шапки сайта в соответствие с дизайн макетом.

С учетом того, что назначение стилей CSS должно основываться на дизайн-макете, то здесь достаточно большое внимание будет уделено получению необходимых данных с помощью графического редактора.

Содержание


  • Размещение элементов по вертикали
  • Формирование отступов элементов по горизонтали
  • Назначение свойств шрифта элементов
  • Создание теней для текстовых элементов
  • Исходные файлы сайта

Формирование элементов шапки


В соответствии с разметкой веб-страницы, шапка разделена на две основные части. Первая - это область, где располагаются фавикон, заголовок названия сайта и ключевая фраза, которые объединены элементом <div> с классом "hdr-title". Вторая часть - меню, образованое элементом <nav> с классом "menu".

Меню мы оставим для следующей статьи, а сейчас рассмотрим элементы: фавикон, заголовок названия сайта и ключевую фразу.

Ниже, приведен фрагмент шапки HTML-страницы, взятый из файла "index.html", с содержимым контейнера <header>, где цветом выделены нужные элементы.

  1. <header>

  2. <div class="hdr-title">

  3. <div class="hdr-block">

  4. <img src="images/logo.gif" alt="Фавикон"/>

  5. <h1>Название сайта</h1>

  6. </div>

  7. <p class="hdr-p1">Противоугонная маркировка стекол -</p>

  8. <p class="hdr-p2">надежная защита автомобиля от угона</p>

  9. </div>

  10. <nav class="menu">

  11. <ul>

  12. <li class="activ"><a href="index.html">Главная</a></li>

  13. <li class="passiv"><a href="index.html">О маркировке стекол</a></li>

  14. <li class="passiv"><a href="index.html">Акция</a></li>

  15. <li class="passiv"><a href="index.html">Запись на маркировку</a></li>

  16. <li class="passiv"><a href="index.html">Контакты</a></li>

  17. </ul>

  18. </nav>

  19. </header>

Рис.1 Фрагмент кода шапки HTML-страницы

Как видно из таблицы, фавикон и заголовок названия сайта объединены в один блок <div> с атрибутом класса "hdr-block", а два фрагмента ключевой фразы размещены в отдельные блоки <p>, один с классом "hdr-p1", другой "hdr-p2"

В первую очередь, для формирования этих элементов получим необходимые данные, а именно: расстояние элементов до верхней границы шапки веб-страницы и, соответственно, вычислим их высоту. Ниже, на скриншоте в увеличенном масштабе наглядно показано, как это можно сделать

Оформление элементов шапки сайта, картинка 1

Рис.2

В итоге, получим следующие данные:

  • расстояние до блока <div> с классом "hdr-title" - 28px;
  • расстояние до нижней границы фавикона <img> - 55px;
  • расстояние до блока <p> с классом "hdr-p1" - 74px;
  • расстояние до верхней границы эл-та <p> с классом "hdr-p2" - 105px;
  • расстояние до нижней границы эл-та <p> с классом "hdr-p2" - 160px;

Исходя из этого, вычислим высоту элементов:

  • высота фавикона <img> - 27px (55px - 28px);
  • высота блока<div> с классом "hdr-block" - 46px (74px - 28px);
  • высота блока <p> с классом "hdr-p1" - 31px (105px - 74px);
  • высота блока <p> с классом "hdr-p2" - 55px (160px - 105px);

На основании этих данных назначим соответствующие стили.

  1. .hdr-title {

  2. margin-top: 28px;

  3. }

  4. .hdr-block {

  5. height: 46px;

  6. }

  7. .hdr-block img {

  8. height: 27px;

  9. }

  10. .hdr-p1 {

  11. height: 31px;

  12. }

  13. .hdr-p2 {

  14. height: 55px;

  15. }

Рис.3

Теперь, если обновить страницу, то можно увидеть, что все три элемента шапки, которым были назначены свойств CSS расположились с соответствующими макету отступами от верхнего края страницы, а также установлен размер графического элемента - фавикона.

Ниже, на рис.4 показан вид шапки до назначения свойств CSS, на рис.5 - после назначения.

Оформление элементов шапки сайта, картинка 2

Рис.4 Вид шапки до назначения свойств CSS

Оформление элементов шапки сайта, картинка 3

Рис.5 Вид шапки после назначения свойств CSS

Однако, расположение фавикона и заголовка названия сайта, которые размещены в блоке <div> с классом "hdr-block", пока не соответствуют макету (на макете они располагаются в один ряд, здесь же заголовок находится под фавиконом).

Это происходит из-за того, что по умолчанию элементы располагаются один под другим по мере загрузки HTML-страницы.

Устранить это несоответствие можно довольно простым способом, назначив для фавикона img всего лишь одно свойство float, которое сделает его плавающим, сместит в нужную левую сторону родительского элемента и позволит строчному содержимому <Η1>, расположиться за ним в одну линию.

О свойстве float очень хорошо объясняется в справочнике "Puzzleweb" на странице "http://www.puzzleweb.ru/css/pr_float.php". Поэтому, если кто еще не знаком этим важным свойством CSS, то может воспользоваться данной ссылкой.

Как назначить в данном случае свойство float показано ниже.

  1. .hdr-title {

  2. margin-top: 28px;

  3. }

  4. .hdr-block {

  5. height: 46px;

  6. }

  7. .hdr-block img {

  8. height: 27px;

  9. float: left;

  10. }

  11. .hdr-p1 {

  12. height: 31px;

  13. }

  14. .hdr-p2 {

  15. height: 55px;

  16. }

Рис.6

И теперь, после обновления страницы мы увидим, что фавикон и заголовок названия сайта расположились в нужном порядке.

Оформление элементов шапки сайта, картинка 4

Рис.7

Формирование отступов элементов по горизонтали


Следующий этап оформления шапки сайта, это задание нужных отступов рассматриваемых элементов по горизонтали. При этом, надо учесть, что мы используем технику резиновой верстки и поэтому отступы должны изменятся пропорционально в зависимости от разрешения экрана при сжатии, или растягивании страницы.

И добиваться этого мы будем с помощью назначения отступов не в виде фиксированной величины, измеряемой в пикселях, а в относительной, в данном случае в процентном соотношении ко всей ширине страницы.

Для того, чтобы задать такие отступы, необходимо их рассчитать. Сначала, измерим на дизайн-макете расстояние от элементов до левой границы шапки веб-страницы. Ниже показано, какие замеры мы будем использовать при расчете.

Оформление элементов шапки сайта, картинка 5

Рис.8

В результате, мы получили следующие значения:

  • отступ фавикона <img> - 100px;
  • отступ заголовка <Η1> - 145px;
  • отступ блока <p> с классом "hdr-p1" - 196px;
  • отступ блока <p> с классом "hdr-p2" - 243px.

Исходя из того, что общая ширина страницы дизай-макета составляет 1200px, подсчитаем процентное соотношение измеренных величин по каждому элементу:

  • отступ фавикона <img> - 8.33%;
  • отступ заголовка <Η1> - 12.08%;
  • отступ блока <p> с классом "hdr-p1" - 16.33%;
  • отступ блока <p> с классом "hdr-p2" - 20.25%.

На основании этих данных присвоим полученные значения соответствующим свойствам элементов.

  1. .hdr-title {

  2. margin-top: 28px;

  3. }

  4. .hdr-block {

  5. height: 46px;

  6. }

  7. .hdr-block img {

  8. height: 27px;

  9. float: left;

  10. margin-left: 8.25%;

  11. }

  12. .hdr-block h1 {

  13. margin-left: 12.08%;

  14. }

  15. .hdr-p1 {

  16. height: 31px;

  17. margin-left: 16.33%;

  18. }

  19. .hdr-p2 {

  20. height: 55px;

  21. margin-left: 20.25%;

  22. }

Рис.9

После изменения CSS-кода мы можем убедиться, что все отступы элементов приведены в соответствие с дизайн-макетом.

Оформление элементов шапки сайта, картинка 6

Рис.10

Назначение свойств шрифта элементов


Теперь назначим свойства шрифта рассматриваемых элементов, а именно: размер, цвет и стиль.

Для того, чтобы их определить, снова обратимся к дизайн-макету. На следующем скриншоте, на примере текста заголовка названия сайта, показан один из вариантов получение информации об используемом шрифте.

Оформление элементов шапки сайта, картинка 7

Рис.11

В данном случае, шрифт заголовка имеет следующие значения:

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - стандартный (не курсивный, нежирный);
  • размер - 2.25em = 36px / 16px;
  • цвет - #c03838.

Аналогично, определяем параметры шрифта для элемента ключевой фразы:

  • шрифт "Arial" из семейства шрифтов без засечек;
  • стиль - курсивный, нежирный;
  • размер - 1.5em = 24px / 16px;
  • цвет - #437744.

Теперь, присвоим полученные значения соответствующим свойствам.

  1. .hdr-title {

  2. margin-top: 28px;

  3. }

  4. .hdr-block {

  5. height: 31px;

  6. }

  7. .hdr-block img {

  8. height: 27px;

  9. float: left;

  10. margin-left: 8.33%;

  11. }

  12. .hdr-block h1 {

  13. margin-left: 12.08%;

  14. font-size: 2.25em;

  15. color: #c03838;

  16. line-height: 0.8;

  17. }

  18. .hdr-p1 {

  19. height: 31px;

  20. margin-left: 16.33%;

  21. }

  22. .hdr-p2 {

  23. height: 55px;

  24. margin-left: 20.25%;

  25. }

  26. .hdr-p1, .hdr-p2 {

  27. font-style: italic;

  28. font-size: 1.5em;

  29. color: #437744;

  30. line-height: 0.8;

  31. }

Рис.12

По назначенным свойствам шрифта следует сделать некоторые уточнения:

  • шрифт "Arial" назначен ранее при установке базовых настроек файла css, поэтому здесь, повторного его назначения не требуется;
  • значение normal стиля font-weight для элемента <Η1> здесь не указывается, так как оно установлено также в базовых настройках файла css, а для блока <p> это значение установлено по умолчанию;
  • Для того, чтобы верхнюю границу текста совместить с верхней границей родительского элемента свойству line-height присвоено значение 0.8. Таким образом, межстрочный интервал становится равным размеру текущего шрифта.

После обновления страницы можно увидеть нужные изменения в шрифте текста.

Оформление элементов шапки сайта, картинка 8

Рис.13

Создание теней для текстовых элементов


И, последнее, что осталось для оформления шапки, это создание теней для текста.

В CSS3 для формирования теней текста имеется свойство text-shadow, в котором задаются значения вертикального и горизонтального смещения, размытость и цвет.

Чтобы получить необходимые данные о параметрах теней снова обратимся к дизайн-макету. Ниже, на примере тени заголовка названия сайта, показано как получить эти данные. При этом, как открыть панель "Стиль слоя" было показано ранее в предыдущих статьях рубрики в части, касающейся создания дизан-макета.

Оформление элементов шапки сайта, картинка 9

Рис.14

Таким образом, на основании изображения дизан-макета можно получить данные, которые соответствуют свойствам CSS, такие, как:

  • угол - 157o;
  • смещение - 3px;
  • размер - 3px;
  • цвет - #564949.

Из них можно получить необходимые для CSS значения смещения тени, а именно: смещение по горизонтали 3px, а по вертикали - 1px. Таким образом, получим для свойств CSS следующие значения:

  • смещение по-горизонтали - 3px;
  • смещение по-вертикали - 1px;
  • размытость - 3px;
  • цвет - #564949.

Аналогично, получим данные по тени для ключевой фразы.

  • смещение по-горизонтали - 2px;
  • смещение по-вертикали - 1px;
  • размытость - 2px;
  • цвет - #298384.

После назначения соответствующих свойств получим окончательный вариант таблицы стилей CSS

  1. .hdr-title {

  2. margin-top: 28px;

  3. }

  4. .hdr-block {

  5. height: 46px;

  6. }

  7. .hdr-block img {

  8. height: 27px;

  9. float: left;

  10. margin-left: 8.33%;

  11. }

  12. .hdr-block h1 {

  13. margin-left: 12.08%;

  14. font-size: 2.25em;

  15. color: #c03838;

  16. line-height: 0.8;

  17. text-shadow: 3px 1px 3px #564949;

  18. }

  19. .hdr-p1 {

  20. height: 31px;

  21. margin-left: 16.33%;

  22. }

  23. .hdr-p2 {

  24. height: 55px;

  25. margin-left: 20.25%;

  26. }

  27. .hdr-p1, .hdr-p2 {

  28. font-weight: bold;

  29. font-style: italic;

  30. font-size: 1.5em;

  31. color: #437744;

  32. line-height: 0.8;

  33. text-shadow: 2px 1px 2px #298384;

  34. }

Рис.15

После обновления страницы можно увидеть окончательный вид элементов шапки.

Оформление элементов шапки сайта, картинка 10

Рис.16

На этом, оформление элементов шапки мы закончим, а в следующей статье с помощью стилей CSS сформируем резиновое меню, которое может сжиматься и растягиваться в установленных пределах.

Исходные файлы сайта


Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов.

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


Если у Вас возникли вопросы, или есть какие-либо пожелания по представлению материала, либо заметили какие-нибудь ошибки, а быть может просто хотите выразить свое мнение, пожалуйста, оставьте свои комментарии. Такая обратная связь очень важна для возможности учета мнения посетителей.

Буду Вам за это очень признателен!