1、精選優(yōu)質(zhì)文檔-傾情為你奉上 實(shí)驗(yàn)（上機(jī)）一 個(gè)人簡歷頁面實(shí)驗(yàn)（上機(jī)）目的1、 掌握Dw中站點(diǎn)的建立方法；2、 掌握HTML結(jié)構(gòu)；3、 練習(xí)網(wǎng)頁title、關(guān)鍵字、描述的寫法；4、 練習(xí)網(wǎng)站目錄的搭建5、 練習(xí)div標(biāo)簽、標(biāo)題標(biāo)簽、p標(biāo)簽、超鏈接的用法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamweaver CS5+預(yù)備知識1、HTML結(jié)構(gòu)；2、網(wǎng)頁title、關(guān)鍵字、描述的作用；3、常用標(biāo)簽：div、h1、p、a的作用實(shí)驗(yàn)（上機(jī)）內(nèi)容使用DW創(chuàng)建站點(diǎn)，并建立好站點(diǎn)目錄和相關(guān)站點(diǎn)文件；在HTML中完成title、關(guān)鍵字、描述；完成個(gè)人簡歷頁面，正確使用各個(gè)標(biāo)簽。實(shí)驗(yàn)（上機(jī)）步驟1、創(chuàng)建站點(diǎn)：

2、（示例）啟動Dreamweaver，執(zhí)行“站點(diǎn)>管理站點(diǎn)>新建>站點(diǎn)”菜單命令在彈出的如圖所示的站點(diǎn)定義對話框中設(shè)置新建站點(diǎn)的參數(shù)：站點(diǎn)名稱、本地根文件夾。根文件夾，放在自己的指定目錄中。 2、搭建好站點(diǎn)目錄 目錄做到規(guī)范，文件要放到對應(yīng)的文件夾中。3、連接css文件和HTML文件。在DW中，拖動css文件到html的head標(biāo)簽之間。4、在頁面中添加個(gè)人簡歷的信息。包括，個(gè)人信息，自我推薦等。如：考核內(nèi)容上交各個(gè)同學(xué)的個(gè)人簡歷頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）二 PS蒙板練習(xí)-人臉合成實(shí)驗(yàn)（上機(jī)）目的1、 掌握PS中蒙板的用法；2、 掌握PS中圖層的基

3、本操作；實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Photoshops CS5+預(yù)備知識1、PS畫筆工具；2、PS調(diào)色板； 實(shí)驗(yàn)（上機(jī)）內(nèi)容使用PS圖層和蒙板，完成兩個(gè)任務(wù)的換臉。實(shí)驗(yàn)（上機(jī)）步驟1、使用ps打開素材圖12、新建一層代開素材圖23、給素材2，添加蒙板4、利用黑白畫筆，完成人臉的涂抹實(shí)現(xiàn)人物的換臉考核內(nèi)容上交各個(gè)同學(xué)的作品。要求：細(xì)節(jié)處理自然，不粗糙。實(shí)驗(yàn)（上機(jī)）三 利用盒子模型，完成人物介紹頁面實(shí)驗(yàn)（上機(jī)）目的1、 掌握CSS盒子模型的屬性；2、 掌握CSS中顏色和投影、圓角等的使用；實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、CSS盒子模型

4、；2、CSS背景色設(shè)定；3、CSS圓角、投影設(shè)定 實(shí)驗(yàn)（上機(jī)）內(nèi)容要求按照“人物介紹.psd”效果，完成頁面。頁面板塊要居中，寬度為620px，高為750px。其他內(nèi)容詳見psd。提示：1、圖片要有圓角，且做成圓形，還要有投影效果2、用戶名“櫻桃小丸子”有文本投影效果，文字大小30px3、個(gè)人介紹文字，參考顏色：#a1ffa1, 大小16px實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面框架，頁面板塊要居中，寬度為620px，高為750px。3、依次按照效果圖要求添加頁面結(jié)構(gòu)?？己藘?nèi)容上交各個(gè)同學(xué)的作業(yè)。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）四 登錄框美化實(shí)驗(yàn)（上

5、機(jī)）目的1、掌握HTML中表單的使用方法；2、掌握表單元素文本框、密碼框的用法；3、掌握表單元素按鈕的用法；實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、form標(biāo)簽的使用；2、input標(biāo)簽的使用；3、盒子模型 實(shí)驗(yàn)（上機(jī)）內(nèi)容要求按照“表單.psd”效果，完成登錄頁面 。提示：1、文本框、密碼框、按鈕要有圓角2、文本框、密碼框聚焦要改變樣式3、文本框、密碼框要有輸入內(nèi)容提示實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面框架，頁面板塊要居中，寬度為800px，高度自動拓展3、依次按照效果圖要求添加頁面結(jié)構(gòu)?？己藘?nèi)容上交各個(gè)同學(xué)的登錄框頁

