1、網(wǎng)站設(shè)計(jì)基礎(chǔ)知識(shí)講座,網(wǎng)頁(yè)設(shè)計(jì)概述,網(wǎng)頁(yè)基本特征 網(wǎng)頁(yè)的基本構(gòu)成元素 網(wǎng)頁(yè)設(shè)計(jì)的基本原則 多媒體在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用,網(wǎng)頁(yè)基本特征, 標(biāo)題 正文 ,網(wǎng)頁(yè)的基本構(gòu)成元素,文本 圖像 超鏈接 表格 表單 導(dǎo)航欄 Gif動(dòng)畫 Flash動(dòng)畫 框架,網(wǎng)頁(yè)設(shè)計(jì)的基本原則,確定內(nèi)容 確定內(nèi)容最好的表現(xiàn)形式和用戶 確立一個(gè)創(chuàng)造性的、有效的設(shè)計(jì)方案 網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn)： 不同的用戶群有不同的服務(wù)方向，需要恰當(dāng)?shù)脑O(shè)計(jì)沒有好的或者壞的設(shè)計(jì)，只有是否合適、恰當(dāng)?shù)脑O(shè)計(jì)。,網(wǎng)頁(yè)多媒體類型,1、圖像 Gif 、JPEG、PNG 2、動(dòng)畫 Gif、Flash 3、Java Applet 4、音頻 WAV、MP3、MIDI、Rea

2、l Audio、 5、視頻 Realplayer、mov、MPEG、AVI,網(wǎng)站設(shè)計(jì)制作的基本流程,前期策劃和內(nèi)容組織 網(wǎng)站需求分析 網(wǎng)站整體風(fēng)格定位 網(wǎng)站內(nèi)容組織,網(wǎng)站設(shè)計(jì)制作的基本流程,規(guī)劃,設(shè)計(jì),完善,發(fā)布,維護(hù),網(wǎng)站的制作流程圖,前期策劃和內(nèi)容組織,網(wǎng)站需求分析 網(wǎng)站整體風(fēng)格定位 網(wǎng)站內(nèi)容組織 規(guī)劃草圖 規(guī)劃頁(yè)面結(jié)構(gòu) 規(guī)劃站點(diǎn)結(jié)構(gòu),網(wǎng)站頁(yè)面的設(shè)計(jì)制作,尋找網(wǎng)頁(yè)的創(chuàng)意 利用圖像軟件設(shè)計(jì)效果圖 利用網(wǎng)頁(yè)編輯軟件制作網(wǎng)頁(yè) 利用網(wǎng)頁(yè)動(dòng)畫軟件制作動(dòng)畫,網(wǎng)站頁(yè)面的技術(shù)實(shí)現(xiàn),網(wǎng)頁(yè)制作中的其他常用工具 360度全景圖片 Swish制作Flash文字特效動(dòng)畫 使用ftp軟件發(fā)布網(wǎng)站 網(wǎng)頁(yè)特效的具體技術(shù)實(shí)

3、現(xiàn) Html、CSS、JavaScript,色彩搭配在網(wǎng)站中的應(yīng)用,色環(huán) 在從紅到紫的光譜中,等間的選擇兩種或兩種以上的顏色,相鄰的兩個(gè)色相互混合又得到另外一種特殊的顏色.如此周而復(fù)始,從而構(gòu)成一個(gè)首尾相交的環(huán),被稱為孟賽爾色相環(huán),即色環(huán).從本質(zhì)上講,色環(huán)就是色譜可以看到的顏色所形成的線性連續(xù)環(huán).,常見配色方案,近似色 用近似色的顏色主題可以實(shí)現(xiàn)色彩的融洽與融合,常見配色方案,補(bǔ)充色: 補(bǔ)充色也叫對(duì)比色,是制在色環(huán)中的直接位置相對(duì)的顏色. 強(qiáng)烈突出,富有沖擊力,常見配色方案,分離補(bǔ)色:在色環(huán)上選擇一種顏色，他的補(bǔ)色就在色環(huán)的另一面,可以使用補(bǔ)色旁邊的一種或多種顏色,這樣的一組顏色叫做分離補(bǔ)色.

