Конспект урока "Инструментальные средства создания web-страниц на примере программы FrontPage"

Тема: «Инструментальные средства создания web-страниц

на примере программы FrontPage».

Цели урока:

 помочь учащимся получить представление об еще одном приложении в

офисном пакете Microsoft Office, познакомить с программой FrontPage,

научить основным операциям работы с web-страницами в этом

редакторе. Практически закрепить полученные знания при создании

web-сайта на заданную тему.

 воспитание информационной культуры учащихся, внимательности,

дисциплинированности.

 развитие познавательных интересов, навыков работы на компьютере.

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

доска, компьютеры, проектор, компьютерная презентация, диск с

разработанными упражнениями.

План урока:

I. Орг. момент (3 мин)

II. Проверка знаний

а. Ответы у доски (5-7 мин)

б. Проверка домашнего задания (10-15 мин)

III. Теоретическая часть (15 мин)

IV. Практическая часть (35 мин)

V. Д/з (2 мин)

VI. Итог урока (2 мин)

Ход урока:

I. Орг. момент.

Приветствие, проверка присутствующих. Объяснение хода урока, целей

урока.

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

программной реализации можно выделить два основных способа: ручной и с

использованием конструкторов. Первый способ мы изучали ранее на уроках.

Данный способ достаточно трудоемкий, так как приходится самому

расписывать все тэги. Конструкторы позволяют уйти от рутинной работы и

направить все силы для создания эффективной с точки зрения оформления

страницы. Знание тэгов позволяет избежать многих ошибок, поэтому

изучение HTML-кода не будет излишним.

Теперь все то, что мы научились выполнять с помощью прописывания

HTML-кода мы научимся делать с помощью FrontPage, а именно:

 форматировать текст;

 строить таблицы и списки;

 настраивать гиперссылки;

 добавлять рисунки;

 изменять фон web-страницы;

 просматривать HTML-код;

 проверять страницу в браузере.

II. Проверка знаний.

а) Для того чтобы проверить, как вы усвоили темы предыдущих уроков,

предлагаю вам следующее упражнение: дана web-страница, необходимо

написать HTML-код и объяснить его.

Задание 1 Задание 2

Ответы: Задание 1 Задание 2

<HTML>

<BODY>

<H1 align=center>Одежда

средневековья</h1>

<HTML>

<BODY>

<TABLE>

<caption>Великие писатели

 <font size=5><img src=sredn.png

align=left hspace="50">

<p>Жёны феодалов носили

многослойные одежды, состоящие из</p>

<ul>

<li>нижнего белья,

<li>нижнего обтягивающего

платья,

<li>верхнего платья,

<li>мантии, отороченной мехом;

<li>костюм дополняли ювелирные

украшения.

</ul>

</BODY>

</HTML>

Франции</caption>

<tr bgcolor=silver><th>Имя

<th>Произведение

<th>Год публикации

<tr><TD>Вольтер

<TD>Кандид

<TD>1759

<tr><TD>Жюль Верн

<TD>Двадцать тысяч лье под

водой

<TD>1870

<tr><TD>Мольер

<TD>Тартюф или обманщик

<TD>1669

</TABLE>

</BODY>

</HTML>

б) Давайте посмотрим, как вы умеете применять свои знания на практике, а

именно для разработки web-сайта(2-3 человека у доски.)

III. Теоретическая часть.

План объяснения темы:

1) для чего нужна программа;

2) примеры других web-редакторов;

3) запуск программы;

4) знакомство с окном программы;

5) знакомство с возможностями программы

а) ввод текста

б) форматирование текста

в) изменение цвета фона

г) построение списков и таблиц

д) вставка изображений

е) настройка гиперссылок.

Microsoft Office FrontPage 2003 – программа для создания web-страниц и

web-узлов.

Кроме этой программы существуют много других, например,

− CuteHTML

− CoffeeCup

− Publisher

− DreamWeaver

Запустить программу можно либо с помощью ярлыка, либо через главное

