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

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 １ ウエブページを作る マークアップ（タグ挿入）式 WYSIWYG 式 ワープロの HTML 形式での保存 ５ さまざまな表現方法の工夫 WYSIWYG マークアップ

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

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

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

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

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

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

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

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

11 11 画像ファイルの扱い ６ 情報の多様な表現方法 タグによる画像の挿入 Ｗｅｂでの画像 ＪＰＥＧ，ＧＩＦ，ＰＮＧＷｅｂでの画像

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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