CSS與表格布局在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

黃榮喜

摘要：【目的】利用CSS與表格在網(wǎng)頁(yè)設(shè)計(jì)中的布局，進(jìn)行對(duì)網(wǎng)頁(yè)的優(yōu)化設(shè)計(jì)，增加網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)態(tài)效果?！痉椒ā筷U述表格結(jié)合CSS布局的重要性，分析了表格布局的優(yōu)缺點(diǎn)，以及通過(guò)設(shè)置以及分析設(shè)置CSS結(jié)合表格在網(wǎng)頁(yè)設(shè)計(jì)中的布局。【結(jié)果】CSS的應(yīng)用提高了網(wǎng)頁(yè)的布局效果與設(shè)計(jì)效率，并增添了網(wǎng)頁(yè)設(shè)計(jì)中的動(dòng)態(tài)效果。【結(jié)論】在網(wǎng)頁(yè)的布局與設(shè)計(jì)中，表格與CSS樣式結(jié)合使用，有利于豐富網(wǎng)頁(yè)的設(shè)計(jì)效果。

關(guān)鍵詞：表格布局；CSS；網(wǎng)頁(yè)設(shè)計(jì)

中圖分類(lèi)號(hào)：P393文獻(xiàn)標(biāo)識(shí)碼：文章編號(hào)：1003-4374（2017）02-0027-03

Abstract：【Objective】o optimize the design of web pages by applying the layout of CSS and tables in web design， and to increase the dynamic effect in Web design.【Method】he importance of the form combined with CSS layout is expounded， and the advantages and disadvantages of the table layout are analyzed.he layout of the CSS collection table in the web design is also analyzed.【Results】he application of CSS can improve the layout and design efficiency of web pages， and increase the dynamic effect of web design.【Conclusion】In the layout and design of the web page， the combination of the form and the CSS style is helpful to enrich the design effect.

Key words：able layout；CSS；Web design

1引言

隨著網(wǎng)絡(luò)信息化時(shí)代的發(fā)展，網(wǎng)絡(luò)的重要性不言而喻，網(wǎng)絡(luò)上信息化的主要載體就是網(wǎng)頁(yè)。網(wǎng)頁(yè)設(shè)計(jì)的高效性與美觀性決定了網(wǎng)頁(yè)的瀏覽頻率，在開(kāi)發(fā)設(shè)計(jì)過(guò)程中，如何美化網(wǎng)頁(yè)的設(shè)計(jì)是非常重要的一個(gè)過(guò)程，使用什么樣的方式與工具進(jìn)行開(kāi)發(fā)也是非常重要。目前在網(wǎng)頁(yè)設(shè)計(jì)中，基本都是采用Dreamweaver CS，它是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件，其中在布局上主要包括的技術(shù)有CSS（Cascading Style Sheets）層疊樣式表的布局技術(shù)，表格與層，第三方構(gòu)件等，在網(wǎng)頁(yè)設(shè)計(jì)中DIV+CSS布局技術(shù)非常重要，是網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)者必須要掌握的，但對(duì)于一些程序設(shè)計(jì)不是很在行的人來(lái)說(shuō)，它的開(kāi)發(fā)設(shè)計(jì)具有一定的難度，如讓初學(xué)者也能設(shè)計(jì)出優(yōu)美的動(dòng)態(tài)效果，就需要使用表格與CSS來(lái)進(jìn)行設(shè)計(jì)。這一設(shè)計(jì)開(kāi)發(fā)，讓初學(xué)者更易于網(wǎng)頁(yè)開(kāi)發(fā)的設(shè)計(jì)與應(yīng)用。

2CSS樣式表與選擇器的概述

CSS在網(wǎng)頁(yè)設(shè)計(jì)中的作用非常重要，基本每一個(gè)優(yōu)美的網(wǎng)頁(yè)，都離不開(kāi)它。它對(duì)網(wǎng)頁(yè)中元素的精確定位、內(nèi)容的控制與分離、網(wǎng)頁(yè)修改的快捷，都起到了很好的作用。

CSS主要是將網(wǎng)頁(yè)的頁(yè)面設(shè)計(jì)分離開(kāi)來(lái)，通過(guò)運(yùn)行后的代碼來(lái)進(jìn)行控制頁(yè)面，起到很好的美化效果。CSS主要分兩種方法來(lái)進(jìn)行設(shè)計(jì)，第一種：是通過(guò)程序代碼來(lái)進(jìn)行設(shè)置。這就要求網(wǎng)頁(yè)設(shè)計(jì)者具有一定的網(wǎng)頁(yè)設(shè)計(jì)經(jīng)驗(yàn)，對(duì)代碼的設(shè)計(jì)比較熟悉。第二種：主要是通過(guò)CSS的界面進(jìn)行設(shè)置。這種設(shè)計(jì)的優(yōu)點(diǎn)是既能達(dá)到第一種的相同效果，又比較簡(jiǎn)單容易，只要通過(guò)界面的一些基本操作就能達(dá)到相關(guān)的效果，對(duì)廣大初學(xué)者來(lái)說(shuō)，是一種比較方便有效的方法。無(wú)論使用哪一種方法，都是將網(wǎng)頁(yè)中的內(nèi)容與相關(guān)的布局進(jìn)行分離，將CSS代碼從中隔離出來(lái)[1]，對(duì)頁(yè)面進(jìn)行控制。CSS的共享調(diào)用機(jī)制，使得網(wǎng)頁(yè)的設(shè)計(jì)更加小巧，大大的減少了網(wǎng)頁(yè)加載的冗余度，加快了網(wǎng)頁(yè)的下載速度。

