Вставка/Ячейки

Вставляет новую ячейку слева от выделенной ячейки, которая смещается вправо

Вставка/Надпись

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

Удал. ячейки

Служит для удаления выделенных ячеек

Слить клетки

Позволяет объединить несколько ячеек как в строке, так и в столбце

Разъед. клетки

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

Выбор/ Ячейка, Строка, Колонка, Таблица

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

Распределить строки равномерно; Распределить колонки равномерно

Первая команда позволяет установить одинаковую ширину для выделенных строк, вторая -- для выделенных столбцов

АвтоПос.

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

Перевод/Текст в таблицу

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

Перевод/ Таблицу в текст

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

Свойства/Таблица, Ячейка, Надпись

Эти три команды предоставляют доступ к окнам свойств заглавия таблицы Свойства надписи, выделенного диапазона Свойства ячейки и таблицы Свойства таблицы

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

Когда мы находимся в режиме Страница, то доступны команды меню, отвечающие за редактирование содержимого Web-страницы. В этом режиме окно FrontPage похоже на окно текстового редактора Microsoft Word.

3.9 Изображения на Web-странице

Существует два основных способа, позволяющих вставлять на страницу графические изображения:

§ c помощью диалогового окна Свойства страницы задается фон страницы.

§ c помощью диалогового окна Рисунок, которое открывается через меню Вставка на страницу добавляется графическое изображение.

После того, как изображение добавлено на страницу, вы можете изменить его с помощью панели инструментов (рис.3.6).

Эта панель автоматически появляется при щелчке на изображение.

^{1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26}

Рисунок 3.6

1 - Вставка графического изображения из файла.

2 - Наложение текста. Можно менять вид шрифта (Меню Формат-Шрифт).

3 - Автоматически уменьшает изображение и организовывает ссылку на изображение в полную величину, которое нужно поместить в указанную директорию или изменить путь.

4 - Выбор абсолютной позиции для изображения. (При различных размерах экрана изображение будет оказываться в разных местах).

5,6 - Изображение располагается на переднем, заднем плане.

7,8 - Поворот изображения на 90 градусов против, по часовой стрелки.

9,10 - Поворот изображения по горизонтали, вертикали.

11,12,13,14 - изменение контрастности и яркости изображения.

15 - обрезка изображения. Выбрать нужную область и еще раз нажать на этот инструмент.

16 - Выбор цвета, который нужно сделать прозрачным.

17 - Переход в черно-белый режим.

18 - Изображение становится более бледным.

19 - Рисует объемную рамку.

20 - Сглаживает изображение после увеличения или уменьшения.

21, 22, 23, 24 - Позволяет выделить области и организовать по каждой гиперссылку. (Рисование ломаной заканчивается двойным нажатием л.кн.мыши).

25 - Скрывает изображение, показывает области гиперссылок.

26 - Восстанавливает исходное состояние рисунка.

Параметры изображения устанавливаются также в диалоговом окне Свойства рисунка. Окно открывается посредством одноименной команды контекстного меню. В этом окне можно набить текст, который выводится при просмотре страницы в браузере в случае отсутствия графического изображения на Web- сайте (этот текст отображается, если в браузере установлена опция загрузки страниц без изображения).

На вкладке Основное определяются следующие параметры:

§ обзор, изменить - местоположение файла,

§ тип - формат графического файла (“GIF”, ”JPEG”, ”PNG”),

§ прозрачный - эффект прозрачности в GIF-изображении,

§ чередов. строк - чересстрочное отображение при загрузке GIF-изображения,

§ качество - степень качества JPG-изображения

§ прогресс. проходы - число этапов, за которое отобразится JPG-изображение

§ низкое разр. - изображение с низким разрешением, которое отображается при отсутствии оригинала или в процессе его загрузки

§ текст - текст, который будет отображаеться при отсутствии изображения или в процессе его загрузки,

§ адрес, обзор - адрес гиперссылки,

§ конечный фрейм - уточнение параметров гиперссылки при использовании фреймовой структуры.

§ На вкладке Внешний вид определяются следующие параметры:

§ привязка - позволяет организовать обтекание изображения другими объектами. Для отмены обтекания текстом какого-либо объекта: Вставка>Прерыватель>Очистить оба отступа

