电子商务网页设计全书电子教案完整版课件

《电子商务网页设计全书电子教案完整版课件》由会员分享，可在线阅读，更多相关《电子商务网页设计全书电子教案完整版课件（208页珍藏版）》请在金锄头文库上搜索。

1、电子商务网页设计（第三版）国家级职业教育规划教材目 录第 1 章 电子商务网站概述第 2 章 网页版面设计第 3 章 表格在网页中的应用第 4 章 层和框架在网页中的应用第 5 章 网页特效第 6 章 超链接在网页中的应用第 7 章 网站发布目目 录录课件制作谢谢观看第 1 章 电子商务网站概述 第 1 节 电子商务网站需求分析 第 2 节 电子商务网站结构设计 第 3 节 利用Dreamweaver CS5 创建站点第 1 节 电子商务网站需求分析第一章第一章 电子商务发展迅猛，消费者通过网络进行购物已经成为习惯，使用电子商务网站进行营销也已经是企业经营的主要渠道。要建设好电子商务网站，就要

2、掌握网站建设的基本知识和流程，做好网站建设的前期准备工作。第一章第一章1.网页和网站 （1）网页 网页通常是使用网页制作工具制作或者使用HTML 语言进行编写，通过网络传播，并被浏览器翻译成为可以显示出来的集文本、超链接、图像、声音、动画、视频等信息元素为一体的页面文件。一、电子商务网站建设概述 （2）网站 网站是指根据一定的规则，使用各种网页制作工具制作的用于展示特定信息内容的相关网页的集合。浏览者可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。对于电子商务网站，客户通过浏览器访问相关电商网站，浏览具体商品网页了解商品详细信息来实现交易。2.电子商务网站建设工具（1）Fro

3、ntpage和Expression Web（2）Dreamweaver3.商务网站建设流程改版测试通过前期调研，分析需求确定站点整体规划硬件软件搭建调试网页制作网站测试与排错网站维护与推广素材收集、整理素材数字化处理站点新建及设置网站发布发现问题二、客户信息收集1收集的信息内容 （1）企业自身信息 （2）市场信息 （3）目标客户信息2搜集信息的方法 （1）资料统计法 （2）现场观察法 （3）会议收集法 （4）网络收集法三、客户需求分析 1需求分析的内容需求分析业务需求功能需求用户需要的功能商家需要的功能非功能需求可用性可靠性性能接口需求2.网站功能整合描述包揽天下网店前台商品展示购物车订单结算

4、用户订单查询后台商品类别管理品牌管理商品管理订单管理物流管理人员管理四、搜集易买网商城的客户信息 信息的采集需要通过现场观察、召开会议、资料统计、问卷调查等方式进行，以全面掌握其公司基本信息、客户群体资料以及建设网站的目的和网站功能定位。主要工作是填写网站建设调查表。五、对易买网商城进行需求分析1.业务需求2.功能需求3.非功能需求4.接口需求六、易买网商城的功能第 2 节 电子商务网站结构设计一、网站物理结构第一章第一章1.网站物理结构的概念 网站物理结构指的是网站真实的目录及所包含文件所存储的真实位置所表现出来的结构，也就是网站的实际目录，或者说是文件实际的物理地址。一般来说静态网站才有物

5、理结构，动态网站或伪静态网站是不存在物理结构的。2.网站物理结构的类型 网站物理结构有两种不同的表现形式，一种是扁平式物理结构，另一种是树形物理结构。1网站目录结构的概念 网站目录结构是指建立网站时所创建的文件目录。二、网站目录结构2.网站目录的建立原则（1）不要将所有文件都存放在根目录下。（2）按主菜单栏目内容建立子目录。（3）根据更新要求建立和管理次要栏目。（4）在每个目录下都建立独立的image 目录。（5）目录的层次不要太深。（6）不要使用中文目录。一般建议使用英文意思的名称。如images目录中存放图像，css目录存放css样式表等。三、网站逻辑链接结构1.网站逻辑链接结构的概念 网

