本站小編為你精心準備了網頁設計教學中表格與層的應用參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。

【摘要】本文以就業信息管理平臺為例，研究網頁設計中表格與層的應用，提出表格與層可以讓網頁的布局整齊美觀，將網頁中的文字、圖片、動畫等眾多元素有條理地統一組織起來。雖然表格的使用整體上是好的，但在一些細節的美化上表格的設計就難以做到，這就要采用層來搭配表格的設計解決相應的排版美化問題。

【關鍵詞】網頁設計；表格；層；就業信息管理平臺

隨著信息技術的日新月異，網頁設計的重要性也逐漸凸顯，如何快速、方便地設計出相關的網頁、網站就顯得非常重要。在網頁設計與制作的教學過程中，如何讓學生快速地掌握網頁設計的一些排版技巧是非常有必要的。因此，筆者結合網頁設計與制作教學中的一些體會，并通過就業信息管理平臺的設計案例，探索網頁設計中表格與ApDiv（層）的排版設計技巧。

一、Dreamweavercs簡介

Dreamweavercs是由Adobe公司推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁設計軟件。目前，最新的版本為DreamweaverCC，網頁設計軟件的功能強大。對網頁的瀏覽已經是我們生活中的不可分割的一部分，網頁作為網絡信息傳播的主要載體，其設計也為大家所關注。網頁設計軟件的種類有很多，但最出名、最專業的網頁設計工具，非Dreamweaver莫屬。它是著名的“所見即所得”的可視化網站開發工具，目前的網頁設計幾乎都采用Dreamweaver來設計。Dreamweaver不僅提供了強大的網頁編輯功能，而且還提供了網頁的上傳工具。利用FTP進行大文件的傳輸，節省了文件的傳輸時間，它是一個集網頁創作和文件傳輸管理等多功能的設計工具。

二、表格與層在網頁設計中的使用

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

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

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

（三）就業信息管理平臺中表格與層的結合使用。表格與層的結合使用才能更好地體現出它們的優勢，層也才能更好地體現出它在網頁設計中的強大功能。在網頁設計中，如何做到表格跟層的統一、層與表格融為一個整體，這就要用到層在表格中的插入操作，以及層的嵌套使用，下面以就業信息管理平臺中制作下拉菜單為例來設計。首先，在網頁中插入一個三行一列的表格，在表格的第一行插入一張圖片，作為網頁設計的Logo，而在第二行中插入一個嵌套的一行五列的表格作為網頁的導航條，表格的第三行作為主要內容的設計與排版。

三、表格與層的正確應用表格與層

在網頁設計中雖然有強大的功能，但在使用的過程中也不能太隨意，如果隨意地使用就會增加瀏覽器的負擔，瀏覽下載的速度就會變慢，影響網頁的瀏覽。

（一）表格布局出現的問題。在網頁設計中，利用表格排版的時候，不能使用一個大大的表格鋪滿整個頁面，這樣不利于瀏覽器的打開。瀏覽器打開一個表格，是要等一個表格全部下載完成，這樣就需要很長的時間來打開這個網頁。在表格的嵌套中，也不能無限制地嵌套下去，一般表格的嵌套，應該控制在最多三層表格，如果嵌套的表格太多，打開時也會消耗大量的資源，不利于網頁的打開。有數據統計，一般瀏覽者打開網頁的等待時間為7秒以內。如何解決這個問題，主要采用拆分表格的方法，將一個大的表格拆分成幾個小的表格，并要盡可能地避免表格的層層嵌套。

（二）層布局出現的偏差。在網頁的設計中，層的單獨使用沒有多大的意義，因為層是流元素，不會隨著網頁瀏覽器的變化而變化，它的位置是固定的，不會產生移動。雖然有時候，我們在利用表格與層排版的時候，看起來很整齊，但一預覽就完全錯位了，根本不是想要的效果。如何才能使層與頁面中的表格一樣，能夠隨瀏覽器的變化而產生相對位置上的變化，這就需要先使用表格對整個網頁的整體進行規劃，然后添加一個層到表格中的一個單元格中，作為一個父層。操作的方法為：菜單欄中的插入—布局對象—ApDiv，插入后，這個層的位置左、上必須為空，沒有任何內容。然后，其他的子層就通過這個父層進行嵌套，在這里必須強調的是，父層必須通過菜單欄的插入，不能通過用鼠標畫出來的方式操作。采用這種方法設置層后，無論瀏覽器的窗口大小如何變化，它都會跟著變化，體現了與表格成為一個整體，在瀏覽時就不會產生位置上的移動，因此，層只有結合表格的使用才能更好地豐富網頁內容。

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

【參考文獻】

［1］俞燕丹．項目教學法在《網頁設計與制作》課程中的實踐研究［J］．新課程研究（中旬刊），2015（10）

［2］韓媛媛．淺談Dreamweaver在網頁設計中的應用［J］．信息與電腦，2016（7）

［3］周金容．網頁制作過程與技巧［J］．軟件導刊，2016（15）

［4］王浩．基于項目化的《網頁設計》課程教學改革初探［J］．信息與電腦（理論版），2014（11）

［5］錢麗丹．小組協同式學習在網頁設計與制作課程中的應用［J］．計算機時代，2015（4）

［6］陳靜．基于項目驅動法的網頁設計基礎課程課堂教學改革探索［J］．人才資源開發，2015（20）

作者：黃榮喜 單位：廣西農業職業技術學院