【文章內(nèi)容簡介】 特性。文化類的網(wǎng)頁，藝術(shù)設(shè)計(jì)找的比重相對較輕，整體構(gòu)圖、顏色使用可以豐富活潑一些；技術(shù)類的網(wǎng)頁，藝術(shù)設(shè)計(jì)占的比重較輕，需要體現(xiàn)出嚴(yán)肅、穩(wěn)重、具備深刻內(nèi)涵的特點(diǎn)。另外還有一些信息門戶網(wǎng)站，主要側(cè)重于信息的含量，就不可能把它當(dāng)作一個(gè)藝術(shù)作品來處理，用表格顏色、線條來區(qū)分，注意功能性的作用。色彩是美學(xué)的重要組成部分，不同的色彩能夠表達(dá)不同的情感。根據(jù)網(wǎng)頁的內(nèi)容和特點(diǎn)，通過色彩構(gòu)成的運(yùn)用，選擇不同的色彩搭配，使頁面達(dá)到和諧統(tǒng)一的視覺效果，從而喚起人們的心靈感知，調(diào)動瀏覽者的情緒，達(dá)到信息傳遞和情感交流的目的。色彩是藝術(shù)設(shè)計(jì)中不可或缺的元素。好的色彩設(shè)計(jì)可給人以強(qiáng)烈的視覺沖擊力和藝術(shù)感染力，能引發(fā)人們從美學(xué)意義上了解和鑒賞其表達(dá)的形象和內(nèi)容，網(wǎng)頁色彩設(shè)計(jì)的意義亦是如此。網(wǎng)頁作為視覺傳達(dá)的一種新興載體，有著比報(bào)刊、雜志、廣播、電視等傳統(tǒng)媒體更復(fù)雜的構(gòu)成要素，如文字、聲音、圖像等并存于一體。打開一個(gè)網(wǎng)站，給用戶的第一印象就是網(wǎng)頁的色彩。色彩是網(wǎng)頁設(shè)計(jì)的關(guān)鍵因素之一，它既是網(wǎng)頁作品的表達(dá)語言，又是視覺傳達(dá)的方式和手段。研究表明，網(wǎng)頁設(shè)計(jì)中的色彩能提高信息瀏覽與分類的速度和準(zhǔn)確度，好的色彩設(shè)計(jì)是網(wǎng)頁設(shè)計(jì)成功的保證。如 圖29 與 圖210圖29 視覺傳達(dá)的方法展現(xiàn)圖210 視覺傳達(dá)的手段展現(xiàn) 視覺設(shè)計(jì)進(jìn)行視覺設(shè)計(jì)任何一個(gè)要素都可以發(fā)揮，任何一個(gè)元素所具有的視覺特征和意義都可以起到傳情達(dá)意的作用，根據(jù)設(shè)計(jì)目的，兩方面的作用可以相輔相成；根據(jù)不同的需求，側(cè)重點(diǎn)不一樣，有的需要營造氣氛感染情緒，有的需要明確的傳達(dá)信息；同樣依據(jù)任何一條法則，組織不同的元素都能形成一個(gè)不錯的畫面，具體如何進(jìn)行也是由設(shè)計(jì)目的決定的；在一個(gè)完整的視覺設(shè)計(jì)中，涉及到的文字、色彩、圖片、材質(zhì)等等元素本身所具有的視覺特征和意義所起到的作用，應(yīng)該統(tǒng)一起來，為同一個(gè)目標(biāo)服務(wù)，不能分散；關(guān)于對比與統(tǒng)一：不管元素如何，不管章法如何，最終形成的畫面應(yīng)該是協(xié)調(diào)舒服的的，有對比，也要統(tǒng)一，而對比不是雜亂無章的，統(tǒng)一也不是單一呆板的；關(guān)于格式塔心理學(xué)：格式塔是德文“整體”的譯音，其中的一點(diǎn)理論是說人們在視覺和感覺上更容易接受看起來像一個(gè)整體的事物。這一點(diǎn)與視覺畫面整體上應(yīng)該給人一種協(xié)調(diào)的感覺是相一致的。如 圖211圖211 視覺特征與意義關(guān)于規(guī)則：法則是用來打破的，也是用來放棄的，有時(shí)候跟著感覺走反而更好。人類在幾千年的歷史中已經(jīng)形成了一整套完善的形式美法則，同樣也形成了認(rèn)識世界的一些約定俗成的東西。視覺設(shè)計(jì)的四點(diǎn)規(guī)則實(shí)際上是所謂的“視覺焦點(diǎn)”是視覺元素之間對比變化的集中體現(xiàn)，不管是多么簡單的設(shè)計(jì)，都不可能是孤零零的一個(gè)元素，突出的焦點(diǎn)都是在對比和融合之中建立起來的，即使是一個(gè)簡單的圓點(diǎn)，實(shí)際上它也是和背景建立了某種對比關(guān)系！如何建立視覺焦點(diǎn)：突出該突出的，弱化其它的，優(yōu)勢在全面中變得平庸!一個(gè)焦點(diǎn)（對稱 中心對稱） 、兩個(gè)焦點(diǎn)（疏密對比 視覺平衡）、 三個(gè)焦點(diǎn)？一個(gè)banner 、一個(gè)模塊、 整個(gè)頁面？要注意多個(gè)焦點(diǎn)之間的關(guān)系，構(gòu)圖是否主次分明、協(xié)調(diào)統(tǒng)一、視線流暢？用古人的話來說就是“經(jīng)營位置”。 如 圖212 和 圖213 及 圖214圖212 視覺設(shè)計(jì)四點(diǎn)規(guī)則圖213 視覺設(shè)計(jì) 焦點(diǎn) 圖214 視覺設(shè)計(jì) 對齊32南京藍(lán)深泵業(yè)有限公司分公司網(wǎng)頁制作 畢業(yè)設(shè)計(jì)（論文）南京藍(lán)深泵業(yè)有限公司分公司網(wǎng)頁制作第3章 南京藍(lán)深泵業(yè)有限公司分公司網(wǎng)頁制作1．分析客戶的要求和企業(yè)的類型，并參考相關(guān)類型的企業(yè)網(wǎng)站，結(jié)合自己的實(shí)際經(jīng)驗(yàn)畫出大概的框架圖，并標(biāo)明其用途和要實(shí)現(xiàn)的功能，這一步可直接在紙上完成。2．利用PS來進(jìn)行具體的設(shè)計(jì)，利用輔助線畫出框架圖，不同模塊之間要畫兩條輔助線，并留一定的距離，便于對網(wǎng)頁的控制，接下便可以制作企業(yè)的logo、廣告條、導(dǎo)航條等主要內(nèi)容，然后依次完成其他模塊的制作。3．對色彩、文字的排版、導(dǎo)航條、底部內(nèi)容進(jìn)行細(xì)化，使網(wǎng)站達(dá)到一定的品質(zhì)感，完成首頁的全部制作后就可以把做好的頁面發(fā)給客戶確定。，便開始內(nèi)頁的制作，內(nèi)頁的制作相對簡單，保持首頁的整體風(fēng)格不變，對相應(yīng)的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個(gè)即可，內(nèi)頁制作完成后發(fā)給客戶確定，完成整個(gè)網(wǎng)頁的設(shè)計(jì)，并交給程序員切片添加程序。主題：南京藍(lán)深泵業(yè)有限公司分公司網(wǎng)站制作（北京 上海 沈陽 廣東）結(jié)構(gòu)分析圖： 首頁公司簡介 公司新聞 產(chǎn)品展示 技術(shù)支持 成功案例 公司連接 聯(lián)系我們 辦公OA企業(yè)理念 行業(yè)動態(tài) 南京藍(lán)深企業(yè)掠影 公司新聞 北京藍(lán)深聯(lián)系我們 沈陽藍(lán)深 廣東藍(lán)深 上海藍(lán)深顏色主題： 科技藍(lán)、草綠、淺白 科技藍(lán)的色感清晰明厲，一種水的感覺體驗(yàn)，性格冷感而具有一定的吸引向心力，是一種對人刺激性中等的色?？萍妓{(lán)容易引起人們對于思想的思考，也容易使人深思、展望、探索與追尋。草綠色給人一種生命的熱情，正如科技藍(lán)的水色感覺所衍伸出的一種生命感。在科技藍(lán)中加入少量的淺白，使冷感趨于平靜態(tài)，緩和冷感的距離感，進(jìn)一步引人前去求知。網(wǎng)頁的總體我采用了科技藍(lán)，給人探尋、最求、向往的情緒 ，很符合水泵產(chǎn)業(yè)的網(wǎng)頁設(shè)計(jì)初衷，讓更多的人去了解藍(lán)深，感覺到它所帶來的科技感，與衍伸出來的生命（源于生活中的不可或缺）。首先是藍(lán)深泵業(yè)有限公司向我所在的公司提出設(shè)計(jì)需求，然后又根據(jù)他們所提出的要求作出初期我采用的是規(guī)則型的網(wǎng)頁 ，簡單大方。在經(jīng)過客戶與一些工作的人員一起商討與思考后做了相應(yīng)的調(diào)整，使其更貼合整個(gè)公司網(wǎng)站風(fēng)格。如 圖31 與 圖32圖31 第一次設(shè)計(jì)index頁面樣式（沈陽）圖32 商討后更改頁面（廣東）整體網(wǎng)站以灰白作為協(xié)調(diào)色，以logo上的科技藍(lán)與草綠為相稱色，并且以一些js技術(shù)效果實(shí)現(xiàn)一些動態(tài)效果，使界面實(shí)現(xiàn)一種連動性，為整個(gè)網(wǎng)站的效果增添技術(shù)科技感，使客戶更便捷的瀏覽界面。首頁我采用的是“三型”網(wǎng)頁格局效果。以網(wǎng)頁首頁來分析制作步驟介紹：將photoshop打開，新建一個(gè)文檔，命名為“首頁”，大小為1000*700，分辨率為100pi，顏色模式為RGB，背景色為白色，點(diǎn)擊確定。將標(biāo)尺打開，拉幾條參考線。利用選框工具畫出相對應(yīng)的框框，首先畫出左上角的小框，利用漸變工具給框框加上漸變色使頁面不會顯得僵硬。將整個(gè)index頁面分布為top banner main bottom幾個(gè)區(qū)域。如 圖33圖33漸變部分介紹其余的框框也根據(jù)步驟三來做，將人物素材圖拖至適合的位置，利用鋼筆工具做出top部分的線條效果，如 圖34圖34首頁人物部分介紹制作網(wǎng)頁主題，在適當(dāng)?shù)奈恢眠x擇與之相對應(yīng)的字體寫上中文主題文字顯得更加神秘!如 圖35圖35主題文字介紹制作按鈕部分點(diǎn)開 ，設(shè)置如圖36：圖36按鈕圖片的設(shè)置介紹其他網(wǎng)頁頁面效果圖如下子頁面布局的板式就 基本沒什么改變了如 圖37圖37 公司簡介頁面展示由于每一區(qū)域展示的內(nèi)容途徑不同，所需的樣式效果會有所變化如下圖效果：圖38 新聞中心頁面展示圖39 成功案例頁面展示圖310 聯(lián)系我們頁面展示（div+css js）首先用網(wǎng)頁首頁來分析 如 圖311圖311 網(wǎng)站首頁布局制作步驟的介紹：我使用的是Dreamweaver cs5進(jìn)行靜態(tài)頁面編輯，使用代碼輸入效果實(shí)現(xiàn)靜態(tài)頁面，取代表格布局。如 圖312圖312 Dreamweaver cs5打開截圖新建站點(diǎn)在“定義站點(diǎn)”向?qū)нM(jìn)行的任意一個(gè)步驟，選擇對話框上部的“高級”標(biāo)簽，可打開高級站點(diǎn)定義對話框。建立藍(lán)深分公司頁面網(wǎng)站站點(diǎn)新建一個(gè)html文件，并建立鏈接外部樣式（css js flash）鏈接外部樣式代碼為：css外部鏈接樣式：link href=css/ rel=stylesheet type=text/css / banner幻燈片效果鏈接樣式：script language=javascript type=text/javascript src=js//script 導(dǎo)航條js效果鏈接樣式：script language=javascript type=text/javascript src=js//script main部分窗口切換效果鏈接樣式：script language=javascript type=text/javascript src=js//script div布局規(guī)劃： div class=wrap /* 定義總div標(biāo)簽 */ div class=top /* “.”使用class標(biāo)簽引入 top部分與logo部分 */ /top div id=menu /* “”使用id標(biāo)簽引入 nav導(dǎo)航條部分 */ /div div class=banner /* banner和公告欄部分 */ /div div class=sub_main /* banner和公告欄部分 */ /divdiv class=ib_img1 /* bottoms部分 *//div/divcss樣式介紹 內(nèi)部樣式總多用標(biāo)簽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:0 auto。 padding:0。 color:5c5c5c。fontfamily: Verdana, Geneva, sansserif, Arial, Helvetica, sansserif 。fontsize:10px。 textalign:center。}ul{padding:0。margin: