Схемы табличного дизайна
Классическая схема табличного дизайна, выдержавшая проверку временем, показана на рис. 1.12. Ничего лишнего — только то, что действительно нужно. Иногда, правда, полосу навигации помещают справа — это выглядит необычно и довольно удобно (рис. 1.13).
Рисунок 1.12 - Классический дизайн с полосой навигации, расположенной справа
Часто на первую страницу в отдельной колонке помещают еще и новости сайта (рис. 8.5). Но это стоит делать только тогда, когда ваш сайт часто обновляется, и посетителям нужно знать об этих обновлениях. Впрочем, сейчас все более-менее значимые сайты имеют колонку или раздел новостей.
Рисунок 1.13 - Классический табличный дизайн с колонкой новостей сайта
Как правило, на главной странице помещаются только "свежие" новости (за определенный период), а "старости" располагают на специальной странице архива новостей. Ссылка на эту страницу размещается внизу или, реже, наверху колонки новостей. А сами новости и в колонке на главной странице, и на странице архива перечисляются в обратном порядке: от самых "свежих" до самых "старых".
Сайты-каталоги программ, которых очень много в Интернете, имеют весьма похожий дизайн — см. рис. 1.14.
Рисунок 1.14 - Дизайн сайта-каталога программ
Новостные сайты имеют самый сложный дизайн (рис. 1.15). Состоящие из множества пестрых колонок Web-страницы сразу привлекают внимание посетителей.
Не менее, а иной раз и более пестрый дизайн имеют музыкальные сайты (рис. 1.16). Порядок следования колонок может меняться, но, в целом, основные элементы главной страницы перечислены полностью.
Надо сказать, что описанные выше схемы применяются, как правило, к главной странице сайта. В самом деле, главная страница современных сайтов часто настолько перегружена разнородной информацией, что без сложной таблицы разметки не обойтись. Остальные страницы, поскольку они всегда значительно проще начальной, строятся по простейшим, проверенным временем схемам, представленным выше.
Рисунок 1.15 - Один из вариантов дизайна новостного сайта
Рисунок 1.16 - Один из вариантов дизайна музыкального сайта
Практическая часть
Упражнение 1. Работа с параметрами страницы
Задайте параметры трех созданных Web-страниц в диалоговом окне Свойства страницы(Page Propertis), используя сведения из пункта 1.1 Теоретического введения. Представьте в таблице выбранные параметры и обоснуйте этот выбор
Категория Свойств страницы |
Параметры |
Обоснование выбора |
|
|
|
Упражнение 2. Создание и редактирование таблиц
Создадим новую web-страницу. Сохраним ее в файле под именем 1.3.html. Нажмем кнопку Таблица вкладки Общее панели Вставить (рис. 2.1).
Рисунок 2.1 - Вставка таблицы через использование панели вставки элементов HTML-страницы
При нажатии на кнопку появится диалоговое окно Таблица (рис.2.2)
Рисунок 2.2 – Диалоговое окно Таблица
В полях ввода Строки и Столбцы вводятся, соответственно количество строк и столбцов. Если мы ошибемся, то количество строк и столбцов можно добавить или удалить.
В поле ввода Ширина таблицы задается ширина таблицы в пикселях или процентах от ширины родительского элемента. Поле ввода Разбивка ячеек служит для задания отступа между границами отдельных ячеек. По умолчанию равен 2 пикселям.
В поле ввода Размер границы задается толщина рамки таблицы и ее ячеек в пикселях. По умолчанию толщина рамки таблицы равна 1; если нужно убрать рамку, в поле ввода введем 0.
В поле ввода Отступы ячеек задается отступ между границей ячейки таблицы и ее содержимым в пикселях.
Набор переключателей Верхний колонтитул позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели Нет (нет ни "шапки", ни выделенного первого столбца),Лево (выделенный первый столбец), Вверх ("шапка") и Оба (выделены "шапка" и левый столбец).
В поле ввода Заголовок вводится название таблицы. Это название будет помещено web-обозревателем над таблицей. Раскрывающейся список Выравнивание позволит задать местоположение и выравнивание названия, если оно задано.
В области редактирования Итого вводится примечание таблицы. Оно не выводится web-обозревателем на экран.
И так зададим таблице значения, представленные на рисунке и нажмем ОК (рис.2.3).
Рисунок 2.3 – Каркас таблицы
Вставим в ячейки таблицы какой-нибудь текст. В ячейку можно вставить другую таблицу. Добавлять строки в таблицу приходится очень часто. Ставим в самую правую ячейку последней строки таблицы текстовой курсор, нажимаем клавишу <Tab>- и в таблице появилась новая пустая строка. Если новую строку нужно вставить в середину таблицы, делаем следующее. Помещаем текстовой курсор в ячейку строки, над которой нужно вставить новую, и выбираем пункт Вставить выше строку подменю Объекты таблицы меню Вставить (рис. 2.4).
Рисунок 2.4 – Редактирование таблицы вставкой одного элемента
Точно также можно вставить в таблицу новый столбец. Выбираем пункт Вставить столбец влево в подменю Объекты таблицы меню Вставить. И т.д. по пунктам.
Если нужно будет вставить в таблицу сразу несколько строк и столбцов, удобней будет воспользоваться пунктом Вставить строки и столбцы подменю Таблица меню Изменить. После его выбора на экране появится диалоговое окно.
Рисунок 2.4 – Редактирование таблицы вставкой одного элемента
С помощью переключателей группы Вставить задается элемент таблицы для вставки. Переключатель Строки задает вставку строк, переключатель Столбцы – столбцов (рис.2.5).
Рисунок 2.5 – Редактирование таблицы вставкой более одного элемента
Строки и столбцы будут вставлены после нажатия кнопки ОК.
Кроме того, мы можем разделить текущую строку или столбец на несколько. Для этого ставим текстовой курсор в нужную ячейку строки(столбца) и нажимаем кнопку Разделить ячейки в строки или столбцы (рис.2.6).
Рисунок 2.6 – Редактирование таблицы разделением ячеек
На экране появится диалоговое окно Разделить ячейку (рис. 2.7).
Рисунок 2.7 – Диалоговое окно редактирования таблицы разделением ячеек
Группа переключателей Разделить задает, как будет делиться строка (столбец) (рис.2.8).
Рисунок 2.8 – Диалоговое окно выбора типа разделения ячеек
После нажатия кнопки ОК текущая строка (столбец) будут разделены.
После выделения таблицы на охватывающей ее толстой черной рамке, мы увидим давно знакомые нам маркеры изменения размеров. С их помощью мы можем задать размеры таблицы.
Если потребуется удалить строку, столбец или таблицу, выделяем нужный объект и нажимаем клавишу <Del> или выбрать пункт Удалить строку(Удалить столбец) подменю Таблица меню Изменить.
Упражнение 3. Форматирование таблиц
Если мы выделим ячейку или просто поставим на нее курсор, редактор свойств позволит нам задать ее параметры (рис.2.9).
Рисунок 2.9– Форматирование таблицы заданием параметров в панели Свойства
Раскрывающейся список Гориз. позволяет задать горизонтальное выравнивание содержимого ячейки. Аналогичный список Верт. задает вертикальное выравнивание содержимого ячейки. В полях Ш и В соответственно ширина и высота ячейки. Флажок Без переноса, будучи включенным, запрещает перенос строк внутри ячейки. Флажок Заголовок при включении превращает выделенную ячейку в ячейку заголовок. Поле ввода Фон служит для задания интернет-адреса фонового изображения ячейки, а селектор цвета Фон -цвета ее фона. Если не то ни другое не задано, будут использоваться параметры фона родительского элемента.
Селектор цвета Рамка позволяет задать цвет рамки ячейки.
Для строк предлагается такой же набор параметров, как и для ячеек. Естественно эти параметры применяются не к отдельной ячейке, а ко всей строке.
Вид редактора свойств, после выделения всей таблицы имеет следующий вид (рис.2.9).
Рисунок 2.10– Форматирование таблицы заданием параметров в панели Свойства
Поля Строки и Столбцы служат для быстрого изменения количества строк и столбцов таблицы. Поле ввода Ш служит для задания ширины таблицы В - высоты.. В раскрывающемся списке справа выбирается единица измерения: пиксели или проценты. Поле ввода Блок задает отступ между границей ячейки и ее содержимым. Поле Пробел задает отступ между границами находящихся рядом ячеек. В поле ввода Граница задается толщина рамки ячеек в пикселях. Раскрывающейся список Выровн. служит для горизонтального выравнивания таблицы. Поле ввода Избр.фона служит для задания интернет-адреса файла фонового изображения всей таблицы. Селектор цвета Цвет фона задает цвет фона таблицы, селектор цвета Цвет рамки задает цвет рамки таблицы.
Кнопка
Очистить ширину столбцов 
удаляет
все заданные для ячеек таблицы и самой
таблицы значения ширины, а кнопка
Очистить высоты строк 
-все
заданные значения высоты. Кнопка
позволяет
преобразовать относительные значения
ширины ячеек в абсолютные. Кнопка 
выполняет
обратное преобразование значений ширины
ячеек-из абсолютных в относительные.
Теперь займемся объединением ячеек таблиц. Прежде чем объединить ячейки таблиц их нужно выделить. После этого обратим внимание на редактор свойств. В его левом нижнем углу находится кнопка Объединить выбранные ячейки используя промежутки (рис.2.11).
Рисунок 2.11– Форматирование таблицы заданием параметров в панели Свойства
С ее помощью производится объединение ячеек.
Упражнение 4. Табличный дизайн Web- страниц
Т Три созданные ранее Web-страницы теперь нужно переделать. Основой их должна стать таблица с невидимыми границами, построение которой будет продемонстрированно ниже. Это позволит ровно и аккуратно распределить подготовленную информацию по ячейкам. Для таблицы с Хобби возможно задание дополнительной таблицы.
Построение таблиц разметки вручную
Сейчас мы рассмотрим самый очевидный способ построения таблиц разметки. (Самый очевидный, но не самый простой.) Это создание "скелета" нашей страницы вручную, т. е. помещение на Web-странице обычной таблицы HTML и форматирование ее специальным образом. Такой способ идеален для небольших таблиц разметки и, следовательно, для простых сайтов.
Что касается схемы табличного дизайна, то лучше всего подходит схема, классического дизайна.
Переключитесь на новый сайт, создайте новый файл default.htm и откройте его в окне документа Dreamweaver. Откройте диалоговое окно Page Properties. Задайте для новой страницы следующие параметры:
цвет фона — белый (#FFFFFF);
цвет текста — черный (#000000);
цвет гиперссылок — темно-красный (#990000);
цвет посещенных гиперссылок — темно-серый (#666666);
цвет активной гиперссылки — ярко-красный (#FF0000);
название страницы — "Иван И. Иванов".
А теперь поместите на странице таблицу. Таблица эта должна содержать три строки и два столбца и не должна иметь границы. Ширина этой таблицы должна быть равна 100%, т. е. таблица должна занимать все окно Web-обозревателя по ширине; высоту же не задавайте. Все остальные параметры оставьте по умолчанию. Ну а дальше уже подойдите к процессу творчески и сделайте сайт с тремя страницами такого дизайна.