網(wǎng)站建設(shè)與網(wǎng)制作實(shí)訓(xùn)指導(dǎo)書講解

1、網(wǎng)站建設(shè)與網(wǎng)頁制作實(shí)訓(xùn)指導(dǎo)書計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)專業(yè)適用孫鈾編寫大連職業(yè)技術(shù)學(xué)院信息技術(shù)系計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)教研室目錄實(shí)訓(xùn)一 利用Dreamweaver的表格功能布局網(wǎng)頁 2實(shí)訓(xùn)二CSS 樣式表（4 學(xué)時） 3實(shí)訓(xùn)三利用Dreamweaver的行為功能制作動畫 4實(shí)訓(xùn)四利用Dreamweaver的站點(diǎn)功能設(shè)置站點(diǎn)并上 6實(shí)訓(xùn)五安裝設(shè)置PW調(diào)試個人站點(diǎn)（2學(xué)時） 7實(shí)訓(xùn)六 利用ODBC1接ACCES斂據(jù)庫并設(shè)置數(shù)據(jù)源名.8實(shí)訓(xùn)七以留言簿為例調(diào)試（4 學(xué)時） 9實(shí)訓(xùn)八使用 Flash 的編輯工具及輔助工具（2 學(xué)時） . 10實(shí)訓(xùn)九用 flash 實(shí)現(xiàn)基本動畫、多層動畫制作 11實(shí)訓(xùn)十使用 flash 測試

2、作品（2 學(xué)時 ） 13實(shí)訓(xùn)十一制作“漫天飛雪”動畫 （ 3 學(xué)時） 1413實(shí)訓(xùn)一利用 Dreamweaver 的表格功能布局網(wǎng)頁4 學(xué)時)、實(shí)訓(xùn)條件(機(jī)房/Dreamweaver)二、實(shí)訓(xùn)目的掌握表格在網(wǎng)頁布局中的特點(diǎn)及應(yīng)用；掌握如何通過表格來布局一個完整的界面。三、實(shí)訓(xùn)內(nèi)容通過表格構(gòu)建完整的頁面四、實(shí)訓(xùn)步驟1 創(chuàng)建網(wǎng)頁的“頭部分”。1) 插入一個1行2 列，寬為760 象素，邊框及邊距均為0的表格。2) 插入一個1行1 列，寬為760 象素，邊框及邊距均為0的表格。3) 插入一個1行2 列，寬為760 象素，邊框及邊距均為0的表格。4) 分別進(jìn)行簡單設(shè)置。2 創(chuàng)建網(wǎng)頁的“主體部分”。1)

3、 插入一個1 行 3 列， 寬為 760 象素， 邊框及邊距均為0 的表格，這個表格將放置頁面的主體內(nèi)容。2) 在左邊單元格中插入一個12 行 1 列，寬為90%的表格。 (表格的嵌套)3) 在中間單元格插入一個4 行 1 列，寬為95%的表格。4) 在右邊單元格插入一個7 行 1 列，寬為90%的表格。5) 分別進(jìn)行簡單設(shè)置。3 創(chuàng)建網(wǎng)頁的“尾部分”。1) 插入一個2 行 2 列， 寬為 760 象素， 邊框及邊距均為0 的表格。2) 進(jìn)行簡單設(shè)置。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要求；是否達(dá)到布局美觀的效果。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)二

4、CSS 樣式表（4 學(xué)時）、實(shí)訓(xùn)條件（機(jī)房/Dreamweaver）二、實(shí)訓(xùn)目的掌握在Dreamweaver MX定義CSS的方法和技巧。使你的網(wǎng)頁真正“美” 起來。三、實(shí)訓(xùn)內(nèi)容1. 區(qū)塊2. 盒子3. 邊框4. 列表四、實(shí)訓(xùn)步驟1. 區(qū)塊樣式一：設(shè)置“字母間距”為 1 象素。設(shè)置“文字縮進(jìn)”為 2 字體高。樣式二：設(shè)置“文本對齊”為“兩端對齊”。2. 盒子樣式一：設(shè)置“填充” “上”為 6 象素， “全部相同”。應(yīng)用到表格。樣式二：設(shè)置“浮動”為“右對齊”、 “填充”為 6 象素。應(yīng)用到圖片。3. 邊框樣式一： 設(shè)置 “樣式” 為 “實(shí)線”， “寬度”為 1 象素， “顏色” 為 #6666

5、66。樣式二：設(shè)置“樣式”為“凸出”， “寬度”為“粗”， “顏色”分別為#339900， #336600， #333300， #339900。樣式三：設(shè)置“下”為“雙線”，其他設(shè)置為“無”， “寬度”為 1 象素，“顏色”為 #ff6600.4. 列表樣式一：設(shè)置“類型”為“圓圈”， “位置”為“內(nèi)”。樣式二：設(shè)置“類型”為“方塊”， “位置”為“外”。樣式三：設(shè)置“類型”為空，然后點(diǎn)擊“項(xiàng)目符號圖像”一欄后面的“瀏覽” 按鈕， 選擇素材中本例對應(yīng)的images 目錄下的圖片list.gif“位置”一欄設(shè)置為“外”。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要

6、求；是否達(dá)到熟練應(yīng)用CSSo以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)三利用 Dreamweaver 的行為功能制作動畫( 4 學(xué)時)、實(shí)訓(xùn)條件(有音箱機(jī)房/Dreamweaver)二、實(shí)訓(xùn)目的掌握在Dreamweaver MX定義行為的方法和技巧。使你的網(wǎng)頁真正“動” 起來。、實(shí)訓(xùn)內(nèi)容1. 變色按鈕的制作。2. 如何在頁面中播放聲音。3. 控制時間軸播放。4. 層拖拽效果。四、實(shí)訓(xùn)步驟1. 變色按鈕的制作。1) 插入一個4 行 1 列的表格，寬為150 象素，邊框?yàn)? 象素。2) 在單元格中輸入文本，設(shè)置鏈接。3) 修改源代碼，命名標(biāo)簽DIV。4) 設(shè)置行為屬性。2如何在網(wǎng)頁中播放聲音。1)選中

7、body選項(xiàng)，在行為菜單中選擇“播放聲音”。2) 選擇素材聲音文件，設(shè)置觸發(fā)條件onload.3) 設(shè)置播放屬性。3控制時間軸播放。1) 在網(wǎng)頁中插入一層，將圖片放到層中。2) 設(shè)置“層”的“溢出”屬性為 hidden ，將層拖放到時間軸面板中。3) 設(shè)置時間軸Timeline1 。4) 復(fù)制時間軸Timeline1 ，設(shè)置時間軸Timeline2 。5) 在頁面中再插入兩層，在層中插入文本，用來通過行為控制時間軸的播放。6) 設(shè)置行為。4層拖拽效果。1) 在網(wǎng)頁中插入四個層，然后在層中插入對應(yīng)的 “購物車”圖片。2) 分別選中“物品”圖片，進(jìn)行行為屬性的設(shè)置。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例

8、子，通過學(xué)生對本例做的效果 如：是否嚴(yán)格按照要求；是否達(dá)到完全理解行為的工作原理和過程等。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)四利用 Dreamweaver 的站點(diǎn)功能設(shè)置站點(diǎn)并上傳站點(diǎn)至INTERNET （ 4學(xué)時）、實(shí)訓(xùn)條件（能連 INTERNET%房/Dreamweaver,CuteFTP,WS_FTP PRO、實(shí)訓(xùn)目的掌握利用Dreamweaver MXffi其他應(yīng)用軟件設(shè)置站點(diǎn)并上傳站點(diǎn)的功能三、實(shí)訓(xùn)內(nèi)容1. Dreamweaver MX勺站點(diǎn)上傳功能應(yīng)用。2其他應(yīng)用軟件的站點(diǎn)上傳功能應(yīng)用。四、實(shí)訓(xùn)步驟1 申請“網(wǎng)頁空間”（也可在課下申請好）2 設(shè)置Dreamweaver的站點(diǎn)功能

