1 / 58

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

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

shae
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. Заголовки. Внести в текст страницы тэги заголовков различных уровней Заголовки различных уровней: <H1>Заголовок первого уровня</H1><H2>Заголовок второго уровня</H2><H3>Заголовок третьего уровня</H3><H4>Заголовок четвертого уровня</H4><H5>Заголовок пятого уровня</H5><H6>Заголовок шестого уровня</H6>

  6. Форматирование шрифта. Внести в текст страницы тэги, определяющие начертание шрифта и горизонтальных разделительных линий. • Разделительная линия: <HR> • Форматирование шрифта: <B>Жирный</B><I>Курсив</I><U>Подчеркнутый</U><B><I><U>Жирный подчеркнутый курсив</B></I></U><TT>Равноширинный</TT> • Выделение: <EM>Выделение</EM><STRONG>Усиленное выделение</STRONG> • <HR>

  7. Списки.Внести в текст страницы тэги, задающие списки нумерованные и ненумерованные, а также списки определений. Нумерованный список: • <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>

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

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

  10. Практическое задание: • 1. Определите сайты, которые отвечают вашим интересам • 2. Дайте им оценку: • по оформлению • скорости загрузки • количеству используемых элементов для привлечения внимания пользователей. Можно в интернете выбрать сайты, созданные профессиональными группами и образовательными порталами или сравнить и сделать анализ на основании следующих слайдов:

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

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

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

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

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

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

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

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

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

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

  21. Энциклопедические системы • ЭнциклопедияБрокгауза-Эфрона http://encycloped.narod.ru/ • Мирэнциклопедий – справочнаясистемаhttp://www.encyclopedia.ru/ • Кругосветнаяэнциклопедиядляшкольников http://www.krugosvet.ru/ Захарова Н.И.

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

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

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

  34. Выбор вида горизонтальной линии для HTML-страницы Выбор вида горизонтальной линии для 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. 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 и протестировать его.

More Related