Web-дизайн, основы сайто строения, проблемы построения курса и их решение

Министерство общего и профессионального образования РФ.

Мурманский Государственный Педагогический Университет

Физико-математический факультет

Отделение физика-информатика

Кафедра информатики и общетехнических дисциплин

Дисциплина: Теория и методика преподавания информатики

Тема: Web-дизайн, основы сайто строения, проблемы построения курса и их решение.

Курсовая работа студента 4 группы

Умова Сергея

Мурманск

2004

План

1. Введение – 3 стр.

2. Анализ учебников– 4 стр.

   1. Информатика 10-11, автора Н.В. Макаровой

   2. Информатика и информационные технологии 10-11, автора Н. Угринович

3. Фрагмент лекции (Иерархия протоколов.) – 6 стр.

4. Примеры упражнений (Упражнение «Основы навигации»)-9 стр.

5. Освещение темы (Сервисы WWW) - 12 стр.

6. Практическое задание.-12 стр.

7. Урок самостоятельной работы по разработкам (Работа с изображениями) – 14 стр.

8. Применение докладов и сообщений (HTML) – 18 стр.

9. Самостоятельная работа учеников (Проектная деятельность учащихся) – 22 стр.

10. Приложения – 23 стр

Введение

В современном мире информационных технологий существует множество способов постижения той или иной сферы человеческого познания. Одной из таких сфер являются глобальные компьютерные сети. Изучив школьную литературу которая описывает данный раздел, а точнее преподование основ web строительства. Я на толкнулся на такую особенность: либо данная сфера не так полно описывается как того (на мой субъективный взгляд) требует время, либо описание, к большому сожалению, весьма «однобоко». В большинстве литературы описание происходит только на уровне WYSIWYG (What you see is what you get – что ты видишь, то ты и получаешь) технологии. Что на мой взгляд не является правильным.

Решением «такой ситуации» стала разработка курса «Web дизайн и основы PHP¹», который был разработан для учеников среднего – старшего звена школы.

Анализ учебников

Современная библиотека» учителя представлена множеством литературы, хотелось бы рассмотреть: как тема поднятая в курсовой освещена в этих учебниках. Согласен, что большинство учителей, так же как впрочем и учеников, обладают множеством дополнительной литературы. Причем эта литература может быть представлена не только в «бумажном» виде, но и на электронных носителях, будь то CD или HDD, я уже не говорю о самом Интернете в котором информации по любой теме (практически по любой) превеликое множество.

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

Для получения детьми полной картины по заявленной теме была разработана программа курса². Что бы оценить необходимость отдельного освещения необходимо оценить присутствие материала в учебниках, для сравнения были взяты два учебника:

1. Н. В. Макарова. Информатика СПб., 2001г.

2. Н. Д. Угринович. Информатика и информационные технологии. М., 1998г.

Н. В. Макарова. Информатика

В этом учебнике весьма доступно изложено много информации. Но такого раздела как программирование в нем не присутствует в прямом виде. Хотя на мой взгляд, HTML (Hyper Text Markup Language) требует знания хотя бы элементарных основ у детей при изучение.

Первая тема моего курса звучит как «Основы и навигация в Интернет.», можно с долей большой уверенности сказать, что автор обсуждаемого учебника вообще не затрагивает даже эту тему. Хотя учебник и нельзя охарактеризовать как «старый». (В нём освещается такой материал как Word, Power Point и т.д.)

Но вот интересующая тема, как впрочем и все темы связанные с Интернетом, сетями и уж конечно HTML не описаны.

Я не имею права осуждать учебник, но всё же можно сказать о том, что стоило бы всё же включить эту тему, хотя учебник и рекомендуется для гуманитарных классов. Потому как Интернет популярен не только в классах с техническими направлениями. Имея некоторый опыт работы в школе, могу отменить, что Интернетом, на уровне пользователя, увлекаются не только технические классы. Но так же и гуманитарии. Только технические классы чаще задаются вопросом «А как оно происходит? Почему именно так?», а гуманитарные: «Как это проще сделать?».

