HTMLファイルやJSPファイルのデザイン・レイアウトを確認しながらグラフィカルに編集するには、Webページエディタを利用します。
ポイント
Webページエディタでファイルを編集するには、ファイルを選択し、コンテキストメニューから[アプリケーションから開く] > [Web ページエディタ]を選択します。
[設計]タブにはデザインページとソースページがあります。
デザインページでは、Webページの出力イメージを直接編集するような感覚で編集作業を行うことができます。
ソースページでは、ソースの内容が構文によって色分けされて表示され、コンテンツアシストなどにより、編集作業を行うことができます。
デザインページやソースページで編集した内容は、すぐにもう一方のページに反映されます。
[プレビュー]タブで、実行時に表示されるWebページのイメージを確認することができます。
Webページエディタで編集するときには、以下のビューを適宜利用します。
HTMLやJSPの標準タグやクラスパスに設定されているJSP拡張タグのアイテムが表示されます。パレット ビューからアイテムをドラッグ＆ドロップすることでデザインページに挿入することができます。
HTML/JSP構文のアウトラインを表示します。要素の追加や属性の追加もこのビューで行うことができます。
エディタで選択されている要素の属性を表示します。値を変更することもできます。属性値を一覧から選択することも可能です。
ソースページでの操作は、HTMLエディタ/JSPエディタと同様です。"2.3.3.2 HTMLファイルの編集"、"2.3.4.2 JSPファイルの編集"を参照してください。
設計タブの配置を変更する
[設計]タブには、デザインページとソースページがありますが、ツールバーから以下の4つのパターンの表示に切り替えることができます。
上下分割表示
左右分割表示
デザインページのみ表示
ソースページのみ表示
また、デザインページの一部がパレットになっていますが、パレット ビューを表示することで、デザインビューを広く使用することもできます。
スタイルを変更する
デザインページでは、コンテキストメニューの[スタイル]のサブメニューを選択することで、スタイルを変更することができます。
