Алноритм вёрстки сайта на div'ах.

[Bayanruby]

Здравствуйте.

Почитав теории на htmlbook.ru про блочную вёрстку решил перейти к практике.

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

Сейчас решил всерьёз заняться этим делом и сверстать свой первый сайт на дивах.

Решил начать верстать с этого макета http://forum.htmlbook.ru/index.php?showtopic=13276

Начинаю:

1 - для начала макет нужно разрезать в фотошопе, вот как я решил его разрезать (http://s53.radikal.ru/i141/1103/3b/00ccb1be7b3c.jpg)

Пункт 1,2,3 это шапка сайта, для её быстрой загрузки я решил её разрезать на 3 части. В средней части, с помощью ксс, незная как =), сделаю ссылки и надпись сверху.

Пункт 4 обычный столбец

Пункт 5 тоже столбец + картинка, под пунктом 6

Пункт 8 - это правый столбец. В нём, под пунктом 9 и 10, картинки, а под пунктом 7, кусок шапки. Потом в ксс я какнибудь сделаю 7 пункт фоном, прижму к верху и на этом фоне будет текст.

Под пунктом 11 я сделаю, из этого куска, фон и на нём будет текст

Вот такой у меня алгоритм =)

Правильный? Или есть недочёты, может есть способ полегче моего велосипеда?

После оценки спецов приступлю к вёрстки в ШТМЛ и ЦСС.

Заранее спасибо.

[swetlana]

Ошибка уже в первом пункте.

Разрезать (по крайней мере так, как показано на картинке) — это техника бородатых девяностых. Это и есть табличная вёрстка.

Элемент вёрстки должен быть логически осмысленным.

То есть, что видим на макете, то и в вёрстке.

Ознакомьтесь например с таким вариантом вёрстки этого же макета.

И если по форуму поискать, то ещё есть варианты.

[Bayanruby]

Невозможно найти удалённый сервер

Элемент вёрстки должен быть логически осмысленным.

То есть, что видим на макете, то и в вёрстке.

Так я же комментировал для чего разрезал. И что у меня не логично?

Edited March 8, 2011 by Bayanruby

[swetlana]

да всё нелогично.

Где структура документа?

Например огрызок №3 — это что?

7 и 8 — это что?

Почему какие-то бессмысленные куски?

Почему главный заголовок порезан пополам? Почему один из подзаголовков порезан пополам?

Почему вообще за отправную точку берётся оформление, а не содержание?

[Bayanruby]

Там всё подписано.

Видно не зря создал тему. Что мне делать, как мне быть? Как правильно делать?

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

[swetlana]

там подписано, да.

Но чем то, как подписано, отличается от дремучих методов тёмных девяностых?

Ещё раз повторю: ознакомьтесь с тем, как уже делали этот же макет до вас.

• http://forum.htmlbook.ru/index.php?showtopic=24640 — тема на форуме. http://www.greymlelelele.chat.ru/ — реализация.
  
• http://forum.htmlbook.ru/index.php?showtopic=24673 — тема на форуме. http://swetlanabayer.ru/blog/examples/raira/ — реализация.
  
• http://psywalker.ru/SAITS/Raira/main-page.html — ещё одна реализация. Где тема об этом — не знаю.
  
• если хорошенько поискать, можно ещё несколько вариантов найти.
  

ну и ещё один вопрос, скорее общефилософский:

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

[Bayanruby]

Ага, я понял свою ошибку. Перерезал я макет чуток =)

Самый понятный, для меня, код - это у psywalker.ru.

Интересно он сделал. Теперь мне, образно, видно как надо верстать "слоями" этот макет.

Осталось попробовать на практике.

ну и ещё один вопрос, скорее общефилософский:

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

Новичок.

[wanntuzz]

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

[Int]

wanntuzz, а ничего, что чуть выше ссылка на решение с дивами?