电子商务网页设计(第三版)课件汇总全书电子教案完整版课件最全幻灯片(最新)课件电子教案幻灯片

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

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

3、on 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. 页面流程的概念 网站设计者为访问者设计的在浏览网站时的浏览经历就是页面流程。2. 页面流程设计 （1）功能模块

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

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

9、 框架型布局三、页面色彩搭配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 节 网页的基本操作 网页的基本组成部分包括文本、图像、多媒体和超链接。制作网页时首先注意主题要鲜明，其次内容要丰富，才能不断吸引访问者。文字是必不可少的元素，网站思想、内容的表达都

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

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

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

16、对表格、行、单元格设置不同的背景色。二、表格的基本操作1. 新建表格2. 选择表格元素3. 调整表格、列和行的大小4. 添加/ 删除行和列 当行被选中时，单击键盘上的“Delete”键可以删除一行； 当列被选中时，单击键盘上的“Delete”键可以删除一列； 单击选中任意一个单元格时，按“Ctrl+M”快捷键可以在当前单元格下方插入一行； 单击选中任意一个单元格时，按“Ctrl+Shift+A”快捷键可以在当前单元格左边插入一列。5. 复制、粘贴和删除单元格6. 设置单元格、行或列的属性7. 合并或拆分单元格三、在网页中制作简单的表格1. 可视化创建表格2. 表格的HTML 表示 （1） 表示

17、表格。 （2） 表示表格的标题。 （3） 表示行。 （4） 表示单元格。 （5）width表示表格宽度，border表示表格的边框线粗细，cellpadding表示单元格的边距cellspacing表示单元格的间距，bgcolor表示背景色。 （6）单元格的具体内容写在 之间， 就象一对括号， 表示括号开始， 表示括号结束，它们必须成对出现。第 2 节 利用表格布局网页 网页布局就是将页面上的元素按照一定的形式排列好。 一般网页的版面都是分布整齐、左右对称的，具有类似表格的特点，因此可以借助表格来进行网页布局。在用表格进行布局时，一般主要用单元格来分割版面中的不同显示部分，所以不需要设表格的背

18、景色、表格的边框线等，通过调整单元格的宽度、高度、间距、边距等参数来调节版面，另外利用表格嵌套功能，还可以对局部进行更精细地调整。一、网页布局的概念和原理二、利用表格布局网页的简单实例1. 创建表格2. 表格参数设置3. 表格标签检查器的设置4. 输入表格内容5. 表格的HTML 表示三、用表格布局易买网商品列表页（product-list.htm）1. 插入表格 （1）打开Dreamweaver CS5，新建页面命名为“product-list.htm”，并保存。 （2）单击菜单“插入”/“表格”，或按“Ctrl+Alt+T”快捷键。 （3）在弹出的“表格”对话框中，输入行数为“4”，列数为

19、“4”。 2. 设置表格属性3. 添加图片并设置属性4. 添加文本及设置其格式5. 完成表格的其他商品课件制作谢谢观看第 4 章 层和框架在网页中的应用 第 1 节 层在网页中的应用 第 2 节 框架在网页中的应用页第 1 节 层在网页中的应用一、层的概念和分类1. 层的概念 层是网页内容的一个容器，只要是能放置在网页中的内容，都可以放置在层当中。层最主要的特性就是它可以在网页上自由浮动，从而实现对网页元素的精确定位，而且层的位置是可以重叠的，可以任意地控制层的前后位置、显示或隐藏，大大增强了网页设计的灵活性。2. 层的分类 （1）普通层和嵌套层 （2）固定层和浮动层 1）固定层。固定层在网页

20、中的位置固定。 2）浮动层。在网页设计视图内，可以通过拖动控制手柄使浮动层移动。二、层的创建及设置1. 普通层的创建 （1）使用菜单命令创建普通层 （2）使用布局面板创建普通层2. 嵌套层的创建 （1）使用菜单命令创建嵌套层 （2）使用插入面板创建嵌套层3. 层属性的设置4. 层的基本操作 （1）选择层 （2）移动层 （3）改变层大小 （4）对齐层三、使用Div 布局易买网首页1. 新建空白文档2. 插入Div 标签四、使用“Div+CSS”美化易买网首页1. 生成CSS 文件2. Div 应用样式3. 编辑网页内容五、使用AP Div 实现浮动广告1. 插入AP Div2. 设置AP Div

