Разработка тематического Web-сайта

Разработка тематического Web-сайта

Урок – обобщение с проектной деятельностью учащихся

Разработан учителем информатики Сергейко Н.Г.

МОУ СОШ 49 г. Краснодар

1

Создание Web-сайта

Цель нашего урока – закрепить навыки по созданию web-страниц создание сайтов различными инструментами дать сравнительный анализ этих способов Создание Web-сайта

Создание сайта – это сложный как с технической, так и с организационной стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам и высоко квалифицированным программистам.

Мы повторим методику создания страниц и способы автоматизации разработки web-сайтов, и выполним проекты по выбранным темам: персональный сайт школьный сайт тематический сайт

2

Вопросы на повторение

Какие функции выполняют сервисные службы WWW?

Назначение языка HTML Теги HTML Функциональные разделы документа Форматирование HTML документа Ссылки на другие документы и файлы Списки Графика Фреймы Звук Инструментальные средства создания Web-страниц Учебное пособие по созданию Web-страницhttp://phys.pspu.ru/parshin/html/head3.shtml

3

Основные тэги HTML Запустить текстовый редактор Блокнот

[Пуск - Программы - Стандартные - Блокнот]. ввести HTML-код, задающий структуру Web-страницы:

<HTML><HEAD><TITLE> Первое знакомство с тэгами HTML</TITLE></HEAD><BODY> </BODY></HTML>

Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя page1-1.htm.

Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста.

4

Заголовки. Внести в текст страницы тэги заголовков

различных уровней

Заголовки различных уровней: <H1>Заголовок первого уровня</H1>

<H2>Заголовок второго уровня</H2><H3>Заголовок третьего уровня</H3><H4>Заголовок четвертого уровня</H4><H5>Заголовок пятого уровня</H5><H6>Заголовок шестого уровня</H6>

5

Форматирование шрифта. Внести в текст страницы тэги,

определяющие начертание шрифта и горизонтальных разделительных линий.

Разделительная линия: <HR> Форматирование шрифта: <B>Жирный</B>

<I>Курсив</I><U>Подчеркнутый</U><B><I><U>Жирный подчеркнутый курсив </B></I></U><TT>Равноширинный</TT>

Выделение:<EM>Выделение</EM>

<STRONG>Усиленное выделение</STRONG> <HR>

6

Списки. Внести в текст страницы тэги, задающие списки нумерованные и

ненумерованные, а также списки определений. Нумерованный список:

<OL><LI>Первый элемент списка</LI><LI>Второй элемент списка</LI><LI>Третий элемент списка</LI></OL> Ненумерованный список:

<UL><LI>Первый элемент списка</LI><LI>Второй элемент списка</LI><LI>Третий элемент списка</LI></UL>

Список определений: <DL>

<DT>ТЕРМИН 1</DT><DD>Пояснение к термину 1</DD><DT>ТЕРМИН 2</DT><DD>Пояснение к термину 2</DD><DT>ТЕРМИН 3</DT><DD>Пояснение к термину 3</DD></DL>

7

Внесение изменений и дополнений в Web-страницу. В процессе создания web-страницы приходится добавлять новые

тэги и просматривать получаемый результат.

Активизировать Блокнот с открытой в нем редактируемой Web-страницей. Внести в содержимое страницы необходимые изменения и сохранить новый вариант страницы, выполнив

команду меню [Файл - Сохранить]. Активизировать браузер с открытым в нем

предыдущим вариантом страницы.

Щелкнуть по кнопке Обновить.

В окне браузера отобразится

обновленная Web-страница.

8

Основные подходы к созданию сайта.Ответьте на вопросы:

В чем причина возникновения интереса и интернет ресурсам?

Какие возможности предоставляет Интернет в области Web-конструирования?

На кого должна быть ориентирована страница - на создателя или пользователя?

Какие цели чаще всего преследуют создатели различных сайтов?

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

9

Практическое задание:

1. Определите сайты, которые отвечают вашим интересам

2. Дайте им оценку: по оформлению скорости загрузки количеству используемых элементов для

привлечения внимания пользователей. Можно в интернете выбрать сайты, созданные профессиональными

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

10

Виды сайтов

Персональные (личные) на бесплатных серверах (www.narod.ru) использование Мастеров для создания страниц такого сайта; Службы новостей, электронные доски объявлений, электронные

версии печатных изданий (www.lenta.ru, www.gazeta.ru); Специализированные службы новостей (www.compulenta.ru)

информация в области компьютерных технологий; Сайты – сборники документов определенной тематики и

