Сайдбар для сайта в Dreamweaver | Как создать свой сайт

Как сделать сайдбар для сайта в Dreamweaver

Июн-1-2009 Автор: VeryOldMan

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

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

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

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

 Как сделать сайдбар для сайта

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

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

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

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

Как сделать сайдбар для сайта

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

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

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

Как сделать сайдбар для сайта

 

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

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

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

Как сделать сайдбар для сайта

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

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

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

Как сделать сайдбар для сайта

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

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






7 комментариев
  1. poly Пишет,

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

  2. poly Пишет,

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

  3. tartinka Пишет,

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

  4. stas Пишет,

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

  5. Алексей Пишет,

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

  6. Алексей Пишет,

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

  7. VeryOldCat Пишет,

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

Добавить комментарий