Transcript Document
第3章 第2節 ネットワークを活用した 情報の収集・発信 5 6 7 8 さまざまな表現方法の工夫 情報の多様な提示方法 構造を工夫した情報の表現方法 ウエブページの公開 情報Cプレゼン用資料（座学34） 担当 早苗雅史 1 ５ さまざまな表現方法の工夫 １ ウエブページを作る マークアップ（タグ挿入）式 WYSIWYG式 ワープロのHTML形式での保存 マークアップ 2 WYSIWYG ５ さまざまな表現方法の工夫 ２ 表現方法の指定とスタイルシート スタイルシート 文字の大きさや色などをまとめて指定する方法 利点（問１） 凝ったレイアウトの作成 スタイルシートを変えるだけで見栄えを変化 共通のスタイルシートを使った，複数HTML ファイルに統一し たデザインの適用 スタイルシートをどこに記述するか HTML ファイルの中にスタイルを直接指定する HTML ファイルとは別に「スタイルシート ファイル」を作成 何に対してスタイルを設定できるか タグ，クラス，ID 3 ５ さまざまな表現方法の工夫 スタイルシート① レイヤーとインラインスタイル 位置，サイズの設定 レイヤー レイヤーの背景設定 4 ５ さまざまな表現方法の工夫 スタイルシート② スタイル（クラス，タグ，ID）の設定 スタイルを設定する対象 各種スタイル の設定 5 ５ さまざまな表現方法の工夫 スタイルシート③ 外部スタイルシート スタイルシート内におけるスタイルの設定 6 ５ さまざまな表現方法の工夫 ３ 表現方法の工夫（問２） 表現方法の工夫 部分的に文字色を変える 下線をつけ重要な部分を強調する 文字の大きさや色使い 画像のサイズや表示範囲に配慮する みんなが自分と同じ条件でWebページを見るとは限らない 7 ６ 情報の多様な表現方法 １ 表による表現 文書やＷｅｂページ作成時の適切な提示方法① 箇条書きや表を用いると，要点を簡潔にまとめることがで きる 表にまとめると わかりやすい 8 ６ 情報の多様な表現方法 ウェブページ作成ソフトウエア① 表の挿入 行数・列数の決定 枠表示などの決定 9 ６ 情報の多様な表現方法 ２ 画像を使ったウエブ 文書やＷｅｂページ作成時の適切な提示方法② 図・絵・写真などを用いると，わかりやすい 画像は使いすぎないようにする 10 ６ 情報の多様な表現方法 画像ファイルの扱い Ｗｅｂでの画像 ＪＰＥＧ，ＧＩＦ，ＰＮＧ タグによる 画像の挿入 11 ６ 情報の多様な表現方法 ウェブページ作成ソフトウエア② 画像の挿入（ファイルから） ファイル名の決定 12 ６ 情報の多様な表現方法 ウェブページ作成ソフトウエア③ 画像の挿入（ドラッグ アンド ドロップ） ドラッグ アンド ドロップ 13 ６ 情報の多様な表現方法 ウェブページ作成ソフトウエア④ ロゴマークの挿入 背景の決定 効果の決定 スタイルの決定 14 ６ 情報の多様な表現方法 ウェブページ作成ソフトウエア⑤ アニメーションGIF アニメーション 効果の決定 文字アニメーション の作成 時間・フレーム数 の決定 15 ６ 情報の多様な表現方法 効果的なＷｅｂページの作成（問３） 全体的なスタイルの統一 箇条書きや表を用いて要点を簡潔にまとめ る。 図・絵・写真などを用いると，分かりやすい。 ただし，画像は使いすぎないようにする。 16 ７ 構造を工夫した情報の表現方法 １ 参照とリンク 参照 ある情報の中で，別の情報のありかを示すこと ハイパーテキスト リンク箇所を選択すると，自動的に参照先を表示 ２０３５年には，関東地 方で皆既日食が 見られる。 詳しくは「理科年表」を参 照せよ。 参照 17 ７ 構造を工夫した情報の表現方法 ２ ウエブページのリンク 様々な形式へのリンク ファイルの決定 18 ７ 構造を工夫した情報の表現方法 ３ ウエブページの構造（問４） 線形構造 それぞれのページを直線的に並べた構造 単純で分かりやすい 階層構造 枝分かれするようにページを並べた構造 見たいところへすぐにジャンプする 階層構造 線形構造 19 ７ 構造を工夫した情報の表現方法 サイト管理ツール リンク構成やファイルリストなど サイト管理の便利な情報を表示 20 ７ 構造を工夫した情報の表現方法 フレームの作成 分割方法の決定 対象フレームの選択 リンクファイルの選択 21 ７ 構造を工夫した情報の表現方法 問５ ①東エリアのメンバー一覧。 ②東エリア・西エリアに含まれる地域の区分地図。 ③西エリアのメンバー一覧。 ④西エリアのメンバーについての特記事項。 ⑤これより下層に含まれる情報の利用についての 注意事項と免責事項。 Ｃ ホーム Ａ Ｂ Ｄ Ｅ 22 ８ ウエブページの公開 １ ウエブサーバへの設置 公開 HTMLファイルなどをウエブサーバへ転送 FTP（ファイル転送プロトコル） ブラウザでURLを指定 インターネット FTP ウエブサーバ 23 ８ ウエブページの公開 ＦＴＰ用ソフトウエア 接続サーバーの決定 サーバー名 アカウント名 パスワード 転送ボタン クライアント サーバー 24 ８ ウエブページの公開 ２ 情報発信にともなう責任（問６） 誤った内容を公開していないか プライバシーを侵害していないか 他人を誹謗中傷したり差別したりしていないか 知的財産権を侵害していないか ウイルスを含んでいないか 偽造・虚偽，詐欺的な内容でないか わいせつ・暴力などの有害情報ではないか 25 ８ ウエブページの公開 ３ ウエブページの更新と保守 ページの公開とフィードバック メールなどで寄せられる意見を大切にし 内容の改良に役立てる 自分なりの評価 更新 ウエブページの情報を 新しいものする作業 保守 ウエブページの情報を 正しい状態に維持する作業 26 ウエブページの評価① ルールとマナー ８ ウエブページの公開 評価する項目 自己 評価 知的財産権を侵害していない 他人を誹謗中傷したり差別したりしていない 個人情報や肖像権が守られている 人権への配慮がなされている 文化や習慣が異なる人が見ても不快な思いをしない 誤った内容を公開していない 27 ウエブページの評価② 構成と内容 （問７） ８ ウエブページの公開 評価する項目 自己 評価 全体的なスタイルが統一されているか 魅力的なテーマ設定になっているか ターゲットが明確になっているか 見る人が理解しやすい情報の構成になっているか 表・グラフなどを効果的に用いているか 画像やアニメーション・サウンドなどが効果的に用いられて いるか 28