網(wǎng)頁設(shè)計(jì)畢業(yè)論文1

　　響應(yīng)式網(wǎng)頁設(shè)計(jì)原型研究

　　網(wǎng)頁設(shè)計(jì)畢業(yè)論文內(nèi)容

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

　　1兩個(gè)關(guān)鍵概念：響應(yīng)式網(wǎng)頁設(shè)計(jì)與原型

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

　　2建構(gòu)響應(yīng)式網(wǎng)頁設(shè)計(jì)的原型

　　建構(gòu)原型一般采用心理模擬法，它包含三個(gè)步驟：

　　(1)響應(yīng)式網(wǎng)頁設(shè)計(jì)活動(dòng)的功能分析;

　　(2)響應(yīng)式網(wǎng)頁設(shè)計(jì)活動(dòng)的結(jié)構(gòu)分析;

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

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

　　3熟手的關(guān)鍵技術(shù)

　　從上述適用于新手的響應(yīng)式網(wǎng)頁設(shè)計(jì)活動(dòng)基本原型發(fā)現(xiàn)，制作一個(gè)能夠兼容主流瀏覽器的固定寬度桌面版網(wǎng)頁是響應(yīng)式網(wǎng)頁制作的開端。那么，首先在“桌面版網(wǎng)頁制作”這個(gè)環(huán)節(jié)中提取一些熟手關(guān)鍵技術(shù)，作為給予新手的技巧提示。

　　3.1兼容主流瀏覽器的桌面版網(wǎng)頁制作技術(shù)

　　為了防止不同瀏覽器給予相同HTML5標(biāo)簽的初始樣式存在差異，熟手利用HTML5+CSS3制作桌面版網(wǎng)頁制作時(shí)，一般會(huì)在樣式文件(擴(kuò)展名.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;}這部分代碼塊可以實(shí)現(xiàn)頁面在IE內(nèi)核和Firefox內(nèi)核的所有版本瀏覽器中居中對(duì)齊，外層布局盒子與瀏覽器頭部無縫緊貼;

　　及css3完成固定寬度布局時(shí)，默認(rèn)所有內(nèi)部布局

　　向左浮動(dòng)，溢出屬性為隱藏;所有構(gòu)成頁面的HTML5元素的默認(rèn)邊距和填充屬性為0px;HTML5的列表標(biāo)簽?zāi)�認(rèn)項(xiàng)目符號(hào)為空，邊距和填充為0px。此外，確定頁面尺寸,目前大多數(shù)顯示器為1024像素*768像素，那么以此為默認(rèn)顯示器時(shí)，頁面的寬度尺寸一般設(shè)置為“1007像素”。初始化CSS代碼后，接下來就是利用

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

　　3.2利用流式布局、彈性圖片、媒體查詢技術(shù)修改桌面版網(wǎng)頁

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

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

　　內(nèi)部的頁頭布局、導(dǎo)航布局、內(nèi)容布局、側(cè)邊欄布局、頁腳布局

　　對(duì)應(yīng)的CSS樣式中的width屬性值利用公式——目標(biāo)元素寬度÷上下文元素寬度=百分比寬度把網(wǎng)頁的固定布局修改成百分比布局，也就是將固定像素寬度轉(zhuǎn)換成對(duì)應(yīng)的百分比寬度。

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

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

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

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

　　4結(jié)束語

　　對(duì)響應(yīng)式網(wǎng)頁設(shè)計(jì)而言，當(dāng)前的設(shè)計(jì)理念和技術(shù)方法還不是終點(diǎn),網(wǎng)站前端設(shè)計(jì)師需要繼續(xù)努力找出更好的解決方案。而對(duì)新手學(xué)習(xí)者而言，響應(yīng)式網(wǎng)頁設(shè)計(jì)開發(fā)技能的形成不是一蹴而就的，還需要學(xué)習(xí)者在多個(gè)項(xiàng)目中，利用原型進(jìn)行多次定向、操作及內(nèi)化才能真正掌握。

網(wǎng)頁設(shè)計(jì)畢業(yè)論文2

　　【摘要】

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

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

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

　　一、Dreamweavercs簡介

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

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

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

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

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

　　（三）就業(yè)信息管理平臺(tái)中表格與層的結(jié)合使用。表格與層的結(jié)合使用才能更好地體現(xiàn)出它們的優(yōu)勢，層也才能更好地體現(xiàn)出它在網(wǎng)頁設(shè)計(jì)中的強(qiáng)大功能。在網(wǎng)頁設(shè)計(jì)中，如何做到表格跟層的統(tǒng)一、層與表格融為一個(gè)整體，這就要用到層在表格中的插入操作，以及層的嵌套使用，下面以就業(yè)信息管理平臺(tái)中制作下拉菜單為例來設(shè)計(jì)。首先，在網(wǎng)頁中插入一個(gè)三行一列的表格，在表格的第一行插入一張圖片，作為網(wǎng)頁設(shè)計(jì)的Logo，而在第二行中插入一個(gè)嵌套的一行五列的表格作為網(wǎng)頁的導(dǎo)航條，表格的第三行作為主要內(nèi)容的設(shè)計(jì)與排版。

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

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

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

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

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

　　【參考文獻(xiàn)】

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

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

　�。�3］周金容．網(wǎng)頁制作過程與技巧［J］．軟件導(dǎo)刊，20xx（15）

網(wǎng)頁設(shè)計(jì)畢業(yè)論文3

　　Flash軟件畫在網(wǎng)頁設(shè)計(jì)中的應(yīng)用

　　網(wǎng)頁設(shè)計(jì)畢業(yè)論文摘要

　　摘要:Flash技術(shù)運(yùn)用范圍非常廣泛,不論是網(wǎng)站、廣告、動(dòng)畫、游戲,甚至程序設(shè)計(jì)與多媒體化展示方面都有一定程度的運(yùn)用。本文首先對(duì)Flash動(dòng)畫今后的發(fā)展趨勢進(jìn)行分析并具體化敘述了Flash的實(shí)際定義與特點(diǎn),并對(duì)Flash動(dòng)畫當(dāng)前在網(wǎng)頁設(shè)計(jì)中的應(yīng)用方式進(jìn)行分析,針對(duì)性闡述了Flash動(dòng)畫在整站式網(wǎng)頁設(shè)計(jì)過程中交互式導(dǎo)航系統(tǒng)、Web圖像動(dòng)畫展示以及鼠標(biāo)動(dòng)畫的應(yīng)用。在此針對(duì)性研究Flash動(dòng)畫在網(wǎng)頁設(shè)計(jì)中的相關(guān)研究,望研究結(jié)果能夠?qū)�今后的學(xué)者一定幫助。

　　網(wǎng)頁設(shè)計(jì)畢業(yè)論文內(nèi)容

　　關(guān)鍵詞:Flash動(dòng)畫 網(wǎng)頁設(shè)計(jì) 應(yīng)用研究

　　隨著社會(huì)邁入信息化時(shí)代,網(wǎng)絡(luò)及計(jì)算機(jī)技術(shù)的發(fā)展及普及程度呈現(xiàn)出優(yōu)質(zhì)化的發(fā)展形勢,從而促進(jìn)網(wǎng)頁動(dòng)畫漸漸發(fā)展起來,此外網(wǎng)頁動(dòng)畫設(shè)計(jì)在網(wǎng)頁設(shè)計(jì)中占據(jù)重要地位,促使人們在關(guān)注動(dòng)畫整體發(fā)展趨勢的過程中將注意力放在網(wǎng)頁動(dòng)畫方面。在構(gòu)建及設(shè)計(jì)網(wǎng)頁時(shí),運(yùn)用Flash幫助網(wǎng)頁實(shí)現(xiàn)多媒體化的網(wǎng)頁成果展示,同時(shí)也漸漸成為網(wǎng)頁設(shè)計(jì)發(fā)展過程中不可或缺的重要部分。

　　1Flash的運(yùn)用及特點(diǎn)

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

　　2Flash動(dòng)畫在網(wǎng)絡(luò)設(shè)計(jì)中的應(yīng)用

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

　　3結(jié)語

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

　　網(wǎng)頁設(shè)計(jì)畢業(yè)論文文獻(xiàn)

　　[1]喬慧.Flash動(dòng)畫在網(wǎng)頁制作中的應(yīng)用及發(fā)展[J].內(nèi)蒙古石油化工,20xx(21):68.

　　[2]關(guān)曉軒.Flash動(dòng)畫在網(wǎng)頁制作中的應(yīng)用研究[J].北方文學(xué)(下旬),20xx(11):91-93.