网页表格表单设计Word下载.docx
- 文档编号:6282794
- 上传时间:2023-05-06
- 格式:DOCX
- 页数:12
- 大小:194.72KB
网页表格表单设计Word下载.docx
《网页表格表单设计Word下载.docx》由会员分享,可在线阅读,更多相关《网页表格表单设计Word下载.docx(12页珍藏版)》请在冰点文库上搜索。
标记表格,设定表格边框线厚度border为1,表格内字体距单元格边框cellpadding为20,单元格之间的间隔为0。
开始先设计一个三行三列的表格,用<
tr>
/tr>
标记表格的行,用<
td>
/td>
标记表格的列。
然后用colspan合并第一行的第一、第二个单元格,并删除一行列标记代码。
得到一个合并单元格,如上图所示的第1个单元格,用rowspan合并第一行的第二个单元格和第二行的第三个单元格,删除一行列标记。
得到一个合并的单元格,如上图所示的第2个单元格。
再用colspan合并第三行的第二个和第三个单元格,删除一行列标记,得到如图所示的第6个单元格。
再根据属性要求,设置字体(fontface标记),字体大小(fontsize标记),字体颜色(fontcolor),对其方式(align)。
这样的话就可以得到一个经过处理后的表格。
附实验一代码:
!
doctypehtml>
html>
head>
metacharset="
utf-8"
>
title>
表格设计<
/title>
/head>
tableborder="
1"
width="
800"
cellpadding="
20"
cellspacing="
0"
>
tdcolspan="
2"
align="
center"
第一个单元格<
tdrowspan="
第二个单元格<
tdalign="
第三个单元格<
第四个单元格<
第五个单元格<
第六个单元格<
/html>
实验结果截图:
实验二
设计一个会员注册表单,如下图所示:
2.实验思路:
一开始设计的时候,仅仅只是一行一行的设计下来,这样会导致“用户名”、“密码”这些文本,没有如上图所示的对齐,一开始设计的思路是在这些文本前面加&
nbsp,空格标记来使这些文本对齐,但是不方便,而且不美观,因此后来采用表格的设计思路,设计一个8行2列的表格,然后将需要填充的文本或者输入域放置到单元格中,再在单元格中设计对齐方式,这样的可以很方便的设计对齐方式。
3.设计步骤:
在body中添加一个<
form>
/form>
表单标记,目的是将表单中的内容看做一个整体。
然后设置一下背景颜色,我加了一条长度为800的水平分割线,用<
hr>
标记。
再添加一个表格标记,设置表格的总体属性width="
680"
height="
302"
border="
。
接下来就在单元格中添加需要的文本,或者输入域即可,本实验中需要的输入域有文本域,文本框,密码域,单选域,复选框,以及提交与确认按钮。
设置第一列1~6行为右对齐,即可得到上图的效果。
在第二列中添加输入域,添加输入域的方法,可以在插入-表单选项中选择相应的输入域,或者直接输入代码。
设置输入域的属性,比如输入域的名字,值,以及初始的值。
附实验二代码:
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
我的网页<
bodybgcolor="
lavender"
h1align="
填写注册信息<
/h1>
hr/>
fontalign="
left"
formaction="
//127.0.0.1:
8080/jsp"
method=post>
tablealign="
3"
right"
用户名:
*<
inputtype="
text"
name="
user"
用户名由字母开头,后跟字母,数字或者下划线<
密码:
password"
设置登陆密码,最少六位!
确认密码:
请再输入你的密码<
性别:
radio"
sex"
value="
Male"
男
female"
女
请选择你的性别<
邮箱地址:
inputtype="
name="
mailaddress"
MAXLENGTH="
请输入你的常用邮箱,可以用此用邮箱找回密码!
valign="
top"
基本情况:
textareaname="
个人说明"
rows="
8"
COLS="
50"
[READONLY]>
<
/textarea>
submit"
提交"
middle"
reset"
重置"
checkbox"
box1"
"
[check]>
我已仔细阅读并同意接受用户使用协议<
实验三
对实验二的表单进行美化处理,得到如下图的对比效果:
用css样式表对字体以及页面进行美化设计,用javastript语言对填写格式进行检测。
3.实验步骤:
用css样式表设计的时候,分别使用class以及id类对大标题字体以及表格中的说明字体美化。
我用id="
information"
标记了“填写注册信息”,用class="
span"
标记说明字体。
用javastript语言检测用户输入时候符合会员注册表的要求,只有所有要求否符合的时候,才能提交,然后进入到表单标记中的action=“”所给出的目的地址中。
附实验三代码:
登录信息表<
scriptlanguage="
javascript"
functionjzy(){
varname=document.forms[0].userName.value;
varpwd1=document.forms[0].password1.value;
varpwd2=document.forms[0].password2.value;
varemail=document.forms[0].mailaddress.value;
varchk=document.forms[0].box1.checked;
varreg1=/^[a-zA-Z]\w+$/;
varreg2=/^\w+([-+.'
]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$/;
if(name.length<
=0)
alert("
用户名不能为空!
);
if(!
reg1.test(name))
用户名格式不正确!
if(pwd1.length<
6)
密码长度不能少于6个字符!
if(pwd1!
=pwd2)
alert("
两次密码不一致!
reg2.test(email))
邮箱格式不正确!
if(chk==false)
你需要仔细阅读用户使用协议!
document.forms[0].submit();
}
/script>
styletype="
text/css"
#information{color:
#E43912}
.span{color:
#090EF3;
font:
楷体"
;
font-size:
20px
/style>
body>
formname="
form1"
id="
hrwidth="
tablewidth="
tdclass="
userName"
password1"
password2"
16"
td>
<
mclass="
&
nbsp;
/m>
maxlength="
tdvalign="
基本情况:
*<
textareaname="
cols="
rows="
onclick="
jzy()"
优化页面截图:
输入错误或者不完整时截图:
实验总结
通过三次上机实验,学到了很多关于网页设计方面的知识,当然这仅仅一点点皮毛,我觉得网页设计很有趣,我想我应该去找一些详细的,完整网页设计介绍书去充实自己关于网页设计方面的知识。
另外,我觉得像c++、c、java以及网页设计这些需要动手编程的语言,一定要去动手上机实践,才能发现自己错在哪里,也能将这些错误记得更牢,这些知识点也能印象深刻。
“绝知此事要躬行”用在这些编程设计里面,我觉得是再合适不过了。
如果仅仅凭着理论知识,而不去实践,是很难发现实验过程中出现的错误的。
总之,这个学期的网页设计课,让我受益匪浅!
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 表格 表单 设计
![提示](https://static.bingdoc.com/images/bang_tan.gif)