Урок 2. Блочная верстка сайта

верстка-сайтов-урок-2

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

Ну-с, не будем тянуть резину. Начнем, не забудьте взять чашку кофе и печенек ;-)

Почему блочная верстка лучше табличной?

Я, конечно, не сказал бы, что табличная верстка просто ужас и никогда не делайте так. Можно найти тысячи отличных сайтов на таблицах. Думаю, можно сказать так: таблицы — классический стиль верстки, блоки — новый стиль. Блочная верстка сегодня также популярна как и ООП в php. Т.е. в начале своего пути таблицы всех устраивали, но с усложнением сайтостроения на смену старой идеи пришли новые. Ну, в общем, давайте разбираться.

Табличная верстка сайта осуществляется как не странно с помощью таблиц. :) Помните как Вы создавали свои первые html страницы в школе, писали <table><tr><td>… и т. д. ? Так, вот сегодня, это прошедший этап. Сравните табличную и блочную верстки одного и того же:

<table>
<tr>
<td> sometext </td>
</tr>
</table>

И:

<div> sometext </div>

Думаю, некоторые преимущества видны невооруженным глазом :-) .

Еще один не маловажный факт: дивы более гибкие, а также говорят, что табличная верстка весит больше, чем блочная :) . По ходу, выходов уроков Вы будете чувствовать на себе плюсы и минусы div‘ овой верстки.

Думаю, я Вас убедил перейти на блоки. Но, при этом, я не говорю Вам вообще отказаться от таблиц! ;-) Грамотное применение таблиц придет со временем.

Суть блочной верстки.

С таблицами все понятно. А что такое блочная верстка, как ее настраивать, изменять и т .п. ??

Давайте обратимся к нарисованному мной корявой красивой схеме :) .

блочная-верстка-сайта

Не пугайтесь, но это блок, с которым мы будем сталкиваться. А этот блок может быть всем — картинка, текст и т. д. Изучив css, Вы понимаете о чем я. Остальных будем учить по ходу наших уроков.

Итак, каждое содержимое по умолчанию имеет рамку, внутренний и внешний отступ. Рамку мы можем не видеть, она может просто равна 0. Внутренний отступ (padding) — отделяет содержимое от самого блока.

Внешний отступ (margin) – отделяет блоки друг от друга (пустое пространства вокруг блока).

Вроде все просто и понятно. Давайте переходить уже к практике.

Наш будущий сайт.

Хотите увидеть, что же мы будем верстать? Барабанная дробь, … та-да, вот и он — шаблон :-)
psd-шаблон-верстки-сайта

Данный PSD шаблон был безжалостно скачан с efimov.ws :-). В конце нашего урока Вы сможете найти все исходники и PSD шаблон. Спасибо авторам ;-)

Давайте для начала определим директории для html сайта. Создаем папку на своем компьютере, например, my_first_job. И внутри этой папки создаем еще 2: images (img) и css, в них будут хранится картинки и каскадные таблицы стилей соответственно.

Теперь вернемся к шаблону. Разобьем его на функциональные зоны. Выделим header, content, sidebar и footer. По рисунку понятно, что есть что.
разметка-верстки-на-функциональные-зоны

Теперь перейдем к файлу index.html, точнее создадим его. Открываем свой текстовый редактор и создаем html файл. Просто сохраните пустую страницу в нашу папке с разрешением .html (index.html).

Добавляем DOCTYPE.

Что это объяснять не буду. Подробнее об этом можете почитать на htmlbook.

Мы будем использовать, т. н. «мягкий» или переходный доктайп:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

UPDATE: Рекомендую уже используйте доктайп html5.

<!doctype html>

Откроем тег html, для того чтобы начать писать нашу разметку.

<html></html>

Следите за вложенностью тегов. Вся разметка располагается между тегом html. Необходимо, чтобы теги открывались и закрывались в необходимых нам местах.

Теперь зададим заголовок странице с помощью тега <title>. Все очень просто:

<title>Моя первая верстка</title>

Добавим данные тега head между тегом html:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="ключевые слова,верстка сайта,спасибо,gtalkkz">
<meta name="description" content="Моя первая верстка!" >
<meta name="author" content="admin">
</head>

Разберем:

<head>…</head> открытие и закрытие тега head, подключение css файлов и мета тегов идет до закрытия тега head! В основном здесь информация для браузеров и поисковиков.

