網設計與制作的具體流程模板

目錄摘要 2關鍵詞 2Abstract 2KeyWords 2一、網頁設計標準 3（一）明確網站專題 3（二）總體設計方案專題鮮明 3（三）網頁設計形式和內容相統(tǒng)一 3二、網頁設計和制作具體步驟 3（一）網站策劃 4（二）網頁布局版式設計 5（三）網頁色彩搭配 6（四）網站后臺設計 7三、網頁制作工具學習和應用 8（一）Dreamweaver 8（二）Flash 9(三)Photoshop 9四、網頁優(yōu)化 10（一）網頁技術優(yōu)化 11（二）人文優(yōu)化 12參考文件 13淺談網頁設計和制作學生姓名：林永俊學號：5171030美術學院美術學專業(yè)指導老師：張睿職稱：講師摘要：伴隨中國互聯(lián)網高速發(fā)展，相關網絡應用技術將會得到更多應用，做為互聯(lián)網信息表述和傳輸基礎載體網頁也越來越受到大家關注。本文從網頁設計要素、標準及相關技巧等對網頁設計和制作進行了介紹和說明。經過對網頁設計和制作研究,探求符合時代特色網頁制作原理和行之有效設計方法,提升網頁用戶體驗和視覺沖擊力,增強網站和網民互動，促進企業(yè)開展電子商務，信息平臺等基礎設施，發(fā)明更高經濟效益。關鍵詞：網頁設計；網頁制作；色彩搭配Abstract:WiththerapiddevelopmentofChina'sInternetwebapplications,relatedtechnologywillgetmoreapplications,asInternetinformationrepresentationandtransferofwebbasedcarrierhasbecometheconcernofthepublic.Thisarticlefromthewebpagedesignelementsandprinciplesandrelatedskillsonwebdesignandproductionareintroducedandillustrated.Throughthedesignandmanufactureofwebpage,whichcanaccordwiththespecialagewebproductionprincipleandeffectivedesignmethods,improvewebuserexperienceandvisualimpact,enhancetheinteractionwithInternetwebsite,promoteenterpriseindevelopingelectroniccommerce,informationplatformandotherinfrastructure,andcreatemoreeconomicbenefits.KeyWords:webdesign；webpages；colourcollocation一個成功抓住用戶“眼球”并最終帶來經濟效益網站首先需要一個優(yōu)異設計，然后加上優(yōu)異制作。設計是網站關鍵和靈魂，是一個感性思索和理性分析相結合復雜過程，它方向取決于設計任務，它實現依靠于網頁制作。把網頁藝術設計和其它藝術設計形式進行比較，嘗試從網頁藝術設計內容、標準、制作技巧、制作步驟等多個方面對這個新藝術設計領域進行初步歸納總結和理論探討，網頁藝術設計是藝術和技術高度統(tǒng)一。一、網頁設計標準（一）明確網站專題優(yōu)異網頁設計肯定服務于網站專題，就是說要建設一個網站，首先需要定位，既要清楚建設網站目標和面向瀏覽對象，只有定位正確網站才會有可觀性和應用性。所以我們必需明確設計站點目標和用戶需求，從而做出切實可行設計計劃。（二）總體設計方案專題鮮明在目標明確基礎上，完成網站構思創(chuàng)意即總體設計方案。對網站整體風格和特色作出定位，計劃網站組織結構。做到專題鮮明突出，關鍵點明確，以簡單明確語言和畫面表現站點專題；調動一切手段充足表現網站個性和情趣。（三）網頁設計形式和內容相統(tǒng)一內容是組成設計一切內在要素總和，是設計存在基礎，被稱為“設計靈魂”；形式是組成內容諸要素內部結構或內容外部表現方法。為了將豐富意義和多樣形式組織成統(tǒng)一頁面結構，形式語言必需符合頁面內容，表現內容豐富含義。靈活利用對比和調和、對稱和平衡、節(jié)奏和韻律和留白等手法，經過空間、文字、圖形之間相互關系建立整體均衡狀態(tài)，產生友好美感。如對稱標準在頁面設計中，它均衡有時會使頁面顯得呆板，但假如加入部分富有動感文字、圖案，或采取夸張手法來表現內容往往會達成比很好效果。點、線、面作為視覺語言中基礎元素，巧妙地相互穿插、相互襯托、相互補充組成最好頁面效果，充足表示完美設計意境。一個優(yōu)異設計肯定是形式對內容完美表現。正如黑格爾所說：“工藝美就不在于要求實用具外部造型、色彩、紋樣去摹擬事物，再現現實，而在于使其外部形式傳達和表現出一定情緒、氣氛、格調、風尚、趣味，使物質經由象征變成相同于精神生活相關環(huán)境?！雹訇慁i，《走出藝術哲學迷宮—①陳鵬，《走出藝術哲學迷宮—黑格爾《美學》筆記》，文化藝術出版社，第7期，第201頁。二、網頁設計和制作具體步驟網頁設計是一個綜合性極強工作，包含到商業(yè)策劃、平面設計、人機界面、程序語言和數據庫等。網頁設計從總體上可大致分為策劃、前臺頁面設計和后臺三部分，本文關鍵從AZE設計工作室網站實例來敘述網頁設計和制作步驟。（一）網站策劃策劃是指網站整體定位、功效計劃、應用分析、步驟設計和內容架構組織，網站策劃是網站平臺建設成敗關鍵內容之一。網站策劃關鍵敘述了處理方案能給用戶帶來什么價值，和經過何種方法去實現這種價值。在策劃同時要以人為本，迎合網民需求、找到了市場需求點，才能把整體定位策劃做到位。對網站內容功效計劃，做到讓搜索引擎更多收錄和關注，網頁打開速度愈加快。經過對AZE設計工作室分析，關鍵包涵動畫設計、網站設計、家裝設計、CG培訓四個大欄目，明確了網站定位以后分析相關行業(yè)和市場特點。經過對相關行業(yè)和市場分析，和網站內容和功效分析，計劃出此次建設網站關鍵內容以下：1.進入頁flashFlash頁面導入網站不僅生動形象，還會給人印象深刻感覺，flash頁面以四個版塊為基準，關鍵分動畫設計、網站建設、墻體彩繪、設計培訓。點擊任意一個能夠直接進入每個小站，含有明確導航性，設置較醒目標進入首頁按鈕，經過點擊它就能夠進入網站首頁。2.網站首頁網站首頁是整個網站門戶，簡練、大方、加載速度快是網站首頁關鍵要素。網站關鍵計劃欄目內容有：首頁、業(yè)內新聞、動畫設計、網站建設、家裝設計、CG培訓、精品案例、相關我們、服務范圍、聯(lián)絡我們。3.新聞動態(tài)公布系統(tǒng)最新動態(tài)欄目關鍵用來公布企業(yè)新聞，企業(yè)動態(tài)、最新消息等。經過最新動態(tài)欄目可使用戶對企業(yè)最新發(fā)展動態(tài)、產品信息、人文文化、最新消息等信息有一個立即了解。此欄目，可讓用戶在線實時管理、公布新聞、刪除新聞、更改等。4.企業(yè)留言系統(tǒng)企業(yè)留言欄目在設計方面要美觀、大方、和網站風格融成一體，更要重視用戶體驗。網民無需注冊，有回復，經過相互直接交流，能夠為企業(yè)找到潛在用戶，和部分市場信息。5.人才招聘現在很多企業(yè)全部利用企業(yè)網站平臺公布招聘信息。這么不僅能夠充足利用現有資源，而且相比傳統(tǒng)職業(yè)服務中心更含有實時性、互動性等優(yōu)點。（二）網頁布局版式設計logo企業(yè)公告、人才招聘、網站地圖、論壇聯(lián)絡方法/收藏本站首頁業(yè)內新聞動畫設計網站建設墻體彩繪CG培訓精品案例相關我們服務范圍聯(lián)絡我們網站主幻燈片企業(yè)公告動畫設計欄目最新資訊幫助中心網頁設計欄目企業(yè)介紹資源共享墻體手繪欄目友誼鏈接CG培訓欄目網頁版權信息圖（1）AZE設計工作室首頁計劃圖頁面整體布局則是網頁設計根基。依據現代網頁發(fā)展趨勢來看，簡練、直觀、人性化和個性化是網站設計基礎要素，所以在做整體布局時候一定要充足考慮到這些要素。網頁設計作為一個視覺語言，尤其講究編排和布局，經過文字圖形空間組合編排，表示出友好和美。在AZE網站首頁關鍵版塊設計中，我采取了“匡”字型布局，給主內容區(qū)釋放了更多空間，圖(1)（AZE設計工作室網站首頁）所表示：頁面上部是網頁標志和導航條，接下來是網頁主幻燈片，左邊欄目放友誼鏈接和網頁部分小欄目，中間是網站四個關鍵內容欄目，右邊欄目放新聞更新和企業(yè)介紹，網頁底部放版權信息。網頁內容作為一個版面，既要有文字，又要有圖片；文字有大小、標題和正文之分等網頁組成畫面對比，在網頁排版時候充足考慮網站定位，突出表現網站主體內容。AZE設計工作室網站是個多頁面站點，頁面編排設計要求把頁面之間有機聯(lián)絡反應出來，尤其要處理好頁面之間和頁面內秩序和內容關系。為了達成最好視覺表現效果，設計中應利用各組成部分在內容上內在聯(lián)絡和表現形式上相互呼應，并注意整個頁面設計風格一致性，實現視覺上和心理上連貫，使整個頁面設計各個部分極為融洽，布局合理，讓瀏覽者有一個流暢視覺體驗。（三）網頁色彩搭配色彩是藝術表現要素之一。在網頁設計中，依據友好、均衡和關鍵突出標準，將不一樣色彩進行組合、搭配來組成符合審美要求頁面。依據色彩對大家心理影響，合理地加以利用。不一樣顏色也代表著不一樣行業(yè)訴求。(比如：醫(yī)院和環(huán)境保護部門會選擇綠色，而公共事業(yè)機構則會選擇藍色等)所以在設計之初要充足考慮該網站性質及訪問對象，以此來確定網頁色彩搭配形式。當專題色確定好以后，考慮其它配色時，一定要考慮其它配色和專題色關系，要表現什么樣效果?！吧士倯脴藴适?總體協(xié)調，局部對比。網頁整體色彩效果應該是友好，只有局部、小范圍地方能夠有部分強烈色彩對比。”高永子、盧堅、潘星亮著，《網頁經典配色和設計手冊》，中國青年出版社，第7期，第56頁。在色彩利用上，能夠依據主頁內容需要，分別采取不一樣主色調。色彩還含有顯著心理感覺，比如冷、暖感覺，進、退效果等。另外，色彩還有民族性，各個民族因為環(huán)境、文化、傳統(tǒng)等原因影響，對于色彩喜好也存在著較大差異。充足利用色彩這些特征，能夠使我們主頁含有深刻藝術內涵，從而提升網頁文化品位。高永子、盧堅、潘星亮著，《網頁經典配色和設計手冊》，中國青年出版社，第7期，第56頁。AZE設計工作室網站是一個藝術設計類型網站，在色彩利用方面要凸顯行業(yè)特色同時更要獨具特色，經過對網站策劃和內容計劃，網站關鍵分四個小站分別表現四個設計行業(yè)，在把握好每個小站色彩整體性又要有所區(qū)分，動畫設計頁用藍紫色調，網站設計頁用藍色調，墻體手繪頁用黃綠色調，CG培訓頁用綠色調，主頁采取灰色調把四個小站統(tǒng)一起來。下面是網站設計中用到多個調色方案：單色方案、相同色方案、對比色方案。1.單色方案單色方案是指在網站設計中使用一個基礎顏色，為避免單調，能夠經過調整這種基礎顏色灰度和亮度來得到更多顏色，因為整個顏色方案中實際上只有一個基色，所以這種方案稱為單色方案。比如：在Photoshop色彩選擇窗口中，我們能夠這么進行建立單色方案。首先調整H（也就是Hue縮寫）后面值來調整色調。注意，H單位是度，也就是基礎顏色在顏色環(huán)上所處位置角度。設置好H值以后，再調整B后面數字調整亮度和S后面數字調整飽和度。注意，其中B和S單位是百分比，也就是向基礎顏色中添加白色和黑色百分比。這么就能夠得到一個單色方案了。2.相同色方案在色彩圓環(huán)上選擇相互相鄰多個顏色組成配色方案就是相同色方案。比如橙色、橙紅色和橙黃色就能夠組成一個相同色方案。因為相同色方案中包含了多個基色，假如再加上亮度和飽和度改變，能夠組成顏色就很多。相同色配色方案能夠給人很協(xié)調感覺，所以在網站設計中很常見。經典利用方法就是，用一個顏色作為頁面背景，而另外一個在顏色環(huán)中和其相鄰顏色作為前景色。除了上面介紹綠色和黃色之外，藍色和綠色和紅色和褐色也是比較常見相同色配色方案。3.對比色方案對比色方案即把色性完全相反色彩搭配在同一個空間里。比如：紅和綠、黃和紫、橙和藍等。這種色彩搭配，能夠產生強烈視覺效果，給人亮麗、鮮艷、喜慶感覺。當然，對比色調假如用得不好，會適得其反，產生俗氣、刺眼不良效果。這就要把握“大調和，小對比”這一個關鍵標準，即總體色調應該是統(tǒng)一友好，局部地方能夠有部分小強烈對比。（四）網站后臺設計后臺是指程序設計、數據操作、功效實現、管理界面和管理功效設計等。網站后臺設計常常被大家所忽略，好后臺能夠提升編輯使用效率，同時部分好設計也能降低錯誤發(fā)生，針對“后臺用戶”這一特殊群體提供部分可行體驗優(yōu)化標準。合理功效設計和友好設計對于效率和差錯率均會有很大提升，小小設計可能會起到非凡作用。三、網頁制作工具學習和應用（一）DreamweaverDreamweaver是美國MACROMEDIA企業(yè)開發(fā)集網頁制作和管理網站于一身所見即所得網頁編輯器，它是第一套針對專業(yè)網頁設計師尤其發(fā)展視覺化網頁開發(fā)工具，利用它能夠輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制充滿動感網頁。1.Dreamweaver優(yōu)點①最好制作效率“Dreamweaver提供了以CSS為基礎設計和開發(fā)提供支持革命性功效，CSS將網頁要展示內容和樣式設定分開?！蓖跄戎?，《Dreamweaver網頁制作和色彩搭配全攻略》，清華大學出版社，第5期，第23頁。當要改變網頁外觀時，只需更改樣式設定部分，HTML文件本身并不需要更改。王娜著，《Dreamweaver網頁制作和色彩搭配全攻略》，清華大學出版社，第5期，第23頁。②網站管理使用網站地圖能夠快速制作網站雛形、設計、更新和重組網頁。改變網頁位置或檔案名稱，Dreamweaver會自動更新全部連結。使用支援文字、HTML碼、HTML屬性標簽和通常語法搜尋及置換功效使得復雜網站更新變得快速又簡單。2.Dreamweaver缺點難以正確達成和瀏覽器完全一致顯示效果。也就是說在所見即所得網頁編輯器中制作網頁放到瀏覽器中是極難完全達成您真正想要效果，這一點在結構復雜部分網頁（如分幀結構、動態(tài)網頁結構）中便能夠表現出來。頁面原始代碼難以控制性，比如您在所見即所得編輯器中制作一張表格也要幾分鐘，但您要它完全符合您要求可能需要幾十分鐘，甚至更多時間。而相比之下，非所見則所得網頁編輯器，就不存在這個問題，因為全部HTML代碼全部在您監(jiān)控下產生，不過因為非所見則所得編輯器先天條件就注定了它工作低效率。怎樣實現二者完美結合，則既產生潔凈、正確HTML代碼，又含有則見則所得高效率、直觀性，一直是網頁設計師夢想。（二）Flash1.Flash介紹和發(fā)展趨勢Flash也是由macromedia企業(yè)推出交互式矢量圖和Web動畫標準，由Adobe企業(yè)收購。網頁設計者使用Flash創(chuàng)作出既漂亮又可改變尺寸導航界面和其它奇特效果。flash動畫好壞是評定一個網站好壞關鍵影響原因之一，動感絢麗flash動畫，能給網站受眾以極大視覺沖擊力。2.Flash優(yōu)點Flash一個很關鍵特點是創(chuàng)建文件體積很小，Flash是完全基于矢量動畫處理技術，而矢量圖形就是用少許向量數據來描述一個復雜對象，存放時只占很小空間，而且圖像質量也很高。Flash使用是插件工作方法，用戶只要安裝一次插件，以后就能夠快速開啟并觀看動畫，而無須像Java那樣，每次全部要花費大量時間開啟虛擬機。Flash動畫采取是“流式”動畫播放技術，用戶無須等到動畫下載完全再去欣賞動畫，而是一邊下載一邊欣賞。Flash功效還是很廣泛。使用內置ActionScript語句結合JavaScript，也能夠制作出互動性很強主頁來。3.網站應用flash注意事項插件，Flash動畫播放需要安裝Adodb企業(yè)播放插件。假如用戶電腦上沒有便不能播放動畫，而且Flash播放插件版本有很多個，部分低版本并不能播放采取高版本制作flash動畫。全Flash網站，對于全Flash網站在seo方面有很多劣勢，因為它全部內容，結構全部在flash內部，所以，搜索引擎會全然不知這個網站是什么內容?，F在搜索技術并不能識別到Flash里面文本，圖片等信息。所以，在baidu、谷歌等搜索引擎中無法識別到Flash到底在表示什么信息，影響網站推廣。(三)Photoshop1.Photoshop在網頁布局中計劃作用①布局靈活。Photoshop靈魂是圖層，每層能夠放置不一樣元素，圖層之間能夠相互鏈接，也可單獨存放，每個圖層上圖像位置能夠隨意挪動而不影響其它圖層圖像位置，每個圖層上圖像大小、色階、亮度、飽和度透明度等可單獨設置而不影響其它圖層上圖像。如此靈活功效，完全能夠讓設計者隨心所欲設計而不受任何約束。②修改方便。網站建設前期首先要和用戶簽定協(xié)議，簽定協(xié)議時用戶最關心是自己網站是什么樣子，這時設計者不可能拿出建好網站給用戶演示，這么成本太高，最好措施是拿出在Photoshop中做出效果圖給用戶看。通常情況下，用戶一次滿意率很低，總會提出修改意見，而且還會不停地提出修改方案。這時我們就能夠利用Photoshop強大功效按用戶要求方便地進行修改和優(yōu)化，直到用戶滿意為止。③加緊瀏覽進度。一個設計不美觀不規(guī)范網站是沒有生命力，一樣一個打開、下載速度慢網站也是沒有存在價值。使用Photoshop設計網頁經過裁切后體積相對要小得多，相同元素因為其格式改變也會大大提升下載速度，所以Photoshop就成了提升速度，提升點擊率制勝法寶。2.photoshop和dreamweaver配合即使效果圖是用Photoshop設計，但一定要兼顧到Dreamweaver對頁面布局要求，Dreamweaver下網頁布局是使用‘國’字形，還是其它模式，是否使用框架，使用框架類型是哪一個，全部是在設計前要考慮到。不然會造成效果圖和最終網站布局出現出入，使網頁設計過程變得復雜。正確切片，只有經過正確切片后，DreamWeaver才能對效果圖進行有效整合，Photoshop在網頁布局中主動作用才發(fā)揮到了極致。四、網頁優(yōu)化“在網頁設計中，網頁優(yōu)化是較為關鍵一個步驟。”王曉峰、焦燕著，《網頁設計原理及實戰(zhàn)策略》，清華大學出版社，第3期，第68頁。它成功是否會影響頁面瀏覽速度和頁面適應性，影響觀者對網站印象。而網頁優(yōu)化工作是由很多方面優(yōu)化組成，一名優(yōu)異網頁優(yōu)化工作人員必需含有多方面知識，不僅僅要掌握網站設計制作技術；還要掌握很多計算機其它方面知識(包含電子商務、人機交互、易用性和部分相關軟件知識等等)；甚至需要掌握心理學、商業(yè)運作等相關知識。我在網頁制作優(yōu)化過程中關鍵有兩個方面：技術優(yōu)化，人文優(yōu)化。王曉峰、焦燕著，《網頁設計原理及實戰(zhàn)策略》，清華大學出版社，第3期，第68頁。（一）網頁技術優(yōu)化技術優(yōu)化關鍵是對代碼優(yōu)化、目錄結構優(yōu)化和針對搜索引擎優(yōu)化三個部分。1.代碼優(yōu)化代碼優(yōu)化關鍵處理問題就是頁面瀏覽速度和適應性問題。文字和圖片是組成頁面兩個關鍵原因，所以我們優(yōu)化也要從文字和圖片開始。在一個網站漢字字是頁面中正確傳達信息元素，所以字體優(yōu)化顯得尤為關鍵。使用css樣式表指定文字樣式是必需，通常我們將字體指定為宋體，大小指定12px，顏色要視背景色而定，標準上以能看清且和整個頁面搭配友好為準。在白色背景上，我們通常使用黑色，這么不易產生視覺疲憊，能確保瀏覽者較長時間地瀏覽網頁。圖片是網頁中關鍵元素。圖片優(yōu)化能夠在確保瀏覽質量前提下將其大小降至最低，這么能夠成倍地提升網頁下載速度。利用Photoshop能夠將圖片切成小塊，分別進行優(yōu)化。輸出格式能夠為gif或jpeg，要視具體情況而定。通常我們把有較為復雜顏色改變小塊優(yōu)化為jpeg，而把那種只有單純色塊卡通畫式小塊優(yōu)化為gif，這是由這兩種格式特點決定。DIV和表格(table)是頁面中關鍵元素,是頁面排版關鍵手段。我們能夠設定DIV和表格寬度、高度、邊框、背景色、對齊方法等參數。很多時候，我們將表格邊框設為0，以此來定位頁面中元素，或借此確定頁面中各元素相對位置。“瀏覽器在讀取網頁html原代碼時，是讀完整個table才將它顯示出來,我們在設計頁面表格時候，應該盡可能避免將全部元素嵌套在一個表格里，而且表格嵌套層次盡可能要少?！焙涡惴贾?，《網頁制作和網站建設課堂實錄》，人民郵電出版社，第5期，第73頁。所以在網頁制作過程中能夠采取DIV套表格方法來降低嵌套，提升網頁瀏覽速度。何秀芳著，《網頁制作和網站建設課堂實錄》，人民郵電出版社，第5期，第73頁。2.目錄結構優(yōu)化目錄結構優(yōu)化關鍵是對網站文件管理，我提議建立一個大文件夾，里邊包含各個頻道文件夾、網頁頁面圖片文件夾、網頁內容圖片文件夾等等一個一個單獨類別文件夾，使得在維護時候能夠方便找到每一個頁面具體位置，提升工作效率。3.針對搜索引擎優(yōu)化搜索引擎優(yōu)化是完整優(yōu)化工作必不可少一個步驟。以例舉我對網站關鍵字優(yōu)化，“關鍵字”表現要合理，比如我們能夠制作一個“網站導航”頁面，網站導航頁面會淋漓盡致表現各個關鍵字，這個頁面不僅方便用戶使用也會更輕易被搜索引擎找到起到事半功倍作用。伴隨搜索引擎全部有了圖片搜索功效，網頁里邊圖片也是表現關鍵詞好地方，比如我在頁面里邊加入圖片后給圖片起一個“名字”（<imgSRC="images.gif"WIDTH="100"HEIGHT="100"BORDER=0ALT="圖片名稱"/>）給圖片名稱就能夠是關鍵字。（二）人文優(yōu)化人文優(yōu)化關鍵是交互、易用性和網站表現優(yōu)化。在網絡發(fā)展到Web2.0時代，更重