CSSレイアウトテンプレートからの新規作成
Expression Webでは、代表的なCSSレイアウトテンプレートが用意されています。これを利用してCSSレイアウトデザインページを作成していきます。
- ［ファイル］-［新規作成］-［ページ］をクリックします。
- ［新規作成］ダイアログボックスの［ページ］タブが開くので、左ペインの［CSSレイアウト］を選択すると、CSSレイアウトの一覧が表示されます。
- 目的のCSSレイアウトテンプレートを選択し、［OK］ボタンをクリックします。
［新規作成］ダイアログボックスの「CSSレイアウト」の一覧から選択し、［OK］ボタンをクリック
CSSレイアウトテンプレートをもとに新規作成を実行すると、未保存のCSSファイルにリンクされた未保存のWebページが生成され、下の図のように、いずれのファイルも開いた状態になります。
CSSレイアウトテンプレートから生成した直後の画面
新規作成された未保存のWebページ「Untitled_1.htm」のコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>無題 1</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="Untitled_1.css" /> </head> <body> <div id="masthead"> </div> <div id="top_nav"> </div> <div id="page_content"> </div> <div id="footer"> </div> </body> </html>
新規作成された未保存のCSSファイル「Untitled_1.css」のコード
/* CSS レイアウト */
#masthead {
}
#top_nav {
}
#page_content {
}
#footer {
}
ここから、それぞれのCSSスタイルに変更を加えて、フォントサイズや背景色といった書式を変更していきます。
右側の［スタイルの適用］作業ウィンドウから、変更したいスタイルの右にある▼をクリックして［スタイルの変更］を選択すると、［スタイルの変更］ダイアログボックスが表示されます。そこで書式の設定を行います。具体的にCSSスタイルを変更していく方法については、ここでは割愛します。
［スタイルの変更］ダイアログボックス
ダイナミックWebテンプレートとして保存
ベースとなるレイアウトが選択できたら、未保存のWebページ「Untitled_1.htm」をダイナミックWebテンプレート「master.dwt」として保存します。その後、続けてCSSファイルに対しても保存を促すダイアログボックスが表示されるので、CSSファイルの保存も同時に行います。
- ［ファイル］-［名前を付けて保存］をクリックします。
- 「Untitled_1.htm」に対する［名前を付けて保存］ダイアログボックスにて、［ファイルの種類］を「ダイナミックWebテンプレート」にします。ファイル名を入力して、［保存］ボタンをクリックします。
- 続いて、「Untitled_1.css」に対する［名前を付けて保存］ダイアログボックスにて、［ファイルの種類］が「Webページ」になっているので「CSSファイル」にします。ファイル名を指定して、［保存］ボタンをクリックします。
ダイナミックWebテンプレート形式で「master.dwt」として保存する
CSSファイル形式で「style.css」として保存する
ダイナミックWebテンプレートとCSSファイルが保存された
ダイナミックWebテンプレートとして保存すると、自動的にページタイトル部分が編集可能領域名「doctitle」として設定され、ダイナミックWebテンプレートを適用したWebページにおいてページタイトルが設定できるようになります。
ダイナミックWebテンプレートとして保存した後のコード
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- #BeginEditable "doctitle" --> <title>無題 1</title> <!-- #EndEditable --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="masthead"> </div> <div id="top_nav"> </div> <div id="page_content"> </div> <div id="footer"> </div> </body> </html>
