Код html для сайта шапка: Как правильно написать HTML код для шапки сайта? — Хабр Q&A – Грамотное адаптивное выравнивание шапки сайта / Habr

Шапка сайта и навигационное меню с помощью CSS – Zencoder

Просматривал видеокурс по блочной верстке сайта от Андрей Морковина.

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

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

В основу создания шапки я положил свойство вложенных слоев на ‘ах. Кстати, с этим методом я только недавно познакомился в другом видеоуроке от Дмитрия Семенова. Далее, предполагается, что размеры всех фоновых изображений известны (на практике так и происходит, при вырезании их из psd-макета).

Для чистоты эксперимента приведу эти размеры: ,

1
bg-header.gif - 800x50px
, . В CSS-свойствах сделал для них подстановку с помощью фоновой заливки цветом, для подстраховки.

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

#wrap{
  width: 800px;
  height: 100%;
  margin: 0 auto;
  background: #c0c0c0;
}

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

#header{
  width: 100%;
  height: 70px;
}

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

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

#nav{
  background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
  height: 70px;
}

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

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

#head{
  background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
  height: 50px;
}

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

При этом снова воспользуюсь фоновым изображение, которое вложу внутрь этого слоя. Никаких img в html-коде! Позиционировать или смещать его никуда не надо, так как он по-умолчанию расположится в левом верхнем углу блока (

как мною задумано для простоты эксперимента). Только явно задам этому слою высоту и ширину, равную высоте и ширине фонового рисунка:

#logo{
  background: url(i/logo.gif) #36cf18 0 0 no-repeat;
  width: 30px;
  height: 30px;
}

Чтобы сделать слой кликабельным, помещаю внутрь него ссылку. Так как изначально она является строчным элементом (), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя .

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

#logo a{
  display: block;
  width: 100%;
  height: 100%;
}

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

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

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

#nav ul{
  list-style-type: none;
  float: right;
}
  #nav li{
    display: inline-block;
  }
    #nav a{
      text-decoration: none;
      color: #fff;
      font-weight: bold;
      margin-right: 15px;
      line-height: 20px;
      display: inline-block;
    }

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

Но после “наводки” Kray Storm с форума проблема была решена. Для элементов и я поменял свойство на и для я дополнительно задал высоту строки , равную высоте блока . Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими

. Разметка выполнена простыми свойствами CSS, который будут гарантировано работать почти во всех браузерах. При этом она никуда не “съедет”.

Ниже приведу полный код html-каркаса и CSS-кода.

HTML-код:

CSS-код:

/*  reset  */
  *{
    margin: 0;
    padding: 0;
  }

  /*  main */
  #wrap{
    width: 800px;
    height: 100%;
    margin: 0 auto;
    background: #c0c0c0;
  }
  #header{
    width: 100%;
    height: 70px;
  }
  #nav{
    background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
    height: 70px;
  }
    #nav ul{
      list-style-type: none;
      float: right;
    }
      #nav li{
        display: inline-block;
      }
        #nav a{
          text-decoration: none;
          color: #fff;
          font-weight: bold;
          margin-right: 15px;
          line-height: 20px;
          display: inline-block;
        }
  #head{
    background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
    height: 50px;
  }
  #logo{
    background: url(i/logo.gif) #36cf18 0 0 no-repeat;
    width: 30px;
    height: 30px;
  }
    #logo a{
      display: block;
      width: 100%;
      height: 100%;
    }

Здесь я представлю нарисованную мною схему расположения всех блоков в шапке сайта:

И, наконец, результат всего - готовая шапка сайта:

На этом все.


csshtml

Как изменить шапку сайта (часть 1)

Как изменить шапку сайта (часть 1)

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

Когда я открываю исходный код чужого сайта, то за редким исключением, вижу неструктурированный HTML код, непоследовательно написанный CSS и почти нет комментариев. Ориентироваться в таком хаосе, очень сложно и я понимаю, что мне быстрее сделать все заново.

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

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

Так выглядела шапка до изменений:


Как изменить шапку сайта (часть 1).

У данного творения просматривается явная нехватка места для всех элементов. От такого плотного соседства элементов и отсутствия пустого пространства, глаза собираются в кучу. Надо разрядить пространство, за счёт создания нового ряда для контактной информации.

Что бы я изменил в дизайне?

  1. Шрифт и цвет у логотипа
  2. Размер и цвет остального шрифта
  3. Убрать зеленую полосу
  4. Блок с контактами разместить на верхней панели

После изменений:


Как изменить шапку сайта (часть 1).

Между тегами head в HTML файле:

//прописываем мета тег для адаптивности
<meta name="viewport" content="width=device-width, initial-scale=1">
//подключаем другие шрифты
<link href="https://fonts.googleapis.com/css?family=Forum|Roboto+Slab:400,700" rel="stylesheet">
//подключаем библиотеку Font Awesome
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
//подключаем внешний файл стилей, сюда будем писать стили
<link rel="stylesheet" href="style.css">
//скачиваем и подключаем файл нормализации стилей
<link rel="stylesheet" href="normalize.css">

Делать верстку мы будем на flexbox.

Первый ряд – панель с контактами (top header).

HTML разметка

В блок-контейнер с классом top-header, поместим три флекс-элемента – абзацы с текстом.

<div>
  <p>Массажный салон для вашего здоровья и красоты</p>
  <p><span>Tel.</span> (+372) 5514704, 58079045</p>
  <p><span>Инфо и запись:</span> ежедневно с 9:00 до 21:00</p>
</div>

CSS стили

/* Общие стили для шапки */
body {
  font-family: 'Forum', cursive;
  color: #777;
  background-color: #fff;
}

Инфоблоки встанут в ряд благодаря display: flex. Свойство space-around равномерно распределяет пустое пространство между инфоблоками. Однопиксельная серая рамка, визуально разграничит верхнюю панель от самой шапки.

/* Флекс контейнер для верхних инфо-блоков */
.top-header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  font-size: 100%;
  border-bottom: 1px solid #efd0d0;
  position: relative;
}

Выделим некоторые слова зеленым цветом.

/* Зеленый цвет у текста инфо-блоков */
.top-header .green {
  color: #b2db41;
  font-weight: bold;
}

Временно подсветим красной и черной рамками, чтобы было ясно, где флекс-контейнер, а где флекс-элементы.

Как изменить шапку сайта (часть 1).

Второй ряд – шапка (header)

Слева направо, первым идет логотип, а затем навигационное меню.

HTML код

Начинается с открывающего тега header, внутри которого блок с логотипом. Логотип вставляется, как ссылка, ведущая на главную страницу.

<header>
  <div>
    <a href="#">Massaaži<span>Maailm</span></a>
  </div> ...

CSS код

/* Флекс контейнер для шапки */
header {
  display: flex;
  justify-content: space-around;
  padding: 5px;
  border-bottom: 5px solid #b2db41;
}

/* Стили для всех ссылок внутри флекс контейнера */
header a {
  display: block;
  color: #212121;
  padding: 12px;
  text-decoration: none; /* убирает подчеркивание */
  font-size: 100%;

  text-shadow: 0 1px 0 #fff;
  border-radius: 4px;
}

Здесь мы указываем относительную ширину блока под логотип, значит остальные 70%, будет занимать навигация. Задавая проценты, можно точнее распределять детей-элементов в контейнере-родителе.

/* Ширина дочернего блока под логотип */
.wrap-logo {
  width: 30%;
}

Задавая размеры шрифта в %, мы заботимся о супер больших экранах, ведь пиксели жестко задают размер.

/* Стилизация логотипа */
.wrap-logo #logo {
  font-family: 'Roboto Slab', serif;
  font-size: 200%;
  font-weight: bold;
}

Логотип смотрится свежее, если его сделать двухцветным.

/* Зеленый цвет у части логотипа */
.wrap-logo span {
  color: #b2db41;
}

Продолжение следует.

  • Как изменить шапку сайта (часть 1). Создано 08.04.2019 10:20:30
  • Как изменить шапку сайта (часть 1). Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

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

Как правило, когда мы с вами начинаем создавать макет любой веб-страницы, мы начинаем делать это с шапки сайта.

Как правило, на всех веб-страницах сайта - эта шапка сайта есть. 

В фреймворке Bulma за шапку сайта отвечает специальный раздел документации, который называется Layout - Hero. 

Пример кода для создания самой простой шапки сайта следующий:

<section>
  <div>
    <div>
      <h2>
        Hero title
      </h2>
      <h3>
        Hero subtitle
      </h3>
    </div>
  </div>
</section>

Код для шапки сайта, как правило размещается сразу после открывающего элемента <body>.

По сути, шапка сайта создается с помощью класса hero и hero-body.

Чтобы изменить фоновый цвет, можно добавить какой-либо модификатор цвета для элемента с классом hero.

Например,

<section>
...
</section>

Т.е. просто скопировав заготовку кода из документации Bulma - мы с вами создали полноценную шапку сайта.

Если нам нужно в качестве фонового цвета использовать градиент, можно добавить модификатор is-bold.

<section>
…

Есть также модификаторы, который отвечают за размер. Есть 3 основных значения:

medium

large

fullheight

Например,

<section>
…

Сделает размер шапки "средним" размером.

Это основы работы с шапкой (hero) в фреймворке Bulma. Все очень просто, копируем заготовку и применяем к ней различные модификаторы: для цвета, градиента или размера.

Вот общий алгоритм, как это делается.

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

Из PSD в HTML. Вёрстка шапки

Наша шапка состоит из двух блоков: блок с логотипом в левой части, и блок с контактами в правой части. Запишем в файле index.html код для шапки:

<div>
    <div>
        <div>

        </div>
        <div>

        </div>
    </div>
