Виды деятельности Рабочий стол
Soft - программы Комната отдыха |
 |
|
|  |
Dreamweaver — таблица стилей CSS страницы сайта.
Здесь будьте повнимательней. Потому, что в редакторе сделать ошибку легко, а найти ее бывает очень трудно. Итак – непосредственно создание страницы сайтав Dreamweaver. Приступаем к верстке страницы сайта, в чем нам поможет так называемая таблица стилей css.
Создадим внешний контейнер. Для этого в инструментарии объектов активируем пункт Макети щелкнем кнопку Вставить тег div (Insert Div Tag). В открывшемся окошке выбираем Вставить (Insert): В точке вставки (At insertion point) и жмем ОК. На экране видим узкий, штриховой прямоугольник. Это и есть контейнер и не какой-то там, а плавающий. В него, как кубики в ящик, мы поместим остальные контейнеры. Для чего? А для того, что, управляя свойствами внешнего контейнера, применяя таблицу стилей css, мы управляем его содержимым, что очень облегчит нам позиционирование всех остальных контейнеров в окне браузера. Короче, чтобы части страницы не расползались как тараканы:
Ставим курсор как на верхнем рисунке и вставляем второй контейнер и тоже в режиме — Вставить (Insert): В точке вставки (At insertion point):
Ставим курсор как на верхнем рисунке и вставляем третий и последующие контейнеры так же, как и второй. Надписи в контейнерах пока сохраним, просто для удобства в работе. Если мы сразу уберем эти надписи, то контейнеры, визуально, сольются в один. И как потом с ними работать? Надписи удаляйте по мере наполнения контейнера вашей информацией.
Как вы видите на схеме, у нас всего 6 контейнеров. Проще всего создать все контейнеры сразу и постепенно делать для них таблицу css стилей. Если активировать первый, внешний контейнер, щелкнув левой клавишей мышки на контуре контейнера, то можно ясно увидеть, что остальные контейнеры находятся внутри него:
Для управления свойствами контейнеров создаются специальные правила, называемые стили css. Стили объединяются в таблицы стилей css. Давайте попробуем начать создавать стили и создадим стиль css для внешнего контейнера. Для этого активируем панель CSS в правом доке, щелкнув левой клавишей мышки на названии:
В нижней части панели щелкнем на значке 
и увидим такое окошко:
Настройки вы видите. Имя можно дать любое. Жмем ОК. Появится окошко, в котором вам предлагается сохранить файл таблицы css стилей в корне нашего сайта. Дайте ему имя. Ну, например, stil. Жмем Сохранить.
Видим окошко под названием Определение правила CSS для stranica в stil.css (CSS Rule definition).
Смысл такой: здесь мы создаем правила для стилевого класса под названием stranica и сохраним этот класс в таблице css стилей под названием stil.css:
В разделе Категория (Category)мы видим:
- Тип(Туре) – здесь задаются параметры шрифта, которым набран текст
- Фон(Background) — здесь задаются параметры фона элемента страницы
- Блок(Block)— здесь задаются параметры текстового абзаца
- Рамка(Box) — здесь задаются параметры, задающие размеры и размещение элемента страницы
- Граница(Border) — здесь задаются параметры, которые задают цвет и толщину рамки вокруг какой-либо составной части страницы
- Список (List) — здесь задаются параметры, устанавливающие вид маркеров списка
- Положение(Position) — здесь задается местонахождение маркера или нумерации
Вроде как все понятно. Такие общие правила для стилей css.Сами таблицы стилей css применяются при верстке страниц сайта и незаменимы при создании сайтов. А сейчас, конкретно, зададим правила для стилевого класса stranica. Напоминаю, это класс css для внешнего контейнера.
CSS верстка сайта и стилевой класс CSS для внешнего контейнера
Итак, css верстка сайта помогает нам создавать страницу сайта. Двигаемся дальше. Если вы помните, то внешний контейнер это тот ящик, в который мы планируем поместить остальные контейнеры. Для него нужно задать такие стили css, с такими свойствами, чтобы эти контейнеры нормально в нем разместились, и сам внешний контейнер всегда находился в центре экрана компьютера. Приступим:
Писать в нем мы ничего не будем, фон вставлять не будем, текстовые абзацы нас не интересуют, так что заходим в раздел Рамка (Box) и задаем такие параметры:
Ширину задаем с запасом в 10 пикселей для разных хитрых браузеров, заданные поля заставят страницу всегда находится в центре окна браузера. Жмем ОК. В панели стилей у нас появилась таблица стилей и стилевой класс:
Удалить стиль очень легко. Достаточно щелкнуть правой клавишей мышки на его названии в панели стилей и из выпадающего меню выбрать Удалить (Delete). Если выбрать Редактировать (Edit) – попадете в окошко определения правил, где можно изменить стиль. Кстати удалить контейнер тоже не трудно. Щелкните левой клавишей мышки на контуре контейнера, выделяя его, и нажмите клавишу Del.
Итак, стиль css создан. Привязываем его к контейнеру. Проще всего это сделать так. Активируем контейнер. Внизу страницы на значке <div>:
щелкаем правой клавишей мышки, в открывшемся окошке наводим курсор на третий сверху пункт и в выпадающем меню (справа) выбираем нужный стиль. Все. В принципе, в таких действиях и заключается 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г. |
| Учимся работать |
|---|
     |
     |
| Справка, помощь. |
|---|
 |
 |
 |
 |
 |
 |
 |
 |
| Предлагаемые услуги | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
| Смежные статьи | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|