Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

http://www.bereg.net/ зебра креатив Дизайнерский картон.

Уроки - Создание гостевой книги в Macromedia Dreamweaver
[1 2 3 4 5 6 7 8]

- Создание CSS

- Создание статической страницы
[1 2]

- Создание выпадающего меню

- Редактирование кода
[1 2]


главная > уроки >

Создание гостевой книги в Macromedia Dreamweaver

Добавление стилей CSS

Чтобы определить стили CSS нужно использовать панель Design. В ходе работы переопределим вид HTML тегов <body> и <a> и создадим шесть новых классов CSS:

  • .menu - описывает форматирование левого меню;
  • .menubody - описывает форматирование тела левого меню;
  • .menuheader - описывает форматирование заголовка левого меню;
  • .message - описывает форматирование сообщения.
  • .messbody - описывает форматирование тела сообщения;
  • .messheader - описывает форматирование заголовка сообщения;

Следующей последовательностью действий определим общий дизайн гостевой. Если захотите поменять дизайн - это легко будет сделать, внеся изменения в файл gb.css. Создать файл:

  1. Откройте файл шаблона нашей гостевой gb.dwt.php.
  2. Выберите закладку CSS Styles в панели Design panel. Если она не открыта выберите Window > CSS Styles.
  3. Нажмите на значок New CSS Style (рисунок см. ниже) внизу панели. Dreamweaver откроет диалоговое окно New CSS Style.
  4. Добавить новый стиль CSS

    Определим основное форматирование документа, изменяя свойства тега <body>.

    • Выберите Tag при выборе selector type.
    • Выберите body из меню Tag.
    • Выберите сохранить новый стиль в файле new style sheet file.
    • Нажмите OK.

  5. Dreamweaver спросит, куда сохранить файл CSS. Назовите его guestbook.css и сохраните в переделах локального сайта. Я сохранил в созданную папку assets.
  6. Откроется диалоговое окно CSS Style Definition, в котором нужно определить форматирование тега <body>
    • Категория Type: Font - Verdana, Arial, Helvetica, sans-serif и Size - 10 pixels;
    • Категория Background: Background color: #5A656B
    • Категория Box: установите значения Padding и Margin на 0, для устранения белых пробелов между элементами страницы;

  7. Нажмите OK.

Дальше определим формат ссылок. Вначале нужно редактировать форматирование ссылок в общем (тег <a>) и потом применять специальное форматирование для выделения посещенных ссылок и отмеченных указателем мышки.

Следуйте последовательности действий, описанных выше. Только выберите тег a из списка тегов. Не забудьте только определить стиль в уже существующий файл - guestbook.css. Установите атрибуты в категории Type окна CSS Style Definition:

  • Decoration: none
  • Color: #004080

Отредактируем вид ссылки, когда на нее наведен указатель мышки:

  1. Нажмите на кнопку New CSS Style.
  2. В появившемся диалоговом окне выберите:
    • Selector Type: Advanced
    • Selector: a:hover
    • Define in: guestbook.css.
  3. Нажмите OK.
  4. Укажите следующие атрибуты в категории Type в окне конфигурации CSS Style Definition:
    • Decoration: underline.
    • Color: #20086B

Проделайте те же действия для определения цвета посещенных ссылок, только укажите цвет:

Color: #0080C0

Мы закончили редактировать форматирование существующих HTML тегов, дальше определим шесть собственных классов CSS, о которых было написано выше. Используйте следующую последовательность действий для создания своего класса и применения его к объектам.

  1. Нажмите на значок New CSS Style в панели Design.
  2. В диалоговом окне New CSS Style укажите значения:
    • Name: введите собственное название класса, например .menu или .message.
    • Selector type: Class
    • Define in: guestbook.css

Название класса должно начинаться с точки и может содержать любую комбинацию цифр и букв. Если не поставите вначале точку - Dreamweaver автоматически ее добавит.

В таблице представлены опции форматирования, которые надо указать для каждого стиля:

  Категория CSS Свойства CSS
.menu Box Padding: Same for all, 5 pixels
Margin: Bottom, 10 pixels
Border Style: Same for all, dotted
Width: Same for all, 1 pixel
Color: Same for all, #9EAF70
.menuheader Type Size: 12 pixels
Weight: bolder
Background Background color: #A2B275
.menubody Background Background-color: #E4E9D5
.message Box Padding Top: 10 pixels, Right: 7 pixels,
Bottom: 10 pixels, Left: 7 pixels
Border Style: Same for all, dotted
Width: Same for all, 1 pixel
Color: Same for all, #9EAF70
.messheader Type Size: 12 pixels
Background Background color: #A2B275
.messbody Type Style: italic
Background Background-color: #E4E9D5

Все что вам нужно для применения этих стилей к некоторым тегам - выбрать тег в строке выбора тегов, нажать правую клавишу мышки и выбрать нужный класс из меню.

Откройте шаблон gb.dwt.php и примените стили:

  1. В строке выбора тегов правый клик на теге таблицы <table> в которой находится меню и выберите Class > .menu из появившегося меню.
  2. Также примените к тегу <td> заголовка меню класс menuheader и к тегу <td> тела меню класс menubody.
  3. Сохраните шаблон (Control + S). Появится окно, в котором спрашивается - обновлять файлы на основе шаблона или нет. Нажмите Update.

Откройте файл topic.php и примените стили к таблице списка сообщений:

  1. В строке выбора тегов кликните на теге таблицы <table> , в которой размещены сообщения и выберите Set Class > message.
  2. Также для строки заголовка сообщения <tr> выберите Set Class > messheader.
  3. И правый клик на теге <td> в котором содержится описание статьи и выберите Set Class > messbody. Сохраните документ и просмотрите страницу в браузере.
  4. В строке над таблицей Сообщения в разделе для тега <table> примените класс Set Class > messbody. Вид примерно будет такой:
Проделайте эту последовательность действий и с другими файлами гостевой: article.php, index.php и topic.php.

Вот и гостевая книга готова. В этом уроке я описал как создать "скелет" гостевой книги. Дизайн, размещение элементов и т.п. можете менять по своему усмотрению.

Для того чтобы сравнить результаты своей работы, можете скачать архив файлов готовой гостевой книги, созданной в этом уроке. Архив zip.

Знаю, что в процессе работы появится много вопросов, для этого создал специальную тему на форуме.

<< назад

Источник:
Macromedia Dreamweaver для каждого -
статьи, форум, обмен ссылками.

главная > уроки >

Реклама

Простой конкурс с денежными призами!



http://avtokran-50.ru/ аренда 50 тонн автокрана - кран аренда автокрана 50 тонн.

Rambler's Top100 Рейтинг@Mail.ru