Главная / Другое / Методические рекомендации для преподавателей по технологии создания веб-квеста с помощью визуального редактора сайтов Web Page Maker

Методические рекомендации для преподавателей по технологии создания веб-квеста с помощью визуального редактора сайтов Web Page Maker

Технология создания веб-квеста с помощью визуального

редактора сайтов Web Page Maker


Цель: Научиться работать в визуальном редакторе создания сайтов, научиться создавать тематические HTML сайты из нескольких страниц.


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


Сайт –это набор связанных веб-страниц.


Гиперссылкавыделенный объект, связанный с другим файлом и реагирующий на щелчок мыши. Гиперссылки обеспечивают связь веб-страницы с другими страницами и объектами в Интернет. Кроме того, с использованием гиперссылок можно осуществлять переход между различными частями в пределах одной вeб-страницы.


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

Microsoft Internet Explorer является одним из популярных браузеров сети Интернет


Web Page Maker – это простой визуальный инструмент для создания веб – страниц. С его помощью вы сможете создать свой сайт не обладая никакими знаниями HTML. Просто перетаскивайте мышкой на рабочее пространство программы изображения, текст, музыку и видео. Во время работы с лёгкостью можно передвигать объекты по всей странице.


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

(Заранее создайте папку с необходимыми для сайта рисунками, музыкой, видео, текстом и т. д )


Web Quest - это проблемное задание с элементами ролевой игры, для выполнения которого используются информационные ресурсы Интернета. Поиск проходит по определенному поэтапному маршруту, направленному на решение поставленной задачи.

Web Quest состоит из следующих страниц : Введение, Задача, Проблемный вопрос, Гипотезы, Роли, Ресурсы , Критерии оценивания, Заключение.

  1. Сhello_html_25ba483e.pngоздание макета страницы 

1). Запустите редактор сайтов Web Page Maker, щелкнув левой кнопкой мыши по значку, расположенному на рабочем столе.

2). Выберите Файл-Новый сайт . В результате у вас появится первая пустая страница сайта в виде белого полотна с сеткой. В правой стороне отображаются страницы сайта.

Вhello_html_m53acff5.jpgНИМАНИЕ ! Первая страница всегда называется index

hello_html_2d63370b.png






3).Создадим Макет страницы. Для этого можно использовать различные изображения, фигуры, линии и т.д.

  1. Иhello_html_m30f16d52.pngспользуем прямоугольники : Вставка-Фигура-Прямоугольник. Один прямоугольник расположим горизонтально, растянув до правой границы , второй – вертикально, растянув вниз до нижней границы экрана. Щелкнув, по очереди, два раза левой кнопкой мыши по прямоугольникам , на вкладке Свойства –Цвета и границы, изменим цвета фигур по своему усмотрению.

  2. Вставим рисунок Вставка-Рисунок-из библиотеки

  3. Вhello_html_m46e0ae5c.png

    Введение

    верхней части рабочего окна введем заголовок нашего веб-квеста « Web Quest в образовании».

(Нажмите на кнопку ,

или выберите

в меню Вставка – hello_html_m75f19e0.gifтекст,

откроется окно текстового редактора).

d) Введите заголовок

первой страницы – «Введение»


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

hello_html_430ef01d.png






И выравнивание по центру

hello_html_3bb380be.png




5) Итак, мы создали макет страницы «Введение».


2hello_html_5fcb4d78.png. Добавление новых страниц

1). Для добавления второй страницы -«Задача», перейдите в Содержание сайта и щелкнув правой кнопкой мыши по названию первой страницы index, выберите –Клонировать страницу

2hello_html_5395ad99.gif). Появившуюся страницу page2, следует переименовать в страницу – zadacha. Кликните правой кнопкой мыши на имени файла и нажмите Переименовать страницу.

3). Аналогично, клонируя первую страницу и переименовывая новую, получим пустые страницы:

phello_html_m165e7ade.pngroblema -Проблемный вопрос

gipoteza - Гипотезы

roli - Роли

resurs - Ресурсы

ocenka - Критерии оценивания

