• Mood: не слишком впечатлён
• Music: шаги сослуживицы, бродящей окрест

Азы блочной вёрстки

В LJ-ленте ru_webmascon оказалась опубликованной гиперссылка, указывающая на крупный сборник иллюстрированных примеров по методам блочной вёрстки, применяемой при разметке страниц Паутины.

Там есть самые простенькие примеры: выравненный налево фиксированный блок, выравненный налево растяжимый блок, выравненный по середине фиксированный блок, выравненный по середине растяжимый блок.

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


И другие штуки:

построение цветных прямоугольников (пример — вот здесь)

трёхколоночная вёрстка, растяжимая по ширине (пример — вот здесь)

двухколоночная вёрстка, в которой раскраска колонок достигается фоновой картинкой, и поэтому левая колонка должна иметь фиксированную ширину (пример — вот здесь)

пособие по селекторам (пример — вот здесь)



Несмотря на всё это, лично я покамест продолжу верстать свои вебсайты табличной вёрсткой, а не блочной. Табличная вёрстка гораздо лучше распределяет пространство при изменении размеров шрифта. Поскольку при табличной вёрстке нет необходимости прямо задавать ширину колонки в процентах (или, тем более, фиксировать её) — вместо этого свободное пространство распределяется поровну между столбцами в общей таблице...

Да и нельзя не заметить, что все вышеприведённые примеры — это самые начальные и первые шаги, которые только совершает блочный верстальщик. Самые азы. Некоторые из этих примеров так и вообще — если и не напрямую, то по аналогии — были заимствованы из тех примеров, которые приводятся в спецификациях стандарта CSS2. В дальшейшей работе начинающий верстальщик неминуемо столкнётся с эффектами, совершенно обойдёнными молчанием в вышеупомянутых простых примерах... например, с эффектом соскальзывания вниз у тех блоков, для которых не находится места по ширине страницы, чтобы им можно было встать рядом.

Именно поэтому, кстати, элементы моей friend-ленты (и других подобных ей friend-лент) на сайте LiveJournal были устроены в виде таблиц (в левой колонке — подписанный юзерпик, в правой — текст LJ-записи). В противном случае достаточно крупная фотография, вставленная без <lj-cut>, не просто растягивала бы friend-ленту, но и соскальзывала бы, находясь после этого не справа от юзерпика своего LJ-автора, а снизу.