如何设计与开发电子商务网站 课件

设置测试服务器后可以安全地测试所有动态代码而不会对正式 发布的网站造成任何损害。
第3章 电子商务网站设计与开发

3.2.7 用 Dreamweaver CS6 制作动态网页 4．在 Dreamweaver 中启用 ASP.NET 支持
Dreamweaver CS6 不再支持通过 ASP.NET C#、ASP.NET VB 中的服务器行 为和记录集自动生成代码，要让其支持 ASP.NET 动态网页开发，需要完成以下准备。 （1）安装 ASP.NET 扩展。 （2）部署支持文件到测试服务器。
（1）网页色彩搭配的原理。
（2）网页色彩搭配的技巧。
第3章 电子商务网站设计与开发

4．网页中图片和文字的设计 图像可以弥补文字的不足，但并不能够完全取代文字。
（1）善用图片。
（2）网站字体设计技巧。
不要使用超过 3 种以上的字体，不要使用太大太小的字号。
第3章 电子商务网站设计与开发

3.2.4 首页设计
第3章 电子商务网站设计与开发

3．动态网页的制作
（3）使用 Dreamweaver 设计动态网页（动态网站）的基本步 骤： ① 设计页面。 ② 创建动态内容源。 ③ 向网页添加动态内容。 ④ 向页面中添加服务器行为。
⑤ 测试和调试页面。
第3章 电子商务网站设计与开发

3.2.7 用 Dreamweaver CS6 制作动态网页 1．设置本地站点（Site） 2．配置服务器端环境
第3章 电子商务网站设计与开发

一个网页通常包括以下 3 个部分：
HTML：描述网页的具体内容和结构。 CSS：定义网页的样式（网页美化的主要模块）。 JavaScript：实现网页的交互效果，如对用户鼠标事件做出响应。
第3章 电子商务网站设计与开发

2．Dreamweaver CS6
第3章 电子商务网站设计与开发
HTML 目前新版本为 5.0，也称 HTML5。HTML5 是下一代 HTML 标准，2014 年 10 月由万维网联盟（The World Wide Web Consortiun，W3C）完成标准制定。HTML5 解决了 HTML4 等以 前版本的很多问题，增加了许 多新特性，如嵌入音频、视频和图 片的函数、客户端存储数据、交互式文档等，进一步增强了互动 性，并有效 减少了开发成本。
⑤制作二级网页。
第3章 电子商务网站设计与开发

3．动态网页的制作 动态网页的制作分为两种：
网页表示形式的动态制作和网页数据内容的动态制作。
（1）网页表示形式的动态制作。 网页表示形式的动态制作是通过在静态网页中添加活动内容， 附加一些由 其他语言所编写的小程序来使原本内容固定的 HTML 文件更加吸引人。
第3章 电子商务网站设计与开发

2．网站内容设计流程
1．收集与该网站有关的一些关键信息。 4．进行网页可视化设计。 2．网站信息结构的设计。 3．网站运行环境的选择。 5．网页制作。 6．网站测试和发布。
第3章 电子商务网站设计与开发

3.2.2 网站信息结构的设计
一般来说，电子商务网 站建设与企业的经营战略、产品特性、 财务预算以及当时的建站目的等因素有着直接关系。 1．网站信息内容及其功能模块 公司概况、员工信息、产品目录、产品价格表、产品搜索、
第3章 电子商务网站设计与开发

3.2.5 其他页面的设计 1．新闻页面的设计
2．产品页面的制作
3．雇员页面 4．其他页面设计
第3章 电子商务网站设计与开发

3.2.6 网页制作 1．电子商务网站中的 Web 资源
一般而言，一个电子商务网站中 的 Web 资源总是包括静态网页和动 态网页两种 通常情况下，公司介绍、员工信息、销售网络、售后服务信息、联系 信息等是一些相对固定不变的信息， 其更改频率不高，可以以静态网 页的方式进行制作。而产品的信息、网上销售的信息（产品价格、产 品目录、 购物车、订单、产品搜索等）以及其他服务（如技术支持、 公司新闻动态、论坛系统），特别是网站的管理系 统，一般而言都是 采用动态网页的形式
3.2.3 网页的可视化设计 1．网页设计应遵循的原则
网页命名简洁、页面的导航性好、网页要易读、
合理设计视觉效、为图片添加文字说明、 不使用太多的动画和静态图片、页面长度要适中、 少用Java 程序、整个页面风格要一致、 尽量使用相对超链接。
第3章 电子商务网站设计与开发