Н. Д. Угринович. Информатика и информационные технологии.

Учебник четко и ясно раскрывает все линии требуемой информации. В нём представлены основы информатики и взаимосвязь ПК в сетях. Обсуждаемой теме в этом учебнике отдано сотня страниц. На мой взгляд это «серьёзно», но не так глубоко как хотелось бы.

В учебнике весьма правильно (с технической точки зрения) освещена тема «Адресация в Интернет » и «Протоколы передачи данных TCP/IP³» Хотя и не упоминается ничего об уровнях протоколизации данных.

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

Продолжая анализировать источники информации которые были доступны мне, я пришел к выводу о том, что тему «Основы и навигация в Интернет.» стоило бы всё же осветить не так.

Предварив рассказ о возможностях ГС (тут и далее, а так же как и во многих источниках, ГС – глобальная сеть) историей её возникновения получился комбинированный урок рассчитанный на пять - семь часов. Как показала практика, материал ученики весьма усваивают, хотя для них сложна тема иерархии протоколов⁴.

Иерархия протоколов.

(фрагмент)

Обычно сетевые протоколы создаются на основе единой концепции в рамках многоуровневой системы, в которой каждый уровень отвечает за свою часть процессов передачи информации. Семейством протоколов (protocolsuite) называют всю совокупность протоколов различных уровней. Семейство TCP/IP принято подразделять на четыре уровня

Между уровнями установлено следующее разделение функций. Канальный уровень (link layer, data-link layer), или уровень сетевого интерфейса (network interface), содержит две основные компоненты: аппаратный сетевой интерфейс компьютера (сетевую карту) и соответствующий драйвер этого сетевого интерфейса в операционной системе. Вместе они обеспечивают как физическое подключение к кабелю (или к другой физической среде), так и управление всеми аппаратными процессами передачи.

Telnet, FTP, e-mail и др.

TCP и UDP

IP, ICMPnIGMP

Сетевой интерфейс (сетевая карта и драйвер)

Четырехуровневая структура семейства протоколов TCP/IP

1. Сетевой уровень (network layer, internet layer) отвечает за перемещение пакетов потому или иному маршруту в сети. В семействе протоколов TCP/IP сетевой уровень представлен протоколами: IP (Internet Protocol), ICMP (Internet ControlMessage Protocol) и IGMP (Internet Group Management Protocol).

2. Транспортный уровень (transport layer) организует для вышестоящего прикладного уровня обмен данными между двумя компьютерами в сети. В семействе протоколов TCP/IP одновременно используются два существенно различных транспортных протокола: TCP (Transmission Control Protocol — протокол управления передачей данных) и UDP (User Datagram Protocol — протокол дейтаграмм пользователя).TCP обеспечивает надежную передачу потоков данных между двумя компьютерами в сети. В его задачи входит: разделять данные, поступающие от обслуживаемых им приложений, на блоки приемлемого размера для нижестоящего сетевого уровня; подтверждать получение пришедших к нему по сети пакетов; в течение установленных им периодов времени (таймаутов) ожидать прихода подтверждений о получении отправленных им пакетов и т. п. Поскольку TCP берет на себя все проблемы обеспечения надежной доставки врученных ему данных по назначе­нию, то прикладной уровень освобождается от этих забот.

Напротив, UDP предоставляет прикладному уровню намного более примитивный сервис. Он лишь рассылает данные адресатам в виде пакетов, называемых UDP-дейтаграммами (UDP datagrams), без гарантии их доставки. Предполагается, что требуемая степень надежности пересылки должна обеспечиваться самим прикладным уровнем.

Каждый из этих двух транспортных протоколов находит соответствующее его достоинствам и недостаткам применение. Причины, по которым для одних приложений предпочтителен TCP, а для других — UDP, станут, понятны при рассмотрении самих приложений.

4. Прикладной уровень (application layer) обеспечивает выполнение разнообразных прикладных задач. Существует определенный "классический" набор стандартных прикладных сервисов, которые предлагаются в большинстве реализаций семейства TCP/IP. В их числе: Telnet, SMTP, POP⁵, и многие другие.

