HTML&CSS作成がラクになる!DreamweaverからPSDファイルを読み込んでのコーディング(2)

前回の HTML&CSS作成がラクになる!DreamweaverからPSDファイルを読み込んでのコーディング(1) の続きです。

実際に、必要な画像をダウンロードしてみます。

Dreamweaver[Extract]パネルのPSDから画像をダウンロードする

まずは、あらかじめ、サイトのフォルダと画像を保存するフォルダを作成しておきます。このフォルダの中に画像をダウンロードします。
Dreamweaver PSD

Dreamweaver PSD から画像のダウンロード

Dreamweaver[Extract]パネルのPSDの中の、ダウンロードしたい画像にカーソルを合わせると、画像のダウンロードボタンが表示されますので、保存したいフォルダと画像の名前などを設定し、保存ボタンをクリックします。パネルの設定については、前回の記事を参照してください

Dreamweaver PSD
Dreamweaver PSD

リボンのイラストとContentsの文字の画像がダウンロードできました。同じようにして、背景と、リストボタンもダウンロードします。

Dreamweaver PSD

画像が3枚ダウンロードできました。

CSSをコピーしてコーディングに活用する

いよいよコーディングします。この時、Dreamweaver[Extract]パネルのPSDからCSSがコピーできますので、それを活用しましょう。

クラス名などのセレクタをセット

背景をセットします。途中までは普段通りにHTMLを作成してください。
今回は、sectionにside_tabというidを付けて全体を囲み、その中にtabboxというクラス名を付けてタブのボックス全体を囲むことにしましょう。なので、htmlは以下のようにしました。

これに対して、スタイルシートを設定していきます。クラス名のセレクタを準備しましょう。※まだプロパティーは何も設定していません。

プロパティーをコピー&ペーストする

この .tabbox のセレクタに対するプロパティーをDreamweaver[Extract]パネルのPSDファイルのCSSからコピーします。コピーしたら、それをDreamweaverのCSSにペーストします。こうすることで、プロパティーがコピーされました!

Dreamweaver PSD

この時、1つ注意しなければならないことが、背景に画像を使いたい場合など、背景画像の設定項目はコピーできないという点です。
背景画像に関しては、手動で設定する必要があります。

このようにして、必要なコーディングを行っていきます。
どんどん作業を進めて、全体の枠と、リボンが付いたタイトル、切り替え用のタブとその下のコンテンツを納める白いボックスの配置まで設定が完了したとします。

ここまでできたと仮定して、次は、テキストをペーストする方法を解説します。

Dreamweaver PSD

テキスト情報をペーストする

ExtractパネルのPSDのテキストをコピーするボタンをクリックしてください。すると、テキストがクリップボードにコピーされますので、これをHTMLやCSS側にペーストします。テキストがコピーされましたね!

Dreamweaver PSD

このようにして、Dreamweaverから読み込んだPSDファイルを使って、画像のダウンロードとCSSのコピー、テキスト情報のコピーができるようになりました。これだけですが、コーディング効率化にずいぶん役に立てられるのではないかと思います。

あとは、引き続き、このタブで切り替えるコンテンツのコーディングを進めて、HTMLとCSSが完成したら、タブを切り替えるためのJavaScriptをセッティングして完了です!

完成しました!

このサンプルHTMLはこちら

レスポンシブ対応のサンプルHTMLはこちら