zakluchenieЗаключение

Содержание сайта позволяет переходить с

одной страницы на другую.

4) Заголовки страниц переименуйте в соответствии с их названиями.

3. Создание панели навигации

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

кhello_html_10b4601.pngнопку


2).Перейдите на первую страницу Введение- index.

3hello_html_m2b27598c.png).Выберите категорию и стиль панели навигации в соответствующем диалоговом окне и жмите Ок.

4hello_html_m317733b4.png).  На вкладке  Параметры введите текст заголовка для каждой кнопки. Нажмите OK .

hello_html_m12133477.gif



hello_html_m7b925ff7.pnghello_html_eca4e22.png

hello_html_m12133477.gif



5hello_html_m9704381.png). Для создания ссылки с кнопки на другую страницу вашего сайта , наведите курсор мыши на текст для его выделения (с левой стороны вкладки Параметры), щёлкните по нему (обычно дважды).


















Выберите соответствующую страницу из выпадающего списка Адрес (URL) .

! Вы можете изменить шрифт и размер шрифта текста на кнопках.


6). Чтобы скопировать панель навигации на другую страницу на вашем сайте:

  1. Выберите панель навигации на первой странице. 

  2. Далее Правка> Копировать.

  3. Переключитесь на другую страницу.

  4. Выберите Правка> Вставить.

  5. После того как вы скопировали панель навигации на другую страницу, Web Page Maker автоматически установит её на то же место, что и на первой странице.

4. Заполнение страниц сайта информацией

1).Нажмите кнопку Текст в панели инструментов или выберите Вставить -> Текст.

Пhello_html_m69937e54.pngосле двойного клика появится текстовое поле и затем окно Текстового редактора . Наберите или вставьте нужный текст.

2) Для добавления изображения на веб -страницу:

Нажмите кнопку  Рисунок на панели инструментов

Выберите изображение на жёстком диске или в библиотеке программы.

3hello_html_255c32d3.png) Информацию для заполнения страниц (текст и рисунки) возьмите из папки на рабочем столе : «Образовательный WQ» hello_html_m53d4ecad.gif

5. Просмотр страниц в браузере 

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

hello_html_6bd53fd0.png

1. Нажмите кнопку  Просмотр (F5) в панели инструментов. По окончанию просмотра просто закройте страницу в браузере.


Примечание3: при просмотре ваших страниц в виде HTML вы можете проверить работоспособность всех локальных ссылок на своём сайте, просто пройдитесь по ссылкам и удостоверьтесь в том, что все они работают

10. Сохранение документа 

Чтобы сохранить ваш сайт :

1). Выберите"Сохранить как" из меню Файл .

2). Появится диалоговое окно "Сохранить как ". Введите имя вашего сайта в соответствующее окно (без расширения). Выберите папку «Образовательный WQ»

3). Нажмите кнопку  Сохранить . Расширение (.wss) будет добавлено автоматически.

Примечание4: эта команда сохраняет текущий сайт в файл .wss. Это значит, что все странички вашего сайта сохранены в один единый файл.





11. Публикация сайта

 Создайте на диске С: новую папку, например: «Мой квест». Чтобы получить формат Html, выберите меню Файл-Опубликовать. Настройте диалоговое окно на публикацию в созданную локальную папку

hello_html_mfe762a9.png



Вhello_html_m6f62abd7.png окне Параметры страницы выберите настройки:





Пhello_html_45044b6.pngрограмма автоматически преобразует ваши страницы в формат .html. и поместит их в выбранную вами папку или на вашем компьютере или на веб - сервере.



Методические рекомендации для преподавателей по технологии создания веб-квеста с помощью визуального редактора сайтов Web Page Maker
  • Другое
Описание:

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

Подробное описание позволяет преподавателям изучить технологию работы в редакторе Web Page Maker и научиться создавать, как отдельные web страницы, так и сам сайт с использованием визуальных средств.

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

Автор Гафурова Ирина Генриховна
Дата добавления 08.12.2014
Раздел Другое
Подраздел Другое
Просмотров 646
Номер материала 6780
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