Webページレッスンプラン・初心者向けレッスンプラン_HTML/Xhtml_Webページ制作

教育トピック
ウェブページ
対象グレード
高校2年生
授業時間
1授業時間
教科書分析
キーポイント: 静的 Web ページと動的 Web ページの構成と作業プロセス
難易度: 動的 Web ページの作業プロセス
学習目標
Web ページ、ホームページ、Web サイトの基本概念とそれらの間の関係を理解し​​、静的 Web ページと動的 Web ページの概念を理解し、静的 Web ページと動的 Web ページの技術を理解し、次のことができるようになります。作業プロセスを説明する
必要なリソースと環境
デジタルリソース
1. 検索エンジン (www.google.com、www.baidu.com)
2. いくつかのデモ Web ページ (静的 Web ページと動的 Web ページ)
一般リソース
1. 教科書「ネットワーク技術応用」第 5 章セクション 1 ；応援CD
2. 教材用ティーチャーズブック
3. 《Web ページ》学習タスクリスト
指導支援環境
コンピュータネットワーク教室、マルチメディアネットワーク教室ソフトウェアまたはLCDプロジェクター
インストラクショナルデザイン

質問
目的
キーポイント/難しさ/キーポイント
指導指導の質問デザイン
ウェブサイトとは何ですか?ウェブページとは何ですか?ホームページとは何ですか?
Web サイト、Web ページ、ホームページの意味を理解する

ウェブサイトは何でできていますか?
Web サイトのさまざまなコンポーネントを理解する
ウェブサイトのロゴ、ヘッダー領域、ホットレコメンデーション領域
私たちが普段インターネットで見る Web ページは何で構成されていますか??
生徒に静的 Web ページの構成コードを理解させます—HTML
HTML 言語 の構造と基本タグを理解する
静的な Web ページはブラウザーにどのように表示されますか?
ブラウザでの静的 Web ページの作業プロセスをマスターします
ブラウザによる HTML コード の解釈プロセス
インタラクティブな操作を行う Web ページは何でできていますか?
生徒に静的 Web ページの構成を理解させます
スクリプト言語を理解する
ユーザーの操作下で動的 Web ページはブラウザーにどのように表示されますか?
ブラウザでの動的な Web ページの作業プロセスをマスターします
動的 Web ページの実行プロセス
指導プロセス
1. 新しいレッスンの紹介:
インターネットにアクセスしたことがあるすべての生徒は、Web サイトにアクセスし、Web ページを見たことがあるはずです。誰もが目にするWebページには、タイトルやWebサイトのロゴなど、決まったフォーマットが存在します。 Webページの分類は、ユーザーの操作によって変化しないものと、大きく2つに分けられます。を静的 Web ページと呼び、もう 1 つはユーザーの操作に応じて変化する Web ページを動的 Web ページと呼びます。
今日はウェブページの問題について説明します。
2. 指導内容:
検索エンジンでいくつかの典型的な Web サイトを検索し、生徒に表示します。
1。ウェブサイト、ウェブページ、ホームページの概念とその 3 つの関係
今日人々がアクセスする国際的なインターネットは Web サイトで構成されており、Web サイトは一般に、Web サイトのスタートページに相当し、接続を誘導する役割を果たします。つまり、ユーザーはホームページを通じて Web サイトのほとんどの Web ページにアクセスできます。

質問: Web サイトとは何ですか?ウェブページとは何ですか?ホームページとは何ですか?
アクティビティ: 教師は、Web サイト、Web ページ、ホームページの意味と 3 つの関係について説明します。

2。 Web ページの構造
一般的な Web サイトのページ構造は、通常、ページ タイトル、Web サイトのロゴ (LOGO)、ヘッダー領域、ナビゲーション バー、ログイン領域、検索領域、推奨ホットスポット領域、メインコンテンツエリア、フッターエリアなど。

3。静的 Web ページの概念
静的 Web ページは、サーバー上にファイルとして保存され、同じ形式で顧客に送信される Web ページです。
静的 Web ページは、ハイパーテキスト マークアップ言語で書かれたファイルです。

質問: 私たちが普段インターネットで見る Web ページは で構成されていますか?
アクティビティ: 教師は、静的 Web ページの構成とハイパーテキスト マークアップ言語 (HTML) の特徴について説明します。
探索: 生徒が Web ページを閲覧するときに、Web ページのソース ファイルを表示する操作。

4。静的 Web ページがブラウザーでどのように表示されるか
静的 Web ページは、サーバーから同じ形式でクライアントに送信されるファイルですが、このファイルがブラウザーに到達した後、ブラウザーは HTML コード内で、特定の HTML コードを特定の形式で表示して、ユーザーに表示される Web ページを形成します。

質問: 静的な Web ページはブラウザーでどのように表示されますか?
アクティビティ: 教師は、ブラウザーの解釈プロセスとハイパーテキスト マークアップ言語の効果について説明します。

5、動的 Web ページの概念
動的 Web ページとは、ユーザーの閲覧中にコンピューター システムによって自動的に作成される Web ページを指し、通常、リアルタイムの情報を表示したり、ユーザーの操作に基づいて特定のコンテンツを表示したりするために使用されます。
動的 Web ページの特徴: インタラクティブ性、自動更新、場所、時間、人に応じた変化
動的 Web ページの一般的な形式: カウンター、チャット ルーム、ディスカッション掲示板、BBS、同窓会記録など。 動的 Web ページを構成する一般的な状況は 2 つあります。純粋なクライアント モードで構成される動的 Web ページと、クライアント/サーバー モードで構成される動的 Web ページです。

質問: インタラクティブな操作を行う Web ページは何でできていますか?
アクティビティ: 教師は、動的 Web ページを形成する 2 つの一般的な状況、つまり純粋なクライアント メソッドとブラウザーで構成される動的 Web ページについて説明します / サーバーモードで構成される動的Webページのそれぞれの構成方法と特徴。
コミュニケーション: システム パレットを使用して色を正確に調整する方法

6、動的 Web ページ表示の原理
純粋なクライアント メソッドで構成される動的 Web ページ: このメソッドはサーバーとの対話を必要とせず、通常は JAVA小さなプログラムとスクリプト言語。その動的なパフォーマンスは次のとおりです。ユーザーは、javascript、javaappletなど。

授業後の振り返り

指導計画デザイナー

単位
/住所/郵便番号

メール

連絡先番号

「Web」学習タスクシート

1. Web ページ関連の概念

学生は Web を閲覧し、明確で合理的かつ特徴的なページ レイアウトを持つ Web サイトを表示し、次の操作を完了します。

ウェブサイト名: ホームページ URL: ページタイトル:

2.

静的 Web ページと動的 Web ページ

1.

静的 Web ページは何語で書かれていますか?
?__________________________________________ 2、 動的 Web ページの特徴は何ですか?? ________________________________________

3.

一般的な動的 Web ページ技術
とは何ですか? _____________________________________________
3. 実験:クライアントでの動的な Web ページの効果を体験してください
実験要件: (1) 以下の動的 Web ページの短い例を通じて、クライアント側 Web ページで動的効果を実現するいくつかの簡単な方法について学びます。
(2) プログラム内の特定のオブジェクトのプロパティを変更することで、Web ページの動的効果を変更する簡単な方法をマスターします。 。
(3) Web ページの特殊効果コードを Web ページに挿入する体験アクティビティを通じて、動的な Web ページを簡単に作成する方法をマスターします。コード。
実験手順の例:
1。次の動的 Web ページのソース コードを入力し、ブラウザ上でこのコード セグメントによって生成される Web ページの動的な効果を観察および体験してください。