DIV+CSS網(wǎng)站頁面制作綜合案例

一、DIV+CSS網(wǎng)站頁面制作綜合案例概述

本例制作的網(wǎng)站首頁，主要包括“公司介紹”、“圖片展示”、“新聞動態(tài)”、“網(wǎng)上預(yù)訂”、“溫馨客房”、“特色餐飲”和“會議會務(wù)”等欄目。

這個頁面豎直方向分為上、中、下三個部分，其中上下兩部分的背景會自動延伸，中間的內(nèi)容區(qū)域分為左右兩列，左列為主要欄目導(dǎo)航，右列是網(wǎng)站的公司介紹和圖片展示等正文內(nèi)容。這個頁面具有很好的用戶體驗，例如，左側(cè)導(dǎo)航菜單具有鼠標(biāo)指針經(jīng)過時發(fā)生變化的效果。

二、內(nèi)容分析

下面就來具體分析和介紹這個案例的完整開發(fā)過程。希望通過這個案例的演示，使讀者不但了解一些技術(shù)細(xì)節(jié)，而且能夠掌握一套遵從Web標(biāo)準(zhǔn)的網(wǎng)頁制作流程。

首先要確定一個問題，設(shè)計制作一個網(wǎng)站的第一步是什么?設(shè)計一個網(wǎng)頁的第一步是這個網(wǎng)頁的內(nèi)容。一個網(wǎng)站要想留住更多的用戶，最重要的是網(wǎng)站的內(nèi)容。網(wǎng)站內(nèi)容是一個網(wǎng)站的靈魂，內(nèi)容做得好，做到有自己的特色才會脫穎而出。當(dāng)然有一點需要注意的是不要為了差異化而差異化，只有滿足用戶核心需求的差異化才是有效的，否則跟模仿其他網(wǎng)站功能沒有實質(zhì)的區(qū)別。

網(wǎng)站的內(nèi)容是瀏覽者停留時間的決定要素，內(nèi)容空泛的網(wǎng)站，訪客會匆匆離去。只有內(nèi)容充實豐富的網(wǎng)站，才能吸引訪客細(xì)細(xì)閱讀，深入了解網(wǎng)站的產(chǎn)品和服務(wù)，進(jìn)而產(chǎn)生合作的意向。

在這個網(wǎng)站頁面中，首先要有明確的公司名稱或網(wǎng)站標(biāo)志，此外要給訪問者方便地了解這個網(wǎng)站信息的途徑，包括自身介紹、聯(lián)系方式等內(nèi)容的鏈接，接下來，這個網(wǎng)站的主要目的是宣傳公司，因此必須有清晰的導(dǎo)航結(jié)構(gòu)。

我們要制作的這個網(wǎng)站要展示哪些內(nèi)容呢?大致應(yīng)包括如下內(nèi)容。
●  標(biāo)題
●  導(dǎo)航欄
●  公司介紹
●  新聞動態(tài)
●  圖片展示
●  網(wǎng)上訂購
●  聯(lián)系信息
·其他導(dǎo)航信息

三、頁面方案設(shè)計

在設(shè)計任何一個網(wǎng)頁前，都應(yīng)該首先有一個構(gòu)思的過程，對網(wǎng)站的功能和內(nèi)容進(jìn)行全面的分析。在具體制作頁面之前，可以首先設(shè)計一個。接著對版面布局進(jìn)行細(xì)劃和調(diào)整，反復(fù)細(xì)劃和調(diào)整后確定最終的布局方案。

新建的頁面就像一張白紙，沒有任何表格、框架和約定俗成的東西，盡可能地發(fā)揮想象力．將想到的“內(nèi)容”畫上去。這屬于創(chuàng)造階段，不必講究細(xì)膩工整，不必考慮細(xì)節(jié)功能，只用粗陋的線條勾畫出創(chuàng)意的輪廓即可。盡可能地多畫幾張草圖，最后選定一個滿意的來創(chuàng)作。

接下來的任務(wù)就是使用Photoshop或Fireworks軟件來具體設(shè)計真正的頁面方案了。有經(jīng)驗的網(wǎng)頁設(shè)計者通常會在制作網(wǎng)頁之前設(shè)計好網(wǎng)頁的整體布局，這樣在具體設(shè)計過程中會胸有成竹，大大節(jié)省工作時間。

由于本書篇幅有限，因此關(guān)于如何使用Photoshop設(shè)計制作完整的頁面方案就不再詳細(xì)介紹了。如果讀者對Photoshop軟件不熟悉，可以參考專門的Photoshop書籍，掌握一些Photoshop軟件的基本使用方法。

就是在Photoshop中設(shè)計的頁面方案。這一步的核心任務(wù)是美術(shù)設(shè)計，通俗地說就是讓頁面更美觀、更漂亮。

四、定義頁面的整體樣式

網(wǎng)頁設(shè)計中我們通常需要統(tǒng)一網(wǎng)頁的整體風(fēng)格，統(tǒng)一的風(fēng)格大部分涉及網(wǎng)頁中文字屬性、網(wǎng)頁背景色以及鏈接文字屬性等，如果我們應(yīng)用CSS來控制這些屬性，會大大提高網(wǎng)頁設(shè)計速度，更加統(tǒng)一網(wǎng)頁總體效果。

建立文件后，首先要對整個頁面的共有屬Jf生進(jìn)行一些設(shè)置，例如對字體、margin、padding背景顏色等屬性進(jìn)行設(shè)置。

body{
margin：0；
padding：0；
line-height：1.5em；
background：#782609  url(images/templatemo_body_bg.jpg)repeat-x；
font-size：11px；
font-family：宋體；
}

在body中設(shè)置了外邊距margin、內(nèi)邊距padding都為O，行高line-height設(shè)為“1．5em”．字號設(shè)置為“l(fā)lpx”，并且設(shè)置字體設(shè)為宋體。

在body中使用background設(shè)置了水平背景圖像templatemo—body—bg．Jpg，這個圖像可以很方便地在設(shè)計方案圖中獲得，如果使用Photoshop軟件，可以切出一個豎條，可以切割得很細(xì)．減小文件的大小。在CSS中，repeat-x使這個背景圖像水平方向平鋪就可以產(chǎn)生寬度自動延俸的背景效果了。

五、DIV+CSS網(wǎng)站頁面制作綜合案例效果圖

六、【素材及源碼下載】

請點擊：網(wǎng)站頁面制作綜合案例 下載本實例相關(guān)素材及源碼