※進(jìn)一步掌握CSS的各種樣式設(shè)置方法；※掌握DIV+CSS網(wǎng)頁布局的方法；※掌握模板的創(chuàng)建與使用；※掌握J(rèn)avaScript腳本的使用方法。第9章完整案例：信息學(xué)院網(wǎng)站制作學(xué)習(xí)目標(biāo)：9.1信息學(xué)院網(wǎng)站描述圖9-1網(wǎng)站主頁第9章完整案例：信息學(xué)院網(wǎng)站制作9.2網(wǎng)站規(guī)劃1．網(wǎng)站需求分析山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站功能學(xué)院概況新聞中心機(jī)構(gòu)設(shè)置教學(xué)科研團(tuán)學(xué)在線招生就業(yè)公共服務(wù)圖9-2山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站的功能示意圖第9章完整案例：信息學(xué)院網(wǎng)站制作9.2網(wǎng)站規(guī)劃2．網(wǎng)站的風(fēng)格定位網(wǎng)站定位是調(diào)查研究基礎(chǔ)上進(jìn)行策劃的第一步。在調(diào)查分析的基礎(chǔ)上確定自己網(wǎng)站的服務(wù)對(duì)象和內(nèi)容是網(wǎng)站建設(shè)和發(fā)展的前提。對(duì)于網(wǎng)站來說，任何想吸引全部網(wǎng)民的做法是錯(cuò)誤的，在信息爆炸而個(gè)體差異極大的社會(huì)，網(wǎng)站能做的只是吸引特定的人群。網(wǎng)站的成功與否與市場(chǎng)調(diào)查及網(wǎng)站定位是密不可分的。學(xué)院網(wǎng)站是學(xué)校門戶網(wǎng)站，他的主要用戶為學(xué)生、教師及學(xué)生家長等，同時(shí)也是教育類的網(wǎng)站，所以采用藍(lán)色為主色調(diào)，因?yàn)樗{(lán)色代表智慧，代表高科技，代表清爽，有一種寧靜致遠(yuǎn)的感覺。藍(lán)色是海洋、天空、大海的顏色，讓人充滿遐想和向往。另外為了突出網(wǎng)站的熱情、充滿活力，在網(wǎng)站上又加以運(yùn)用了紅色，讓用戶第一眼就被網(wǎng)站亮麗的色彩所吸引。第9章完整案例：信息學(xué)院網(wǎng)站制作9.2網(wǎng)站規(guī)劃3.規(guī)劃草圖網(wǎng)站頂部圖片網(wǎng)站導(dǎo)航滾動(dòng)文字通知公告院長信箱教學(xué)系部學(xué)院要聞航空招生宣傳圖片系部動(dòng)態(tài)圖片幻燈招生信息網(wǎng)圖片學(xué)院榮譽(yù)視頻宣傳圖片常用鏈接版權(quán)信息圖9-3山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站草圖第9章完整案例：信息學(xué)院網(wǎng)站制作9.2網(wǎng)站規(guī)劃4.項(xiàng)目計(jì)劃需求分析風(fēng)格定位內(nèi)容組織效果圖設(shè)計(jì)網(wǎng)站主頁設(shè)計(jì)模板頁設(shè)計(jì)子頁設(shè)計(jì)網(wǎng)站發(fā)布圖9-4山東信息職業(yè)技術(shù)學(xué)院網(wǎng)站的制作流程第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)9.3.1效果圖設(shè)計(jì)原則效果圖制作的原則：先背景，后前景，先上后下，先左后右。制作軟件：PhotoshopCS6中文版。本效果圖設(shè)計(jì)中用到的主要知識(shí)：選擇工具的應(yīng)用文字工具的應(yīng)用鋼筆工具的應(yīng)用漸變工具的應(yīng)用矢量工具的應(yīng)用圖層樣式的應(yīng)用蒙版的應(yīng)用第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-5添加參考線第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-8

Banner條圖9-9導(dǎo)航條第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-11繪制正文背景第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-14描邊圖層樣式面板圖9-15

招生信息網(wǎng)完成圖第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-16學(xué)院榮譽(yù)完成效果圖9-18學(xué)院視頻圖片第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-19學(xué)院要聞

圖9-20系部動(dòng)態(tài)圖9-23

