实验指导13可编辑

实验指导13：表格框架表单CSS综合练习【实验目的和要求】：应用表格制作网页掌握框架组织网页的方法掌握表单网页的制作。利用CSS样式统一多张网页。【实验内容】：实验一：制作“样式”。实验二：制作“宁波旅游”网页。实验三：制作“溪口景区”网页。实验四：制作“石浦景区”网页。实验五：制作“四明山景区”网页。实验六：制作“景区列表”网页。实验七：制作“网站注册”网页。实验八：制作“宁波旅游主页”网页。【实验工具】记事本和IE浏览器【实验类型】设计【实验步骤】：实验一：制作“样式”网页。新建样式表文件，保存为a.css。网页的背景为bg.jpg定义图片img大小为宽420px，高240px。定义段落P的文本首行缩进2em，字体大小为large，颜色为紫色purple。定义文档中的超链接在未点击时（a:link）没有下划线，颜色为黄色；鼠标悬停时（a:hover）超链接颜色为蓝色blue；点击过后（a:visited）有下划线，且颜色变为红色red。实验二：制作“宁波旅游”网页。制作网页并保存为nbly.html。页面的标题设置为“宁波旅游”，页面的背景颜色为#8cff8c；页面上的文字“宁波旅游”大小为7号，加粗居中显示，每两个字之间空两个空格；文字“点击注册旅游社区”滚动显示，隶书显示，字体大小为5号；实验三：制作“溪口景区”网页。制作网页并保存为xikou.html。网页的标题为“溪口景区”。页面中插入图片xikou.jpg，文字（在文字资料文档中给出）在图片右侧环绕。链接外部样式表a.css，让网页中的内容显示如图所示的效果。实验四：制作“石浦景区”网页。制作网页并保存为shipu.html。网页的标题为“石浦景区”。页面中插入图片shipu.jpg，文字（在文字资料文档中给出）在图片左侧环绕。链接外部样式表a.css，让网页中的内容显示如图所示的效果。实验五：制作“四明山景区”网页。制作网页并保存为simingshan.html。网页的标题为“四明山景区”。页面中插入图片simingshan.jpg，文字（在文字资料文档中给出）在图片右侧环绕。链接外部样式表a.css，让网页中的内容显示如图所示的效果。实验六：制作“景区列表”网页。制作网页并保存为liebiao.html。网页的标题为“景区列表”。页面的背景图片为bg1.jpg，页面上文字“主要景区介绍：”字体大小为6号，颜色为黄色yellow；页面上的文字“溪口景区”、“石浦景区”和“四明山景区”采用无序列表方式排列，且每项前的符号为空心圆，项之间空一行。文字“联系我们”是邮件链接，点击后打开Outlook，收件人地址为dhy@。链接外部样式表a.css，让网页中的内容显示如图所示的效果。实验七：制作“网站注册”网页。制作网页并保存为biaodan.html。网页的背景图片为bg.jpg“欢迎注册宁波旅游社区”设置为一级标题，居中显示。利用表格进行表单的排版：表格居中对齐，表格背景颜色为#bbffbb，边框为红色，插入7行2列的表格,表格边框为5像素，宽度380像素，单元格间距为2,单元格与内容的间距为5。表格内容，如图所示。第1列右对齐，宽度120像素，第2列左对齐，宽度260像素。用户名文本框，宽度为16像素，可以输入最多20个半角字符。性别为单选项，初始时“女”被选中。出生年月日为三个文本框，年，默认显示“19”，宽度为4像素，可以输入最多4个半角字符。月日文本框宽度为2像素，可以输入最多2个半角字符。(3分)学历为下拉列表，列出四个选项：大专，本科，硕士，博士。喜欢的旅游类型为多选项。旅游宣言：显示为5行，每行可以显示20半角字符。最后一行，设置提交按钮和重置按钮。实验八：制作“宁波旅游主页”网页。制作网页并保存为index.html。网页的标题为“宁波旅游主页”。利用框架布局，框架边框为1，边框颜色为绿色green，上下框架比例为20%,80%，左右框架比例为22%,78%；上框架载入nbly.html，左下框架载入liebiao.html，右下框架初始载入xikou.html。当点击上框架中的“注册旅游社区”超链接时，会在右下框架中显示biaodan.html。点击左下框架上的景区名称时，会在右下框架中显示相应的网页：当点击“溪口景区”，会在右下框架中显示xikou.html；当点击“石浦景区”，会在右下框架中显示shipu.html；当点击“四明山景区”，会