Dreamweaverの使い方

mapについて

dreamweaverでmapと言えばホットスポットツールの事でしょう。クリッカブルマップともイメージマップとも呼ばれます。さすがにこれはHTML直打ちはしんどいのでdreamweaverにコードを作ってもらいましょう。

ホットスポットツールの場所は？

画像を選択するとプロパティインスペクタの下段の左下にボタンが3つ並んでいます。長方形・円形・多角形のマークの付いたボタンです。ボタンを押して画像上でドラッグ（長方形・円形の場合）またはクリックを数回(多角形)して領域を指定します。
[挿入]パネルの[一般]カテゴリ-[イメージ]から[矩形ホットスポットの描画]・[楕円ホットスポットの描画]・[多角形ホットスポットの描画]ボタンから選ぶ方法もあります。画像上にマウスカーソルを持っていくとカーソルが十字になります。そこで領域を設定します。

リンクの設定

領域を設定・クリックで選択するとプロパティインスペクタの上段にホットスポットと表示されるのでリンクを設定します。

座標を拾うツールとしても使えるかも

コードビューでmapのタグを見るとareaのcoord属性に座標が書いてあります。多角形の時は1点目のXY,2点目のXY..以下続くとなっているので使える場合があるかもしれません。

背景

Dreamweaverで背景といえば、背景色か背景画像を指す事が多いでしょう。

背景色の設定

・HTMLで指定

<body bgcolor=”#00ff00″>コンテンツ</body>

・CSSで指定

body
{
background-color: #00ff00;
}

CSSならさまざまなタグ・クラスなどに背景色の設定をする事ができます。

背景画像の設定

・HTMLで指定

<body background=”gazou1.jpg”>コンテンツ</body>

・CSSで指定

body
{
background-image: url(“gazou1.jpg”);
}

こちらもCSSならbody以外にもいろいろなタグ・クラスなどに背景画像を設定できます。

背景画像の繰り返し

背景画像を繰り返すにはCSSでbackground-repeatプロパティを指定します。
選べる値
repeat 水平・垂直の両方向に繰り返し
repeat-x 水平方向に繰り返し表示
repeat-y 垂直方向に繰り返し表示
no-repeat 繰り返さず、1つだけ表示します
例

body
{
background-image: url(“gazou1.jpg”);
background-repeat: repeat;
}

グラデーションの画像を用意して繰り返す設定をすれば、背景のグラデーションをページに表示する事ができます。

外部リンク

外部リンクについて書いていきます。

外部リンクとは

外部リンクとはサイト外に移動するリンクの事を言います。通常HTMLのリンク先にはhttp://から始まるアドレスを記入します。

SEOについて

外部サイトから自分のサイトに数多くリンクを受けると自分のサイトの人気があるとサーチエンジンが評価する仕組みが昔はあったようです。ナチュラルリンクが特に効果があるといわれているのですが、人からリンクをしてもらえるコンテンツってなかなか作れないのですよね。外部リンクは昔ほどは重要ではなくなってきたのかもしれませんが。

リンクのHTMLタグ

<a href=”http://から始まるリンク先のURL”>リンク先の名前</a>

これが基本です。
新しいウィンドウを作ってリンク先を表示したい時は

<a href=”http://から始まるリンク先のURL” target=”_blank”>リンク先の名前</a>

というふうにtarget=”_blank”を付け足します。
リンク先の名前でもSEOに影響するらしいのですが、サイトタイトルを使うなど普通に表記しましょう。

画像の横に文字を表示

画像の横に文字を表示する方法についてです。

テーブルによる方法

①1行2列のテーブルを作ります。
ボーダー・セル内余白・セル内間隔を0にしておきます。
②右か左のセルに画像を張り付けます。
③画像の入ったセルの幅などのサイズを指定します。
④もう片方のセルに文字を入れていきます。
簡単な方法です。
ソースの例

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td width=”300″><img src=”gazou1.jpg” width=”300″ height=”200″ /></td>
<td valign=”top”>テスト文字列1<br/>テスト文字列2</td>
</tr>
</table>

HTML align属性で指定

これは古典的な方法です。
W3C非推奨の方法なので注意です。
ソースの例

<p>
<img src=”gazou1.jpg” width=”300″ height=”200″ align=”right” />
テスト文字列1<br/>
テスト文字列2<br/>
</p>

floatによる方法

例えばCSSで
画像にfloat:right;
文字にfloat:left;
と指定しても回り込みがなかなかうまくいきません。
ほかにもプロパティを指定しなくてはならないようですが、大変なのでテーブルの方法をお勧めします。

コードを整える方法

コードを整える方法について書いていきます。

XHTMLのクリーンアップ

[コマンド]メニュー-[XHTMLのクリーンアップ]を実行します。

ソースフォーマットの適用を使うには

①コードフォーマットの設定を行う
コマンドの場所は[編集]メニュー-[環境設定]-[コードフォーマット]カテゴリ
インデントのサイズ・種類・タブサイズや高度なフォーマットの[CSS]や[タグライブラリ]などを設定します。
②ソースフォーマットの適用を実行
[コマンド]メニューに[ソースフォーマットの適用]があるので選択します。[コードフォーマット]カテゴリで設定した内容がコードビューのコードに反映されます。部分的に適用したい時は、コードビューを適用したい所だけ選択し[コマンド]メニュー-[選択範囲にソースフォーマットを適用]を実行しましょう。

リンクチェックの方法

[ファイル]メニュー-[ページのチェック]-[リンク]を選択
リンクチェックを行うとプロパティインスペクタの下にリンクチェックパネルが表示され、エラー・成功などの結果が表示されます。エラーを直していけばリンク切れがなくなります。ただしすべてのチェックが意図したものになっているかどうかは人が目で見てチェックしていかなくてはなりません。

