网页设计
网站开发流程：
网站的创建需要经历前期准备(需求分析)、中期制作和后期测试发布3个大的阶段。前期准备包括了解网站的业务背景、明确网站的设计风格、确定网站的内容等;中期制作主要包括创建站点、制作页面、构建样式等;后期的测试和发布工作包括检查页面效果是否美观、链接是否完好、是否与浏览器兼容，以及如何发布网站等。
步骤：
网站开发流程从整体上来说可以分为3大部分，分别为网站设计、网站制作和后期维护，在这三部分中，我着重介绍的是网站制作部分，强调2个要点的讲解：搭建网页主题结构层、搭建网页样式层。下面详细的介绍一下网站的开发流程。
步骤1：确定主题
可以分为分析策划和资料收集两个部分。制作网站前，首先需要分析网站的功能及建站的目的，确定网站的用户群和网站内容，即确定网站的主题。在确定主题后，可绘制出网站架构图，并搜集建站所需的相关资料和素材。另外，可要求客户提供与公司相关的文字及图像等资料，如公司介绍、产品图像等。
步骤2:设计页面
网页设计师与客户沟通，了解客户的基本要求后，制定网站建设方案并使用Photoshop 等图像处理软件进行页面效果图设计。页面效果图主要包括网站首页效果图和各频道首页效果图，将效果图设计好后交给客户查看，客户查看后提出修改意见，设计人员根据客户意见进行修改，最终确定网页页面效果图。
步骤3:效果图切片
在效果图得到客户认可后，设计师可使用Photoshop等图像处理软件中的切片工具将效果图切制并保存为IPG. GIF或PNG格式的小图像，将它们作为制作网页的图像素材。
提示：切割效果图时要考虑后期的布局方法，根据布局的需要进行切割。
步骤4:设置站点
从这一步骤开始进入到网页制作阶段。首先在本地磁盘创建网站根文件夹及子文件夹，并将制作网页需要的素材资源分类放置在各文件夹中，之后在网页制作软件Dreamweaver 中定义站点。
步骤5:制作网页
网页的制作可以分为结构层制作和样式，行为层制作两部分。结构层制作就是使用HTML代码搭建网页的主体结构，如文字，图像、超链接等，可以直接编写代码来实现，也可以在Dreamweaver的可视化界面中操作。在结构层制作好后，就 可以使用CSS (层叠祥式表)及JavaScript (动态脚本语言)来制作网页的样式层及行为层，完成网页的布局和外观设置。
步骤6:测试上传网站
在将网站上传到服务器前，需要对其进行测试及优化。测试包括兼容性测试，超链接测试等;优化是尽可能减小网页文件的体积及日后发生错误的概率，完成测试和优化后，就可以利用FTP工具将网站发布到所申请的空间服务器上。网站上传后，可继续通过浏览器进行实地测试。
步骤7:网站推广
网站上传后， 需要进行宣传和推广，以提高网站的访问量及知名度，推广网站的方法有很多，如搜索引擎推广、群发电子邮件、借助同类网站留言，加入友情链接，传统媒体宣传等。
步骤8:维护更新
制作好网站后，还需要经常对其进行维护和更新，才能吸引浏览者。
注：因为我学习使用的软件是dreamweaver，dreamweaver对新手比较友好，但依赖性太强，而且这玩意儿存储网页的内存与其他开发软件相比占据太大，还是建议大家尽量不要去使用。
案例
下面通过几个案例来使大家更清楚的明白网页是如何开发的？
- 表格
由图可以看出，本案例中表格的标题行、单、双行各有不同的背景色。为便于理解，我们将整个案例分为两部分进行制作，第一部分主要构建表格的HTML结构，第二部分使用CSS美化表格。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/沧桑s">
body{
font-size:14px;
}
table{
border-collapse:collapse;
width:800px;
margin:0px auto;
}
th{
background-image:url(../my%20web/%E3%80%8A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A1%88%E4%BE%8B%E6%95%99%E7%A8%8B%E3%80%8B%E7%B4%A0%E6%9D%90/%E7%AC%AC6%E7%AB%A0/task1/image/title.gif);
background-repeat:repeat-x;
height:25px;
line-height:25px;
color:#FFFFFF;
border:1px solid#5F5F5F;
padding:0 2px 0;
}
td{
border:1px solid#5F5F5F;
height:25px;
line-height:25px;
padding-left:5px;
}
.row{
background-color:#D7D7D7;
color:#000000;
}
</甩头yle>
</head>
<body><table width="800" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="5" scope="col">2012世界杯分组表</th>
</tr>
<tr class="row">
<td>A组</td>
<td>南非</td>
<td>墨西哥</td>
<td>乌拉圭</td>
<td>法国</td>
</tr>
<tr>
<td>B组</td>
<td>阿根廷</td>
<td>韩国</td>
<td>尼日利亚</td>
<td>希腊</td>
</tr>
<tr class="row">
<td>C组</td>
<td>英格兰</td>
<td>美国</td>
<td>阿尔及利亚</td>
<td>斯洛文尼亚</td>
</tr>
<tr>
<td>D组</td>
<td>德国</td>
<td>澳大利亚</td>
<td>加纳</td>
<td>塞尔维亚</td>
</tr>
<tr class="row">
<td>E组</td>
<td>荷兰</td>
<td>日本</td>
<td>喀麦隆</td>
<td>丹麦</td>
</tr>
<tr>
<td>F组</td>
<td>意大利</td>
<td>新西兰</td>
<td>巴拉圭</td>
<td>斯洛伐克</td>
</tr>
<tr class="row">
<td>G组</td>
<td>巴西</td>
<td>朝鲜</td>
<td>科特迪瓦</td>
<td>葡萄牙</td>
</tr>
<tr>
<td>H组</td>
<td>西班牙</td>
<td>洪都拉斯</td>
<td>智利</td>
<td>瑞士</td>
</tr>
</table>
</body>
</回头ml>
- 导航栏
导航栏的主要功能是通过超链接实现从本页面跳转到浏览者想要查看的其他页面，其中鼠标移动到导航栏上的某个菜单项时一般会有变色效果。一个好的导航栏应让用户能快捷、准确地访问网站要展现的主要内容，同时导航栏的风格也要与网站本身的风格相匹配。
制作代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/沧桑s">
#topmenu{
background:#515151;
font-size:14px;
color:#ffffff;
height:27px;
}
#topmenu a{
float:left;
width:100px;
width:#FFF;
text-decoration:none;
text-align:center;
line-height:27px;
}
#topmenu a:hover{
background:#f00;
color:#fff;
}
</甩头yle>
</head>
<body>
<nav id="topmenu">
<a href="#">雪域西藏</a>
<a href="#">天府四川</a>
<a href="#">稻城亚丁</a>
<a href="#">神奇九寨</a>
<a href="#">永恒三峡</a>
<a href="#">雄秀峨眉</a>
<a href="#">川藏万里</a>
<a href="#">城市驿站</a>
<a href="#">出国资讯</a>
</nav>
</body>
</回头ml>
- 带下拉菜单的横向导航栏
在不使用javascript 的情况下制作带下拉菜单的导航栏，需要合理利用Css的display属性，通过设置display属性的值来完成菜单的显示和隐藏。
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/沧桑s">
*{
margin:0;
padding:0;
}
li{
list-style:none;
text-align:center;
line-height:24px;
}
a{
text-decoration:none;
color:#333333;
font-size:12px;
line-height:24px;
display:block;
}
nav ul li{
width:120px;
float:left;
border:1px #333 dashed;
background:#FFD2D2;
}
nav ul li ul{
display:none;
}
nav ul li a:hover{
color:#fff;
background-color:#BB0916;
}
nav ul li:hover ul,.nav ul li a:hover ul{
display:block;
width:120px;
height:24px;
}
nav ul li ul li{
background-color:#FEE;
width:120px;
}
nav ul ul li a:hover{
background:#F7F7B9;
color:#666666;
}
</甩头yle>
</head>
<body>
<nav>
<ul>
<li><a href="#">首页</a>
<ul>
<li><a href="#">最新更新</a></闪电>
<li><a href="#">下载排行</a></闪电>
</ul>
</闪电>
<li><a href="#">企业新闻</a>
<ul>
<li><a href="#">企业介绍</a></闪电>
<li><a href="#">最新动态</a></闪电>
</ul>
<li><a href="#">产品信息</a>
<ul>
<li><a href="#">最新更新</a></闪电>
<li><a href="#">下载排行</a></闪电>
</ul>
<li><a href="#">特价促销</a>
<ul>
<li><a href="#">促销</a></闪电>
<li><a href="#">最新推荐</a></闪电>
<li><a href="#">产品列表</a></闪电>
</ul>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">公司信息</a></闪电>
<li><a href="#">联系我们</a></闪电>
<li><a href="#">公司地图</a></闪电>
</ul>
<li><a href="#">新手论坛</a>
<ul>
<li><a href="#">你问我答</a></闪电>
<li><a href="#">网站大学堂</a></闪电>
<li><a href="#">论坛</a></闪电>
</ul>
</ul>
</body>
</回头ml>
- 表单
表单是网页浏览者与网站服务器之间进行信息传递的重要工具。例如，用户在网页上进行注册、登录和留言等操作时，都是通过表单向网站数据库提交或读取数据的。
该页面中包含了表单中的几个主要元素:文本框、密码框、单选按钮、复选框等。通过制作该页面，可以掌握在网页中插入表单标签，以及使用各种结构标签对表单元素进行布局的方法，并了解表单标签在页面中的默认显示效果。
步骤：
1.对网页进行整体布局
2.制作表单部分1\添加列表和输入框标签
3.制作表单部分2\添加单选按钮和复选框
4.制作表单部分3\添加日期、按钮和文本区域标签
5.添加logo图像等内容
代码：
<!doctype html>
<html>
<head>
<style type="text/css">
<!--
body{
font-family: "微软雅黑"；
}
#logo,header,#main,footer{
width: 700px;
margin: 0 auto;
}
header{
color: #FFFFFF;
font-weight: bolder;
font-size: 18px;
background-color: #FF6600;
height: 40px;
line-height: 40px;
}
#main{
height: 380px;
}
#main li{
list-style: none;
height: 35px;
}
#user,#psw1,#psw2{
height: 20px;
width: 150px;
border: #157783 1px solid;
background-color: #FFFFCC;
}
#user:hover,#psw1:hover,#psw2:hover{
background-color: #E0F9FC;
}
footer{
font-size: 16px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #FF6600;
}
--></style>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="logo"><img src="file:///E|/my web/《网页设计案例教程》素材/第7章/task1/image/logo.gif" width="250" height="40"><img src="file:///E|/my web/《网页设计案例教程》素材/第7章/task1/image/reg.gif" width="250" height="40"></div>
<header>用户免费注册页面</header>
<div id="main">
<ul>
<form>
<li>
<label for="user">会员账号：</label>
<input type="text"name="username"id="user">
</li>
<li>
<label for="psw1">登录密码：</label>
<input type="password"name="psw1"id="psw1">
</li>
<li>
<label for="psw2">登录密码：</label>
<input type="password"name="psw2"id="psw2">
</li>
<li>
<label>会员性别：</label>
<input type="radio"name="rdoSex"value="0"checked>
<img src="file:///E|/my web/《网页设计案例教程》素材/第7章/task1/image/Male.gif" width="22" height="21">
<input name="rdoSex"type="radio"value="1">
<img src="file:///E|/my web/《网页设计案例教程》素材/第7章/task1/image/Female.gif" width="23" height="21"></li>
<li>
<label>个人爱好</label>
<input type="checkbox" value="sport"name="cbxHobby">运动
<input type="checkbox" value="chat"name="cbxHobby">聊天
<input type="checkbox" value="game"name="cbxHobby">游戏
</li>
<li>
<label for="date">出生日期：</label>
<input type="date" name="date" id="date" value="2015-08-04">
</li>
<li>
<input type="submit" name="submit" id="submit" value="同意以下条款并提交注册信息">
<input type="reset" name="reset" id="reset" value="重置">
</li>
<li>
<img src="file:///E|/my web/《网页设计案例教程》素材/第7章/task1/image/read.gif" width="35" height="26">阅读《淘宝服务协议》 </li>
<li><textarea name="textarea" cols="70" rows="5">
本协议由您与浙江淘宝网络有限公司共同缔结，本协议具有合同效力。本协议中协议双方合成协议方，浙江淘宝网络有限公司在协议中亦成为“淘宝”。本协议中“淘宝平台”指由浙江淘宝网络有限公司运营的网络交易平台，包括淘宝网，域名为taobao.com;淘宝商城，域名为tmall.com;一淘网，域名为etao.com。</textarea>
</li>
</form>
</ul>
</div>
<footer>Copyright © ©2005-2015 TaoBao.版权所有
</footer>
</body>
</html>
相同表单案例：
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.menu{
margin: 0 auto;
width: 700px;
color: #FFF;
background-color: #676767;
padding-top: 20px;
padding-bottom: 20px;
font-family: "微软雅黑";
font-size: 16px;
line-height: 35px;
}
.title{
margin: auto;
text-align: center;
font-size: 24px;
}
.foot{
margin: auto;
text-align: center;
}
fieldest{
margin: 30px 25px;
border: 1px #FFF solid;
}
legend{
color: #fff;
}
.txt{
border: 1px #000 solid;
background-color: #E8E8E8;
margin-right: 20px;
}
.txt:hover{
border: #333 1px solid;
background-color: #FFFFFF;
}
#name{
width: 80PX;
}
#address{
width: 220px;
}
#goodName{
width: 410px;
}
#num,#weight{
width: 50px;
}
span{
margin-left: 10px;
}
.slt_div{
width: 150px;
display:inline-block;
height: 30px;
overflow: hidden;
margin-bottom: -4px;
margin-top: 2px;
margin-right: 30px;
background:url(file:///C|/Users/26391/Desktop/%E3%80%8A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A1%88%E4%BE%8B%E6%95%99%E7%A8%8B%E3%80%8B%E7%B4%A0%E6%9D%90/%E7%AC%AC7%E7%AB%A0/test/arrow.png) no-repeat right #ddd;
}
#slt{
margin-top: 0;
width: 168px;
background: transparent;
font-size: 14px;
border: 1px solid #ccc;
height: 20px;
border: 0;
appearance:none;
}
.btn{
border: 0px;
}
</甩头yle>
</head>
<body>
<form>
<div class="menu">
<h1 class="title">增加快递信息</h1>
<fieldset>
<legend>发货单</legend>
<span>发货人姓名:</span>
<input type="text" class="txt" id="name">
<span>发货人地址:</span>
<input type="text" class="txt" id="address"><br/>
<span>发货人电话:</span>
<input type="text" class="txt">
<span>发货人邮编:</span>
<input type="text" class="txt"><br>
</fieldset>
<fieldset>
<legend>发货单</legend>
<span>发货人姓名:</span>
<input type="text" class="txt" id="name">
<span>发货人地址:</span>
<input type="text" class="txt" id="address"><br>
<span>发货人电话:</span>
<input type="text" class="txt">
<span>发货人邮编:</span>
<input type="text" class="txt"><br>
<span>地区</span>
<div class="slt_div">
<select id="slt">
<option>北京</option>
<option>上海</option>
<option>重庆</option>
<option>天津</option>
</色lect>
</div>
<span>包装：</span>
<input type="checkbox" class="cbx">纸箱
<input type="checkbox" class="cbx">木箱
<input type="checkbox" class="cbx">快递袋
<input type="checkbox" class="cbx">其他<br/>
<span>付款方式：</span>
<input type="radio" name="pay" class="rdo" checked="checked">现金
<input type="radio" name="pay" class="rdo">支付宝
<input type="radio" name="pay" class="rdo">网银
<input type="radio" name="pay" class="rdo">ATM<br>
</fieldset>
<fieldset>
<legend>货物信息</legend>
<span>货物名称：</span>
<input type="text" class="txt" id="goodName"><br>
<span>数量：</span>
<input type="text" class="txt" id="num">
<span>重量：</span>
<input type="text" class="txt" id="weight">
<span>发货时间：</span>
<input type="text" class="txt">
</fieldset>
<div class="foot">
<input type="button" class="btn" value="确定"/>
<input type="reset" class="btn" value="取消"/>
</div>
</div>
</form>
</body>
</回头ml>
- CSS标准流布局-企业网站的新闻显示页面
步骤：
一 对页面进行整体布局-盒子模型
二 制作页头部分-标准流布局概念
三 制作新闻正文显示部分
代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/沧桑s">
<!--
body,p{
margin:0px;
padding:0px;
font-size:12px;
}
#box{
width:950px;
margin:0 auto;
}
#content{
border-right-width:1px;
border-left-width:1px;
border-right-style:solid;
border-left-style:solid;
border-right-color:#FCEAA9;
border-left-color:#FCEAA9;
padding:20px 30px;
}
#banner{
background-image:url(blog/images/banner.gif);
background-repeat:no-repeat;
height:255px;
}
#menu{
height:35px;
background-color:#fceaa9;
}
#menu a{
font-family:"宋体";
font-size:14px;
color:#016941;
line-height:35px;
font-weight:bold;
margin-left:20px;
text-decoration:none;
}
#menu a:hover{
color:#000099;
}
#lujing{
font-size:12px;
text-align:right;
background-color:#FFFFDA;
line-height:20px;
border-left:1px solid #FCEAA9;
border-right:1px solid #FCEAA9;
}
#lujing a{
color:#333333;
text-decoration:none;
margin:0 5px;
}
h3{
font-size:16px;
text-align:center;
}
#content p{
font-size:12px;
text-indent:2em;
line-height:25px;
margin-top:10px;
}
footer{
background-image:url(blog/images/footer.gif);
background-repeat:no-repeat;
height:20px;
text-align:center;
padding-top:34px;
display:block;
}
-->
</甩头yle>
</head>
<body>
<div id="box">
<div id="header">
<div id="banner"></div>
<nav id="menu"><a href="#">首页</a> <a href="#">日志</a> <a href="#">相册</a> <a href="#">留言板</a> <a href="#">关于我</a></nav>
<div id="lujing"><a href="#">首页</a>>><a href="#">日志</a>>><a href="#">大学生活</a></div>
<article id="content">
<h3>军训感言 </h3>
<p>军训是大学的第一堂课，在这堂课上有严明的纪律、有紧张、有欢笑... ...火热的阳光炙烤着大地和我们的身躯，这几天对我来说就像是几个世纪一样的难熬，好想为自己找一个逃避的理由。教官教诲我们：“想尽一切办法，克服一切困难，完成一切任务，争取一切荣誉。” 我的思想开始转变，考入大学并不意味着一劳永逸，人生中有好多的关口要过，有好多的责任等我们去抗，又有好多的义务等我们去尽。大学只是万里长征中的第一步，那种“船到码头车到站，兵器入库马放南山”的思想对当代大学生的成长都是不建康的。</p>
<p>军训不仅仅是对我们的身体的考验，更多的是对我们的意志的磨练，同时提高我们的思想水平和团队精神，“宝剑锋从磨砺出，梅花香自苦寒来”人是在不断的磨练中长大的，就像一棵小树一样经历风雨后才能变成参天大树，军人的气质和钢铁般的意志给我很深刻的印象，正如一首军歌歌词描写的一样：“还硬比钢还强”。在我们军训中我们军人、学生一家人，了解不少的军中生活，体会到了军人的艰辛，感受到了军人的豪迈气概，他们肩负着保卫国家的重任，苦中的乐，教官说：“当兵后悔二年，不当兵会后悔一辈子” 。军人的奉献精神和大公无私深深的打动我们每个人，我们的新生班主任给我们讲解生活中要注意的事项，为我们今后的学习生活做准备，辅导员教师像大哥哥一样照看着我们。在这里有酸楚的泪水，有苦咸的汗水，有飘扬的歌声，有欢乐的笑声，这些就像不灭的音符跳动不已，我们是充实的，我们是快乐的，苦与累已化作美与甜，军训——我们不后悔</p>
<p>军训已过去三天，这三天中我的感触很深。感觉到我比以前坚强多了，总觉得自己全身都是力量，叠被子是我在军训三天中觉得最难的，因为以前没有叠过被子，叠起来就头大，怎么也叠不好，尽管教官一而再的教，可我还是叠不好，使我都觉得我没有喝方面的天赋，呵呵，经过不懈的努力，我最终还是会叠了，军训中还有很多很多的感慨，它们都会影响我的一生。</p>
<p>感谢军训，它教会了我很多以前没学到的东西。</p>
</article>
<footer>€版权信息</footer>
</body>
</回头ml>
- CSS浮动布局- 制作企业网站新闻列表网页
html代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="NewsStyle.css"rel="stylesheet"type="text/沧桑s">
</head>
<body>
<header>
<img id="logo" src="images/logo.gif" width="230" height="54">
<nav id="menu">
<a href="#">首 页</a>
<a href="#">集团概况</a>
<a href="#" class="selected">新闻中心</a>
<a href="#">产品服务</a>
<a href="#">企业文化</a>
<a href="#">综合业务</a>
<a href="#">品牌建设</a>
<a href="#">人力资源</a>
<a href="#">国际合作</a>
</nav>
<img src="images/zbanner.gif" width="960" height="186">
<section id="lujing">
<div id="search">
<form id="form1" name="form1" method="post">站内搜索:
<input type="text" name="textfield" id="textfield">
<input type="image" name="imageField" id="imageField">
</form>
</div>
⌈您目前的位置：<a href="#">首页</a>>><a href="#">新闻中心</a>>>
</色ction>
</header>
<div id="content">
<div id="leftlist">
<div id="listTitle">新闻中心</div>
<ul>
<li><a href="#">集团要闻</a></闪电>
<li><a href="#">经营动态</a></闪电>
<li><a href="#">企业专题</a></闪电>
<li><a href="#">项目新闻</a></闪电>
</ul>
</div>
<div id="rightlist">
<h2>集团要闻<span class="fnt1">Group News</span></h2>
<ul>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电>
<li><a href="#"><span class="newsTime">[2015-08-12]</span>中国保利副经理国强一行视察青岛公司</a></闪电></ul>
<div id="page"> 共 <span class="fnt2">10</span> 页 <span class="fnt2">196</span>条记录 上一页 1 2 3 4 5 下一页</div>
</div>
<div class="clear"></div>
</div>
<footer>
版权信息：©正大软件学院.软件技术系所有<br>2010-2020
</footer>
</body>
</回头ml>
css代码：
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-size:14px;
background-image:url(images/body.gif);
}
header,footer{
width:960px;
margin:0 auto;
background-color:#FFFFFF;
}
footer{
text-align:center;
background-color:#b2a695;
line-height:25px;
padding-top:20px;
}
.left{
float:left;
}
#menu{
height:44px;
border-top:10px solid#000000;
}
#menu a{
font-family:"宋体";
font-size:14px;
color:#000000;
line-height:44px;
padding:0px 8px;
text-decoration:none;
display:inline-block;
}
#menu a:hover,#menu a.selected{
color:#FFFFFF;
background-color:#cc0000;
}
#lujing{
height:37px;
text-align:left;
line-height:35px;
background-image:url(images/navbg.gif);
background-repeat:repeat-x;
}
#lujing a{
color:#333333;
text-decoration:none;
margin:0 5px;
}
#content{
margin:0 auto;
background-color:#FFFFFF;
width:880px;
padding:20px 40px;
}
h3,h4,p{
margin:0px;
padding:0px;
}
h3{
font-size:16px;
text-align:center;
border-bottom:1px dashed#999999;
line-height:35px;
}
h4{
text-align:right;
font-family:Arial, Helvetica, sans-serif;
color:#666666;
}
#content p{
text-indent:2em;
line-height:25px;
margin-top:10px;
}
#content img{
display:block;
margin:auto;
max-width:600px;
max-height:400px;
}
#content#leftlist{
width:208px;
float:left;
background-color:#0099FF;
}
#content#rightlist{
background-color:#FFFF66;
}
#content#rightlist{
background-color:#FFFF66;
margin-left:208px;
}
#content#rightlist{
background-color:#FFFF66;
float:left;
width:652px;
margin-left:20px;
}
.clear{
clear:both;
}
input,form,h3,h4,p{
margin:0px;
padding:0px;
}
#search{
float:right;
font-size:14px;
color:#C31103;
font-weight:bold;
line-height:30px;
padding-right:20px;
}
#imageField{
margin-bottom:-7px;
}
#listTitle{
background:url(file:///C|/Users/26391/Desktop/%E3%80%8A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A1%88%E4%BE%8B%E6%95%99%E7%A8%8B%E3%80%8B%E7%B4%A0%E6%9D%90/%E7%AC%AC8%7E10%E7%AB%A0/飙泪jt/images/闪电sthead.gif) no-repeat;
line-height:40px;
padding-left:20px;
color:#FFFFFF;
font-size:14px;
font-weight:normal;
height:48px;
}
input,form,ul,h2,h3,h4,p{
margin:0px;
padding:0px;
list-style:none;
}
#content#leftlist ul{
background:url(file:///C|/Users/26391/Desktop/%E3%80%8A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A1%88%E4%BE%8B%E6%95%99%E7%A8%8B%E3%80%8B%E7%B4%A0%E6%9D%90/%E7%AC%AC8%7E10%E7%AB%A0/飙泪jt/images/闪电stmiddle.gif) repeat-y;
padding:10px 0px;
}
#leftlist ul li{
list-style-type:circle;
list-style-position:inside;
line-height:30px;
border-bottom:1px dashed #999999;
margin:0 15px;
padding-left:10px;
}
#leftlist ul li a{
text-decoration:none;
color:#000000;
}
#content#leftlist{
width:208px;
float:left;
padding-bottom:22px;
background:url(file:///C|/Users/26391/Desktop/%E3%80%8A%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%E6%A1%88%E4%BE%8B%E6%95%99%E7%A8%8B%E3%80%8B%E7%B4%A0%E6%9D%90/%E7%AC%AC8%7E10%E7%AB%A0/飙泪jt/images/闪电stfoot.gif) no-repeat;
background-position:bottom;
}
h2{
border-bottom:1px solid#666666;
line-height:30px;
font-size:14px;
width:150px;
}
.fnt1{
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#999999;
}
#content#rightlist ul{
border-top:1px solid#999999;
}
#content#rightlist ul li{
line-height:25px;
list-style-type:square;
list-style-position:inside;
border-bottom:1px dashed#999999;
}
#content#rightlist ul li a{
text-decoration:none;
color:#333333;
}
#content#rightlist ul li a:hover{
color:#0099CC;
}
.newsTime{
float:right;
}
.fnt2{
color:#CC0033;
}
- javascript
JavaScip是一种基于对象的直译式脚本语言，使用它可以开发internet客户端的应用程序。它的解释器被称为JavaScript引擎，为浏览器的一部分。 JasScript在HTMIL网页中以语句的形式出现，并执行相应操作，主要用于给HTML网页增加动态功能。
很多人认为JavaScript是Java的子集，或者认为JavaScript就是Java语言,就像VBScript与VB的关系一样。实际上JavaScript与Java没有任何直接关系，也不是Sun公司的产品 JavaScript是Netscape公司为扩充Netscape Navigator浏览器功能而开发的一种可以嵌入到 Web主页中的编程语言。Netscape 在最初将其脚本语言命名为LiveScript,后来Netscape 在与Sun合作之后将其改名为JavaScript。JavaScript 最初是受Java的启发而设计，目的之一就是使其 “看上去像Java”,因此JavaScript和Java在语法上有类似之处，如JavaScript 的一些名称和命名规范借自Java。但是，JavaScript 的主要设计原则源自Self 和Scheme.
特点：
不同于服务器端脚本语言，如PHP与ASP等，javascript作为可以直接在客户端浏览器上运行的脚本语言，有着其自身独特的功能和特点，具体如下。
(1)简单性
javascript是一种脚本语言，它采用小程序段的方式实现编程，并提供了一个简易的开发过程。它的基本结构形式与C、C++、VB和Delphi十分类似。但它不像这些语言一样需要先编译，而是在程序运行过程中被逐行地解释。javascript与HTML标签结合在一起，从而方便用户使用和操作。
(2)动态性
JavaScript 是动态的，它可以直接对用户输入做出响应，无须经过Web服务程序。它对用户的响应，是采用事件驱动的方式进行的。所谓事件驱动，就是指在网页中执行了某种操作所产生的动作，这些操作被称为“事件”(Event)。例如，按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
(3)跨平台性
JavaScript是依赖于浏览器本身，与操作环境无关的脚本语言。只要能运行浏览器，且浏览器支持JavaScript的计算机都可以正确执行它，而不论这台计算机是Windows还是Linux,或者其他操作系统。
(4)安全性
JavaScript是一种安全性语言， 它不允许访问本地硬盘，且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。
(5)节省CGI的交互时间
随着www的迅速发展，有许多www服务器提供的服务要与浏览者进行交互，以确定浏览者的身份和所需服务的内容等，这项工作通常由CGIPERL编写相应的接口程序与用户进行交互来完成。这种交互增加了网络通信量，另一方面影响了服务器的性能。
javascript基于客户端浏览器，用户在浏览网页时填表、验证的过程都是通过浏览器对调入HTML文档中的javascript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器也只将用户输入验证后的信息提交给远程服务器，从而大大减少了服务器的负担。
在页面中添加脚本的方式：
类似于CSS, JavaScript 既可以嵌入到页面中，也可以放置在一个外部脚本文件中。 但浏览器必须支持javascript,并且必须启用该功能 (很多浏览器允许用户禁止JavaScript功能)。
JavaSript需要使用进行声明， 脚本添加在页面的
JavaScript代码在页面中的位置非常重要。如果将其放置在页面主体中一如同前面的案例所示，则它将在页面加载时运行(或执行)。但是，很多时候希望脚本在某个事件触发时运行，如按下键盘键或单击提交按钮等。这通常需要调用函数。函数放置在位于页面区域的
另外一种插入 JavaScript的方法是把JavaScript代码编写在扩展名为.js的外部文档中。 如果脚本将被多个页面使用，则这是一种非常好的方法-因为不需要在每个页面中重复编写代码，并且如果需要更新脚本，仅在一个位置更改即可。
当将JavaScript放在外部文件中时，需要使用
综上所述，有3个位置可用于放置JavaScript代码，并且 一个HTML文档中可以同时存在这3种方式，因为一个文档能够包含的脚本数量是没有限制的。这3个位置如下所示。
➢
页面部分中:
这些脚本将在页面加载时运行。
➢
位于页面部分中: 这些脚本在事件触发它们时被调用。
➢
位于外部文件中:
如果链接放置在元素中，则脚本的处理方式与将其放置在文档头部并等待事件触发相同;如果链接放置在元素中，则它的行为类似于脚本放置在文档主体中，并在页面加载时执行。
制作跑马灯效果：
直接上代码：
html：
<script type="text/javascript">
var msg="666666"//跑马灯文字
var interval=400;//跑动的速度
var seq=0;
function txtScroll(){//定义函数
document.scrollForm.txtText.value=msg.substring(seq,msg,length)+""+msg;
seq++;
if(seq>msg.length)
seq=0;
window.setTimeout("txtScroll();",interval);
}
</script>
css:
form{
text-align:center;
}
input{
background:transparent;
border:none;
font-size:15px;
font-weight:bold;
font-family:黑体;
}
任务二：计算机程序逻辑
课程三：
更改分配给myfavoriteNumber和myfavoriteFood的字符串，再运行程序：
调试代码，删除17行变量空格，把console.log括号里的变量名的大小写更改为与var定义的变量相同。添加代码，运行：
添加三个问题所使用的代码，运行，得出问题结果：
按注释添加代码，运行：
编写代码回答最后两个问题，使用字符串连接使之打印在单元行上：
编写使“+＄20”按钮工作：
添加代码\n，使每个提醒添加到屏幕的不同行：
添加Child和Senior按钮工作：
课程四：使用变量
构建Photo Liker应用程序：
课程五：条件探索
课程六：条件调查
修改：去掉if语句，当玩家拥有0个生命时，游戏继续进行
修改程序，当用户拥有超过15个点时，lemon变得更小：
修改应用程序，增加一个用户名和密码，同时编辑代码和用户页面：
课程七：条件练习
创建布尔表达式，回答下面两个问题：
回答3和4的问题，用布尔表达式：
使用逻辑运算符回答问题4和5：
添加一个布尔表达式，检查是否有五次点击，超过五次，星星变红：
在else部分添加代码，使星形为“橙色”：
添加更多else-if语句，使星号有更多的颜色：
调试代码，更改第9行和第11行代码，让星星能变成橙色：
为布尔表达式编写条件语句：
课程九：函数探索/调查
添加代码使程序“唱”出合唱：
修改程序：
应用实验室相关任务对程序逻辑训练有很大帮助，建议每个人都进行学习。本文篇幅太大，任务二剩余任务不一一做详解，见谅！
545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
