Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
СОЗДАНИЕ ЧТО НАДО WEB СТРАНИЦЫ.docx
Скачиваний:
10
Добавлен:
14.11.2019
Размер:
151.67 Кб
Скачать

2.4. Вставка иллюстраций, звука и видео

 

Наряду с текстом иллюстрации (рисунки и фотографии) являются одним из основных элементов оформления Web-страниц. Редактор FrontPage позволяет загружать изображения из файлов различных графических форматов: GIF (обычный и анимированный), JPEG, BMP, TIFF, TGA, RAS, EPS, PCX, PNG, PCD и WMF. Вы можете поместить готовый рисунок на страницу, взяв его из библиотеки картинок программы FrontPage, из папки текущего сайта или одного из сайтов на локальном диске, из любого графического файла на локальном диске или загрузив с внешнего сайта в Интернете.

Создайте новую страницу сайта с помощью команды Пустая страница, вызываемой из меню Файл, подменю Создать, командой Страница или веб-узел….

Установите курсор в начало основной области страницы, и щелкните мышью на кнопке Добавить рисунок из файла на панели инструментов Стандартная. На экране появится диалог Рисунок. Выберите нужный файл и нажмите кнопку ОК. Изображение из файла появится на странице.

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

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

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

Щелкните правой кнопкой мыши на рисунке и в появившемся контекстном меню выберите команду Свойства рисунка…. На экране появится диалог Свойства рисунка.

Выберите вкладку Вид. Группа элементов Обтекание позволяет выбрать расположение рисунка в тексте. Открывающийся список Выравнивание позволяет задать способ выравнивания рисунка на странице и его расположение относительно близлежащего текста. В поле ввода Толщина границы можно задать толщину рамки вокруг изображения. Нулевое значение означает отсутствие рамки.

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

Выберите вкладку Общие для выбора формата изображения. Для сохранения изображений в папке сайта FrontPage использует два формата графических файлов: GIF иJPEG. Все изображения, помещенные на страницу из файлов в других форматах, при сохранении автоматически преобразовываются. При этом рисунки, использующие 256 или менее цветов, сохраняются в формате GIF, a другие - в формате JPEG.

В группе элементов управления Альтернативное представление можно указать файл с заранее подготовленной копией рисунка, сделанной с низким разрешением,которая будет отображаться при загрузке основного рисунка, а также текст, отображаемый на месте рисунка во время загрузки и во всплывающей подсказке.

В программе FrontPage имеется возможность пользоваться библиотекой картинок. Для этого установите курсор в позицию, куда требуется вставить рисунок, и выберите в меню команду Вставка - Рисунок – Картинки…. На экране появится диалог Вставка картинки (рис. 20).

Щелкните на разделе Коллекция картинок…. В области просмотра появятся изображения, входящие в выбранный раздел. Щелкните правой кнопкой мыши на одном из изображений и в появившемся контекстном меню выберите команду Вставить. Выбранная картинка будет помещена на текущую страницу сайта.

Наряду с различными специальными эффектами для «оживления» страниц широко используются мультимедиа-объекты: звук, видео, Flash-анимация и т.п. Звуковой фрагмент можно воспроизводить при нажатии на анимированную кнопку или при наведении на нее указателя мыши. Кроме этого, для каждой страницы сайта можно выбрать фоновый звук или музыку, которая будет воспроизводиться при открытии страницы.

Чтобы установить фоновую музыку, в режиме редактирования щелкните правой кнопкой мыши в любой области страницы и в появившемся контекстном меню выберите команду Свойства страницы. На экране появится диалог Свойства страницы с открытой вкладкой Общие.

В группе элементов управления Фоновый звук нажмите кнопку Обзор и в открывшемся диалоге Фоновый звук выберите файл с музыкальным фрагментом.

Звуковой файл необходимо подготовить заранее. Он может быть записан в одном из основных форматов: Wave Sound (.wav), Midi Sequencer (.mid), Real Media (.ram,.ra), AIFF Sound (.aif, .aifc, .aiff) или AU Sound (.au, .snd). Если вы заранее не поместили файл с музыкой в папку сайта, то его можно найти на диске, щелкнув на кнопке поиска. Для примера можно взять один из системных звуковых файлов в папке \Windows\Media.

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

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

Чтобы поместить на страницу сайта видеоролик, установите курсор в нужную позицию и выберите в меню команду Вставка - Рисунок – Видеозапись…. На экране появится диалог Видео (рис. 22).

Чаще всего для хранения видеоинформации используется формат AVI, а соответствующие файлы имеют расширение *.avi. Для поддержки других форматов видео могут потребоваться дополнительные программные кодеки или подключаемые модули для браузера.

Если вы заранее поместили файл с видеороликом в папку сайта, выберите его в списке файлов и нажмите кнопку ОК.

Файл, расположенный в другом месте на локальном диске, можно найти, нажав кнопку Открыть.

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

Щелкните правой кнопкой мыши на области вывода видеоизображения и в появившемся контекстном меню выберите команду Свойства рисунка…. На экране появится диалог Свойства рисунка с открытой вкладкой Видео.

Установка флажка При открытии файла указывает, что воспроизведение видеоролика будет происходить каждый раз при загрузке страницы в браузер. Установка флажка При наведении указателя мыши позволяет запускать видеоролик при наведении на него указателя мыши. В поле ввода со счетчиком Число повторов можно указать, сколько раз должен показываться ролик или установить флажок Непрерывно для бесконечного воспроизведения. Время задержки в миллисекундах между показами можно установить в поле Задержка между показами. Если установить флажок Выводить элементы управления в браузере, то посетитель сайта сможет сам управлять ходом воспроизведения.

