本书以网页设计与动态网站开发过程为基础构建学习模块，以完成岗位工作任务为主线编写各任务内容。本书分为基础篇和提高篇，共有9个模块：网页赏析、网页动画应用、Fireworks切片应用、网页界面切图、网页布局、行为和JavaScript特效、网站架构、网站设计综合应用、网站建设前期准备与发布。
教材内容贴近网页网站设计行业的实际需求，按照工作主线提取不同的能力目标，分配到19个不同的情境，以任务教学的方式培养学生在网页制作与网站架构工作中分析问题、解决问题的能力。
本书适合作为高等学校相关专业的教材，也可作为相关企业的培训教材，并适合于网页制作与网站建设的初学者阅读。

《网页设计与动态网站开发》是指导初学者学习网页制作与网站建设的入门书籍。本书详
细介绍了初学者学习网页制作与网站建设必须掌握的专业应用软件和设计方法，对初学者在进
行网页制作与网站建设时经常会遇到的问题进行了专家级的指导，减少了初学者在起步中的摸
索，是初学者成功学习网页制作与网站开发的专业书籍。
全书分为 9 个模块，内容包括网页赏析、网页动画应用、Fireworks 切片应用、网页界面切
图、网页布局、行为和 JavaScript 特效、网站架构、网站设计综合应用、网站建设前期准备与
发布。
本书在编写过程中，注意理论与实践相结合，通过大量的实例配合讲解各知识要点。根据各
个任务背景进行效果制作，在独立的实践任务中拓展典型案例，极大地扩充了本书的知识范围。
本书编写过程中，根据“世界技能大赛 Web DeSign”竞赛项目的内容和要求，分析讲
解了使用开源类库和框架制作客户端应用案例。在网站架构方面，采用了 XAMPP 架构，集
成了 PHP 环境、MySQL 数据库、phpMyAdmin可视化数据库操作工具，可以减轻网站架构
人员对数据库结构化语言的依赖，同时，对大赛所涉及的最前沿的专业技术有所掌握，为
下一步深入掌握网页制作与网站架构打下扎实的基础。
本书语言通俗易懂，内容丰富，知识涵盖面广，基础篇非常适合网页设计师国家职业（三
级）学者阅读。提高篇的内容涵盖了“世界技能大赛 Web DeSign”知识点，填补了相关教程的
空白，同时，对有经验的网站建设者也有很高的参考价值。
本书的编写得到了上海理工大学、上海大学、上海出版印刷高等专科学校长期从事本课程
教学的中青年教师的大力支持。编 写队伍既有来自于教学一线具有丰富职业技能竞赛教学经验
的教师，也有来自于华为的软件工程师刘波（先后从事程序员、互联网软件开发工程师、网站
架构设计师、软件工程师等职位，具有丰富的网站开发经验），同时得到了上海将相信息技术
有限公司 CEO 李永锋及其团队的鼎力支持。
本书由王正友任主编，廖小兵、吴丽萍任副主编，胡郁、程鹏飞、刘波、李杰参与编写。
其中：王正友编写了模块1、2、3、4，廖小兵编写了模块7（情境2中的任务2除外）、模块 9，
吴丽萍编写了模块5，胡郁编写了模块6，刘波编写了模块7情境2中的任务2，程鹏飞编写了
模块8。上海市信息管理学校李杰负责全书的文字编校与修饰，以及部分模块中任务的文字艺
术化情境撰写。
本书在编写和出版过程中得到了各校领导和专家的大力支持和帮助，在编写、资料收集和
案例选取工作中，得到了穆俊鹏、韩剑亮、黄忠、戴俊杰、蒋志、程士元、唐偲、崔庆斌、钱
志伟、徐立萍、朱伟、李果（安徽新闻出版职业技术学院）、李永锋（上海将相信息技术有限
公司）、马剑锋（上海大学）、李明（山东广播电视台）等老师的热情指导和帮助，在此一并表
示由衷的感谢。
本书的实例素材和完成的效果、教学PPT均可在中国铁道出版社网站下载，欢迎相关行业
人士、教师和读者对本书提出宝贵的改进意见，编者联系方式：wangzy59@163.com。
编 者
2015 年 7 月

