閱讀屋>設計> 網頁設計教學畢業論文

網頁設計教學畢業論文

網頁設計教學畢業論文

  網頁設計技術運用範圍非常廣泛,不論是網站、廣告、動畫、遊戲,甚至程式設計與多媒體化展示方面都有一定程度的運用。下面是小編整理的網頁設計教學畢業論文,歡迎來參考!

  【摘要】

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

  【關鍵詞】網頁設計;表格;層;就業資訊管理平臺

  隨著資訊科技的日新月異,網頁設計的重要性也逐漸凸顯,如何快速、方便地設計出相關的網頁、網站就顯得非常重要。在網頁設計與製作的教學過程中,如何讓學生快速地掌握網頁設計的一些排版技巧是非常有必要的。因此,筆者結合網頁設計與製作教學中的一些體會,並透過就業資訊管理平臺的設計案例,探索網頁設計中表格與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)

【網頁設計教學畢業論文】相關文章: