ウェブサイト(ホームページ)制作を仕事にするのブログ -4ページ目

今週は、Webサイトのナビゲーションについて。Homeや会社概要などの横並びのグローバルメニューや本文の横に配置したサイドメニューのことです。


一番手を抜いたと言う表現は悪いですが、なんの変化もないメニューです。ブラウザのデフォルトでマウスが指の形に変化するので、リンクがあるのは分かります。


次はやはり、ロールオーバーの機能を使ったページです。しかし、そのリンクのサイトに飛んで、違う位置にカーソルを持っていくと、マウスアウトの状態になって、そのメニューがダウンの状態であることが分かりません。私は、結構、違和感を感じます。また、利用されている方も、違和感と言うのか、なんだか頼りないような感じになるのではないでしょうか。「私はどこ」と言ったら、オーバーでしょうか?


そこで、ロールオーバーのマウスオーバーの状態、マウスアウトの状態、そしてセレクト(クリック)された状態の維持を実現できないかと考えていました。

因みに、ドリームウィーバーのCS4であれば、まだ、グローバルナビゲーション機能がありましたが、CS5.5には非推奨と言うことでこの機能はありません。昨日からこの問題を解決する方法を模索していました。検討したのは、jQueryの使用です。いくつかのサイトを参考にしましたが、ローカルの環境(Webサーバーを利用できない)では、なかなかテストができません。(現在、外で作業をしています。)


結論は、昔と同じく、ドリームウィーバーの機能でロールオーバーを実現し、リンクしたページでは、ロールオーバーの画像のみ置くことにしました。


今週の成果はありませんでしたが、こう言った試行錯誤も何かの役に立つことを信じて頑張っていきます。


来週は、phpを使った問い合わせフォームページについて投稿できればと考えています。


それでは。






こんにちは、


今日は、サイドメニューの横の本文のレイアウトについてです。


テキストと画像が並ぶと言うよく見かけるレイアウトです。以前、テキストと画像の上部の位置が揃えるのに戸惑ったことがありましたので、復習してみました。


結論は、Pタグを使用し、"float"プロパティにて設定するやり方に落ち着きました。

"img"に"align"プロパティを使用する方法など、昔は使っていたのではないかと思いますが。


要領は、直親Divの下に

<p>テキスト</p>

これをfloatプロパティで"left"に指定、widthの指定ももちろんです。

そして、

<p><img ------- /></p>

これをfloat プロパティで"right"に指定します。


次に出てくるDivタグに、回り込み解除のために、"Clear"プロパティ"both"を指定したら完了です。



パーツレイアウト

テーブルとあまり遜色なくかちっとしたレイアウトになったかと思っています。

このレイアウトもテーブルでレイアウトするのなら、何も考えなくてもできるですが、それを言っちゃおしまいですかね。


それでは。

現状、トップページは大体以下の通り、完成しています。



完成したトップページ


ここで、昨日の予告通り、HTMLとCSSの検証をしました。


1.HTMLのマークアップは、以下のサイトにて確認しました。


Markup Validation Service

http://validator.w3.org/

Tips:

“Validate by File Upload”のタブを選択すれば、ローカルにファイルを置いたままチェックできますよ。






---------------------------------------------------

This document was successfully checked as XHTML 1.0 Transitional!


ResultPassed

----------------------------------------------------


"Passed"、合格といわれると嬉しくなります。


参考までに、最初はエラーが多くでていました。大体20箇所位が、Javascriptの箇所でしたので、Javascriptを外部ファイル化するとその部分のエラーはなくなりました。あと、画像を使用し、ALT属性を記入しないと、エラーになるので、指定しました。


2.スタイルシートの検証



カスケーディングスタイルシート(CSS)を検証

http://jigsaw.w3.org/css-validator/#validate_by_upload





---------------------------------------------------

CSS 検証サービス検証結果 sample-layout.css (CSS レベル 3)

おめでとうございます! エラーはありません。

------------------------------------

こちらは、エラーがなければ、「おめでとうございます」です。嬉しい言葉ですね。

最初のエラーは、CSSファイル内に全角スペースが入っていたために発生しました。エディターで全角スペースを探し、事なきを得ました。


次回からのネタとしましては、PHPを使用した問い合わせフォーム、カレンダー設置、インフレームによる更新情報の設置などです。

簡単な説明では、ロールオーバーの作成、スワップイメージの作成なども記事にできればと考えております。


今回、3日続けて更新しましたが、次回更新は来週になるか、週なかに簡単なトピックの投稿ができればいいのですが。


それでは。