前回の HTML&CSS作成がラクになる！DreamweaverからPSDファイルを読み込んでのコーディング（1） の続きです。
実際に、必要な画像をダウンロードしてみます。
Dreamweaver［Extract］パネルのPSDから画像をダウンロードする
まずは、あらかじめ、サイトのフォルダと画像を保存するフォルダを作成しておきます。このフォルダの中に画像をダウンロードします。
Dreamweaver PSD から画像のダウンロード
Dreamweaver［Extract］パネルのPSDの中の、ダウンロードしたい画像にカーソルを合わせると、画像のダウンロードボタンが表示されますので、保存したいフォルダと画像の名前などを設定し、保存ボタンをクリックします。パネルの設定については、前回の記事を参照してください。
リボンのイラストとContentsの文字の画像がダウンロードできました。同じようにして、背景と、リストボタンもダウンロードします。
画像が3枚ダウンロードできました。
CSSをコピーしてコーディングに活用する
いよいよコーディングします。この時、Dreamweaver［Extract］パネルのPSDからCSSがコピーできますので、それを活用しましょう。
クラス名などのセレクタをセット
背景をセットします。途中までは普段通りにHTMLを作成してください。
今回は、sectionにside_tabというidを付けて全体を囲み、その中にtabboxというクラス名を付けてタブのボックス全体を囲むことにしましょう。なので、htmlは以下のようにしました。
<section id="side_tab"><div class="tabbox">ここにタブのコンテンツの内容を記述する</div></section>
これに対して、スタイルシートを設定していきます。クラス名のセレクタを準備しましょう。※まだプロパティーは何も設定していません。
#side_tab {
}
.tabbox {
}
プロパティーをコピー＆ペーストする
この .tabbox のセレクタに対するプロパティーをDreamweaver［Extract］パネルのPSDファイルのCSSからコピーします。コピーしたら、それをDreamweaverのCSSにペーストします。こうすることで、プロパティーがコピーされました！
この時、1つ注意しなければならないことが、背景に画像を使いたい場合など、背景画像の設定項目はコピーできないという点です。
背景画像に関しては、手動で設定する必要があります。
このようにして、必要なコーディングを行っていきます。
どんどん作業を進めて、全体の枠と、リボンが付いたタイトル、切り替え用のタブとその下のコンテンツを納める白いボックスの配置まで設定が完了したとします。
ここまでできたと仮定して、次は、テキストをペーストする方法を解説します。
テキスト情報をペーストする
ExtractパネルのPSDのテキストをコピーするボタンをクリックしてください。すると、テキストがクリップボードにコピーされますので、これをHTMLやCSS側にペーストします。テキストがコピーされましたね！
このようにして、Dreamweaverから読み込んだPSDファイルを使って、画像のダウンロードとCSSのコピー、テキスト情報のコピーができるようになりました。これだけですが、コーディング効率化にずいぶん役に立てられるのではないかと思います。
あとは、引き続き、このタブで切り替えるコンテンツのコーディングを進めて、HTMLとCSSが完成したら、タブを切り替えるためのJavaScriptをセッティングして完了です！
完成しました！
