Presentation is loading. Please wait.

Presentation is loading. Please wait.

1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史.

Similar presentations


Presentation on theme: "1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史."— Presentation transcript:

1 1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史

2 2 1 ウエブページを作る マークアップ(タグ挿入)式 WYSIWYG 式 ワープロの HTML 形式での保存 5 さまざまな表現方法の工夫 WYSIWYG マークアップ

3 3 2 表現方法の指定とスタイル シート 5 さまざまな表現方法の工夫 スタイルシート 文字の大きさや色などをまとめて指定する方法 利点(問1) 凝ったレイアウトの作成 スタイルシートを変えるだけで見栄えを変化 共通のスタイルシートを使った,複数 HTML ファイルに統 一したデザインの適用 スタイルシートをどこに記述するか HTML ファイルの中にスタイルを直接指定する HTML ファイルとは別に「スタイルシート ファイル」を 作成 何に対してスタイルを設定できるか  タグ,クラス, ID

4 4 スタイルシート① レイヤーとインラインスタイル 5 さまざまな表現方法の工夫 レイヤー 位置,サイズの設定 レイヤーの背景設定

5 5 スタイルシート② スタイル(クラス,タグ, ID ) の設定 5 さまざまな表現方法の工夫 各種スタイル の設定 スタイルを設定する対象

6 6 スタイルシート③ 外部スタイルシート 5 さまざまな表現方法の工夫 スタイルシート内におけるスタイルの設定

7 7 3 表現方法の工夫(問2) 表現方法の工夫 部分的に文字色を変える 下線をつけ重要な部分を強調する 文字の大きさや色使い 画像のサイズや表示範囲に配慮する 5 さまざまな表現方法の工夫 みんなが自分と同じ条件で Web ページを見るとは限らない

8 8 1 表による表現 文書やWebページ作成時の適切な提示方法 ① 箇条書きや表を用いると,要点を簡潔にまとめること ができる 6 情報の多様な表現方法 表にまとめると わかりやすい

9 9 ウェブページ作成ソフトウエア① 表の挿入 6 情報の多様な表現方法 行数・列数の決定 枠表示などの決定

10 10 2 画像を使ったウエブ 6 情報の多様な表現方法 文書やWebページ作成時の適切な提示方法 ② 図・絵・写真などを用いると,わかりやすい 画像は使いすぎないようにする

11 11 画像ファイルの扱い 6 情報の多様な表現方法 タグによる画像の挿入 Webでの画像 JPEG,GIF,PNGWebでの画像

12 12 ウェブページ作成ソフトウエア② 画像の挿入(ファイルか ら) 6 情報の多様な表現方法 ファイル名の決定

13 13 ウェブページ作成ソフトウエア③ 画像の挿入(ドラッグ アンド ド ロップ) 6 情報の多様な表現方法 ドラッグ アンド ドロップ

14 14 ウェブページ作成ソフトウエア④ ロゴマークの挿入 6 情報の多様な表現方法 スタイルの決定 効果の決定 背景の決定

15 15 ウェブページ作成ソフトウエア⑤ アニメーション GIF 6 情報の多様な表現方法 アニメーション効果の決定 時間・フレーム数の決定 文字アニメーションの作成

16 16 効果的なWebページの作成 (問3) 全体的なスタイルの統一 箇条書きや表を用いて要点を簡潔にまと める。 図・絵・写真などを用いると,分かりや すい。 ただし,画像は使いすぎないようにする。 6 情報の多様な表現方法

17 17 1 参照とリンク 参照 ある情報の中で,別の情報のありかを示すこ と ハイパーテキスト リンク箇所を選択すると,自動的に参照先を 表示 7 構造を工夫した情報の表現方 法 2035年には,関東 地方で皆既日食が 見られる。 詳しくは「理科年表」 を参照せよ。 2035年には,関東 地方で皆既日食が 見られる。 詳しくは「理科年表」 を参照せよ。 参照

18 18 2 ウエブページのリンク 7 構造を工夫した情報の表現方 法 ファイルの決定 様々な形式へのリンク

19 19 3 ウエブページの構造(問 4) 線形構造 それぞれのページを直線的に並べた構造 単純で分かりやすい 階層構造 枝分かれするようにページを並べた構造 見たいところへすぐにジャンプする 7 構造を工夫した情報の表現方 法 線形構造 階層構造

20 20 サイト管理ツール 7 構造を工夫した情報の表現方 法 リンク構成やファイルリストなど サイト管理の便利な情報を表示 リンク構成やファイルリストなど サイト管理の便利な情報を表示

21 21 フレームの作成 7 構造を工夫した情報の表現方 法 分割方法の決定 対象フレームの選択 リンクファイルの選択

22 22 問5 7 構造を工夫した情報の表現方 法 ①東エリアのメンバー一覧。 ②東エリア・西エリアに含まれる地域の区分地 図。 ③西エリアのメンバー一覧。 ④西エリアのメンバーについての特記事項。 ⑤これより下層に含まれる情報の利用について の注意事項と免責事項。 ホームAB C DE

23 23 1 ウエブサーバへの設置 公開 HTML ファイルなどをウエブサーバへ転 送 FTP (ファイル転送プロトコル) ブラウザで URL を指定 8 ウエブページの公開 ウエブサーバ インターネット FTP

24 24 FTP用ソフトウエア 8 ウエブページの公開 接続サーバーの決定 サーバー名 アカウント名 パスワード クライアント サーバー 転送ボタン

25 25 2 情報発信にともなう責任 (問6) 誤った内容を公開していないか プライバシーを侵害していないか 他人を誹謗中傷したり差別したりしていな いか 知的財産権を侵害していないか ウイルスを含んでいないか 偽造・虚偽,詐欺的な内容でないか わいせつ・暴力などの有害情報ではないか 8 ウエブページの公開

26 26 3 ウエブページの更新と保守 ページの公開とフィードバック メールなどで寄せられる意見を大切にし 内容の改良に役立てる 自分なりの評価 更新 ウエブページの情報を 新しいものする作業 保守 ウエブページの情報を 正しい状態に維持する作業 8 ウエブページの公開

27 27 ウエブページの評価① ルールとマナー 8 ウエブページの公開 評価する項目 自己 評価 知的財産権を侵害していない 他人を誹謗中傷したり差別したりしていない 個人情報や肖像権が守られている 人権への配慮がなされている 文化や習慣が異なる人が見ても不快な思いをしない 誤った内容を公開していない

28 28 ウエブページの評価② 構成と内容 (問7) 8 ウエブページの公開 評価する項目 自己 評価 全体的なスタイルが統一されているか 魅力的なテーマ設定になっているか ターゲットが明確になっているか 見る人が理解しやすい情報の構成になっているか 表・グラフなどを効果的に用いているか 画像やアニメーション・サウンドなどが効果的に用いら れているか


Download ppt "1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史."

Similar presentations


Ads by Google