商店主さん向けHTMLセミナー
windows95&Internet Explorler準拠

Chapter 6 Part.1


商用テーブルの基礎知識!

 さて、今日の講習の前に、ちょっと復習してみましょう。 画像がでなくて、お困りの方もいることと思いますので..

今のshopフォルダの状態はこのようになっていますか? もう一度確認してください。Chapter1で説明しましたように、 index.htm以外は目的別、種類別にフォルダをわけて、その中にファイルを格納しています。

★imagesのフォルダを開けると、 kanaban.gifとshohin.gifの2つの画像ファイルが、正しく格納されていますか?
★shohinがsyohinになったりスペルが間違えていませんか。
★IMG SRC="images/shohin.gif"の後の"が抜けてはいませんか

ここで何通か質問メールがきていますのでお応えしておきます
★どうしてHomepage Filesというフォルダをつくって、その中に更にshopというフォルダをつくるのですか?
Chapter1でもかきましたように、このHomepage Filesには(名前はどんな名前でよいのですが..) あなたがWEB SHOP造りのために作成したもの(ドキュメント)、ダウンロードしたフリー画像素材などをここに保存 しましょう。そしてまめにバックアップしましょう。

変な喩えですが、あなた天災にあって避難せねばならない時に、 ビデオテープを持ち出しますか?ビデオデッキを持ち出しますか?答えは明確ですね。デッキは買い直せても、 テープは取り戻せないですからね。同じことがいえます。 アプリケーションは何度でも再インストールできますが、あなたの作成したもの、つまり「ドキュメント」は 消失したらとりかえしようがありません。そのような「ドキュメント」をあちらこちらに散在させず、 ひと纏めにしておいたほうがバックアップもしやすいのです。

また、その中にshopというフォルダを作成する理由は、将来サーバーにアップロードしていく時に あなたのPC内(ローカル)と先方のサーバーとを比較しながら作業する必要があるため、 お店全体のサイズを常にチェックする意味からも、 サーバーとまったく同じファイル状態をそこに作成しておくことが得策であるからです。 つまり、サーバーにおいてあるもののみが、このshopフォルダにあり、 あらたにshopフォルダ内にいれたものは、ただちにサーバーに置きにいく!という戦法です。

私が一番悩んだFTP転送についても、ちゃんと講習カリキュラムの最終でご説明しますので、 ご安心ください


★どうして宮武さんはメモ帳にこだわるのですか?HP作成ソフトを使うのはだめなんですか。
はい、私は常々、遠回りが実は一番最短距離である!と考えてます。 メモ帳でいちいちひらいて自分の手でうつのは大変な作業です。しかし、これに慣れれば、 どんなHP作成ソフトでも簡単に使いこなせると思いますし、作成ソフトで対応していない 独自のレイアウトを編み出すことができます。

自慢ではありませんが、私は街じゅうの風景のレイアウトを瞬時にHTMLに置き換えて想像することができます。 ビルの窓の配置、額にはいった絵画、流れる電光掲示板、喫茶店のメニュー、そばやのおしながき、 公園の木々とごみ箱の配置、前を歩く人の趣味の悪いTシャツの色、記念写真で後から挿入した欠席者、 店舗の天井の照明、つまりどんどんどんどん、HTMLを日常生活と同化していこうと努力してます。

なにも知らないでオートマの車を運転するのと、ちゃんと車体構造を理解し、 性能を把握し、ミッション車も経験した人が同じ車を運転するのとでは、 全然車の世界のひろがりと安全度が違ってきます。私はメモ帳で苦しんでタグをうち込むことによって、 作成ソフトに依存しない、確かなHTML知識を得ることを、この講座の趣旨としています。 どうしてもHTML作成ソフトがないと駄目だ!という方はどうぞ、ここで受講をお止め頂いても結構ですが、 私は決して、そのようなソフトを否定しているわけではありません。 将来、そういったソフトを200%使いこなす強靭な足腰を養成しよう!としているわけです。


★どうしてshopの中に色々フォルダをつくる必要があるのですか?
はい、小規模な店舗なら別にフォルダを作成しなくてもいいでしょう。事実そうしている方も 沢山いらっしゃいます。でも、これは私の経験からいえることですが、 ファイルが星の数ほどふえてしまってから「しまった」と感じて、あわててフォルダを作成して 整理しなおすと、パス名(これは後日、詳細に説明します)を全部一から書き直さねばならず、 想像を絶した労力がいるのです。最初から「大きく」することを前提に、 ちゃんとファイルの種類別にわけてフォルダ整理しておくことは、WEB SHOPとして成功には欠かせない必須条件となるのです。 今はまだ、その意味がわかりにくいかもしれませんが、将来きっとご理解いただける事でしょう

