Практиковался в верстке макета от известной web-студии TemplateMonster. На сайте этой студии есть бесплатные шаблоны с psd-исходниками.
Почему именно этой студии? Ну, во-первых, раз студия известная, то ее продукты должны быть хорошего качества. Как макеты, так и сверстанные по этим макетам шаблоны. А на чем же еще учиться верстать, как не на самом лучшем? Только так можно самому научиться хорошо верстать - когда перед глазами пример грамотного и качественного кода.
Ну, а во-вторых, надоели мне любительские макеты. Кривые, перегруженные нестандартными шрифтами, сделанные в ужасной цветовой гамме. Хоть таких макетов в Интернете - пруд пруди, но вот из-за их качества я решил немного отдохнуть и заняться профессиональными работами.
Почему я так делаю - беру готовые чужие работы и пытаюсь их повторить? Интуитивно для себя я пришел к выводу, что это единственный путь, который может привести меня к собственному умению верстать. Да, первоначально я читал книги, статьи, смотрел видеокурсы (хорошие и плохие).
Плохие учебные материалы я выбрасывал, не дочитав и не досмотрев до конца. Зачем терять время на то, что тебя не сможет научить? Или, еще хуже, научить неправильно, чтобы потом пришлось еще тратить время на переучивание?
Что же я делаю с готовыми чужими работами? Во-первых, я ищу готовые шаблоны с исходниками. Шаблон откладываю на время в сторону и приступаю к самостоятельной верстке по psd-макету. По мере того, как выполняется работа, у меня накапливаются вопросы: как это можно сделать, или - как это можно сделать лучше. Когда код полностью готов, я открываю (с дрожью в руках) чужой шаблон, и смотрю, сравниваю со своим.
Таким образом, мне хорошо видно - где я сделал промах, ошибку или недочет. При этом одновременно делается два дела - я “набиваю руку” и учусь. Скажу от себя, что для меня по насыщенности и полезности такие “уроки” многократно превосходят чтение книг или просмотр видеокурсов. Ни тот, ни другой не научат самому делать верстку сайта.
С длинным вступлением закончено. Приступаю к основной теме данной статьи.
Заключается она (если можно так сказать) в двух словах - элемент strong. Ну и что, спросите вы. Элемент как элемент, ничего в нем необычного нет. Мы прекрасно знаем, для чего предназначен тег strong - чтобы сделать выделение полужирным начертанием какого-либо участка текста на странице. И будете не правы! Чтобы подтвердить свои слова, приведу скриншот готового шаблона “Монстров”:
Не знаю, как вас, а меня несколько удивило это, когда я открыл шаблон для сравнения со своим собственным. Конечно, опытные верстальщики могут сказать: “Ну и что? Все правильно и мы это давно знаем и применяем”. Но для меня это было небольшим открытием. Грешным делом, я сперва подумал, что кодер ошибся второпях)
Спрашивается, зачем вставлять строчный элемент в ту часть кода страницы, где заведомо могут применяться только блочные элементы? Чтобы потом писать лишние правила CSS для преобразования его в блочный? И только потом уже позиционировать? Ответа для себя не нашел, поэтому полез в Интернет. А точнее - на известный htmlbook.ru.
И я нашел ответ на свой вопрос. Нужно было только внимательно читать! Все оказалось просто.
То, что элемент 1
strong
1
b
1
strong
Элемент 1
b
1
strong
Про семантику я рассказывать не буду - в Сети много материалов, написанных на эту тему. А вот применительно к данному примеру, все получается правильно. Номер телефона в шапке сайта является очень важной (если не самой важной после логотипа) частью.
И ее необходимо выделить, прежде всего логически. Ведь браузеры рассматривают html-страницы прежде всего с точки зрения семантической логики. Поэтому кодер, который создавал данный шаблон, заключил номер телефона в тег strong, чтобы показать браузеру, что это не просто какой-то текст, а важный текст!
CSS-правила, которые потом было необходимо добавить к этому элементу, я описывать не буду. Зачем - они и так хорошо видны на рисунке. Более того, там нет ничего сложного.
Единственный нюанс - кодер вынужден был “извернуться” и преобразовать строчный элемент в блочный 1
display:block
На этом все.