ホームページを作ってみよう!

| コメント(0) | トラックバック(0)

ドリームウィバーCS4の環境設定とサイト作成時の設定が終わったら

ここで作った、index.htmlとcssのフォルダを「HP基本土台」とします。

これを基本にホームページを作ってみよう!

 

WireFrame.jpgのサムネール画像 

「HP基本土台」をサイト用フォルダにコピー

サイトを作成  index.htmlを開く

bodyの新規CSSを作成  size 16 color #333

wrapper div挿入ー新規CSS作成 

ボックス width800 height800(後でautoに変更)

header  div挿入ー新規CSS作成

背景 800の画像を背景に指定 ここでは、header-bg.jpg

ボックス width800 height150(画像の高さに合わせる)

位置 position  relative(相対置)

   ■logo div挿入ー新規CSS作成(会社のロゴを背景の上に)

   位置 position absolute(絶対値)

   placement top 46  left 124(表示したい位置のサイズ)

    ■logologo画像を挿入それを選択して<h2>に指定

 

headerのdivの中にlogoのdivを作り、その中にh2で画像をくくっている。

タグで書くとこんな感じで~~す!

******************************************************************

    <div id="header">

  <div id="logo">

   <h2><img src="img/logo.png" width="250" height="42" alt="吉建" /></h2>

  <!--/logo--></div>

  <!--/header-->

 </div>

******************************************************************

navBox  div挿入ー新規CSS作成

ボックス width800 height auto

HOME

展示会

資料請求

会社概要

アクセス

お問い合わせ  を記入し(改行しながら記入するとPタグで囲まれる)

すべてを選択し、リストをクリック(プロパティインスペクターのリスト)

<P>タグで囲まれていたのが、ul liに変わる。

ul 新規CSSを作成 ボックス width 798  height 36

          border left right 共に 

          sollid(実線)1ピクセル color 028bcf

          メニューの端にブルーの線を入れるのでwidth 800

li 新規CSSを作成  ボックス float left

a 新規CSSを作成  color FFF 背景 but4.jpg(ブルーに文字は白)

           no-repeat   text align  center  

           ブロック Display block ボックス width 133

                height 26(画像の高さ)padding 10

a:hover 新規CSSを作成 

    color 039 背景 but4-b.jpg(水色に文字はブルー)no-repeat

 

ここまでで一日のお時間となりました。約4時間 

wrapper・header・navの設定が出来上がりました。

ヘッダーの画像にロゴがのって、その下にメニューが横並び

オンマウスにすると濃いメニュー画像が、水色の画像に変わる。

「お問い合わせ」がオンマウスになった時の色

 

topimg-s.jpg 

トラックバック(0)

トラックバックURL: http://nc-works.jp/mmtt/mt-tb.cgi/32

コメントする

2017年6月

        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

このブログ記事について

このページは、studyが2011年7月18日 21:24に書いたブログ記事です。

ひとつ前のブログ記事は「Googleプレイス」です。

次のブログ記事は「ホームページのナビ(メニュー)に背景画像を入れてテキストを隠す方法」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

ウェブページ

Powered by Movable Type 5.2