Microsoft Word - 09isA06.doc

Transcription

1 情報科学 A 資料 Web ページ作成の実践 担当笹原 千葉 野瀬 ポイント : サンプルを加工したものではなく, 自分でレイアウトや盛り込む内容を考えたオリジナルなページを作成してみよう まず, 自分のトップページ ( ホームページ ) の作成を目標にしてみよう 自分の描いたイラストをいれる, 背景に模様をつける, 表を使って図をレイアウトする, など, 見やすい Web ページを作成するためのテクニックも知っておこう Web ページは広く 公開される ( 多くの人の目に触れる ) ものであることを, よく理解しなければならない 公開してはいけないもの, 公開するときに注意が必要なものについて, 要点を押さえておこう 1. コンテンツ作成にあたって注意すること Web ページの中身 ( テキスト, グラフィックデータ, 動画, 音声 ) をまとめて コンテンツ と呼ぶ コンテンツを作成するにあたっては, 最低限以下の点に留意すること まず読んでおくべきもの 麗澤大学のホームページ作成に関する規定は 麗澤大学コンピュータシステム利用ガイドライン (URL: 第 3 版 前期コンピュータ リテラシーの授業で配布 ) を参照のこと ネットワークを通じて他人が閲覧できることを強く意識すること こんなの, 誰かが見にくるわけないさ と思ったら大違い! 他人や他の組織などを誹謗中傷するような内容を掲載しないこと 公序良俗に反するものを掲載しないこと 機密や他人のプライバシーを侵す内容を掲載しないこと 真実ならば名誉毀損にならない と思ったら大間違い! もちろん, 嘘やでたらめを書いてはいけない 良識を疑われたり, 他人を不快にされるような表現は慎むこと 自分のプライバシー情報を無防備に掲載しないこと 自分の写真は掲載してもいいが, どんな人が見ているかわからないことを強く意識しておくこと 水着姿の写真などを掲載するのは危険 普通の顔写真なども掲載するリスクは覚悟すること 不安ならば掲載しないこと 生年月日はむやみにかかないこと 居住地が特定できる詳細な住所は掲載しないこと 電話番号もむやみに掲載しないこと 世の中にはヘンな人, 困った人もたくさんいることを忘れないように 麗澤大学 2009 年度情報科学 A 資料 No.6 1

2 著作権など他人の人権を侵害しないこと 第 2 回授業資料の参考リンクを参照 漫画 アニメのキャラクタなどを許可なく使用してはいけない アイドルや芸能人の写真などをむやみに使用してはいけない 他人が撮影した写真 動画などを勝手に使用してはいけない 他人が書いたイラスト アニメーションなどを勝手に使用してはいけない 他人が演奏している音楽データを勝手に掲載してはいけない 原則として, 自分が演奏していても, 他人が作曲した曲の音楽データを勝手に掲載してはいけない 他人が書いた文章を, 自分が書いた文章であるかのように掲載してはいけない 例 : 他人の WWW ページの文章をそのまま打ち込んだ 他人の WWW ページの文章をそのままコピー & ペーストした 本やパンフレットの文章をそのまま打ち込んだ 文章などの 引用 ( いんよう ) は許される ただし, 以下の条件を守っていること a. 引用の必然性がある b. 引用の範囲におさまる分量であること c. 引用個所が, 自分の文章とは明確に区別される形で ( カギカッコでくくるなど ), かつ引用元がどこかを明示していること リンクに関する指針 自分はもちろん, 他人の作成したページに対するリンクも原則として自由におこなってよい ただし, 逆に自分のページもリンクされることを認識しておく必要がある ただし リンクするときは知らせて! リンクはこのような条件でおこなって! というものについては, 相手の意向を尊重し, リンクした旨を通知するなど配慮する ( ただし, 学外公開申請をしない限り, 作成したページを相手に見てもらうことはできない ) リンク先があたかも自分が作成した Web ページであるかのようにみえる形式でのリンクはしない ここにあげたコンテンツ作成の注意点を守っていないページにはリンクを張らない 教育 研究目的の利用であることを忘れないこと 大学の WWW サーバーは, あくまでも教育 研究目的に設置されている 商売に使うなど, 教育 研究目的を逸脱した利用をしないように留意すること 他人に使わせたり, 外部の団体等の主張を掲載したり宣伝をするために使用しないこと アフィリエイト ( アソシエイト, 報酬を伴う広告 ) プログラムの利用も禁止 情報科学 A で作成 公開する Web ページは学内でのみ閲覧できるが, 情報システムセンターに申請することにより,Web ページをインターネット上に公開することができる ( 第 5 回資料 2.2 を参照 ) コンテンツの公開後は, その内容について社会的な責任が問われる インターネットを巡回するロボット ( 検索エンジンなどの情報収集プログラム ) が情報を収集していたり, 思わぬところからリンクされていたりすることがある マイナーなところだから許されるだろう と思っても, 通用しない WWW サーバーにファイルをおいただけで 公開した とみなされる 授業においても, 上記のポイントを抑えたコンテンツ作りを行っているかどうかが課題評価の重要なポイントとなる 上記の注意点をよく読んで, ポイントを理解しておこう 麗澤大学 2009 年度情報科学 A 資料 No.6 2

