Создайте простейший html файл со следующим содержимым:
<html>
<head>
<title>Первое задание</title>
</head>
<body>
<p>Это простой абзац с текстом</p>
<ol>
<li>Это первый элемент нумерованного списка</li>
<li>Это второй элемент нумерованного списка</li>
</ol>
</body>
</html>
Создайте новый html документ в той же директории, где и первый. Напишите в нем какой-либо текст. Нарисуйте картинку небольшого размера (200x200). Сохраните ее в той же директории, где и html документ, назвав "1.bmp".
Задание 3. Создание html с картинками, гиперссылками и т.д.
Создайте осмысленный html документ, в котором должно быть:
- не менее 1 заголовка первого уровня;
- не менее 2 абзацев;
- не менее 3 картинок;
- один нумерованный список, содержащий не менее 4 элементов;
- один ненумерованный список, содержащий не менее 4 элементов;
- не менее одного слова, выделенного курсивом;
- не менее одного слова, выделенного жирным;
- гиперссылка на документ из первого задания;
- гиперссылка на документ из второго задания;
- не менее одной картинки, используемой как гиперссылка.
Примеры тем для третьего задания
- любимый преподаватель;
- любимый техникум;
- любимая музыкальная группа;
- любимая телепередача;
- любимая машина;
- любимая игра;
- любимые животные;
- любимый писатель;
- любимый автор стихов (например, Пушкин);
- любимая планета;
- и т.д.
Задание 1. Создание расписание своей группы
Создайте новый html документ в той же директории, где и стартовая страница, в котором разместите таблицу расписания Вашей группы (практические и лекционные). В таблице: колонки – дни недели, строки – время, ячейки – предметы.
Задание 2. Создание прайс-листа
Создайте новый html документ в той же директории, где и стартовая страница. В документе разместите таблицу прайс-лист плюбого товара (компьютерных комплектующих, бытовой техники, мебели и т.д.).Колонки таблицы: номер по порядку, наименование товара, описание товара, цена, изображение. Таблица должна содержать не мене 10 наименований товара, для некоторого товара необходимо разместить изображения.
Задание 3. Создание списка одногруппников
Создайте новый html документ в той же директории, где и стартовая страница. В документе разместите таблицу со списком одногруппников. Колонки: Фамилия, Имя, Отчество, Дата рождения, Телефон, Адрес.
Задание 0. Создание стартовой страницы
Разобрать пример фреймов («\Example\index.html»).
Задание 1. Создание расписание своей группы
Создать фрейм-документ, который состоит из 3-х фреймов: лого, меню, информационного. Меню содержит ссылки на стартовый страницы предыдущих практик, которые должны открываться в информационном фрейме.
Задание 1
Рассмотреть пример ("\Example\index.html") использования стилей с определением стилей в отдельном файле ("\Example\style.css").
Задание 2
Продемонстрировать использование CSS. Для чего создать сайт, состоящий из не менее 3 страниц, к которым подключается файл с описанием стилей.
На страницах должны использоваться перечисленные ниже структурные элементы:
- заголовки (<h1>, …);
- параграфы (<p>);
- списки (<ol> и/или <ul>, <li>);
- таблицы (<table>, <tr>, <td>);
- изображения (<img>).
В файле с описанием стилей должны быть описания стилей для следующих элементов:
- body (свойства текста, шрифта, фона);
- p (свойства текста, шрифта);
- h1 (свойства текста, шрифта, фона);
- table (свойства текста, шрифта, фона, размеров, границ);
- img (свойства размеров, границ);
- b (свойства шрифта).
Определения стилей необходимо выполнить для различных свойств CSS, а именно:
- шрифт;
- текст;
- цвет элементов;
- цвет фона элементов;
- размеры и границы элементов.
Тему сайта можно выбрать произвольную или из тем, предложенных ниже:
1. Биография
2. Увлечения (хобби)
3. Вид спорта
4. Любимые звери
5. Любимая игра
6. Любимая группа
7. и т.д.
Задание 1
Создать блочный элемент шириной 10 сантиметров, прилегающий к правому краю.
Задание 2
Создать документ с блочными элементами, у каждого должна быть видимая граница. Элементы заполнить текстом. Расположить элементы следующим образом
Задание 3
В предыдущем задании в элементах установить внешний отступ равным 1em, а внутренний равным 0.5em.
Задание 1
Продемонстрировать использование изображений-карт, для чего создать сайт, состоящий из не менее 2 страниц:
- 1 страница – описание карты:
- 2 страница (и другие) – подробное описание элементов изображения (областей карты, которые являются гиперссылками).
При использовании гиперссылок продемонстрировать использование закладок.
Тему сайта можно выбрать произвольную или из тем, предложенных ниже:
1. Описание структурных элементов материнской платы;
2. Описание структурных элементов системного блока;
3. Описание расположения объектов на карте (города, области и т.д.);
4. Описание элементов мебели, квартиры, интерьера;
5. Описание конструктивных элементов авто- и мототехники;
6. Описание элементов интерфейса программы (например, среды TP7.0)
7. и т.д.
Задание 1. Создание html-файла
Средствами текстового редактора, используя язык гипертекстовой разметки HTML создать html-файл со ссылками на 3 другие страницы, содержащие различные виды списков (линейные и вложенные):
- маркированные.
- нумерованные.
- списки определений.
Продемонстрировать все виды списков со всеми видами маркеров и способами нумерации.
Создание домашней страницы
Посещение веб-узла начинается с домашней страницы. Эта страница содержит сведения о содержании и теме веб-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит также ссылки на другие страницы веб-узла.
1. На пустой странице в представлении Страница введите фразу Добро пожаловать в магазин Championzone! и нажмите клавишу ENTER. Как и при работе с текстовым редактором, при нажатии клавиши ENTER курсор переходит на новую строку.
2. Затем введите предложение Узнайте больше о наших спортивных товарах, просмотрите фотографии товаров и коллекцию фотографий, посвященных спорту.
3. Нажмите клавишу ENTER. Большая часть содержимого веб-узла магазина Championzone уже создана. При создании веб-узла в программе FrontPage можно импортировать любые существующие документы непосредственно на веб-страницу, что позволяет избежать их повторного ввода.
Страница должна выглядеть так:
Теперь необходимо добавить картинку на веб-страницу. Картинки могут представлять собой отсканированные фотографии, рисунки или компьютерные графические объекты, созданные с помощью графических редакторов.
В данном примере вставляется картинка с изображением эмблемы FrontPage.
Вставка графического объекта на домашнюю страницу
1. В меню Вставка выберите пункт Рисунок, а затем — команду Из файла. В программе FrontPage появится диалоговое окно Рисунок.
2. Выберите папку с лабораторными работами, дважды щелкнитке по ней.
3. Выберите файл frontpage и нажмите кнопку Вставить. Выбранный файл рисунка будет вставлен на текущую страницу. Этот рисунок представляет собой графический объект, который посетители веб-узла смогут щелкнуть и получить дополнительные сведения о программе FrontPage 2002.
4. Нажмите кнопку ENTER, чтобы создать новую строку.
Страница должна выглядеть так:
Одной лишь вставки изображения кнопки недостаточно для выполнения в обозревателе каких-либо действий по щелчку этого изображения. Чтобы щелчок рисунка или слова вызывал действие, необходимо с этим рисунком или словом связать гиперссылку.
Гиперссылка является указателем для перехода от текста или рисунка к другой странице или файлу в Интернете или интрасети. В Интернете гиперссылки являются основным средством перехода на другие веб-страницы или веб-узлы.
Далее необходимо создать гиперссылку для графического объекта, вставленного на домашнюю страницу.
Создание гиперссылки для рисунка
1. На домашней странице щелкните вставленный ранее рисунок кнопки с эмблемой FrontPage 2002.
Выделенный рисунок отображается с маркерами файла, которые представляют собой восемь маленьких квадратов, расположенных вдоль границ рисунка. Они могут использоваться для изменения размеров рисунка или его внешнего вида. При выделении рисунка в программе FrontPage на экране появляется панель инструментов Рисунки. С помощью панели инструментов Рисунки можно получить доступ к средствам редактирования и форматирования рисунков, о которых будет рассказано далее.
Примечание. Если панель инструментов Рисунки автоматически не отображается, в меню Вид выберите пункт Панели инструментов, а затем — пункт Рисунки.
2. В меню Вставка выберите команду Гиперссылка. В программе FrontPage появится диалоговое окно Добавление гиперссылки. В этом окне необходимо указать адрес назначения создаваемой гиперссылки.
3. В поле Адрес введите адрес www.microsoft.com/frontpage.
Примечания В программе FrontPage автоматически добавляется префикс http.
Поскольку создается ссылка для кнопки с эмблемой Microsoft FrontPage, ссылка будет указывать на домашнюю страницу FrontPage в Интернете. При нажатии этой кнопки в обозревателе будет открыта домашняя страница FrontPage.
4. Нажмите кнопку ОК, чтобы завершить создание гиперссылки. Внешний вид кнопки не изменился. В отличие от текстовых гиперссылок, которые обычно подчеркнуты и выделены синим цветом, рисунок с гиперссылкой не позволяет так же просто определить наличие гиперссылки. Это сделано намеренно, поскольку изменение внешнего вида рисунка в некоторых случаях может ухудшить внешний вид страницы. Проверить наличие связанной с рисунком гиперссылки нетрудно, если навести указатель мыши на рисунок. При наличии гиперссылки в программе FrontPage в строке состояния выводится адрес URL этой гиперссылки. Далее в верхней части страницы необходимо вставить рисунок с эмблемой магазина Championzone.
Вставка рисунка на домашнюю страницу
1. Используйте сочетание клавиш CTRL+HOME, чтобы быстро перейти в начало текущей страницы.
Совет. Сочетание клавиш CTRL+HOME переводит курсор в исходную позицию (рядом с верхним левым полем текущей страницы).
2. В меню Вставка выберите пункт Рисунок, а затем — команду Из файла. В программе FrontPage сразу же отображается содержимое папки с лабораторными работами. В течение каждого сеанса работы в программе FrontPage запоминаются имена и расположение папок, к которым осуществлялся переход.
3. Перейдите в папку с лабораторными работами.
4. Дважды щелкните файл czlogo. В программе FrontPage будет выполнена вставка рисунка на текущую страницу.
5. Нажмите клавишу ENTER, чтобы переместить текст приветствия на следующую строку.
Страница должна выглядеть так:
Для завершения создания домашней страницы осталось расположить текст и рисунки по центру.
Расположение по центру элементов на странице
1. В меню Правка выберите команду Выделить все. В программе FrontPage будет выделено все содержимое текущей страницы.
2. В меню Формат выберите пункт Абзац. В программе FrontPage будет отображено диалоговое окно Абзац. В этом окне можно изменить выравнивание выделенных элементов, а также указать отступ и интервалы для текста и рисунков.
3. В списке Выравнивание выберите значение по центру, а затем нажмите кнопку ОК. В программе FrontPage будет выполнено выравнивание текста и рисунков по центру домашней страницы.
4. Щелкните страницу в любом месте, чтобы отменить выделение всех элементов страницы.
Сохранение текущей страницы
Потратив определенное время на выполнение ряда действий, полезно сохранить полученную веб-страницу.
1. В меню Файл выберите команду Сохранить как. В программе FrontPage появится диалоговое окно Сохранить как. В этом окне можно указать нужное расположение для текущей страницы, а также изменить название, имя файла и его тип.
2. В диалоговом окне Сохранить как выберите Вашу папку (при еѐ отсутствии – создайте свою папку).
3. Нажмите кнопку Изменить рядом с полем Название. Появится диалоговое окно Название страницы. В этом окне в качестве названия
страницы по умолчанию выводится первая строка текста текущей страницы. Заголовок определяет содержимое страницы при отображении ее в веб-обозревателе. Далее предстоит изменить название страницы на более наглядное.
4. В поле Название введите Домашняя страница и нажмите кнопку ОК.
5. Измените текст в поле Имя файла на текст Домашняя страница, а затем нажмите кнопку Сохранить. В программе FrontPage выполняется сохранение текущей страницы.
Параметры представления Страница
Работа по созданию домашней страницы осуществлялась монопольно в обычном представлении Страница, однако существуют три различных представления текущей страницы.
Отображение HTML-тегов на текущей странице
В представлении Страница
выберите в меню Вид команду Показать теги.
В программе FrontPage на экран будет выведено графическое представление стандартных HTML-тегов.
Данное представление удобно, если при создании веб-страниц нужно знать расположение HTML-тегов.
Чтобы скрыть теги, еще раз выберите команду Показать теги в меню Вид.
Отображение HTML-кода текущей страницы
В представлении Страница нажмите кнопку HTML-код, расположенную в нижней части страницы.
В этом режиме в программе FrontPage отображается HTML-код созданной домашней страницы. Эти инструкции расшифровываются в веб-обозревателях при отображении страницы. Область HTML предназначена для опытных веб-разработчиков, которым необходимо изменить HTML-код, созданный в программе FrontPage.
Если требуется задать способ создания HTML-кода в программе FrontPage, в меню Сервис выберите пункт Параметры страницы и откройте вкладку Разметка текста HTML. Тем, кто недостаточно хорошо знаком с языком HTML, не рекомендуется вносить изменения в этом окне. Чтобы закрыть диалоговое окно Параметры страницы, нажмите кнопку Отмена.
В нижней части страницы нажмите кнопку HTML, чтобы просмотреть html-разметку страницы.
В нижней части страницы нажмите кнопку Обычный, чтобы вернуться в Обычный режим представления страницы.
Совет. При работе в режиме HTML-код можно использовать многие команды меню и кнопки панелей инструментов, так же как и при работе в режиме Обычный.
Предварительный просмотр текущей страницы
Нажмите кнопку Просмотр в нижней части страницы.
Примечание. Если на компьютере не установлен обозреватель Microsoft Internet Explorer, вкладка Просмотр не отображается и просмотр страницы таким способом невозможен. Режим представления страницы Просмотр удобен для просмотра расположения и внешнего вида определенных элементов, таких как анимация, видеозаписи, таблицы и списки, в том виде, как они выводятся в веб-обозревателе.
В нижней части страницы нажмите кнопку Обычный, чтобы снова вернуться в Обычный режим представления страницы.
Создание веб-узла в программе FrontPage
Веб-узел представляет собой домашнюю страницу и связанные с ней страницы, рисунки, документы, мультимедийные и другие файлы. Веб-узлы сохраняются на веб-сервере или на жестком диске компьютера. Веб-узлы на основе средств Microsoft FrontPage содержат также файлы, обеспечивающие работу с программой FrontPage и позволяющие открывать, копировать, редактировать и изменять веб-узлы, а также управлять ими в программе FrontPage.
Выполнив описанные действия, нетрудно убедиться в том, что создание веб-страницы с помощью программы FrontPage не представляет труда. После запуска приложения можно немедленно приступить к вводу и редактированию документа, а затем сохранить его на жестком диске, как и при работе в текстовом редакторе. Хотя таким образом можно создать веб-узел целиком, это потребует много ручного труда и детальной проработки вопросов организации гиперссылок и исходных файлов, а также обновления содержимого.
При сохранении веб-страниц на веб-узле в программе FrontPage может автоматически выполняться управление гиперссылками и их восстановление, упорядочение файлов и папок, ведение панелей динамических ссылок, проверка орфографии и создание отчетов со сведениями о проблемах, возникших при работе со страницами и файлами.
Создание нового веб-узла
1. В меню Файл выберите команду Закрыть, чтобы закрыть текущую страницу.
2. В меню Файл выберите команду Создать, а затем — пункт Страница или веб-узел. В программе FrontPage будет отображена область задач Создание веб-страницы. В этом окне можно выбрать шаблон или мастер, указать, куда необходимо сохранить веб-узел, а также задать его имя.
3. В группе Создание с помощью шаблона выберите ссылку Шаблоны веб-узлов.
4. Щелкните значок Одностраничный веб-узел и нажмите клавишу TAB. При нажатии клавиши TAB курсор перемещается в поле, в котором указывается имя и расположение нового веб-узла.
5. Измените содержимое поля Укажите расположение нового веб-узла Имя Вашей папки\Championzone и нажмите кнопку ОК.
В программе FrontPage будет создан новый веб-узел Championzone, а в строке заголовка в верхней части окна программы FrontPage будет выведено его имя и расположение.
Поскольку придется работать с несколькими файлами на веб-узле, в программе FrontPage также выводится Список папок, в котором содержатся файлы и папки текущего веб-узла. В открывшемся окне файлы и папки отображаются так же, как и в проводнике Windows. Рекомендации по работе со Списком папок содержатся в лабораторной работе N7.
6. Если Список папок на экране отсутствует, выполните следующие действия.
На стандартной панели инструментов щелкните стрелку справа от кнопки Переключить панель
и выберите элемент Список папок.
7. Щелкните значок Переходы
на панели Представления. Если веб-узел открыт, значки панели Представления позволяют изменять представление сведений на веб-узле. Представление Переходы является графическим представлением структуры веб-узла. Поскольку был создан одностраничный веб-узел, в программе FrontPage эта страница автоматически устанавливается в качестве домашней страницы веб-узла, на что указывает маленький значок с изображением домика
. При работе в представлении Переходы в окне программы выводится также панель инструментов Переходы. Панель инструментов Переходы можно перетащить в любую область экрана.
Рядом с панелью Представления в программе FrontPage выводится Список папок, как в представлении Страница.
Теперь предстоит заменить новую пустую домашнюю страницу созданной ранее страницей. Однако предварительно необходимо создать структуру для других страниц веб-узла магазина Championzone.
При создании структуры веб-узла в представлении Переходы становятся доступными некоторые средства, такие как объявления и панели переходов, автоматически обновляемые при изменении, добавлении или удалении станиц веб-узла. Данная возможность позволяет легко вносить необходимые изменения. Эти средства будут подробно описаны позже.
Создание структуры переходов
1. В представлении Переходы нажмите кнопку Создание новой обычной страницы
на стандартной панели инструментов.
В программе FrontPage будет создана новая страница с названием <Новая страница 1>, расположенная в структуре веб-узла под домашней страницей. Фактически в представлении Переходы выводятся не сами страницы текущего веб-узла, а
соответствующие им рамки. Перед созданием содержимого веб-узла можно попробовать различные варианты структуры и организации веб-узла.
2. Чтобы быстро создать остальные страницы, удерживайте нажатой клавишу CTRL, нажмите клавишу N три раза.
Использование сочетания клавиш CTRL+N эквивалентно выбору команды Создание новой обычной веб-страницы. В программе FrontPage поддерживаются стандартные для системы Windows и приложений Microsoft Office сочетания клавиш, использование которых позволяет ускорить выполнение повторяющихся действий. Вновь созданные страницы отображаются в структуре под домашней страницей, поскольку домашняя страница была выделена при вызове команды.
Примечание. В представлении Переходы выделенная страница окрашена синим цветом, а остальные страницы остаются желтыми.
3. Выделив домашнюю страницу, нажмите клавишу TAB. При нажатии клавиши TAB выделяется следующая страница в структуре, а ее название активизируется для изменения. При этом выделяется также текст с именем страницы, чтобы упростить ввод нового имени.
4. Введите имя О нас и нажмите клавишу TAB. Название <О нас> является названием одной из создаваемых страниц веб-узла магазина Championzone.
5. Повторите те же действия с другими страницами, изменив название страницы Новая страница 2 на Товары, страницы Новая страница 3 на Коллекция фотографий, а страницы Новая страница 4 на Связи.
6. При нажатии клавиши ENTER после изменения названия страницы происходит сохранение нового названия, однако другая страница не выделяется. Чтобы отменить выделение всех страниц, в представлении Переходы щелкните любую область вне страниц.
Экран должен выглядеть так:
Можно быстро открыть страницу в представлении Страница для ее редактирования, дважды щелкнув страницу в представлении Переходы или в Списке папок (страницы не отображаются в списке папок, пока они не сохранены).
Далее предстоит заменить пустую домашнюю страницу, созданную в программе FrontPage при помощи шаблона веб-узла, импортировав домашнюю страницу, созданную ранее и сохраненную в Вашей папке .
Импорт страницы на веб-узел
1. В представлении Переходы дважды щелкните страницу index.htm, чтобы открыть ее в представлении Страница. В программе FrontPage будет открыта пустая домашняя страница, созданная при помощи шаблона веб-узла.
2. В меню Вставка выберите команду Файл. Появится диалоговое окно Выбор файла. В этом окне можно выполнить вставку веб-страниц, текстовых документов и текстовых файлов, а также других документов в текущую веб-страницу.
3. В диалоговом окне Выбор файла найдите Вашу папку , если она еще не отображена.
4. Выберите файл Домашняя страница и нажмите кнопку Открыть. В программе FrontPage выполняется импорт на текущую страницу ранее сохраненной домашней страницы.
5. Чтобы сохранить текущую страницу на веб-узле, нажмите кнопку Сохранить
на стандартной панели инструментов. В программе FrontPage будет отображено диалоговое окно Сохранение внедренных файлов. В этом окне можно просматривать, переименовывать, сохранять и обновлять внедренные файлы, которые будут использованы на текущем веб-узле.
При предыдущем сохранении этой страницы в Вашей папке в программе FrontPage два вставленных рисунка не изменили своего расположения. На домашней странице использовались ссылки на файлы рисунков, а сами файлы не копировались в ту же папку,
в которой сохранена страница. Чтобы обеспечить переносимость веб-узла, необходимо всегда сохранять связанные страницы и файлы как часть использующего их веб-узла.
6. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК. В программе FrontPage будет выполнено сохранение домашней страницы под именем Index.htm, а также сохранение копий внедренных файлов рисунков на текущем веб-узле.
Совет. Для домашних страниц используются зарезервированные имена. В программе FrontPage в качестве имени страницы будет автоматически использовано одно из двух зарезервированных имен, которые рекомендуется изменять только в случае особой необходимости. Если на компьютере установлено локальное программное обеспечении веб-сервера, например Internet Information Services (IIS), то для домашней страницы по умолчанию будет задано имя Default.htm. Если локальный веб-сервер не установлен или страница сохраняется на локальный жесткий диск, а не на веб-узел на веб-сервере, то страница получит имя Index.htm.
Эти имена зарезервированы для домашних страниц, поскольку в веб-обозревателях автоматически выполняется поиск этих имен, если вместо ссылки на определенную страницу посетитель указывает URL-адрес веб-узла.
Создание содержимого веб-узла
Теперь, когда домашняя страница стала частью текущего веб-узла, необходимо создать содержимое остальных страниц веб-узла Championzone.
Редактирование страницы <О нас>
1. Выберите в меню Вид пункт Переходы, чтобы вернуться к представлению Переходы.
Примечания В Списке папок теперь отображаются два файла рисунков, которые вы сохранили на данном веб-узле. Файл Index.htm является новой домашней страницей. Позднее можно будет удалить оставшуюся копию домашней страницы из папки Мои документы.
В Списке папок названия файлов были автоматически образованы из названий страниц, указанных пользователем в представлении Переходы. В этой лабораторной работе названия изменяться не будут.
2. Дважды щелкните страницу О нас, чтобы открыть ее в представлении Страница. Эта страница будет содержать пример описания вымышленной компании для посетителей веб-узла. В настоящей лабораторной работе мы уже подготовили для вас подобный текст, поэтому вы можете просто поместить его на страницу.
3. В меню Вставка выберите команду Файл.
4. В диалоговом окне Выбор файла найдите папку с лабораторными работами, дважды щелкая каждую папку пути, пока искомая папка не появится в поле Папка.
5. Выберите Текстовые файлы (*.txt) в списке Тип файлов для отображения только файлов данного типа. Вы увидите один файл с именем about.
6. Выберите файл about из списка и нажмите кнопку Открыть. Вставляемый текст не был сохранен в HTML-формате, поэтому появится диалоговое окно Преобразование текста для управления импортом файла.
7. В диалоговом окне Преобразование текста выберите Вставить как HTMLи нажмите кнопку OK.
Программа Microsoft FrontPage импортирует файл и поместит его в указанное место на странице О нас.
8. На стандартной панели инструментов нажмите кнопку Сохранить
для сохранения изменений на странице О нас.
9. Закройте Список папок. Далее будет подготовлена страница под названием Товары. Она будет предоставлять посетителям сведения о спортивных товарах, продаваемых в магазине Championzone. На данной странице также будет находиться форма обратной связи для сбора замечаний и предложений посетителей веб-узла Championzone.
Редактирование страницы <Товары>
1. На стандартной панели инструментов нажмите кнопку Переключить панель
и выберите Список папок.
2. Дважды щелкните страницу Товары.htm в Списке папок, чтобы открыть эту страницу в представлении Страница.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. В меню Вставка выберите команду Файл.
5. В диалоговом окне Выбор файла откройте список Тип файлов и выберите Формат RTF (*.rtf) для отображения файлов данного типа в папке исходных файлов веб-узла. Будут показаны подходящие файлы.
6. Дважды щелкните файл productinfo. Так как данный файл содержит форматирование, он будет автоматически конвертирован в HTML-формат и помещен на страницу.
7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Дизайн страницы
Страница О нас унаследует свое форматирование от графической темы, которую вы примените к веб-узлу Championzone далее в лабораторной работе N7. Однако дизайн страницы Товары потребует больше усилий.
Чтобы читатель мог легко различить заголовки абзацев, списки товаров, а также остальные сведения, представленные на странице, необходимо поместить на страницу рисунки, отформатировать абзацы и создать маркированные списки.
Создание маркированного списка
1. На странице Товары в представлении Страница найдите слова <спортивная сумка>. Если список не виден полностью, используйте полосы прокрутки для его просмотра. Список начинается со слов <спортивная сумка> и заканчивается словами <сетка для ворот>.
2. Щелкните текст слева от буквы <с> в слове <спортивная>, затем, удерживая нажатой клавишу SHIFT, щелкните текст сразу после слова <ворот> и отпустите клавишу SHIFT. Список будет выделен целиком.
3. На панели инструментов Форматирование нажмите кнопку Маркеры
. Произойдет преобразование выделенного текста в маркированный список.
4. Щелкните страницу в любом месте, чтобы отменить выделение списка.
Страница должна выглядеть следующим образом:
С помощью программы Microsoft FrontPage можно также создавать нумерованные списки. При добавлении новых элементов в нумерованный список они автоматически последовательно нумеруются. Вы можете добавлять элементы в нумерованные и маркированные списки, нажимая клавишу ENTER после последнего элемента. Для завершения списка нажмите клавишу ENTER дважды после ввода последнего элемента.
Далее на текущую страницу будут помещены четыре рисунка и затем с помощью средств позиционирования выровнены с абзацами, к которым они относятся. Это позволит придать странице более привлекательный вид.
Позиционирование рисунков в тексте
1. На странице Товары в представлении Страница поместите курсор после слов <Новинки недели>.
2. Нажмите кнопку Добавить рисунок из файла
на стандартной панели инструментов. Когда рисунок был вставлен в прошлый раз, данный веб-узел не был открыт, поэтому программа Microsoft FrontPage автоматически открывала диалоговое окно Выбор файла. Но сейчас, при открытом веб-узле, предполагается, что вы намереваетесь работать с рисунками, которые уже являются частью этого веб-узла, поэтому появляется диалоговое окно Рисунок.
3. Так как необходимые рисунки на текущую страницу еще не добавлены, щелкните раскрывающийся список Папка и найдите папку с лабораторными работами.
4. Выберите файл FPTutor001 и нажмите кнопку Вставить. Изображение футболистов будет вставлено сразу после слов <Новинки недели>.
5. Далее щелкните изображение футбольного мяча, чтобы выделить его.
6. В меню Формат выберите пункт Положение. Появится диалоговое окно Положение.
7. В группе Обтекание выберите вариант справа и нажмите кнопку ОК. Рисунок будет выровнен по правой границе текущей страницы, а маркированный список переместится влево от него.
8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
9. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.
Страница должна выглядеть следующим образом:
Рисунки можно вставлять один за другим или сразу импортировать все необходимые рисунки. Вставка одиночных файлов производится в представлении Страница, а вставка группы файлов — в представлении Папки.
Добавление группы файлов к текущему веб-узлу
1. Щелкните значок Папки
на панели Представления, чтобы переключиться в представление Папки. Представление Папки является расширением списка папок, доступного в представлениях Переходы и Страница. Здесь, как и в проводнике, доступны подробные сведения о файлах и папках вашего веб-узла, а также допускается добавление, удаление, перемещение, копирование и переименование файлов.
2. В меню Файл выберите команду Импорт. Появится диалоговое окно Импорт. В этом окне можно добавлять файлы и папки, находящиеся на локальном компьютере, в локальной сети, на файл-сервере или в Интернете, например на FTP-сервере.
3. В диалоговом окне Импорт нажмите кнопку Добавить файл.
4. В диалоговом окне Добавление файла в список для импорта перейдите к папке с лабораторными работами.
5. Далее щелкните список Тип файлов и выберите тип GIF и JPEG (*.gif, *.jpg) для отображения всех файлов данного типа в папке исходных файлов веб-узла.
6. Выберите файл czbanner.
7. Удерживая нажатой клавишу CTRL, выберите файлы FPTutor002, FPTutor003, FPTutor004, FPTutor005, и FPTutor006.
8. После отбора файлов в диалоговом окне Добавление файла в список для импорта отпустите клавишу CTRL и нажмите кнопку Открыть. Выбранные рисунки будут автоматически добавлены в список в диалоговом окне Импорт.
9. Нажмите кнопку ОК для импорта перечисленных файлов в текущий веб-узел.
Теперь, когда все рисунки добавлены, необходимо завершить компоновку страницы Товары.
Завершение компоновки страницы
1. Щелкните значок Страница на панели Представления, чтобы переключиться в представление Страница.
2. Если открыт Список папок, закройте его, чтобы видеть большую часть страницы, с которой вы работаете.
Чтобы закрыть Список папок, выполните следующие действия.
1. На стандартной панели инструментов нажмите кнопку Переключить панель
и выберите вариант Список папок.
2. На странице Товары поместите курсор после предложения <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> и нажмите кнопку Добавить рисунок из файла на панели инструментов.
3. В диалоговом окне Рисунок по-прежнему доступны импортированные ранее рисунки — выберите файл FPTutor002 из списка. Допускается также вставка картинок или, при наличии сканера или цифровой камеры, изображений с этих устройств.
4. Чтобы вставить рисунок, нажмите кнопку ОК.
5. Щелкните только что вставленный рисунок и нажмите кнопку По правому краю
на панели инструментов, чтобы расположить рисунок по правой границе и добиться его обтекания текстом.
Страница должна выглядеть так:
Расположение рисунков и других элементов страницы вокруг текста делает ее более привлекательной наподобие страницы журнала или газеты. Расположение рисунков вдоль границ позволит сохранить компоновку страницы при различных разрешениях экрана и размерах окна обозревателя.
Для завершения страницы Товары будет создана форма обратной связи для общения с посетителями веб-узла. Форма обратной связи позволит собирать замечания и мнения посетителей веб-узла.
Создание формы обратной связи
1. В представлении Страница нажмите клавиши CTRL+END для быстрого перехода в нижнюю часть текущей страницы или используйте для этого полосу прокрутки.
2. В новой пустой строке введите фразу Нам нужен ваш отклик! и нажмите клавишу ENTER.
3. В меню Вставка выберите пункт Форма, а затем — пункт Поле. На страницу будет автоматически вставлена новая форма с текстовым полем. Штриховая линия будет обозначать границы формы. По умолчанию новая форма содержит также кнопки Отправить и Сброс.
Далее следует настроить форму, добавив другие поля и их заголовки, чтобы посетители понимали, какие сведения хотят от них получить.
Настройка формы
1. Нажмите кнопку Отправить, а затем — кнопку По центру
на панели инструментов.
2. Нажмите клавишу <Стрелка влево>, чтобы поместить курсор перед кнопкой Отправить и нажмите клавишу ENTER. Нажатие клавиши ENTER добавляет новую строку к форме.
3. Щелкните поле и нажмите клавишу <Стрелка влево>, чтобы поместить курсор в начало формы.
4. В первой строке введите фразу Ваше имя: и нажмите клавиши SHIFT+ENTER. Нажатие клавиши ENTER при удерживаемой клавише SHIFT вводит разрыв строки. Разрывы строк удобны для размещения строк текста с интервалом меньше стандартного интервала между абзацами.
5. Поместите курсор после поля и нажмите клавишу ENTER.
6. На следующей строке наберите фразу Ваш адрес электронной почты: и нажмите клавиши SHIFT+ENTER.
7. В меню Вставка выберите пункт Форма, еще раз выберите Поле и нажмите клавишу ENTER.
8. В следующей строке введите фразу Ваши комментарии: и нажмите клавиши SHIFT+ENTER.
9. В меню Вставка выберите пункт Форма, а затем — пункт Текстовое поле. В форму будет автоматически помещено текстовое поле с полосой прокрутки.
10. Дважды щелкните только что вставленное текстовое поле. Появится диалоговое окно Свойства текстового поля. В нем можно изменить внешний вид текстового поля.
11. В диалоговом окне Свойства текстового поля измените параметры Ширина в знаках и Число строк, задав для них значения 30 и 5 соответственно, а затем нажмите кнопку ОК. Текстовое поле увеличится в размерах, чтобы побудить посетителей веб-узла к написанию более подробных комментариев. По завершении создания формы и страницы Товары необходимо сохранить результаты
работы. Примечание. Проверка формы до публикации веб-узла на сервере невозможна.
12. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Страница должна выглядеть так:
Создание формы и страницы Товары завершено. Теперь добавим еще две страницы: интерактивную коллекцию фотографий и список ссылок на несколько веб-узлов в Интернете.
Создание коллекции фотографий
В Интернете используется графический интерфейс, поэтому неудивительно, что множество веб-узлов содержит фотографии и другие типы изображений. Сканеры и цифровые камеры стали более доступными, и многие фотомастерские предлагают изображения на компакт-дисках, которыми можно обмениваться в интерактивном режиме.
Как было показано выше, размещение рисунков на веб-страницах с помощью программы FrontPage не представляет труда. Эта часть лабораторной работы посвящена созданию интерактивной коллекции фотографий.
Коллекция фотографий — это веб-страница, содержащая определенным образом упорядоченные изображения. Для веб-узла Championzone будет создана коллекция спортивных фотографий.
Программа Microsoft FrontPage 2002 предоставляет пользователям несколько вариантов компоновки изображений. В этой лабораторной работе используется горизонтальная компоновка.
Редактирование страницы коллекции фотографий
1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель
и выберите вариант Список папок.
2. В Списке папок дважды щелкните файл photo_gallery.htm, чтобы открыть данную страницу.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. После появления в представлении Страница чистой страницы введите в первой строке фразу Спортивные фотографии и нажмите клавишу ENTER.
5. В следующей строке введите фразу Познакомьтесь с нашей коллекцией спортивных фотографий.
6. Дважды нажмите клавишу ENTER, чтобы освободить место.
7. В меню Вставка выберите пункт Веб-компонент.
8. На левой панели выберите Коллекция фотографий.
9. На правой панели выберите первый вариант компоновки (горизонтальная компоновка) и нажмите кнопку Готово.
10. Автоматически откроется диалоговое окно Свойства коллекции фотографий.
11. Нажмите кнопку Добавить и выберите Рисунки из файлов.
12. Выберите файл FPTutor003 и, удерживая нажатой клавишу SHIFT, выберите файл FPTutor006. Будут выбраны файлы FPTutor003, FPTutor004, FPTutor005 и FPTutor006.
13. Нажмите кнопку Открыть, а затем кнопку ОК.
14. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.
15. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.
Страница должна выглядеть так:
Создание ссылок на другие веб-узлы
Теперь осталось отредактировать только страницу Ссылки. Страница Ссылки будет содержать список текстовых гиперссылок на некоторые популярные спортивные страницы в Интернете.
При создании собственного веб-узла можно создать гиперссылки на другие аналогичные веб-узлы. Такие ссылки позволят посетителям просматривать похожие по тематике веб-узлы, не прибегая к средствам поиска.
Начало создания страницы <Ссылки>
1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель
и выберите вариант Список папок.
2. Дважды щелкните файл links.htm в Списке папок, чтобы открыть страницу в представлении Страница.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. После появления в представлении Страница чистой страницы введите фразу Ссылки на спортивные веб-узлы и нажмите клавишу ENTER.
Далее будет создана несложная анимация в заголовке абзаца. Программа Microsoft FrontPage содержит коллекцию забавных эффектов, которые можно применять к тексту заголовков или целым абзацам.
Создание динамического текстового эффекта
1. Щелкните любой фрагмент фразы Ссылки на спортивные веб-узлы на странице Ссылки.
2. В меню Формат выберите пункт Эффекты DHTML. Появится панель инструментов Эффекты DHTML. С ее помощью необходимо выполнить ряд последовательных операций, результатом которых будет несложный динамический HTML-сценарий (DHTML-сценарий) анимации, действующий на текст при его появлении в окне обозревателя. Динамический формат HTML является расширением языка HTML, позволяющим создавать эффекты представления текста и других объектов наподобие показа слайдов Microsoft PowerPoint. С помощью панели инструментов Эффекты DHTML нетрудно добавить простые эффекты к страницам, не прибегая к программированию.
3. В списке Вкл выберите Загрузка страницы. Это заставит веб-обозреватель включать эффект при загрузке страницы.
4. В списке Применить выберите Скачок. В программе Microsoft FrontPage применяется эффект <Скачок>. В веб-обозревателе данный эффект заставит слова <прыгать> по странице.
5. Нажмите кнопку Закрыть в верхнем правом углу панели инструментов Эффекты DHTML. Панель Эффекты DHTML будет закрыта, а эффект будет выделен на странице светло-синим цветом.
Советы
Если установлен обозреватель Microsoft Internet Explorer, можно просмотреть, как будет выглядеть данный эффект в веб-обозревателе, нажав на кнопку Просмотр в представлении Страница. Нажмите кнопку Обычный для возврата в представление Страница.
Для изменения эффекта в режиме Обычный следует выделить текст, содержащий эффект, выбрать пункт Эффекты DHTML в меню Формат и применить новый желаемый эффект.
Далее будут добавлены гиперссылки на другие веб-узлы в Интернете. Программа Microsoft FrontPage позволяет создавать текстовые гиперссылки различными способами, которые описаны ниже. При создании собственного веб-узла можно воспользоваться любым подходящим способом.
Создание текстовых гиперссылок
1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу MSN Sports и нажмите клавишу ENTER.
2. Выделите с помощью мыши введенные слова.
3. В меню Вставка выберите команду Гиперссылка. Появится диалоговое окно Добавление гиперссылки. В нем следует указать конечный адрес создаваемой гиперссылки. Это может быть файл, находящийся на вашем веб-узле, локальном компьютере, веб-сервере или на любом другом веб-узле Интернета.
4. В поле Адрес введите адрес www.msnbc.com/msn>/msnsports_front.asp и нажмите кнопку ОК. Префикс HTTP будет вставлен автоматически.
5. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова изменят цвет с черного на синий, и под ними появится подчеркивание, указывающее на наличие гиперссылки. При отображении данной страницы в веб-обозревателе выбор этой ссылки вызовет загрузку домашней страницы MSN.
Перед созданием следующей гиперссылки необходимо вставить на данную страницу специальный символ, обозначающий товарный знак.
Вставка специальных знаков или символов
1. Щелкните страницу сразу после букв MSN в созданной ссылке.
2. В меню Вставка выберите пункт Символ. Появится диалоговое окно Символ. Это окно позволяет выбирать и вставлять специальные знаки в месте вставки. Пока это диалоговое окно отображается на экране, можно вставить несколько символов.
3. В диалоговом окне Символ выберите символ, нажмите кнопку Вставить, а затем — кнопку Закрыть. После букв MSN будет автоматически вставлен указанный символ. Команда Символ может использоваться для вставки знаков, которые невозможно ввести непосредственно с клавиатуры.
Далее будет создана автоматическая гиперссылка. Данный метод создания гиперссылок быстрый и простой, так как позволяет обойтись без диалогового окна Добавление гиперссылки.
Создание автоматической гиперссылки
1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу www.sports.yahoo.com и нажмите клавишу ENTER. Сразу же после нажатия клавиши ENTER введенный адрес URL станет синим с подчеркиванием, указывающим на наличие гиперссылки. Как и остальные программы пакета Microsoft Office, программа Microsoft FrontPage поддерживает автоматическое создание гиперссылок. Но, так как сами адреса URL не содержат никаких описаний, при необходимости их можно заменить названиями веб-узлов, на которые они указывают. Просто перепишите текст, не удаляя гиперссылку.
Примечание. Yahoo! является популярной поисковой службой Интернета, обеспечивающей поиск сведений по ключевым словам и тематическим рубрикаторам. Данный адрес URL указывает на спортивную страницу Yahoo.
2. Используя мышь, выделите введенный адрес URL.
3. После выделения адреса http://sports.yahoo.com/ введите текст Yahoo! для замещения выделенного текста.
Гиперссылка указывает на тот же адрес URL, но теперь она названа по имени веб-узла.
Далее будет создана гиперссылка с помощью используемого веб-обозревателя. Данный метод создания гиперссылок является наиболее точным, так как нужная страница посещается перед созданием гиперссылки на нее. Кроме того, программа Microsoft FrontPage копирует адрес URL из поля адреса веб-обозревателя, поэтому проверенный адрес не придется вводить заново.
Создание проверенной гиперссылки
1. Нажмите клавишу <Стрелка вниз> для перемещения курсора на новую строку ниже предыдущей гиперссылки.
2. Введите фразу Национальная Баскетбольная Ассоциация и нажмите клавишу ENTER.
3. Выделите введенную фразу с помощью мыши.
4. На панели инструментов нажмите кнопку Добавление гиперссылки
. Появится диалоговое окно Добавление гиперссылки.
5. В диалоговом окне Добавление гиперссылки нажмите кнопку Интернет
. Программа Microsoft FrontPage запустит ваш веб-обозреватель. После посещения нужной страницы и возврата в программу Microsoft FrontPage поле адреса URL будет содержать адрес этой страницы.
6. В поле Адрес веб-обозревателя введите фразу http://www.nba.com/ и нажмите клавишу ENTER. В окне обозревателя появится домашняя страница Национальной Баскетбольной Ассоциации (НБА), где можно больше узнать о НБА, командах, игроках, посмотреть расписание игр и т. д.
7. Нажмите клавиши ALT+TAB, чтобы вернуться в диалоговое окно Добавление гиперссылки. Адрес URL домашней страницы программы Microsoft FrontPage появится в поле Адрес диалогового окна Добавление гиперссылки.
8. Нажмите кнопку OK.
9. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова <Национальная Баскетбольная Ассоциация> будут подчеркнуты, что указывает на наличие гиперссылки.
10. Для сохранения изменений на странице Ссылки нажмите кнопку Сохранить на панели инструментов.
Страница должна выглядеть так:
Форматирование заголовков абзацев
После успешного заполнения содержимым всех страниц создаваемого веб-узла необходимо отформатировать абзацы и задать шрифты, чтобы все заголовки абзацев на всех страницах выглядели одинаково.
Применение стилей абзацев к заголовкам
1. Выберите файл index.htm на вкладке страниц. На экране появится домашняя страница. Когда в области Обычный открыто сразу несколько страниц, вкладки страниц позволяют переключаться между ними.
Примечание. Если вы закрыли страницу на предыдущем шаге, в меню Файл выберите команду Открыть, а затем в диалоговом окне Открытие файла выберите файл index.htm.
2. Щелкните заголовок Добро пожаловать в Championzone.
3. Щелкните список Стиль на панели инструментов <Форматирование> и измените стиль Обычный на Заголовок 3.
4. Стиль <Заголовок 3> будет применен к текущей строке текста. Размер текста не изменится, однако шрифт станет полужирным.
5. Стили заголовков в списке Стиль базируются на стандартах языка HTML. Заголовок первого уровня является наибольшим по размеру для веб-страниц, а заголовок шестого уровня — наименьшим.
Примечание. Список Стиль может содержать также стили из каскадных таблиц (CSS), однако нами они не рассматриваются.
6. На панели инструментов нажмите кнопку Сохранить для сохранения изменений домашней страницы.
7. Выберите файл About_Us.htm на вкладке Страница. На экране вновь появится страница О нас.
8. Щелкните заголовок О нас вверху страницы.
9. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
10. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице О нас.
Повторное форматирование абзацев с помощью формата по образцу
Программа Microsoft FrontPage предоставляет удобный способ копирования стилей форматирования выделенного фрагмента текста на другой фрагмент нажатием одной кнопки. Этот прием можно освоить на примере страницы Товары.
1. Выберите файл Products.htm на вкладке Страница. На экране появится страница Товары.
2. Щелкните строку <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> вверху страницы.
3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
4. После применения стиля щелкните предложение в любом месте и нажмите кнопку Формат по образцу
на панели инструментов Форматирование.
5. Прокрутите страницу вниз до фразы Нам нужен ваш отклик.
6. Используя Формат по образцу
, выделите с помощью мыши фразу Нам нужен ваш отклик. Форматирование предыдущего заголовка будет автоматически скопировано и применено к текущему заголовку. Инструмент <Формат по образцу> удобен при одновременном копировании нескольких вариантов форматирования с одного фрагмента текста на другой.
7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Совет. Повторное форматирование может применяться к нескольким выделенным фрагментам текста. Для этого следует выделить текст с нужным форматированием и дважды нажать кнопку Формат по образцу. Выделите различные фрагменты текста, на которые будет копироваться форматирование, а по завершении копирования снова нажмите кнопку Формат по образцу. Далее следует завершить форматирование заголовков на двух оставшихся страницах.
Завершение применения стилей абзацев к заголовкам
1. Выберите файл photo_gallery.htm на вкладке Страница. На экране появится страница Коллекция фотографий.
2. Щелкните заголовок Спортивные фотографии вверху страницы.
3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
4. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.
5. В меню Окно выберите файл links.htm.
6. Щелкните фразу Ссылки на спортивные веб-узлы.
7. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Ссылки.
Завершение работы с программой Microsoft FrontPage
В меню Файл выберите команду Выход.
Программа Microsoft FrontPage завершит свою работу.
1. С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testjs.html и поместите в начало страницы следующий код:
2. <html>
3. <head>
4. <title>Script test</title>
5. </head>
6. <body>
7. <script language="JavaScript">
8.
9. document.write("Добро пожаловать на мою страницу!<br>");
10. document.write("Это JavaScript!<br>");
11.
12. document.write("Добро пожаловать на мою страницу!<br>");
13. document.write("Это JavaScript!<br>");
14.
15. document.write("Добро пожаловать на мою страницу!<br>");
16. document.write("Это JavaScript!<br>");
17.
18. </script>
19. </body>
20. </html>
21. Сохраните страницу и просмотрите ее с помощью браузера.
22. Такой скрипт выведет на экран следующий текст:
23. Добро пожаловать на мою страницу!
24. Это JavaScript!
три раза. Наверняка вы заметили, что для получения необходимого результата определенная часть его кода была повторена три раза. Это неэффективно, поэтому попробуем оптимизировать код.
25. Определите функцию welcome_func(), которая будет выводить на экран строки:
26. Добро пожаловать на мою страницу!
27. Это JavaScript!
28. Затем вызовите функцию несколько раз. Для этого вы можете использовать цикл:
29.
30. for(i=0; i<3; i++){
31. welcome_func();
32. }
33.
34. Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим пример. Создайте страницу testjs2.html, введите следующий код:
35. <html>
36. <head>
37.
38. <script language="JavaScript">
39.
40. function calculation() {
41. var x = 12;
42. var y = 5;
43.
44. var result = x + y;
45.
46. window.status = result;
47. }
48.
49. </script>
50.
51. </head>
52. <body>
53.
54. <form>
55. <input type="edit" onFocus="calculation()">
56. </form>
57.
58. </body>
59. </html>
60. В приведенном примере интрес представляют следующие нововведения:
var x = 12; — так в JavaScript объявляются переменные, тип переменной не дифференцируется — одинаково объявляются переменные типа double, integer, String и прочие; window.status = result; — свойству window.status присваивается новое значение, в нашем случае это строка 17, эта строка будет отображена в статус-панели браузера. onFocus — это команда, которая вызывает действие, когда пользователь "фокусируется" на элементе страницы, в нашем случае — помещает курсор в текстовое поле.
61. Сохраните файл.
62. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
63. Вы должны увидеть Web-страницу с определенным в ее верхней части окном редактирования, установка курсора в этом окне приведет к появлению строки 17 в статус-панели браузера.
64. На этой же странице создайте функцию, которая будет вызываться при потере фокуса полем редактирования и помещать в статус-панель результат, полученный от разности чисел x и y. Обработчику события "потеря фокуса" в JavaScript соответствует параметр onBlur.
65. Продемонстрируйте полученный документ преподавателю.
Манипуляция объектами.
1. Сохраните на жестком диске своего компьютера файлы aircraft1.jpg и aircraft2.jpg.
2. Создайте с помошью текстового редактора "Блокнот" (Notepad) файл testjs3.html и поместите в начало страницы следующий код:
3. <IMG NAME="aircraft" SRC="aircraft1.jpg">
В своем скрипте вы можете назначать этому объекту новое изображение:
document.images["aircraft"].src='new_image.jpg'
Обратите внимание, что к интересующему нас объекту Image в массиве images мы обращаемся не по порядковому номеру, а по имени элемента images["aircraft"]. Более того, если имя объекта на странице оригинально, мы можем обратиться к нему напрямую, минуя упоминание массива:
document.aircraft.src='new_image.jpg'
4. Попробуем заменить изображение динамически, используя JavaScript. Модифицируйте свою страницу. Исходный текст должен выглядеть так:
5. <IMG NAME="aircraft" SRC="aircraft1.jpg">
6. <script language="JavaScript">
7. document.aircraft.src='aircraft2.jpg';
8. </script>
9. Попробуйте просмотреть страницу в браузере — сразу же после загрузки документа картинка aircraft1.jpg должна замениться на aircraft2.jpg.
10. Эффект происходит очень быстро и заметить его сложно. Модифицируем страницу таким образом, чтобы рисунки замещались при наведении курсора мыши на рисунок:
11. <IMG NAME="aircraft" SRC="aircraft1.jpg" onMouseOver="onOver();">
12.
13. <script language="JavaScript">
14. function onOver(){
15. document.images["aircraft"].src='aircraft2.jpg';
16. }
17. </script>
18. Попробуйте просмотреть страницу в браузере — картинка aircraft1.jpg заменяется на aircraft2.jpg при наведении указателя мыши на изображение.
19. Добавьте обработчик события onMouseOut — удаление указателя мыши с поверхности изображения. Пусть по этому событию активным становится рисунок aircraft1.jpg.
20. Скачайте и сохраните на своей машине файл aircraft3.jpg.
21. Добавьте обработчик события onMouseDown — нажатие мыши. Пусть при клике на изображении активным рисунком становится aircraft3.jpg
22. Сохраните файл.
Управление объектами формы.
1. Форма (form) — это контейнер html-страницы, в котором могут быть размещены элементы, позволяющие пользователю вводить данные для отправки на сервер. К таким элементам можно отнести тектстовые поля, списки, кнопки выбора и т.п.
2. С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testform.html и поместите на странице следующий код:
3. <head>
4. <title>Управление объектами формы</title>
5. </head>
6. <body bgcolor=#ffffff>
7.
8. <img src="aircraft1.jpg" name="pic1">
9.
10. <p>
11.
12. <form name="myForm">
13. Ваше имя:
14. <br>
15. <input type="text" name="name" value=""><br>
16. e-mail:
17. <br>
18. <input type="text" name="email" value=""><br><br>
19. <br>
20. <input type="button" value="Нажмите!" name="myButton">
21. </form>
22.
23. <p>
24. <img src="aircraft2.jpg" name="pic2">
25.
26. <p>
27. <a href="http://www.tpu.ru/">Томский Политехнический Университет</a>
28.
29. </body>
30. </html>
31. Вот так должна выглядеть Ваша страница:
32. На странице размещено два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. Как уже отмечалось выше, с точки зрения языка JavaScript, загруженная в настоящий момент html-страница, представляет собой объект document. Через этот объект можно получить доступ ко всем элементам, размещенным на странице. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей, приведенной в примере:
33. Создадим скрипт, который позволит заполнять текстовые поля формы предопределенными значениями.
34. В разделе <head> ... </head> разместите следующий код:
35. <script>
36. function fillIn(){
37. document.forms[0].elements[0].value = "Евгений";
38. document.forms[0].elements[1].value = "vest@list.ru";
39. }
40. </script>
41. Привяжите запуск функции к событию onClick кнопки "Нажмите!".
42. Сохраните страницу и просмотрите ее в окне браузера. При правильно работе скрипта по нажатию кнопки "Нажмите!" текстовые поля должны заполняться значениями.
43. Так как все элементы на странице имеют свои уникальные имена (обратите внимание на параметр name в каждом элементе), в скрипте их можно вызывать не по индексам, а по именам в соответствующих массивах:
44. <script>
45. function fillIn(){
46. document.forms['myForm'].elements['name'].value = "Евгений";
47. document.forms['myForm'].elements['email'].value = "vest@list.ru";
48. }
49. </script>
или даже так:
<script>
function fillIn(){
document.myForm.name.value = "Евгений";
document.myForm.email.value = "vest@list.ru";
}
</script>
50. Продемонстрируйте полученный документ преподавателю.
1. Установите Денвер (скопируйте пакет установки из папки задания на практику)
2. Чтобы начать использовать Денвер, проделайте следующие действия:
1. Запустите Денвер, воспользовавшись ярлыком Start Denwer на Рабочем столе. Если вы не создавали ярлыки, то можно запустить Денвер по команде C:\WebServers/denwer\Run.exe.
2. Откройте браузер и перейдите по адресу http://localhost.
3. Вы должны увидеть главную страницу Денвера.
4. Примечание: если вы используете Skype, убедитесь, что он не занимает порты 80 и 443, необходимые для работы Денвера (Инструменты - Настройки - Соединение - Использовать порты... должно быть отключено). Либо же просто завершите работу Skype.
5. Внимание! Если после запуска Денвера http://localhost не открывается, проверьте, не блокируется ли Денвер вашим антивирусом или фаерволом. Например, были замечены проблемы с NOD32 в Windows XP (в нем нужно добавить процесс G:/usr/local/apache/bin/httpd.exe в список исключений, это можно сделать в окне IMON/Настройка/Разное/Исключение).
PHP (официальное название "PHP: Hypertext Preprocessor") — язык скриптования на стороне сервера, встраиваемый в HTML-документ.
Для того, чтобы понять, что это означает, разберем пример простого скрипта:
<html>
<head>
<title>Пример</title>
</head>
<body>
<?php
echo "Привет, это PHP-скрипт!";
?>
</body>
</html>
Создайте данную HTML-страницу и посмотрите как она работает.
Обратите внимание, не программный код выводит на экран теги html-документа, сам гипертекстовый документ содержит небольшой встроенный программный код. Иными словами, вебмастер по-прежнему может создавать гипертекстовые страницы с помошью привычного ему редактора, а затем, при необходимости, встраивать элементы динамической обработки — небольшие скрипты. В рассмотренном примере вся программа состоит из одной строки:
echo "Привет, это PHP-скрипт!";
Сервер "узнает" о том, что это исполняемая программа по специальным тегам:
<? ... ?>
Отличие языка PHP от языков клиентского программирования (таких, как JavaScript), состоит в том, что программный код исполняется на стороне сервера, т.е. еще до того, как страницу получит браузер пользователя.
Все страницы, содержащие программный код, должны иметь расширение .phtml или .php, однако, если вы имеете доступ к админимстрированию сервера, вы можете настроить препроцессор PHP таким образом, чтобы на содержание скрипта проверялись все страницы, включая .html.
Ход работы:
Вывод на экран и переменные в РНР.
1. С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp1.phtml и поместите в начало страницы следующий код:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
<?php
echo "Привет, мир!";
?>
</head>
<body>
</body>
</html>
2. Попробуем ввести в скрипт переменные каждого из перечисленных типов:
<html>
<head>
<title>Вывод на экран и переменные в PHP</title>
</head>
<body>
<?php
$i = 6; // целое
$d = 4.89; // дробное
$str = "PHP для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир! ".$str;
?>
</body>
</html>
3. Обратите внимание, что все переменные в PHP должны начинаться с символа dollar ($), тип переменной не задается в явном виде, он вычисляется препроцессором PHP в зависимости от контекста. В результате работы скрипта на экран первой строкой будет выведена сумма значений двух переменных $i и $d и результат конкатенации двух строк"<br>Привет, мир!" и значения переменной $str.
4. Поддерживаются все арифметические операции и функции, многоуровневые скобки, логические операции, операции увеличения или уменьшения на единицу и многое другое. Кроме того, очень просто и
естественно организуется сравнение если — то — иначе. Для этого в РНР применяется конструкция:
if (условие)
{
код для выполнения N1;
}
else
{
код для выполнения N2;
}
Рассмотрим несложный пример:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$i = 6; // целое
$v = 7;
$d = 4.89; // дробное
$str = "РНР для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир!".$str;
if($i == $v)
{
echo $i + $v;
}
else
{
echo $i.$v;
}
?>
</body>
</html>
5. При сравнении на истину применяется два знака равенства для того, чтобы интерпретатор мог без труда отличить сравнение от присваивания. Результат работы скрипта — 67, т.к $i не равно $v, а команда echo $i.$v; объединяет две строки: "6" и "7". Неравенство (ложь) обозначается символами !=, допустимы все остальные арифметические и логические символы и операторы (например, or, and, >, <= и т.д.).
6. В РНР есть средства быстрого изменения переменной на единицу в сторону увеличения или уменьшения. Для этого нужно указать имя переменной и за ней, без знака равенства, — подряд два плюса или минуса соответственно. Например, $a++; — переменная $a будет увеличена на единицу. Поддерживается одновременное присваивание одного значения нескольким переменным — $a = $b = 4;. Введите на странице testphp1.phtml следующий код:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$b = $a = 5;
echo "<br>переменная a=$a, b=$b";
$c = $a++;
echo "<br>переменная a=$a, c=$c";
$e = $d = ++$b;
echo "<br>переменная e=$e, d=$d, b=$b";
$g = 10;
$h = $g += 10;
echo "<br>переменная g=$g, h=$h";
?>
</body>
</html>
7. Обратите внимание, что операция присваивания тоже дает свой результат, так операция $a = 5 дала результат 5, именно поэтому переменная b была проинициализирована в 5. В операции $c = $a++; сначала было произведено присваивание, а затем переменная $a была увеличена на 1. В операции $d = ++$b; сначала была увеличена на 1 переменная $b, а уже затем присвоено получившееся значение.
Передача параметров по ссылке, передача параметров из формы (GET и POST -- запросы).
1. С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp2.phtml и поместите в начало страницы следующий код:
<html>
<head>
<title>Вывод на экран входящих параметров</title>
</head>
<body>
<?php
echo $message.", ".$name;
?>
</body>
</html>
2. Обратите внимание, что переменные message и name передаются в
адресной строке, отделяются от адреса страницы знаком ?, между собой
разделены амперсантом (&). Вы можете изменить значения переменных
прямо в адресной строке, нажать Enter и получить другой результат
работы скрипта.
3. Создайте страницу testphp2_form.html. Задайте на ней форму:
<form name="myform" method="get" action="testphp2.phtml">
<br>Сообщение:<br>
<input type="text" name="message">
<br>Имя:<br>
<input type="text" name="name">
<br><input type="submit" value="Обработать данные">
</form>
4. Проверьте работоспособность скрипта.
5. Обратите внимание, что на странице с формой элементам назначены
имена, соответствующие именам переменных в принимающем скрипте.
6. Попробуйте изменить метод GET на метод POST, теперь значения
переменных не должны передаваться в открытом виде.
7. Вместо элемента <input type="text" name="name"> определите на странице
выпадающее меню, такое, как приведено ниже:
Василий
8. Измените работу скрипта таким образом, чтобы пользователь мог выбрать
имя из списка, ввести приветствие, нажать кнопку "Обработать
данные" и получить приветствие для выбранного имени.
9. Измените страницу с формой так, чтобы пользователь мог выбрать приветствие, нажав кнопку зависимой фиксации (radiobutton):
Привет
Здравствуйте
Рад Вас снова видеть
Добрый день
10. Измените страницу с формой так, чтобы пользователь мог выбрать фон страницы (средство выбора — на Ваше усмотрение).
Динамическое формирование страницы.
1. Создайте 3 файла с именами: testphp3_inc1.html, testphp3_inc2.html и testphp3_inc3.html. Поместите небольшой текст в каждый.
2. Создайте файл testphp3.phtml, поместите в него следующий код:
<html>
<head>
<title>Динамическое формирование страниц</title>
</head>
<body bgcolor=silver>
<?php
$file = "";
if ($link == 1) { $file = "testphp3_inc1.html"; }
if ($link == 2) { $file = "testphp3_inc2.html"; }
if ($link == 3) { $file = "testphp3_inc3.html"; }
if ($file == "") { ?>
<h3>Пожалуйста, выберите cтихотворение:</h3>
<a href="testphp3.phtml?link=1"> текст N1</a><br>
<a href="testphp3.phtml?link=2"> текст N2</a><br>
<a href="testphp3.phtml?link=3"> текст N3</a>
<? } else {
include($file);
}
?>
</body>
</html>
3. Сохраните созданные файлы, затем запустите файл testphp3.phtml.
4. При выборе ссылки скрипту передается в качестве параметра идентификатор страницы, содержание которой должно быть включено в результирующий файл.
5. Измените скрипт таким образом, чтобы тексты включались в таблицу с желтым фоном; ссылка на страницу, которая импортирована в файл в настоящий момент, была неактивна.
6. Cоздайте массив $titles, который будет содержать названия текстов. Из этого массива должно формироваться содержимое тега <title>...</title> в зависимости от импортируемой страницы.
7. Внизу страницы поместите ссылки Предыдущее, К оглавлению и Следующее. Ссылка Предыдущее должна вести к предыдущему (по порядковому номеру) стихотворению, ссылка Следующее должна вести к следующему (по порядковому номеру) стихотворению. Ссылки должны исчезать со страницы, если предыдущие/следующие стихотворения исчерпаны. Ссылка К оглавлению должна приводить страницу в первоначальный вид и исчезать на странице оглавления.
8. Перенесите файлы testphp3_inc1.html, testphp3_inc2.html и testphp3_inc3.html в папку includes и внесите соответствующие изменения в скрипт.
Работа с файлами.
1. Создайте файл testphp4_form.html, поместите в него форму, которая будет содержать текстовое поле <textarea name=message cols=10 rows=4></textarea>, поле редактирования <input type=text name=person> и кнопку для отправки данных.
2. Настройте форму таким образом, чтобы данные направлялись скрипту testphp4.phtml.
3. Создайте файл testphp4.phtml, поместите в него следующий код:
<html>
<head>
<title>Гостевая книга</title>
</head>
<body bgcolor=silver>
<?php
$filename = "messages.txt";
$fp = fopen($filename,"a");
if($fp)
{
fputs($fp, $message." ".$person);
fclose($fp);
}
include($filename);
?>
</body>
</html>
4. Создайте пустой файл messages.txt — в него будут сохраняться все сообщения пользователей.
5. Запустите файл testphp4_form.html, убедитесь в работоспособности скрипта.
6. Должно происходить следующее: переменные $message и $person принимаются скриптом testphp4.phtml, открывается файл messages.txt (делается это методом fopen, подробнее о нем читайте), помещает в его конец строку, состоящую из значений переданных переменных, разделенных пробелом (делается это методом fputs, подробнее о нем читайте).
7. Измените работу скрипта таким образом, чтобы сообщения и имена пользователей выводились в отформатированном виде, например, поместите их в ячейки таблицы.
8. Измените работу скрипта таким образом, чтобы форма находилась в файле testphp4.phtml, иными словами, удалите файл testphp4_form.html.
9. В начало страницы поместите guestbook.jpg .
<html>
<head>
<title>Первое задание</title>
</head>
<body>
<p>Это простой абзац с текстом</p>
<ol>
<li>Это первый элемент нумерованного списка</li>
<li>Это второй элемент нумерованного списка</li>
</ol>
</body>
</html>
Создайте новый html документ в той же директории, где и первый. Напишите в нем какой-либо текст. Нарисуйте картинку небольшого размера (200x200). Сохраните ее в той же директории, где и html документ, назвав "1.bmp".
Задание 3. Создание html с картинками, гиперссылками и т.д.
Создайте осмысленный html документ, в котором должно быть:
- не менее 1 заголовка первого уровня;
- не менее 2 абзацев;
- не менее 3 картинок;
- один нумерованный список, содержащий не менее 4 элементов;
- один ненумерованный список, содержащий не менее 4 элементов;
- не менее одного слова, выделенного курсивом;
- не менее одного слова, выделенного жирным;
- гиперссылка на документ из первого задания;
- гиперссылка на документ из второго задания;
- не менее одной картинки, используемой как гиперссылка.
Примеры тем для третьего задания
- любимый преподаватель;
- любимый техникум;
- любимая музыкальная группа;
- любимая телепередача;
- любимая машина;
- любимая игра;
- любимые животные;
- любимый писатель;
- любимый автор стихов (например, Пушкин);
- любимая планета;
- и т.д.
Задание 1. Создание расписание своей группы
Создайте новый html документ в той же директории, где и стартовая страница, в котором разместите таблицу расписания Вашей группы (практические и лекционные). В таблице: колонки – дни недели, строки – время, ячейки – предметы.
Задание 2. Создание прайс-листа
Создайте новый html документ в той же директории, где и стартовая страница. В документе разместите таблицу прайс-лист плюбого товара (компьютерных комплектующих, бытовой техники, мебели и т.д.).Колонки таблицы: номер по порядку, наименование товара, описание товара, цена, изображение. Таблица должна содержать не мене 10 наименований товара, для некоторого товара необходимо разместить изображения.
Задание 3. Создание списка одногруппников
Создайте новый html документ в той же директории, где и стартовая страница. В документе разместите таблицу со списком одногруппников. Колонки: Фамилия, Имя, Отчество, Дата рождения, Телефон, Адрес.
Задание 0. Создание стартовой страницы
Разобрать пример фреймов («\Example\index.html»).
Задание 1. Создание расписание своей группы
Создать фрейм-документ, который состоит из 3-х фреймов: лого, меню, информационного. Меню содержит ссылки на стартовый страницы предыдущих практик, которые должны открываться в информационном фрейме.
Задание 1
Рассмотреть пример ("\Example\index.html") использования стилей с определением стилей в отдельном файле ("\Example\style.css").
Задание 2
Продемонстрировать использование CSS. Для чего создать сайт, состоящий из не менее 3 страниц, к которым подключается файл с описанием стилей.
На страницах должны использоваться перечисленные ниже структурные элементы:
- заголовки (<h1>, …);
- параграфы (<p>);
- списки (<ol> и/или <ul>, <li>);
- таблицы (<table>, <tr>, <td>);
- изображения (<img>).
В файле с описанием стилей должны быть описания стилей для следующих элементов:
- body (свойства текста, шрифта, фона);
- p (свойства текста, шрифта);
- h1 (свойства текста, шрифта, фона);
- table (свойства текста, шрифта, фона, размеров, границ);
- img (свойства размеров, границ);
- b (свойства шрифта).
Определения стилей необходимо выполнить для различных свойств CSS, а именно:
- шрифт;
- текст;
- цвет элементов;
- цвет фона элементов;
- размеры и границы элементов.
Тему сайта можно выбрать произвольную или из тем, предложенных ниже:
1. Биография
2. Увлечения (хобби)
3. Вид спорта
4. Любимые звери
5. Любимая игра
6. Любимая группа
7. и т.д.
Задание 1
Создать блочный элемент шириной 10 сантиметров, прилегающий к правому краю.
Задание 2
Создать документ с блочными элементами, у каждого должна быть видимая граница. Элементы заполнить текстом. Расположить элементы следующим образом
Задание 3
В предыдущем задании в элементах установить внешний отступ равным 1em, а внутренний равным 0.5em.
Задание 1
Продемонстрировать использование изображений-карт, для чего создать сайт, состоящий из не менее 2 страниц:
- 1 страница – описание карты:
- 2 страница (и другие) – подробное описание элементов изображения (областей карты, которые являются гиперссылками).
При использовании гиперссылок продемонстрировать использование закладок.
Тему сайта можно выбрать произвольную или из тем, предложенных ниже:
1. Описание структурных элементов материнской платы;
2. Описание структурных элементов системного блока;
3. Описание расположения объектов на карте (города, области и т.д.);
4. Описание элементов мебели, квартиры, интерьера;
5. Описание конструктивных элементов авто- и мототехники;
6. Описание элементов интерфейса программы (например, среды TP7.0)
7. и т.д.
Задание 1. Создание html-файла
Средствами текстового редактора, используя язык гипертекстовой разметки HTML создать html-файл со ссылками на 3 другие страницы, содержащие различные виды списков (линейные и вложенные):
- маркированные.
- нумерованные.
- списки определений.
Продемонстрировать все виды списков со всеми видами маркеров и способами нумерации.
Создание домашней страницы
Посещение веб-узла начинается с домашней страницы. Эта страница содержит сведения о содержании и теме веб-узла и предназначена для привлечения внимания его посетителей. Домашняя страница содержит также ссылки на другие страницы веб-узла.
1. На пустой странице в представлении Страница введите фразу Добро пожаловать в магазин Championzone! и нажмите клавишу ENTER. Как и при работе с текстовым редактором, при нажатии клавиши ENTER курсор переходит на новую строку.
2. Затем введите предложение Узнайте больше о наших спортивных товарах, просмотрите фотографии товаров и коллекцию фотографий, посвященных спорту.
3. Нажмите клавишу ENTER. Большая часть содержимого веб-узла магазина Championzone уже создана. При создании веб-узла в программе FrontPage можно импортировать любые существующие документы непосредственно на веб-страницу, что позволяет избежать их повторного ввода.
Страница должна выглядеть так:
Теперь необходимо добавить картинку на веб-страницу. Картинки могут представлять собой отсканированные фотографии, рисунки или компьютерные графические объекты, созданные с помощью графических редакторов.
В данном примере вставляется картинка с изображением эмблемы FrontPage.
Вставка графического объекта на домашнюю страницу
1. В меню Вставка выберите пункт Рисунок, а затем — команду Из файла. В программе FrontPage появится диалоговое окно Рисунок.
2. Выберите папку с лабораторными работами, дважды щелкнитке по ней.
3. Выберите файл frontpage и нажмите кнопку Вставить. Выбранный файл рисунка будет вставлен на текущую страницу. Этот рисунок представляет собой графический объект, который посетители веб-узла смогут щелкнуть и получить дополнительные сведения о программе FrontPage 2002.
4. Нажмите кнопку ENTER, чтобы создать новую строку.
Страница должна выглядеть так:
Одной лишь вставки изображения кнопки недостаточно для выполнения в обозревателе каких-либо действий по щелчку этого изображения. Чтобы щелчок рисунка или слова вызывал действие, необходимо с этим рисунком или словом связать гиперссылку.
Гиперссылка является указателем для перехода от текста или рисунка к другой странице или файлу в Интернете или интрасети. В Интернете гиперссылки являются основным средством перехода на другие веб-страницы или веб-узлы.
Далее необходимо создать гиперссылку для графического объекта, вставленного на домашнюю страницу.
Создание гиперссылки для рисунка
1. На домашней странице щелкните вставленный ранее рисунок кнопки с эмблемой FrontPage 2002.
Выделенный рисунок отображается с маркерами файла, которые представляют собой восемь маленьких квадратов, расположенных вдоль границ рисунка. Они могут использоваться для изменения размеров рисунка или его внешнего вида. При выделении рисунка в программе FrontPage на экране появляется панель инструментов Рисунки. С помощью панели инструментов Рисунки можно получить доступ к средствам редактирования и форматирования рисунков, о которых будет рассказано далее.
Примечание. Если панель инструментов Рисунки автоматически не отображается, в меню Вид выберите пункт Панели инструментов, а затем — пункт Рисунки.
2. В меню Вставка выберите команду Гиперссылка. В программе FrontPage появится диалоговое окно Добавление гиперссылки. В этом окне необходимо указать адрес назначения создаваемой гиперссылки.
3. В поле Адрес введите адрес www.microsoft.com/frontpage.
Примечания В программе FrontPage автоматически добавляется префикс http.
Поскольку создается ссылка для кнопки с эмблемой Microsoft FrontPage, ссылка будет указывать на домашнюю страницу FrontPage в Интернете. При нажатии этой кнопки в обозревателе будет открыта домашняя страница FrontPage.
4. Нажмите кнопку ОК, чтобы завершить создание гиперссылки. Внешний вид кнопки не изменился. В отличие от текстовых гиперссылок, которые обычно подчеркнуты и выделены синим цветом, рисунок с гиперссылкой не позволяет так же просто определить наличие гиперссылки. Это сделано намеренно, поскольку изменение внешнего вида рисунка в некоторых случаях может ухудшить внешний вид страницы. Проверить наличие связанной с рисунком гиперссылки нетрудно, если навести указатель мыши на рисунок. При наличии гиперссылки в программе FrontPage в строке состояния выводится адрес URL этой гиперссылки. Далее в верхней части страницы необходимо вставить рисунок с эмблемой магазина Championzone.
Вставка рисунка на домашнюю страницу
1. Используйте сочетание клавиш CTRL+HOME, чтобы быстро перейти в начало текущей страницы.
Совет. Сочетание клавиш CTRL+HOME переводит курсор в исходную позицию (рядом с верхним левым полем текущей страницы).
2. В меню Вставка выберите пункт Рисунок, а затем — команду Из файла. В программе FrontPage сразу же отображается содержимое папки с лабораторными работами. В течение каждого сеанса работы в программе FrontPage запоминаются имена и расположение папок, к которым осуществлялся переход.
3. Перейдите в папку с лабораторными работами.
4. Дважды щелкните файл czlogo. В программе FrontPage будет выполнена вставка рисунка на текущую страницу.
5. Нажмите клавишу ENTER, чтобы переместить текст приветствия на следующую строку.
Страница должна выглядеть так:
Для завершения создания домашней страницы осталось расположить текст и рисунки по центру.
Расположение по центру элементов на странице
1. В меню Правка выберите команду Выделить все. В программе FrontPage будет выделено все содержимое текущей страницы.
2. В меню Формат выберите пункт Абзац. В программе FrontPage будет отображено диалоговое окно Абзац. В этом окне можно изменить выравнивание выделенных элементов, а также указать отступ и интервалы для текста и рисунков.
3. В списке Выравнивание выберите значение по центру, а затем нажмите кнопку ОК. В программе FrontPage будет выполнено выравнивание текста и рисунков по центру домашней страницы.
4. Щелкните страницу в любом месте, чтобы отменить выделение всех элементов страницы.
Сохранение текущей страницы
Потратив определенное время на выполнение ряда действий, полезно сохранить полученную веб-страницу.
1. В меню Файл выберите команду Сохранить как. В программе FrontPage появится диалоговое окно Сохранить как. В этом окне можно указать нужное расположение для текущей страницы, а также изменить название, имя файла и его тип.
2. В диалоговом окне Сохранить как выберите Вашу папку (при еѐ отсутствии – создайте свою папку).
3. Нажмите кнопку Изменить рядом с полем Название. Появится диалоговое окно Название страницы. В этом окне в качестве названия
страницы по умолчанию выводится первая строка текста текущей страницы. Заголовок определяет содержимое страницы при отображении ее в веб-обозревателе. Далее предстоит изменить название страницы на более наглядное.
4. В поле Название введите Домашняя страница и нажмите кнопку ОК.
5. Измените текст в поле Имя файла на текст Домашняя страница, а затем нажмите кнопку Сохранить. В программе FrontPage выполняется сохранение текущей страницы.
Параметры представления Страница
Работа по созданию домашней страницы осуществлялась монопольно в обычном представлении Страница, однако существуют три различных представления текущей страницы.
Отображение HTML-тегов на текущей странице
В представлении Страница
выберите в меню Вид команду Показать теги.
В программе FrontPage на экран будет выведено графическое представление стандартных HTML-тегов.
Данное представление удобно, если при создании веб-страниц нужно знать расположение HTML-тегов.
Чтобы скрыть теги, еще раз выберите команду Показать теги в меню Вид.
Отображение HTML-кода текущей страницы
В представлении Страница нажмите кнопку HTML-код, расположенную в нижней части страницы.
В этом режиме в программе FrontPage отображается HTML-код созданной домашней страницы. Эти инструкции расшифровываются в веб-обозревателях при отображении страницы. Область HTML предназначена для опытных веб-разработчиков, которым необходимо изменить HTML-код, созданный в программе FrontPage.
Если требуется задать способ создания HTML-кода в программе FrontPage, в меню Сервис выберите пункт Параметры страницы и откройте вкладку Разметка текста HTML. Тем, кто недостаточно хорошо знаком с языком HTML, не рекомендуется вносить изменения в этом окне. Чтобы закрыть диалоговое окно Параметры страницы, нажмите кнопку Отмена.
В нижней части страницы нажмите кнопку HTML, чтобы просмотреть html-разметку страницы.
В нижней части страницы нажмите кнопку Обычный, чтобы вернуться в Обычный режим представления страницы.
Совет. При работе в режиме HTML-код можно использовать многие команды меню и кнопки панелей инструментов, так же как и при работе в режиме Обычный.
Предварительный просмотр текущей страницы
Нажмите кнопку Просмотр в нижней части страницы.
Примечание. Если на компьютере не установлен обозреватель Microsoft Internet Explorer, вкладка Просмотр не отображается и просмотр страницы таким способом невозможен. Режим представления страницы Просмотр удобен для просмотра расположения и внешнего вида определенных элементов, таких как анимация, видеозаписи, таблицы и списки, в том виде, как они выводятся в веб-обозревателе.
В нижней части страницы нажмите кнопку Обычный, чтобы снова вернуться в Обычный режим представления страницы.
Создание веб-узла в программе FrontPage
Веб-узел представляет собой домашнюю страницу и связанные с ней страницы, рисунки, документы, мультимедийные и другие файлы. Веб-узлы сохраняются на веб-сервере или на жестком диске компьютера. Веб-узлы на основе средств Microsoft FrontPage содержат также файлы, обеспечивающие работу с программой FrontPage и позволяющие открывать, копировать, редактировать и изменять веб-узлы, а также управлять ими в программе FrontPage.
Выполнив описанные действия, нетрудно убедиться в том, что создание веб-страницы с помощью программы FrontPage не представляет труда. После запуска приложения можно немедленно приступить к вводу и редактированию документа, а затем сохранить его на жестком диске, как и при работе в текстовом редакторе. Хотя таким образом можно создать веб-узел целиком, это потребует много ручного труда и детальной проработки вопросов организации гиперссылок и исходных файлов, а также обновления содержимого.
При сохранении веб-страниц на веб-узле в программе FrontPage может автоматически выполняться управление гиперссылками и их восстановление, упорядочение файлов и папок, ведение панелей динамических ссылок, проверка орфографии и создание отчетов со сведениями о проблемах, возникших при работе со страницами и файлами.
Создание нового веб-узла
1. В меню Файл выберите команду Закрыть, чтобы закрыть текущую страницу.
2. В меню Файл выберите команду Создать, а затем — пункт Страница или веб-узел. В программе FrontPage будет отображена область задач Создание веб-страницы. В этом окне можно выбрать шаблон или мастер, указать, куда необходимо сохранить веб-узел, а также задать его имя.
3. В группе Создание с помощью шаблона выберите ссылку Шаблоны веб-узлов.
4. Щелкните значок Одностраничный веб-узел и нажмите клавишу TAB. При нажатии клавиши TAB курсор перемещается в поле, в котором указывается имя и расположение нового веб-узла.
5. Измените содержимое поля Укажите расположение нового веб-узла Имя Вашей папки\Championzone и нажмите кнопку ОК.
В программе FrontPage будет создан новый веб-узел Championzone, а в строке заголовка в верхней части окна программы FrontPage будет выведено его имя и расположение.
Поскольку придется работать с несколькими файлами на веб-узле, в программе FrontPage также выводится Список папок, в котором содержатся файлы и папки текущего веб-узла. В открывшемся окне файлы и папки отображаются так же, как и в проводнике Windows. Рекомендации по работе со Списком папок содержатся в лабораторной работе N7.
6. Если Список папок на экране отсутствует, выполните следующие действия.
На стандартной панели инструментов щелкните стрелку справа от кнопки Переключить панель
и выберите элемент Список папок.
7. Щелкните значок Переходы
на панели Представления. Если веб-узел открыт, значки панели Представления позволяют изменять представление сведений на веб-узле. Представление Переходы является графическим представлением структуры веб-узла. Поскольку был создан одностраничный веб-узел, в программе FrontPage эта страница автоматически устанавливается в качестве домашней страницы веб-узла, на что указывает маленький значок с изображением домика
. При работе в представлении Переходы в окне программы выводится также панель инструментов Переходы. Панель инструментов Переходы можно перетащить в любую область экрана.
Рядом с панелью Представления в программе FrontPage выводится Список папок, как в представлении Страница.
Теперь предстоит заменить новую пустую домашнюю страницу созданной ранее страницей. Однако предварительно необходимо создать структуру для других страниц веб-узла магазина Championzone.
При создании структуры веб-узла в представлении Переходы становятся доступными некоторые средства, такие как объявления и панели переходов, автоматически обновляемые при изменении, добавлении или удалении станиц веб-узла. Данная возможность позволяет легко вносить необходимые изменения. Эти средства будут подробно описаны позже.
Создание структуры переходов
1. В представлении Переходы нажмите кнопку Создание новой обычной страницы
на стандартной панели инструментов.
В программе FrontPage будет создана новая страница с названием <Новая страница 1>, расположенная в структуре веб-узла под домашней страницей. Фактически в представлении Переходы выводятся не сами страницы текущего веб-узла, а
соответствующие им рамки. Перед созданием содержимого веб-узла можно попробовать различные варианты структуры и организации веб-узла.
2. Чтобы быстро создать остальные страницы, удерживайте нажатой клавишу CTRL, нажмите клавишу N три раза.
Использование сочетания клавиш CTRL+N эквивалентно выбору команды Создание новой обычной веб-страницы. В программе FrontPage поддерживаются стандартные для системы Windows и приложений Microsoft Office сочетания клавиш, использование которых позволяет ускорить выполнение повторяющихся действий. Вновь созданные страницы отображаются в структуре под домашней страницей, поскольку домашняя страница была выделена при вызове команды.
Примечание. В представлении Переходы выделенная страница окрашена синим цветом, а остальные страницы остаются желтыми.
3. Выделив домашнюю страницу, нажмите клавишу TAB. При нажатии клавиши TAB выделяется следующая страница в структуре, а ее название активизируется для изменения. При этом выделяется также текст с именем страницы, чтобы упростить ввод нового имени.
4. Введите имя О нас и нажмите клавишу TAB. Название <О нас> является названием одной из создаваемых страниц веб-узла магазина Championzone.
5. Повторите те же действия с другими страницами, изменив название страницы Новая страница 2 на Товары, страницы Новая страница 3 на Коллекция фотографий, а страницы Новая страница 4 на Связи.
6. При нажатии клавиши ENTER после изменения названия страницы происходит сохранение нового названия, однако другая страница не выделяется. Чтобы отменить выделение всех страниц, в представлении Переходы щелкните любую область вне страниц.
Экран должен выглядеть так:
Можно быстро открыть страницу в представлении Страница для ее редактирования, дважды щелкнув страницу в представлении Переходы или в Списке папок (страницы не отображаются в списке папок, пока они не сохранены).
Далее предстоит заменить пустую домашнюю страницу, созданную в программе FrontPage при помощи шаблона веб-узла, импортировав домашнюю страницу, созданную ранее и сохраненную в Вашей папке .
Импорт страницы на веб-узел
1. В представлении Переходы дважды щелкните страницу index.htm, чтобы открыть ее в представлении Страница. В программе FrontPage будет открыта пустая домашняя страница, созданная при помощи шаблона веб-узла.
2. В меню Вставка выберите команду Файл. Появится диалоговое окно Выбор файла. В этом окне можно выполнить вставку веб-страниц, текстовых документов и текстовых файлов, а также других документов в текущую веб-страницу.
3. В диалоговом окне Выбор файла найдите Вашу папку , если она еще не отображена.
4. Выберите файл Домашняя страница и нажмите кнопку Открыть. В программе FrontPage выполняется импорт на текущую страницу ранее сохраненной домашней страницы.
5. Чтобы сохранить текущую страницу на веб-узле, нажмите кнопку Сохранить
на стандартной панели инструментов. В программе FrontPage будет отображено диалоговое окно Сохранение внедренных файлов. В этом окне можно просматривать, переименовывать, сохранять и обновлять внедренные файлы, которые будут использованы на текущем веб-узле.
При предыдущем сохранении этой страницы в Вашей папке в программе FrontPage два вставленных рисунка не изменили своего расположения. На домашней странице использовались ссылки на файлы рисунков, а сами файлы не копировались в ту же папку,
в которой сохранена страница. Чтобы обеспечить переносимость веб-узла, необходимо всегда сохранять связанные страницы и файлы как часть использующего их веб-узла.
6. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК. В программе FrontPage будет выполнено сохранение домашней страницы под именем Index.htm, а также сохранение копий внедренных файлов рисунков на текущем веб-узле.
Совет. Для домашних страниц используются зарезервированные имена. В программе FrontPage в качестве имени страницы будет автоматически использовано одно из двух зарезервированных имен, которые рекомендуется изменять только в случае особой необходимости. Если на компьютере установлено локальное программное обеспечении веб-сервера, например Internet Information Services (IIS), то для домашней страницы по умолчанию будет задано имя Default.htm. Если локальный веб-сервер не установлен или страница сохраняется на локальный жесткий диск, а не на веб-узел на веб-сервере, то страница получит имя Index.htm.
Эти имена зарезервированы для домашних страниц, поскольку в веб-обозревателях автоматически выполняется поиск этих имен, если вместо ссылки на определенную страницу посетитель указывает URL-адрес веб-узла.
Создание содержимого веб-узла
Теперь, когда домашняя страница стала частью текущего веб-узла, необходимо создать содержимое остальных страниц веб-узла Championzone.
Редактирование страницы <О нас>
1. Выберите в меню Вид пункт Переходы, чтобы вернуться к представлению Переходы.
Примечания В Списке папок теперь отображаются два файла рисунков, которые вы сохранили на данном веб-узле. Файл Index.htm является новой домашней страницей. Позднее можно будет удалить оставшуюся копию домашней страницы из папки Мои документы.
В Списке папок названия файлов были автоматически образованы из названий страниц, указанных пользователем в представлении Переходы. В этой лабораторной работе названия изменяться не будут.
2. Дважды щелкните страницу О нас, чтобы открыть ее в представлении Страница. Эта страница будет содержать пример описания вымышленной компании для посетителей веб-узла. В настоящей лабораторной работе мы уже подготовили для вас подобный текст, поэтому вы можете просто поместить его на страницу.
3. В меню Вставка выберите команду Файл.
4. В диалоговом окне Выбор файла найдите папку с лабораторными работами, дважды щелкая каждую папку пути, пока искомая папка не появится в поле Папка.
5. Выберите Текстовые файлы (*.txt) в списке Тип файлов для отображения только файлов данного типа. Вы увидите один файл с именем about.
6. Выберите файл about из списка и нажмите кнопку Открыть. Вставляемый текст не был сохранен в HTML-формате, поэтому появится диалоговое окно Преобразование текста для управления импортом файла.
7. В диалоговом окне Преобразование текста выберите Вставить как HTMLи нажмите кнопку OK.
Программа Microsoft FrontPage импортирует файл и поместит его в указанное место на странице О нас.
8. На стандартной панели инструментов нажмите кнопку Сохранить
для сохранения изменений на странице О нас.
9. Закройте Список папок. Далее будет подготовлена страница под названием Товары. Она будет предоставлять посетителям сведения о спортивных товарах, продаваемых в магазине Championzone. На данной странице также будет находиться форма обратной связи для сбора замечаний и предложений посетителей веб-узла Championzone.
Редактирование страницы <Товары>
1. На стандартной панели инструментов нажмите кнопку Переключить панель
и выберите Список папок.
2. Дважды щелкните страницу Товары.htm в Списке папок, чтобы открыть эту страницу в представлении Страница.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. В меню Вставка выберите команду Файл.
5. В диалоговом окне Выбор файла откройте список Тип файлов и выберите Формат RTF (*.rtf) для отображения файлов данного типа в папке исходных файлов веб-узла. Будут показаны подходящие файлы.
6. Дважды щелкните файл productinfo. Так как данный файл содержит форматирование, он будет автоматически конвертирован в HTML-формат и помещен на страницу.
7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Дизайн страницы
Страница О нас унаследует свое форматирование от графической темы, которую вы примените к веб-узлу Championzone далее в лабораторной работе N7. Однако дизайн страницы Товары потребует больше усилий.
Чтобы читатель мог легко различить заголовки абзацев, списки товаров, а также остальные сведения, представленные на странице, необходимо поместить на страницу рисунки, отформатировать абзацы и создать маркированные списки.
Создание маркированного списка
1. На странице Товары в представлении Страница найдите слова <спортивная сумка>. Если список не виден полностью, используйте полосы прокрутки для его просмотра. Список начинается со слов <спортивная сумка> и заканчивается словами <сетка для ворот>.
2. Щелкните текст слева от буквы <с> в слове <спортивная>, затем, удерживая нажатой клавишу SHIFT, щелкните текст сразу после слова <ворот> и отпустите клавишу SHIFT. Список будет выделен целиком.
3. На панели инструментов Форматирование нажмите кнопку Маркеры
. Произойдет преобразование выделенного текста в маркированный список.
4. Щелкните страницу в любом месте, чтобы отменить выделение списка.
Страница должна выглядеть следующим образом:
С помощью программы Microsoft FrontPage можно также создавать нумерованные списки. При добавлении новых элементов в нумерованный список они автоматически последовательно нумеруются. Вы можете добавлять элементы в нумерованные и маркированные списки, нажимая клавишу ENTER после последнего элемента. Для завершения списка нажмите клавишу ENTER дважды после ввода последнего элемента.
Далее на текущую страницу будут помещены четыре рисунка и затем с помощью средств позиционирования выровнены с абзацами, к которым они относятся. Это позволит придать странице более привлекательный вид.
Позиционирование рисунков в тексте
1. На странице Товары в представлении Страница поместите курсор после слов <Новинки недели>.
2. Нажмите кнопку Добавить рисунок из файла
на стандартной панели инструментов. Когда рисунок был вставлен в прошлый раз, данный веб-узел не был открыт, поэтому программа Microsoft FrontPage автоматически открывала диалоговое окно Выбор файла. Но сейчас, при открытом веб-узле, предполагается, что вы намереваетесь работать с рисунками, которые уже являются частью этого веб-узла, поэтому появляется диалоговое окно Рисунок.
3. Так как необходимые рисунки на текущую страницу еще не добавлены, щелкните раскрывающийся список Папка и найдите папку с лабораторными работами.
4. Выберите файл FPTutor001 и нажмите кнопку Вставить. Изображение футболистов будет вставлено сразу после слов <Новинки недели>.
5. Далее щелкните изображение футбольного мяча, чтобы выделить его.
6. В меню Формат выберите пункт Положение. Появится диалоговое окно Положение.
7. В группе Обтекание выберите вариант справа и нажмите кнопку ОК. Рисунок будет выровнен по правой границе текущей страницы, а маркированный список переместится влево от него.
8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
9. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.
Страница должна выглядеть следующим образом:
Рисунки можно вставлять один за другим или сразу импортировать все необходимые рисунки. Вставка одиночных файлов производится в представлении Страница, а вставка группы файлов — в представлении Папки.
Добавление группы файлов к текущему веб-узлу
1. Щелкните значок Папки
на панели Представления, чтобы переключиться в представление Папки. Представление Папки является расширением списка папок, доступного в представлениях Переходы и Страница. Здесь, как и в проводнике, доступны подробные сведения о файлах и папках вашего веб-узла, а также допускается добавление, удаление, перемещение, копирование и переименование файлов.
2. В меню Файл выберите команду Импорт. Появится диалоговое окно Импорт. В этом окне можно добавлять файлы и папки, находящиеся на локальном компьютере, в локальной сети, на файл-сервере или в Интернете, например на FTP-сервере.
3. В диалоговом окне Импорт нажмите кнопку Добавить файл.
4. В диалоговом окне Добавление файла в список для импорта перейдите к папке с лабораторными работами.
5. Далее щелкните список Тип файлов и выберите тип GIF и JPEG (*.gif, *.jpg) для отображения всех файлов данного типа в папке исходных файлов веб-узла.
6. Выберите файл czbanner.
7. Удерживая нажатой клавишу CTRL, выберите файлы FPTutor002, FPTutor003, FPTutor004, FPTutor005, и FPTutor006.
8. После отбора файлов в диалоговом окне Добавление файла в список для импорта отпустите клавишу CTRL и нажмите кнопку Открыть. Выбранные рисунки будут автоматически добавлены в список в диалоговом окне Импорт.
9. Нажмите кнопку ОК для импорта перечисленных файлов в текущий веб-узел.
Теперь, когда все рисунки добавлены, необходимо завершить компоновку страницы Товары.
Завершение компоновки страницы
1. Щелкните значок Страница на панели Представления, чтобы переключиться в представление Страница.
2. Если открыт Список папок, закройте его, чтобы видеть большую часть страницы, с которой вы работаете.
Чтобы закрыть Список папок, выполните следующие действия.
1. На стандартной панели инструментов нажмите кнопку Переключить панель
и выберите вариант Список папок.
2. На странице Товары поместите курсор после предложения <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> и нажмите кнопку Добавить рисунок из файла на панели инструментов.
3. В диалоговом окне Рисунок по-прежнему доступны импортированные ранее рисунки — выберите файл FPTutor002 из списка. Допускается также вставка картинок или, при наличии сканера или цифровой камеры, изображений с этих устройств.
4. Чтобы вставить рисунок, нажмите кнопку ОК.
5. Щелкните только что вставленный рисунок и нажмите кнопку По правому краю
на панели инструментов, чтобы расположить рисунок по правой границе и добиться его обтекания текстом.
Страница должна выглядеть так:
Расположение рисунков и других элементов страницы вокруг текста делает ее более привлекательной наподобие страницы журнала или газеты. Расположение рисунков вдоль границ позволит сохранить компоновку страницы при различных разрешениях экрана и размерах окна обозревателя.
Для завершения страницы Товары будет создана форма обратной связи для общения с посетителями веб-узла. Форма обратной связи позволит собирать замечания и мнения посетителей веб-узла.
Создание формы обратной связи
1. В представлении Страница нажмите клавиши CTRL+END для быстрого перехода в нижнюю часть текущей страницы или используйте для этого полосу прокрутки.
2. В новой пустой строке введите фразу Нам нужен ваш отклик! и нажмите клавишу ENTER.
3. В меню Вставка выберите пункт Форма, а затем — пункт Поле. На страницу будет автоматически вставлена новая форма с текстовым полем. Штриховая линия будет обозначать границы формы. По умолчанию новая форма содержит также кнопки Отправить и Сброс.
Далее следует настроить форму, добавив другие поля и их заголовки, чтобы посетители понимали, какие сведения хотят от них получить.
Настройка формы
1. Нажмите кнопку Отправить, а затем — кнопку По центру
на панели инструментов.
2. Нажмите клавишу <Стрелка влево>, чтобы поместить курсор перед кнопкой Отправить и нажмите клавишу ENTER. Нажатие клавиши ENTER добавляет новую строку к форме.
3. Щелкните поле и нажмите клавишу <Стрелка влево>, чтобы поместить курсор в начало формы.
4. В первой строке введите фразу Ваше имя: и нажмите клавиши SHIFT+ENTER. Нажатие клавиши ENTER при удерживаемой клавише SHIFT вводит разрыв строки. Разрывы строк удобны для размещения строк текста с интервалом меньше стандартного интервала между абзацами.
5. Поместите курсор после поля и нажмите клавишу ENTER.
6. На следующей строке наберите фразу Ваш адрес электронной почты: и нажмите клавиши SHIFT+ENTER.
7. В меню Вставка выберите пункт Форма, еще раз выберите Поле и нажмите клавишу ENTER.
8. В следующей строке введите фразу Ваши комментарии: и нажмите клавиши SHIFT+ENTER.
9. В меню Вставка выберите пункт Форма, а затем — пункт Текстовое поле. В форму будет автоматически помещено текстовое поле с полосой прокрутки.
10. Дважды щелкните только что вставленное текстовое поле. Появится диалоговое окно Свойства текстового поля. В нем можно изменить внешний вид текстового поля.
11. В диалоговом окне Свойства текстового поля измените параметры Ширина в знаках и Число строк, задав для них значения 30 и 5 соответственно, а затем нажмите кнопку ОК. Текстовое поле увеличится в размерах, чтобы побудить посетителей веб-узла к написанию более подробных комментариев. По завершении создания формы и страницы Товары необходимо сохранить результаты
работы. Примечание. Проверка формы до публикации веб-узла на сервере невозможна.
12. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Страница должна выглядеть так:
Создание формы и страницы Товары завершено. Теперь добавим еще две страницы: интерактивную коллекцию фотографий и список ссылок на несколько веб-узлов в Интернете.
Создание коллекции фотографий
В Интернете используется графический интерфейс, поэтому неудивительно, что множество веб-узлов содержит фотографии и другие типы изображений. Сканеры и цифровые камеры стали более доступными, и многие фотомастерские предлагают изображения на компакт-дисках, которыми можно обмениваться в интерактивном режиме.
Как было показано выше, размещение рисунков на веб-страницах с помощью программы FrontPage не представляет труда. Эта часть лабораторной работы посвящена созданию интерактивной коллекции фотографий.
Коллекция фотографий — это веб-страница, содержащая определенным образом упорядоченные изображения. Для веб-узла Championzone будет создана коллекция спортивных фотографий.
Программа Microsoft FrontPage 2002 предоставляет пользователям несколько вариантов компоновки изображений. В этой лабораторной работе используется горизонтальная компоновка.
Редактирование страницы коллекции фотографий
1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель
и выберите вариант Список папок.
2. В Списке папок дважды щелкните файл photo_gallery.htm, чтобы открыть данную страницу.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. После появления в представлении Страница чистой страницы введите в первой строке фразу Спортивные фотографии и нажмите клавишу ENTER.
5. В следующей строке введите фразу Познакомьтесь с нашей коллекцией спортивных фотографий.
6. Дважды нажмите клавишу ENTER, чтобы освободить место.
7. В меню Вставка выберите пункт Веб-компонент.
8. На левой панели выберите Коллекция фотографий.
9. На правой панели выберите первый вариант компоновки (горизонтальная компоновка) и нажмите кнопку Готово.
10. Автоматически откроется диалоговое окно Свойства коллекции фотографий.
11. Нажмите кнопку Добавить и выберите Рисунки из файлов.
12. Выберите файл FPTutor003 и, удерживая нажатой клавишу SHIFT, выберите файл FPTutor006. Будут выбраны файлы FPTutor003, FPTutor004, FPTutor005 и FPTutor006.
13. Нажмите кнопку Открыть, а затем кнопку ОК.
14. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.
15. В диалоговом окне Сохранение внедренных файлов нажмите кнопку ОК.
Страница должна выглядеть так:
Создание ссылок на другие веб-узлы
Теперь осталось отредактировать только страницу Ссылки. Страница Ссылки будет содержать список текстовых гиперссылок на некоторые популярные спортивные страницы в Интернете.
При создании собственного веб-узла можно создать гиперссылки на другие аналогичные веб-узлы. Такие ссылки позволят посетителям просматривать похожие по тематике веб-узлы, не прибегая к средствам поиска.
Начало создания страницы <Ссылки>
1. На стандартной панели инструментов щелкните стрелку на кнопке Переключить панель
и выберите вариант Список папок.
2. Дважды щелкните файл links.htm в Списке папок, чтобы открыть страницу в представлении Страница.
3. Щелкните стрелку справа от кнопки Переключить панель и выберите Список папок, чтобы скрыть его.
4. После появления в представлении Страница чистой страницы введите фразу Ссылки на спортивные веб-узлы и нажмите клавишу ENTER.
Далее будет создана несложная анимация в заголовке абзаца. Программа Microsoft FrontPage содержит коллекцию забавных эффектов, которые можно применять к тексту заголовков или целым абзацам.
Создание динамического текстового эффекта
1. Щелкните любой фрагмент фразы Ссылки на спортивные веб-узлы на странице Ссылки.
2. В меню Формат выберите пункт Эффекты DHTML. Появится панель инструментов Эффекты DHTML. С ее помощью необходимо выполнить ряд последовательных операций, результатом которых будет несложный динамический HTML-сценарий (DHTML-сценарий) анимации, действующий на текст при его появлении в окне обозревателя. Динамический формат HTML является расширением языка HTML, позволяющим создавать эффекты представления текста и других объектов наподобие показа слайдов Microsoft PowerPoint. С помощью панели инструментов Эффекты DHTML нетрудно добавить простые эффекты к страницам, не прибегая к программированию.
3. В списке Вкл выберите Загрузка страницы. Это заставит веб-обозреватель включать эффект при загрузке страницы.
4. В списке Применить выберите Скачок. В программе Microsoft FrontPage применяется эффект <Скачок>. В веб-обозревателе данный эффект заставит слова <прыгать> по странице.
5. Нажмите кнопку Закрыть в верхнем правом углу панели инструментов Эффекты DHTML. Панель Эффекты DHTML будет закрыта, а эффект будет выделен на странице светло-синим цветом.
Советы
Если установлен обозреватель Microsoft Internet Explorer, можно просмотреть, как будет выглядеть данный эффект в веб-обозревателе, нажав на кнопку Просмотр в представлении Страница. Нажмите кнопку Обычный для возврата в представление Страница.
Для изменения эффекта в режиме Обычный следует выделить текст, содержащий эффект, выбрать пункт Эффекты DHTML в меню Формат и применить новый желаемый эффект.
Далее будут добавлены гиперссылки на другие веб-узлы в Интернете. Программа Microsoft FrontPage позволяет создавать текстовые гиперссылки различными способами, которые описаны ниже. При создании собственного веб-узла можно воспользоваться любым подходящим способом.
Создание текстовых гиперссылок
1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу MSN Sports и нажмите клавишу ENTER.
2. Выделите с помощью мыши введенные слова.
3. В меню Вставка выберите команду Гиперссылка. Появится диалоговое окно Добавление гиперссылки. В нем следует указать конечный адрес создаваемой гиперссылки. Это может быть файл, находящийся на вашем веб-узле, локальном компьютере, веб-сервере или на любом другом веб-узле Интернета.
4. В поле Адрес введите адрес www.msnbc.com/msn>/msnsports_front.asp и нажмите кнопку ОК. Префикс HTTP будет вставлен автоматически.
5. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова изменят цвет с черного на синий, и под ними появится подчеркивание, указывающее на наличие гиперссылки. При отображении данной страницы в веб-обозревателе выбор этой ссылки вызовет загрузку домашней страницы MSN.
Перед созданием следующей гиперссылки необходимо вставить на данную страницу специальный символ, обозначающий товарный знак.
Вставка специальных знаков или символов
1. Щелкните страницу сразу после букв MSN в созданной ссылке.
2. В меню Вставка выберите пункт Символ. Появится диалоговое окно Символ. Это окно позволяет выбирать и вставлять специальные знаки в месте вставки. Пока это диалоговое окно отображается на экране, можно вставить несколько символов.
3. В диалоговом окне Символ выберите символ, нажмите кнопку Вставить, а затем — кнопку Закрыть. После букв MSN будет автоматически вставлен указанный символ. Команда Символ может использоваться для вставки знаков, которые невозможно ввести непосредственно с клавиатуры.
Далее будет создана автоматическая гиперссылка. Данный метод создания гиперссылок быстрый и простой, так как позволяет обойтись без диалогового окна Добавление гиперссылки.
Создание автоматической гиперссылки
1. На странице Ссылки нажмите клавишу <Стрелка вниз>, введите фразу www.sports.yahoo.com и нажмите клавишу ENTER. Сразу же после нажатия клавиши ENTER введенный адрес URL станет синим с подчеркиванием, указывающим на наличие гиперссылки. Как и остальные программы пакета Microsoft Office, программа Microsoft FrontPage поддерживает автоматическое создание гиперссылок. Но, так как сами адреса URL не содержат никаких описаний, при необходимости их можно заменить названиями веб-узлов, на которые они указывают. Просто перепишите текст, не удаляя гиперссылку.
Примечание. Yahoo! является популярной поисковой службой Интернета, обеспечивающей поиск сведений по ключевым словам и тематическим рубрикаторам. Данный адрес URL указывает на спортивную страницу Yahoo.
2. Используя мышь, выделите введенный адрес URL.
3. После выделения адреса http://sports.yahoo.com/ введите текст Yahoo! для замещения выделенного текста.
Гиперссылка указывает на тот же адрес URL, но теперь она названа по имени веб-узла.
Далее будет создана гиперссылка с помощью используемого веб-обозревателя. Данный метод создания гиперссылок является наиболее точным, так как нужная страница посещается перед созданием гиперссылки на нее. Кроме того, программа Microsoft FrontPage копирует адрес URL из поля адреса веб-обозревателя, поэтому проверенный адрес не придется вводить заново.
Создание проверенной гиперссылки
1. Нажмите клавишу <Стрелка вниз> для перемещения курсора на новую строку ниже предыдущей гиперссылки.
2. Введите фразу Национальная Баскетбольная Ассоциация и нажмите клавишу ENTER.
3. Выделите введенную фразу с помощью мыши.
4. На панели инструментов нажмите кнопку Добавление гиперссылки
. Появится диалоговое окно Добавление гиперссылки.
5. В диалоговом окне Добавление гиперссылки нажмите кнопку Интернет
. Программа Microsoft FrontPage запустит ваш веб-обозреватель. После посещения нужной страницы и возврата в программу Microsoft FrontPage поле адреса URL будет содержать адрес этой страницы.
6. В поле Адрес веб-обозревателя введите фразу http://www.nba.com/ и нажмите клавишу ENTER. В окне обозревателя появится домашняя страница Национальной Баскетбольной Ассоциации (НБА), где можно больше узнать о НБА, командах, игроках, посмотреть расписание игр и т. д.
7. Нажмите клавиши ALT+TAB, чтобы вернуться в диалоговое окно Добавление гиперссылки. Адрес URL домашней страницы программы Microsoft FrontPage появится в поле Адрес диалогового окна Добавление гиперссылки.
8. Нажмите кнопку OK.
9. Нажмите клавишу <Стрелка вниз>, чтобы отменить выделение текста. Слова <Национальная Баскетбольная Ассоциация> будут подчеркнуты, что указывает на наличие гиперссылки.
10. Для сохранения изменений на странице Ссылки нажмите кнопку Сохранить на панели инструментов.
Страница должна выглядеть так:
Форматирование заголовков абзацев
После успешного заполнения содержимым всех страниц создаваемого веб-узла необходимо отформатировать абзацы и задать шрифты, чтобы все заголовки абзацев на всех страницах выглядели одинаково.
Применение стилей абзацев к заголовкам
1. Выберите файл index.htm на вкладке страниц. На экране появится домашняя страница. Когда в области Обычный открыто сразу несколько страниц, вкладки страниц позволяют переключаться между ними.
Примечание. Если вы закрыли страницу на предыдущем шаге, в меню Файл выберите команду Открыть, а затем в диалоговом окне Открытие файла выберите файл index.htm.
2. Щелкните заголовок Добро пожаловать в Championzone.
3. Щелкните список Стиль на панели инструментов <Форматирование> и измените стиль Обычный на Заголовок 3.
4. Стиль <Заголовок 3> будет применен к текущей строке текста. Размер текста не изменится, однако шрифт станет полужирным.
5. Стили заголовков в списке Стиль базируются на стандартах языка HTML. Заголовок первого уровня является наибольшим по размеру для веб-страниц, а заголовок шестого уровня — наименьшим.
Примечание. Список Стиль может содержать также стили из каскадных таблиц (CSS), однако нами они не рассматриваются.
6. На панели инструментов нажмите кнопку Сохранить для сохранения изменений домашней страницы.
7. Выберите файл About_Us.htm на вкладке Страница. На экране вновь появится страница О нас.
8. Щелкните заголовок О нас вверху страницы.
9. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
10. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице О нас.
Повторное форматирование абзацев с помощью формата по образцу
Программа Microsoft FrontPage предоставляет удобный способ копирования стилей форматирования выделенного фрагмента текста на другой фрагмент нажатием одной кнопки. Этот прием можно освоить на примере страницы Товары.
1. Выберите файл Products.htm на вкладке Страница. На экране появится страница Товары.
2. Щелкните строку <ШИРОЧАЙШИЙ ВЫБОР СПОРТИВНЫХ ТОВАРОВ> вверху страницы.
3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
4. После применения стиля щелкните предложение в любом месте и нажмите кнопку Формат по образцу
на панели инструментов Форматирование.
5. Прокрутите страницу вниз до фразы Нам нужен ваш отклик.
6. Используя Формат по образцу
, выделите с помощью мыши фразу Нам нужен ваш отклик. Форматирование предыдущего заголовка будет автоматически скопировано и применено к текущему заголовку. Инструмент <Формат по образцу> удобен при одновременном копировании нескольких вариантов форматирования с одного фрагмента текста на другой.
7. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Товары.
Совет. Повторное форматирование может применяться к нескольким выделенным фрагментам текста. Для этого следует выделить текст с нужным форматированием и дважды нажать кнопку Формат по образцу. Выделите различные фрагменты текста, на которые будет копироваться форматирование, а по завершении копирования снова нажмите кнопку Формат по образцу. Далее следует завершить форматирование заголовков на двух оставшихся страницах.
Завершение применения стилей абзацев к заголовкам
1. Выберите файл photo_gallery.htm на вкладке Страница. На экране появится страница Коллекция фотографий.
2. Щелкните заголовок Спортивные фотографии вверху страницы.
3. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
4. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Коллекция фотографий.
5. В меню Окно выберите файл links.htm.
6. Щелкните фразу Ссылки на спортивные веб-узлы.
7. Щелкните список Стиль на панели инструментов и выберите стиль Заголовок 4.
8. На панели инструментов нажмите кнопку Сохранить для сохранения изменений на странице Ссылки.
Завершение работы с программой Microsoft FrontPage
В меню Файл выберите команду Выход.
Программа Microsoft FrontPage завершит свою работу.
1. С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testjs.html и поместите в начало страницы следующий код:
2. <html>
3. <head>
4. <title>Script test</title>
5. </head>
6. <body>
7. <script language="JavaScript">
8.
9. document.write("Добро пожаловать на мою страницу!<br>");
10. document.write("Это JavaScript!<br>");
11.
12. document.write("Добро пожаловать на мою страницу!<br>");
13. document.write("Это JavaScript!<br>");
14.
15. document.write("Добро пожаловать на мою страницу!<br>");
16. document.write("Это JavaScript!<br>");
17.
18. </script>
19. </body>
20. </html>
21. Сохраните страницу и просмотрите ее с помощью браузера.
22. Такой скрипт выведет на экран следующий текст:
23. Добро пожаловать на мою страницу!
24. Это JavaScript!
три раза. Наверняка вы заметили, что для получения необходимого результата определенная часть его кода была повторена три раза. Это неэффективно, поэтому попробуем оптимизировать код.
25. Определите функцию welcome_func(), которая будет выводить на экран строки:
26. Добро пожаловать на мою страницу!
27. Это JavaScript!
28. Затем вызовите функцию несколько раз. Для этого вы можете использовать цикл:
29.
30. for(i=0; i<3; i++){
31. welcome_func();
32. }
33.
34. Функции могут также использоваться в совместно с процедурами обработки событий. Рассмотрим пример. Создайте страницу testjs2.html, введите следующий код:
35. <html>
36. <head>
37.
38. <script language="JavaScript">
39.
40. function calculation() {
41. var x = 12;
42. var y = 5;
43.
44. var result = x + y;
45.
46. window.status = result;
47. }
48.
49. </script>
50.
51. </head>
52. <body>
53.
54. <form>
55. <input type="edit" onFocus="calculation()">
56. </form>
57.
58. </body>
59. </html>
60. В приведенном примере интрес представляют следующие нововведения:
var x = 12; — так в JavaScript объявляются переменные, тип переменной не дифференцируется — одинаково объявляются переменные типа double, integer, String и прочие; window.status = result; — свойству window.status присваивается новое значение, в нашем случае это строка 17, эта строка будет отображена в статус-панели браузера. onFocus — это команда, которая вызывает действие, когда пользователь "фокусируется" на элементе страницы, в нашем случае — помещает курсор в текстовое поле.
61. Сохраните файл.
62. Для просмотра созданной Web-страницы используйте браузер Microsoft Internet Explorer.
63. Вы должны увидеть Web-страницу с определенным в ее верхней части окном редактирования, установка курсора в этом окне приведет к появлению строки 17 в статус-панели браузера.
64. На этой же странице создайте функцию, которая будет вызываться при потере фокуса полем редактирования и помещать в статус-панель результат, полученный от разности чисел x и y. Обработчику события "потеря фокуса" в JavaScript соответствует параметр onBlur.
65. Продемонстрируйте полученный документ преподавателю.
Манипуляция объектами.
1. Сохраните на жестком диске своего компьютера файлы aircraft1.jpg и aircraft2.jpg.
2. Создайте с помошью текстового редактора "Блокнот" (Notepad) файл testjs3.html и поместите в начало страницы следующий код:
3. <IMG NAME="aircraft" SRC="aircraft1.jpg">
В своем скрипте вы можете назначать этому объекту новое изображение:
document.images["aircraft"].src='new_image.jpg'
Обратите внимание, что к интересующему нас объекту Image в массиве images мы обращаемся не по порядковому номеру, а по имени элемента images["aircraft"]. Более того, если имя объекта на странице оригинально, мы можем обратиться к нему напрямую, минуя упоминание массива:
document.aircraft.src='new_image.jpg'
4. Попробуем заменить изображение динамически, используя JavaScript. Модифицируйте свою страницу. Исходный текст должен выглядеть так:
5. <IMG NAME="aircraft" SRC="aircraft1.jpg">
6. <script language="JavaScript">
7. document.aircraft.src='aircraft2.jpg';
8. </script>
9. Попробуйте просмотреть страницу в браузере — сразу же после загрузки документа картинка aircraft1.jpg должна замениться на aircraft2.jpg.
10. Эффект происходит очень быстро и заметить его сложно. Модифицируем страницу таким образом, чтобы рисунки замещались при наведении курсора мыши на рисунок:
11. <IMG NAME="aircraft" SRC="aircraft1.jpg" onMouseOver="onOver();">
12.
13. <script language="JavaScript">
14. function onOver(){
15. document.images["aircraft"].src='aircraft2.jpg';
16. }
17. </script>
18. Попробуйте просмотреть страницу в браузере — картинка aircraft1.jpg заменяется на aircraft2.jpg при наведении указателя мыши на изображение.
19. Добавьте обработчик события onMouseOut — удаление указателя мыши с поверхности изображения. Пусть по этому событию активным становится рисунок aircraft1.jpg.
20. Скачайте и сохраните на своей машине файл aircraft3.jpg.
21. Добавьте обработчик события onMouseDown — нажатие мыши. Пусть при клике на изображении активным рисунком становится aircraft3.jpg
22. Сохраните файл.
Управление объектами формы.
1. Форма (form) — это контейнер html-страницы, в котором могут быть размещены элементы, позволяющие пользователю вводить данные для отправки на сервер. К таким элементам можно отнести тектстовые поля, списки, кнопки выбора и т.п.
2. С помощью текстового редактора "Блокнот" (Notepad) создайте страницу testform.html и поместите на странице следующий код:
3. <head>
4. <title>Управление объектами формы</title>
5. </head>
6. <body bgcolor=#ffffff>
7.
8. <img src="aircraft1.jpg" name="pic1">
9.
10. <p>
11.
12. <form name="myForm">
13. Ваше имя:
14. <br>
15. <input type="text" name="name" value=""><br>
16. e-mail:
17. <br>
18. <input type="text" name="email" value=""><br><br>
19. <br>
20. <input type="button" value="Нажмите!" name="myButton">
21. </form>
22.
23. <p>
24. <img src="aircraft2.jpg" name="pic2">
25.
26. <p>
27. <a href="http://www.tpu.ru/">Томский Политехнический Университет</a>
28.
29. </body>
30. </html>
31. Вот так должна выглядеть Ваша страница:
32. На странице размещено два рисунка, одна ссылка и форма с двумя полями для ввода текста и одной кнопкой. Как уже отмечалось выше, с точки зрения языка JavaScript, загруженная в настоящий момент html-страница, представляет собой объект document. Через этот объект можно получить доступ ко всем элементам, размещенным на странице. На следующем рисунке иллюстрируется иерархия объектов, создаемая HTML-страницей, приведенной в примере:
33. Создадим скрипт, который позволит заполнять текстовые поля формы предопределенными значениями.
34. В разделе <head> ... </head> разместите следующий код:
35. <script>
36. function fillIn(){
37. document.forms[0].elements[0].value = "Евгений";
38. document.forms[0].elements[1].value = "vest@list.ru";
39. }
40. </script>
41. Привяжите запуск функции к событию onClick кнопки "Нажмите!".
42. Сохраните страницу и просмотрите ее в окне браузера. При правильно работе скрипта по нажатию кнопки "Нажмите!" текстовые поля должны заполняться значениями.
43. Так как все элементы на странице имеют свои уникальные имена (обратите внимание на параметр name в каждом элементе), в скрипте их можно вызывать не по индексам, а по именам в соответствующих массивах:
44. <script>
45. function fillIn(){
46. document.forms['myForm'].elements['name'].value = "Евгений";
47. document.forms['myForm'].elements['email'].value = "vest@list.ru";
48. }
49. </script>
или даже так:
<script>
function fillIn(){
document.myForm.name.value = "Евгений";
document.myForm.email.value = "vest@list.ru";
}
</script>
50. Продемонстрируйте полученный документ преподавателю.
1. Установите Денвер (скопируйте пакет установки из папки задания на практику)
2. Чтобы начать использовать Денвер, проделайте следующие действия:
1. Запустите Денвер, воспользовавшись ярлыком Start Denwer на Рабочем столе. Если вы не создавали ярлыки, то можно запустить Денвер по команде C:\WebServers/denwer\Run.exe.
2. Откройте браузер и перейдите по адресу http://localhost.
3. Вы должны увидеть главную страницу Денвера.
4. Примечание: если вы используете Skype, убедитесь, что он не занимает порты 80 и 443, необходимые для работы Денвера (Инструменты - Настройки - Соединение - Использовать порты... должно быть отключено). Либо же просто завершите работу Skype.
5. Внимание! Если после запуска Денвера http://localhost не открывается, проверьте, не блокируется ли Денвер вашим антивирусом или фаерволом. Например, были замечены проблемы с NOD32 в Windows XP (в нем нужно добавить процесс G:/usr/local/apache/bin/httpd.exe в список исключений, это можно сделать в окне IMON/Настройка/Разное/Исключение).
PHP (официальное название "PHP: Hypertext Preprocessor") — язык скриптования на стороне сервера, встраиваемый в HTML-документ.
Для того, чтобы понять, что это означает, разберем пример простого скрипта:
<html>
<head>
<title>Пример</title>
</head>
<body>
<?php
echo "Привет, это PHP-скрипт!";
?>
</body>
</html>
Создайте данную HTML-страницу и посмотрите как она работает.
Обратите внимание, не программный код выводит на экран теги html-документа, сам гипертекстовый документ содержит небольшой встроенный программный код. Иными словами, вебмастер по-прежнему может создавать гипертекстовые страницы с помошью привычного ему редактора, а затем, при необходимости, встраивать элементы динамической обработки — небольшие скрипты. В рассмотренном примере вся программа состоит из одной строки:
echo "Привет, это PHP-скрипт!";
Сервер "узнает" о том, что это исполняемая программа по специальным тегам:
<? ... ?>
Отличие языка PHP от языков клиентского программирования (таких, как JavaScript), состоит в том, что программный код исполняется на стороне сервера, т.е. еще до того, как страницу получит браузер пользователя.
Все страницы, содержащие программный код, должны иметь расширение .phtml или .php, однако, если вы имеете доступ к админимстрированию сервера, вы можете настроить препроцессор PHP таким образом, чтобы на содержание скрипта проверялись все страницы, включая .html.
Ход работы:
Вывод на экран и переменные в РНР.
1. С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp1.phtml и поместите в начало страницы следующий код:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
<?php
echo "Привет, мир!";
?>
</head>
<body>
</body>
</html>
2. Попробуем ввести в скрипт переменные каждого из перечисленных типов:
<html>
<head>
<title>Вывод на экран и переменные в PHP</title>
</head>
<body>
<?php
$i = 6; // целое
$d = 4.89; // дробное
$str = "PHP для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир! ".$str;
?>
</body>
</html>
3. Обратите внимание, что все переменные в PHP должны начинаться с символа dollar ($), тип переменной не задается в явном виде, он вычисляется препроцессором PHP в зависимости от контекста. В результате работы скрипта на экран первой строкой будет выведена сумма значений двух переменных $i и $d и результат конкатенации двух строк"<br>Привет, мир!" и значения переменной $str.
4. Поддерживаются все арифметические операции и функции, многоуровневые скобки, логические операции, операции увеличения или уменьшения на единицу и многое другое. Кроме того, очень просто и
естественно организуется сравнение если — то — иначе. Для этого в РНР применяется конструкция:
if (условие)
{
код для выполнения N1;
}
else
{
код для выполнения N2;
}
Рассмотрим несложный пример:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$i = 6; // целое
$v = 7;
$d = 4.89; // дробное
$str = "РНР для всех!"; // строка
echo ($i + $d);
echo "<br>Привет, мир!".$str;
if($i == $v)
{
echo $i + $v;
}
else
{
echo $i.$v;
}
?>
</body>
</html>
5. При сравнении на истину применяется два знака равенства для того, чтобы интерпретатор мог без труда отличить сравнение от присваивания. Результат работы скрипта — 67, т.к $i не равно $v, а команда echo $i.$v; объединяет две строки: "6" и "7". Неравенство (ложь) обозначается символами !=, допустимы все остальные арифметические и логические символы и операторы (например, or, and, >, <= и т.д.).
6. В РНР есть средства быстрого изменения переменной на единицу в сторону увеличения или уменьшения. Для этого нужно указать имя переменной и за ней, без знака равенства, — подряд два плюса или минуса соответственно. Например, $a++; — переменная $a будет увеличена на единицу. Поддерживается одновременное присваивание одного значения нескольким переменным — $a = $b = 4;. Введите на странице testphp1.phtml следующий код:
<html>
<head>
<title>Вывод на экран и переменные в РНР</title>
</head>
<body>
<?php
$b = $a = 5;
echo "<br>переменная a=$a, b=$b";
$c = $a++;
echo "<br>переменная a=$a, c=$c";
$e = $d = ++$b;
echo "<br>переменная e=$e, d=$d, b=$b";
$g = 10;
$h = $g += 10;
echo "<br>переменная g=$g, h=$h";
?>
</body>
</html>
7. Обратите внимание, что операция присваивания тоже дает свой результат, так операция $a = 5 дала результат 5, именно поэтому переменная b была проинициализирована в 5. В операции $c = $a++; сначала было произведено присваивание, а затем переменная $a была увеличена на 1. В операции $d = ++$b; сначала была увеличена на 1 переменная $b, а уже затем присвоено получившееся значение.
Передача параметров по ссылке, передача параметров из формы (GET и POST -- запросы).
1. С помощью текстового редактора "Блокнот" (Notepad) создайте файл testphp2.phtml и поместите в начало страницы следующий код:
<html>
<head>
<title>Вывод на экран входящих параметров</title>
</head>
<body>
<?php
echo $message.", ".$name;
?>
</body>
</html>
2. Обратите внимание, что переменные message и name передаются в
адресной строке, отделяются от адреса страницы знаком ?, между собой
разделены амперсантом (&). Вы можете изменить значения переменных
прямо в адресной строке, нажать Enter и получить другой результат
работы скрипта.
3. Создайте страницу testphp2_form.html. Задайте на ней форму:
<form name="myform" method="get" action="testphp2.phtml">
<br>Сообщение:<br>
<input type="text" name="message">
<br>Имя:<br>
<input type="text" name="name">
<br><input type="submit" value="Обработать данные">
</form>
4. Проверьте работоспособность скрипта.
5. Обратите внимание, что на странице с формой элементам назначены
имена, соответствующие именам переменных в принимающем скрипте.
6. Попробуйте изменить метод GET на метод POST, теперь значения
переменных не должны передаваться в открытом виде.
7. Вместо элемента <input type="text" name="name"> определите на странице
выпадающее меню, такое, как приведено ниже:
Василий
8. Измените работу скрипта таким образом, чтобы пользователь мог выбрать
имя из списка, ввести приветствие, нажать кнопку "Обработать
данные" и получить приветствие для выбранного имени.
9. Измените страницу с формой так, чтобы пользователь мог выбрать приветствие, нажав кнопку зависимой фиксации (radiobutton):
Привет
Здравствуйте
Рад Вас снова видеть
Добрый день
10. Измените страницу с формой так, чтобы пользователь мог выбрать фон страницы (средство выбора — на Ваше усмотрение).
Динамическое формирование страницы.
1. Создайте 3 файла с именами: testphp3_inc1.html, testphp3_inc2.html и testphp3_inc3.html. Поместите небольшой текст в каждый.
2. Создайте файл testphp3.phtml, поместите в него следующий код:
<html>
<head>
<title>Динамическое формирование страниц</title>
</head>
<body bgcolor=silver>
<?php
$file = "";
if ($link == 1) { $file = "testphp3_inc1.html"; }
if ($link == 2) { $file = "testphp3_inc2.html"; }
if ($link == 3) { $file = "testphp3_inc3.html"; }
if ($file == "") { ?>
<h3>Пожалуйста, выберите cтихотворение:</h3>
<a href="testphp3.phtml?link=1"> текст N1</a><br>
<a href="testphp3.phtml?link=2"> текст N2</a><br>
<a href="testphp3.phtml?link=3"> текст N3</a>
<? } else {
include($file);
}
?>
</body>
</html>
3. Сохраните созданные файлы, затем запустите файл testphp3.phtml.
4. При выборе ссылки скрипту передается в качестве параметра идентификатор страницы, содержание которой должно быть включено в результирующий файл.
5. Измените скрипт таким образом, чтобы тексты включались в таблицу с желтым фоном; ссылка на страницу, которая импортирована в файл в настоящий момент, была неактивна.
6. Cоздайте массив $titles, который будет содержать названия текстов. Из этого массива должно формироваться содержимое тега <title>...</title> в зависимости от импортируемой страницы.
7. Внизу страницы поместите ссылки Предыдущее, К оглавлению и Следующее. Ссылка Предыдущее должна вести к предыдущему (по порядковому номеру) стихотворению, ссылка Следующее должна вести к следующему (по порядковому номеру) стихотворению. Ссылки должны исчезать со страницы, если предыдущие/следующие стихотворения исчерпаны. Ссылка К оглавлению должна приводить страницу в первоначальный вид и исчезать на странице оглавления.
8. Перенесите файлы testphp3_inc1.html, testphp3_inc2.html и testphp3_inc3.html в папку includes и внесите соответствующие изменения в скрипт.
Работа с файлами.
1. Создайте файл testphp4_form.html, поместите в него форму, которая будет содержать текстовое поле <textarea name=message cols=10 rows=4></textarea>, поле редактирования <input type=text name=person> и кнопку для отправки данных.
2. Настройте форму таким образом, чтобы данные направлялись скрипту testphp4.phtml.
3. Создайте файл testphp4.phtml, поместите в него следующий код:
<html>
<head>
<title>Гостевая книга</title>
</head>
<body bgcolor=silver>
<?php
$filename = "messages.txt";
$fp = fopen($filename,"a");
if($fp)
{
fputs($fp, $message." ".$person);
fclose($fp);
}
include($filename);
?>
</body>
</html>
4. Создайте пустой файл messages.txt — в него будут сохраняться все сообщения пользователей.
5. Запустите файл testphp4_form.html, убедитесь в работоспособности скрипта.
6. Должно происходить следующее: переменные $message и $person принимаются скриптом testphp4.phtml, открывается файл messages.txt (делается это методом fopen, подробнее о нем читайте), помещает в его конец строку, состоящую из значений переданных переменных, разделенных пробелом (делается это методом fputs, подробнее о нем читайте).
7. Измените работу скрипта таким образом, чтобы сообщения и имена пользователей выводились в отформатированном виде, например, поместите их в ячейки таблицы.
8. Измените работу скрипта таким образом, чтобы форма находилась в файле testphp4.phtml, иными словами, удалите файл testphp4_form.html.
9. В начало страницы поместите guestbook.jpg .
Комментариев нет:
Отправить комментарий