網(wǎng)頁制作上機(jī)練習(xí)

1、實驗一 使用Dreamweaver創(chuàng)建簡單頁面一、實驗?zāi)康?、掌握HTML的基本結(jié)構(gòu)2、熟悉Dreamweaver的工作環(huán)境3、掌握不同的視圖下的操作及面板的使用4、會使用Dreamweaver創(chuàng)建、管理站點二、實驗內(nèi)容1、在Dreamweaver中創(chuàng)建一個站點（1）新建一個以自己學(xué)號或姓名拼音命名的文件夾（2）在Dreamweaver中新建站點，把站點設(shè)為新建的文件夾（3）觀察創(chuàng)建站點前后的區(qū)別2、利用所學(xué)知識創(chuàng)建一個個人信息頁面（1）新建一個HTML頁面，添加標(biāo)題為“個人簡介”（2）利用文字、水平線、特殊符號、背景顏色、背景圖片等制作簡單的個人信息頁面3、制作一個中轉(zhuǎn)頁面（1）制作一個簡單

2、頁面，添加標(biāo)題和簡單內(nèi)容（2）通過設(shè)置標(biāo)記，實現(xiàn)10秒后自動跳轉(zhuǎn)到個人信息頁面實驗二 超級鏈接與文本修飾一、實驗?zāi)康?、掌握超級鏈接的不同創(chuàng)建方法2、了解錨點鏈接的作用，并會創(chuàng)建錨點鏈接3、熟悉文本的不同修飾方法二、實驗內(nèi)容1、創(chuàng)建“大話西游”頁面（1）字體與背景顏色等自行設(shè)計，要求搭配合理（2）第一行右上角有“聯(lián)系我們”，點擊鏈接到dahuaxiyou（3）第二行為標(biāo)題，居中顯示（4）內(nèi)容要求不使用空格或換行等，居中顯示如下：曾經(jīng)有一份真誠的愛情放在我面前，我沒有珍惜，等我失去的時候我才后悔莫及，人世間總痛苦的事莫過于此。（5）下面有“下載”兩字，創(chuàng)建一個下載鏈接2、創(chuàng)建“我的影院”主頁面（

3、1）字體與背景顏色等自行設(shè)計，要求搭配合理（2）第一行為標(biāo)題（3）第二行為影院分類，例如：歐美電影、港臺電影、大陸電影、等，格式為“標(biāo)題1”，要求自左向右滾動顯示，鼠標(biāo)移動時停止?jié)L動，移開時繼續(xù)滾動（4）以下為電影名字，每個類型電影下都有相應(yīng)的電影，要求每個名字單獨一行，必須超過一屏；點擊第二行的電影類型會自動跳轉(zhuǎn)到下面相應(yīng)的地方；同時港臺電影中包括“大話西游”，點擊它可以轉(zhuǎn)到“大話西游”詳細(xì)介紹頁面。（5）右下角有“返回頂部”，要求點擊它能夠返回到頁面的最上方。 “#+命名錨記名稱”實驗三 綜合練習(xí)（一）一、實驗?zāi)康?、復(fù)習(xí)前面所學(xué)的知識點2、掌握在代碼視圖中使用標(biāo)記及屬性的相關(guān)方法3、掌握

4、屬性窗口的使用方法4、掌握IIS的設(shè)置方法二、實驗內(nèi)容1、根據(jù)所有知識設(shè)計兩個相關(guān)的頁面（1）字體與背景顏色等自行設(shè)計，要求搭配合理，且必須使用的是字體或頁面標(biāo)記的相關(guān)屬性（2）兩個頁面通過超級鏈接關(guān)聯(lián)，主頁面內(nèi)容設(shè)置必須合理（3）頁面內(nèi)容不作要求，可以使任何自己感興趣的東西（4）主頁面上必須有當(dāng)前系統(tǒng)的日期（5）使用并體會段落符號與換行符號的區(qū)別（6）使用并體會預(yù)先格式化標(biāo)記的作用（7）使用并體會字幕標(biāo)記的作用（8）必須使用并體會錨點鏈接的作用2、設(shè)置IIS（1）在控制面板的管理工具里面打開并配置IIS（2）設(shè)置完成后，同學(xué)之間通過IP地址互相訪問所作頁面3、檢查并測試大家對知識點的掌握程度

5、實驗四 列表、圖像及簡單頁面布局一、實驗?zāi)康?、掌握三種列表的創(chuàng)建方法2、掌握圖像的插入方法及圖文混排的具體操作3、會創(chuàng)建簡單的表格4、會使用框架來布局頁面5、了解層并能夠正確的使用它二、實驗內(nèi)容1、創(chuàng)建一個簡單的個人簡歷頁面（1）用項目列表組織簡歷，項目符號為實心方形；包含三項內(nèi)容：基本資料、教育背景、技能水平（2）基本資料部分用表格設(shè)計，大致如下圖所示，空白部分自己填入信息姓名性別插入照片出生年月政治面貌畢業(yè)院校所學(xué)專業(yè)聯(lián)系方式（3）其余兩部分可用編號列表設(shè)計2、創(chuàng)建一個地圖頁面（1）使用畫圖工具畫一個大致的中國地圖，要求至少有兩個地理位置，比如：湖北和自己家鄉(xiāng)的位置等；也可用類似圖片替代

6、（2）點擊不同的位置能連接到相應(yīng)的頁面，所鏈接頁面可只有簡單文字說明（3）圖片右邊添加對中國的簡單文字說明，要求文字與圖片上方對齊3、創(chuàng)建一個框架頁面（1）創(chuàng)建一個框架頁面，大致如下圖所示；上面的文字是保存時的文件名，最外層頁面名字統(tǒng)一命名為index.html；框架名稱用括號內(nèi)的名字 Top.html（top）Left.html（left）Main.html（main）（2）框架top中添加“我的網(wǎng)頁”，加粗居中（3）框架left中有兩行文字，分別為“作者介紹”和“作品介紹”（4）框架main中添加一張圖片，在圖片中間添加介紹性文字（5）為“作者介紹”和“作品介紹”分別添加超級鏈接，鏈接到1

7、、2部分所完成的頁面中；要求“作者介紹”是打開一個新的窗口；“作品介紹”在框架main中顯示。實驗五 表格的美化及頁面布局一、實驗?zāi)康?、會對表格的美化2、能夠使用表格進(jìn)行頁面布局二、實驗內(nèi)容1、美化表格（1）對實驗四中的表格進(jìn)行美化（2）要求表格的邊框為紫色，且線條為1個象素的單條線；表格內(nèi)部顏色為前灰色2、設(shè)計一個網(wǎng)站首頁（1）主題不限，要求顏色搭配合理（2）至少必須包含頁面頭部，頁面主體和頁面底部三部分（3）頁面頭部是LOGO、BANNER、導(dǎo)航等內(nèi)容（4）頁面主體內(nèi)容應(yīng)根據(jù)自己的網(wǎng)站主題細(xì)化，至少必須有每部分的標(biāo)題，內(nèi)容可以簡化（5）頁面底部是版權(quán)信息，應(yīng)包含自己的學(xué)號姓名等，且居中顯

8、示。實驗六 層及CSS樣式一、實驗?zāi)康?、會制作層的動態(tài)效果2、掌握CSS樣式的創(chuàng)建方法，并會應(yīng)用3、了解外部樣式表和內(nèi)部樣式表的區(qū)別4、特殊表格的制作二、實驗內(nèi)容1、制作一個藝術(shù)系的介紹頁面（1）要求制作的CSS樣式能夠被很多頁面使用，也就是外部樣式表，可保存為style.css（2）通過添加CSS樣式，要求沒有進(jìn)行任何設(shè)置前頁面文字都是紅色，10pt的大小（3）通過添加CSS樣式，要求添加的圖片都有邊框（3）通過添加CSS樣式，實現(xiàn)第一行居中顯示“藝術(shù)系風(fēng)采”，且藍(lán)色，24pt大?。?）下面是對藝術(shù)系的簡單介紹，必須有文字和圖片2、層的簡單動態(tài)效果（可參考P103）（1）添加三個層，內(nèi)容分

