Гибкий смл. Необычные подарки Архив материалов. Фотокаталог товаров, описания и цены. neopresent.ruДана мебель Все для дома, интерьер, посуда, сауна, ванная, сад. Каталог выставок. mebel-mia.ru
Чтобы определить стили
CSS нужно использовать панель Design. В ходе работы переопределим вид HTML тегов <body> и <a> и создадим шесть новых классов CSS:
.menu - описывает форматирование левого меню;
.menubody - описывает форматирование тела левого меню;
.menuheader - описывает форматирование заголовка левого меню;
.message - описывает форматирование сообщения.
.messbody - описывает форматирование тела сообщения;
.messheader - описывает форматирование заголовка сообщения;
Следующей последовательностью действий определим общий дизайн гостевой. Если захотите поменять дизайн - это легко будет сделать, внеся изменения в файл gb.css. Создать файл:
Откройте файл шаблона нашей гостевой gb.dwt.php.
Выберите закладку CSS Styles в панели Design panel. Если она не открыта выберите Window > CSS Styles.
Нажмите на значок New CSS Style (рисунок см. ниже) внизу панели. Dreamweaver откроет диалоговое окно New CSS Style.
Определим основное форматирование документа, изменяя свойства тега <body>.
Выберите Tag при выборе
selector type.
Выберите body из меню Tag.
Выберите сохранить новый стиль в файле new style sheet file.
Нажмите OK.
Dreamweaver спросит, куда сохранить файл CSS. Назовите его guestbook.css и сохраните в переделах локального сайта. Я сохранил в созданную папку assets.
Откроется диалоговое окно
CSS Style Definition, в котором нужно определить форматирование тега <body>
Категория
Type:
Font - Verdana, Arial, Helvetica, sans-serif и Size - 10 pixels;
Категория Background: Background color: #5A656B
Категория Box: установите значения Padding и Margin на 0, для устранения белых пробелов между элементами страницы;
Нажмите OK.
Дальше определим формат ссылок. Вначале нужно редактировать форматирование ссылок в общем (тег <a>) и потом применять специальное форматирование для выделения посещенных ссылок и отмеченных указателем мышки.
Следуйте последовательности действий, описанных выше. Только выберите тег a из списка тегов. Не забудьте только определить стиль в уже существующий файл - guestbook.css. Установите атрибуты в категории Type окна CSS Style Definition:
Decoration: none
Color: #004080
Отредактируем вид ссылки, когда на нее наведен указатель мышки:
Нажмите на кнопку New CSS Style.
В появившемся диалоговом окне выберите:
Selector Type: Advanced
Selector: a:hover
Define in: guestbook.css.
Нажмите OK.
Укажите следующие атрибуты в категории Type в окне конфигурации CSS Style Definition:
Decoration: underline.
Color: #20086B
Проделайте те же действия для определения цвета посещенных ссылок, только укажите цвет:
Color: #0080C0
Мы закончили редактировать форматирование существующих HTML тегов, дальше определим шесть собственных классов CSS, о которых было написано выше. Используйте следующую последовательность действий для создания своего класса и применения его к объектам.
Нажмите на значок New CSS Style в панели Design.
В диалоговом окне New CSS Style укажите значения:
Name: введите собственное название класса, например .menu или .message.
Selector type: Class
Define in: guestbook.css
Название класса должно начинаться с точки и может содержать любую комбинацию цифр и букв. Если не поставите вначале точку - Dreamweaver автоматически ее добавит.
В таблице представлены опции форматирования, которые надо указать для каждого стиля:
Все что вам нужно для применения этих стилей к некоторым тегам - выбрать тег в строке выбора тегов, нажать правую клавишу мышки и выбрать нужный класс из меню.
Откройте шаблон gb.dwt.php и примените стили:
В строке выбора тегов правый клик на теге таблицы <table> в которой находится меню и выберите Class > .menu из появившегося меню.
Также примените к тегу <td> заголовка меню класс menuheader и к тегу <td> тела меню класс menubody.
Сохраните шаблон (Control + S). Появится окно, в котором спрашивается - обновлять файлы на основе шаблона или нет. Нажмите
Update.
Откройте файл
topic.php и примените стили к таблице списка сообщений:
В строке выбора тегов кликните на теге таблицы <table> , в которой размещены сообщения и выберите Set Class > message.
Также для строки заголовка сообщения <tr> выберите Set Class > messheader.
И правый клик на теге <td> в котором содержится описание статьи и выберите Set Class > messbody. Сохраните документ и просмотрите страницу в браузере.
В строке над таблицей Сообщения в разделе для тега <table> примените класс Set Class > messbody. Вид примерно будет такой:
Проделайте эту последовательность действий и с другими файлами гостевой: article.php, index.php и topic.php.
Вот и гостевая книга готова. В этом уроке я описал как создать "скелет" гостевой книги. Дизайн, размещение элементов и т.п. можете менять по своему усмотрению.
Для того чтобы сравнить результаты своей работы, можете скачать архив файлов готовой гостевой книги, созданной в этом уроке. Архив zip.
Знаю, что в процессе работы появится много вопросов, для этого создал специальную тему на форуме.
