1. 初期設定
1.Google Chromeの拡張機能 NetBeans Connector をインストールしておくと、NetBeansでHTMLファイルを保存するとリアルタイムでChromeの表示が更新されるので、開発効率が上がります。
2. プロジェクトの作成
7.サイト・テンプレートは「なし」を選択してください。
8.「ツール」はすべてのチェックを外してください。
問題なければ「終了(F)」ボタンをクリックします。
9.アイコンにGoogleChromeのアイコンが表示され、マウスでポイントすると「NetBeans統合環境が組み込まれたChrome」と表示されます。
10.緑色の右向き三角のボタンをクリックすることでプロジェクトが実行できます。
11.GoogleChrome「TODO write content」と書かれたWebページが表示されます。
12.NetbeansのエディタでHTMLの内容を書き換え、上書き保存するとリアルタイムでWebページの内容も更新されます。これをライブプレビューといいます。
3.エディタ機能
1.HTMLの自動生成
何も入力していない状態でエディタ上で「Ctrl + Space」キーを同時に押すことで入力の自動補完機能が使えます。フォームや特定のHTMLを自動で生成するためのサブメニューが表示されます
2.HTMLの自動補完
1.エディタ上で小なり記号(<)を入れるとタグの候補を表示します。
2.さらに「p」などと最初の一文字を入力するとタグの候補が絞り込まれます。
3.大なり記号(>)を入れて、開きタグを入力し、エンターキーを押すと、閉じタグ(今回の場合は</p>)が挿入されて便利です。
3.履歴
1.エディタ上の「履歴」タブをクリックするとそのファイルの編集履歴が表示されます。ファイルの保存日時、メッセージ、修正箇所の差分が表示されます。
2.過去の履歴と現在のファイルの内容を見比べながら、必要に応じて過去の状態に戻ることができます。
3.右向きの矢印をクリックすることで過去のファイルの状態に戻せます。
4.「ソース」タブをクリックすると、通常の編集用エディタに戻ります。
なお、Javaの時に使用したショートカットキーはほとんどそのまま使用できます。
HTMLの文法に関しては以下の記事も参考にしてください。
いずれまた、機会があればパレットを使ったHTMLの作成やEmmetという便利なプラグインについても追記しますね。
以上。