KAWANO's PukiWiki Plus! - Lecture/JouhouC2004/13th の変更点
*情報教育演習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]
今回は、構造以外に、配色やレイアウト、Webページとして必要な情報なども設定していきます。
***他のページへのリンク [#q86056a4]
-<a href="...">...</a>
--他のWebページにジャンプするリンクを設定します。
--「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクとして表示する文字を設定します。
--次のように、リンク先にURLを指定すると、「Yahoo! JAPAN」のところにリンクが作られます。
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
--次のように、リンク先にファイル名を指定すると、「ほげほげ」のところにリンクが作られます。
<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へのリンク
**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をひな型にして、ほかの３つのファイルを作成するとよいでしょう。
-「わたし」の街（&ref(index.htm);）
--Webページ全体の窓口（トップページ）です。
-「わたし」について（&ref(profile.html);）
--自己紹介とおすすめのリンク（３つ）のページです。
-「街」について（&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(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/
|
|
|
Founded by Minoru Kawano.
Powered by PukiWiki Plus! 1.4.7plus-u2-i18n. HTML convert time to 3.679 sec. |
|