網(wǎng)頁(yè)設(shè)計(jì)教學(xué)中表格與層的應(yīng)用研究

【摘 要】本文以就業(yè)信息管理平臺(tái)為例，研究網(wǎng)頁(yè)設(shè)計(jì)中表格與層的應(yīng)用，提出表格與層可以讓網(wǎng)頁(yè)的布局整齊美觀(guān)，將網(wǎng)頁(yè)中的文字、圖片、動(dòng)畫(huà)等眾多元素有條理地統(tǒng)一組織起來(lái)。雖然表格的使用整體上是好的，但在一些細(xì)節(jié)的美化上表格的設(shè)計(jì)就難以做到，這就要采用層來(lái)搭配表格的設(shè)計(jì)解決相應(yīng)的排版美化問(wèn)題。

【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì) 表格 層 就業(yè)信息管理平臺(tái)

【中圖分類(lèi)號(hào)】G 【文獻(xiàn)標(biāo)識(shí)碼】A

【文章編號(hào)】0450-9889（2017）03C-0191-02

隨著信息技術(shù)的日新月異，網(wǎng)頁(yè)設(shè)計(jì)的重要性也逐漸凸顯，如何快速、方便地設(shè)計(jì)出相關(guān)的網(wǎng)頁(yè)、網(wǎng)站就顯得非常重要。在網(wǎng)頁(yè)設(shè)計(jì)與制作的教學(xué)過(guò)程中，如何讓學(xué)生快速地掌握網(wǎng)頁(yè)設(shè)計(jì)的一些排版技巧是非常有必要的。因此，筆者結(jié)合網(wǎng)頁(yè)設(shè)計(jì)與制作教學(xué)中的一些體會(huì)，并通過(guò)就業(yè)信息管理平臺(tái)的設(shè)計(jì)案例，探索網(wǎng)頁(yè)設(shè)計(jì)中表格與Ap Div（層）的排版設(shè)計(jì)技巧。

一、Dreamweaver cs簡(jiǎn)介

Dreamweaver cs是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)設(shè)計(jì)軟件。目前，最新的版本為Dreamweaver CC，網(wǎng)頁(yè)設(shè)計(jì)軟件的功能強(qiáng)大。對(duì)網(wǎng)頁(yè)的瀏覽已經(jīng)是我們生活中的不可分割的一部分，網(wǎng)頁(yè)作為網(wǎng)絡(luò)信息傳播的主要載體，其設(shè)計(jì)也為大家所關(guān)注。網(wǎng)頁(yè)設(shè)計(jì)軟件的種類(lèi)有很多，但最出名、最專(zhuān)業(yè)的網(wǎng)頁(yè)設(shè)計(jì)工具，非Dreamweaver莫屬。它是著名的“所見(jiàn)即所得”的可視化網(wǎng)站開(kāi)發(fā)工具，目前的網(wǎng)頁(yè)設(shè)計(jì)幾乎都采用Dreamweaver來(lái)設(shè)計(jì)。Dreamweaver不僅提供了強(qiáng)大的網(wǎng)頁(yè)編輯功能，而且還提供了網(wǎng)頁(yè)的上傳工具。利用FTP進(jìn)行大文件的傳輸，節(jié)省了文件的傳輸時(shí)間，它是一個(gè)集網(wǎng)頁(yè)創(chuàng)作和文件傳輸管理等多功能的設(shè)計(jì)工具。

二、表格與層在網(wǎng)頁(yè)設(shè)計(jì)中的使用

在就業(yè)信息管理平臺(tái)的設(shè)計(jì)中，采用程序設(shè)計(jì)，可以很好地提高網(wǎng)頁(yè)的下載與瀏覽速度，但對(duì)于初學(xué)者來(lái)說(shuō)，程序設(shè)計(jì)是一件頭痛的事。因此，如何利用表格與層來(lái)進(jìn)行設(shè)計(jì)，就非常重要。網(wǎng)頁(yè)設(shè)計(jì)中的排版有很多種方法，其中表格結(jié)合層的使用排版是最基本也是最有效的方法。表格與層，對(duì)職業(yè)院校的學(xué)生來(lái)說(shuō)，非常容易學(xué)，而且使用也非常方便，做出來(lái)的網(wǎng)頁(yè)也非常的漂亮，因此，在網(wǎng)頁(yè)設(shè)計(jì)中表格與層是非常重要的。

（一）網(wǎng)頁(yè)設(shè)計(jì)中表格的使用。在網(wǎng)頁(yè)設(shè)計(jì)中，利用表格的排版，它的整體效果好是毋庸置疑的，表格在網(wǎng)頁(yè)中的位置可以通過(guò)表格屬性來(lái)進(jìn)行設(shè)置。在Dreamweaver中，頁(yè)面內(nèi)容的設(shè)計(jì)、排版主要是通過(guò)表格來(lái)完成。通過(guò)表格的相互嵌套、合并與拆分，可以將自己構(gòu)思好的頁(yè)面完整地表現(xiàn)出來(lái)。表格在網(wǎng)頁(yè)中的重要作用，主要是它在不同的顯示上，可以根據(jù)網(wǎng)頁(yè)的大小、顯示器的大小進(jìn)行相應(yīng)的變化。并始終都處于瀏覽的相對(duì)位置，完整地把內(nèi)容顯示出來(lái)，具有很好的兼容性。因此，使用表格排版比較規(guī)范，整體性強(qiáng)，可以讓網(wǎng)頁(yè)的設(shè)計(jì)顯得非常的整齊，達(dá)到想要的效果。但由于表格的整體性，在一些細(xì)微的地方以及操作上還不夠細(xì)化，在內(nèi)容的設(shè)計(jì)表現(xiàn)上還不夠豐富。