виртуальные библиотеки (www.citforum.ru); Поисковые системы (www.rambler.ru, www.yandex.ru, www.google.ru) поисковые энциклопедические системы (htth://search.km.ru) Интернет-магазины Сайты обеспечивающие интерфейс с различными приложениями и

службами Корпоративные слайды

11

Пример корпоративного сайта

12

Пример корпоративного сайта Официальный сайт МОУ СОШ № 49

13

Пример корпоративного сайта Официальный сайт МОУ СОШ № 49

14

Пример корпоративного сайта

15

Поисковые системы

16


17


18


19

Электронная почта

20

Энциклопедические системы

Захарова Н.И.

Энциклопедия Брокгауза-Эфрона Энциклопедия Брокгауза-Эфрона

http://encycloped.narod.ru/http://encycloped.narod.ru/ Мир энциклопедий – справочная Мир энциклопедий – справочная системасистемаhttp://www.encyclopedia.ru/http://www.encyclopedia.ru/ Кругосветная энциклопедия для Кругосветная энциклопедия для школьников школьников

http://www.krugosvet.ru/http://www.krugosvet.ru/

21

Создание сайта в интернете

22

Создание сайта в интернете

narod.ru имеет так называемую «мастерскую» где можно без каких либо

посторонних программ создать простенький сайт про помощи шаблонов

23

«Мастерская»

24

Шаблоны

25

А также в мастерской присутствует возможность создания своего стиля оформления

26

Создание сайта с помощью мастерской в интернете

Можно задать рисунок фона Цвет шрифта Цвет активной ссылки Цвет таблицы с меню

27


28


29

30

Используем мастерскую

31

Инструментальные средства разработки Web-страниц и Web-сайтов

В настоящее время имеется большое количество различных инструментальных средств разработки Web-страниц и Web-сайтов, от простейших HTML-редакторов до систем с использованием технологии WYSIWYG ("What You See Is What You Get" - "Что видишь, то и получишь"). Такие редакторы входят в состав некоторых офисных пакетов (StarOffice) и некоторых интегрированных приложений для работы в Интернете:

Front Page Express (Microsoft Internet Explorer), Composer (Netscape Communicator) и Web-мастер (Сибкон Коммуникатор).

32

Создание Web-страниц с помощью Microsoft Word

Создать новую Web-страницу с помощью Microsoft Word можно одним из двух способов:

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

Word в формат HTML, используемый для Web-страниц.

Для использования мастера (или шаблона) достаточно воспользоваться вкладкой Web-страницы меню Создание документа.

33


Другим способом является преобразование существующего документа Word в формат HTML

Создав HTML-документ одним из приведенных выше способов, можно в дальнейшем выполнять его редактирование. Для этого в Word предусмотрены специальные панели инструментов, команды меню и функции.

34


Выбор вида маркированного списка

Выбор вида нумерованного списка

Выбор вида горизонтальной линии для HTML-страницы Выбор вида горизонтальной линии для HTML-страницы

Выбор вида горизонтальной линии для HTML-страницы 35


Задание требуемого цвета фона

Выбор текстуры Выбор цвета всего текста для HTML-страницы

Выбор цвета фрагмента текста для HTML-страницы

Выбор стиля Разметка HTML 36


Меню Вид Word 2003 с командой Источник HTML

Запрос подтверждения для сохранения изменений в HTML-файле

Изменение параметров таблицы с помощью панели инструментов Таблицы и границы 37


Окно Свойства таблицы для изменения параметров всей таблицы

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

Пример таблицы, существование которой в HTML-документе невозможно

Вкладка Положение окна Рисунок для задания положения рисунка относительно текста

38


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

Панель Элементы управления

Меню Файл с командой Сохранить в формате HTML

Запрос подтверждения при сохранении документа Word в формате HTML 39


Меню Файл при работе в режиме HTML-документа Справочная система редактора Word

по созданию и редактированию HTML-документов 40

StarOffice Writer/Web 5.2

StarOffice Writer/Web - инструментальное средство создания Web-страниц, входящее в состав интегинтегрированного офисного пакета StarOffice. StarOffice Writer/Web автоматически запускается, если в меню Файл - Создать щелкнуть на Документ HTML. Writer/Web поддерживает стандарт HTML 3.2 и позволяет размещать на Web-странице гиперссылки, таблицы, изображения, задавать фоновые цвета и рисунки, вставлять элементы управления и т.д.

41

Сибкон Web-мастер 4.7

Сибкон Web-мастер является инструментальным средством разработки Web-страниц, интегрированным в состав Сибкон Коммуникатор. Позволяет размещать на Web-странице гиперссылки, таблицы, изображения, задавать фоновые цвета и рисунки, вставлять элементы управления и т.д. Поддерживает все необходимые кодировки кириллицы (Windows-1251, CP866, KOI8-R, ISO).

42

AceHTML 4

AceHTML мощный современный профессиональный HTML-редактор, содержит 20 шаблонов для создания профессионально выглядящих Web-сайтов. Для создания интерактивных и динамических Web-страниц можно использовать 50 готовых к использованию JavaScript и 35 сценариев DHTML. Поддерживает XML, Perl и WML. Содержит мощный Редактор стилей для добавления CSS2 стилей при создании дизайна Web-сайтов. Поддерживает различные кодировки HTML-кода. После регистрации через Интернет программа получает лицензию на свободное использование.

43

Arachnophilia 4.0

Arachnophilia современный HTML-редактор. Поддерживает версию языка HTML 4.0.

44

HotDog 2.52

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

45

Macromedia Dreamweaver Dreamweaver является профессиональным редактором Web-

сайтов, отличается простотой создания как отдельных Web-страниц, так и многостраничных Web-сайтов. В нем поддерживаются основные современные направления Web-дизайна (использование каскадных стилей, динамический HTML, язык XML т.п.). Редактор позволяет быстро и наглядно (в режиме Drag&Drop) изменять структуру сайта.

46

1st Page 2000

1stPage 2000 - полнофункциональный HTML-редактор. Включает в себя следующие функции: выделение тэгов, автоматическое изменение размеров изображения, сжатие HTML-кода, проверку орфографии, поддержку JavaScript, DHTML, ASP и XML. Включает справочную систему по HTML-тэгам. Содержит образцы 450 JavaScripts, 15 DHTML, 17 Perl и 6 HTML сценариев и два шрифта, имитирующего рукописный текст. Имеется встроенный менеджер файлов для загрузки разработанного Web-сайта с локального компьютера на Интернет-сервер и внутренний браузер для предварительного просмотра. В зависимости от уровня подготовки пользователя редактор может быть запущен в четырех вариантах: Простой, Опытный, Основной и Нормальный. На диске хранится в виде ZIP-архива и в разархивированном виде.

47

1st Page 2000

48

Microsoft Front Page

предоставляет полный набор средств для разработки и организации Web-сайтов в различных режимах. Задача пользователя сводится к тому, что он располагает тексты, изображения и гиперссылки так, как ему нужно, а Front Page сам генерирует необходимый HTML-код. (код, сгенерированный Front

Page, не всегда является оптимальным). Front Page предлагает шесть различных режимов просмотра для работы с Web-сайтом. Они показаны на панели Виды, которую можно включать и выключать командой меню "Обзор => Виды". Для чего нужен каждый режим можно прочитать активизируя его нажатием ЛКМ.

49

СозданиеWeb-сайта в Microsoft Front Page.

Запустить программу Microsoft Front Page. Создать новый Web-сайт или открыть уже созданный. Организовать структуру Web-сайта в режиме "Навигация". Отредактировать страницы Web-сайта в режиме "Страница" (в любом

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

графические изображения, гиперссылки, панели навигации; добавить анимационные эффекты и компоненты; сохранить страницу и просмотреть ее в браузере Internet Explorer; организовать фреймовую структуру, продолжить редактирование или перейти к редактированию другой

страницы. Закрыть Microsoft Front Page, открыть Web-сайт в браузере Internet Explorer

и протестировать его. 50

FTP

51

MS FrontPage

52

HTML Forse 2000

HTML Forse 2000 достаточно удобный и простой HTML-редактор. Имеет интуитивно понятный интерфейс и возможность редактирования кодов файлов различных типов (HTML, Visual Basic, Java, ASP и др.)

53

HTML Forse 2000

54

HTML Referens Library 4.0

Справочная система HTML Referens Library содержит информацию о всех тэгах языка HTML 4.0. Для каждого тэга описано его назначение, формат и приведены примеры его использования. Интерфейс справочной системы аналогичен интерфейсам справочных систем Windows и ее приложений.

55

Macromedia Flash 3.0

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

56

Темы задания: «Мой город», «Моя семья», «Мои интересы», «Моя малая родина», «Моя школа», «Мой класс».

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

57

Оценка учащегося за работу на уроке

Карточка рефлексии

Фамилия ___________________________ класс ________________ Оцените свою работу в группе: ___________________________ Оцените работу группы № ____ ___________________________ Оцените работу группы № ____ ___________________________ Оцените работу группы № ____ ___________________________

2. Что было для тебя трудного при изучении темы «Создание Web-

сайта»?_________________________________________________ 3. Оцени по пятибалльной шкале понятность изложения темы

«Создание Web-сайта»____________________________________

58

Documents

Разработка тематического Web-сайта