Dreamweaver画像メモ Dreamweaver画像メモ

画像の配置について

Dreamweaverで画像を配置する方法を説明します。

方法はいくつかあります。

①メニューより
挿入メニューをポイントしイメージを選択。
画像ファイルを選択すると画像が貼り付けられます。
後はドラッグしたりして位置をいい場所に動かしましょう。
②挿入パネルより
一般カテゴリーの中にイメージというボタンのがあるので▼よりイメージを選択しボタンを押します。後はファイルを選択します。
③ファイルパネルより
ファイルパネルから画像を選択しドラッグ＆ドロップします。
なおファイル名をダブルクリックするとプレビューウィンドウが表示されます。
④アセットパネルより
アセットパネルを選択すると左側のの上下にアイコンが並んでいるので一番上のイメージをクリックします。後は上に表示される縮小版イメージを見て画像を選択しドラッグ＆ドロップします。こちらでもファイル名をダブルクリックするとプレビューウィンドウが表示されます。
⑤マイコンピュータまたはエクスプローラよりコピー＆ペーストする方法
マイコンピュータまたはエクスプローラで画像ファイルをコピーしデザインビュー上で貼り付けます。

画像フォルダを作ろう。

ファイルパネル左上のリストボックスよりサイトの管理を選択、サイトの管理ダイアログからサイトを選択・編集または新規作成し、サイトを登録してから、詳細設定・ローカル情報よりデフォルトのイメージフォルダーを設定します。この後からはサイトに使った画像ファイルがこのフォルダに蓄積されていきます。

レイヤーは？

APエレメントという機能がレイヤーに相当するようです。環境設定で設定してから使うようです。

検索参考キーワード

画像 lt quot セルテーブル機能タグ表示 Dreamweaver CSS ページ指定サイト作成リンク CS 選択レイアウト設定挿入 amp ファイル方法リスト配置

画像の位置を調整する方法

画像の位置を設定するステップ

①デザインビューに画像を貼り付けます。
ファイルパネルで作業用フォルダに画像用フォルダを作成し、画像ファイルを格納し、そこから画像を引っ張ってくるとアップロードする時楽です。

②imgタグにクラスを指定します。

<img class="cls01" src="image/1.jpg" width="160" height="107" />

・IDでも良いのですがプロパティの再利用頻度を考えると、一回きりしか使えないIDより何度も使えるクラスのほうが使い勝手が良いような気がします。

③CSSでimgのクラスタグにpadding,background-color,marginを指定します。

img.cls01 {
padding: 30px;
background-color: #396;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

paddingはbackground-color（背景色）で塗りつぶされる内側の余白の事でmarginは上下左右隣り合うボックス要素とどれぐらい離すか設定できる、paddingよりもさらに外側の余白の事です。CSSの設定は関連付けるのが上手くいかない場合もありますが、なんとか頑張りましょう。どうしてもできない時はCSSスタイルパネルで新規CSSルールボタンからCSSファイルを作るのも一つの方法です。

④marginタグの数値を微調整していきます。
margin-top（上）
margin-right（右）
margin-bottom（下）
margin-left（左）
をpx（ピクセル）等で指定できます。

Tips

・bodyタグのmarginとpaddingを0pxにすると画像がぴったり端に配置できます。

body {
margin: 0px;
padding: 0px;
}

・メニューの下にあるドキュメントツールバーのマルチスクリーンボタンを押すとスマートフォン・タブレットなど様々な解像度でＷｅｂページがどのように表示されるか、簡単なプレビューテストを行う事ができます。

Dreamweaver画像メモ