2．网页版面布局设计
电子商务网站设计与开发
第3章 电子商务网站设计与开发

本章主要介绍常用的网站开发工具和 技术、网站设计和规划、 网页上传等方面 的知识。考虑到移动应用在电子商务领域 日 益重要，本章还讲解了移动设备网页的 制作。
第3章 电子商务网站设计与开发

3.1 网站开发工具与技术
3.1.1 HTML5 和 Dreamweaver CS6
公司动态、销售网络、售后服务、技术支持信息、联系信息等。
第3章 电子商务网站设计与开发

2．网站链接结构的设计
网站开发人员应在网站信息结构设计的同时，规划并设计好主次 分明、结构清晰的 网站链接结构，使浏览者对网站内容一目了然。 （1）树状链接结构（一对一）。 （2）网状链接结构（一对多）。
第3章 电子商务网站设计与开发
（1）网页版面布局步骤：
创建初始方案、初步设计网页的布局、 定案。 （2）常见的版面布局形式

“T”结构布局。
“口”型布局 “三”型布局。 对称对比布局 POP布局
“T”结构布局
“口”型布局
POP布局
第3章 电子商务网站设计与开发

3．网页色彩设计
在网页设计中，应根据和谐、均衡和重点突出的原则，将不同的 色彩进行 组合、搭配来构成美丽的页面。

第3章 电子商务网站设计与开发

4．ASP 与 ASP.NET 的区别
ASP.NET 与 ASP 的主要区别在于，前者是编译（Compile）执行， 后者是解释（Interpret）执 行，前者比后者有更高的效率。除此之 外，ASP.NET 还可以利用.NET 平台架构的诸多优越性能，如类型 安全， 对 XML、SOAP、WSDL 等 Internet 标准提供强健的支持。
第3章 电子商务网站设计与开发

2．静态网页的制作 选择使用 Dreamweaver 来制作静态网页。
第3章 电子商务网站设计与开发

2．静态网页的制作 创建网站的操作步骤：
ຫໍສະໝຸດ Baidu
① 创建本地网站。
② 制作网站站标和横幅动画。 ③ 使用 Dreamweaver 布局视图或表格功能设置首页布局。
④ 使用 Dreamweaver 完成网页制作。
第3章 电子商务网站设计与开发

3．动态网页的制作
（2）网页数据内容的动态制作。
网页数据 内容的动态制作是动态 Web 页的一个重要的应用， 也是电子商务网站资源建设的一个重要的 组成部分。
交互式动态网页的制作主要包括两大步骤：
数据库设计和动态应用程序的制作。
① 数据库设计阶段。 ② 程序设计阶段。
Adobe 公司开发的集网页制作和管理网站于一身的“所见即所得” 网页编辑器。
Dreamweaver 具有功能强大、动态网页制作、方便和高效率等优 势。
第3章 电子商务网站设计与开发

3.1.2 ASP 和 ASP.NET
Web 动态技术发展快、种类多，其中包括脚本语言、服务器端 技术 CGI、ASP、 ASP.NET、JSP 和 PHP 等。 1．客户端脚本语言 脚本语言（Script Language）是一种简单的 描述性语言，它的语法结构与计算机上的高级语言颇为相似， 所以相对于其他的 Web 技术来说是简单易用的。脚本语言的出 现较好地解决了 Web 页的动态交互问题。

第3章 电子商务网站设计与开发

3.2.7 用 Dreamweaver CS6 制作动态网页 6．向 Web 页添加动态内容
定义数据集或其他数据源并将其添加到“绑定”面板后，可以 将该数据集所代表的动态内容插入到页面中。

