电子商务网页制作专业公开课教案
笔记本共享无线上网-出国考察报告
20级电子商务网页制作专业课教案
教学课题
教学课型与课时
专业课基础课 课时
网页的建立与预览
1 教学班级 20电子商务班
同学们创建好一个站点，还准备好了网站需要的各种素材，就准备开始创建网页
教学情境设计
文档了。老师网页新建好后，不要急着增加内容，我们先要学会保存网页、预览网页
设置网页属性等操作
才可以。
教 1、会创建HTML网页文档。
学 知识 2、会正确保存网页。
目 教学点 3、在DW中预览网页。
标 4、会设置网页的页面属性。
与
能力 1. 培养学生拓展思维和设计创造能力。
要
培养点 2.
培养学生动手操作能力。
求
1、媒体与实操教学：借助多媒体手段，进行课堂理论+上机实操教学。
教学方法与手段 2
、启发式教学：教学活动关注的重点从结果转向过程，激发设计思维、师生互动、增
强学生学习的实操性
、主动性、积极性和创造性。
教
学
重
点
与
难
点
1、网页文件操作。
2、修改网页属性。
3、快捷键功能掌握。
4、文件命名要求。
1、新建网页文件方法或快捷键掌握。
2、对网页保存方法或快捷键掌握。
3、对修改网页属性命令或快捷键掌握。
1、本堂课授课学生为20级电子商务中职一年级学生，专业基础零基础，但学生对学
习DW软件设计或网页设计充满好奇。
1、采用线上线下+上机实操混合教学模式，通过线上
教师授课、演示操作步骤，线下
教师进行上机操作辅导
2、采用提问与学生上讲台操作学习模式进行课堂互动。
1、网页文件操作：
（1）、新建网页文件可以使用三种方法，方便快捷（CTRL+N）.
（2）、文件名通常使用小写英文字母，不使用空格、特殊符号，不允许使用中文。
文件命名常用四种方式命名：汉语拼音，汉语拼音缩写，英文，英文缩写。
切忌用默认的untitled-1、无标题命名文件
（3）、保存与另存为快捷键（CTRL++S，CTRL+shift+S）
2、修改网页属性六个类别：
外观（CSS）、外观（HTML）、链接（CSS）、标题（CSS）、标题编码、跟踪图像
3、网页预览（F12)
重点
难点
学情分析
学法引导
课后总结
教学组织过程
一、上讲回顾。
二、授课新知。
教
师 活 动 内 容
一、上讲回顾：
提问学生上节课重点学习那些内容：创建站点
、打开站点、
编辑站点、复制站点、删除站点、导入与导出站点。
二、授课内容：
1、网页文件操作：
（1）、新建网页文件可以使用三种方法：
方法一、在DW起始页的“新建”栏中单击“HTML”选项，即可新
建一个名为“Untitled-1”的空白网页，如图3-8所示。
方法二：打开“文件”菜单，选择“新建”命令将弹出“新建文
档”对话框，选择“空白页”中的“HTML”项，在“布
局”中选择“无”，单击“创建”按钮即可新建一个空白
网页。如图3-9所示。
技巧快捷键：(CTRL+N)
方法三：在文件面板中的站点目录上单击右键，在弹出的快捷菜
单中选择“新建文件”，将新建一个名为“”
的文件，需要重新命名。如图3-10所示。举例说明（输
入)
重点知识点拓展：
文件名通常使用小写英文字母，不使用空格、特殊符号，不
允许使用中文！
文件
命名常用四种方式命名：汉语拼音，汉语拼音缩写，英
文，英文缩写，以方便通过文件名直观的了解页面
内容。
切忌用默认的untitled-1、untitled-2等方式命名文件，
（2）、保存网页：
前面三种方法新建网页没有保存，现在我们将网页保存在
站点中。
第一步：打开“文件”菜单栏，单击“保存”快捷键（CTRL+S)
点击保存。如果有文件从名怎么做。
第二步：打开“文件”菜单栏，单击“另存为”快捷键（CTRL
+shift+S)
如图3-11所示。
学生活动内容
学生回答问题
时间
2分钟
1、新建网页有几种方法？
2、新建网页快捷键？
3、文件命名通常使用与不
能使用什么？
4、文件常用那四种命名？
7分钟
5、“保存”与“另存为”快
捷键是什么？
6、删除“是与否”含义？
7、谈一谈，还有哪些软件的
“保存与另存为”DW软件一
样？
（3）、关闭网页：
单击菜单栏下网页标题旁的“关闭”按钮既可该网页如图
3-12所示.
（4）、删除网页：
选择要删除网页，按（Delete)键，弹出提示框，是与否，单
击“是”表示删除，单击“否”表示该文件没有删除。如图
3-12所示.
2、修改网页属性：
在该对话框中可以设置网页的各种属性，如:页面
文字的设置、
页面背景的设置、页面边距的设置、链接文字的设置以及标题编码
的设置等，根据
属性分类不同，分为六个类别：
技巧快捷键：(CTRL+N)
（1）、外观（CSS):
在“外观（CSS）”分类中，可以设置如下属性，如图3-14所示
页面字体：设置页面字体格式。可以快速定义整张页面的字体。
大小：文字的大小，默认单位为像素。
文本颜色：文字的颜色。
背景颜色：页面背景颜色。
背景图像：背景图片的位置链接。
重复：背景图片的显示是否重复。
1、修改网页属性主要有
左右上下边距：页面距离左右上下的距离。
那六个类别，它们分
(2)、外观（HTML）:
别是什么含义？
在“外观（HTML）”分类中，可以设置如下属性：如图3-15所示
2、打开页面属性快捷键
背景图像：背景图片的位置链接。 10分钟
是多少？
背景：页面背景颜色。
3、通过DW有效功能可以
文本：文本的颜色。
方便定位那些网页元
已访问链接：已经访问过的文本链接的颜色。
素位置？
链接颜色：文本链接的颜色。
活动链接颜色：文本活动链接的颜色。
边距和边距高度：距离页面左、上的距离,高度单位默认为像素。
(3)、链接（CSS）:
在“链接（CSS）”分类中，可以设置如下属性：如图3-16所示
链接字体：链接文字的字体格式和加粗倾斜属性。
大小：字体的大小，默认单位为像素。
链接颜色：文本链接的颜色
变换图像链接颜色：变换图像链接时文本的颜色
已访问链接颜色：已经访问过的文本链接的颜色。
活动链接颜色：文本活动链接的颜色。
下滑线样式：链接时是否显示下划线。
(4)、标题（CSS）:
在“（标题CSS）”分类中，可以设置如下属性：如图3-17所示
标题字体的格式、大小和颜色，设置标题1至6个，在字体属
性面板
中直接指定文字为某号标题后，该文字直接套用该标题的属
性。
（5）、标题编码:如图3-18所示
标题和编码：对于任何一张页面来说，标题都非常重要
，它能
在浏览者浏览该网页的时候了解该网页的内容，如果页面没有设置
标题，则默认标题名为
“无标题文档”，而不能直接的表达出该页面
的内容，因此我们建议每个页面都应该设置标题。
（6）、跟踪图像如图3-19所示
在“标题编码”分类中，可以设置网页的跟踪图像
点滴知识点：
通过DW有效功能可以方便定位“位文字、图像、表格、层等
网页元素位置。
3、网页预览：
网页制作完成后要在浏览器中预览最终效果，在文档工具栏中
单击预览按钮，选择预览使用的浏览器即可打开浏览器预览网页。
快捷键:F12
4、课堂上机操作：
5、课堂总结：
（1）、新建网页有几种方法？
（2）、新建网页快捷键是多少？
（3）、文件命名通常使用与不能使用什么？
（4）、文件常用那四种命名方式？
（5）、修改网页属性主要有那六个类别？
6、课后作业：
（1）、文件命名通常使用与不能使用什么？
（2）、文件常用那四种命名？
（3）、上机实操分钟
课后反思
16分钟
4分钟
1分钟
1、网页预览快捷键是多少
1、上机操作
2、学生上讲台演示
1、学生总结本节课收获
1、作业布置