[ショートカット]
h1タグ:Ctrl+1
h2タグ:Ctrl+2
h3タグ:Ctrl+3
h4タグ:Ctrl+4
h5タグ:Ctrl+5
h6タグ:Ctrl+6
pタグ:Ctrl+Shift+P
strongタグ(ボールド):Ctrl+B
emタグ(イタリック):Ctrl+I
brタグ:Shift+Enter
テキストをタグで囲う:Ctrl+T
[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0
Dreamweaverに関する記事です。
[ショートカット]
h1タグ:Ctrl+1
h2タグ:Ctrl+2
h3タグ:Ctrl+3
h4タグ:Ctrl+4
h5タグ:Ctrl+5
h6タグ:Ctrl+6
pタグ:Ctrl+Shift+P
strongタグ(ボールド):Ctrl+B
emタグ(イタリック):Ctrl+I
brタグ:Shift+Enter
テキストをタグで囲う:Ctrl+T
[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0
デザインビューでは、コードビューでコーディングした内容を視覚的に確認できますが、ブラウザーと全く同じように表示することはできません。
「ブラウザーでプレビュー」機能を使用すると、特定のブラウザーにおけるページ表示を確認できます。
[操作手順]
→Dreamweaverを起動する。
→以下の順にアクセスする。
ファイル>ブラウザーでプレビュー>ブラウザリストの編集
→一番目に使いたいブラウザを選択して、[プライマリブラウザ]にチェックを入れて、OKを押す。
※二番目のブラウザは、[セカンダリブラウザ]にチェックを入れる。
※使用したいブラウザが項目に存在しない時は + を押して追加する。
→適当なHTMLファイルを開く。
→option+F12キーを押す。
※command+F12キーを押す。
→プライマリブラウザが起動して、HTMLファイルがプレビューされる。
※セカンダリブラウザが起動して、HTMLファイルがプレビューされる。
以上で完了です。
[PC環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0
デザインビューでは、コードビューでコーディングした内容を視覚的に確認できますが、ブラウザーと全く同じように表示することはできません。
「ブラウザーでプレビュー」機能を使用すると、特定のブラウザーにおけるページ表示を確認できます。
[操作手順]
→Dreamweaverを起動する。
→以下の順にアクセスする。
ファイル>ブラウザーでプレビュー>ブラウザリストの編集
→一番目に使いたいブラウザを選択して、[プライマリブラウザ]にチェックを入れて、OKを押す。
※二番目のブラウザは、[セカンダリブラウザ]にチェックを入れる。
※使用したいブラウザが項目に存在しない時は + を押して追加する。
→適当なHTMLファイルを開く。
→F12キーを押す。
※Ctrl+F12キーを押す。
→プライマリブラウザが起動して、HTMLファイルがプレビューされる。
※セカンダリブラウザが起動して、HTMLファイルがプレビューされる。
以上で完了です。
[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0
最近では液晶画面が大型化してきています。
コードビューとデザインビューを同時に表示することで作業効率が高まります。
[操作手順]
→Dreamweaverを起動する。
→表示>[コードとデザイン] の順にアクセスする。
→コードビューとデザインビューが上下に分割されます。
左右に分割したい場合はさらに
→表示>[左右に分割] の順にアクセスする。
→コードビューとデザインビューが左右に分割されます。
以上で完了です。
[PC環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0
最近では液晶画面が大型化してきています。
コードビューとデザインビューを同時に表示することで作業効率が高まります。
[操作手順]
→Dreamweaverを起動する。
→表示>[コードとデザイン] の順にアクセスする。
→コードビューとデザインビューが上下に分割されます。
※Windows版 Dreamweaver CS3 9.0では、左右に画面分割はできません。(設定項目がありません)
以上で完了です。
以下のショートカットで素早く切り替えると便利です。
[ショートカット]
コードビューのみにする: Alt>V>C
デザインビューのみにする: Alt>V>D
上下分割にする: Alt>V>A
[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0
[操作手順]
→Dreamweaverを起動する。
→画面上部メニューにて、Dreamweaver>[Dreamweaver について…] の順にアクセスする。
→スプラッシュ画面でバージョンの確認ができます。
以上で完了です。
[PC環境]
Mac OS X 10.9 Mavericks
Dreamweaver CS4 10.0
[操作手順]
→Dreamweaverを起動する。
→ヘルプ>[Dreamweaver について] の順にアクセスする。
→スプラッシュ画面でバージョンの確認ができます。
以上で完了です。
[PC環境]
Windows 7 SP1
Dreamweaver CS3 9.0
デザインビューで操作するのがポイントです。
※コードビューでは挙動が異なります。
[操作手順]
→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
> コードビュー
>
> (表示/コード)HTML、JavaScript、およびその他の種類のコードを作成および編集するためのハンドコーディング環境です。
> デザインビュー
>
> (表示/デザイン)ページのレイアウトおよび編集を視覚的に行うことができる、迅速にアプリケーション開発を行うためのデザイン環境です。このビューでは、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