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

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

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

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

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

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

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

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

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

Элемент strong

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

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

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

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

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

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

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

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

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

На этом все.


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

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

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

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

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

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

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

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

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

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

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

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

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

Поэтому фон слоя div id="nav" будет видет только частично, лишь его нижний краешек, для которого и отводится роль фона навигации. Для слоя 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;
}

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

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

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

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

Теперь достаточно сместить список вправо с помощью 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;
  }

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

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

Все, шапка сайта готова. Если посмотреть на html-код, то видно, что он “правильный”. То есть, он не замусорен всякими 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-шаблона вырезанную картинку-логотип верстальщик оборачивает в ссылку (ибо логотип всегда должен быть ссылкой), которую в свою очередь оборачивает в заголовок первого уровня H1. Тег h1 должен быть один на всей странице, и это один из самых главных тегов для SEO - по нему поисковые машины находят сам сайт.

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

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

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

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

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

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

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

На этом все.


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

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

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

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

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

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

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

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

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

Осталось сместить текст вправо на заданную величину. Это выполняется с помощью правила 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;
}

Вот задача и решена. Разобрался с центрирование текста по-вертикали с помощью правил display: table, display: table-cell, vertical-align: middle.

На этом все.


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

Однако, при выделении текста инструментом “Horizontal Type Tool” в панели Photoshop показывает мне размер шрифта в points. А мне необходимо в правилах CSS записать размер шрифта в пикселях.

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

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

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

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

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

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

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

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

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

На этом все.