項(xiàng)目4-隴上江南旅游網(wǎng)站建設(shè)-教學(xué)課件

網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)教學(xué)課件

項(xiàng)目4隴上江南旅游網(wǎng)站建設(shè)網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)教學(xué)課件項(xiàng)目4隴上江南旅游網(wǎng)11.任務(wù)解析與項(xiàng)目目標(biāo)

2.開(kāi)發(fā)流程3.需求分析4.網(wǎng)站風(fēng)格5.網(wǎng)站草圖規(guī)劃

6.規(guī)劃站點(diǎn)結(jié)構(gòu)

7.任務(wù)小結(jié)與拓展任務(wù)1：前期策劃與內(nèi)容組織情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)1：前期策劃與內(nèi)容組織情境42任務(wù)解析與項(xiàng)目目標(biāo)分項(xiàng)任務(wù)1前期策劃與內(nèi)容組織分項(xiàng)任務(wù)2網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作分項(xiàng)任務(wù)3網(wǎng)站頁(yè)面的后期編輯分項(xiàng)任務(wù)4界面與代碼融合分項(xiàng)任務(wù)5發(fā)布與后期維護(hù)任務(wù)解析與項(xiàng)目目標(biāo)分項(xiàng)任務(wù)1前期策劃與內(nèi)容組織分項(xiàng)任務(wù)23網(wǎng)站的制作流程

需求分析風(fēng)格定位內(nèi)容組織效果圖設(shè)計(jì)網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)動(dòng)態(tài)編程或代碼融合發(fā)布測(cè)試（域名空間）網(wǎng)站維護(hù)網(wǎng)站的制作流程需求分析效果圖設(shè)計(jì)網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)4需求分析隴上江南旅游網(wǎng)站的功能示意圖旅游概況旅游動(dòng)態(tài)景點(diǎn)景區(qū)風(fēng)土人情地方風(fēng)味賓館飯店旅游路線需求分析隴上江南旅游網(wǎng)站的功能示意圖旅游概況5風(fēng)格定位

隴上江南旅游網(wǎng)站是宣傳類(lèi)網(wǎng)站，他的主要目的是展示甘肅隴南、天水的旅游資源，所以主色采用綠色為主色調(diào)，因?yàn)榫G色具有活力感覺(jué)，通過(guò)本站傳達(dá)個(gè)使用的用戶以輕松、愉快、舒適的感覺(jué)。隴上江南旅游網(wǎng)站風(fēng)格定位風(fēng)格定位隴上江南旅游網(wǎng)站是宣傳類(lèi)網(wǎng)站，他的主要目的是展示甘6規(guī)劃草圖

隴上江南旅游網(wǎng)站草圖設(shè)計(jì)規(guī)劃草圖隴上江南旅游網(wǎng)站草圖設(shè)計(jì)7站點(diǎn)結(jié)構(gòu)

不要將所有文件都存放在根目錄下按欄目?jī)?nèi)容建立子目錄在每個(gè)主目錄下都建立獨(dú)立的images目錄目錄的層次不要太深站點(diǎn)結(jié)構(gòu)注意事項(xiàng)站點(diǎn)結(jié)構(gòu)不要將所有文件都存放在根目錄下站點(diǎn)結(jié)構(gòu)注意事項(xiàng)8站點(diǎn)結(jié)構(gòu)

網(wǎng)站根目錄ImagesFlashcssAdminIndex.asp子文件夾站點(diǎn)結(jié)構(gòu)網(wǎng)站根目錄ImagesFlashcssAdmi91.任務(wù)解析與項(xiàng)目目標(biāo)

2.設(shè)計(jì)效果圖

3.效果圖切片導(dǎo)出網(wǎng)頁(yè)

4.任務(wù)小結(jié)與拓展任務(wù)2：網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作

情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)2：網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作10任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)具有挑戰(zhàn)意味的新領(lǐng)域設(shè)計(jì)，在網(wǎng)頁(yè)時(shí)代，也許還應(yīng)該重復(fù)。不要熱衷于技術(shù)的花樣性，而忘記優(yōu)秀設(shè)計(jì)和清晰表達(dá)的重要性。任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)具有挑戰(zhàn)意味的新領(lǐng)域設(shè)計(jì)，在11任務(wù)解析與項(xiàng)目目標(biāo)效果圖制作的原則：先背景后前景先上后下先左后右。本效果圖設(shè)計(jì)中用到的主要知識(shí)：圖像的摳取輔助線的應(yīng)用圖層樣式與圖層混合模式的應(yīng)用蒙版的應(yīng)用任務(wù)解析與項(xiàng)目目標(biāo)效果圖制作的原則：本效果圖設(shè)計(jì)中用到的主要12效果圖制作步驟（1）制作網(wǎng)站LOGO,制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略,效果圖如下：（2）制作網(wǎng)站導(dǎo)航菜單，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，調(diào)整位置后效果圖如下：效果圖制作步驟（1）制作網(wǎng)站LOGO,制作過(guò)程上機(jī)操作，詳細(xì)13效果圖制作步驟（3）制作管理員登陸欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，效果如圖所示。（4）制作旅游地圖欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（3）制作管理員登陸欄目，制作過(guò)程上機(jī)操作，詳14效果圖制作步驟（5）制作隴南景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如下圖所示。（6）制作天水景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（5）制作隴南景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)15效果圖制作步驟（7）制作圖片新聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。

