Рейтинг@Mail.ru

Найти в Google:

Пользовательского поиска

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

июня 01, 2009

Продолжим. Для тех, кто забыл что мы тут делаем — напоминаю: наша задача — css верстка страницы сайта в редакторе Dreamweaver.  В частотности, создание стилей css  для отдельных частей страницы сайта. Итак:

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

Определяем стиль. Назовем его kolonka1.

В категории Рамка:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

Жмем ОК. Привязываем стиль к контейнеру. Вы должны увидеть измененные размеры колонки.

Создадим стиль для зоны основной информации. Точно так же зададим только ее размеры. Позже, по мере необходимости, будем этот стиль дополнять.

Определяем стиль. Назовем его main, типа главный.

В категории Рамка:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

Жмем ОК. Привязываем стиль css к контейнеру.

Определяем стиль для второй колонки. Назовем его kolonka2.

В категории Рамка:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

Жмем ОК. Привязываем стиль к контейнеру.

И, наконец, контейнер подвала. Определяем стиль. Назовем его futer.

В категории Фон:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

В категории Рамка:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

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

Жмем ОК. Привязываем стиль css к контейнеру. Удалим надпись. И вот, что будем иметь:

Стилевой класс CSS для колонок, зоны основной информации и подвала(футера)

Ну вот, css верстка страницы сайта уже дает кое-какие результаты.  Это еще не страница сайта, но контуры уже прорисовываются! Для того, чтобы страница побыстрее начала набирать удобоваримый вид, оформим сразу зону основной информации, ту где стоит курсор.

Для этого перейдем на страницу Оформление зоны основной информации


Кстати, тоже интересно:
11 комментариев
  1. Егор пишет:

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

  2. VeryOldCat пишет:

    Исправлено!

  3. poly пишет:

    Cпасибо за информацию, но в процессе создания стиля для колонки2 столкнулась с такой проблемой-там где указываются все стили CSS, стиль колонка2 получил значение «проект» и при выборе стиля возле тега div в списке стилей, стиль колонка2 не выводится :( . Попыталась прописать в ручном варианте никаких изменений не происходит. У меня Adobe® Dreamweaver® CS3. Помогите, если можете, пожалуйста :)

  4. poly пишет:

    Извините, уже разобралась :)

  5. tartinka пишет:

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

  6. stas пишет:

    хтмл код ... в студию ... почему левый (kolonka2), рамка (main) и правый блок(kolonka2) имеют привязку на лево, если расположены в разных сторонах ?

  7. VeryOldCat пишет:

    Для того, чтобы они выстроились друг за другом без «зазоров».

  8. Алексей пишет:

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

  9. Алексей пишет:

    И опять же не пойму для чего мы изначально при раскройке страницы отрезали полоску шириной 10 пкс?

  10. VeryOldCat пишет:

    Запас, чтобы сумма ширин колонок не оказалась больше ширины контейнера, потому как разные браузеры могут отражать ширину колонок по-разному

  11. VeryOldCat пишет:

    А как можно заранее знать что мы в эти колонки вставим? Лучше уж сделать их безразмерными

Оставить комментарий

XHTML: Можно использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Карта сайта