Верстка шапки

Переходим к шапке. Она у нас такого вида:

Верстка шапки

Как видно из макета шапка состоит из двух частей — это левая часть с логотипом, и правая часть с контактной информацией. В нашем шаблоне блок для шапки уже имеется. Но не хватает двух внутренних блоков для логотипа и контактов. Сейчас мы их создадим. Открываем наш шаблон html в текстовом редакторе, и между тегами <div class="header">...</div> записываем два блока в таком порядке:

Верстка шапки

Блок <div class="logo"></div> — для логотипа, второй <div class="phones"></div> для контактов. Теперь добавим содержимое для этих блоков:

Верстка шапки

Сохраняем изменения. Открываем файл со стилями, и находим класс .header. У этого класса убираем свойство для фона, т.е. background-color, а также нам нужно указать высоту. Открываем макет в программе Adobe Photoshop, и при помощи инструмента Rectangular Marquee Tool (или горячая клавиша R):

Верстка шапки

выделяем область от самого верха макета до верхнего края блока меню:

Верстка шапки

Теперь как и в прошлом уроке, узнаем значение высоты, Image > Crop, Image > Canvas Size:

Верстка шапки

Открываем файл со стилями и для высоты прописываем значение 53px. Добавляем новые блоки:

Верстка шапки

Для тега body поставьте свойство font-family, со значением Arial, так как так как на макете шрифт у нас именно такой.

Пропишем свойства для блока .logo:

  • Прописываем свойство float: left, чтобы контакты обтекали логотип справа. 
  • Размер шрифта устанавливаем 36px — font-size: 36px;
  • Цвет — черный, color: black;
  • Тень для текста text-shadow: 0 1px 0 rgba(255,255,255,0.9); 0 — отсутпы по горизонтали, 1px — отступ по вертикали, в данном случае один пиксель снизу, 0 — радиус размытия, rgba — соответсвенно значения red green blue и alfa, тень белого цвета, прозрачность 0.9%.
  • Устанавливаем жирное начертание при помощи свойства font-weight со значением bold — font-weight: bold;
  • Отступ внутри блока сверху — padding-top: 10px;

Верстка шапки

Пропишем стили для блока .phones:

Верстка шапки

Отступы допишем позже. Теперь заходим в шаблон html, и дописываем в нем необходимые теги. Первые три буквы в логтипе красные, поэтому нам надо заключить их в тег <span>...</span> с классом, например, red, а .com заключим между тегами span с классом beige.

Верстка шапки

В стилях пропишем свойства для новый классов:

Для span.red цвет color: #930708; а для span.beige цвет и размер шрифта: color: #b5b4ab, font-size: 24px:

span

Сохраните изменения, и откройте html-документ в браузере. Логотип готов. Переходим к контактам. Таким же образом заключаем между тегами span те части, для которых нужно прописать стили: 

Верстка шапки

Тег <i></i> для курсивного начертания. Для него же пропишем свойства:

Верстка шапки

Теперь допишем свойства для .phones, нам нужно указать отступ и межстрочный интервал, в макете расстояние между строками меньше, чем сейчас у нас в документе, поэтому записываем последние две строки:

Верстка шапки

Шапка готова. В следующем уроке сверстаем меню.

Источник: http://psd-html-css.ru/css/verstka-shapki

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Верстка шапки | | 2012-04-08 16:07:00 | | Статьи Web-мастеру | | Переходим к шапке. Она у нас такого вида:Как видно из макета шапка состоит из двух частей — это левая часть с логотипом, и правая часть с контактной информацией. В нашем шаблоне блок для шапки уже | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: