「Dreamweaver」カテゴリーアーカイブ

Dreamweaverに関する記事です。

[Mac]Dreamweaverでページをブラウザー表示するショートカット(ブラウザーでプレビュー機能)を設定する方法

デザインビューでは、コードビューでコーディングした内容を視覚的に確認できますが、ブラウザーと全く同じように表示することはできません。
「ブラウザーでプレビュー」機能を使用すると、特定のブラウザーにおけるページ表示を確認できます。

[操作手順]
→Dreamweaverを起動する。

→以下の順にアクセスする。
ファイル>ブラウザーでプレビュー>ブラウザリストの編集

→一番目に使いたいブラウザを選択して、[プライマリブラウザ]にチェックを入れて、OKを押す。
※二番目のブラウザは、[セカンダリブラウザ]にチェックを入れる。
※使用したいブラウザが項目に存在しない時は + を押して追加する。

→適当なHTMLファイルを開く。

→option+F12キーを押す。
※command+F12キーを押す。

→プライマリブラウザが起動して、HTMLファイルがプレビューされる。
※セカンダリブラウザが起動して、HTMLファイルがプレビューされる。

以上で完了です。

 

[PC環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

[Windows]Dreamweaverでページをブラウザー表示するショートカット(ブラウザーでプレビュー機能)を設定する方法

デザインビューでは、コードビューでコーディングした内容を視覚的に確認できますが、ブラウザーと全く同じように表示することはできません。
「ブラウザーでプレビュー」機能を使用すると、特定のブラウザーにおけるページ表示を確認できます。

[操作手順]
→Dreamweaverを起動する。

→以下の順にアクセスする。
ファイル>ブラウザーでプレビュー>ブラウザリストの編集

→一番目に使いたいブラウザを選択して、[プライマリブラウザ]にチェックを入れて、OKを押す。
※二番目のブラウザは、[セカンダリブラウザ]にチェックを入れる。
※使用したいブラウザが項目に存在しない時は + を押して追加する。

→適当なHTMLファイルを開く。

→F12キーを押す。
※Ctrl+F12キーを押す。

→プライマリブラウザが起動して、HTMLファイルがプレビューされる。
※セカンダリブラウザが起動して、HTMLファイルがプレビューされる。

以上で完了です。

 

[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0

[Mac]Dreamweaverでコードビューとデザインビューを同時に表示する方法(上下/左右に画面分割)

最近では液晶画面が大型化してきています。
コードビューとデザインビューを同時に表示することで作業効率が高まります。

[操作手順]
→Dreamweaverを起動する。

→表示>[コードとデザイン] の順にアクセスする。

→コードビューとデザインビューが上下に分割されます。

左右に分割したい場合はさらに
→表示>[左右に分割] の順にアクセスする。

→コードビューとデザインビューが左右に分割されます。

以上で完了です。

 

[PC環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0

[Windows]Dreamweaverでコードビューとデザインビューを同時に表示する方法(上下に画面分割)

最近では液晶画面が大型化してきています。
コードビューとデザインビューを同時に表示することで作業効率が高まります。

[操作手順]
→Dreamweaverを起動する。

→表示>[コードとデザイン] の順にアクセスする。

→コードビューとデザインビューが上下に分割されます。
※Windows版 Dreamweaver CS3 9.0では、左右に画面分割はできません。(設定項目がありません)

以上で完了です。

以下のショートカットで素早く切り替えると便利です。

[ショートカット]
コードビューのみにする:  Alt>V>C
デザインビューのみにする: Alt>V>D
上下分割にする:      Alt>V>A

 

[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0

[Windows]Dreamweaverで原稿を括っているh1~h6タグ、pタグを素早く変更、削除する方法

デザインビューで操作するのがポイントです。
※コードビューでは挙動が異なります。

[操作手順]
→Dreamweaverのデザインビューで原稿をダブルクリックして選択反転させる。

→以下のショートカットを使う。
削除:Ctrl+0
h1タグ:Ctrl+1
h2タグ:Ctrl+2
h3タグ:Ctrl+3
h4タグ:Ctrl+4
h5タグ:Ctrl+5
h6タグ:Ctrl+6
pタグ:Ctrl+Shift+P

→例)<p>今日はいい天気</p> から、<h1>今日はいい天気</h1> に変更されます。

以上で完了です。

 

[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0

Dreamweaverのエディタ窓/エディタビューの正式名称について

> コードビュー
>
> (表示/コード)HTML、JavaScript、およびその他の種類のコードを作成および編集するためのハンドコーディング環境です。

> デザインビュー
>
> (表示/デザイン)ページのレイアウトおよび編集を視覚的に行うことができる、迅速にアプリケーション開発を行うためのデザイン環境です。このビューでは、Dreamweaver で編集可能なドキュメントが、ブラウザーでページを表示したときのように視覚的に表示されます。

 

[参考]
http://helpx.adobe.com/jp/dreamweaver/using/dreamweaver-workflow-workspace.html#document_window_overview

Dreamweaverの便利機能「ファイル操作伴い自動的にソースコードのリンク構造を変更する」

Dreamweaverにはファイル操作伴い自動的にソースコードのリンク構造を変更する機能が付いています。
この機能はデフォルトで有効です。(無効にすることはできません)
Dreamweaverのファイルタブ上でファイル操作を行うことで自動的に働きます。

※ファイル操作とは、ファイル/フォルダをコピー/リネーム/移動/削除などのことです。
※DreamweaverのファイルタブはF8(トグル)で表示/非表示ができます。

例)
/img
/img/0001.jpg
/img/0002.jpg
/img/0003.jpg
index.html
HTMLソースコード
↓↓↓↓↓↓↓↓↓↓
<img src=”img/0001.jpg” />
<img src=”img/0002.jpg” />
<img src=”img/0003.jpg” />
↑↑↑↑↑↑↑↑↑↑

ここで、/img -> /pic へリネームした場合、
フォルダ名変更に伴いHTMLソースコードのリンクを更新しますか?と聞かれます。
「更新する」を選択すると、以下のように変更されます。
HTMLソースコード
↓↓↓↓↓↓↓↓↓↓
<img src=”pic/0001.jpg” />
<img src=”pic/0002.jpg” />
<img src=”pic/0003.jpg” />
↑↑↑↑↑↑↑↑↑↑

 

[発展]
ファイル操作は、DreamweaverとWindows Explorerを使い分けることをお勧めします。
Dreamweaverの自動更新機能は、時にはわずらわしく、ミスを誘発することがあります。
この点、エクスプローラ上のファイル操作ではソースコードに一切の改変を行いません。
Dreamweaverを立ち上げたまま、エクスプローラでファイル操作をしても問題ありません。(私の環境では特に問題は起きていません)

 

 

[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0