商店主さん向けHTMLセミナーwindows95&Internet Explorler準拠
|
商店主さん向けHTMLセミナー windows95&Internet Explorler準拠 |
Chapter 10 Part.1
テーブルといえば、すぐ枠に囲まれた表組みを思いうかべてしまいますが、
商用ページの実際の現場では、テーブルに見えないテーブルが棚立てのポイントに
なっています。そのいくつかをご紹介しましょう！準備としては、shopのpageフォルダに新規にtestフォルダをつくり、その中に例によって、 右クリックから、新規テキスト文書.txtをつくりましょう。そして
| C:\Homepage Files\shop\test\test01.htm-Microsoftインターネットエクスプローラ | |
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| |
|
最も基本的な商用テーブル技です。1×1のテーブルに着色して、１行のコメントをいれる感覚。 ちょうどマーカーペンで文字をなぞったような効果がえられます
| ■test01.htm-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
<BODY BGCOLOR="#FFFAF0">
<TABLE><TR><TD BGCOLOR=orange> </BODY> |
| C:\Homepage Files\shop\test\test02.htm-Microsoftインターネットエクスプローラ | |
|
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| |
|
上の応用技になります。大きめのフォントや、長めの文章が入るとより効果がでます。 私はTABLEのあとに、WIDTH="100%"として、ブラウザの横幅いっぱいにエリアを広げて 使用するのが好きです。A HREF〜/Aで囲まれた部分（青文字）がリンク扱いになります。 閉じタグを間違ったり、入れ忘れたりすると、永遠にリンクがかかります（笑）ので 要注意です！
| ■test02.htm-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
<BODY BGCOLOR="#FFFAF0">
<TABLE WIDTH="100%"><TR><TD BGCOLOR="#AABBAA"> </BODY> |
| ■test03.htm-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
<BODY BGCOLOR="#FFFAF0">
<TABLE BORDER=3 BGCOLOR=orange><TR><TD>
<TABLE BORDER=3><TR BGCOLOR=orange><TD>
<TABLE BORDER=3><TR><TD BGCOLOR=orange>
<TABLE BORDER=3 BORDERCOLOR=red><TR><TD BGCOLOR=orange>
<TABLE BORDER=3><TR><TD BGCOLOR=orange> </BODY> |
| C:\Homepage Files\shop\test\test03.htm-Microsoftインターネットエクスプローラ | |||||
|
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| |||||
|
| C:\Homepage Files\shop\test\test04.htm-Microsoftインターネットエクスプローラ | |
|
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| |
|
上の傘の画像部分にカーソルをあてて、右クリックの「名前をつけて保存」で以下の場所に保存してください。
Shop⇒photo⇒kasayaフォルダ(新規作成）にblue.jpgとして保存！
では、testのフォルダに戻って、メモ帳のファイルに（今までと同じように）以下のデータをはりつけて、 test04.htmとリネームしてブラウザで開きましょう。1×1テーブルの中にすっぽりと商品を収める感覚ですね。 外枠は10ぐらいが適当でしょう。 ここで注意すべきは、ＩＥでは記述しなくての大丈夫なのですが、 ＮＮでは赤字の部分がなければ、若干余白が残ってしまうという点です。 完璧にいこう！と思う人は写真のサイズと同じサイズをTDにも記述してください。
| ■test04.htm-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
<BODY BGCOLOR="#FFFAF0">
<CENTER>
<TABLE BORDER=10 ><TR><TD WIDTH="380" HEIGHT="380"> </BODY> |
僕は心斎橋で営業している時、傘を陳列したあとに プライスボードを綺麗につけるのが、とっても好きでした！ 心斎橋のお店を失ってサイバーショップになってからも、なんとかこの楽しみを維持しようと、 独自のプライスボードを作成しました。回転式の感じがよく出ていて、とても気にいっています！ よかったら御使いくださいませ
まず以下の数字全てを次の場所に保存してください
Shop⇒priceフォルダ（なければ作成）に0〜9.gifとyen.gifとして保存！
yen.gif
0.gif
1.gif
2.gif
3.gif
4.gif
5.gif
6.gif
7.gif
8.gif
9.gif| C:\Homepage Files\shop\test\test05.htm-Microsoftインターネットエクスプローラ | |||||||||||
|
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)
| |||||||||||
|
|
考え方としては、\3900のほうは1×5,\12000のほうは1×6のテーブルにプライス画像を隙間なく 貼り付ける感覚です。ひとつの画像が22×28ですので、4桁では110×28,5桁では132×28になることを 理解してくださいね。ALTを記述しておく理由は、もし何らかの原因で画像が壊れたり非表示になった場合も 値段がわかるようにする為です。
| ■test05.htm-メモ帳 |
| ファイル(F) 編集(E) 検索(S) ヘルプ(H) |
|
<BODY BGCOLOR="#FFFAF0">
<CENTER>
<TABLE BORDER="5" WIDTH="110" HEIGHT="28">
<TR><TD>
</TD></TR>
<TR><TD>
</CENTER> </BODY> |
| なぜ shop/page/test/test**.htmなのか |
私もある程度「お店造り」をしてからコンセプトをかためたのですが、 商品説明＆掲載ページは必ずkasaya/page/***/**.htmという パス名にしています。重要なのは、何番めの階層か？！ということを固定しておくことです。 こうすれば、色々な画像ファイルや他ファイルへの階層リンクがそのまま有効になるというメリットがあります。
例をあげれば、（ファイルの種類／カテゴリー／ファイル名）ということで必ず３番目の階層に固定しておくと、 それは例えば別のカテゴリーの部分にコピーしたとしても、そのまま「ひな型」として使用できるわけです。 これが一定していないと、いちいちパス名を../../から、../に書き直さないと画像がでなかったりするのです。
そのうちShopの中は蜘蛛の糸のような構図になってきます。これを整理する意味からも かならず商品ページの階層を固定することを強く推奨します！
BACK HOME