（8）制作本站要聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（7）制作圖片新聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)16效果圖制作步驟（9）制作旅游動(dòng)態(tài)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。（10）制作旅游資訊欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（9）制作旅游動(dòng)態(tài)欄目，制作過(guò)程上機(jī)操作，詳細(xì)17效果圖制作步驟（11）制作風(fēng)土人情欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。（12）制作旅游線路欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示效果圖制作步驟（11）制作風(fēng)土人情欄目，制作過(guò)程上機(jī)操作，詳18效果圖制作步驟（13）制作景點(diǎn)欣賞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示（14）制作版權(quán)信息欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示效果圖制作步驟（13）制作景點(diǎn)欣賞欄目，制作過(guò)程上機(jī)操作，詳19效果圖的格式轉(zhuǎn)換網(wǎng)頁(yè)效果圖完成后，就需要進(jìn)行網(wǎng)頁(yè)切片，現(xiàn)在介紹兩種切片方式：方法一：選擇“切片工具”，在效果圖中任意裁切。任何現(xiàn)有切片自動(dòng)顯示在文檔窗口中。注意：首先希望大家將預(yù)期的切片設(shè)計(jì)好，然后進(jìn)行切片；為了切片準(zhǔn)確，減少誤差，在此建議大家盡量放大圖片進(jìn)行切片；所有切片都有編號(hào)，希望所有的編號(hào)能夠一目了然。方法二：從參考線創(chuàng)建切片，添加參考線，然后選擇“切片工具”，在該工具的屬性欄中點(diǎn)擊按鈕即可。注意：從參考線創(chuàng)建切片時(shí)，通常需要配合切片合并使用。效果圖的格式轉(zhuǎn)換網(wǎng)頁(yè)效果圖完成后，就需要進(jìn)行網(wǎng)頁(yè)切片，現(xiàn)在介20效果圖的切片效果圖的切片21效果圖的格式轉(zhuǎn)換執(zhí)行“文件”-“存儲(chǔ)為Web和設(shè)備所用格式”命令，在如圖所示的面板中點(diǎn)擊“存儲(chǔ)”按鈕。效果圖的格式轉(zhuǎn)換執(zhí)行“文件”-“存儲(chǔ)為Web和設(shè)備所用格式”22效果圖的格式轉(zhuǎn)換2）然后在彈出的“將優(yōu)化結(jié)果另存為”面板中，設(shè)置保存類(lèi)型為“HTML和圖像（*.html）”,slice設(shè)置為“所有切片”，將文件名命名為“index”即可，點(diǎn)擊“保存”按鈕，然后使用IE瀏覽器打開(kāi)index.html測(cè)試，效果如所示。效果圖的格式轉(zhuǎn)換2）然后在彈出的“將優(yōu)化結(jié)果另存為”面板中，23任務(wù)小結(jié)

完成本分項(xiàng)任務(wù)后，應(yīng)能夠掌握網(wǎng)站效果圖的設(shè)計(jì)方法，網(wǎng)頁(yè)切片注意的問(wèn)題。請(qǐng)進(jìn)行自我測(cè)試：你是否能夠進(jìn)行“隴上江南旅游網(wǎng)站”的效果圖的設(shè)計(jì)。任務(wù)拓展根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅游網(wǎng)站網(wǎng)站”項(xiàng)目的效果圖設(shè)計(jì)。任務(wù)小結(jié)任務(wù)拓展根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅241.任務(wù)解析與項(xiàng)目目標(biāo)

2.網(wǎng)頁(yè)后期編輯

3.網(wǎng)頁(yè)動(dòng)畫(huà)的插入

4.任務(wù)小結(jié)與拓展任務(wù)3：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)3：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)情境4：25任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)編輯主要是將使用切片導(dǎo)出的網(wǎng)頁(yè)進(jìn)行編輯使其規(guī)范易用，同時(shí)為了增加網(wǎng)頁(yè)效果，進(jìn)行簡(jiǎn)單的動(dòng)畫(huà)制作。所以在此解決兩個(gè)問(wèn)題：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)。第一種方式是直接在切片效果圖中進(jìn)行編輯，進(jìn)行后期處理，這種方法適用于藝術(shù)界面型網(wǎng)頁(yè)，具體的方法是直接在網(wǎng)頁(yè)中設(shè)置超級(jí)鏈接，添加動(dòng)畫(huà)等效果，或者將某些切片刪除（或設(shè)置為背景），然后添加需要的文字。第二種方式是以導(dǎo)出的網(wǎng)頁(yè)為基礎(chǔ)，利用Dreamweaver軟件進(jìn)行合理的布局與優(yōu)化。這種方法通用性強(qiáng)，很多網(wǎng)頁(yè)都可采用。任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)編輯主要是將使用切片導(dǎo)出的網(wǎng)頁(yè)進(jìn)行編26任務(wù)解析與項(xiàng)目目標(biāo)a)網(wǎng)頁(yè)表格布局大表格整體布局b)網(wǎng)頁(yè)表格分散布局二者的最終呈現(xiàn)的網(wǎng)頁(yè)效果是一樣的，但是整體布局（圖a）會(huì)涉及到較多的表格嵌套，同時(shí)在下載網(wǎng)頁(yè)內(nèi)容時(shí)速度相對(duì)較慢，表格的分布布局（圖b）瀏覽的速度相對(duì)較快。所以通常大家在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)盡量采用表格的分布布局（圖b）。布局原則:自上而下，自左向右任務(wù)解析與項(xiàng)目目標(biāo)a)網(wǎng)頁(yè)表格布局大表格整體布局27后期網(wǎng)頁(yè)編輯