После того, как ученики изучили материал им предлагается несколько упражнений самостоятельно. Эти упражнения направлены на закрепления их навыков работы ГС, а так же на то, что бы преподаватель смог оценить уровень усвоенности материала. На знание теоретической части проводиться контролная работа. В которой ученикам предагается ответить на такие вопросы как: (неполный список, урезан)

1. Несколько сокращений, наиболее популярных в ГС (SMTP, PPP⁶, etc.)

2. Уровни протоколизации данных.

3. Структура Интернет адреса

4. Зоны.(Имеется ввиду доменные зоны, например: .ru, .com, .cz, etc.)

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

Упражнение 1. Основы навигации

1. Загрузить программу – браузер Internet Explorer.

2. Найти в строке Адреса адрес отображаемой страницы. Это начальная страница, на которую настроен Ваш браузер.

3. Используя перемещение указателя «Мышь» по странице определить где имеются ссылки на другие страницы, а где просто текст.

4. Щелкнуть мышью по интересующей Вас ссылке. Связанный с ней документ появится на экране.

5. Вернуться к ранее просмотренному документу с помощью кнопки «Назад» панели инструментов.

6. Просмотреть информацию сайта, перемещаясь произвольным образом по ссылкам. При навигации пользоваться кнопками «Вперед», «Назад».

7. Вернуться к начальной странице используя кнопку «Домой» панели инструментов.

Упражнение 2. Сохранение и просмотр текста документа

1. Ввести в строке «Адреса» адрес Официального сервера Министерства Образования РФ http://www.ed.gov.ru.

2. Перейти по ссылке «начальное, основное,  среднее образование».

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

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

• активизировать меню Файл, «Сохранить как…»;

• открыть свою папку;

• щелкнуть мышью по маленькой стрелочке в строке «Тип файла», выбрать Web Page, HTML only (только текстовая информация);

• изменить, в случае необходимости, имя файла под которым будет сохранен документ;

• щелкнуть мышью по кнопке «Сохранить».

1. Просмотреть сохраненный файл средствами Internet Explorer:

• активизировать меню «Файл», опция «Открыть», кнопка «Обзор»;

• в окне "Открытие файла" найти и открыть свою папку, найти сохраненный файл и щелкнуть по кнопке "Открыть".

1. Щелкните по маленькой кнопке-стрелке справа от кнопки «Назад». Почему в текущем списке из последних просмотренных страниц нет главной страницы Официального Сервера Российского Школьного Образования, с которой Вы начинали выполнение данного упражнения? Где ее искать?

Упражнение 3. Сохранение и просмотр изображения.

1. Ввести в строке «Адреса» адрес Новгородского Музея Заповедника – www.novgorod-museum.ru

2. Перейти по ссылке "Russian" – русскоязычная страница.

3. Найти и активизировать ссылку "Фотогалереи"

4. Получить на локальный диск любую фотографию Великого Новгорода:

• щелкнуть правой кнопкой мыши по изображению;

• выбрать во всплывающем меню "Сохранить рисунок как…";

• открыть свою папку в окне "Сохранение рисунка" и щелкнуть мышью по кнопке "Сохранить".

1. Просмотреть полученное изображение средствами Internet Explorer:

• активизировать Меню Файл, опция Открыть, кнопка Обзор;

• в окне "Открытие файла" найти и открыть свою папку, щелкнуть по маленькой стрелке в поле "Тип файлов", выбрать "Все файлы", найти название полученной картинки, и щелкнуть по кнопке "Открыть".

Упражнение 4. Сохранение и просмотр Web-страницы

1. Загрузить Web – страницу по адресу www.junior.ru/wwwexam/. Перейти по ссылке «Глобальные сети».

2. Сохранить на локальном диске материалы раздела «Структура сети Internet», вместе с рисунками:

• активизировать меню Файл, «Сохранить как…»;

• открыть свою папку;

• щелкнуть мышью по маленькой стрелочке в строке «Тип файла», выбрать Web Page, complete (страница полностью);

