Как правильно делить сайт на блоки?

Question

[Star Trooper]

Всем здравствуйте!
В то время, когда наши космические корабли бороздят просторы Вселенной, у меня возникли вопросы, потому прошу помощи и совета.
1. Посоветуйте статьи/новости/что угодно, где рассказывают как правильно разбивать сайт перед версткой. То есть что лучше отдать под header, что в footer и т.д.
2. Есть простенький сайт и с ним возник вопрос, как мне его разбить. Даты которые слева, отдать их под sidebar или учитывать с правой частью там где контент?
Просто нашел 2 решения (если даты я не делаю под sidebar):
1. Дату и контент делаю как 2 div'a и по необходимости у контентной части меняю фон.
2. "Играюсь" с градиентом, как привели примером тут, но немного сложновато.
Или может все таки часть с датами отдать под sidebar отдельно?
Заранее спасибо Вам за ответы! :-)

Answer 1

[Pavel K]

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

По ссылке если уж верстать дивами, то каждая эм "новость" - див, в диве ещё два, один из них под дату, другой под текст. Иначе если Вы будете делать сайд-баром (отдельный див я так понимаю во всю высоту и рядом отдельный див под текст) то проблематично будет их выровнять что бы даты начинались там же где и контент по высоте, если не фиксированным делать.

Заголовок в див, ниже поля recent search и тд ещё в один див.

Comments

[Star Trooper]

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

[Pavel K]

Может быть и есть, но давненько я был новичком, поэтому не слежу за этим =) Могу предложить посмотреть bootstrap-3.ru/bootstraptheme.php и попробовать осваивать вёрстку так.
Т.е. от сложного к простому. Но это моё имхо.

Answer 2

[Therapyx]

2) имхо лучше в контенте. Делаешь 1 основной див class test с шириной 100% и высотой Auto, в него пихаешь еще 2. к примеру class test2 - ширина 10%, class test3 - ширина 90%, задаем классам нужные параметры и получаем:

<div class="test1">
    <div class="test2">date</div>
    <div class="test3">text</div>
</div>

а ну и конечно же эти блоки еще в 1 основной.

Answer 3

[Юлия Старченко]

Даты не советую выносить в sidebar. Они относятся к контенту, поэтому не вижу смысла выносить их отдельно, причем дата и текст, относящиеся к ней, должны быть в одном блоке, что-то вроде:

<div class="item1">
    <div class="date">Дата</div>
    <div class="text">Текст</div>
</div>
<div class="item2">
    <div class="date">Дата</div>
    <div class="text">Текст</div>
</div>

как правильно разбивать сайт перед версткой

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

Семантика или разметка со смыслом
Семантика: что всё это значит

Answer 4

[xmoonlight]

Проще и нужно! таблицами (в данном случае), т.к. в CSS3 есть псевдоклассы для добавления стилей к элементам на основе нумерации в дереве элементов.
Вот мой пример