“航空招生”效果第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)圖9-31“書記信箱”完成后效果圖9-32常用鏈接欄圖9-33版權(quán)信息第9章完整案例：信息學(xué)院網(wǎng)站制作9.3效果圖設(shè)計(jì)9.3.3.效果圖切片導(dǎo)出網(wǎng)頁第9章完整案例：信息學(xué)院網(wǎng)站制作9.4網(wǎng)站主頁設(shè)計(jì)9.4.1主頁布局設(shè)計(jì)top第9章完整案例：信息學(xué)院網(wǎng)站制作9.4.2主頁設(shè)計(jì)步驟9.4網(wǎng)站主頁設(shè)計(jì)（1）在磁盤E盤根目錄下創(chuàng)建網(wǎng)站文件夾schoolSite，將素材中提供的文件夾images、media、pictures、swf拷貝到該文件夾下。（2）啟動(dòng)DreamWeaverCS6，通過“站點(diǎn)”｜“新建站點(diǎn)”命令，創(chuàng)建網(wǎng)站站點(diǎn)，站點(diǎn)名稱為：schoolSite，本地站點(diǎn)文件夾為：E:\schoolSite\。（3）在站點(diǎn)中新建一個(gè)網(wǎng)頁文件，命名為：index.html。（4）在站點(diǎn)中創(chuàng)建“style”子文件夾，用Dreamweaver創(chuàng)建CSS樣式表文件，并保存CSS文件到該文件夾中，命名為“style.css”，然后書寫通用樣式.第9章完整案例：信息學(xué)院網(wǎng)站制作9.4網(wǎng)站主頁設(shè)計(jì)（5）在“CSS樣式表”面板中，點(diǎn)擊附加樣式表按鈕，再點(diǎn)擊“瀏覽”按鈕，選擇已創(chuàng)建的樣式表文件“style.css”，點(diǎn)擊“確定”按鈕，將style.css樣式表附加到index.html頁面中。（6）搭建index.html頁面結(jié)構(gòu)。（7）在style.css文件中添加CSS樣式。第9章完整案例：信息學(xué)院網(wǎng)站制作9.5網(wǎng)站模板頁設(shè)計(jì)模板頁中的內(nèi)容與主頁中上部和底部的內(nèi)容相同，所以模板頁的制作可以將主頁保存為模板頁，再進(jìn)行修改制作成模板頁即可。具體步驟如下：（1）將主頁另存為模板頁打開首頁文件index.html，執(zhí)行“文件”｜“另存為模板”命令，在另存為文本框后面，輸入文件名“moban”，點(diǎn)擊“保存”，如圖9-44所示。此時(shí)模板文件moban.dwt會(huì)自動(dòng)保存到網(wǎng)站文件夾templates文件夾中。第9章完整案例：信息學(xué)院網(wǎng)站制作9.5網(wǎng)站模板頁設(shè)計(jì)（2）添加模板頁中的塊，并繼續(xù)在style.css中添加樣式第9章完整案例：信息學(xué)院網(wǎng)站制作（3）設(shè)計(jì)模板頁的左側(cè)部分9.5網(wǎng)站模板頁設(shè)計(jì)第9章完整案例：信息學(xué)院網(wǎng)站制作（4）設(shè)計(jì)模板頁的右側(cè)部分9.5網(wǎng)站模板頁設(shè)計(jì)第9章完整案例：信息學(xué)院網(wǎng)站制作9.5網(wǎng)站模板頁設(shè)計(jì)（5）給模板頁添加可編輯區(qū)域選中模板頁右側(cè)的塊mRight，執(zhí)行“插入”｜“模板對(duì)象”｜“可編輯區(qū)域”，插入可編輯區(qū)域，如圖9-48所示。至此，模板頁制作完成。第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-49學(xué)院簡介頁面效果圖第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-52學(xué)院榮譽(yù)列表頁面第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-54學(xué)院榮譽(yù)詳細(xì)情況頁面第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-56高技能人才培訓(xùn)基地頁面第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-58辦公電話頁面第9章完整案例：信息學(xué)院網(wǎng)站制作9.6網(wǎng)站其他頁面設(shè)計(jì)圖9-59視頻宣傳頁面第9章完整案例：信息學(xué)院網(wǎng)站制作9.7添加首頁中的JavaScript腳本圖9-61添加腳本后的主頁第9章完整案例：信息學(xué)院網(wǎng)站制作本章完整地制作了一個(gè)學(xué)校網(wǎng)站。通