Практическая работа №11. Тема:Создание Web-сайта в программе

Тема: Создание Web-сайта в программе

Цель: формировать навыки создания web-сайтов с помощью программы Front Page

Оборудование: ПК

Краткие теоретические сведения:

Microsoft FrontPage 2003 – это версия мощной системы для поддержки web-сайтов. При его разработке особое внимание было направлено на изучение пожеланий конечных пользователей. В результате были выработаны три основных требования к новой версии программы: простота создания Web-узла, простота обновления Web-узла и возможность тесного взаимодействия с другими приложениями Microsoft Office. Основные преимущества FrontPage 2003: - позволяет быстро и профессионально создавать Web-узлы высокого уровня исполнения. Пользователь теперь может точно позиционировать элементы Web-страницы, импортировать и редактировать HTML-файлы, а также применять новейшие Web-технологии; - встроенный удобный HTML-редактор, помимо простейшего в использовании WYSIWYG-редактора с генератором HTML-кода, является и мощным HTML-редактором. Благодаря этому пользователи, которые привыкли работать непосредственно с HTML-кодом, могут делать это еще эффективнее. В FrontPage 2003 включены средства верстки Web-страниц и их оформления с помощью согласующихся по цвету элементов. При этом активно используются такие передовые технологии, как Dynamic HTML и Cascading Style Sheets, делающие страницы особо привлекательными; - простота интеграции с базами данных, упрощает построение запросов к базам данных и встраивание их в Web-страницы; появилась возможность создавать Web-страницы, в которых информация обновляется всякий раз, когда пользователь открывает или обновляет их в окне браузера; 2 - отображает все компоненты, из которых построен создаваемый Web-узел, что позволяет убедиться в правильной его работе. В свою очередь, это дает возможность очень просто обновлять Web-узел. Анализ и обновление Web- узлов упрощаются и за счет новых статистических отчетов, в которые входит информация об общем числе и размере файлов, о медленно загружающихся страницах, о неиспользуемых файлах и о разорванных гиперсвязях; - автоматически исправляет все ссылки на страницы или файлы при переименовании или перемещении этих объектов, а также автоматически можно вставлять ссылки на все документы, относящиеся к заданной категории. FrontPage состоит из трех основных компонентов: 1) Explorer (Проводник) обеспечивает создание структуры документов Web, и предоставляет мастеров и шаблоны, которые позволяют это сделать всего за несколько минут. Если Web уже установлен, проводник дает визуальное представление всего документа Web и позволяет поддерживать его в дальнейшем; 2) Editor (Редактор) позволяет создавать отдельные страницы Web или редактировать ранее введенные страницы в визуальном режиме; 3) Personal Web Server (Персональный сервер Web) обеспечивает проверку всех аспектов работы данного Web и его обслуживание в Internet.

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

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

Домашняя (главная) страница сайта — первая страница, появляющаяся при загрузке сайта в окно обозревателя.

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

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

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

•WYSIWYG-редакторы — («What You See Is What You Get» — «Что видишь, то и получишь») — визуальные редакторы. Наиболее популярными визуаль­ными редакторами сегодня являются Micromedia Dream Weaver и Microsoft
FrontPage.

•HTML-редакторы—программные средства, позволяющие создавать код страницы вручную. При работе в таком редакторе требуется знать язык разметки гипертекста HTML. Простейшим HTML-редактором является стандартное приложение операционной системы Windows Блокнот.

Ход работы:

1.Откройте программу FrontPage и

· создайте папку Мой сайт в своей папке.

· Запустить программу FrontPage (Пуск R Все программы R Microsoft Office - Microsoft Office FrontPage2003).

· Создайте новый сайт Файл - Создать. В Области задач (окно справа) щелкните на ссылке - Одностраничный Web-узел.

· В открывшемся окне Шаблоны веб-узлов щелкните на кнопке Обзор, откройте в этом окне в строке Папка - Мой компьютер - Общие документы, найдите свою папку и в ней выделите одним щелчком папку Мой сайт и нажмите кнопку Открыть.

· В этом же окне в списке шаблонов выберите Одностраничный Web - узел и щелкните ОК.

· Откройте первую страницу сайта, дважды щелкнув имя index.htm в списке папок.

· Щелкните правой кнопкой мыши в любом месте страницы и в контекстном меню выберите Свойства страницы - вкладку Общие и в строке Название введите имя страницы (например, Главная страница) - ОК.

1).
2).	3).	4).
5).	10)
6).
7).
8).
9)

· Вставьте таблицу из 3 столбцов и 7 строк. Для этого в меню Таблица выберите команду Вставить - Таблицу, задайте количество строк - 7, столбцов - 3. В разделе Границы введите размер 0, щелкните ОК.

· Объедините ячейки, как показано на рисунке.

· Уменьшите размер левой колонки таблицы (потянуть за правую границу колонки влево).

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

· Вставка рисунка в качестве фонового изображения. В меню Формат щелкните Фон. В открывшемся окне перейдите на вкладку Форматирование и щелкните кнопку Обзор. Далее Мои документы - Мои рисунки - Рисунок 1. Выделите нужный файл - Открыть - ОК. (Чтобы просмотреть имеющиеся рисунки, на панели инструментов окна Рисунок нужно щелкнуть на кнопке Представления и выбрать Эскизы)

· Введите в строку 1 таблицы заголовок страницы Мой город. Для заголовка можно использовать объект Word Art.

