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

Министерство общего и профессионального образования РФ. Мурманский Государственный Педагогический Университет Физико-математический факультет Отделение физика-информатика Кафедра информатики и общетехнических дисциплин Дисциплина Теория и методика преподавания информатики Тема Web-дизайн, основы сайто строения, проблемы построения курса и их решение.Курсовая работа студента 4 группы Умова Сергея Мурманск 2004 План 1. Введение 3 стр. 2. Анализ учебников 4 стр. a. Информатика 10-11, автора Н.В. Макаровой b. Информатика и информационные технологии 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 PHP язык web программирования который был разработан для учеников среднего старшего звена школы.

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

Информатика и информационные технологии. Предварив рассказ о возможностях ГС тут и далее, а так же как и во мно... 3. Существует определенный классический набор стандартных прикладных серв... etc.

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

Да и потом, скорость связи с ГС в России пока оставляет желать лучшего. Понимая всю значимость темы, я стараюсь наиболее правильно объяснить в... Чей проще сырье, тем легче и конечный продукт. Индексируйте изображение и оптимизируйте его до минимально возможного ... Другим преимуществом является проверка синтаксиса, которая предлагаетс...

Приложения WYSIWYG WYSIWYG what you see is what you get, что ты видишь то ты и получаешь, технолгия.

Эти приложения обеспечивают работу пользователя с помощью графического интерфейса. Они популярны не только из-за малого времени, требуемого для их изучения, но и благодаря легкой переносимости от пользователя к пользователю. Это особенно важно для компаний в которых много сотрудников работают с кодом 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 Explorer1Приемы навигацииАвтозавершение адреса1Навигация по документам, содержащим фреймыВыбор начальной страницы1Переключение кодировок русского языкаСохранение и печать Web- страницУпражненияОсновы навигации Упражнение 11Сохранение и просмотр текста документаУпражнение 2Сохранение и просмотр изображения.

Упражнение 31Сохранение и просмотр Web-страницы Упражнение 4Навигация с помощью внутренних средств сайта Упражнение 51WWW-сервис Интернет3Сервисы Интернет1Что такое WWWПрограммы просмотраПриемы эффективной работы с программой Microsoft Internet Explorer1Избранные страницы1Реорганизация ярлыков избранных страниц по папкамСистемы бесплатной почты в ИнтернетПопулярные интернет сервера1Поисковые системы в Internet2Тематические каталоги1Поисковые машины1Работа с изображениями3Обработка изображений в Photoshop1Изменение яркости изображенияДобавление текста на изображение1КадрированиеАкцентуация внимания на отдельны части изображения1Работа с цветовой палитрой фотографииHTMLЧто такое HTML5Инфраструктура HTML1Стандарты и соглашения1W3CСреды кодирования1Кодирование вручную2Приложения WYSIWYGЛокальное управление HTML-документами2Управление файлами1Правильность имн1Структура каталоговОсновы HTML3Синтаксис HTML1Дескрипторы тэгиСпециальные символы1Горизонтальная симметрияМетод контейнеров1Создание документов HTML2Структура документа1Структура тела документа Standard BODYВертикальная симметрия1Форматирование и выравнивание текста3Элементы форматирования1Концепция текстаРабота с заголовками1Выравнивание абзаца, позиционированиеПредварительно форматированный текст1Тэг PТег DIVСписки3Использование списков1Значение списковНеупорядоченные спискиНумерованные списки1Инкапсуляция списковАтрибуты списков1Связывание страниц3Дескриптор якоря1Абсолютное связываниеОтносительное связывание1Внутренние ссылки 1Почтовые ссылкиРабота с изображениями4Тэг IMG1Атрибуты тэга изображения1Плавающие изображенияПозиционирование изображения1Комбинации изображенийТехнологии MAP1 Работа с тэгом BODY1Управление цветовой палитрой вложенных объектов1Атрибуты браузера IEРабота со шрифтами2Основы полиграфии1Ориентирование Интерлиньяж1Атрибуты тэга FONTТаблицы3Симбиоз таблицы с рисунком1Внедрение таблиц в документДинамические и фиксированные таблицы1Выравнивание таблиц1Технология CSS4Стилизация символов1Свойства стилей и их назначения1Изменение атрибутов стиля2Использование фреймов3Вопрос о необходимости использования фреймов1Структура фреймов1Набор фреймовПостроение страниц с фреймами1Дескриптор NOFRAMEЭффективный дизайн страницы2Концепция интерфейса пользователя1Анализ цели узлаИнформационный замысел сайтостойтеляТеория цвета1Технология цвета в WEBЦвет и гамма экранаПроектная деятельность учащихся12Разработка тематики1Анализ подготовленного материала1Обработка графического материала1Создание дизайна2Непосредственное создание сайта6Опубликование сайта1Браузерные языки программированияJS4Знакомство с JavaScript1Добавление сценария на страницуДобавление операторов JSВывод результат на экран1Тестирование сценарияИспользование функций1Обработка событийСкрытие сценариев в старых браузерах1Использование и хранение значений3Использование переменных1Типы данных1Преобразование данных1Тестирование и сравнение значений3Оператор if1Использование условных выражений1Основы дискретной математики1Задание нескольких условийЦикличности2Использование цикла While1Использование цикла ForУправление массивами1Обработка событий2Роль обработчика событий в JS1События, связанные с мышьюСобытия связанные с клавишами1Событие OnLoadДобавление рисунков и анимаций2Использование раздельного рисунка1Динамические рисункиChange picture1Простая анимацияСоздание сценариев для разных броузеров1Получение сведений о браузере1Поддержка JS браузером Серверные языки программированияРНР1Общее понятие об СЯП2Достоинства и недостатки РНР программирования2Переменные, константы, выражения4Типы переменных1Некоторые условные обозначения1Константы1ВыраженияОперации1 Использование форм в HTML5Создание формы2Распределение видов ввода данных2Методы передачи данных на сервер обработки1Использование данных от форм в PHP3Трансляция полей формы в переменные1Трансляция переменных окружения и Cookies1Трансляция списков1Трансляция массивовКонструкции РНР8echo1If-elseИспользование альтернативного синтаксиса1Цикл с предусловием While1Цикл с постусловием do-while1Универсальный цикл for1Инструкции break continue3Инструкция include requireАссоциативные массивы4Создание массивов1Использование массивовСписки и строки1Инструкции array, count.1Сериализация1Строковые функции 2Сортировка массивов1Ключи и значения1Комплексная замена в строчкеМатематические функции2Встроенные константы1Функции округления1Минимум максимумДополнительные функции PHP2Проектная деятельность учащихся17Разработка тематики3Разработка симбиоза с HTML проектом1Обработка информационной нагрузки1Обработка графической информации3Непосредственная дополнение HTML проекта PHP JS9Публичная защита проекта деятельности4 Препологаемый результат Расширить знания учащихся при получаемые при изучение основного курса.

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

Приложение 2 Консорциум World Wide Web W3C Консорциум World Wide Web. Официально консорциум действует с 14 декабря 1994 года. Это независимая международная организация, куда входят разработчики Internet и Web от отдельных лиц до представителей больших корпораций, таких как Microsoft, 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. Ричард У. Стивенс, Протоколы TCPIP Практическое руководство, СПб 2002г. 6. Угринович.

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

М 1998г. Интернет ресурсы httpphp.spb.ru - Питерский РНР портал httpphp.krivyeruki.ru - Кривые руки познавательный портал Самары httpmanlix.ru - Манликс, инфомационный ресурс httpwww.myweb.ru - Мой хостинг httprus.inc.ru - Библиотека энциклопедий.