用Dreamweaver新建一個(gè)網(wǎng)頁(yè)文件并保存到導(dǎo)出的“動(dòng)態(tài)網(wǎng)頁(yè)”文件夾中，命名為“index.asp”。設(shè)置“頁(yè)面屬性”中“網(wǎng)頁(yè)標(biāo)題”為“歡迎來(lái)到隴上江南旅游網(wǎng)站！”，上、下、左、右邊距為0像素，設(shè)置如圖所示。頁(yè)面屬性設(shè)置后期網(wǎng)頁(yè)編輯用Dreamweaver新建一個(gè)網(wǎng)頁(yè)文件并保28后期網(wǎng)頁(yè)編輯

3）用Dreamweaver創(chuàng)建新CSS文件，并保存CSS文件到該文件夾中，命名為“css.css”。4）管理員登陸界面5）旅游地圖6）旅游景點(diǎn)7）網(wǎng)站鏈接后期網(wǎng)頁(yè)編輯3）用Dreamweaver創(chuàng)建新CSS文件298）網(wǎng)站新聞9）新聞動(dòng)態(tài)10）旅游咨詢11）風(fēng)土人情12）旅游線路8）網(wǎng)站新聞9）新聞動(dòng)態(tài)10）旅游咨詢11）風(fēng)土人情12）旅30動(dòng)畫(huà)制作

1).啟動(dòng)SWiSHmax，如圖所示。動(dòng)畫(huà)制作1).啟動(dòng)SWiSHmax，如圖所示。31動(dòng)畫(huà)制作

2）點(diǎn)擊“開(kāi)始新建一個(gè)空電影”按鈕，在場(chǎng)景中創(chuàng)建一個(gè)電影，在屬性中輸入動(dòng)畫(huà)的寬為940像素，高為153像素，具體參數(shù)如圖所示，在網(wǎng)站文件下創(chuàng)建“flash”文件夾并保存文件動(dòng)畫(huà)文件。動(dòng)畫(huà)的參數(shù)設(shè)置界面圖動(dòng)畫(huà)的參數(shù)設(shè)置界面動(dòng)畫(huà)制作2）點(diǎn)擊“開(kāi)始新建一個(gè)空電影”按鈕，在場(chǎng)景中創(chuàng)32動(dòng)畫(huà)制作

3）點(diǎn)擊工具欄中的按鈕（執(zhí)行“插入”→“文本”命令），然后在文本輸入?yún)^(qū)中輸入“領(lǐng)略隴南美景體驗(yàn)風(fēng)土人情”等字，調(diào)整文字的位置，如圖所示。動(dòng)畫(huà)制作3）點(diǎn)擊工具欄中的按鈕（執(zhí)行“插入”→“文本”33動(dòng)畫(huà)制作

4）執(zhí)行“文件”→“導(dǎo)出”→“swf”命令，即可彈出“導(dǎo)出為swf”對(duì)話框，選擇路徑，輸入文件名即可保存。動(dòng)畫(huà)制作4）執(zhí)行“文件”→“導(dǎo)出”→“swf”命令，即34動(dòng)畫(huà)制作

動(dòng)畫(huà)預(yù)覽效果方式二的制作與方式一的不同之處在于，可以不加載背景圖片，或者在方式一制作最后刪除圖片，當(dāng)然這個(gè)動(dòng)畫(huà)的大小適中就可以了，例如寬800pix，效果如圖所示。動(dòng)畫(huà)制作動(dòng)畫(huà)預(yù)覽效果方式二的制作與方式一的不同之處在35動(dòng)畫(huà)的使用

1.打開(kāi)上一節(jié)制作的網(wǎng)頁(yè)“index.asp”，然后刪除圖片“index_09.gif”。2.執(zhí)行“插入”-“媒體”-“flash”命令，然后選擇“flash”文件夾下的“xc.swf”動(dòng)畫(huà)，預(yù)覽動(dòng)畫(huà)如圖所示?！安迦搿惫ぞ邫谥械摹安迦朊襟w”按鈕動(dòng)畫(huà)的使用1.打開(kāi)上一節(jié)制作的網(wǎng)頁(yè)“index.asp36方式二制作的透明動(dòng)畫(huà)，主要是將圖片作為背景圖，然后將動(dòng)畫(huà)插入，設(shè)置動(dòng)畫(huà)參數(shù)如圖所示即可。動(dòng)畫(huà)的使用

方式二制作的透明動(dòng)畫(huà)，主要是將圖片作為背景圖，然后將動(dòng)畫(huà)插入37任務(wù)小結(jié)

