mokuji.htmlには別に注意するほどのことはありませんね。強いて言えば、リンクのターゲットを「sita」にすることを忘れないように、というくらいでしょうか。
|
<HTML>
<HEAD>
<TITLE>Kimura's Room:Travel</TITLE>
<BASE TARGET="sita">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="robots" CONTENT="none">
</HEAD>
<BODY BGCOLOR="#ececec" LINK="#009933" ALINK="#ff0000" VLINK="#999999">
<CENTER>
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="97%" BGCOLOR="#009933">
<TR><TD ALIGN="right"><FONT COLOR="#ffffff"><B>Travel</B></FONT></TD></TR>
</TABLE>
<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>
旅行先で撮った写真を掲載しています。<BR>
枠の付いた写真をクリックすると大きな写真がご覧になれます。
<BR>
<!--★★他ページへのリンク リンク元★★-->
<FONT SIZE="2">
│<A HREF="canada.html">カナダ</A>│<A HREF="guam.html">グアム</A>│<A HREF="silkroad.html">シルクロード</A>│
</FONT>
</CENTER>
</BODY>
</HTML>
|
canada.htmlは見本として小さな写真を掲載し、その写真に大きい写真を貼り込んであるページへリンクを張っています。これはギャラリーなどの作り方の王道です。いきなり大きな写真をたくさん掲載してしまうと、重たいページになり、読み込みに時間がかかります。小さいサイズの見本を並べておいて、見に来た人に大きく見たい写真をチョイスしてもらう、という手法はかなり効果的だと思います。
また下の「次へ」という「tra-next.gif」という画像は、背景を透明にしてありますので、背景色が違う他のページにも、同じ画像を使い回しする事が出来ます。
その他のページのHTMLは、もうここまで読んでいただいた方には説明する必要は無いと思いますので割愛します。これで「travel」のページ、および「フレーム」に関する説明を終わります。
|
<HTML>
<HEAD>
<TITLE>Kimura's Room:Travel</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
<META NAME="robots" CONTENT="none">
</HEAD>
<BODY BGCOLOR="#ccccff" LINK="#009933" ALINK="#ff0000" VLINK="#999999">
<CENTER>
<FONT SIZE="4"><B>カナダ</B></FONT>
<HR WIDTH="97%" SIZE="4" NOSHADE>
<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10">
<!--★★ギャラリー★★-->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="97%">
<TR ALIGN="center">
<TD><A HREF="canPhoto-01.html" TARGET="_blank"><IMG SRC="../img/tra-canada011.jpg" ALT="カナダ1" BORDER="2" WIDTH="95" HEIGHT="64"></A></TD>
<TD><IMG SRC="../img/tra-canada02.jpg" ALT="カナダ2" BORDER="0" WIDTH="95" HEIGHT="64"></TD>
<TD><A HREF="canPhoto-03.html" TARGET="_blank"><IMG SRC="../img/tra-canada031.jpg" ALT="カナダ3" BORDER="2" WIDTH="95" HEIGHT="64"></A></TD>
</TR>
<TR ALIGN="center">
<TD><IMG SRC="../img/tra-canada04.jpg" ALT="カナダ4" BORDER="0" WIDTH="95" HEIGHT="64"></TD>
<TD><IMG SRC="../img/tra-canada05.jpg" ALT="カナダ5" BORDER="0" WIDTH="95" HEIGHT="64"></TD>
<TD><IMG SRC="../img/tra-canada06.jpg" ALT="カナダ6" BORDER="0" WIDTH="95" HEIGHT="64"></TD>
</TR>
<TR ALIGN="center">
<TD><IMG SRC="../img/tra-canada07.jpg" ALT="カナダ7" BORDER="0" WIDTH="95" HEIGHT="64"></TD>
<TD><A HREF="canPhoto-08.html" TARGET="_blank"><IMG SRC="../img/tra-canada081.jpg" ALT="カナダ8" BORDER="2" WIDTH="95" HEIGHT="64"></A></TD>
<TD><IMG SRC="../img/tra-canada09.jpg" ALT="カナダ9" BORDER="0" WIDTH="65" HEIGHT="94"></TD>
</TR>
</TABLE>
<!--★★スペース調整★★-->
<IMG SRC="../img/spacer.gif" ALT="" BORDER="0" WIDTH="1" HEIGHT="10"><BR>
<!--★★透明GIFボタン★★-->
<A HREF="guam.html"><IMG SRC="../img/tra-next.gif" ALT="次へ" BORDER="0" WIDTH="57" HEIGHT="57"></A>
</CENTER>
</BODY>
</HTML>
|