9、別為：學(xué)校簡介、系部介紹、管理部門（2）當(dāng)鼠標(biāo)移到“系部介紹”時顯示它的下拉菜單，包含生物技術(shù)、制藥工程、藝術(shù)系等；移到“管理部門”時顯示它的下拉菜單，包含教務(wù)處、財務(wù)處等（3）點擊“藝術(shù)系”時，鏈接到第一題中制作的頁面（4）通過添加CSS樣式，實現(xiàn)超級鏈接沒有下劃線，且不同狀態(tài)的顯示不同，要求使用的還是第一題中的style.css表3、特殊表格的制作嘗試制作一個如下圖所示的表格實驗七 層布局設(shè)計及模板的使用一、實驗?zāi)康?、會使用層及CSS樣式布局頁面2、掌握行為的添加方法3、了解代碼片段的使用4、掌握模板的創(chuàng)建及套用方法二、實驗內(nèi)容1、使用層制作一個如下圖所示的網(wǎng)站首頁（1）結(jié)構(gòu)如下圖所示（

10、2）主題不限，要求顏色搭配合理（3）頁面頭部是LOGO、BANNER、導(dǎo)航等內(nèi)容（4）頁面主體內(nèi)容應(yīng)根據(jù)自己的網(wǎng)站主題細(xì)化，至少必須有每部分的標(biāo)題，內(nèi)容可以簡化（5）頁面底部是版權(quán)信息，應(yīng)包含自己的學(xué)號姓名等，且居中顯示。2、行為的使用（1）頁面添加標(biāo)題：“行為的使用”，可使用CSS樣式（2）當(dāng)打開頁面時自動添加彈出消息：“歡迎您的光臨！”（3）單擊時打開一個400*300的窗口，內(nèi)容顯示的是第1部分做好的頁面，此窗口有標(biāo)題欄3、模板的創(chuàng)建（1）創(chuàng)建一個模板頁面（2）新建一個HTML頁面，套用上述模板，并進(jìn)行編輯（3）修改模板頁面，查看保存時發(fā)生的變化。實驗八 綜合練習(xí)（二）一、實驗?zāi)康?、掌

11、握模板的創(chuàng)建方法及使用2、能靈活使用表格、層、行為等技術(shù)3、會靈活使用CSS樣式4、掌握常用的頁面布局方法二、實驗內(nèi)容1、使用模板制作一個簡單網(wǎng)站（1）主題不限，要求顏色搭配合理（2）除模板外，頁面應(yīng)不少于兩個（3）首頁要求導(dǎo)航部分是固定的，不可修改的；且必須用到類似下圖的的格式，可水平可垂直方向；當(dāng)鼠標(biāo)經(jīng)過時會出現(xiàn)相應(yīng)的下拉菜單，并可以鏈接到相應(yīng)的頁面（4）其它頁面都有“返回首頁”的鏈接；涉及到的超級鏈接都是沒有下劃線的（5）主要內(nèi)容都是可以編輯、修改的2、設(shè)置IIS（1）在控制面板的管理工具里面打開并配置IIS（2）設(shè)置完成后，同學(xué)之間通過IP地址互相訪問所作頁面3、檢查并測試大家對知識點

12、的掌握程度實驗九 庫技術(shù)及表單的使用一、實驗?zāi)康?、掌握庫的創(chuàng)建方法及使用2、了解表單及表單元素之間的關(guān)系，并會創(chuàng)建表單3、熟悉常用表單元素的功能，知道何時使用哪種表單元素4、能實現(xiàn)表單的跳轉(zhuǎn)，并了解表單提交的兩種不同方法的區(qū)別二、實驗內(nèi)容1、制作一個如下圖所示的表單頁面（1）預(yù)覽時的最初效果應(yīng)跟上圖一致（2）用戶名和密碼長度為20，輸入的字符控制在16個以內(nèi)，若超過則不能再輸入；密碼以“*”或“”顯示（3）性別只能選擇一個（4）點擊“注冊”時提交到另外一個頁面，顯示為“注冊成功！”；點擊“重置”時恢復(fù)初始界面，重新輸入2、庫的使用（1）把表單頁面的“性別”那一欄保存為庫，并命名為“xb.lb

