Практиковался в верстке макета от известной web-студии TemplateMonster. На сайте этой студии есть бесплатные шаблоны с psd-исходниками.

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

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

Почему я так делаю - беру готовые чужие работы и пытаюсь их повторить? Интуитивно для себя я пришел к выводу, что это единственный путь, который может привести меня к собственному умению верстать. Да, первоначально я читал книги, статьи, смотрел видеокурсы (хорошие и плохие).

Плохие учебные материалы я выбрасывал, не дочитав и не досмотрев до конца. Зачем терять время на то, что тебя не сможет научить? Или, еще хуже, научить неправильно, чтобы потом пришлось еще тратить время на переучивание?

Что же я делаю с готовыми чужими работами? Во-первых, я ищу готовые шаблоны с исходниками. Шаблон откладываю на время в сторону и приступаю к самостоятельной верстке по psd-макету. По мере того, как выполняется работа, у меня накапливаются вопросы: как это можно сделать, или - как это можно сделать лучше. Когда код полностью готов, я открываю (с дрожью в руках) чужой шаблон, и смотрю, сравниваю со своим.

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

С длинным вступлением закончено. Приступаю к основной теме данной статьи.

Заключается она (если можно так сказать) в двух словах - элемент strong. Ну и что, спросите вы. Элемент как элемент, ничего в нем необычного нет. Мы прекрасно знаем, для чего предназначен тег strong - чтобы сделать выделение полужирным начертанием какого-либо участка текста на странице. И будете не правы! Чтобы подтвердить свои слова, приведу скриншот готового шаблона “Монстров”:

Элемент strong

Не знаю, как вас, а меня несколько удивило это, когда я открыл шаблон для сравнения со своим собственным. Конечно, опытные верстальщики могут сказать: “Ну и что? Все правильно и мы это давно знаем и применяем”. Но для меня это было небольшим открытием. Грешным делом, я сперва подумал, что кодер ошибся второпях)

Спрашивается, зачем вставлять строчный элемент в ту часть кода страницы, где заведомо могут применяться только блочные элементы? Чтобы потом писать лишние правила CSS для преобразования его в блочный? И только потом уже позиционировать? Ответа для себя не нашел, поэтому полез в Интернет. А точнее - на известный htmlbook.ru.

И я нашел ответ на свой вопрос. Нужно было только внимательно читать! Все оказалось просто.

То, что элемент

1
strong
визуально выделяет обрамленный тегами текст полужирным начертанием, на самом деле ничего не говорит. Тут есть небольшая путаница между элементом
1
b
и элементом
1
strong
. И первый, и второй визуально делают строки “жирными” в окне браузера. Но вот разница между ними заключается в предназначении.

Элемент

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

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

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

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

Единственный нюанс - кодер вынужден был “извернуться” и преобразовать строчный элемент в блочный

1
display:block
для дальнейшего его позиционирования в шапке страницы.

На этом все.


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

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

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

В основу создания шапки я положил свойство вложенных слоев на

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

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

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

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

1
div id="wrap"
, которой прописываются свойства центрирования страницы и задания ей ширины:

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

Затем создается слой

1
div id="header"
, в котором будет располагаться шапка будущего сайта. Для нее прописываю совсем короткие свойства, с помощью которых гарантированно растягиваю шапку на всю ширину блока-родителя
1
div id="wrap"
и задаю ее высоту:

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

Затем создаю слой

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

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

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

Теперь создаю еще один слой

1
div id="head"
, в котором будет размещено еще одно фоновое изображение. По высоте оно меньше, чем фоновое изображение слоя
1
div id="nav"
и будет располагаться поверх этого слоя, перекрывая его.

Поэтому фон слоя

1
div id="nav"
будет видет только частично, лишь его нижний краешек, для которого и отводится роль фона навигации. Для слоя
1
div id="head"
явно задаю его высоту. Код со свойствами приведен ниже:

#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;
}

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

1
inline
), то ей невозможно задать правила, чтобы “растянуть” на всю высоту и ширину слоя-родителя
1
div id="logo"
.

Поэтому “превращаю” ссылку в блочный элемент с помощью свойства

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

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

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

1
div id="nav"
. Создаю ненумерованный список, который помещаю внутрь слоя
1
div id="nav"
. Так как по коду слой
1
div id="head"
расположен выше и имеет фиксированную высоту, то список займет все оставшееся пространство под ним:
1
70px - 50px = 20px
.

Теперь достаточно сместить список вправо с помощью

1
float: right
и прописать для него обычные свойства, чтобы расположить горизонтально и стилизовать:

#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;
    }

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

1
ul
и внутренним элементом(ами)
1
li
. Первоначально для них я прописал свойство
1
display: inline
.

Но после “наводки” Kray Storm с форума

1
forum.htmlbook.ru
проблема была решена. Для элементов
1
li
и я поменял свойство на
1
display: inline-block
и для я дополнительно задал высоту строки
1
line-height: 20px
, равную высоте блока
1
ul
. Зазоры пропали и пункты меню растянулись на всю высоту блока-родителя.

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

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

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

