Создание фрагмента веб-сайта

Создание веб-сайта в редакторе FrontPage

Задание1. Скопируйте папку Белорусские писатели из папки D:\Student)\Рабочие материалы\Web-конструирование в свою папку.

Задание2. Запустите редактор FrontPage. Создайте пустую страницу с именем нов_стр_1.htm

Задание 3. Перед началом работы вставьте пустую строку для выравнивания расположения информации. Далее установите свойства страницы:

• название страницы – Беларускія класікі

• цвет фона - бежевый

• язык – белорусский

• набор знаков - Юникод UTF-8)

Сохраните пустую страницу в файле index.htm в папке Белорусские писатели.

Задание 4. Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. Для вставки таблицы можно воспользоваться меню Таблица. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 720 точек, высота – 560 точек в соответствии с размером рамки, толщина границ -1, интервал между ячейками–1, фоновый рисунок – ramka.gif из папки с рисунками.

Внутрь рамки вставьте еще 2 таблицы: из 1 строки и 2 столбцов и таблицу из 1 строки и 3 столбцов шириной 80 процентов. Для ячеек первой таблицы поставьте ширину 30 и 70 процентов, а для ячеек второй таблицы – ширину по 33 процента

Вставьте в ячейки таблицы информацию. Картинки расположены в папке ris\Белорусские писатели, в которую вы сохраняли эту веб-страницу. Отформатируйте текстовую информацию по образцу (рис.1). Установите размеры рисунков также в соответствии с рисунком 1.

Рис. 1.

Задание5. Для привлечения внимания к информации создайте бегущую строку. Установите курсор в пустую строку вверху страницы и выполните действия: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки введите текст: Класікі беларускай літаратуры, задайте направление и скорость движения, время задержки. С помощью команды Стиль\Формат\Шрифт измените размер, цвет, начертание шрифта бегущей строки. Сохраните изменения и просмотрите, как выглядит главная страница в браузере (Файл\Просмотреть в обозревателе).

Задание 6. Создайте вторую страницу, содержащую информацию о Янке Купале, как показано на рисунке 2 с помощью команды Файл\Создать\Пустая страница. Установите свойтва страницы: название, язык, набор знаков и сохраните с именем Kupala.htm в папку Белорусские писатели, которая расположена в вашей папке.

Рис. 2.

Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 720 точек, высота – 560 точек в соответствии с размером рамки, толщина границ - 1, интервал между ячейками – 1, фоновый рисунок – ramka.gif.

Внутрь рамки вставьте еще 3 таблицы шириной 80 процентов: из 1 строки и 1 столбца для размещения заголовка, из 1 строки и 2 столбцов для размещения рисунка и биографии, из 1 строки и 3 столбцов для размещения гиперссылок. Для ячеек второй таблицы поставьте ширину 30 и 70 процентов, а для ячеек третьей таблицы – ширину по 33 процента

Вставьте в ячейки таблицы информацию. Картинки расположены в папке ris/Белорусские писатели, в которую вы сохраняли эту веб-страницу. Отформатируйте текстовую информацию по образцу (рис.2). Установите размеры картинок также в соответствии с рисунком 2. Для последующего создания переходов по страницам вставьте стрелки из файлов вперед.gif и назад.gif, которые хранятся в папке ris\buttons.

Чтобы вставить переход на главную страницу, нужно добавить интерактивную кнопку (Вставка\Веб-компонент\Интерактивная кнопка\Металлическая капсула 8\текст кнопки Галоўная\Ок)

Задание 7. Создайте страницу, содержащую информацию о Якубе Коласе, как показано на рисунке 3 и сохраните в папку Белорусские писатели с именем Kolas.htm

Для этого нужно открыть файл Kupala.htm и сохранить его с именем Kolas.htm в папку Белорусские писатели. После чего изменить название веб-страницы в свойствах, удалить всю информацию из таблицы и вставить текст и рисунки о Якубе Коласе. Получится следующая страница:

Рис. 3.

Задание 8. Аналогичным образом создайте страницу, содержащую информацию о Максиме Багдановиче, как показано на рисунке 4 и сохраните в папку Белорусские писатели с именем Bagdanovich.htm

Выполнять аналогично заданию 7.

Рис. 4

Задание 9. Создайте гиперссылку для движения с главной страницы на страницу Я.Купала.

