計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)論文1

　　【摘要】網(wǎng)頁(yè)設(shè)計(jì)是一種直觀的視覺(jué)語(yǔ)言，需要對(duì)其進(jìn)行布局與排版。雖然網(wǎng)頁(yè)設(shè)計(jì)與平面設(shè)計(jì)之間存在一定的區(qū)別，但是其兩者依然存在一定的相似之處，網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該充分借鑒利用平面設(shè)計(jì)的原則與方法。網(wǎng)頁(yè)設(shè)計(jì)中的布局與排版需要通過(guò)文字、圖形的組合來(lái)讓網(wǎng)頁(yè)獲得良好的視覺(jué)效果�，F(xiàn)文章主要針對(duì)計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的布局與排版進(jìn)行研究。

　　【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì)；布局；排版；文字；設(shè)計(jì)論文

　　網(wǎng)站是企業(yè)或政府向用戶傳遞信息，提供服務(wù)的一種重要方式，是企業(yè)開(kāi)展電子商務(wù)的重要平臺(tái)，是政府面向民眾的重要窗口。網(wǎng)站是直接反應(yīng)企業(yè)形象、政府形象的平臺(tái)，因此網(wǎng)頁(yè)設(shè)計(jì)質(zhì)量的高低將會(huì)直接影響到企業(yè)或政府的形象。在網(wǎng)頁(yè)設(shè)計(jì)中，布局與排版是十分關(guān)鍵的內(nèi)容之一，其會(huì)直接影響到瀏覽者對(duì)網(wǎng)頁(yè)的第一印象與體驗(yàn)感。因此，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的布局與排版進(jìn)行研究具有十分重大的實(shí)際意義。

　　1．計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)布局與排版原則

　　1．1布局與排版設(shè)計(jì)原則為了讓瀏覽者在瀏覽網(wǎng)頁(yè)過(guò)程中擁有更好的瀏覽體驗(yàn)，在進(jìn)行布局版本過(guò)程中要始終秉持以下原則:第一，整體布局，和諧統(tǒng)一。在網(wǎng)頁(yè)設(shè)計(jì)布局排版過(guò)程中整體布局占據(jù)著十分重要的作用。集成是網(wǎng)頁(yè)設(shè)計(jì)排版布局中常用的一個(gè)對(duì)稱(chēng)形式，通過(guò)空間的文本與圖形建立其平衡的狀態(tài)，從而產(chǎn)生和諧的美感［1］。但是單純的平衡有時(shí)候會(huì)導(dǎo)致頁(yè)面出現(xiàn)過(guò)于死板、僵化的情況。因此，可以在對(duì)稱(chēng)平衡設(shè)計(jì)中融合一些活潑、有趣的詞匯、圖形，但是要注意需要與頁(yè)面和諧統(tǒng)一。第二，主次分明，中心突出。在網(wǎng)頁(yè)頁(yè)面聚居中需要對(duì)視覺(jué)中心進(jìn)行充分的考慮，該視覺(jué)中西你通常位于頁(yè)面的關(guān)鍵區(qū)域—中部與上部的位置。因此，最有價(jià)值的信息應(yīng)該擺放在這一位置。網(wǎng)頁(yè)布局排版主次分明的最終目的是讓網(wǎng)頁(yè)可以形成清晰有序，能夠突出重點(diǎn)的視覺(jué)效果。第三，疏密有度，錯(cuò)落有致。在網(wǎng)頁(yè)布局排版中，一定要做好疏密有致，預(yù)留出一定的空白，靈活的使用字間距與行間距，制造出字間距與行間距之間的距離。對(duì)于形態(tài)與色彩的搭配運(yùn)用更要合理［2］。例如，黑白搭配、圓形與方形搭配，以便獲得更佳的視覺(jué)效果。第四，圖文并茂，生動(dòng)有趣。圖形美觀與文字的簡(jiǎn)潔之間需要合理的搭配。如果圖形在版面設(shè)計(jì)中占據(jù)的比例更大，則文字會(huì)相應(yīng)減少，從而大大減少頁(yè)面的信息量;而如果文字太多則會(huì)使得網(wǎng)頁(yè)版面變得死板。因此，網(wǎng)頁(yè)布局與排版應(yīng)該做到圖文并茂、合理搭配，從而給網(wǎng)頁(yè)帶來(lái)更加豐富的內(nèi)容，讓網(wǎng)頁(yè)變得更加有趣。1．2布局與排版設(shè)計(jì)方法網(wǎng)頁(yè)設(shè)計(jì)布局與排版方法主要包括以以下幾點(diǎn):第一，簡(jiǎn)潔明了。布局排版最為重要的原則就是一名了然，讓網(wǎng)頁(yè)瀏覽者可以更加順暢的瀏覽信息。第二，主色調(diào)鮮明。網(wǎng)頁(yè)設(shè)計(jì)給人的第一印象就是由主色調(diào)決定的。主色調(diào)在網(wǎng)頁(yè)布局與排版中是十分重要的，主色調(diào)過(guò)多會(huì)給瀏覽者帶來(lái)一種厭煩的感受，不利于瀏覽者長(zhǎng)時(shí)間瀏覽網(wǎng)頁(yè)。因此，網(wǎng)頁(yè)版本的主色調(diào)要進(jìn)行合理的控制，其中主色彩不能超過(guò)五種，并且要以一種主色調(diào)為主，凸顯以主導(dǎo)地位，另外幾種顏色作為烘托與點(diǎn)綴［3］。一般來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)的主色調(diào)包括黃、藍(lán)、灰、黑和白。第三，字體設(shè)置。在網(wǎng)頁(yè)設(shè)計(jì)中字體的設(shè)置也應(yīng)該始終秉持著簡(jiǎn)易的原則，通常來(lái)說(shuō)不應(yīng)該超過(guò)三種字體，并且字體在版面中不宜過(guò)大，從而讓更多文字給網(wǎng)頁(yè)瀏覽者帶來(lái)更多有價(jià)值的信息。值得注意的是，要避免閃爍的文字在網(wǎng)頁(yè)設(shè)計(jì)布局中出現(xiàn)，其會(huì)給瀏覽者帶來(lái)一種厭煩的感覺(jué)。同時(shí)，在網(wǎng)頁(yè)標(biāo)題欄中字體應(yīng)該相對(duì)于正文來(lái)說(shuō)要更大，顏色也需要進(jìn)行區(qū)分。

