- •Содержание
- •Лабораторная работа № 9. Среда Dreamweaver mx 2004. Работа с текстом.
- •Контрольные вопросы.
- •Лабораторная работа № 10. Работа с графическими изображениями в Dreamweaver mx 2004.
- •Контрольные вопросы.
- •Лабораторная работа № 11. Табличный дизайн в Dreamweaver mx 2004.
- •Контрольные вопросы.
- •Лабораторная работа № 12. Каскадные таблицы стилей в Dreamweaver mx 2004.
- •Контрольные вопросы.
- •Лабораторная работа № 13. Свободно позиционируемые элементы.
- •Контрольные вопросы.
- •Лабораторная работа № 14. Работа с фреймами в Dreamweaver mx 2004.
- •Контрольные вопросы.
- •Лабораторная работа № 15. Анимация элементов Web-страниц в Dreamweaver mx 2004.
- •Контрольные вопросы.
- •Итоговая работа
- •Примерные темы Web-сайтов.
- •Рекомендуемая литература
Контрольные вопросы.
-
Какие типы графических файлов существуют?
-
Как выполнить вставку графического изображения?
-
Как создать изображение-гиперссылку?
-
Что такое карта-изображение?
-
Как создать карту-изображение?
-
Как создать надпись Flash?
-
Как создать кнопку Flash?
-
Как изменить фон страницы?
-
Как разместить в качестве фона страницы графическое изображение из файла?
-
Как просмотреть страницу с надписью Flash без вызова Web-обозревателя?
Лабораторная работа № 11. Табличный дизайн в Dreamweaver mx 2004.
Цель работы: Изучить возможности Dreamweaver по созданию и работе с таблицами. Получить практические навыки работы с таблицами в Dreamweaver.
Краткие теоретические сведения.
Удобным средством размещения информации является таблица. В ячейках таблицы можно разместить и текст, и графику, и другие таблицы и др.
Создание простой таблицы:
-
На вкладке Common инструментария объектов нажать кнопку Table , либо выполнить команду InsertTable, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<T>.
-
В появившемся диалоговом окне Table задать параметры таблицы:
Table size (размеры таблицы):
Rows – количество строк,
Columns – количество столбцов,
Table Width – ширина таблицы в процентах (Percent), или в пикселях (Pixels),
Border thickness– толщина границ таблицы в пикселях,
Cell padding – расстояние между границей ячейки таблицы и ее содержимым в пикселях,
Cell Spacing –расстояние между границами отдельных ячеек;
Header (Заголовок) – для создания “шапки” таблицы вместе с выделенным столбцом или строкой, которые будут оформлены как ячейки заголовка (полужирный шрифт, выравнивание по центру):
None – нет “шапки” и выделенного первого столбца,
Left – выделенный первый столбец,
Top – “шапка”,
Both – “шапка” и выделенный первый столбец;
Caption – название таблицы;
Align caption – выравнивание:
Default (по умолчанию) – выравнивание выполняет Windows,
Top – название находится над таблицей и выравнивается по центру,
Bottom – название находится под таблицей и выравнивается по центру,
Left - название находится под таблицей и выравнивается по левому краю,
Right - название находится под таблицей и выравнивается по правому краю;
Summary – текст-“подвал” таблицы.
-
Нажать клавишу Ok.
Добавление строки или столбца:
-
Поместить текстовый курсор в ячейку строки, перед которой нужно добавить строку, или ячейку, слева от которой нужно добавить столбец.
-
Выполнить команду ModifyTableInsert Rows или ModifyTableInsert Columns, или ModifyTableInsert Rows or Columns.
-
В появившемся окне Insert Rows or Columns задать необходимые параметры (Above The Selection- над текущей строкой, Below The Selection – под текущей строкой).
-
Нажать клавишу Ok.
Параметры таблицы при выделенной таблице можно установить в редакторе свойств, который принимает вид:
где
Rows и Cols –количество строк и столбцов соответственно; W и H – ширина и высота таблицы; Bg Image – имя файла фонового изображения для всей таблицы; Bg Color- цвет фона таблицы; Brdr Color – цвет границы таблицы; CellPad – расстояние между границей ячейки и ее содержимым в пикселях; CellSpace – расстояние между границами находящихся рядом ячеек в пикселях; Border – толщина границы ячейки в пикселях; Align – горизонтальное выравнивание таблицы.
Эти же параметры можно установить в диалоговом окне Table.
В левом нижнем углу редактора свойств расположены кнопки управления значениями ширины и высоты ячеек:
Clear Cell Heights- стереть значения высоты строк; Clear Cell Widths – стереть значения ширины ячеек; Convert Widths to Pixels – преобразовать ширину ячеек в пиксели; Convert Heights to Pixels – преобразовать высоту в пиксели; Convert Widths to Percent - преобразовать ширину ячеек в проценты;
Convert Heights to Percent - преобразовать высоты ячеек в проценты.
Эти же параметры можно задать, выполнив команду ModifyTable (ПреобразованиеТаблица).
Слияние ячеек – это объединение ячеек в одну. Ячейки могут быть слиты как по горизонтали, так и по вертикали. Для слияния ячеек по горизонтали нужно:
I способ:
-
Выделить ячейки, которые нужно объединить.
-
Выполнить команду ModifyTableMerge Cells, либо из контекстного меню выбрать TableMerge Cells, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.
II способ (слияние двух ячеек):
-
Установить курсор в крайнюю левую ячейку.
-
Выполнить команду ModifyTableIncrease Column Snap, либо из контекстного меню выбрать Table Increase Column Snap.
Для слияния ячеек по вертикали нужно воспользоваться командой ModifyTableIncrease Row Snap.
III способ:
-
Выделить группу ячеек.
-
Нажать кнопку объединения ячеек Merges selected cells using spans в левом нижнем углу редактора свойств, либо выполнить команду ModifyTableMerge Cells, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.
Разъединить ячейки можно следующим образом:
-
Если слияние было выполнено по горизонтали, то нужно выполнить команду ModifyTableDecrease Column Snap.
-
Если слияние было выполнено по вертикали, то нужно выполнить команду ModifyTableDecrease Row Snap.
Разъединение текущей ячейки по горизонтали или вертикали.
-
Установить текстовый курсор в ячейку, которую необходимо разделить.
-
Нажать кнопку разделения ячеек Splits cells into rows or columns в левом нижнем углу редактора свойств, либо выполнить команду ModifyTableSplit Cell, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>.
-
В появившемся окне Split Cell задать вариант деления ячейки.
-
Нажать клавишу Ok.
Предопределенные таблицы. Dreamweaver предлагает на выбор множество предопределенных форматов таблиц, которые выбираются с помощью диалогового окна Format Table. Для вызова этого окна нужно:
-
Установить курсор в любую ячейку таблицы;
-
Выполнить команду CommandsFormat Table;
-
В появившемся окне задать параметры;
-
Нажать кнопку Ok.
Сортировка данных в таблице выполняется следующим образом:
-
Выделить таблицу.
-
Выполнить команду CommandsSort Table.
-
В появившемся окне Sort Table задать параметры сортировки: Sort By – номер первого столбца; Alphabetically – сортировка по буквенному значению, Numerically – сортировка по числовому значению, Ascending – сортировка по возрастанию значений, Descending – сортировка по убыванию значений.
Вставка табличных данных. Dreamweaver позволяет поместить на Web-странице табличные данные, сохраненные в текстовом формате. Текстовый формат записи – это запись данных, при которой данные записываются в виде строк, а значения отделяются друг от друга разделителем, например, запятой. Файлы такого формата имеют расширение CSV(Comma Separated Values – значения, разделенные запятыми). Такие файлы могут создаваться, например, в Microsoft Excel, Microsoft Access.
Вставка табличных данных в Web-страницу:
-
Поместить курсор в место вставки табличных данных.
-
Выполнить команду InsertTable ObjectsImport Tabular Data, или нажать кнопку Tabular Data вкладки Layout инструментария объектов.
-
В появившемся окне Import Tabular Data задать параметры: Data File –имя файла данных; Delimiter – список разделителей значений (Tab – знак табуляции, Comma – запятая, Semicolon- точка с запятой, Colon- двоеточие, Other- другой знак); Table Width – ширина результирующей таблицы; Fit to Data – ширину таблицы задает Web-обозреватель; Set- жесткое задание ширины таблицы; Format Top Row – режим форматирования первой строки таблицы (заголовка таблицы) (No Formatting – никак не форматируется, Bold – жирный шрифт, Italic- курсив, Bold Italic- жирный курсив).
-
Нажать кнопку Ok.
Задания.
-
Запустить Microsoft Dreamweaver MX 2004.
-
Подготовить в Microsoft Excel текстовый файл, содержащий данные в табличном виде (столбцов не менее 3, и строк – не менее 5). Сохранить этот файл с расширением под именем primer.csv.
-
Подготовить небольшую тематическую Web-страницу, содержащую таблицы, ячейки которых должны включать данные разного типа:
-
рисунки,
-
текст с фоновым рисунком,
-
данные из табличного файла,
-
слияние ячеек,
-
оформление данных в ячейках различными шрифтами,
-
разнообразное оформление самих таблиц (рамок, фона ячеек и др.)
Сохранить созданную страницу в папке Lab-11.
Просмотреть созданную страницу в Web-обозревателе.
Завершить работу в Microsoft Dreamweaver MX 2004.