电子商务实习教案.docx
《电子商务实习教案.docx》由会员分享，可在线阅读，更多相关《电子商务实习教案.docx（27页珍藏版）》请在冰点文库上搜索。
电子商务实习教案
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
一.网页文本
（一）建立站点
其操作步骤如下：
（1）在本地磁盘中建立一个“huadian”文件夹。
（2）单击“开始”按钮，选择“程序”——“MicrosoftFrontPage”，打开“MicrosoftFrontPage”窗口。
（3）执行“文件”——“新建”——“站点”操作或单击工具栏中新建按钮旁边的下拉菜单，从中选择“站点”命令，打开“新建站点”对话框，在“指定新站点的位置”选项中输入“C:
\助理电子商务师\huadian”。
单击“确定”后将huadian文件夹转化为站点，此时会在站点中自动创建_private和images两个子文件夹和new_page_1.htm文件。
（4）执行“文件”——“保存文件”操作或单击工具栏中的保存按钮，保存新建的文件夹new_page_1.htm，命名为1-1.htm。
MicrosoftFrontPage编辑器提供了3种视图方式，单击相应的标签可进行视图切换，各视图的作用如下：
·（编辑视图）：
用于可视化编辑、修改网页。
·HTML（代码视图）：
直接编辑或查看网页的HTML源代码。
·预览：
预览网页的实际效果。
（二）页面属性的设置
其操作步骤如下：
（1）选择“格式”——“背景”或在页面的空白位置处右击后选择“页面属性”操作，弹出“页面属性”对话框。
（2）在“页面属性”对话框中分别进行“常规”、“背景”和“边距”的设置，将页面标题设置为“我的花店”，背景颜色设置为谈黄色，上边距设置为0。
并可在“页面属性”的背景选项中设置超链接不同状态的显示效果。
（三）录入文本
录入文本常用的方法有直接录入文本、从已有的文档中复制文本、修改已有的网页文本等方式。
在FrontPage中直接录入文本。
（四）设置文本的字符格式
其操作步骤如下：
（1）在FrontPage中选中需要进行格式化的文本，如选中第一行“我的花店”。
（2）利用如图1-7所示的格式栏，对选定的文本进行格式化。
将“我的花店”设置为红色、隶书、标题1。
（五）设置文本的段落格式
其操作步骤如下：
（1）在FrontPage中选中需要进行格式化的段落，如选中1段~5段。
（2）利用图1-7中的格式栏，对选定的段落进行格式化。
将所有段落进行居中操作。
（六）插入水平线
操作步骤如下：
（1）在需要插入水平线的位置上单击。
（2）执行“插入”——“水平线”操作，即可插入一条水平线。
（3）选中水平线并双击，打开“水平线属性”对话框进行相应的设置，颜色为蓝色，高度为4个像素，单击“确定”按钮。
（4）在版权声明的上面再插入一条水平线。
（七）插入滚动字幕
其操作步骤如下：
（1）选中文本“欢迎您访问我的花店”，执行“剪切”操作。
（2）选择“插入”——“组件”——“字幕”命令，在弹出的“字幕属性”对话框中进行相应的设置，在“文本选项”中粘贴剪切的文字，滚动方向为左，滚动速度为4个像素，字幕宽度为200像素，背景色为藕荷色。
（3）单击“确定”按钮即可。
如果要使文本上下滚动，需要修改其HTML代码。
至此，一个简单的网页已经创建完成。
（八）预览网页
网页编辑完毕后，可在FrontPage编辑器中预览网页的效果。
单击FrontPage编辑器
窗口下方的“预览”标签，可预览网页的实际显示效果。
网页编辑完毕后，也可在浏览器中预览网页的效果。
执行“文件”——“在浏览器中预览”操作或单击工具栏中的按钮，即可在浏览器中预览网页的效果。
注意事项
（1）在进行网页制作时，一定要用站点管理器来管理自己的站点。
（2）在设置字符格式前，必须先选定对象，如果没有选定对象，则新设置的字符格式公对以后输入的文本有效。
如果是设置某一段落的格式，则只需将光标置于该段中即可。
Ⅲ、学生练习
Ⅳ、巡回指导
Ⅴ、测试
Ⅵ、评讲
Ⅶ、布置作业:
补充习题
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
二.插入图像
（一）插入图像
其操作步骤如下：
（1）将光标插入点定位到需要插入图像的位置。
（2）执行“插入”——“图片”或单击工具栏上的按钮，打开“图片”对话框。
（3）选择图像文件所在的位置及文件名，如图1-12所示，单击“确定”完成图像的插入。
（4）选中图片后右击，再选择“图片属性”，打开“图片属性”对话框进行图片的属性设置，其“外观”属性设置，单击“确定”按钮。
（5）保存文件，预览效果。
（二）创建图像热点
一幅图像上可以有多个热点，热点可以是任意形状。
创建热点的操作步骤如下：
（1）选中需要创建热点的图像。
（2）在“图片”工具栏中选择多边形热点工具，在图像中点击选取范围后，弹出“创建超链接”对话框并进行超链接的设置。
（3）保存文件，预览效果。
（三）创建超链接
其操作步骤如下：
（1）新建一个1-11.htm页面文件，将其保存在与1-1.htm相同的文件夹下。
（2）在1-1.htm中选中需要创建超链接的对象，如文字“花可以传情”。
（3）执行“插入”——“超链接”或单击工具栏上的插入超链接按钮，打开“创建超链接”对话框，选中1-11.htm文件。
（4）单击“目标框架”旁的编辑按钮，在弹出的“目标框架”对话框中进行链接目标的设置，此处选择“新建窗口”。
（5）单击“确定”按钮完成超链接的创建，结果会在选择的超链接文本下面出现蓝色的下划线。
（6）保存文件，预览效果。
有超链接的地方鼠标会变成小手形状，单击此处即可在新窗口中打开所链接的页面。
创建超链接的对象既可以是文字，也可以是整幅图像，还可以是图像热点。
Ⅲ、学生练习
Ⅳ、巡回指导
Ⅴ、测试
Ⅵ、评讲
Ⅶ、布置作业：
补充习题
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
三、表格的使用
学习目标
（1）了解有关表格的知识。
（2）理解使用表格进行网页的布局定位及增加网页层次的原理。
（3）掌握在FrontPage中创建表格的方法。
（4）掌握表格的编辑、格式化以及属性设置。
（一）插入表格
其操作步骤如下：
（1）启动FrontPage2000
（2）插入表格。
此处插入一个5x3的表格，可采取以下任一方法。
1）执行“表格”——“插入”——“表格”命令，在出现的对话框中设置表格的行数、布局及宽度。
2）单击工具栏上的按钮，然后拖动鼠标指定行数和列数。
（3）在表格中输入表格内容。
在表格中输入内容时，除了可以利用4个光标键移动插入点之外，还可以按Tab按使其移到下一个单元格。
将光标放置在最后一个单元格中，按Tab键将自动添加一行。
如果表格位于网页的最开头，要在表格前插入文本，可在表格的第一个单元格中按回车键，使表格下移一行。
（二）编辑表格
1.复制、移动、删除、表格元素
其操作步骤如下:
（1）选择操作对象，例如，选择单元格、行、列或整个表格。
（2）执行下列相应的操作
1）移动。
用鼠标将选择的内容拖至新位置；或者先“剪切”所选内容，然后在新位置处“粘贴”。
2）复制。
先按住Ctrl键不放，再用鼠标将选择的内容拖至新位置；或者先“复制”所选内容，然后在新位置处“粘贴”。
3）删除表格元素。
可执行删除所选择的单元格、行或列的操作。
4）删除内容。
按键盘上的Delete键，可删除所选单元格中的内容。
如果选择的是整个表格，按键盘上的Delete键可删除整个表格。
2.设置表格标题
其操作步骤如下:
（1）执行“表格”——“插入”——“标题”命令后，表格的上方空出一行，插入点光标出现在居中的位置。
（2）输入表格的标题，此处输入“花与节日”。
3.添加行、列
其操作步骤如下：
（1）选择插入位置，如果要插入行，则选择一行；如果要插入列，则选择一列。
（2）单击“表格”——“插入”——“行或列”，打开“插入行或列”的对话框，按需求进行设置后单击“确定”按钮即可。
4.拆分与合并单元格
表格往往是不规则的,经常需要按需拆分或合并单元格,其操作步骤如下:
（1）选择对象，如果是拆分单元格，首先选择该单元格；如果是合并单元格，则选择需要合并的若干单元格。
（2）执行相应的命令，如果是拆分单元格，单击“表格”——“拆分单元格”，在打开的对话框中选择是拆分为多行还是拆分为多列，然后再选择相应的拆分数；如果是合并单元格，则单击“表格”——“合并单元格”即可。
此处将表格中第一行的前两列合并，2行~4行的第一列合并。
5.调整行高、列宽
其操作步骤如下：
（1）调整行高的步骤。
先把鼠标移到需调整行任一单元格的上边框或下边框，等鼠标指针形状变为双向箭头时，再向上或向下拖动边框。
（2）调整列宽的步骤。
先把鼠标移到需调整列任一单元格的左边框或右边框，等鼠标指针形状变为双向箭头时，再向左右向右拖动边框。
说明：
上述方法比较直观，但是表格的总宽度并不变化，也就是说，如果增加了某列的宽度，则其相邻列的宽度将缩小，反之亦然。
如果要使相邻列的宽度保持不变而使表格的总宽度发生变化，在拖动之前要先按住Shift键。
（三）设置表格属性
表格制作好之后，还可以根据需要调整表格的外观和属性。
1.设置表格属性
（1）单击表格的任一单元格。
（2）单击“表格”——“属性”——“表格”，打开“表格属性”对话框。
（3）按需要进行布局、表格大小、自定义表格背景及边框色等属性的设置，然后单击“确定”按钮。
2.设置单元格属性
（1）选择需设置属性的单元格。
（2）单击“表格”——“属性”——“单元格”，打开“单元格属性”对话框。
（3）按需要进行单元格的布局、单元格最小尺寸、自定义背景及边框颜色等属性的设置，然后单击“确定”按钮。
此处将所选第一行单元格的布局设置为水平居中对齐，背景色设置为#CC99FF，效果。
（四）表格的格式化
表格格式化的操作步骤与文本格式化的操作基本相同，其操作步骤如下：
（1）选定表格中需格式化的内容。
（2）按需要进行格式化。
（五）使用表格进行网页的布局定位
使用表格进行网页的布局定位时，通常第一层为一个1X1的表格，用于设定网页的尺寸。
网页宽度和高度的设置原则是：
在800X600分辨率下不会产生横向滚动条，我们可将表格的宽度设置为760像素，表格的高度可根据需要自行设定，但宽度最好不要超过778像素。
通过表格的嵌套可以实现复杂的网页定位。
其操作步骤如下：
（1）在FrontPage2000中新建页面文件并保存。
（2）执行“表格”——“插入”——“表格”命令，在打开的“表格属性”对话框中进行如图1-23所示的设置，然后单击“确定”按钮。
（3）将光标置于单元格中右击，从弹出的菜单选项中选择“表格属性”操作，在打开的“表格属性”对话框中设置表格的高度为420像素，表格的背景颜色为蓝色。
（4）在第一个表格的单元格中再插入一个高度为760像素、高度为420像素的3X1的表格，在“单元格属性”对话框中分别将3行的高度设置为100像素、290像素、300像素。
（5）在第一行中插入一个宽度为760像素、高度为290像素的1X2的表格，并将两个单元格的宽度分别设置为200像素、560像素。
（6）在第二行中插入一个宽度为760像素、高度为290像素的1X2的表格，并将两上单元格的宽度分别设置为160像素、600像素。
（7）在第二行的左边单元格中插入一个宽度为160像素、高度为290像素的5X1的表格，并将每个单元格的高度均分为58像素。
（8）此时的布局效果。
保存文件。
Ⅲ、学生练习
Ⅳ、巡回指导
Ⅴ、测试
Ⅵ、评讲
Ⅶ、布置作业：
补充习题
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
二、框架的使用
（一）创建框架页
其操作步骤如下：
（1）启动FrontPage2000。
（2）建立框架。
执行“文件”——“新建”——“网页”操作，在出现的“新建”对话框中选择“框架网页”选项卡，从中选择一种框架形式，此处选择“横幅和目录”框架形式，按“确定”后即可创建三框架网页。
每个框架内有2个按钮，其作用如下：
1）设置初始网页。
单击该按钮，可以为框架指定一个初始网页。
2）新建网页。
单击该按钮，可以为框架新建一个网页。
此处在每个框架中单击“新建页面”按钮，系统自动在每个框架中创建一个空白网页。
（3）为每个框架的新建网页输入内容，如图1-29所示。
对于三框架网页，上边的框架通常显示标题，左边的框架通常显示栏目，右边的框架显示栏目的内容。
说明：
框架网页有5种视图方式，比普通网页多了以下两种视图方式：
（1）无框架。
当访问者试图打开某个框架网页时，基其使用的浏览器不支持框架，那么浏览器中将显示这样一句话：
”Thispageusesframes,butyourbrowserdoesn'tsupportthem.”若要改变上述提示信息，可以切换到“无框架”视图进行修改。
（2）框架网页HTML。
切换到该视图，可显示整个框架的HTML代码。
而切换到HTML视图，只能看到当前框架初始网页的HTML代码。
（二）保存框架及框架页
其操作步骤如下：
（1）单击工具栏上的按钮，出现“另存为”对话框。
此时上边的框架为蓝色框，说明此时保存的是上边框架，输入文件名top，单击“保存”按钮。
（2）左边框架为蓝色框时，输入文件名list,单击“保存按钮”。
（3）右边框架为蓝色框时，输入文件名main,单击“保存按钮”。
（4）整个框架为蓝色框时，输入文件名frame,单击“保存按钮”。
（5）建立超链接。
我们将为左边的栏目创建超链接，并使链接目目标在右框架中显示，建立超链接的操作步骤如下：
1）选中文本“花语”，单击工具栏上的插入超链接按钮，在出现的“创建超链接”对话框中选择要链接的hy.htm网页，单击“目标框架”旁的编辑按钮，在弹出的“目标框架”对话框中进行链接目标的设置，此处选择右框架，然后单击“确定”按钮。
2）同理，将文本“花节”链接到bg.htm网页，目标框架设置为右框架right。
3）将“右情链接”文本链接到新浪网站主页。
4）将“与我联系”文本链接到gltxiaohong@邮箱。
（6）在浏览器中预览框架页的实际效果。
说明：
对于新创建的框架，每一次保存时，系统将提示用户依次保存顶部、左部、右部框架中的网页，最后要求用户保存整个框架文件本身。
（三）编辑框架
1.拆分框架
其操作步骤如下：
（1）选择需要拆分的框架，此时选中的框架四周出现蓝色的框线。
（2）执行“框架”——“拆分框架”操作，出现“拆分框架”对话框。
（3）选择拆分方式（拆分为多列/多行），设定后单击“确定”按钮。
说明：
要拆分框架，最方便的是使用鼠标拖动的方法，即把鼠标指针移到框架的边框上，按住Ctrl键，然后拖动框架的边框。
2.删除框架
其操作步骤如下：
（1）选择需删除的框架。
（2）执行“框架”——“删除框架”操作。
（四）设置框架属性
1.设置框架属性
其操作步骤如下：
（1）选择需设置属性的框架。
（2）单击“框架”——“框架属性”，出现相应“框架属性”对话框。
（3）在框架属性对话框中，可进行以下设置。
·名称。
定义框架的名字。
·初始网页。
设置该框架的初始网页。
·框架大小。
设置框架的宽度和高度。
通常以像素为单位给出高度/宽度的绝对值，或者以浏览器窗口大小的百分比设置高度/宽度。
·边距。
设置框架内的文本距离框架边缘的空白区的大小。
·选项。
设置框架的可选选项。
若选中“在浏览器中调整大小”复选框，表示当浏览器打开这个框架网页时，客户可以改变框架的尺寸。
“显示滚动条”下拉列表设置是否让框架显示滚动条，有3种选择：
“在需要时”表示根据需要显示，即当显示的内容显示不下时，才会出现滚动条：
“从不”表示不显示滚动条；“始终”表示始终显示滚动条。
说明：
要改变框架的尺寸，最方便的是使用鼠标拖动的方法，即把鼠标指针移到框架的边框上，等指针形状变成双向箭头时拖动鼠标。
2.设置框架页属性
其操作步骤如下：
（1）在“框架属性”对话框中单击“框架网页”按钮，弹出“网页属性”对话框。
（2）在框架“页面属性”对话框的“框架”选项卡中，可进行以下的设置：
·框架间距。
用于设置框架之间的距离。
·显示边框。
选中此复选框，表示框架之间有边界；取消选中该项，“框架空间”中的数值将自动为0，表示框架之间没有边界。
说明：
有时取消框加之间的边框，能够保持网页的完整性使用户在浏览时感觉不到框架的存在。
Ⅲ、学生练习
Ⅳ、巡回指导
Ⅴ、测试
Ⅵ、评讲
Ⅶ、布置作业：
补充习题
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
HTML语言基本格式
HTML文件均为标记符开始，以标记符结束。
和标记符之间的内容描述页面的头部信息,例如页面标题,关键词等信息。
在
和标记符之间的内容即为页面的主体内容。
基本格式如下：
页面头部信息
页面主体内容
页面头部信息
页面主体内容
HTML语言常用标记
●〈hi〉标题标记
标记符用于定义段落标题的大小级数。
最大的标题级数是
，最小的标题级数是。
使用标记符的align的属性可控制文字的对齐方式，属性值可以是left（左对齐）、center（居中对齐）或者right（右对齐）。
示例：
我的花店欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
欢迎您访问我的花店！
●
段落标记
标记符用于划分段落，控制文本的位置。
是成对标记符，用于定义内容从新的一行开始，并与上段之间有一个空行，其align的属性定义新开始的一行内容在页面中的对齐，属性值可以是left（左对齐）、center（居中对齐）或者right（右对齐）。
示例：
我的花店
我的花店
欢迎您访问我的花店！
花可以传情，可表达思念之情，亲情，感恩的心情，衷心的祝福！
居室之内，放上一束瓶插花，可增添幽雅、清静、舒适之感。
祝愿进入我的花店的朋友天天有好心情！
版权归“我的花店”所有
Ⅲ、学生练习
Ⅳ、巡回指导
Ⅴ、测试
Ⅵ、评讲
Ⅶ、布置作业：
补充习题
Ⅰ、组织教学：
1.检查学生应到实到人数
2.检查机房电脑是否正常使用
3.检查调试软件
Ⅱ、示范指导
●
换行标记
标记符用于定义文本从新的一行显示，它不产生一个空行，但连续多个的
标记符可以产生多个空行的效果。
标记符是非成对标记符。
注意与段落标记符
的区别。
换行标记，将示例2中相应段落中的段落标记
替换为换行标记
,HTML语句如下，保存后的浏览效果如图。
注意段落标记
和换行标记
预览效果的不同。
示例：
我的花店
我的花店
欢迎您访问我的花店！
花可以传情，可表达思念之情，亲情，感恩的心情，衷心的祝福！
居室之内，放上一束瓶插花，可增添幽雅、清静、舒适之感。
祝愿进入我的花店的朋友天天有好心情！
版权归“我的花店”所有
●列表标记
列表标记包括“项目列表”标记
升级会员 