Рейтинг@Mail.ru

Найти в Google:

Пользовательского поиска

CSS стили для сайта, оформление шапки (хедера)

июня 01, 2009

Продолжаем. Надеюсь с версткой страницы сайта в редакторе Dreamweaver Вам все понятно и  создавать  css стили для сайта, как для отдельных частей страницы сайта, так и всего сайта Вам легко и приятно.  Ну и снова за работу:

Как вы помните, у нас должен быть заголовок страницы, в шапке. Давайте и его напишем! Ставим текстовый курсор в шапку и пишем. Так как цвет шрифта по умолчанию черный — надпись плохо видна на темном фоне. Это мы исправим. Конечно с помощью определенных css стилей. А сейчас отформатируем заголовок шапки, как заголовок первого уровня. Ставим текстовый курсор на него и в раскрывающемся списке Формат (Format) выбираем Заголовок1 (Heading 1). Для того, чтобы выдержать единый стиль заголовков первого уровня по всему сайту, создадим для него стиль css по тегу h1:

CSS стили для сайта, оформление шапки (хедера)

Тег выбираем из списка в окошке Тег (Tag). Сохраняем стиль css в нашей таблице.
В категории Тип (Type) выбираем шрифт и его цвет. Я выбрал Arial и цвет белый. В категории Блок (Block) можно поставить выравнивание текста по центру. В категории Рамка (Box) можно задать точное положение текста, вот так, например:

CSS стили для сайта, оформление шапки (хедера)

Выбирайте настройки по своему вкусу:

CSS стили для сайта, оформление шапки (хедера)

Может где-то так…

Давайте разберемся с фонами.  Естественно, нам помогут наши css стили для сайта. Для этого создадим стиль css, привязанный к тегу body. Определяем стиль вот так:

CSS стили для сайта, оформление шапки (хедера)

Жмем ОК
В категории Фон (Background):

CSS стили для сайта, оформление шапки (хедера)

Обзором находим вертикальную полоску и повторяем по оси Х.  О, страница почти нарисовалась!

CSS стили для сайта, оформление шапки (хедера)

Проверим браузером что получилось. Для этого в инструментарии документа щелкнем на значке CSS стили для сайта, оформление шапки (хедера). Выберем браузер, если будет запрос на сохранение – жмем Да. Если после просмотра вам что-то не нравится – закрываем браузер, исправляем страницу в редакторе и снова проверяем.
Получается? Значит, процесс верстки  сайта проходит успешно. Давайте попробуем вставить в страницу графическое изображение. Опять же нам помогут  css стили для сайта.

И потихоньку переберемся на страницу Вставка рисунков и фотографий


Кстати, тоже интересно:
4 комментария
  1. алекс пишет:

    К какому тегу боби надо привязатся, у меня его никогда небыло.

  2. алекс пишет:

    хотя извеняюсб недосмотрел, второй день делаю уже не соображаю.

  3. Михаил пишет:

    Где на сайте тег боди

  4. VeryOldCat пишет:

    После тега

Оставить комментарий

XHTML: Можно использовать такие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Карта сайта