ウェブレッスンプラン、初心者向けレッスンプラン

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

質問
目的
要点/ 難点/ 重要なポイント
指導指導質問の設計
ウェブサイトとは何ですか?ウェブページとは何ですか?ホームページとは何ですか?
ウェブサイト、ウェブページ、ホームページの意味を理解する

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

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

2 .ウェブページの構造
一般的なウェブサイトのページ構造は、通常、ページタイトル、ウェブサイトのロゴ ( LOGO )、ヘッダー領域、ナビゲーションバー、ログイン領域、検索領域、推奨ホットスポット領域、メインコンテンツ領域、フッター領域などで構成されます。

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

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

4 .静的ウェブページがブラウザに表示される仕組み
静的 Web ページは、サーバーからクライアントに同じ形式で送信されるファイルですが、ファイルがブラウザーに到達した後、ブラウザーはファイル内のHTMLコードを見つけて、特定のHTML コードを特定の形式で表示し、ユーザーが見る Web ページを形成する必要があります。

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

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

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

6. 動的ウェブページ表示の原則
純粋にクライアント側で構築された動的 Web ページ: この方法ではサーバーとのやり取りは必要なく、通常はJAVA アプレットやスクリプト言語の形式で Web ページに直接埋め込まれます。そのダイナミクスは、ユーザーがJavaScript やJavaApplet などでサポートされているさまざまなテクノロジーを通じて、Web ページに表示されるコンテンツやフォームを操作するという形で現れます。

授業後の振り返り

レッスンプランデザイナー

ユニット/ 住所/ 郵便番号

電子メール

連絡先

ウェブページ学習タスクシート
1つ、 ウェブページ関連の概念
生徒はウェブを閲覧し、明確で合理的かつ独特なページレイアウトのウェブサイトを閲覧し、次の操作を完了します。
ウェブサイト名:　　　　　　　　　　　　　　　　　　　
ホームページURL:　　　　　　　　　　　　　　　　　　　　　　　
ページタイトル:　　　　　　　　　　　　　　

二、 静的および動的ウェブページ

1. 静的 Web ページはどの言語で書かれていますか?________________________________________
2. 動的 Web ページの特徴は何ですか? ____________________________________
3. 一般的な動的 Web ページテクノロジーは何ですか? _____________________________________________

三つ、 実験: クライアント側の動的ウェブページ効果を体験する
実験要件:
（１）次の動的 Web ページの短い例を通じて、クライアント側の Web ページで動的な効果を実現するための簡単な方法をいくつか学ぶことができます。
（２）プログラム内の特定のオブジェクトのプロパティを変更することで、Web ページの動的な効果を変更する簡単な方法を習得できます。
（３）ウェブページコードにウェブページ特殊効果コードを挿入する体験アクティビティを通じて、動的なウェブページを作成する簡単な方法を習得できます。
実験手順の例:
1 .次の動的 Web ページのソースコードを入力し、このコードセグメントによってブラウザー上で生成された Web ページの動的な効果を観察して体験してください。
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312">
<title> テキストのダイナミックな効果</title>
</head>

<本文>
<marquee onMouseOver=this.stop() onMouseOut=this.start() scrollamount=1 scrolldelay=50 direction=up height=116 width=188 border=1 bgcolor=Olive> マウスが上に移動すると停止し、離れると動き続けます。試してみるといいかもしれません。 </marquee>
</本文>
</html>
2 .上記のコードが実現できる動的な効果について説明します。

3 .実際の応用: 表の要件に従って、コード内のさまざまな属性値を分析および変更し、ブラウザを通じて個々の効果を観察し、変更前後の変更を比較し、独自の観察に基づいて表に記入します。

動的ウェブページのコード
コードが行うこと
1
onMouseOver = this.stop() onMouseOut = this.start()

2

テキストの移動速度を示します
3
direction=up ( direction=right direction=left に変更可能)

4
高さ=116 幅=188

5

動くテキストの背景色を示します（赤、黄、青、銀などの色に変更できます）
4 .実験評価:

評価指標
自己評価
活動の質
クライアントのWebページ内のコードの役割分析は非常に明確です
6

クライアントのWebページ内のコードの役割分析は比較的明確です
5

クライアントのWebページにおけるコードの役割を分析し、全体的な理解を深める
3

クライアントのWebページにおけるコードの役割の分析を改善する必要がある
2

4、 勉強した後でも、まだ疑問が残りますか?

________________________________________
________________________________________
________________________________________
________________________________________

五、 学習を通じて、静的 Web ページと動的 Web ページに関する関連知識についてどのような新しいアイデアが生まれましたか?
____________________________________ ____
________________________________________
__________________________________________________________
__________________________________________________________

<<: MySQL操作テーブルでよく使われるSQLのまとめ

>>: ネイティブJSは非常に見栄えの良いカウンターを実装します