Конспект урока по Информатике "Элементы сайтостроения" 9 класс

МОУ «Средняя общеобразовательная школа №1 г.Тосно

с углубленным изучением отдельных предметов»











«Элементы сайтостроения»

Занятие с учащимися 9-х классов 

в рамках элективного курса

«Основы Web-дизайна»





Учитель:

Ларкина О.А.














Тема занятия: Элементы сайтостроения.

Цели:

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

Закрепить базовые навыки по созданию сайта;



Ход занятия.

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



Организационный момент.



Объявление темы и целей урока.



После организационной части необходимо сразу сформулировать проблему:



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



Скажите, а что включает в себя понятие HTML?



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



Тогда ответьте на другой вопрос: Что же такое гипертекст?



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



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



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



Что мы понимаем под структурой сайта?



(Структура сайта - система взаимного расположения и взаимосвязей страниц сайта. Часто под структурой сайта подразумевают схему сайта.)



Давайте вспомним классификацию структур сайта (презентация)



Линейная структура

Это самая простая структура сайта. Страницы сайта располагаются строго одна за другой. В линейной структуре не существует разделения содержания на уровни. Все страницы на таких сайтах равноправны.



Линейная структура с ответвлениями





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







Решетчатая структура



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



Древовидная структура

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













Итак, существует целый ряд различных структур сайта. Какую структуры выбрали мы?

(Линейную структуру с ответвлениями)



Каков бы ни был объем сайта, его всегда можно рассматривать как объект творческой деятельности, который сам состоит из таких объектов, как страницы с текстом, иллюстрациями и т.д. 

Соразмерно скомпоновать эти объекты, подобрать элементы оформления – сложная и увлекательная задача!



Сегодня объектом нашего внимания является сайт, посвященный Николаю Васильевичу Гоголю.

А вы знаете, почему в этом году особое внимание уделяется этому писателю?

(Д. Кристина: 200 лет со дня рождения писателя).



Прежде чем приступить к работе, рассмотрим уже готовые страницы нашего сайта «Заочная экскурсия по Гоголевским местам России».

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



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



«Хороший дизайн – создание порядка из хаоса» - высказывание Роджера Паркера, одного из опытнейших дизайнеров.



	Переходим к формулировке задания:

	

	Вы уже набросали некоторые свои мысли по данной теме. Чего по вашему мнению не хватает в оформлении страниц сайта и что бы вы хотели добавить?

	(Бегущая строка, анимация)

	

	Теперь вы разделитесь на 3 команды по три человека.

	Давайте тогда определимся, первая группа добавляет бегущую строку на главную страницу; вторая группа размещает анимацию.

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

	

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

	Необходимо позаботиться об оформлении итоговой работы.

	Итак, перед вами стоит «триединая задача»: литературная, дизайнерская, техническая (в подчинении у первых двух).

	

	Группы по очереди приступают к работе с подробными объяснениями. В качестве вспомогательного раздаточного материала следует раздать некоторые указания о ходе работы.

	

	Подведение итогов

	

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

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

	Также у ребят есть еще готовые работы, одну из которых покажет Кристина.

	Домашнее задание

	

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

	У кого дома нет компьютера, вы знаете, что для вас в школе работает интернет-класс.