ホーム>Web デザインのチュートリアル>Dreamweaver チュートリアル

DreamWeaverテーブルの魔法の使い方 ～ワイヤーフレーム制作の詳細解説(1)～

著者：Eve Cole 更新時間：2009-05-30 18:36:28
DreamWeaver では、Web ページのレイアウトやコンテンツの配置にテーブルがよく使用されます。実際、テーブルはこれらの「大きな機能」を応用するだけでなく、さまざまな柔軟な方法によって、一般的には設計では実現が難しい多くの効果を実現することができます。次に示す「ワイヤーフレーム」の制作がその好例です。もちろん、その賢い使い方はそれだけではありません。


「ワイヤーフレーム」オブジェクトは、細い線やボックスなど、Web ページでよく見られます。特定の効果を調整して生成するには、「ワイヤーフレーム」の変更が不可欠です。ただし、多くの主流の Web デザイン ツールが比較的単純で簡単なワイヤーフレーム作成機能を提供していないのは残念です。この場合、他の要素を使用して間接化を実現することが特に重要です。


1> 細い横幅ラインの作成


まず、ここでの「横方向に細い線」という概念を皆さんに理解していただく必要があると思いますが、この「細さ」には非常に重要な点が反映されており、それを実現するために表を使用する必要があります。


Web デザインに触れたことのあるネチズンは皆、HTML (ハイパーテキスト転送言語) に

マーク、このマークは「水平線」オブジェクトを作成するために使用されます。そうすると、水平線は単なる細い線ではないでしょうか?それを行うためにテーブルを使用する理由は何でしょうか?


実際、水平線は、バナーや垂直効果などの線を作成するために使用されます。しかし、現在のアプリケーションから判断すると、水平線は私たちが必要とする細さ、つまり高さ = 1 ピクセルの実際の効果を達成できません。


以下は、水平線で作られた細い線のイラストのセットです。






最初の 2 つは明らかに粗く見えますが、後者は [プロパティ] パネルで手動で高さ 1 に設定されており、明らかに要件を満たしていません。水平線の色を変更したい場合は、次のようにします。ソースコードにアクセスする必要があります。これは、medium でのみ実現できますが、あまり便利ではありません。上記を理解した後、テーブルを使用してより良い結果を得る方法を見てみましょう。


「オブジェクト」パネルの「表」アイコンをクリックするか、メニューの「挿入」→「表」を選択して、高さと幅が1の表オブジェクトをWebページ内の適切な位置に挿入します。写真のように
関連記事