表单设计速成说明
所需环境:
Dreamweaver等网页设计工具
设计步骤:
步骤一将word中提供的表单打开,选中整个表单表格复制
步骤二打开Dreamweaver,新建一个基本HTML页面,如图:
步骤三在新建页面,将word中复制的表格粘贴,效果如图:
步骤四选中网页代码,展开代码:
步骤五去掉头部和尾部以下代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
</body>
</html>
步骤六将头部<table border="1" cellspacing="0" cellpadding="0" width="697">
替换为:
<table align="center" border="1" bordercolor="#666666" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="95%">
步骤七在头部之前加入样式代码:
<style type="text/css">
td { font-size: 9pt}
.title { font-size: 10.5pt}
.iwhite {
border-left: 1px solid rgb(255,255,255);
border-right: 1px solid rgb(255,255,255);
border-top: 1px solid rgb(255,255,255);
border-bottom:1px solid rgb(0.0,255);
font-family: "Verdana", "Arial", "Helvetica", "sans-serif";
font-size: 9pt; color: #298583;background:#ffffff; font-weight: normal} .igray {font-family: "宋体";
font-size: 9pt;
color: #000000;
background:#ffffff;
font-weight: normal;
border-bottom: 1px solid #D7E0EC;
border-top: 0px solid #DADBE3;
border-right: 0px solid #DADBE3;
border-left: 0px solid #DADBE3;
}
.tabborder {
border:1px solid #ffffff;
}
.writetd {
text-align:left;
padding:6px;
}</style>
现在表单界面设计已经完成,效果如图:
步骤八在系统“公文表单设置”,将表单中需要加入的字段全部设置完成,然后进入“表单设计”界面,切换到“源码”,将代码粘贴拷贝到DW中
步骤九最后的工作就是把对应的字段复制后粘贴到刚才设计好的表单字段处,到此全部过程完成。