　　2．常見(jiàn)布局與排版

　　2．1T字型T型結(jié)構(gòu)是頂部的頁(yè)面布局為網(wǎng)站的標(biāo)語(yǔ)和橫幅，下列左側(cè)為主菜單，右側(cè)為內(nèi)容顯示。由于菜單的背景布置顏色更深，因此整體效果視覺(jué)類(lèi)似于英文字母“T”，因此被成為T(mén)字型布局。T字型布局是網(wǎng)頁(yè)設(shè)計(jì)中十分常見(jiàn)的設(shè)計(jì)布局，其優(yōu)勢(shì)在于頁(yè)面結(jié)構(gòu)清晰、明確，容易正確把握主次關(guān)系;缺點(diǎn)在于較為沉悶，缺乏靈活性，如果無(wú)法準(zhǔn)確把握，不注重細(xì)節(jié)與色彩的配合，十分容易出現(xiàn)無(wú)趣、枯燥的現(xiàn)象［4］。2．2口字型口字型布局給人一個(gè)感覺(jué)就是在頁(yè)面中間最為顯眼的主題內(nèi)容，類(lèi)似于一個(gè)口字型，左側(cè)通常包括注冊(cè)信息、內(nèi)容導(dǎo)航、搜索引擎，右側(cè)通常包括動(dòng)態(tài)消息、熱點(diǎn)資訊和友情鏈接。上下兩部分為橫條廣告與菜單�？谧中筒季值膬�(yōu)勢(shì)在于可以充分利用版面，囊括較大的信息量，缺點(diǎn)在于頁(yè)面較為擁擠，過(guò)于死板［5］。口字型布局大多被應(yīng)用于國(guó)外站點(diǎn)中，國(guó)內(nèi)使用頻率較低。2．3POP布局POP布局是將一張合適的照片作為頁(yè)面設(shè)計(jì)的中心，并且在合適的位置擺放主菜單。POP布局并不是上下或左右對(duì)稱(chēng)的，但是在設(shè)計(jì)過(guò)程中依然要兼顧平衡與節(jié)奏。POP布局可以實(shí)現(xiàn)動(dòng)態(tài)效果，其優(yōu)勢(shì)在于美觀，缺陷在于運(yùn)行速度較為緩慢。2．4同字型同字型的網(wǎng)頁(yè)布局一般來(lái)說(shuō)內(nèi)容量都較大，網(wǎng)頁(yè)上方為標(biāo)題欄，其中內(nèi)容可以是網(wǎng)站主題或橫幅廣告，在標(biāo)題欄下可能存在小標(biāo)題。在頁(yè)面左右兩側(cè)都布置有相應(yīng)的內(nèi)容。通常來(lái)說(shuō)，可能是網(wǎng)站的最新動(dòng)態(tài)、網(wǎng)站的維護(hù)管理人員以及部分廣告。同字型網(wǎng)頁(yè)的主要內(nèi)容是分布在中央位置，從上至下，根據(jù)內(nèi)容的重點(diǎn)、類(lèi)型來(lái)進(jìn)行區(qū)分。網(wǎng)站下部分通常為空白，即使有內(nèi)容也是一些十分常規(guī)的內(nèi)容，包括網(wǎng)站制造方、網(wǎng)站基礎(chǔ)信息等。

