Продолжаем уроки верстки страницы сайта в редакторе Dreamweaver. На это раз у нас будет создание css стилей для так называемой зоны основной информации или как ее еще называют, зоны размещения контента на странице сайта. Итак:
Зона основной информации. Здесь обычно размещают текст, фотографии, рисунки и конечно, заголовок. Все это называется одним словом – контент. А так, как мы создаем сайт сами, то не лишне будет упомянуть о том, что контент должен быть уникальным. Советую почитать статью об этом Как создать сайт самому. Потом меньше мороки будет.
Для хранения фото, рисунков надо создать отдельную папку и разместить ее или в корне сайта или в папке images. Текст можно набирать прямо в Dreamweaver или в тестовом редакторе, например Word, а после копировать его в Dreamweaver . Форматировать текст можно из нижнего дока в панели Свойства. Параметры форматирования текста очень похожи на параметры Word.
Но так сейчас наша задача — создание css, то давайте зададим параметры форматирования текста в ней. Сначала вставим в контейнер main какой-либо текст и дадим ему заголовок. Для этого откроем текст в текстовом редакторе, скопируем его, зайдем в Dreamweaver, щелкнем правой клавишей мышки внутри контейнера main и в выпадающем меню выберем — Вставить. И продолжим создание css стилей.
Так как css стиль контейнера main уже создан – отредактируем его. Повторю, как это делается. Щелкнем правой клавишей мышки на названии контейнера в панели CSS правого дока. Из открывшегося меню выбираем Редактировать и попадаем в панель редактирования правил. В категории Тип выбираем шрифт, его цвет и размер:
Я выбрал Arial, цвет белый, размер 12 пунктов.
В категории Блок: Выравнивание текста – по ширине:
Все, с основным шрифтом разобрались, отформатируем теперь заголовок. Немного о том, что собой представляет создание css стилей заголовков:
Для того чтобы сделать из обычного абзаца заголовок, надо воспользоваться панелью Свойства. Эта панель называется редактором свойств. Ее вы можете увидеть в нижнем доке редактора. В редакторе свойств нам понадобится раскрывающийся список Формат.
Пункт Абзац этого списка форматирует текст как обычный абзац. А вот пункты Заголовок 1…Заголовок 6 разрешают создавать из него заголовки определенного уровня. Подобных уровней в языке HTML имеется шесть. Это - самый главный, Заголовок 1, который применяют для озаглавливания самих web-страниц, и далее до самого нижнего, применяемого для отдельных параграфов.
После лирического отступления — к нашей странице. Итак, принимаем, что заголовки в зоне основной информации будут формата Заголовок 2. Отформатируем заголовок в зоне основной информации, как заголовок второго уровня. Ставим текстовый курсор на него и в раскрывающемся списке Формат выбираем Заголовок 2. Для того, чтобы выдержать единый стиль заголовков второго уровня по всему сайту, создадим для него стиль по тегу h2:
Тег просто выбираем из списка в окошке Тег. Завершаем создание css стиля, сохраняя его нашей таблице. В категории Тип выбираем шрифт, и его цвет. Я выбрал Arial и цвет #0066ff. Не видно текста? Просто его не видно на белом фоне. Минутку терпения. Верстка сайта не терпит суеты. Давайте сначала оформим шапку (хедер) и заодно решим эту проблему.
А сделаем это на странице Оформление шапки (хедера). Класс CSS для тега body
Не понятно с заголовком как сделать его??? копирую текст с заголовком вставляю делаю заголовок 2 и весь текст становится заголовком 2 большим что сделать подскажите наглядно какнить=(((((((
Как же нудно все рассписано, и еще русский Дрим, это вообще для ... Короче, не проффесианально батенька.
Такой вот я зануда...
Очень красиво всё написано.Спасибо!)