当サイトは、インターネットエクスプローラーのセキュリティを「高」、プライバシーを「すべてのCookieをブロック」にすると、サクサク表示され、クリックしても安全です。
ソホネット(宝塚/パソコン家庭教師・ホームページ作成運営代行・パソコン関連事務代行)

【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 まだ、更新しませんので、いいえをクリックします
ナビメニュー
 
累計