21、 浮动效果3. 保存网页并浏览六、AP Div 与表格的转换1. 把AP Div 转换为表格2. 把表格转换为AP Div第 2 节 框架在网页中的应用一、框架与框架集1. 框架 框架（frame）是指用来分隔网页的窗格，每个框架都是浏览器中的一个区域，它可以显示与浏览器窗口中所显示内容相关的HTML 文档，是一个独立的HTML 页面。2. 框架集 框架集（frameset）是指定义一组网页布局结构与属性的HTML 页面，其中包含了显示在页面中框架的数量、尺寸、装入框架的页面来源及其他可定义的属性相关信息。3. 框架结构的优点 （1）使网页结构清晰，易于维护和更新。 （2）每个框架网页都具有独

22、立滚动条，因此访问者可以独立控制各个页面。 （3）便于修改。一般情况下，每隔一段时间，网站的设计就要做一定的修改，如果是公共部分需要修改，只需修改公共页面，整个网站就同时更新。 （4）访问者的浏览器不需要为每个页面重新加载与导航相关的图形，当浏览器的滚动条滚动时，这些链接不随滚动条的滚动而上下移动，一直固定在某个窗口，便于访问者能随时跳转到另一个页面。二、创建预定义框架集1. 示例方式2. 按钮方式3. 菜单方式4. 保存框架三、框架和框架集基本操作1. 选择框架和框架集 （1）在“框架”面板中选择框架和框架集 （2）在设计窗口中选择框架或框架集2. 拆分和删除框架3. 属性设置 （1）设置框

23、架集属性 （2）设置框架属性4. 识别代码 （1）框架的基本结构代码 （2）框架集标签 标签的属性 1）framespacing 属性，通过该属性来设置框架集边框的宽度 2）bordercolor 属性，通过该属性来设置框架集边框的颜色 3）rows 属性，在垂直方向，浏览器可以被分割成多个窗口 4）cols 属性，在水平方向浏览器可以被分割成多个窗口 （3）框架标签 的属性 1）src 属性，显示页面源文件的路径。 2）name 属性，框架的名称。 3）scrolling 属性，框架滚动条显示属性。 4）noresize 属性，框架尺寸调整属性。 5）marginwidth 属性，框架边缘宽

24、度属性。 6）marginheight 属性，框架边缘高度属性。四、框架布局“图书首页”页面1. 创建框架布局页面2. 向框架中添加内容3. 保存并预览框架布局页面五、使用框架布局易买网图书页面1. 创建框架布局页面2. 调整框架结构3. 向框架中添加内容4. 保存并预览框架布局页面课件制作谢谢观看第 5 章 网页特效 第 1 节 CSS 样式表特效 第 2 节 行为特效第 1 节 CSS 样式表特效一、层叠样式表的基础知识1. 层叠样式表的概念 层叠样式表（Cascading Style Sheets，简称CSS），是专门用于定义各种各样的样式的一套规范，是网页元素的修饰者，有了它就可以非常

25、灵活方便地设计和汇总样式来控制网页内容的外观。2. 层叠样式表的功能 （1）样式丰富多样 （2）灵活方便 （3）减少网站开发者工作的重复性3. 层叠样式表的类型 （1）行内式样式表 （2）嵌入式样式表 （3）外联式样式表二、CSS 样式表创建1. 创建CSS 样式表的方法 （1）通过菜单选项创建样式表 （2）通过“CSS 样式”面板创建样式表 （3）通过“属性”面板创建样式表2. 新建CSS 规则三、CSS 样式属性定义1. 文本属性2. 背景属性3. 边框属性4. 列表属性四、CSS 样式表的引用1. 引入外部样式表2. 应用CSS 样式表 （1）通过菜单应用 （2）通过“属性”面板应用 （

