Контрольные вопросы.

1. Какие типы графических файлов существуют?

2. Как выполнить вставку графического изображения?

3. Как создать изображение-гиперссылку?

4. Что такое карта-изображение?

5. Как создать карту-изображение?

6. Как создать надпись Flash?

7. Как создать кнопку Flash?

8. Как изменить фон страницы?

9. Как разместить в качестве фона страницы графическое изображение из файла?

10. Как просмотреть страницу с надписью Flash без вызова Web-обозревателя?

Лабораторная работа № 11. Табличный дизайн в Dreamweaver mx 2004.

Цель работы: Изучить возможности Dreamweaver по созданию и работе с таблицами. Получить практические навыки работы с таблицами в Dreamweaver.

Краткие теоретические сведения.

Удобным средством размещения информации является таблица. В ячейках таблицы можно разместить и текст, и графику, и другие таблицы и др.

Создание простой таблицы:

1. На вкладке Common инструментария объектов нажать кнопку Table , либо выполнить команду InsertTable, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<T>.

2. В появившемся диалоговом окне 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 – текст-“подвал” таблицы.

3. Нажать клавишу Ok.

Добавление строки или столбца:

1. Поместить текстовый курсор в ячейку строки, перед которой нужно добавить строку, или ячейку, слева от которой нужно добавить столбец.

2. Выполнить команду ModifyTableInsert Rows или ModifyTableInsert Columns, или ModifyTableInsert Rows or Columns.

3. В появившемся окне Insert Rows or Columns задать необходимые параметры (Above The Selection- над текущей строкой, Below The Selection – под текущей строкой).

4. Нажать клавишу 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 - преобразовать высоты ячеек в проценты.

Эти же параметры можно задать, выполнив команду ModifyTable (ПреобразованиеТаблица).

Слияние ячеек – это объединение ячеек в одну. Ячейки могут быть слиты как по горизонтали, так и по вертикали. Для слияния ячеек по горизонтали нужно:

I способ:

1. Выделить ячейки, которые нужно объединить.

2. Выполнить команду ModifyTableMerge Cells, либо из контекстного меню выбрать TableMerge Cells, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.

II способ (слияние двух ячеек):

1. Установить курсор в крайнюю левую ячейку.

2. Выполнить команду ModifyTableIncrease Column Snap, либо из контекстного меню выбрать Table Increase Column Snap.

Для слияния ячеек по вертикали нужно воспользоваться командой ModifyTableIncrease Row Snap.

III способ:

1. Выделить группу ячеек.

2. Нажать кнопку объединения ячеек Merges selected cells using spans в левом нижнем углу редактора свойств, либо выполнить команду ModifyTableMerge Cells, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<M>.

Разъединить ячейки можно следующим образом:

• Если слияние было выполнено по горизонтали, то нужно выполнить команду ModifyTableDecrease Column Snap.

• Если слияние было выполнено по вертикали, то нужно выполнить команду ModifyTableDecrease Row Snap.

Разъединение текущей ячейки по горизонтали или вертикали.

1. Установить текстовый курсор в ячейку, которую необходимо разделить.

2. Нажать кнопку разделения ячеек Splits cells into rows or columns в левом нижнем углу редактора свойств, либо выполнить команду ModifyTableSplit Cell, либо нажать комбинацию клавиш <Ctrl>+<Alt>+<S>.

3. В появившемся окне Split Cell задать вариант деления ячейки.

4. Нажать клавишу Ok.

Предопределенные таблицы. Dreamweaver предлагает на выбор множество предопределенных форматов таблиц, которые выбираются с помощью диалогового окна Format Table. Для вызова этого окна нужно:

1. Установить курсор в любую ячейку таблицы;

2. Выполнить команду CommandsFormat Table;

3. В появившемся окне задать параметры;

4. Нажать кнопку Ok.

Сортировка данных в таблице выполняется следующим образом:

1. Выделить таблицу.

2. Выполнить команду CommandsSort Table.

3. В появившемся окне Sort Table задать параметры сортировки: Sort By – номер первого столбца; Alphabetically – сортировка по буквенному значению, Numerically – сортировка по числовому значению, Ascending – сортировка по возрастанию значений, Descending – сортировка по убыванию значений.

Вставка табличных данных. Dreamweaver позволяет поместить на Web-странице табличные данные, сохраненные в текстовом формате. Текстовый формат записи – это запись данных, при которой данные записываются в виде строк, а значения отделяются друг от друга разделителем, например, запятой. Файлы такого формата имеют расширение CSV(Comma Separated Values – значения, разделенные запятыми). Такие файлы могут создаваться, например, в Microsoft Excel, Microsoft Access.

Вставка табличных данных в Web-страницу:

1. Поместить курсор в место вставки табличных данных.

2. Выполнить команду InsertTable ObjectsImport Tabular Data, или нажать кнопку Tabular Data вкладки Layout инструментария объектов.

3. В появившемся окне 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- жирный курсив).

4. Нажать кнопку Ok.

Задания.

1. Запустить Microsoft Dreamweaver MX 2004.

2. Подготовить в Microsoft Excel текстовый файл, содержащий данные в табличном виде (столбцов не менее 3, и строк – не менее 5). Сохранить этот файл с расширением под именем primer.csv.

3. Подготовить небольшую тематическую Web-страницу, содержащую таблицы, ячейки которых должны включать данные разного типа:

• рисунки,

• текст с фоновым рисунком,

• данные из табличного файла,

• слияние ячеек,

• оформление данных в ячейках различными шрифтами,

• разнообразное оформление самих таблиц (рамок, фона ячеек и др.)

Сохранить созданную страницу в папке Lab-11.

Просмотреть созданную страницу в Web-обозревателе.

Завершить работу в Microsoft Dreamweaver MX 2004.