Dreamweaverでスマートフォンサイト作成6

レイアウトグリッドを使ったナビボタン

今日は、レイアウトグリッドを使って、ナビボタンを作成してみたいと思います。1行5列でレイアウトグリッドを作成します。

レイアウトグリッド内の文字を削除して、事前に作成しておいた60×60pxの画像をそれぞれのブロックへドラッグします。

ドラッグした画像にアンカーリンクを設定してみます。一覧画像の前に<a href=”#page2″>を、画像の後ろに</a>を入力します。同じように検索画像の前に<a href=”#page3″>と後ろに</a>を、新規画像の前に<a href=”#page4″>と後ろに</a>を入力します。

訂正画像と削除画像用のページは作成していないので、そのまま何も入力しません。Device Centralで表示してみます。

ただし、携帯を横にするとナビボタンのレイアウトが崩れます。

そこで少し工夫してみます。画像をクリックして、プロパティの幅を『100%』に変更します。高さはもとの60pxのままにしておきます。

すると今度は、縦でも横でもきちんと均等に配置されます。

ちょっと風変わりなナビボタンが出来ました。皆さんも工夫してみるとおもしろい使い方が出来ると思います。おもしろい使い方があれば紹介してください。

今日はここまでにします。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