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

电子商务网站设计与开发 1 第3章电子商务网站设计与开发 本章主要介绍常用的网站开发工具和技术 网站设计和规划 网页上传等方面的知识 考虑到移动应用在电子商务领域日益重要 本章还讲解了移动设备网页的制作 2 第3章电子商务网站设计与开发 3 1网站开发工具与技术3 1 1HTML5和DreamweaverCS61 HTML和HTML5简介HTML是HyperTextMarkupLanguage的缩写 直译为超文本标识语言 是一种广泛应用于Internet静态网页制作的标记语言 现已大规模地应用在静态网页的制作中 作为一种标记语言 HTML不需要进行编译 直接由浏览器执行 HTML文件是一个文本文件 包含了一些HTML元素 标签等 HTML文档的后名为html或htm 3 第3章电子商务网站设计与开发 HTML目前新版本为5 0 也称HTML5 HTML5是下一代HTML标准 2014年10月由万维网联盟 TheWorldWideWebConsortiun W3C 完成标准制定 HTML5解决了HTML4等以前版本的很多问题 增加了许多新特性 如嵌入音频 视频和图片的函数 客户端存储数据 交互式文档等 进一步增强了互动性 并有效减少了开发成本 4 第3章电子商务网站设计与开发 一个网页通常包括以下3个部分 HTML 描述网页的具体内容和结构 CSS 定义网页的样式 网页美化的主要模块 JavaScript 实现网页的交互效果 如对用户鼠标事件做出响应 5 第3章电子商务网站设计与开发 2 DreamweaverCS6Adobe公司开发的集网页制作和管理网站于一身的 所见即所得 网页编辑器 Dreamweaver具有功能强大 动态网页制作 方便和高效率等优势 6 第3章电子商务网站设计与开发 3 1 2ASP和ASP NETWeb动态技术发展快 种类多 其中包括脚本语言 服务器端技术CGI ASP ASP NET JSP和PHP等 1 客户端脚本语言脚本语言 ScriptLanguage 是一种简单的描述性语言 它的语法结构与计算机上的高级语言颇为相似 所以相对于其他的Web技术来说是简单易用的 脚本语言的出现较好地解决了Web页的动态交互问题 7 第3章电子商务网站设计与开发 2 ASP技术ASP是微软公司开发的一套服务器端脚本运行环境 通过ASP用户可以建立动态的 交互的 高效的Web服务器应用程序 3 ASP NET技术ASP NET是统一的Web应用程序平台 它提供了建立和部署企业级Web应用程序所必需的服务 ASP NET为能够面向任何浏览器或设备的更安全的 具有更强可升级性的 更稳定的应用程序提供了新的编程模型和基础结构 8 第3章电子商务网站设计与开发 4 ASP与ASP NET的区别ASP NET与ASP的主要区别在于 前者是编译 Compile 执行 后者是解释 Interpret 执行 前者比后者有更高的效率 除此之外 ASP NET还可以利用 NET平台架构的诸多优越性能 如类型安全 对XML SOAP WSDL等Internet标准提供强健的支持 9 第3章电子商务网站设计与开发 3 1 3ASP NET应用程序实例1 网站后台管理员登录程序login aspx2 发表留言的ASP NET程序 10 第3章电子商务网站设计与开发 3 2电子商务网站设计与制作要想建立一个优秀的电子商务网站 除了要求网站的建设者要有很高的软件应用技巧以外 还必须要对网站进行全面 细致的分析和系统设计 只有在此基础上动手开发 才能取得成功 3 2 1电子商务网站内容设计的流程建立企业网站前 需要对网站进行总体策划 确定网站的目标和定位等外 还要进行电子商务网站的内容设计与制作 这是网站开发的重点 11 第3章电子商务网站设计与开发 1 网站内容设计的原则 1 新 精 专的信息内容 2 安全 快速的访问 3 美感十足 方便用户访问的页面 12 第3章电子商务网站设计与开发 2 网站内容设计流程 13 第3章电子商务网站设计与开发 3 2 2网站信息结构的设计一般来说 电子商务网站建设与企业的经营战略 产品特性 财务预算以及当时的建站目的等因素有着直接关系 1 网站信息内容及其功能模块公司概况 员工信息 产品目录 产品价格表 产品搜索 公司动态 销售网络 售后服务 技术支持信息 联系信息等 14 第3章电子商务网站设计与开发 2 网站链接结构的设计网站开发人员应在网站信息结构设计的同时 规划并设计好主次分明 结构清晰的网站链接结构 使浏览者对网站内容一目了然 1 树状链接结构 一对一 2 网状链接结构 一对多 15 第3章电子商务网站设计与开发 3 网站整体风格的设计网站风格是抽象的 是指网站的整体形象给浏览者的综合感受 这个 整体形象 包括网站的CI 标志 色彩 字体 标语 版面布局 浏览方式 交互性 文字 语气 内容价值及网站荣誉等诸多因素 有设计风格的网站可以使人有更深一层的感性认识 如觉得网站有品位 和蔼可亲 像老师 像朋友 16 第3章电子商务网站设计与开发 3 网站整体风格的设计 1 使企业的标志尽可能出现在每个页面上 2 突出网站的标准色彩 3 突出网站的标准字体 4 设计一条朗朗上口的宣传标语 5 使用统一的图片处理效果 6 创造一个企业网站特有的符号或图标 17 第3章电子商务网站设计与开发 3 2 3网页的可视化设计1 网页设计应遵循的原则网页命名简洁 页面的导航性好 网页要易读 合理设计视觉效 为图片添加文字说明 不使用太多的动画和静态图片 页面长度要适中 少用Java程序 整个页面风格要一致 尽量使用相对超链接 18 第3章电子商务网站设计与开发 2 网页版面布局设计 1 网页版面布局步骤 创建初始方案 初步设计网页的布局 定案 2 常见的版面布局形式 T 结构布局 口 型布局 三 型布局 对称对比布局POP布局 19 T 结构布局 20 口 型布局 21 POP布局 22 第3章电子商务网站设计与开发 3 网页色彩设计在网页设计中 应根据和谐 均衡和重点突出的原则 将不同的色彩进行组合 搭配来构成美丽的页面 1 网页色彩搭配的原理 2 网页色彩搭配的技巧 23 第3章电子商务网站设计与开发 4 网页中图片和文字的设计 1 善用图片 图像可以弥补文字的不足 但并不能够完全取代文字 2 网站字体设计技巧 不要使用超过3种以上的字体 不要使用太大太小的字号 24 第3章电子商务网站设计与开发 3 2 4首页设计首页设计对于任何网站都是至关重要的 网页设计人员必须对首页的设计和制作足够重视 1 首页的功能模块通常一个电子商务网站首页应将本站的基本内容列出 25 第3章电子商务网站设计与开发 2 首页的可视化设计在图文类首页中 通常以图片和标题为兴趣点 由于图片通常较文字更能吸引人的注意力 故图片上的兴趣点就是首页的兴趣点 许多首页为吸引浏览者的注意力 将文字标题融合在画面中 使两个兴趣点合为一体 26 第3章电子商务网站设计与开发 3 2 5其他页面的设计1 新闻页面的设计2 产品页面的制作3 雇员页面4 其他页面设计 27 第3章电子商务网站设计与开发 3 2 6网页制作1 电子商务网站中的Web资源一般而言 一个电子商务网站中的Web资源总是包括静态网页和动态网页两种通常情况下 公司介绍 员工信息 销售网络 售后服务信息 联系信息等是一些相对固定不变的信息 其更改频率不高 可以以静态网页的方式进行制作 而产品的信息 网上销售的信息 产品价格 产品目录 购物车 订单 产品搜索等 以及其他服务 如技术支持 公司新闻动态 论坛系统 特别是网站的管理系统 一般而言都是采用动态网页的形式 28 第3章电子商务网站设计与开发 2 静态网页的制作选择使用Dreamweaver来制作静态网页 29 第3章电子商务网站设计与开发 2 静态网页的制作创建网站的操作步骤 创建本地网站 制作网站站标和横幅动画 使用Dreamweaver布局视图或表格功能设置首页布局 使用Dreamweaver完成网页制作 制作二级网页 30 第3章电子商务网站设计与开发 3 动态网页的制作动态网页的制作分为两种 网页表示形式的动态制作和网页数据内容的动态制作 1 网页表示形式的动态制作 网页表示形式的动态制作是通过在静态网页中添加活动内容 附加一些由其他语言所编写的小程序来使原本内容固定的HTML文件更加吸引人 31 第3章电子商务网站设计与开发 3 动态网页的制作 2 网页数据内容的动态制作 网页数据内容的动态制作是动态Web页的一个重要的应用 也是电子商务网站资源建设的一个重要的组成部分 交互式动态网页的制作主要包括两大步骤 数据库设计和动态应用程序的制作 数据库设计阶段 程序设计阶段 32 第3章电子商务网站设计与开发 3 动态网页的制作 3 使用Dreamweaver设计动态网页 动态网站 的基本步骤 设计页面 创建动态内容源 向网页添加动态内容 向页面中添加服务器行为 测试和调试页面 33 第3章电子商务网站设计与开发 3 2 7用DreamweaverCS6制作动态网页1 设置本地站点 Site 2 配置服务器端环境动态网页的测试离不开服务器端环境 必须设置并安装Web服务器 如IIS Apache 数据库平台 如SQLServer MySQL Access 及服务器端语言环境 如ASP ASP NET PHP 34 第3章电子商务网站设计与开发 3 2 7用DreamweaverCS6制作动态网页3 设置测试服务器设置测试服务器后可以安全地测试所有动态代码而不会对正式发布的网站造成任何损害 35 第3章电子商务网站设计与开发 3 2 7用DreamweaverCS6制作动态网页4 在Dreamweaver中启用ASP NET支持DreamweaverCS6不再支持通过ASP NETC ASP NETVB中的服务器行为和记录集自动生成代码 要让其支持ASP NET动态网页开发 需要完成以下准备 1 安装ASP NET扩展 2 部署支持文件到测试服务器 36 第3章电子商务网站设计与开发 3 2 7用DreamweaverCS6制作动态网页5 创建动态内容源 1 建立数据库 2 建立数据库连接 ASP NET动态网页必须通过OLEDB提供程序连接到数据库 3 创建数据集和数据绑定 Dreamweaver使用户可以更容易地连接到数据库并创建从中提取动态内容的记录集 记录集是数据库查询的结果 它提取请求的特定信息 并允许在指定页面内显示该信息 根据包含在数据库中的信息和要显示的内容来定义记录集 37 第3章电子商务网站设计与开发 3 2 7用DreamweaverCS6制作动态网页6 向Web页添加动态内容定义数据集或其他数据源并将其添加到 绑定 面板后 可以将该数据集所代表的动态内容插入到页面中 7 向Web页添加服务器行为 服务器行为 是预定义的服务器端代码片段 这些代码向Web页添加应用程序逻辑 从而提供更强的交互性能和功能 38 第3章电子商务网站设计与开发 3 3网页发布3 3 1选择Web服务器站点发布服务器 可以是单位内部的服务器 也可以是服务提供商提供的Web服务器 选择服务提供商提供的Web服务器时应该考虑以下因素 1 磁盘空间 2 可靠性 3 客户服务 4 价格因素 39 第3章电子商务网站设计与开发 3 3网页发布3 3 2测试站点测试站点是为了及时发现存在的问题 完善站点的内容 在向远程站点上传文件并对外发布之前 必须先对本地站点进行全面测试 这主要包括以下几项工作 1 检查页面显示的一致性 2 检查站点链接 3 检查网页同目标浏览器之间的兼容性 4 测试文件下载时间 40 第3章电子商务网站设计与开发 3 3网页发布3 3 3远程站点设置远程服务器通常称为Web服务器或发布服务器 通过设置FTP SFTP WebDav连接以上传文件或从发布Web服务器下载文件 Dreamweaver将指定的远程文件夹当成远程站点 Dreamweaver中的站点管理器相当于一款优秀的FTP软件 支持断点续传功能 可批量上传 下载文件和目录 具有克服因闲置太久而中断传输的优点 41 第3章电子商务网站设计与开发 3 3网页发布3 3 4发布网页发布站点是将构成网页和站点的所有文件复制到Web服务器上 让浏览者看到网页制作者的劳动成果 可以通过Dreamweaver或FTP软件来完成发布网页的工作 要注意让Web服务器的默认首页文件名与站点中的首页文件名一致 否则将无法浏览上传的网页 42 第3章电子商务网站设计与开发 3 4网页的更新一个网站要有影响力 重要的是有不断更新的内容 企业电子商务网站中的内容变化周期短 内容更新快 在网页中进行修改后应及时更新网站 以便访问者能及时浏览到新的网站信息 43 第3章电子商务网站设计与开发 3 5制作移动设备网页3 5 1移动端应用程序的类型1 NativeApp 原生应用程序 NativeApp是一种基于智能手机本地操作系统 如iOS Android 并使用原生程序编写运行的第三方应用程序 也叫本地App 这类应用优点是提供佳的用户体验 优质的用户界面和华丽的交互 可访问移动设备所有功能 GPS 摄像头 可针对不同平台提供不同体验 启动和运行速度快 不足之处是开发和分发成本过高 维持多个版本的更新升级比较麻烦 44 第3章电子商务网站设计与开发 3 5 1移动端应用程序的类型2 WebApp 网页应用程序 WebApp是指采用HTML5语言编写 为移动端浏览器设计的基于Web的应用程序 常见的触屏版的网页应用程序就是WebApp 这里所说的移动设备网页就属于WebApp 此类应用无需下载安装 利用设备上的浏览器运行 需要联网使用 开发成本低 调试和发布方便 更新和升级快捷 不足之处主要是难以实现复杂的用户界面效果 用户体验较差 45 第3章电子商务网站设计与开发 3 5 1移动端应用程序的类型3 HybridApp 混合模式移动应用程序 HybridApp是指介于上述两者之间的App 它表面是一个NativeApp 但实际上只有一个UIWebView 里面访问的是一个WebApp 简单的实现就是给HTML5网站加上一个Native客户端的壳 HybridApp同时使用网页语言与程序语言开发 开发成本和难度比NativeApp小很多 而总体特性更接近NativeApp 兼具NativeApp的所有优势 也兼具了WebApp使用HTML5跨平台开发低成本的优势 46 第3章电子商务网站设计与开发 3 5 2移动设备网页的特点与普通的PC端网页相比 移动设备网页具有以下特点 1 兼顾小屏幕2 触屏交互3 内容精简4 突出主题5 兼容性好6 响应式Web设计7 开发技术限制 47 第3章电子商务网站设计与开发 3 5 3移动设备网页开发技术移动设备网页开发基本的技术是HTML HTML5和CSS CSS3 复杂的还需要JavaScript 开发人员应掌握相关的基础知识 一个基本的移动设备网页要在头部加上以下3项基本设置 声明信息 编码设置 移动设备特别设置 后一项重要 其中viewport表示网页大小可适应各种高端移动设备 48 第3章电子商务网站设计与开发 3 5 3移动设备网页开发技术1 移动设备网页开发框架主流的移动Web框架有 1 jQueryMobile 2 Bootstrap 3 SenchaTouch 4 PhoneGap 5 React 49 第3章电子商务网站设计与开发 3 5 3移动设备网页开发技术2 移动设备网页开发工具 1 Dreamweaver 2 AdobeEdge 这是一个用HTML5 CSS Java开发动态互动内容的设计工具 3 WebStrom WebStrom深受国内开发人员欢迎 被认为是强大的HTML5编辑器和智能的JavaScriptIDE 50 第3章电子商务网站设计与开发 3 5 4在DreamweaverCS6中使用jQueryMobile制作移动设备网页使用jQueryMobile创建Web应用程序有两种方法 一种是使用jQueryMobile起始页 一种是从新的HTML5页开始创建 51 第3章电子商务网站设计与开发 3 5 4在DreamweaverCS6中使用jQueryMobile制作移动设备网页1 使用jQueryMobile起始页制作移动设备网页jQueryMobile起始页包括HTML CSS JavaScript和图像文件 可帮助用户快速开发移动设备网页 制作步骤 在DreamweaverCS6中为移动应用准备一个站点或目录 文件 新建 命令打开相应的界面 依次选中 示例中的页 Mobile起始页 jQueryMobile 本地 另外文档类型应选择 HTML5 52 第3章电子商务网站设计与开发 3 5 4在DreamweaverCS6中使用jQueryMobile制作移动设备网页1 使用jQueryMobile起始页制作移动设备网页 单击 创建 按钮 在所显示的网页中 单击工具栏上的 实时视图 按钮 启用 持续跟踪链接 功能 单击工具栏上的多屏幕按钮 使用相应菜单中的选项预览设计在各种尺寸设备上的显示效果 禁用实时视图 然后单击 设计 按钮切换回到设计视图 在 插入 面板中 选择 jQueryMobile 53 第3章电子商务网站设计与开发 3 5 4在DreamweaverCS6中使用jQueryMobile制作移动设备网页1 使用jQueryMobile起始页制作移动设备网页 在设计视图中 将光标放在要插入组件的位置 然后在 插入 面板中单击 jQueryMobile 组件 保存该HTML文件 54 第3章电子商务网站设计与开发 3 5 4在DreamweaverCS6中使用jQuer