Программа элективного курса по информатике "Интернет-технологии. Основы web-дизайна"

Вид материала

Программа

Содержание Использование программных средств для создания Web-сайтов –6 часов Раздел 10.Размещение HTML-документа на сервере Проектирование WEB-сайта «Мастак» (сайт-пособие по успешной сдаче экзаменов). Отчет о лабораторной работе оформите на отдельном листе и сдайте преподавателю. Структура HTML-документа Правила синтаксиса Заголовок крупный Заголовок поменьше Не правильно:Заголовок крупный Заголовок поменьше а конечные строчными буквами (

Подобный материал:

• Программа элективного курса 9 класса Программа разработана, 76.24kb.
• Программа предпрофильного элективного курса ( 9 класс, 17 часов, 162.9kb.
• Программа элективного курса по информатике и икт технологии компьютерной анимации, 238.64kb.
• Программа учебной дисциплины техника и технология современного изобразительного искусства, 112.54kb.
• Тематический план занятий по Web-Дизайну и оптимизации сайтов, 991.38kb.
• Программа дисциплины «Мультимедиа технологии. Уровень Создание компьютерных презентаций», 60.69kb.
• Учебно-методический комплекс факультатива «Использование интернет-технологий в социально-экономической, 155.62kb.
• Рабочая программа элективного курса по информатике «Приёмы решения нестандартных задач, 219.89kb.
• Рабочая программа элективного курса для 10 класса по информатике и икт «Математические, 45.88kb.
• Конспект лекции «Основы Web-дизайна», 197.14kb.

Программа элективного курса по информатике

"Интернет-технологии.Основы WEB-дизайна"

Пояснительная записка.


Настоящая программа рассчитана на начальное профессиональное обучение учащихся по специальности "Интернет технологии. Основы WEB-дизайна. Общее количество часов - 34 часа.

Программа обучения рассчитана на определенный уровень подготовки учащихся:

-базовые знания по информатике;

-владение основными приемами работы в операционной среде Microsoft Windows.


Целью программы является формирование у учащихся целостного представления о глобальном информационном пространстве и принципах создания собственных информационных ресурсов.


Основные учебно-воспитательные задачи программы:

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

Программа основана на следующих принципах:

- непрерывности;

• межпредметной связи;
  
• доступности;
  
• связи обучения с практикой.
  

Структура программы.

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

Далее учащиеся знакомятся с основными стандартами языка HTML, с программными средствами для создания WEB-страничек/сайтов, основными технологическими приёмами создания WEB-сайтов и их размещением в Интернете.

Курс завершается конструированием собственного проекта WEB-сайта, где отрабатывается основной алгоритм создания сайта.


Методика преподавания курса.

Преподавание ведётся с практическим использованием компьютерной техники с применением интерактивных методов и приёмов:

-компьютерный практикум, способствующий отработке практических навыков работы по теме. Практическое закрепление темы проводится после краткого объяснения учебного материала учителем;

-лабораторные работы, позволяющие развивать самостоятельность, исследовательскую направленность в работе;

-организация проектной деятельности учащихся, позволяющая развивать творческие способности учащихся;

-контрольные работы позволяют проверять уровень теоретической подготовленности учащихся.


В результате обучения по данной программе

учащиеся должны знать:


1. Основные правила и инструкции по технике безопасности при работе с ПК.

2. Основные принципы построения глобальной сети Интернет.

3. Виды компьютерных сетей и ресурсов Интернет.

4. Основные понятия технологии Интернет.

5. Единицы измерения информации и скорости передачи информации.

6. Виды протоколов передачи и обмена информации.

7. Набор необходимых инструментов для создания Web-страницы/сайта.

4. Основные принципы использования языка HTML.

5. Основные принципы работы с Web-редакторами.

6. Основные средства редактирования Web-страниц.

7. Типичную структуры WEB-страницы и принципы проектирования сайта.

8. Основные принципы WEB-дизайна.

9. Как подготовить свой сайт к публикации в Интернет.


Программа курса:


Техника безопасности и правила поведения в кабинете ВТ – 1 час.

Введение. История создания и развития информационных ресурсов и технологий Интернет. Обзор возможностей Интернет-1 час

Топология Интернет –3 час

Работа с электронной почтой и почтовыми программами –3 часа

Основы работы с браузерами Microsoft Internet Explorer и

Netscape Navigator –3 часа

Поиск информации в Интернет –3 часа

Введение в стандарт Hyper Text Markup Language (HTML) –6 часов

Дизайн WEB-страниц и виды сайтов –1 час

Использование программных средств для создания Web-сайтов –6 часов

Понятие интерактивных документов-1 час

Размещение HTML-документа на сервере –1 час

Создание персонального WEB-сайта

Проектирование WEB-сайта «Мастак»

(сайт-пособие по успешной сдаче экзаменов)-5 часов


Тематическое планирование элективного курса

"Интернет-технологии.Основы WEB-дизайна"


Урок1.Техника безопасности и правила поведения в кабинете ВТ.


Раздел 1.Введение. История создания и развития информационных ресурсов и технологий Интернет. Обзор возможностей Интернет

Урок 2.История создания и развития информационных ресурсов и технологий Интернет.Первое путешествие по Интернет. Обзор возможностей .Виды компьютерных сетей и ресурсов Интернет. Классификация и описание услуг, предоставляемых компьютерными сетями.


Раздел 2.Топология Интернет

Урок 3.Семейство протоколов TCP/IP. Доменная система имен.

Урок 4.Требования к аппаратной части ПК, способы соединения с Интернет. Единицы измерения информации и скорости передачи информации. Технические характеристики средств передачи и получения информации. Скорость получения информации пользователем.

Урок 5.Контрольная работа.


Раздел 3.Работа с электронной почтой и почтовыми программами

Урок 6. Электронная почта. Получение бесплатного почтового адреса. Создание, отправление и прием писем. Правила хорошего тона при написании писем. (практика)

уроки7-8.Программа Outlook Express. Рабочее окно. Основные команды. (практика)


Раздел 4.Основы работы с браузерами Microsoft Internet Explorer и Netscape Navigator

Урок 9. Понятие WEB-страницы ,сайта,сервера.

Урок 10.Эффективная работа с браузером.Закладки. Избранное. (практика)

Урок 11.Работа с несколькими окнами.Сохранение информации.

Настройки просмотра. (практика)

Раздел 5.Поиск информации в Интернет

Урок 12. Поисковый сервер. Обзор особенностей наиболее эффективных в настоящий момент поисковых серверов (классификационные информационно-поисковые системы Rambler, Яндекс). (практика)

Урок 13.Создание простых и сложных запросов. (практика)

Урок 14.Лабораторная работа.


Раздел 6. Введение в стандарт Hyper Text Markup Language (HTML)

Урок 15.История возникновения и стандарты языка HTML.

Синтаксис HTML-документов.Структура HTML-документов. (практика)

Урок 16.Элементы оформления текста. Абзацы, заголовки, разделители, параграфы, выравнивание, цветовое и шрифтовой оформление.Создание списков в HTML-документе. (практика)

Урок 17.Создание гиперссылок. (практика)

Урок 18. Графическое оформление (фоновые изображения, линии, кнопки). Тег и его параметры. (практика)

Урок 19.Создание таблиц в HTML-документе. Параметры, определяющие оформление таблиц. Управление размещением содержимого документа на экране при помощи таблиц.

Понятие кадра-фрейма. Разбиение экрана на части. Параметры, определяющие взаиморасположение фреймов на экране и их внешний вид. Гипертекстовые переходы внутри и между фреймами. (практика)

Урок 20. Лабораторная работа.


Раздел 7. Дизайн WEB-страниц и виды сайтов

Урок 21.Технологические особенности WEB-дизайна. Графические эффекты. (обзор)


Раздел 8. Использование программных средств для создания Web-сайтов

Урок 22.Обзор программных средств для создания WEB-сайтов.Основы работы в FrontPage. (практика)

Урок 23.Рабочее пространство редактора. (практика)

Урок 24.Создание WEB – узлов и документов. (практика)

Урок 25.Подготовка документов. (практика)

Урок 26.Редактирование HTML – кода. (практика)

Урок 27.Режимы работы объектов. (практика)


Раздел 9.Понятие интерактивных документов.

Урок 28.Обзор основных видов интерактивных документов (формы, гостевые книги, анкеты, счётчики, голосования и т.д.), графических эффектов, использующих при создании WEB-сайтов.Размещение готовых активных форм в HTML – документе.


Раздел 10.Размещение HTML-документа на сервере

Урок 29.Регистрация адреса. Выгрузка сайта (соглашения и правила). Тестирование страниц. Регистрация WEB-сайта на поисковых машинах. Баннерный обмен, реклама, ссылки. (ознакомление,обзор)


Раздел 11.Создание персонального WEB-сайта

Проектирование WEB-сайта «Мастак» (сайт-пособие по успешной сдаче экзаменов).

Урок 30.Разработка содержания и структуры WEB-сайта . Постановка целей и определение основных задач. Создание списка будущих тематических разделов. Разработка логической и физической структуры ресурса.

Урок 31.Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы. Подготовка текстовых материалов. Подготовка графических материалов. (практика)

Уроки 32-33.Создание шаблонов web-страниц. Сборка web-страниц и отладка кода. Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой в различных браузерах. (практика)

Урок 34. Защита проекта.


Итого: Обзорные лекции-9 часов

Уроки лекция-практика-17 часов

Контрольные работы-1 час

Лабораторные работы-2 часа

Проектно-практическая работа-5 часов

Литература:

1. Е.К. Балафанов,Б.Бурибаев, А.Даулеткулов «30 уроков по информатике»,
   

«Шартарап», Алматы 1998 г.

2. С.Симонович, Г.Евсеев, А.Алексеев Общая информаика,
   

АСТ пресс, М., 1998 г.

3. Шафрин Ю.А. Информационные технологии. 10-11 кл. –
   

М.: Издательство Лаборатория базовых знаний, 1999

4. Интернет. Энциклопедия, 2-е изд. Под редакцией Мелиховой Л.Г. –

С-Пб.: Издательство ПИТЕР, 2000.

5. ссылка скрыта
   
6. А.А.Дуванов «Кухня web-мастера Сидорова»,Информатика №4/2005,
   

изд-Чистые пруды 2005 г.

5. А.А.Дуванов Основы web-дизайна и школьного сайтостроительства,
   

газета “Информатика”, изд Первое сентября, №17,18,19,20,21,22,23,25/2005 г.

8 Б.Богумирский Справочник, Питер, 1999 г.


Лабораторная работа

Тема: Поиск информации в Интернете.


Цель: 1.Практическое освоение поиска информации в Интернете.

2. Рассмотреть основные правила создания запросов на поиск.

Задачи:

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

Развивающие: Отрабатывать основные умения и навыки работы в Интернете.

Воспитательные:Бережное отношение к технике и уважение к окружающим.

Тип урока: урок-практика

Программное обеспечение:компьютер, подключение к Интернет.

Ход занятия:

I. Фронтальный опрос:

• Назовите наиболее известные поисковые системы ?
  
• Что такое ключевое слово?
  
• Каким образом формируются простой и сложный запросы ?
  

II. Лабораторная работа.

1. Создать в разделе «Избранное» броузера папку Поисковые системы.
   
2. Занести в эту папку адреса следующих поисковых систем:
   

Русскоязычные: Yandex, Rambler, Google, Aport; англоязычные: Yahoo, AltaVista.

3. Зайдите на поисковую систему Yandex. Найдите сайт, посвященный «Чудесам света». Запишите в тетрадь его адрес.
   

4. Зайдите на поисковую систему Googl и найдите материал, который поможет ответить вам на следующие вопросы:
   

• Где и когда родился Абай?
  
• Перечислите основные этапы жизни и деятельности Абая. Почему его имя вошло в историю?
  
• Найдите и сохраните на жестком диске фотографию Абая.
  

5. Зайдите на поисковую систему Rambler. Найдите официальный сайт Актюбинского университета им.К.Жубанова. Ответьте на следующие вопросы:
   

• В каком году институту было присвоено имя первого казахского профессора -лингвиста Кудайбергена Жубанова?
  
• Какие факультеты имеются в университете?
  

• Назовите известных выпускников университета?
  
• Когда в университете пройдет День открытых дверей?
  

6. Зайдите на поисковую систему Апорт.
   

Найдите информацию о городе , который хотели бы посетить.





Отчет о лабораторной работе оформите на отдельном листе и сдайте преподавателю.


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


Тема: Краткая история создания языка HTML.

Понятие элемента и тега. Структура и синтаксис HTML-документа.

Цель: 1.Дать общее представление о назначения языка HTML.

2. Ознакомить со структурой,синтаксисом HTML-документов и

базовыми тегами языка HTML.

Задачи:

Образовательные: научить делать разметку документа с помощью

языка HTML.

Развивающие: отработать первоначальные умения и навыки работы с

тегами и элементами языка HTML.

Воспитательные:воспитывать усердие в работе,

уважение к окружающим.

Тип урока: урок-лекция-практика

Программное обеспечение:компьютер.


Ход занятия:


I. История создания HTML.

HTML (Hyper Text Markup Language)- язык разметки гипертекста.

Понятие "гипертекст" обозначает электронный документ, который содержит в себе ссылки на другие документы. Термин "гипертекст" впервые был введён Тедом Нельсоном в 1960-х годах.

В далеком 1945 году американский ученый ( научный консультант президента) Ванневар Буш впервые говорит о гипертексте. Двадцать три года спустя (1968 год) Дуглас Энджельбарт, создатель мыши, и других модных девайсов и софта, показал работу гипертекстовых связей в его собственном текстовом редакторе.

Но сама история языков разметки началась в 60-е годы, когда сотрудники компании IBM взялись за решение проблем, связанных с переносом документов между различными платформами и операционными системами. В результате их усилий появился язык GML (General Markup Language - общий язык разметки), который был предназначен для использования на ЭВМ семейства IBM. Язык GML в дальнейшем был дополнен, и в 80-х годах прошёл стандартизацию ISO (Международная организация стандартизации). Новый язык разметки стал назваться SGML (Standart General Markup Language), и использовался военным департаментом США для оформления сложной и замысловатой технической документации. Однако, SGML широкого распространения не получил из-за своей сложности и дороговизны.

Следующий этап развития языков разметки связан с именами учёных-физиков, сотрудников Европейский Центр Ядерных Исследований (CERN) в Женеве. В конце 80-х годов Тим Бернерс-Ли всерьез занялся проблемой хранения, передачи и отображения данных, полученных коллегами из других исследовательских центров и из собственных дочерних лабораторий. Проблема состояла в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой. В основу разрабатываемого языка Тим Бернерс-Ли положил язык SGML и приёмы работы с гипертекстом, с чем и связано название созданного им языка - HTML. Новый язык использовал основные конструкции SGML для описания документов и гипертекстовых ссылок. Нужно отметить, что Бернерс-Ли, является и инициатором создания WWW, где изначально гипертекстовые документы получили наибольшее распространение. Но созданием лишь языка HTML не ограничилось. Это все равно, что создать автомобиль без создания правил дорожного движения – быстро и удобно путешествовать, когда ты один мчишься по автостраде! Но если таких автолюбителей полно? - быть беде!

Потребовалось создание протокола передачи гипертекста HTTP (Hyper Text Transfer Protocol). Этот протокол позволил осуществлять обмен документами HTML. Именно он дал возможность клиенту находить и использовать ресурсы, хранящиеся на другом компьютере. Протокол HTTP занимается поиском и загрузкой нужного документа, (Например, всякий раз когда пользователь щелкает мышью по какому-либо URL). Первые HTML-документы, обращавшиеся в Internet в начале 90-х годов, были исключительно текстовыми. Так было до тех пор, пока в Национальном центре исследования сверхпроводников (NCSA) Иллинойского университета не был разработан первый графический интерфейс, или попросту – браузер (Mosaic) для HTML-документов. Впоследствии с появлением множества простых и доступных браузеров для Всемирной паутины и для других служб Internet началась новая эра для HTML. Язык HTML стал основным инструментом для распространения информации в Internet, хотя изначально он предназначался для организации информации в пределах одного научного центра. Идея решения проблемы обмена документами между различными компьютерами и приложениями через Internet основана на языке разметки гипертекста. Разметка документа - это описание различных фрагментов документа и их взаимного расположения. Выполняется разметка с помощью арабских цифр, символов латинского алфавита и некоторых знаков препинания. Из этих символов набираются команды языка HTML – теги (дескрипторы).

II.HyperText Markup Language (HTML) - язык разметки гипертекста.


Гипертекст - информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому. На практике в гипертексте некоторые слова выделяют путем подчеркивания или окрашивания в другой цвет (гиперссылки). Выделение слова говорит о наличии связи этого слова с некоторым документом, в котором тема, связанная с выделенным словом рассматривается более подробно.

Отдельный документ, выполненный в формате HTML, называется:

- HTML-документом;

- Web-документом;

- Web-страницей.

Такие страницы,как правило имеют расширение htm или html.


Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимиы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом.

Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.

Структура URL-адреса


Url-адрес ресурса образуется объединением доменного имени компьютера, на котором он хранится, и пути поиска (пути доступа), который ведет от корневого каталога жесткого диска этого компьютера через все вложенные каталоги к файлу, представляющему ресурс.

Типичный URL для WWW имеет вид

ние.домен/имя файла

Здесь название - это часть адреса, который часто употребляется для обозначения владельца сайта, а домен - обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д. Например, адрес гипертекстового файла works.htm в Интернете:

ссылка скрыта


Ш. Структура HTML-документа

Терминология.

Элемент - конструкция языка HTML. Это контейнер, содержащий данные и позволяющий отформатировать из определенным образом. Любая Web-страница представляет собой набор элементов. Одна из основных идей гипертекста возможность вложения элементов.


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

Пример: элемент, содержащий некоторый текст, ограничен начальным тегом (маркером)
и конечным тегом (маркером)
. Т.е. текст помещен между тегами как в контейнер. Здесь же можно увидеть, как осуществляется возможность вложения элементов. Тег вложен внутрь тега
, поэтому конечный тег стоит перед
. В данном примере тег
указывает на то, что текст является отдельным абзацем, а тег задает формат шрифта, в нашем случае зеленый цвет шрифта.


Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.


В результате такого форматирования на экране компьютера мы увидим текст зеленого цвета в отдельном абзаце:

Этот текст будет расположен в отдельном абзаце и выполнен зеленым цветом шрифта.


Атрибут - параметр или свойство элемента. Это, по сути, переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений: стандартный или произвольный. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами.


Этот текст будет выровнен по центру экрана


В данном примере атрибут align (выравнивание) расположен внутри тега
, следовательно он задает выравнивание этого абзаца. Значение атрибута равно "center", т.е. выравнивание абзаца будет по центру экрана. На экране мы увидим:


Этот текст будет выровнен по центру экрана.

Структура HTML-документа

В таблице дана структура типичного Web-документа.

	Этот тег указывает на начало HTML-документа
	Этот тег указывает на начало области заголовка Web-страницы. Служит для формирования структуры документа.
TITLE>Структура Web-страницы	Элемент для размещения заголовка Web-страницы. Строка отображается в заголовке окна броузера.
	Этот тег несет служебную информацию и не отображается в экране броузера. В данном случае идет речь о кодировке Web-странички. Вам достаточно лишь каждый раз вставлять этот тег в таком виде на свою страничку. Тогда ваша страничка будет использовать кодировку windows-1251, наиболее распространенную на сегодняшний день.
	Имя автора Web-страницы.
	Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины, для отбора сайтов по тематике запроса. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тег на свою страничку и указать в нем ключевые слова, отражающие содержание вашего сайта.
	Конец области заголовка Web-страницы.
< BODY bgcolor="blue">	Начало собственно содержимого Web-страницы. Тег
Здесь расположен заголовок вашей странички	Элемент заголовка
Здесь расположен текст первого абзаца вашей странички	Элемент абзаца.
Здесь расположен текст второго абзаца вашей странички
	Конец содержимого Web-страницы.
	Конец HTML-документа

Правила синтаксиса

1. Взаимное расположение элементов HTML, HEAD, TITLE, BODY должно быть стандартным на любой странице.
















..................








2. Всегда использовать конечные теги (не забывать
, , и др.).

3. Не нарушать правила вложения тегов.


Правильно:

Заголовок крупный

Заголовок поменьше

Не правильно:

Заголовок крупный

Заголовок поменьше

4. Любая полезная информация должна находится между начальным и конечным тегами, указывающими ее формат.

5. Все атрибуты располагаются в начальном теге.

6. Принято начальные теги писать ЗАГЛАВНЫМИ буквами (

), а конечные строчными буквами (

).


IV.Задания для выполнения:


1. Откройте текстовый редактор "Блокнот".

2. Наберите в нем структуру HTML-документа, которая представлена вам в таблице этого урока (левый столбец таблицы).

3. Сохраните файл в своей папке, присвоив ему имя page1.htm

4. Зайдите в свою папку и откройте созданный файл. Вы увидите, как выглядит созданный вами файл в окне броузера.

5. Закройте броузер.

6. Вернитесь к сохраненному файлу в "Блокноте".

7. Внесите в него следующие изменения: пусть это будет ваша первая страничка. Укажите в ней ваши фамилию, имя, школу, класс, увлечения. Используйте для этого форматирование заголовков и абзацев.

8. В строке