Почти все теги необходимо закрывать!

Мета теги предоставляют некую информацию браузерам (и людям тоже) о html странице – кодировку, формат страницы, ключевые слова, описание, автора. Так как мы используем html с «мягким» doctyp’ом, то закрытие мета тегов нет необходимости.

Идем далее по структуре html. Тег body – вывод основной информации, визуально видимой. Добавим его сразу после head:

<body> </body>

И вот так вот выглядит наш рабочий файл index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая верстка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="ключевые слова,верстка сайта,спасибо,gtalkkz">
<meta name="description" content="Моя первая верстка!" >
<meta name="author" content="admin">
</head>
<body>
</body>
</html>

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

Если у Вас проблемы с корректным отображением теста почитайте о настройке кодировки в файлах и программах.

с/у УтБ

PSD шаблон (1574) html исходники 2 урока (1094)


Комментарии к статье

  • #

    Спасибо за интересную статью, подпишусь!

  • #

    Ой это я сам неправильно ввел, прошу удалить комменты. Все исправил все равно одна ошибка где то
    Прошло, 1 warning(s)

    • #

      это не ошибка, а предупреждение, что-то типа того, что валидатор не отвечает за введенную кодировку. Если залить код на сервер (хостинг) и проверить через ссылку, то warning (не ошибка, а предупреждение ;) ) не должно быть

  • #

    Проверил а валидность, вон что пишет
    13 Ошибок, 1 warning(s)

  • #

    Вы написали проверку на валидацию прошла – а как прошла? По подробнее нельзя ли???

  • #

    Приветствую. Вам бы сделать так, чтоб картинки разворачивались более шире, а то мелкие очень

  • #

    Кофе «Java» не самый вкусный ))))
    Что-то у вас как-то коротенько получилось.
    Вот тут:

    “Следите за вложенностью тегов. Вся разметка располагается между тегом html. Необходимо, чтобы теги открывались и закрывались в необходимых нам местах.”

    Слежу за влдоженностью и какая она должна быть эта вложенность?

    • #

      чтобы теги открывались и закрывались

      если в div вы поместили span, то span должен быть вложен в div и соответственно закрыт до закрытия div’a :)
      надеюсь объяснил)

  • #

    При работе с кодом для WordPress рекомендуют использовать не любой блокнот, а Notepad++ и еще какой-то без BOM.
    Вопрос, а для верстки это имеет значение? Или тоже могут потом быть проблемы с кодировкой?

    • #

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

  • #

    Зачем вообще размещать вопросы, если вы на них не отвечаете, еще и вопрос не полностью…

    • #

      Извините, Вы имели ввиду blogger?
      В принципе, если есть в настройках, то, конечно, можно удалить, зачем Вам дубли?
      All – если в метатеги, то закрыть/открыть для ПС все страницы

  • #

    1. Подскажите, пожалуйста, если я В блоггере задаю “Метатеги” в Разделе “Настройки” под названием “Настройка поиска” ,
    и присваиваю noindex, nofollow арвхивам и страницам поиска (также в блоггере в «поисковые роботы и индексация»)

    Тогда в шаблоне стоит удалить эти строки?

    2. Что означает All?

  • #

    Я кое-что не поняла. А где мы описываем сами блоки в выше приведенном коде? Как правильно это делать по приведенному шаблону?

    • #

      это подготовка к серьезной работе, все, что написали в index.html это стандартный набор html файла. Блоки появятся в 4 уроке ;)

      • #

        Ну что ж, буду ждать четвертого урока, с нетерпением!!!

        • #

          чтобы не пропустить подписывайтесь ;)

  • #

    Блочная верстка намного проще и удобнее, как по мне. Спасибо за информацию))

    • #

      Конечно, мы всегда стремимся к совершенству ;)

      @Людмила конечно пробуйте, никогда не поздно учиться, но всегда можно использовать свои знания

      @Роман согласен, например, часто в компонентах joomla используется таблица.

  • #

    Еще не пользовалась блочной версткой, но по описанию вроде не плохая! Надо попробовать))

  • #

    ТАбличная верстка иногда ооочень нужна, но она нужна не при написании шаблонов, конечно для них только дивы, а вот для какого то блока информации, иногда только она и нужна-