デザインビューとコードビューの切り替え

デザインビューやコードビューといっても何の事か初めのうちはわかりません。使ってみるのが一番の近道です。

早速使ってみましょう。

まずはHTMLファイルを一つ作ってみます。
「ファイル」メニューで「新規」で「新規ドキュメント」ダイアログが出てくるので
「空白ページ」
ページタイプ「HTML」
レイアウト「なし」
にして作成ボタンを押してみましょう。

「Untitled-1」のような仮のファイル名で編集画面が左半分にでてきたと思います。
コード｜分割｜デザイン
というボタンを見つけてボタンを順に押してみましょう。
コードを押すと画面いっぱいに、分割を押すと左半分になにやらわからないアルファベットの表示された画面がでてきましたね。

これが最小限のHTMLファイルというものです。ホームページというものはこれに内容を付け加えていって完成させていくのです。

とりあえずここは分割ボタンを押して分割ビューにしておきます。

分割されていますが左がコードビュー、右がデザインビューになっています。

コードビューではHTMLファイル、デザインビューではブラウザに近い表示がされます。

デザインビューに文字を入れてみましょう。

そうするとコードビューにも入力した文字が追加されます。

今度はコードビューでさっき追加された文字を編集して画面下か右の「更新」ボタンか「F5」キーを押してみましょう。

デザインビューに変更が反映されました。

Dreamweaverではブラウザでの見た目のような画面（デザインビュー）からもコード（コードビュー）を直接編集してもホームページを作れるのです。

そこがDreamweaverのすごさの一つなのです。

関連記事