• изменить, в случае необходимости, имя файла под которым будет сохранен документ;

• щелкнуть мышью по кнопке «Сохранить».

1. Просмотреть сохраненный файл, убедиться в том, что все рисунки сохраняются в отдельной одноименной автоматически создаваемой папке.

Упражнение 5. Навигация с помощью внутренних средств сайта

1. Загрузить сайт «Школьный сектор ассоциации RELARN» - school-sector.relarn.ru

2. Ознакомиться с начальной страницей сайта.

3. Выбрать в качестве проводника по сайту - «Таню».

4. Активизировать ссылку «Мастерская», ознакомиться с некоторыми детскими работами.

5. Пользуясь средствами внутренней навигации узла вернуться на главную страницу сайта.

Сервисы WWW

Приступая к данной теме, ученики уже либо обладают знаниями полученными в результате посещения занятий курса, либо в результате собственных «изысканий»⁷. Эта тема неплохо описывается в учебнике «Информатика и учебные технологии», автора Н.Д. Угринович.

На этой теме, в отличие от учебника я ещё несколько времени уделяю взаимодействию мейлера⁸ и сервера почты, а так же обзору современных почтовых серверов:

1. hotbox.ru

2. mail.ru

3. rambler.ru

4. etc.

А так же, на объяснения понятия спам и способов борьбы с ним (встроенные в почтовую программу средства, средства почтового сервера и т.д.)

В качестве контроля знаний, опять же, проводится контрольная работа на владение основными понятиями и сокращениями. А так же несложное самостоятельное задание.

Практическое задание по теме.

(сокращено)

1. Найти несколько отличий между двумя любыми (по ядру) браузерами. Найденные отличия обязательно записать в тетрадь для конспектов⁹

2. В избранном создайте папку Библиотеки и занесите туда 5 ссылок на on-line библиотеки.

Если ученики начинают весьма долго искать, то им можно подсказать, где именно искать¹⁰, хотя, практика показала что они¹¹ в состояние найти более десятка этих библиотек.

Оценивая представленный материал в «учебнике Угриновича», я смог всё же не затрагивать темы видеоконференций на практике. Это связано с тем, что технические возможности того компьютерного класса где я работаю, не позволяют такое проводить. Да и потом, скорость связи с ГС в России пока оставляет желать лучшего.

Работа с изображениями (урок самостоятельной работы по разработкам)

Следующим разделом к которому преступают ученики является обработка и создание графической информации. Понимая всю значимость темы, я стараюсь наиболее правильно объяснить важность качественного рисунка и концепции цвета на web ресурсе.

Проанализировав учебники, понял, что опять же, «учебник Макаровой» практически не содержит ни какой полезной о данном разделе информации. Но не смог меня порадовать и «учебник Угреновича», в нём рассматривается только графический редактор Paint, который, конечно же, применим для web-дизайна, но всё только в самых крайних случаях.

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

Создание анимационных GIF-изображений

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

Не следует забывать, что анимация должна дополнять дизайн страницы, а не отвлекать от него внимание. Некоторые энтузиасты размещают на странице несколько анимации. Добавьте к этому средства реакции на события мыши (mouseover), а также аудио и другие мультимедиа — и вы очень быстро потеряете суть дизайна страницы, а заодно и свою аудиторию: Поэтому, размещая на странице активные элементы, не теряйте чувство меры.

Посмотрим, как создавать GIF-анимацию с помощью GIF Construction Set и Photoshop. He имеет значения, какие инструменты анимации и работы с изображениями вам .нравятся, методы все равно очень похожи, и мой пример поможет вам прямо сейчас начать создание GIF-анимаций.

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

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

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

Создадим анимацию, где можно будет прочесть "I love my саt”

1. Откройте программу работы с изображениями.

2. Создайте первое из изображений. Выберем размеры 100x100 пикселей — не забудьте указать эти размеры при создании нового файла с помощью команды File>New.

3. Первое изображение — это слово "I", так что с помощью инструмента Туре выберите для него шрифт и введите само слово, разместив его в центре изображения.