　　3結(jié)語(yǔ)

　　計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)布局與排版是一門(mén)藝術(shù)，針對(duì)網(wǎng)頁(yè)不同的內(nèi)容可以采用不同的布局排版形式。然而不論采用何種的布局排版形式都需要始終秉持著布局排版的原則，以設(shè)計(jì)出美觀、簡(jiǎn)潔、便捷、人性化的網(wǎng)頁(yè)，讓瀏覽者可以舒適的瀏覽網(wǎng)頁(yè)。

　　參考文獻(xiàn):

　�。�1］李娟．淺述網(wǎng)頁(yè)設(shè)計(jì)中的頁(yè)面布局技術(shù)［J］．考試周刊，20xx(27):116～117．

　�。�2］董磊．網(wǎng)頁(yè)設(shè)計(jì)中視覺(jué)傳達(dá)的整合設(shè)計(jì)［J］．明日風(fēng)尚，20xx(05):123，106．

　�。�3］許煒熔．讓“美”走進(jìn)學(xué)生網(wǎng)頁(yè)作品———談在網(wǎng)頁(yè)設(shè)計(jì)課堂中提高學(xué)生綜合素質(zhì)的幾點(diǎn)建議［J］．課程教育研究，20xx(26):248～249．

　�。�4］梁日有．網(wǎng)頁(yè)設(shè)計(jì)中藝術(shù)創(chuàng)新的研究與實(shí)現(xiàn)探討［J］．學(xué)子(理論版)，20xx(03):12～13．

　�。�5］尹涓，崔曉曦．淺談網(wǎng)頁(yè)視覺(jué)設(shè)計(jì)的應(yīng)用和技巧［J］．電腦知識(shí)與技術(shù)，20xx(15):204～205．

計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)論文2

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

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

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

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

　　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD，Responsive網(wǎng)頁(yè)Design)是一種網(wǎng)頁(yè)前端開(kāi)發(fā)技術(shù)，它可以描述為，“兼顧多種不同設(shè)備屏幕尺寸、分辨率、系統(tǒng)平臺(tái)和行為做出相應(yīng)的調(diào)整和布局的顯示機(jī)制”。原型(Prototype)，也叫“原樣”，是“模擬科學(xué)”中的一個(gè)術(shù)語(yǔ)。在心理科學(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)頁(yè)設(shè)計(jì)原型可描述為：符合“響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目分析、各類(lèi)終端具有適合自身用戶體驗(yàn)的不同頁(yè)面效果、一套代碼完成所有不同終端的網(wǎng)頁(yè)制作、各類(lèi)終端與主流瀏覽器良好兼容”等一系列規(guī)則的，外化的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)實(shí)踐模式。

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

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

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

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

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

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

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

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

　　為了防止不同瀏覽器給予相同HTML5標(biāo)簽的初始樣式存在差異，熟手利用HTML5+CSS3制作桌面版網(wǎng)頁(yè)制作時(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)頁(yè)面在IE內(nèi)核和Firefox內(nèi)核的所有版本瀏覽器中居中對(duì)齊，外層布局盒子與瀏覽器頭部無(wú)縫緊貼;

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

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

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

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

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

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

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

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

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

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

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

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

　　4結(jié)束語(yǔ)

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

計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)論文3

　　【摘要】本文簡(jiǎn)要地對(duì)網(wǎng)頁(yè)設(shè)計(jì)與圖形設(shè)計(jì)進(jìn)行分析，通過(guò)其運(yùn)用價(jià)值的總結(jié)，概括出了圖形設(shè)計(jì)在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)應(yīng)用中的要點(diǎn)，以供設(shè)計(jì)工作者參考。

　　【關(guān)鍵詞】網(wǎng)頁(yè)設(shè)計(jì)；圖形設(shè)計(jì)；運(yùn)用價(jià)值；運(yùn)用要點(diǎn)

　　前言

　　科學(xué)技術(shù)的不斷進(jìn)步，促進(jìn)了計(jì)算機(jī)技術(shù)以及互聯(lián)網(wǎng)的迅速發(fā)展，在各個(gè)國(guó)家基本實(shí)現(xiàn)了全覆蓋。隨著信息時(shí)代的到來(lái)，人們對(duì)于信息的利用更加頻繁，對(duì)網(wǎng)頁(yè)的關(guān)注度逐漸升溫，好的計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)會(huì)給企業(yè)以及瀏覽者帶來(lái)更大的價(jià)值，要想成功吸引更多的人們注意網(wǎng)頁(yè)，就需要將圖形設(shè)計(jì)完美的融入其中，以達(dá)到想要的效果。

　　1網(wǎng)頁(yè)設(shè)計(jì)與圖形設(shè)計(jì)概述

　　網(wǎng)頁(yè)設(shè)計(jì)，是為傳遞信息而進(jìn)行頁(yè)面設(shè)計(jì)的工作，其主要是依據(jù)企業(yè)的需求，利用計(jì)算機(jī)為媒介，將信息展示在瀏覽者面前。作為一種宣傳媒介，網(wǎng)頁(yè)設(shè)計(jì)的精美程度決定了瀏覽者對(duì)其的關(guān)注度，更絕對(duì)了其利用價(jià)值的大小。網(wǎng)頁(yè)設(shè)計(jì)包含以下種類(lèi)：功能型網(wǎng)頁(yè)設(shè)計(jì)、形象型網(wǎng)頁(yè)設(shè)計(jì)和信息型網(wǎng)頁(yè)設(shè)計(jì)，其主要利用顏色、字體、圖片、樣式進(jìn)行美化設(shè)計(jì)，根據(jù)用戶要求策劃和設(shè)計(jì)出滿意的網(wǎng)頁(yè)，高級(jí)的網(wǎng)頁(yè)設(shè)計(jì)甚至?xí)�考慮到通過(guò)聲光、交互等來(lái)實(shí)現(xiàn)更好的試聽(tīng)感受。網(wǎng)頁(yè)設(shè)計(jì)最為常用的工具包含PS、FL、AL、DW等[1]。圖形設(shè)計(jì)，是網(wǎng)頁(yè)設(shè)計(jì)技術(shù)中的重要組成部分，影響著網(wǎng)頁(yè)設(shè)計(jì)的效果，對(duì)提升網(wǎng)頁(yè)的設(shè)計(jì)感和感染力具有重要作用。圖形設(shè)計(jì)重在圖形，它是傳達(dá)信息的圖像符號(hào)，通過(guò)不同的表現(xiàn)形式，將作品中要表達(dá)的意境表現(xiàn)出來(lái)[2]，其重在創(chuàng)意上。圖形設(shè)計(jì)擁有眾多優(yōu)勢(shì)，有直觀性、審美性、指示性、象征性等，這些都能夠提升計(jì)算機(jī)網(wǎng)頁(yè)的設(shè)計(jì)效果。

　　2圖形設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的價(jià)值

　　2.1提升計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)效果

　　圖形設(shè)計(jì)的創(chuàng)新性，可以在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)的策劃中與眾不同，更能夠提升計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)效果，將網(wǎng)頁(yè)的別具一格的設(shè)計(jì)展現(xiàn)在用戶面前，讓更多的瀏覽者關(guān)注網(wǎng)頁(yè)，激發(fā)用戶群體的瀏覽興趣，起到更好的傳遞信息的效果。在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中，利用圖形設(shè)計(jì)中的完整的表達(dá)力，為用戶打造信息傳遞的視覺(jué)盛宴，保證計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)的質(zhì)量。據(jù)相關(guān)調(diào)查顯示，最受關(guān)注的網(wǎng)頁(yè)，往往是利用圖形設(shè)計(jì)相結(jié)合的。

　　2.2增添計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)色彩，向多元化發(fā)展

　　圖形設(shè)計(jì)的形式多種多樣，更可以說(shuō)是資源豐富多彩，其利用音頻、圖像以及藝術(shù)文字的形式進(jìn)行計(jì)算機(jī)網(wǎng)頁(yè)的設(shè)計(jì)，大大的增添了藝術(shù)色彩和愉悅的氛圍，并使得傳統(tǒng)的單一網(wǎng)頁(yè)形式向多元化方向發(fā)展。傳統(tǒng)的計(jì)算機(jī)網(wǎng)頁(yè)只是通過(guò)簡(jiǎn)單的元素將信息傳遞給瀏覽者，在表達(dá)上基本上就是文字配以簡(jiǎn)單的圖片，在信息的檢索上更是以文字為主[3]，將現(xiàn)代的圖形設(shè)計(jì)加入到計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)后，用戶可以通過(guò)音頻以及圖片進(jìn)行搜索，這種表現(xiàn)形式的變化圖形設(shè)計(jì)所起的作用功不可沒(méi)。