</div>

В блоке с классом <div></div> пропишем путь к изображению при помощи тега <img src="" alt="">. Так как логотипы в шапке обычно являются ссылками, ведущими на главную страницу, то этот тег мы заключим между тегами <a href=""></a>:

<div>
    <a href=""><img src="img/logo.png" alt=""></a>
</div>

В блоке с классом <div></div> запишем контактную информацию, каждую строку поместим в тег <p></p>:

<div>
    <p>Телефон: 8 800 2000 01 01<br>звонок бесплатный</p>
    <p>E-mail: [email protected]</p>
    <p>
        <a href=""><img src="img/vk.png" alt=""></a>
        <a href=""><img src="img/fb.png" alt=""></a>
        <a href=""><img src="img/tw.png" alt=""></a>
        <a href=""><img src="img/gp.png" alt=""></a>
    </p>
</div>

Запись звонок бесплатный на макете находится на новой строке, поэтому перед ней мы поставили тег <br>. Иконки социальных сетей являются ссылками, поэтому их мы добавили между тегами <a href=""></a>.

Переходим к стилям. Первым делом нам нужно указать высоту и фоновое изображение для селектора #header:

#header {
    height: 148px;
    background: white url("img/bg-header.jpg") left top no-repeat;
}

Для блока с логотипом укажем следующие свойства:

.logo {
    margin-top: 51px;
    float: left;
}

Для блока с контактами:

.contacts {
    float: right;
    text-align: right;
    margin-top: 25px;
}

Эти свойства должны применяться только для тех блоков, которые лежат именно в шапке, т.е. в блоке <div></div>, поэтому здесь мы добавим перед стилями (.logo и .contacts) контекстные селекторы:

#header .logo {
    margin-top: 51px;
    float: left;
}

#header .contacts {
    margin-top: 25px;
    float: right;
    text-align: right;
}

Для абзацев в блоке с контактами запишем следующие свойства:

#header .contacts p {
    font: bold 18px/14px Arial;
    color: black;
}

Теперь нам нужно добавить дополнительные классы для выделенных слов: Телефон, E-mail, а также звонок бесплатный. В шаблоне index.html запишите:

<p><span>Телефон:</span> 8 800 2000 01 01<br><span>звонок бесплатный</span></p>
<p><span>E-mail:</span> [email protected]</p>

В стилях запишем отдельно для селекторов .green и .gray цвета:

.green {
    color: #1d8b15;
}

.gray {
    color: #666;
}

И для отдельно взятых элементов в шапке запишем размер и начертание шрифта:

#header .contacts p .green {
    font-size: 14px;
    font-weight: normal;
}

#header .contacts p .gray {
    font-size: 12px;
    font-weight: normal;
}

С шапкой разобрались. Переходим к горизонтальному меню.


Видео к уроку

Адаптация HTML шаблона (шапка сайта): WebProject

Следующим шагом будет адаптация кода шапки сайта. Для удобства редактирования выполним её в виде виджета.

Шапка сайта

Шапка сайта состоит из изображения, заголовка и текста:

<div><img src="images/main_img.png" alt="image" />
  <h3>best proposition</h3>
  <p><strong>More beautiful templates </strong><br />
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna a turpis ornare aliquam id hendrerit nisl. Pellentesque adipiscing blandit mollis. Curabitur varius est et sem rhoncus et pretium massa molestie. </p>
  <div></div>
</div>

Виджет шапки сайта

Для редактирования элементов шапки оформим её в виде виджета:

<!--{widget:header}-->
<div><!--{photo}--><img src="{src}" alt="{title}" /><!--{/}-->
<h3>{title}</h3>
{text}
<div></div>
</div>
<!--{/}-->

Код начала виджета <!--{widget:header}--> указывает программе, что с этого места начинается код виджета. Чтоб этот код выполнился корректно, в проекте должен быть определен виджет группы header. В шаблоне RedPlanet определен похожий виджет для картинки шапки сайта, используйте его. Закройте редактор шаблона, выделите виджет Шапка и перейдите на вкладку Настройки, в поле Группа напишите header. Теперь этот виджет будет отвечать за шапку сайта нового шаблона.

Картинка начинается с кода <!--{photo}-->, параметры src и title будут относиться к изображению. Если для картинки не задан заголовок, будет использован заголовок родителя, это позволяет автоматически заполнять атрибут alt для изображения. Код <!--{/}--> закрывает код изображения, после него все указанные переменные будут относиться к виджету. Соответственно переменные title и text, которые идут ниже, будут подставлены из виджета. Завершается виджет кодом <!--{/}-->.

Добавьте текст и замените изображение виджета на изображение images/main_img.png кликнув по нему 2 раза и выбрав нужный файл. Теперь выполните просмотр сайта либо нажмите кнопку Обновить в окне предварительного просмотра. Если все сделано правильно, вы увидите шапку сайта с новым заголовком и текстом.

Смотрите так-же:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *