导语
内容提要
刘瑞新、张兵义主编的《网页设计与制作教程(第5版十二五职业教育国家规划教材)》面向网站开发与网页制作的读者，采用全新流行的Web标准，以HTML技术为基础，由浅入深、完整详细地介绍了HTML、CSS及JavaScript网页制作内容。本书把介绍知识与实例制作融于一体，以鞋城网站作为案例讲解，配以什锦果园网站的实训练习，两条主线互相结合、相辅相成，自始至终贯穿于本书的主题之中。本书共分10章，主要内容包括：HTML基础、块级标签、行级标签、CSS基础、Div+CSS布局技术、使用CSS修饰常见的网页元素、使用CSS设置链接与导航菜单、网页特效—JavaScript、网络鞋城前台页面和网络鞋城后台管理页面。
本书适合作为高等学校、职业院校计算机及相关专业或培训班的网站开发与网页制作教材，也可作为网页制作爱好者与网站开发维护人员的学习参考书。
作者简介
刘瑞新，教授，从事计算机教学30余年，见证和经历了微型计算机在中国的发展历程，至今仍活跃在教学一线。他编写的教材来源于教学实践，是教学实践的升华。自1993年开始创作编写计算机教材至今，他一直进行不倦的探索和创新，研究教学方法，并把这些改革和创新应用到所编写的教材中，使教材理论与实践结合得恰到好处，具有鲜明的特色，非常适合教师讲授和学生自学。其多部著作获评全国优秀畅销书奖、“十五”“十一五”“十二五”国家级规划教材及北京高等教育精品教材。他在2013年全国计算机教材核心作者评比中名列前茅（刊于《现代阅读一一教育与出版》2013年第9期），成为当今计算机著作方面创作颇为丰硕、颇具活力和探索精神的作者之一。
目录
前言
第1章 HTML基础
1.1 HTML简介
1.2 HTML文档结构及语法规则
1.2.1 标签及其属性
1.2.2 HTML语法规则
1.2.3 HTML文档结构
1.3 创建HTML文件
1.4 网页的摘要信息
1.4.1
标签<br> 1.4.2 <meta>标签<br> 1.4.3 案例—制作网络鞋城页面摘要信息<br> 1.5 HTML页面中的块和行<br> 1.6 注释和特殊符号<br> 1.6.1 注释<br> 1.6.2 特殊符号<br> 1.7 实训—制作什锦果园网的版权信息<br> 习题1<br>第2章 块级标签<br> 2.1 基本块级标签<br> 2.1.1 标题标签<br> 2.1.2 段落标签<br> 2.1.3 水平线标签<br> 2.1.4 案例—制作网络鞋城常见问题解答页面<br> 2.2 用于布局的块级标签<br> 2.2.1 无序列表<br> 2.2.2 有序列表<br> 2.2.3 表格<br> 2.2.4 表单<br> 2.2.5 分区标签<br> 2.3 实训—制作什锦果园关于页面<br> 习题2<br>第3章 行级标签<br> 3.1 超链接<br> 3.1.1 超链接的基本概念<br> 3.1.2 超链接的应用<br> 3.1.3 案例—制作网络鞋城购物向导<br> 3.2 图像<br> 3.2.1 Web上常用的图像格式<br> 3.2.2 图像标签<br> 3.2.3 用图像作为超链接热点<br> 3.2.4 案例—制作网络鞋城图文简介<br> 3.3 表单元素<br> 3.3.1 元素<br> 3.3.2 选择栏<br> 3.3.3 多行文本域<br> 3.3.4 表单的高级用法<br> 3.3.5 案例—制作网络鞋城会员注册表单<br> 3.3.6 表单布局<br> 3.4 范围标签<br> 3.4.1 基本语法<br> 3.4.2 span与div的区别<br> 3.5 换行标签<br> 3.6 实训—制作什锦果园联系信息表单<br> 习题3<br>第4章 CSS基础<br> 4.1 CSS概述<br> 4.1.1 CSS的基本概念<br> 4.1.2 CSS的发展历史<br> 4.1.3 CSS的代码规范<br> 4.1.4 CSS的工作环境<br> 4.1.5 体验CSS<br> 4.2 样式表语法<br> 4.2.1 CSS规则<br> 4.2.2 选择符<br> 4.3 CSS的属性单位<br> 4.3.1 长度、百分比单位<br> 4.3.2 色彩单位<br> 4.4 CSS与HTML文档的结合方法<br> 4.4.1 定义内部样式表<br> 4.4.2 定义行内样式表<br> 4.4.3 链入外部样式表<br> 4.4.4 导入外部样式表<br> 4.4.5 案例—制作网络鞋城商品明细页面<br> 4.5 样式表的层叠、特殊性与重要性<br> 4.5.1 样式表的层叠<br> 4.5.2 特殊性<br> 4.5.3 重要性<br> 4.6 元素分类<br> 4.7 实训—制作什锦果园业界资讯页面<br> 习题4<br>第5章 Div+CSS布局技术<br> 5.1 Div布局理念<br> 5.1.1 Div布局页面的优点<br> 5.1.2 使用嵌套的Div实现页面排版<br> 5.2 CSS盒模型<br> 5.2.1 盒模型的概念<br> 5.2.2 盒模型的属性<br> 5.2.3 盒模型的宽度与高度<br> 5.2.4 外边距的叠加<br> 5.2.5 案例—制作网络鞋城关于页的局部信息<br> 5.3 盒子的定位<br> 5.3.1 静态定位<br> 5.3.2 相对定位<br> 5.3.3 绝对定位<br> 5.3.4 相对定位与绝对定位的混合使用<br> 5.3.5 固定定位<br> 5.4 盒子的浮动<br> 5.4.1 浮动<br> 5.4.2 清除浮动<br> 5.5 CSS常用布局样式<br> 5.5.1 两列布局样式<br> 5.5.2 三列布局样式<br> 5.6 实训—什锦果园水果沙拉页面的布局<br> 5.6.1 页面布局规划<br> 5.6.2 页面的制作过程<br> 习题5<br>第6章 使用CSS修饰常见的网页元素<br> 6.1 设置文字的样式<br> 6.1.1 设置文字的字体<br> 6.1.2 设置字体的大小<br> 6.1.3 设置字体的粗细<br> 6.1.4 设置字体的倾斜<br> 6.1.5 设置字体的修饰<br> 6.1.6 设置文本的颜色<br> 6.2 设置段落的样式<br> 6.2.1 设置文字的对齐方式<br> 6.2.2 设置首行缩进<br> 6.2.3 设置首字下沉<br> 6.2.4 设置行高<br> 6.2.5 设置字间距<br> 6.2.6 设置字符间距<br> 6.2.7 设置文本的大小写<br> 6.3 设置图片样式<br> 6.3.1 图片的边框<br> 6.3.2 图片的缩放<br> 6.4 设置背景<br> 6.4.1 设置背景颜色<br> 6.4.2 设置背景图像<br> 6.4.3 设置背景重复<br> 6.4.4 设置背景定位<br> 6.4.5 设置背景大小<br> 6.4.6 案例—制作购物车统计信息<br> 6.5 图文混排<br> 6.6 综合案例—制作网络鞋城驴友天地页面<br> 6.6.1 页面布局规划<br> 6.6.2 页面的制作过程<br> 6.7 实训—制作什锦果园博客页面<br> 习题6<br>第7章 使用CSS设置链接与导航菜单<br> 7.1 使用CSS设置链接<br> 7.1.1 改变文字链接的外观<br> 7.1.2 创建按钮式超链接<br> 7.1.3 图文链接<br> 7.2 使用CSS设置列表<br> 7.2.1 表格布局与列表布局的对比<br> 7.2.2 设置列表类型<br> 7.2.3 设置列表项图像<br> 7.2.4 设置列表项位置<br> 7.2.5 图文信息列表<br> 7.3 创建导航菜单<br> 7.3.1 普通的超链接导航菜单<br> 7.3.2 纵向列表模式的导航菜单<br> 7.3.3 横向列表模式的导航菜单<br> 7.4 使用CSS设置链接与导航菜单综合案例<br> 7.4.1 页面布局规划<br> 7.4.2 页面的制作过程<br> 7.5 实训—制作什锦果园关于页面<br> 习题7<br>第8章 网页特效—JavaScript<br> 8.1 JavaScript简介<br> 8.2 在网页中插入JavaScript的方法及定义<br> 8.2.1 在HTML文档中嵌入脚本程序<br> 8.2.2 链接脚本文件<br> 8.2.3 在标记内添加脚本<br> 8.3 常见的网页特效<br> 8.3.1 循环滚动的图文字幕<br> 8.3.2 幻灯片切换的广告<br> 8.4 实训—制作二级纵向列表模式的导航菜单<br> 习题8<br>第9章 网络鞋城前台页面<br> 9.1 网站的开发流程<br> 9.1.1 规划站点<br> 9.1.2 网站制作<br> 9.1.3 测试网站<br> 9.1.4 发布站点<br> 9.2 设计首页布局<br> 9.2.1 使用Dreamweaver创建站点<br> 9.2.2 页面布局规划<br> 9.3 首页的制作<br> 9.4 制作商品展示页<br> 9.5 制作商品详细信息页<br> 9.6 制作查看购物车页<br> 习题9<br>第10章 网络鞋城后台管理页面<br> 10.1 制作后台管理登录页面<br> 10.2 查询商品页面的制作<br> 10.3 添加商品页面的制作<br> 10.4 页面的整合<br> 习题10<br></p>
</div></div>
</div>
<div class="middle"> </div>
<div class="right">
<div class="tt">
<div class="blue1"></div>
<ul style="list-style-type:decimal;">
<li><a href="http://www.zxhsd.com/kgsm/ts/2023/07/29/6068312.shtml" target="_blank">信息技术(基础模块WPS O...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2023/08/01/6070781.shtml" target="_blank">信息技术(基础模块下修...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2021/09/13/5535905.shtml" target="_blank">计算机应用实践教程(普...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2010/11/05/1860237.shtml" target="_blank">C程序设计(高等职业技术...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2023/08/17/6083930.shtml" target="_blank">Photoshop网店美工实例...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2024/01/12/6204985.shtml" target="_blank">Photoshop网店美工与网...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2023/02/02/5934343.shtml" target="_blank">Python程序设计基础(第3...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2018/05/07/4141503.shtml" target="_blank">变频器可编程序控制器及...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2022/01/25/5674110.shtml" target="_blank">信息技术学习辅导与练习...</a></li>
<li><a href="http://www.zxhsd.com/kgsm/ts/2023/07/28/6069870.shtml" target="_blank">Python程序设计与数据分...</a></li>
</ul>
</div>
<div style="padding-top:10px;"></div>
<div class="tt">
<div class="blue2"></div>
<ul>
<script language="javascript" src="/kgsm/jscript/bookview_new.js"></script>
</ul>
</div>
<div style="padding-top:10px;"></div>
<!-- <a href="http://www.zxhsd.com/kgsm/ts/2012/04/28/2234439.shtml" target="_blank"><img src="/images/xxym/xszj.jpg"/></a>
<div style="padding-top:10px;"></div>
<a href="http://www.zxhsd.com/kgsm/ts/2012/04/29/2242518.shtml" target="_blank"><img src="/images/xxym/dqsfz.jpg"/></a>
<div style="padding-top:10px;"></div>
<a href="http://www.zxhsd.com/kgsm/ts/2012/02/26/2182330.shtml" target="_blank"><img src="/images/xxym/znzcm.jpg"/></a>
<div style="padding-top:10px;"></div>
<a href="http://www.zxhsd.com/kgsm/ts/2010/11/24/1871811.shtml" target="_blank"><img src="/images/xxym/qcldhwdy.jpg"/></a>
<div style="padding-top:10px;"></div>
<a href="http://www.zxhsd.com/kgsm/ts/2011/08/04/2047423.shtml" target="_blank"><img src="/images/xxym/wdbwm.jpg"/></a> -->
</div>
</div><!--end-->
</div>
<div class="container" style="clear:both;">
<div style="background-color:#FFF;">
<div style="height:10px; background:#b2b2b2;"></div>
<div id="footer">
<!-- footer start -->
<div class="footer"><h4>售后服务</h4><br/><a href="http://book.zxhsd.com/help/thyz.shtml" target="_blank">退换货原则</a></div>
<div class="footer"><h4>我的订单</h4><br/><a href="http://book.zxhsd.com/help/ddzt.shtml" target="_blank">订单状态的含义</a><br/><a href="http://book.zxhsd.com/help/ddfy.shtml" target="_blank">订单费用计算</a><br/><a href="http://book.zxhsd.com/help/ddxg.shtml" target="_blank">订单的修改与取消</a></div>
<div class="footer"><h4>订单支付</h4><br/><a href="http://book.zxhsd.com/help/pay_ol.shtml" target="_blank">在线支付</a><br/><a href="http://book.zxhsd.com/help/hdfk.shtml" target="_blank">货到付款</a><br/><a href="http://book.zxhsd.com/help/yjhk.shtml" target="_blank">邮局汇款</a><br/><a href="http://book.zxhsd.com/help/yhhk.shtml" target="_blank">银行汇款</a><br/><a href="http://book.zxhsd.com/help/fpzd.shtml" target="_blank">退款及发票制度</a><br/><a href="http://book.zxhsd.com/help/djzd.shtml" target="_blank">订金制度</a></div>
<div class="footer"><h4>联系我们</h4><br/><a href="http://book.zxhsd.com/help/yjjy.shtml" target="_blank">意见与建议</a></div>
</div>
<div id="footer" style="text-align:center; padding-top:20px;">
<a href="http://book.zxhsd.com/about/lxwm.shtml">联系连锁店</a> │ <a href="http://www.zxhsd.com/Club/ddrl.jsp">汇款单招领</a> │ <a href="http://book.zxhsd.com/Flink/">友情链接</a> │ <a href="http://book.zxhsd.com/help/help.shtml">帮助中心</a> │ <a href="http://book.zxhsd.com/help/glzd/">管理制度</a> <br/>
浙江省新华书店集团有限公司主办 <a href="https://beian.miit.gov.cn/" target="_blank">浙B2-20110302-2</a><br />
2005-<script>document.write((new Date()).getFullYear())</script> 版权所有 ©<br/>
<a href="http://www.pingpinganan.gov.cn/web/index.aspx/" target="_blank"><img src="/images/police_icon.gif"/></a>
<iframe name="bottomWlgs" width="80" height="80" scrolling="no" marginwidth="0" marginheight="0" frameborder=0 src="https://www.zxhsd.com/common/wlgs.html"></iframe>
</div>
<script language="javascript">
showXsj01List("");
</script>
<script language="javascript" src="http://book.zxhsd.com/js/baiduTraffic.js"></script>
</div>
</div>
<iframe name="wjtj_iframe" width=0 height=0 scrolling="no" marginwidth="0" marginheight="0" frameborder=0 src=""></iframe>
<form name="wytj_form" method="post" action="//www.zxhsd.com/browse/djstj.jsp" target="wjtj_iframe">
<input type="hidden" name="wydz" value="">
<input type="hidden" name="tjflm" value="">
<input type="hidden" name="lx" value="0">
<input type="hidden" name="crdz" value="">
</form>
<script language="javascript">
var properties = window.location.search;
if(properties.length > 1)
{
properties = properties.substr(1);
splits = properties.split("&");
for(i=0; i < splits.length; i++)
{
splitsTemp = splits[i].split("=");
if(splitsTemp.length==2)
{
if("crdz" == splitsTemp[0]) document.wytj_form.crdz.value = splitsTemp[1];
}
}
}
document.wytj_form.wydz.value = document.URL;
document.wytj_form.tjflm.value = spbs;
document.wytj_form.submit();
</script>
</body>
</html>
<!-- Generated by Gemway InfoPublisher V2.0 at 2024-03-14 04:08:32 cost 334ms --> 
[
我的消息
购物车