Преподавание тем
веб-страница
Применимый класс
Второкурсник
Учебное время
1 урок
Анализ учебника
Фокус: как создать статические веб -страницы и динамические веб -страницы и их рабочий процесс
Сложность: рабочий процесс динамических веб -страниц
Цели обучения
Понять основные концепции веб -страниц, домашних страниц, веб -сайтов и их отношений, понимать концепции статических веб -страниц и динамических веб -страниц, понимать технологию статических веб -страниц и динамических веб -страниц и объяснить рабочий процесс
Требуются ресурсы и окружающая среда
Цифровые ресурсы
1. Поисковая система (www.google.com, www.baidu.com)
2. Несколько демонстрационных веб -страниц (статические веб -страницы и динамические веб -страницы)
Общие ресурсы
1. Глава 5, раздел 1 учебника «Применение сетевой технологии»; Поддерживающий компакт -диск
2. Учебные материалы, поддерживающие книги учителей
3. "Список учебных задач" веб -страницы "
Среда обучения поддержки
Компьютерная сеть классная комната, мультимедийное программное обеспечение сети или ЖК -проектор
Учебный дизайн
вопрос
Цель
Ключевые моменты/трудности/ключевые моменты
Проблема проектирования учебного руководства
Что такое веб -сайт? Что такое веб -страница? Что такое домашняя страница?
Понять смысл веб -сайтов, веб -страниц и домашних страниц
Из чего состоит веб -сайт?
Понять различные компоненты сайта
Логотип сайта, зона заголовка, зона горячей рекомендации
Какие веб -страницы мы обычно видим в Интернете?
Позвольте студентам понять код композиции статических веб -страниц - HTML
Понять структуру и основные теги языка HTML
Как статические веб -страницы появляются в браузере?
Освоить рабочий процесс статических веб -страниц в браузере
Браузер интерпретирует HTML -код
Из чего сделаны интерактивные веб -страницы?
Позвольте студентам понять композицию статических веб -страниц
Понять язык сценариев
Как динамические веб -страницы появляются в браузере под взаимодействием с пользователем?
Освоить рабочий процесс динамических веб -страниц в браузере
Процесс выполнения динамических веб -страниц
Процесс обучения
1. Новый урок введение:
Все студенты, которые подвергались воздействию Интернета, должны были посетить веб -сайт и увидеть веб -страницу. Веб -страницы, которые вы видите, имеют некоторые фиксированные форматы, такие как названия, логотипы веб -сайтов и т. Д. С точки зрения классификации веб -страниц, они, как правило, можно разделить на две категории. Одна категория не меняется с операциями пользователя, которые называются статическими веб -страницами, а другая категория меняется с операциями пользователя. Этот тип веб -страницы называется динамическими веб -страницами.
Сегодня я буду обсуждать вопрос о веб -страницах.
2. преподавание контента:
Ищите некоторые типичные веб -сайты через поисковые системы, чтобы отобразить их для студентов.
1. Концепция веб -сайта, веб -страницы, домашней страницы и отношения между тремя
Международный интернет, который люди посещают сегодня, состоит из веб -сайтов, и веб -сайт состоит из конкретных веб -страниц. Домашняя страница эквивалентна стартовой странице веб -сайта и играет руководящую и соединительную роль. Вообще говоря, пользователи могут получить доступ к большинству веб -страниц веб -сайта через домашнюю страницу.
Вопрос: Что такое веб -сайт? Что такое веб -страница? Что такое домашняя страница?
Занятие: учитель объясняет значение веб -сайта, веб -страницы и домашней страницы и отношения между тремя.
2. Структура веб -страницы
Структура страниц общих веб -сайтов, как правило, состоит из заголовка страницы, логотипа веб -сайта (логотип), области заголовка, навигационной панели, области входа в систему, области поиска, зоны доступа рекомендации, основной области контента, области нижнего колонтитула и т. Д.
3. Концепция статических веб -страниц
Статическая веб -страница - это веб -страница, хранящаяся в форме файла на сервере, и отправленная клиенту в том же формате.
Статические веб -страницы - это файлы, написанные на языке наценки гипертекста.
Вопрос: Какие веб -страницы мы обычно видим в Интернете?
Занятие: учитель объясняет состав статических веб -страниц и характеристики языка гипертекстовой разметки (HTML).
Исследуйте: студенты работают, просмотрите исходные файлы веб -страницы при просмотре веб -страницы.
4. Принцип отображения статической веб -страницы в браузере
Статическая веб -страница отправляется клиенту в том же формате с сервера, но после того, как этот файл прибывает в браузер, браузер должен найти код HTML в файле, а затем отобразить конкретный HTML -код в определенной форме, чтобы сформировать веб -страницу, наблюдаемой пользователем.
Вопрос: Как статические веб -страницы появляются в браузере?
Занятие: учитель объясняет процесс интерпретации браузера и эффект языка наценки гипертекста.
5. Концепция динамических веб -страниц
Динамические веб -страницы относятся к веб -страницам, которые автоматически создаются компьютерными системами во время просмотра пользователей. Они обычно используются для отображения информации в реальном времени или отображения конкретного контента в соответствии с взаимодействием с пользователем.
Особенности динамических веб -страниц: интерактивное, автоматическое обновление, изменение от места на время на человека
Общие формы динамических веб -страниц: счетчики, чаты, области обсуждения, BBS, записи выпускников и т. Д.
Две общие ситуации для формирования динамических веб -страниц: динамические веб -страницы, состоящие из чистых методов клиента и динамических веб -страниц, состоящих из режима клиентского сервера
Вопрос: из чего сделаны интерактивные веб -страницы?
Занятие: Учитель объясняет две общие ситуации формирования динамических веб -страниц, соответствующую композицию и характеристики динамических веб -страниц, состоящих из чистых методов клиента и режимов браузера/сервера.
Общение: как использовать системную палитру для точной настройки цвета
6. Принцип динамического отображения веб -страницы
Динамические веб -страницы, состоящие из чистых методов клиента: этот метод не требует взаимодействия с сервером и обычно напрямую встроен в веб -страницу в апплетах Java и языках сценариев. Его динамика отражена в том, что пользователи используют различные операционные веб -страницы отображают контент или формы, поддерживаемые такими технологиями, как JavaScript, JavaApplet и т. Д.
Отражение после класса
Дизайнер плана урока
Единица/адрес/почтовый индекс
электронная почта
Контактный номер
Студенты просматривают веб -страницу и просматривают веб -сайт с ясным, разумным и отличительным макетом страницы и завершают следующие операции.
Название веб -сайта:
URL на домашней странице:
Название страницы:
1. На каком языке написана статическая веб -страница? _____________________________________________________________________
2. Каковы характеристики динамических веб -страниц? __________________________________________________
3. Каковы общие динамические веб -технологии? _________________________________________________________________________
Экспериментальные требования:
(1) Узнайте о некоторых простых способах достижения динамических эффектов клиентских веб -страниц с помощью следующих коротких примеров динамических веб -страниц.
(2) путем изменения определенных свойств объекта в программе основные простые методы модификации на динамические эффекты веб -страниц.
(3) освоить простой способ создания динамических веб -страниц, вставив коды специальных эффектов веб -страницы в коды веб -страниц.
Пример экспериментальных шагов:
1. Введите исходный код динамической веб -страницы следующим образом, и наблюдайте и испытайте динамические эффекты веб -страницы, сгенерированной сегментом кода в браузере.
<html>
<голова>
<meta http-equiv = content-type content = text/html; charset = gb2312>
<Teal> Динамический эффект текста </title>
</head>
<тело>
<marquee onmouseover = this.stop () onmouseout = this.start () scrolllamount = 1 scrolldelay = 50 направление = up высота = 116 ширина = 188 граница = 1 bgcolor = olive> мышь остановится, когда она перемещается, и продолжает двигаться, когда она перемещается. Вы можете попробовать </marquee>
</body>
</html>
2. Опишите динамические эффекты, которые могут быть достигнуты с помощью приведенного выше кода:
3. Практическое применение: в соответствии с требованиями в таблице, анализируйте и изменяйте различные значения атрибутов в коде, и соблюдать персонализированные эффекты через браузер, сравните изменения до и после изменения и заполните форму в полном объеме на основе ваших собственных результатов наблюдения.
Код на динамических веб -страницах
Что играет код
1
onmouseover = this.stop () onmouseout = this.start ()
2
Указывает скорость движения текста
3
Направление = UP (можно изменить на: направление = правое направление = слева)
4
высота = 116 ширина = 188
5
Представляет цвет фона движущегося текста (можно изменить на следующие цвета: красный, желтый, синий, серебро и т. Д.)
4. Экспериментальная оценка:
Индикаторы оценки
Самооценка
Качество активности
Анализ функции кода на клиентских веб -страницах очень ясен
6
Анализ функции кода на клиентских веб -страницах является более четким
5
Анализ роли кода на веб -страницах клиента и общее понимание
3
Анализ функции кода на клиентских веб -страницах необходимо улучшить
2
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
____________________________________________________________________
__________________________________________________________________________________________________
__________________________________________________________________________________________________