ホーム > コンピュータ > webツール > Expression Web 4 > 新しいサイトを作成する

ベクトルドロー・レベルゼロ+

ダイナミックwebテンプレートにメニューを実装します[Web]

新規作成日 2015-10-27
最終更新日

方針

Expresson Web 4の付属テンプレートを修正して、ダイナミックWebテンプレートの独自のテンプレートを作成します。

Expresson Web 4の付属テンプレートは、「XHTML 1.0 Transitional」で記述されていますので、大幅な変更が必要になります。

今回、Html5, css3で、レスポンシブデザインのテンプレートを作成したいと思います。

このページでは、このサイトで使用しているナビゲーションデザインをダイナミックwebテンプレートに実装します。

ナビゲーションデザイン

ページ内にナビゲーションをうまく設定すると、訪問者のサイト内の滞在時間が増え、複数のページを閲覧してくれる可能性が増加します。

訪問者に便利なナビゲーションを設定する必要があります。

しかし、ボタン型のナビゲーションでは、モバイル端末で表示する際、他のコンテンツを表示する領域が少なくなってしまいます。 そこで、開閉の可能な、ドロップダウンリストのメニューが採用できないか検討したいのですが、まずは、現行のサイトで使用しているメニューを実装します。

通常のメニュー

まずは、通常のドロップダウンリストです。参考のリンク記事で理解できなければ、書籍を参考にしたほうが良いかと思います。

PCやタブレット向けのサイトであれば、このメニューで十分です。利点は、cssだけで実現できます。

参考:

CSSだけで作る動きのあるドロップダウンメニュー(外部サイト)

現在のサイトのメニューバーをそのまま流用します。

現在のサイトは、通常のメニューを使用していますので、そのまま流用します。

現在のサイトのメニューバーをそのまま流用したサンプルページ

現在のサイトのメニューバーをそのまま流用したサンプルページをダイナミックWebテンプレートにしたもの

現在のサイトのcss

cssは、現行のサイトで使用しているcssそのままです。このテンプレートでは、使用していないスタイルシートが含まれています。

レスポンシブWebデザイン入門 ~マルチデバイス時代のWebデザイン手法~

書籍販売サイトにリンクしています。

詳しい説明が必要な方、さらに良く知りたい方は、こちらの本を読まれることをお勧めします。p290-291

まずはここまで

現行のサイトとほぼ同じデザインのExpresson Web 4のダイナミックwebテンプレートが作成できました。

デザインのデザインの改善も行いたいと思いましたが、少し時間がかかりそうなので、このテンプレートを使用して、現行のサイトのカテゴリーの一部を移行していこうと思います。

Copyright (C) 2011-2016 kukekko All Rights Reserved.
kukekko@gmail.com
ご連絡の際はアドレスの@は半角にしてください。 また、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません 」。
inserted by FC2 system