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

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

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

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

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

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

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

Учитель:

Ларкина О.А.

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

Цели:

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

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

Ход занятия.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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