网页设计（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 ...
随机推荐
- 【踩坑】iconfont使用异常bug
你见过html页面上'x'字符变成打印机图标么?一般人应该没有. -----------------------诡异bug----------------------- 今天测试报了一个bug,说页面 ...
- C#之Redis为所欲为
一 Redis是一种支持多种数据结构的键值对数据库 1.1Redis下载地址 :https://github.com/MicrosoftArchive/Redis 建议下载 .msi结尾的应用程序进行 ...
- angular5学习笔记（deep in 路由）
最近接手了一个angular5的项目.项目本身是由不同的人开发的,所有代码结构风格本身就有很大不同,加上本身接触angular5也不久,之前都是使用1,所有自身压力还是很大的. 接手前几天当然是熟悉代 ...
- Codeforces Round #483 (Div. 2) D. XOR-pyramid
D. XOR-pyramid time limit per test 2 seconds memory limit per test 512 megabytes input standard inpu ...
- Linux 操作系统基础知识
1.操作系统总体介绍 •CPU: 就像人的大脑,主要负责相关事情的判断以及实际处理的机制.查询指令: cat /proc/cpuinfo•内存: 大脑中的记忆区块,将皮肤.眼睛等所收集到的信息记录起来 ...
- nuget的问题， NuGet 程序包还原失败
将项目中的packages.config 中引用移除. 1.使用nuget管理器,进行安装 2.下载对应dll,手动引入项目
- Go调用C代码，Cgo札记
http://www.myexception.cn/program/679738.html Go调用C代码,Cgo笔记 参考: 官方文档: http://golang.org/cmd/cgo/ htt ...
- 玩转Spring MVC(二)----MVC框架
早期程序员在编写代码时是没有一个规范的,系统的业务逻辑和数据库的访问时混合在一起的,不仅增加了大量的重复工作,而且增加了后期维护的难度. 后来,人们逐渐发现某些通用的功能是可以单独的封装起来的,这样就 ...
- python二维码生成器
周小董简书主页二维码.png 周小董博客主页二维码.png 现在,我们生活中到处可以看到二维码.它有啥好处呢?它具有信息容量大.可靠性高.可表示汉字及图象多种文字信息.保密防伪性强等优点. 我们生 ...
- HTML5 & MUI 界面样式
垂直居中+自动换行 样式效果如下所示,当文字没有超出一行时,显示如“备注信息”,当文字超出一行时,显示如“维修地点” HTML代码如下: <div class="mui-input-r ...