15.10.5. Создание пустой таблицы
Р
азместим
на форме таблицу. Появится окно свойств
(рис. 15.10.5.1).
Рис. 15.10.5.1. Окно свойств создаваемой таблицы
Зададим свойства таблицы: 3 ряда (Rows), 2 колонки (Columns), отступы (Cell Padding, Cell Spacing) и бордюр (Border) ‑ нулевые, ширина (Width, Percent) таблицы 100% (весь экран). Эти данные полностью совпадают с тем, что мы планировали в начале при разработке модульной сетки.
После нажатия на OKвы получите пустую таблицу, которую нужно форматировать, корректировать и заполнять элементами.
15.10.6. Форматирование ячеек таблицы
Выделите колонку слева: подводите курсор мышки к самой верхней границе колонки, дожидаетесь появления стрелочки вниз и нажимаете левую кнопку мышки. Можно выделить отдельные ячейки, нажав клавишу Ctrlи, не отпуская ее, щелкайте мышкой по нужным ячейкам.
П
осле
выделения укажите ширину колонки
- 247 Pix в полеWidthнижней плавающей панели - свойства
(это поле выделено рамкой).
Проделайте ту же операцию со второй колонкой, только теперь укажите ширину 100%.
Теперь займемся рядами. Для начала щелкните на любой из ячеек верхнего ряда. В левом нижнем углу окна Dreamweaver появится список <body><table><tr><td>. Этот список демонстрирует все теги HTML, которые являются более старшими по отношению к текущему тегу, т.е. показывают иерархию документа. Нажав на<tr>мы сразу получаем выделенный ряд.
Зададим
верхнему ряду фон. Для этого снова
обратите свое внимание на нижнюю
панель - свойства. Там есть полеBg(background). Нажав на значок папки,
вы можете указать файл, который будет
играть роль фона. В нашем случае этоtop_back.gif. То же самое можно сделать,
нажав на перекрестье рядом и потянув
стрелочку, указать на панели менеджмента
сайта нужный файл. В результате верхний
ряд таблицы будет залит нужным фоном.
Отформатируем нижний ряд. Для этого выделите его, выберите нижнее поле Bg, а не верхнее, которое использовали для выбора картинки. При нажатии на квадратик со стрелочкой вы увидите меню подобное тому, что изображено выше. Обязательно выключите указанную на рисунке кнопку (нам в данном случае это не нужно). Появившимся курсором ‑ пипеткой щелкните по синей части верхнего фона, после чего ваш нижний ряд будет закрашен синим цветом части верхнего фона.
Рассмотрим некоторые приемы работы с таблицами.
Пример.Выделим две ячейки первого столбца,
объединим их, покрасим в какой-нибудь
цвет и сделаем симметрично с другой
стороны то же самое.
С
начала
выделяем нужные ячейки. Затем нажимаем
на кнопку, указанную на картинке,
можно еще и закрасить ячейки.
Выделяем, выбираем цвет. Получаем нужный результат.
Примеркопирования ячеек. Выделяем нужный ряд или колонку, копируем ее в буфер (Ctrl+Insert), вставляем ее из буфера (Shift + Insert).
15.10.7. Размещение картинки
Выберите первую ячейку и разместите в ней поле картинки с логотипом My homepage
15.10.8. Создание меню
Выберите правую
верхнюю ячейку таблицы, для которой
отвели место под меню. В свойствах
измените горизонтальное и вертикальное
выравнивание налево и вниз соответственно.
Курсор сместится в левый нижний угол
ячейки. Напишите текст, состоящий из
названий основных р
азделов
и ссылок на них. Обратите внимание, что
текст прижат к нижней части ячейки и
целиком находится на синем поле
фона. После написания текста измените
в с
войствах
его форматирование сNoneнаParagraph. В HTML это означает заключение
текста в тег <P></P>. Это позволяет
получить строку, с которой будет просто,
удобно и легко работать в дальнейшем.
Внешний
вид меню можно улучшить: немного
приподнять над краем ячейки, покрасить
в другой более контрастный цвет и т.п.
Сделать это можно при помощи CSS Styles (CSS
- стилей). Находятся они в правой нижней
части окна Dreamweaver. Нажмите кнопкуShow
CSS Style,и появится окноCSS
Style (рис.
15.10.8.1). Нажмем кнопкуNew
Style,и появится окноNew
Style(рис.
15.10.8.2).
Р
ис.
15.10.8.1. ОкноSCC
Styles
Рис. 15.10.8.2. Окно New
Style
В
ыбираемMake Custom Style и опеределим его (рис.
15.10.8.3).
Рис. 15.10.8.3. Окно определения стиля меню
Выделяем наше меню нажатием на букву <P>в нижнем левом углу окна. В панели стилей просто выбираем наш стиль (Menu). Таким образом, стиль на параграф текста мы назначили. Можно проверить, как все это выглядит в броузер, нажав клавишуF12.
З
ададим
параметры еще нескольким элементам. В
отличие от предыдущего раза, когда
мы делалисвойстиль, теперь мы
будемпереназначатьуже готовый
стиль, например стиль параграфа (<P>).
Для этого создаем новый стиль, выбираем
пунктRedefine HTML Tagи тегP(рис. 15.10.8.4).
Рис. 15.10.8.4. Окно New Style
Д
ля
параграфа мы укажем конкретный шрифт
(Font), размер (Size) и цвет
(Color) (рис. 15.10.8.5).
Рис. 15.10.8.5. Окно New Style
Кроме параграфа, изменим теги a:linkиa:hover. Эти теги отвечают за внешний вид ссылки в стандартном состоянии и в состоянии при наведенной на нее мышки соответственно. Зададим цвет ссылок (белый) и при наведении сделаем изменениеDecorationсNoneнаUnderline.
У
кажем
ссылки на основные страницы нашего
сайта. Делается это просто - выделяете
нужный текст (если это одно слово, то
можно просто пару раз щелкнуть по
нему мышкой) и пишете в свойствах ссылку.
Самих файлов у нас пока (реально на
диске) нет, поэтому мы именно пишем
нужные нам названия (а не ищем их на
диске).
Н
аша
последняя задача - облегчить установку
и изменение (при необходимости)
нашего меню. Ее можно решить при
помощи удобного инструмента Dreamweaver
под названием “Библиотека“
(Library).
В
появившемся окне нажимаем кнопку
создания нового элемента (наше
меню должно быть целиком выделено). Все,
осталось только назвать наш элемент
и при необходимости вставлять его в
любой документ при помощи кнопкиInsert.
Все изменения, которые мы будем вносить
в наш элемент, автоматически вносятся
во все страницы, на которых он используется.