Создание внешнего каркаса сайта в Dreamweaver | Как создать свой сайт

Внешний каркас сайта, создание, верстка

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

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

Писать в нем мы ничего не будем, фон вставлять не будем, текстовые абзацы нас не интересуют, так что заходим в раздел Рамка (Box) и задаем такие параметры:

Внешний каркас сайта, создание

Ширину задаем с запасом в 10 пикселей для разных хитрых браузеров, заданные поля заставят страницу всегда находится в центре окна браузера. Жмем ОК. В панели стилей у нас появилась таблица стилей и стилевой класс:

Удалить стиль очень легко. Достаточно щелкнуть правой клавишей мышки на его названии в панели стилей и из выпадающего меню выбрать Удалить (Delete). Если выбрать Редактировать (Edit) – попадете в окошко определения правил, где можно изменить стиль. Кстати удалить контейнер тоже не трудно. Щелкните левой клавишей мышки на контуре контейнера, выделяя его, и нажмите клавишу Del.
Итак, стиль css создан. Привязываем его к контейнеру. Проще всего это сделать так. Активируем контейнер. Внизу страницы на значке <div>:

щелкаем правой клавишей мышки, в открывшемся окошке наводим курсор на третий сверху пункт и в выпадающем меню (справа) выбираем нужный стиль. Все. В принципе, в таких действиях и заключается css верстка сайта. Изменений вы пока не увидите. Дальше — интереснее. Создадим cтили css, вернее стилевой класс для шапки. Правильней, наверное, называть ее хедер от английского header. Ну да сути дела это не меняет.

А наша  верстка сайта продолжается,  и мы  переходим к странице —  Как сделать шапку для сайта

PS — к комментарию Катерины. Как задать параметры для центровки внешнего контейнера показано на первом рисунке. А вот что очень не помешало бы добавить в таблицу стилей, в самом начале, чтобы верстка сайта была более легкой, так это  , вот такой код:

* {
border: 0;
margin: 0;
padding: 0;
}

Это код задает так называемые — глобальные правила. Все браузеры понимают этот код как — «для всего документа». В данном случае задаются параметры отступов, полей и рамок с нулевым значением для всего сайта. Для чего? Этим мы отбираем у браузеров право самим рассчитывать отступы, рамки и поля, потому как делают они это каждый по своим алгоритмам, где надо и где не надо. Так вот где надо и сколько надо – мы сами зададим в таблице стилей. А где не задано – будет ноль. Если так сделать –  будет намного проще.






6 комментариев
  1. Гриня Пишет,

    Вставить необходимо в ТАБЛИЦУ СТИЛЕЙ css, а не в html код.

  2. Татьяна Пишет,

    * {

    border: 0;

    margin: 0;

    padding: 0;

    }

    А как именно вставить этот код в таблицу стилей. У меня не получается.

  3. Саша Пишет,

    Сохранять это как то надо

  4. Натали Пишет,

    * {

    border: 0;

    margin: 0;

    padding: 0;

    }

    Непонятно куда вставлять код и как!!!

  5. Ольга Пишет,

    Здравствуйте! Я новичок в создании сайтов. Никак не получается привязать к CSS. Всё делаю в том порядке, как написано, но после нажатия на окно не появляется. Копировала код в таблицу стилей. Результата нет. Помогите, пожалуйста!

  6. Ольга Пишет,

    Здравствуйте! Всё делаю как написано, но когда нажимаю не выходит окно. Код как Вы советовали вставляла. Никаких изменений. Помогите, пожалуйста.

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