トピックを教える
ウェブページ
適用可能なグレード
2年生
授業時間を教える
1つのレッスン
教科書分析
フォーカス：静的Webページと動的なWebページとその作業プロセスを構成する方法
難易度：動的なWebページの動作プロセス
学習目標
Webページ、ホームページ、Webサイト、およびその関係の基本概念を理解し、静的Webページと動的なWebページの概念を理解し、静的Webページと動的Webページのテクノロジーを理解し、作業プロセスを説明する
リソースと環境が必要です
デジタルリソース
1.検索エンジン（www.google.com、www.baidu.com）
2。いくつかのデモンストレーションWebページ（静的Webページと動的Webページ）
一般的なリソース
1.教科書の第5章「ネットワークテクノロジーのアプリケーション」。サポートCD
2。教師の本をサポートする教材
3。「Webページ」学習タスクリスト
支援環境を教える
コンピューターネットワーク教室、マルチメディアネットワーク教室ソフトウェアまたはLCDプロジェクター
指導デザイン
質問
目的
キーポイント/難易度/キーポイント
指導ガイダンスの問題の設計
ウェブサイトとは何ですか？ Webページとは何ですか？ホームページとは何ですか？
ウェブサイト、ウェブページ、ホームページの意味を理解する
ウェブサイトは何で構成されていますか？
ウェブサイトのさまざまなコンポーネントを理解してください
ウェブサイトのロゴ、ヘッダーエリア、ホットな推奨エリア
インターネットで通常見られるWebページは何ですか？
静的Webページの構成コードを生徒に理解させてください-HTML
HTML言語の構造と基本タグを理解します
ブラウザに静的Webページはどのように表示されますか？
ブラウザで静的Webページの作業プロセスをマスターする
ブラウザはHTMLコードを解釈します
インタラクティブなWebページは何でできていますか？
静的Webページの構成を生徒に理解させてください
スクリプト言語を理解する
ユーザーインタラクションの下でブラウザに動的Webページがどのように表示されますか？
ブラウザで動的Webページの作業プロセスをマスターする
動的Webページの実行プロセス
教育プロセス
1。新しいレッスンの紹介：
インターネットにさらされたすべての学生は、ウェブサイトにアクセスしてウェブページを見たはずです。一般に、表示されるWebページには、タイトル、Webサイトロゴなどの固定形式があります。ウェブページの分類に関しては、通常、2つのカテゴリに分類できます。 1つのカテゴリは、Static Webページと呼ばれるユーザーの操作では変更されず、もう1つのカテゴリはユーザーの操作で変更されます。このタイプのWebページは、Dynamic Webページと呼ばれます。
今日は、Webページに関する問題について説明します。
2。コンテンツの指導：
検索エンジンを介していくつかの典型的なWebサイトを検索して、学生に表示します。
1.ウェブサイト、ウェブページ、ホームページ、3つの関係の概念
人々が今日訪れる国際的なインターネットはウェブサイトで構成されており、ウェブサイトは特定のWebページで構成されています。ホームページは、ウェブサイトの開始ページに相当し、ガイドと接続の役割を果たしています。一般的に言えば、ユーザーはホームページからWebサイトのほとんどのWebページにアクセスできます。
質問：ウェブサイトとは何ですか？ Webページとは何ですか？ホームページとは何ですか？
アクティビティ：教師は、Webサイト、Webページ、ホームページの意味と3つの関係について説明します。
2。Webページ構造
一般的なWebサイトのページ構造は、一般に、ページタイトル、Webサイトロゴ（ロゴ）、ヘッダーエリア、ナビゲーションバー、ログインエリア、検索エリア、推奨ホットスポットエリア、メインコンテンツエリア、フッターエリアなどで構成されています。
3。静的Webページの概念
静的Webページは、サーバー上にファイルの形式で保存され、同じ形式で顧客に送信されるWebページです。
静的Webページは、ハイパーテキストマークアップ言語で記述されたファイルです。
質問：インターネットで通常見られるWebページは何ですか？
アクティビティ：教師は、静的Webページの構成とハイパーテキストマークアップ言語（HTML）の特性について説明します。
探索：学生は操作し、Webページを閲覧するときにWebページのソースファイルを表示します。
4.ブラウザに静的Webページ表示の原則
静的Webページはサーバーから同じ形式でクライアントに送信されますが、このファイルがブラウザに到着した後、ブラウザはファイルにHTMLコードを見つけて、特定のHTMLコードを特定の形式で表示して、ユーザーが表示するWebページを形成する必要があります。
質問：ブラウザに静的Webページはどのように表示されますか？
アクティビティ：教師は、ブラウザの解釈プロセスとハイパーテキストマークアップ言語の効果について説明します。
5.動的Webページの概念
動的なWebページには、ユーザーブラウジング中にコンピューターシステムによって自動的に作成されるWebページを参照してください。通常、リアルタイムの情報を表示したり、ユーザーの相互作用に応じて特定のコンテンツを表示したりするために使用されます。
動的なWebページの機能：インタラクティブ、自動更新、場所から人への変更
ダイナミックなWebページの一般的な形式：カウンター、チャットルーム、ディスカッションエリア、BB、卒業生のレコードなど。
動的なWebページを形成するための2つの一般的な状況：純粋なクライアント方法とクライアントサーバーモードで構成される動的なWebページで構成される動的Webページ
質問：インタラクティブなWebページは何でできていますか？
アクティビティ：教師は、動的なWebページを形成する2つの一般的な状況、純粋なクライアントメソッドとブラウザー/サーバーモードで構成される動的Webページのそれぞれの構成と特性について説明します。
通信：システムパレットを使用して色を正確に調整する方法
6.動的Webページ表示の原則
純粋なクライアントメソッドで構成される動的Webページ：この方法では、サーバーとの対話を必要とせず、通常、Javaアプレットとスクリプト言語のWebページに直接埋め込まれています。そのダイナミクスは、ユーザーがさまざまなオペレーティングWebページディスプレイコンテンツまたはJavaScript、JavaAppletなどのテクノロジーによってサポートされているフォームを使用していることに反映されています。
クラスの後の反射
レッスンプランデザイナー
ユニット/アドレス/郵便番号
電子メール
連絡先番号
学生はWebページを閲覧し、明確で合理的で独特のページレイアウトでWebサイトを表示し、次の操作を完了します。
ウェブサイト名：
ホームページURL：
ページタイトル：
1. ____________________________________________________________________________________________________で書かれた静的Webページは何言語ですか
2。動的なWebページの特徴は何ですか？______________________________________________
3.一般的な動的Webテクノロジーは何ですか？ _________________________________________________________________________
実験要件：
（1）動的なWebページの次の短い例を使用して、クライアントWebページの動的効果を達成するためのいくつかの簡単な方法について学びます。
（2）プログラム内の特定のオブジェクトプロパティを変更することにより、Webページの動的効果に単純な変更方法をマスターします。
（3）Webページの特殊効果コードをWebページコードに挿入することにより、動的なWebページを作成する簡単な方法をマスターします。
実験手順の例：
1.次のように動的Webページのソースコードを入力し、ブラウザ上のコードセグメントによって生成されたWebページの動的効果を観察および体験します。
<html>
<head>
<メタhttp-equiv = content-type content = text/html; charset = gb2312>
<title>テキストの動的効果</title>
</head>
<body>
<marquee onmouseover = this.stop（）onmouseout = this.start（）scrolllamount = 1 scrolldelay = 50方向= up height = 116 width = 188 border = 1 bgcolor = olive>移動するとマウスが停止し、移動すると移動し続けます。あなたもそれを試してみるかもしれません</marquee>
</body>
</html>
2。上記のコードで達成できる動的効果を説明してください。
3。実用的なアプリケーション：表の要件に従って、コード内の異なる属性値を分析および変更し、ブラウザを介してパーソナライズされた効果を観察し、変更の前後に変更を比較し、独自の観察結果に基づいてフォームを完全に記入します。
動的なWebページのコード
コードが再生するもの
1
onmouseover = this.stop（）onmouseout = this.start（）
2
テキストの動きの速度を示します
3
方向= up（変更できます：方向=右方向=左）
4
高さ= 116幅= 188
5
動くテキストの背景色を表します（赤、黄、青、銀などの色に変更できます。
4。実験的評価：
評価指標
自己評価
活動の質
クライアントWebページでのコードの機能の分析は非常に明確です
6
クライアントWebページでのコードの機能の分析はより明確です
5
クライアントのWebページにおけるコードの役割の分析、および一般的な理解
3
クライアントWebページでのコードの機能の分析を改善する必要があります
2
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
________________________________________________________
_________________________________________________________________________________________________
_________________________________________________________________________________________________