欢迎来到天天文库
浏览记录
ID：3923124
大小：545.74 KB
页数：4页
时间：2017-11-25
《实验2 表格和表单的应用》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、实验2：表格和表单的应用实验背景实验1的首页中，在网页正文部分，左侧导航栏使用的是一张图片，显示应该为一个一个的超链接形式，本次实验即把左侧导航栏的图片改造为一系列超链接组成的表格形式。同时编写一个用户注册的表单形式，即本次实验编写注册页面register.html，来熟练掌握表格和表单的使用。实验目的1.熟练掌握
2、3所示。图1石家庄旅游网站注册页面的页头部分（header）图2石家庄旅游网站注册页面的主体部分（content）图3石家庄旅游网站注册页面的页脚部分（footer）对示例图片的解释：1.页头部分（header）：包括网站Logo部分。2.网页主体部分（content）：左侧导航栏部分、右侧注册信息部分。3.页脚部分（footer）：包括网站的友情链接信息以及版权信息。本次实验页头和页脚部分功能同实验1的相应结构块，而页面主体部分是本次实验的重点。实验步骤步骤1分析网页结构(1)石家庄旅游网站注册页面的页头（图1）、页脚（图3）两部分信息，与实验1完全相同，因此这两部分
3、代码参考实验1的参考代码。(2)页面主体部分，由左右两栏组成，而欲在网页中实现分栏效果，可以使用表格方式，把左右两栏分别放到一行中的两个单元格中，如下图4所示。图4页面主体部分布局结构(3)页面主体左侧部分（导航栏），为一10行1列的表格，每一个单元格为一个超链接。(4)页面主体右侧部分（注册表单），为一9行2列的表格结构，每一行为一个表单控件信息。步骤2编写register.html网页整体结构(1)新建一个文件register.html，按照实验1的说明，建立文档的HTML基本结构。(2)按照实验1的内容，建立页面的页头部分、页面主体部分和页脚部分（注意：页头、页面
4、主体和页脚部分均位于一个
标签中，且其id属性分别为：header、content、footer，具体参考实验1），参考代码如下图5所示。图5页头、页面主体、页脚的整体结构步骤3编写页头部分（header）代码（参考实验1）步骤4编写页面主体部分（content）整体表格结构代码建立页面主体部分的表格结构（1行2列），宽度（100%），align属性（center）。步骤5页面主体左侧导航栏部分(1)位于页面主体表格的第1行第1个单元中，其内容为一由10行超链接组成的10行1列的表格，该单元格属性无。(2)该嵌套表格的属性为（宽度：154px，align：right
5、，每一行的行高：40px）。(3)该嵌套表格第1行第1列单元格的属性为（align：center），其内容“注册”为一超链接（链接地址：register.html）。(4)该嵌套表格第2—10行均为一个一个景点的超链接接，单元格属性为（背景图片：imagestab1.jpg，align：center），内容为超链接（链接地址：#）。步骤6页面主体右侧注册表单部分(1)位于页面主体表格的第1行第2个单元中，该单元格的属性为（背景图片：imagesbg1.png，宽度：80%）。(2)“用户注册”二级标题：放在
6、字号：#FF6600。(3)表单开始标记和结束标记：„„。(4)表单控件信息位于一个9行2列的嵌套表格中，每一行代表一组表单控件。(5)该嵌套表格的属性为（宽度：80%，align：center，单元格间距：10px）。(6)每一个表单控件占据一行，其中主要信息如下所示。用户名：文本输入框，name（username），size（32）密码：密码框，name（pswd），size（32）确认密码：密码框，name（repswd），size（32）性别：单选按钮，name（gender），“男”为默认选项
7、职业：select下拉列表，name（department）爱好：多选框，name（favorate）近期照片：文件选择框，name（photo）自我介绍：textarea控件，name（intro）提交（重置）：提交（重置）按钮(7)“自我介绍”行，第1个单元格“自多介绍”中，注意设置valign属性为middle。(8)“提交/重置”按钮行，第1个单元格（跨2列，align属性：center）。步骤7插入页面主体和页脚之间的水平线步骤8编写页脚部分（footer）代码（参考实验1
此文档下载收益归作者所有
