HTMLでテキストを編集する

ウェブサイト開発者や一般ユーザーの間で最もポピュラーなソフトウェアであるAdobe DreamweaverとNotePad++などのアプリケーションでHTMLファイルを編集する方法を見ていきます。

Adobe Dreamweaver

Dreamweaverでは、HTML、CSS、Java Script、PHP、そしてウェブサイト開発で利用する、その他のファイルを作成または編集するために使用される専用アプリケーションです。

一番のメリットは、デザインモードというモードが、テンプレートをカスタマイズする上でとても役立ちます。

html-edit-text-2

デザインモードで、各ブロック要素の位置を確認し、そのままテンプレートの編集をしてみましょう。

デザインモードでは、テキストや画像の編集など、基本的なカスタマイズを行う時に使用する事をお勧めします。ページに何かを追加する場合は、コードモードを使用して下さい。左上にあるボタンを使用してモードを切り替えることができます。

html-edit-text-4

コードモードでは、ページ全体のHTMLの構造を確認できます。コードモードで編集作業をするのは難しいと感じるかもしれませんが、要素ごとに色付けがされているので、わかりやすくなっています。

html-edit-text-1

ご覧のように、タグは濃い青で、リンクは緑で、フォームはオレンジで、テキストは黒となっています。少し練習をすれば、そこまで難しいものではありません。

Adobe Dreamweaverの唯一の欠点としては価格です。入手しようと思っても、考えているよりも安くはありません。

Adobeの公式サイト(http://adobe.com)で、Adobe Dreamweaverの試用版をダウンロードするか、もしくは購入することができます。

Notepad++

Notepad++は無料のコードエディターソフトです。ウェブサイト開発で使用するファイルを編集するために使用します。 唯一の弱点は、Adobe Dreamweaverのようなデザインモードがないということです。 コードモードでファイルの編集をすることができます。

html-edit-text-3

コードごとの配色は、Adobe Dreamweaverと同じなので、それぞれの要素を見つけるのは難しくありません。

例:タグは青、テキストは黒など


Comments are closed.