黃榮喜

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

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

中圖分類號：P393文獻(xiàn)標(biā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)頁。網(wǎng)頁設(shè)計(jì)的高效性與美觀性決定了網(wǎng)頁的瀏覽頻率，在開發(fā)設(shè)計(jì)過程中，如何美化網(wǎng)頁的設(shè)計(jì)是非常重要的一個(gè)過程，使用什么樣的方式與工具進(jìn)行開發(fā)也是非常重要。目前在網(wǎng)頁設(shè)計(jì)中，基本都是采用Dreamweaver CS，它是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動應(yīng)用程序的網(wǎng)頁設(shè)計(jì)軟件，其中在布局上主要包括的技術(shù)有CSS（Cascading Style Sheets）層疊樣式表的布局技術(shù)，表格與層，第三方構(gòu)件等，在網(wǎng)頁設(shè)計(jì)中DIV+CSS布局技術(shù)非常重要，是網(wǎng)頁開發(fā)設(shè)計(jì)者必須要掌握的，但對于一些程序設(shè)計(jì)不是很在行的人來說，它的開發(fā)設(shè)計(jì)具有一定的難度，如讓初學(xué)者也能設(shè)計(jì)出優(yōu)美的動態(tài)效果，就需要使用表格與CSS來進(jìn)行設(shè)計(jì)。這一設(shè)計(jì)開發(fā)，讓初學(xué)者更易于網(wǎng)頁開發(fā)的設(shè)計(jì)與應(yīng)用。

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

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

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

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

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

body{background-color：#6C6；}

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

2.2CSS選擇器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

結(jié)束語

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

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

參考文獻(xiàn)：

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

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

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

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

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