网页设计（CSS&JS）
程序员文章站
2022-04-09 19:01:15
实验一 简单静态网页设计 一、 实验目的： 二、 实验内容： 根据提供的素材设计在线调查问卷。 三、 实验要求： 四、 实验学时：4学时 五、 实验步骤： 实验准备： 1.在硬盘上为本实验建立文件夹（以下称为“实验文件夹”）。 2.根据提供的素材设计在线调查问卷： （1） 从开始菜单启动记事本； （ ......
实验一 简单静态网页设计
一、 实验目的：
- 复习使用记事本编辑网页的方法。
- 熟悉不同表单控件类型的应用。
- 练习使用记事本在网页中添加表单与表单元素。
二、 实验内容：
根据提供的素材设计在线调查问卷。
三、 实验要求：
- 熟练掌握使用记事本进行简单网页编辑的方法。
- 能够区分不同表单元素的应用场景。
- 掌握表单与表单元素的元素名和属性对。
四、 实验学时：4学时
五、 实验步骤：
实验准备： 1.在硬盘上为本实验建立文件夹（以下称为“实验文件夹”）。
2.根据提供的素材设计在线调查问卷：
（1） 从开始菜单启动记事本；
（2） 在记事本中，录入一个最简合法html文档；
（3） 设置该html文档首页如图。要求按照首页来设计页面index.html.使用的图片在image文件夹中。
（4） 在首页点击提交后转向企业电子商务调查问卷.
（5） 打开本实验提供的word文档questionnaire.doc，这个调查问卷比较长，浏览该调查问卷的内容。由于该调查问卷比较长，选取并标示该调查问卷中具有代表性的问题（更改一下文本背景），准备将它们在网页中进行实现，保存该word文档；
（6） 在记事本中添加表单；
（7） 在表单中插入表单元素，用于在网页中显示步骤（4）中标示的问题及答案；
（8） 为表单添加提交和重置按钮；
（9） 保存网页为questionaire.htm。
提示：本实验没有标准答案，但是在将word文档中的调查问题及答案移植到网页中时，要尽可能多地使用到讲过的表单元素（如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等）。另外，网页上调查问卷的答案的表现形式与并不一定要与word中的一致，而是应该选择使用更符合需要的表单元素，例如对于答案选项比较多的问题来说，应该优先选用下拉菜单/列表，单选使用下拉菜单，多选使用列表。
六、 实验代码：
博客.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="gb2136">
5 <title>博客</title>
6 <style type="text/css">
7 body{
8 font-family:黑体，隶书;
9 font-size:18px;
10 margin:auto;
11 }
12 .top{
13 margin:auto;
14 width:100%;
15 float:left;
16 }
17 .left{
18 width:5%;
19 float:left;
20 height:auto;
21 }
22 .right{
23 width:6.3%;
24 height:auto;
25 float:right;
26 }
27 .left1{
28 width:24%;
29 float:left; /*文本的浮动*/
30 padding:0 10px; /*设置边线据内容的距离*/
31 height:auto;
32 }
33 .line{
34 border:1px green;
35 cellspacing:0;
36 cellpadding:0;
37 height:400px;
38 border-right-style:solid;
39 border-left-style:none;
40 border-bottom-style:none;
41 border-top-style:none;
42 }
43 div{
44 box-sizing:border-box;
45 width:600px;
46 line-height:1.5;
47 }
48
49 </style>
50 <script language="javascript">
51 <!--
52 function check(){
53 var p = document.form1.dengru1.value;
54 var p1 = document.form1.dengru2.value;
55 if(p1!==p){
56 alert("密码不一致");
57 return false;
58 }else{
59
60 }
61
62 }
63 //-->
64
65 </script>
66 </head>
67 <body>
68 <img src="image/01.gif" class="top"/>
69 <img src="image/02.gif" class="left"/>
70 <div class="left1">
71 <img src="image/reg.gif"/>
72 <b>注册帮助</b><br/>
73 <ul>
74 <li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li>
75 <br/>
76 <li>密码：请设定在6-20位之间。</li>
77 <br/>
78 <li>确认密码：确认密码必须与密码一致。</li>
79 <br/>
80 <li>email：请填写有效的email地址，以便于与您联系。</li>
81 </ul>
82 </div>
83 <div class="left1" style="width:100px"><table class="line"></table></div>
84 <form name="form1" action="调查问卷.html" onsubmit="return check()">
85 <div class="left1">
86 <div style="height:80px"></div>
87 <table border=0>
88 <tr></tr>
89 <tr>
90 <td>用 户 名：</td>
91 <td><input type="text" name="dengru" placeholder="长度控制在3-20个字符之内" size=31 pattern="^.{3,20}$" required="required"></td>
92 </tr>
93 <tr></tr>
94 <tr>
95 <td>密 码：</td>
96 <td><input type="password" name="dengru1" placeholder="请设定在6-20位之间" size=32 pattern="^.{6,20}$" required="required" ></td>
97 </tr>
98 <tr></tr>
99 <tr>
100 <td>确认密码：</td>
101 <td><input type="password" name="dengru2" size=32 pattern="^.{6,20}$" required="required"></td>
102 </tr>
103 <tr></tr>
104 <tr>
105 <td>性 别：</td>
106 <td><input type="radio" name="de2" value="male">男 <input type="radio" name="de2" value="female">女</td>
107 </tr>
108 <tr></tr>
109 <tr>
110 <td>e-mail：</td>
111 <td><input type="email" name="dengru3"size=40></td>
112 </tr>
113 </table>
114 <br/>
115 <input type="submit" name="submit" value="提交">
116 <input type="reset" name="reset" value="重置">
117 </div>
118 </form>
119 <img src="image/04.gif" class="right"/>
120 <img src="image/03.jpg" class="top"/>
121 </body>
122 </html>
调查问卷.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="gb2136">
5 <style type="text/css">
6 body{
7 background-color:#dedede;
8 width:640px;
9 margin:auto; /*设置页面边距*/
10 }
11 .headline{
12 font-size:22px;
13 font-family:宋体;
14 text-align:center; /*设置居中*/
15 font-weight:bold; /*设置为粗体*/
16 }
17 .top{
18 font-size:10。5px; /*字体大小*/
19 font-family:楷体;
20 line-height:2; /*设置行高为1.5*/
21 }
22 .right{
23 text-align:right;
24 line-height:2;
25 }
26 .left{
27 text-align:left;
28 }
29 .down{
30 font-size:14px;
31 font-family:宋体;
32 line-height:2;
33 text-align:left;
34 }
35 .headline1{
36 font-size:16px;
37 font-family:黑体;
38 text-align:left; /*设置左对齐*/
39 font-weight:bold; /*粗体*/
40 }
41 .line{
42 border:1px solid #dedede;
43 border-bottom:1px solid #000000;
44 background-color:#dedede;
45
46
47 }
48 div{
49 box-sizing:border-box; /*设置显示盒子模式*/
50 line-height:1.5;
51 border-size:100;
52 }
53 </style>
54 <script language="javascript">
55 <!--
56 function checkcount(){
57 var q9box = document.getelementsbyname("q9");
58 var count = 0;
59 for(i = 0; i< q9box.length;i++){
60 if(q9box[i].checked){
61 count += 1;
62 }
63 }
64 if(count > 4){
65 alert("最多只能选4个");
66
67 return false;
68 }
69 }
70 //-->
71 </script>
72 <title>调查问卷</title>
73 </head>
74 <body>
75 <div class="top">
76 <div class="headline">
77 <h2>企业电商务调查问卷</h2>
78 </div>
79 <div>尊敬的先生/女士：<br/></div>
80 <div style="text-indent:3em">您好！为了了解目前企业开展电子商务的状况和问题，我们课题组希望您能协助填写<br/>这份调查表。在此，我们郑重承诺，调查结果仅供研究使用。如果您有兴趣和需要，我们可<br/>以将最终的统计和分析结果通过电子邮件的方式反馈给您。<br/></div>
81 <div style="text-indent:3em">本次调查对于电子商务的界定是：通过计算机网络完成的购买和销售货物以及服务的<br/>行为，这些货物或服务的订单是通过相关网络下达的，但是支付和物流可以是网下进行的。<br/>通过传真、电话和电子邮件达成的交易不算在内。<br/></div>
82 <div style="text-indent:3em">非常感谢您的大力支持！<br/><br/></div>
83 <div class="right" >广东省电子商务发展规划前期研究课题组</div>
84 <div style="border:1px solid #000000"></div>
85 </div>
86
87 <form name="form2" action="反馈.html" onsubmit="return check()" >
88 <div class="down">
89 <div class="headline1">
90 <h3>一、企业基本简况</h3>
91 </div>
92 <table style="width:500px;height:150px" border=0>
93 <tr>
94 <td>1.企业名称： <input type="text" name="u" class="line" size=20> 注册地：</td>
95 <td><input type="text" name="u" class="line" size=15></td>
96 </tr>
97 <tr>
98 <td>2.您在所在企业的职务（职位）： <input type="text" name="u" class="line" size=15></td>
99 </tr>
100 <tr>
101 <td>3. 企业成立时间： <input type="text" name="u" class="line" size=20></td>
102 </tr>
103 <tr>
104 <td>4. 企业所在行业： <input type="text" name="u" class="line" size=20></td>
105 </tr>
106 </table>
107 <u><b style="font-size:17px">以下选择题，若无特别声明，皆为多项选择题</b></u><br/>
108 <p>5.您所在企业的所有制形式为：（单选）<br/>
109 <input type="radio" name="a">国有
110 <input type="radio" name="a">集体
111 <input type="radio" name="a">民营
112 <input type="radio" name="a">外资
113 <input type="radio" name="a">合资
114 <input type="radio" name="a">股份制
115 <input type="radio" name="a">其他<input type="text" name="u" class="line" size=10>
116 </p>6.2005年，您所在企业的销售收入为（单位：人民币）： <input type="text" name="u" class="line" size=10>万元，比上年增<br/>
117 长 <input type="text" name="u" class="line" size=10> ％。
118 <p>7. 您所在企业应用到哪些物流服务？<br/>
119 <input type="checkbox" name="b">网络型邮政物流企业（具体为:
120 <input type="radio" name="b1">广东邮政
121 <input type="radio" name="b1">ems
122 <input type="radio" name="b1">ups
123 <input type="radio" name="b1">其他<input type="text" name="u" class="line" size=10>）<br/>
124 <input type="checkbox" name="c">运输仓储公司（
125 <input type="radio" name="c1">本市企业
126 <input type="radio" name="c1">异地企业）<br/>
127 <input type="checkbox" name="d">第三方物流企业（
128 <input type="radio" name="d1">本市企业
129 <input type="radio" name="d1">异地企业）<br/>
130 <input type="checkbox" name="e">企业自行解决<br/>
131 <input type="checkbox" name="f">其他<input type="text" name="u" class="line" size=10>
132 </p>
133 8.请列出贵企业所在行业的主要企业情况<br/>
134 <table border=1 cellspacing="0" cellpadding="0" style="width:600px;height:200px;text-align:center">
135 <tr>
136 <td>企业名称</td>
137 <td>该企业的竞争优势</td>
138 <td>是否已开展电子商务</td>
139 </tr>
140 <tr>
141 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
142 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
143 <td><input type="radio" name="g">是 <input type="radio" name="g">否</td>
144 </tr>
145 <tr>
146 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
147 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
148 <td><input type="radio" name="g1">是 <input type="radio" name="g1">否</td>
149 </tr>
150 <tr>
151 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
152 <td><input type="text" name="in" style="border:1px solid #dedede;background-color:#dedede"></td>
153 <td><input type="radio" name="g2">是 <input type="radio" name="g2">否</td>
154 </tr>
155 </table>
156 <div class="headline1">
157 <h3>二、企业信息化总体状况</h3>
158 </div>
159 <p>9.您所在企业网站的更新周期是多长时间？（单选）
160 <select>
161 <option value ="0">单选，请下拉</option>
162 <option value="1">每天</option>
163 <option value="2">每周</option>
164 <option value="3">每月</option>
165 <option value="4">每季度</option>
166 <option value="5">半年</option>
167 <option value="6">半年以上</option>
168 </select>
169 </p>
170 10.您所在企业最需要的信息包括（选择其中最重要的4项信息）：<br/>
171 <table>
172 <tr>
173 <td><input type="checkbox" name="q9" onclick="checkcount()">产品开发 </td>
174 <td><input type="checkbox" name="q9" onclick="checkcount()">生产技术 </td>
175 <td><input type="checkbox" name="q9" onclick="checkcount()">技术引进 </td>
176 <td><input type="checkbox" name="q9" onclick="checkcount()">市场行情</td>
177 </tr>
178 <tr>
179 <td><input type="checkbox" name="q9" onclick="checkcount()">竞争对手 </td>
180 <td><input type="checkbox" name="q9" onclick="checkcount()">政策法规 </td>
181 <td><input type="checkbox" name="q9" onclick="checkcount()">薪酬水平 </td>
182 <td><input type="checkbox" name="q9" onclick="checkcount()">人才信息 </td>
183 </tr>
184 <tr>
185 <td><input type="checkbox" name="q9" onclick="checkcount()">社交活动 </td>
186 <td><input type="checkbox" name="q9" onclick="checkcount()">合作伙伴信息 </td>
187 <td><input type="checkbox" name="q9" onclick="checkcount()">企业绩效</td>
188 <td><input type="checkbox" name="q9" onclick="checkcount()">行业动态 </td>
189 </tr>
190 <tr>
191 <td><input type="checkbox" name="q9" onclick="checkcount()">客户信息</td>
192 <td><input type="checkbox" name="q9" onclick="checkcount()">供应商信息 </td>
193 <td><input type="checkbox" name="q9" onclick="checkcount()">产品价格</td>
194 <td><input type="checkbox" name="q9" onclick="checkcount()">质量管理 </td>
195 </tr>
196 <tr>
197 <td><input type="checkbox" name="q9" onclick="checkcount()">财务状况 </td>
198 <td><input type="checkbox" name="q9" onclick="checkcount()">投资融资 </td>
199 <td><input type="checkbox" name="q9" onclick="checkcount()">市场预测</td>
200 <td><input type="checkbox" name="q9" onclick="checkcount()">员工关系 </td>
201 </tr>
202 <tr>
203 <td><input type="checkbox" name="q9" onclick="checkcount()">其他 <input type="text" name="u" class="line" size=10> </td>
204 </tr>
205 </table>
206 <br/>
207 <p>11.您所在企业是否建立了以下电子商务系统，各个系统的作用如何？<br/>
208 <table border=0 style="width:500px;height:150px;text-align:center">
209 <tr><th></th><th>非常重要</th><th>重要</th><th>一般</th><th>不重要</th><th>不存在</th></tr>
210 <tr>
211 <td style="text-align:left"><input type="checkbox" name="w10">没有重视电子商务规划</td>
212 <td><input type="radio" name="l">5</td>
213 <td><input type="radio" name="l">4</td>
214 <td><input type="radio" name="l">3</td>
215 <td><input type="radio" name="l">2</td>
216 <td><input type="radio" name="l">1</td>
217 </tr>
218 <tr>
219 <td style="text-align:left"><input type="checkbox" name="w10">企业之间存在利益冲突</td>
220 <td><input type="radio" name="l1">5</td>
221 <td><input type="radio" name="l1">4</td>
222 <td><input type="radio" name="l1">3</td>
223 <td><input type="radio" name="l1">2</td>
224 <td><input type="radio" name="l1">1</td>
225 </tr>
226 <tr>
227 <td style="text-align:left"><input type="checkbox" name="w10">管理理念与技术冲突</td>
228 <td><input type="radio" name="l2">5</td>
229 <td><input type="radio" name="l2">4</td>
230 <td><input type="radio" name="l2">3</td>
231 <td><input type="radio" name="l2">2</td>
232 <td><input type="radio" name="l2">1</td>
233 </tr>
234 <tr>
235 <td style="text-align:left"><input type="checkbox" name="w10">外部环境与技术冲突</td>
236 <td><input type="radio" name="l3">5</td>
237 <td><input type="radio" name="l3">4</td>
238 <td><input type="radio" name="l3">3</td>
239 <td><input type="radio" name="l3">2</td>
240 <td><input type="radio" name="l3">1</td>
241 </tr>
242 <tr>
243 <td style="text-align:left"><input type="checkbox" name="w10">企业文化保守</td>
244 <td><input type="radio" name="l4">5</td>
245 <td><input type="radio" name="l4">4</td>
246 <td><input type="radio" name="l4">3</td>
247 <td><input type="radio" name="l4">2</td>
248 <td><input type="radio" name="l4">1</td>
249 </tr>
250 <tr>
251 <td style="text-align:left"><input type="checkbox" name="w10">其他<input type="text" name="u" class="line" size=20></td>
252 </tr>
253 </table>
254 </p>
255 <p>12.您认为企业要进一步发展电子商务，需要所在地方*哪些支持？<br/>
256 <input type="text" name="u" class="line" size=70><br/>
257 <input type="text" name="u" class="line" size=70><br/>
258 <input type="text" name="u" class="line" size=70><br/>
259 </p>
260 <b>问卷填写人签名：</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=20><b>单位负责人签名：</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=20><br/>
261 <b>问卷填写人联系电话：</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=15><b>单位盖章：</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=25><br/>
262 <b>问卷填写日期：</b><input type="text" name="u" style="border:1px solid #dedede;background-color:#dedede" size=40><br/><br/>
263 <pre><input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"></pre>
264 </div>
265 </form>
266
267 </body>
268 </html>
反馈.html
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="gb2136">
5 <title>反馈</title>
6 <script language="javascript">
7 alert("感谢您的参与！");
8 </script>
9 </head>
10 <body>
11 </body>
12 </html>
上一篇： SQLServer之创建链接服务器
下一篇： 图学ES6-3.变量的解构赋值