§ толщина границ - размер рамки вокруг графического изображения,

§ горизонт. расстояния, вертикал. Расстояния - величина отступов от графического изображения,

§ ширина, высота - размер графического изображения,

§ хранить коэффициент - поддержка пропорций графического изображения.

.Задание 3.7 Разместите на Вашем Web-сайте графические изображения.



3.10 Размещение текста на Web-странице

Front Page имеет интерфейс текстового процессора Word. Текст может быть введен с клавиатуры или скопирован из другого документа через буфер обмена и вставлен на страницу с помощью команды “Правк>Встав”.

Изменить вид шрифта выделенного фрагмента текста можно с помощью кнопок панели инструментов (рис. 3.7) или в диалоговом окне Формат>Шрифт

Рисунок 3.7

При редактировании выделенных абзацев можно использовать команды панели инструментов (рис.3.8)

Рисунок 3.8

и команды меню Формат:

Абзац - выбирается привязка (justify - выравнивание справа и слева), сдвиг, межстрочное расстояние.

Маркеры и номера - подпункты простые маркеры и номера позволяют выбрать тип маркера. Подпункт маркеры изображения позволяет заменить типовые маркеры на графические изображения. Для этого нужно активизировать Указать рисунок>Обзор, выбрать графический файл на диске с помощью кнопки .

Границы и тени - В подменю границы можно выбрать стиль границы, ее цвет и ширину, расстояние до текста.

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

Для перехода на новую строку в текущем абзаце используется команда Вставка>Прер>Да.

В FrontPage форматирование выполняется в режиме WYSIWYG (что видите - то и получаете).

Завершив формирование страницы, сохраните ее. Каждая страница сайта сохраняется отдельно командой Файл>Сохранить.

В том случае, если на страницу вставлялось графическое изображение, то появляется окно Сохранить внедренные файлы. Необходимо: Изменить папку и выбрать папку images.

Замечание. Не все шрифты поддерживают браузеры, и не все шрифты могут быть установлены на компьютере пользователя.

Задание 3.8 Введите текст на ваши Web-страницы и отформатируйте его.

3.11 Просмотр Web-страницы в браузере

В процессе создания Web-страницы периодически просматривайте ее с помощью закладки Просмотр и в браузере.

Открыть Web-сайт в браузере Internet Explorer можно с помощью кнопки панели инструментов Front Page или запустить программу Internet Explorer, выбрать команду Файл>Открыть>Обзор, найти файл с:\имя папки\web\index.htm, выделить его и нажать последовательно кнопки Открыть и OK.

Если вы хотите увидеть HTML-код вашей Web-страницы, выберите закладку HTML в нижней части окна Page. Если вы владеете языком HTML, то вы можете изменять HTML-код страницы.

3.12 Общие представления о языке HTML

Следует отметить, что HTML не является языком программирования. HTML - это типичный язык разметки, т.е. с его помощью можно оформлять документы, создавать ссылки, но никак не писать программы. Даже специальные эффекты, которые можно увидеть на web-страницах, создаются не с помощью HTML, а с использованием дополнительных средств - например, встроенных в документ программ на языке JavaScript, или с использованием Java-аплетов.

Любой браузер позволяет просмотреть исходный текст HTML-документа. Для IE (Internet Explore) это команда “в виде HTML” из меню “Вид”, а для Netscape - “View Source” из меню “View”.

При создании Web-сайта вы используете язык HTML. В HTML-коде страницы содержатся указания на информацию, которую необходимо отобразить (текст и графика) или воспроизвести (звуковое сопровождение) в окне браузера, инструкции о том, как эта информация должна отображаться или воспроизводиться, а также ссылки на другие страницы.

HTML - это язык форматирования, в котором для задания параметров форматирования используется система тегов.

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

Существуют теги, которые помещаются в начале и конце страницы (они определяют разделы страницы), теги, которые загружают на страницу рисунок, выполняют программы и влияют на отображение текста.

HTML - текст представляет собой текст в формате ASCII.

Гипертекстовая страница описывается на языке HTML и обрамляется парными маркерами: <HTML> и </HTML>

