网页
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
上机实验
报告
软件系统测试报告下载sgs报告如何下载关于路面塌陷情况报告535n,sgs报告怎么下载竣工报告下载
学院名称 管理学院
专 业 (班 级)
姓 名 (学 号)
指 导 教 师 倪丽萍
实验一
1.实验要求:设计一张表格,并在表格当中填充文本,要求样式如下图所示:
第1个单元格
第2个单元格
第3个单元格
第4个单元格
第5个单元格
第6个单元格
2.设计
方法
快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载
及思路:利用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" "">
我的网页
填写注册信息
实验结果截图:
实验三
1.实验要求:对实验二的表单进行美化处理,得到如下图的对比效果:
2.实验思路:用css样式表对字体以及页面进行美化设计,用javastript语言对填写格式进行检测。
3.实验步骤:用css样式表设计的时候,分别使用class以及id类对大标
题
快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题
字体以及表格中的说明字体美化。我用id="information"标记了“填写注册信息”,用标记说明字体。用javastript语言检测用户输入时候符合会员注册表的要求,只有所有要求否符合的时候,才能提交,然后进入到表单标记中的action=“”所给出的目的地址中。
附实验三代码:
登录信息表
实验结果截图:
优化页面截图:
输入错误或者不完整时截图:
实验总结
通过三次上机实验,学到了很多关于网页设计方面的知识,当然这仅仅一点点皮毛,我觉得网页设计很有趣,我想我应该去找一些详细的,完整网页设计介绍书去充实自己关于网页设计方面的知识。另外,我觉得像c++、c、java以及网页设计这些需要动手编程的语言,一定要去动手上机实践,才能发现自己错在哪里,也能将这些错误记得更牢,这些知识点也能印象深刻。“绝知此事要躬行”用在这些编程设计里面,我觉得是再合适不过了。如果仅仅凭着理论知识,而不去实践,是很难发现实验过程中出现的错误的。总之,这个学期的网页设计课,让我受益匪浅!