Практическая работа

• Создайте папку Мой сайт в своей папке.
• Запустить программу FrontPage (Пуск R Все программы R Microsoft Office - Microsoft Office FrontPage2003).
• Создайте новый сайт Файл - Создать . В Области задач (окно справа) щелкните на ссылке - Одностраничный Web-узел .
• В открывшемся окне Шаблоны веб-узлов щелкните на кнопке Обзор, откройте в этом окне в строке Папка - Мой компьютер - Общие документы, найдите свою папку и в ней выделите одним щелчком папку Мой сайт и нажмите кнопку Открыть.
• В этом же окне в списке шаблонов выберите Одностраничный Web -узел и щелкните ОК .
• Откройте первую страницу сайта, дважды щелкнув имя index.htm в списке папок.
• Щелкните правой кнопкой мыши в любом месте страницы и в контекстном меню выберите Свойства страницы - вкладку Общие и в строке Название введите имя страницы (например, Главная страница ) - ОК.

• Вставьте таблицу из 3 столбцов и 7 строк. Для этого в меню Таблица выберите команду Вставить - Таблицу , задайте количество строк - 7, столбцов - 3. В разделе Границы введите размер 0 , щелкните ОК.
• Объедините ячейки, как показано на рисунке.
• Уменьшите размер левой колонки таблицы (потянуть за правую границу колонки влево).
• меню Файл - Сохранить )
• Вставка рисунка в качестве фонового изображения. В меню Формат щелкните Фон . В открывшемся окне перейдите на вкладку Форматирование и щелкните кнопку Обзор . Далее Мои документы - Мои рисунки - Рисунок 1 . Выделите нужный файл - Открыть - ОК . (Чтобы просмотреть имеющиеся рисунки, на панели инструментов окна Рисунок нужно щелкнуть на кнопке Представления и выбрать Эскизы )

• Введите в строку 1 таблицы заголовок страницы Мой город . Для заголовка можно использовать объект Word Art.
• Вставьте рисунок в ячейку 2 . Для этого щелкните левой кнопкой мыши внутри данной ячейки. В меню Вставка выберите Рисунок , а затем Из файла . В открывшемся окне Рисунок в строке Папка выберите Мои документы - Мои рисунки - Наш грод. Выделите файлgerb и щ елкните ОК . Аналогично вставьте рисунок в ячейку 4.
• В строке 9 создайте бегущую строку. Для этого щелкните левой кнопкой мыши внутри данной строки. В меню Вставка выберите Веб-компонент - эффект бегущая строка - Готово. В строке Текст введите Комсомольк-на-Амуре - город, в котором я живу и щ елкните ОК .
• Просмотрите получившуюся страницу, щелкнув в нижней части окна на кнопке Просмотр.
• Вернитесь в режим Конструктор , щелкнув на соответствующей кнопке.
• Внесите изменения в созданные элементы (размер, расположение на странице, цвет), если это необходимо.
• Введите в ячейку 3 текст стихотворения:

Я на небо взгляну - и утонет мой взор,
Я как будто лечу, рассекая простор.
Я на сопки взгляну - запоёт тут душа
До чего же тайга хороша, хороша!
Я увижу Амур - и на сердце теплей,
И спокойнее как-то, и веселей.
Среди этой природы, средь такой красоты/
Вырос город надежды и город мечты.
В Комсомольске живу я, и этим горжусь,
Сделать краше и лучше свой город стремлюсь.
Е. Смирнова

• Выполните форматирование текста.
• Сохраните созданную страницу (меню Файл - Сохранить )
• Разбейте ячейку 10 на 4 столбца (установите курсор внутри ячейки , щёлкните правой кнопкой мыши, выберите в контекстном меню команду Разбить ячейки, задайте нужное количество столбцов ).
• Вставьте рисунки в образовавшиеся ячейки. Смотрите образцы страниц в папке Temp на Server - Внешний вид страниц.
• Создание активной кнопки:

1. Установите курсор внутри ячейки 5.
2. Вставка выберите Веб-компонент - эффект интерактивная кнопка - Готово
3. В открывшемся окне Меняющаяся кнопка выберите вид кнопки, в поле Текст введите текст На главную
4. Установите стиль шрифта надписи кнопки, щелкнув вкладку Шрифт . Здесь же можно выбрать Цвет кнопки Исходный, Цвет при наведении, Цвет при нажатии. На вкладке Рисунок щелкните переключатель Использовать для кнопки формат GIF и прозрачный фон.
5. Скопируйте эту кнопку в ячейки 6,7 и 8.
6. Измените параметры на второй кнопке. Для этого щелкните на ней правой кнопкой мыши - команда Свойства кнопки . Текст На главную замените на История. Щелкните ОК.
7. Аналогично измените параметры на третьей и четвёртой кнопке. Текст На главную замените на Памятники и Предприятия соответственно.

• Сохраните созданную страницу (меню Файл - Сохранить )
• Создайте вторую страницу сайта.

1. Перейдите на вкладку Веб-узел .
2. Выделите строку index.htm - index_копия(1).htm. Щелкните правой кнопкой мыши на имени , выберите команду Переименовать . Замените имя index_копия(1).htm на st2.htm Нажмите клавишу Tab.
3. Замените текст названия Главная страница на История города .
4. st2.htm

• Замените заголовок страницы Мой город на Это нашей истории строки .
• Удалите стихотворение, которое вводили на Главной странице . Вместо него введите текст:

10 мая 1932 г. С пароходами "Колумб" и "Коминтерн" высадилась первая партия комсомольцев - строителей завода и будущего города.

10 декабря 1932 г. Президиум ВЦИК постановил переименовать село Пермское Нижне-Тамбовского района в город Комсомольск-на-Амуре.

Октябрь 1949 г. Сдан в эксплуатацию первый жилой микрорайон - 15-й квартал.

10 июня 1967 г. Президиум Верховного Совета СССР наградил Комсомольск-на-Амуре орденом Ленина.

• Отформатируйте текст по вашему усмотрению.
• Удалите фотографии, которые использовались на Главной странице и вставьте новые, как показано на образце (читайте п.22) .
• Сохраните созданную страницу (меню Файл - Сохранить )
• Создайте третью страницу сайта.

1. Перейдите на вкладку Веб-узел.
2. Выделите строку st2.htm одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка - st2_копия(1).htm st2_копия(1).htm на st3.htm Нажмите клавишу Tab.
3. Замените текст названия История города на Памятные места.
4. Двойным щелчком мыши откройте скопированную страницу st3.htm

• Замените заголовок страницы Это нашей истории строки на Памятные места.
• п.22) .
• Сохраните созданную страницу (меню Файл - Сохранить )
• Создайте четвёртую страницу сайта.

1. Перейдите на вкладку Веб-узел.
2. Выделите строку st3.htm одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка - st3_копия(1).htm Выделите эту строку, затем еще раз щелкните на имени левой кнопкой мыши. Замените имя st3_копия(1).htm на st4.htm Нажмите клавишу Tab.
3. Замените текст названия Памятные места на Предприятия города.
4. Двойным щелчком мыши откройте скопированную страницу st4.htm

• Замените заголовок страницы Памятные места на Предприятия города.
• Удалите текст и фотографии, которые вы использовали на предыдущей странице, и замените их на новые как показано на образце (читайте п.22) .
• Сохраните созданную страницу (меню Файл - Сохранить )
• Настройте переходы активных кнопок на соответствующие страницы. Для этого щелкните правой кнопкой мыши на созданной кнопке На главную , в контекстном меню выберите пункт Свойства кнопки. В открывшемся окне Меняющиеся кнопки щелкните на кнопке Обзор и выделите файл index.htm. Щелкните ОК . Аналогично настройте действие остальных кнопок. Кнопка На главную должна переходить на файл index.htm , кнопка История - на страницу st2.htm , кнопка Памятники - на страницу st3.htm , кнопка Предприятия - на страницу st4.htm
• Сохраните созданную страницу (меню Файл - Сохранить )
• Повторите эти действия на страницах index.htm, st2.htm, st3.htm
• Сохраните изменения на каждой странице (меню Файл - Сохранить )
• Внесите изменения в созданные страницы по своему усмотрению (вставьте дополнительные рисунки, текст и т. д.)
• После каждого изменения не забывайте сохранять каждую страницу (меню Файл - Сохранить )
• Закройте все окна. Откройте файл index.htm из вашей папки Мой сайт и просмотрите созданный сайт.
• Проверьте переходы всех кнопок и гиперссылок на каждой странице. Если необходимо внести изменения, то запустить программу FrontPage, откройте нужную страницу, внесите изменения и обязательно сохраните их.
• Откройте созданные HTML файлы в блокноте и просмотрите программные коды.

Цель работы : изучение основ работы с редактором MS Front Page.

Ниже на рис. 18 приведена структура Web -сайта

Рис. 18 - Макет личного веб_сайта

Шаг 1 - Создание нового сайта.

1 Запустить Front Page и выбрать пункт меню Файл –Создать – Веб-узел , а затем шаблон сайта – Одностраничный сайт. В поле Укажите расположение нового сайта указать папку, в которой будет располагаться сайт, например D:\students\545\web . Затем следует нажать кнопку «Ok ». Крайняя левая панель Папки показывает входящие в сайт папки и файлы: htlm -страницы, рисунки и т.п. В настоящий момент, сайт содержит лишь одну страницу – index.htm . Если в этой панели выбрать «мышью» одну из страниц, то она будет открыта для редактирования.

2 Работа со страницей возможна в одном из четырех режимов:

-конструктор - производится редактирование страницы;

- с разделением – окно делится на две части: в одной – отображается код HTML, который можно редактировать, в другой можно работать в режиме конструктора;

- код - (HTML ) - можно проконтролировать создаваемый код страницы и внести изменения;

- просмотр - страница показана так, как она будет отражена браузером.

3 Переключение на режим осуществляются с помощью вкладок внизу панели. Для выполнения работы будем пользоваться, в основном, режимом Конструктор.

Шаг 2 – Ввести текст основной страницы (структура страницы приведена на рис. 12. Текст страницы разрабатываются самостоятельно).

1 Для ввода данных создайте таблицу, выбрав пункт меню Таблица > Вставка , или используя соответствующую пиктограмму на панели инструментов. Наберите текст страницы. Для заголовка страницы в поле Стиль в левой верхней части экрана Front Page выберите стиль Заголовок 1 . На рис 19 представлен вид Главной станицы веб-сайта.

Рис. 19 - Макет Главной страницы веб-сайта

2 После того, как в таблицу введен текст, определите свойства таблицы. Установите курсор «мыши» внутри таблицы, нажмите правую кнопку и в пункте Свойства таблицы определите для поля Выравнивание значение Центр . Установите флажок в поле Задать ширину и переключатель на параметр - В процентах, и задайте значение - «80 ». Это значит, что таблица будет располагаться по центру окна браузера и занимать 80% ширины окна.

3 В группе Границы можно определить размер и цвет рамки. Если необходимо, чтобы у таблицы не было видимой рамки, установить в поле значение - 0. Группа Фон позволяет задать фон для таблицы.

4 Для определения свойств страницы выберите из контекстного меню пункт Свойствастраницы и на вкладке Общие измените поле Название – на текст «Главная страница». Теперь это значение будет отражаться в заголовке окна браузера при просмотре страницы. Обязательно необходимо исправить язык страницы, это делается с помощью вкладки Язык . Установите кодировку (Набор знаков ) - Кириллица и язык Русский .

5 Перейдите на вкладку Форматирование . Если установить флажок Фоновый рисунок , то нажав на кнопку Обзор , можно выбрать рисунок для фона страницы.

6 Группа Цвета позволяет задать цвет шрифта по умолчанию, цвет фона по умолчанию, цвета ссылки, посещенной и активной. Измените эти параметры.

7 Для оформления заголовка в виде Бегущей строки выберите в меню Вид представление Страница и нажмите в нижней части окна документа кнопку Конструктор. Щелкните место, куда следует вставить бегущую строку, а потом введите и выделите текст, который следует представить в виде бегущей строки. В меню Вставка выберите команду Веб -компонент . В группе Тип компонента нажмите кнопку Динамические эффекты . В группе Выбор эффекта дважды щелкните значок Бегущая строка . Задайте параметры бегущей строки.

8 Сохраните страницы. Если программа задаст вопрос о месте сохранения рисунков: сохраните рисунки в папке Images . Для выбора папки используется кнопка Изменить папку.