★フォルダ以外に、単独のファイルはindex.htmだけにするのですか?
いえいえ、そうではありません。第一階層とよばれるここの部分に、 将来色んなトップページ形態のものを作成するのです。ちなみに私は sandan.htm(三段かさ)parasol.htm(日傘)plaza.htm(ジャンプ傘) summer.htm(お中元)mshop.htm(マフラー)mother.htm(母の日) 等のページをこの第一階層に置いており、これらすべてをサーチエンジンに登録しています。 YAHOOなど一部の検索サイトをのぞいては、これはちゃんと別々の項目に登録されますし、 非常に重要な手段となります。ここから放射状に必要なファイルにリンクをかけていくのです。

ちなみにindex.htmというのは、つまりあなたの店の「玄関」のことです。 ○○さんの家を訪問しようとすれば、かならず玄関から入りますよね。 窓から入るのは泥棒ぐらいです(笑)他にトップページをもつ!ということは、 つまり勝手口や裏口を増やして、入りやすくする感覚ですね。


★昨日までの講習分で、どこか記述をまちがえてしまっています。間違いが自分でなかなか探しにくく、 先へすすめないのですが
僕の紹介したデータを一生懸命慣れないタイピングで タグを手打ちしてられるわけですから、仕方がないです。ドンマイドンマイ! はいはい、では奥の手をご紹介します。下のメモ帳の画面の <HTML>から</HTML>の部分すべてをよっこらしょ!と マウスでひっぱって選択、反転させてください。全部にラインマーカーをぬる要領ですね。
index.htm-メモ帳
ファイル(F) 編集(E) 検索(S) ヘルプ(H)
<HTML>

<HEAD>
<TITLE>ACLUB ホームページ </TITLE>
</HEAD>

<BODY BGCOLOR="#FFFAFO">
<CENTER>

<H1>
<IMG SRC="images/kanban.gif"WIDTH="100"HEIGHT="100" ALIGN="middle">
<FONT COLOR=red>ようこそAClubへ</FONT>
</H1>

<IMG SRC="images/shohin.gif" WIDTH="250"HEIGHT="171" ALIGN="right">

<TABLE BORDER=0><TR><TD>
<FONT COLOR=green>
私達はまごころで商売をしているAClubです!<BR>
よろしくお願いします!<BR>
送料、振込料はもちろん当社負担です<BR>
お客様のリクエストには全力でお応えいたします!<BR>
まず、我々の素晴らしい商品の数々を<BR>
とくとご覧くださいませ!<P>

webmaster:山田一郎
</FONT>
</TD></TR></TABLE>

<BR CLEAR="all">

</CENTER>
</BODY>
</HTML>

 反転できましたか?次にCtrlを押しながらCを押します。これで 一時預かり所である「クリップボード」という所に、この部分のデータがコピーされました。

貼り付けの極意

 次に問題のindex.htmをメモ帳でひらいてみます。 IEでひらいてソースを表示させてもいいでしょう。
そして、編集(E)から、すべてを選択(A)を選択すると、 全文が反転します。

実は、これをDELITEしてから貼り付ける必要はありません。 反転したままで、編集(E)から、(または右クリックから)貼り付け(P)を選ぶと、 さっき「クリップボード」に預かってもらっていたデータが交代にでてきます。 つまり「貼り付け」は不要な部分のカットと必要部分の貼り付けを両方兼ねてやってしまうのです。

 もし、間違えた場合は、編集(E)から、(または右クリックから)元に戻す(U) をえらべば、元に戻りますし、上書き保存した後でも、一番最近の貼り付けに限り、元に戻ります。 焦らない焦らない。

 これで今現在の講習データが正確にindex.htmに保存されました。
以降、もしデータ記述ミスがあれば、この方法でトライしてみてください。
あくまでも、手打ちで間違わないのが一番ですが


そして、上書き保存して、index.htmをIEで開いてみます。 どうですか、ちゃんと表示されたでしょう?!

A CLUBホームページ-Microsoftインターネットエクスプローラ
ファイル(F) 編集(E) 表示(V) 移動(G) お気に入り(A) ヘルプ(H)

ようこそAClubへ

私達はまごころで商売をしているAClubです!
よろしくお願いします!
送料、振込料はもちろん当社負担です
お客様のリクエストには全力でお応えいたします!
まず、我々の素晴らしい商品の数々を
とくとご覧くださいませ!

webmaster:山田一郎


⇒次へすすむ

kasaya.comBACK HOME