网页设计实训教程

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

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

按照能力递进的原则安排各实训项目的学习，每个实训项目分为不同的任务，每个学习任务对应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. 管理基础与实务 [主编 王凤基 颜汉军]
4. 高等数学导学篇（上册） [主编 李文婧 胡雷 尹金生]
5. 高等数学（下册） [主编 李爱芹 胡雷 尹金生]
6. 高等数学（上册） [主编 李爱芹 胡雷 尹金生]
7. 人工智能应用基础 [主编 杨缨 李佳]
8. 中华水文化（慕课版）（第二版） [毕雪燕 杨华轲 罗玲谊 等编著]
9. 电路与电子技术Ⅱ——电路分析基础 [主编 陈晓 金哲]
10. 人工智能概论（第二版） [主编　任云晖　丁红　徐迎春 ]
11. 信息时代美育之道 [主编　刘宏宇　黎娅]
12. 数字媒体交互设计项目式教程（微课版） [主编　苏陆]
13. Amazing！儿童英语自然拼读分级教材（全8册） [王玲　编著]
14. Spark大数据处理技术 [主编　刘仁山　周洪翠　庄新妍]
15. 人工智能算法与实践 [主编　梁琨　张翼英]
16. 计算机网络技术项目化教程（微课版） [主编 王艳萍 安华萍]
17. 数据清洗 [黄源　刘智杨　孙大松]
18. 电路设计与PCB制作实操教程 [主编 周永宏]
19. 电路与电子技术Ⅰ—数字电子技术 [主编 郑玉珍 王淑琴]
20. Java编程基础案例式教程 [主编 陈艳华 唐春兰]
21. Excel在会计工作中的应用（第三版） [主 编 赵艳莉 耿聪慧]
22. 应用数学 [主编 刘东海 刘丽瑶]
23. Web用户界面设计与制作 [主编 赵娟]
24. 计算机网络基础创新教程（模块化+课程思政版） [主编 唐继勇 李旭]
25. 计算机应用技术基础案例教程 [主编 周丽娟 王璐]
26. Unity应用开发与实战（微课版） [主 编 程永恒]
27. PHP程序设计项目化教程 [主 编 杜海颖]
28. 文学基础与影视欣赏 [杨华轲 朱伟利 毕雪燕 罗玲谊]
29. 路由交换技术项目化教程 [主编　范国娟]
30. 信息技术基础立体化教程 [邹承俊 周洪林 刘和文 叶煜 ]