バリデートの方法

FirefoxのWebDeveloperアドオンを使う事で可能です。
[ツール]-[ローカルのHTMLファイルの検証]を実行。

背景色

背景色を設定する方法についてです。

背景色を設定する方法

・HTMLのみで設定

<body bgcolor=”#00ff00″>
コンテンツ
</body>

この方法で指定できる(タグを変える)のはbodyとテーブル・セルなどです。

・CSSでの設定

body
{
background-color:#00ff00;
}

セレクタ名をbody以外のタグ名にしても背景色を指定する事ができます。たとえばbodyの所にtableというセレクタにするとテーブルの背景色を指定する事ができます。fontでも大丈夫でした。クラスで指定するのも良いでしょう。

Dreamweaverのページプロパティ

Dreamweaverではプロパティインスペクタの下段で[ページプロパティ]というボタンがあり、そちらからもページの背景色を指定する事ができます。
[ページプロパティ]ボタンを押して、[カテゴリの外観(CSS)]からも[外観(HTML)]からでも指定可能です。背景色と書いてある所のカラーピッカーのスポイトカーソルより画面中の色を取得する事も、Webセーフカラーのパレットから色を選択しても、16進数カラーコードの直打ちでもOKです。

画像配置

画像配置で問題が起きた時、参考になりそうなキーワードを紹介します。

レイアウト崩れ

意図しないレイアウト表示を、ブラウザ上で確認した時に使えます。
widthの調整・オブジェクトを一時的に隠したりして原因を発見し、解決できるかもしれませんが。

float

CSSの設定がおかしい時、サンプルを探すのに使えます。
後ろの要素でclear:both;を忘れないように。

div

divタグの使い方を再確認したい時に使えます。
検索より、CSSやレイアウトの本の用語索引から調べた方が、確実なような気もしますが。

ホットスポット・クリッカブルマップ・イメージマップ

3つとも同じものを指すようです。
画像の中にリンクを作ります。

位置ずれ

レイアウト崩れに近いですが、微小の位置ずれも含みます。
これはネット向きかも。

コンテンツ中央表示

ページ全体を中央表示したい時のトラブルシューティングに使えます。

背景画像固定

テーブルやページの背景画像を固定する方法が調べられます。

イメージマップ

イメージマップとは画像に領域を設定し、その領域をクリックする事で、その画像の内容に関連したリンク先に飛んでいく画像の事です。クリッカブルマップやホットスポットとも呼ばれます。

イメージマップの設定は簡単

Dreamweaverでは、長方形ホットスポットツール・円形ホットスポットツール・多角形ホットスポットツールで設定が可能です。

ホットスポットツールを表示する方法

イメージを選択します。すると、プロパティインスペクタが上下2段になり下段マップパネル左下にボタンが表示されます。2段にならない時はパネルが折りたたまれているので、パネルの何もない所をダブルクリックして、パネルを2段に広げます。
[挿入]パネルからは、[一般]カテゴリ[イメージ]の長押しから、[矩形ホットスポットの描画]・[楕円ホットスポットの描画]・[多角形ホットスポットの描画]から選択する事もできます。

ホットポットツールの使い方

長方形・円形・多角形のボタンを押します。長方形ホットスポットツール・円形ホットスポットツールでは、画像上でドラッグ。多角形スポットツールは、何点かのクリックで範囲選択します。範囲選択した所の色が変わりますので、プロパティインスペクタ上段のホットスポットパネルでリンク先を設定します。リンクの直打ちでも良いですし、リンクの入力欄の右にある丸いマークをファイルパネルのリンクしたいファイルにドラッグ＆ドロップしてもリンクを設定する事ができます。

使い方

Dreamweaverは、様々な人の役に立つWebデザインツールです。どちらかと言ってプロ向けです。ほかのソフトと比べて慣れるまで大変ですが、マスターすれば宝の箱となります。

Webデザインのお仕事に

Dreamweaverは、Webサイトを作るプロ向けのオーサリングツールです。最新のWeb標準に準拠した美しいコードでWebページを作る事ができます。不要なコードをほとんど作らないので、SEO上でも優位です。スタイルシートでのデザイン設定が基本となっているため、メンテナンスが容易となっています。Web標準に忠実で、便利なコーディングソフトと言えるでしょう。

Webデザインの学習に

将来Webを使う仕事に就きたい人には良いでしょう。Dreamweaverの勉強をすると、HTMLやCSSの必要性がわかり、徐々に世界が広がっていきます。

Webデザインを趣味に

Dreamweaverの隅々まで使わなくても、CSSの挙動を知るだけでも楽しいものです。偶然新しい手法が見つかると楽しいものです。プロ向けのソフトを使えるだけでも、Webデザインが上達したと思えてうれしいですし。

リキッドについて

リキッドレイアウトについてです。

リキッドレイアウトとは

従来、Webページは幅などのサイズを固定し、パソコンの画面に収まるよう作られていました。近年ワイドディスプレーやスマートフォンの普及により、さまざまな画面サイズの環境からサイトを見るケースが増えています。見ている側からはレイアウトが崩れず、画面サイズに合わせて見やすい画面構成になっているリキッドレイアウトのサイトは良い印象を与えます。

お薦めは

リキッドレイアウトは管理が大変なので、固定幅レイアウトのほうが良いような気がします。サイトを見に来る人は書いてある情報を見に来るので、デザインより内容に注力したほうがいいのではと思います。ただ、私のサイトもそんなに内容のあるサイトでもないのですが。

リキッドレイアウトのひな型を作る方法

①[ファイル]メニュー-[新規]で[新規ドキュメント]ダイアログを表示。
②[空白ページ][ページタイプ-HTML][レイアウト-リキッド]でひな型を作れます。