根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅游網(wǎng)站”項(xiàng)目的網(wǎng)頁(yè)后期的編輯。完成本分項(xiàng)任務(wù)后，應(yīng)能夠掌握網(wǎng)頁(yè)的后期編輯方法，插入動(dòng)畫(huà)注意的問(wèn)題。請(qǐng)進(jìn)行自我測(cè)試：你是否能夠進(jìn)行“隴上江南旅游網(wǎng)站”的網(wǎng)頁(yè)后期編輯方法。任務(wù)小結(jié)381.任務(wù)解析與項(xiàng)目目標(biāo)

2.搜索網(wǎng)站管理平臺(tái)

3.網(wǎng)站管理平臺(tái)與靜態(tài)頁(yè)面的整合

4.IIS的安裝與配置

5.IIS的安裝與配置程序調(diào)試

6.后期完善

任務(wù)4：網(wǎng)站靜態(tài)頁(yè)面與動(dòng)態(tài)代碼的融合

情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)4：網(wǎng)站靜態(tài)頁(yè)面與動(dòng)態(tài)代碼的融39任務(wù)解析與項(xiàng)目目標(biāo)動(dòng)態(tài)網(wǎng)站從功能上簡(jiǎn)單可以分成前臺(tái)靜態(tài)模塊和后臺(tái)動(dòng)態(tài)模塊。前面制作的效果圖與網(wǎng)頁(yè)編輯以及動(dòng)畫(huà)制作簡(jiǎn)單可以理解為靜態(tài)模塊，而后臺(tái)模塊主要采用兩種方式進(jìn)行解決：方式一：先下載免費(fèi)的網(wǎng)站管理平臺(tái)，然后與前臺(tái)靜態(tài)頁(yè)面進(jìn)行整合，稱之為代碼融合。方式二：所有功能完全自主開(kāi)發(fā)，根據(jù)客戶的要求定制，逐一實(shí)現(xiàn)功能。以實(shí)兩種方式各有利弊，方式一使用與初期網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者，能夠滿足大多數(shù)通用網(wǎng)站，使用方法簡(jiǎn)單，但是不能隨心所欲的實(shí)現(xiàn)通用以外的功能：方式二完全開(kāi)發(fā)，對(duì)初學(xué)者要求較高，要求能夠編寫(xiě)程序，屬于網(wǎng)站開(kāi)發(fā)的高級(jí)階段，能夠隨心所欲實(shí)現(xiàn)各種功能。

任務(wù)解析與項(xiàng)目目標(biāo)40搜索網(wǎng)站管理平臺(tái)

1.凹丫丫網(wǎng)的網(wǎng)址：搜索網(wǎng)站管理平臺(tái)1.凹丫丫網(wǎng)的網(wǎng)址：http://www41搜索網(wǎng)站管理平臺(tái)

搜索網(wǎng)站管理平臺(tái)42網(wǎng)站后臺(tái)與靜態(tài)頁(yè)面的整合

1）首先創(chuàng)建文件夾“隴上江南旅游網(wǎng)站”，將靜態(tài)頁(yè)面與動(dòng)態(tài)文件存放到一起。網(wǎng)站后臺(tái)與靜態(tài)頁(yè)面的整合1）首先創(chuàng)建文件夾“隴上江南旅游網(wǎng)43網(wǎng)站后臺(tái)與靜態(tài)頁(yè)面的整合

2）將“隴上江南旅游網(wǎng)網(wǎng)站”文件夾中的訊時(shí)網(wǎng)站管理系統(tǒng)“凹丫丫ASP免費(fèi)新聞發(fā)布系統(tǒng)”壓縮包進(jìn)行解壓縮至“隴上江南旅游網(wǎng)站”，同時(shí)刪除“凹丫丫ASP免費(fèi)新聞發(fā)布系統(tǒng).”文件。網(wǎng)站后臺(tái)與靜態(tài)頁(yè)面的整合2）將“隴上江南旅游網(wǎng)網(wǎng)站”文件夾44IIS的安裝與配置

1）執(zhí)行“開(kāi)始”→“設(shè)置”→“控制面板”命令，在“控制面板”窗口中，點(diǎn)擊“添加或刪除程序”按鈕?！疤砑?刪除程序”窗口IIS的安裝與配置1）執(zhí)行“開(kāi)始”→“設(shè)置”→“控制面板45IIS的安裝與配置

2）點(diǎn)擊“添加/刪除Windows組件”按鈕，單擊“下一步”按鈕，直到安裝完成為止?！癢indows組件向?qū)А睂?duì)話框IIS的安裝與配置2）點(diǎn)擊“添加/刪除Windows組件”46IIS的安裝與配置

3）“新建”虛擬目錄”創(chuàng)建新“虛擬目錄”IIS的安裝與配置3）“新建”虛擬目錄”創(chuàng)建新“虛擬目47IIS的安裝與配置

4）輸入虛擬目錄別名lsjz虛擬目錄別名IIS的安裝與配置4）輸入虛擬目錄別名lsjz虛擬目錄別48IIS的安裝與配置

5）輸入主目錄的路徑虛擬目錄路徑IIS的安裝與配置5）輸入主目錄的路徑虛擬目錄路徑49IIS的安裝與配置

6）設(shè)置站點(diǎn)的訪問(wèn)權(quán)限，完成。虛擬目錄權(quán)限IIS的安裝與配置6）設(shè)置站點(diǎn)的訪問(wèn)權(quán)限，完成。虛擬目50程序調(diào)試

