网页设计实训教程

充分考虑高等职业院校学生的学习基础、认知规律与培养目标，按照“项目导向、任务驱动”的原则编写。

包含八个基本实训项目和三个综合实训项目。每个基本实训中都有一个完整的案例，每个案例都是构成一个网站或网页的一部分，具有真实的应用价值。

按照能力递进的原则安排各实训项目的学习，每个实训项目分为不同的任务，每个学习任务对应PHP的不同知识点，使学生在完成任务的同时，掌握PHP的基本知识点，逐步培养静态网站开发能力。

前 言

HTML、CSS、JavaScript三项技术是静态网页设计、制作的核心，本书针对上述技术的特点和不同知识点的具体应用，提供相应的实训案例，并对案例进行任务分解，详细介绍任务的操作步骤及原理。本书针对高等职业院校学生的特点，采取了实训教学的方式。书中共包含11个实训，每个实训中都有一个完整的案例，每个案例都是构成一个网站或网页的一部分，具有真实的应用价值。

实训一制作诗词欣赏页面，介绍HTML基础，重点介绍HTML基本语法结构及网页中的文字和段落的排版。

实训二制作新闻列表页面，介绍各种列表的应用，重点介绍HTML中无序列表和有序列表的应用。

实训三制作导航菜单，介绍HTML中超级链接的应用，同时结合无序列表和CSS样式表对超链接进行效果控制。

实训四制作个人相册，介绍HTML页面中图片的应用，同时介绍了CSS盒模型以及DIV+CSS布局基础，重点介绍CSS盒模型与浮动技术。

实训五制作成绩登记表，介绍HTML中表格的应用，重点介绍表格、行、单元格的各种属性应用，同时结合CSS对单元格效果加以修饰。

实训六制作网站后台管理主页，重点介绍HTML中框架的应用，综合前面实训内容涉及的各知识点设计框架窗口页面。

实训七制作登录和注册页面，介绍了HTML表单的应用，重点介绍HTML表单中各元素的属性及应用；同时还介绍了JavaScript基本语法，实现对表单的各种信息验证。

实训八布局网站首页，介绍DIV+CSS基础，重点介绍CSS排版观念和常见DIV+CSS布局样式的制作方法，并详细介绍了一个DIV+CSS布局的案例。

实训九、实训十和实训十一介绍了三个综合案例，分别从设计分析、排版架构和模块设计等方面详细介绍了博客网站、企业网站和班级网站的布局方法。

本书是编者在多年从事HTML、CSS、JavaScript教学工作和网站开发工作的基础上编写而成的，由张春英、李英文、钟大伟任主编，由孙丰伟、赵海侠、张玉华、胡志强、张海艳、郑明秋任副主编，参加本书部分章节编写工作的还有李红岩、王石光、蒙连超等老师。

由于时间仓促、作者水平有限，书中错漏之处在所难免，欢迎广大读者批评指正。

编 者

2015年1月

前言

实训一 制作诗词欣赏页面 1
1.1 实训目标 1
1.2 实训内容 1
1.3 实训效果 1
1.4 实现过程 2
任务1：制作诗词欣赏页面 2
任务2：美化诗词欣赏页面 7
1.5 总结与思考 9
实训二 制作新闻列表页面 10
2.1 实训目标 10
2.2 实训内容 10
2.3 实训效果 10
2.4 实现过程 11
任务1：制作新闻列表页面 11
任务2：美化新闻列表页面 14
2.5 总结与思考 15
实训三 制作导航菜单 16
3.1 实训目标 16
3.2 实训内容 16
3.3 实训效果 16
3.4 实现过程 17
任务1：编辑导航菜单 17
任务2：美化导航菜单 19
3.5 总结与思考 28
实训四 制作个人相册 29
4.1 实训目标 29
4.2 实训内容 29
4.3 实训效果 29
4.4 实现过程 30
任务1：编辑个人相册 30
任务2：美化个人相册 32
4.5 总结与思考 41
实训五 制作成绩登记表 42
5.1 实训目标 42
5.2 实训内容 42
5.3 实训效果 42
5.4 实现过程 43
任务1：制作成绩登记表 43
任务2：美化成绩登记表 46
5.5 总结与思考 52
实训六 使用框架制作网站管理中心系统 53
6.1 实训目标 53
6.2 实训内容 53
6.3 实训效果 53
6.4 实现过程 54
任务1：制作框架结构 54
任务2：子窗口的设置 57
任务3：页面设计 59
任务4：浮动框架 63
6.5 总结与思考 63
实训七 制作会员登录与注册页面 65
7.1 实训目标 65
7.2 实训内容 65
7.3 实训效果 65
7.4 实现过程 66
任务1：制作会员登录页面 66
任务2：制作注册页面 69
任务3：实现表单信息验证 73
7.5 总结与思考 77
实训八 使用DIV+CSS布局网站首页 79
8.1 实训目标 79
8.2 实训内容 79
8.3 实训效果 79
8.4 实现过程 80
任务1：企业网站布局设计 80
任务2：页面各区域内容实现 84
8.5 总结与思考 90
实训九 综合案例——我的博客 91
9.1 分析结构 91
9.1.1 设计分析 91
9.1.2 排版架构 92
9.2 模块设计 93
9.2.1 导航与banner 93
9.2.2 左侧列表 94
9.2.3 内容部分 97
9.2.4 footer脚注 98
9.3 整体调整 99
9.4 网页源码 101
实训十 综合案例——企业网站 106
10.1 分析结构 106
10.1.1 设计分析 107
10.1.2 排版架构 107
10.2 模块设计 108
10.2.1 导航与banner 109
10.2.2 左侧部分 110
10.2.3 中间部分 112
10.2.4 右侧部分 113
10.2.5 footer脚注 115
10.3 整体调整 116
10.4 网页源码 118
实训十一 综合案例——班级网站 126
11.1 班级网站的规划与设计 126
11.1.1 网站定位 126
11.1.2 需求分析 126
11.1.3 栏目设计 127
11.1.4 站点定义与目录管理 127
11.1.5 网站的风格设计 127
11.2 网页设计与制作 129
11.2.1 页面布局 129
11.2.2 全局CSS定义 129
11.2.3 首页制作 131
11.2.4 二级页面制作 136
11.2.5 内容页面制作 138
11.3 网站测试与发布 139
11.3.1 安装IIS服务器 139
11.3.2 建立虚拟目录 140
11.3.3 管理站点 141
参考文献 142

1. 嵌入式人工智能技术应用（数字教材） [主编 胡娜 杨国勇 晏廷荣]
2. 职业教育专业大数据分析 [邓子云 著]
3. Java Web项目化设计实践教程 [邱云 曾陈萍]
4. 人工智能开发框架应用 [主编 王明超 芦娅云]
5. 民航客舱服务实用英语教程 [主编 田静 徐亚玲]
6. Python数据分析 [主编　冯志辉　赵磊　李放]
7. 大学信息技术 [曾翰颖 编著]
8. 创新创业训练实践教程 [主编 王日华 陈武 黄喆诚]
9. 实用运筹学 [主编　邢育红　于晋臣]
10. 电子技术（第二版） [主编 覃爱娜 李飞]
11. 工程数学 [主编 郭立娟 王海]
12. 语音识别理论与实践 [主编　莫宏伟]
13. 武术基础教程 [主编 李代勇 谢志民]
14. 计算机网络实训教程 [主编 张浩军 赵玉娟]
15. 电工电子技术基础 [主编 刘 军 杨国龙 刘天成]
16. MySQL数据库项目式教程 [陈亚峰]
17. 机械设计基础（第二版） [主编 田亚平 李爱姣]
18. 画法几何与机械制图 [主编 赵军]
19. C语言程序设计习题与实验指导（第二版） [主编 甄增荣 张宾]
20. C语言程序设计（第二版） [主编 甄增荣 田云霞]
21. Unity3D虚拟现实应用开发实践 [主 编 刘龙]
22. 智能化技术基础（第三版） [邓文达　李礼]
23. 面向对象程序设计 [主编 张勇 张平华 赵小龙]
24. 网络营销 [主编 夏薇薇 刘婷 尚洁]
25. 电视节目策划与制作（微课版） [主　编　黄滴滴]
26. 数据库技术与应用实践教程（SQL Server 2019） [主 编 严晖 周肆清]
27. 大学应用数学 [主编 郭立娟]
28. 软件定义网络技术与实践 [主编　但唐仁]
29. 工业机器人拆装与调试 [主编 胡月霞 向艳芳 朱奇]
30. 信号与系统（第二版） [主编 张宇]