网页设计与制作
2008-10
人民邮电出版社
王君学,孙海伦,金哲 编著
218
中等职业教育是我国职业教育的重要组成部分,中等职业教育的培养目标定位于具有综合职业能力,在生产、服务、技术和管理第一线工作的高素质的劳动者。 中等职业教育课程改革是为了适应市场经济发展的需要,是为了适应实行一纲多本,满足不同学制、不同专业和不同办学条件的需要。 为了适应中等职业教育课程改革的发展,我们组织编写了本套教材。在编写过程中,我们参照了教育部职业教育与成人教育司制订的《中等职业学校计算机及应用专业教学指导方案》及职业技能鉴定中心制订的《全国计算机信息高新技术考试技能培训和鉴定标准》,仔细研究了已出版的中职教材,去粗取精,全面兼顾了中职学生就业和考级的需要。 本套教材注重中职学校的授课情况及学生的认知特点,在内容上加大了与实际应用相结合案例的编写比例,突出基础知识、基本技能,软件版本均采用最新中文版。为了满足不同学校的教学要求,本套教材采用了两种编写风格。 “任务驱动、项目教学”的方式编写,目的是提高学生的学习兴趣,使学生在积极主动地解决问题的过程中掌握就业岗位技能。 “传统教材+典型案例”的方式编写,力求在理论知识“够用为度”的基础上,使学生学到实用的基础知识和技能。 为了方便教学,我们免费为选用本套教材的老师提供教学辅助光盘,光盘内容包括:电子课件。 老师备课用的素材,包括本书目录的电子文档,各章(各项目)学习目标”、“功能简介”、“案例小结”等的电子文档。 按章(项目)提供教材上所有的习题答案。 按章(项目)提供所有实例制作过程中用到的素材。书中需要引用这些素材时会有相应的叙述文字,如“打开教学辅助光盘中的图片‘4·2jpg’”。 按章(项目)提供所有实例的制作结果,包括程序源代码。 提供2套模拟测试题及答案,供老师考试使用。 在教材使用中老师们有什么意见、建议或索取教学辅助光盘,均可直接与我们联系,电子邮件地址是iao@ptpress.com.cn,wangping@ptpress.com.cn。
本书按照项目教学法组织教学内容。全书由16个项目构成,主要内容包括在网页中插入文本、图像、媒体、超级链接、表单等网页元素及其属性设置,运用表格、框架、层和Div标签等工具对网页进行布局,使用模板和库制作网页,运用CSS样式控制网页外观,使用行为完善网页功能,使用时间轴制作动画,在可视化环境下创建应用程序,使用Photoshop CS3、Flash 8配合Dreamweaver 8制作网页以及创建、管理和维护网站的基本知识。 本书可作为中等职业学校“网页设计与制作”课程的教材,也可以作为网页设计爱好者的入门用书。
项目一 认识Dreamweaver 8 任务一 了解Dreamweaver 8 任务二 欣赏优秀网站 任务三 制作一个简单的网页 (一) 定义站点 (二) 创建和保存文件 (三) 设置文本属性 (四) 保存工作区布局 项目实训 制作“选购照相机要注意哪些方面”网页 项目小结 思考与练习 项目二 网站的规划和管理 任务一 新建站点 任务二 管理站点 (一) 复制和编辑站点 (二) 导出、删除和导入站点 任务三 管理站点内容 (一) 设置首选参数 (二) 创建文件夹和文件 (三) 在站点地图中链接文件 项目实训 站点的管理 项目小结 思考与练习 项目三 文本编辑——编排数码摄影知识网页 任务一 网页文本的编辑 任务二 编排文本格式 (一) 设置文档标题格式 (二) 设置正文格式 任务三 完善网页 项目实训 设置“摄影器材的介绍”文档格式 项目小结 思考与练习 项目四 图像和媒体——编排摄影作品网页 任务一 插入图像 (一) 插入图像占位符 (二) 插入图像和设置图像属性 任务二 插入媒体 (一) 插入Flash动画 (二) 插入图像查看器 (三) 插入ActiveX视频 项目实训 设置“国宝熊猫”网页 项目小结 思考与练习 项目五 超级链接——制作导航网页 任务一 设置锚记超级链接 任务二 设置图像超级链接 任务三 设置电子邮件超级链接 任务四 设置文本超级链接 项目实训 设置“唐诗欣赏”网页 项目小结 思考与练习 项目六 表格——布局商务网页 任务一 使用表格布局页眉 任务二 使用嵌套表格布局主体页面 (一) 布局网页右上方栏目的内容 (二) 布局右下方栏目的内容 任务三 使用表格布局页脚 项目实训 使用表格布局“玉石的种类”页面 项目小结 思考与练习 项目七 框架——制作绿色天空论坛网页 任务一 创建论坛框架网页 (一) 创建框架 (二) 保存框架 任务二 设置论坛框架网页 (一) 设置框架集和框架属性 (二) 设置框架中链接的目标窗口 项目实训 使用框架布局“社区论坛”网页 项目小结 思考与练习 项目八 CSS——设置海洋知识网页样式 任务一 设置页眉CSS样式 (一) 定义“body”的CSS样式 (二) 定义页眉的CSS样式 任务二 设置网页主体的CSS样式 (一) 设置左侧栏目CSS样式 (二) 设置右侧栏目的CSS样式 任务三 设置页脚的CSS样式 项目实训 使用CSS设置“盘古石翡翠”网页样式 项目小结 思考与练习 项目九 Div——布局搜索网页 任务一 布局页眉 任务二 布局主体 任务三 布局页脚 项目实训 使用层和Div标签布局网页 项目小结 思考与练习 项目十 时间轴——制作航行动画 任务一 使用层制作蓝天大海背景 任务二 使用时间轴制作运动效果 项目实训 使用层和时间轴制作“诗词”动画 项目小结 思考与练习 项目十一 库和模板——制作花卉基地主页 任务一 创建库 (一) 创建库项目 (二) 编排页眉库项目 (三) 编排页脚库项目 任务二 创建模板 (一) 创建模板文件 (二) 插入库项目 (三) 插入模板对象 任务三 应用模板 项目实训 制作“宠物联盟网”网页模板 项目小结 思考与练习 项目十二 使用行为完善网页功能 任务一 设置页眉部分 (一) 设置状态栏文本 (二) 制作弹出式菜单 任务二 设置主体部分 (一) 打开浏览器窗口 (二) 交换图像 (三) 弹出信息 (四) 控制Shockwave或Flash 项目实训 制作垂直弹出式菜单 项目小结 思考与练习 项目十三 表单——制作注册网页 任务一 创建表单 任务二 验证表单 项目实训 制作“注册邮箱申请单”网页 项目小结 思考与练习 项目十四 应用程序——制作咨询网页 任务一 定义站点并创建数据库连接 (一) 定义站点 (二) 创建数据库 (三) 创建数据库链接 任务二 制作心情速递站页面 (一) 制作心情速递站页面 (二) 制作咨询主题页面 (三) 制作咨询结果页面 任务三 制作咨询回复页面 (一) 制作咨询主题列表页面 (二) 制作咨询主题回复页面 (三) 制作咨询主题删除页面 (四) 限制对页的访问 (五) 用户登录和注销 项目实训 制作“用户信息查询”网页 项目小结 思考与练习 项目十五 网页三剑客——制作一翔集团网页 任务一 制作页眉 (一) 制作网站logo (二) 制作宣传标语 (三) 布局页眉 任务二 制作主体 (一) 制作宣传动画 (二) 布局主体页面 任务三 制作页脚 (一) 制作导航图像 (二) 布局页脚 项目实训 使用Photoshop和Flash制作动画 项目小结 思考与练习 项目十六 发布和维护网站 任务一 配置服务器 (一) 配置Web服务器 (二) 配置FTP服务器 任务二 发布网站 任务三 维护网站 (一) 检查链接 (二) 改变链接 (三) 查找和替换 (四) 清理文档 (五) 保持同步 项目实训 配置服务器和发布站点 项目小结 思考与练习
项目一 认识Dream weaver 8 本项目主要是让读者对网页制作软件Dream weaver 8有一个总体认识,如图1-1所示。首先欣赏一些优秀案例,然后学习Dream weaver 8的功能和作用,最后通过制作一个简单的网页来认识Dream weaver 8的工作界面,并学习常用工具栏和面板的基本使用方法。 任务一 了解Dream weaver 8 Dream weaver是美国Macromedia公司(1984年成立于美国芝加哥,2005年被Adobe公司并购)开发的集网页制作和网站管理于一身的所见即所得式网页编辑器,是针对专业网页设计师而设计的视觉化网页开发工具,它可以让设计师轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。由Macromedia公司开发的Dream weaver与Flash、Fireworks一起被称为“网页三剑客”,在Macromedia公司被Adobe公司并购后,2007年由Adobe公司发布的网页三剑客是指Dream weaver、Flash和Photoshop。 对于初学者来说,Dream weaver的可视化效果让用户比较容易入门,具体表现在两个方面:一是静态页面的编排,这和Microsoft Office等办公可视化软件是类似的;二是交互式网页的制作,这是它与其他网页制作软件不同的重要特征。利用Dream weaver 8可以比较容易地制作交互式网页,很容易链接到Access、SQL Server等数据库。 Dream weaver集建立站点、布局网页、开发应用程序、编辑代码和发布网站等功能于一体,可轻松地完成网站开发的所有工作,因此,在各个行业领域都得到了广泛的应用,如个人网站、教育科研网站、企业网站、商业网站、政府网站、公益性网站以及其他网站等。 任务二 欣赏优秀网站 下面来欣赏几个优秀网站,希望通过欣赏读者能够增强对网页设计与制作的兴趣。 图1-2所示为中国海洋大学网站主页,其结构清晰、布局简洁,充分结合了现代教育理念,将教学与网络合理地进行了整合,实现了教学对象广泛、使用方便、时间自由以及节约成本等特点。 ……