Для создания гиперссылки требуется перейти в документ index.htm, выделить текст Я.Купала и с помощью меню Вставка\Гиперссылка вызвать диалоговое окно, в котором указать адрес перехода (имя файла Kupala.htm). Сохранить изменеия. Проверить работу гиперссылки в браузере (Файл\Просмотреть в обозревателе).

Задание 10. Создайте в редакторе Front Page текстовые и графические гиперссылки между страницами веб-сайта «Белорусские писатели», как показано на рисунке 5.

Рис.5

Разработка фрагмента веб-сайта в редакторе Microsoft FrontPage

Задание1. Скопируйте папку Замки Беларуси из папки Student на Prepod(Z:)\Рабочие материалы\Web-конструирование в свою папку.

Задание2. Запустите редактор FrontPage. Создайте пустую страницу с именем нов_стр_1.htm

Задание 3. Перед началом работы вставьте пустую строку для выравнивания расположения информации. Далее установите свойства страницы:

• название страницы – Замки Беларусси

• цвет фона – выбрать на свой вкус (не яркий)

• язык – русский

• набор знаков - Юникод UTF-8)

Сохраните пустую страницу в файле index.htm в папке Замки Беларуси.

Задание 4. Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. Для вставки таблицы можно воспользоваться меню Таблица. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 640 точек, высота – 480 точек в соответствии с размером рамки, толщина границ -1, интервал между ячейками–1, фоновый рисунок – svitok.gif из папки с рисунками ris.

Внутрь рамки вставьте еще таблицу: из 3 строк и 2 столбцов шириной и высотой 80 процентов.

Вставьте в ячейки таблицы информацию. Картинки расположены в папке ris из папки, в которую вы сохраняли эту веб-страницу. Отформатируйте текстовую и графическую информацию по образцу (рис.1). Установите размеры рисунков также в соответствии с рисунком 1.

Рис. 1.

Задание5. Для привлечения внимания к информации создайте бегущую строку. Установите курсор в пустую строку вверху страницы и выполните действия: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки введите текст: Виртуальное путешествие, задайте направление и скорость движения, время задержки. С помощью команды Стиль\Формат\Шрифт измените размер, цвет, начертание шрифта бегущей строки. Сохраните изменения и просмотрите, как выглядит главная страница в браузере (Файл\Просмотреть в обозревателе).

Задание 6. Создайте вторую страницу, содержащую информацию о Несвижском замке, как показано на рисунке 2 с помощью команды Файл\Создать\Пустая страница. Установите свойства страницы: название, язык, набор знаков и сохраните с именем nesvizh.htm в папку Замки Беларуси, которая расположена в вашей папке.

Рис. 2.

Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 640 точек, высота – 480 точек в соответствии с размером рамки, толщина границ - 1, интервал между ячейками – 1, фоновый рисунок – svitok.gif.

Внутрь рамки вставьте еще таблицу шириной 80 процентов из 4 строк и 1 столбца. В первой строке разместите заголовок, во второй строке – рисунок, в третьей строке - описание памятника из файла zamki.txt, в четвертой строке – разделительную линию , тексты ссылок и изображения стрелок из файлов вперед.gif и назад.gif, которые хранятся в папке ris\buttons.

Задание 7. Создайте страницу, содержащую информацию о Мирском замке, как показано на рисунке 3 и сохраните в папку Замки Беларуси с именем mir.htm

Для этого нужно использовать страницу о Несвижском замке, сохранить ее в файле с именем mir.htm в папку Замки Беларуси, вставить текст и рисунки о Мирском замке. Получится следующая страница:

Рис. 3.

Задание 8. Создайте 2 веб-страницы, содержащие информацию о Лидском и Новогрудском замках, как показано на рисунке 4 и сохраните их с именами lida.htm и novogrudok.htm в папку Замки Беларуси, которая расположена в вашей папке.

Выполнять аналогично заданию 7.

Рис. 4

Задание 9. Создайте гиперссылку для движения с главной страницы на страницу Мирский замок.

Для создания гиперссылки требуется перейти в документ index.htm, выделить текст Мир и с помощью меню Вставка\Гиперссылка вызвать диалоговое окно, в котором указать адрес перехода (имя файла mir.htm). Сохранить изменения. Проверить работу гиперссылки в браузере (Файл\Просмотреть в обозревателе).

Задание 10. Создайте в редакторе Front Page текстовые или графические гиперссылки между страницами веб-сайта «Замки Беларуси», как показано на рисунке 5.

Рис.5

Создание веб-сайта в редакторе FrontPage