1）虛擬目錄“l(fā)sjz”。瀏覽login.asp文件程序調(diào)試1）虛擬目錄“l(fā)sjz”。瀏覽login.as51程序調(diào)試

“瀏覽”命令執(zhí)行后的效果2）輸入用戶名、秘密都輸入“admin”，輸入驗(yàn)證碼后，點(diǎn)擊“登錄”按鈕即可進(jìn)入系統(tǒng)程序調(diào)試“瀏覽”命令執(zhí)行后的效果2）輸入用戶名、秘密都52程序調(diào)試

2）進(jìn)入系統(tǒng)主界面程序調(diào)試2）進(jìn)入系統(tǒng)主界面53程序調(diào)試

3）設(shè)置欄目界面。欄目添加主界面程序調(diào)試3）設(shè)置欄目界面。欄目添加主界面54程序調(diào)試

4）添加新聞。程序調(diào)試4）添加新聞。55程序調(diào)試

5)文章管理程序調(diào)試5)文章管理56程序調(diào)試

6）公告管理程序調(diào)試6）公告管理57程序調(diào)試

7）“新聞修改”與瀏覽新聞。新聞內(nèi)容修改頁(yè)程序調(diào)試7）“新聞修改”與瀏覽新聞。新聞內(nèi)容修改頁(yè)58新聞內(nèi)容信息新聞內(nèi)容信息59任務(wù)小結(jié)

完成本分項(xiàng)任務(wù)后，應(yīng)能夠掌握網(wǎng)站后臺(tái)的搜索，網(wǎng)站前臺(tái)與后臺(tái)的整合，服務(wù)器環(huán)境的配置，程序調(diào)試以及后期的完善等工作方法。請(qǐng)進(jìn)行自我測(cè)試：你是否能夠進(jìn)行“隴上江南旅游網(wǎng)站”的代碼融合的方法。根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅游網(wǎng)站”項(xiàng)目的代碼融合。任務(wù)小結(jié)60謝謝大家謝謝大家61網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)教學(xué)課件

項(xiàng)目4隴上江南旅游網(wǎng)站建設(shè)網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)教學(xué)課件項(xiàng)目4隴上江南旅游網(wǎng)621.任務(wù)解析與項(xiàng)目目標(biāo)

2.開(kāi)發(fā)流程3.需求分析4.網(wǎng)站風(fēng)格5.網(wǎng)站草圖規(guī)劃

6.規(guī)劃站點(diǎn)結(jié)構(gòu)

7.任務(wù)小結(jié)與拓展任務(wù)1：前期策劃與內(nèi)容組織情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)1：前期策劃與內(nèi)容組織情境463任務(wù)解析與項(xiàng)目目標(biāo)分項(xiàng)任務(wù)1前期策劃與內(nèi)容組織分項(xiàng)任務(wù)2網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作分項(xiàng)任務(wù)3網(wǎng)站頁(yè)面的后期編輯分項(xiàng)任務(wù)4界面與代碼融合分項(xiàng)任務(wù)5發(fā)布與后期維護(hù)任務(wù)解析與項(xiàng)目目標(biāo)分項(xiàng)任務(wù)1前期策劃與內(nèi)容組織分項(xiàng)任務(wù)264網(wǎng)站的制作流程

需求分析風(fēng)格定位內(nèi)容組織效果圖設(shè)計(jì)網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)動(dòng)態(tài)編程或代碼融合發(fā)布測(cè)試（域名空間）網(wǎng)站維護(hù)網(wǎng)站的制作流程需求分析效果圖設(shè)計(jì)網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)65需求分析隴上江南旅游網(wǎng)站的功能示意圖旅游概況旅游動(dòng)態(tài)景點(diǎn)景區(qū)風(fēng)土人情地方風(fēng)味賓館飯店旅游路線需求分析隴上江南旅游網(wǎng)站的功能示意圖旅游概況66風(fēng)格定位

隴上江南旅游網(wǎng)站是宣傳類(lèi)網(wǎng)站，他的主要目的是展示甘肅隴南、天水的旅游資源，所以主色采用綠色為主色調(diào)，因?yàn)榫G色具有活力感覺(jué)，通過(guò)本站傳達(dá)個(gè)使用的用戶以輕松、愉快、舒適的感覺(jué)。隴上江南旅游網(wǎng)站風(fēng)格定位風(fēng)格定位隴上江南旅游網(wǎng)站是宣傳類(lèi)網(wǎng)站，他的主要目的是展示甘67規(guī)劃草圖

隴上江南旅游網(wǎng)站草圖設(shè)計(jì)規(guī)劃草圖隴上江南旅游網(wǎng)站草圖設(shè)計(jì)68站點(diǎn)結(jié)構(gòu)

不要將所有文件都存放在根目錄下按欄目?jī)?nèi)容建立子目錄在每個(gè)主目錄下都建立獨(dú)立的images目錄目錄的層次不要太深站點(diǎn)結(jié)構(gòu)注意事項(xiàng)站點(diǎn)結(jié)構(gòu)不要將所有文件都存放在根目錄下站點(diǎn)結(jié)構(gòu)注意事項(xiàng)69站點(diǎn)結(jié)構(gòu)

網(wǎng)站根目錄ImagesFlashcssAdminIndex.asp子文件夾站點(diǎn)結(jié)構(gòu)網(wǎng)站根目錄ImagesFlashcssAdmi701.任務(wù)解析與項(xiàng)目目標(biāo)