4、,常見配色方案,暖色系:由紅色調(diào)組成,賦予溫暖、舒適和活力,常見配色方案,冷色系：冷色來(lái)自于蘭色色調(diào)，這些顏色對(duì)色彩主題起到冷靜的作用，用做頁(yè)面背景較好。,色彩的4種功能角色,主色 支配色 融合色 強(qiáng)調(diào)色,如何使用色彩給網(wǎng)站定位,紅色：熱情、活力 橙色：時(shí)尚、輕快 黃色：明亮、愉快 綠色：寧?kù)o、希望 藍(lán)色：涼爽、清新、專業(yè) 白色：潔白、純真，多用于背景色 黑色：深沉 灰色：中庸,網(wǎng)站用戶界面的設(shè)計(jì),用戶界面的要求 網(wǎng)頁(yè)界面的實(shí)用性設(shè)計(jì) 網(wǎng)頁(yè)信息的表現(xiàn)形式和類型 網(wǎng)頁(yè)的版式 網(wǎng)頁(yè)中的文字設(shè)計(jì) 網(wǎng)頁(yè)中的圖像運(yùn)用,用戶界面的要求,標(biāo)題一目了然 表明信息 清晰的目錄結(jié)構(gòu),網(wǎng)頁(yè)界面的實(shí)用性設(shè)計(jì),表現(xiàn)歡迎

5、 傳達(dá)信任感 加強(qiáng)說(shuō)服力,網(wǎng)頁(yè)的版式,網(wǎng)站廣告的設(shè)計(jì),網(wǎng)站廣告標(biāo)準(zhǔn)尺寸 300*250 中等矩形 一般用于頁(yè)面內(nèi)部 250*250 正方形 一般用于頁(yè)面內(nèi)部 130*300 垂直矩形 一般用于門戶網(wǎng)站內(nèi)容頁(yè)面中，適合與正文的混排 360*300 大矩形 一般用于彈出窗口廣告 468*60 通欄廣告， 88*31 鏈接用LOGO標(biāo)志 120*60 按鈕樣式,網(wǎng)站廣告的設(shè)計(jì)準(zhǔn)則,視覺要求 醒目、美觀 文字使用 文字清晰、字體合適 文本與背景有較大對(duì)比 選用合適的字體 字體排列方式要符合人們閱讀習(xí)慣 避免文字單一化 內(nèi)容設(shè)計(jì) 廣告語(yǔ)激發(fā)用戶點(diǎn)擊欲望,網(wǎng)站中表格的使用,表格的作用 表格的制作 利用表格

6、分割網(wǎng)頁(yè) 格子理論的介紹 格子網(wǎng)頁(yè)的制作,網(wǎng)站中層的使用,層的特點(diǎn) 具有編號(hào)、大小、位置、背景、可見性、溢出等。 層與表格的配合,框架網(wǎng)站的制作,框架的特點(diǎn) 使用框架建設(shè)網(wǎng)站最大的特點(diǎn)就是使網(wǎng)站的風(fēng)格能夠保持統(tǒng)一。,模版網(wǎng)站的制作,模版的特點(diǎn) 是Dreamweaver中一種特殊類型的文檔，用于設(shè)計(jì)“鎖定的”頁(yè)面布局。最大的用途在于一次更新多個(gè)頁(yè)面 制作模版網(wǎng)站,在頁(yè)面中使用庫(kù),庫(kù)是一種特殊的Dreamweaver 文件，其中包含用戶已創(chuàng)建以便放在網(wǎng)頁(yè)上的單獨(dú)“資源”或者資源拷貝的集合，庫(kù)項(xiàng)目是可以在多個(gè)頁(yè)面中重復(fù)使用的存儲(chǔ)頁(yè)面元素。每當(dāng)更改某個(gè)庫(kù)項(xiàng)目的內(nèi)容時(shí)，用戶都可以更新所有使用該項(xiàng)目的頁(yè)面

7、。,使用行為和JavaScript制作特效,Dreamweaver中的行為 行為是事件和動(dòng)作的組合，瀏覽器響應(yīng)用戶的動(dòng)作產(chǎn)生事件。 行為的使用 添加狀態(tài)欄文本、添加彈出信息、打開瀏覽器窗口、交換圖像、拖動(dòng)層特效、彈出菜單、顯示隱藏層 JavaScript介紹,使用CSS樣式表設(shè)計(jì)網(wǎng)頁(yè),CSS的介紹 是一種設(shè)計(jì)網(wǎng)頁(yè)樣式的工具。使用方式有3種：內(nèi)部樣式表文件、外部鏈接樣式表、內(nèi)部嵌入樣式表。 利用CSS定義網(wǎng)頁(yè)對(duì)象 定義文本 定義表格 定義背景 定義超鏈接 使用濾鏡,建設(shè)數(shù)據(jù)庫(kù)網(wǎng)站,創(chuàng)建動(dòng)態(tài)頁(yè)面 創(chuàng)建動(dòng)態(tài)站點(diǎn) 創(chuàng)建DSN 數(shù)據(jù)庫(kù)連接 使用數(shù)據(jù)綁定 插入動(dòng)態(tài)內(nèi)容,網(wǎng)站開發(fā)規(guī)范,網(wǎng)站項(xiàng)目管理規(guī)范 組建