Чтобы посмотреть, как будет выглядеть видео, сохраните страницу и запустите браузер, нажав Просмотр в обозревателе на панели инструментов Стандартная.

Если основным браузером в вашей системе является MS Internet Explorer, вы можете посмотреть, как будет выглядеть видеоизображение, просто переключившись в режим предварительного просмотра страницы.

Настройки для видео не случайно находятся в диалоге Свойства рисунка. Поместив на страницу видеофрагмент, вы также можете указать рисунок для той же области страницы на вкладке Общие. Если браузер посетителя сайта не поддерживает воспроизведение видео, то тогда он увидит рисунок.

 

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

 

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

1. Щелкнуть мышью на кнопке Добавить таблицу на панели инструментов Стандартная, затем во вспомогательном окне указать с помощью мыши размерность таблицы.

2. Выбрать из меню Таблица команду Вставить - Таблица, затем указать размерность и другие параметры таблицы в диалоге Вставка таблицы.

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

4. Таблицу можно также создать посредством рисования ее границ и внутренних разделителей прямо на странице. Для этого нужно из меню Вид вызвать панель инструментов Таблицы и на этой панели нажать кнопку Нарисовать таблицу, при этом указатель мыши примет вид карандаша. Установите указатель мыши на странице в месте предполагаемого расположения верхнего левого угла таблицы, нажмите левую кнопку мыши и, не отпуская ее, переместите указатель мыши в позицию нижнего правого угла таблицы. Контур будущей таблицы при перемещении указателя мыши будет отображаться пунктирной линией. Отпустите кнопку мыши. Внешняя рамка таблицы будет зафиксирована на странице. Для изменения размеров таблицы можно перемещать с помощью мыши правую и нижнюю границы рамки. Теперь, установив указатель мыши у левой границы рамки, нажмите левую кнопку мыши, удерживая ее нажатой, переместите указатель мыши к правой границе и отпустите кнопку. Таблица будет разделена на две строки. Таким же образом проведите вертикальную линию от верхней границы до нижней. Теперь таблица будет разделена на четыре ячейки. Внутренние границы таблицы также можно перемещать с помощью мыши. Отожмите кнопку рисования таблицы на панели инструментов Таблицы, чтобы отключить режим рисования. Кнопка вернется в исходное состояние, и указатель мыши примет стандартный вид.

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

Для разбиения ячеек таблицы следует установить курсор в одну из ячеек и щелкнуть мышью на кнопке Разбить ячейки на панели инструментов Таблицы. На экране появится диалог Разбить ячейки. С помощью переключателей можно выбрать способ разбивки: на столбцы или на строки. В поле ввода со счетчиком следует указать количество столбцов или строк. После нажатия на кнопку ОК ячейка таблицы будет разбита на то количество, которое вы указали.

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

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

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

Для настройки параметров таблицы щелкните правой кнопкой мыши на таблице и в появившемся контекстном меню выберите команду Свойства таблицы…. На экране появится диалог Свойства таблицы (рис. 23).

В группе элементов управления Положение диалога Свойства таблицы можно установить выравнивание таблицы на странице (Выравнивание), способ обтекания таблицы текстом (Обтекание), расстояние в пикселях между содержимым ячейки и ее внутренней границей (Поля ячеек), расстояние в пикселях между соседними ячейками таблицы (Интервал ячеек), а также задать ширину и высоту таблицы. В группе элементов Границы: можно указать размер внешней границы таблицы, а также задать цвет границы. Если задать нулевой размер границы, то она станет невидимой. В группе элементов управления Фон определяется цвет фона в области таблицы и фоновый рисунок.

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

Для настройки параметров ячейки таблицы щелкните правой кнопкой мыши на выбранной ячейке и в появившемся контекстном меню выберите команду Свойства ячейки…. На экране появится диалог Свойства ячейки.

В группе элементов управления Положение диалога Свойства ячейки можно установить горизонтальное и вертикальное выравнивание содержимого в ячейке, задать точную ширину и высоту ячейки. Флажок Ячейка заголовка позволяет придать ячейке стиль заголовка таблицы. По умолчанию стиль заголовка предполагает выделение текста в ячейке жирным шрифтом. Обычно такие ячейки располагаются по левому и верхнему краю таблицы для обозначения названий столбцов и строк. Установка флажкаНе переносить слова запрещает перенос слов в ячейке таблицы. В группе элементов управления Границы: определяется цвет линий, ограничивающих ячейку. В группе управления Фон определяется фоновый цвет и фоновый рисунок ячейки.

После выбора необходимых параметров ячейки нажмите кнопку ОК, чтобы закрыть диалог Свойства ячейки.

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

На страницу можно добавить информацию из табличного файла, например, из документа, подготовленного программой MS Excel. Для этого нужно воспользоваться командой меню Вставка – Файл… и выбрать необходимый тип файла. Данные из табличного файла будут сразу помещены в таблицу.

Если требуется поместить на страницу электронные таблицы, графики или диаграммы, вы можете воспользоваться готовыми Web-компонентами пакета MS Office. Их можно выбрать в меню Вставка – Веб-компонент. Компонент Электронная таблица представляет собой упрощенный вариант листа MS Excel. Вы можете напрямую редактировать таблицу при проектировании страницы, так и при просмотре ее в браузере. Компонент Сводная таблица позволяет составить сводную таблицу по информации из базы данных или других источников. Компонент Диаграмма предназначен для построения и отображения на странице различных диаграмм по данным из электронной таблицы, сводной таблицы или базы данных.