【正文】 tion=2)。function change_img(){if(key==0){key=1。 /* banner 圖片引入標(biāo)簽 */var nn=1。=39。images/39。url2=new Image ()。=39。images/39。img3=new Image ()。=39。images/39。img1=new Image ()。var heights=290。background:09f url(images/) 0 0 repeatx。 })。).slideUp(fast)。).mouseleave(function(){ $(this).find(39。 $(39。).slideDown(1000)。).mousemove(function(){ $(this).find(39。}導(dǎo)航條效果實(shí)現(xiàn)鼠標(biāo)懸停點(diǎn)擊效果js控制$(document).ready(function(){ $(39。height:100px。background:url(../images/)。height:290px。}.index_banner{width:1000px。height:34px。display:block。height:12px。float:left。 backgroundcolor:fcfcfd。textalign:left。overflow:hidden。display:block。fontsize:0}.clearfix:after {clear:both。height:0。}a:focus {outline:none}.clear {clear:both。textdecoration:none}a:hover {color:09f。}span{float:left。}img {border:medium none。}li{liststyletype:none。margin:0。 textalign:center。fontfamily: Verdana, Geneva, sansserif, Arial, Helvetica, sansserif 。 padding:0。建立藍(lán)深分公司頁(yè)面網(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。如 圖33圖33漸變部分介紹其余的框框也根據(jù)步驟三來(lái)做，將人物素材圖拖至適合的位置，利用鋼筆工具做出top部分的線條效果，如 圖34圖34首頁(yè)人物部分介紹制作網(wǎng)頁(yè)主題，在適當(dāng)?shù)奈恢眠x擇與之相對(duì)應(yīng)的字體寫(xiě)上中文主題文字顯得更加神秘!如 圖35圖35主題文字介紹制作按鈕部分點(diǎn)開(kāi) ，設(shè)置如圖36：圖36按鈕圖片的設(shè)置介紹其他網(wǎng)頁(yè)頁(yè)面效果圖如下子頁(yè)面布局的板式就 基本沒(méi)什么改變了如 圖37圖37 公司簡(jiǎn)介頁(yè)面展示由于每一區(qū)域展示的內(nèi)容途徑不同，所需的樣式效果會(huì)有所變化如下圖效果：圖38 新聞中心頁(yè)面展示圖39 成功案例頁(yè)面展示圖310 聯(lián)系我們頁(yè)面展示（div+css js）首先用網(wǎng)頁(yè)首頁(yè)來(lái)分析 如 圖311圖311 網(wǎng)站首頁(yè)布局制作步驟的介紹：我使用的是Dreamweaver cs5進(jìn)行靜態(tài)頁(yè)面編輯，使用代碼輸入效果實(shí)現(xiàn)靜態(tài)頁(yè)面，取代表格布局。利用選框工具畫(huà)出相對(duì)應(yīng)的框框，首先畫(huà)出左上角的小框，利用漸變工具給框框加上漸變色使頁(yè)面不會(huì)顯得僵硬。以網(wǎng)頁(yè)首頁(yè)來(lái)分析制作步驟介紹：將photoshop打開(kāi)，新建一個(gè)文檔，命名為“首頁(yè)”，大小為1000*700，分辨率為100pi，顏色模式為RGB，背景色為白色，點(diǎn)擊確定。如 圖31 與 圖32圖31 第一次設(shè)計(jì)index頁(yè)面樣式（沈陽(yáng)）圖32 商討后更改頁(yè)面（廣東）整體網(wǎng)站以灰白作為協(xié)調(diào)色，以logo上的科技藍(lán)與草綠為相稱色，并且以一些js技術(shù)效果實(shí)現(xiàn)一些動(dòng)態(tài)效果，使界面實(shí)現(xiàn)一種連動(dòng)性，為整個(gè)網(wǎng)站的效果增添技術(shù)科技感，使客戶更便捷的瀏覽界面。首先是藍(lán)深泵業(yè)有限公司向我所在的公司提出設(shè)計(jì)需求，然后又根據(jù)他們所提出的要求作出初期我采用的是規(guī)則型的網(wǎng)頁(yè) ，簡(jiǎn)單大方。在科技藍(lán)中加入少量的淺白，使冷感趨于平靜態(tài)，緩和冷感的距離感，進(jìn)一步引人前去求知。科技藍(lán)容易引起人們對(duì)于思想的思考，也容易使人深思、展望、探索與追尋。，便開(kāi)始內(nèi)頁(yè)的制作，內(nèi)頁(yè)的制作相對(duì)簡(jiǎn)單，保持首頁(yè)的整體風(fēng)格不變，對(duì)相應(yīng)的版塊就行修改即可，相同模塊的內(nèi)容只需要制作一個(gè)即可，內(nèi)頁(yè)制作完成后發(fā)給客戶確定，完成整個(gè)網(wǎng)頁(yè)的設(shè)計(jì)，并交給程序員切片添加程序。2．利用PS來(lái)進(jìn)行具體的設(shè)計(jì)，利用輔助線畫(huà)出框架圖，不同模塊之間要畫(huà)兩條輔助線，并留一定的距離，便于對(duì)網(wǎng)頁(yè)的控制，接下便可以制作企業(yè)的logo、廣告條、導(dǎo)航條等主要內(nèi)容，然后依次完成其他模塊的制作。視覺(jué)設(shè)計(jì)的四點(diǎn)規(guī)則實(shí)際上是所謂的“視覺(jué)焦點(diǎn)”是視覺(jué)元素之間對(duì)比變化的集中體現(xiàn)，不管是多么簡(jiǎn)單的設(shè)計(jì)，都不可能是孤零零的一個(gè)元素，突出的焦點(diǎn)都是在對(duì)比和融合之中建立起來(lái)的，即使是一個(gè)簡(jiǎn)單的圓點(diǎn)，實(shí)際上它也是和背景建立了某種對(duì)比關(guān)系！如何建立視覺(jué)焦點(diǎn)：突出該突出的，弱化其它的，優(yōu)勢(shì)在全面中變得平庸!一個(gè)焦點(diǎn)（對(duì)稱 中心對(duì)稱） 、兩個(gè)焦點(diǎn)（疏密對(duì)比 視覺(jué)平衡）、 三個(gè)焦點(diǎn)？一個(gè)banner 、一個(gè)模塊、 整個(gè)頁(yè)面？要注意多個(gè)焦點(diǎn)之間的關(guān)系，構(gòu)圖是否主次分明、協(xié)調(diào)統(tǒng)一、視線流暢？用古人的話來(lái)說(shuō)就是“經(jīng)營(yíng)位置”。如 圖211圖211 視覺(jué)特征與意義關(guān)于規(guī)則：法則是用來(lái)打破的，也是用來(lái)放棄的，有時(shí)候跟著感覺(jué)走反而更好。如 圖29 與 圖210圖29 視覺(jué)傳達(dá)的方法展現(xiàn)圖210 視覺(jué)傳達(dá)的手段展現(xiàn) 視覺(jué)設(shè)計(jì)進(jìn)行視覺(jué)設(shè)計(jì)任何一個(gè)要素都可以發(fā)揮，任何一個(gè)元素所具有的視覺(jué)特征和意義都可以起到傳情達(dá)意的作用，根據(jù)設(shè)計(jì)目的，兩方面的作用可以相輔相成；根據(jù)不同的需求，側(cè)重點(diǎn)不一樣，有的需要營(yíng)造氣氛感染情緒，有的需要明確的傳達(dá)信息；同樣依據(jù)任何一條法則，組織不同的元素都能形成一個(gè)不錯(cuò)的畫(huà)面，具體如何進(jìn)行也是由設(shè)計(jì)目的決定的；在一個(gè)完整的視覺(jué)設(shè)計(jì)中，涉及到的文字、色彩、圖片、材質(zhì)等等元素本身所具有的視覺(jué)特征和意義所起到的作用，應(yīng)該統(tǒng)一起來(lái)，為同一個(gè)目標(biāo)服務(wù)，不能分散；關(guān)于對(duì)比與統(tǒng)一：不管元素如何，不管章法如何，最終形成的畫(huà)面應(yīng)該是協(xié)調(diào)舒服的的，有對(duì)比，也要統(tǒng)一，而對(duì)比不是雜亂無(wú)章的，統(tǒng)一也不是單一呆板的；關(guān)于格式塔心理學(xué)：格式塔是德文“整體”的譯音，其中的一點(diǎn)理論是說(shuō)人們?cè)谝曈X(jué)和感覺(jué)上更容易接受看起來(lái)像一個(gè)整體的事物。色彩是網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵因素之一，它既是網(wǎng)頁(yè)作品的表達(dá)語(yǔ)言，又是視覺(jué)傳達(dá)的方式和手段。網(wǎng)頁(yè)作為視覺(jué)傳達(dá)的一種新興載體，有著比報(bào)刊、雜志、廣播、電視等傳統(tǒng)媒體更復(fù)雜的構(gòu)成要素，如文字、聲音、圖像等并存于一體。色彩是藝術(shù)設(shè)計(jì)中不可或缺的元素。色彩是美學(xué)的重要組成部分，不同的色彩能夠表達(dá)不同的情感。文化類的網(wǎng)頁(yè)，藝術(shù)設(shè)計(jì)找的比重相對(duì)較輕，整體構(gòu)圖、顏色使用可以豐富活潑一些；技術(shù)類的網(wǎng)頁(yè)，藝術(shù)設(shè)計(jì)占的比重較輕，需要體現(xiàn)出嚴(yán)肅、穩(wěn)重、具備深刻內(nèi)涵的特點(diǎn)。如果在頁(yè)面堆砌太多的細(xì)節(jié)，使頁(yè)面過(guò)于復(fù)雜，以致瀏覽者找不到重點(diǎn)，他們也很快就會(huì)對(duì)該網(wǎng)頁(yè)失去興趣。 色彩在網(wǎng)頁(yè)設(shè)計(jì)中的重要性現(xiàn)在的人們?yōu)g覽網(wǎng)頁(yè)，已不僅僅滿足于簡(jiǎn)單的文字堆砌上面，他們的審美要求越來(lái)越高，藝術(shù)設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中的重要性是顯而易見(jiàn)的。其次，色彩風(fēng)格與網(wǎng)站的內(nèi)容要能夠相互呼應(yīng)。色彩風(fēng)格的確立首先取決于網(wǎng)站的目標(biāo)定位，網(wǎng)頁(yè)的最終受眾界定了色彩的傾向。受現(xiàn)代色彩觀念的影響，色彩的豐富性從一開(kāi)始就是網(wǎng)頁(yè)設(shè)計(jì)的發(fā)展趨向。這就需要設(shè)計(jì)師去主動(dòng)發(fā)現(xiàn)和控制色彩節(jié)奏和韻律，增強(qiáng)網(wǎng)頁(yè)時(shí)間和空間的變化，使網(wǎng)頁(yè)設(shè)計(jì)體現(xiàn)出生動(dòng)感人的藝術(shù)魅力。這種形式感的表現(xiàn)在色彩的調(diào)子、階調(diào)、節(jié)奏、韻律上，與音樂(lè)的形式感有較多的共同性。在網(wǎng)頁(yè)設(shè)計(jì)中，融入音樂(lè)這一元素，已經(jīng)成為主流。 （5）色彩與音樂(lè)結(jié)合。隨著色彩變化的節(jié)奏，瀏覽者的心理會(huì)產(chǎn)生平靜、緊張、舒緩、熱烈、不安等不同感受。網(wǎng)頁(yè)的時(shí)間性變化也影響著色彩的情感。頁(yè)面色彩大面積的分割顯得穩(wěn)重而大氣；小面積色彩有規(guī)律的交替變化，讓人緊張而富有活力；對(duì)稱的色彩排列莊重、有嚴(yán)肅感；均衡的色彩排列自由而浪漫 ；色彩排列節(jié)奏緊張，人的心理也會(huì)緊張；節(jié)奏舒緩心理就會(huì)放松。在網(wǎng)頁(yè)中色彩的排列是四維度的，即在長(zhǎng)、寬、深三維度的基礎(chǔ)上加上時(shí)間維度。色彩的排列方式也影響著色彩的情感表現(xiàn)。低長(zhǎng)調(diào)的色彩仿佛黑夜中的閃電，神秘壓抑又使人振奮；低短調(diào)的色彩仿佛暗夜里的幽靈，低沉冷漠讓人心情暗淡；不同的色調(diào)引發(fā)不同感覺(jué)和感情傾向，給網(wǎng)頁(yè)設(shè)計(jì)帶來(lái)了豐富的情感因素。除色相變化能引起人的情感變化外，色彩的明度和純度變化也能影響人的情感。色調(diào)作用于人的