9、。3 利用其他應(yīng)用軟件的上傳站點(diǎn)。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果 如：是否嚴(yán)格按照要求；是否達(dá)到能夠獨(dú)立上傳站點(diǎn)；能否通過互聯(lián)網(wǎng)看到上傳的站點(diǎn)等。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)五 安裝設(shè)置PW調(diào)試個人站點(diǎn)（2學(xué)時）、實(shí)訓(xùn)條件（機(jī)房/Windows98系統(tǒng)，附帶 Windows98光盤）、實(shí)訓(xùn)目的掌握簡單的WWW件（PWS的安裝、設(shè)置；理解 WWW點(diǎn)的概念、實(shí)訓(xùn)內(nèi)容1安裝PWS。2設(shè)置PWS。四、實(shí)訓(xùn)步驟1 .安裝PWS1）在windows98光盤下找到add_ons目錄打開。2）找到pws目錄打開。3） 安裝可執(zhí)行文件。2 .設(shè)置PWS1） 測試PW*否安裝

10、成功。2） 設(shè)置站點(diǎn)默認(rèn)主頁。3） 設(shè)置可瀏覽目錄。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要求；是否能夠獨(dú)立安裝；是否能夠根據(jù)要求獨(dú)立設(shè)置WW服務(wù)器。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)六 利用ODBC1接ACCES敬據(jù)庫并設(shè)置數(shù)據(jù)源名,訪問數(shù)據(jù)庫等（2 學(xué)時）、實(shí)訓(xùn)條件（機(jī)房 /IIS 或PWS）二、實(shí)訓(xùn)目的掌握利用ODBC1接ACCESS庫，訪問數(shù)據(jù)庫的方法；掌握通過 ODBC 設(shè)置數(shù)據(jù)源名并在ASP文件中訪問數(shù)據(jù)庫的方法。三、實(shí)訓(xùn)內(nèi)容1 .設(shè)置 ODBC!接 ACCESSOR2 .在ASP文件中加入適當(dāng)代碼訪問庫，并輸出表內(nèi)容。3 .通過ODB段置數(shù)

11、據(jù)源名并在ASP文件中訪問數(shù)據(jù)庫。四、實(shí)訓(xùn)步驟1 . 設(shè)置ODBC!接ACCESS據(jù)庫。1）啟動“控制面板”的“ ODBC,出現(xiàn)ODB嗷據(jù)源管理對話框。2）選取“ ODBG區(qū)動程序”選項(xiàng)卡。3）選擇“ACCES數(shù)據(jù)庫驅(qū)動”。2 .在ASPi件中加入適當(dāng)代碼訪問庫，并輸出表內(nèi)容。1）建立一個Connection對象：conn （名字任意取）。2）調(diào)用 conn.open 方法打開 AdvWorks.mdb®據(jù)庫。3）調(diào)用conn.Execute函數(shù)建立Recordset對象：rs （名字任意 ?。?。4） 將 Recordset 對象的內(nèi)容輸出到瀏覽器。3 .通過ODBCJ置數(shù)據(jù)源名并

12、在ASP文件中訪問數(shù)據(jù)庫。1）啟動“控制面板”的“ ODBC,出現(xiàn)ODB嗷據(jù)源管理對話框， 選取“ ODBG區(qū)動程序”選項(xiàng)卡。2） 出現(xiàn)建立新數(shù)據(jù)源對話框，選取其中的“Microsoft AccessDriver（*.mdb） ”。3） 出現(xiàn) ODBC Microsoft Access 設(shè)置對話框，設(shè)置數(shù)據(jù)源名和 描述。4） 出現(xiàn)選取數(shù)據(jù)庫對話框，選取要訪問的數(shù)據(jù)庫。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要求；是否達(dá)到能夠獨(dú)立設(shè)置ODBC!接網(wǎng)絡(luò)數(shù)據(jù)庫；是否能夠調(diào)試代碼輸出數(shù)據(jù)表內(nèi)容。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)七4 學(xué)時)、實(shí)訓(xùn)條件(機(jī)房 /II

13、S 或PWS)二、實(shí)訓(xùn)目的留言簿是網(wǎng)頁中非常常見的功能，通過 ASP可以訪問WEBC據(jù)庫，通過本 例可以幫助學(xué)生建立數(shù)據(jù)庫多表連接使用的概念以及增強(qiáng)訪問數(shù)據(jù)庫輸出表內(nèi)容的能力，提高學(xué)生建立WEEK用程序的多方面能力。、實(shí)訓(xùn)內(nèi)容 調(diào)試留言簿四、實(shí)訓(xùn)步驟1 .“集思廣益VB討論組”的功能1) 首先瀏覽討論組的主網(wǎng)頁2) 假設(shè)你選取了某一討論主題，接著會進(jìn)入Detail.asp 網(wǎng)頁3) 而如果選擇的是 “發(fā)起討論主題”， 則進(jìn)入 TitleFrm.asp 的討論主題輸入表單，在這個表單，在這個表單所輸入的討論主題將由TitleNew.asp 進(jìn)行處理。4) 如果在 Detail.asp 的“參與討

