Зона размещения контента на сайте | Как создать свой сайт

Создание зоны размещения контента на сайте

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

Продолжаем уроки верстки страницы сайта в редакторе 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. Не видно текста? Просто его не видно на белом фоне. Минутку терпения.  Давайте сначала оформим шапку (хедер) и заодно решим эту проблему.

А сделаем это на странице — Как в Dreamweaver оформить шапку сайта






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

    Не понятно с заголовком как сделать его??? копирую текст с заголовком вставляю делаю заголовок 2 и весь текст становится заголовком 2 большим что сделать подскажите наглядно какнить=(((((((

  2. Bo$$ Пишет,

    Как же нудно все рассписано, и еще русский Дрим, это вообще для … Короче, не проффесианально батенька.

  3. Лёха Пишет,

    Очень красиво всё написано.Спасибо!)

  4. Ирина Пишет,

    Большое спасибо за статьи. Но не забывайте, что здесь есть люди, которые с этим сталкиваются впервые. Лично я не поняла, как редактировать Заголовок 2, а затем применить его. Я создала стиль h2, но он не применяется к тексту, т.е. тип и высота шрифта не меняются. Надеюсь, я правильно сформулировала вопрос.

  5. Николай Пишет,

    А мне понравилось как товарищ расписывает, не хватает тока комментирования по англоязычной версии ДВ. Для чайников самое оно.

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