4. Оптимизируйте изображение в GIF-формат.

5. Сохраните файл как image_l.gif.
Теперь создадим следующее изображение.

1. В своей программе откройте имеющийся файл с пиктограммой.

2. Задайте изображению нужные размеры и вырежьте лишние участки.

3. Индексируйте изображение и оптимизируйте его до минимально возможного –числа цветов без потери качества.

4. Экспортируйте его как GIF-изображение.

5. Сохраните файл как image_2.gif.

Теперь повторяйте последовательность действий из первого или второго примера, в зависимости от того, работаете ли вы с текстом или графикой. Называйте каждое изображение. И соответствии с его порядковым номером.

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

Image_l .gif GIF-изображение размером 100x100 пикселей со словом "I"

Image_2.gif GIF-изображение размером 100x100 пикселей, на котором показано серд

Image_3.gif GIF-изображение размером 100x100 пикселей со словом "mу"

Image_4.gif GIF-изображение размером 100x100 пикселей, на котором показана кошка

Теперь все эти файлы находятся на жестком диске. Чтобы создать анимационную графику с помощью GIF Construction Set, выполните описанные ниже действия.

1. Откройте GIF Construction Set.

1. Выберите команду меню File Animation Wizard.

1. Щелкните на кнопке Next.

1. Выберите Yes в качестве ответа на вопрос Use with a Web Page.

5. Щелкните на кнопке Next.

6. Выберите количество выполнений цикла показа анимации.

7. В следующем диалоговом окне необходимо указать вид графики. Выберите то описание, которое лучше всего соответствует вашей графике. У меня это рисованное изображение — Drawn (рис. 30.6).

8. Теперь следует установить время задержки. Для удобства демонстрации придерживайтесь значения по умолчанию, т.е. 100 сотых секунды, хотя в будущем можно будет выбирать любое время (а также менять уже установленное значение).

9. Щелкните на кнопке Next. " 0. 10. Выполните команду Select.

11. Перейдите в каталог, где хранятся созданные вами GIF-изображения.

12. Выберите изображения в том порядке, в каком они должны появляться при анимации.

13. Щелкните на кнопках Next, Done.

14. Когда GIF Construction Set закончит создание анимации, воспользуйтесь для сохра­нения файла командой Save As

15. Теперь просмотрите свою анимацию с помощью команды View.

Кроме того, учитывая, что нигде (из учебников для школы) не встретил нормально описанной теории цвета¹² пришлось создавать её полностью из ресурсов интернета¹³. В данном разделе эта всего лишь одна лекционная тема, но без неё невозможно создание полноценных правильно сконфигурированных по цвету сайтов.

В конце раздела такая же практика и спрос небольшого количества теории.

HTML (применение докладов и сообщений)

В данном разделе ученики узнают об инфраструктуре HTML документа, о стандартах W3C¹⁴, о средах редактирования и т.д.¹⁵ О средах редактирования, на мой взгляд, нужно говорить в сравнение, потому как это весьма и весьма спорный момент во всём web-дизайне. Эту тему я стараюсь преподать и объяснить вот таким образом. Хотя весь урок и проходит в виде беседы, рассказа (не лекции), мы всё же записываем некоторые ключевые моменты.

Среды редактирования HTML

(фрагмент)

Среда редактирования HTML является нейтральной полосой между простейшим текстовым редактором и приложением WYSIWYG. Выбор среды редактирования дает все преимущества текстового редактирования; что же касается недостатков, то с ними ведется борьба.

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

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

Если ваши знания HTML не достаточно обширны и требуется приложение, которое поможет вам работать более эффективно, то среда редактирования HTML— это то, что вам нужно. Чтобы проверить подобное утверждение, рассмотрим некоторые возможности этого популярного способа кодирования.

Преимущества сред редактирования HTML

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

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

Другим преимуществом является проверка синтаксиса, которая предлагается большинством сред. Этот полезный инструмент проверяет код, помогая выявлять проблемы, и исправляет многие ошибки и опечатки.

Выделение дескрипторов цветом весьма эффективно, потому что позволяет быстро их распознать. Например, можно выводить все дескрипторы изображений желтым цветом, а табличные,— синим. Это • может быстро найти информацию, в особенности на очень сложных страницах. Такими полезными функциями обладает редактор 1st page.

Приложения WYSIWYG¹⁶

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

Другое преимущество этого типа приложений в том, что они позволяют заниматься дизайном _ Web-cстраниц, даже не изучая HTML. Графический интерфейс позволяет разместить на странице : необходимую графику и текст и перемещать их до тех пор, пока не будет найден наиболее подходящий внешний вид. За последующую генерацию кода отвечает программное обеспечение.

Некоторые приложения WYSIWYG, такие как FrontPage корпорации Microsoft, имеют очень мощные функциональные возможности, не относящиеся к дизайну. Сюда входят расширения, позволяющие управлять проектами, и специальные приложения, например, для поиска или поддержки форм. Такие возможности привлекают к WYSIWYG многих пользователей.

Отлично понимая, почему программы WYSIWYG так популярны, не могу не отметить, что использование большинства таких приложений связано с большими проблемами.

Первая из них относится к контролю. HTML позволяет авторам осуществлять самый точный контроль над страницей. Конечно, хотя стандарт 4.0 предлагает технологии, решающие многие проблемы контроля, повседневное их использование все еще ограничено. Это означает, что разработчик вынужден полагаться на связь созданного им дизайна и HTML-кода. Это целостный процесс, лучше всего определяемый опытом, которого у приложений просто быть не может. Касается ли это выбора процентных значений или пикселей для размера данного элемента либо настройки всего кода, в приложениях WYSIWYG обычно отсутствует возможность тонкой настройки.

Многие программы WYSIWYG, в особенности старые версии FrontPage, модифицируют написанный вами код HTML

Вы уже знакомы с понятием "толстого кода"; эта проблема затрагивает и программы WYSIWYG. Хотя степень настройки таких программ по сравнению с утилитами преобразова­ния выше, кодирует все же программа, а не вы. Это в конечном итоге означает, что получен­ный код обычно отражает стиль программы, а не разработчика кода. В листинге 3.3 показан код, полученный с использованием WYSIWYG-программы Adobe GoLive. Листинг 3.4 содержит тот же код, созданный вручную.

Проектная деятельность учащихся

Первая проектная деятельность учащихся

После рассмотрения многообразия тегов (дескрипторов) необходимых для написания простейших страниц ученики приступают к созданию своих первых «проектов». Изучение тегов строится в соответствие с логическими связями самого HTML. В конце первого полугодия дети создают первый серьёзный проект, который должен отвечать нескольким требованиям:

1. Нести обязательную информационную нагрузку.

2. Содержать не менее 10 страниц

3. Иметь графическое оформление.

4. Все цвета сайта должны быть совмещены в соответствие с теорией цвета.

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

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

Вторая проектная деятельность

В конце изучения ученики обладают достаточным «багажом» знаний и способны использовать как JS так PHP. Что сильно повышает их интерес к создаваемому проекту. После изучения серверного языка PHP ученики способны написать достачно серьёзные скрипты, такие как «Гостевая книга», «Форум». Причем предполагается что все скрипты они размещают на своем сайте – проектная деятельность второго полугодия, которая является логическим завершением курса.

Самое главное, что отличает проектную деятельность от других видов проверочных работ – публичная защита. Что вырабатывает у них стремление сделать свой сайт (проект) более качественным и привлекательным.

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

Заключение

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

Приложения

Приложение №1

Распределение часов курса Web-дизайн, основы сайто строения