6、面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）五 導(dǎo)航制作實(shí)驗(yàn)（上機(jī)）目的1、掌握HTML中無序列表ul標(biāo)簽的使用方法；2、掌握浮動用法；3、掌握超鏈接及其鼠標(biāo)效果用法；實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、無序列表ul標(biāo)簽的基本結(jié)構(gòu)；2、浮動與清除浮動；3、超鏈接及其相關(guān)樣式 實(shí)驗(yàn)（上機(jī)）內(nèi)容要求按照“導(dǎo)航.psd”效果，完成導(dǎo)航頁面 。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度為800px，高度根據(jù)效果圖設(shè)定3、依次按照效果圖要求添加頁面結(jié)構(gòu)。完成相關(guān)樣式：考核內(nèi)容上交各個(gè)同學(xué)的導(dǎo)航頁面

7、。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）六 圖片列表制作實(shí)驗(yàn)（上機(jī)）目的1、掌握HTML中無序列表ul標(biāo)簽的使用方法；2、掌握浮動用法；3、掌握超鏈接及其鼠標(biāo)效果用法；4、掌握絕對與相對定位的用法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、無序列表ul標(biāo)簽的基本結(jié)構(gòu)；2、浮動與清除浮動；3、超鏈接及其相關(guān)樣式 4、掌握絕對與相對定位的使用以及它們各自的作用與區(qū)別。 實(shí)驗(yàn)（上機(jī)）內(nèi)容要求按照“圖片列表.psd”效果，完成導(dǎo)航頁面 。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定

8、3、依次按照效果圖要求添加頁面結(jié)構(gòu)。完成相關(guān)樣式：考核內(nèi)容上交各個(gè)同學(xué)的圖片列表頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）七 模擬購物車實(shí)驗(yàn)（上機(jī)）目的1、掌握J(rèn)S中事件與函數(shù)的用法2、掌握獲取頁面標(biāo)簽的方式3、掌握獲取、更改標(biāo)簽內(nèi)容的方式實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、JS中的事件；2、函數(shù)的使用；3、通過ID獲取頁面標(biāo)簽 4、獲取更改頁面內(nèi)容。 實(shí)驗(yàn)（上機(jī)）內(nèi)容要求按照淘寶“購物車”效果，完成購物頁面，點(diǎn)擊按鈕能夠增加、刪除數(shù)量且能更改相應(yīng)的總價(jià) 。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面

9、板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼：考核內(nèi)容上交各個(gè)同學(xué)的購物車頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）八 時(shí)間走動效果實(shí)驗(yàn)（上機(jī)）目的1、掌握時(shí)間對象的創(chuàng)建2、時(shí)間的獲?。耗暝氯?，時(shí)分秒3、掌握計(jì)時(shí)器：setInterval的使用實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、時(shí)間的創(chuàng)建；new Date（）2、時(shí)間的獲?。粫r(shí)間對象的常用方法3、時(shí)間的走動：計(jì)時(shí)器的使用實(shí)驗(yàn)（上機(jī)）內(nèi)容 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高

10、度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。<h2>顯示時(shí)間：</h2> <div id="nr"> <span id="showtime">今天：2009年7月19 星期天</span> </div> 完成相關(guān)JS代碼：考核內(nèi)容上交各個(gè)同學(xué)的時(shí)間頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）九 時(shí)鐘效果實(shí)驗(yàn)（上機(jī)）目的1、掌握時(shí)間對象的創(chuàng)建2、時(shí)間的獲?。耗暝氯?，時(shí)分秒3、掌握計(jì)時(shí)器：setInterval的使用4、CSS3旋轉(zhuǎn)樣式實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上

11、機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、時(shí)間的創(chuàng)建；new Date（）2、時(shí)間的獲??；時(shí)間對象的常用方法3、時(shí)間的走動：計(jì)時(shí)器的使用4、CSS3旋轉(zhuǎn)樣式實(shí)驗(yàn)（上機(jī)）內(nèi)容 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼：考核內(nèi)容上交各個(gè)同學(xué)的時(shí)間頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十 利用JSON給表單元素傳值實(shí)驗(yàn)（上機(jī)）目的1、掌握J(rèn)SON的數(shù)據(jù)格式2、掌握J(rèn)SON的遍歷方式3、掌握表單元素的獲取方式實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境