基 础 篇
模块1 网页赏析............................2
情境 1精彩网页赏析 .......................... 2
模拟制作任务 ...................3
任务 1网页界面布局 ..................3
● 网页布局设计...................................7
● 网站首页设计...................................8
● 网页完善优化...................................8
● 网页设计标准尺寸..........................8
● 网页设计常用软件..........................9
独立实践任务 ...................9
任务 2界面布局分析 ..................9
情境 2网页界面色彩欣赏................. 10
模拟制作任务 ..................10
任务 1网页界面色彩 ................10
● 网页色彩的黄金分割法............... 14
● 网页字体......................................... 15
● 网页配色软件ColorKey .............. 15
独立实践任务 ..................16
任务 2访问 Internet 上的家教
类网站............................16
知识考核..............................................16
模块2 网页动画应用...................18
情境 1图片动画展示 ......................... 18
模拟制作任务 ..................19
任务 1匀速滚动胶片动画.........19
任务 2图片切换动画 ................20
任务 3轮播显示动画 ................22
● OBJECT标签................................ 24
● EMBED标签................................ 25
● OBJECT+EMBED标签.............. 25
● 使用菜单插入媒体文件............... 25
独立实践任务 .................. 25
任务 4多图切换动画 ................25
任务 5变速滚动胶片动画.........26
任务 6多图轮显动画 ................26
情境 2GIF 动画设计 ..........................27
模拟制作任务 .................. 28
任务 1闪烁文字........................28
任务 2动态 Banner 广告 ...........31
任务 3匀速滚动胶片动画.........33
● Logo大要好看.............................. 36
● Logo小要好看.............................. 36
● Logo黑白要好看.......................... 36
● Logo可以有各种颜色................. 36
● Logo可以轻易地画出来............. 36
● Logo在CMYK与RGB模式下都
很好看............................................. 36
● Logo能够做成动画..................... 37
● Logo具有国际画质感................. 37
● Logo代表的是企业精神............. 37
● Logo具有广泛的应用性............. 37
● 让人想穿在身上............................ 37
● 不要在设计Logo之前太在意
Logo要包含什么寓意................. 37
目录 CONTENTS
拓展知识
拓展知识
拓展知识
拓展知识
2
网页设计与动态网站开发
独立实践任务 ..................37
任务 4Logo 动画 .......................37
任务 5Banner 动画....................38
知识考核..............................................38
模块3 Fireworks切片应用..........41
情境 1导航按钮和菜单 ..................... 41
模拟制作任务 ..................42
任务 1创建导航栏 ....................42
任务 2创建弹出菜单 ................44
● 热区和切片的区别....................... 47
独立实践任务 ..................48
任务 3打火机动画 ....................48
任务 4创建导航菜单 ................48
情境 2图像交换展示 ....................... 48
模拟制作任务 ..................49
任务 1使用行为交换图像.........49
任务 2使用切片交换图像.........50
任务 3使用热区交换图像.........53
● 使用Dreamweaver占位符调用
Fireworks图像.............................. 56
● 将Fireworks HTML复制到剪贴
板并在Dreamweaver中使用..... 56
独立实践任务 ..................56
任务 4童年的游戏 ....................56
任务 5经典影视展示 ................57
知识考核..............................................58
模块4 网页界面切图...................60
情境 1Fireworks 切图 ....................... 60
模拟制作任务 ..................61
任务 1切割年代网 60 年代
主页面............................61
任务 2制作年代网老照片展示
页面................................63
● Fireworks切图原则...................... 67
● 导出HTML设置.......................... 68
● 网页居中显示................................ 69
独立实践任务 .................. 70
任务 3制作花卉网站主页.........70
情境 2Photoshop 切图......................72
模拟制作任务 .................. 73
任务 1切割新亚房产主页面.....73
● Photoshop切图遵循的原则........ 76
● Photoshop切图与CSS+DIV
联合应用........................................ 76
独立实践任务 .................. 87
任务 2手机 App 界面设计与
切图................................87
知识考核..............................................87
提 高 篇
模块5 网页布局..........................90
情境 1DIV+CSS 布局方法 ................. 90
模拟制作任务 .................. 91
任务 1DIV 自然布局.................91
任务 2DIV 浮动布局...............101
任务 3精确定位布局 ..............118
● 认识盒模型...................................124
● 定位和浮动的区别......................125
● Z-index属性................................125
● CSS常用技巧.............................125
独立实践任务 ................. 126
拓展知识
拓展知识
拓展知识
拓展知识
拓展知识
3
目 录
任务 4制作上下结构的图文混排
CSS 列表.......................126
情境 2DIV+CSS 综合布局................ 127
模拟制作任务 .................127
任务 1咖啡馆的主页 ..............127
任务 2世界技能大赛赛程
管理主页 ......................143
● 设置页面居中.............................. 158
● 常见布局版式.............................. 159
独立实践任务 .................160
任务 3西餐厅主页 ..................160
知识考核............................................161
模块6 行为和JavaScript特效...163
情境 1AP DIV 和行为的使用............ 163
模拟制作任务 .................164
任务 1弹出窗口的制作...........164
任务 2使用图像行为 ..............167
任务 3制作图片的渐隐载入显
示效果..........................168
任务 4选项卡式面板的制作...170
● 行为的概念................................... 177
● 行为的基本操作.......................... 180
● 行为的应用.................................. 180
● 什么是Spry.................................. 181
● Spry的功能................................. 181
独立实践任务 .................182
任务 5多级菜单的制作...........182
情境 2JavaScript 脚本语言 ............. 182
模拟制作任务 .................183
任务 1宽屏幻灯片 ..................183
任务 2随滚动条上下移动的
菜单..............................187
任务 3跑马灯的制作 ..............191
任务 4跟随鼠标的字符...........193
任务 5在线 QQ 制作 ...............195
● Marquee........................................197
● 事件与事件处理..........................198
● JavaScript中的注释...................198
独立实践任务 ................. 198
任务 6漂浮广告......................198
知识考核............................................199
模块7 网站架构........................201
情境 1认识和使用网站架构环境 .... 201
模拟制作任务 ................. 202
任务 1安装和配置 XAMPP .....202
任务 2简单网页计数器制作...204
任务 3学习和使用
phpMyAdmin.................206
● XAMPP的配置文件路径.........214
● XAMPP的常用路径..................214
● XAMPP的默认密码..................214
独立实践任务 ................. 215
任务 4安装 CMS 套件 .............215
情境 2动态网站建设 ...................... 216
模拟制作任务 ................. 216
任务 1会员注册和管理...........216
任务 2用开源类库和框架制作
客户端应用 ..................229
● PHP Session 变量.......................237
● 开始PHP Session .......................238
● 存储Session 变量......................238
● 终结Session .................................238
独立实践任务 ................. 239
任务 3安装 CMS 网站模板 .....239
拓展知识
拓展知识
拓展知识
拓展知识
拓展知识
4
网页设计与动态网站开发
知识考核............................................239
模块8 网站设计综合应用..........241
情境 1创建 MySQL 数据库 .............. 241
模拟制作任务 .................242
任务 1建立留言板数据库.......242
● 经典SQL语句............................ 245
独立实践任务 .................247
任务 2创建论坛数据库...........247
情境 2数据库函数实现.................. 248
模拟制作任务 .................248
任务 1编写数据库类 ..............248
● PHP中的MySQL常用函数使用
举例............................................... 254
独立实践任务 .................258
任务 2修改更新数据库用户记录
的函数..........................258
情境 3留言板功能实现.................. 258
模拟制作任务 .................259
任务 1实现留言板功能...........259
●BBS论坛数据库设计................ 274
● 标识每个实体的属性................. 274
● 标识对象之间的关系................. 274
● 绘制E-R图................................. 274
● 将E-R图转换为表.................... 274
独立实践任务 .................276
任务 2实现论坛功能 ..............276
知识考核............................................277
模块9 网站建设前期准备与发布...279
情境 1网站建设前期准备 .............. 279
模拟制作任务 ................. 280
任务 1域名申请......................280
任务 2空间（虚拟主机）申请.... 283
● 域名的概念...................................285
● 域名的类型...................................285
● 国家或地区域名和国际域名的
区别................................................286
● 对于申请域名的规定.................286
● 国际域名管理机构......................286
● 域名地址服务器..........................286
● Internet上域名命名的一
般规则...........................................286
● CN域名命名的规则..................287
● 注册域名.......................................287
● 域名发生冲突的处理.................287
独立实践任务 ................. 287
任务 3客户需求分析及
网站规划......................287
情境 2网站的发布与推广.............. 288
模拟制作任务 ................. 288
任务 1文件传输工具
FileZilla FTP 的使用 ...288
● 文件传输协议..............................292
● FTP传输方式.............................292
● FTP支持模式.............................292
● FTP工具......................................292
独立实践任务 ................. 293
任务 2网站推广......................293
知识考核............................................293

主要著译者顺序姓名学历职称学科专长通讯地址1 王正友 副教授 工作单位上海出版印刷高等专科学校 邮政编码 电话 2 工作单位 邮政编码 电话 3 工作单位 邮政编码 电话 审校者（主审者） 学历 工作单位 邮政编码 电话 职称 工作单位 邮政编码 电话 王正友：1989年4月毕业于上海大学机电工程与自动化学院，获工学硕士学位;毕业后，于上海大学任教，历任讲师、计算机中心系统室主任、上海大学计算机培训部主任、1997年人才引进到上海出版印刷高等专科学校，是电子出版专业学科的奠基人，多媒体设计与制作专业的学科方向带头人。主要科研工作与成果： 参研国家级重点实验室建设一项，是上海理工大学现代传播科学实验中心建设的奠基人之一，主持完成上海市科研项目5项。在国内外重要学术刊物发表论文10多篇。主编有《C语言程序设计——基础与提高》、《数字媒体基础与实验》、《网络规划与系统集成》等6本教材。2005年7月获优秀教学成果三等奖，2007年《数字媒体基础》是上海市重点课程，2009年《数字媒体基础》获得上海市精品课程建设。