您的位置：360文档中心› 网页表格表单设计

网页表格表单设计

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页设计上机实验报告

学院名称管理学院

专业（班级）

姓名（学号）

指导教师倪丽萍

实验一

1.实验要求：设计一张表格，并在表格当中填充文本，要求样式如下图所示：

2.设计方法及思路：利用Dreamweaver cc2014软件进行代码的设计。在

主体中添加表格代码，用

标记表格，设定表格边框线厚度border为1，表格内字体距单元格边框cellpadding为20，单元格之间的间隔为0。开始先设计一个三行三列的表格，用标记表格的行，用标记表格的列。然后用colspan合并第一行的第一、第二个单元格，并删除一行列标记代码。得到一个合并单元格，如上图所示的第1个单元格，用rowspan合并第一行的第二个单元格和第二行的第三个单元格，删除一行列标记。得到一个合并的单元格，如上图所示的第2个单元格。再用colspan 合并第三行的第二个和第三个单元格，删除一行列标记，得到如图所示的第6个单元格。再根据属性要求，设置字体（font face标记），字体大小（font size标记），字体颜色（font color），对其方式（align）。这样的话就可以得到一个经过处理后的表格。

附实验一代码：

表格设计

第一个单元格第二个单元格
第三个单元格第四个单元格
第五个单元格第六个单元格

实验结果截图：

实验二

1.实验要求：设计一个会员注册表单，如下图所示：

2.实验思路：一开始设计的时候，仅仅只是一行一行的设计下来，这样会导致“用户名”、“密码”这些文本，没有如上图所示的对齐，一开始设计的思路是在这些文本前面加 ，空格标记来使这些文本对齐，但是不方便，而且不美观，因此后来采用表格的设计思路，设计一个8行2列的表格，然后将需要填充的文本或者输入域放置到单元格中，再在单元格中设计对齐方式，这样的可以很方便的设计对齐方式。

3.设计步骤：在body中添加一个

表单标记，目的是将表单中的内容看做一个整体。然后设置一下背景颜色，我加了一条长度为800的水平分割线，用
标记。再添加一个表格标记，设置表格的总体属性width="680" height="302" border="1" cellspacing="0" align="center" 。接下来就在单元格中添加需要的文本，或者输入域即可，本实验中需要的输入域有文本域，文本框，密码域，单选域，复选框，以及提交与确认按钮。设置第一列1~6行为右对齐，即可得到上图的效果。在第二列中添加输入域，添加输入域的方法，可以在插入-表单选项中选择相应的输入域，或者直接输入代码。设置输入域的属性，比如输入域的名字，值，以及初始的值。

附实验二代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我的网页

填写注册信息

用户名：*用户名由字母开头，后跟字母，数字或者下划线
密码：*设置登陆密码，最少六位！
确认密码：*请再输入你的密码
性别：*男

女

请选择你的性别

邮箱地址：*请输入你的常用邮箱，可以用此用邮箱找回密码!
基本情况: