×

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

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

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

  • Рубрики
  • Слайдер статей
  • Тест сайта
  • Подписка
  • Сайдбар
  • Прокрутка вверх
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

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

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

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

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

    1. Проверка при малых разрешениях экрана
    2. Проверка при больших разрешениях экрана
    3. Проверка на выделенном домене

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

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

    Для этого предусмотрена возможность оценивать его работу в двух вариантах: с использованием зеркала сайта на поддомене текущего ресурса и на реальном интернет-ресурсе, размещенном на выделенном домене "avtobezugona.ru.

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

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

Самописный сайт своими руками!

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

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

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Верстка → Оформляем элементы шапки сайта стилями 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. <Η1>Название сайта</Η1>

  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 сформируем резиновое меню, которое может сжиматься и растягиваться в установленных пределах.

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


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

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

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

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

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


Комментарии


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

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

comments powered by HyperComments