3 2. トップページの作成 サンプルを使わずに, 自分だけのオリジナルな Web ページを作成してみよう 今回はトップページ ( 表紙になるページ ) を新たに作成する 次回授業で紹介する Web ページ作成のテクニックも参考にしながら, ユニークで印象に残るページを作成してみよう ここでつくるページが一番最初に表示されることを念頭においてデザインや盛り込む内容を考えること オリジナルな Web ページをはじめて作成するときは, ファイルの保存方法に注意!( このあと説明 ) 一度保存したあとは, 上書き保存 で OK 新しくファイル名をつけて HTML ファイルを保存する際には.htm ( または.html ) と拡張子をつけて保存するのがポイント 練習問題 : トップページの作成 EmEditor を開きなさい トップページ ( ホームページ ) を作成しなさい 最初は sample1.html の内容のような簡単なものでよい ファイルが編集できたら, 半角小文字で index.html という名前をつけて file_server の [user-id] にある homepage フォルダに保存しなさい 名前をつけて HTML ファイルを保存するときには, 以下のようにしなさい EmEditor のメニューから ファイル (F) 名前を付けて保存 (A) と選択する 下の図で ファイルの種類 を すべてのファイル に, ファイル名は index.html と半角で入力しなさい 保存する場所が file_server の [user-id] の homepage というフォルダであることも確認すること index.html すべてのファイル マイコンピュータ を開き,file_server の [user-id] の homepage フォルダのなかに index ( 拡張子つきの正確なファイル名は index.html) というファイルのアイコンがあることを確認し, アイコンをダブルクリックして作成したトップページのできあがりを確認しなさい 麗澤大学 2009 年度情報科学 A 資料 No.6 3

4 保存しないと表示できない 表示を更新 1. 保存 ( 上書き ) 2. 再読み込み ( 更新 ) エディタ WWW ブラウザ sample3.html homepage file_server の [user-id] EmEditor で HTML ファイルを編集 保存して,WWW ブラウザで仕上がりを確認する方法 3. リンクや画像の指定方法 HTML ファイルはテキストのみで作成される Web ページで表示される画像は,HTML を使って表示方法を指定している HTML で絵を書いているわけではない 画像は別のツールで作成する ( テキストエディタで絵は書けない!) 他のページや他のサイトへのリンクも,HTML の決められた書き方でファイル名や URL を指定している 3.1. リンクの作成 自分の作った別のファイルを開く <a href=" ファイル名 "> ページ名 </a> 重要! a と href の間には半角のスペース を入れること 例 :<a href="links.html"> 私のリンク集 </a> 私のリンク集とアンダーバーがついて表示される クリックすると,links.html が表示される 同じフォルダに HTML ファイル links.html を作成する必要がある リンク先のファイルが別のフォルダにある場合には, ファイル名とともにファイルがあるフォルダの場所を記述する必要がある ( 3.2 参照 ) 他人の作成したページにリンクを張る <a href="url 名 "> ページ名 </a> 例 :<a href=" 情報科学 A のページ </a> 情報科学 A のページとアンダーバーがついて表示される クリックすると, が表示される 指定した URL にコンテンツが存在することが前提 3.2. ファイルの保存場所 リンクするファイルやウェブページ中に表示する画像ファイルは, 同じフォルダの中に置くのが基本 違うフォルダにあるものは, ファイル名だけでは認識できないので注意! 違うフォルダにあるファイルを指定する場合には, 別のフォルダにあることを明示する必要がある 麗澤大学 2009 年度情報科学 A 資料 No.6 4

