網頁設計畢業論文

網頁設計畢業論文1

　　響應式網頁設計原型研究

　　網頁設計畢業論文內容

　　當今，移動互聯網迅猛發展，各種智能設備層出不窮。傳統網頁設計采用“固定頁面及元素寬度，任何終端統一頁面效果”的策略，無疑將造成網頁在一些新興移動終端上顯示的文字極小、鏈接分布極密，用戶需要在屏幕上不停操作來自主尋求較好的體驗。面對這一弊端，網頁設計師聚焦于“響應式網頁設計”這一關鍵詞，試圖使用一套代碼為各類終端設備提供不同的設計和體驗。從先前“為固定設備設計網頁”跨越到“響應式網頁設計”是一個較難的過程。一些新手可能已經積攢了諸如媒體查詢、流式布局、彈性圖片等零散的設計開發技巧，掌握了HTML5和CSS3的使用方法，但他們依然無法駕馭響應式網頁設計。造成這種情況的直接原因就在于缺乏一個能夠指導他們立即開展響應式網頁設計實踐的可操作流程，即原型。

　　1兩個關鍵概念：響應式網頁設計與原型

　　響應式網頁設計(RWD，Responsive網頁Design)是一種網頁前端開發技術，它可以描述為，“兼顧多種不同設備屏幕尺寸、分辨率、系統平臺和行為做出相應的調整和布局的顯示機制”。原型(Prototype)，也叫“原樣”，是“模擬科學”中的一個術語。在心理科學中，由于很難對動作或心智活動認識清楚，所以一般沿用JR安德森的觀點，把原型(Prototype)視為關于范疇的最典型的樣例設想，即把“原型”視為外化的實踐模式，或“物質化”了的心智活動方式或操作活動程序。綜合上述，響應式網頁設計原型可描述為：符合“響應式網頁設計項目分析、各類終端具有適合自身用戶體驗的不同頁面效果、一套代碼完成所有不同終端的網頁制作、各類終端與主流瀏覽器良好兼容”等一系列規則的，外化的響應式網頁設計活動實踐模式。

　　2建構響應式網頁設計的原型

　　建構原型一般采用心理模擬法，它包含三個步驟：

　　(1)響應式網頁設計活動的功能分析;

　　(2)響應式網頁設計活動的結構分析;

　　(3)功能分析與結構分析的有機結合。其中，功能分析的重點是作用的對象，條件與結果;結構分析的重點在于組成要素及要素之間的關系。響應式網頁設計的目標是能夠高效的編寫一套代碼為各類終端設備提供良好的設計效果和使用體驗，這需要具備HTML5、CSS3、Javascript和jquery的基本技能。響應式網頁設計之父——伊桑.馬科特認為，響應式網頁設計應該首先針對小屏幕進行設計，然后逐步增強針對大屏幕設計。這種思路顛覆了傳統固定寬度的網頁設計方法，對于那些已經積攢了零散的響應式網頁設計開發技巧、HTML5及CSS3等技術，能夠較熟練的完成固定寬度桌面端網頁的新手而言，恐怕很難理解從小屏幕開始設計然后漸進增強的思路?？紤]到新手已經習慣設計制作固定寬度的桌面版網頁，響應式網頁設計如果從固定寬度的大屏幕網頁制作開始，然后改造這套代碼將僅適用于桌面的網頁依次兼容平板端和手機端也是一個不錯的思路。響應式網頁設計活動包含了“項目分析”、“網頁平面設計”、“桌面版網頁制作”、“平面版的改造”、“手機版的改造”及“兼容問題的調試”這6個典型的子活動。這些典型要素的關系可以描述為，“要想高效的完成某響應式網頁設計項目，首先需要項目分析，其階段性結果是響應式網頁的總體方案，即在用戶群體需求分析及主題解讀的基礎上，進行色彩分析及定位，確定UI版面布局，分析設計網頁功能模塊，確定網頁風格等，最終形成包含“前言”、“需求分析”、“系統分析”、“風格設計”、“各類終端UI版面初步布局”、“色彩定位”、“網頁建設日程規劃”等部分的網頁總體方案文檔;然后，根據前期方案中“色彩”、“風格”及“各類終端UI版面布局”等的分析，依據頁面設計原則，利用photoshop繪制適用于各類終端顯示的平面效果圖;隨后，利用“HTML5+Css3”技術采用