2.設(shè)計(jì)效果圖

3.效果圖切片導(dǎo)出網(wǎng)頁(yè)

4.任務(wù)小結(jié)與拓展任務(wù)2：網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作

情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)2：網(wǎng)站頁(yè)面效果圖的設(shè)計(jì)制作71任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)具有挑戰(zhàn)意味的新領(lǐng)域設(shè)計(jì)，在網(wǎng)頁(yè)時(shí)代，也許還應(yīng)該重復(fù)。不要熱衷于技術(shù)的花樣性，而忘記優(yōu)秀設(shè)計(jì)和清晰表達(dá)的重要性。任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)具有挑戰(zhàn)意味的新領(lǐng)域設(shè)計(jì)，在72任務(wù)解析與項(xiàng)目目標(biāo)效果圖制作的原則：先背景后前景先上后下先左后右。本效果圖設(shè)計(jì)中用到的主要知識(shí)：圖像的摳取輔助線的應(yīng)用圖層樣式與圖層混合模式的應(yīng)用蒙版的應(yīng)用任務(wù)解析與項(xiàng)目目標(biāo)效果圖制作的原則：本效果圖設(shè)計(jì)中用到的主要73效果圖制作步驟（1）制作網(wǎng)站LOGO,制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略,效果圖如下：（2）制作網(wǎng)站導(dǎo)航菜單，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，調(diào)整位置后效果圖如下：效果圖制作步驟（1）制作網(wǎng)站LOGO,制作過(guò)程上機(jī)操作，詳細(xì)74效果圖制作步驟（3）制作管理員登陸欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，效果如圖所示。（4）制作旅游地圖欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（3）制作管理員登陸欄目，制作過(guò)程上機(jī)操作，詳75效果圖制作步驟（5）制作隴南景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如下圖所示。（6）制作天水景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（5）制作隴南景點(diǎn)欄目，制作過(guò)程上機(jī)操作，詳細(xì)76效果圖制作步驟（7）制作圖片新聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。

（8）制作本站要聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（7）制作圖片新聞欄目，制作過(guò)程上機(jī)操作，詳細(xì)77效果圖制作步驟（9）制作旅游動(dòng)態(tài)欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。（10）制作旅游資訊欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。效果圖制作步驟（9）制作旅游動(dòng)態(tài)欄目，制作過(guò)程上機(jī)操作，詳細(xì)78效果圖制作步驟（11）制作風(fēng)土人情欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示。（12）制作旅游線路欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示效果圖制作步驟（11）制作風(fēng)土人情欄目，制作過(guò)程上機(jī)操作，詳79效果圖制作步驟（13）制作景點(diǎn)欣賞欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示（14）制作版權(quán)信息欄目，制作過(guò)程上機(jī)操作，詳細(xì)過(guò)程略，最終效果如圖所示效果圖制作步驟（13）制作景點(diǎn)欣賞欄目，制作過(guò)程上機(jī)操作，詳80效果圖的格式轉(zhuǎn)換網(wǎng)頁(yè)效果圖完成后，就需要進(jìn)行網(wǎng)頁(yè)切片，現(xiàn)在介紹兩種切片方式：方法一：選擇“切片工具”，在效果圖中任意裁切。任何現(xiàn)有切片自動(dòng)顯示在文檔窗口中。注意：首先希望大家將預(yù)期的切片設(shè)計(jì)好，然后進(jìn)行切片；為了切片準(zhǔn)確，減少誤差，在此建議大家盡量放大圖片進(jìn)行切片；所有切片都有編號(hào)，希望所有的編號(hào)能夠一目了然。方法二：從參考線創(chuàng)建切片，添加參考線，然后選擇“切片工具”，在該工具的屬性欄中點(diǎn)擊按鈕即可。注意：從參考線創(chuàng)建切片時(shí)，通常需要配合切片合并使用。效果圖的格式轉(zhuǎn)換網(wǎng)頁(yè)效果圖完成后，就需要進(jìn)行網(wǎng)頁(yè)切片，現(xiàn)在介81效果圖的切片效果圖的切片82效果圖的格式轉(zhuǎn)換執(zhí)行“文件”-“存儲(chǔ)為Web和設(shè)備所用格式”命令，在如圖所示的面板中點(diǎn)擊“存儲(chǔ)”按鈕。效果圖的格式轉(zhuǎn)換執(zhí)行“文件”-“存儲(chǔ)為Web和設(shè)備所用格式”83效果圖的格式轉(zhuǎn)換2）然后在彈出的“將優(yōu)化結(jié)果另存為”面板中，設(shè)置保存類(lèi)型為“HTML和圖像（*.html）”,slice設(shè)置為“所有切片”，將文件名命名為“index”即可，點(diǎn)擊“保存”按鈕，然后使用IE瀏覽器打開(kāi)index.html測(cè)試，效果如所示。效果圖的格式轉(zhuǎn)換2）然后在彈出的“將優(yōu)化結(jié)果另存為”面板中，84任務(wù)小結(jié)

