FC2ブログ
『WEB標準の日』 レポート10
昨日の神森さんのセッションの続きです。

●CSSの自動補完機能●
DreamWeaver8からはCSSの自動補完機能が充実しています。
CSSの設定を行うのは、HTMLのマークアップが終了して、divタグで全体のレイアウトを整えた後で行う。
そしてCSSの設定をしたいところ(div ●●のh1)
にカーソルを立て、CSSパネルの新規CSSルールをクリックします。すると自動的に「詳細設定」にチェックが入り、#●● h1などと記述されます。
子孫セレクタなどの設定の際、非常に便利です。

●スニペットの使用●
コードスニペットの機能を使うと、後に再利用するときのために作成したコンテンツを保存することができます。
スニペットにはHTMLだけでなく、CSS、JavaScript、サーバー側のスクリプトなど色々保存ができる。

簡単なスニペットを作成してみましょう。
1.HTMLタグを打ちます。
<div id="footer">
<address>Copyright 2006 All rights reserved.</address>
</div>

2.このコードを選択した状態で、ファイルパネル→スニペットを選択。Windowsなら右クリック、もしくは右上のプルダウンから新規スニペットを選択します。

3.名前は分かりやすい名前「footer:normal」をつけましょう。説明の箇所も「フッター部分コピーライトのみ」などとつけると良いでしょう。

4.スニペットの種類は「ブロックの挿入」にします。「ブロックの挿入」は選択したコードそのものが後に挿入されることになります。
「選択範囲を囲む」は、現在の選択範囲の前・後に挿入するコードを記述します。
OKボタンを押します。

5.スニペットパネル内に今作成したものが出来ていると思います。フォルダなどを作って、わかりやすく保存しましょう。

6.新規ファイルを開き、スニペットパネルから今作成したスニペットを「デザインビュー」のステージ上に、ドラッグ&ドロップします。

7.自動的にfooterが作成されます。

★解説★
スニペットは覚えるとかなり使える機能だと思います。例えばCSSのブラウザの初期化のコードなどを一度作成して、スニペットに登録しておけば、使いまわしがききます。
個人でサイトを作成していく場合には別段問題はありませんが、複数人でサイトを作成する場合には注意が必要です。
スニペットは各自のマシンに登録されています。これを共有ファイルとして使用する場合には、ちょっと面倒な作業があります。
WindowsXPの場合はC:\Document and Setting→[user]→Application Data→Macromedia →DreamWeaver8→Configuration→Snippets内に保存されているので、そこからデータをコピーして、他の作成者のマシンの同じ箇所に保存します。
これで他のマシンでも作成したスニペットが使えます。

続きはまた明日。
スポンサーサイト