На чтение: ≈ 29 мин.Одна из задач профильной школы — содействовать воспитанию нового поколения, отвечающего по своему уровню развития и образу жизни условиям информационного общества. Для этого учащимся технологического профиля предлагается осваивать способы работы с информационными потоками — искать необходимую информацию, анализировать ее, выявлять в ней факты и проблемы, самостоятельно ставить задачи, структурировать и преобразовывать информацию в текстовую и мультимедийную форму, использовать ее для решения учебных и жизненных задач
ПРИМЕРНОЕ ТЕМАТИЧЕСКОЕ ПЛАНИРОВАНИЕ
Глава I. Моя веб-страничка (6 ч).
Глава II. Графика (4 ч).
Глава III. Гипертекстовый документ (6 ч).
Глава IV. Виды сайтов (4 ч).
Глава V. Основы HTML (8 ч).
Глава VI. Редакторы сайтов (8 ч).
Глава VII. Дополнительные возможности создания веб-страниц (6 ч).
Глава VIII. Основы веб-дизайна (8 ч).
Глава IX. Размещение, «раскрутка» и поддержка сайтов в сети (4 ч).
Глава X. Проектирование сайта (4 ч).
Глава XI. Зачетная работа (10 ч).
Глава XII. Олимпиада по веб-дизайну (2 ч).
Содержание курса
В этой главе вы узнаете, что такое гипертекст, как создаются веб-страницы, что делают браузеры. Познакомитесь с некоторыми тегами – командами языка HTML. Научитесь менять цвет шрифта и фона. Создадите свою «визитку» в виде простейшей веб-страницы.
Основные понятия: гипертекст, HTML, тег, браузер, веб-страница, разметка, структура документа, заголовок, тело.
Содержание главы:
Введение
Техническая часть
Теги HTML
Структура веб-страницы
Заголовок документа
Тело документа
Атрибуты тегов
Цвет фона
Изображение как фон
Цвет текста
Цвета
Размер и форма шрифта
Теги форматирования текста
Взаимодействие тегов
Текстовые блоки
Заголовки
Абзацы
Перевод строки
Разделительная линия
Заключительный эксперимент
Дополнительная информация
Обобщение
Творческая работа. Тема «Самопрезентация»
Самооценка
Рефлексия
В этой главе вы познакомитесь с форматами графических файлов, их достоинствами и недостатками, возможностями для применения на веб-страницах. Узнаете, как вставлять изображение в HTML-документ, управлять их видимыми размерами и расположением на странице. Дополните свою визитку графическими элементами.
Основные понятия: растровый формат, векторный формат, метафайлы, рамка изображения, выравнивание, обтекание.
Рисунки и фотографии в сети «Интернет»
Параметры графического файла
Форматы графических файлов
Растровые форматы
JREG
GIF
PNG
Достоинства растрового формата
Недостатки
Векторные форматы
Метафайлы
Графические редакторы
Как создать графический файл для веб-страницы
Прозрачная графика
Связывание графического файла с HTML-документом
Изображение в HTML-документе
В помощь читателям веб-страниц
В помощь дизайнерам
Творческая работа. Тема «Сделай красиво!»
В этой главе вы познакомитесь со способами организации информации на сайте, узнаете об установлении гипертекстовых связей между документами, научитесь создавать текстовые гиперссылки и изображения-ссылки, менять их вид. Создадите собственный небольшой проект сайта.
Основные понятия: организация информации, гипертекстовые ссылки, внутренние ссылки, активные ссылки, посещенные ссылки, абсолютные адреса, относительные адреса.
Способы организации гипертекстовых документов
Разработка сценария гипертекстового документа, состоящего из нескольких файлов
Гипертекстовые ссылки
За пределами документа
Текстовые ссылки
Изображения-ссылки
А – первая буква алфавита. Главный тег интернета.
Абсолютные адреса
Относительные адреса
Хотите жить отдельно? Войдите в новое окно
Внутренние ссылки. Не говори бабушке, что очки дома, скажи, где они лежат
Как в гостях сразу пройти к столу?
Чтобы найти иголку в сене, она должна быть заметной.
Задание цвета ссылок на веб-странице
Не как все. Задание цвета отдельных ссылок
Цвет и наличие рамок у изображений ссылок
Ждите ответа. Ссылка на адрес электронной почты
Творческая работа. Тема «Выполнение и защита небольшого проекта» (сайт «Мой класс», «Наш фэн-клуб» и т.п.)
В этой главе вы познакомитесь с различными видами сайтов, рассмотрите случаи, когда выбирается тот или иной вид сайта. Узнаете, как привлечь внимание посетителей, оптимально организовать информацию, обеспечить интерактивное взаимодействие с посетителями. Познакомитесь с некоторыми критериями оценки сайтов.
Основные понятия: виды сайтов, критерии оценки, дизайн, навигация, эргономика, юзабилити, скорость загрузки, интерактивность, чат, форум, гостевая книга.
Виды сайтов, их назначение
Способы управления вниманием посетителей
Способы организации информации
Полнота информации и ее обновление
Графический и технический дизайн
Навигация
Скорость загрузки страниц и определяющие факторы
Интерактивность сайта
Интернет-технологии
Исследование действующих сайтов
Критерии оценки сайтов
В этой главе вы научитесь располагать информацию в необходимом месте на веб-странице; делить экран на отдельные окна с самостоятельной информацией и возможностью управления их содержанием; создавать различные интерактивные элементы и получать сообщение, как с ними работал пользователь; давать указания поисковым системам о самом важном на ваших веб-страницах. Выполните ряд индивидуальных творческих работ по разработке элементов сайта. Обеспечьте интерактивное взаимодействие с посетителями веб-страниц.
Основные понятия: списки, таблицы, фреймы, формы, метатеги, интерактивность.
Таблицы «Старые песни о главном»
Лишние ячейки. Пустые ячейки
Объединение ячеек. Согласуй с соседями
Разделение ячейки. Опять согласовывать
А стоит ли делить? Вложенные таблицы
Цвета фона. Таблица может быть радугой
Для радуги – цветную клетку!
Поля. В тесноте, да не в обиде
Жизнь с таблицами
Фреймы
Формы
Метатеги
Изучив эту главу, вы узнаете, зачем необходимы приложение Dreamweaver и другие редакторы сайтов; каковы возможности Dreamweaver при создании и редактировании сайтов в отличие от редакторов HTML-кодов; как настроить параметры Dreamweaver, как создавать с его помощью различные информационные ресурсы и связывать их друг с другом и с внешними ресурсами.
Основные понятия: редактор веб-страниц, активные элементы, динамический язык, сценарий, баннер, сервер, администрирование.
Создание нового сайта
Создание новых файлов и папок
Настройка характеристик веб-страницы
Фон
Гиперссылки
Настройка предпочтений для редактирования сайта
Использование таблиц
Использование слоев
Использование фреймов
Использование функций Rollover
Панель навигации
Доступ к HTML-коду веб-страницы
Творческая работа. Тема «Выполнение и защита проекта»
В этой главе вы узнаете, как быстро и эффективно изменять вид сразу всех веб-страниц сайта, оформлять их в одном стиле. Познакомитесь с основами создания каскадных таблиц стилей – CSS. Сделаете простую Flash-анимацию. Научитесь создавать динамические и интерактивные веб-страницы.
Основные понятия: каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML, интерактивность, сценарии, статические и динамические страницы, активные элементы.
Назначение CSS
Каскадные таблицы стилей
Основы CSS
Цвет в CSS
Размер в CSS
Комментарии
Создание таблицы стилей
Синтаксис
Наследование
Контекстные селекторы
Шрифт и текст – близнецы-братья
Фон. Помоги Тому Сойеру покрасить забор
Применение таблиц стилей к части страницы
Классы – это классно!
Подклассы. Может быть, кому-то это нужно
Свой личный тег? Веб-мастер не волшебник, но кое-что может
Строковый элемент
Блочный элемент
Свойства блоковГраница (border)Обтекание блока текстаПозиционирование. Как попасть туда, не знаю кудаИзбранные страницы. Стиль персональныйПрименение стиля для тега. Штучная работаВзаимодействие стилей. Кто на новенького?Каскадность стилей и приоритеты. Чем больше влияние, тем меньше значимость – все не как в жизни.Это интересно!Ссылки могут быть украшениемID-классыОбобщениеТри способа задания стиляПриоритетыFlashОсновные понятияТипы символовАнимация движенияАнимация формыКнопкиДинамический HTMLРабота со слоямиПримеры использования DHTMLТворческая работа. Тема «Технический проект»СамооценкаРефлексияГлава VIII. Основы веб-дизайна (8 ч)В данной главе вы увидите, что проектирование содержимого сайта – один из самых ответственных моментов при создании любого веб-ресурса. Посетителей привлекает в первую очередь актуальная для них информация, заставляющая их вновь и вновь возвращаться на сайт. Дизайн лишь подчеркивает содержание сайта, облегчает его восприятие, помогает ориентироваться в нем. Здесь же вы познакомитесь, как с помощью веб-дизайна достигнуть этих целей, создадите сами ряд элементов дизайна.Основные понятия: дизайн, векторная и растровая графика, графический редактор, инструменты, фильтры, графические примитивы, палитра цветов, формат графического файла, заголовки, текст, разделы, ссылки, термины, эффективность рекламы.Содержание главы:ЛоготипФирменный стильЦветовая гаммаМакет дизайнаВерстка и оптимизация веб-страницИнформационное наполнение сайта (контент)ЗаголовкиТекстПривлечение вниманияСоответствие содержаниюТерминыКонкретностьПростотаКраткостьЛогичность изложенияОрфографияРасположение элементов на сайтеГрафические элементыАнимацияБаннерыНавигацияОбобщениеТворческая работаВыполнение и защита творческих работ на выбранные темы (логотип, баннер, фирменный стиль, макет дизайна и др.)СамооценкаРефлексияГлава IX. Размещение, «раскрутка» и поддержка сайта в сети (4 ч)В этой главе вы научитесь размещать подготовленные вами сайты в сети «Интернет». Оценивать предлагаемые провайдерами условия размещения и выбирать оптимальные. Загружать на сервер свои файлы разными способами и тестировать веб-страницы. Научитесь делать свой сайт заметным среди многих.Основные понятия: интернет, IP-адрес, домен, провайдер, хостинг, трафик, доступ по коммутируемым каналам, выделенная линия, модем, скорость передачи информации, администрирование сайта, протоколы FTP, TCP/IP, HTTP, релевантность запросов, скорость загрузки, критичность размеров файлов изображений и веб-страниц, электронная почта, реклама, спам, статистика, посещаемость страниц сайта, счетчик, поисковые системы, поисковые работы, рейтинг ресурса, баннер, метатеги, ключевые слова, содержание, заголовки страниц, эффекты дизайна, интерактивность, баннерный обмен, обмен страницами.Содержание главы:ХостингРазмещение сайта у провайдераFTP – передача файловТестирование сайтаУдобство навигацииЦелостность данныхКорректность ссылокОрфографияГрафикаСкорость загрузкиДругие возможностиРегистрация сайта в поисковых системахОбмен ссылкамиБаннерная рекламаПринципы и технологии обновления сайтаАвтоматические системы обновления сайтаОбобщениеТворческая работаСамооценкаРефлексияГлава X. Проектирование сайта (4 ч)В этой главе вы узнаете, что если просто сразу сделать сайт, то вряд ли он будет интересен большинству посетителей. Чтобы ваш сайт удовлетворял общепринятым критериям, вы научитесь разрабатывать концепцию, цели и структуру сайта, продумывать его внутренние и внешние связи, назначение каждой страницы и элемента на ней. Эти задачи необходимо решить прежде, чем приступить к построению самого сайта.Основные понятия: концепция сайта, цели сайта, структура сайта, пользователи, навигация.Содержание главы:Концептуальное проектированиеОсновные и второстепенные целиДействия, которые необходимо предпринять для достижения поставленных целейСостав пользователейИнтересы групп пользователейРазделы сайтаКритерии достижения целиЛогическое проектированиеТип структуры сайта (линейная, иерархическая, контекстная, другая)Названия разделовЧто будет содержать в себе каждый разделОрганизация и связь разделов между собойКакая информация будет размещена на определенных страницах сайтаФизическое проектированиеТехнологии, которые будут применяться на сайтеИспользуемое программное обеспечениеВозможные проблемы и способы их устраненияКак будет обновляться информацияОбобщениеТворческая работаСамооценкаРефлексияГлава XI. Зачетная работа (10 ч)Пришло время выполнения вашего итогового проекта. Вы уже имеете опыт создания различных элементов сайта. Теперь все ваши знания и умения и предыдущие разработки необходимо применить для создания комплексного проекта – веб-сайта на выбранную вами тему. Сайт разрабатывается в группе или индивидуально. В любом случае от вас потребуется спроектировать, изготовить и разместить свой сайт в сети. Выполненный проект вам необходимо защитить перед своими одноклассниками и учителем. Возможна и дистанционная форма защиты с привлечением удаленных специалистов.Основные понятия: тема и структура веб-сайта, проектирование, изготовление, размещение, тестирование сайта, экспертная оценка.Содержание главы:Выбор темы творческого проекта – сайтаТехническое заданиеРаспределение работы между разными специалистами (заказчик, арт-директор, веб-мастер, кодер, программист, верстальщик, менеджер), их функции в общем проектеОсобенности коллективной (групповой) деятельности разработчиков сайтаПроектирование, создание и размещение сайта в сетиАкт сдачи-приемки работыЗащита выполненных проектовСамооценка и оценка. РефлексияГлава XII. Олимпиада по веб-дизайну (2 ч)Олимпиада по компьютерной графике и веб-дизайну – хороший способ проявить художественные, графические и технические способности. Данная олимпиада – межпредметная и может проводиться в рамках нескольких учебных предметов: изо, живопись, художественное творчество, декоративно-прикладное искусство, МХК, дизайн, информатика.Основные понятия: логотип, фирменный стиль, баннер, макет, графика, дизайн.Содержание главы:Олимпиадные задания:1. Разработайте макет своей «веб-визитки». Найдите необходимые слоганы и их графическое сопровождение.2. Разработайте макет логотипа своей школы (класса) в формате jpg или gif и представьте его в цветном и черно-белом вариантах.3. Изготовьте два баннера размером 120х60 – анимированный и статичный. Цель баннеров – воздействовать на эмоциональную сферу потенциального зрителя.4. Придумайте графическую иллюстрацию для раздела юмористического сайта. Иллюстрация необходима смешная, занимательная, оригинальная. Размер иллюстрации 130х190 пикселей. Формат файла jpg или gif.5. Разработайте титульную веб-страницу на одну из тем: «Наш класс», «Наша школа», «Мы – фанаты!», «Интернет-газета», «Веб-клуб», «Пункт продажи мобильных телефонов», «Магазин цветов», «Служба знакомств».Фрагмент пособия для учеников(из главы 7 «Дополнительные возможности создания веб-страниц»)Фон. Помоги Тому Сойеру покрасить заборКак писать надписи на интернет-заборах (веб-страницах), вы уже научились. Какому-либо тегу присваиваете значение атрибута COLOR в виде названия цвета или RGB-кода. И тег применяете к тексту.При изучении HTML-языка вы также научитесь задавать цвет фона и фоновое изображение. Рассмотрим, какие возможности для этого дают таблицы стилей.Параметрами фона можно управлять только для конкретного блочного элемента разметки. Таким элементом могут быть вся страница, таблица, абзац, заголовок и др. Например, если мы зададим стиль:h4 {background-color:black;color:white;} -все заголовки четвертого уровня будут отображаться белым цветом на черном фоне.Кроме цвета фона и его прозрачности теперь можно управлять фоновой картинкой (координатами ее размещения и способами повторения).Для работы с фоновым изображением существует несколько атрибутов: background-image – задает адрес изображения для фона; background-repeat – определяет, как будут дублироваться изображения на экране; имеет значения:- repeat – изображение дублируется по обоим направлениям;- repeat-x – изображение дублируется только по горизонтали;- repeat-y – изображение дублируется только по вертикали;- no-repeat – выводится одно изображение с его истинными размерами; background-attachment – задает поведение фона, он либо фиксируется (fixed), либо прокручивается (scroll) вместе с картинкой. При помощи этого свойства можно создать неплохой эффект; background-position – определяет положение исходной картинки на экране. Значениями могут быть команды LEFT, RIGHT, CENTER, координаты в пикселах или пунктах, а также в процентах. Можно указывать обе координаты, одну или ни одной. Отсутствующая координата заменится значением по умолчанию, обычно центрированием.Для краткости все свойства фона можно описать в общем атрибуте background:background: transparent color url repeat scroll positionПримеры:p {background: gray http://www.eidos.ru/logo.gif no-repeat fixed 50% 30px;}body {url(«fon.gif»); background-repeat:repeat-x; background-attachment:fixed;}Какое богатство возможностей при использовании всего одного изображения для фона! Однако при всем изобилии возможностей злоупотреблять ими не стоит.Задание.При изучении главы 2 вы создавали логотип и помещали его на веб-страницу в файле vizitka-family.htm. Измените страницу. Сделайте логотип фоновым изображением, зафиксированным в одном из верхних углов. Дублирование и прокрутку этого изображения отключите.Перспективы для выпускника курсаДля учеников профильной школы, выбирающих тот или иной элективный курс, немаловажна конкретная польза, практическая выгода данного курса. Поэтому задача учителя, презентующего данный курс, – раскрыть ученикам перспективные моменты данного курса.Ученик, окончивший курс «Технология создания сайтов», сможет в будущем: участвовать в российских и международных олимпиадах, конкурсах и телекоммуникационных проектах, где результаты обычно представляются в виде веб-страниц; неограниченно публиковать в сети «Интернет» свои творческие работы, получая отклики самой широкой аудитории; создавать современные сайты по требуемой тематике для себя, для родных, знакомых, на заказ; изготавливать сайты на коммерческих условиях; приобрести современную, престижную и высокооплачиваемую профессию; найти дистанционную работу в любом регионе страны и мира; установить дружеские и деловые связи по всему миру; выгодно представить себя, свои возможности, увлечения всему миру; завоевать уважение коллег и руководства организации, в которой будет работать, оказывая помощь по представительству организации в интернете, по рекламе ее продукции и по налаживанию деловых контактов с партнерами.Мнение учащихся о курсе«Я даже не думал, что могу выложиться настолько. Я занимался, а точнее сказать – учился веб-дизайну. Мои родители были довольны, что я стал изучать хоть что-то (до этого на компьютере только играл и без конца щелкал по мышке). Я изучил много книг по веб-дизайну, компьютерной графике, программированию. И вот, наконец, есть возможность показать уже всем, на что ты способен. Я в команде выполнял роль Java-программиста в отношении всего сайта, а также HTML-программиста и дизайнера главной и новостной страницы. При работе я использовал Macromedia Dreamweaver MX, Adobe Photoshop 7 и еще ряд мелких программ, которые тоже мне помогли в разработке сайта». – Данилов Ярослав, 11-й «Б» класс, лицей № 1, г. Нефтекамск.«Все члены команды единогласно выбрали тему сайта о сотовых телефонах. Мы распределили должности, занимаемые каждым членом команды. Их оказалось четыре: программист, арт-директор, журналист, текстовый редактор. Правда, границы деятельности оказались условными. Парадокс заключался в том, что самым легким оказалось работать в команде, но и самым сложным оказалось работать в команде. С одной стороны, один член команды выполняет первую часть задания, другой – вторую. С другой стороны, сколько людей, столько и мнений. Было нелегко найти оптимальный, поистине верный вариант. Говоря о будущем, нельзя не отметить тот неоценимый опыт, который мы получили, работая вместе. Уверен, он нам пригодится». – Бочков Михаил, 10-й «В», гимназия № 39, г.Тольятти.«Мы решили выбрать темой нашего сайта Ергина Юрия Викторовича, так как такие великие люди, как Юрий Викторович, должны быть известны миру. Это самый лучший, умный и уважаемый физик нашего города. Моя работа заключалась в сборе информации для сайта. Нелегко было «поймать» столь известного человека! Но наконец-то он уделил мне несколько своих драгоценных минут для того, чтобы рассказать о себе. Я даже не подозревала, что у этого человека столь увлекательная судьба. После встречи с Ергиным несколько часов я посвятила классификации информации, получилось пять разделов: биография, публикации, увлечения, ученики и советы. Еще некоторое время ушло на оформление: печать и на художественное редактирование. Я думаю, что лучше всего у меня получилась художественная обработка информации». – Жибурда Олеся, 11-й «Б» класс, гимназия № 111, г.Уфа.«Работу я выполнял самостоятельно. Сначала подбирал разные варианты страниц в голове, затем реализовывал их за компьютером. Пользовался «Блокнотом» и некоторыми html-редакторами. Труднее всего было делать сайт под разрешение 800х600, приходилось редактировать сайт на разных компьютерах». – Стаценко Роман, 10-й класс, НОУ ОШ «Пасифик Лайн Скул», г.Владивосток.«Благодаря олимпиаде Центра «Эйдос» я лишний раз убедился в том, что я могу и хочу связать себя с web-дизайном – есть силы, умение, желание и, главное, идеи. Ведь без идей, как бы человек хорошо ни владел своим делом, ничего путного не получится. Мною был выполнен такой элемент дизайна, как цветная полоса прокрутки – ее я выполнил в соответствии с цветовой гаммой сайта (белый со светло-голубыми контурами)». – Бершак Олег, 11-й «Б» класс, лицей № 1, г.Нефтекамск.Андрей Хуторской, доктор педагогических наук; Анатолий Орешко, кандидат физико-математических наук
Выбор читателей
Комментарии