HTML-код:

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%;
    }

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

Блок-схема на div'ах шапки сайта

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

Готовая шапка сайта

На этом все.


Совсем коротенькая заметка, посвященная такому приему, как помещение текста в логотип.

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

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

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

Однако помимо правил семантики HTML, существует еще и такая вещь, как SEO. Без этой технологии не проживет ни один сайт на сегодняшний день, если он хочет быть известным, конечно. А если ему достаточно быть широко известным в узких кругах - тогда можно и забыть о ней.

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

1
H1
. Тег
1
h1
должен быть один на всей странице, и это один из самых главных тегов для SEO - по нему поисковые машины находят сам сайт.

Но для Google, Yandex и других систем наиболее важной составляющей сайта является текст. Поэтому внутрь конструкции

1
заголовок + ссылка + картинка
нужно вставить сам тест, который дублирует название сайта в логотипе. Например, таким образом:

Текст в логотипе сайта

Но тогда возникает небольшая проблема - текст ссылки появляется в логотипе, когда браузер отрисовывает картинку. Чтобы было понятно, о чем идет речь, привожу картинку ниже:

Текст ссылки внутри логотипа

Некрасиво, конечно. И совсем не то, что требуется. Как же убрать эту ссылку? Выход решается одной строчкой, с помощью свойства text-indent. Тексту задаем это свойство так, чтобы спрятать его из видимой части окна браузера.

Пример кода, решающего такую задачу, показан ниже:

Убрать текст из окна браузера

На этом все.


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

Логотип создается с помощью элемента - заголовка первого уровня

1
h1
. Внутри этого блочного элемента размещается ссылка. Решений подобной задачи в Интернете вроде бы много, но вот конкретно не нашел под себя. Решил с помощью форума
1
forum.htmlbook.ru
.

Необходимо сделать также, как и на psd-макете. Чтобы текст располагался по-вертикали по-центру, и был смещен при этом вправо. Часть html-кода, в котором создается логотип со ссылкой, показана ниже:

Логотип на psd-макете

Логотип сайта

С установкой фонового изображения проблем не возникает. Задаю ширину и высоту для блока h1 равной ширине и высоте логотипа. И прописываю для него картинку в качестве фона.

Текст-ссылку внутри блока также стилизую в соотвествии с тем, как она изображена на макете. А вот центрование текста - здесь есть некоторая тонкость. Спасибо SelenIT, что кратко и точно объяснил, как поступать в данном случае.

Итак. С помощью свойства

1
display: table
превращаю блочный элемент
1
h1
в табличный. Это делается для того, чтобы можно было разместить текст строго по центру вертикали, так как только таблица имеет свойство
1
vertical-align
.

Строчный элемент

1
а
, то есть ссылка, теперь расположена внутри таблицы. Поэтому превращаю ее в ячейку таблицы с помощью правила
1
display: table-cell
. Теперь можно применить к содержимому этой ячейки свойство
1
vertical-align: middle
, тем самым размещая ее по-центру по-вертикали.

Осталось сместить текст вправо на заданную величину. Это выполняется с помощью правила

1
padding-left: 80px
.

Ниже привожу кусок кода, отвечающего за стилизацию логотипа сайта:

.logo{
  background: url(../img/logo.gif) 0 0 no-repeat;
  height: 100px;
  width: 180px;
  display: table; /*!*/

}
.logo a{
  font-family: 'webfontbold';
  font-weight: bold;
  font-size: 20px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  display: table-cell; /*!*/
  vertical-align: middle; /*!*/
  padding-left: 80px;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил

1
display: table
,
1
display: table-cell
,
1
vertical-align: middle
.

На этом все.


Есть небольшая проблема. Столкнулся с тем, что при верстке макета необходимо получить размер шрифта, которым выполнена надпись.

Однако, при выделении текста инструментом “Horizontal Type Tool” в панели Photoshop показывает мне размер шрифта в

1
points
. А мне необходимо в правилах CSS записать размер шрифта в пикселях.

Чтобы заставить Photoshop показывать размеры шрифтов в пикселях, нужно выполнить несложные настройки.

Переходим в меню Photoshop по пути “Edit - Preferences - Units & Rulers”. Откроется окно, в котором неодходимо перейти в пункт “Units & Rulers”.

В верхнем разделе правой части окна находим “Units” с двумя полями - “Rulers & Type”:

Окно настроек единиц измерения в Photoshop

В выпадающем списке поля “Type” меняем значения с “Points” на “Pixels”. Сохраняем изменения кнопкой ОК и и выходим из настроек. Проверим результат изменений. Снова выбираем инструмент “Horizontal Type Tool” и выделяем мышью текст в макете.

Смотрим на панель:

Размер шрифта в пикселях

Что и требовалось. Теперь Photoshop автоматически показывает размер шрифта в пикселях, что удобно при написании правил в CSS.

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

На этом все.