14、論”表單中輸入討論意見，則輸入的討論意見將由DetNew.asp來處理。2 .News.mdbK據(jù)庫的設(shè)計(jì)1) 數(shù)據(jù)表關(guān)系的設(shè)置。2) 關(guān)聯(lián)更新相關(guān)字段。3) 關(guān)聯(lián)刪除相關(guān)記錄。4) 其他重要的設(shè)置。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要求；是否能夠獨(dú)立調(diào)試本例；是否真正理解本例 的執(zhí)行情況；是否能夠說出某段代碼含義。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)八使用 Flash 的編輯工具及輔助工具(2 學(xué)時)、實(shí)訓(xùn)條件(機(jī)房 /flash )、實(shí)訓(xùn)目的熟練掌握flash 的編輯工具及輔助工具的使用。、實(shí)訓(xùn)內(nèi)容1編輯工具2修改圖形的描繪和填充效果。四、實(shí)訓(xùn)步驟

15、1編輯工具1) 使用像皮擦工具。2) 使用部分選取工具調(diào)整圖形形狀。3) 使用箭頭工具調(diào)整圖形形狀。4) 平滑和拉直線條。5) 優(yōu)化曲線。6) 將邊線轉(zhuǎn)換為填充區(qū)。7) 擴(kuò)展填充區(qū)域。8) 柔化填充邊緣。9) 使用捕捉功能。2修改圖形的描繪和填充效果。1) 使用墨水瓶工具修改圖形的描繪效果。2) 使用顏料桶工具修改圖形的填充效果。3) 使用填充變形工具編輯漸變色填充與位圖填充圖形。4) 使用滴管工具復(fù)制邊緣或填充樣式。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)學(xué)生對本節(jié)的掌握情況。如：是否嚴(yán)格按照要求；是否能夠熟練掌握flash 編輯工具及輔助工具的使用等。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)九用 fl

16、ash 實(shí)現(xiàn)基本動畫、多層動畫制作（ 8 學(xué)時）一、實(shí)訓(xùn)條件（機(jī)房 /flash ）二、實(shí)訓(xùn)目的掌握使用flash 實(shí)現(xiàn)基本動畫、多層動畫制作方法。三、實(shí)訓(xùn)內(nèi)容1按路徑運(yùn)動。2圖像的翻轉(zhuǎn)。3文字變大。四、實(shí)訓(xùn)步驟1按路徑運(yùn)動。1） 按 Ctrl+N 鍵新建一個Flash 影片。2） 在“工具”面板選中“文本工具”，按 Ctrl+F3 鍵，設(shè)置字體、大小、顏色，在舞臺適當(dāng)位置輸入A。3） 選中第一單擊鼠標(biāo)右鍵，單擊“創(chuàng)建補(bǔ)問動畫”命令，選 中第30,按F6鍵，創(chuàng)建關(guān)鍵4） 選中第一層，單擊鼠標(biāo)右鍵，選擇“添加引導(dǎo)層”命令，添加運(yùn)動引導(dǎo)層。5）選擇第一在“工具”面板選中“鉛筆工具”，在舞臺上畫出物