1 Чтобы сделать ссылку на существующую страницу нужно выбрать ее из списка. Можно также определить место внутри страницы (закладку) на которое будет указывать ссылка. Если это место внутри текущей страницы, то заполнять поле URL не нужно, следует выбрать закладку в поле Закладка (закладка должна быть предварительно создана). Если следует создать ссылку на закладку на другой странице, то сначала нужно выбрать эту страницу, а затем – закладку.

2 Создайте ссылки на другие страницы сайта. Для этого выделите раздел в содержании и создайте ссылку, нажав на панели инструментов кнопку создания гиперссылки, либо выбрав пункт меню Вставка > Гиперссылка .

4 Воспользовавшись панелью Папки , вернитесь на главную страницу index.htm и создайте ссылку на следующую страницу сайта. Сохраните ее. В результате в Списке файлов и папок будут отражены все входящие в сайт страницы.

В 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. Свойства таблицы

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. Свойства ячейки

Значения свойств можно изменить как у одной ячейки, так и у выделенного диапазона.

Примечание

При изменении ширины ячейки следите за тем, чтобы общая ширина ячеек в строке не превысила 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.

Примечание
Чтобы выделить несколько несмежных ячеек, при выполнении щелчков на ячейках удерживайте нажатой клавишу
Меню 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. Свойства кадра

Щелкните на кнопке 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

Таблицы полезны для порядка информации. Особенно, они имеют преимущество в создании внешнего вида нескольких колонок текста.

Там нет никакого способа, использовать “tab” в HTML, и вы должны избегать использования «пробела», чтобы контролировать расстояние, где все будет видно уже на веб-странице, которая выглядит хорошо для вашего читателя, только если он или она имеют те же настройки компьютера, что и вы. В качестве альтернативы можно создать таблицу без полей. Простые таблицы создавать легко, однако, по опыту, создание или редактирование сложных таблиц может потребовать прямой тег HTML манипуляции.

Создание таблицы

Чтобы вставить таблицу:

1)Выберите инструмент «Вставить таблицу»

2)Нажмите и перетащите таблицу, размера всплывающего окна, чтобы выбрать число строк и столбцов, которые вы хотите видеть в своей таблице. Когда вы отпустите кнопку мышки, заданная таблица появится на вашем документе.

ПРИМЕЧАНИЕ: Лучше всего, если вы можете выставить заранее количество столбцов -это сэкономит вам время в процессе работы.

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

Работа с таблицами

ПРИМЕЧАНИЕ: Каждый раз, когда вы хотите работать с таблицей, сначала, вы должны кликнуть по таблице и поместить курсор внутри таблицы, в нужное вам место. В противном случае, вы увидите, что пункты меню «Таблица» – серые, что значит, они недоступны для вас.

Чтобы настроить ширину столбцов и высоту строк, наведите курсор мыши на границе, которую вы хотите настроить. Наведите указатель мыши очень медленно, пока не увидите изменение курсора на двустороннюю стрелку (она довольно чувствительна, делайте это медленно), а затем нажмите и перетащите к новым размерам.

Чтобы ввести данные в таблицу, наведите курсор мыши на клетку и начните печатать.

Для перемещения из ячейки в ячейку, нажимайте клавишу “tab” на клавиатуре или нажмите курсор мыши в клетке, на которую вы хотите переместиться.

Чтобы добавить дополнительную строку в таблице в конце, поместите курсор в правом нижнем углу ячейки и нажмите клавишу “tab” на клавиатуре.

Чтобы выбрать таблицу / столбец / строку / ячейку, щелкните в строке или столбце, который вы хотите выбрать, затем в меню найти и выбрать Таблица / колонки / строки / ячейка (в зависимости от того, которую вы хотите выбрать).

Чтобы вставить строку или столбец, щелкните в строке или столбце, рядом с которым вы хотите сделать вставку. Далее Меню /Таблица / Вставка: строки или столбцы. В диалоговом окне выберите либо строки или столбцы. В приведенном ниже примере выбраны столбцы, поэтому расположение указано слева или вправо от выбора вставки.

Чтобы удалить отдельные клетки, полные строки или столбцы, установите курсор в нужное место (в клетке, в строке или в столбце), а затем выберите элемент (как описано выше), который вы хотите удалить. После выбора элемента, из меню выберите Таблица / Удалить ячейки.