12、Dreamwearver CS5+預(yù)備知識1、JSON的概念；2、JSON的遍歷循環(huán)：for-in；3、通過form.elements獲取表單元素 4、給表單元素賦值的方法實(shí)驗(yàn)（上機(jī)）內(nèi)容 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼：var info = document.forms“info”;var json = uname:”John”,school:”MySchool”,myself:”這家伙很懶，什么都沒有”;for( var key in info.elem

13、ents) info.elementskey=jsonkey;考核內(nèi)容上交各個(gè)同學(xué)的表單頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十一 圖片切換效果（1）實(shí)驗(yàn)（上機(jī)）目的1、掌握數(shù)組的概念和遍歷2、掌握getElementsByTagName的用法3、掌握給標(biāo)簽動態(tài)添加事件的方法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、數(shù)組概念；2、數(shù)組的遍歷：for；3、標(biāo)簽事件的添加方式 實(shí)驗(yàn)（上機(jī)）內(nèi)容點(diǎn)擊縮略圖，上面的大圖更換地址。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定

14、3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼： 考核內(nèi)容上交各個(gè)同學(xué)的頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十二 圖片切換效果（2）實(shí)驗(yàn)（上機(jī)）目的1、掌握數(shù)組的概念和遍歷2、掌握getElementsByTagName的用法3、掌握給標(biāo)簽動態(tài)添加事件的方法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、數(shù)組概念；2、數(shù)組的遍歷：for；3、標(biāo)簽事件的添加方式 實(shí)驗(yàn)（上機(jī)）內(nèi)容點(diǎn)擊小點(diǎn)，上面的大圖更換地址。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按

15、照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼： 考核內(nèi)容上交各個(gè)同學(xué)的頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十三 登錄頁面實(shí)驗(yàn)（上機(jī)）目的1、掌握正則表達(dá)式的基本用法2、掌握正則表達(dá)式常用規(guī)則的使用3、掌握正則表達(dá)式對字符串的檢測方法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、正則表達(dá)式的概念；2、正則表達(dá)式的常用規(guī)則；3、正則表達(dá)式的test方法的使用 實(shí)驗(yàn)（上機(jī)）內(nèi)容按照要求對用戶輸入的內(nèi)容進(jìn)行檢測，判斷是否正確 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依

16、次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼： 考核內(nèi)容上交各個(gè)同學(xué)的頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十四 注冊頁面實(shí)驗(yàn)（上機(jī)）目的1、掌握正則表達(dá)式的基本用法2、掌握正則表達(dá)式常用規(guī)則的使用3、掌握正則表達(dá)式對字符串的檢測方法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、正則表達(dá)式的概念；2、正則表達(dá)式的常用規(guī)則；3、正則表達(dá)式的test方法的使用 實(shí)驗(yàn)（上機(jī)）內(nèi)容按照要求對用戶輸入的內(nèi)容進(jìn)行檢測，判斷是否正確 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3

17、、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼： 考核內(nèi)容上交各個(gè)同學(xué)的頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十五 動態(tài)生成廣告并能刪除實(shí)驗(yàn)（上機(jī)）目的1、DOM創(chuàng)建標(biāo)簽的方法2、DOM刪除標(biāo)簽的方法3、DOM添加內(nèi)容的方法實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、DOM創(chuàng)建標(biāo)簽：document.createElement()；2、DOM刪除標(biāo)簽的方法：目標(biāo).parentNode.removeChild(目標(biāo))；3、DOM添加內(nèi)容的方法：父標(biāo)簽.appendChild( 目標(biāo) ); 實(shí)驗(yàn)（上機(jī)）內(nèi)容用JS動態(tài)生成廣告，點(diǎn)擊“刪

18、除”能刪除它。 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼： 考核內(nèi)容上交各個(gè)同學(xué)的頁面。要求：頁面代碼工整、目錄規(guī)范、結(jié)構(gòu)清晰實(shí)驗(yàn)（上機(jī)）十六 進(jìn)度條實(shí)驗(yàn)（上機(jī)）目的1、DOM獲取標(biāo)簽屬性的方法2、DOM控制標(biāo)簽樣式的方法 實(shí)驗(yàn)（上機(jī)）課時(shí)2學(xué)時(shí)實(shí)驗(yàn)（上機(jī)）環(huán)境Dreamwearver CS5+預(yù)備知識1、DOM獲取標(biāo)簽屬性：ID.getAttribute(“xxxx”)；2、DOM更改樣式的方法：ID.style.display=”xxxx ”； 實(shí)驗(yàn)（上機(jī)）內(nèi)容 實(shí)驗(yàn)（上機(jī)）步驟1、建立站點(diǎn)，目錄規(guī)范，文件關(guān)聯(lián)正確2、創(chuàng)建頁面導(dǎo)航，頁面板塊要居中，寬度 ，高度根據(jù)效果圖設(shè)定 3、依次按照效果圖要求添加頁面結(jié)構(gòu)。 完成相關(guān)JS代碼：var big =