6、站逻辑链接结构也叫作链接结构，主要是指网页页面之间相互链接的关系。逻辑链接结构和物理结构的区别在于，逻辑链接结构由网站页面的相互链接关系决定，而物理结构则由网站页面的物理存放位置决定。在网站的逻辑链接结构中，通常采用“链接深度”来描述页面之间的逻辑关系。“链接深度”是指从源页面到达目标页面所经过的路径数量。2.网站逻辑链接结构基本形式树状链接结构（一对一）树状链接结构（一对一）星状链接结构（一对多）星状链接结构（一对多）3.网站逻辑链接结构的选择 最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。四、页面流程1.页面流程的概念 网站设计者为访问者设计的在浏览网站

7、时的浏览经历就是页面流程。2.页面流程设计 （1）功能模块的划分 （2）根据功能模块划分网站页面 （3）建立页面链接流程五、设计易买网商城物理结构和目录结构1.设计易买网商城物理结构2.设计易买网商城的目录结构六、分析易买网商城的逻辑结构1.功能模块划分2.分析页面链接流程图第 3 节 利用Dreamweaver CS5 创建站点一、安装Dreamweaver CS5二、Dreamweaver CS5简单使用1.启动Dreamweaver CS52.Dreamweaver CS5 工作区的构成3.Dreamweaver CS5 的工作视图三、新建和管理易买网商城本地站点1.新建站点2.站点信息

8、3.服务器配置4.高级设置5.选择保存，完成配置四、新建第一个网页页面1.菜单栏中选择“文件”/“新建”2.编辑简单的网页课件制作谢谢观看第 2 章 网页版面设计 第 1 节 网页的结构和色彩设计 第 2 节 HTML基础 第 3 节 网页的基本操作第 1 节 网页的结构和色彩设计一、网站风格1.网站风格概述 通过网站的外表、内容、文字等就可以概括出一个站点的风格，这些风格或者是色彩，或者是技术，或者是交互方式，能让浏览者明确分辨出这是该网站独有的。2.网站风格的分类功能型功能型展示型展示型二、网页结构的类型1.“同”字型布局2.“国”字型布局3.T 型布局4.“三”字型布局5.标题文本型布局

9、6.POP 海报型布局7.框架型布局三、页面色彩搭配1.颜色传达的信息2.网页色彩搭配要注意的问题 （1）使用单色 （2）使用邻近色 （3）使用对比色 （4）黑色的使用 （5）网页配色注意事项 1）同一个页面色彩过于繁杂，会给人造成凌乱的印象。2）不要将所有颜色都用到，尽量控制在三种色彩以内。3）背景和前文的对比尽量要大，以便突出页面主要内容，但是也尽量不要用花纹繁复的图案和纯度很高的色彩作背景。四、易买网商城首页结构设计1.绘制布局草图2.设置首页内容3.在Dreamweaver 中创建布局五、易买网商城页面色彩搭配1.网页的底色2.文字字型第 2 节 HTML 基础1.HTML 的概念 超

10、文本标记语言，用于描述网页（网页文档）的语言。每一个页面的代码保存为一个网页源文件（“.html”文件）。HTML 不是一种编程语言，而是一种标记语言，包括一些定义页面的文本、图像、声音和动画等内容及其格式的符号，这些符号称为标记。一、HTML 的概念及作用2.HTML 的作用二、标记的概念及分类1.标记的概念 （1）HTML 标记是放在尖括号里的关键词，如。（2）大多数标记都成对出现，如 和。（3）标记对中的第一个标签是开始标记（也叫开放标记），第二个标签是结束标记（也叫闭合标记）。（4）结束标记和开始标记所用的字符相同，只是前面加一个斜杠，例如，用于标记一个自然段。（5）标记可以具有相应的

11、属性，如size、color、width 等。2.标记的分类 （1）用来指定网页上的元素及其格式。（2）用来指向其他的资源。三、HTML 及标记在网页中的应用1.HTML 在网页文档结构中的应用 HTML 可以用来指明一个网页文档的基本结构。页面HTML 文档通常由版本信息、文档头（head）、文档主体（body）三部分组成。（1）是版本信息说明 （2）是文件标记 （3）是头部标记 （4）是主体标记2.内容及其格式标记的简单应用 （1）格式标记 用来创建一个段落，在此标记之间的文本将按照段落的格式显示。是一个很简单的换行标记，它没有结束标记，用来创建一个换行。是普通列表标记，和 都必须放在 标