17、體運(yùn)動的路徑。6）選擇第一層的第30將此M的A字符移到路徑的結(jié)尾處，同樣選擇第一M的A字符，將其移到路徑的開始處。7） 按 Ctrl+Enter 鍵生成測試影片。2圖像的翻轉(zhuǎn)。1） 按 Ctrl+N 鍵新建一個Flash影片。2）單擊“文件”一一“導(dǎo)入”，導(dǎo)入一個BMP®形文件。3） 按 Ctrl+L 鍵在庫中將鋼才的圖片拖到主場景中。4）選擇第一單擊鼠標(biāo)右鍵，創(chuàng)建運(yùn)動，選擇第 30 按F6 鍵。5）選擇第30 M的圖片單擊鼠標(biāo)右鍵，選擇“縮放”命令，將其水平變形，并超過圖像的中線。6） 按 Ctrl+Enter 鍵生成測試影片。3文字變大。按 Ctrl+N 鍵新建一個Flash 影

18、片，按Ctrl+J 鍵，將影片寬度設(shè)為 550，高度設(shè)為200，選擇背景顏色。按 Ctrl+F8 鍵，將其屬性設(shè)為“按鈕”。在Layerl中選中“彈起” 在“工具”面板，單擊工具面板上的“文本工具”，在舞臺適當(dāng)位置輸入“歡迎訪問”四個字，按 Ctrl+F3 鍵，設(shè)置字體的顏色和大小。選中“指針經(jīng)過"按 F6鍵，在舞臺中選中“歡迎訪問”后單擊鼠標(biāo)右鍵，選擇“縮放”，調(diào)整圖片的大小，將圖片放大。單擊Scenel,回到主場景中，按Ctrl+L鍵，選中剛才制作的按 鈕，將其拖到舞臺合適的位置。按 Ctrl+Enter 鍵進(jìn)行測試。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：

19、是否嚴(yán)格按照要求；是否根據(jù)提示完整達(dá)到最終效果等。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)十使用 flash 測試作品（2 學(xué)時 ）一、實(shí)訓(xùn)條件（機(jī)房 /flash player ）二、實(shí)訓(xùn)目的掌握使用特定版本的Flash Player 測試影片的方法，掌握排除腳本故障的技巧。三、實(shí)訓(xùn)內(nèi)容1優(yōu)化影片。2測試影片下載性能。四、實(shí)訓(xùn)步驟1優(yōu)化影片可采用以下措施：1） 盡量使用元件。2）最好制作過渡動畫，而不要制作關(guān)鍵M動畫。3）限制每個關(guān)鍵M中的可變區(qū)域。4） 避免動畫位圖元素，而應(yīng)將位圖元素作為背景或靜態(tài)元素。5）對于聲音文件，盡可能使用 MP駢尺度較小的格式。2影片下載性能。打開要測試的影片，選

20、擇“控制”| “測試影片”命令。選擇“調(diào)試”|56（ 4.7KB/s） 、 28.8（2.3KB/s） 或 14.4（1.2KB/s） 命令，選擇“查看”| “帶寬設(shè)置”命令，來顯示下載性能的圖表。五、實(shí)訓(xùn)考核方法過程考核：根據(jù)例子，通過學(xué)生對本例做的效果如：是否嚴(yán)格按照要求；是否掌握排除腳本故障的技巧等。以及舉一反三，融會貫通等給出成績。實(shí)訓(xùn)十一制作“漫天飛雪”動畫 （ 3 學(xué)時）、實(shí)訓(xùn)條件（機(jī)房 /flash ）、實(shí)訓(xùn)目的掌握通過物體的運(yùn)動，Alpha 值的變化實(shí)現(xiàn)雨景的模擬效果。、實(shí)訓(xùn)內(nèi)容制作“漫天飛雪”動畫 四、實(shí)訓(xùn)步驟1） 按 Ctrl+N 鍵新建一個Flash 影片，按Ctrl+J 鍵，設(shè)置影片屬性。單擊“確定”。2） 按 Ctrl+F8 鍵，將屬性設(shè)為“影片剪輯”。3） 在“影片剪輯”Layer1 中，在“