5 ケース 1: 指定するファイルが同じフォルダにある : ファイル名を正確に記述すれば OK homepage index.htm に以下の記述をした場合 : <a href= links.html > リンク集 </a> <img src= photo.jpg alt= photo > 同じフォルダにあるファイルは開く! ファイル名の記述だけでは不十分! index.html sample photo.jpg links.html <a href= sam1.html > サンプル </a> <img src= comp.jpg alt= PC photo > 別のフォルダにあるファイルはファイル名だけでは開かない! ただし, 以下のようにフォルダをはっきり指定することで開くことができる ( 下記参照 ) <a href= sample/sam1.html > リンク集 </A> sam1.html comp.jpg <img src= sample/comp.jpg alt= PC photo > フォルダの指定方法 : / = フォルダ名 ファイル名の区切り 画像を表示させる img タグの書き方は 3.4 を参照 ケース 2: 指定するファイルが homepage フォルダ中の別のフォルダにある場合 : フォルダを含めた記述をおこなうと, 開くことができる homepage 2 images 1 フォルダの指定方法 :../ = 1 つ上のフォルダに移動 (/ = フォルダ名 ファイル名の区切り ) hobby 3 index.html photo.jpg 4 links.html index.html に記述 : links.html に記述 : 1 <a href= hobby/links.html > リンク集 </a> 3 <a href=../index.html > トップページへ </a> 2 <img src= images/photo.jpg alt= photo > 4 <img src=../images/photo.jpg alt= photo > ファイルが多数ある場合, ケース 2 のようにコンテンツの種類ごとにフォルダを作ってファイルを整理して保存し, フォルダ情報を使ってファイルを指定することで, ファイルを管理しやすくすることができる 麗澤大学 2009 年度情報科学 A 資料 No.6 5

6 3.3. いろいろなグラフィックデータを扱う Web ページのなかで表示でき, 殆どの人が問題なく閲覧できるグラフィックデータの種類は,JPEG ( じぇいぺぐ ) か,GIF ( じふ ) または PNG ( ぴんぐ ) のみ 通常は最初の 2つ (JPEG, GIF) を保存形式として使うことが多い パワーポイントで描いた図, ロゴ, ペイントブラシで描いたイラストなど,BMP ( びっとまっぷ ) 形式で作成した画像データは, そのままでは Web ページに表示できない 第 1 回授業で使った PhotoShop Elements は, グラフィックデータを作成することはもちろん, 他のソフトウエアで作成された画像の形式を Web ページ用に美しく変換するのに利用できる 詳細な手順については, 次回実習をおこなう 3.4. グラフィックデータの表示方法 HTML でグラフィックデータを表示するには,img ( image ) タグを利用する ただし, 表示できるデータは,JPEG か GIF,PNG 形式のみ 同じフォルダに画像データを入れておく ( 別のフォルダでも, どのフォルダにあるかを指定すれば OK) img タグは以下のように記述する ( 半角スペース に注意 ) 例 : <img src="unit.jpg" alt="pc の写真 " height="188" width="251"> src: 表示したい画像ファイル名 ( と場所 ) を指定する (HTML ファイルと同じフォルダにある画像ファイルであれば, ファイル名のみでよい 3.2 参照 ) alt: 画像ファイルを表示しない場合 ( もしくは, データがない場合 ), 代わりに表示する文字 height: 画像の高さを指定 ( ピクセル, パーセント ) width: 画像の横幅を指定 ( ピクセル, パーセント ) height や width を省略した場合は, 画像がそのままの大きさで表示される 3.5. sample2.html で画像を表示してみる sample2.html をダブルクリックしてブラウザで表示すると, 左下図のようになる 右下図のように表示するためには, どうすればいいのか? 指定されたサイズ ( この場合, 高さ 188, 横幅 251 の大きさ ) の枠が表示され, PC の写真 というテキストが表示される なぜ, 画像が表示されずに alt のテキストだけが表示されているのか? 画像は, どのフォルダに入っているのか? どうすれば, 画像が表示されるか? 画像が表示されたら,alt のテキストはどうなるか? 麗澤大学 2009 年度情報科学 A 資料 No.6 6