12、记之间。用来创建一个列表；用来创建列表中的上层项目；用来创建列表中最下层项目。（2）添加文本并设置格式 1）（六级标题标记）2）（字体标记）3）（字体的大小颜色标记）（3）超链接标记 （4）图像标记和多媒体标记 图像标记 将音乐或影像嵌入网页，可以用 标记 （5）表单标记及其应用 标记用来创建一个表单 标记具有action、method 和target 属性。第 3 节 网页的基本操作 网页的基本组成部分包括文本、图像、多媒体和超链接。制作网页时首先注意主题要鲜明，其次内容要丰富，才能不断吸引访问者。文字是必不可少的元素，网站思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像、Fla

13、sh 动画、其他媒体对象等能够提高网页的观赏性。页面上的元素应用超链接就构成了一个有机整体，实现互联互通，这样能够让浏览者在不同页面间进行跳转，找到所需的内容。一、网页中添加文本1.添加普通文本 （1）直接输入文本 （2）复制粘贴文本 （3）从其他文件导入2.添加空格 在需要输入的地方单击鼠标左键，将输入法切换到半角状态，单击空格键即可输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：（1）菜单“插入记录”/“HTML”/“特殊字符”/“不换行空格”。（2）直接按“Ctrl+Shift+Space”快捷键。（3）设置软件首选参数“允许连续空格”。3.插入水平线4.插入特殊字符

14、 （1）通过菜单插入。先将光标放置到需要插入特殊字符的位置，在“HTML”/“特殊字符”的级联菜单中选择需要插入的特殊字符。（2）通过“文本”插入工具栏插入。先在Dreamweaver CS5 的“插入”工具栏中选择“文本”，显示“文本”插入工具栏，然后选择需要插入的特殊字符。5.设置文本格式二、网页中插入图像1.网页中常用的图像格式2.易买网首页插入图像操作三、网页中插入Flash 动画1.Flash 动画类型2.插入Flash 动画操作四、网页中插入FLV 视频五、在网页中插入音频课件制作谢谢观看第 3 章 表格在网页中的应用 第 1 节 利用表格显示数据 第 2 节 利用表格布局网页第

15、1 节 网页的结构和色彩设计一、表格的概念1.网页中的表格 表格是组成网页的基本元素之一。很多网站的页面是以表格为框架制作的。和Excel 电子表格一样，网页中也可以用表格来显示数据，但是网页中的表格功能更强一些，网页中的表格还可以用来进行网页布局设计（排版）。2.表格的组成元素 表格由三个主要元素构成：行、列以及单元格。单元格是行和列相交的部分。单元格和单元格之间的距离叫单元格间距。单元格内容和单元格边界的距离叫单元格边距。整张表格的边缘叫作边框。表格也可以带一标题，标题在表格的顶端，表格也以有背景色，可以单独对表格、行、单元格设置不同的背景色。二、表格的基本操作1.新建表格2.选择表格元素

16、3.调整表格、列和行的大小4.添加/删除行和列 当行被选中时，单击键盘上的“Delete”键可以删除一行；当列被选中时，单击键盘上的“Delete”键可以删除一列；单击选中任意一个单元格时，按“Ctrl+M”快捷键可以在当前单元格下方插入一行；单击选中任意一个单元格时，按“Ctrl+Shift+A”快捷键可以在当前单元格左边插入一列。5.复制、粘贴和删除单元格6.设置单元格、行或列的属性7.合并或拆分单元格三、在网页中制作简单的表格1.可视化创建表格2.表格的HTML 表示 （1）表示表格。（2）表示表格的标题。（3）表示行。（4）表示单元格。（5）width表示表格宽度，border表示表格的边框线粗细，cellpadding表示单元格的边距cellspacing表示单元格的间距，bgcolor表示背景色。（6）单元格的具体内容写在 之间，就象一对括号，表示括号开始，表示括号结束，它们必须成对出现。第 2 节 利用表格布局网页 网页布局就是将页面上的元素按照一定的形式排列好。一般网页的版面都是分布整齐、左右对称的，具有类似表格的特点，因此可以借助表格来进行网页布局。在用表格进行布局时