　　+css布局完成固定寬度桌面版網頁的制作并生成網頁文件和樣式表文件;接著，在這套代碼的基礎上，利用媒體查詢技術、流式布局、彈性圖片技術，結合平板終端的頁面效果圖將代碼改造成兼容桌面及平板的網頁;之后，在上述修改的基礎上，繼續利用媒體查詢技術和彈性圖片技術，結合手機終端的頁面效果圖將代碼改造成兼容桌面、平板、手機的網頁;最后，利用火狐和IETester軟件查看初步完成的響應式網頁，解決跨瀏覽器的兼容問題，形成完整網站。該過程中任何環節如果出現不妥當都應該返回上個步驟進行重新修改。結合上述對網頁設計活動的功能與結構分析，不難發現，響應式Web設計活動原型中的6個典型子活動復雜程度不同。其中“桌面版網頁制作”、“平面版的改造”、“手機版的改造”及“兼容問題的調試”這4個典型子活動是比較復雜的，包含了很多熟手的關鍵技術，需要進一步闡述。

　　3熟手的關鍵技術

　　從上述適用于新手的響應式網頁設計活動基本原型發現，制作一個能夠兼容主流瀏覽器的固定寬度桌面版網頁是響應式網頁制作的開端。那么，首先在“桌面版網頁制作”這個環節中提取一些熟手關鍵技術，作為給予新手的技巧提示。

　　3.1兼容主流瀏覽器的桌面版網頁制作技術

