网页表格表单设计.docx
《网页表格表单设计.docx》由会员分享，可在线阅读，更多相关《网页表格表单设计.docx（12页珍藏版）》请在冰点文库上搜索。
网页表格表单设计
网页设计上机实验报告
学院名称管理学院
专业（班级）
姓名（学号）
指导教师倪丽萍
实验一
1.实验要求：
设计一张表格，并在表格当中填充文本，要求样式如下图所示：
第1个单元格
第2个单元格
第3个单元格
第4个单元格
第5个单元格
第6个单元格
2.设计方法及思路：
利用Dreamweavercc2014软件进行代码的设计。
在
主体中添加表格代码，用
标记表格，设定表格边框线厚度border为1，表格内字体距单元格边框cellpadding为20，单元格之间的间隔为0。
开始先设计一个三行三列的表格，用
|
标记表格的行，用
| 标记表格的列。
然后用colspan合并第一行的第一、第二个单元格，并删除一行列标记代码。
得到一个合并单元格，如上图所示的第1个单元格，用rowspan合并第一行的第二个单元格和第二行的第三个单元格，删除一行列标记。
得到一个合并的单元格，如上图所示的第2个单元格。
再用colspan合并第三行的第二个和第三个单元格，删除一行列标记，得到如图所示的第6个单元格。
再根据属性要求，设置字体（fontface标记），字体大小（fontsize标记），字体颜色（fontcolor），对其方式（align）。
这样的话就可以得到一个经过处理后的表格。
附实验一代码：
doctypehtml>
表格设计
第一个单元格
第二个单元格
|
第三个单元格
第四个单元格
|
第五个单元格
第六个单元格
|
实验结果截图：
实验二
1.实验要求：
设计一个会员注册表单，如下图所示：
2.实验思路：
一开始设计的时候，仅仅只是一行一行的设计下来，这样会导致“用户名”、“密码”这些文本，没有如上图所示的对齐，一开始设计的思路是在这些文本前面加 ，空格标记来使这些文本对齐，但是不方便，而且不美观，因此后来采用表格的设计思路，设计一个8行2列的表格，然后将需要填充的文本或者输入域放置到单元格中，再在单元格中设计对齐方式，这样的可以很方便的设计对齐方式。
3.设计步骤：
在body中添加一个
表单标记，目的是将表单中的内容看做一个整体。
然后设置一下背景颜色，我加了一条长度为800的水平分割线，用
标记。
再添加一个表格标记，设置表格的总体属性width="680"height="302"border="1"cellspacing="0"align="center"。
接下来就在单元格中添加需要的文本，或者输入域即可，本实验中需要的输入域有文本域，文本框，密码域，单选域，复选框，以及提交与确认按钮。
设置第一列1~6行为右对齐，即可得到上图的效果。
在第二列中添加输入域，添加输入域的方法，可以在插入-表单选项中选择相应的输入域，或者直接输入代码。
设置输入域的属性，比如输入域的名字，值，以及初始的值。
附实验二代码：
!
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
我的网页填写注册信息
//127.0.0.1:
8080/jsp"method=post>
用户名：| *用户名由字母开头，后跟字母，数字或者下划线 |
密码：| *设置登陆密码，最少六位！ |
确认密码：| *请再输入你的密码 |
性别：| *男 女 请选择你的性别 |
邮箱地址：| *请输入你的常用邮箱，可以用此用邮箱找回密码! |
基本情况: |
|
| 我已仔细阅读并同意接受用户使用协议 |