世界中の１％の人々へ

Expression Web 優待アップグレード版が手元に届いたから、前回に続き、Expression Webについて書くことにする。

Expression Webには、IDを使った、基本レイアウトのテンプレートが用意されていて、この機能を使えばCSSがいまいち理解できない人でも、XHTML＋CSSでレイアウトが行えるだろう。

やり方はすごく簡単だ。Expression Webを立ち上げたら、まず、新規作成> ページ> CSSレイアウトを選ぶ。

[CSSレイアウト]を選ぶと、いくつかのサンプルが表示されるので、とりあえず、[ヘッダー、ナビゲーション、２列、フッター]を選択してみる。

デザインビューやコードビューを見れば、先ほどのテンプレートが読み込まれているのがわかる。

背景色をつけて、各ブロックに文字を入れ、わかりやすくしてみた。

ヘッダー, ナビゲーション バー, 2 列, フッターのレイアウトの基本できあがり。すごく簡単。

メニューから呼び出すテンプレートをカスタマイズする

ここからが本題。上記テンプレートはなにぶん中途半端であり、XML宣言もmeta情報も入ってない。XHTML＋CSSに詳しい方には不満があるであろう。

そこで、XHTML＋CSSに自信のある方は、メニューから呼び出せるテンプレートをカスタマイズしてみよう。

たとえば、上記テンプレートなら
C/Program Files/Microsoft Expression/Templates/1041/CSSLayouts12/lay2.tem/
の中にファイルがある。

lay2.temフォルダーを開けると下記のファイルが入っている。

lay2.htm…HTMLファイル
lay2.css…CSSファイル
lay2.dib…表示画像
lay2.inf…[CSSレイアウト]で表示される、テンプレートのタイトルと、説明の文章
※拡張子.dibはDIB（Device Independent Bitmap）、「.bmp」と同じ形式でDTPの分野で多様される画像フォーマット
※拡張子.infは、Microsoft社のOS「Windows」で使われる各種設定情報が入っているファイル

おわかりのように、すべてファイル名はlay2.拡張子に統一されている。

早速、カスタマイズを行ってみよう。

1. フォルダー名の変更

ひとまず、lay2.temフォルダーをコピーして名前をlay2b.temに変更。
※フォルダー名は英数字ならなんてもいいと思うが、試してはいない

2. HTMLファイルの編集

lay2b.temフォルダ内のlay2.cssを任意の編集を行った後に、ファイル名をlay2b.htmに変更。

3. CSSファイルの編集

lay2b.temフォルダ内のlay2.htmを任意の編集を行った後に、ファイル名をlay2b.cssに変更。

4. 画像ファイルの編集

lay2.dibをPhotoshopや、Fireworks等のBMPファイルの編集できる画像ツールで開いて加工し、BMP24で保存した後、名前をlay2b.dibに変更する。元画像である、lay2.dibは不要なので削除。

5. 各種設定情報ファイルの変更

lay2.infファイルを秀丸や、CrescentEve等のテキストエディタで開くを下記のように文章が書いてある。

[info]
_lcid=1041
_version=12.0.0000.0
title=ヘッダー, ナビゲーション バー, 2 列, フッター
description=ヘッダー、ナビゲーション バー、2 列、およびフッターを含むページ レイアウトを作成します。
contributorModeRequirements=AllowCreatingCSSFiles

文字の赤い箇所を書き換えて保存し、lay2b.infにファイル名を変更。

これで準備は整ったので、Expression Webを立ち上げる。

新規作成> ページ> CSSレイアウトを選ぶと、上記のようにカスタマイズCSSが表示される。

とても便利:-)

なお、言うまでもないけど、この手のカスタマイズはあくまでも個人の責任で負える方のみ行ってほしい。
改造して新規作成が表示されない場合は、元にもどせば正常に動作する。

参考になれば、幸い。 

投稿者: Dakiny 日時: 2007年6月12日 05:13 |   |   |   | パーマリンク | コメント(0)  | トラックバック (0)

トラックバック

このエントリーのトラックバックURL:
http://www.dakiny.com/mtos/mt-tb.cgi/1447
※文章内容と関係のないトラックバックは固くお断り。