Темы занятий	Количество часов
Основы навигации в Интернет	8
Связь в сетях Ethernet. Иерархия протоколов. IP-адрес. DNS. Структура Интернет-адреса	2
Интерфейс программы Microsoft Internet Explorer	1
Приемы навигации
Автозавершение адреса	1
Навигация по документам, содержащим фреймы
Выбор начальной страницы	1
Переключение кодировок русского языка
Сохранение и печать Web- страниц
Упражнения
Основы навигации (Упражнение 1)	1
Сохранение и просмотр текста документа(Упражнение 2)
Сохранение и просмотр изображения. (Упражнение 3)	1
Сохранение и просмотр Web-страницы (Упражнение 4)
Навигация с помощью внутренних средств сайта (Упражнение 5)	1
WWW-сервис Интернет	3
Сервисы Интернет	1
Что такое WWW?
Программы просмотра
Приемы эффективной работы с программой Microsoft Internet Explorer	1
Избранные страницы	1
Реорганизация ярлыков избранных страниц по папкам
Системы бесплатной почты в Интернет
Популярные интернет сервера	1
Поисковые системы в Internet	2
Тематические каталоги	1
Поисковые машины	1
Работа с изображениями	3
Обработка изображений в Photoshop	1
Изменение яркости изображения
Добавление текста на изображение	1
Кадрирование
Акцентуация внимания на отдельны части изображения	1
Работа с цветовой палитрой фотографии
HTML
Что такое HTML	5
Инфраструктура HTML	1
Стандарты и соглашения	1
W3C
Среды кодирования	1
Кодирование вручную	2
Приложения WYSIWYG
Локальное управление HTML-документами	2
Управление файлами	1
Правильность имён	1
Структура каталогов
Основы HTML	3
Синтаксис HTML	1
Дескрипторы (тэги)
Специальные символы	1
Горизонтальная симметрия
Метод контейнеров	1
Создание документов HTML	2
Структура документа	1
Структура тела документа (Standard BODY)
Вертикальная симметрия	1
Форматирование и выравнивание текста	3
Элементы форматирования	1
Концепция текста
Работа с заголовками	1
Выравнивание абзаца, позиционирование
Предварительно форматированный текст	1
Тэг P
Тег DIV
Списки	3
Использование списков	1
Значение списков
Неупорядоченные списки
Нумерованные списки	1
Инкапсуляция списков
Атрибуты списков	1
Связывание страниц	3
Дескриптор якоря	1
Абсолютное связывание
Относительное связывание	1
Внутренние ссылки	1
Почтовые ссылки
Работа с изображениями	4
Тэг IMG	1
Атрибуты тэга изображения	1
Плавающие изображения
Позиционирование изображения	1
Комбинации изображений
Технологии MAP	1
Работа с тэгом BODY	1
Управление цветовой палитрой вложенных объектов	1
Атрибуты браузера IE
Работа со шрифтами	2
Основы полиграфии	1
Ориентирование
Интерлиньяж	1
Атрибуты тэга FONT
Таблицы	3
Симбиоз таблицы с рисунком	1
Внедрение таблиц в документ
Динамические и фиксированные таблицы	1
Выравнивание таблиц	1
Технология CSS	4
Стилизация символов	1
Свойства стилей и их назначения	1
Изменение атрибутов стиля	2
Использование фреймов	3
Вопрос о необходимости использования фреймов	1
Структура фреймов	1
Набор фреймов
Построение страниц с фреймами	1
Дескриптор NOFRAME
Эффективный дизайн страницы	2
Концепция интерфейса пользователя	1
Анализ цели узла
Информационный замысел сайтостойтеля
Теория цвета	1
Технология цвета в WEB
Цвет и гамма экрана
Проектная деятельность учащихся	12
Разработка тематики	1
Анализ подготовленного материала	1
Обработка графического материала	1
Создание дизайна	2
Непосредственное создание сайта	6
Опубликование сайта	1
Браузерные языки программирования
JS	4
Знакомство с JavaScript	1
Добавление сценария на страницу
Добавление операторов JS
Вывод результат на экран	1
Тестирование сценария
Использование функций	1
Обработка событий
Скрытие сценариев в старых браузерах	1
Использование и хранение значений	3
Использование переменных	1
Типы данных	1
Преобразование данных	1
Тестирование и сравнение значений	3
Оператор if	1
Использование условных выражений	1
Основы дискретной математики	1
Задание нескольких условий
Цикличности	2
Использование цикла While	1
Использование цикла For
Управление массивами	1
Обработка событий	2
Роль обработчика событий в JS	1
События, связанные с мышью
События связанные с клавишами	1
Событие OnLoad
Добавление рисунков и анимаций	2
Использование раздельного рисунка	1
Динамические рисунки
Change picture	1
Простая анимация
Создание сценариев для разных броузеров	1
Получение сведений о браузере	1
Поддержка JS браузером
Серверные языки программирования
РНР	1
Общее понятие об СЯП	2
Достоинства и недостатки РНР программирования	2
Переменные, константы, выражения	4
Типы переменных	1
Некоторые условные обозначения	1
Константы	1
Выражения
Операции	1
Использование форм в HTML	5
Создание формы	2
Распределение видов ввода данных	2
Методы передачи данных на сервер обработки	1
Использование данных от форм в PHP	3
Трансляция полей формы в переменные	1
Трансляция переменных окружения и Cookies	1
Трансляция списков	1
Трансляция массивов
Конструкции РНР	8
echo	1
If-else
Использование альтернативного синтаксиса	1
Цикл с предусловием While	1
Цикл с постусловием do-while	1
Универсальный цикл for	1
Инструкции break & continue	3
Инструкция include & require
Ассоциативные массивы	4
Создание массивов	1
Использование массивов
Списки и строки	1
Инструкции array, count.	1
Сериализация	1
Строковые функции	2
Сортировка массивов	1
Ключи и значения	1
Комплексная замена в строчке
Математические функции	2
Встроенные константы	1
Функции округления	1
Минимум максимум
Дополнительные функции PHP	2
Проектная деятельность учащихся	17
Разработка тематики	3
Разработка симбиоза с HTML проектом	1
Обработка информационной нагрузки	1
Обработка графической информации	3
Непосредственная дополнение HTML проекта PHP & JS	9
Публичная защита проекта деятельности	4

