*情報教育演習II 第14回 [#v5034255] **HTMLファイルの作成 (4) [#nb9ca811] 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 **Webサイトの作成 [#a22ef954] ***Webサイトの構成 [#q09d39e9] 今回作成しているサイトの全体構成は次のとおりです。 -「わたし」の街(&ref(Lecture/JouhouC2004/13th/index.htm);) --サイトの窓口(トップページ) -「わたし」について(&ref(Lecture/JouhouC2004/13th/profile.html);) --自己紹介とおすすめのリンク(3つ) -「街」について(&ref(Lecture/JouhouC2004/13th/town.html);) --自分の出身地の紹介 -「わたし」と「街」(&ref(Lecture/JouhouC2004/13th/memory.html);) --出身地での思い出や、将来への期待など #ref(site1.png,nolink,90%,サイトの構成); Webサイトや作成するときには、次のポイントが重要になります。 +出入り口となるリンクをつくる --情報のながれをつくることで、公開した情報にアクセスしやすくする --訪問者を迷い込ませないことで、悪い印象を持たせない +署名をつくる --著作権や連絡先を明確にすることで、内容の信用性がわかる --更新日時を明確にすることで、内容の鮮度がわかる **画像データの利用 [#z814f162] ***画像のフォーマット [#l2eb0a9f] 画像データのフォーマット(形式)には、次のようなものがあります。 :BMP(ビットマップ)(*.bmp)| --Windows標準の画像フォーマット(「ペイント」で作成できる) --ファイルサイズが大きい(24ビットカラーの場合) --Webページでは使えないので、ほかの形式に変換する必要がある :JPEG (*.jpg, *.jpeg)| --写真、イラスト向き(フルカラーが扱える) --ファイルサイズが小さい(圧縮率を変える) :GIF (*.gif)| --アイコン、バナー向き(最大で256色しか扱えない) --透過GIFやアニメーションGIFなど機能が豊富 :PNG (*.png)| --GIFファイルに代わるフォーマット(256色以上扱える) --GIFファイルに特許問題が生じたため、それ避ける目的で作られた ***素材集の利用 [#sd8d33bf] インターネットに公開されている「素材集サイト」にアクセスして、 アイコンや写真など、画像の素材を集めます。 ただし、次の点に注意すること。 :素材を利用する前に、利用上の注意事項をよく確認する| 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。 :ファイル名は半角文字にする| インターネットに公開するデータは、半角文字となります。 +Yahoo! JAPAN( http://www.yahoo.co.jp/ )にアクセス +「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む +登録されているサイトにアクセスし、画像ファイルを探す +気に入った画像があったら、画像を右クリックする ++メニューから「名前をつけて画像を保存」を選ぶ ++ファイルの保存場所に、「マイドキュメント」→「public_html」を設定 ++「保存」ボタンをクリック ***著作権 [#j13a8fcb] -''著作物'':人がアイデアを「書いたり」「作ったり」「発表した」もの --小説、講演、楽曲、絵画、コンピュータのプログラム -''著作者'':著作物を作った人 ''「著作権」''とは、著作権法で定められた、 「著作者」が「著作物」に対して持つ権利です。 第三者は、著作者に無断で公開することはできません (私的な利用は条件を満たせば認められます)。 著作権は、手続きなしで創作した時点で発生し、 著作者の死後50年後まで有効となります。 -参考リンク --著作権情報センター : http://www.cric.or.jp/ --しゅんしゅんの著作権講座:http://www.geocities.jp/shun_disney7/ ***画像データの表示 [#pe434531] 画像データを表示するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします <img src="gazou1.jpg" alt="絵本を読む園児の様子"> 背景として画像データを表示するには、''<body>''要素に''background''属性を指定します。 --<body background="画像データの位置"> <body background="kabegami.gif"> **Webページのレイアウト [#k11b76f9] サイトの規模にもよりますが、Webページを構成する要素は、大きく分けると次のようになります。 -タイトル(ページのタイトルやタイトル画像) -メニュー、サブメニュー(サイト全体やページ内のメニュー) -コンテンツ(文章や画像など) -署名(著作権、連絡先、更新日時) これらの要素をどうレイアウトするかが、 使いやすいWebページ・Webサイトを考える上で重要になります。 よく使われるレイアウトは次のとおりですが、 コンテンツに応じて向いている・向いていないレイアウトがあります。 -全面:もっともシンプルなレイアウト |CENTER:120|c |タイトル&br;メニュー&br;コンテンツ&br;署 名| -縦分割:メニューが左(または右)にある |CENTER:40|CENTER:80|c |メニュー|タイトル&br;コンテンツ&br;署 名| -横分割:メニューが左(または右)にある |CENTER:120|c |メニュー| |タイトル&br;コンテンツ&br;署 名| ***表によるレイアウト [#z9203ef2] -<table>...</table> --テーブル(表)を設定します。 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します(0にすると枠線が見えなくなる) -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<tr>...</tr> --テーブルのひとつの行を設定します。 -<td>...</td> --テーブルのひとつのマス目(セル)を設定します。 #ref(Lecture/JouhouC2004/12th/table_el.png,nolink); <table border="1"> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> <table> |1|2|3| |4|5|6| -<table cellspacing="セルの間隔"> --セルとセルの間隔を設定します(セルと外枠の間隔も設定されます) -<table cellpadding="セル枠と内容との間隔"> --セルの枠と内容の間隔を設定します <table border="2" cellspacing="1" cellpadding="5"> -<table bgcolor="背景色">&br;<tr bgcolor="背景色">&br;<td bgcolor="背景色"> --表や列やセルの背景色を設定します <table bgcolor="#ffcccc"> <td bgcolor="#ffff00"> ''<table>''要素は、本来、表を表示するためのものですが、 この機能を使って、Webページの内容をブロック状にレイアウトすることができます。 |>|CENTER:タイトル画像| |>|CENTER:メインメニュー| |CENTER:サブメニュー|CENTER:コンテンツ(内容)| |>|CENTER:署名| <table> <tr> <td> <タイトル> </td> </tr> <tr> <td> <コンテンツ> </td> <td> <写真> </td> </tr> <tr> <td> <署名> </td> </tr> </table> ** [#vc6d971b] ***アクセシビリティ [#n03743f6] タイトルのつけ方(お気に入り)(SEO) 単語の間にスペースや改行を入れない 大きな画像には、サムネイルを入れる 画像にはalt属性で代替テキストを入れる ***ユーザビリティ [#ad23dbd4] タイトルのつけ方(お気に入り)(SEO) スクロールしなくても見える範囲に重要な情報(概要や結論を先に)(SEO的には100文字程度で) 画面サイズの目安:800x600ピクセルを基準に(ウィンドウ枠やスクロールバーなどの分を忘れずに) 工事中にはリンクしない(閲覧側からすれば時間の無駄→ユーザの貴重な時間を無駄にしない) 各ページには、サイト名、トップページのURL、著作権、連絡先、更新日 パンくずリスト(Yahooを参考に) サイト全体でレイアウトを統一(操作性を重視:操作や見方で迷わないように) (きちっとした印象をあたえ、信頼感が増す) データのサイズ **ファイルの更新方法 [#s73a9512] +Webサーバ上のファイルをパソコンへコピーする +パソコン上で編集・確認作業をする +できあがったらWebサーバへコピーする ***Webサーバ上のファイルのコピー [#ac04fb42] まず、「Webフォルダ」機能を利用して、 Webサーバのファイルのアクセスします。 まず、サーバの中のファイルをコピーします。 +デスクトップにある、「Internet Explorer」を起動 +メニューバーから、「ファイル」→「開く」を選択 ++「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック ++「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力 ++「OK」ボタンをクリック #ref(Lecture/JouhouC2004/13th/html00.png,90%,nolink); +ユーザ名とパスワードを入力したら、「OK」ボタンをクリック +自分の学籍番号のフォルダを開く +コピーするファイルを右クリックし、''「コピー」''を選択 次に、コピーしたファイルをパソコンの中に貼り付けます。 +''「マイドキュメント」''を開く +''「public_html」''を開く +ファイルのリストの開いている場所を右クリックし、''「貼り付け」''を選択 ++ファイルは「上書き」するように選択 ***Webサーバへのファイルのコピー [#ec8abad9] 編集や確認作業が完了したファイルを、 Webサーバへ転送します。 まず、パソコンの中にあるファイルをコピーします。 +''「マイドキュメント」''を開く +''「public_html」''を開く +ファイルのリストの開いている場所を右クリックし、''「コピー」''を選択 次に、サーバの中にファイルを貼り付けます。 +上記の『Webサーバ上のファイルのコピー』を参考に、 Internet Explorerを使って、サーバの中のファイルを開く +自分の学籍番号のフォルダを開く +ファイルのリストの開いている場所を右クリックし、''「コピー」''を選択 ++ファイルは「上書き」するように選択 **参考リンク [#x85f59e6] -とほほのWWW入門 --http://tohoho.wakusei.ne.jp/ -Academic HTML --http://www.tg.rim.or.jp/~hexane/ach/ -The Quick Color Table --http://www.kanzaki.com/docs/colortable-t.html -0からHTML --http://www.zerokara.com/html/ |