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

Разработка тематического Web-сайта Урок – обобщение с проектной деятельностью учащихся Разработан учителем информатики Сергейко Н. Г. МОУ СОШ 49 г. Краснодар 1

Создание Web-сайта Цель нашего урока – закрепить навыки по созданию web-страниц создание сайтов различными инструментами дать сравнительный анализ этих способов Создание Web-сайта Создание сайта – это сложный как с технической, так и с организационной стороны процесс. Обычно разработка сайтов поручается опытным дизайнерам и высоко квалифицированным программистам. Мы повторим методику создания страниц и способы автоматизации разработки web-сайтов, и выполним проекты по выбранным темам: персональный сайт школьный сайт тематический сайт 2

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

Основные тэги HTML Запустить текстовый редактор Блокнот [Пуск - Программы - Стандартные - Блокнот]. ввести HTML-код, задающий структуру Web-страницы: <HTML> <HEAD> <TITLE> Первое знакомство с тэгами HTML</TITLE> </HEAD> <BODY> </HTML> Ввести команду [Файл - Сохранить]. Файлу Web-страницы присвоить имя page 1 -1. htm. Запустить браузер и открыть созданный файл командой [Файл - Открыть]. В заголовке окна браузера высвечивается Первое знакомство с тэгами HTML. Основная часть окна браузера - пуста. 4

Заголовки. Внести в текст страницы тэги заголовков различных уровней Заголовки различных уровней: <H 1>Заголовок первого уровня</H 1> <H 2>Заголовок второго уровня</H 2> <H 3>Заголовок третьего уровня</H 3> <H 4>Заголовок четвертого уровня</H 4> <H 5>Заголовок пятого уровня</H 5> <H 6>Заголовок шестого уровня</H 6> 5

Форматирование шрифта. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. Разделительная линия: <HR> Форматирование шрифта: Жирный Курсив Подчеркнутый Жирный подчеркнутый курсив <TT>Равноширинный</TT> Выделение: Выделение Усиленное выделение <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: //www. encyclopedia. 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" - "Что видишь, то и получишь"). Такие редакторы входят в состав некоторых офисных пакетов (Star. Office) и некоторых интегрированных приложений для работы в Интернете: Front Page Express (Microsoft Internet Explorer), Composer (Netscape Communicator) и Web-мастер (Сибкон Коммуникатор). 32

Создание Web-страниц с помощью Microsoft Word Создать новую Web-страницу с помощью Microsoft Word можно одним из двух способов: с помощью мастера или шаблона, либо преобразовать существующий документ Word в формат HTML, используемый для Webстраниц. Для использования мастера (или шаблона) достаточно воспользоваться вкладкой Webстраницы меню Создание документа. 33

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

Выбор вида горизонтальной линии для HTML-страницы Создание Web-страниц с помощью Microsoft Word Выбор вида маркированного списка Выбор вида нумерованного списка Выбор вида горизонтальной линии для HTML-страницы 35

Создание Web-страниц с помощью Microsoft Word Выбор текстуры Задание требуемого цвета фона Выбор цвета фрагмента текста для HTML-страницы Выбор цвета всего текста для HTML-страницы Выбор стиля Разметка HTML 36

Создание Web-страниц с помощью Microsoft Word Запрос подтверждения для сохранения изменений в HTML-файле Меню Вид Word 2003 с командой Источник HTML Изменение параметров таблицы с помощью панели инструментов Таблицы и границы 37

Создание Web-страниц с помощью Microsoft Word Пример таблицы, существование которой в HTML-документе невозможно Окно Свойства таблицы для изменения параметров всей таблицы Окно Свойства ячейки для изменения параметров отдельных ячеек таблицы Вкладка Положение окна Рисунок для задания положения рисунка относительно текста 38

Создание Web-страниц с помощью Microsoft Word Диалоговое окно Добавить гиперссылку Меню Файл с командой Сохранить в формате HTML Панель Элементы управления Запрос подтверждения при сохранении документа Word в формате HTML 39

Создание Web-страниц с помощью Microsoft Word Меню Файл при работе в режиме HTML-документа Справочная система редактора Word по созданию и редактированию HTMLдокументов 40

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

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

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

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

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

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

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

1 st 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 Front. Page 52

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