· Вставьте рисунок в ячейку 2. Для этого щелкните левой кнопкой мыши внутри данной ячейки. В меню Вставка выберите Рисунок, а затем Из файла. В открывшемся окне Рисунок в строке Папка выберитеМои документы - Мои рисунки - Наш грод. Выделите файл gerb и щ елкните ОК. Аналогично вставьте рисунок в ячейку 4.

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

· Просмотрите получившуюся страницу, щелкнув в нижней части окна на кнопке Просмотр.

· Вернитесь в режим Конструктор, щелкнув на соответствующей кнопке.

· Внесите изменения в созданные элементы (размер, расположение на странице, цвет), если это необходимо.

· Введите в ячейку 3 текст стихотворения:

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

· Выполните форматирование текста.

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

· Разбейте ячейку 10 на 4 столбца (установите курсор внутри ячейки, щёлкните правой кнопкой мыши, выберите в контекстном меню команду Разбить ячейки, задайте нужное количество столбцов).

· Вставьте рисунки в образовавшиеся ячейки. Смотрите образцы страниц в папке Temp на Server - Внешний вид страниц.

· Создание активной кнопки:

1. Установите курсор внутри ячейки 5.

2. Вставка выберите Веб-компонент - эффект интерактивная кнопка - Готово

3. В открывшемся окне Меняющаяся кнопка выберите вид кнопки, в поле Текст введите текст На главную

4. Установите стиль шрифта надписи кнопки, щелкнув вкладку Шрифт. Здесь же можно выбрать Цвет кнопки Исходный, Цвет при наведении, Цвет при нажатии. На вкладке Рисунок щелкните переключатель Использовать для кнопки формат GIF и прозрачный фон.

5. Скопируйте эту кнопку в ячейки 6,7 и 8.

6. Измените параметры на второй кнопке. Для этого щелкните на ней правой кнопкой мыши - командаСвойства кнопки. Текст На главную замените на История. Щелкните ОК.

7. Аналогично измените параметры на третьей и четвёртой кнопке. Текст На главную замените наПамятники и Предприятия соответственно.

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

· Создайте вторую страницу сайта.

1. Перейдите на вкладку Веб-узел.

2. Выделите строку index.htm одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка - index_копия(1).htm. Щелкните правой кнопкой мыши на имени, выберите командуПереименовать. Замените имя index_копия(1).htm на st2.htm Нажмите клавишу Tab.

3. Замените текст названия Главная страница на История города.

4. Двойным щелчком мыши откройте скопированную страницу st2.htm

· Замените заголовок страницы Мой город на Это нашей истории строки.

· Удалите стихотворение, которое вводили на Главной странице. Вместо него введите текст:

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

16 июля 1932 г. Вступил в строй лесозавод - первое промышленное предприятие Комсомольска.

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

26 мая 1933 г. Начато строительство завода "Амурсталь".

25 марта 1936 г. Сдана в эксплуатацию телефонная станция, на 600 абонентов.

12 июня 1938 г. Судостроители Комсомольска заложили первое судно.

15 февраля 1942 г. Завод "Амурсталь" вступил в строй.

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

1 сентября 1954 г. Открыт педагогический институт.

5 декабря 1961 г. Прошли трамваи по новой линии: площадь Металлургов - Дзёмги.

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

· Отформатируйте текст по вашему усмотрению.

· Удалите фотографии, которые использовались на Главной странице и вставьте новые, как показано на образце (читайте п.22).

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

· Создайте третью страницу сайта.

1. Перейдите на вкладку Веб-узел.

2. Выделите строку st2.htm одним щелчком левой кнопки мыши и скопируйте ее. В этом же окне появилась еще одна строка - st2_копия(1).htm Выделите эту строку, затем еще раз щелкните на имени левой кнопкой мыши. Замените имя st2_копия(1).htm на st3.htm Нажмите клавишу Tab.

3. Замените текст названия История города на Памятные места.

4. Двойным щелчком мыши откройте скопированную страницу st3.htm

· Замените заголовок страницы Это нашей истории строки на Памятные места.

· Удалите текст и фотографии, которые вы использовали на предыдущей странице, и замените их на новые как показано на образце (читайте п.22).

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

· Создайте четвёртую страницу сайта.

1. Перейдите на вкладку Веб-узел.

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

3. Замените текст названия Памятные места на Предприятия города.

4. Двойным щелчком мыши откройте скопированную страницу st4.htm

· Замените заголовок страницы Памятные места на Предприятия города.

· Удалите текст и фотографии, которые вы использовали на предыдущей странице, и замените их на новые как показано на образце (читайте п.22).

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

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

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

· Повторите эти действия на страницах index.htm, st2.htm, st3.htm

· Сохраните изменения на каждой странице (меню Файл - Сохранить)

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

· После каждого изменения не забывайте сохранять каждую страницу (меню Файл - Сохранить)

· Закройте все окна. Откройте файл index.htm из вашей папки Мой сайт и просмотрите созданный сайт.

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

· Откройте созданные HTML файлы в блокноте и просмотрите программные коды.

5.Оформить отчет.

Контрольные вопросы:

1. Что такое web-дизайн?

2. Что такое web-страница, web-сайт?

3. Этапы создания сайта.

4. Требования к оформлению сайта.

5. Какое должно быть количество знаков в строке сайта?

6. Максимальный объем web-страницы?

7. Какие возможности программы FrontPage?

8. Что представляет собой интерфейс программы FrontPage?

9. Как с помощью программы FrontPage создать web-страницу?

10. Что такое web-узел?

Дата добавления: 2015-07-13