Задание1. Скопируйте папку Белорусские писатели из папки D:\Student)\Рабочие материалы\Web-конструирование в свою папку.

Задание2. Запустите редактор FrontPage. Создайте пустую веб-страницу

Задание 3. Перед началом работы вставьте пустую строку для выравнивания расположения информации. Далее установите свойства страницы:

• название страницы – Беларускія класікі

• цвет фона - бежевый

• язык – белорусский

• набор знаков - Юникод UTF-8)

Сохраните пустую страницу в файле paety.htm в папке Белорусские писатели.

Задание 4. Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. Для вставки таблицы можно воспользоваться меню Таблица. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 720 точек, высота – 560 точек в соответствии с размером рамки, толщина границ -1, интервал между ячейками–1, фоновый рисунок – ramka.gif из папки с рисунками.

Внутрь рамки вставьте еще 2 таблицы:

• Для первой таблицы указать 1 строку и 2 столбца шириной 80 процентов. Для ячеек поставьте ширину 30 и 70 процентов (выделить ячейку\Таблица\Свойства таблицы\Ячейка)

• Для второй таблицы указать 1 строку и 3 столбца шириной 80 процентов. Для ячеек второй таблицы – ширина по 33 процента

Вставьте в ячейки таблицы информацию. Картинки расположены в папке ris\Белорусские писатели, в которую вы сохраняли эту веб-страницу. Отформатируйте текстовую информацию по образцу (рис.1). Установите размеры рисунков также в соответствии с рисунком 1.

Задание5. Для привлечения внимания к информации создайте бегущую строку. Установите курсор в пустую строку вверху страницы и выполните действия: Вставка → Веб-компонент → Бегущая строка. В окне Cвойства бегущей строки введите текст: Класікі беларускай літаратуры, задайте направление и скорость движения, время задержки. С помощью команды Стиль\Формат\Шрифт измените размер, цвет, начертание шрифта бегущей строки. Сохраните изменения и просмотрите, как выглядит главная страница в браузере (Файл\Просмотреть в обозревателе).

Задание 6. Создайте шаблон для веб-страниц о классиках, содержащий пустую таблицу для ввода информации о классиках белорусской литературы, как показано на рисунке 2 с помощью команды Файл\Создать\Пустая страница. Установите свойства страницы: язык, набор знаков и сохраните с именем obrazec.htm в папку Белорусские писатели, которая расположена в вашей папке.

Для структурирования информации вставьте таблицу из 1 строки и 1 столбца для размещения всех объектов страницы. В диалоговом окне Вставка таблицы указать количество строк - 1 и столбцов - 1, способ выравнивания – по центру, ширина – 720 точек, высота – 560 точек в соответствии с размером рамки, толщина границ - 1, интервал между ячейками – 1, фоновый рисунок – ramka.gif.

Внутрь рамки вставьте еще 3 таблицы шириной 80 процентов: из 1 строки и 1 столбца для размещения заголовка, из 1 строки и 2 столбцов для размещения рисунка и биографии, из 1 строки и 3 столбцов для размещения гиперссылок. Для ячеек второй таблицы поставьте ширину 30 и 70 процентов, а для ячеек третьей таблицы – ширину по 33 процента

Чтобы вставить переход на главную страницу, нужно добавить интерактивную кнопку (Вставка\Веб-компонент\Интерактивная кнопка\Металлическая капсула 8\текст кнопки Галоўная\Ок). Для последующего создания переходов по страницам вставьте стрелки из файлов вперед.gif и назад.gif, которые хранятся в папке ris\buttons.

Рис. 2.

Задание 7. На базе шаблона, созданного в задании 6 создайте вторую веб-страницу, содержащую информацию о Янке Купале, как показано на рисунке 3. Для этого откройте файл obrazec.htm и установите в свойствах страницы название Янка Купала и сохраните файл с именем Kupala.htm в папку Белорусские писатели, которая расположена в вашей папке.

Рис. 3.

Вставьте в ячейки таблицы информацию. Картинки расположены в папке ris/Белорусские писатели, в которую вы сохраняли эту веб-страницу. Текст вставьте из файла biograf.txt и отформатируйте текстовую информацию по образцу (рис.3). Установите размеры картинок также в соответствии с рисунком 3.

Задание 8. Создайте страницу, содержащую информацию о Якубе Коласе, как показано на рисунке 4 и сохраните в папку Белорусские писатели с именем Kolas.htm