（二）網(wǎng)頁(yè)設(shè)計(jì)中層的使用。層的使用在網(wǎng)頁(yè)設(shè)計(jì)中也是非常的普遍，由于它的定位比較精確，又是一種可視化操作元素，它的使用讓網(wǎng)頁(yè)增加了豐富的表現(xiàn)。層與表格的使用基本差不多，但在位置的定位上要比表格方便很多，這也是層的主要優(yōu)點(diǎn)。在網(wǎng)頁(yè)設(shè)計(jì)中，文本、圖像、表格等元素只能固定其位置，不能相互疊加。如果要想使多個(gè)元素進(jìn)行疊加或者定位要精確，在這種情況下，就需要使用層來(lái)進(jìn)行設(shè)置。層具有很多表格所不具備的特點(diǎn)，如層的重疊、移動(dòng)、隱藏等一些功能，層還可以添加一些動(dòng)作行為，讓層的內(nèi)容表現(xiàn)更加豐富，也正是基于這一點(diǎn)，層成了網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)重要的元素。層的這些特點(diǎn)有助于設(shè)計(jì)思維不受局限，從而在設(shè)計(jì)上有很大的空間。由于它是一種流元素，層在具有上述優(yōu)點(diǎn)的同時(shí)，也存在著一些不可避免的缺陷，例如層在網(wǎng)頁(yè)中的定位不會(huì)隨著瀏覽器大小的變化而變化，層的位置是固定不動(dòng)的，在這樣的情況下就失去了層在網(wǎng)頁(yè)設(shè)計(jì)布局中的意義。

（三）就業(yè)信息管理平臺(tái)中表格與層的結(jié)合使用。表格與層的結(jié)合使用才能更好地體現(xiàn)出它們的優(yōu)勢(shì)，層也才能更好地體現(xiàn)出它在網(wǎng)頁(yè)設(shè)計(jì)中的強(qiáng)大功能。在網(wǎng)頁(yè)設(shè)計(jì)中，如何做到表格跟層的統(tǒng)一、層與表格融為一個(gè)整體，這就要用到層在表格中的插入操作，以及層的嵌套使用，下面以就業(yè)信息管理平臺(tái)中制作下拉菜單為例來(lái)設(shè)計(jì)。首先，在網(wǎng)頁(yè)中插入一個(gè)三行一列的表格，在表格的第一行插入一張圖片，作為網(wǎng)頁(yè)設(shè)計(jì)的Logo，而在第二行中插入一個(gè)嵌套的一行五列的表格作為網(wǎng)頁(yè)的導(dǎo)航條，表格的第三行作為主要內(nèi)容的設(shè)計(jì)與排版。其次，在表格的第一格中插入一個(gè)Ap Div層，作為父層，操作步驟為：菜單欄中的插入—布局對(duì)象—Ap Div，插入后，這個(gè)層的位置左、上必須為空，沒(méi)有任何內(nèi)容。即它的屬性設(shè)置為圖1所示。

父層設(shè)置好后，就要進(jìn)行下拉菜單的設(shè)計(jì)，即子層的設(shè)計(jì)，子層的設(shè)計(jì)主要通過(guò)層的嵌套來(lái)完成，完成后的效果如2圖所示。

到這里基本完成了管理平臺(tái)中表格結(jié)合層的使用，層就像表格一樣，具有隨著瀏覽器的變化而變化。下拉菜單的設(shè)計(jì)，需要結(jié)合層的行為來(lái)操作，這里就不再介紹行為的操作。這個(gè)簡(jiǎn)單的案例說(shuō)明層要與表格結(jié)合使用，才能發(fā)揮出層最大的優(yōu)勢(shì)，當(dāng)然這是對(duì)初學(xué)者來(lái)說(shuō)的。層與表格的結(jié)合使用有很多的例子，有著非常豐富的內(nèi)容，在此不再贅述。

三、表格與層的正確應(yīng)用

表格與層在網(wǎng)頁(yè)設(shè)計(jì)中雖然有強(qiáng)大的功能，但在使用的過(guò)程中也不能太隨意，如果隨意地使用就會(huì)增加瀏覽器的負(fù)擔(dān)，瀏覽下載的速度就會(huì)變慢，影響網(wǎng)頁(yè)的瀏覽。

