网页设计（CSS&JS）
实验一 简单静态网页设计
一、 实验目的：
- 复习使用记事本编辑网页的方法。
- 熟悉不同表单控件类型的应用。
- 练习使用记事本在网页中添加表单与表单元素。
二、 实验内容：
根据提供的素材设计在线调查问卷。
三、 实验要求：
- 熟练掌握使用记事本进行简单网页编辑的方法。
- 能够区分不同表单元素的应用场景。
- 掌握表单与表单元素的元素名和属性对。
四、 实验学时：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
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<title>博客</title>
<style type="text/css">
body{
font-family:黑体，隶书;
font-size:18px;
margin:auto;
}
.top{
margin:auto;
width:100%;
float:left;
}
.left{
width:5%;
float:left;
height:auto;
}
.right{
width:6.3%;
height:auto;
float:right;
}
.left1{
width:24%;
float:left; /*文本的浮动*/
padding:0 10px; /*设置边线据内容的距离*/
height:auto;
}
.line{
border:1px green;
cellspacing:0;
cellpadding:0;
height:400px;
border-right-style:solid;
border-left-style:none;
border-bottom-style:none;
border-top-style:none;
}
div{
box-sizing:border-box;
width:600px;
line-height:1.5;
} </style>
<script language="JavaScript">
<!--
function check(){
var p = document.form1.Dengru1.value;
var p1 = document.form1.Dengru2.value;
if(p1!==p){
alert("密码不一致");
return false;
}else{ } }
//--> </script>
</head>
<body>
<img src="data:image/01.gif" class="top"/>
<img src="data:image/02.gif" class="left"/>
<div class="left1">
<img src="data:image/reg.gif"/>
<b>注册帮助</b><br/>
<ul>
<li>会员名：为会员登录网站的通行证，长度控制在3-20个字符之内。</li>
<br/>
<li>密码：请设定在6-20位之间。</li>
<br/>
<li>确认密码：确认密码必须与密码一致。</li>
<br/>
<li>Email：请填写有效的Email地址，以便于与您联系。</li>
</ul>
</div>
<div class="left1" style="width:100px"><table class="line"></table></div>
<form name="form1" action="调查问卷.html" onSubmit="return check()">
<div class="left1">
<div style="height:80px"></div>
<table border=0>
<tr></tr>
<tr>
<td>用 户 名：</td>
<td><input type="text" name="Dengru" placeholder="长度控制在3-20个字符之内" size=31 pattern="^.{3,20}$" required="required"></td>
</tr>
<tr></tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="Dengru1" placeholder="请设定在6-20位之间" size=32 pattern="^.{6,20}$" required="required" ></td>
</tr>
<tr></tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="Dengru2" size=32 pattern="^.{6,20}$" required="required"></td>
</tr>
<tr></tr>
<tr>
<td>性 别：</td>
<td><input type="radio" name="De2" value="Male">男 <input type="radio" name="De2" value="Female">女</td>
</tr>
<tr></tr>
<tr>
<td>E-mail：</td>
<td><input type="email" name="Dengru3"size=40></td>
</tr>
</table>
<br/>
<input type="submit" name="Submit" value="提交">
<input type="reset" name="Reset" value="重置">
</div>
</form>
<img src="data:image/04.gif" class="right"/>
<img src="data:image/03.jpg" class="top"/>
</body>
</html>
博客
调查问卷.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<style type="text/css">
body{
background-color:#DEDEDE;
width:640px;
margin:auto; /*设置页面边距*/
}
.headline{
font-size:22px;
font-family:宋体;
text-align:center; /*设置居中*/
font-weight:bold; /*设置为粗体*/
}
.top{
font-size:10。5px; /*字体大小*/
font-family:楷体;
line-height:2; /*设置行高为1.5*/
}
.right{
text-align:right;
line-height:2;
}
.left{
text-align:left;
}
.down{
font-size:14px;
font-family:宋体;
line-height:2;
text-align:left;
}
.headline1{
font-size:16px;
font-family:黑体;
text-align:left; /*设置左对齐*/
font-weight:bold; /*粗体*/
}
.line{
border:1px solid #DEDEDE;
border-bottom:1px solid #000000;
background-color:#DEDEDE; }
div{
box-sizing:border-box; /*设置显示盒子模式*/
line-height:1.5;
border-size:100;
}
</style>
<script language="JavaScript">
<!--
function checkCount(){
var q9box = document.getElementsByName("q9");
var count = 0;
for(i = 0; i< q9box.length;i++){
if(q9box[i].checked){
count += 1;
}
}
if(count > 4){
alert("最多只能选4个"); return false;
}
}
//-->
</script>
<title>调查问卷</title>
</head>
<body>
<div class="top">
<div class="headline">
<h2>企业电商务调查问卷</h2>
</div>
<div>尊敬的先生/女士：<br/></div>
<div style="text-indent:3em">您好！为了了解目前企业开展电子商务的状况和问题，我们课题组希望您能协助填写<br/>这份调查表。在此，我们郑重承诺，调查结果仅供研究使用。如果您有兴趣和需要，我们可<br/>以将最终的统计和分析结果通过电子邮件的方式反馈给您。<br/></div>
<div style="text-indent:3em">本次调查对于电子商务的界定是：通过计算机网络完成的购买和销售货物以及服务的<br/>行为，这些货物或服务的订单是通过相关网络下达的，但是支付和物流可以是网下进行的。<br/>通过传真、电话和电子邮件达成的交易不算在内。<br/></div>
<div style="text-indent:3em">非常感谢您的大力支持！<br/><br/></div>
<div class="right" >广东省电子商务发展规划前期研究课题组</div>
<div style="border:1px solid #000000"></div>
</div> <form name="form2" action="反馈.html" onSubmit="return check()" >
<div class="down">
<div class="headline1">
<h3>一、企业基本简况</h3>
</div>
<table style="width:500px;height:150px" border=0>
<tr>
<td>1.企业名称： <input type="text" name="u" class="line" size=20> 注册地：</td>
<td><input type="text" name="u" class="line" size=15></td>
</tr>
<tr>
<td>2.您在所在企业的职务（职位）： <input type="text" name="u" class="line" size=15></td>
</tr>
<tr>
<td>3. 企业成立时间： <input type="text" name="u" class="line" size=20></td>
</tr>
<tr>
<td>4. 企业所在行业： <input type="text" name="u" class="line" size=20></td>
</tr>
</table>
<u><b style="font-size:17px">以下选择题，若无特别声明，皆为多项选择题</b></u><br/>
<p>5.您所在企业的所有制形式为：（单选）<br/>
<input type="radio" name="a">国有
<input type="radio" name="a">集体
<input type="radio" name="a">民营
<input type="radio" name="a">外资
<input type="radio" name="a">合资
<input type="radio" name="a">股份制
<input type="radio" name="a">其他<input type="text" name="u" class="line" size=10>
</p>6.2005年，您所在企业的销售收入为（单位：人民币）： <input type="text" name="u" class="line" size=10>万元，比上年增<br/>
长 <input type="text" name="u" class="line" size=10> ％。
<p>7. 您所在企业应用到哪些物流服务？<br/>
<input type="checkbox" name="b">网络型邮政物流企业（具体为:
<input type="radio" name="b1">广东邮政
<input type="radio" name="b1">EMS
<input type="radio" name="b1">UPS
<input type="radio" name="b1">其他<input type="text" name="u" class="line" size=10>）<br/>
<input type="checkbox" name="c">运输仓储公司（
<input type="radio" name="c1">本市企业
<input type="radio" name="c1">异地企业）<br/>
<input type="checkbox" name="d">第三方物流企业（
<input type="radio" name="d1">本市企业
<input type="radio" name="d1">异地企业）<br/>
<input type="checkbox" name="e">企业自行解决<br/>
<input type="checkbox" name="f">其他<input type="text" name="u" class="line" size=10>
</p>
8.请列出贵企业所在行业的主要企业情况<br/>
<table border=1 cellspacing="0" cellpadding="0" style="width:600px;height:200px;text-align:center">
<tr>
<td>企业名称</td>
<td>该企业的竞争优势</td>
<td>是否已开展电子商务</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g">是 <input type="radio" name="g">否</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g1">是 <input type="radio" name="g1">否</td>
</tr>
<tr>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="text" name="in" style="border:1px solid #DEDEDE;background-color:#DEDEDE"></td>
<td><input type="radio" name="g2">是 <input type="radio" name="g2">否</td>
</tr>
</table>
<div class="headline1">
<h3>二、企业信息化总体状况</h3>
</div>
<p>9.您所在企业网站的更新周期是多长时间？（单选）
<select>
<option value ="0">单选，请下拉</option>
<option value="1">每天</option>
<option value="2">每周</option>
<option value="3">每月</option>
<option value="4">每季度</option>
<option value="5">半年</option>
<option value="6">半年以上</option>
</select>
</p>
10.您所在企业最需要的信息包括（选择其中最重要的4项信息）：<br/>
<table>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">产品开发 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">生产技术 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">技术引进 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">市场行情</td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">竞争对手 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">政策法规 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">薪酬水平 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">人才信息 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">社交活动 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">合作伙伴信息 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">企业绩效</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">行业动态 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">客户信息</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">供应商信息 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">产品价格</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">质量管理 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">财务状况 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">投资融资 </td>
<td><input type="checkbox" name="q9" onclick="checkCount()">市场预测</td>
<td><input type="checkbox" name="q9" onclick="checkCount()">员工关系 </td>
</tr>
<tr>
<td><input type="checkbox" name="q9" onclick="checkCount()">其他 <input type="text" name="u" class="line" size=10> </td>
</tr>
</table>
<br/>
<p>11.您所在企业是否建立了以下电子商务系统，各个系统的作用如何？<br/>
<table border=0 style="width:500px;height:150px;text-align:center">
<tr><th></th><th>非常重要</th><th>重要</th><th>一般</th><th>不重要</th><th>不存在</th></tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">没有重视电子商务规划</td>
<td><input type="radio" name="l">5</td>
<td><input type="radio" name="l">4</td>
<td><input type="radio" name="l">3</td>
<td><input type="radio" name="l">2</td>
<td><input type="radio" name="l">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">企业之间存在利益冲突</td>
<td><input type="radio" name="l1">5</td>
<td><input type="radio" name="l1">4</td>
<td><input type="radio" name="l1">3</td>
<td><input type="radio" name="l1">2</td>
<td><input type="radio" name="l1">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">管理理念与技术冲突</td>
<td><input type="radio" name="l2">5</td>
<td><input type="radio" name="l2">4</td>
<td><input type="radio" name="l2">3</td>
<td><input type="radio" name="l2">2</td>
<td><input type="radio" name="l2">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">外部环境与技术冲突</td>
<td><input type="radio" name="l3">5</td>
<td><input type="radio" name="l3">4</td>
<td><input type="radio" name="l3">3</td>
<td><input type="radio" name="l3">2</td>
<td><input type="radio" name="l3">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">企业文化保守</td>
<td><input type="radio" name="l4">5</td>
<td><input type="radio" name="l4">4</td>
<td><input type="radio" name="l4">3</td>
<td><input type="radio" name="l4">2</td>
<td><input type="radio" name="l4">1</td>
</tr>
<tr>
<td style="text-align:left"><input type="checkbox" name="w10">其他<input type="text" name="u" class="line" size=20></td>
</tr>
</table>
</p>
<p>12.您认为企业要进一步发展电子商务，需要所在地方政府哪些支持？<br/>
<input type="text" name="u" class="line" size=70><br/>
<input type="text" name="u" class="line" size=70><br/>
<input type="text" name="u" class="line" size=70><br/>
</p>
<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/>
<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/>
<b>问卷填写日期：</b><input type="text" name="u" style="border:1px solid #DEDEDE;background-color:#DEDEDE" size=40><br/><br/>
<pre><input type="submit" name="Submit" value="提交"> <input type="reset" name="Reset" value="重置"></pre>
</div>
</form> </body>
</html>
调查问卷
反馈.html
<!DOCTYPE html>
<html>
<head>
<meta charset="GB2136">
<title>反馈</title>
<script language="JavaScript">
alert("感谢您的参与！");
</script>
</head>
<body>
</body>
</html>
反馈
网页设计（CSS&JS）的更多相关文章
- 网页设计之js
1.JavaScript概述 javaScript与ECMAScript的相爱相杀 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组 ...
- 手机web——自适应网页设计（html/css控制）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name=" ...
- 【转】手机web——自适应网页设计（html/css控制）
手机web——自适应网页设计(html/css控制) 就目前形势来看,Web App 正是眼下的一个趋势和潮流,但是,对于Web App的设计可能大家有的不是很了解,下面就将整理好的网页设计的技巧奉献 ...
- 手机web——自适应网页设计（html/css控制） - 51CTO.COM
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- 网页基础:网页设计(我所知道的所有的html和css代码(含H5和CSS3)),如有错误请批评指正
最基础的网页设计,就是给你一个图片你做成一个网页,当然,我的工作是C#,个人网页的功底不是很高首先先认识一下网页的一些相关知识: 一般的,现在一个html网页一般包含html文件,css文件,js文件 ...
- 手机web——自适应网页设计（html/css控制）【转】
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- 手机web——自适应网页设计（html/css控制）http://mobile.51cto.com/ahot-409516.htm
http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的 ...
- 手机web——自适应网页设计（html/css控制）（转）
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. <meta name="v ...
- HTML学习笔记——标准网页设计+使用CSS、Javascript
一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离. 内容 + 表现 = 页面 --- 即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...
随机推荐
- sql server按符号截取字符串
http://www.360doc.com/content/12/0626/13/1912775_220523992.shtml
- CSS+DIV定位分析(relative,absolute,static,fixed)
在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所 ...
- 27.app后端搭建聊天服务器的经历
现在,聊天功能已经成了社交app的标配了.但是,众多web开发出生的程序员对聊天相关的服务的不了解,带来了很多开发上的困扰.在这篇文章中,根据下面3个方面,谈谈聊天服务. 1. 聊天服务的技 ...
- 玩转web之ligerui(二)---前缀编码生成树（分级码）实现树型表格
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 背景: 在ligerui中(其他uI可能也大同小异),实现树形表格可以通过父子节点,也可以通过前缀编码生成树去实现,而使 ...
- Android 实现个性的ViewPager切换动画 实战PageTransformer（兼容Android3.0以下）
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/40411921,本文出自:[张鸿洋的博客] 1.概述 之前写过一篇博文:Andro ...
- CSS布局-圣杯布局
圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, . ...
- 从零开始学习 Docker
这篇文章是我学习 Docker 的记录,大部分内容摘抄自 <<Docker - 从入门到实践>> 一书,并非本人原创.学习过程中整理成适合我自己的笔记,其中也包含了我自己的 ...
- Oracle-14:PLSQL
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- PL/SQL PL/SQL(Procedural Language):过程化sql语言! 在原本的sql语句之 ...
- 求第n个丑数
参考http://www.cppblog.com/zenliang/articles/131094.html 什么是因子:因子*因子=乘积数如果一个数是丑数,那么这个数是2,3,5的乘积的结果.比如: ...
- MAC下Intellij IDEA常用快捷键
alt+f7 : 查找在哪里使用 command+alt+f7 : 这个是查找选中的字符在工程中出现的地方,可以不是方法变量类等,这个和上面的有区别的 command+F7 : 可以查询当前元素在当前 ...