社会と情報

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