CSS класс страницы сайта | Как создать свой сайт

Что такое CSS класс страницы сайта

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

Здесь будьте повнимательней. Потому, что в редакторе сделать ошибку легко, а найти ее бывает очень трудно. Итак – непосредственно создание страницы сайтав  Dreamweaver. Приступаем к верстке страницы сайта,  в  чем нам помогут CSS  классы страницы сайта и  так называемая таблица стилей 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 стилей в корне нашего сайта. Дайте ему имя. Ну, например, stil. Жмем  Сохранить.

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

14

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

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

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

Сделать это мы сможем, перейдя на страницу — Внешний каркас сайта, создание, верстка






5 комментариев
  1. venerka Пишет,

    не могу понять, где «макет » находится(((

  2. Stepa Пишет,

    Спасибо. Я как раз хочу создать сайт на CSS. Ваша статья мне помогла.

  3. stef3009 Пишет,

    venerka я сам долго искал макет. Нашел в Окно-вставка. Справа появится новое меню. Там и будет вставить тег div

  4. тамара Пишет,

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

  5. Artyom Пишет,

    огромное спасибо))) у меня cs5 пришлось немного позаморачиваться особенно вот с этой статьей. Но справился)) все предыдущие статьи и эта понятны.

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