網(wǎng)頁設計與制作

1、精選優(yōu)質(zhì)文檔-傾情為你奉上網(wǎng)頁設計與制作 實驗指導書實驗一 創(chuàng)建站點實驗目的:1. 熟練掌握 FrontPage 2000的啟動與退出方法。2. 掌握站點的建立方法。3. 掌握簡單網(wǎng)頁的制作方法。4. 熟悉網(wǎng)頁屬性的設置與修改方法,并掌握超鏈接的建立方法。實驗內(nèi)容:1. 新建一個站點,并在該站點中增加一個網(wǎng)頁。2. 完成網(wǎng)頁文本的輸入及網(wǎng)頁屬性的修改。3. 在建好的網(wǎng)頁中插入適當?shù)某溄?。實驗指?1. 利用我的電腦建立新的文件夾,為保存所建站點及網(wǎng)頁做好準備。2. 啟動 FrontPage 2000,并熟悉其工作環(huán)境。3. 新建站點:兩種方法a 利用工具欄中的新建按鈕(從該按鈕旁的下拉列表中

2、選取站點項 。b 也可以利用文件菜單中的新建菜單項(選站點進行。<要求>:在打開的 Web 站點模板對話框中為新站點指定保存的位置(設定為 1中所建的 文件夾。4. 在建好的站點中增加一個新網(wǎng)頁:類似于 2中的操作,選擇網(wǎng)頁即可。5. 完成網(wǎng)頁文本的編輯。6. 進行網(wǎng)頁屬性的修改:兩種方法a 普通視圖下,在工作區(qū)中單擊右鍵, 從彈出的快捷菜單中選取 網(wǎng)頁屬性 項進行 設置。b 也可在普通視圖下,利用文件菜單中的屬性菜單項進行設置。7. 超鏈接的建立:利用插入菜單中的超鏈接菜單項進行。8. 根據(jù)具體情況再自行設計幾個網(wǎng)頁。9. 保存網(wǎng)頁文件。10. 退出 FrontPage 2000

3、。思考題:1. 如何為 FrontPage 2000設置一個默認的瀏覽器?2. 保存網(wǎng)頁時,應注意哪些問題?實驗二 網(wǎng)頁布局實驗目的:1. 掌握網(wǎng)頁標題的添加方法。2. 掌握網(wǎng)頁文本的修飾方法及段落樣式的使用。3. 了解網(wǎng)頁定位的方法4. 學會利用列表來組織網(wǎng)頁內(nèi)容。實驗內(nèi)容:1. 添加標題2. 文本格式的設置及邊框與陰影的應用3. 網(wǎng)頁定位4. 利用列表組織網(wǎng)頁內(nèi)容5. 段落樣式的設置實驗指導:1. 啟動 FrontPage 2000。2. 打開實驗一中所建站點。3. 選擇其中的一個網(wǎng)頁4. 添加標題:兩種方法, 都是利用 格式 菜單中的 樣式 菜單項或格式工具欄中的 “樣 式”下拉列表框進

4、行設定。a 先選定標題樣式,再輸入文本。b 選取要作為標題的文字,再進行設定。5. 修飾文本<要求>:掌握文本字體、 字號的設置方法, 學會運用文字效果, 掌握文本顏色的改變方法。 6. 邊框與陰影的運用選定段落(或段落局部 ,再利用格式邊框與陰影 ,在打開的對話框中進行設 置。7. 網(wǎng)頁內(nèi)容定位:了解定位網(wǎng)頁內(nèi)容的方法。8. 利用列表組織網(wǎng)頁內(nèi)容a 添加列表b 設置列表樣式9. 可折疊列表的制作a 利用 6中所建列表,進行樣式設定b 設置嵌套列表c 選中“啟用折疊大綱”復選框。10. 改變段落樣式11. 保存所做修改12. 退出 FrontPage 2000。思考題:1. 怎樣在

5、網(wǎng)頁中創(chuàng)建嵌套式列表?2. 在 FrontPage 2000中提供了幾級標題,如何進行設定?實驗三 網(wǎng)頁修飾設計實驗目的:1. 掌握插入特殊符號、水平線、注釋及時間的方法。2. 掌握圖片的插入及圖像的處理方法。3. 學會為網(wǎng)頁添加背景的方法。實驗內(nèi)容:1. 插入特殊符號2. 圖像的插入與處理3. 圖像效果及外觀的修改4. 水平線、時間及時間及注釋信息的插入與設置5. 修改段落樣式6. 背景的設置實驗指導:1. 啟動 FrontPage 2000,打開所建站點。2. 打開所建的一個網(wǎng)頁。3. 特殊符號的插入:插入菜單符號菜單項,在打開的對話框中進行選擇插入。4. 圖像的添加:不同來源的圖像的插入

6、。a 當前站點中的圖片。b 本地計算機中的圖片。c Web 上的圖片。5. 圖像處理及圖片的保存。6. 圖像特殊效果的運用7. 圖像外觀的修改8. 水平線的插入及屬性設置:在網(wǎng)頁中插入幾條水平線, 并分別設置為不同的寬度和顏色。9. 時間及注釋信息的插入:在網(wǎng)頁的適當位置進行插入, 并將時間設置為不同的顯示格式。 10. 段落格式的劃分11. 背景的設置及修改:將一幅已經(jīng)過沖濁處理的圖片作為網(wǎng)頁背景。12. 保存所做修改。13. 退出 FrontPage 2000。思考題:1. 簡述在網(wǎng)頁設計過程中保存圖像文件的特點。2. 簡述水平線在網(wǎng)頁設計中的作用及插入方法,實驗四 超鏈接的創(chuàng)建及設定 實

7、驗目的:1. 熟練掌握超鏈接的創(chuàng)建及其屬性設置方法2. 掌握圖像地圖的使用3. 掌握導航欄的使用方法4. 學會共享邊框的創(chuàng)建方法實驗內(nèi)容:1. 與各種不同來源內(nèi)容進行超鏈接2. 鏈接顏色的設定3. 超鏈接的取消4. 圖像地圖的創(chuàng)建5. 導航欄的創(chuàng)建與屬性設置6. 共享邊框的創(chuàng)建實驗指導:1. 啟動 FrontPage 2000,打開所建站點。2. 啟動其中一個網(wǎng)頁。3. 創(chuàng)建超鏈接a 與當前站點中的其他網(wǎng)頁的鏈接b 與空白網(wǎng)頁的鏈接c 與 E_mail的鏈接d 與 WWW 上任意一個 Web 頁面的鏈接e 在同一網(wǎng)頁中使用書簽進行超鏈接的創(chuàng)建4. 對超鏈接的顏色進行修改:學會以不同的顏色表示不

8、同種類的超鏈接。5. 超鏈接的取消。6. 新建一個網(wǎng)頁,插入一幅地圖圖片。7. 圖像地圖的使用:a 設置不同形狀的熱點區(qū)域。b 熱點鏈接的創(chuàng)建。c 在地圖中插入文字及創(chuàng)建文本熱點(超鏈接的方法。d 為圖像設置默認熱點。8. 導航欄的使用a 導航結(jié)構(gòu)的定義b 導航欄屬性的設置c 導航欄的創(chuàng)建9. 在網(wǎng)頁中創(chuàng)建共享邊框。 10. 保存所做修改。11. 退出 FrontPage 2000。 思考題:1. 談談你對超鏈接的認識。2. 簡述導航欄的作用。3. 簡述共享邊框的作用。實驗五 在網(wǎng)頁中運用表格實驗目的1. 熟練掌握在網(wǎng)頁中插入及填充表格的方法。2. 掌握設置表格屬性的方法。實驗內(nèi)容1. 用不同

9、的方法在網(wǎng)頁中插入表格。2. 填充表格內(nèi)容3. 單元格的拆分與合并操作4. 表格屬性的設置實驗指導1. 啟動 FrontPage 2000,打開所建站點。2. 新建一個網(wǎng)頁。3. 用不同的方法在網(wǎng)頁中插入幾個表格a 用菜單項:表格插入b 用常用工具按鈕。c 使用表格工具欄。d 由文本轉(zhuǎn)換表格。4. 對單元格進行操作:單元格的插入、拆分與合并。5. 在網(wǎng)頁中對表格進行填充操作:制作一個通訊錄表,要求表格內(nèi)容包括班級、學號、姓 名、性別、出生年月、電話號碼、照片(圖片信息 、家庭通信住址及郵編。6. 對表格中的某個局部進行背景圖片的插入。7. 保存所做修改。8. 退出 FrontPage 2000

10、。思考題:1. 如何進行表格屬性的查看與設置,可包含哪些方面的內(nèi)容?2. 單元格屬性設置包含哪些方面的內(nèi)容?實驗六 表單設計(分 2到 3次完成實驗目的1. 熟練掌握進行表單網(wǎng)頁設計的方法。2. 學會對各種表單域進行屬性設置。3. 掌握表單提交結(jié)果的幾種處理方法。4. 學會對各種表單域進行字段驗證的方法。實驗內(nèi)容:1. 利用表單向?qū)杀韱巍?. 手工修正所生成的表單。3. 為表單設計處理程序,進行各種不同的處理。實驗指導1. 啟動 FrontPage 2000,打開所建站點。2. 新建一個網(wǎng)頁。3. 利用表單向?qū)梢粡埍韱?要求用到各種表單域 。4. 對所生成的表單進行手工修改, 并對各個

11、表單域進行適當?shù)膶傩栽O置 (包括必須的字段 驗證設置 。5. 為上述表單設計一個表單處理程序,要求:a 將結(jié)果保存到當前站點中的 .dataformresu.txt文件中。b 將結(jié)果以郵件的方式發(fā)送到某個信箱中。c 將結(jié)果保存到數(shù)據(jù)庫中。6. 在表單網(wǎng)頁中根據(jù)內(nèi)容需要插入適當?shù)乃骄€,并進行適當?shù)奈淖终f明。7. 保存所做修改。8. 退出 FrontPage 2000。思考題1. 簡述表單的作用。2. 對表單處理程序的各種方法進行比較,簡要說明它們各自的異同之處。實驗七 框架網(wǎng)頁實驗目的1. 通過實驗,進一步加深對框架概念的理解。2. 掌握框架網(wǎng)頁的設計、保存及打開方法。3. 學會對框架網(wǎng)頁進行

12、屬性設置。實驗內(nèi)容:1. 創(chuàng)建框架網(wǎng)頁。2. 保存、打開框架網(wǎng)頁,并會對其中的任一網(wǎng)頁進行編輯修改。3. 設置框架網(wǎng)頁屬性。實驗指導1. 啟動 FrontPage 2000,打開所建站點。2. 創(chuàng)建一個框架網(wǎng)頁(自選一種模板,并為新建的框架網(wǎng)頁中的每一個框架設置初始網(wǎng) 頁 。3. 保存所建的框架網(wǎng)頁,保存時,應注意以下幾點:a 若某個框架窗口中的網(wǎng)頁是新建的,則應首先保存框架窗口中的網(wǎng)頁。b 區(qū)分保存區(qū)域的范圍顯示(是整個框架網(wǎng)頁,還是其中的每個部分 。c 保存時的參數(shù)設定:如網(wǎng)頁標題的更改、 保存位置的選定、 保存類型的選定及文件 名的指定。d 框架中網(wǎng)頁的保存:利用菜單框架保存網(wǎng)頁 (或另

13、存新網(wǎng)頁 進行。4. 打開所保存的框架網(wǎng)頁。5. 學會對框架中的某個網(wǎng)頁進行編輯:框架 在新窗口中打開網(wǎng)頁 (或在快捷菜單 中選取此命令 。6. 對框架網(wǎng)頁的屬性進行設置。7. 進行框架布局的調(diào)整,直至能滿足所建網(wǎng)頁的要求為止。8. 對框架網(wǎng)頁的有關(guān)視圖進行顯示切換,觀察其中的不同之處。9. 目標框架的設定。10. 保存所做修改。11. 退出 FrontPage 2000。思考題1. 簡述框架網(wǎng)頁的應用場合。2. 創(chuàng)建框架網(wǎng)頁時應注意些什么?實驗八 實驗目的 1. 2. 3. 數(shù)據(jù)庫的連接 掌握創(chuàng)建 ODBC 數(shù)據(jù)文件的方法 學會在網(wǎng)頁中建立數(shù)據(jù)庫連接并顯示數(shù)據(jù)庫網(wǎng)頁的方法。 了解編輯數(shù)據(jù)庫信

14、息的方法，并對調(diào)整數(shù)據(jù)庫信息的方法。 實驗內(nèi)容 1. 2. 創(chuàng)建 ODBC 數(shù)據(jù)文件。 建立數(shù)據(jù)庫連接，并顯示于網(wǎng)頁中。 實驗指導 1. 創(chuàng)建 ODBC 數(shù)據(jù)文件 a 創(chuàng)建 Microsoft Access 2000 數(shù)據(jù)庫的連接。 b 創(chuàng)建 SQL Server2000 數(shù)據(jù)庫的連接。 啟動 FrontPage 2000。 建立數(shù)據(jù)庫的連接： 插入數(shù)據(jù)庫結(jié)果 。 數(shù)據(jù)庫網(wǎng)頁的顯示 a 將網(wǎng)頁以.asp 擴展名進行保存。 b 在瀏覽器中進行瀏覽。 編輯數(shù)據(jù)庫信息。 a 字段的插入。 b 數(shù)據(jù)庫信息的調(diào)整。 保存所做修改。 退出 FrontPage 2000。 2. 3. 4. 5. 6. 7. 思考題 1. 2. 顯示數(shù)據(jù)庫網(wǎng)頁時，需注意些什么？ 畫出訪問數(shù)據(jù)庫的流程。 11 實驗九 實驗目的 1. 高級網(wǎng)頁設計技術(shù) 初步掌握在網(wǎng)頁插入 HTML、音頻、ActiveX 控件及視頻嵌入的方法。 實驗內(nèi)容 1. 2. 3. 4. 插入 HTML 代碼。 嵌入視頻。 插入音頻。 ActiveX 控