1、初期のページ
初めて作ったころの白山の昨日今日を見てみてください。
これは素朴、ソースを見ると、ごく単純な構成です。テキストと写真を交互に縦に並べています。
これなら、画像が重なったり、テキストが重なりあったりすることはない。
智恵がついたり、冒険心が出始めると、問題個所も発生し始めてきます。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<P>
</P>
<P>
</P>
</BODY>
</HTML>
２、だんだん達者になってくると
上と下の絵を比較してみてください。写真の配置が崩れているでしょう。あれれ、こんなはずではなかった。
同じインタネットエクスプローラでも、上の絵は解像度800*600、下の絵は解像度1024*768で見ています。
これでは具合が悪いので、今のページはこう変えました。
表（テーブル）仕立てにして、３枚の写真をばらばらにならないようテーブルで縛り付けています。これなら、どんな解像度で見ても大丈夫(^_-)
パソコンを買い換えて、モニターが大きくなりました。解像度を上げて見えるようになって、初めてこういう事態に気がつきました。
以来、解像度800*600、1024*768の両方で必ず点検するようにしています。
もちろん、インタネットエクスプローラ、ネットスケープ、両方のブラウザで見え具合を点検するようにしています。
３、崩れないようにテーブルで組んでみるか
あなたのページも、前項の現象が起きてきたことはありませんか。画像の周囲に｢回り込み｣などというテクニックを使い初めると問題が発生してきます。
写真が重なったり、位置がずれたり、文章が写真の下敷きになったり、うまい位置になかなか写真を配置できない、これが悩みの種になってきます。
それを回避するには、縦横、桝目に区切ったテーブル＝表組みでやってみるとという方法もあります。
この方式は単純ですが、写真とテキストが重なり合わないという利点があります。
ごく稀にトラブルが発生します。１桝だけのテーブル、この中に画像とテキストを同居させた時、画像とテキストが極端に不釣合いな場合です。
これを回避するにはこのようにします。
通常は <TABLE> これを <TABLE
width=100%> と補正してください。
これで、どうにか見えるようになります。
ううむ、600*800 では効果がありませんね。1024*768 なら有効なんですがね。極端な使い方は避けることですね。
４、さらに達者になってくると、だんだん難しくなってきます。
スタイルシートを使ってみました。
写真とテキストの分量がマッチしていないから、こんなことになるんです。写真がでかいのに文章が少ない。
ならば、文章部分を水増しすればいい、もう少し大きなフォントを使ってみましょう。行間を空けてみましょう。
ネットスケープはどうもフォントがちいさい、最初から大きなフォントにしてやればいい。インタネットエクスプローラは割合に大きなフォントになりますが、字が大きいほうが眼に優しい、構うものか、これで行ってみよう。
サンプルはこれ、初詣で、愛宕山 この時期からスタイルシートを使い始めています。
行間を広げるには、このタグを<HEAD>と</HEAD>の間に入れてみましょう。
この場合は、通常の２倍に行間を広げています。150%、180%、いろいろ試してご自分の感覚に合うようにしてください。
<STYLE><!--BODY{line-height : 200%;}
--></STYLE>
スタイルシートで最も有効なのは行間を広げることです。
ところが、テーブルの中まではこの宣言が有効ではありません。テグチを変えましょう。
このページのソースを見てください。
BODYの代わりに.honbun と指定して置きます。それを受けて、テーブル内のテキストそれぞれに
<P class="honbun"></P.
<BLOCKQUOTE class="honbun">
<TD class="honbun"></TD>
と、指定を受けています。
用例は寺子屋のあちこちにばらまいてあります。探して見てください。
この数日で初めて発見したテグチです。
追加します。
テキストとテーブルが同じページにある場合、どうしたらよいでしょう。
同居させてしましょう。
<STYLE><!--BODY{line-height : 200%;}
--></STYLE>
<STYLE><!--.honbun {line-height : 200%;}
--></STYLE>
このように、ページの頭で宣言しておいて、テーブルの記述タグに
class="honbun" と指定を行います。
５、もうちょっと手の込んだ方法 JavaScriptを使ってみよう
250*187 という寸法の写真を使うから、無理がある、150*113のサムネイルの写真を使ってみたらどうだろう。
サムネイルから大きな写真にリンクさせてやればいい。
'99六甲全縦大会 大量の写真があるので、大きな写真を並べるのは無理です、サムネイルの写真にしました。
最初にJavaScriptを宣言しておきます。
<SCRIPT langage="JavaScript">
<!--
var n;
var w;
function winopen(){
w=window.open("rokkoh99/991114-"+n+".jpg","Image","width=420,height=310");
}
//-->
</SCRIPT>
次に、それを受ける対象
<A href="JavaScript:n=1;winopen()"><IMG
src="rokkoh99/991114s-1.jpg" width="150"
height="113" border="0"
hspace="7" vspace="7"></A>
ｎ の数字とjpg画像の変数字は一致しています。変数ｎ は、対応した画像を呼び出します。
ここでは、同じディレクトリの大きな写真を呼び出します。ただし、開く画面は"width=420,height=310"の制限をしています。
このポップアップの方法は、また別の項目で詳しく述べます。そこでは、大きな写真のＵＲＬを呼び出す方法を取っています。
|
