FrontPage2003【ダイナミックWebテンプレートでホームページ作成】022：ダイナミックWebテンプレートにCSSを適用する(1)

【FrontPage2003ダイナミックWebテンプレートでホームページ作成】022：ダイナミックWebテンプレートにCSSを適用する（1）

画像のテーマを適用したものの、サーバーが遅いと、メニュー表示自体に時間がかかったり、全体のボリュームが一気に増えたりします。画像を軽くするために、シンプルな一色バナーも試みました、それなら、CSSで代用したほうがすっきりします。作るのは、以下のようなものです。それぞれのリンクにマウスをあててみてください。分かりやすいように枠線を表示してあります。

青チーム

赤チーム

黄チーム

青チーム

赤チーム

黄チーム

青チーム

赤チーム

黄チーム

No.	簡単な説明	操作画像（クリック→拡大ウィンドウ表示）
257	demoweb2を開きます
258	template.dwt（トップページ用のダイナミックWebテンプレート）を開いて、3つのナビゲーションをそれぞれ選択し、それぞれ削除します（右図は削除した後のものです）
259	blue.htmをクリックしたまま、引きずります（ドラッグ）
260	削除したナビゲーションのあったセル内で、離します（ドロップ）
261	blue.htmへのリンクができました
262	red.htm、yellow.htmも同様にします
263	セル3行を選択します →書式設定ツールバーの中央揃えをクリックします
264	セル3行を選択します →書式設定ツールバーの下線をクリックします →下線設定が消えます
265	セル3行を選択します →書式設定ツールバーの太字をクリックします
266	セル3行を選択します →表ツールバーの上下中央そろえをクリックします
267	セル3行を選択します →表のプロパティを見ます
268	以下の設定をして、OKをクリックしますセル内のスペース＝0 セル間のスペース＝0 枠線サイズ＝1（分かりやすくするためだけで、後で0にする）
269	セル3行を選択します →セルのプロパティを見ます
270	高さを150%にして（1.5行分）、OKをクリックします
271	青チームのハイパーリンクのプロパティを見ます
272	スタイルをクリックします
273	クラスのところに、 demo2-blue と入力してOKをクリックします（名前は半角英数で何でもOKですが、後で関係してきますので、必ずこれにしてください）
274	OKをクリックします
275	同様にして、赤チームのクラスを demo2-red と設定します（名前は半角英数で何でもOKですが、後で関係してきますので、必ずこれにしてください）
276	同様にして、黄チームのクラスを demo2-yellow と設定します（名前は半角英数で何でもOKですが、後で関係してきますので、必ずこれにしてください）
277	上書き保存します
278	まだ、更新しませんので、いいえをクリックします

ナビメニュー