7 4. 練習課題 A ( 本日提出 ) 4.1 sample2 の編集 file_server の [user-id] の homepage フォルダのなかにある sample2 (sample2.html) というファイルを EmEditor で開きなさい タイトルや,*** の部分を自分の名前に直すなどの編集を行い, 上書き保存しなさい homepage フォルダのなかにある sample2 というファイルのアイコンをダブルクリックして,Web ページのできあがりを確認しなさい 写真が表示されるか確認し, 写真が表示されないときは, なぜ写真が表示されないのか, 原因を考えなさい ヒント :unit.jpg というファイルはネットワークドライブのどこにある? 原因を考えたら, プリントのように正しく写真が表示されるように, 必要なファイルを正しい場所にコピーしなさい sample1 と sample2 のファイルが互いにリンクされていることを確認しなさい 上書き保存をして EmEditor を終了しなさい sample2 を WWW ブラウザで表示したところを WWW ブラウザで印刷しなさい FinePrint の まとめ印刷 機能を使い, 以下の 4.2 と同じページに印刷するとよい 4.2 sample3 の編集 file_server の [user-id] の homepage フォルダに保存してある sample3 (sample3.html) ファイルを EmEditor で開きなさい ( 自己紹介のサンプル ) このページを自己紹介ページになるように, 文章を書き換えなさい *** のホームページに戻る の *** のところにあなたの名前がはいっているか確認しなさい *** のホームページに戻る を押すと, 2.1 で作成したあなたのホームページ ( トップページ ) が表示されるように ( つまり,index.html が表示されるように ) sample3 のファイルを修正しなさい その他, いろいろな工夫をしてみなさい 第 5 回資料のリンク等を参考にするとよい sample3.html を WWW ブラウザで表示したところをブラウザで印刷しなさい FinePrint の まとめ印刷 機能を使い, 上の 4.1 と同じページに印刷するとよい 上記 2 枚の印刷結果 (sample2 と sample3) を ( 別に印刷した場合にはステープラー ( ホッチキス ) で綴じて ) 提出しなさい 科目名, クラス名, 提出日, 学籍番号, 氏名, ふりがなを手書きで記入すること 5. 練習課題 B (Web ページ作成課題, 締め切り, 提出方法は後日指示する ) サンプルを使わずに自分自身の Web ページを作成しなさい 最低限, 以下の要件を満たしていること 条件 : トップページ (index.html) が存在しており, 最低限, 次のものが記載されていること 誰のホームページであるのか, ということ 最終更新日が記載されていること グラフィックデータ ( サイズが大きくならないように気を付けること ) 自分が作成した他のページに対するリンク 麗澤大学のホームページ ( に対するリンク ページ作成者 ( つまり, あなた ) に対するメール送信用のタグ トップページ以外に, 最低 3 ページ, オリジナルなページが存在すること そのなかには, ページ作成者について紹介したページが 1 ページは存在してい ること ( ただし, プライバシーに関わる情報を開示しないように注意 ) 自分が作成したページには, 必ず, 自分のトップページに対するリンク ( ホー ムページに戻る など ) が存在していること 最低でも 5 個所, 自分で探した便利な WWW サイトへのリンクを載せているこ 麗澤大学 2009 年度情報科学 A 資料 No.6 7

8 と そのうちひとつは Web ページの作成方法を説明したものであること 必ず, 写真や図, イラストなどを用いて表現的な工夫をすること ( もちろん著作権や肖像権に注意すること ) 期日 ( 後日知らせるので, 指示に従うこと ) までに仕上げること これは成績評価の重要ポイントになる 以下の点に注意しながら作成すること (1) デザインが優れているか HTML を自分で調べ, 工夫しているか (2) ページに記載されている情報が有用で充実しているか (3) 著作権や肖像権などに配慮し, またネチケットを守っているか (4) プライバシーの開示など危険なことをしていないか 補足 1: EmEditor での HTML 文書の便利な開き方 ( 再掲 ) メニューバーの [ ファイル ] [ 開く ] を選択し, ファイルを開く ダイアログで ファイルの種類 を 全てのファイル ( または HTML ) に指定し,HTML 文書を選択する ( 右図 ) これは第 5 回授業などで説明した方法だが, 操作が多少わずらわしい EmEditor ですばやくファイルを開くには, マイコンピュータ でファイルが保存されているフォルダを開き, ファイルのアイコンの上でマウスを右クリックし, メニューを開いて EmEditor を選択する ( 右図 ) 注意! 作成中の HTML ファイルを Internet Explorer で開いた際, 間違って Internet Explorer で 名前をつけて保存 しないこと Internet Explorer によりタグやリンク先など, ファイルの中身が勝手に修正されてしまい, 正しく編集できなくなってしまう 補足 2: テキスト編集のヒント : テキストのすばやい選択, カット, コピー, ペースト HTML のタグの編集では, 一度入力したテキストの一部を選択し, 移動したり, コピーしたり, といった作業が大変多く, マウスを使って作業をするのは時間がかかる ショートカット と呼ばれるキー操作を覚えると, マウスを使わずキーボードでテキスト編集作業を済ませ, スピードアップを図ることができる カット とも言う ペースト とも言う 作業 標準的な操作方法 ショートカット テキストの選択 選択する範囲をマウスでドラッグ [Shift] + 矢印キー 切り取り [ 編集 ] [ 切り取り ] [Ctrl] + [x] コピー [ 編集 ] [ コピー ] [Ctrl] + [c] 貼り付け [ 編集 ] [ 切り取り ] [Ctrl] + [v] 元に戻す [ 編集 ] [ 元に戻す ] [Ctrl] + [z] 便利なショートカットとしては, 他に 上書き保存 [Ctrl] + [s], ( テキストを ) 全て選択 [Ctrl] + [a] などがある テキストを何度も編集することができるパソコンの利点は, ショートカット機能を活用してスピードアップを図ることで, 何倍にも大きくなると言ってよい どんどん使おう! ( 以上 ) 麗澤大学 2009 年度情報科学 A 資料 No.6 8