　　2.3加強(qiáng)了視覺(jué)沖擊力與感染力，更加人性化

　　計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)主要是通過(guò)文字和圖像相結(jié)合向使用者展示信息，圖像設(shè)計(jì)是將文字與圖像再加工，利用其獨(dú)特的處理技術(shù)，將文字與圖像的表現(xiàn)形式更具有視覺(jué)沖擊力與感染力，能夠較深瀏覽者的印象，提升瀏覽效率。圖形設(shè)計(jì)能夠?qū)⑽淖峙c圖像互相轉(zhuǎn)換，滿足瀏覽者的需求，并給人以簡(jiǎn)潔美觀的效果，更能夠體現(xiàn)設(shè)計(jì)者的理念，使計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)更加人性化。

　　3圖形設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用的要點(diǎn)

　　3.1圖片格式設(shè)置要符合

　　在圖形設(shè)計(jì)中，設(shè)計(jì)工作者一定要注意計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中對(duì)圖片格式的要求，只有符合的才能夠?qū)崿F(xiàn)其利用價(jià)值，才能夠達(dá)到設(shè)計(jì)方案中的實(shí)際效果。我們?cè)跒g覽網(wǎng)頁(yè)中，經(jīng)常會(huì)出現(xiàn)圖片、音頻打不開(kāi)的現(xiàn)象，使得我們需要的信息沒(méi)有很好的讀取。因此，在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中，一定要合理的處理圖像以及連接圖片，使其格式滿足網(wǎng)頁(yè)設(shè)計(jì)的要求，為用戶展現(xiàn)良好的視覺(jué)效果。

　　3.2圖像大小要控制在要求范圍內(nèi)

　　在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中，對(duì)圖像大小的要求非常嚴(yán)格，如果在利用圖形設(shè)計(jì)中不控制好圖像的大小，就會(huì)嚴(yán)重影響圖像在瀏覽者面前呈現(xiàn)的效果。計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)本身就收資源空間大小的限制，只有控制好圖像的質(zhì)量與范圍，才能夠提升網(wǎng)頁(yè)設(shè)計(jì)質(zhì)量。例如，我們?cè)跒g覽網(wǎng)頁(yè)時(shí)會(huì)經(jīng)�？匆�(jiàn)一些失真、或者比例失調(diào)的圖片，不僅影響了我們?yōu)g覽效果，還嚴(yán)重影響了我們繼續(xù)瀏覽下去的興趣。

　　3.3圖片顏色配置要科學(xué)

　　不同的色彩表現(xiàn)形式有所不同，同一的色彩會(huì)顯得單調(diào)，多種色彩搭配會(huì)顯得凌亂，在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中使用圖形設(shè)計(jì)時(shí)，無(wú)論哪種顏色都要優(yōu)化配置好，并要有一定的科學(xué)性。在圖形設(shè)計(jì)中，可以通過(guò)PS實(shí)際軟件對(duì)圖片進(jìn)行顏色調(diào)整，使其適合計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)整體色調(diào)，為瀏覽者展示良好的畫(huà)面感。

　　4結(jié)束語(yǔ)

　　計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)本身就具有一定的難度，圖形設(shè)計(jì)的加入使之更加的繁瑣，設(shè)計(jì)人員在運(yùn)用過(guò)程中一定要加以注意，更具網(wǎng)頁(yè)設(shè)計(jì)的實(shí)際要求進(jìn)行圖形的選擇與處理，才能夠增強(qiáng)圖形設(shè)計(jì)在計(jì)算機(jī)網(wǎng)頁(yè)設(shè)計(jì)中的視覺(jué)效果，實(shí)現(xiàn)其使用價(jià)值。

　　參考文獻(xiàn)

　　[1]王正紅.探討網(wǎng)頁(yè)設(shè)計(jì)中圖形的應(yīng)用[J].現(xiàn)代裝飾（理論），20xx，11：86.

　　[2]溫雪，畢軍濤，孫授卿.試析計(jì)算機(jī)圖形圖像設(shè)計(jì)以及視覺(jué)傳達(dá)設(shè)計(jì)[J].通訊世界，20xx，17：221.

　　[3]王燕軍.網(wǎng)頁(yè)設(shè)計(jì)中計(jì)算機(jī)圖像處理技術(shù)的應(yīng)用[J].電子技術(shù)與軟件工程，20xx，13：104.