媒體公司網(wǎng)站的設計與制作

精選優(yōu)質(zhì)文檔傾情為你奉上精選優(yōu)質(zhì)文檔傾情為你奉上專心專注專業(yè)專心專注專業(yè)精選優(yōu)質(zhì)文檔傾情為你奉上專心專注專業(yè)南京化工職業(yè)技術學院畢業(yè)設計（論文）論文題目：媒體公司網(wǎng)站設計與制作南京藍深泵業(yè)有限公司分公司網(wǎng)頁制作論文題目：MediaCompanyWebSiteDesignandProductionNanjingDeepBluePumpCo.,Ltd.BranchWebProduction作者姓名:吳小艷所在系部:信息技術系班級名稱:多媒體0922指導教師:彭雪萍2012年4月畢業(yè)設計（論文）任務書設計（論文）題目：媒體公司網(wǎng)站設計與制作指導教師：彭雪萍職稱：講師類別：畢業(yè)設計1、設計（論文）的主要任務1)根據(jù)題目要求，查閱大量文獻資料，并收集資料；了解用不同軟件制作網(wǎng)站的基本方法，并進行分析和比較。2）以Dreamweaver軟件為平臺，結合圖片處理軟件制作一個媒體公司網(wǎng)站。要求提交電子版原始文件（.html）3）完成畢業(yè)論文。2、設計（論文）的主要內(nèi)容1）網(wǎng)站設計與制作的相關基礎知識；2）媒體公司網(wǎng)站設計與策劃（確定主題，明確網(wǎng)站要提供和發(fā)布的信息）；3）媒體公司網(wǎng)站整體設計（網(wǎng)站LOGO設計、風格定位、主色調(diào)及視覺效果、網(wǎng)頁布局及版面設計、欄目設計、導航設計）；4）網(wǎng)站分步設計。3、設計（論文）的基本要求主題突出，內(nèi)容充實，布局合理，結構清晰、規(guī)范。色彩搭配合理、美觀，設計有創(chuàng)意。導航美觀、醒目，跳轉(zhuǎn)方便。要求有網(wǎng)站LOGO。獨立完成網(wǎng)站制作并撰寫論文。4、主要參考文獻可參考相關文獻資料和已有的相關網(wǎng)站5、畢業(yè)設計（論文）時間安排第一階段：資料收集整理第二階段：對資料進行分析，構思網(wǎng)站主題，確定設計方案第三階段：設計與制作媒體公司第四階段：編寫畢業(yè)論文、完善設計備注：畢業(yè)論文答辯時間為大約為2012年4月上旬，以系部通知時間為準，有特殊情況的學生請?zhí)崆芭c系里聯(lián)系。注：1、此表一式三份，系部、指導教師、學生各一份。2、類別是指畢業(yè)論文或畢業(yè)設計，類型指應用型、理論研究型和其他。摘要網(wǎng)頁設計作為用戶界面交互設計的延伸，是在新的媒體和新的技術支持下實現(xiàn)一個全新的設計創(chuàng)作領域。設計創(chuàng)作網(wǎng)頁應遵循其特有的特點和結構思路，具有實際可行性和外觀時尚性。本論文講述了網(wǎng)站建設的一般步驟，并結合簡潔明了的色彩應用與網(wǎng)頁設計理論，通過南京藍深分公司（泵業(yè)有限公司）網(wǎng)頁制作實例，闡述了網(wǎng)頁設計的視覺效果和具體操作。詳細地論述了多媒體公司網(wǎng)站設計與制作的相關概念和注意事項，包括公司網(wǎng)站的整體布局構架了解、素材的搜集以及概念的整理與運用。隨著信息技術的普及與推廣，網(wǎng)上信息發(fā)布平臺也越來越完善，進而對整體視覺感受的要求也隨之提高。在現(xiàn)在的生活中，網(wǎng)上購物與信息查找已經(jīng)猶如空氣般融入了我們的生活，不可或缺。進而對公司的宣傳與推廣提供了又一途徑。關鍵詞：網(wǎng)頁色彩網(wǎng)頁制作web頁面布局設計誤區(qū)視覺傳達設計ABSTRACTWebDesignasanextensionoftheinteractiveuserinterfacedesign,newmediaandnewtechnologiesSupporttoachieveawholenewfieldofcreativedesign.Creativedesignwebpagesshouldfollowthespecific，F(xiàn)eaturesandstructureofideas,practicalfeasibilityandstylish.Thispaperdescribesthesitebuilt，Thegeneralstepstoset,combinedwithclearandconcisecolorapplicationsandWebdesigntheory,throughtheNanjing，DeepBlueBranch(PumpIndustryCo.,Ltd.)webproductioninstance,describesthevisualeffectofthewebdesign，F(xiàn)ruitandtheconcreteoperation.Discussedindetailthedesignandproductionofmulti-mediacompany'sWebsiteconceptandNote,includingtheframeworkoftheoveralllayoutofthecompany'sWebsitetounderstand,tocollectmaterialandconcepts，Organizeanduse.WiththepopularizationandpromotionofITandonlineinformationpublishingplatformmoreandmore，Perfect,andthusalsowillimprovetheoverallvisualexperiencerequirements.Inthepresentlife,onlinehoppingandinformationtofindhasbeenliketheairlikeintoourlives,indispensable.AndthenrightPublicityandpromotionofthecompanytoprovideanotherway.Keywords：WebpagecolorWebproductionwebpagelayoutdesignMythVisualCommunicationDesign目錄TOC\o"1-2"\h\z\u前言隨著互聯(lián)網(wǎng)的高速發(fā)展，許多人不在僅僅局限于網(wǎng)上沖浪，而是參與到網(wǎng)站建設中。越來越多的企業(yè)高度重視自身企業(yè)在互聯(lián)網(wǎng)上的形象，新產(chǎn)品面世，都可能獨立開發(fā)一個網(wǎng)頁展示平臺，可以向客戶介紹企業(yè)形象和實例。網(wǎng)頁展示，在如今的市場經(jīng)濟條件下品牌傳播中的作用可見一斑，網(wǎng)頁制作作為網(wǎng)站制作中一個重要的環(huán)節(jié)，相對于傳統(tǒng)的平面設計而言，網(wǎng)頁設計具有更多的新穎性，更多可以表現(xiàn)的手法。結合我在公司實習過程，現(xiàn)就網(wǎng)站建設和管理過程中，網(wǎng)站設計與制作的具體經(jīng)歷，包括：網(wǎng)頁設計與制作過程中的網(wǎng)頁布局，色彩構置，框架結構等相關事項做以下論述。制作一個媒體公司網(wǎng)站，以確保其在相同網(wǎng)速流量的前提下，以最佳方式打開一個瀏覽界面，需要我們在制作網(wǎng)站頁面中使用最佳的編排編碼方式。在前人總結經(jīng)驗下逐漸形成以div+css的布局效果取代table網(wǎng)頁布局，在選取圖片的同時根據(jù)需要對圖片的大小體積進行一定的壓縮與簡化，最好用一個像素解決問題(使用css樣式進行編排實現(xiàn))。在相同的情況下能用編碼文字效果實現(xiàn)時最好取代圖片效果。第1章網(wǎng)頁設計制作流程1.1網(wǎng)頁制作流程1、客戶基本要求：在客戶確定制作網(wǎng)站網(wǎng)頁時，收取客戶公司的一些基本網(wǎng)站內(nèi)容資料；2、制作工具：準備制作網(wǎng)頁的工具、圖片制作工作、網(wǎng)絡工具等；超文本標識語言（HTML）編輯工具：editplus、記事本、Dreamweaver3、頁面設計及美化工具；使用工具：所有可制作平面的軟件推薦使用Photoshop、Flash4、編寫網(wǎng)頁：開始動手，編寫網(wǎng)頁，在Dreamweaver中使用div+css進行編輯制作。1.2網(wǎng)頁設計制作步驟網(wǎng)頁是網(wǎng)站的表現(xiàn)形式，網(wǎng)站是網(wǎng)頁的集合，一個站點用的所有網(wǎng)頁構成一個網(wǎng)站。網(wǎng)頁設計是指對網(wǎng)站整體頁面的設計，包括頁面風格、配色、布局、內(nèi)容等。網(wǎng)頁設計包含的內(nèi)容非常多，大體分為兩個方面：一方面是純網(wǎng)站本身的設計，如文字、排版、圖片制作、平面設計靜態(tài)圖文和動態(tài)聲音、影像等；另一方面是網(wǎng)站的延伸設計，包括網(wǎng)站主題、瀏覽群體的定位、智能交互、制作策劃、形象包裝和宣傳營銷等設計頁面的第一步就是設計片面布局，就像報刊雜志版面設計一樣，我們可以看做一張報紙或者一張雜志來進行排版布局。1、草稿新頁面就像一張白紙，沒有任何的約定俗成的東西，可以盡可能地發(fā)揮想象力，創(chuàng)造力，將想像的布局到頁面上。這是原創(chuàng)階段，不必講究細膩工整，可以在草稿本上先畫出整個布局框架，把多個板塊的位置先粗略的布置上去進行下一步工作的展示，這一步可以借助photoshop或其他一些制圖工具軟件來完成。2、粗略布局在草稿的基礎上，將需要的功能模塊放到頁面上去，這時要遵循突出重點、整體協(xié)調(diào)的原則，首先將網(wǎng)站標志、導航條、banner等主要部分模塊放在最突出的位置，然后考率其他模塊的布局。3、定稿定稿即將粗略布局精細化、具體化，完成整個頁面設計。4、網(wǎng)頁設計的制作首先在根據(jù)客戶的要求下，完成首頁制作，發(fā)給客戶在經(jīng)過客戶的確定后，再制作其他的頁面，制作完成后，交給客戶驗收，然后發(fā)給客戶確定，待所有的頁面都經(jīng)過客戶的確定后，完成網(wǎng)站的制作過程，交給后臺程序員添加程序和后臺加載內(nèi)容。1.3網(wǎng)頁設計常用參數(shù)圖片質(zhì)量與下載速度由于網(wǎng)絡速度問題，我們需要考慮圖片大小對傳輸速度的影響，如果圖片太大就會影響瀏覽速度，訪問者很快就會對這個網(wǎng)站失去了興趣，只有充分了解圖片質(zhì)量與下載速度的關系，并了解不同的文件格式，才能更有效的表達內(nèi)容。1、分辨率理解圖像分辨率可以直接控制文件大小和下載速度，進而影響訪問者的人數(shù)，創(chuàng)建WEB圖片的小、快、好。顯示器的分辨率起絕對性作用，大多數(shù)顯示器使用的是1024*768的分辨率，因為要通過顯示器顯示頁面，所以用高分辨率并不會增加圖片質(zhì)量還會降低圖片的下載速度。2、位圖習慣性稱為圖像，而將矢量圖稱為圖形，位圖是位映射圖像的簡稱，也可以叫柵格圖。他將一副圖分成許多柵格，柵格的每一個點就是圖像的像素，其值就是像素的亮度和色彩度，擴大位圖尺寸的效果就是增多像素，從而將線條和形狀顯示的參差不齊，位圖與其他分辨率密切相關，因此在處理位圖圖像時，必須設置合適的圖像分辨率，否則輸出圖像時會遺漏細節(jié)，使圖像模糊。3、矢量矢量圖也稱為面向?qū)ο竦膱D像或繪圖圖像，它使用一組線段造型描述一段圖像，圖像中包含的直線，弧線和造型的設置與開關是由指令描述的，矢量圖適用于描述色彩簡單的圖像，矢量文件中的圖像元素稱為對象，每一個對象都是一個自成一體的主體，它具有形狀、輪廓、大小和屏幕位置等屬性。放大位圖會失真，但放大矢量圖不會失真。4、圖片格式制作好的效果圖可以保存為各種格式，包括GIF格式，JPEG格式和PNG格式等各個圖片格式之間的區(qū)別為：GIF格式即圖形交換格式；GIF格式的圖片只能使用256種顏色，不適合顯示色彩豐富的圖像內(nèi)容。其特點是1.采用隔行掃描的顯示方式；2.可以設置背景透明；3.可以制作簡單的動畫。JPEG格式可以顯示顏色復雜的圖片，但是在處理大面積的顏色塊時可能會出現(xiàn)明顯的壓縮痕跡。PNG格式的圖片兼有GIF和JPEG的優(yōu)點。1.4網(wǎng)頁設計制作常用工具介紹用來制作效果圖的軟件并沒有明確的規(guī)定?？梢允褂酶鞣N圖形制作軟件和處理軟件，現(xiàn)在通常使用的軟件是Photoshop，Dreamweaver和flash。在制作效果圖時，使用的軟件對最終結果并沒有什么影響，用自己精通的即可。Photoshop是一款非常好用的平面設計軟件。由Adobe公司開發(fā)設計，其用戶界面易懂、功能完善、性能穩(wěn)定，是比較專業(yè)的圖像處理軟件，它具有強大的濾鏡功能。所以，在很多的的廣告、出版、軟件公司，Photoshop都是首選的平面工具，它有很多的快捷方式，如抓手工具H鍵，TABLE鍵切換顯示或隱藏所有的控制板，D鍵、X鍵迅速切換前景色和背景色等，靈活的運用快捷鍵，可以使設計的速度大大提高。Flash是網(wǎng)頁flash動畫處理軟件，可以做出動畫效果，主要是和Dreamweaver配合做網(wǎng)頁。對處理一般的動畫效果比較實用，此軟件深受大眾喜愛。1.5網(wǎng)頁布局常見網(wǎng)頁版式布局結構有以下幾種：1、兩欄式結構，即頁面頂部為網(wǎng)站標志或廣告條，下面分為左右兩欄，一般左欄式導航或分類信息，右欄為主要內(nèi)容，這種布局很容易掌握，但如果在色彩上不加以注意的，很容易給人一種“乏味”的感覺。如圖1-1圖1-1兩欄式構圖2、三欄式結構是一些大型網(wǎng)站常用的布局結構，一般為上面是橫幅的廣告條，下面分為三豎欄，中間較大，是主要的信息，左右是小條內(nèi)容或者廣告條。三欄式給人一種充實的感覺，但頁面擁擠，不夠靈活，是網(wǎng)站常用的一種布局形式。如圖1-2圖1-2三欄式構圖3、“三”型結構，這種結構多用于國外網(wǎng)站或者視頻類網(wǎng)站，其特點是分類清晰，展示方便。左右框架型，是企業(yè)網(wǎng)站或論壇常用的布局，頁面分為左右兩部分，左邊一般為導航部分，右邊是與導航相對應的內(nèi)容。左右框架型的結果非常清晰，內(nèi)容一目了然，便于信息的查詢。如圖1-3圖1-3“三”型構圖4、上下框架型與左右框架型類似，其區(qū)別僅僅在于形式。頁面整體為橫向分布，上面為導航，中間的大展式窗口很突出，整個網(wǎng)站顯得簡潔明亮，這種結構適合于信息量不大，主要靠圖片展示內(nèi)容的網(wǎng)站。如圖1-4圖1-4上下框架型構圖第2章網(wǎng)頁色彩設計及視覺設計2.1色彩在網(wǎng)頁中的應用色彩是藝術表現(xiàn)的要素之一。在網(wǎng)頁設計中，我們的設計師根據(jù)和諧、均衡和重點突出的原則，將不同的色彩進行組合．搭配來構成美麗的頁面。根據(jù)色彩對人們心理的影響，合理地加以運用。如果您的企業(yè)有CIS（企業(yè)形象識別系統(tǒng)），我們將按照其中的VI進行色彩運用。1、了解你的網(wǎng)站所要傳達的訊息和品牌。選擇可以加強這些訊息的顏色。例如，如果在設計一個強調(diào)穩(wěn)健的金融機構，那么就要選擇冷色系、柔和的顏色，像是藍、灰或綠。在這樣的狀況下，如果使用暖色系或活潑的顏色，可能會破壞了該網(wǎng)站品牌。2、了解你的讀者群。文化差異可能會使色彩產(chǎn)生非預期的反應。同時，不同地區(qū)與不同年齡層對顏色的反應亦會有所不同。年輕族群一般比較喜歡飽和色，但這樣的顏色卻引不起高年齡層的興趣。3、不要使用過多的顏色。除了黑色和白色以外，約選擇四到五個顏色就夠了。太多的顏色會導致混淆，也會拉走讀者的注意力。如圖2-1與圖2-2圖2-1色彩過多圖2-2色彩簡潔4、在閱讀的部分使用對比色。顏色太接近無法產(chǎn)生足夠的對比效果，也會妨礙觀眾閱讀。白底黑字的閱讀效果最好。如圖2-3圖2-3文字排版5、用灰階來測試對比。當你在處理黑色、白色和灰色以外的顏色的時候，有時候會很難決定每個顏色的相對值。為了要確認你的色盤能提供足夠的對比，你可以建立一個仿真網(wǎng)站，并將它轉(zhuǎn)換成灰階即可。如圖2-4圖2-4灰階對比6、選擇顏色要注意時效性。同一個色彩很容易就充斥著整個市場，且消費者很快的就對流行色彩感到麻木。但就另外一個角度來看，你可以使用幾十年前的流行色彩，引起人們的懷舊之情。如圖2-5與圖2-6圖2-5流行色彩時效圖2-6懷舊色彩感覺7、選擇色盤時請考慮功能性的顏色。別忘了將關鍵信息部分建立功能性的顏色，例如標題和超級鏈接等。8、注意網(wǎng)站色差問題。每一個網(wǎng)站開發(fā)人員都知道，即使是網(wǎng)絡通用顏色在跨平臺顯示的時候都會有些不同。記得要校正你的gamma值，并在不同的作業(yè)平臺上測試你的色盤。在如今的市場經(jīng)濟條件下品牌傳播中的作用可見一斑。（1）根據(jù)企業(yè)所在行業(yè)、VI、產(chǎn)品特性，確立色彩。原則上，力求網(wǎng)頁色彩整體感。各個超鏈接在色彩上發(fā)生相互作用和過渡，要求是自然的、和諧的。（2）整體布局協(xié)調(diào)。一般情況下，布局之前，對網(wǎng)頁色彩進行系統(tǒng)地規(guī)劃和設計。在確立一個完整的視覺印象前提下，根據(jù)內(nèi)容的不同需要，小范圍的調(diào)整。一般情況下，網(wǎng)頁包括FLASH、GIF引導動畫、VI、導航、圖形圖像等內(nèi)容，這些內(nèi)容的色彩使用，直接決定著網(wǎng)頁色彩的感官感受。在確立背景色的情況下，在此基調(diào)的基礎上進行微調(diào)，就能夠起到很好的效果。（3）色彩情感。很大程度上，一個網(wǎng)站的給訪問者的感官感受是由網(wǎng)頁色調(diào)決定的。色調(diào)作用于人的視覺和心理，通過與過去的經(jīng)驗、記憶或知識相聯(lián)系，產(chǎn)生諸如進退、冷暖、輕重、軟硬、華麗、樸素等不同感覺。進而容易使人產(chǎn)生各種復雜的心理情感。除色相變化能引起人的情感變化外，色彩的明度和純度變化也能影響人的情感。高長調(diào)的色彩響亮而明朗，讓人心情舒暢；高短調(diào)色彩配置色調(diào)高雅，給人以純潔、柔和而明快的心理感受。低長調(diào)的色彩仿佛黑夜中的閃電，神秘壓抑又使人振奮；低短調(diào)的色彩仿佛暗夜里的幽靈，低沉冷漠讓人心情暗淡；不同的色調(diào)引發(fā)不同感覺和感情傾向，給網(wǎng)頁設計帶來了豐富的情感因素。如圖2-7圖2-7色彩感情（4）色彩排列。色彩的排列方式也影響著色彩的情感表現(xiàn)。同樣的色調(diào)因色彩的排列方式不同，也會影響著人的情緒。在網(wǎng)頁中色彩的排列是四維度的，即在長、寬、深三維度的基礎上加上時間維度。在二維平面上，色塊有大小、疏密、對稱、均衡、聚散、節(jié)奏等變化，加上色彩重疊在三維的方向產(chǎn)生深度和層次感的變化，對色彩的情感傾向有很大的影響。頁面色彩大面積的分割顯得穩(wěn)重而大氣；小面積色彩有規(guī)律的交替變化，讓人緊張而富有活力；對稱的色彩排列莊重、有嚴肅感；均衡的色彩排列自由而浪漫；色彩排列節(jié)奏緊張，人的心理也會緊張；節(jié)奏舒緩心理就會放松。色彩還通過重疊、交疊、透疊等手法使平面產(chǎn)生縱深感和空間感，使人產(chǎn)生深遠、神秘、夢幻等心理感受。網(wǎng)頁的時間性變化也影響著色彩的情感。網(wǎng)頁動畫幀的變化、網(wǎng)頁頁面在屏幕上的上下左右移動，以及網(wǎng)頁之間相互轉(zhuǎn)化都能產(chǎn)生網(wǎng)頁的時間性變化，并帶來網(wǎng)頁的色彩的變化。隨著色彩變化的節(jié)奏，瀏覽者的心理會產(chǎn)生平靜、緊張、舒緩、熱烈、不安等不同感受。顯然，色彩排列引發(fā)的情感為創(chuàng)造不同個性風格的網(wǎng)頁留下了自由的空間。（5）色彩與音樂結合。為了最大程度的迎合訪問者的感官感受需要，也為了更好的展現(xiàn)網(wǎng)頁內(nèi)容。在網(wǎng)頁設計中，融入音樂這一元素，已經(jīng)成為主流。色彩因其自身形式規(guī)律的存在而具有自身的形式美感。這種形式感的表現(xiàn)在色彩的調(diào)子、階調(diào)、節(jié)奏、韻律上，與音樂的形式感有較多的共同性。網(wǎng)頁色彩由于動畫的存在，以及因瀏覽而產(chǎn)生頁面的移動，更能體現(xiàn)出音樂流動的形式感。這就需要設計師去主動發(fā)現(xiàn)和控制色彩節(jié)奏和韻律，增強網(wǎng)頁時間和空間的變化，使網(wǎng)頁設計體現(xiàn)出生動感人的藝術魅力。如圖2-8圖2-8色彩與音樂結合（6）網(wǎng)頁色彩的風格。受現(xiàn)代色彩觀念的影響，色彩的豐富性從一開始就是網(wǎng)頁設計的發(fā)展趨向。不同的色彩組合搭配構成各種風格的網(wǎng)頁色彩設計。色彩風格的確立首先取決于網(wǎng)站的目標定位，網(wǎng)頁的最終受眾界定了色彩的傾向。只有符合受眾審美需求的色彩風格，才能引起人們的感情共鳴。其次，色彩風格與網(wǎng)站的內(nèi)容要能夠相互呼應。避免雖然美觀但與網(wǎng)頁內(nèi)容相沖突的色彩風格，使內(nèi)容與色彩風格有機的結合起來，更好的發(fā)揮各類網(wǎng)站的色彩應用。2.2色彩在網(wǎng)頁設計中的重要性現(xiàn)在的人們?yōu)g覽網(wǎng)頁，已不僅僅滿足于簡單的文字堆砌上面，他們的審美要求越來越高，藝術設計在網(wǎng)頁設計中的重要性是顯而易見的。網(wǎng)頁的界面好比一本書的封面，只有大方美觀、重點突出，讓瀏覽者一目了然，才能激起閱讀者深入瀏覽的興趣。如果在頁面堆砌太多的細節(jié)，使頁面過于復雜，以致瀏覽者找不到重點，他們也很快就會對該網(wǎng)頁失去興趣。所以設計網(wǎng)頁時，需要考慮網(wǎng)頁自身內(nèi)容的特性。文化類的網(wǎng)頁，藝術設計找的比重相對較輕，整體構圖、顏色使用可以豐富活潑一些；技術類的網(wǎng)頁，藝術設計占的比重較輕，需要體現(xiàn)出嚴肅、穩(wěn)重、具備深刻內(nèi)涵的特點。另外還有一些信息門戶網(wǎng)站，主要側重于信息的含量，就不可能把它當作一個藝術作品來處理，用表格顏色、線條來區(qū)分，注意功能性的作用。色彩是美學的重要組成部分，不同的色彩能夠表達不同的情感。根據(jù)網(wǎng)頁的內(nèi)容和特點，通過色彩構成的運用，選擇不同的色彩搭配，使頁面達到和諧統(tǒng)一的視覺效果，從而喚起人們的心靈感知，調(diào)動瀏覽者的情緒，達到信息傳遞和情感交流的目的。色彩是藝術設計中不可或缺的元素。好的色彩設計可給人以強烈的視覺沖擊力和藝術感染力，能引發(fā)人們從美學意義上了解和鑒賞其表達的形象和內(nèi)容，網(wǎng)頁色彩設計的意義亦是如此。網(wǎng)頁作為視覺傳達的一種新興載體，有著比報刊、雜志、廣播、電視等傳統(tǒng)媒體更復雜的構成要素，如文字、聲音、圖像等并存于一體。打開一個網(wǎng)站，給用戶的第一印象就是網(wǎng)頁的色彩。色彩是網(wǎng)頁設計的關鍵因素之一，它既是網(wǎng)頁作品的表達語言，又是視覺傳達的方式和手段。研究表明，網(wǎng)頁設計中的色彩能提高信息瀏覽與分類的速度和準確度，好的色彩設計是網(wǎng)頁設計成功的保證。如圖2-9與圖2-10圖2-9視覺傳達的方法展現(xiàn)圖2-10視覺傳達的手段展現(xiàn)2.3視覺設計1、進行視覺設計任何一個要素都可以發(fā)揮，任何一個元素所具有的視覺特征和意義都可以起到傳情達意的作用，根據(jù)設計目的，兩方面的作用可以相輔相成；根據(jù)不同的需求，側重點不一樣，有的需要營造氣氛感染情緒，有的需要明確的傳達信息；同樣依據(jù)任何一條法則，組織不同的元素都能形成一個不錯的畫面，具體如何進行也是由設計目的決定的；在一個完整的視覺設計中，涉及到的文字、色彩、圖片、材質(zhì)等等元素本身所具有的視覺特征和意義所起到的作用，應該統(tǒng)一起來，為同一個目標服務，不能分散；關于對比與統(tǒng)一：不管元素如何，不管章法如何，最終形成的畫面應該是協(xié)調(diào)舒服的的，有對比，也要統(tǒng)一，而對比不是雜亂無章的，統(tǒng)一也不是單一呆板的；關于格式塔心理學：格式塔是德文“整體”的譯音，其中的一點理論是說人們在視覺和感覺上更容易接受看起來像一個整體的事物。這一點與視覺畫面整體上應該給人一種協(xié)調(diào)的感覺是相一致的。如圖2-11圖2-11視覺特征與意義關于規(guī)則：法則是用來打破的，也是用來放棄的，有時候跟著感覺走反而更好。人類在幾千年的歷史中已經(jīng)形成了一整套完善的形式美法則，同樣也形成了認識世界的一些約定俗成的東西。2、視覺設計的四點規(guī)則實際上是所謂的“視覺焦點”是視覺元素之間對比變化的集中體現(xiàn)，不管是多么簡單的設計，都不可能是孤零零的一個元素，突出的焦點都是在對比和融合之中建立起來的，即使是一個簡單的圓點，實際上它也是和背景建立了某種對比關系！如何建立視覺焦點：突出該突出的，弱化其它的，優(yōu)勢在全面中變得平庸!一個焦點（對稱中心對稱）、兩個焦點（疏密對比視覺平衡）、三個焦點？一個banner、一個模塊、整個頁面？要注意多個焦點之間的關系，構圖是否主次分明、協(xié)調(diào)統(tǒng)一、視線流暢？用古人的話來說就是“經(jīng)營位置”。如圖2-12和圖2-13及圖2-14圖2-12視覺設計四點規(guī)則圖2-13視覺設計焦點圖2-14視覺設計對齊第3章南京藍深泵業(yè)有限公司分公司網(wǎng)頁制作3.1案例網(wǎng)頁制作流程1．分析客戶的要求和企業(yè)的類型，并參考相關類型的企業(yè)網(wǎng)站，結合自己的實際經(jīng)驗畫出大概的框架圖，并標明其用途和要實現(xiàn)的功能，這一步可直接在紙上完成。2．利用PS來進行具體的設計，利用輔助線畫出框架圖，不同模塊之間要畫兩條輔助線，并留一定的距離，便于對網(wǎng)頁的控制，接下便可以制作企業(yè)的logo、廣告條、導航條等主要內(nèi)容，然后依次完成其他模塊的制作。3．對色彩、文字的排版、導航條、底部內(nèi)容進行細化，使網(wǎng)站達到一定的品質(zhì)感，完成首頁的全部制作后就可以把做好的頁面發(fā)給客戶確定。4.首頁確定以后，便開始內(nèi)頁的制作，內(nèi)頁的制作相對簡單，保持首頁的整體風格不變，對相應的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個即可，內(nèi)頁制作完成后發(fā)給客戶確定，完成整個網(wǎng)頁的設計，并交給程序員切片添加程序。主題：南京藍深泵業(yè)有限公司分公司網(wǎng)站制作（北京上海沈陽廣東）結構分析圖：首頁公司簡介公司新聞產(chǎn)品展示技術支持成功案例公司連接聯(lián)系我們辦公OA企業(yè)理念行業(yè)動態(tài)南京藍深企業(yè)掠影公司新聞北京藍深聯(lián)系我們沈陽藍深廣東藍深上海藍深顏色主題：科技藍、草綠、淺白科技藍的色感清晰明厲，一種水的感覺體驗，性格冷感而具有一定的吸引向心力，是一種對人刺激性中等的色?？萍妓{容易引起人們對于思想的思考，也容易使人深思、展望、探索與追尋。草綠色給人一種生命的熱情，正如科技藍的水色感覺所衍伸出的一種生命感。在科技藍中加入少量的淺白，使冷感趨于平靜態(tài)，緩和冷感的距離感，進一步引人前去求知。網(wǎng)頁的總體我采用了科技藍，給人探尋、最求、向往的情緒，很符合水泵產(chǎn)業(yè)的網(wǎng)頁設計初衷，讓更多的人去了解藍深，感覺到它所帶來的科技感，與衍伸出來的生命（源于生活中的不可或缺）。3.2案例網(wǎng)頁頁面設計首先是藍深泵業(yè)有限公司向我所在的公司提出設計需求，然后又根據(jù)他們所提出的要求作出初期我采用的是規(guī)則型的網(wǎng)頁，簡單大方。在經(jīng)過客戶與一些工作的人員一起商討與思考后做了相應的調(diào)整，使其更貼合整個公司網(wǎng)站風格。如圖3-1與圖3-2圖3-1第一次設計index頁面樣式（沈陽）圖3-2商討后更改頁面（廣東）整體網(wǎng)站以灰白作為協(xié)調(diào)色，以logo上的科技藍與草綠為相稱色，并且以一些js技術效果實現(xiàn)一些動態(tài)效果，使界面實現(xiàn)一種連動性，為整個網(wǎng)站的效果增添技術科技感，使客戶更便捷的瀏覽界面。首頁我采用的是“三型”網(wǎng)頁格局效果。以網(wǎng)頁首頁來分析制作步驟介紹：1、將photoshop打開，新建一個文檔，命名為“首頁”，大小為1000*700，分辨率為100pi，顏色模式為RGB，背景色為白色，點擊確定。2、將標尺打開，拉幾條參考線。3、利用選框工具畫出相對應的框框，首先畫出左上角的小框，利用漸變工具給框框加上漸變色使頁面不會顯得僵硬，。4、將整個index頁面分布為topbannermainbottom幾個區(qū)域。如圖3-3圖3-3漸變部分介紹5、其余的框框也根據(jù)步驟三來做，將人物素材圖拖至適合的位置，利用鋼筆工具做出top部分的線條效果，如圖3-4圖3-4首頁人物部分介紹6、制作網(wǎng)頁主題，在適當?shù)奈恢眠x擇與之相對應的字體寫上中文主題文字顯得更加神秘!如圖3-5圖3-5主題文字介紹7、制作按鈕部分點開，設置如圖3-6：圖3-6按鈕圖片的設置介紹8、其他網(wǎng)頁頁面效果圖如下--子頁面布局的板式就基本沒什么改變了如圖3-7圖3-7公司簡介頁面展示由于每一區(qū)域展示的內(nèi)容途徑不同，所需的樣式效果會有所變化如下圖效果：圖3-8新聞中心頁面展示圖3-9成功案例頁面展示圖3-10聯(lián)系我們頁面展示3.3網(wǎng)頁靜態(tài)頁面制作（div+cssjs）首先用網(wǎng)頁首頁來分析如圖3-11圖3-11網(wǎng)站首頁布局制作步驟的介紹：1、我使用的是Dreamweavercs5進行靜態(tài)頁面編輯，使用代碼輸入效果實現(xiàn)靜態(tài)頁面，取代表格布局。如圖3-12圖3-12Dreamweavercs5打開截圖2、新建站點在“定義站點”向?qū)нM行的任意一個步驟，選擇對話框上部的“高級”標簽，可打開高級站點定義對話框。建立藍深分公司頁面網(wǎng)站站點3、新建一個html文件，命名為index.html，并建立鏈接外部樣式（cssjsflash）鏈接外部樣式代碼為：css外部鏈接樣式：<linkhref="css/style.css"rel="stylesheet"type="text/css"/>banner幻燈片效果鏈接樣式：<scriptlanguage="javascript"type="text/javascript"src="js/jquery-1.4.2.js"></script>導航條js效果鏈接樣式：<scriptlanguage="javascript"type="text/javascript"src="js/menu.js"></script>main部分窗口切換效果鏈接樣式：<scriptlanguage="javascript"type="text/javascript"src="js/page_switching.js"></script>4、div布局規(guī)劃：<divclass="wrap">/*定義總div標簽*/<divclass="top">/*“.”使用class標簽引入top部分與logo部分*/</top><divid="menu">/*“#”使用id標簽引入nav導航條部分*/</div><divclass="banner">/*banner和公告欄部分*/</div><divclass="sub_main">/*banner和公告欄部分*/</div><divclass="ib_img1">/*bottoms部分*/</div></div>5、css樣式介紹內(nèi)部樣式總多用標簽body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p,form{margin:0;padding:0}html,body{margin:0auto;padding:0;color:#5c5c5c;font-family:Verdana,Geneva,sans-serif,Arial,Helvetica,sans-serif;font-size:10px;text-align:center;}ul{padding:0;margin:0;list-style-type:none;}li{list-style-type:none;list-style-position:outside;}img{border:mediumnone;vertical-align:top;}span{float:left;}a,a:visited{color:#;text-decoration:none}a:hover{color:#09f;text-decoration:none}a:active{color:#09f;}a:focus{outline:none}.clear{clear:both;display:block;height:0;overflow:hidden;font-size:0}.clearfix:after{clear:both;content:".";display:block;height:0;overflow:hidden;visibility:hidden}.margin15{margin:15px}.margin10{margin:10px}.margin35{margin:25px}6、網(wǎng)頁主要標簽樣式：.wrap{width:1000px;text-align:left;margin:0auto;background-color:#fcfcfd;}.top{width:1000px;float:left;background-image:url(../images/top.jpg);height:12px;}#menu{float:left;display:block;width:1000px;height:34px;background:#0f85d5;}.index_banner{width:1000px;float:left;height:290px;}.ib_img1{float:left;background:url(../images/bottom1.gif);width:1000px;height:100px;border-top:solid2px#e8e9ed;}7、導航條效果實現(xiàn)鼠標懸停點擊效果js控制$(document).ready(function(){$('li.mainlevel').mousemove(function(){$(this).find('ul').slideDown("1000");//youcangiveitaspeed});$('li.mainlevel').mouseleave(function(){$(this).find('ul').slideUp("fast");});});/*js代碼運行*/style="color:#333;background:#09furl(images/slide-pannel_14.png)00repeat-x;"/*頁面導航條效果樣式跟隨頁面定效果*/8、banner圖片幻燈片切換效果引入如圖3-13圖3-13banner幻燈片效果截圖<divclass="index_main_right_img"><script>varwidths=800;varheights=290;varcounts=3;img1=newImage();img1.src='images/1.png';img2=newImage();img2.src='images/2.png';img3=newImage();img3.src='images/3.png';url1=newImage();url1.src='images/1.png';url2=newImage();url2.src='images/2.png';url3=newImage();url3.src='images/3.png';/*banner圖片引入標簽*/varnn=1;varkey=0;functionchange_img(){if(key==0){key=1;}elseif(document.all){document.getElementById("pic").filters[0].Apply();document.getElementById("pic").filters[0].Play(duration=2);}………id="xxjdjj'+i+'"class="axx"target="_self">'+i+'</a>');}/*幻燈片效果實現(xiàn)源碼*/document.write('</div></div>');change_img();</script></div>9、設置滾動字幕的屬性友情提醒文字由下向上實現(xiàn)效果<marqueescrollamount="2"width="180"height="260"direction="up">…………</marquee>direction為滾動的目標方向，可選right、left、up、down。scrollamount和scrolldelay為滾動數(shù)量和延遲，可設置滾動速度和間隔時間。loop設置循環(huán)次數(shù)，小于1為連續(xù)循環(huán)。Bgcolor設置滾動區(qū)域的背景顏色。width和height設置滾動區(qū)域的大小，沿垂直方向（up或down）滾動時，必須設置一定的高度值，否則看不到滾動的文字。10、圖片引入效果及鏈接頁面效果標簽<ahref="#"></a>/*鏈接標簽*/<imgsrc="images/h7.gif">/*頁面內(nèi)部圖片鏈接效果*/background:url(../images/bottom1.gif);/*css樣式表內(nèi)部圖片鏈接效果*/3.4網(wǎng)頁設計制作小結這次的網(wǎng)頁設計與制作讓我考慮了很久，想過很多的主題，但都在找素材資料什么的時候遇到了問題，多次思考改正后，找到了我的主題以及色彩的搭配的問題?？傊?，這次的練習設計與制作網(wǎng)頁，我學到了很多，也讓我意識到能讓我學習的還很多很多！第4章網(wǎng)頁運行的總結4.1瀏覽器兼容性問題1、頁面在不同頁面下大塊div錯位檢查CSS內(nèi)標簽的橫向像素<=CSS外標簽的橫向像素注意：內(nèi)標簽計算時要加上margin和padding的橫向值2、png圖片無法正常讀取直接加上背景一起切下圖片或者在對應的圖片或者背景標簽下連接一下JS代碼<scriptlanguage="javascript">functioncorrectPNG(){for(vari=0;i<document.images.length;i++){varimg=document.images[i]varimgName=img.src.toUpperCase()if(imgName.substring(imgName.length-3,imgName.length)=="PNG"){varimgID=(img.id)?"id='"+img.id+"'":""varimgClass=(img.className)?"class='"+img.className+"'":""varimgTitle=(img.title)?"title='"+img.title+"'":"title='"+img.alt+"'"varimgStyle="display:inline-block;"+img.style.cssTextif(img.align=="left")imgStyle="float:left;"+imgStyleif(img.align=="right")imgStyle="float:right;"+imgStyle if(img.parentElement.href)imgStyle="cursor:hand;"+imgStyle varstrNewHTML="<span"+imgID+imgClass+imgTitle +"style=\""+"width:"+img.width+"px;height:"+img.height+"px;"+imgStyle+";" +"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" +"(src=\'"+img.src+"\',sizingMethod='scale');\"></span>" img.outerHTML=strNewHTML i=i-1 }}}window.attachEvent("onload",correctPNG);</script>也可以直接應用在圖片標簽上<spanstyle="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='male.png',sizingMethod='scale');"></span>3、視頻在瀏覽器中無法讀取在網(wǎng)頁文件所在的文件夾中另外建立一個video的文件夾，并將音視頻文件放在該文件夾中，并更改其屬性命名為“.html”（此效果實現(xiàn)需要外加一個js控制效果）4、模塊錯位父模塊的DIV中沒有float，而子模板的div中存在div容易產(chǎn)生錯位只要將父模塊div加上float也可以在父模塊div中加上class=“clearfix”【萬能float閉合】/*clearfix*/.clearfixafter{content:“.”；display：block；height：0；clear：both；visibility：hidden；}.clearfix{display：inline-block；}/*hideformiemac\*/.clearfix{display:block;}/*endhideformiemac*//*endifclearfix*/再者只要在父模塊div的css中加上overflow：auto；就可以了。5、兼容性細節(jié)問題一些瀏覽器在給div設置padding值時會導致width和height的值增加，可以在設置div時設定ie和FF兩個寬度，在IE的寬度前加上標記“*”號6、頁面居中問題Body{text-align：center；}在一些瀏覽器下會顯示失敗只要在標簽里加上“margin-right：auto；margin-left：auto；”7、在IE6中會出現(xiàn)一些奇怪的間隙，而本身高度設置并沒有問題在有間隙的div上加上“font-size：0px;”8、浮動在IE6中會產(chǎn)生雙倍距離在margin：后續(xù)加上display：inline；9、手型光標一般采用Cursor：pointer；而hand只適用于IE10、ul與form的padding與margin在不同瀏覽器中會有所偏差在cs00中首先將ul和form{margin：0；padding：0；}定死11、截字省略號h{-0-text-overflow:ellipsis;white-space:nowrap;overfloat:hidden;}在躍出長度后自行截掉多出的部分文字，并以省略號結束，但是在火狐里不可以實現(xiàn)10、IE6下line-height不被讀取在非文字的對象標的樣標簽中添加Margin：（容器的line-height對象本身的高度）/2px0;vertial-align：middle；由于文字中包含imginputselecttextareabottonobject造成的，對文字中包含img等元素的加以上方的屬性就可11、E6下這兩個層中間怎么有間隙這個IE的3PXBUG也是經(jīng)常出現(xiàn)的，解決的辦法是給.right也同樣浮動float:left或者相對IE6定義.leftmargin-right:-3px;12、文字橫向一直顯示，不自動換行是輸入英文導致的，只要轉(zhuǎn)換為中文就會自動換行，也可以強制換行，用</br>標簽一些瀏覽器會因為一個空格引發(fā)CSS失效這段代碼對<p>的首字符樣式定義在IE6上看是沒有效果的（IE7沒測試），而在p:first-letter和{font-size:300%}加上空格，也就是p:first-letter{font-size:300%}后，顯示就正常了。但是同樣的代碼，在FireFox下看是正常的。按道理說，p:first-letter{font-size:300%}的寫法是沒錯的。那么問題出在哪里呢？答案是偽類中的連字符"-"。IE有個BUG，在處理偽類時，如果偽類的名稱中帶有連字符"-"，偽類名稱后面就得跟一個空格，不然樣式的定義就無效。而在FF中，加不加空格都可以正常處理。13、IE中奇數(shù)高度問題將外部相對定位的div寬度改成偶數(shù)14、IE6下圖片下方有空隙產(chǎn)生可以是改變html的排版，或者定義img為display:block或者定義vertical-align屬性值為vertical-align:top|bottom|middle|text-bottom還可以設置父容器的字體大小為零，font-size:015、IE6下鏈接偽類（:hover）CSS背景圖片有閃動BUG，主要原因ie會再一次請求這張圖片，或者說圖片沒被緩存。1.a:hover{background:url(imagepath)}常用的解決方案：在頁面底部添加以下IE6專用代碼，讓IE6緩存CSS背景圖片至本地，這樣a:hover時IE6就不會再重新向服務器請求加載背景圖片了。XML/HTML代碼<!–[ifIE6]><scripttype=”text/javascript”>document.execCommand(”BackgroundImageCache”,false,true);</script><![endif]–>或者XML/HTML代碼<!–[ifIE6]><scripttype=text/javascript>try{document.execCommand(“BackgroundImageCache”,false,true);}catch(err){}</script><![endif]–>16、ie6下空標簽高度一個空div如果高度設置為0到19px，IE6下高度默認始終19PX。例如：.c{background-color:#f00;height:0px;/*給定任何小于20px的高度*/}<divclass="c"></div>如果不讓它默認為19PX。而是0PX的話解決方法有3種：1.css里面加上overflow:hidden;2.div里面加上注釋,<divclass="c"><!––></div>3.css里面加上line-height:0;然后div里面加上#nbsp;,<divclass="c"> </div>(#換成&)17、修正重復文字復雜的布局可以觸發(fā)在浮動元素的最后一些字符可能出現(xiàn)在出現(xiàn)在清除元素下面的bug。這里有幾個解決方法，有些是完美的，但是做一些反復試驗也是必須的：a確保所有的元素使用”display:inline;”b在最后一個元素上使用一個”margin-right:-3px;”c“#”為浮動元素的最后一個條目使用一個條件注釋，比如：<!–[if!IE]>Putyourcommentaryinhere…<![endif]–>d在容器的最后元素使用一個空的div(它也有必要設置寬度為90%或類似寬度。)4.2web頁面布局成為敗筆的設計誤區(qū)即使Web設計已經(jīng)成為一個真正的產(chǎn)業(yè)，開發(fā)一個網(wǎng)站仍舊是技術和藝術的結合。一個網(wǎng)站的設計既可以帶來大量流量，同時也可以嚇走大量用戶，當然這些都和設計師相關。經(jīng)驗、天份和能力是一個設計師最強大的工具。一個設計精良的布局是Web設計的基礎，而且，這也是一個非常耗時的工作。設計一個非常好的布局是一件非常不容易的事情，而且判斷的方式也非常主觀。任何一個設計可能會取悅你，也可能讓其它人厭惡。盡管這樣，這里仍舊有些大家都承認的設計誤區(qū)。為了幫助設計初學者少走彎路，我們列出了一些Web設計上的誤區(qū)。1、缺乏空白區(qū)域沒有比把頁面塞得像麻袋一樣滿更讓人煩人的設計了。你應該保留一定的空白頁面讓訪問者放松他們的眼睛。很多設計者都想在第一個頁面提供更多的內(nèi)容。似乎初學設計的人更容易犯這個錯誤，但其實各個