網(wǎng)頁設(shè)計(jì)與制作

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

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

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

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

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

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

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

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

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

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

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

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

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

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