Dreamweaver を使用して Web ページのタグをすばやく編集する

著者：Eve Cole 更新時間：2009-06-01 01:02:43

コードを手で書く習慣があるのだろうか。例: CSS コードまたは Javascript コードをセルに挿入したい場合、どうすれば素早く簡単に挿入できるでしょうか?

Dreamweaver ではコードビューが提供されていますが、それでも手動でコードビューを見つけて前後に切り替える必要があります。コードビューと編集ビューを共存させることもできますが、画面スペースの半分が占有されるため、もともと狭い編集領域がさらに混雑してしまいます。もっと良い方法はありますか？答えは「はい」です。

全員の Dreamweaver パネルレイアウトがデフォルトレイアウトであると仮定して、Dreamweaver 8 を例に挙げてみましょう。プロパティパネルの上に小さなラベルの行があるかどうかを確認します。 (MX を使用していない場合、タグはステータスバーに表示されます) たとえば、新しい空の HTML ドキュメントを作成する場合、上の小さなタグは <body> である必要があります。下の写真を見てください。

写真の赤枠の場所が今日の主役です。まずは「ラップタグ」について見ていきましょう。ページにいくつかの単語を入力して選択し、右クリックメニューで [タグの折り返し] を選択し、ポップアップの [タグの折り返し] ダイアログボックスに「<strong>」 (引用符は除く) を入力して Enter キーを押します。以前に選択したテキストが太字になっていますか? ソースコードに移動して、選択したテキストが <strong> タグで囲まれていることを確認してください。 <a>、<p> などの他のタグを追加してみることもできます。ここに属性を直接入力することもできます。例: <p style="color:#CC0000">。ここでは一般的な説明のみを行います。ご不明な点がございましたら、Dreamweaver のヘルプをご確認ください。

タグセレクターを適用する方法について説明します。

先ほどの太字部分にカーソルを移動すると、<body> の後にさらに<strong> があることがわかります。これは、カーソルが置かれているテキストの外側に <strong> タグがあり、 <strong> タグの外側に <body> タグがあることを意味します。次に、別のテーブルを追加し、カーソルをテーブル内に移動して、タグの構造を確認してみましょう。 HTML の基本的な知識がある友人なら、簡単に理解できるはずだと思います。

ここで、表を挿入し、CSS を使用して表を 10 ピクセル下に移動するとします。まず表を挿入し、次にカーソルを表内に移動します。この時点で、タグセレクターに <body><table><tr><td> という単語が表示されるはずです。次に、テーブルのラベルを右クリックすると、4 つのオプションが表示されます。タグの削除、タグの編集、クラスの設定、IDの設定を行います。

タグの削除：タグを削除します。 (削除できない特殊なタグがいくつかあります。例: <table>、<tr>、<td>、<body>...)

タグの編集: タグへの属性の追加、属性の変更など。

クラスを設定: このタグにクラスをアタッチします。 (つまり CSS のカテゴリ)

IDを設定：このタグにIDを付けます。 (つまり CSS ID)

ここでは、タグを編集して最後に属性 style="margin-top:10px" を追加することを選択します。これは、ソースコードを記述する通常の方法と同じです。次に Enter を押します。編集が完了しました。 Dreamweaver で効果が確認できない場合は、ブラウザを使用してプレビューしてください。

あなたが好むかもしれない別の方法があります。「ウィンドウ」→「タグインスペクター」を選択すると、現在選択されているタグのすべての属性がここに表示されます。ここで簡単に編集することもできます。ここに入力した属性には、編集後に Enter キーを押して確定する必要はありません。

ここではその方法のみを説明し、誰もがその恩恵を受けることを願っています。