Комментарий записывается внутри маркера и не отображается браузером:

<!-- однострочный комментарий -->

<! многострочный комментарий >

Страница состоит из заголовочной части <HEAD> и тела страницы <BODY>. Вот так выглядит разметка пустой Web-страницы:

<HTML>

<HEAD>

<TITLE> Заглавие страницы </TITLE>

</HEAD>

<BODY>

<!-- Тело страницы -->

</BODY>

</HTML>

3.13 Java-аплеты

Благодаря своим возможностям добавлять новые свойства Web-страницам широкое распространение получили Java-аплеты, которые имеют расширение cls. Файлы загружаются как отдельные элементы, но обычно распространяются в заархивированном виде (в виде пакетов *.zip, укомплектованных некоторыми файлами поддержки - документацией, графическими и звуковыми файлами в зависимости от предназначения аплета).

Программа FrontPage позволяет быстро включить аплет в страницу. Для этого необходимо файлы с расширением class импортировать в папку с сайтом и вставить HTML-код в нужную страницу.

Задание 3.9 Включите выбранный Вами аплет в страницу.

3.14 Работа с гиперссылками

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

1. Чтобы создать ссылку, отметьте объект, который вы хотите включить в ссылку, после чего щелкните на кнопке Гиперссылка панели инструментов или активизируйте команду Гиперссылка меню Вставка. Откроется диалоговое окно Создать гиперссылку (рис. 3.9).

Рисунок 3.9

В этом окне вы можете создать гиперссылку:

§ На страницу Web-сайта, который открыт в данный момент в FrontPage., Для этого нужно выбрать ее из списка.

§ На внешний Web-сервер, заполнив строку URL самостоятельно.

§ На адрес электронной почты, используя кнопку .

§ На конкретное место страницы. Для этого в определенном месте страницы создается закладка: выделяется текст, выполняется команда Вставка>Закладк, в появившемся диалоговом окне вводится имя закладки и сохраняется эта страница. Затем, на этой странице или на другой, выделяется объект для организации гиперссылки, выполняется команда Вставка>Гиперссылка. В появившемся диалоговом окне выбирается файл с закладкой, а в поле списка Закладка ее имя.

2. Щелкните правой кнопкой мыши на созданной гиперссылке и активизируйте команду Свойства гиперссылки контекстного меню, вследствие чего откроется диалоговое окно Редактировать гиперссылку. В поле URL будет указан URL-адрес страницы, на которую создана ссылка. Если его необходимо изменить - выберите другую страницу.

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

Для создания горячих точек используются инструменты рисования,

, расположенные в правой части панели Pictures. Если данная панель не отображается постоянно, она появляется при выборе графического изображения.

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

Совет. Делайте переходы между страницами и разделами простыми, чтобы пользователю было легко найти нужную информацию.

Задание 3.10 Свяжите все страницы Web-сайта гиперссылками.

3.15 Front Page - компоненты

Front Page - компоненты позволяют добавлять готовые динамические и статические элементы на страницу, возвращать информацию, введенную в форму, предоставляют возможность участия в дискуссионной группе и т.д. Рассмотрим некоторые из этих компонентов.

3.15.1 Навигационные кнопки

Кнопки перехода между страницами бывают двух видов. Это стандартные кнопки Front Page с анимационным эффектом (Меню Вставка Компонент Hover Кнопка). В появившемся диалоговом окне (рис. 3.10) необходимо подписать кнопку Текст кнопки при этом можно установить параметры шрифта для надписи Шрифт. Указать ссылку на нужную страницу. Можно установить Цвет кнопки, эффект и цвет кнопки при наведении на нее курсора мыши. Размеры кнопки (ширина, высота).

Рисунок 3.10

Если щелкнуть на кнопку Настроить, то появляется новое диалоговое окно (рис. 3.11), с помощью которого можно настроить, чтобы при щелчке на кнопку издавался звук, а при наведении курсора мыши менялась картинка.

Рисунок 3.11

Кроме стандартных кнопок Front Page можно использовать кнопки, созданные с помощью графического редактора. Тогда она вставляется как картинка и по ней организуется гиперссылка.