26、3）通过“CSS 样式”面板应用3. CSS 的应用优先级 CSS 样式的优先级总结来说，离被设置元素越近优先级别越高，一般依据下面的规则划分优先级，即行内样式表（在HTML 元素内部） 内部样式表（位于 标签内部） 外联样式表 浏览器缺省设置。 行内样式（在HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明： 标签中的样式声明、外部样式表中的样式声明或者浏览器中的样式声明（缺省值）。五、CSS 样式的应用1. 内部样式表的应用2. 外部样式表的应用3. 应用外部样式第 2 节 行为特效一、认识行为1. 行为的概念 行为是由对象、事件和该事件触发的动作构成的。Dreamwe

27、aver CS5 内置了很多行为，使设计者不用输入复杂的代码即可在网页上实现一些很实用的交互效果，如果对JavaScript 语言有些掌握，还可以编写代码实现更加丰富的效果。2. 对象 对象是产生行为的主体。3. 事件 事件是由用户或浏览器针对页面元素的一种操作。4. 动作 动作通常是由一段预先编写的JavaScript 代码组成的，用于完成某些特殊的任务。二、添加与编辑行为1. 打开“行为”面板2. 添加行为3. 编辑行为三、表单 Form 表单用于申明表单，定义采集数据的范围，也就是 和 里面包含的数据将被提交到服务器，通常形式是： 。 表单域包含了文本框、多行文本框、密码框、隐藏域、复选

28、框、单选框、文件上传框、下拉选择框等。1. 文本框 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或简短的回答。2. 多行文本框 多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。3. 密码框 密码框是一种特殊的文本域，用于输入密码，当访问者输入文字时，文字会被星号或其他符号代替，而输入的文字会被隐藏。4. 隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的，当表单被提交时，隐藏域就会将信息用设置时定义的名称和值发送到服务器上。5. 复选框 复选框允许在待选项中选中一项以上的选项，每个复选框都是一个独立的元素

29、，都必须有一个唯一的名称。6. 单选框 当需要访问者在单选项中选择唯一的答案时，就需要用到单选框了。7. 文件上传框 有时候需要用户上传文件，文件上传框看上去和其他文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件路径或者单击浏览按钮选择需要上传的文件。8. 下拉选择框 下拉选择框允许在一个有限的空间设置多种选项。9. 表单按钮 表单按钮控制表单的运作。提交按钮用来将输入的信息提交到服务器。四、JavaScript 脚本语言 JavaScript 是一种直译式脚本语言，它的解释器被称为JavaScript 引擎，是广泛用于客户端的脚本语言。1. JavaScript 的

30、功能 JavaScript 常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。2. JavaScript 的特性 （1）简单性 （2）动态性 （3）跨平台性五、制作表单文本框行为特效1. 设计表单2. 添加行为3. 预览效果六、使用JavaScript 脚本实现弹出对话框特效1. JavaScript 脚本嵌入网页头部2. JavaScript 脚本与页面代码进行交互七、使用JavaScript 脚本实现漂浮广告窗1. 添加跳转效果2. 编写实现漂浮效果的JavaScript 脚本代码3. 页面引用JavaScript 脚本文件4. 浏览效果课件制作谢谢观看第 6 章 超链接在网页中的应用一、超链接1. 超链接的概念 超链接（Hyper Link）是指从一个网页指向一个目标的连接关系。 一个完整的超链接由两部分组成，即超链接目标和超链接对象。链接目标一般用URL 来表示，链接目标可以是网页、图片以及其他各种文件，也可以是电子邮件、空链接等，超链接对象是屏幕上的显示部分，是超链接在网页中的显示载体2. 超链接的分类 （1）按照URL 组成部分的不同，超链接可以分为外部链接、内部链接和锚点链接，其中内部链接又可分为绝对链接和相对链接。外部链接连接到其他的网站，内部链接连接到网站内部的其他网页，绝对链接包含网站地址或磁盘根目录路径，相对链