18-11-2017

Dreamweaver — таблица стилей CSS страницы сайта.

Здесь будьте повнимательней. Потому, что в редакторе сделать ошибку легко, а найти ее бывает очень трудно. Итак – непосредственно создание страницы сайтав  Dreamweaver. Приступаем к верстке страницы сайта,  в  чем нам поможет так называемая таблица стилей css.

Создадим внешний контейнер. Для этого в инструментарии объектов активируем пункт Макети щелкнем кнопку Вставить тег div (Insert Div Tag). В открывшемся окошке выбираем Вставить (Insert): В точке вставки (At insertion point) и жмем ОК. На экране видим узкий, штриховой прямоугольник. Это и есть контейнер и не какой-то там, а плавающий. В него, как кубики в ящик, мы поместим остальные контейнеры. Для чего? А для того, что, управляя свойствами внешнего контейнера, применяя таблицу стилей css, мы управляем его содержимым, что очень облегчит нам позиционирование всех остальных контейнеров в окне браузера. Короче, чтобы части страницы не расползались как тараканы:

Таблица стилей CSS страницы сайта

Ставим курсор как на верхнем рисунке и вставляем второй контейнер и тоже в режиме — Вставить (Insert): В точке вставки (At insertion point):

Таблица стилей CSS страницы сайта

Ставим курсор как на верхнем рисунке и вставляем третий и последующие контейнеры так же, как и второй. Надписи в контейнерах пока сохраним, просто для удобства в работе. Если мы сразу уберем эти надписи, то контейнеры, визуально, сольются в один. И как потом с ними работать? Надписи удаляйте по мере наполнения контейнера вашей информацией.
Как вы видите на схеме, у нас всего 6 контейнеров. Проще всего создать все контейнеры сразу и постепенно делать для них  таблицу css стилей. Если активировать первый, внешний контейнер, щелкнув левой клавишей мышки на контуре контейнера, то можно ясно увидеть, что остальные контейнеры находятся внутри него:

Таблица стилей CSS страницы сайта

Для управления свойствами контейнеров создаются специальные правила, называемые стили css. Стили объединяются в таблицы стилей css. Давайте попробуем начать создавать стили и  создадим стиль css для внешнего контейнера. Для этого активируем панель CSS в правом доке, щелкнув левой клавишей мышки на названии:

Таблица стилей CSS страницы сайта

В нижней части панели щелкнем на значке Таблица стилей CSS страницы сайта и увидим такое окошко:

Таблица стилей CSS страницы сайта

Настройки вы видите. Имя можно дать любое. Жмем ОК. Появится окошко, в котором вам предлагается сохранить файл таблицы css стилей в корне нашего сайта. Дайте ему имя. Ну, например, stil. Жмем Сохранить.

Видим окошко под названием Определение правила CSS для  stranica в stil.css (CSS Rule definition).
Смысл такой: здесь мы создаем правила для стилевого класса под названием stranica и сохраним этот класс в таблице css стилей под названием stil.css:

Таблица стилей CSS страницы сайта

В разделе Категория (Category)мы видим:

  • Тип(Туре) – здесь задаются параметры шрифта, которым набран текст
  • Фон(Background) — здесь задаются параметры фона элемента страницы
  • Блок(Block)— здесь задаются параметры текстового абзаца
  • Рамка(Box) — здесь задаются параметры, задающие размеры и размещение элемента страницы
  • Граница(Border) — здесь задаются параметры, которые задают цвет и толщину рамки вокруг какой-либо составной части страницы
  • Список (List) — здесь задаются параметры, устанавливающие вид маркеров списка
  • Положение(Position) — здесь задается местонахождение маркера или нумерации

Вроде как все понятно. Такие общие правила для стилей css.Сами таблицы стилей css применяются при верстке страниц сайта и незаменимы при создании сайтов. А сейчас, конкретно, зададим правила для стилевого класса stranica. Напоминаю, это класс css для внешнего контейнера.

CSS верстка сайта и стилевой класс CSS для внешнего контейнера

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

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

CSS верстка сайта и стилевой класс CSS для внешнего контейнера

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

CSS верстка сайта и стилевой класс CSS для внешнего контейнера

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

CSS верстка сайта и стилевой класс CSS для внешнего контейнера

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

А наша css верстка сайта продолжается,  и мы  переходим к странице Стилевой класс CSS для шапки (хедера)

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

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

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

Рекомендуем в повседневной деятельности:

Скачать - инструкцию по созданию загрузочной флешки = 50,02мин. 20.04.2014г.
Скачать - правила получение аттестата Webmoney  (30.61 MB) = 7. 5 мин. 11.01.2013г.
Скачать ссылки на каталоги - для регистрации сайта (69.5 MB) = 9. 7 мин. 01.10.2013г.
Скачать - wifi router настройка модема (41.72 MB) = 7 мин. 46 сек. 26.01.2013г.
Скачать - TDSSKiller диагностика, лечение систем (24,71 MB) = 6,02 мин. 01.12.2012г.
Скачать - пример готового проэкта в Lazarus (91,59 MB) = 1,31мин. 08.04.2013г.
Скачать - правила установки MySQL в Lazarus (20,17 MB) = 4,55 мин. 25.02.2013г.
Класс!
 
Система раскрутки
Яндекс.Метрика
Копирование возможно при указании прямой индексируемой гиперссылки
п»ї