7．向 Web 页添加服务器行为
“服务器行为”是预定义的服务器端代码片段，这些代码向 Web 页添加应用程序逻辑，从而提 供更强的交互性能和功能。
第3章 电子商务网站设计与开发
3.2.7 用 Dreamweaver CS6 制作动态网页 5．创建动态内容源 （1）建立数据库。 （2）建立数据库连接。 ASP.NET 动态网页必须通过 OLE DB 提供程序连接到数据库。 （3）创建数据集和数据绑定。 Dreamweaver 使用户可以更容易地连接到数据库并创建从中提 取动态内容的 记录集。记录集是数据库查询的结果。它提取请 求的特定信息，并允许在指定页面内显示该信息。根据包含在 数据库中的信息和要显示的内容来定义记录集。
动态网页的测试离不开服务器端环境，必须设置并安装 Web 服 务器（如 IIS、Apache）、数据库平台（如 SQL Server、MySQL、 Access）及服务器端语言环境（如 ASP、ASP.NET、PHP）。
第3章 电子商务网站设计与开发

3.2.7 用 Dreamweaver CS6 制作动态网页 3．设置测试服务器
第3章 电子商务网站设计与开发

3．网站整体风格的设计
（1）使企业的标志尽可能出现在每个页面上。 （2）突出网站的标准色彩。 （3）突出网站的标准字体。 （4）设计一条朗朗上口的宣传标语。 （5）使用统一的图片处理效果。 （6）创造一个企业网站特有的符号或图标。
第3章 电子商务网站设计与开发

第3章 电子商务网站设计与开发
2．ASP 技术 ASP 是微软公司开发的一套服务器端脚本运行环境，通过 ASP 用户可以建立动态的、交互的、高效 的 Web 服务器应用程序。

3．ASP.NET 技术 ASP.NET 是统一的 Web 应用程序平台，它提供了建立和部署 企业级 Web 应用程序所必需的服务。ASP.NET 为能够面向任何 浏览器或设备的更安全的、具有更强可升级性的、更稳定的应 用程序提供了新的编程模型和基 础结构。
首页设计对于任何网站都是至关重要的。网页设计人员必须对首 页的设计和制作足够重视。
1．首页的功能模块
通常一 个电子商务网站首页应将本站的基本内容列出。
第3章 电子商务网站设计与开发

2．首页的可视化设计
在图文类首页中，通常以图片和标题为兴趣点，由于图片通常 较文字更能吸引人的注意力，故图片上的兴趣点就是首页的兴 趣点。 许多首页为吸引浏览者的注意力，将文字 标题融合在画面中， 使两个兴趣点合为一体。
1．HTML 和 HTML5 简介
HTML 是 Hyper Text Markup Language 的缩写，直译为超文本标识 语言，是一种广泛应用于 Internet 静态网 页制作的标记语言，现已大 规模地应用在静态网页的制作中。 作为一种标记语言，HTML 不需 要进行编译，直接由浏览器执行。 HTML 文件是一个文本文件，包含了一 些 HTML 元素、标签等。 HTML 文档的后名为 html 或 htm。

3.2.1 电子商务网站内容设计的流程

建立企业网站前，需要对网站进行总体策划，确定网站的目标和 定位等外，还要进行电子商务网站的内容设计与制作，这是网站 开发的重点。
第3章 电子商务网站设计与开发

1．网站内容设计的原则
（1）新、精、专的信息内容。
（2）安全、快速的访问。
（3）美感十足、方便用户访问的页面。

3．网站整体风格的设计
网站风格是抽象的，是指网站的整体形象给浏览者的综合感受。这 个“整体形象”包括网站的 CI（标志、 色彩、字体、标语）、版 面布局、浏览方式、交互性、文字、语气、内容价值及网站荣誉等 诸多因素。 有设计风格的网站可以使人有更深一层的感性认识，如觉得网站有 品位、 和蔼可亲、像老师、像朋友。
第3章 电子商务网站设计与开发

3.1.3 ASP.NET 应用程序实例
1.网站后台管理员登录程序 login.aspx 2.发表留言的 ASP.NET 程序
第3章 电子商务网站设计与开发

3.2 电子商务网站设计与制作
要想建立一个优秀的电子商务网站，除了要求网站的建设者要有很 高的软件应用技巧以外，还必须要对网 站进行全面、细致的分析和 系统设计，只有在此基础上动手开发，才能取得成功。