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