Dreamweaverの使い方

画像位置について、あまり使わない機能を紹介します。

AP Divを描画

[挿入]パネル-[レイアウト]カテゴリー-[AP Divを描画]を選択し、デザインビュー上でドラッグします。青い枠が表示されます。その中に画像を張り付けると、文字の上に画像を置く事ができたりします。ただ、すべてのブラウザで同じ表示ができるかというとわからないので、業務で使う人は良くテストしたうえで使いましょう。

画像を横に並べる

画像が大きいと、はみ出すので注意しましょう。
・HTML

<div class=”Container”>
<div class=”BoxA”><img src=”gazou1.jpg” /></div>
<div class=”BoxA”><img src=”gazou2.jpg” /></div>
<div class=”BoxA”><img src=”gazou3.jpg” /></div>
</div>

・CSS

.Container
{
width:600px;
}
.BoxA
{
float:left;
width:180px;
margin:5px;
}

clear:both;を続く要素に指定するのも忘れずにしましょう。

テーブルを使う方法もあります。

<table width=”600″ border=”0″ cellspacing=”5″ cellpadding=”0″>
<tr>
<td><img src=”gazou1.jpg” /></td>
<td><img src=”gazou2.jpg” /></td>
<td><img src=”gazou3.jpg” /></td>
</tr>
</table>

Dreamweaverで線を引く方法ですが、横に長い区切り線以外は面倒です。

横罫線を引くには

<hr>タグを段落と段落の間に入れてみましょう。
これが一番簡単です。

縦罫線を引くには

縦の区切り線のタグがないようなので、縦線の画像を張り付けたり、CSSのボーダーを利用するようです。

点線を引くには

hrタグのborderプロパティ4辺にdashedを指定します。色・線幅はお好みに応じてとなります。
横の区切り線で有効です。

テーブルの罫線を利用する方法

幅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; /*セル背景色を白*/
}

Webサイトにリンク切れがあったりすると、がっかりする事があります。リンク切れが無いサイトを作っていきましょう。

リンク切れをチェックする方法

Dreamweaverでは[サイト]メニュー-[サイト全体のリンクチェック]からリンクチェックをする事ができます。[サイト全体のリンクチェック]を実行すると、プロパティインスペクタの下に[リンクチェック]パネルが表示され、結果を見る事ができます。

リンク切れを修復する方法

[リンクチェック]パネルから修正したいエラーメッセージの行を選択し、プロパティインスペクタからリンクを設定します。

ファイル名に小文字と大文字を混在させると

ファイル名に小文字と大文字を混在させると、サーバのＯＳにより大文字のファイル名と小文字のファイル名を同じものとして識別したり、別のものと識別する場合があります。リンク切れを引き起こす可能性があるので、すべて小文字で統一するのが良いかもしれません。

正しくリンクが張られているかのチェックは機械ではできない

リンクがすべて張られていても、意図したとおりにリンクが張られているとは限りません。最後は人が実際に動作させて確認する必要があります。

Webページのフォントを変える方法には、HTMLファイルだけに設定する方法とCSSで設定する方法があります。標準的なブラウザやスマートフォンなどでスタイルシートが動作するようになった現在では、HTMLだけに指定する方法はあまり推奨されなくなってきました。しかし簡単なので必要とする人がいるのではと思い、紹介しておきます。

HTMLで変える方法

①フォントの種類を変える方法

<font face=”ＭＳ Ｐ明朝”>フォントの例</font>

②フォントサイズを変える方法

<font size=”1″>フォントの例</font>

③フォントカラーを変える方法

<font color=”#00ff00″>フォントの例</font>

CSSで変える方法

・HTML

<span class=”Example”>フォントの例</span>

・CSS
①フォントの種類を変える方法

.Example {
font-family:serif;
}

②フォントサイズを変える方法

.Example {
font-size:10pt;
}

③フォントカラーを変える方法

.Example {
color:#00ff00;
}

コードビューのフォントを変える方法

[編集]メニュー-[環境設定]-[フォント]カテゴリでコードビューのフォントを変えられます。

Dreamweaverの文字色に関連する内容を紹介します。

HTMLのみで文字色を指定する方法

ブラウザのスタイルシート対応が進んだ現在では、あまり推奨できる方法ではないですが、一応紹介します。
・文字を緑色にする方法

<font color=”#00ff00″>緑色の文字</font>

CSSとクラスで文字色を指定する方法

・HTML

<font class=”green”>緑色の文字</font>

・CSS

.green {
color:#00ff00;
}

文字色を一文字ずつ変更する方法

・HTML

<span class=”red”>赤</span><span class=”green”>緑</span><span class=”blue”>青</span>

・CSS

.red {
color:#ff0000;
}
.green {
color:#00ff00;
}
.blue {
color:#0000ff;
}

リンクの文字色を変える方法

・CSS

a:link    //訪問前リンク
a:visited    //訪問済みリンク
a:hover        //リンク上にマウスカーソルを重ねた時の表示
a:active    //リンクをクリックした瞬間の表示

a:link {
color: #00ff00
}
a:visited {
color: #006600
}
a:hover {
color: #00cc00
}
a:active {
color: #0000ff
}

特定のリンクのみ文字色を変える方法

・HTML

<p class=”LinkA”><a href=”#”>リンク</a></p>

・CSS

.LinkA a:link {
color: #00ff00
}
.LinkA a:visited {
color: #006600
}
.LinkA a:hover {
color: #00cc00
}
.LinkA a:active {
color: #0000ff
}

コードビューの文字色を変更する方法

編集メニューの環境設定ダイアログを表示し、コードカラーリンクカテゴリから文字色を変えられます。

画像を配置する方法と関連するトピックについて紹介していきます。

画像を配置する方法

方法①ファイルパネルから持ってくる
[ファイル]パネルから画像ファイルのアイコンをデザインビューにドラッグアンドドロップして、貼り付けできます。ファイル名がわかっていて、ディレクトリ構造を意識したい時に便利でしょう。

方法②アセットパネルから持ってくる
デザインビューで画像を張り付けたい場所をクリックし、カーソルを表示させます。
[アセット]パネルの左上の[イメージ]アイコンを選択すると、画像ファイルの一覧が表示されるのでファイルを選択、挿入ボタンを押します。サムネールを確認しながら配置したい時に便利でしょう。

方法③挿入パネルイメージボタンから持ってくる
[挿入]パネルの[一般]カテゴリの[イメージ]ボタンを長押しして、[イメージ]コマンドを選択します。画像のあるフォルダを選択しファイルを開きます。この方法はサイトの管理で定義していない場所にある画像ファイルを指定できる方法です。一度選ぶとサイトのイメージフォルダにコピーされ、リンクが張られます。CD-ROMやUSBメモリなど入れ替わりの激しいメディアにリンクが張られてリンク切れになるといった事を防止してくれます。

方法④エクスプローラからドラッグアンドドロップまたはコピーアンドペースト
できるみたいです。

画像に文字を書く方法

方法①画像を編集する事のできるソフトで文字を書き込む。
方法②画像を背景画像として表示し文字を流し込む。
方法③レイヤーを使用する。

画像にホットスポットを設定する方法

画像を選択すると、プロパティインスペクタの下にマップを編集するパネルが表示されるので、長方形・円形・多角形のホットスポットツールのアイコンをクリックし、画像上でクリックやドラッグを行ったりして範囲を選択し、リンクを張るのも良いでしょう。

プロパティインスペクタは、よく使うプロパティなどを素早く変更するのに役立ちます。プロパティインスペクタが表示されなくなった時のトラブルシューティングも合わせて紹介します。

プロパティインスペクタとは

プロパティインスペクタとは、クラスや見出し・リンクなど現在選択しているオブジェクトに関わる使用頻度の高い項目を設定できるパネルです。通常、画面の左下に表示されています。HTML・CSS・ページプロパティなどを簡単に設定できます。文字などのオブジェクトにクラスを指定する時など、便利に感じます。コードビューにコピーアンドペーストで張り付けていくより、プロパティインスペクタで設定したほうが間違いが少ないと思います。デザインビューで範囲選択して、視覚的に確認できるのもメリットです。

プロパティインスペクタが表示されなくなったら

プロパティインスペクタが表示されなくなったら、一番最初に行う事は、[ウィンドウ]メニューで[プロパティ]コマンドにチェックがついているかどうか確認する事です。チェックがついていなかったらつけましょう。
それでも表示されない時は、ワークスペースの初期化を行いましょう。初期設定はデザイナーです。

Webページに画像を使う場合、位置合わせに苦労する場合があるかもしれません。思いつく範囲で解決策を書いてみました。参考になれば幸いです。

CSSで調整

[CSSルール定義]ダイアログの[ボックス]カテゴリまたは[位置]カテゴリの値が特に重要です。
セレクタをimgタグに指定しても良いですし、クラスを新規に作るのも良いでしょう。

margin・paddingで隣り合う要素との間隔を調整

画像などのオブジェクトの周りには、内側から外側に向かってpadding領域、border領域、margin領域とあるのですが、要は隣の要素と重ならないように余白を作ってくれるのがmarginやpaddingです。背景色・背景画像の及ぶ範囲が、内側のpaddingです。枠線のborderの領域を設定するために指定する場合もあります。margin領域には何も表示されません。

floatを使うと良い場合も

画像などのボックス領域のfloatプロパティをrightにすると右寄せ、leftにすると左寄せできます。右寄せ・左寄せをやめたくなったら、続くオブジェクトのclearプロパティをbothにするのを忘れずに。

widthの値にも注意

widthの値が大きすぎると、隣り合う要素が入りきらなくなって、レイアウトが崩れる場合があります。レイアウト崩れが発生したら値を小さくしたり、オブジェクトを一時的に隠したりしてみましょう。

位置カテゴリを調整

[位置]カテゴリはpositionとplacementが重要です。通常、HTMLファイルは親タグに子タグが挟まれて階層構造となっているのですが、親要素のpositionプロパティにrelativeの値を設定する事で原点を指定できます。以後子タグはpositionプロパティにabsoluteと指定する事でplacementプロパティに指定したtop・right・bottom・leftの値だけ原点からずらした位置にイメージなどを表示できます。

デザインビュー

最近はワイド画面のディスプレイも普及し、分割ビューで作業をしている人も多くなっていると思います。簡単な確認はデザインビューが便利です。

ライブビュー

デザインビューが表示されている状態でライブビューボタンを押すと、通常のデザインビューよりブラウザに近い表示をする事ができます。

ブラウザで確認

最後はターゲットブラウザで確認しましょう。Internet ExplorerやFireFox Chrome Safari、スマートフォンのブラウザなど、昔より種類が増えてきていますが、できる限りの対応をしましょう。