欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

网页设计(CSS&JS)

程序员文章站 2022-06-24 14:14:18
实验一 简单静态网页设计 一、 实验目的: 二、 实验内容: 根据提供的素材设计在线调查问卷。 三、 实验要求: 四、 实验学时:4学时 五、 实验步骤: 实验准备: 1.在硬盘上为本实验建立文件夹(以下称为“实验文件夹”)。 2.根据提供的素材设计在线调查问卷: (1) 从开始菜单启动记事本; ( ......

实验一  简单静态网页设计

一、 实验目的:

  1. 复习使用记事本编辑网页的方法。
  2. 熟悉不同表单控件类型的应用。
  3. 练习使用记事本在网页中添加表单与表单元素。

二、 实验内容:

根据提供的素材设计在线调查问卷。

三、 实验要求:

  1. 熟练掌握使用记事本进行简单网页编辑的方法。
  2. 能够区分不同表单元素的应用场景。
  3. 掌握表单与表单元素的元素名和属性对。

四、 实验学时:4学时

五、 实验步骤:

      实验准备  1.在硬盘上为本实验建立文件夹(以下称为“实验文件夹”)。  

        2.根据提供的素材设计在线调查问卷:

1) 从开始菜单启动记事本;

2) 在记事本中,录入一个最简合法html文档;

3) 设置该html文档首页如图。要求按照首页来设计页面index.html.使用的图片在image文件夹中。

 

 网页设计(CSS&JS)

 

4) 在首页点击提交后转向企业电子商务调查问卷.

5) 打开本实验提供的word文档questionnaire.doc,这个调查问卷比较长,浏览该调查问卷的内容。由于该调查问卷比较长,选取并标示该调查问卷中具有代表性的问题(更改一下文本背景),准备将它们在网页中进行实现,保存该word文档;

6) 在记事本中添加表单;

7) 在表单中插入表单元素,用于在网页中显示步骤(4)中标示的问题及答案;

8) 为表单添加提交和重置按钮;

9) 保存网页为questionaire.htm。

提示:本实验没有标准答案,但是在将word文档中的调查问题及答案移植到网页中时,要尽可能多地使用到讲过的表单元素(如文本框、单选按钮、复选按钮、下拉菜单/列表、框架等)。另外,网页上调查问卷的答案的表现形式与并不一定要与word中的一致,而是应该选择使用更符合需要的表单元素,例如对于答案选项比较多的问题来说,应该优先选用下拉菜单/列表,单选使用下拉菜单,多选使用列表。

六、 实验代码:

 博客.html

网页设计(CSS&JS)
  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>用&nbsp;户&nbsp;名:</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>密&nbsp;&nbsp;&nbsp;码:</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>性&nbsp;&nbsp;&nbsp;别:</td>
106             <td><input type="radio" name="de2" value="male">男&nbsp;&nbsp;<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="提交">&nbsp;&nbsp;&nbsp;
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

网页设计(CSS&JS)
  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>&nbsp;&nbsp;注册地:</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">国有&nbsp;
110          <input type="radio" name="a">集体&nbsp;
111          <input type="radio" name="a">民营&nbsp;
112          <input type="radio" name="a">外资&nbsp;
113          <input type="radio" name="a">合资&nbsp;
114          <input type="radio" name="a">股份制&nbsp;
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">广东邮政&nbsp;
121          <input type="radio" name="b1">ems&nbsp;
122          <input type="radio" name="b1">ups&nbsp;
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">本市企业 &nbsp;
126            <input type="radio" name="c1">异地企业)<br/>
127        <input type="checkbox" name="d">第三方物流企业(
128            <input type="radio" name="d1">本市企业 &nbsp;
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">是&nbsp;<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">是&nbsp;<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">是&nbsp;<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 

网页设计(CSS&JS)
 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>
反馈