完成本分項(xiàng)任務(wù)后，應(yīng)能夠掌握網(wǎng)站效果圖的設(shè)計(jì)方法，網(wǎng)頁(yè)切片注意的問(wèn)題。請(qǐng)進(jìn)行自我測(cè)試：你是否能夠進(jìn)行“隴上江南旅游網(wǎng)站”的效果圖的設(shè)計(jì)。任務(wù)拓展根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅游網(wǎng)站網(wǎng)站”項(xiàng)目的效果圖設(shè)計(jì)。任務(wù)小結(jié)任務(wù)拓展根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅851.任務(wù)解析與項(xiàng)目目標(biāo)

2.網(wǎng)頁(yè)后期編輯

3.網(wǎng)頁(yè)動(dòng)畫(huà)的插入

4.任務(wù)小結(jié)與拓展任務(wù)3：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)3：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)情境4：86任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)編輯主要是將使用切片導(dǎo)出的網(wǎng)頁(yè)進(jìn)行編輯使其規(guī)范易用，同時(shí)為了增加網(wǎng)頁(yè)效果，進(jìn)行簡(jiǎn)單的動(dòng)畫(huà)制作。所以在此解決兩個(gè)問(wèn)題：網(wǎng)頁(yè)編輯與動(dòng)畫(huà)設(shè)計(jì)。第一種方式是直接在切片效果圖中進(jìn)行編輯，進(jìn)行后期處理，這種方法適用于藝術(shù)界面型網(wǎng)頁(yè)，具體的方法是直接在網(wǎng)頁(yè)中設(shè)置超級(jí)鏈接，添加動(dòng)畫(huà)等效果，或者將某些切片刪除（或設(shè)置為背景），然后添加需要的文字。第二種方式是以導(dǎo)出的網(wǎng)頁(yè)為基礎(chǔ)，利用Dreamweaver軟件進(jìn)行合理的布局與優(yōu)化。這種方法通用性強(qiáng)，很多網(wǎng)頁(yè)都可采用。任務(wù)解析與項(xiàng)目目標(biāo)網(wǎng)頁(yè)編輯主要是將使用切片導(dǎo)出的網(wǎng)頁(yè)進(jìn)行編87任務(wù)解析與項(xiàng)目目標(biāo)a)網(wǎng)頁(yè)表格布局大表格整體布局b)網(wǎng)頁(yè)表格分散布局二者的最終呈現(xiàn)的網(wǎng)頁(yè)效果是一樣的，但是整體布局（圖a）會(huì)涉及到較多的表格嵌套，同時(shí)在下載網(wǎng)頁(yè)內(nèi)容時(shí)速度相對(duì)較慢，表格的分布布局（圖b）瀏覽的速度相對(duì)較快。所以通常大家在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)盡量采用表格的分布布局（圖b）。布局原則:自上而下，自左向右任務(wù)解析與項(xiàng)目目標(biāo)a)網(wǎng)頁(yè)表格布局大表格整體布局88后期網(wǎng)頁(yè)編輯

用Dreamweaver新建一個(gè)網(wǎng)頁(yè)文件并保存到導(dǎo)出的“動(dòng)態(tài)網(wǎng)頁(yè)”文件夾中，命名為“index.asp”。設(shè)置“頁(yè)面屬性”中“網(wǎng)頁(yè)標(biāo)題”為“歡迎來(lái)到隴上江南旅游網(wǎng)站！”，上、下、左、右邊距為0像素，設(shè)置如圖所示。頁(yè)面屬性設(shè)置后期網(wǎng)頁(yè)編輯用Dreamweaver新建一個(gè)網(wǎng)頁(yè)文件并保89后期網(wǎng)頁(yè)編輯

3）用Dreamweaver創(chuàng)建新CSS文件，并保存CSS文件到該文件夾中，命名為“css.css”。4）管理員登陸界面5）旅游地圖6）旅游景點(diǎn)7）網(wǎng)站鏈接后期網(wǎng)頁(yè)編輯3）用Dreamweaver創(chuàng)建新CSS文件908）網(wǎng)站新聞9）新聞動(dòng)態(tài)10）旅游咨詢11）風(fēng)土人情12）旅游線路8）網(wǎng)站新聞9）新聞動(dòng)態(tài)10）旅游咨詢11）風(fēng)土人情12）旅91動(dòng)畫(huà)制作

1).啟動(dòng)SWiSHmax，如圖所示。動(dòng)畫(huà)制作1).啟動(dòng)SWiSHmax，如圖所示。92動(dòng)畫(huà)制作

2）點(diǎn)擊“開(kāi)始新建一個(gè)空電影”按鈕，在場(chǎng)景中創(chuàng)建一個(gè)電影，在屬性中輸入動(dòng)畫(huà)的寬為940像素，高為153像素，具體參數(shù)如圖所示，在網(wǎng)站文件下創(chuàng)建“flash”文件夾并保存文件動(dòng)畫(huà)文件。動(dòng)畫(huà)的參數(shù)設(shè)置界面圖動(dòng)畫(huà)的參數(shù)設(shè)置界面動(dòng)畫(huà)制作2）點(diǎn)擊“開(kāi)始新建一個(gè)空電影”按鈕，在場(chǎng)景中創(chuàng)93動(dòng)畫(huà)制作

