ホームページを作られる方をサポート致します

DreamWeaverの使い方B

 テーブルレイアウトについて

さて、今回はテーブルレイアウトの基本をご説明しましょう。
奥までは入りません。何故なら、初心者でも初めの一歩さえ踏み出せれば、すぐに何でも作れるようになります。
(私自身全くの初心者でしたがテーブルを作れる様になってすぐにレイアウトが組めました。)

コツがわかれば自然と奥に入っていくことになりますし。
そんなに何から何までレクチャーする必要はないと思っています。
あとは知識です。こればかりは自分で身に着けなければなりませんが・・・。

幸い、現在はWEBというものがあります。
わからなくなったり、一味変わった技を求めるなら、検索すればたくさん出てきます。
これらを解読し、自分のものにしたとき、そのときにはもう自分で技を生み出せるレベルになっています。

例えその技がすでに生み出されているものでも。
要は初めの一歩を踏み出そうとしている人たちの背中を軽く押してあげるだけでいいのです。

さて、このページで説明したやり方が入れ子入れ子・・・になり、複雑なページができあがります。
入れ子と言うのは、例えばテーブルがあったとしますよね。

そのテーブルの中にはセルが2行2列あります。
つまり4つです。
その4つのセルの中にそれぞれ更にテーブルが配置されています。
そしてそのテーブルは同じくセルを4つもっています。
そのテーブルの中のセルにもそれぞれテーブルが入っています・・・・みたいな感じのことです。
ただし、テーブルを使うとものすごく複雑な組み方になることが非常に多いのでテーブルの乱用は控えてください。

もともとテーブルというのはそんなに使い勝手のいいものではありません。
しかし、Dreamweaverなどのソフトがサポートしているおかげで私たちは簡単にテーブルを作成し、レイアウトにも組み込むことが出来ます。

節度をある程度守っていれば・・・と私は思いますが、手軽さ故に初心者はテーブルを乱用しがちになってしまいます。
テーブルを乱用してしまうと、更新しづらくなる上に、非常に重いページになってしまいますのでご注意ください。

先に言いますが、これからつくるページにコンテンツはありません。
目的はあくまでテーブルでレイアウトするということなので。ご了承くださいませ。

DreamWeaver例題


▲のようなページを作ります。

ちなみにこれはphotoshopで作った直後の画像です。
右下の部分には何も入ってませんが、後で入れます。

各自でページ解説とか写真など好きなものを入れてみてください。

ベースとなるのはこの画像の枠組みだということです。
このページはただセルを分割や結合、画像の挿入をするだけなので非常に簡単だと思います。

ではまず新規ページを作成し、保存してください。
名前は何でもいいですが、ここではindex.htmlで進めていきます。
まずはテーブルを作る前に、配置するオブジェクトを中央に配置するように指定しましょう。
プロパティなどのパネルが収納されている所のすぐ上にあるバーを見てください。

<body><table>などと書かれているでしょう。
ここの<body>をクリックしてください。するとbody全体が選択されます。

プロパティビュー


選択し終わったら、上の画像を参考として見てください。
中央揃えと書いているのがわかりますか?
ワードなどでも似たようなアイコンが使われてますよね。
この四つ並んでるアイコンの中から左から二つ目のアイコンをクリックしてください。
すると、bodyに置いたものはすべて中央に配置されます。

テーブル作成

では、下準備が終わったところで実際に作りこんでいきましょう。
上部メニューバーの下にあるテーブル作成のアイコンをクリックしてください。

列、行共に0、幅を750と入力してください。
その他はデフォルトのままでOKをクリック。
テーブルが作成されましたね。

前回テーブルを作ったときは作成の段階でセルがいくつか出来ていましたが、今回は後から追加していくやり方で進めていきます。

セルの追加 セルを追加する方法はもちろん一つではありません。
いくつかご紹介致しましょう。

[Ctrl]を押しながら、テーブルの中をクリックしてセルを選択してください。

右クリックから挿入

上部メニューバーから挿入

[Ctrl+m]で行の挿入

[Ctrl+Shift+a]で列の挿入

[Ctrl+Alt+s]で、セルの分割

などなど、色々なやり方があります。
私が良く使ってるのは下の3つですけどね。
ちなみに行を追加したいとき、そのターゲットとなるセルを選択し、[Ctrl+m]で挿入すると元々そのセルにあったオブジェクトは新しくできたそれよりも下になります。
また、セルの分割を使った場合は逆になります。
などなど、これに限らず、各機能の癖を把握することによって無駄な手間を省き、効率を上げることが出来ます。

※初心者の方はこの意味がわからなければ、さほど気にする必要はありません。
別ページにも書きましたが、Dreamweaverをいじり倒すくらい使い込んでいれば自然とわかってきますよ。

それではどの方法でも構いませんのでやってみてください。

ここまででテーブルレイアウトの基本は終わります。
後は私自身も勉強中の身なので、ですがここまでの説明で基本になるレイアウトは組めます。
デザインに関しては個人の感性によって様々なので、そこからは色々なサイトを見てデザインを参考にするのが良いと思われます。


注目サイト

楽天市場
←BACK/↑TOP

ホームページ作成コンテンツ
CopyRight(c) Homepage - Ya.info Allrightreserved