13、i”（2）在另外一個頁面套用此庫（3）修改“xb.lbi”文件，把“男”改為“男孩”，“女”改為“女孩”，并查看使用庫頁面的變化（4）在使用了庫的頁面進(jìn)行分離庫的操作實驗十 簡單交互技術(shù)一、實驗?zāi)康?、復(fù)習(xí)表單的創(chuàng)建及提交方法2、會使用行為檢查表單3、能夠使用ASP VBScript獲取表單的信息并顯示4、能夠區(qū)分開服務(wù)器端代碼和瀏覽器端代碼二、實驗內(nèi)容1、新建站點，配置IIS2、制作一個可以簡單交互的表單頁面（1）預(yù)覽時的最初效果應(yīng)跟上圖一致（2）要求用戶名和密碼都不能為空，且密碼必須為數(shù)字類型，否則提示錯誤信息（3）新建一個ASP VBScript頁面并保存（3）點擊“登錄”時提交到新建的

14、ASP VBScript頁面，顯示為“歡迎*登錄本網(wǎng)站！”（*是表單頁面輸入的用戶名）；點擊“重置”時恢復(fù)初始界面，重新輸入（4）在IIS中進(jìn)行測試3、嘗試數(shù)據(jù)庫的鏈接與顯示（1）在OFFICE中，新建一ACCESS數(shù)據(jù)庫，名稱為自己姓名的拼音縮寫；使用設(shè)計器創(chuàng)建一包含字段username、password；username為主鍵的表，命名為user；雙擊打開，輸入3-5條記錄（2）在控制面板-管理工具-系統(tǒng)DSN中，創(chuàng)建ODBC數(shù)據(jù)源為自己創(chuàng)建的數(shù)據(jù)庫（3）在DreamWeaver中新建站點，配置測試服務(wù)器，打開“數(shù)據(jù)庫”面板（4）新建一ASP VBScript頁面，使用“數(shù)據(jù)庫”面板的數(shù)據(jù)

15、源名稱（DSN）進(jìn)行數(shù)據(jù)庫連接，使用 “綁定”，顯示數(shù)據(jù)庫中的第一個用戶名，測試數(shù)據(jù)庫連接是否成功實驗11 數(shù)據(jù)庫基本操作一、實驗?zāi)康?、掌握簡單的ACCESS數(shù)據(jù)庫的創(chuàng)建方法2、會配置數(shù)據(jù)源3、掌握使用數(shù)據(jù)庫面板操作數(shù)據(jù)庫的方法二、實驗內(nèi)容1、用戶注冊及登陸的實現(xiàn)（1）新建一個ASP VBScript頁面，添加一個至少包含用戶名和密碼，及注冊按鈕的表單，命名為zc.asp（2）復(fù)制此頁面，修改“注冊”按鈕為“登陸”，命名為dl.asp（3）新建一ACCESS數(shù)據(jù)庫，創(chuàng)建一名為user的表，包含字段username、password；username為主鍵；并配置數(shù)據(jù)源為此數(shù)據(jù)庫（4）回到zc.asp頁面，打開數(shù)據(jù)庫面板，連接接數(shù)據(jù)庫；實現(xiàn)點擊注冊按鈕時，存輸入的信息到數(shù)據(jù)庫中，并在新的頁面顯示“注冊成功”（5）打開dl.asp頁面，實現(xiàn)點擊登陸按鈕時，若用戶名和密碼存在，則顯示“登陸成功”，否則顯示“登陸失敗”（6）顯示成功或失敗的頁面可用僅有文字的HTML頁面來表示2、制作一個簡易的新聞發(fā)布系統(tǒng)（1）在原來的數(shù)據(jù)庫中添加一張表，可命名為news，主要存放新聞信息，包含標(biāo)題、內(nèi)容、發(fā)布者等字段，字段名稱自己命名（2）新建一個A