Урок информатики "Сайтостроительство"

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

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

открытым в нем

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

страницы.

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

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

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

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

• В чем причина возникновения интереса к Интернет ресурсам? ?
• Какие возможности предоставляет Интернет в области Web-конструирования? ?
• На кого должна быть ориентирована страница - на создателя или пользователя?
• Какие цели чаще всего преследуют создатели различных сайтов? ?
• Попробуйте классифицировать по различным основаниям сайты расположенные в сети.

Виды сайтов

• Персональные (личные) на бесплатных серверах (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)
• Интернет-магазины
• Сайты обеспечивающие интерфейс с различными приложениями и службами
• Корпоративные сайты

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

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

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

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

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

• Официальный сайт фирмы Microsoft;

• Официальный сайт фирмы 1С;
• «Игромания» – крупнейший журнал об играх в России.

Пример персонального сайта

• Персональный сайт Муслима Магомаева;

• Персональный сайт Андрея Аршавина;

• Персональный сайт братьев Кличко.

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

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

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

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

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

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

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

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

http://encycloped.narod.ru/

• Мир энциклопедий – справочная система

http ://www.encyclopedia.ru/

• Кругосветная энциклопедия для школьников http://www.krugosvet.ru/
• Большой энциклопедический словарь (БЭС)
• Мир словарей

(коллекция словарей и энциклопедий)

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

Интернет-магазины

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

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

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

• narod.ru имеет так называемую «мастерскую» где можно без каких-либо посторонних программ создать простенький сайт про помощи шаблонов

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

Шаблоны

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

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

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

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

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

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

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

• В настоящее время имеется большое количество различных инструментальных средств разработки Web-страниц и Web-сайтов.

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

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

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

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

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

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

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

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

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

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

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

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

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

Выбор текстуры

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Справочная система редактора Word по созданию и редактированию HTML-документов

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

Практическое задание «Московский Кремль».

Создать Web-сайт, рассказывающий о башнях Московского Кремля.

Виды" . Для чего нужен каждый режим можно прочитать активизируя его нажатием ЛКМ." width="640"

Microsoft Front Page

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

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

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

• перейти в режим редактирования конкретной страницы; проверить настройки страницы; ввести или вставить текст и отформатировать его; вставить фон, звуковое сопровождение, общие области, таблицы, графические изображения, гиперссылки, панели навигации; добавить анимационные эффекты и компоненты; сохранить страницу и просмотреть ее в браузере Internet Explorer; организовать фреймовую структуру, продолжить редактирование или перейти к редактированию другой страницы.
• перейти в режим редактирования конкретной страницы;
• проверить настройки страницы;
• ввести или вставить текст и отформатировать его;
• вставить фон, звуковое сопровождение, общие области, таблицы, графические изображения, гиперссылки, панели навигации;
• добавить анимационные эффекты и компоненты;
• сохранить страницу и просмотреть ее в браузере Internet Explorer;
• организовать фреймовую структуру,
• продолжить редактирование или перейти к редактированию другой страницы.
• Закрыть Microsoft Front Page, открыть Web-сайт в браузере Internet Explorer и протестировать его.

Темы задания:

• «Мой город»,
• «Моя семья»,
• «Моя малая родина»,
• «Моя школа»,
• «Мой класс».

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

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

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

Фамилия ___________________________ класс ________________

Оцените свою работу в группе: ___________________________

Оцените работу группы № ____ ___________________________

Оцените работу группы № ____ ___________________________

  Оцените работу группы № ____ ___________________________

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

3. Оцени по пятибалльной шкале понятность изложения темы «Создание Web-сайта»____________________________________