WYSIWYGのみを使用する必要はありません
Dreamweaverは素晴らしいWYSIWYGエディタですが、あなたが見たものはWebページを書くことに興味がない場合でもDreamweaverは素晴らしいテキストエディタなので、 Dreamweaverを使用することはできます。 しかし、Dreamweaverのコードエディタでは、デザインビューやWYSIWYGエディタの部分に焦点を当てているため、多くの機能がDreamweaverのコードエディタ内にあります。
Dreamweaverのコードビューを取得する方法
DreamweaverをHTMLエディタとして初めて使用したことがない場合は、「コード」、「分割」、「デザイン」の3つのボタンがページ上部に表示されることはありませんでした。 Dreamweaverは、デフォルトで「デザインビュー」またはWYSIWYGモードで起動します。 しかし、HTMLコードの表示と編集に簡単に切り替えることができます。 「コード」ボタンをクリックするだけです。 または、[表示]メニューから[コード]を選択します。
HTMLの記述方法を学んだだけでなく、変更がドキュメントに与える影響を知りたい場合は、コードビューとデザインビューを同時に開くことができます。 この方法の美しさは、両方のウィンドウで編集できることです。 したがって、イメージタグのコードをHTMLで記述し、デザインビューを使用してドラッグアンドドロップして、ページ上の別の場所に移動することができます。
両方を同時に表示するには、次のいずれかを行います。
- 「分割」ボタン（「コード」と「デザイン」の間）をクリックします。
- [表示]メニューの[コードとデザイン]を選択し、
Dreamweaverを使用してHTMLコードを編集するのに慣れたら、Dreamweaverをデフォルトでコードビューで開くように設定を変更できます。 最も簡単な方法は、コードビューをワークスペースとして保存することです。 Dreamweaverは、使用していた最後のワークスペースで開きます。 表示されない場合は、ウィンドウメニューに移動して、必要なワークスペースを選択します。
コード表示オプション
Dreamweaverは非常に柔軟なので、カスタマイズする方法がたくさんあり、好きなように動作させることができます。 オプションウィンドウには、調整可能なコードの色付け、コードの書式設定、コードヒント、コード書き換えオプションがあります。 ただし、コードビュー内で特別なオプションを変更することもできます。
コードビューでは、ツールバーに[表示オプション]ボタンがあります。 また、[表示]メニューから[コード表示オプション]を選択して、オプションを表示することもできます。 オプションは次のとおりです。
- ワードラップ - 水平にスクロールせずに表示できるようにHTMLコードをラップします。 このオプションは、コードにキャリッジリターンを挿入するのではなく、読みやすいようにコードを表示するだけです。
- 行番号 - コードの横に沿って行番号を表示します。 これは、ビューウィンドウよりも長い行を囲む行の折り返しシンボルを表示します。
- 非表示の文字 - Webページに表示される空白の代わりに特殊文字を表示します。 たとえば、ドットがスペースを置き換え、ダブルシェブロンが各タブを置き換え、ピルクロまたはパラグラフマーカーが各改行を置き換えます。
- 無効なコードをハイライト表示 - 黄色で間違っているHTMLを強調表示します。 黄色のタグを選択すると、プロパティインスペクタでその修正方法のヒントが表示されます。
- Syntax Coloring - コードの色分けをオンまたはオフにします。 カラーコードの色は、環境設定のコードカラーセクションで変更します。
- 自動インデント - 上のコードがインデントされている場合、改行後にコードを自動的にインデントします。 環境設定のコード書式設定セクションでタブサイズを変更して、インデントのサイズを変更することができます。
DreamweaverのコードビューでのHTMLコードの編集
DreamweaverのコードビューでHTMLコードを編集するのは簡単です。 HTMLの入力を開始するだけです。 Dreamweaverでは、基本的なHTMLエディタを超えて拡張されています。 HTMLタグの記述を開始するときは、<を入力します。 その文字の直後で一時停止すると、DreamweaverにHTMLタグのリストが表示されます。 これはコードヒントと呼ばれます。 選択範囲を絞り込むには、文字の入力を開始します。Dreamweaverでは、入力する内容に合ったタグにドロップダウンリストが絞り込まれます。
HTMLを初めてお使いの方は、HTMLタグのリストをスクロールして、さまざまなHTMLタグを選択して、その内容を確認することができます。 Dreamweaverでは、タグを入力すると、属性の入力を求められます。 たとえば、「タグまで絞り込みます。
しかし、コードヒントはタグで終わらない。 コードヒントを使用して挿入することができます。
コードヒントが表示されない場合は、Ctrl +スペースバー（Windows）またはCmdスペースバー（Macintosh）を押して表示することができます。 コードヒントが表示されない最も一般的な理由は、タグを終了する前に別のウィンドウに切り替えた場合です。 Dreamweaverは文字<の入力をキー入力しているため、ウィンドウを離れて戻るとコードヒントを再起動する必要があります。
エスケープキーを押して、コードヒントメニューをオフにすることができます。
開始HTMLタグを入力したら、それを閉じる必要があります。 Dreamweaverはこれを自然な方法で行います。 あなたのニーズに最も適した「タグを閉じる」オプションを入力した場合。
HTMLでページを編集することに切り替える準備が整っていないにもかかわらず、書かれているようにコードを見たい場合は、コードインスペクタを試してみる必要があります。 これは別のウィンドウでHTMLコードを開きます。 これはコードビューと同じように機能し、実際は現在のドキュメントのための基本的には分離可能なコードビューウィンドウです。 コードインスペクタを開くには、ウィンドウメニューに移動して "コードインスペクタ"を選択するか、キーボードのF10キーを押します。
DreamweaverではHTMLコードを書式設定しますが、表示させたい場合があります。 たとえば、3つのスペースを使用してインデントを行いますが、IMGタグをインデントしない場合は、コード書換えオプションでその書式情報を指定できます。 次に、「コマンド」メニューから「ソース書式の適用」を選択します。 これは、他の人が書いたコードをおなじみの形式にするうえで便利です。
多くのHTMLコーダーが知らない機能や使用しない機能は、HTMLコードを折りたたむ機能です。 これは、ドキュメントからタグを削除しませんが、作業中のものに気をそらさないように、タグをビューから削除するだけです。 コードを折りたたむには：
- 非表示にするコードのセクションを選択する
- [編集]メニューの[コード折りたたみ]サブメニューから[選択を折りたたむ]を選択します
より簡単な方法は、コードを選択し、ガターに表示されるコードの崩壊アイコンをクリックすることです。 また、選択したコードを右クリックして「選択範囲を折りたたむ」を選択することもできます。
強調表示されているもの以外をすべて非表示にするには、上記の方法のいずれかで[選択範囲外に折りたたむ]を選択します。
折り畳んだコードを展開するには、単にダブルクリックします。 コードを開き、それを選択します。 次に、その選択範囲を移動したり、削除したり、タグを追加したりすることができます。
外部テンプレートを編集したくないページでは、折りたたみと展開の機能を常に使用できます。 外に編集して折りたたむコンテンツ領域を選択するだけです。 次に、HTMLを記述します。 デザインビューでページを表示したり、ブラウザでプレビューすることはできます。 折りたたまれたコードはドキュメントから削除されず、単に表示されないようになっています。 一連のアイテムを扱っているときにも使用できます。 あなたが終わったら、それを崩してください。 あなたは、コードが表示されていないときに完了したことを知っています。