Dreamweaverの使い方

おそらく”Dreamweaver マップ”で検索している人は、ホットスポットの事を知りたいのだと思うのですが、ホットスポットのページと重複してしまうので、Yahoo地図とGoogleマップの事について書きます。

DreamweaverでYahoo地図を表示

①Yahoo地図のページを表示
http://map.yahoo.co.jp/
②自分のWebページに表示したい地域を選択
③右上のURLボタンを押し、地図の表示用タグをコピー
④Dreamweaverのコードビューに張り付け
⑤ライブビューで確認
デザインビューでは正しく表示されないので注意しましょう。
⑥ブラウザで確認

DreamweaverでGoogleマップを表示

①Googleマップのページを表示
https://maps.google.co.jp/
②自分のWebページに表示したい地域を選択
③画面左上のリンクボタンをクリックした後、[ウェブサイトへの地図埋め込み用 HTML コード]をコピー
④Dreamweaverのコードビューに張り付け
⑤ブラウザで確認
デザインビューとライブビューでは正しく表示されないので注意しましょう。

テーブルの背景画像を指定する方法について書いていきます。

テーブルの背景画像を指定する方法

HTMLだけで指定するのならbackground属性で指定します。

<table width=”600″ height=”100″ background=”gazou1.jpg”border=”0″ cellspacing=”10″ cellpadding=”0″>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

CSSで指定するならbackgroundプロパティです。

table {
background: url(gazou1.jpg);
}

特定のテーブルだけ画像を表示したい時は、tableタグでなくクラスで指定すると良いでしょう。

なお画像サイズはテーブルと同じサイズにするか、テーブルを画像サイズと同じようにすると、ページの読み込みスピードと画質が最適化されお勧めです。

セルに白い色を付けて、テーブル枠だけ背景画像を表示するようにすると、独特の効果となります。

テーブルの罫線の見え方を変える手法について紹介します。

テーブルの枠線を消す方法

ソースの例

<table width=”600″ border=”0″ cellspacing=”0″ cellpadding=”10″>
<tr>
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
<tr>
<td>テスト</td>
<td>テスト</td>
<td>テスト</td>
</tr>
</table>

borderとcellspacingを0にするのがキーポイントです。
本当はテーブルタグにCSSのプロパティを設定するのが良いでしょう。

テーブルの枠線を太さ1ポイントにする方法

ソースの例

<table width=”600″ border=”0″ cellspacing=”1″ cellpadding=”10″ bgcolor=”#33FF66″>
<tr>
<td bgcolor=”#FFFFFF”>テスト</td>
<td bgcolor=”#FFFFFF”>テスト</td>
<td bgcolor=”#FFFFFF”>テスト</td>
</tr>
<tr>
<td bgcolor=”#FFFFFF”>テスト</td>
<td bgcolor=”#FFFFFF”>テスト</td>
<td bgcolor=”#FFFFFF”>テスト</td>
</tr>
</table>

bgcolorで色を変更できます。

ホットスポットとは、画像の一部分に、長方形・円形・多角形などの領域を設定してリンクを張る事のできる機能です。クリッカブルマップと呼ばれる事もあります。

ホットスポットの使い方

①デザインビューで画像を選択します。
②プロパティインスペクタの下半分に、マップと書いてあるパネルが現れます。
プロパティインスペクタが上下2段にならない時は、右端の何もないグレーの場所をダブルクリックしてみましょう。
③長方形ホットスポットツールまたは円形ホットスポットツールまたは多角形ホットスポットツールのボタンを押し、画面上でドラッグまたはクリックしましょう。
失敗したらCtrl+Zキーなどで少し戻りましょう。
④領域を設定し終わるとプロパティインスペクタの上段に、ホットスポットと表示されるので、リンクなどを設定しましょう。

ソースの例

<img src=”gazou1.jpg” border=”0″ usemap=”#Map” />
<map name=”Map” id=”Map”>
<area shape=”rect” coords=”93,64,201,145″ href=”#” />
</map>

mapやareaなどのタグが、コードビューに追加されている事がわかります。

フォントについて書いていきます。

フォント選び

デザインソフトなど一般的に必ずしも持っているとは限らないソフトについてきたフォントはWebページのフォントには指定しないほうがよいでしょう。デザイナーが意図した表示と異なる表示となりやすいからです。ブラウザの設定でデフォルトフォントが優先される場合もありますし。指定するなら明朝系やゴシック系などが基本かもしれませんが、指定しないのも一つの方法です。

どうしても特別なフォントを使いたい時は

どうしても特別なフォントを使いたい時は画像化して張り付けましょう。

Dreamweaverのバージョンアップとフォント

ブラウザのスタイルシート対応が良くなった近年、フォントの指定はHTMLからCSSに変わってきました。HTMLで指定したほうが画面の遷移が少なくてページの少ないうちは楽なので、HTMLの方法も残してくれてもいいような気もするのですが、プロユースのDreamweaverでは生産性や検索エンジン対策や表示環境の多様化などの理由からCSSに移行せざるを得ないのでしょう。

