HTML-CSS上機(jī)實(shí)驗(yàn)指導(dǎo)書-網(wǎng)頁(yè)設(shè)計(jì)實(shí)驗(yàn)指導(dǎo)

1、PAGE IPAGE 9南陽(yáng)理工學(xué)院HTML+CSS上機(jī)實(shí)驗(yàn)指導(dǎo)書（2011版）軟件學(xué)院.NET教研室2011.8目 錄 TOC o 1-1 h z u HYPERLINK l _Toc307299177 實(shí)驗(yàn)一熟悉HTML網(wǎng)頁(yè)如何手工制作 PAGEREF _Toc307299177 h 2 HYPERLINK l _Toc307299178 實(shí)驗(yàn)二熟悉HTML網(wǎng)頁(yè)和各種標(biāo)簽 PAGEREF _Toc307299178 h 3 HYPERLINK l _Toc307299179 實(shí)驗(yàn)三熟悉使用Dreamweaver制作HTML網(wǎng)頁(yè)的方法 PAGEREF _Toc307299179 h 3 HY

2、PERLINK l _Toc307299180 實(shí)驗(yàn)四列表標(biāo)簽和超鏈接標(biāo)簽 PAGEREF _Toc307299180 h 4 HYPERLINK l _Toc307299181 實(shí)驗(yàn)五網(wǎng)頁(yè)表格的制作 PAGEREF _Toc307299181 h 4 HYPERLINK l _Toc307299182 實(shí)驗(yàn)六網(wǎng)頁(yè)表單的制作 PAGEREF _Toc307299182 h 5 HYPERLINK l _Toc307299183 實(shí)驗(yàn)七熟悉CSS基本結(jié)構(gòu)一 PAGEREF _Toc307299183 h 5 HYPERLINK l _Toc307299184 實(shí)驗(yàn)八熟悉CSS基本結(jié)構(gòu)二 PAGE

3、REF _Toc307299184 h 5 HYPERLINK l _Toc307299185 實(shí)驗(yàn)九熟悉CSS基本結(jié)構(gòu)三 PAGEREF _Toc307299185 h 6 HYPERLINK l _Toc307299186 實(shí)驗(yàn)十熟悉CSS基本結(jié)構(gòu)三 PAGEREF _Toc307299186 h 7 HYPERLINK l _Toc307299187 實(shí)驗(yàn)十一熟悉Dreamweaver使用（一） PAGEREF _Toc307299187 h 8 HYPERLINK l _Toc307299188 實(shí)驗(yàn)十二熟悉Dreamweaver使用（二） PAGEREF _Toc307299188

4、h 8實(shí)驗(yàn)一熟悉HTML網(wǎng)頁(yè)如何手工制作【實(shí)驗(yàn)?zāi)康摹渴煜TML的基本結(jié)構(gòu)和常用標(biāo)記，使用記事本編寫網(wǎng)頁(yè)文件?！緦?shí)驗(yàn)內(nèi)容】建立一個(gè)簡(jiǎn)單的HTML文件，并輸入相應(yīng)的內(nèi)容，要求使用相應(yīng)標(biāo)簽對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行排版。排版中涉及到的標(biāo)簽包括：標(biāo)題標(biāo)簽、字體標(biāo)簽、分段標(biāo)簽等。【實(shí)驗(yàn)步驟】1、打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)2、對(duì)網(wǎng)頁(yè)進(jìn)行編輯，輸入文本內(nèi)容，并用相應(yīng)的標(biāo)簽對(duì)文本內(nèi)容進(jìn)行排版設(shè)置3、將文件保存為*. Html4、用瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，在瀏覽器中顯示效果5、根據(jù)結(jié)果重新調(diào)整原代碼6、重復(fù)步驟4，步驟5實(shí)驗(yàn)二熟悉HTML網(wǎng)頁(yè)和各種標(biāo)簽【實(shí)驗(yàn)?zāi)康摹渴煜TML的基本結(jié)構(gòu)和常用標(biāo)記，使用記事本編

5、寫網(wǎng)頁(yè)文件?！緦?shí)驗(yàn)內(nèi)容】建立一個(gè)簡(jiǎn)單的HTML文件，并輸入相應(yīng)的內(nèi)容，要求使用相應(yīng)標(biāo)簽對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行排版。進(jìn)一步，向網(wǎng)頁(yè)中加入圖片，使用相應(yīng)標(biāo)簽對(duì)網(wǎng)頁(yè)進(jìn)行美化。網(wǎng)頁(yè)美化中涉及到的標(biāo)簽包括：圖像標(biāo)簽、超鏈接標(biāo)簽等。【實(shí)驗(yàn)步驟】1、打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)2、對(duì)網(wǎng)頁(yè)進(jìn)行編輯，輸入文本內(nèi)容，并用相應(yīng)的標(biāo)簽對(duì)文本內(nèi)容進(jìn)行排版設(shè)置3、將文件保存為*. Html4、用瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，在瀏覽器中顯示效果5、根據(jù)結(jié)果重新調(diào)整原代碼6、向網(wǎng)頁(yè)中加入圖片，利用相應(yīng)標(biāo)簽對(duì)圖片進(jìn)行設(shè)置，達(dá)到美化網(wǎng)頁(yè)效果7、重復(fù)步驟4，步驟5實(shí)驗(yàn)三熟悉使用Dreamweaver制作HTML網(wǎng)頁(yè)的方法【實(shí)驗(yàn)?zāi)康摹渴?/p>

6、悉使用Dreamweaver制作HTML網(wǎng)頁(yè)的方法【實(shí)驗(yàn)內(nèi)容】使用Dreamweaver建立一個(gè)站點(diǎn)，然后建立簡(jiǎn)單的HTML文件，并輸入相應(yīng)的內(nèi)容，要求使用相應(yīng)標(biāo)簽對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行排版，同時(shí)注意掌握Dreamweaver的使用方法。【實(shí)驗(yàn)步驟】1、打開(kāi)Dreamweaver程序，建立站點(diǎn)，新建一個(gè)網(wǎng)頁(yè)文件2、對(duì)網(wǎng)頁(yè)進(jìn)行編輯，輸入文本內(nèi)容，并用相應(yīng)的標(biāo)簽對(duì)文本內(nèi)容進(jìn)行排版設(shè)置3、將網(wǎng)頁(yè)文件保存，注意查看文件所在位置4、按F12鍵，使用瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，在瀏覽器中顯示效果5、根據(jù)結(jié)果重新調(diào)整原代碼6、向網(wǎng)頁(yè)中加入圖片，利用相應(yīng)標(biāo)簽對(duì)圖片進(jìn)行設(shè)置，達(dá)到美化網(wǎng)頁(yè)效果7、重復(fù)步驟4，步驟5實(shí)驗(yàn)四

7、列表標(biāo)簽和超鏈接標(biāo)簽【實(shí)驗(yàn)?zāi)康摹空莆站W(wǎng)頁(yè)中列表標(biāo)簽和超鏈接標(biāo)簽的使用方法【實(shí)驗(yàn)內(nèi)容】通過(guò)編寫代碼和可視化兩種方式進(jìn)行練習(xí)建立一個(gè)基本的HTML文件設(shè)計(jì)網(wǎng)頁(yè)中列表標(biāo)簽設(shè)計(jì)網(wǎng)頁(yè)中的超鏈接標(biāo)簽【實(shí)驗(yàn)步驟】1、打開(kāi)Dreamweaver程序，建立站點(diǎn)，新建一個(gè)網(wǎng)頁(yè)文件2、對(duì)網(wǎng)頁(yè)進(jìn)行編輯，輸入文本內(nèi)容，并用相應(yīng)的標(biāo)簽對(duì)文本內(nèi)容進(jìn)行試驗(yàn)內(nèi)容要求的設(shè)置3、將網(wǎng)頁(yè)文件保存，注意查看文件所在位置4、按F12鍵，使用瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，在瀏覽器中顯示效果5、根據(jù)結(jié)果重新調(diào)整原代碼6、向網(wǎng)頁(yè)中加入圖片，利用相應(yīng)標(biāo)簽對(duì)圖片進(jìn)行設(shè)置，達(dá)到美化網(wǎng)頁(yè)效果7、重復(fù)步驟4，步驟5實(shí)驗(yàn)五網(wǎng)頁(yè)表格的制作【實(shí)驗(yàn)?zāi)康摹空莆站W(wǎng)頁(yè)

8、中表格的制作方法【實(shí)驗(yàn)內(nèi)容】建立一個(gè)基本的HTML文件網(wǎng)頁(yè)中表格設(shè)置單元格合并【實(shí)驗(yàn)步驟】1、打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)2、用、等標(biāo)簽在網(wǎng)頁(yè)中建立相應(yīng)的表格3、改變表格中border、width、height等屬性4、文件保存為*. Html5、瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果6、根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)六網(wǎng)頁(yè)表單的制作【實(shí)驗(yàn)?zāi)康摹空莆站W(wǎng)頁(yè)中表單的制作方法【實(shí)驗(yàn)內(nèi)容】建立一個(gè)基本的HTML文件網(wǎng)頁(yè)中表單制作設(shè)置各種表單控件【實(shí)驗(yàn)步驟】1、打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)2、利用標(biāo)簽在網(wǎng)頁(yè)中插入表單，制作一個(gè)調(diào)查問(wèn)卷表，該表單主要包括單行文本框，單選鈕、復(fù)選框，選擇下拉框

9、、文本域等表單元素 3、文件保存為*. Html4、瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果5、根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)七熟悉CSS基本結(jié)構(gòu)一【實(shí)驗(yàn)?zāi)康摹苛私釩SS的基本結(jié)構(gòu)掌握在網(wǎng)頁(yè)中加入CSS的方法【實(shí)驗(yàn)內(nèi)容】練習(xí)CSS的三種使用方式：外部樣式表的使用、內(nèi)部樣式表的使用、內(nèi)嵌樣式的使用【實(shí)驗(yàn)步驟】打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)編寫一段CSS代碼使用三種不同的方法將編寫的CSS代碼加入網(wǎng)頁(yè)中瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，檢驗(yàn)是否成功將CSS加入網(wǎng)頁(yè)中根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)八熟悉CSS基本結(jié)構(gòu)二【實(shí)驗(yàn)?zāi)康摹空莆誄SS的布局方法【實(shí)驗(yàn)內(nèi)容】練習(xí)CSS的三種使用方式：外部樣式表的使用、

10、內(nèi)部樣式表的使用、內(nèi)嵌樣式的使用利用Div+CSS方法對(duì)網(wǎng)頁(yè)進(jìn)行布局【實(shí)驗(yàn)步驟】打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)編寫一段CSS代碼使用三種不同的方法將編寫的CSS代碼加入網(wǎng)頁(yè)中瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，檢驗(yàn)是否成功將CSS加入網(wǎng)頁(yè)中根據(jù)結(jié)果重新調(diào)整源代碼重新建立一個(gè)網(wǎng)頁(yè)向網(wǎng)頁(yè)中插入三個(gè)Div標(biāo)簽，結(jié)合CSS實(shí)現(xiàn)定位文件保存為*. Html瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果根據(jù)結(jié)果重新調(diào)整源代碼根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)九熟悉CSS基本結(jié)構(gòu)三【實(shí)驗(yàn)?zāi)康摹空莆誄SS中設(shè)置背景的方法【實(shí)驗(yàn)內(nèi)容】練習(xí)CSS的三種使用方式：外部樣式表的使用、內(nèi)部樣式表的使用、內(nèi)嵌樣式的使用編寫CSS代碼，

11、對(duì)網(wǎng)頁(yè)的背景進(jìn)行設(shè)置，設(shè)置網(wǎng)頁(yè)的背景圖片【實(shí)驗(yàn)步驟】打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)編寫一段CSS代碼使用三種不同的方法將編寫的CSS代碼加入網(wǎng)頁(yè)中瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，檢驗(yàn)是否成功將CSS加入網(wǎng)頁(yè)中根據(jù)結(jié)果重新調(diào)整源代碼編寫相應(yīng)的CSS代碼，將網(wǎng)頁(yè)的背景顏色分別設(shè)置為紅色、綠色、藍(lán)色文件保存為*. Html瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果根據(jù)結(jié)果重新調(diào)整源代碼重新建立一個(gè)網(wǎng)頁(yè)編寫CSS代碼，為網(wǎng)頁(yè)添加背景圖片，使圖片不平鋪修改CSS代碼，使圖片在水平方向平鋪修改CSS代碼，使圖片在垂直方向平鋪修改CSS代碼，使圖片同時(shí)在水平和垂直方向平鋪文件保存為*. Html瀏覽器打開(kāi)

12、所保存的網(wǎng)頁(yè)文件，顯示修改后的效果根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)十熟悉CSS基本結(jié)構(gòu)三【實(shí)驗(yàn)?zāi)康摹空莆誄SS中設(shè)置字體和文本樣式的方法【實(shí)驗(yàn)內(nèi)容】練習(xí)CSS的三種使用方式：外部樣式表的使用、內(nèi)部樣式表的使用、內(nèi)嵌樣式的使用編寫CSS代碼，對(duì)網(wǎng)頁(yè)的字體和文本樣式進(jìn)行設(shè)置【實(shí)驗(yàn)步驟】打開(kāi)記事本程序，編寫網(wǎng)頁(yè)的基本結(jié)構(gòu)編寫一段CSS代碼使用三種不同的方法將編寫的CSS代碼加入網(wǎng)頁(yè)中瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，檢驗(yàn)是否成功將CSS加入網(wǎng)頁(yè)中根據(jù)結(jié)果重新調(diào)整源代碼向網(wǎng)頁(yè)中插入一段文字編寫相應(yīng)的CSS代碼，對(duì)文本字體進(jìn)行設(shè)置，分別將其設(shè)置為“Times New Roman”、“宋體”、“黑體”修改CSS代碼，

13、對(duì)字體大小進(jìn)行設(shè)置修改CSS代碼，設(shè)置文本段落縮進(jìn)修改CSS代碼，設(shè)置文本對(duì)齊方式，分別將文本設(shè)置為左對(duì)齊、右對(duì)齊、居中對(duì)齊文件保存為*. Html瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)十一熟悉Dreamweaver使用（一）【實(shí)驗(yàn)?zāi)康摹空莆誅reamweaver的基本使用方法掌握在Dreamweaver創(chuàng)建站點(diǎn)的方法掌握在Dreamweaver中添加頁(yè)面元素的方法【實(shí)驗(yàn)內(nèi)容】在本地磁盤建立文件夾，在此基礎(chǔ)上利用Dreamweaver建立自己的站點(diǎn)，并為站點(diǎn)設(shè)置主頁(yè)文件，進(jìn)而向主頁(yè)中添加文本、圖像、超鏈接等元素?！緦?shí)驗(yàn)步驟】1、在本地磁盤建立“newsite”文

14、件夾2、啟動(dòng)Macromedia Dreamweaver 83、利用Dreamweaver 8將“newsite”文件夾設(shè)置為站點(diǎn)4、建立站點(diǎn)首頁(yè)index.html5、對(duì)首頁(yè)進(jìn)行編輯，向其中添加文本、插入圖像、超鏈接，并設(shè)置相應(yīng)的格式6、文件保存為*. Html7、瀏覽器打開(kāi)所保存的網(wǎng)頁(yè)文件，顯示修改后的效果8、根據(jù)結(jié)果重新調(diào)整源代碼實(shí)驗(yàn)十二熟悉Dreamweaver使用（二）【實(shí)驗(yàn)?zāi)康摹空莆赵贒reamweaver中使用表格的方法掌握在Dreamweaver中使用表單的方法掌握在Dreamweaver中使用CSS的方法【實(shí)驗(yàn)內(nèi)容】在Dreamweaver中建立基本HTML頁(yè)，分別向其中插入表格、表單，并對(duì)其格式進(jìn)行設(shè)置；利用CSS樣式面板對(duì)網(wǎng)頁(yè)進(jìn)行美化。【實(shí)驗(yàn)步驟】1、在本地磁