3）點(diǎn)擊工具欄中的按鈕（執(zhí)行“插入”→“文本”命令），然后在文本輸入?yún)^(qū)中輸入“領(lǐng)略隴南美景體驗(yàn)風(fēng)土人情”等字，調(diào)整文字的位置，如圖所示。動(dòng)畫(huà)制作3）點(diǎn)擊工具欄中的按鈕（執(zhí)行“插入”→“文本”94動(dòng)畫(huà)制作

4）執(zhí)行“文件”→“導(dǎo)出”→“swf”命令，即可彈出“導(dǎo)出為swf”對(duì)話框，選擇路徑，輸入文件名即可保存。動(dòng)畫(huà)制作4）執(zhí)行“文件”→“導(dǎo)出”→“swf”命令，即95動(dòng)畫(huà)制作

動(dòng)畫(huà)預(yù)覽效果方式二的制作與方式一的不同之處在于，可以不加載背景圖片，或者在方式一制作最后刪除圖片，當(dāng)然這個(gè)動(dòng)畫(huà)的大小適中就可以了，例如寬800pix，效果如圖所示。動(dòng)畫(huà)制作動(dòng)畫(huà)預(yù)覽效果方式二的制作與方式一的不同之處在96動(dòng)畫(huà)的使用

1.打開(kāi)上一節(jié)制作的網(wǎng)頁(yè)“index.asp”，然后刪除圖片“index_09.gif”。2.執(zhí)行“插入”-“媒體”-“flash”命令，然后選擇“flash”文件夾下的“xc.swf”動(dòng)畫(huà)，預(yù)覽動(dòng)畫(huà)如圖所示?！安迦搿惫ぞ邫谥械摹安迦朊襟w”按鈕動(dòng)畫(huà)的使用1.打開(kāi)上一節(jié)制作的網(wǎng)頁(yè)“index.asp97方式二制作的透明動(dòng)畫(huà)，主要是將圖片作為背景圖，然后將動(dòng)畫(huà)插入，設(shè)置動(dòng)畫(huà)參數(shù)如圖所示即可。動(dòng)畫(huà)的使用

方式二制作的透明動(dòng)畫(huà)，主要是將圖片作為背景圖，然后將動(dòng)畫(huà)插入98任務(wù)小結(jié)

根據(jù)本項(xiàng)目的進(jìn)展情況，大家進(jìn)行“隴上江南旅游網(wǎng)站”項(xiàng)目的網(wǎng)頁(yè)后期的編輯。完成本分項(xiàng)任務(wù)后，應(yīng)能夠掌握網(wǎng)頁(yè)的后期編輯方法，插入動(dòng)畫(huà)注意的問(wèn)題。請(qǐng)進(jìn)行自我測(cè)試：你是否能夠進(jìn)行“隴上江南旅游網(wǎng)站”的網(wǎng)頁(yè)后期編輯方法。任務(wù)小結(jié)991.任務(wù)解析與項(xiàng)目目標(biāo)

2.搜索網(wǎng)站管理平臺(tái)

3.網(wǎng)站管理平臺(tái)與靜態(tài)頁(yè)面的整合

4.IIS的安裝與配置

5.IIS的安裝與配置程序調(diào)試

6.后期完善

任務(wù)4：網(wǎng)站靜態(tài)頁(yè)面與動(dòng)態(tài)代碼的融合

情境4：隴上江南旅游網(wǎng)站建設(shè)

1.任務(wù)解析與項(xiàng)目目標(biāo)任務(wù)4：網(wǎng)站靜態(tài)頁(yè)面與動(dòng)態(tài)代碼的融100任務(wù)解析與項(xiàng)目目標(biāo)動(dòng)態(tài)網(wǎng)站從功能上簡(jiǎn)單可以分成前臺(tái)靜態(tài)模塊和后臺(tái)動(dòng)態(tài)模塊。前面制作的效果圖與網(wǎng)頁(yè)編輯以及動(dòng)畫(huà)制作簡(jiǎn)單可以理解為靜態(tài)模塊，而后臺(tái)模塊主要采用兩種方式進(jìn)行解決：方式一：先下載免費(fèi)的網(wǎng)站管理平臺(tái)，然后與前臺(tái)靜態(tài)頁(yè)面進(jìn)行整合，稱之為代碼融合。方式二：所有功能完全自主開(kāi)發(fā)，根據(jù)客戶的要求定制，逐一實(shí)現(xiàn)功能。以實(shí)兩種方式各有利弊，方式一使用與初期網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者，能夠滿足大多數(shù)通用網(wǎng)站，使用方法簡(jiǎn)單，但是不能隨心所欲的實(shí)現(xiàn)通用以外的功能：方式二完全開(kāi)發(fā)，對(duì)初學(xué)者要求較高，要求能夠編寫(xiě)程序，屬于網(wǎng)站開(kāi)發(fā)的高級(jí)階段，能夠隨心所欲實(shí)現(xiàn)各種功能。

任務(wù)解析與項(xiàng)目目標(biāo)101搜索網(wǎng)站管理平臺(tái)

1.凹丫丫網(wǎng)的網(wǎng)址：搜索網(wǎng)站管理平臺(tái)1.凹丫丫網(wǎng)的網(wǎng)址：http://www102搜索網(wǎng)站管理平臺(tái)

搜索網(wǎng)站管理平臺(tái)103網(wǎng)站后臺(tái)與靜態(tài)頁(yè)面的整合

1）首先創(chuàng)建文件夾