меню: Пуск→Все программы→ Microsoft Office → Microsoft Office FrontPage

2003.

Программная среда MS FrontPage интуитивно понятна, так основное меню

и панель инструментов соответствуют текстовому процессору.

Отличительной характеристикой данной программы является использование

четырех способов представления — это режимы конструктора, разделения,

кода и просмотра. В режиме конструктор мы разрабатываем страницу как

обычный документ в текстовом редакторе. Одновременно вводимые данные

будут обрамляться в тэги, что можно увидеть в режиме Кода. Внешний вид

страницы можно увидеть в режиме Просмотра.

При работе в конструкторе необходимо помнить, что объекты, вводимые в

рабочее поле, автоматически обрамляются в тэги, что создает некоторые

характерные особенности при работе с объектами. Например, текст вводится

как в любой текстовый редактор. Но при нажатии клавиши <Enter>

разрывается абзац и ставятся фиксированные абзацные отступы. Если нет

необходимости фиксировать абзацы большим разрывом, необходимо

использовать комбинации клавиш <Shift+Enter>.

Создадим новую страницу и сохраним ее. Введем текст. После того, как я

ввела текст, рядом с именем документа появилась звездочка (означает, что

изменения на странице не сохранены).

Кроме того удобно копировать текст из других документов, лучше из

блокнота, и затем форматировать его, используя панель форматирования.

Оформим введенный абзац как заголовок и отделим его горизонтальной

линией (Вставка → горизонтальная линия).

Замечания:

− горизонтальная линия – единственный графический элемент, который

можно нарисовать на web-странице. Другие фигуры только в виде

рисунков. Какие форматы можно использовать?

− двойной щелчок мыши на горизонтальной линии приводит к открытию

диалогового окна Свойства горизонтальной линии

По команде Файл →Свойства… или двойным щелчком мыши по слову

<body> можно открыть диалоговое окно Свойства страницы, где ввести такие

параметры, как цвет фона, цвет гиперссылок.

Создание списка состоит из нескольких этапов:

− необходимо каждый элемент списка выделить в отдельный абзац;

− выделить эти абзацы;

− выполнить команду Формат → Список и выбрать подходящий макет

списка;

Вставить таблицу в документ можно по команде Таблица → Вставить →

таблицу или используя кнопку . Красиво оформить таблицу можно с

помощью диалогового окна Свойства таблицы (его можно открыть по

команде Таблица →Свойства таблицы или выбрав соответствующую

команду в контекстном меню).

Вставка изображения из файла: Вставка → Рисунок → из файла…

Форматирование рисунка, например, цвет рамки рисунка: VR → Свойства

рисунка → Стиль → Формат → граница.

Создание гиперссылки состоит из нескольких этапов:

− выделить указатель ссылки (текст или изображение);

− выполнить команду Вставка → Гиперссылка или нажать кнопку ;

− в диалоговом окне Добавление гиперссылки выбрать нужные

параметры и нажать ОК.

Итог: возможности программы достаточно понятны человеку, хорошо

ориентирующемуся в среде текстового процессора.

Вопросы:

 Какое назначение программы FrontPage?

 Как запустить программу?

 Назовите основные элементы интерфейса программы.

 Какую команду необходимо выполнить, чтобы добавить

горизонтальную линию, список, таблицу, рисунок, гиперссылку?

III. Практическая часть.

Теперь потренируемся работать с программой FrontPage. Все необходимые

материалы к заданию находятся в папке Практическая работа FP.

Учащиеся выполняют задание.

IV. Д/з

Знать, что такое FrontPage и его назначение, уметь работать с web-

страницами, используя эту программу.

V. Вопросы учеников.

Ответы на вопросы учащихся.

VI. Итог урока.

Подведение итога урока. Выставление оценок.

На уроке мы продолжили знакомиться с пакетом Microsoft Office, научились

работать с приложением FrontPage.

Скачать материал

Конспект урока "Инструментальные средства создания web-страниц на примере программы FrontPage"

Информатика - еще материалы к урокам:

Предметы

Похожие материалы