1、目 录1 网页设计实训的目的和要求 .11.1 网页设计的目的 .11.2 网页设计要求 .12 网站开发技术 .22.1 网站开发背景 .22.2 开发工具介绍 .43 总体设计 .53.1 网站系统需求分析 .53.2 系统流程图 .53.3 系统功能结构图 .64 系统设计 .74.1 系统设计与实现 .74.1.1 Logo 图标 .74.1.2 模板页的设计 .74.2 功能模块设计与实现 .84.2.1 商品浏览模块 .84.2.2 用户注册模块 .94.2.3 会员登录模块 .104.2.4 购物车模块 .114.2.5 客户反馈模块 .115 遇到的问题及解决方法 .126 实
2、训总结 .137 参考文献 .141 网页设计实训的目的和要求1.1 网页设计的目的（1）本系统是实训的任务，为了更好的了解网页制作，将理论知识与实践操作相结合，培养我们的创新精神和工程实践能力以及解决问题的能力，提高综合素质。（2）熟练掌握网站建设的基本技术与网页三剑客（Dreamweaver、Flash、Fireworks）一些基本的制作方法，学会使用设计与优化网页的多种方法及技巧，强化自己在网站建设与网页设计方面有更大的进步，使自己对网站建设与网页设计有更深的了解。（3）培养独立工作能力，学会创建与设计站点、创建与优化网页、测试与发布站点等网站制作的方法。1.2 网页设计要求（1）综合运
3、用 Dreamweaver、Flash、Fireworks 等网页设计技术；（2）设计页面：根据栏目内容，从主页面到子页面依次确定色调及版面布局设计，需要说明使用色彩及采用相关布局的排版模式的依据及原因；页面布局及设计要求做到站点风格统一，版面布局简洁等，要尽量多地体现学习到的设计技巧，如框架、模板、样式等；（3）链接的测试，安排各部分的链接，确定内容之间的联系，如超链接必须是有效的，无断链、错链；（4）网站的开发技术说明：阐述网站开发的软、硬件环境，使用到的技术手段；版权信息，注意书写网站的版权信息，说明网站的联系方式，如 E-mail、传真等。2 网站开发技术2.1 网站开发背景(1) 网
4、站构思：随着网络信息的发展，网络在人们生活中的应用越来越广泛，网络购物已经成为了购物的一大重要手段，通过它个人用户可以在网络上通过 Internet，突破时间和空间的限制而实现购物。(2) 网站主题：信息社会的高科技，商品经济化的高效益，使计算机的应用已普及到经济和社会生活的各个领域。计算机与人类的关系愈来愈密切。现如今，网络购物在生活中已经成为一种时尚，一种追求。a. 观今现状，新一代的上班族由于工作繁忙，总是会选择网络购物来满足自己的需求。由于各种各样的压力原因，他们总是会选择各种各样的方式来缓解压力，放松心情。适当的阅读可以开阔境界，提升修养，从而达到舒缓压力、愉悦心情的效果。同时可以在
5、信息发展的高科技时代，享受到原始书本的清香，丰富自己的知识面。b. 孩子教育是每个家庭的首要问题。孩子教育要在从小就开始培养，良好的学习环境是孩子得到高品质教育的前提。因此，很多家长会选择购买教学课本、辅导书、参考资料等来提升孩子的学习成绩。另外，孩子的课外知识面也要从小就开始推广。适当的少儿读物、漫画书等也是必要的。在孩子学习能力得到提升的同时，丰富童年生活，也可以提升孩子的阅读能力，提高想象思维。因此，学习时期劳逸结合很重要，合适的放松方式也是关键之处。c. 生活中处处存在细节，例如烹饪与饮食、运动与健康、穿着服饰、家居装饰、时尚、娱乐、旅游等。另外爱车一族、宠物园艺也是要日常注意的细节。
6、d. 网上商城类似于现实世界当中的商店，差别是利用电子商务的各个手段，达成从买到卖的过程的虚拟商店，从而减少中间环节，消除运输成本，加大市场流通带来巨大的发展空间。尽量的还消费者以利益，带动公司发展和企业腾飞。（3）网站名称：书酷图书网上商城（4）经济上可行性：本系统只要有一台能上网的 IE 即可运行， ，可以让商家和消费者之间更好的进行商品了解并相互沟通， ，节省了许多资源，提高经济效益。（5）技术上可行性：本系统的开发使用 Dreamweaver8 作为系统开发的工作环境，用 Flash、Fireworks 作为开发网上商城的工具。（6）运行上可行性：本网站为一个小型的图书购物网站，所耗费
7、的资源小，无论硬件还是软件都能够满足条件，因此，它在运行上是可行的。（7）开发意图：a. 网络信息的发展，网络越来越普及，网络购物已经成为购物的一大重要 手段 ；b. 使消费者突破时间和空间的限制而实现书籍的购买；c. 网上商城相比较于现实当中的商店而言，减少中间环节，节约了很多资源，加大市场流通带来的巨大发展空间；d.为了拓展图书的销售渠道，为用户提供更优质、高效的服务；e.为了用户更好的了解和掌握图书发展的最新动态；f. 更好的与用户沟通，进一步了解用户的需求，增强产品研发的必要性；g.本系统也是实训的任务，为了更好的了解网页制作，将理论知识与实践操作相结合，提高自己的动手实践操作能力和解
8、决问题的能力。（8）应用目标：1）通过本软件系统，网站管理员快速方便的对产品和订单以及会员信息进行管理；2）网站管理员发布最新动态信息，让用户了解最新产品以及近期的一些优惠活动；3）增强管理员与用户之间联系和沟通，了解消费者需求；4）浏览者可以利用网络，快速且全方位的了解产品，并提供在线购买的功能通过本系统软件，一方面，能帮助网站管理人员利用计算机，快速方便的对产品和订单进行管理，发布企业的最新动态信息，并增强与用户的联系和沟通；另一方面，能帮助网站的浏览者利用网络，快速且全方位地了解该品牌及其主要产品，并提供在线购买和咨询等功能。2.2 开发工具介绍本系统的开发主要使用网页三剑客（Dream
9、weaver、Flash、Fireworks）和Photoshop。网页三剑客名称由来：之所以称之为三剑客， 很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常由 Fireworks 导出切片、图片等，然后在 Dreamweaver 中绘制表格；较为流行的一种是在 Fireworks 中做好主要页面，然后导出，在Dreamweaver 中加以修改，添加链接等，便做出一个非常好看的页面。软件简介：Dreamweaver 是一个“ 所见即所得”的可视化网站开发工具，主要用于动态网页的开发；Fireworks 主要是用于对网页上常用的 jpg、gif 的制作和处理，也可用于制作网页布局；
10、Flash 主要用来制作动画，现推出 Flash 平台，可预见有极好的前景。网页制作三剑客目前分工如下：Dreamweaver（网页制作）特点：最佳的制作效率。可以用最快速的方式将 Fireworks，FreeHand，或 Photoshop 等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。Flash（动画制作）特点：被大量应用于互联网网页的矢量动画文件格式。使用向量运算Vector Graphics的方式，产生出来的影片占用存储空间较小。使用 Flash 创作出的影片有自己的特殊档案格式 swf。Fireworks（矢量图形制作和图像处理）特点：矢量编辑与位图编辑
11、。创建和编辑矢量图像与位图图像，并导入和编辑本机 Photoshop 和 Illustrator 文件。Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。3 总体设计3.1 网站系统需求分析图书在线预订系统是针对目前图书销售市场的发展需求开发的一个系统。目前图书市场传统模式落后，如果书店建立分店来扩展业务提高销售额，需要大量的资金，建立一个电子商务下的图书在线预订系统可以突破空间和时间的限制，节省成本，增加销售额，提高配送效率，书店还可以轻松的把握
12、图书市场行情。3.2 系统流程图本系统是一个小型的图书商城，分为前台和后台模块。前台主要是用户的基本操作，例如：新用户注册、会员登录、购物车、客户留言等。后台主要是网站管理员对商城的管理，例如：用户信息的录入、修改、对图书添加、删减的一些操作。首页经常会推出新出版的图书。如图（3-1）是图书添加的操作流程图。否是否 是 是 否开始图书管理员登录添加图书种类 输入类型、描述删除图书删除 添加图书输入相关图书信息结束图 3-1 系统流程图3.3 系统功能结构图网站的设计主要是要求功能模块的实现。本系统是一个小型的网上图书商城，其前台供用户操作的功能主要是首页所有商品类型的浏览和用户登录以及商品的搜
13、索、商品详情页的介绍、新用户的注册、会员登录、购物车结算功能模块以及客户留言的功能等。系统的主要功能如图（3-2）所示。前台系统首页商品详情 免费注册 用户登录 购物车 客户留言图书浏览 会员登录 注册页面 留言页面结算页面登录页面商品搜索 商城积分图 3-2 系统功能结构图4 系统设计4.1 系统设计与实现4.1.1 Logo 图标图 4-1 logo 图标网站 logo 图标（如图 4-1）色彩主要有蓝色和白色组合而成。蓝色和白色可以给人清新、淡雅的感受，也可以营造安静的阅读环境。Logo 中白色上部分是一个书籍形状的图案，可以看得出喻示图书；白色中间部分是由圆组成，象征阅读者的眼睛；下部
14、分是由一条弧线而成，喻示一个微笑的嘴唇；白色外围由一个蓝色的圆覆盖；图标整体看起来是一个人的笑脸，可以给人亲切、温和的感觉。4.1.2 模板页的设计由于该网站的主营业务是图书，因此网站在 logo 设计上需突出强调图书，在设计模版时，将 logo 设置为不可编辑区域，用以凸显该网站的主营业务。模版页布局采用目录与横幅的框架效果，如图 4-2 所示。图 4-2 目录与横幅的布局效果确定界面的大致风格后，还需在模版中设置可编辑区域。在目录与横幅的框架中，通常在右侧主区域中放置灵活变化的内容信息，而在左侧和顶部显示固定信息。因此，放置可编辑区域后的模版页效果，如图 4-3 所示。创建好的网站模版通常
15、放置在站点的 templates 文件夹下。图 4-3 网站模板4.2 功能模块设计与实现4.2.1 商品浏览模块首先用户在进入一个网站页面是为了浏览该网站的商品，寻找自己所需要的产品。首页一般能体现出一个网站的整体风格，是整个商城所有产品的汇集地。所以，一般浏览者在进入到网站页面时会大概浏览网站的所有商品，再逐个浏览商品详情页。本系统是一个小型的图书购买商城，首页主要是按照图书类型进行分类，以便浏览者可以清晰的看到所有图书类型。另外也有一些推荐图书和新上架的图书供浏览者参考。在浏览者还没有明确目标购买何种图书时，可以通过首页了解所有图书并进行相互比较，在有了明确购买目标时，浏览者也可以按照条件在搜索栏进行图书搜索，快速、准确的寻找到自己预先所想要购买的书籍。点击所看中的书籍，链接到图书详情页面，了解图书的一些基本信息。如图 4-4、4-5 所示。图 4-4 网站首页图 4-5 图书详情页4.2.2 用户注册模块用户注册模块为浏览者提供注册为系统用户的功能。由于本网站暂时不提供匿名购买的功能，因此购买者只有成为本网站的注册用户才可以在线购买产品。为了便于管理，一个用户仅允许注册一个用户名，且用户名不允许重名。用户注册的流程如图 4-6 所示。 图 4-6 用户注册流程图否是检查重名 提交成功填写注册信息校验注册信息开始