アセットパネルではイメージ・カラー・URL・FLASH・Shockwave・ムービー・スクリプト・テンプレート・ライブラリを管理する事ができます。ここでは使用頻度の高いイメージ・テンプレート・ライブラリの使い方について簡単に紹介しておきます。

イメージの使い方

イメージボタンを押して、サムネールを確認し、デザインビューにドラッグアンドドロップするだけです。

テンプレートの使い方

・テンプレートの作り方
①テンプレートにしたいHTMLファイルを開きます。
②[ファイル]メニュー-[テンプレートとして保存]でファイル名を指定
③Templatesフォルダに拡張子dwtのテンプレートファイルが作られます。
・テンプレートからHTMLファイルを作る方法
①アセットパネルのテンプレートボタンを押します。
②テンプレートを選択
③右クリックメニューの[テンプレートから新規作成]を選択
④HTMLファイルが作られます。

ライブラリの使い方

・ライブラリの登録方法
①アセットパネルの左下のライブラリボタンを押します。
②コードビューでライブラリにしたいソースコードを選択します。
③ライブラリ右下右から3番目の+マークの付いた新規ライブラリ項目ボタンを押します。
④ライブラリの名前を付けます。Libraryフォルダに拡張子lbiのファイルが作られます。
⑤lbiのファイルを変更する事でライブラリを組み込んだHTMLファイルが同時に更新されます。
・ライブラリからコードを持ってくる方法
①コードビューでライブラリのコピー先をクリックします。
②ライブラリの一覧からライブラリを選択しアセットパネル左下[挿入]ボタンを押します
③コピーされます。

アセットパネルが表示されない時

[ウィンドウ]メニュー-[アセット]にチェックを入れましょう。
それでもだめならワークスペースを初期化しましょう。

罫線を引くのは横罫線を除いて面倒です。実装したらさまざまなブラウザで表示を確認するのを忘れずにしましょう。レイアウト崩れの発生する予感があるので。
それでは、罫線を引く方法をいくつか紹介します。まだほかにも方法はありそうですが、簡単に思いつくのはこれくらいかもしれません。

テーブルのセルのborderプロパティで色と線種を指定する方法

テーブルのセル間隔を0pxにするのを忘れずに
きっちり決まった位置関係で表示される可能性が高いです。

画像を張り付ける

floatを使って文字を回り込ませるのも良いでしょう。
この方法はCSSで複雑な設定をするより罫線が同じように表示される可能性が高いです。

ブロック要素のborderプロパティを利用

paddingを指定してオブジェクトとborderの線との間隔を指定しましょう。
小見出しなどの文字の上下左右に線をつけたい時によく使われます。

横罫線なら区切り線

段落の区切りに<hr>タグを置いてみましょう。
これは簡単です。

テーブルに色付けする際に参考となりそうなサンプルを載せておきます。

幅1pxの線のテーブルを書く方法

table {                       /*テーブルタグについて指定*/
border-collapse:separate; /*ボーダーを分離して表示*/
border:0px;               /*ボーダーを0ピクセル*/
border-spacing:1px;       /*セル間隔を1ピクセル*/
background-color:#00ff00; /*背景色を緑にする*/
}
td,th {                       /*通常セルと見出しセルについて指定*/
padding:5px;              /*セル余白5ピクセル*/
border:0px;               /*セルボーダー0ピクセル*/
background-color:#ffffff; /*セル背景色を白*/
}

テーブルとセルのボーダーを0pxとし、セル間隔の場所のみ緑色の色を付けています。
セルは通常の背景と同じ白でテーブルに上書きしています。
このCSSコードは、カラーコードを変えるだけで自在に使えます。

リンクの色について書いていきます。

画像のリンク枠を消す方法

画像をリンクとした時、枠にリンク特有の青い矩形が表示される事がありますが、CSSを使って見えなくする事が可能です。IEで青い枠が表示されるケースがありました。
・HTML

<a href=”#”><img src=”gazou1.jpg” /></a>

・CSS

img {
border-style:none;
}

文字のリンクを設定する方法

リンクは疑似クラスで設定します。なお、指定の順番が大事です。
a:link    //訪問前リンク
a:visited    //訪問済みリンク
a:hover        //リンク上にマウスカーソルを重ねた時の表示
a:active    //リンクをクリックした瞬間の表示
の順で設定します。

CSSの例

a:link {
color:#00ff00;
}

アンダーラインを消したい時は

text-decoration:underline;

を付け加えます。

ロールオーバーイメージにも注目

[挿入]パネル-[一般]カテゴリ-[ロールオーバーイメージ]を選択すると[ロールオーバーイメージの挿入]ダイアログが表示されます。ここで元のイメージとロールオーバーイメージに画像ファイルをそれぞれ登録すると、マウスカーソルを画像に重ねた時にぱっと切り替わるオブジェクトが作れます。リンクも設定できます。グラフィカルなサイトを作る時には使えるかもしれないテクニックです。