實(shí)驗(yàn)指導(dǎo)13可編輯

實(shí)驗(yàn)指導(dǎo)13：表格框架表單CSS綜合練習(xí)【實(shí)驗(yàn)?zāi)康暮鸵蟆浚簯?yīng)用表格制作網(wǎng)頁(yè)掌握框架組織網(wǎng)頁(yè)的方法掌握表單網(wǎng)頁(yè)的制作。利用CSS樣式統(tǒng)一多張網(wǎng)頁(yè)?！緦?shí)驗(yàn)內(nèi)容】：實(shí)驗(yàn)一：制作“樣式”。實(shí)驗(yàn)二：制作“寧波旅游”網(wǎng)頁(yè)。實(shí)驗(yàn)三：制作“溪口景區(qū)”網(wǎng)頁(yè)。實(shí)驗(yàn)四：制作“石浦景區(qū)”網(wǎng)頁(yè)。實(shí)驗(yàn)五：制作“四明山景區(qū)”網(wǎng)頁(yè)。實(shí)驗(yàn)六：制作“景區(qū)列表”網(wǎng)頁(yè)。實(shí)驗(yàn)七：制作“網(wǎng)站注冊(cè)”網(wǎng)頁(yè)。實(shí)驗(yàn)八：制作“寧波旅游主頁(yè)”網(wǎng)頁(yè)。【實(shí)驗(yàn)工具】記事本和IE瀏覽器【實(shí)驗(yàn)類型】設(shè)計(jì)【實(shí)驗(yàn)步驟】：實(shí)驗(yàn)一：制作“樣式”網(wǎng)頁(yè)。新建樣式表文件，保存為a.css。網(wǎng)頁(yè)的背景為bg.jpg定義圖片img大小為寬420px，高240px。定義段落P的文本首行縮進(jìn)2em，字體大小為large，顏色為紫色purple。定義文檔中的超鏈接在未點(diǎn)擊時(shí)（a:link）沒(méi)有下劃線，顏色為黃色；鼠標(biāo)懸停時(shí)（a:hover）超鏈接顏色為藍(lán)色blue；點(diǎn)擊過(guò)后（a:visited）有下劃線，且顏色變?yōu)榧t色red。實(shí)驗(yàn)二：制作“寧波旅游”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為nbly.html。頁(yè)面的標(biāo)題設(shè)置為“寧波旅游”，頁(yè)面的背景顏色為#8cff8c；頁(yè)面上的文字“寧波旅游”大小為7號(hào)，加粗居中顯示，每?jī)蓚€(gè)字之間空兩個(gè)空格；文字“點(diǎn)擊注冊(cè)旅游社區(qū)”滾動(dòng)顯示，隸書顯示，字體大小為5號(hào)；實(shí)驗(yàn)三：制作“溪口景區(qū)”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為xikou.html。網(wǎng)頁(yè)的標(biāo)題為“溪口景區(qū)”。頁(yè)面中插入圖片xikou.jpg，文字（在文字資料文檔中給出）在圖片右側(cè)環(huán)繞。鏈接外部樣式表a.css，讓網(wǎng)頁(yè)中的內(nèi)容顯示如圖所示的效果。實(shí)驗(yàn)四：制作“石浦景區(qū)”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為shipu.html。網(wǎng)頁(yè)的標(biāo)題為“石浦景區(qū)”。頁(yè)面中插入圖片shipu.jpg，文字（在文字資料文檔中給出）在圖片左側(cè)環(huán)繞。鏈接外部樣式表a.css，讓網(wǎng)頁(yè)中的內(nèi)容顯示如圖所示的效果。實(shí)驗(yàn)五：制作“四明山景區(qū)”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為simingshan.html。網(wǎng)頁(yè)的標(biāo)題為“四明山景區(qū)”。頁(yè)面中插入圖片simingshan.jpg，文字（在文字資料文檔中給出）在圖片右側(cè)環(huán)繞。鏈接外部樣式表a.css，讓網(wǎng)頁(yè)中的內(nèi)容顯示如圖所示的效果。實(shí)驗(yàn)六：制作“景區(qū)列表”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為liebiao.html。網(wǎng)頁(yè)的標(biāo)題為“景區(qū)列表”。頁(yè)面的背景圖片為bg1.jpg，頁(yè)面上文字“主要景區(qū)介紹：”字體大小為6號(hào)，顏色為黃色yellow；頁(yè)面上的文字“溪口景區(qū)”、“石浦景區(qū)”和“四明山景區(qū)”采用無(wú)序列表方式排列，且每項(xiàng)前的符號(hào)為空心圓，項(xiàng)之間空一行。文字“聯(lián)系我們”是郵件鏈接，點(diǎn)擊后打開Outlook，收件人地址為dhy@。鏈接外部樣式表a.css，讓網(wǎng)頁(yè)中的內(nèi)容顯示如圖所示的效果。實(shí)驗(yàn)七：制作“網(wǎng)站注冊(cè)”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為biaodan.html。網(wǎng)頁(yè)的背景圖片為bg.jpg“歡迎注冊(cè)寧波旅游社區(qū)”設(shè)置為一級(jí)標(biāo)題，居中顯示。利用表格進(jìn)行表單的排版：表格居中對(duì)齊，表格背景顏色為#bbffbb，邊框?yàn)榧t色，插入7行2列的表格,表格邊框?yàn)?像素，寬度380像素，單元格間距為2,單元格與內(nèi)容的間距為5。表格內(nèi)容，如圖所示。第1列右對(duì)齊，寬度120像素，第2列左對(duì)齊，寬度260像素。用戶名文本框，寬度為16像素，可以輸入最多20個(gè)半角字符。性別為單選項(xiàng)，初始時(shí)“女”被選中。出生年月日為三個(gè)文本框，年，默認(rèn)顯示“19”，寬度為4像素，可以輸入最多4個(gè)半角字符。月日文本框?qū)挾葹?像素，可以輸入最多2個(gè)半角字符。(3分)學(xué)歷為下拉列表，列出四個(gè)選項(xiàng)：大專，本科，碩士，博士。喜歡的旅游類型為多選項(xiàng)。旅游宣言：顯示為5行，每行可以顯示20半角字符。最后一行，設(shè)置提交按鈕和重置按鈕。實(shí)驗(yàn)八：制作“寧波旅游主頁(yè)”網(wǎng)頁(yè)。制作網(wǎng)頁(yè)并保存為index.html。網(wǎng)頁(yè)的標(biāo)題為“寧波旅游主頁(yè)”。利用框架布局，框架邊框?yàn)?，邊框顏色為綠色green，上下框架比例為20%,80%，左右框架比例為22%,78%；上框架載入nbly.html，左下框架載入liebiao.html，右下框架初始載入xikou.html。當(dāng)點(diǎn)擊上框架中的“注冊(cè)旅游社區(qū)”超鏈接時(shí)，會(huì)在右下框架中顯示biaodan.html。點(diǎn)擊左下框架上的景區(qū)名稱時(shí)，會(huì)在右下框架中顯示相應(yīng)的網(wǎng)頁(yè)：當(dāng)點(diǎn)擊“溪口景區(qū)”，會(huì)在右下框架中顯示xikou.html；當(dāng)點(diǎn)擊“石浦景區(qū)”，會(huì)在右下框架中顯示shipu.html；當(dāng)點(diǎn)擊“四明山景區(qū)”，會(huì)