Уменьшаем количество блоков

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

Итак, за блоком «header» следует блок «middle», имеющий внутри себя еще три блока:

блок «container»

блок «content»

блок «sideRight»

В файле index.html

Оставим только «content» и «sideRight» (блок «middle» тоже удаляем).

Кроме того, из тега <div id=»sideRight»> удаляем class=»sidebar» (поскольку такой класс создан «на всякий случай» и в таблице стилей не описан).

Таким образом,  участок кода:

Будет выглядеть так:

В файле style.css

Удаляем инструкции, описывающие неиспользуемые блоки (#middle, #container), а для оставшихся блоков (#content и #sideRight) изменяем описания, исходя из наших задач.

Блок «content» выравниваем по левому краю (обтекание справа) и задаем его ширину. Чтобы увидеть, как он расположился на странице можно задать цвет фона (а в файле index.html оставить пока шаблонный текст)

Аналогично для блока «sideRight» – выравниваем по правому краю (обтекание слева), указываем ширину и (временно) цвет фона:

В результате всех изменений внешний вид страницы должен стать таким

Определившись с количеством и расположением блоков в центральной части, можно приступать к дизайну сайдбара и выводу ссылок меню.

Опубликовал 7th Февраль 2011.
Размещено в Сайт с нуля.
Метки: , , , ,

К записи 3 комментария

Не во всех темах есть указанные блоки. а какие есть, тот же sideright (правый сайдбар) может называться по другому.
Но за статью все равно спс

Конечно, эти названия блоков даже не из темы WP, а присутствуют на странице, сгенерированной для блочной верстки. Если не «натягивать» свою тему на вордпресс, а дорабатывать готовый шаблон, то для него нужно составлять свою схему блоков.

Блог супер, буду рекомендовать друзьям!

Нужна помощь?