Web開發(fā)，如何設(shè)計頁面布局？

時間：2024-02-09 01:15:01 | 來源：網(wǎng)站運營

時間：2024-02-09 01:15:01 來源：網(wǎng)站運營

Web開發(fā)，如何設(shè)計頁面布局？：學(xué)習(xí)了常見的布局方案，將講解開發(fā)一個整頁的布局，從規(guī)劃到制作的整頁制作設(shè)計圖。如圖所示。

結(jié)構(gòu)劃分與公共樣式

首先確定整頁的結(jié)構(gòu)該如何劃分，這樣有利于后期分段進行處理，大概可劃分為頭部、導(dǎo)航、廣告、列表、信息、尾部等模塊。

然后提取整頁中公共部分的樣式，這樣做的好處是可以復(fù)用樣式代碼，節(jié)省代碼量，提高性能。如網(wǎng)頁中清除浮動的.clear樣式就是公共樣式，同樣CSS reset部分也是屬于公共部分的樣式。

結(jié)構(gòu)劃分和公共樣式都確定好后，可以先通過注釋的方式，把區(qū)域確定出來，方便后續(xù)操作。示例代碼如下。

網(wǎng)頁模塊命名規(guī)范

網(wǎng)頁模塊的命名，如果沒有統(tǒng)一的命名規(guī)范對其進行必要的約束（自由地命名），會使后續(xù)工作難以進行。因此，命名規(guī)范很重要，讀者應(yīng)予以重視。通常網(wǎng)頁模塊的命名需要遵循以下三個原則：

l 命名避免使用中文字符（如id=”內(nèi)容”）。

l 命名不能以數(shù)字開頭（如id=”1header”）。

l 命名不能使用關(guān)鍵字（如id=”div”）。

命名應(yīng)盡量用最少的字母表達含義，使之簡明、易懂。

在網(wǎng)頁開發(fā)中，常用駝峰式命名和帕斯卡命名兩種命名方式。其具體解釋如下所述。

l 駝峰式命名：除第一個單詞后面的單詞首字母都要大寫，其余小寫，如navOne。

l 帕斯卡命名：每個單詞之間用“_”連接，如nav_one。

下面列舉網(wǎng)頁中常用的一些命名。具體如表所示。

表 常用命名

模塊	命名	模塊	命名
頭部	header	標(biāo)簽頁	tab
內(nèi)容	content/container	文章列表	list
尾部	footer	提示信息	msg
導(dǎo)航	nav	小技巧	tips
子導(dǎo)航	subnav	欄目標(biāo)題	title
側(cè)欄	sidebar	加入	joinus
欄目	column	指南	guild
左右中	left right center	服務(wù)	service
登錄條	loginbar	注冊	regsiter
標(biāo)志	logo	狀態(tài)	status
廣告	banner	投票	vote
頁面主體	main	合作伙伴	partner
熱點	hot	CSS文件	命名
新聞	news	主要的	master.css
下載	download	模塊	module.css
菜單	menu	基本共用	base.css
子菜單	submenu	布局，版面	layout.css
搜索	search	主題	themes.css
友情鏈接	frIEndlink	專欄	columns.css
頁眉	header	文字	font.css
頁腳	footer	表單	forms.css
版權(quán)	copyright	補丁	mend.css
滾動	scroll	打印	print.css

頭部制作

頭部采用固定布局方案，通過Photoshop工具可測量出容器大小為950px。頭部包含logo和菜單兩部分，其HTML結(jié)構(gòu)實現(xiàn)，示例代碼如下。

logo的位置可以通過盒子模型的margin值來控制。菜單的父容器采用右浮動，菜單子項采用左浮動，這樣菜單可以采用整體靠右的形式進行排序。菜單項的文字與圖標(biāo)之間的空隙可以通過盒子模型的padding屬性來調(diào)整。

導(dǎo)航制作

導(dǎo)航部分采用混合布局方式，里面的內(nèi)容是固定布局，父容器是自適應(yīng)布局。導(dǎo)航分為左邊的主導(dǎo)航、右側(cè)的分享導(dǎo)航和下方的子導(dǎo)航。其實現(xiàn)HTML結(jié)構(gòu)。

主導(dǎo)航整體左浮動，分享導(dǎo)航整體右浮動。這里要注意，主導(dǎo)航有個選中的狀態(tài)，需要添加一個單獨的樣式，即active樣式。具體代碼如下。

整頁制作

廣告制作

廣告主要以圖片展示為主，HTML+CSS結(jié)構(gòu)都比較簡單，屬于一列布局方式，具體代碼如下。

展示效果如圖所示。

列表制作

列表屬于三列固定布局，采用浮動+固定寬的方式來實現(xiàn)。根據(jù)不同的展現(xiàn)內(nèi)容，采用合理的語義化標(biāo)簽展示。其實現(xiàn)HTML結(jié)構(gòu)，代碼示例如下。

代碼中用到一個CSS3中操作子項的方法，即nth-of-type，這個可以針對一組元素進行不同樣式的操作，此操作會在CSS3章節(jié)中進行詳細講解，這里暫時先使用一下。

信息制作

消息區(qū)域采用兩列固定布局來實現(xiàn)。一列靠左，一列靠右，這里HTML+CSS比較簡單。

尾部制作

尾部部分與導(dǎo)航部分類似，同樣采用混合布局方式，即內(nèi)容區(qū)域采用固定布局，父容器采用自適應(yīng)布局。