メインのページの作成

次のページを作ってゆきます。

このページを作る上でのポイントは

1,リンクの色を変更する
2.枠が透明なテーブルの作成
3,特殊な線

 

の3点です。


1、準備

このページで利用する画像は

[s_lis016.gif] と

[p_ani000.gif] (この画像はアニメーションしていますが使い方は他の画像と一緒です)と
[logo040.gif] と

[blue_p6b.gif] の4つです。

さらに、音楽データを用意します。

[baby.mid]

この5つをindex.html と同じフォルダ(マイドキュメント)に用意します。


2、作成編

 

リンクの色を変更する

ランチャーから、「開く」を選択し、 フォルダを移動して、index.htmlを開きます。

タイトルを「ふくおか はるな」と設定します。

HEADとBODYの設定をします。
BODYの設定で背景画像は、 「blue_p6b.gif」を選択します。

このとき、リンクの色を設定します。
「リンクテキスト(L)」 のところに「ffffcc」と入力します。
これによって、このページでリンクを張っている部分は色が変わります。



2,枠が透明なテーブルの作成

まんなかの部分はテーブルタグを利用してます。

これがテーブルにみえないのは、テーブルの枠を透明にしているからです。
また、このページでは、テーブルの中に画像をつかっています。

なので、テーブルWizardを起動して、5行2列にします。
そして、左のほうは入力せずに、右のほうだけ入力して完了をおします。
すると、下の左のようになるので、<TD>と</TD>の間に画像を貼り付けましょう。
TABLEの一番最初の行の「BORDER」 を消すことで、枠が透明に鳴ります。

修正前
修正後

<TABLE BODER>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF"></TD>
  <TD>いまの私 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF"></TD>
  <TD>昔の私</TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF"></TD>
  <TD>これからの私 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF"></TD>
  <TD>掲示板 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF"></TD>
  <TD>他へのリンク </TD>
 </TR>
</TABLE>

<TABLE>
 <TR>
  <TD><IMG SRC="s_lis016.gif" WIDTH="16" HEIGHT="16"></TD>
  <TD>今の私</TD>
 </TR>
 <TR>
  <TD><IMG SRC="s_lis016.gif" WIDTH="16" HEIGHT="16"></TD>
  <TD>昔の私</TD>
 </TR>
 <TR>
  <TD><IMG SRC="s_lis016.gif" WIDTH="16" HEIGHT="16"></TD>
  <TD>これからの私 </TD>
 </TR>
 <TR>
  <TD><IMG SRC="s_lis016.gif" WIDTH="16" HEIGHT="16"></TD>
  <TD>掲示板 </TD>
 </TR>
 <TR>
  <TD><IMG SRC="s_lis016.gif" WIDTH="16" HEIGHT="16"></TD>
  <TD>他へのリンク </TD>
 </TR>
</TABLE>





3,特殊な線

アニメーション画像と、テーブルの間にちょっとかわった線があります。これは、「さまざまな罫線」ボタンで作製できます。



テーブルの上で、「さまざまな罫線」ボタンを押します。

すると、右のようなダイヤログが出てくるので、
太さを「」、長さを「70」としましょう。

これで、ちょっとサイズの変わった線ができます。


のこりは復習です。

文章を入れていき、
「ふくおかはるな」の部分はフォントのサイズを「6」色を「cc00cc」 にして、太字(<B>)にします。
「はじめて、〜思います。」の部分はフォントの色を「FFFF00」 にします。

「今の私」に「newpage3.htm
「昔の私」に 「newpage2.htm
「これからの私」に 「newpage4.htm
「掲示板」に「http://www64.tcup.com/6427/sss.html
「他へのリンク」に「newpage5.htm

画像に「http://mis.edu.yamaguchi-u.ac.jp/」をそれぞれリンクさせます。

あとは、センタリングをしておしまいです。

最終的なソースの例