8、開發(fā)團(tuán)隊(duì)規(guī)范 開發(fā)工具規(guī)范 網(wǎng)站開發(fā)流程規(guī)范 數(shù)據(jù)庫(kù)開發(fā)規(guī)范 文件夾文件名命名規(guī)范 程序代碼編程規(guī)范 網(wǎng)站首頁(yè)head區(qū)代碼規(guī)范 網(wǎng)站建設(shè)尺寸規(guī)范 網(wǎng)站LOGO設(shè)計(jì)規(guī)范,網(wǎng)站項(xiàng)目管理規(guī)范,概念 網(wǎng)站項(xiàng)目管理就是根據(jù)特定的規(guī)范、在預(yù)算范圍內(nèi)、按時(shí)完成網(wǎng)站開發(fā)任務(wù)。 需求分析 項(xiàng)目立項(xiàng)、客戶的需求說(shuō)明書、 系統(tǒng)分析 網(wǎng)站總體分析、建設(shè)方案、詳細(xì)設(shè)計(jì)、 項(xiàng)目實(shí)施 整體形象設(shè)計(jì)、開發(fā)制作、調(diào)試完善、宣傳推廣,組建開發(fā)團(tuán)隊(duì)規(guī)范,六個(gè)必須角色 項(xiàng)目經(jīng)理：總體設(shè)計(jì)，定制開發(fā)進(jìn)度并監(jiān)控，定制相應(yīng)的開發(fā)規(guī)范，負(fù)責(zé)各個(gè)環(huán)節(jié)的評(píng)審工作，協(xié)調(diào)各個(gè)成員小組之間的開發(fā)。 策劃：提供詳細(xì)的策劃方案和需求分析的人，還包括后期

9、網(wǎng)站推廣方面的策劃。 美工：根據(jù)策劃和需求設(shè)計(jì)網(wǎng)站界面 程序員：根據(jù)項(xiàng)目總體設(shè)計(jì)來(lái)設(shè)計(jì)數(shù)據(jù)庫(kù)和功能模塊的實(shí)現(xiàn)。 代碼整合員：負(fù)責(zé)將程序員的代碼和界面融合到一起，代碼整合員可以制作網(wǎng)站相關(guān)頁(yè)面。 測(cè)試員：負(fù)責(zé)測(cè)試程序。,開發(fā)工具規(guī)范,前臺(tái)開發(fā)工具 Photoshop/Dreamweaver/Flash等 后臺(tái)開發(fā)環(huán)境 PowerDesigner(數(shù)據(jù)庫(kù)建模) / Rational Rose(程序建模)。 項(xiàng)目管理和輔助軟件 Miicrosoft Project(開發(fā)進(jìn)度) / Visual SourceSafe(代碼版本控制)/ VS.net 附帶工具M(jìn)icrosoft Application

10、Center Test ,/ Word(編寫程序文檔),網(wǎng)站開發(fā)流程規(guī)范,Web策劃,評(píng)審,設(shè)計(jì)效果圖,評(píng)審,頁(yè)面制作,測(cè)試,Y,N,Y,N,N,Y,需求分析,評(píng)審,總體設(shè)計(jì),評(píng)審,數(shù)據(jù)庫(kù)設(shè)計(jì)功能設(shè)計(jì),評(píng)審,Y,N,Y,N,N,Y,代碼整合,測(cè)試,發(fā)布,實(shí)現(xiàn)功能模塊,測(cè)試,N,Y,Y,N,數(shù)據(jù)庫(kù)開發(fā)規(guī)范,數(shù)據(jù)庫(kù)表命名規(guī)范 數(shù)據(jù)庫(kù)字段命名規(guī)范,文件夾文件名命名規(guī)范,命名采用英文小寫 images(存放圖形文件) flash(存放Flash文件) style(存放樣式表文件) scripts(存放javascript腳本) inc(存放include文件) link(存放友情鏈接) media(存放多媒體文件),程序代碼編寫規(guī)范,略,網(wǎng)站首頁(yè)head區(qū)代碼規(guī)范,版權(quán)注釋 網(wǎng)頁(yè)顯示字符集 網(wǎng)頁(yè)制作者信息 網(wǎng)站簡(jiǎn)介 搜索關(guān)鍵字 網(wǎng)頁(yè)標(biāo)題 ,網(wǎng)站建設(shè)尺寸規(guī)范,頁(yè)面標(biāo)準(zhǔn)按照800600分辨率制作,實(shí)際尺寸為778*434,頁(yè)面