163电子商务网页制作PPT课件
合集下载
《电子商务网站建设》PPT课件
电子商务网站建设
第一章 认识电子商务 第二章 电子商务规划 第三章 数据库基础 第四章 Dreamweaver基础与ASP基础回顾 第五章 电子商务网站主页制作 第六章 商品展示页面制作
电子商务网站建设
第七章 商品搜索系统制作 第八章 购物系统制作 第九章 用户注册和管理系统制作 第十章 顾客服务问答留言系统 第十一章 新闻、广告信息管理系统、客户
第二章 电子商务规划
❖ 第一节 电子商务网站需求调研与可行性分析 ❖ 第二节 电子商务网站内容与功能设计 ❖ 第三节 撰写电子商务网站设计规划书
第一节 电子商务网站需求调研与可行性分析
❖ 一、电子商务网站模式 ❖ 二、电子商务网站需求调研的意义 ❖ 三、 电子商务网站需求调研步骤 ❖ 四、 电子商务网站技术可行性分析 <图>
第十一章：新闻、广告信息管理系统、客户服务系统制作
第一节：新闻、广告信息管理系统、客户服务 第二节：ASP程序模块简介 第三节: ASP重点介绍知识
第一节：新闻、广告信息管理系统、客户服务
操作步骤： 插入表单. 插入4个复选钮及文字说明. 插入导航链接
第二节：ASP程序模块简介
程序名1：dongtai.asp:新闻列表页面 程序名2：news.asp 新闻详细内容页面 程序名3：addnews.asp 增加新闻页面 程序名4：editnews.asp 删除新闻页面
第三节：ASP重点知识介绍：
具体程序是： set rs=server.createobject<"adodb.recordset"> rs.open "select * from shop_guestshop where <id is null>",conn,1,3 rs.addnew rs<"name">=iname rs<"qq">=iqq rs<"email">=iemail rs<"url">=iurl rs<"sex">=isex rs<"content">=icontent rs<"time">=now<> rs.update rs.close set rs=nothing
第一章 认识电子商务 第二章 电子商务规划 第三章 数据库基础 第四章 Dreamweaver基础与ASP基础回顾 第五章 电子商务网站主页制作 第六章 商品展示页面制作
电子商务网站建设
第七章 商品搜索系统制作 第八章 购物系统制作 第九章 用户注册和管理系统制作 第十章 顾客服务问答留言系统 第十一章 新闻、广告信息管理系统、客户
第二章 电子商务规划
❖ 第一节 电子商务网站需求调研与可行性分析 ❖ 第二节 电子商务网站内容与功能设计 ❖ 第三节 撰写电子商务网站设计规划书
第一节 电子商务网站需求调研与可行性分析
❖ 一、电子商务网站模式 ❖ 二、电子商务网站需求调研的意义 ❖ 三、 电子商务网站需求调研步骤 ❖ 四、 电子商务网站技术可行性分析 <图>
第十一章：新闻、广告信息管理系统、客户服务系统制作
第一节：新闻、广告信息管理系统、客户服务 第二节：ASP程序模块简介 第三节: ASP重点介绍知识
第一节：新闻、广告信息管理系统、客户服务
操作步骤： 插入表单. 插入4个复选钮及文字说明. 插入导航链接
第二节：ASP程序模块简介
程序名1：dongtai.asp:新闻列表页面 程序名2：news.asp 新闻详细内容页面 程序名3：addnews.asp 增加新闻页面 程序名4：editnews.asp 删除新闻页面
第三节：ASP重点知识介绍：
具体程序是： set rs=server.createobject<"adodb.recordset"> rs.open "select * from shop_guestshop where <id is null>",conn,1,3 rs.addnew rs<"name">=iname rs<"qq">=iqq rs<"email">=iemail rs<"url">=iurl rs<"sex">=isex rs<"content">=icontent rs<"time">=now<> rs.update rs.close set rs=nothing
电子商务网页制作与设计公开课详细PPT
以德立身 以技立足
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示：
在“文件”菜单里有“保存”和“另存为”两个命令，首次保存网 页时，选择“保存”或“另存为”命令都会弹出“另存为”对话框，提 示设计者设置保存位置和文件名；对于已经保存过的网页进行再次编辑 时，选择“保存”命令直接将所作的修改保存到原网页文档，而选择 “另存为”命令则再次弹出“另存为”对话框，可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
（2）、保存网页
打开“文件”菜单，选择“保存”命令， 将弹出“另存为”对话框，选择保存的 位置并输入保存文件名，单击“保存” 按钮即可将网页保存。
快捷键：
保存：ctrl+S 另存为：ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单，选择“页面属性”命令，或按快捷键（Ctrl+J）， 或者单击属性面板中的“页面属性”按钮，将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性，如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性 分类不同，分为六个类别。
以德立身 以技立足
图3-16设置“链接”（CSS)
放飞理想 激扬青春 展现自我
修改网页属性
（4）、标题（CSS）
在“（标题CSS）”分类中，可 以设置如下属性：
标题字体的格式、大小和颜 色，设置标题1至标题6后，在字 体属性面板中直接指定文字为某 号标题后，该文字直接套用该标 题的属性。
图3-1保存网页
放飞理想 激扬青春 展现自我
网页文件操作
温馨提示：
在“文件”菜单里有“保存”和“另存为”两个命令，首次保存网 页时，选择“保存”或“另存为”命令都会弹出“另存为”对话框，提 示设计者设置保存位置和文件名；对于已经保存过的网页进行再次编辑 时，选择“保存”命令直接将所作的修改保存到原网页文档，而选择 “另存为”命令则再次弹出“另存为”对话框，可以重新设置保存位置 和文件名。
以德立身 以技立足
放飞理想 激扬青春 展现自我
网页文件操作
（2）、保存网页
打开“文件”菜单，选择“保存”命令， 将弹出“另存为”对话框，选择保存的 位置并输入保存文件名，单击“保存” 按钮即可将网页保存。
快捷键：
保存：ctrl+S 另存为：ctrl+shift+S
谈一谈还有那些软件“保存与另存为” 跟DW软件一样快捷键。
以德立身 以技立足
图3-13保存网页
放飞理想 激扬青春 展现自我
修改网页属性
打开“修改”菜单，选择“页面属性”命令，或按快捷键（Ctrl+J）， 或者单击属性面板中的“页面属性”按钮，将弹出“页面属性”对话框。
在该对话框中可以设置网页的各种属性，如页面文字的设置、页面背景的 设置、页面边距的设置、链接文字的设置以及标题编码的设置等，根据属性 分类不同，分为六个类别。
以德立身 以技立足
图3-16设置“链接”（CSS)
放飞理想 激扬青春 展现自我
修改网页属性
（4）、标题（CSS）
在“（标题CSS）”分类中，可 以设置如下属性：
标题字体的格式、大小和颜 色，设置标题1至标题6后，在字 体属性面板中直接指定文字为某 号标题后，该文字直接套用该标 题的属性。
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
4.构成网页的基本元素 (1)logo。
网站logo,也叫网站标志,它是一个网站的象征。网站标志一般放在网页的左 上角。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。通常 企业网站的logo也就是该企业的logo。常为代表性的人物、动物、物品等,如工 行的标志、搜狐的狐狸等。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
知识分析
3. 基于栅格化设计原理的网页布局 栅格系统应用于设计领域已经至少50年了。栅格化让眼睛浏览信息更加愉悦。
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
电子商务课件(网页制作)
1、是一种脚本编写语言
2、基于对象的语言。
JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。 这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚 本环境中对象的方法与脚本的相互作用。
3、简单性
JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控 制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。 其次它的变量类型是采用弱类型，并未使用严格的数据类型。
在网页上空格
二）显示效果
这段程序的源文件包括了很多行文字，但是会被浏览 器忽略，看到的仅仅是一行。
这段程序的源文件也包括了很多行文字， 但由于使用了<br>标记， 所以在浏览器中能显示出来。 居中对齐 左对齐
右对齐
三、说明
<p>和</p>标记用于为文本分段，位于<p>和
</p>之间的文本单独构成一个段落。 <br>标记用于文本换行。 参数align用与控制每段的对齐方式，center 为居中对齐，left为左对齐，right为右对齐， 默认状态为左对齐。 注意分段和换行的区别：两段之间间距较宽， 而两行之间间距较窄。
二）显示效果
<hr>标记用来定义一条水平线。
三）说明
1、<hr>标记用来一条定义水平线。 2、其中参数width用于控制线长，可以使用
百分比或像素两种表示方法。 3、size控制水平线的粗细；color控制水平线 的颜色。
五 超链接
一）源代码
<html> <head> <title>超链接</title> </head> <body> <p><a href="1.htm">第一个页面</a></p> <p><a href="2.htm" target="_blank">第二个页面</a></p> </body> </html>
电子商务网页设计与制作完整版ppt课件全套教学教程(最新)
任务实施
01 电商企业网站的需求分析 02 电商企业网站的布局结构分析
03 电商企业网站的色彩应用
知识分析 1.网站规划的市场调研
网站的规划是指在网站建设前确定好网站的主题和功能目标后，对网站目标 定位，进行的内容规划和功能规划。其中直接的表现就是网站结构的规划，特别 对于网站前端部分而言，更为关注的是网站的栏目设计。
度，通过划分具有规律的分割，来提高网页开发效率。如下图所示： 将960像素的页面平均分成12分，间隔10像素。
960像素12栅格分割示意图
知识分析 3. 基于栅格化设计原理的网页布局
（1）960栅格化系统 960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制
作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重 要的角色。它为我们的设计提供一个坚实的坐标基础。
拓展练习 2.网页设计常用尺寸
网页设计因其载体的限制，要充分考虑到设备的尺寸，在设计页面的过程中， 设计师往往会根据屏幕大小来设计页面每个部分的宽窄，通常一个静态屏幕所展 示页面的宽高可以称之为一屏，一个完整的页面是由多屏组成的。
一屏的宽度由显示器宽度决定，再根据不同的浏览器进行微调。在显示器的 尺寸上减去20像素到30像素不会出现水平滚动条。但在实际操作中，我们通常只 会对网页中的主体部分进行设计，将主体放在屏幕中间，两边留白，或者插入大 的背景图。因此网页的宽度很大程度上会和版心尺寸保持一致。通常是920像素到 1400像素之间。而一屏的高度通常会在600像素到800像素之间，如果超过800像素， 那么该部分内容就不能在一个静态屏幕上完整显示，会进一步影响用户的体验。
知识分析
2. 竞品分析 竞品分析通常包括背景分析和定位分析两方面： 背景分析主要包括公司的资源、团队的背景，人员构成、组织架构、公司愿景、 成本构成。通过背景分析，可以深入了解公司的现状，公司的风格。
电子商务网站建设(ppt)
具备指向同一内容的多条导航通路
购买方便
只需点击一两次就可以完成一次购买过程
支持多种浏览器
网站必须与大多数流行的浏览器兼容
简单的图形界面
避免出现让用户分散注意力的令人厌烦的图形和声音
文本清晰
避免使用容易造成文本扭曲或文字字体不清的背景
二、电子商务网站建设:系统实现
主要任务是以被选定方案为依据，分别完成设备购置 和调试、程序编写和调试、人员培训、数据准备等工 作，最后把一个可以实际运行的系统交给用户。 – 系统软件/硬件的购买及安装调试 – 程序设计 (程序的注释,书写格式,变量名的选择等) – 人员培训 – 系统测试
电子商务网站设计性能优劣必须考虑的八个因素2015111电子商务16考虑因素说明功能完备网页可以快速下载有效地将用户引向网站销售的商品信息丰富具备可帮助用户轻松找到更多企业和产品信息的链接简单易用具备简单的傻瓜型导航工具冗余导航具备指向同一内容的多条导航通路购买方便只需点击一两次就可以完成一次购买过程支持多种浏览器网站必须与大多数流行的浏览器兼容简单的图形界面避免出现让用户分散注意力的令人厌烦的图形和声音文本清晰避免使用容易造成文本扭曲或文字字体不清的背景二电子商务网站建设
– 在整个规划设计工作中，企业高层管理人员是工作的主体； – 规划是确定网站整体建设目标、发展战略、系统总体结构方案
和资源计划，整个过程既是企业管理决策的过程，又是管理与 技术相结合的过程，不以解决网站项目开发中的具体业务问题 为重点；
– 规划人员对管理与技术环境的理解程度及认识水平，以及开创精 神与务实态度是企业电子商务网站规划设计的决定因素；
一、电子商务网站的规划:规划的任务
网站规划的任务主要有三个 ：
– 明确目标，制定发展战略：确定电子商务网站开发详细 计划书，对电子商务网站的目标、功能和信息需求作认 真分析；根据企业商务网站应用环境和应用现状评估， 制定企业电子商务应用发展政策、目标和战略。
电子商务网页设计与制作ppt (9)[27页]
![电子商务网页设计与制作ppt (9)[27页]](https://img.taocdn.com/s3/m/35c846339b89680202d82520.png)
— 14 —
4.“历史记录”面板
在用Photoshop进行图像处理时,经常需要回到前一状态, 这时可以使用“历史记录”面板在当前工作会话期间跳转到所 创建图像的任意一种最近状态,每次对图像进行编辑更改时,图 像的新状态都会添加到该面板中。
— 15 —
第二节 制作图片分类区
一、创建图片分类区文件
按淘宝网店中常见的规格设置宽度为165像 素,高度一般可自由可调,本节设高度为220像素, 分辨率为72,背景为白色。
字符间距:更改字符与字符之间的距离,相当于对所有字距增加或减少一个 相同的数量。
间距微调:用来调整两个字符之间的距离,但只针对某两个字符之间的距离 有效。
竖向偏移:即基线偏移,作用是将字符上下调整,常用来制作上标和下标。
— 13 —
3.段落文字
当输入大量文字时,可通过段落文本框 来输入。输入的文字会基于定界框的尺寸 进行自动切换,也可调整定界框的大小并进 行旋转。定界框可以在选择文字工具后,用 鼠标在文本图层上拖选产生,“段落”面板可 以通过与“字符”面板同样的方法打开。
Bold(加粗)、Bold Italic(加粗并倾斜)。 • 字体大小:也称为字号,可通过下拉列表选择,也可手动自行设定字号。 • 抗锯齿:控制字体边缘是否带有羽化效果。 • 字体颜色:通过拾色器来改变文字的颜色,可以针对单个字符设置颜色。 • 变形:可以使文字产生变形效果。 • 字符调板:可以快速打开“字符”“段落”面板。
七、选区样式
• 正常情况下通过拖动确定选框比例。固定长宽比:可 设置创建选区的长宽比,输入长宽比的值。
八、移动选区
• 当用鼠标选择工具箱中的“选区工具”图标时,可用鼠 标和方向键移动选区。
— 10 —
电子商务网页设计与制作ppt (4)[16页]
![电子商务网页设计与制作ppt (4)[16页]](https://img.taocdn.com/s3/m/6cbe4923ba0d4a7303763a20.png)
ad. Image.onmouseover=function( ) { this.Parent.AutoMove= false; }
ad. Image.onmouseout=function( ) { this.Parent.AutoMove= true; }
— 5—
一、添加图片
首先在Default.css中注释掉banner块的背景颜色, 并在images文件夹下存入图9-2所示的4个用于广告 轮换播放的图片。
— 6—
二、添加图片轮换功能
如图9-3所示,4张图片都已全部显示在了页面上,但还没有实现动态自动轮换的功能。为了实现自动轮换,我们 需要为它们添加脚本语言,即经常用到的JavaScript语言。在前面添加的图片代码下面加入以下代码:
— 4—
第一节 广告图片自动轮换的制作
本节的目标是利用CSS实现个人网站首页的广告图片的 自动轮换特效功能。广告图片自动轮换通过图片的自动切 换来展示各种广告图片,如果要浏览某张图片,可以通过点击 图片跳转到相应的页面,在这个页面里除了浏览此图片之外 还可以浏览其他相关信息,这是一种形象生动的广告形式,制 作效果如图9-1所示。
— 7—
//让图片标记为start的图片显示 $ (ids[start]).filters.revealTrans.Transition= Math.floor(Math.random( )*23);
$ (ids[start]).filters.reveaITrans.apply( ); $ (ids[start]).filters.reveaITrans.play( ); $ (ids[start]).style.display= 'none'; setid=setTimeout(loop,speed); start++; if(start= =ids.length){ start=0; } }; loop( ); } } galleryplay('1,2,3,4',1,6000);//调用自动播放函数 </script>
电子商务网站设计及其开发PPT课件(41页)
1．网站内容设计的原则 （1）新、精、专的信息内容 ① 信息内容永远处于第一位 ② 内容设计要有组织 ③ 及时更新信息内容
（2）安全快速的访问 ① 提高浏览者的访问速度 在确定内容的基础上，尽量提高速度十分必要，
速度太慢，浏览者也会失去耐心，从而影响企 业网站的访问量。 ② 要有安全良好运转的硬件和软件环境 ③ 要使信息便于用户浏览
3.2.5 其他页面的设计
1．新闻页面的设计 （1）主页中的新闻标题 ① 新闻标题组成的要素 ② 新闻标题的版面布置 （2）新闻页面 2．产品页面的制作
3．雇员页面 （1）设计雇员目录 （2）创建默认页面 （3）创建个人页面 ① 联系信息 ② 组织和部门信息 ③ 雇员背景信息
随时收集用户的意见和建议
•
1、这世上，没有谁活得比谁容易，只是 有人在 呼天抢 地，有 人在默 默努力 。
•
2、当热诚变成习惯，恐惧和忧虑即无处 容身。 缺乏热 诚的人 也没有 明确的 目标。 热诚使 想象的 轮子转 动。一 个人缺 乏热诚 就象汽 车没有 汽油。 善于安 排玩乐 和工作 ，两者 保持热 诚，就 是最快 乐的人 。热诚 使平凡 的话题 变得生 动。
3.2.4 首页设计
首页的设计应该遵循快速、简洁、吸引人、信息 概括能力强、易于导航的原则。
1．首页的功能模块 （1）页头 （2）主菜单 （3）最新消息的传递 （4）电子邮件地址 （5）联络信息 （6）版权信息 （7）其他信息
2．首页的可视化设计 3．首页设计要注意的问题 （1）首页明确，主题突出 （2）尽可能缩短下载时间
④ 增加一些有趣的材料
4．其他页面设计 （1）客户支持页面 （2）市场调研页面 （3）企业信息页面 （4）其他内容
3.2.6 网页制作
电子商务网页设计与制作ppt (8)[20页]
![电子商务网页设计与制作ppt (8)[20页]](https://img.taocdn.com/s3/m/e464f929c8d376eeafaa3120.png)
(2)在该界面左侧的列表中依次展开“Internet信息服务/本地计算机/网站/默认网站”,如图10-7所示。 在该列表下显示的是“C:\inetpub\wwwroot”下的文件和文件夹,也就是网站存放的路径,这是系统 的默认设置。 (3)在“默认网站”上点击鼠标右键,选择“属性”,打开“默认网站属性”对话框。选择“主目录”选项卡, 在该选项卡的“本地路径”文本框中输入网站所在的路径即可,如图10-8所示。
Windows 2000/2003 Server和Windows XP都自带了IIS组件,通过IIS组件可以架设Web、FTP、Mail等服 务器。下面以Windows XP为平台,简要介绍安装IIS的过程,Windows 2000 Server和Windows 2003 Server 的安装也类似。具体操作如下: (1)依次选择“开始/控制面板/添加或删除程序”,打开“添加或删除程序”对话框。 (2)在该对话框的左侧按钮面板中点击“添加/删除Windows组件”,打开“Windows 组件向导”对话框,如图10-3和图10-4所示。
(4)点击“下一步”按钮后,设置站点的权限,如图10-16所示,一般来说只要 勾选“读取”和“运行脚本”两项就可以了。如果不选择“运行脚本”,那么 该站点就无法解析ASP网页。
(5)再次点击“下一步”按钮即可完成该站点的创建,这时会在“默认网站”下面多 出一个名字为“wxkj”的站点,如图10-17所示,说明IIS站点架设顺利完成。
— 7—
二、IIS属性设置
安装好IIS组件后就可以使用IIS服务了,此时的Web服务器还没有配置完成,因此还需要对IIS进行配 置,具体操作如下:
(1)依次选择“开始/控制面板/管理工具”,此时出现“Internet信息服务”图标,双击该图标,打开 “Internet信息服务”界面,如图10-1所示。
Windows 2000/2003 Server和Windows XP都自带了IIS组件,通过IIS组件可以架设Web、FTP、Mail等服 务器。下面以Windows XP为平台,简要介绍安装IIS的过程,Windows 2000 Server和Windows 2003 Server 的安装也类似。具体操作如下: (1)依次选择“开始/控制面板/添加或删除程序”,打开“添加或删除程序”对话框。 (2)在该对话框的左侧按钮面板中点击“添加/删除Windows组件”,打开“Windows 组件向导”对话框,如图10-3和图10-4所示。
(4)点击“下一步”按钮后,设置站点的权限,如图10-16所示,一般来说只要 勾选“读取”和“运行脚本”两项就可以了。如果不选择“运行脚本”,那么 该站点就无法解析ASP网页。
(5)再次点击“下一步”按钮即可完成该站点的创建,这时会在“默认网站”下面多 出一个名字为“wxkj”的站点,如图10-17所示,说明IIS站点架设顺利完成。
— 7—
二、IIS属性设置
安装好IIS组件后就可以使用IIS服务了,此时的Web服务器还没有配置完成,因此还需要对IIS进行配 置,具体操作如下:
(1)依次选择“开始/控制面板/管理工具”,此时出现“Internet信息服务”图标,双击该图标,打开 “Internet信息服务”界面,如图10-1所示。
电子商务网页设计与制作ppt (6)[25页]
![电子商务网页设计与制作ppt (6)[25页]](https://img.taocdn.com/s3/m/59b82400b14e852459fb573b.png)
电子商务网页设计与制作
第七章 设计与制作中小企业形象网站子页
网站子页面是整个网站的主要构成部分,也是网 站内容的主要载体。通过对前面章节的学习可以了 解,网站首页确定后,整个网站的页面布局和风格也确 定了。网站子页面的风格与网站首页保持一致,页面 布局也一般采用和首页相同或者相近的布局。
— 2—
知识目标
六、页面主体区域的制作
将主体部分两个单元格背景设为白色,光标移至左侧单元格。在单元格中插入一个2行1列,宽为“100%”,其余 设置为“0”的嵌套表格。在第1行中再插入一个3行1列,宽为“100%”,其余设置为“0”的嵌套表格。
— 7—
七、页面底部区域的制作
将表格模式切换至扩展表格模式,将整个布局表格选中,“对齐”设为 “居中对齐”。再将光标移至整个布局表格尾部,同时在Dreamweaver中打 开主页“index.html”,通过复制粘贴该页面底部区域单元格的方式,创建子 页面底部区域。
— 8—
八、添加超级链接
将光标移回页面首部,通过拖选文字“回到 首页”后,在如图7-15所示的面板中对属性进行设 置,为该文字添加超级链接。
九、另存为模板
通过执行“文件”→“另存为模板”命令,打开如图77所示的“另存模板”对话框,在对话框中可以将模板保 存到对应的站点中,并进行命名。
— 9—
十、绘制布局表格和绘制布局单元格
• 通过创建命名锚记,可使用“属性”面板链接到页面文档中 命名锚记插入的部分。
2.检查断开的、外部的和孤立的链接
• 对于一个站点,往往需要进行链接检查和测试,找出断开的、 外部的和孤立的链接。
— 14 —
第二节 通过子页面模板创建子页面
一、打开模板页面,创建“可编辑区域”
第七章 设计与制作中小企业形象网站子页
网站子页面是整个网站的主要构成部分,也是网 站内容的主要载体。通过对前面章节的学习可以了 解,网站首页确定后,整个网站的页面布局和风格也确 定了。网站子页面的风格与网站首页保持一致,页面 布局也一般采用和首页相同或者相近的布局。
— 2—
知识目标
六、页面主体区域的制作
将主体部分两个单元格背景设为白色,光标移至左侧单元格。在单元格中插入一个2行1列,宽为“100%”,其余 设置为“0”的嵌套表格。在第1行中再插入一个3行1列,宽为“100%”,其余设置为“0”的嵌套表格。
— 7—
七、页面底部区域的制作
将表格模式切换至扩展表格模式,将整个布局表格选中,“对齐”设为 “居中对齐”。再将光标移至整个布局表格尾部,同时在Dreamweaver中打 开主页“index.html”,通过复制粘贴该页面底部区域单元格的方式,创建子 页面底部区域。
— 8—
八、添加超级链接
将光标移回页面首部,通过拖选文字“回到 首页”后,在如图7-15所示的面板中对属性进行设 置,为该文字添加超级链接。
九、另存为模板
通过执行“文件”→“另存为模板”命令,打开如图77所示的“另存模板”对话框,在对话框中可以将模板保 存到对应的站点中,并进行命名。
— 9—
十、绘制布局表格和绘制布局单元格
• 通过创建命名锚记,可使用“属性”面板链接到页面文档中 命名锚记插入的部分。
2.检查断开的、外部的和孤立的链接
• 对于一个站点,往往需要进行链接检查和测试,找出断开的、 外部的和孤立的链接。
— 14 —
第二节 通过子页面模板创建子页面
一、打开模板页面,创建“可编辑区域”
电子商务网页设计(第三版)课件汇总全书电子教案完整版课件最全幻灯片(最新)课件电子教案幻灯片
2. 内容及其格式标记的简单应用
（1）格式标记 <p>…</p> 用来创建一个段落，在此标记之间的文本将按照段落的格式显 示。 <br> 是一个很简单的换行标记，它没有结束标记，用来创建一个换行。 <dl></dl><dt></dt><dd></dd> 是普通列表标记，<dt></dt> 和 <dd></dd> 都必须放在<dl></dl> 标记之间。<dl></dl> 用来创建一个列 表；<dt></dt> 用来创建列表中的上层项目；<dd></dd> 用来创建列表中最 下层项目。
一、网页中添加文本
1. 添加普通文本
（1）直接输入文本 （2）复制粘贴文本 （3）从其他文件导入
2. 添加空格
在需要输入的地方单击鼠标左键，将输入法切换到半角状态，单击空格键即 可输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：
（1）菜单“插入记录”/“HTML”/“特殊字符”/“不换行空格”。 （2）直接按“Ctrl+Shift+Space”快捷键。 （3）设置软件首选参数“允许连续空格”。
2. 网站逻辑链接结构基本形式
树状链接结构（一对一）
星状链接结构（一对多）
3. 网站逻辑链接结构的选择
最好的办法是：首页和一级页面之间用星状链接结构，一级和二级页面之 间用树状链接结构。
四、页面流程
1. 页面流程的概念
网站设计者为访 问者设计的在浏览网 站时的浏览经历就是 页面流程。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
规划。
《电子商务网页制作》
教材修订的主要内容
4. 引入CSS样式表和网页定位技术的相关 内容
5. 增加网页特效 6. 增加网站开发应用环境的内容
《电子商务网页制作》
修订版教材的特点
1. 科学性 2. 实用性 3. 层次性 4. 教育性 5. 开放性
1、科学性
学科
学生
学生
学生
知识结构 认知结构 心理特点 学习特征
第六章 表单应用
4
第七章 HTML初步
4
第八章 网页特效的使用
4
第九章 图像处理软件FireworksMXຫໍສະໝຸດ 8第十章 课程设计
14
网站的开发与维护
章节
标
题
附录一 网站开发环境的建立
附录二 网站发布与维护
第二部分
电子商务网页制作课程的教学设计
一、学生分析
起点水平分析 学习风格分析 学习动机分析
Please Criticize And Guide The Shortcomings
讲师：XXXXXX XX年XX月XX日
电子商务网页制作
网络营销
整合
以网站策划与制综合能力培养为主线的 新的课程体系
二、坚持主导－主体相结合原则 开展综合课程设计
教师 任务下达
正式组合 审核
学习者
分组策略 提交
选题 自由组合
正式组合 撰写报告
审核 辅导
提交
撰写报告
辅导策略
组内协作 任务分派
资料搜集
协
合
网页制作
商
网站组装
作
网站调试
网站发布
准备答辩
师评
网站发布
网站评价量规
准备答辩 成果汇报 自评、互评
总结
学生在学习中的作用与活动
竞争 、伙伴 、设计 、角色扮演
教师在学习中的作用与活动
分组 、辅导 、监控、评价
三、开展多种活动，形成良好的 学习氛围
技能通级
三、开展多种活动，形成良好的 学习氛围
学科竞赛
网页模板设计 网页广告设计 网上调查问卷设计 网上购物比赛 网页动态效果设计
网页制作技术
学习提示
任务驱动
学法指导
有关学法、概念、常用通行做法的说明， 以及对难点的解释
学法指导
有关网页制作的经验之谈
学法指导
对学习者的提醒，指出应该小心的地方
学法指导
向学习者指明本书中和当前内容有关章节， 建议学习者前去阅读
2、实用性 3、层次性 4、教育性 5、开放性
教材内容安排
课程研讨
第一部分
《电子商务网页制作》教材简介
《电子商务网页制作》教材修订原因
1. 原有的教材已经不能适应当前电子 商务网页制作的发展水平。
2. 原教材中存着不足和疏漏。 3. 选用的软件本身的功能局限。
《电子商务网页制作》
教材修订的主要内容
1. 调整原有的篇章结构。 2. 全面升级软件。 3. 新增电子商务网站概述、电子商务网站
网页的外观设计和 内容编辑
电子商务网页制作
基础知识
网站的 开发维护
电子商务网页制作的基础知识
章节 第一章
标
题
电子商务网页基础知识
课时 2
网页的外观设计和内容编辑
章节
标
题
课时
第二章 Frontpage2003概览
2
第三章 创建基本的电子商务网页
18
第四章 网页布局
8
第五章 框架网页与CSS样式表
8
电子商务网页设计与策划
构思选题 网站内容的收集与制作 网站页面的设计与制作 网站的发布与运行调试
三、教学内容分析
网站的开发与维护模块
四、情境的创设
硬环境
1、电子教室或大屏幕投影 2、局域网（配置了WEB服务器，并安装
有FrontPage服务器扩展）
软环境
情境 协作 会话
专题学习网站——《网页学城》
七、学习评价设计
学习评价的内容 小组成员关系 学习动机 学习中的投入 问题解决结果 学业知识和技能的掌握情况
评价过程中应注意的问题
评价覆盖协作小组的每一个成员 注重阶段性评价、多次评价 正确对待非预期学习结果
第三部分
电子商务网页制作课程的教学模式
一、以建构主义为指导，创建双 线并行的课程体系
三、教学内容分析
电子商务网页基础知识模块
WWW与电子商务 电子商务网站的网页构成 网页制作工具介绍 网站开发技术介绍 网页制作的发展 电子商务网页制作原则
三、教学内容分析
网页的外观设计和内容编辑模块
网页的外观设计和内容编辑的基本技术 网页的外观设计和内容编辑的提高技术 图像处理技术 课程设计指导
二、教学目标分析
技能学习目标 认知目标 有指导的反应 适应 创新
情感学习目标 接受和注意 反应 思考 兴趣 热爱
计算机基础知识
获取和处理信息的能力
网页制作技术
分析和解决问题的能力
网络营销知识 美术知识
网页制作
同情和关心他人的能力 与他人合作的能力 持之以恒的韧性
创新意识、创新思维、创新个性
网页的外观设计和内容编辑的基本技术
网站的创建 文本的使用 图像、声音和动画的使用 超链接的使用 表格的使用 网页布局
网页的外观设计和内容编辑的提高技术
CSS样式表 框架网页 表单技术 HTML语言基础 网页特效的使用
课程设计指导
电子商务网站策划
建站流程 网站域名注册
写在最后
经常不断地学习,你就什么都知道。你知道得越多,你就越有力量 Study Constantly, And You Will Know Everything. The More
You Know, The More Powerful You Will Be
结束语
感谢聆听
不足之处请大家批评指导
内容确定
专题知识 ——教学大楼 扩展性学习资源——资源中心 协作学习 ——学生社、教师之家、学城论坛 网上评价 ——调研室 网站简介及学习导航 ——学城总部
五、信息资源设计
知识资源 智慧资源
六、学习策略设计
协作学习策略 问题导向策略 教练策略 小组评价策略
教学方法的选择
教师教学——集体授课+个别辅导 学生学习——个别化学习+协作式学习
《电子商务网页制作》
教材修订的主要内容
4. 引入CSS样式表和网页定位技术的相关 内容
5. 增加网页特效 6. 增加网站开发应用环境的内容
《电子商务网页制作》
修订版教材的特点
1. 科学性 2. 实用性 3. 层次性 4. 教育性 5. 开放性
1、科学性
学科
学生
学生
学生
知识结构 认知结构 心理特点 学习特征
第六章 表单应用
4
第七章 HTML初步
4
第八章 网页特效的使用
4
第九章 图像处理软件FireworksMXຫໍສະໝຸດ 8第十章 课程设计
14
网站的开发与维护
章节
标
题
附录一 网站开发环境的建立
附录二 网站发布与维护
第二部分
电子商务网页制作课程的教学设计
一、学生分析
起点水平分析 学习风格分析 学习动机分析
Please Criticize And Guide The Shortcomings
讲师：XXXXXX XX年XX月XX日
电子商务网页制作
网络营销
整合
以网站策划与制综合能力培养为主线的 新的课程体系
二、坚持主导－主体相结合原则 开展综合课程设计
教师 任务下达
正式组合 审核
学习者
分组策略 提交
选题 自由组合
正式组合 撰写报告
审核 辅导
提交
撰写报告
辅导策略
组内协作 任务分派
资料搜集
协
合
网页制作
商
网站组装
作
网站调试
网站发布
准备答辩
师评
网站发布
网站评价量规
准备答辩 成果汇报 自评、互评
总结
学生在学习中的作用与活动
竞争 、伙伴 、设计 、角色扮演
教师在学习中的作用与活动
分组 、辅导 、监控、评价
三、开展多种活动，形成良好的 学习氛围
技能通级
三、开展多种活动，形成良好的 学习氛围
学科竞赛
网页模板设计 网页广告设计 网上调查问卷设计 网上购物比赛 网页动态效果设计
网页制作技术
学习提示
任务驱动
学法指导
有关学法、概念、常用通行做法的说明， 以及对难点的解释
学法指导
有关网页制作的经验之谈
学法指导
对学习者的提醒，指出应该小心的地方
学法指导
向学习者指明本书中和当前内容有关章节， 建议学习者前去阅读
2、实用性 3、层次性 4、教育性 5、开放性
教材内容安排
课程研讨
第一部分
《电子商务网页制作》教材简介
《电子商务网页制作》教材修订原因
1. 原有的教材已经不能适应当前电子 商务网页制作的发展水平。
2. 原教材中存着不足和疏漏。 3. 选用的软件本身的功能局限。
《电子商务网页制作》
教材修订的主要内容
1. 调整原有的篇章结构。 2. 全面升级软件。 3. 新增电子商务网站概述、电子商务网站
网页的外观设计和 内容编辑
电子商务网页制作
基础知识
网站的 开发维护
电子商务网页制作的基础知识
章节 第一章
标
题
电子商务网页基础知识
课时 2
网页的外观设计和内容编辑
章节
标
题
课时
第二章 Frontpage2003概览
2
第三章 创建基本的电子商务网页
18
第四章 网页布局
8
第五章 框架网页与CSS样式表
8
电子商务网页设计与策划
构思选题 网站内容的收集与制作 网站页面的设计与制作 网站的发布与运行调试
三、教学内容分析
网站的开发与维护模块
四、情境的创设
硬环境
1、电子教室或大屏幕投影 2、局域网（配置了WEB服务器，并安装
有FrontPage服务器扩展）
软环境
情境 协作 会话
专题学习网站——《网页学城》
七、学习评价设计
学习评价的内容 小组成员关系 学习动机 学习中的投入 问题解决结果 学业知识和技能的掌握情况
评价过程中应注意的问题
评价覆盖协作小组的每一个成员 注重阶段性评价、多次评价 正确对待非预期学习结果
第三部分
电子商务网页制作课程的教学模式
一、以建构主义为指导，创建双 线并行的课程体系
三、教学内容分析
电子商务网页基础知识模块
WWW与电子商务 电子商务网站的网页构成 网页制作工具介绍 网站开发技术介绍 网页制作的发展 电子商务网页制作原则
三、教学内容分析
网页的外观设计和内容编辑模块
网页的外观设计和内容编辑的基本技术 网页的外观设计和内容编辑的提高技术 图像处理技术 课程设计指导
二、教学目标分析
技能学习目标 认知目标 有指导的反应 适应 创新
情感学习目标 接受和注意 反应 思考 兴趣 热爱
计算机基础知识
获取和处理信息的能力
网页制作技术
分析和解决问题的能力
网络营销知识 美术知识
网页制作
同情和关心他人的能力 与他人合作的能力 持之以恒的韧性
创新意识、创新思维、创新个性
网页的外观设计和内容编辑的基本技术
网站的创建 文本的使用 图像、声音和动画的使用 超链接的使用 表格的使用 网页布局
网页的外观设计和内容编辑的提高技术
CSS样式表 框架网页 表单技术 HTML语言基础 网页特效的使用
课程设计指导
电子商务网站策划
建站流程 网站域名注册
写在最后
经常不断地学习,你就什么都知道。你知道得越多,你就越有力量 Study Constantly, And You Will Know Everything. The More
You Know, The More Powerful You Will Be
结束语
感谢聆听
不足之处请大家批评指导
内容确定
专题知识 ——教学大楼 扩展性学习资源——资源中心 协作学习 ——学生社、教师之家、学城论坛 网上评价 ——调研室 网站简介及学习导航 ——学城总部
五、信息资源设计
知识资源 智慧资源
六、学习策略设计
协作学习策略 问题导向策略 教练策略 小组评价策略
教学方法的选择
教师教学——集体授课+个别辅导 学生学习——个别化学习+协作式学习