Создание web-сайта с помощью Microsoft FrontPage
Web-сайты и Web-страницы
Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и так далее.
Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.
Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.
Web-страницы сайта могут содержать динамические объекты (исполнимые модули), созданные с использованием сценариев на языках JavaScript и VBScript или элементов Управления ActiveX. Расположенные на сайте управляющие элементы (например, кнопки) позволяют пользователю запускать те или иные динамические объекты.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Основными достоинствами HTML-документов являются: малый информационный объем; возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Родной край». Сначала необходимо разработать проект сайта, то есть определить, сколько Web-страниц будет входить в сайт, какова будет их тематика и как они будут связаны между собой.
Пусть наш сайт кроме титульной страницы будет содержать: страницы «Растения», «Животные», «Места», содержащие информацию по данным темам для Челябинской области; страницы «Редкие растения», «Лекарственные растения», «Животные», «Места», содержащие информацию о некоторых представителях данных тем в горно-лесном крае Челябинской области вместе с видео-, аудиоклипами, иллюстрации; страницу «Анкета», содержащую анкету для посетителей сайта.
Инструментальные средства создания Web-страниц
Создание Web-страниц непосредственно на HTML требует больших усилий, времени и досконального знания синтаксиса языка. Применение специальных инструментальных программных средств (HTML-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Web-страницы можно создавать в Блокноте, в любой программе из пакета Microsoft Office (Word, PowerPoint и др. ).
Существуют мощные инструментальные системы разработки сайтов, например Microsoft FrontPage или Macromedia Dre-amweawer. Для разработки отдельных Web-страниц можно использовать свободно распространяемые редакторы FrontPage Express (входит в состав Microsoft Internet Explorer) и Netscape Composer (входит в состав Netscape Communicator).
Создание Web-страниц с помощью
Microsoft FrontPage 2003
Назначение FrontPage
Microsoft FrontPage 2003 - это версия мощной системы для поддержки web-сайтов. При разработке Microsoft FrontPage 2003 особое внимание было направлено на изучение пожеланий конечных пользователей. В результате были выработаны три основных требования к новой версии программы: простота создания Web-узла, простота обновления Web-узла и возможность тесного взаимодействия с другими приложениями Microsoft Office.
Основные преимущества новой версии заключаются в следующем:
FrontPage 2003 позволяет быстро и профессионально создавать Web-узлы высокого уровня исполнения. Пользователь теперь может точно позиционировать элементы Web-страницы, импортировать и редактировать HTML-файлы, а также применять новейшие Web-технологии;
удобный HTML-редактор, встроенный в FrontPage 2003, помимо простейшего в использовании WYSIWYG-редактора с генератором HTML-кода, является и мощным HTML-редактором. Благодаря этому пользователи, которые привыкли работать непосредственно с HTML—кодом, могут делать это еще эффективнее. В FrontPage включены средства верстки Web-страниц и их оформления с помощью согласующихся по цвету элементов. При этом активно используются такие передовые технологии, как Dynamic HTML и Cascading Style Sheets, делающие страницы особо привлекательными; простота интеграции с базами данных. FrontPage 2003 упрощает построение запросов к базам данных и встраивание их в Web-страницы. Более того, появилась возможность создавать Web-страницы, в которых информация обновляется всякий раз, когда пользователь открывает или обновляет их в окне браузера;
FrontPage 2003 отображает все компоненты, из которых построен создаваемый Web-узел, что позволяет убедиться в правильной его работе. В свою очередь, это дает возможность очень просто обновлять Web-узел. Анализ и обновление Web-узлов упрощаются и за счет новых статистических отчетов, в которые входит информация об общем числе и размере файлов, о медленно загружающихся страницах, о неиспользуемых файлах и о разорванных гиперсвязях;
FrontPage 2003 автоматически выполняет такие рутинные операции, как автоматическое исправление всех ссылок на страницы или файлы при переименовании или перемещении этих объектов, а также автоматически можно вставлять ссылки на все документы, относящиеся к заданной категории.
Запуск программы
Итак, запустим программу Пуск - Программы - Microsoft Office - Microsoft Office FrontPage 2003. Но предварительно на диске необходимо создать папку, например с именем Сайт (в моей работе - Krai),в которой будут храниться все страницы сайта и вся графика. Замечание: после каждой проделанной операции на странице (например, напечатали текст, вставили картинку и т. д. ) файл необходимо сохранять и просматривать в режиме Preview (Просмотр).
Создание Web – страницы
Для создания страницы надо выполнить пункт меню File - New - Page - Normal Page (Файл – Создать – Пустая страница).
Страницу сохранить File - Save As (Файл – Сохранить как). Указать предварительно созданную папку.
Страницу можно заполнить фоном (Темой) выполнив пункт меню Format – Theme (Формат – Тема). Выбрать с правой стороны понравившуюся тему.
Ввод текста: тексты вводятся обычным образом, что делает программу проще по сравнению с предыдущими версиями.
Вставка рисунков: выполнить пункт меню Insert - Picture - From File (Вставка – Рисунок – Из файла). Картинки должны предварительно быть скопированы в ту же папку где была сохранена данная страница. Если на страницы располагается текст и рисунки, то удобнее страницу верстать при помощи таблицы.
Вставка таблицы: выполнить пункт меню Table - Insert – Table (Таблица – Вставить – Таблица). Задаётся шаблон таблицы - количество столбцов (Columns) и количество строк (Rows). Если таблица используется в качестве вёрстки страницы, то в один столбец вставляется рисунок, а в другой текст, а границы таблицы скрывают следующим образом: в поле Borders – Size (Границы – Размер) указывают значение, равное 0.
Создание гиперссылки: выделить объект и щёлкнуть по инструменту "Гиперссылка".
Создание фреймовой структуры
Для создания фреймовой структуры надо выполнить пункт меню File - New - Page - Frames Page - Banner and Contents (Файл – Создать – Другие шаблоны страниц – Страница рамок).
Заполнение фреймов темами: щёлкнуть по кнопке New Page (Создать страницу). Затем выполнить пункт меню Format – Theme (Формат – Тема).
Сохранение файла: File - Save As (Файл – Сохранить как). Каждый фрейм сохраняется в отдельный файл. Удобнее давать следующие имена фреймам: основной файл - index. html, верхний фрейм - top. html, левый фрейм - menu. html, центральный фрейм - main. html. Но это необязательно.
Создание бегущей строки
Для создания бугущей строки надо выполнить пункт меню Insert - Component – Marquee (Вставка – Веб-компонент – Бегущая строка).
В поле Текст ввести текстовую строку.
Direction - направление движения;
Speed - скорость и частота движения;
Behavior - прокрутка строки;
Align whis text - положение текста внутри строки.
Для того, чтобы изменить цвет и размер шрифта щёлкнуть в данном окне по кнопке Style - Format – Font (Стиль – Формат – Шрифт).
Создание кнопок
Для создания кнопок выполняется пункт меню Insert - Component - Hover Button(Вставка – Меняющаяся кнопка).
В поле Text (Текст) на закладке Button (Кнопка) вводится название кнопки, выбирается стиль кнопки и задается ссылка с помощью кнопки Browse (Обзор). Размер текста, исходный цвет кнопки, цвет при наведении и цвет кнопки при нажатии можно изменить на закладке Font (Шрифт). Размеры кнопки можно задать на закладке Picture (Рисунок).
Для того чтобы страница отображалась в нужном фрейме необходимо правой кнопкой мыши щелкнуть по созданной на странице кнопке, выбрать пункт Свойства страницы – Конечная рамка по умолчанию.
Задать часть страницы, выделив фрейм.
Динамический HTML
На рисунки и текст можно поставить эффекты динамики (динамический HTML). Для этого надо щёлкнуть по рисунку или выделить фрагмент текста и выполнить пункт меню View - Toolbars - DHTML Effects (Вид – Панели инструментов – Эффекты DHTML). Появится панель DHTML Effects (Эффекты DHTML).
В ней в поле On (Вкл) щёлкнув по стрелке назначить действие:
Click - по щелчку;
Double click - по двойному щелчку;
Mouse over - при наезде мышью;
Page load - при загрузке страницы.
После выбора действия становится активным поле Apply (Применить). В нём назначается динамический эффект. Затем становится активным поле, в котором назначается направление движения объекта.
Формы на Web-страницах
Для того чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам сайта, на его страницах размещают формы. Формы включают в себя управляющие элементы различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и так далее.
Разместим на странице «Анкета» анкету для посетителей, чтобы выяснить, кто из наших посетителей, с какими целями и с помощью каких программ получает и использует информацию из сети Интернет, а также выясним, какую информацию они хотели бы видеть на нашем сайте.
Вся форма заключается в контейнер
. В первую очередь выясним имя посетителя нашего сайта и его электронный адрес, чтобы иметь возможность ответить ему на замечания и поблагодарить за посещение сайта.Текстовые поля. Для получения этих данных разместим на форме два однострочных текстовых поля для ввода информации. Текстовые поля создаются с помощью тэга
Для того чтобы анкета «читалась», необходимо разделить строки с помощью тэга перевода строки
.
Для этого необходимо создать группу переключателей («радиокнопок»). Создается такая группа с помощью тэга со значением атрибута TYPE="radio". Все элементы в группе должны иметь одинаковые значения атрибута NAME. Например, NAME="group".
Еще одним обязательным атрибутом является VALUE, которому присвоим значения "schoolboy", "student" и "teacher". Значение атрибута VALUE должно быть уникальным для каждой «радиокнопки», так как при ее выборе именно они передаются серверу.
Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.
Добавить HTML-код, создающий группу переключателей для выбора одного варианта. Просмотреть страницу в браузере:
Укажите, к какой группе пользователей вы себя относите:
yчaщийcя
студент
учитель<ВR>
Флажки. Далее мы хотим выяснить по какой теме нужны знания. Здесь из предложенного перечня он может выбрать одновременно несколько вариантов, пометив их флажками, флажки создаются в тэге со значением атрибута TYPE="checkbox".
Флажки, объединенные в группу, могут иметь одинаковые значения атрибута NAME. Например, NAME="group". Еще одним обязательным атрибутом является VALUE, которому присвоим значения "www", "e-mail" и "ftp". Значение атрибута VALUE должно быть уникальным для каждого флажка, так как при его выборе именно они передаются серверу.
Атрибут CHECKED, который задает выбор кнопки по умолчанию, в данном случае не используется.
Добавить HTML-код, создающий флажки для выбора нескольких вариантов. Просмотреть страницу в браузере:
По какой теме Вам чаще нужны знания?
растения
животные
Поля списков. Теперь выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка, из которого можно выбрать только один вариант. Для реализации такого списка используется контейнер , в котором каждый элемент списка определяется тэгом
Добавить HTML-код, создающий раскрывающийся список для выбора одного варианта. Просмотреть страницу в браузере:
Какой наукой Вы увлекаетесь?
Текстовая область. В заключение поинтересуемся, что хотел бы видеть посетитель на наших страницах, какую информацию следовало бы в них добавить. Так как мы не можем знать заранее, насколько обширным будет ответ читателя, отведем для него текстовую область с линейкой прокрутки. В такое поле можно ввести достаточно подробный текст.
Создается такая область с помощью тэга