Задание 3.11 Создайте навигационные кнопки на Вашем Web-сайте.

3.15.2 Бегущая строка

Команда Вставка>Компонент>Marquee позволяет создать бегущую строку (прямоугольную область, в которой прокручивается текст). Для изменения ее свойств нужно нажать на нее правой кнопкой мыши, выбрать команду Marquee Properties и заполнить диалоговое окно:

§ текст - осуществляется ввод текста строки,

§ направление - определяется направление движения строки,

§ скорость - определяется скорость перемещения,

§ свойство - определяется способ перемещения (прокрутка - текст непрерывно прокручивается, скольжение - текст перемещается по странице и останавливается справа или слева, альтернатива - текст перемещается из одного угла страницы в другой),

§ привязка к тексту - выравнивание текста,

§ ширина, высота - устанавливается ширина и высота прямоугольной области,

§ повтор - указывается сколько раз нужно прокрутить текст,

§ цвет фона - выбирается цвет фона.

Задание 3.12 Создайте бегущую строку.

3.16 Создание эффектов перелистывания страниц

Формат>Перемещен.Страницы - задает различные варианты открытия и закрытия страницы в браузере. В диалоговом окне выбирается Событие, задается его Продолжительность в секундах и выделяется Эффект перемещения.

Задание 3.13 Задайте эффекты перелистывания страниц.

3.17 Добавление анимационных эффектов с использованием Dynamic HTML

Динамик HTML позволяет применять для оформления страниц анимационные эффекты выделенного объекта (текста, графического изображения). (Меню Формат Динамик HTML Эффекты). При выборе этой команды появляется панель инструментов (рис.3.12), на которой нужно выбрать время эффекта, его тип и характеристики. Некоторые эффекты могут не идти в браузерах отличных от Internet Explorer.

Рисунок 3.12

Задание 3.14 Создайте динамические эффекты на Вашем Web-cайте.

3.18 Вставка горизонтальной строки

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

· ширина, высота - для задания длины и толщины линии,

· привязка - для выбора способа выравнивания; поле списка,

· цвет - для задания цвета линии,

· сплошная линия - в активном состоянии отменяет эффект создания тени.

3.19 Назначение тем Web-сайтам и страницам

Формат>Тема - используется для выбора шаблона оформления Web-сайта или отдельной страницы.

В диалоговом окне выбирается тип темы и область ее применения (для текущей страницы или для всех страниц). Тема может быть модифицирована путем выключения одной из трех опций: Яркие цвета, Активная графика, Фоновый рисунок. В случае использования темы определяется стиль заголовков, абзацев, горизонтальных линий, фонового изображения, кнопок, маркеров списка.

В том случае, если какие-то элементы темы не устраивают пользователя, их можно изменить и сохранить полученную тему под новым именем. Для этого нужно:

- Открыть диалоговое окно для выбора темы - Формат>Тема

- Выбрать тему, которую нужно модифицировать и нажать кнопку Изменить, при этом появится дополнительный набор кнопок:

Цвета - для изменения цветового оформления страницы тремя способами:

Цветовые схемы - выбор цветового оформления из предложенного списка тем.

Колесо цветов - перемещая маленький кружок в колесе цветов можно изменять цветовую схему, а перемещая бегунок Яркость - изменять яркость цвета.

Настроить - в списке элемент - выбираем элемент страницы, а в списке Цвет - его цвет.

Графика - для изменения графических элементов страницы. В списке "элемент" выбираем элемент страницы, ниже, на вкладке Рисунок выбираем новые графические файлы, на вкладке Шрифт определяем стиль и размещение текста на графическом элементе.

Текст - для изменения стиля текста и заголовков страницы. В списке элемент выбираем элемент страницы, ниже, на вкладке Шрифт выбираем шрифт. Кроме этого можно изменить стиль текста - еще текстовые стили, в правом окне выбираем элемент страницы, изменить, формат>шрифт и определяем его характеристики.

После внесения всех изменений нужно сохранить новую тему кнопкой Сохранить как и задать имя.

3.20 Фреймы

Фреймы используются для создания сложных страниц. Для организации фреймовой структуры нужно:

§ В режиме Страница выполнить команду Файл>Нов.>Стран., выбрать Страницы фреймов и Да;

§ Заполнить открывшуюся страницу;

§ При ее сохранении первый раз ввести новое имя файла латинскими буквами.

Глоссарий

Браузер - специальная программа просмотра гипертекстового документа.

Гипертекст - это способ хранения и манипулирования информацией, позволяющий устанавливать связи между любыми “информационными единицами”. Связь между информационными единицами осуществляется по гиперссылкам.

Гиперссылка - это выделенный фрагмент текста, с помощью которого осуществляется переход от одного документа к другому. Обычно гиперссылки выделяют цветом и подчеркиванием.

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

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

Web-страница - это текстовый файл с расширением *.htm, который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера.

Язык HTML (Hypertext Markup Language) - это язык форматирования, в котором для задания параметров форматирования используется система тегов.

Литература

1. М. Мэтьюс, Э. Полсен. FrontPage 2000: полное руководство. Пер. с англ. - К.: Издательская группа BHV, 2000. - 752 c.

2. М. Мэтьюс, Э. Полсен. FrontPage 2000: для пользователя. Пер. с англ. - К.:Издательская группа BHV, 1999. - 336 c.

3. Е. Ястребцева, Я. Быховский. Моя провинция - центр Вселенной. Развитие телекоммуникационной образовательной деятельности в регионах, 2-е изд., перераб. И доп. - М.: Федерация Интернет-Образования, 2001. - 216 с.

4. Б. Дэвис, С. Малдер, К. Роуз. PHOTOSHOP 4-5. Учебный курс. «Питер Ком.», С.-Петербург по лиц. С Hayden Books, США, 1999.

5. Д. Кроудер, Р. Кроудер. Разработка Web-узлов для «чайников». - Диалектика: Москва, С.-Петербург, Киев, 2001.

Приложение

Алгоритм создания Web-сайта в Microsoft Front Page

1. Запустите программу FrontPage.

2. Создание нового сайта начинается с создания одностраничного сайта (ФайлНовыйСайт), затем выбрать сайт из одной страницы и указать место размещения сайта (с:\имя_директории\Web).

3. Структура сайта создается в режиме Навигации (*КМ - Новая страница).

Примечание. Не забудьте дать имя каждой странице. Имя страницы должно быть набрано только латиницей и только маленькими буквами (*КМ- Переименовать).

4. Общие области всех страниц сайта создаются в любом режиме (*КМ - Общие границы).

5. Оформление каждой страницы осуществляется в режиме Страница и начинается

· с настройки свойств страницы (фон, звук и т.д.) (*КМ - Page Properties)

· и создания ее макета с помощью таблицы (меню Таблица Вставка Таблица).

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

Свойства таблицы (*КМ - Свойства таблицы).

Свойства ячейки (*КМ - Свойства ячейки).

6. Затем оформляются все компоненты страницы (текст, графика и т.д.).

Вставка графического изображения (меню Вставка Рисунок).

Текст набивается вручную или вставляется из текстового редактора через буфер обмена.

7. Теперь свяжите между собой все оформленные страницы с помощью гиперссылок.

Как создать и редактировать гиперссылку

§ Чтобы создать гиперссылку, отметьте объект, который вы хотите включить в ссылку, после чего активизируйте команду Гиперссылка меню Вставка. Откроется диалоговое окно Создать гиперссылку. В диалоговом окне Создать гиперссылку вы можете создать ссылку на любую страницу или закладку Web-сайта, который открыт в данный момент в FrontPage.

§ Щелкните правой кнопкой мыши на созданной гиперссылке и активизируйте команду Свойства гиперссылки контекстного меню, вследствие чего откроется диалоговое окно Редактировать гиперссылку.

8. Вставка стандартных кнопок Front Page (Меню Вставка Компонент Hover Кнопка).

9. Вставка бегущей строки (Меню Вставка Компонент Marquee).

10. Создание эффектов перелистывания страниц (Меню Формат Перемещение страницы)

11. Добавление анимационных эффектов (Меню Формат Динамик HTML Эффекты).

КМ - контекстное меню (правая кнопка мыши)

Размещено на Allbest.ru