Препологаемый результат:

* Расширить знания учащихся при получаемые при изучение основного курса. * Развить интерес к предмету, любознательность, смекалку. * Обучить методам решения поставленных задач с помощью персонального компьютера и соответствующего программного обеспечения.

Приложение №2

Консорциум World Wide Web (W3C)

Консорциум World Wide Web. Официально консорциум действует с 14 декабря 1994 года. Это независимая международная организация, куда входят разработчики Internet и Web — от отдельных лиц до представителей больших корпораций, таких как Micro­soft, IBM, Sun Microsystems и Netscape.

Деятельность консорциума состоит в наблюдении за стандартизацией HTML, а также за различными протоколами и языками, связанными с Web, включая XML, CSS, SMIL, HTTP, URL, FTP, NNTP и SGML.

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

Некоторые из предложенных изменений связаны с усовершенствованием протоколов. Главные изменения вносятся в HTTP, помощник и транспорт HTML. Предлагаемые изменения в первую очередь касаются технологий, которые должны расширить возможности дизайна и функциональность Web-узлов.

Те, кому интересны история, эволюция, использование и будущее HTML, должны регулярно посещать узел W3C (www.w3.org).

Литература

1. Браунденбау Д, JavaScript: сборник рецептов для профессионалов СПб, Питер, 2000г.

2. Котеров Д., PHP4, СПб, BHV, 2001

3. Макарова. Н. В. Информатика СПб., 2001г.

4. Молли Э. Хольцшлаг, Использование HTML 4, 6-е издание, М. 99г.

5. Ричард У. Стивенс, Протоколы TCP/IP Практическое руководство, СПб., 2002г.

6. Угринович. Н. Д. Информатика и информационные технологии. М., 1998г.

Интернет ресурсы

http://php.spb.ru - «Питерский РНР портал»

http://php.krivyeruki.ru/ - «Кривые руки – познавательный портал Самары»

http://manlix.ru - «Манликс, инфомационный ресурс»

http://www.myweb.ru/ - «Мой хостинг»

http://rus.inc.ru/ - «Библиотека энциклопедий»