（一）表格布局出現(xiàn)的問(wèn)題。在網(wǎng)頁(yè)設(shè)計(jì)中，利用表格排版的時(shí)候，不能使用一個(gè)大大的表格鋪滿(mǎn)整個(gè)頁(yè)面，這樣不利于瀏覽器的打開(kāi)。瀏覽器打開(kāi)一個(gè)表格，是要等一個(gè)表格全部下載完成，這樣就需要很長(zhǎng)的時(shí)間來(lái)打開(kāi)這個(gè)網(wǎng)頁(yè)。在表格的嵌套中，也不能無(wú)限制地嵌套下去，一般表格的嵌套，應(yīng)該控制在最多三層表格，如果嵌套的表格太多，打開(kāi)時(shí)也會(huì)消耗大量的資源，不利于網(wǎng)頁(yè)的打開(kāi)。有數(shù)據(jù)統(tǒng)計(jì)，一般瀏覽者打開(kāi)網(wǎng)頁(yè)的等待時(shí)間為7秒以?xún)?nèi)。如何解決這個(gè)問(wèn)題，主要采用拆分表格的方法，將一個(gè)大的表格拆分成幾個(gè)小的表格，并要盡可能地避免表格的層層嵌套。

（二）層布局出現(xiàn)的偏差。在網(wǎng)頁(yè)的設(shè)計(jì)中，層的單獨(dú)使用沒(méi)有多大的意義，因?yàn)閷邮橇髟兀粫?huì)隨著網(wǎng)頁(yè)瀏覽器的變化而變化，它的位置是固定的，不會(huì)產(chǎn)生移動(dòng)。雖然有時(shí)候，我們?cè)诶帽砀衽c層排版的時(shí)候，看起來(lái)很整齊，但一預(yù)覽就完全錯(cuò)位了，根本不是想要的效果。如何才能使層與頁(yè)面中的表格一樣，能夠隨瀏覽器的變化而產(chǎn)生相對(duì)位置上的變化，這就需要先使用表格對(duì)整個(gè)網(wǎng)頁(yè)的整體進(jìn)行規(guī)劃，然后添加一個(gè)層到表格中的一個(gè)單元格中，作為一個(gè)父層。操作的方法為：菜單欄中的插入—布局對(duì)象—Ap Div，插入后，這個(gè)層的位置左、上必須為空，沒(méi)有任何內(nèi)容。即設(shè)置好的屬性就如圖1所示。然后，其他的子層就通過(guò)這個(gè)父層進(jìn)行嵌套，在這里必須強(qiáng)調(diào)的是，父層必須通過(guò)菜單欄的插入，不能通過(guò)用鼠標(biāo)畫(huà)出來(lái)的方式操作。采用這種方法設(shè)置層后，無(wú)論瀏覽器的窗口大小如何變化，它都會(huì)跟著變化，體現(xiàn)了與表格成為一個(gè)整體，在瀏覽時(shí)就不會(huì)產(chǎn)生位置上的移動(dòng)，因此，層只有結(jié)合表格的使用才能更好地豐富網(wǎng)頁(yè)內(nèi)容。

總之，在網(wǎng)頁(yè)設(shè)計(jì)中，表格與層是非常重要的元素，但在布局設(shè)計(jì)中，只有把表格與層結(jié)合使用，才能讓網(wǎng)頁(yè)的布局精美與豐富。網(wǎng)頁(yè)中的內(nèi)容雖然很重要，但網(wǎng)頁(yè)中的設(shè)計(jì)與布局才是最重要的。因此，通過(guò)合理的布局設(shè)置，特別是主頁(yè)設(shè)計(jì)要整齊美觀(guān)，才可能更好地吸引讀者。因此，在平時(shí)的網(wǎng)頁(yè)設(shè)計(jì)中，要多看一些優(yōu)秀網(wǎng)站的排版設(shè)計(jì)，只有這樣，才能更好地提高自己的網(wǎng)頁(yè)設(shè)計(jì)能力。

【參考文獻(xiàn)】

[1]俞燕丹.項(xiàng)目教學(xué)法在《網(wǎng)頁(yè)設(shè)計(jì)與制作》課程中的實(shí)踐研究[J].新課程研究（中旬刊），2015（10）

[2]韓媛媛.淺談Dreamweaver在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用[J].信息與電腦，2016（7）

[3]周金容.網(wǎng)頁(yè)制作過(guò)程與技巧[J].軟件導(dǎo)刊，2016（15）

[4]王浩.基于項(xiàng)目化的《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)改革初探[J].信息與電腦（理論版），2014（11）

[5]錢(qián)麗丹.小組協(xié)同式學(xué)習(xí)在網(wǎng)頁(yè)設(shè)計(jì)與制作課程中的應(yīng)用[J].計(jì)算機(jī)時(shí)代，2015（4）

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

【基金項(xiàng)目】2016年度廣西高校中青年教師基礎(chǔ)能力提升項(xiàng)目“基于WEB的高職院校就業(yè)信息管理系統(tǒng)的研發(fā)與應(yīng)用”（KY2016YB685）

【作者簡(jiǎn)介】黃榮喜（1979— ），男，廣西桂林人，碩士，廣西農(nóng)業(yè)職業(yè)技術(shù)學(xué)院講師，研究方向：軟件開(kāi)發(fā)及應(yīng)用。

（責(zé)編 盧 雯）