Expression Webで用意されているテンプレート
Expression Webでは、25種類のWebサイトテンプレート、および9種類のCSSレイアウトテンプレートが用意されています。
Webサイトテンプレートは、［ファイル］-［新規作成］-［ページ］をクリックすると表示される［新規作成］ダイアログボックスの［Webサイト］タブで選択できます。イベント、小企業サイト、組織サイト、パーソナルWebサイトなど、豊富なテンプレートが用意されています。任意のWebサイトテンプレートを利用して適宜文字などを置き換えることで、すぐにWebサイトを完成させることができます。
 |
 |
 |
 |
 |
 |
CSSレイアウトテンプレートは、同様に［新規作成］ダイアログボックスの［ページ］タブで選択できます。CSSレイアウトテンプレートを利用することで、CSSが苦手な開発者の方でも簡単にレイアウトを行うことができます。
 |
 |
 |
 |
 |
 |
 |
 |
 |
スタイルシートの適用と管理
Expression WebはWeb標準に準拠したサイト構築ツールのため、基本的に書式はスタイルシートで定義します。例えば、部分的にテキスト「赤色」を選択して、その部分の文字色を赤に変えた場合、<span class="style1">赤色</span> といった感じになり、CSSクラススタイル「.style1」が生成されます。
また、自動生成されたスタイルが使われなくなった場合は、自動的に削除されるので、余分なスタイルシートが残ることはありません。なお、自動的に「.style1」など付けられたスタイルシートの名前は後で簡単に変更でき、変更されたスタイル名が使われた部分が自動更新されます。「スタイルシートはどうも苦手なんだけど……」という開発者にとって、Expression Webはとても使いやすいツールです。
［スタイルの適用］作業ウィンドウを使うと、一度作成したスタイルを他の部分に適用するのも簡単です。CSSスタイルのプレビューが表示されるので、必要なスタイルをスムーズに見つけられます。スタイルを適用するには、目的の部分を選択した状態で、適用したいスタイルを選びます。
また、CSSスタイルの一覧からCSSスタイルをポイントすると、そのコードがポップアップ表示されます。
スタイルを修正したい場合は、▼をクリックして［スタイルの変更］を選択し、［スタイルの変更］ダイアログボックスを表示します。下部のプレビューで確認しながら、スタイルを変更することができます。
さらに、そのスタイルが定義されているスタイルシートのコードに移動することもできます。▼をクリックして［コードに移動］を選択します。
［スタイルの管理］作業ウィンドウでは、CSSスタイルの順序を変更したり、定義場所を外部CSSファイルに移動したりすることもできます。下の図のようにドラッグ操作で、作業中のページに生成されたCSSスタイルを外部CSSファイルに簡単に移動できます。さらに、スタイルシートのクラス名を変更した場合は、そのスタイルが使われている部分の名前も自動的に書き換えられるため、リンク切れの心配がありません。