2.1CSS的結(jié)構(gòu)樣式

CSS的編輯比較方便，在任何編輯軟件中都能打開(kāi)，大家一般比較喜歡使用記事本軟件，用它來(lái)進(jìn)行編輯比較方便快捷。CSS樣式主要由兩個(gè)部分組成即：選擇器與屬性[2]。具體表現(xiàn)如下：

body{background-color：#6C6；}

這是一個(gè)簡(jiǎn)單的頁(yè)面顏色設(shè)置效果，也可以對(duì)其進(jìn)行美化，加入更多的CSS屬性設(shè)置。

2.2CSS選擇器

CSS選擇器主要包括四種即：類(lèi)、標(biāo)簽、ID、復(fù)合內(nèi)容。不同的選擇器代表了不同的操作類(lèi)別，比如說(shuō)常用的類(lèi)選擇器，主要通過(guò)相關(guān)的一些設(shè)置來(lái)達(dá)到想要的效果，可以精確的控制某個(gè)元素的具體樣式。例如：

.a1 {font-size：16px；color：#F00；text-align：center；}

這個(gè)就是類(lèi)的選擇器樣式，它體現(xiàn)了樣式.a1具有字體大小為16個(gè)像素，顏色為紅色，文字的位置為居中等效果。

在采用CSS布局的過(guò)程中，主要是考慮網(wǎng)頁(yè)設(shè)計(jì)的結(jié)構(gòu)，在結(jié)構(gòu)確定后的情況下，就需要定義相關(guān)的網(wǎng)頁(yè)元素，最后通過(guò)結(jié)構(gòu)模式把整個(gè)網(wǎng)頁(yè)架構(gòu)起來(lái)。因此，在搭建網(wǎng)頁(yè)中，必須要確定網(wǎng)頁(yè)中顯示的內(nèi)容，并根據(jù)網(wǎng)頁(yè)的布局來(lái)設(shè)計(jì)相關(guān)的一小塊，只有這樣網(wǎng)頁(yè)設(shè)計(jì)才會(huì)整齊統(tǒng)一。

3表格在網(wǎng)頁(yè)設(shè)計(jì)中的布局

表格在網(wǎng)頁(yè)中的使用，是非常簡(jiǎn)單普遍的。很多的網(wǎng)頁(yè)都是采用表格來(lái)進(jìn)行搭建，表格在網(wǎng)頁(yè)中的布局，它主要是方便，快捷，但美觀度有所欠缺。

3.1表格在網(wǎng)頁(yè)設(shè)計(jì)中的優(yōu)點(diǎn)endprint

在網(wǎng)頁(yè)設(shè)計(jì)中，表格的整體排版效果是非常好的，整個(gè)頁(yè)面比較整齊，也很容易把網(wǎng)頁(yè)設(shè)計(jì)中的相關(guān)要素體現(xiàn)出來(lái)，對(duì)網(wǎng)頁(yè)的分塊劃分起到很好的效果[3]。在Dreamweaver中，頁(yè)面中的主要設(shè)計(jì)都是通過(guò)表格來(lái)完成，后期需要體現(xiàn)的效果可以通過(guò)其他方面的美化來(lái)完成。表格的嵌套或拆分設(shè)置，都是很容易做到，在內(nèi)容的顯示上也比較容易控制，例如在不同的瀏覽器上，表格的顯示是比較容易做到，并且可以根據(jù)顯示器的大小不同，來(lái)進(jìn)行對(duì)網(wǎng)頁(yè)的縮放顯示，它顯示的位置都是相對(duì)的，也具有很好的兼容性。表格在網(wǎng)頁(yè)中的設(shè)計(jì)，也由于表格的整體性，在一些細(xì)微的地方以及操作上還不夠細(xì)化，在內(nèi)容的設(shè)計(jì)表現(xiàn)上還不夠豐富。

3.2表格在網(wǎng)頁(yè)設(shè)計(jì)中需注意的問(wèn)題

在網(wǎng)頁(yè)設(shè)計(jì)中，利用表格排版的時(shí)候，最忌諱的就是在整個(gè)網(wǎng)頁(yè)中使用一個(gè)表格，表面上這樣比較統(tǒng)一整齊，但實(shí)際上這樣不利于網(wǎng)頁(yè)下載瀏覽，網(wǎng)頁(yè)的完全顯示，要等網(wǎng)頁(yè)中的一個(gè)表格全部顯示出來(lái)了，才能打開(kāi)整個(gè)頁(yè)面，這樣就影響到了網(wǎng)頁(yè)打開(kāi)的速度，不利于網(wǎng)頁(yè)瀏覽。在使用表格設(shè)計(jì)的過(guò)程中，一定要?jiǎng)澐趾孟嚓P(guān)的模塊，然后通過(guò)分割表格的方式進(jìn)行布局，把一個(gè)表格拆分成很多個(gè)小的表格，有利于加快網(wǎng)頁(yè)的下載。在網(wǎng)頁(yè)設(shè)計(jì)中，表格的嵌套也不能太多，一般三層嵌套就足夠了，太多的嵌套，也會(huì)影響網(wǎng)頁(yè)的加載速度。

4網(wǎng)頁(yè)中CSS結(jié)合表格的布局

表格結(jié)合CSS的使用是網(wǎng)頁(yè)設(shè)計(jì)中必不可少的，下面就用一個(gè)簡(jiǎn)單網(wǎng)頁(yè)的設(shè)計(jì)來(lái)闡述如何在網(wǎng)頁(yè)中使用CSS與表格的結(jié)合布局[4]。首先構(gòu)思好網(wǎng)頁(yè)的布局，把網(wǎng)頁(yè)劃分為幾個(gè)部分，如網(wǎng)頁(yè)的Logo導(dǎo)航條，主要板塊內(nèi)容等。具體如下圖所示：

主要的設(shè)計(jì)步驟如下：

（1）建立一個(gè)html網(wǎng)頁(yè)文件，在網(wǎng)頁(yè)界面中插入相關(guān)的表格，并編輯好相關(guān)的模塊。

（2）在網(wǎng)頁(yè)中的“發(fā)表意見(jiàn)，評(píng)分，與我們聯(lián)系處（稱(chēng)之為A處），建立一個(gè)以表格與CSS結(jié)合應(yīng)用的一個(gè)模塊，設(shè)置相關(guān)的動(dòng)態(tài)效果。

（3）在A處嵌套一個(gè)表格，并把表格的名稱(chēng)，命名為Nav，在Nav中輸入：“發(fā)表意見(jiàn)，評(píng)分，與我們聯(lián)系，即A處。

（4）選中Nav，并在CSS樣式處，打開(kāi)CSS樣式，創(chuàng)建一個(gè)CSS樣式。在選擇器類(lèi)型：選擇復(fù)合內(nèi)容，在選擇器名稱(chēng)處輸入：#Nav a：hover，表示鼠標(biāo)放上去具有什么樣的效果。在選擇定義規(guī)則的位置處，選擇僅限該文檔，具體如圖2所示：

（5）進(jìn)入到CSS規(guī)則定義中，對(duì)相關(guān)的效果進(jìn)行設(shè)置，如：背景，區(qū)塊，邊框，方框等設(shè)置成想要的效果即可，如圖3所示：

所有的設(shè)置完成后，效果就出來(lái)了，當(dāng)把鼠標(biāo)放在A處，即效果如圖4所示：

通過(guò)以上的網(wǎng)頁(yè)設(shè)計(jì)制作，CSS與表格的結(jié)合使用，其效果是很明顯的，在網(wǎng)頁(yè)的瀏覽中增添了不少的風(fēng)采。

結(jié)束語(yǔ)

在網(wǎng)頁(yè)設(shè)計(jì)中，網(wǎng)頁(yè)中元素的定位以及網(wǎng)頁(yè)的美化效果是必不可少的，通過(guò)以上的論述可知，網(wǎng)頁(yè)中的CSS能起到很好的定位與美化動(dòng)態(tài)效果，并實(shí)現(xiàn)了內(nèi)容與代碼的獨(dú)立使用。CSS也可以使用外部鏈接的效果來(lái)實(shí)現(xiàn)，外部鏈接的效果可以在多個(gè)網(wǎng)頁(yè)中使用，能起到了共享的作用，減少了網(wǎng)頁(yè)代碼的冗余度，加快了網(wǎng)頁(yè)的運(yùn)行速度。本文中使用的是僅限于本文檔中的使用，即內(nèi)部的CSS使用方式。

總之，CSS技術(shù)使用非常的廣泛，利用它在網(wǎng)頁(yè)中進(jìn)行設(shè)置，可以收到很好的美化網(wǎng)頁(yè)的效果，而且隨著CSS技術(shù)的不斷進(jìn)步，使得網(wǎng)站的開(kāi)發(fā)效率得到了很大的提升。因此，CSS樣式與表格的結(jié)合布局為網(wǎng)頁(yè)的建設(shè)增添了豐富的效果。

參考文獻(xiàn)：

[1]溫盛萍.DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用.信息化建設(shè)，201，（10）：7.

[2]周金容.網(wǎng)頁(yè)制作過(guò)程與技巧.軟件導(dǎo)刊，2016，（6）：149-11.

[3]陳靜.基于項(xiàng)目驅(qū)動(dòng)法的網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)課程課堂教學(xué)改革探索.人才資源開(kāi)發(fā)，201，（20）：186-187.

[4]李念.網(wǎng)頁(yè)設(shè)計(jì)中的DIV+CSS技術(shù)應(yīng)用研究.軟件導(dǎo)刊，2013，（3）：137-138.

李玉榮.淺談DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用.電子制作，201，（3）：8.endprint