*情報教育演習II 第13回 [#vf9c09c5] **前回の復習:HTMLファイルの作成 (2) [#nfe6fdea] :箇条書きのタグ| --ul -- 番号なし箇条書き --ol -- 番号つき箇条書き ---li -- 箇条書きの項目 --dl -- 説明つき箇条書き ---dt -- 箇条書きの項目名 ---dd -- 項目名に対する説明 :色の指定| --光の三原色である、赤(R)緑(G)青(B)の強さを値であらわす --16進数(0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F)で、RGBそれぞれを00〜FFまでの256段階で設定 ---例:blackは#000000、redは#FF0000、whiteは#FFFFFF(「#」のあとにRGB値を設定) :特定の場所やページ全体の文字色の設定| --font -- 文字の色や大きさの設定 ---color="指定した文字色" ---size="指定した大きさ" (大きさは1〜7の数字を指定) --body -- ページ全体の設定 ---text="指定した文字色" ---bgcolor="指定した背景色" **HTMLファイルの作成 (3) [#a6e29fc1] 前回は、HTML(Hyper Text Markup Language)でWebページを作成しました。 タグを使って、構造や意味を意識しながら、文書(Web)ページを作成しました。 今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。 ***他の情報へのリンク [#q86056a4] ***他のページへのリンク [#q86056a4] -<a href="...">...</a> --他のWebページにジャンプするリンクを設定します。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。 --次のようにすると、[[Yahoo! JAPAN:http://www.yahoo.co.jp/]]にジャンプします。 --「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクとして表示する文字を設定します。 --次のように、リンク先にURLを指定すると、「Yahoo! JAPAN」のところにリンクが作られます。 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> --次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。 --次のように、リンク先にファイル名を指定すると、「ほげほげ」のところにリンクが作られます。 <a href="hogehoge.html">ほげほげ</a> --次のように、リンク先に「mailto:メールアドレス」を指定すると、指定したメールアドレスへメール送信のウィンドウが開きます。 <a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a> 「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a> 箇条書きの項目に、次のようなリンクを設定してください。 -「わたし」について:prefile.htmlへのリンク -「街」について:town.htmlへのリンク -「わたし」と「街」:memory.htmlへのリンク ***画像の配置 [#kacbc47d] 画像データを配置するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします **Webページの公開 [#vd84c656] インターネットで公開されているWebページは、 すべて、 ''Webサーバ''というコンピュータで管理され公開されています。 つまり、 Webページをインターネットに公開するには、 作成したHTMLファイルを、 手元のパソコンからWebサーバへ転送する必要があります。 #ref(server.png,nolink); ***ファイルの転送方法の種類 [#nfcdcf49] Webサーバにファイルを転送するには、いくつかの方法があります。 +「ftp」を使う --以前から使われている、標準的な、ネットワークを使ったファイルの転送方法 --設定が少しややこしい(初心者にはちょっと難しい?) +「記録用メディア」を使う --フロッピーやCD-ROMなどに記録したファイルを、サーバを直接操作してコピー --運用上の大きな問題がある +++サーバを直接操作しないといけない(サーバの場所までいかないとできない) +++サーバを操作するための権限がないといけない(管理のための権限) +「Webフォルダ」を使う --Windows上でファイルをコピーする感覚で、転送ができる(難しい設定はいらない) --サーバ側にいろいろな設定が必要(どんなサーバでも利用できるわけではない ***Webフォルダによる転送方法 [#a709cc90] Windowsで''Webフォルダ''を利用するには、 ''Internet Explorer''を使用します。 次のように操作すれば、通常のデータのコピーと同じように Webサーバへファイルを転送することができます。 +Internet Explorerを起動 +メニューから、「ファイル」→「開く」を選択 ++「Webフォルダとして開く」のチェックボックスを、マウスをクリックしてチェック ++「開く」の入力欄に、「http://arena.hyogo-dai.ac.jp/joho2/」と入力 ++「OK」ボタンをクリック #ref(html00.png,nolink); +ユーザ名とパスワードを入力し、「OK」ボタンをクリック +通常のフォルダと同じようなウィンドウが表示されるので、 通常のコピー操作をして フォルダへ作成したHTMLファイルなどをコピー **Webサイトの作成 [#v9f5d1a1] ***Webサイトの構成 [#v868124a] ここまでの内容をもとに、次のような構成の、Webサイトを作成します。 index.htmをひな型にして、ほかの3つのファイルを作成するとよいでしょう。 -「わたし」の街(&ref(index.htm);) --Webページ全体の窓口(トップページ)です。 -「わたし」について(&ref(profile.html);) --自己紹介とおすすめのリンク(3つ)のページです。 -「街」について(&ref(town.html);) --自分の出身地の紹介のページです。 -「わたし」と「街」(&ref(memory.html);) --出身地での思い出や、出身地への期待や思いを書くページです。 Webサイトや作成するときには、次のポイントが重要になります。 +出入り口となるリンクをつくる --情報のながれをつくることで、公開した情報にアクセスしやすくする --訪問者を迷い込ませないことで、悪い印象を持たせない ---index.htmlには、兵庫大学のサイト(http://www.hyogo-dai.ac.jp/)へのリンク ---profile.html, town.html, memory.htmlには、トップページへのリンク <hr> <a href="index.html">トップページへもどる</a> +署名をつくる --著作権や連絡先を明確にすることで、内容の信用性がわかる --更新日時を明確にすることで、内容の鮮度がわかる ***Webページのレイアウト [#ve0b46d2] サイトの規模にもよりますが、Webページを構成する要素は、大きく分けると次のようになります。 -タイトル(ページのタイトルやタイトル画像) -メニュー、サブメニュー(サイト全体やページ内のメニュー) -コンテンツ(文章や画像など) -署名(著作権、連絡先、更新日時) これらの要素をどうレイアウトするかが、 使いやすいWebページ・Webサイトを考える上で重要になります。 よく使われるレイアウトは次のとおりですが、 コンテンツに応じて向いている・向いていないレイアウトがあります。 -全面:もっともシンプルなレイアウト |CENTER:120|c |タイトル&br;メニュー&br;コンテンツ&br;署 名| -縦分割:メニューが左(または右)にある |CENTER:40|CENTER:80|c |メニュー|タイトル&br;コンテンツ&br;署 名| -横分割:メニューが左(または右)にある |CENTER:120|c |メニュー| |タイトル&br;コンテンツ&br;署 名| ***表によるレイアウト [#z16b7341] -<table>...</table> --テーブル(表)を設定します。 -<table border="外枠の太さ"> --border属性で表の外枠の太さを指定します(0にすると枠線が見えなくなる) -<table width="幅"> --widht属性で表の幅を、ピクセル値かページの横幅に対するパーセント(%)で指定します -<tr>...</tr> --テーブルのひとつの行を設定します。 -<td>...</td> --テーブルのひとつのマス目(セル)を設定します。 #ref(table_el.png,nolink); #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:署名| **画像データの利用 [#jbc792c3] ***画像のフォーマット [#pdbdb036] 画像データのフォーマット(形式)には、次のようなものがあります。 :BMP(ビットマップ)(*.bmp)| --Windows標準の画像フォーマット(「ペイント」で作成できる) --ファイルサイズが大きい(24ビットカラーの場合) --Webページでは使えないので、ほかの形式に変換する必要がある :JPEG (*.jpg, *.jpeg)| --写真、イラスト向き(フルカラーが扱える) --ファイルサイズが小さい(圧縮率を変える) :GIF (*.gif)| --アイコン、バナー向き(最大で256色しか扱えない) --Compu Serve(現在はAOL)が定められたフォーマット --透過GIFやアニメーションGIFなど機能が豊富 :PNG (*.png)| --GIFファイルに代わるフォーマット --GIFファイルに特許問題が生じたため、それ避ける目的で作られた ***素材集の利用 [#xbbc64c8] インターネットに公開されている「素材集サイト」にアクセスして、 アイコンの素材を集めます。 ただし、 ''素材集サイトを利用するときには、利用に関する注意事項を確認しましょう''。 「著作権フリー」のように、再利用が許可されているかどうか注意しましょう。 +Yahoo! JAPAN( http://www.yahoo.co.jp)にアクセス +「コンピュータとインターネット > インターネット > WWW > ホームページ作成 > グラフィックス、素材」の順にカテゴリを絞り込む +登録されているサイトにアクセスし、画像ファイルを探す +気に入った画像があったら、画像を右クリックする ++メニューから「名前をつけて画像を保存」を選ぶ ++ファイルの保存場所を指定して、「保存」ボタンをクリック ***著作権 [#ve06a1eb] -著作権とは? --「著作者」が「著作物」に対して持つ権利(「著作権法」より) --著作者に無断で第三者に公開することはできない -著作物とは?(一部) --文章:小説、脚本、論文、講演 --音楽:歌詞、楽曲、舞踏 --美術:絵画、彫刻、写真、映画 --情報:Webページ、コンピュータのプログラム -著作者とは? --著作物を創作した人 -著作権はいつ発生する? --特別な手続きは必要なし(創作した時点で自動的に発生) --著作者の死後50年後まで有効 -参考リンク --しゅんしゅんの著作権講座:http://www.geocities.jp/shun_disney7/ ***画像データの表示 [#kacbc47d] 画像データを表示するには、''<img>''要素を使います。 -<img src="画像データの位置" alt="代替テキスト"> --src属性には、画像の位置(ファイルの場所やURL)を指定します --alt属性には、画像が表示できない場合に表示させる説明文を設定します~ 何も説明がない場合は「alt=""」とします <img src="gazou1.jpg" alt="絵本を読む園児の様子"> 背景として画像データを表示するには、''<body>''要素に''background''属性を指定します。 --<body background="画像データの位置"> <body background="kabegami.gif"> **参考リンク [#z73e9e07] -とほほの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/ |