В Frontpage имеются две функциональные возможности, которые позволяют
разбивать страницу на разделы, содержащие текст и графические
изображения. Это таблицы и кадры. До этого момента мы выравнивали текст
в строке, добавляя пробелы при помощи стиля абзаца Formatted. Для
выравнивания текста можно использовать и таблицы. С помощью таблиц
выравнивают поля форм (работе с формами посвящена глава 7). Вы также
можете использовать для форматирования элементов страницы каскадные
таблицы стилей. Следует отметить, что каскадные таблицы стилей
поддерживаются только в броузерах последних версий.
Примечание
Броузеры игнорируют такой элемент форматирования, как строки пробелов.
Исключение составляют случаи, когда используется стиль Formatted или
символ неразрывного пробела. В HTML-коде для обозначения неразрывного
пробела применяется последовательность символов &nbps;. Использование
набора таких последовательностей дает возможность отобразить текст с
несколькими следующими подряд пробелами на странице, загруженной в
броузер. В Frontpage символ неразрывного пробела можно вставить с
помощью диалогового окна Symbol (первый в первой строке).
Проектирование таблиц
Важнейшим средством разработки макета Web-страницы является таблица.
Функции таблиц при создании Web-страниц разнообразны. В первую очередь
хочется выделить следующие:
выравнивание данных путем вставки в ячейки таблицы (при этом
предоставляется возможность разделения данных линиями различной
толщины);
представление текста в виде колонок;
выравнивание в формах полей ввода и их названий;
распределение текста и графики по разным колонкам;
создание обрамления вокруг текста или графических изображений;
размещение графических изображений по обе стороны текста (или совсех
сторон) и наоборот;
расположение текста по контуру графического изображения;
создание цветного фона для текстового фрагмента или отдельного
изображения;
включение таблиц в другие таблицы.
В процессе создания таблицы в диалоговом окне Insert Table
устанавливаются значения таких свойств: количество строк и столбцов,
занимаемая площадь страницы по горизонтали, толщина линий, разделяющих
ячейки и ограничивающих таблицу, величина интервалов между содержимым и
внутренним краем границ ячейки, выравнивание таблицы и т.д. В дальнейшем
значения свойств таблицы можно изменить. В любой момент можно удалить
как одну, так и несколько строк или колонок, объединить смежные ячейки,
сформатировать особым образом содержимое одной ячейки или выделенного
диапазона и т.д. При вводе данных размер ячейки увеличивается по
вертикали и по горизонтали в пределах ограничений, установленных для
таблицы и столбца.
Примечание
Вы можете задать ширину таблицы как в пикселях (фиксированная ширина),
так и в процентах от ширины окна броузера или кадра, в который включена
страница. Ширина столбцов таблицы указывается либо в процентах от ширины
таблицы, либо в пикселях (фиксированная ширина). Если ширина отдельного
столбца или всей таблицы задана в пикселях, то способ отображения этой
таблицы в броузере зависит от разрешения экрана, заданного на компьютере
пользователя.
Отображение табличных данных
В классической таблице строки и столбцы строго разграничены. Для
получения такой таблицы необходимо выполнить следующую
последовательность действий:
1. Загрузите Frontpage.
2. Активизируйте команду New подменю Web меню File.
3. Загрузится диалоговое окно New. По умолчанию выбран шаблон One Page
Web. В поле Specify The Location Of The New Web введите имя Web-сервера
и Web-узла. Назовите Web-узел, например, TestTables. Щелкните на кнопке
ОК.
4. Перейдите в режим просмотра Folders. Щелкните два раза на имени файла
Default.htm. Домашняя страница будет открыта в режиме просмотра Page.
5. Нажмите клавишу , чтобы вставить пустую строку в верхней части
страницы
6. Откроите меню Table и активизируйте команду Table подменю Insert. В
результате откроется диалоговое окно Insert Table (рис 61) В этом окне
отображены значения свойств таблицы, установленные по умолчанию Элементы
диалогового окна Insert Table описаны в табл 6.1.
Рис 6.1. Диалоговое окно Insert Table
Таблица 6.1. Свойства таблицы
| Элемент диалогового | Свойство таблицы |
| окна Insert Table | |
| Rows | Количество строк в таблице |
| Columns | Количество столбцов в таблице |
| Alignment | Способ выравнивания таблицы (по умолчанию задано выравнивание по левому краю) |
| Border Size | Толщина разделительных и ограничительных линий в пикселях Значение по умолчанию - 0 Если это значение не изменять, то в броузере рамка таблицы не отображается, a в Frontpage обозначается пунктирной линией |
| Cell Padding | Величина интервалов (в пикселях) между краями ячейки и ее содержимым (значение по умолчанию - 1) |
| Cell Spacing |
Интервал (в пикселях) между смежными ячейками (значение по умолчанию - 2) |
| Specify Width | Ширина таблицы Это значение задается либо в пикселях (переключатель In Pixels), либо в процентах от ширины окна броузера или кадра, в который включена страница (переключагель In Percent) |
7. Не изменяйте чти значения Щелкните на кнопке ОК. В результате будет
создана таблица из двух строк и двух столбцов Выделите таблицу с
помощью
команды Table подменю Select меню Table. Нажмите клавишу , чтобы удалить
таблицу. Если вы на этапе 5 не создали пустую строку в начале страницы, сделайте
это сейчас.
8. Выполните щелчок на кнопке Insert Table панели инструментов Table. Перед вами
появится прототип таблицы, где очень легко указать, сколько строк и столбцов
должна содержать таблица. Щелкните на второй клетке во втором ряду, как показано
на следующем рисунке. В этом случае также будет создана таблица, состоящая из
двух строк и двух столбцов (четырех ячеек).
Мы рассмотрели два способа создания таблицы. При использовании кнопки Insert
Table панели инструментов применяются значения, заданные по умолчанию. В случае
активизации команды Table подменю Insert меню Table вы самостоятельно
определяете значения параметров создаваемой таблицы.
Примечание
Посредством кнопки Insert Table можно создать таблицу, содержащую гораздо больше
строк и колонок, чем изначально отображается в прототипе:
при перемещении указателя мыши за край прототип автоматически расширяется.
Свойства таблицы
Значения, присваиваемые свойствам таблицы, определяют ее внешний вид.
1. В верхнюю левую ячейку созданной нами таблицы введите число 5.
Нажмите клавишу , чтобы перейти в ячейку, расположенную справа, и введите
следующее предложение:
Это достаточно длинное предложение. Ваша таблица должна выглядеть так, как
показано на следующем рисунке. Ширина данной таблицы достигает почти 100% от
ширины окна.
2. Нажмите дважды клавишу со стрелкой вниз, чтобы переместить курсор за пределы
таблицы. Всгавьте после таблицы три пустые строки, трижды нажав клавишу .
Примечание
Если установить курсор в последней ячейке и нажать клавишу , в таблицу
будет добавлена новая строка, а курсор переместится в первую ячейку новой
строки.
3. Активизируйте команду Table подменю Insert меню Table и отключите опцию
Specify Width в нижней части диалогового окна (одноименное поле ввода станет
недоступным). Нажмите кнопку ОК. В результате появится вторая таблица, ширина
которой намного меньше, чем у первой.
4. Введите число 1 в левую ячейку первой строки таблицы, нажмите клавишу ,
вследствие чего курсор переместится во вторую ячейку первой строки, и введите
предложение. Это достаточно длинное предложение
Перейдите в левую ячейку второй строки с помощью клавиши и ведите число 2.
Нажмите еще раз клавишу (курсор переместится в правую ячейку второй
строки) и введите предложение: Это просто предложение
Ширина каждого столбца устанавливается в соответствии с самой длинной строкой в
этом столбце (рис. 6.2).
Рис. 6.2. Для верхней таблицы значение свойства Specify Width задано, а для нижней - не задано
5. Щелкните правой кнопкой мыши на второй таблице и в контекстном меню выберите команду Table Properties, вследствие чего откроется одноименное диалоговое окно, изображенное на рис. 6.3. Как и в диалоговом окне, открываемом посредством команды Table подменю Insert меню Table (рис. 6.1), в нем можно установить такие параметры таблицы, как выравнивание, толщина разделительных и ограничительных линий таблицы, величина интервалов между краями ячейки и ее содержимым, интервал между смежными ячейками и ширина таблицы. Кроме того, предоставлена возможность определить высоту таблицы, выбрать цвет для сплошного фона таблицы или фоновое изображение, указать цвет для разделительных линий. В поле списка Float можно задать, в какую сторону сместить таблицу - вправо или влево, чтобы расположить слева или справа от таблицы текст или изображение. По умолчанию в поле Float выбран пункт Default. Согласно этой установке текст может располагаться только под таблицей или над ней.
Рис 6 3 Диалоговое окно Table Properties
6. Установите следующие значения для свойств таблицы: Border Size - 5, Cell Padding - 6, Cell Spacing - 8. Подтвердите установки щелчком на кнопке ОК. Ваша таблица должна выглядеть так, как показано на следующем рисунке. Выполните щелчок правой кнопкой мыши на правой ячейке первой строки верхней таблицы (рис 6 2) и в контекстном меню выберите команду Cell Properties Откроется одноименное диалоговое окно (рис 6 4) Содержащиеся в нем элементы описаны в табл 6.2.
Рис 6.4. Диалоговое окно Cell Properties
Таблица 6.2. Свойства ячейки
|
Элемент диалогового окна Cell Properties |
Функция |
| Horizontal Ahgnment | Выравнивание содержимого ячейки по горизонтали Возможны следующие варианты Left (по левому краю), Center (по центру), Right (по правому краю). По умолчанию задано выравнивание по левому краю |
| Vertical Alignment | Выравнивание содержимого ячейки по вертикали Возможны следующие варианты Тор (по верхнему краю), Middle (по центру), Baseline (выравнивание содержимого ячейки по опорной линии), Bottom (по нижнему краю)По умолчанию задано выравнивание по центру |
| Rows Spanned | В этом поле указывается, на сколько строк вы хотите растянуть данную ячейку |
| Columns Spanned | В этом поле указывается, на сколько столбцов вы хотите растянуть данную ячейку |
| Header Cell | Форматирование ячейки как заголовка строки или столбца (тексту ячейки назначается полужирное начертание) |
| No Wrap | Запрет расстановки переносов в пределах ячейки в Web-броузере; в противном случае текст разбивается, если окно броузера слишком узкое для его полного отображения |
| Specify Width | Определение высоты ячейки в пикселях или в процентах от общей высоты таблицы (только в том случае, если активна опция Specify Height). Если указанная опция выключена, высота ячейки автоматически меняется таким образом, чтобы вводимый текст или размещаемый в ней объект поместился полностью |
| Borders | В этой области окна можно определить цвет для разделительных и ограничительных линий, которые могут быть как одноцветными, так и двухцветными. В первом случае используйте поле ввода Border, во втором - два любых поля из трех предложенных. В последнем случае рамка получается объемной |
| Background | Создание фона для ячейки (как цветного однотонного, так и содержащего изображения) |
Значения свойств можно изменить как у одной ячейки, так и у выделенного диапазона.
Примечание
При изменении ширины ячейки следите за тем, чтобы общая ширина ячеек в строке не превысила 100%, иначе ячейки таблицы будут отображаться неверно.
1. В поле списка Horizontal Alignment диалогового окна Cell Properties
выберите пункт Center (выравнивание по центру), а в поле Vertical
Alignment - пункт Top (выравнивание по верхнему краю). В поле Border
Size введите значение 1. Подтвердите установки, щелкнув на кнопке ОК.
В результате изменится способ расположения данных в ячейке, а толщина
разделительных и ограничительных линий станет равной одному пикселю.
2. Выделите нижнюю строку таблицы и щелкните правой кнопкой мыши.
В контекстном меню выберите команду Cell Properties. Введите значение
2 в поле Columns Spanned и щелкните на кнопке ОК. В результате таблица
должна выглядеть так, как показано ниже. Крайняя левая ячейка будет
перекрывать две верхние, но справа должна быть дополнительная ячейка.
Примечание
Выделить определенное число ячеек внутри таблицы можно следующим образом:
расположите указатель мыши слева от ячейки, с которой вы начнете выделение, и,
когда он примет вид стрелки, направленной вправо вверх, нажмите левую кнопку
манипулятора и выделите необходимые ячейки.
Примечание
Столбцы созданной вами таблицы могут иметь иную ширину, чем те, что показаны на
рисунке. Это обуславливается различиями в разрешении мониторов.
3. Нажмите комбинацию клавиш или активизируйте команду Undo Edit
Properties меню Edit, чтобы отменить изменения.
4. Выделите первую строку верхней таблицы, откройте диалоговое окно Cell
Properties и введите в поле Rows Spanned значение 2. В завершение щелкните на
кнопке ОК. Две верхние ячейки сместятся влево, а две нижние -- вправо.
5. Щелкните на кнопке Undo панели инструментов. Перейдите в левую ячейку первой строки верхней таблицы и откройте диалоговое окно Cell Properties. Установите опцию Specify Width и активизируйте переключатель In Pixels, чтобы получить возможность самостоятельно указать ширину ячейки в пикселях (поле ввода Specify Width станет доступным). Введите значение 40 в поле ввода Specify Width и щелкните на кнопке ОК. Размеры обеих ячеек в первом столбце увеличатся.
7. Активизируйте кнопку Undo, щелкните на правой ячейке второй строки и откройте меню Table. Данное меню содержит четыре подменю. Команды меню Table описаны в табл. 6.3.
|
Таблица 6.3. Команды меню Table |
|
| Команда | Описание |
| Draw Table | Позволяет начертить таблицу подобно тому, как это выполняется карандашом на листе бумаги |
| Table подменю Insert | При активизации данной команды открывается диалоговое окно Insert Table. В нем можно задать параметры создаваемой таблицы, которая будет вставлена в той позиции, где находится курсор (если курсор расположен в ячейке другой таблицы, вторая таблица разместится в ней) |
| Insert Rows Or Columns подменю Insert | В диалоговом окне Insert Rows Or Columns определяется коли чество строк и столбцов, которые можно вставить выше, ниже,правее или левее выделенной области |
| Cell подменю Insert | Вставляет новую ячейку слева от выделенной ячейки, которая смещается вправо |
| Caption подменю Insert | Предназначена для вставки пустой строки над таблицей. Данная строка связана с таблицей: при выделении или удалении таблицы заголовок также выделяется или удаляется. По умолчаниюдля заголовка таблицы установлено выравнивание по центру, но его можно выровнять по левому или по правому краю |
| Delete Cells | Служит для удаления выделенных ячеек |
| Merge Cells | Позволяет объединить несколько ячеек как в строке, так и в столбце |
| Split Cells | В диалоговом окне Split Cell можно задать разделение выделенных ячеек как на строки, так и на столбцы |
| Cell, Row, Column, Table подменю Select | Первая команда служит для выделения текущей ячейки, вторая - текущей строки, третья - текущего столбца, а четвертая - всей таблицы |
| Distribute Rows Evenly, Distribute Columns Evenly | Первая команда позволяет установить одинаковую ширину для выделенных строк, а вторая - для выделенных столбцов |
| Autofit | Уменьшает длину каждого столбца до тех размеров, которые непосредственно занимает находящаяся в них информация. Активизация данной команды приводит к тем же последствиям, что и отключение опции Specify Width в диалоговом окне Insert Table, т.е. длина ячеек автоматически будет меняться в зависимости от длины вводимого текста или длины размещаемого в них объекта |
| Text To Table подменю Convert | Позволяет преобразовать выделенный текст в таблицу. При активизации этой команды открывается диалоговое окно для выбора разделительного символа. Для разделения содержимого столбцов следует использовать запятые, а для разделения строк - маркеры абзацев |
| Table To Text подменю Convert | Позволяет преобразовать табличные данные в текст, при этом содержимое каждой ячейки образует отдельный абзац |
| Caption, Cell, Table подменю Properties | Эти три команды предоставляют доступ к окнам свойств заглавия таблицы (Caption Properties), выделенного диапазона (Cell Properties) и таблицы (Table Properties) |
Примечание
Чтобы выделить несколько несмежных ячеек, при выполнении щелчков на ячейках
удерживайте нажатой клавишу
Меню Table. Рассмотрим подробнее некоторые команды меню Table, описанные в
табл. 6.3
1. Активизируйте команду Table подменю Insert В открывшемся диалоговом окне
нажмите кнопку ОК, не изменяя установки по умолчанию В результате в ячейке
появится таблица из двух строк и двух колонок.
Примечание
Когда мы создавали вторую таблицу (этап 3 второго упражнения данной главы), то в
окне Insert Table отключили опцию Specify Width На этапе 1 третьего упражнения в
поле Border Size окна Table Properties ввели значение 1. В Frontpage эти
установки были сохранены, поэтому при создании новой таблицы в окне Insert Table
no умолчанию будет отключена опция Specify Width, а в поле Border Size будет
присутствовать значение 1.
1. Выполните щелчок сначала на кнопке Undo, а затем в левой ячейке первой строки
таблицы. Выберите команду Rows Or Columns (строки или столбцы) подменю Insert В
результате откроется одноименное диалоговое окно
Согласитесь с установками по умолчанию установлены
переключатели Rows и Below Selection (ниже выбранной области), а в поле Number
Of Rows (число строк) введено значение 1. Щелкните на кнопке ОК. Под первой
строкой таблицы появится новая строка
3. Снова активизируйте команду Insert Rows Or Columns подменю Insert Установите
переключатели Columns и Left Of Selections (слева от выбранной области) После
этою щелкните на кнопке OK Полученная таблица должна выглядеть так, как показано
на следующем рисунке
4. Активизируйте команду Cell подменю Insert В результате в таблицу будет вставлена новая ячейка, а расположенная справа ячейка сместится за пределы строки вправо Курсор автоматически устанавливается в новой ячейке
Чтобы выделить ячейку, активизируйте команду Cell подменю
Select (выделить ячейку) или нажмите клавишу при выполнении щелчка на
ячейке Для удаления ячеек предназначена команда Delete Cell
5. Активизируйте команду Caption подменю Insert Курсор разместится над таблицей
по центру Введите следующее предложение. Это заголовок таблицы
6. Выделите нижнюю строку в первой таблице Затем выберите команду Merge Cells
(объединить ячейки) В результате в нижней строке будут удалены все
разделительные линии между ячейками
7. Выполните щелчок на крайней правой ячейке первой строки и активизируйте команду Split Cells (разделить ячейки) Откроется диалоговое окно Split Cells
Согласитесь с усгановками по умолчанию и щелкните на кнопке ОК. Указанная ячейка будет разделена на две
8. Активизируйте команду Table подменю Select и нажмите
клавишу . Таблица будег удалена. Щелкните на кнопке Undo, чтобы
восстановить ее.
Примечание
Существует еще один способ выделения таблицы" выполните двойной щелчок, слева от
таблицы (те ее пределов)
9. Откройте диалоговое окно Table Properties и в поле ввода Border Size укажите
-значение 0. Щелкните на кнопке ОК. В результате границы таблицы будут
обозначены пунктирными линиями.
Рисование таблицы
До сих пор вы создавали таблицы, используя команду Table подменю Insert меню
Table. В этом случае юблица формируется автоматически в соответствии с
установленными значениями свойств. После создания таблицы вы изменяли эти
значения в диалоговом окне Tab!c Pioperties, добавляли и удаляли столбцы и
строки, объединяли ячейки и т.д. посредством команд чсню Tabie. Frontpage
предлапш еще один способ создания и редактирования таблиц, согласно которому для
обработки таблиц употребляются кнопки панели инструментов Л able. Кнопка Draw
Table (рисовать таблицу) позволяет вручную начертить таблицу. Кнопка Eraser
(ластик) служит для удаления разде тигельных л1:ний меладу ячейками Остальные
кнопки дублируют соответствующие команды меню Table
1. Установите курсор в пустой строке между двумя таблицами, после чего нажмите
дважды юивишу и один раз клавишу со стрелкой вверх.
Примечание
Целесообразно оставлять пустую строку между таблицами при их создании, поскольку
в Frontpage трудно вставлять строки между таблицами. Легче убрать лишние по
завершении верстки.
1. В меню Table активизируйте команду Draw Table. В результате появится панель
инструментов Table, а указатель мыши приобретет вид карандаша. В табл. 6 4
описаны кнопки панели инструментов Table
3. Установите указатель мыши между дьумя существующими таблицами в левой части
страницы и переместите его сначала по горизонтали до половины страницы, а затем
вниз на расстояние, которое равно высоте второй таблицы.
Глава 6. Таблицы и кадры lul
4. Разместите указатель мыши на верхней границе таблицы, у левого угла.
Переместите указатель по горизонтали на расстояние, равное половине длины
таблицы. Сместите его вниз до нижней границы. Теперь таблица имеет два столбца.
5. Создайте три строки в правом столбце (высота строк может быть произвольной).
6. Выделите второй столбец таблицы. Щелкните на кнопке Distribute Rows Evenly
(равномерно распределить строки) панели инструментов, вследствие чего все три
строки приобретут одинаковую высоту.
7. Нарисуйте линию, разделяющую вторую строку правого столбца
на две части.
8. Проведите две линии, разделяющие нижнюю строку в правом столбце на три части.
Ширина первой новой ячейки устанавливается равной ширине ячейки, расположенной
сверху
9. Установите указатель на правой границе первого столбца. В
результате указатель приобретет вид двунаправленной стрелки
10. Сместите границу столбца вправо, чтобы расширить его.
11. Активизируйте кнопку Erase на панели инструментов Table. Указатель мыши
приобретет вид ластика Проведите ластиком перпендикулярно линии, которая
разделяет крайнюю правую и среднюю ячейки в нижней строке. В результате эта
разделительная линия исчезнет (см ниже).
12. Еще раз щелкните на кнопке Eraser (восстановится обычный
вид указателя мыши). Установите указатель на верхней границе второго столбца
Когда указатель превратится в маленькую черную стрелку, направленную вниз,
выполните щелчок, чтобы выделить столбец.
13. Нажмите клавишу и сместите указатель вправо, расположив его над
крайним столбцом. Как только вы выполните щелчок, будут выделены два крайних
столбца.
14. Щелкните на кнопке Distribute Columns Evenly (равномерно распределить
столбцы) панели инструментов. Полученная в результате таблица изображена ниже.
15. Выделите таблицу, воспользовавшись командой Table подменю
Select меню Table, и нажмите клавишу , чтобы удалить ее.
Таблица 6 4. Кнопки панели инструментов Table
Выполненные нами упражнения призваны продемонстрировать, насколько широки возможное ги FiontPage в плане создания таблиц Все операции осуществляются в режиме WYSIWYG на любом этапе работы вы видите, как создаваемая таблица будег выглядеть в броузере.
Импортирование текстовой информации в таблицу.
Для тою чтобы корректно импортировать текст в таблицу, он должен быть
подготовлен соответствующим образом фрагменты текста, помещаемые в смежные
ячейки таблицы, должны быть отделены один от другого специальными символами
(разделителями), например запятыми. Чаще всего в качестве разделителей
используют знаки пунктуации. Далее выполните следующую последовательность
действии:
1. Выполните щелчок под нижней таблицей, нажмите клавишу
2. Выделите введенный текст; меню 1 T
able
и активизкруйте команду text To T
able Подменю
Comen *
3. В загрузившемся диалоговом окне Convert Text To Table установите
переключатель Other, удалитe точки в расположенном справа поле и введите
точку с запятой Щелкните на кнопке ОК В результате текст будет
импортирован в таблицу (рис 6.5.)
Рис 6.5. Таблица, созданная на основе тестовой информации
Примечание
HTML не поддерживает символы табуляции Если вы конвертируете в таблицу
текстовую информацию, в которой табуляторы использованы для разделения
массивов информации, эти символы будут удалены, вследствие чего таблица
будет создана неправильно. Вместо табуляторов следует применять знак
пунктуации, который в текстовом файле не употребляется. В настоящей
примере использована точка с запятой, поскольку текст содержит запятые и
дефисы. Альтернативным знаком является маркер абзаца * Вы можете
захотеть импортировать в таблицу содержимое текстового файла Но сначала
вы должны импортировать текст из файла нд страниц) активизировав команду
File меню Insert При этом следует помнить, что Frontpage некорректно
импортирует кирилический текст (с латинским у него проблем не возникает)
Поэтому, если вы хотите извлечь из файла подобный текст и разместить его
на странице откройте файл в каком либо текстовом редакторе например
Notepad, и перенесите текст на страницу с помощью буфера обмена - Прим.
ред.
4. Выделите нижнюю (пусгую) строку в таблице, если таковая имеется, и
удалите ее.
5. Щелкните правой кнопкой мыши на таблице и активизируйте команду Table
Properties контекстного меню. В поле списка Alignment открывшегося
диалогового окна выберите элемент Center, затем выключите опцию Specify
Width В поле Cell Padding введите значение 4, указав таким образом
интервал между краями ячейки и ее содержимым Выполнив все перечисленные
установки, щелкните на кнопке ОК.
6. Выделите isepxmolo строку, щелкните на ней правой кнопкой мыши и
откроите диалоговое окно Cell Properties В этом окне установите опцию
Header Cell и в поле списка Horizontal Alignment выберите пункт Left. В
завершение нажмите кнопку ОК.
7. В меню Table активизируйте команду Caption подменю Insert. Щелкните
на кнопке Bold панели инструментов Formatting. Вводимый заголовок
табчицы будет иметь жирное начертание. Введите, например, следующий
заголовок. Ф.И.О. и год рождения сотрудников
8. Выделите первую строку таблицы и щелкните на поле списка Fill Color
(цвет заполнения) панели инструментов Table. В открывшемся списке
выберите цвет Aqua (третий слева квадрат во втором ряду) и нажмите
кнопку ОК.
9. Выделите оставшиеся строки в таблице и откройте диалоговое окно Cell
Properties. Укажите желтый цвет в поле списка Color в области
Back-ground, а в поле списка Horizontal Alignment выберите пункт Center.
Щелкните на кнопке ОК Полученная в результате таблица должна выглядеть
так, как показано на рис. 6.6.
10. Щелкните на кнопке Save, чтобы сохранить созданные таблицы.
11. В меню File выберите команду Preview In Browser. В загрузившемся
диалоговом окне выберите броузер Internet Explorer 5.0 и щелкните на
кнопке Preview. На рис. 6.7 представлена домашняя страница Web-узла Test
Tables, содержащая созданную нами таблицу. Если вы используете другой
броузер, откройте данную страницу в нем и посмотрите, как будет
отображаться созданная нами таблица.
В броузерах последних версий расширены средства поддержки таблиц. Ранее
существовали значительные различия между способами отображения таблиц в
разных броузерах. Некоторые броузеры не поддерживали их вовсе. Вы должны
просмотреть свою работу в различных броузерах и оценить, как выглядят в
них ваши таблицы. В данный момент на рынке броузеров доминируют продукты
фирм Netscape и Microsoft. В этих двух броузерах достаточно хорошо
осуществляется поддержка таблиц.
Рис. 6.6. Окончательный вариант таблицы (режим просмотра Page)
Рис. 6.7. Окончательный вариант таблицы (Internet Explorer 5.0)
Использование таблиц при оформлении Web-страницы
Таблицы удобно использовать для разделения страницы на области, в
которых будет представлена информация.
Выполните следующие действия:
1. В режиме просмотра Page создайте новую страницу. Вставьте одну пустую
строку в начале страницы.
2. Активизируйте команду Clip Art подменю Picture меню Insert.
Загрузится диалоговое Clip Art Gallery. Прокрутите содержимое окна вниз,
чтобы увидеть пиктограмму Places. Щелкните на ней два раза. В окне будут
представлены изображения, относящиеся к рубрике Places. Выберите
изображение с памятником архитектуры Тадж-Махал и на появившейся панели
нажмите кнопку Insert Clip. Изображение будет помещено на страницу.
3. Расположите курсор под изображением и введите следующий текст:
"Памятник индийской архитектуры. Мавзолей султана Шах-Джахана и его
жены. Расположен в 2 километрах от города Агра. Пятикупольное сооружение
из белого мрамора с мозаикой из цветных камней. Высота составляет 74
метра. К Тадж-Махалу примыкают четыре минарета и сад. С этим образцом
индо-мусульманской архитектуры знакомит картина известного русского
художника В.В. Верещагина, побывавшего в Индии."
4. Выделите введенный текст. Нажмите комбинацию клавиш , чтобы
скопировать текст в буфер обмена. Расположите курсор в конце последнего
предложения и вставьте пробел. Нажмите комбинацию клавиш . В
результате будет увеличен текстовый массив, что позволит в дальнейшем
достигнуть требуемого результата - окружить рисунок текстом.
5. Переместите указатель в начало страницы. Активизируйте команду Table
подменю Insert меню Table. В загрузившемся окне в поле Rows введите
значение 2, в поле Columns -1, в поле Border Size - 0, выключите опцию
Specify Width. Новая таблица займет место графического изображения и
текста, которые сместятся вниз. Результат представлен на следующем
рисунке.
6. Перетяните изображение в верхнюю строку таблицы.
7. В нижнюю строку таблицы введите название памятника" Тадж-Махал
Задайте для текста жирное начертание и выровняйте его по центру габтацы,
щелкнув соответственно на кнопках Bold и Center панели инс грументов
Formatting
8 Откройте диалоговое окно Table Properties и выделите пункт Left в поле
списка Float Щелкните на кнопке ОК. В результате текст разместится
вокруг таблицы. В текстовых прочее сорах WOT эффект называется
обтеканием
9 Сохраните страницу, присвоив ей имя Tatj
_Mahal
и заголовок Тадж-Махал В меню File активизируйте команду Preview In
Browser Выберите броузер и щелкните на кнопке Pieview На рис 6 8
страница отображена в броузере Internet Explorer 5 О
Как вы могли убедиться, с помощью таблиц удобно выравнивать рисунки и
подписи Создайте несколько страниц на основе шаблонов, в которых
используются таблицы, и вы получите подтверждение того, насколько это
мощное средство представления информации
Рис 6.8. Обтекание изображения текстом
У вас могут быть свои идеи относительно применения таблиц на Web-странице Реализуйте их Экспериментируйте до тех пор, пока не достигнете необходимою результата Только таким путем вы сможете получить удачнооформленную страницу
Работа с кадрами
Klapbi, как и таблицы служат для размещения информации в отдельных об
гостях страницы Кадры - это окна размещенные на Web-странице и
предназначенные для отображения других Web-страниц На странице можно
расположить любое количество кадров С помощью кадров очень удобно
представлять информацию на Web-узле со сложной системой рубрикации В
этом случае следует создать страницу с двумя кадрами кадром оглавления и
основным кадром Кадр оглавления содержит перечень рубрик, которые
являются ссылками. При активизации рубрики-ссылки в основной кадр
загружается соответствующая страница.
Далее вы выполните простой учебный пример, целью которого является
продемонстрировать принципы работы с кадрами (в этом примере будет всего
три рубрики). Данный пример мы посвятим памятникам архитектуры.
1. Создайте новый одностраничный Web-узел и присвойте ему имя Frames. В
режиме просмотра Page активизируйте команду Page подменю New меню File.
В загрузившемся диалоговом окне New перейдите на вкладку Frame Pages, на
которой представлены шаблоны страниц с кадрами (рис. 6.9).
По умолчанию выбран шаблон Banner and Contents. В области Preview
представлена композиция страницы, которая будет создана на основе
данного шаблона, а в области Description приводится описание шаблона.
Последовательно выберите каждый из шаблонов, чтобы прочитать их описание
и выяснить, какие же страницы могут быть созданы на их основе.
Рис. 6.9. Диалоговое окно New (вкладка Frame Pages)
2. После ознакомления с возможностями шаблонов выберите шаблон
Header, Footer and Contents. Щелкните на кнопке ОК.
В результате будет создана страница, содержащая четыре кадра: кадр с
верхним колонтитулом (верхний кадр), кадр оглавления слева, основной
кадр и кадр нижнего колонтитула (нижний кадр) (рис. 6.10). Каждый кадр
содержит две кнопки: Set Initial Page (используется для выбора начальной
страницы, т.е. страницы, которая первой отображается в кадре после
загрузки страницы кадров в броузер) и New Page (щелчок на кнопке New
Page приводит к созданию пустой начальной страницы).
Рис. 6.10. Страница с кадрами, созданная на основе шаблона Header, Footer and Contents
3. Щелкните на кнопке New Page в верхнем кадре. В результате в кадре
будет создана новая пустая страница.
Примечание
Для того чтобы в качестве начальной страницы кадра использовать уже
существующую страницу, необходимо выполнить следующее: в этом кадре
щелкнуть на кнопке Set Initial Page; в загрузившемся диалоговом окне
Create Hyperlink выбрать нужную страницу.закрыть окно посредством
кнопки ОК.
4. Щелкните правой кнопкой на странице в верхнем кадре и в контекстном
меню выберите команду Shared Borders. В загрузившемся одноименном
диалоговом окне по умолчанию установлен переключатель Current Page (не
изменяйте эту установку). Если установлены какие-то опции, выключите их.
Примечание
Кадры - это средство навигации, альтернативное общим областям. Поэтому
при наличии кадров на Web-узле общие области не используются.
5. На странице в верхнем кадре введите заголовок "Памятники
архитектуры". Присвойте заголовку стиль абзаца Heading 2 и выровняйте
его по центру.
6. Щелкните на кнопке New Page в нижнем кадре. На созданной странице
введите следующее предложение: "С вопросами и замечаниями обращайтесь:
[email protected]". Выделите введенный текст и в поле списка Font Size
на панели инструментов Formatting выберите значение 2. Размер шрифта
введенного предложения станет равным 10 пунктам.
7. Создайте новую страницу в кадре оглавления (левый кадр). Введите
следующие три строки текста (после ввода очередной строки нажимайте
клавишу
):
Акрополь
Пирамиды
Тадж-Махал
8. Создайте новую страницу в основном кадре, щелкнув на кнопке New Page.
Нажмите клавишу , чтобы создать пустую строку. Во второй строке
введите следующее предложение: "Добро пожаловать в мир архитектуры!".
Присвойте введенному тексту стиль абзаца Heading 1 и выровняйте по
центру страницы. Придайте тексту курсивное начертание (выделите его и
нажмите кнопку Italic на панели инструментов Formatting).
Итак, начальные страницы всех кадров созданы. Далее мы внесем изменения
в начальную страницу кадра оглавления.
9. Щелкните на кнопке New Page панели инструментов Standard. Будет
создана новая пустая страница без кадров. Активизируйте команду Clip Art
подменю Picture меню Insert. Загрузится диалоговое окно Clip Art Gallery.
В поле Search For Clips введите название памятника архитектуры:
Acropolis. По прошествии некоторого времени будут представлены
результаты поиска (см ниже) - изображение Акрополя. Выберите изображение
и на появившейся панели нажмите кнопку Insert Clip. Изображение будет
помещено на страницу.
10. Создайте две новые пустые страницы и разместите на них еще
дваизображения памятников архитектуры из библиотеки Clip Art: на первой
- египетские пирамиды, на второй - Тадж-Махал. В первом случае в окне
Clip Art Gallery в качестве критерия поиска введите Pyramids, во втором
- Taj Mahal.
11. Перейдите на страницу с изображением Акрополя. Нажмите кнопку Save.
В диалоговом окне Save укажите имя файла страницы Acropolis. htm и
измените предлагаемый по умолчанию заголовок на Акрополь. Щелкните на
кнопке Save. Загрузится диалоговое окно Save Embedded File. Щелкните на
кнопке Change Folder. В одноименном окне выберите папку Images. Закройте
оба окна посредством кнопок ОК. Файл изображения будет сохранен в папке
Images
12. Сохраните страницы с изображениями пирамид и дворца Тадж-Махал. В
первом случае в качестве имени файла страницы и заголовка укажите
Pyramids htm и Пирамиды, во втором - Taj_Mahal.htm и Тадж-Махал.
13. Перейдите на страницу в кадре оглавления. Выделите слово Acropolis и
нажмите на кнопку Hyperlink панели инструментов Standard. В окне Create
Hyperlink выберите страницу Acropolis.htm. В поле Target Frame должна
присутствовать запись Page Default (main). Это означает, что страница (Acropolis.htm),
на которую создается гиперссылка, будет открыта в основном кадре.
Изменить кадр назначения можно в диалоговом окне Target Frame, которое
открывается при щелчке на кнопке Change Target Frame. В списке
Common Targets этого окна необходимо выбрать соответствующий пункт. В
частности, если выбран пункт New Window, то при щелчке на гиперссылке
страница будет открыта в новом окне броузера, а если указан пункт Same
Frame - страница будет открыта в том же кадре, в котором находится
гиперссылка
14. Руководствуясь предыдущим пунктом, в кадре оглавления создайте еще
две гиперссылки на страницы Pyramids.htm и Taj_Mahal.htm, включив в них,
соответственно, слова Пирамиды и Тадж-Махал Таким образом, в кадре
оглавления созданы три гиперссылки, при активизации которых
соответствующие страницы будут открываться в основном кадре.
15. Мы закончили создание страницы с кадрами. Результат представлен на
рис. 6.11.
16. В меню File выберите команду Save. Загрузится диалоговое окно Save
As, в котором будет предложено сохранить страницу, расположенную в
верхнем кадре. В правой части окна Save As показана композиция страницы
с кадрами (кадру, который сохраняется в настоящий момент, соответствует
закрашенная область). Присвойте странице имя Fr_header Щелкните на
кнопке Save. Далее в окне Save As будет предложено сохранить страницу
нижнего кадра (страницы кадров сохраняются в той последовательности, в
которой они создавались). Присвойте странице нижнего кадра имя FrJboter,
кадра оглавления - Fr_contents, основного кадра - Fr_main В завершение
будет предложено сохранить страницу с кадрами. Присвойте ей имя Frames и
заголовок "Памятники архитектуры" (рис. 6.12)
Рис. 6.11. Страница с кадрами в режиме просмотра Page
Рис. 6.12. Процедура сохранения страницы с кадрами
17. Загрузите страницу с кадрами в броузер и посмотрите, как она будет
выглядеть.
Рис. 6.13. Страница с кадрами Web-узла Frames в броузере
Кадр обладает рядом свойств, которыми вы можете управлять. Значения свойств кадра устанавливаются в диалоговом окне Frame Properties (свойства кадра). Чтобы открыть это окно, щелкните правой кнопкой на кадре (например, на кадре оглавления) и активизируйте команду Frame Properties контекстного меню. В результате откроется диалоговое окно, изображенное на рис. 6.14. Элементы окна Frame Properties описаны в табл. 6.5.
Таблица 6.5. Свойства кадра
| Элемент | Описание |
| Name (имя) | При создании гиперссылки на странице кадров вы должны указать в диалоговом окне Create Hyperiink имя кадра, в который загрузится соответствующая страница при активизации этой ссылки |
| Initial Page Начальная страница | В данном поле ввода указывают, какая страница будет отображаться в кадре первой при его загрузке |
| Frame Size (размер кадра) | Данная область содержит два поля ввода -Width (ширина) и Row Height (высота строки) Здесь могут быть заданы значения в пикселях, в относительных единицах или в процентах от размера окна броузера |
| Margins (поля) | В этой области определяется величина полей кадра (интервалов между содержимым страницы и границами кадра) и пикселях |
| Resizable In Browser (изменять размер в броузере) | Если эта опция установлена, пользователь может изменить размер кадра в своем броузере |
| Show Scrollbars (отображать полосы прокрутки) | Данное поле списка содержит три пункта If Needed (если необходимо) - полосы прокрутки отображаются только в том случае, если содержимое страницы не помещается в окне, Never (никогда) - полосы прокрутки не отображаются, не зависимо от объема информации на странице, Always (постоянно) - полосы прокрутки отображаются постоянно Какой из этих пунктов следует выбрать, зависит от содержимого страниц, которые будут загружаться в кадр Например, если кадр расположен в верхней части страницы и содержит общую для всех страниц информацию (допустим, навигационную панель), следует выбрать пункт Nevei Следуег учитывать, что способ отображения страницы зависит от разрешения экрана Поэтому оптимальный вариант - выбор пункта If Needed Если же вы хотите предоставить пользователю максимум возможностей для просмотра информации в кадре, выберите пункт Always |
Щелкните на кнопке Frames Page в диалоговом окне Frame Properties, вследствие чего откроется диалоговое окно Page Properties. В поле ввода Frame Spacing задается толщина разделительных линий между кадрами на странице. Опция Show Borders определяет, будут ли отображаться линии между кадрами.
На странице кадров можно создать дополнительные кадры. Выполните следующие действия: в режиме просмотра Page, удерживая нажатой клавишу , переместите верхнюю границу основного кадра немного вниз, после чего отпустите клавишу и кнопку мыши. В результате над основным кадром будет создан кадр (рис. 6.15), не содержащий страницу.
Рис. 6.15. Новый кадр
Надеемся, вы убедились, что кадры - очень удобное средство представления
информации Одна из проблем, возникающих при работе с кадрами, связана с тем что
не все броузеры поддерживают их Netscape Navigator поддерживает кадры, начиная с
версии 2 0, a Internet Explorer - с версии 3 0 Поддержка кадров была введена в
HTML 3 2 Некоторые пользователи по-прежнему применяют броузеры ранних версий
Таким образом, следует учитывать, что, возможно, значительная часть вашей
аудитории не сможет надлежащим образом просмотреть страницы с кадрами.
Решение данной проблемы заключается в создании страницы No Flames (без кадров)
Если пользовательский броузер не поддерживает кадры, вместо них отображается
страница No Frames Frontpage автоматически формирует
страницу No Frames при создании страницы с кадрами Вы сможете убедиться в этом,
щелкнув на вкладке No Frames в нижней части окна Frontpage когда открыта
страница с кадрами На рис 6 16 показана страница No Frames, создаваемая по
умолчанию На этой странице вы можете порекомендовать пользователю применять
броузер, поддерживающий кадры. Следует также создать ссылки на те Web-узлы,
откуда можно загрузить броузер, поддерживающий кадры (например, на Web-yзeл
фирмы Microsoft, с которого можно загрузить броузер Internet Explorer 5.0)
Примечание
Для загрузки страницы с кадрами требуется больше времени, чем для загрузки
обычной Web-страницы, так как в действительности выполняется загрузка нескольких
страниц Использование кадров должно быть обоснованным
Рис 6.16. Страница No Flames в режиме просмотра Pasu e
Проектирование страниц кадров в Frontpage - несложное занятие, благодаря многочисленным функциональным возможностям, предоставляемым Frontpage, а также тому, что в Frontpage редактирование страницы осуществляется в режиме WYSIWYG
Муниципальное общеобразовательное учреждение
«Средняя общеобразовательная школа № 2
с углубленным изучением иностранных языков».
Практическая работа
«Создание сайта в программе FrontPage»
Подготовила: учитель информатики
Ноябрьск 2010
Практическая работа «Создание сайта»
Усманова Светлана Хамидулловна ,
учитель информатики
МОУ СОШ № 2
г. Ноябрьска, ЯНАО, Тюменской обл.
Цель : научиться создавать взаимосвязанные веб-страницы, вставлять объекты WordArt, бегущую строку, картинки, кнопки, гиперссылки, сохранять документ.
Ход работы:
- Открыть программу FrontPage. Файл→Создать→Одностраничный веб-узел. Открыть домашнюю страницу index.htm Заполнить первую страницу: вставить рисунки, кнопки, бегущую строку.
- Создать 3 страницы. Сделать ссылки с первой страницы на другие страницы.
- На каждой странице создать ссылку на главную страницу. Сохранить страницы под названием «Пословицы», «Загадки», «Поговорки». На каждой странице поменять цвет фона.
Тема: Использование таблиц (редактор FrontPage)
Цели урока:
расширение и углубление представлений об инструментах и методах веб-конструирования;
формирование умений использовать таблицы в редакторе FrontPage для размещения информации на веб-страницах;
развитие логического мышления, умений анализировать, сравнивать, систематизировать, обобщать.
воспитание самостоятельности, усидчивости и аккуратности.
Тип урока: урок усвоения новых знаний и умений.
Учащиеся должны уметь: использовать таблицы для размещения информации на веб-страницах.
Программное и методическое обеспечение урока:
редактор FrontPage;
учебное пособие «Информатика 11», § 5.3 .
Ход урока.
Проверка знаний предыдущего урока
Актуализация знаний и мотивация учащихся на изучение нового материала
Объяснение нового материала
4. Закрепление нового
5. Подведение итогов урока
6. Домашнее задание
1. Проверка знаний предыдущего урока (репродуктивный метод обучения, индивидуальная и фронтальная форма работы).
Выполнение индивидуальных заданий на компьютере: в редакторе FrontPage создать веб-страницу, содержащую текст и графику (упражнение к § 5.2 пособия ).
Предложите учащимся ответить на вопросы: Каково назначение редактора FrontPage? Какие возможности форматирования текста имеет FrontPage? Как задается размер шрифта на веб-страницах?
2. Актуализация знаний и мотивация учащихся на изучение нового материала (фронтальная форма работы).
Перед началом объяснения нового материала предложите учащимся назвать основные элементы оформления веб-страниц. В ходе беседы перечислите перечень задач, для решения которых используются таблицы в текстовом редакторе MS Word.
3. Объяснение нового материала (объяснительно-иллюстративный метод обучения в сочетании с частично-поисковым, фронтальная форма работы).
Объяснение начните с вопроса: каким способом можно задавать размещение текста и изображений в заданных местах страницы? Одним из наиболее применяемых до настоящего времени способов является использование таблиц, в ячейках которых размещают разнообразные текстовые и графические элементы. При этом можно отметить, что размещение информации на веб-страницах с помощью таблиц называется табличной версткой.
Создание таблиц
Таблицы на веб – страницы помещаются с помощью кнопки Таблица, Вставить, Таблицу.
Открывается окно, в котором задаются параметры таблицы:
В окне Размер
устанавливается количество строк
и столбцов
вашей таблицы.
В окне Границы устанавливается размер границ таблицы,
в окне цвет
– цвет границы
Фон , Цвет нужный цвет.
Нажмите кнопку ОК.
Посмотрите результат:
В режиме Конструктор В режиме Просмотр
Если вы измените Размер таблицы и вместо 1 поставите 0, тогда у вас таблица будет с невидимыми границами в режиме Просмотр.
Посмотрите результат
В режиме Конструктор В режиме Просмотр
Примечание:
Объединение ячеек:
Выделите ячейки, которые необходимо объединить
1 раз пр. кн. мыши и взять команду Объединить ячейки
Изменение таблицы:
Свойства таблицы
4. Закрепление нового материала (частично-поисковый метод обучения, индивидуальная форма работы).
Предложите учащимся занять места за компьютерами и выполнить задания примера 1 из § 5.3 пособия , упражнение 1 из § 5.3 пособия . По завершению работы просмотрите созданные страницы в браузере.
5. Подведение итогов урока
Предложите учащимся кратко перечислить назначение и основные особенности использования таблиц при оформлении веб-страниц.
1. С чем мы сегодня познакомились?
Как сделать таблицу с невидимыми границами?
Приведите пример, для чего бы была нужна таблица с невидимыми границами.
При необходимости уточните и обобщите ответы.
6. Домашнее задание
Изучить материал § 5.3 учебного пособия , ответить на вопросы 1-2.
В окне Размер устанавливается количество строк и столбцов вашей таблицы.
В окне Границы устанавливается размер границ таблицы,
в окне цвет – цвет границы
Если вы хотите чтобы у вас вся таблица была определенного цвета установите в окне Фон , Цвет нужный цвет.
Нажмите кнопку ОК
Изменение таблицы:
Щелчок 1 раз пр. кн. мыши на таблице и взять команду Свойства таблицы
Функции таблиц при создании Web-страниц разнообразны. Приведем некоторые из них:
- Выравнивание информации за счет расположения ее в ячейках таблицы. С помощью таблиц текст можно представлять в виде колонок
- Выравнивание названий и полей формы
- Расположение на Web-странице текста и графических изображений по разным колонкам
- Использование вложенных таблиц
- Задание различного фона для отдельных частей страницы
Наиболее часто таблицы на Web-страницах используют для выравнивания информации, содержащей текст и графические изображения, так как при форматировании символов и абзацев используются средства, которые могут игнорироваться некоторыми обозревателями (например, пустые строки).
FrontPage предоставляет инструменты для работы с таблицами, упрощающие решение большинства практических задач. Команды, предназначенные для работы с таблицами, позволяют легко создавать и редактировать таблицы, а также упорядочивать и форматировать содержащиеся в ней данные.
Таблица может быть вставлена в произвольное место Web-страницы. Для создания таблиц вы можете использовать следующие средства:
- Команду Вставить (Insert) меню Таблица (Table)
- Кнопку Добавить таблицу (Insert Table) стандартной панели инструментов
Альтернативным способом создания таблиц является использование команды Нарисовать таблицу (Draw Table) меню Таблица , а также кнопка Нарисовать таблицу панели инструментов Таблицы . Это средство позволяет создать таблицу более сложной конфигурации (например, с ячейками разных размеров). При этом вы просто рисуете требуемую таблицу с помощью мыши, как рисовали бы ее карандашом на бумаге.
Если информация, которую требуется поместить в таблицу, уже присутствует в вашем документе в виде текста, вы можете преобразовать текст в таблицу. Но об этом чуть позже.
Прежде чем приступить непосредственно к созданию таблицы, вы должны иметь хотя бы приблизительное представление о том, сколько столбцов и строк должна иметь таблица. На этом этапе вам не обязательно точно указывать параметры таблицы. После создания вы сможете добавить и/или удалить столбцы и строки по своему усмотрению.
Создание таблицы с использованием кнопки "Добавить таблицу"
Наиболее простой способ создания таблицы с регулярной структурой предполагает использование кнопки Добавить таблицу (Insert Table). В этом случае ширина столбцов устанавливается автоматически на основании ширины документа и количества столбцов. В случае необходимости в дальнейшем вы сможете изменить ширину каждого из столбцов. Для создания таблицы выполните следующие действия:
1. Установите курсор в то место Web-страницы, где хотите расположить таблицу.
2. Нажмите кнопку Добавить таблицу (Insert Table) На экране появится миниатюрное изображение таблицы.
3. Установите курсор на любую из ячеек в изображении таблицы и удерживайте кнопку мыши. В нижней части изображения будет отображаться текущее число строк и.столбцов (например: таблица 3x4). Переместите указатель мыши в ячейку, которая будет соответствовать нужному размеру таблицы. Если вы будете перемешать указатель за правую или нижнюю границы, размер сетки увеличится соответствующим образом.
4. В заключение отпустите кнопку мыши. В указанном месте страницы появится таблица требуемого размера.
Если вы нажали кнопку Добавить таблицу и указали ячейку в изображении таблицы, а после этого изменили свое мнение и решили не создавать таблицу, переместите указатель мыши за пределы таблицы так, чтобы в нижней части изображения появилось сообщение отмена. Теперь вы можете отпустить кнопку. Операция по созданию таблицы будет отменена.
Создание таблицы с помощью команды "Нарисовать таблицу"
Наиболее широкие возможности по созданию таблиц предоставляют команда Нарисовать таблицу (Draw Table) меню Таблица и кнопка Нарисовать таблицу панели инструментов Таблицы . В отличие от предыдущих способов, предназначенных для формирования таблиц простейшей структуры, с помощью команды Нарисовать таблицу вы можете легко создать таблицу со сложной структурой. Для этого выполните следующие действия:
1. Подготовьте место для создания таблицы.
2. В меню Таблица выберите команду Нарисовать таблицу или нажмите кнопку Нарисовать таблицу на панели инструментов Таблицы .
3. Задайте внешние границы таблицы. Для этого установите указатель в любой из углов таблицы и нажмите кнопку мыши. Не отпуская ее, переместите указатель в противоположный угол таблицы, после чего отпустите кнопку мыши. При задании границ не старайтесь сразу установить точные границы. В дальнейшем вы сможете изменить размеры как таблицы в целом, так и отдельных ячеек.
4. Действуя аналогичным образом, проведите линии границ столбцов и строк.
Совет Если в процессе работы над таблицей вам понадобится удалить линию (строки или столбца), выберите на панели Таблица инструмент Ластик (Erase). Затем установите указатель мыши в начало линии, нажмите кнопку мыши и проведите указателем до конца линии, после чего отпустите кнопку мыши.
В верхней части окна располагается строка меню и две панели инструментов: Стандартная и Форматирование.
Включать или отключать отображение панелей инструментов позволяет меню Вид.
В левой части находится Панель представлений, при помощи которой можно переключать режимы документа.
Основную часть окна занимает рабочая область, в которой могут быть открыты одно или несколько окон,
содержащих отдельные документы.
В нижней части окна располагается строка состояния, содержащая справочную информацию. Так же в нижней
части окна находятся три кнопки просмотра документа.
Отображение панелей инструментов.
Для управления панелями инструментов во FrontPage можно воспользоваться теми же способами,
как в Microsoft Word. А именно:
в меню Вид надо выбрать пункт Панели инструментов, а в открывшемся новом подменю - установить
флажки напротив тех панелей инструментов, которые вам нужны; или щелкнуть правой кнопкой мыши
по какой-либо панели управления (или по области рядом с ней) и точно так же воспользоваться
контекстным меню.
FrontPage, как и другие приложения Microsoft Office, позволяет добавлять, удалять, менять
местами пункты меню и кнопки на панелях инструментов. Также существует возможность создавать
полностью свои панели.
Для этого надо:
- в меню Сервис выбрать пункт Настройка…
- в меню Вид выбрать пункт Панели инструментов, а в появившемся каскадном меню - пункт Настройка... В результате ваших действий откроется диалоговое окно Настройка, где можно установить необходимые панели.
Работа с Web-страницами
Создание новой Web-страницы
Если вы запустили FrontPage, значит, новая Web-страница у вас уже создана (при запуске FrontPage сразу открывается новая пустая Web-страница, готовая для размещения текста и любых других элементов). Создать новую Web-страницу можно и другими способами:- с помощью кнопки Новая страница на Стандартной панели инструментов.
- меню Файл выбрать подменю Создать, а затем – Страница или Web-узел;
- с помощью комбинаций Ctrl+N;
- с помощью контекстного меню (работает во всех режимах, кроме режимов Задачи и Отчеты) - для этого внутри Списка папок данного Web) надо щелкнуть правой кнопкой мыши и в появившемся контекстном меню выбрать пункт Создать - Страница.
Создание станиц при помощи мастера и шаблонов
Как уже говорилось выше, если для создания новой страницы вы воспользовались меню Файл - Создать - Страница или Web-узел, то FrontPage предложит вам воспользоваться шаблоном для создания новой страницы. Для этого он откроет диалоговое окно, внешний вид которого приведен ниже:
На вкладке Общие данного диалогового окна выводится перечень шаблонов FrontPage,
доступных в настоящий момент. Выбрав любой из шаблонов, можно посмотреть его описание в поле Образец.
Создание FrontPage Web.
Microsoft FrontPage Web - это набор Web-страниц, файлов с изображениями и других компонентов, которые можно рассматривать как единое целое. Если делать сайт во FrontPage, то для его хранения удобней всего использовать FrontPage Web.- самый главный плюс - это возможность переименовывать файлы, входящие в состав FrontPage Web. Представьте себе, что перед публикацией вашего сайта в Интернет вы вдруг заметили, что пара файлов у вас названа русскими именами. «О, боже!» - думаете вы, - «Теперь по всем файлам придется лазить и ссылки ручками менять!» Вот тут-то и поможет FrontPage Web - вы можете покойно переименовать файлы, а FrontPage самостоятельно пройдется по всем другим файлам, входящим в FrontPage Web и переименует все ссылки на исправленный вами файл. Здорово!
- все остальные преимущества описывать не буду, но хочется сказать, что для использования всех возможностей FrontPage, то лучше использовать FrontPage Web.
Открытие Web-страниц
Очень часто при создании сайта приходится редактировать уже созданные Web-страницы. К одной и той же странице можно возвращаться сколько угодно раз, чтобы ее отредактировать или использовать ее части для создания новых Web-страниц. Открыть уже существующую Web-страницу можно в любом из существующих режимов. Из режима Page Views есть четыре способа открыть существующую страницу:1 способ
Если вы работаете с FrontPage Web, то просто выберите нужный файл в Списке папок и дважды щелкните по нему мышью.
2 способ
В меню Файл выберите пункт Последние файлы. Из появившегося каскадного меню выберите нужный файл.
3 способ
С помощью диалогового окна Открытие файла: Файл Открыть.
Предварительный просмотр
Для того чтобы посмотреть, как ваша страница выглядит непосредственно в браузере можно воспользоваться вкладкой Просмотр в режиме редактирования Web-страницы. Но в данном случае может оказаться, что браузер FrontPage не вполне корректно отобразит некоторые элементы вашей страницы, поэтому лучше всего:- воспользоваться кнопочкой Просмотр на панели инструментов
- в меню Файл выбрать пункт Предварительный просмотр в обозревателе.
Здесь можно:
- Выбрать обозреватель, в котором вы хотите просмотреть свою Web-страницу. Как правило, первоначально здесь отображается браузер, который по умолчанию установлен на вашей машине.
- Добавить любой другой обозреватель, для чего необходимо воспользоваться кнопкой Добавить.
- Редактировать или удалить установленные обозреватели.
- Установить размер экрана, на котором будет просматриваться ваша Web-страничка
Сохранение Web-страниц
Чтобы сохранить файл, в меню Файл выберите пункт Сохранить. Если страница еще ни разу не сохранялась,
FrontPage откроет диалоговое окно Сохранить как…
По умолчанию FrontPage вместо названия страницы берет первую строку текста с вашей страницы.
Это не всегда то, что надо. Изменить название страницы можно с помощью кнопки Изменить -
нажатие на эту кнопку открывает диалоговое окно Название страницы, в котором вы можете изменить
название страницы.
Удаление Web-страниц
При работе с Web-сайтом рано или поздно случиться так, что какие-то страницы вам будут больше не нужны и вам захочется их удалить. Существует три способа удаления Web-страницы.
1 способ
В панели Список папок выделите файл, который необходимо удалить и нажмите кнопку Delete на клавиатуре.
2 способ
В панели Список папок щелкните правой кнопкой мыши по файлу (или значку файла), который необходимо
удалить и в появившемся контекстном меню выберите пункт Удалить.
3 способ
В панели Список папок выделите файл, который необходимо удалить и затем выберите пункт Удалить в меню Правка.
Работа с текстом
На первый взгляд, ввод текста во FrontPage ничем не отличается от ввода текста в любом текстовом редакторе (например, в Microsoft Word). Для того чтобы набрать текст, достаточно щелкнуть мышью в любом месте страницы, и курсор будет помещен в ближайшую точку, в которую можно ввести текст. Набор прописных букв, редактирование текста (удаление символов, вставка текста и т.д.) производится точно также, как в Microsoft Word. Есть только одно небольшое НО: при нажатии клавиши Enter во FrontPage осуществляется принудительный переход курсора на новую строку, при этом до и после абзаца ставятся фиксированные абзацные отступы. Если вам не надо создавать абзацы, то для перехода на новую строку лучше всего использовать комбинацию клавиш Shift +Enter.Работа с изображениями
Вставка изображений на Web-страницу
Вставлять изображение на вашу Web-страницу можно несколькими способами:1. Перетащить изображение из Windows Explorer (то есть прямо из проводника).
2. Перетащить изображение из Internet Explorer.
3. Перетащить файл с изображением с панели Список папок, прямо на страницу.
4. С помощью буфера обмена - скопировать изображение в буфер обмена из любой другой программы, а затем на странице вставить его из буфера обмена. 5. С помощью кнопки Добавить рисунок из файла на панели инструментов Стандартная.
6. С помощью меню Вставка -Рисунок.
Рассмотрим эти способы более подробно:
Способ 1 Для того чтобы перетащить изображение из Windows Explorer (то есть прямо из проводника) надо:
- открыть окно проводника;
- в окне проводника выделить файл с картинкой, которую вы хотите вставить на свою страницу;
- левой клавишей мыши перетащить файл-картинку на свою Web-страницу картинка вставиться в то место, где на странице находился курсор вставки.
Для того чтобы перетащить изображение из Internet Explorer надо:
- во FrontPage открыть страницу, на которую вы хотите добавить изображение;
- в браузере откройте то изображение, которое вы хотите поместить на своей Web-странице браузера название файла должно оканчиваться на jpg, jpeg, gif);
- левой клавишей мыши перетащите выделенную картинку на свою Web-страницу;
Для того чтобы перетащить файл с изображением с панели Список папок, прямо на страницу надо:
- во FrontPage открыть страницу, на которую вы хотите добавить изображение;
- выбрать необходимый файл с картинкой на панели Список папок;
- левой клавишей мыши перетащите выделенную картинку на свою Web-страничку;
- выбранная картинка вставиться в то место, где на странице находился курсор вставки.
Для того чтобы вставить изображение на свою Web-страницу с помощью буфера обмена, надо:
- в том приложении, из которого вы хотите скопировать картинку, выделить изображение и при помощи клавиш Ctrl + C скопировать рисунок в буфер обмена;
- на своей Web-странице вставить это изображение из буфера обмена при помощи клавиш Ctrl + V
Если для вставки изображения на свою Web-страницу вы решили воспользоваться кнопкой Добавить изображение из файла на панели инструментов Стандартная, то FrontPage откроет диалоговое окно Рисунок. В данном диалоговом окне укажите тот файл с картинкой, который вы хотели бы добавить на свою Web-страницу и нажмите кнопку Вставить.
Способ 6
Если для вставки изображения на свою Web-страницу вы решили воспользоваться меню Вставка Рисунок, то FrontPage предложит сделать вам дальнейший выбор:
- Картинки… – выбор того пункта меню предоставляет вам возможность воспользоваться готовой библиотекой картинок.
- Из файла... – выбор данного пункта меню предоставляет вам возможность самостоятельно указать местонахождение файла с картинкой, который вы хотите добавить на свою Web-страницу (использование этого пункта приведет к открытию диалогового окна Рисунок, работа с которым была описана выше).
- Создать фото коллекцию… - при помощи этого пункта меню можно создать коллекцию изображений в определенном стиле. Для это в открывшемся окне Свойства коллекции фотографий при помощи кнопки Добавить на вкладке Рисунки выбрать изображения, а на вкладке Макет выбрать формат оформления.
Добавление файлов мультимедиа
Помимо простой графики, как – изображения в форматах *.gif, *.jpg, *.png и т.д. FrontPage позволяет размещать на ваших Web-страницах файлы мультимедиа. К ним относятся: видеоклипы, звуки...Для вставки видеоклипа надо в меню Вставка выбрать пункт Рисунок, а затем Видеозапись...
Откроется диалоговое окно Видео, в нем будут отображаться видеоклипы в формате *.avi, *.asf, *.ram, *.ra. Добавить звук на Web-страницу можно на вкладке Общие диалогового окна Свойства страницы.
Работа с таблицами
Таблица - одно из наиболее мощных инструментов используемых при создании сайтов. Изначально таблицы применялись только для представления структурированных данных. Однако постепенно они превратились в мощное универсальное средство для компоновки Web-страниц.Создание таблиц
Самый простой способ создания таблицы – использовать кнопку Таблицы -Добавить таблицу, расположенную на панели инструментов Стандартная. Еще один способ – при помощи пункта меню Таблица -Вставить - Таблица. А так же таблицу можно нарисовать и вставить при помощи буфера обмена.Ввод данных и навигация по таблице.
Одной из замечательных особенностей таблиц является то, что введенный текст форматируется внутри ячейки точно так же, как мы привыкли форматировать его в пределах всего документа. Помещенный в ячейку текст автоматически переносится на новую строку, если его длина превышает ширину столбца. При нажатии клавиши Enter, как обычно, вставляется новый абзац. Текст или числа вводятся в таблицу с клавиатуры. Перед тем, как заносить данные в таблицу, необходимо поместить текстовый курсор в нужную ячейку таблицы. Это можно сделать, щелкнув на ней мышью. Однако более удобно для перемещения между ячейками использовать комбинации клавиш:Создание и применение форм
Формы представляют собой текстовые поля, переключатели, флажки, кнопки и многие другие элементы управления. Посетителю сайта достаточно ввести какую-нибудь информацию в то или иное текстовое поле, выбрать какие-нибудь данные из предложенного списка, нажать на кнопочку Отправить, чтобы данные отправились на Web-сервер для обработки (или обработались тут же на странице.Но создание форм на самой страничке это только половина работы. Так как обязательно должна существовать программа, которая сможет обработать данные, введенные пользователем с помощью форм.
Такая программа может быть расположена на сервере; она может находиться в вашем Web-сайте в виде отдельного файла, а может быть просто прописана в коде html на вашей Web-страничке. Именно она определяет - что же произойдет с той информацией, которую ввел пользователь:
- информация может быть добавлена в базу данных и на ее основе могут быть построены различные графики, рейтинги...;
- информация может быть переправлена по электронной почте (это часто используют для получения информации о пользователе в анкетах различного рода);
- информация может быть обработана прямо на месте и посетитель вашего сайта тут же получит ответную информацию (например - получит баллы за тест, увидит введенную им информацию в гостевую книгу...).
1. Каждая форма занимает определенный участок Web-страницы. На одной Web-страничке может быть расположена одна или несколько форм.
2. Внутри каждой формы должен размещаться, по крайней мере, один из элементов форм (хотя, как правило, их несколько).
3. Каждый элемент формы имеет имя и значение. Имя идентифицирует поле для ввода информации, а значение приравнивается к значению, выбранному пользователем.
4. Один из элементов формы (им может быть обычная кнопка или любой рисунок) должен выполнять функцию кнопки Отправить.
Создание форм во FrontPage
Чтобы добавить форму на Web-страницу, надо:- Установить курсор в то место, где вы хотите вставить форму.
- В меню Вставка выбрать пункт Форма, в открывшемся меню снова выбрать пунктФорма. Форма будет помещена на вашу Web-страницу - появиться область, помеченная пунктирной рамочкой, с двумя кнопками: Отправить и Сброс.
- Пользуясь все тем же пунктом меню Вставка Форма последовательно вставить необходимые вам элементы форм, выбирая их из раскрывающегося каскадного меню (при этом необходимо помнить, что все элементы формы вставляются внутри области формы, помеченной пунктирной рамочкой).
После того, как форма создана, остается только наполнить ее содержанием - элементами форм, текстом, изображениями, таблицами... (при этом размеры формы будут меняться автоматически). Добавлять содержание форм можно обычным образом. Например, текст можно набирать, а можно вставлять из буфера обмена... Все действия с добавленными объектами аналогичны. Однако создание формы - это только начало работы. После ее создания необходимо настроить свойства, как самой формы, так и ее элементов.
Настройка свойств формы
Для обработки или сохранения данных, вводимых посетителями Web-странички, необходимо либо воспользоваться возможностями, предоставляемыми FrontPage Server Extensions, либо какой-нибудь другой программой, работающей на Web-сервере. Но какую бы программу вы не выбрали, вам все равно придется настроить свойства формы и элементов в ней. Чтобы открыть окно свойств формы, надо:в меню Вставка выбрать пункт Форма, а затем -
или
вызвать контекстное меню к форме и в открывшемся контекстном меню выбрать пункт Свойства формы.
В результате откроется диалоговое окно Свойства формы.
1. В поле Сохранение результатов необходимо указать, что надо будет сделать с данными, введенными в форму. Вы можете выбрать следующие варианты:
o Отправка Имя файла - данные будут помещены в указанный файл на Web-сервере. Этот файл может быть Web-страницей, которая со временем будет становиться все длиннее и длиннее, или файлом данных, который потом можно будет обработать в Excel, Access или любой другой программой;
o Отправка Адрес почты - в этом случае каждый раз при нажатии посетителем Web-странички кнопки Отправить на форме будет генерироваться электронное сообщение, которое будет отправляться по указанному вами адресу. В этом сообщении будут содержаться все данные, которые были введены пользователем на Web-страничке.
o В базе данных - в этом случае данные формы будут отправлены в базу данных. База должна находиться на Web-сервере (или быть доступной для него).
2. В поле Свойства формы необходимо указать имя формы
Режимы просмотра во FrontPage
FrontPage предлагает шесть различных режимов для просмотра содержимого Web-сайта:- Страница,
- Папки,
- Отчеты,
- Переходы,
- Гиперссылки,
- Задачи.
Страница
В этом режиме осуществляется создание и редактирование Web-страниц. Здесь можно создавать пустые Web-страницы и страницы, базирующиеся на шаблонах, назначать страницам темы (набор стилей представления страницы на экране). В этом режимы можно добавлять и форматировать текст, оформлять страницы с использованием графических и видеоизображений (поддерживается преобразование ряда графических форматов в форматы *.gif, *.jpg и *.png), добавлять к странице звуковое сопровождение, представлять информацию в таблицах, кадрах и формах и, наконец, создавать гиперссылки. Таков далеко не полный перечень возможностей FrontPage по редактированию содержимого Web-страниц.Папки
В этом режиме можно просматривать структуру Web-узла (файлы и папки) и управлять ею аналогично тому, как вы это делаете в Windows, данный режим дает возможность получить более подробные сведения о файлах и папках, чем это предусмотрено в режиме просмотра Страница.Отчеты
Предоставляет вашему вниманию более десятка отчетов, содержащих разнообразную информацию о Web-узле, открытом во FrontPage.Переходы
Предназначен для просмотра иерархии сайта. В этом режиме можно управлять иерархией, перетаскивая прямоугольники (каждый из которых представляет определенную Web-страницу).Гиперссылки
Демонстрирует систему гиперссылок, которыми связаны между собой страницы Web-узла (а также систему гиперссылок на другие узлы), обеспечивает проверку их целостности и возможность изменения.Задачи
Этот режим предназначен для управления задачами Web-узла (добавления, удаления, выполнения, установления приоритета выполнения, а также отслеживания состояния задач).Вопросы для самоконтроля
- Как создать новую страницу в редакторе Front Page?
- Как открыть существующую web-страницу?
- Как сохранять готовые web-страницы?
- Опишите один из способов вставки графического изображения в web-страницу.
- Каков принцип работы с текстом?
- Что представляют собой формы?
- Какие существуют режимы просмотра web-страниц во Front Page
