ホームページ作成講座 1999.6.30
ページ全体の仕上げ
1. 今回の作業内容
ページのタイトルやバックグランドの色、ロゴアニメーションの設定、目次ページと内容ページの分離と相互リンクなどページ全体としての統一されたスタイルを完成させる。ページデザインは基本的には各人の自由なセンスに任せるが、それだけでは進まない点もあるので、こちらからモデル的なデザインを提供し、それに近い内容のページを完成させる。
2. ボディ以外の部分の指定
HTML文書は<html></html>で挟まれた部分がHTML言語として解釈され、ページ本体はその中の<body></body>タグで挟まれた部分である。それ以外に、ブラウザで表示した時にタイトルバーに表示される文字列がヘッダ部分で指定できる。また、ページのバックグランドの色、背景のグラフィック、文字の色が<body>タグのアトリビュートとして指定できる。ここでは、まずそれらを決定する。
2.1 タイトル
Kterm上で
telnet mag2.riko.shimane-u.ac.jp
として、サーバにログインし、
cd public_html
で、ディレクトリを移る。続いて、
emacs -nw index.html
として、ページのファイル内容を編集する。
<html>
<head>
<title>
Example of title
</title>
</head>
までの部分がヘッダであり、上の例ではブラウザのタイトルバーにExample of titleと表示されることになる。今回は、ここには自分の名前（ニックネーム）を入れて、
Welcome to hoge's page
としておく。
2.2 背景
<body>タグに何も指定しない場合、背景色はブラウザのデフォルトで示される。特別な色を指定したい場合は
<body bgcolor=#??????>
のように色を指定する。色は??????の部分が相当し、RGB (Red Green Blue) の光の三原色の強さを2桁ずつ16進数を用いて8bit（256階調）で指定する。すなわち、000000は黒、ffffffは白、ff0000はマゼンダ、00ff00はグリーン、0000ffでシアンとなる。背景の色はこの後の文字の色と組み合わせて設定しないといけないので、後で具体例を説明する。
2.3 文字色
文字の色も指定しなければ通常の文字が黒、リンク先を示す部分が青、一度リンクした場所を示す部分が赤にデフォルトで表示される。これらの文字色の指定は、
<body text=#?????? link=#?????? vlink=#??????>
のように、指定できる。今回は、次に示す例のどちらかひとつ、もしくはそれらを若干変更したものを自分で選び設定すること。
例１ 明るい背景と濃色の文字
<body bgcolor=#ffffff text=#3322aa link=#0088ff vlink=#ff3300>
例２ 暗い背景と淡色の文字
<body bgcolor=#116677 text=#eeccaa link=#22ff66 vlink=#cc6622>
実際に Netscape を起動し、色のイメージを確認すること。
2.4 ファイルの保存
ここまでの変更が終わったら
Ctrl+x Ctrl+s
で、一旦ファイルを保存する。
3. ロゴマークの決定
前回、GIMPによりロゴマークを作る練習をしたが、文字サイズや色などまだ使いこなすところまでは行っていない。今回は、より簡単なロゴを小さな文字で作成し、背景を落とした透過GIFとしてページに張り付ける。
3.1 ロゴの文字入力
GIMPを起動し、前回と同じ作業を行うが、ロゴの文字は hoge's pageだけとし、文字サイズは20ピクセルとする。
Xtns --> Script-Fu --> Logos --> Basic I
を選択し、Text String に hoge's page を入力、Font Size は20ピクセル、Fontは courier を指定し、薄い背景色を選んだ場合はそのまま、濃い背景色を選んだ場合は、Text Colorをクリックして適当な色に変更した後、OKボタンを押す。
3.2 透過GIFへの変換
保存の際は背景を透過にする作業を行った後、GIFファイル形式で保存する。イメージ上で右クリックし、
Layers --> Layers & Channels
を選択し、Backgroundをハイライトさせて×印のボタンを押す。イメージから背景が削除されたのを確認した後、Layers & Channels ウィンドウを閉じる。次に、イメージ上で右クリックし、
Image --> Indexed
を選択する。GIF画像は255色までしか使えないので、３番目の Use custom palette ボタンを押して、自分の選んだ文字色に近い色のパレットを選択して画像の色の数をおとす。すこし冴えない画像に変わってしまうが、まずはこの程度から始める。
3.3 イメージの保存
イメージを右クリックし、
File --> Save
を選択する。ファイル名の欄にlogoと入力し、Save Options のファイルタイプでGIFを選択すると、logo.gifと言う名前で保存できる。
3.4 ファイルの転送
別のKtermをデスクトップに開き、その新しいKterm上で、
ftp mag2.riko.shimane-u.ac.jp
として、サーバにftpログインし、アカウント名とパスワードを入力する。サーバからOKが出たら、
cd public_html
でディレクトリを移り、
put logo.gif
として、ロゴファイルをサーバに送る。
4. 目次ページへの変更
URLを最初に入力した時に表示されるページのファイル名がindex.htmlであることは知っている通りである。indexとは目次のことであり、初めにまずページ全体の構成が分かるような内容を訪問者に知らせる役割をする。（人によっては、index.htmlのページのことをホームページと表記し、そこからリンクされる他の内容はホームページとは言わないこともある。）また、誰かがページを訪問してくれた際に、内容が一目で見渡せる範囲内に収まっていることは、良い印象を与えるためにも重要である。大切なポイントは要点が整理されている、内容が一目で分かる、軽い（容量の大きな画像ファイルなどをおかない）、カラフルで見栄えがよい、等いろいろあるが、結局は自分が訴えたい内容が他人にも興味あるもであるかどうかにかかっている。それはさておき、ここでは、今まで作成したページをもっともらしい目次ページへと変更する。
4.1 ページの一時保存
emacsを開いているKterm上で、emacsで編集中のファイルを別名で保存する。
Ctrl+x Ctrl+w
とすると、新しいファイル名を聞いてくるので、index.html.old として保存する。引き続き、
Ctrl+x Ctrl +f
で、もう一度、index.html ファイルを開き、編集の続きを行う。
4.2 目次ページの内容
<body ....>のタグの次の行には先程作成したロゴを入れる。
<center>
<img src="logo.gif"><p>
<h1>hogeのページへようこそ！</h1><p>
</center>
<hr>
とし、ページの冒頭部分を作る。続いて、
<p>
<ul>
<li><a href="introduction.html>自己紹介</a><p>
<li><a href="topics.html">最近の話題</a><p>
</ul>
<hr>
電子制御システム工学科のホームページは<a href="http://www.ecs.shimane-u.ac.jp">こちら</a>です。<p>
このページへの御意見、御感想は<a href="mailto:hoge@ecs-s.shimane-u.ac.jp">こちら</a>まで<p>
</body>
</html>
となるように、現在の内容を変更する。ここで、上記の項目を自分の好みに合わせて変更しても良いし、最近の話題を What's new などに変えても良い。作業が終わったらファイルを保存し、ブラウザで内容を確認する。
4.3 リンクページの作成
index.htmlファイルの保存が終わったら、また
Ctrl+x Ctrl+w
で別名保存をし、ファイル名を introduction.html とする。そして、<center>と</center>の間の文字を削除し、新たに自己紹介と入力する。次に、リンク部分を削除し、
<ul>
<li>名前：<p>
<li>星座：<p>
<li>血液型：<p>
<li>趣味、特技：<p>
<li>その他：<p>
</ul>
<p>
<img src="hoge.jpeg"><br>
私はこんな奴です。<p>
等のように自分の好きな項目を入力し、実際のデータを記入する。下の方の学科へのリンクの部分を
<a href="index.html">ホームへ戻る</a><p>
のように変更する。作業が終了すればファイルを保存し、ブラウザで確認すること。また、さらに別名で保存を行い、ファイル名をtopics.htmlと変更する。そして、先ほどの手順と同じように、上の部分のタイトルを最近の話題などに変更し、<hr>と<hr>の部分に何でもよいから適当な文章を記入しておく。最悪の場合は工事中でも良い。作業が終了したらファイルを保存し、ブラウザで確認する。
5. バックグランドにグラフィックを入れる。
4.までの作業で一通りのページは出来ている。これに変化を持たせる方法はいろいろあって、すべてを説明しきれないが、ここでは、バックグラウンドに自分の描いた絵を入れる方法について説明する。
5.1 グラフィックの作成
GIMPで
File --> New
を選択し、メニュー画面のOKを押して、新しいキャンバスを開く。パレットはデフォルトでは文字色が黒になっているので、そこをクリックして自分のページの文字色と干渉しない色を選ぶ。筆ツールを選択し、自分のイニシャル、もしくは一言をアルファベットで手書きし、ファイルをjpegフォーマットで、例えば、back.jpgなどと保存する。今作成したファイルをftpでサーバのpublic_html ディレクトリに送る。
5.2 ページへの挿入
<body>タグの部分で、bgcolorの部分を削除し、background="back.jpg"等に変更する。作業が終われば、ファイルを保存し、ブラウザで確認する。
6. 自己紹介を表にする。
先ほどは自己紹介の各項目をリスト表示したが、変化をつけるために表にしてみる。
先ほどの自己紹介の内容のところを以下のようにタグを挿入して変更する。
<table border>
<th>名前</th><td>ほげほげ</td><tr>
<th>星座</th><td>うがうが</td><tr>
<th>血液型</th><td>でろでろ</td><tr>
<th>趣味、特技</th><td>へろへろ</td><tr>
<th>その他</th><td>ぼこぼこ</td><tr>
</table>
7. ボタンのように見える文字
自己紹介のタイトル部分をボタン的な表示に変更してみる。ただの、自己紹介、と言う文字を
<table border=10>
<th><font size=7>自己紹介</font></th><tr>
</table>
に変更してみる。
- # -