Чтобы объединить ячейки, выделите ячейки, как описано выше, в меню выберите Таблица / Объединить ячейки.

Чтобы разделить клетки, поместите курсор в ячейке, которую следует разделить. Тогда из меню выберите Таблица / Разбить ячейки. В диалоговом окне выберите разбить ячейку на столбцы или строки, и укажите количество столбцов или строк, как вы хотите.

Панель инструментов Таблицы

Панель инструментов таблицы предоставляет вам простой доступ ко многим из тех же функций, которые можно выполнять с помощью меню Таблица. В зависимости от того, как опции Главной страницы установлены на вашем компьютере, панель инструментов может отображаться в любое время, каждый раз как вы работаете с таблицами. Если у вас так не происходит, а вы хотите, то в меню выберите Вид / Панели / Таблица.

В дополнение к табличным функциям, которые вы можете получить в меню, вы можете:

*Добавить таблицу или дополнительные ячейки в таблице: нажмите на значок карандаша, экранное изображение / инструмент табличный карандаш. Нажмите и перетащите курсор (который будет выглядеть как карандаш) вертикально или горизонтально, чтобы нарисовать новую ячейку на вашей таблице.

*Удалить клеточную стенку из существующей таблицы: нажмите на значок ластика, экранное изображение / значок табличный ластик. Нажмите и перетащите курсор (который будет выглядеть как ластик) над границей ячейки (вы увидите линии, которые будут удалены, красного цвета), которую нужно удалить, а когда вы отпустите кнопку мыши, границы будут удалены.

Чтобы «выключить» либо карандаш либо ластик, нажмите клавишу на клавиатуре.

*Распределить столбцы или строки равномерно: после того как границы таблицы настроены, вы можете обнаружить, что вы просто хотите вернуть все обратно, тогда выберите снова “начать все сначала”. Выделите строки или столбцы, которые вы хотите равномерно распределить, затем выберите, соответственно, значок “равномерно распределить”, экранное изображение / распределить ячейки таблицы равномерно.

*Размер таблицы в соответствии с содержанием в ней. Таблицы всегда вставляются по полной ширине. Вместо того, чтобы пытаться угадать, насколько широкой таблица должна быть, чтобы разместить содержимое, щелкните значок Auto Fit .

Таблица & Свойства ячейки

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

В диалоговом окне «Свойства таблицы», вы можете выбрать много вариантов для таблицы, но вам нужны только некоторые, которые вам понадобятся, чтобы делать следующее:

*Инструменты компоновки. Инструменты компоновки позволяют создавать конкретные макеты для оформления страницы.

*Размер. Эта опция позволяет указать количество строк и столбцов, которые вы хотите, чтобы имела ваша страница. Добавьте свойства таблицы после уже установки таблицы, а затем сделайте выбор в списке «Размер», чтобы создать соответствующие размеры.

– Выравнивание, эта опция будет позиционировать таблицу на веб-странице.

– Ширина, этот параметр определяет ширину общей таблицы. Установка ширины таблицы в процентах является более гибким ходом, с точки зрения дизайна (таблицы с фиксированными размерами пикселей не отрегулировать с размерами окна браузера пользователя и это может потребовать горизонтальной прокрутки, если таблица шире, чем окно браузера).

ПРИМЕЧАНИЕ: главная страница имеет причуды, например, если нажать и тащить, чтобы изменить размер ячейки таблицы или полей, то он часто меняет разные настройки ширины процентов к определенному числу пикселей. Моя рекомендация состоит в том, что когда вы установили размер вашей таблицы и клетки внутри, то откройте диалоговое окно свойств таблицы и измените настройку пикселей в процентах (просто нажмите на другую кнопку).

– Размещение, этот параметр определяет положение таблицы по отношению к другим объектам на странице. Когда это положение ставится по умолчанию, другие объекты появляются либо ниже, либо только над таблицей.

– Высота. В целом, вы не должны указывать высоту для вашей таблицы. Пусть это настроится в соответствии с потребностями таблицы, как показано на мониторе. В противном случае, вы сможете «расправиться» с большим количеством “белого пространства”, которое вам не нужно.

Тема: Использование таблиц (редактор 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 раз пр. кн. мыши на таблице и взять команду Свойства таблицы