网页制作案例教程-清华大学出版社-第2章-网站设计与开发流程

1、 网页制作案例教程 毋建军 郑宝昆 郭锐 编著 清华大学出版社第2章 网站设计与开发流程本章学习目标（知识要点）n网站开发的基本流程n网站建站目标设计（定位网站主题和名称、定位网站CI形象、定位网站CI形象）n网站站点内容结构组织（确定栏目和版块、确定网站的目录结构和链接结构、确定网站的整体风格创意设计）n网站建站素材收集n网站功能结构设计n网站页面结构设计n网站功能模块页面实现n网站功能模块页面测试n网站系统部署、推广本章学习导航n网站设计与开发的基本流程和相关知识，是设计和开发一个网站的基本规范，也是初学者从宏观整体上设计和开发一个网站基本框架。本章重点了网站设计与开发的四个阶段流程，并对

2、每一个阶段和流程都进行了详细介绍，采用理论和实例结合的方式，以助初学者从整体角度掌握和理解网站设计、开发、部署及推广的基本方法。n本章内容在全书知识结构中所处位置如图所示 基础篇HTML篇CSS篇JavaScript篇提高篇网 页 设 计 与 开 发 流 程（AscentSys医药商务系统）网页制作基础HTML基础网页基本元素设计网页布局规划设计交互式网页表单的设计与使用利用模板和库创建网页CSS样式表使用CSS布局规划网页JavaScript网页应用Javascript概述网页中常见Flash制作Web服务器创建网站发布、测试和维护2.1 网站开发流程2.1.1 2.1.1 网站的需求分析网

3、站的需求分析 本书AscentSys医药系统客户的基本需求是：对于前端用户，通过系统能够登陆、了解到已公开发布的商品，对自己需要的商品进行采购，包括查询商品，购买商品，下订单等流程。对于后端系统管理员，通过系统能够进行用户管理:，商品管理，订单管理，邮件管理等。艾斯医药系统是基于网上购物的应用软件,在该系统上能了解到已公开发布的商品，对自己需要的商品进行采购。包括查询药品，购买药品，下订单等流程，方便快捷实现购物过程。 2.1.2 2.1.2 网站系统规划设计网站系统规划设计 网站系统的规划、设计主要包含两个部分：n网站系统总体设计n网站系统功能设计。 网站系统总体设计包含网站建站目标的设计确

4、定、网站站点内容结构组织、网站建站素材收集等内容。网站功能设计包含网站功能模块页面设计等内容。 n1、网站系统总体设计n1）网站建站目标设计n定位网站主题和名称n定位网站CI形象 n定位网站的类型n定位网站主题和名称 遵循以下原则：n主题不能过于分散，主题要小而精。因为网页主题越集中，一般情况下网页所 有者在这方面投入的精力会更多，因此所提供信息的质量也会越高。n主题要明确、突出，实现功能确定n主题应涵盖网页的核心内容n主题的设计要兼顾用户的注意力及搜索引擎检索的需要 n定位网站CI形象n网站的标志(logo)设计 n网站的标准色彩设计 n 网站的标准字体设计 n网站的宣传标语设计 n2）网站

5、站点内容结构组织n网站站点内容结构组织包含三个方面 n确定栏目和版块 n确定网站的目录结构和链接结构n 确定网站的整体风格创意设计 n确定栏目和版块 n设置网站栏目的基本原则：n各版块要有相对独立性。n各版块要有相互关联。n版块的内容要围绕站点主题。 n设置网站一般的网站栏目安排要注意的方面：n 版块内容紧扣网站的主题 n设一个最近更新或网站指南栏目n建议您设置“本站指南”栏目 n设定一个可以双向交流的栏目 n设一个下载或常见问题回答栏目 n确定网站的目录结构和链接结构 n网站的目录结构 n网站的链接结构 网站的链接结构主要作用在于：用最少的链接，使得浏览最有效率。 n3）网站建站素材收集n素

6、材的来源有多种，主要有网络搜集和自己制作两种方式 n2、网站系统功能设计n本书案例Ascentsys医药商务系统网站功能结构设计模块如下图所示Ascentsys医药商务系统商品管理邮件管理用户管理订单管理商品查询商品浏览后台管理注册登录游客登录购物注册2.1.3 网站的开发网站的开发 n1、网站功能模块页面实现nAscentSys医药系统网站系统功能模块结构设计，从系统管理、用户管理、游客功能、其他页面四个部分来实现页面功能。 n2、网站功能模块页面测试 n网站功能测试就是对产品的各功能进行验证，根据功能测试用例，逐项测试，检查产品是否达到用户要求的功能。常用的测试方法有：页面链接检查、相关性

7、检查、字符类型检查、中文字符处理等许多方面。2.1.4 网站系统部署、推广网站系统部署、推广n网站系统的部署、推广工作，通常包含：网站域名和空间申请、网站上传和访问测试、网站推广、维护、更新三大部分。 2.2 创建创建AscentSys医药系统站点医药系统站点 使用Dreamweaver CS3工具创建AscentSys医药系统站点。 n1、创建AscentSys医药系统本地站点 n1）打开Dreamweaver CS3，选择“站点”“新建站点”，弹出对话框，并输入站点名称“AscentSys”，如图2-2-1所示 图2-2-1 AscentSys站点定义 n2）单击“下一步”，选择默认设置（

8、否），继续“下一步”，在弹出的对话框中，可以选择修改网站的存储目录路径，如图2-2-2所示 图2-2-2 网站系统存储路径n3）单击“下一步”，在弹出的对话框中，修改文件在服务器上的存储位置。如图2-2-3所示 图2-2-3 文件服务器存储路径n4）单击“下一步”，选择默认选择，如图2-2-4所示图2-2-4 不启用存储和取出n5）单击“下一步”，弹出如图2-2-5所示对话框，上面显示刚才所定义配置的站点信息，单击“完成”，完成站点创建设置。 图 2-2-5 站点设置信息n6）创建成功的站点，在“文件”面板中显示，如图2-2-6所示 图2-2-6 完成站点设置n2、创建AscentSys医药系统站点目录 在上述站点创建成功的基础上，创建AscentSys站点目录。n1）选中“站点”，点击右键，菜单选择“新建文件夹”，在新建的文件夹中输入目录名称“images”，依次同样建立目录“css”、“flas