Для этого нужно открыть файл obrazec.htm и сохранить его с именем Kolas.htm в папку Белорусские писатели. После чего изменить название веб-страницы в свойствах, добавить в таблицу информацию о Якубе Коласе. Получится веб-страница как на рисунке 4.

Рис. 4.

Задание 9. Аналогичным образом создайте страницу, содержащую информацию о Максиме Багдановиче, как показано на рисунке 5 и сохраните в папку Белорусские писатели с именем Bagdanovich.htm

Выполнять аналогично заданию 7.

Рис. 5

Задание 10. Создайте гиперссылку для движения с главной страницы на страницу Я.Купала. Для создания гиперссылки требуется перейти в документ paety.htm, выделить текст Я. Купала и с помощью меню Вставка\Гиперссылка вызвать диалоговое окно, в котором указать адрес перехода (имя файла Kupala.htm). Сохранить изменения. Проверить работу гиперссылки в браузере (Файл\Просмотреть в обозревателе).

Создайте в редакторе Front Page текстовые и графические гиперссылки между страницами веб-сайта «Белорусские писатели», как показано на рисунке 6.

Рис.6

Информационно-оценочный лист

Учащей(го)ся ______________________________________________________ группы ______

Таблица оценивания для рефлексии

Поставь “+” или ” –“ в соответствующей ячейке столбца 2 и 3, в пятом столбце оцени в баллах, как ты выполнил каждое задание.

Критерии отметки:

"10" - за 50 баллов

"9" - за 45 - 49 баллов

"8" - за 40 - 44 баллов

"7" - за 35 - 39 баллов

"6" - за 30 - 34 баллов

"5" - за 25 - 29 баллов

"4" - за 20 - 24 баллов

"3" - за 15 - 19 баллов

"2" - за 10 - 14 баллов

"1" - за 1 - 5 баллов

"0" - за 0 баллов

Моя отметка за работу на занятии: ______________

Рефлексивная мишень

Поставь метку на рефлексивной мишени следующим образом:

• Числом 1 оцени свою работу на занятии;

• Числом 2 оцени, насколько было интересное содержание занятия;

• Числом 3 оцени работу руководителя занятия;

• Числом 4 оцени формы и методы работы на занятии.

Информационно-оценочный лист

Учащей(го)ся ______________________________________________________ группы ______

Таблица оценивания выполнения заданий

Поставь “+” или ” –“ в соответствующей ячейке столбца 2 и 3, в пятом столбце оцени в баллах, как ты выполнил каждое задание.

Критерии отметки:

"10" - за 50 баллов

"9" - за 45 - 49 баллов

"8" - за 40 - 44 баллов

"7" - за 35 - 39 баллов

"6" - за 30 - 34 баллов

"5" - за 25 - 29 баллов

"4" - за 20 - 24 баллов

"3" - за 15 - 19 баллов

"2" - за 10 - 14 баллов

"1" - за 1 - 5 баллов

"0" - за 0 баллов

Моя отметка за работу на занятии: ______________

Рефлексивная мишень

Поставь метку на рефлексивной мишени следующим образом:

• Числом 1 оцени свою работу на занятии;

• Числом 2 оцени, насколько было интересное содержание занятия;

• Числом 3 оцени работу руководителя занятия;

• Числом 4 оцени формы и методы работы на занятии.

Технологическая карта урока

Дата проведения: 27 апреля 2012 г.

Преподаватель: Лариса Алексеевна Одноклубова

Группа: 1 «А»

Тема: «Разработка фрагментов сайтов из различных предметных областей»

Цели: совершенствование знаний и умений, необходимых для создания фрагментов веб-сайтов, используя редактор визуального веб-конструирования;

создание условий для развития исследовательской и познавательной деятельности учащихся при работе с редактором визуального веб-конструирования;

стимулирование интереса к использованию редактора веб-конструирования для создания веб-сайтов.

Тип урока: применение полученных знаний и умений на практике

Методическая цель: обеспечение активизации познавательной деятельности учащихся в условиях практического занятия.

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

1. PC

2. Видеопроектор

3. Windows XP

4. Редактор визуального веб-конструирования Microsoft Front Page 2003

5. Мультимедийная презентация

6. Папки с материалами для создания фрагментов сайтов

7. Листы с заданиями

8. Информационно-оценочные листы

Разработка фрагментов сайтов из разных предметных областей

Веб-сайт

Текст

Графика

Мультимедиа

Гиперссылки

Структура сайта

Главная страница

Страница второго уровня

Критерии оценки