　　為了防止不同瀏覽器給予相同HTML5標簽的初始樣式存在差異，熟手利用HTML5+CSS3制作桌面版網頁制作時，一般會在樣式文件(擴展名.css)中給出如下初始化代碼：*{margin：0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;font-family:"宋體";font-size:16px;color:#cccccc;}ul,li,a{margin:0px;padding:0px;list-style:none;}div{overflow:hidden;float:left;}#wrapper{width:1007px;height:auto;margin-left:auto;margin-right:auto;overflow:hidden;clear:both;}這部分代碼塊可以實現頁面在IE內核和Firefox內核的所有版本瀏覽器中居中對齊，外層布局盒子與瀏覽器頭部無縫緊貼;

　　及css3完成固定寬度布局時，默認所有內部布局

　　向左浮動，溢出屬性為隱藏;所有構成頁面的HTML5元素的默認邊距和填充屬性為0px;HTML5的列表標簽默認項目符號為空，邊距和填充為0px。此外，確定頁面尺寸,目前大多數顯示器為1024像素*768像素，那么以此為默認顯示器時，頁面的寬度尺寸一般設置為“1007像素”。初始化CSS代碼后，接下來就是利用

　　+CSS完成布局，這里提示新手：完成布局后，務必在IETESTER和Firefox中檢查網頁布局是否能夠兼容主流瀏覽器。然后，根據桌面版網頁平面設計效果圖完成頁面的制作。此外，熟手的經驗是制作過程中頻繁檢測桌面版網頁是否能夠完美兼容各種瀏覽器。

　　3.2利用流式布局、彈性圖片、媒體查詢技術修改桌面版網頁

　　(1)相對視口尺寸，將最外層的布局

　　(例如：#wrapper{width:1007px;...})的寬度設置為96%(這個值取決于當前頁面的視覺效果，也可以給其他數值);然后，將最外層的布局

　　內部的頁頭布局、導航布局、內容布局、側邊欄布局、頁腳布局

　　對應的CSS樣式中的width屬性值利用公式——目標元素寬度÷上下文元素寬度=百分比寬度把網頁的固定布局修改成百分比布局，也就是將固定像素寬度轉換成對應的百分比寬度。

　　(2)將頁面中所有HTML5標簽元素對應的CSS樣式表中的margin-right、margin-left、padding-right、padding-left的屬性值也用公式——目標元素寬度÷上下文元素寬度=百分比寬度來修改。

　　(3)將CSS樣式表中的font-size屬性值的單位用em來代替px。這里依然使用公式——目標元素寬度÷上下文元素寬度=百分比寬度。這里需要提示新手的是：在標簽的初始化代碼中，如果有font-size:16px;語句，那么在給其他元素的font-size屬性上修改值時，公式中的“上下文元素寬度”就等于16px，例如，#logo{font-size:48px;}現在要修改為#logo{font-size:3em;}。

　　(4)為了實現彈性圖片，讓圖片隨視口縮放，圖形圖像、動畫和視頻的彈性設置使用“img,object,video,embed{width:100%;max-width:100%;}”。其中，max-width屬性是用于確?？s放時不會超出圖片最大尺寸。同時，熟手還會使用AdaptiveImages解決方案來實現自適應圖片。

　　(5)媒體查詢可以通過判斷不同設備終端，提供不同的樣式使其實現在不同終端都能獲得最佳的用戶體驗。例如，某個響應式頁面用電腦瀏覽頁面時，頁面信息會以平鋪的形式分布在頁面合適的位置;用手機瀏覽頁面時，導航按鈕會相繼隱藏起來，部分信息變成左右滑動的方式呈現，頁面會重新布局，圖片相應縮小。媒介查詢的語法格式是，例如：設定寬度不超過400像素的屏幕尺寸，代碼是：。雖然，HTML5+CSS3提供了良好的媒體查詢功能，但當前仍有一些瀏覽器不支持，你可能需要添加如下基本樣式：3.3不同種類、不同版本瀏覽器的兼容問題解決跨越瀏覽器的問題一直是響應式網頁設計的難題。熟手面對這一問題時，一般采用“漸進增強與降級”、“利用javascript修復老版本IE”、“使用Modernizr輔助修正樣式，按需加載資源”、“給IE6，7，8追加媒體查詢功能”等方法。

　　4結束語

　　對響應式網頁設計而言，當前的設計理念和技術方法還不是終點,網站前端設計師需要繼續努力找出更好的解決方案。而對新手學習者而言，響應式網頁設計開發技能的形成不是一蹴而就的，還需要學習者在多個項目中，利用原型進行多次定向、操作及內化才能真正掌握。

網頁設計畢業論文2

　　【摘要】

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

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

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

　　一、Dreamweavercs簡介

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

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

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

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

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

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

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

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

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

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

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

　　【參考文獻】

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

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

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

網頁設計畢業論文3

　　Flash軟件畫在網頁設計中的應用

　　網頁設計畢業論文摘要

　　摘要:Flash技術運用范圍非常廣泛,不論是網站、廣告、動畫、游戲,甚至程序設計與多媒體化展示方面都有一定程度的運用。本文首先對Flash動畫今后的發展趨勢進行分析并具體化敘述了Flash的實際定義與特點,并對Flash動畫當前在網頁設計中的應用方式進行分析,針對性闡述了Flash動畫在整站式網頁設計過程中交互式導航系統、Web圖像動畫展示以及鼠標動畫的應用。在此針對性研究Flash動畫在網頁設計中的相關研究,望研究結果能夠對今后的學者一定幫助。

　　網頁設計畢業論文內容

　　關鍵詞:Flash動畫 網頁設計 應用研究

　　隨著社會邁入信息化時代,網絡及計算機技術的發展及普及程度呈現出優質化的發展形勢,從而促進網頁動畫漸漸發展起來,此外網頁動畫設計在網頁設計中占據重要地位,促使人們在關注動畫整體發展趨勢的過程中將注意力放在網頁動畫方面。在構建及設計網頁時,運用Flash幫助網頁實現多媒體化的網頁成果展示,同時也漸漸成為網頁設計發展過程中不可或缺的重要部分。

　　1Flash的運用及特點

　　MacromediaFlash作為一種交互式編輯矢量圖及多媒體創作軟件,因特網網頁設計矢量動畫文件格式時常得以較多的運用,此外,針對性分析Flash,可以了解到目前其主要具備以下六大特點:第一,將矢量圖形作為主要運行前提,致使其自身文件導出容量不大,在進行圖片縮放時對其自身的清晰度影響不大,在網絡傳輸過程中存在一定的便捷性;第二,Flash具備非常優質化且強大的AS代碼,在設計動畫時運用Flash技術,促使動畫的交互性優良,便于讀者在閱讀過程的理解并實施相關互動;第三,針對實際運用過程分析,Flash動畫在運作時主要采用插件,若用戶想要實現視頻觀看,僅僅需要安裝一次視頻插件就可以直接觀看,避免繁瑣性多次安裝的現象發生。此外,由于Flash構建的動畫自身極小,所以其具備較快的調用速率;第四,在設計Flash過程中,可以根據需要適當增加頁面控制按鈕幫助頁面實現鏈接的跳動,還可以運用鼠標實現頁面動畫中的運動及移動。第五,Flash可以實現動畫視聽效果內容的升華,譬如漸變聲、位圖等等,用戶在制作圖片的過程中可以直接構建全Flash制作站點;第六,Flash動畫屬于一種“準”流式文件內容,無需全部下載完成就可以實現動畫觀看。

　　2Flash動畫在網絡設計中的應用

　　在網頁設計中,Flash動畫具備非常多關鍵性的作用,如流式播放動畫、FlashMV及短片動畫等,此外其所表現的形式中存在一定的交互性。但需要注意的是,在實施網頁設計時,避免繁瑣、復雜的動畫設計效果的存在,畢竟物極必反,只會降低網頁的品質;如圖1所示。2.1網頁動畫信息交互的實現為了進一步卻寶寶網頁動畫信息交互整體的流暢性,其中的一個重要關鍵就是Flash動畫導航的交互性設計。在對該部分內容進行設計時,往往會使用針對性的Flash動畫腳本——AxtionScript。實際設計過程中,通常由編程者的思想與Flash在事件中作用共同形成動力,并依據動畫中的相應內容實現AxtionScript的具體化定義。2.2網頁動畫相關要素的設計第一,交互式導航系統。在網頁設計中,導航欄對用戶主要起到一種引導性作用。所以在設計時需要將其設計為多個導航級別,并構建針對性的標識來將其區分,以色彩為例,可以采用較為鮮艷、清爽式的搭配。第二,Web圖像動畫形式展示。傳統網頁中,Web圖像主要呈現靜態,不過經由計算機技術的不斷發展,最近幾年在網頁設計中漸漸出現了一部分動態化的Web圖像。同時在其色彩方面的運用,主要采用RGB模板,并在網頁安全色方面運用216色,其主要的色彩格式包括GIF、PNG以及JPE6。第三,鼠標動畫。為了實現優質化Flash動畫效果,在制作動畫效果時要特別注意鼠標在移動過程中其軌跡圖案及色彩搭配。首先,要確保鼠標移動過程中的色彩與網頁設計色彩是不同的,有助于用戶一眼就可以將鼠標找到。最后就是,鼠標在色彩區別網頁之后還要注意其透明性,避免遮蔽信息的現象出現。

　　3結語

　　綜合全文內容,在網站設計過程中,Flash作為一個極具重要性的視覺性元素,其可以在幫助網站實現多媒體化效果展示的同時,還能夠結合數據通信這一措施全面性豐富網站自身具備的素材及資源,最終達到一種動態化的效果。截至今日,由于計算機技術發展速度不斷提升,結合Flash自身所具備的多種優質化特征,筆者相信在今后人們的日常生活中,Flash動畫一定可以獲得更加廣泛的用途,更具普遍性,最終實現網頁設計的主體化運用趨勢。

　　網頁設計畢業論文文獻

　　[1]喬慧.Flash動畫在網頁制作中的應用及發展[J].內蒙古石油化工,20xx(21):68.

　　[2]關曉軒.Flash動畫在網頁制作中的應用研究[J].北方文學(下旬),20xx(11):91-93.