實驗指導13可編輯

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