神龙峡网站规划与建设教案王国维读书三境界

6551次浏览 |698点赞 | 769评论 | 2020-12-02 00:58 更新

来源：互联网

最佳文档

本文由作者推荐

毕业答辩ppt致谢-qqdenglu

2020年12月2日发(作者：臧玉琰)

名师精编精品教案
《网站规划与建设》教案
项目单元 1 简单网页制作
教学目标
1.掌握Dreamweaver MX启动和退出的方法；
2.熟悉Dreamweaver MX的网页编辑器、站点管理器和各种使用面板；
3.掌握本地站点的使用方法；
4.熟悉制作一个简单网页的过程。
重点难点
1.如何建立一个本地站点；
2.在站点中对文件进行剪切、粘贴、复制、删除、重命名操作；
教学方法
案例驱动，讲练结合。通过对Dreamweaver MX软件的初识，使我们掌握该软件的基本基本
启动、编辑和退
出；通过对一个简单网页的制作过程的描述，使我们了解建立一个网页的最基本的方法。
教学过程
一、问题引出
Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理
于一体的软件，
不仅可以轻松设计网站前台的页面，而且也可以方便的实现网站后台的各种复杂功能。一个
网站主页可以
看成是一系列相关文档的集合，浏览者通过浏览器程序从一个页面跳转到另外一个网页，从
而完成对整个
网站的主页的访问。那么究竟该如何创建一个最基本的网页呢？我们通过一个例子一起来研
究一下网页的
基本制作方法。
二、解决方法
1.用不同的方法启动和退出Dreamweaver MX。
2.用快件捷键打开和关闭面板、【属性】面板以及【代码】浮动面板组。
3.建立网站的基本站点。
4.制作简单网页。
三、完成过程
1.启动和退出Dreamweaver MX。
选择Windows资源管理器的【开始】︱【程序】︱Macromedia︱Dreamweaver MX命令，
或单击Windows桌
面上Dreamweaver MX的快捷图标，即可启动Dreamweaver MX。
2.选择【站点】︱【新建站点】命令，选择【高级】选项卡，在【站点名称】文本框中输入
“我的站点” 。
电子商务网站建设与维护
3.单击【本地根文件夹】文本框右边的图标，将当前盘的文件夹 My site 设置为本地站点的
根文件夹，并
确认。
4.在Dreamweaver MX网页编辑器中新建一个页面。选择【修改】︱【页面属性】命令，打
开【页面属性】

名师精编精品教案
对话框，在【页面属性】对话框中作相应设置。
5.将插入背景图片的网页用为名保存在本地站点的根文件夹中，层中插入图片操
作。
6.插入表格操作，表格中输入文本内容。
7.网页编辑完毕后按F12键预览，然后用为名保存在My site文件夹中。
常见错误
1.在网页设计中，不要用中文作为文件名或文件夹名；
2.有的网站网页文件命名时区分字母大小写，列入和表示不同的文
件；
3.每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的
名字一般可命
名为；
4.首页文件应该放在站点的根文件夹下；
5.网页上进行的所有的插入对象，都是相对路径的对象，这样可以避免很多犹豫路径问题找
不到对象的错
误。
问题讨论
1.什么是本地站点？什么是相对路径？什么是绝对路径？
2.如何正确设置网页中元素的路径？如何避免浏览网页时缺少图片的错误出现？
3.在本地站点下新建文件夹、复制和移动文件的方法有哪几种？
知识回顾
eaver MX的启动方式和工作环境；本地站点的创建和设置。
2.网页文件的创建与保存、页面属性设置与基本编辑方法；创建、编辑一个简单网页的过程。 3.本地网站设置、网页的创建和保存的方法、网页对象文本与图像的插入、页面属性设置、
文字的属性设
置、图像的属性设置、层的简单应用、字体列表的编辑。

项目单元 2 制作网页超链接
教学目标
1.掌握文本插入的方法；
2.掌握网页文档的基本编辑方法；
3.掌握HTML样式的创建和使用方法；
4.掌握文本链接、图像链接、图像映射链接、电子邮件链接和锚点链接的方法；
5.熟悉导航条和跳转菜单的创建和使用方法。
重点难点
1.网页文档常用的格式化方法；
2.在网页中插入对象的方法；
3.创建各种超链接的方法。
教学方法
案例驱动，讲练结合。在项目单元 1 的基础上对网页进行编辑，对文档进行格式化在网页
中插入各种对象
以及建立各种超链接。
教学过程
一、问题引出

名师精编精品教案
网页中文字是最主要、最基本的页面元素之一，它占用的存储空间较小，与耗费网络带宽较
多的图片和多
媒体相比有无法比拟的优势，而一个网页要和网站真正联系起来，超链接是不可缺少的，本
项目通过在原
有基本网页的基础上增加相应的文档以及超链接的方式来进一步美化网页，达到应有的功
能。
二、解决方法
1.网页文档的基本操作；
2.网页文档的格式化操作；
3.图片的编辑操作；
4.创建超链接。
三、完成过程
1.在网页中插入各种元素（水平线、日期、Flash按钮、Flash文字和各种小Java Applet程序）。
打开网页编辑器窗口，选择【修改】︱【页面属性】命令，在【页面属性】对话框中
设置背景图片为，
并将网页保存在 My site 文件夹中；网页的合适位置上插入，单击【插入】面板的【常用】
选项卡的【水
平线】按钮，或选择【插入】︱【水平线】命令，可在网页中插入1条水平分隔线。
2.在网页中插入文本并对文本进行拼写检查。
电子商务网站建设与维护
在网页的顶部区域合适的位置上输入标题文字“人生的伴侣·知识的源泉” ，并选中这些
文字。按Ctrl+F11
快捷键，打开HTML面板，选择样式【标题1】并作用于标题文字“人生的伴侣·知识的
源泉” 。
3.建立网站相册并利用外部编辑器编辑图像。
4.创建导航条。
在网页的中部区域合适的位置插入光标，选择菜单【插入】︱【交互式图像】︱【导航条】
命令，或者在
【插入】浮动面板的【常用】选项卡中，单击【导航条】按钮，此时在网页编辑窗口中，
会弹出【插入导
航条】对话框。
5.设置导航条中的【状态图像】、【鼠标经过图像】、【按下图像】、【按下时经过图像】。
在【项目名称】文本框中设置第 1 个按钮的名称为 a;在下面按钮 4 个状态的文本框中分
别输入 ch04gif
文件夹中的、、、 4 个文件的路径和名称;在【按下时，前往的 URL】
文本框
中输入该按钮链接的对象名称和路径。选中【预先载入图像】和【使用表格】选项；选择【插
入】下拉列
表框中的水平方向设置导航条。
6. 插入层，添加图片。
在网页合适的位置上插入3个用于图片定位的层，并在不同的层中插入ch04文件夹中的图
片文件t4_.gif、
t4_、t4_。
7. 在站点管理器中编辑超链接，创建锚点链接和电子邮件链接。

名师精编精品教案
在网页的底部区域插入带图片的层，选中图片，在图片【属性】面板的【链接】文
本框中，输入
mailto：+，建立电子邮件链接。
8.保存文件以为名，保存在my site文件夹中。
常见错误
1.在编辑网页中文字时，常常要在文档中插入空格，插入空格的操作方法有如下4种。
● 将汉字输入方式设置为全角方式，按空格键可输入空格。
● 用与页面背景颜色相同的字符来完成插入空格。
● 在属性面板中，选择【格式】下拉列表中的【预先格式化的】选项，就可以在编辑网页
时输入空格。
● 按Shift+Ctrl+Space键插入空格。每按一次快捷键可插入一个空格。
2.在网页文字编辑时，文本的换行有如下几种方法。
● 自动换行：在输入文字时，一行长度超过了文档窗口的显示范围，后面输入的文字则
自动换到下一行。
自动换行的好处在于不管浏览器的窗口大小，网页文字都将按照窗口大小自动换行。
● 按Enter键换行：输入文字后按Enter键换行，则文字成段，上下段之间空一行。
● 按Shift+Enter键换行：输入文字后按Shift+Enter键换行，则文字分行不成段，上下
行之间无空行。
● 用特殊字符换行：单击【插入】面板的【文本】标签，在【文本】选项卡中单击按钮，
可实现与按
Shift+Enter键相同的换行效果。
问题讨论
1.建立超链接的方法有哪几种？请归纳它们的作用和优缺点。
2.网页的锚点链接的方式有几种？命名锚点在挡墙网页文档中、在当前文件夹的其他网页文
档中、在其他
3.网站的某个网页文档中的超链接的方法分别是什么？
4.如何在站点管理器中创建、修改和删除超链接？
5.网页中所应用的图像的格式主要有哪几种？图像的主要属性有哪些？如何编辑修改插入
在网页中的图
片？
知识回顾
eaver MX 的文档格式化的方法、在网页中插入各种对象以及建立各种超链接的方
法。
2.创建、编辑HTML样式的方法、利用HTML标记及HTML样式格式化文档的方法；网
页各种对象的插入方法，
超链接的基本概念及其各种应用。
标记、HTML 样式、超链接、锚点、导航条、跳转菜单、电子邮件链接、映射图链
接、Flash按钮和
电子商务网站建设与维护
Flash文字的插入、Rollover翻转图的插入、Java Applet程序的插入、第三方插件的插入等。

项目单元 3 制作框架式网页
教学目标
1.掌握表格创建、选取、编辑和格式化的方法；

名师精编精品教案
2.掌握布局表格和布局单元格的使用方法；
3.掌握层的基本操作方法；
4.熟悉层的桥套、叠放次序更改和可见性设置等操作；
5.掌握框架结构网页的创建和编辑方法。
重点难点
1.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法以及各种属性设置；
2.在表格、层、框架中输入各种网页元素的方法；
3.布局表格和单元格的使用、框架中网页的链接和显示方法等。
教学方法
案例驱动，讲练结合。本项目通过对三种网页定位技术的实际综合性运用，让学生掌握如何
将网页的版面
变得更加友好，结构更加清晰。
教学过程
一、问题引出
在我们浏览一些成功网站的网页时都有这样的感受，该网站的网页布局合理、层次清晰适合
每位访问者在整个网站的多个页面之间进行访问。要做到这一点必须要对整个网站的结构和布局有一个详
细的规划，然
后利用各种定位技术来帮助完成。比如说要创建跨平台、跨浏览器的网页用表格布局是叫理想的方案；作
为层能够精确对页面元素进行定位，设计者可以控制多个层的叠放次序，显示或隐藏层，并
且层与时间轴
的结合使用，可以很方便的设计出动态页面效果，层与行为配合使用，还可以很方便的制作
出滚动字幕、
下拉式菜单等页面效果；而我们使用框架技术可以将制作的网页页面分割成上下或左右结构
的框架，把单
页面拓展成多页面，满足浏览者在一个页面内迅速浏览更多内容的需求。可见网页的定位技
术在整个网页
的布局与设计当中是非常重要的。
二、解决方法
1.插入框架将页面划分成相对独立的几个区域；
2.对每个独立的区域进行属性设置；
电子商务网站建设与维护
3.在其中一个区域插入层以及表格以定位；
4.控制超链接页面在不同的框架中显示
三、完成过程
1.选择框架进行定位操作
选择【插入】︱【框架】︱【上方及左侧嵌套】命令，在页面中插入框架，并调整到合适的
位置。
2.对每个独立区域进行属性设置
选择【修改】︱【页面属性】命令，分别给leftframe、mainframe设置背景颜色，单击【插
入】面板组的
【常用】选项卡的【Flash】按钮，在框架topframe的合适位置上插入用F lash制作的动画文
件。

名师精编精品教案
3.对leftframe通过表格和层进行定位
在 leftframe 中插入 120*160 像素的层，在层中插入宽度为 120 像素的 4 行 1 列的表
格，并将图片文件
、、、插入表格。
4.选中【现代文学】按钮，在图片【属性】面板的【链接】文本中框中设置链接的对象为 My
site 文件夹
中的，在【目标】下拉列表框中选择链接对象显示的框架为mainframe。
5.用同样的方法分别选中【生活艺术】、【文化教育】、【科学技术】三个按钮，为它们建立名
为、
、的链接，并设置链接对象显示的框架为。
6.选择【文件】︱【保存全部框架】命令，用保存框架集文件。
常见错误
1.注意单元格与表格两种【属性】面板的区别。
2.在对对象进行选择的时候一定要注意选择的对象是什么，是层是单元格还是单元格中的图
片，对不同的
对象进行的超链接操作的效果是不一样的，我们可以在选择完对象后查看下方显示的【属性】
面板来进行
判断。
3.在使用框架进行定位之后，页面保存的时候首先保存的是整个框架集文件页面，其次是各
个分页面，注
意保存顺序，以及保存文件的命名。
问题讨论
1.表格的属性面板和单元格的属性面板的主要区别在哪里？
2.比较【标准视图】和【布局视图】两种模式的不同之处。如何连续画出多个【布局表格】？
当切换到【标
准模式】后，【布局表格】和普通表格一样么？
3.框架和框架集的主要区别和各自的作用是什么？Dreamweaver MX中预设了多少种框架？
4.如何控制超链接页面在不同的框架中显示？
知识回顾
eaver MX中的3种页面定位工具——表格、层和框架，重点介绍了表格、层和框
架在设计网页时
的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。
2.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架
集的各种属性
设置。
3.在表格、层和框架中输入各种网页元素的方法。
4.布局表格和布局单元格的应用、表格样式化、外部数据导入表格。
5.层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。

项目单元 4 利用表单制作网上调查问卷
教学目标
掌握创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表框等
多种表单域的方法;
掌握设置各种表单域属性的方法，以及用 E-mail 方式递交表单等知识。

名师精编精品教案
重点难点
各种表单域的使用及其属性的设置
教学方法
案例驱动，讲练结合：通过网上书店问卷调查的设计，掌握表单域的使用和属性设置，
以及相关网页的规划。
教学过程
一．问题引出
在前面的单元中介绍了网页制作所需的布局及效果制作内容，我们掌握了基本的网页制
作技巧，本单元我们将通过设计网上调查问卷这种网页设计者与浏览者进行交流的最有效
手
段，学会在实际工作中对表单的应用。
二．解决方法
1.用 Dreamweaver MX生成表单的页面
电子商务网站建设与维护
2. 服务器端应用程序或客户端脚本的使用
三．完成过程
1.新建网页文件，并选择【修改】 | 【页面属性】命令，设置页面背景图像。
2.单击【插入】浮动面板组的【表单】选项卡中的【创建表单】按钮。
3.在表单中插入用于定位的表格，表格为 12 行 1 列，780×460 像素，表格边框颜色为
#993300。
4.在第 1 行输入标题文字“网上书店服务调查”，字体为“红色”，背景颜色为#FFFFCC。
5.在第 2 行输入文字“尊敬的顾客：您好!为了更好地为您服务，我们非常重视您在购物过
程中的感受，您的意见与建议是我们不断进步的源泉，谢谢您对我们工作的支持，欢迎您参
与我们的网上书店服务调查。”
6.在第 4 行输入单选按钮组的标识文字：“1. 请对本书店在满足客户需求的以下方面进行
评价： ”。设背景颜色为： #CCFFCC。
7.在表格的第 5 行插入 5×6 的嵌套表格。并在【属性】面板中将嵌套表格的【间距】和
【边
框】设为 0，设置嵌套表格第1 列的宽度为 280像素，其他 5 列的每列宽度设为 100 像
素。
8.按题目要求输入单选按钮组的标识文字。并分别将光标插入到嵌套表格的单元格中，单击
【表单】选项卡中的【单选】按钮，创建 20 个单选按钮。
9.在第 6 行输入复选框的标识文字： “2.您经常关注本网上书店的哪些栏目?”。为醒目起
见，可设置背景颜色为： #99FFFF。
10.将光标插入到第 7 行的合适位置上，单击【表单】选项卡中的【复选框】按钮，创建表
单的复选框，并输入这个复选框的标识文字“新书速递”。
11.用同样的方法分别创建标识文字为“精品系列”、“科学技术”、“现代文学”、“生
活艺术”、“文化教育”、“电子音像”、“政治法律”、“网友书评”的复选框。
12.在第 8 行输入多行文本框的标识文字： “3. 如果您有任何好的建议, 能够增强我们之
间的合作关系, 请告诉我们。”。为醒目起见，可设置背景颜色为： #BBEECC。
13.将光标插入到第 9 行的合适位置上，单击【表单】选项卡中的【文本字段】按钮，创建
表单的文本框，并在文本框的【属性】面板中设置：【字符宽度】为 110，【行数】为 8，
【类型】为多行，【初始值】为“请您提建议： ”，【换行】为默认。
14.在第 10、11 行中分别创建“4.您的姓名和性别： ”、“5.邮购定单号： ”、“6.您的

名师精编精品教案
联系方法： ”单行文本框和单选按钮，操作过程不再赘述。
15.在表单合适的位置上输入下拉式列表的标识文字“7.您的职业： ”。
16.单击【表单】选项卡中的【列表菜单】按钮，此时表单中显示一个很小的下拉式列表框。
17.选中新建的下拉式列表框，在下拉式列表框的【属性】面板中设置【列表菜单】、【类
型】、
【列表值】、【初始化时选定】等有关参数。
18.用同样的方法创建标识文字为“8.您所在的城市： ”的下拉列表框。
19.个按钮。
20.单击第 1个按钮，在【属性】面板的【标签】文本框中输入“提交”，然后选中【动作】
区域中【提交表单】单选按钮，将其设置为【提交】按钮。
21.单击第 2个按钮，在【属性】面板的【标签】文本框中输入“重置”，然后选中【动作】
区域中【重置表单】单选按钮，将其设置为【复位】按钮。
22.双击表单红色虚线框，在表单的【属性】面板中设置【表单名称】为“表单实例”；【方
法】为 POST；在【动作】文本框中输入“mailto： + 收件人的电子邮件地址”。表示浏
览网页时填写的表单内容将以电子邮件的方式发送给服务器。
边讲边练:完成用 E-mail 方式递交表单
23.预览网页后，保存文件。
电子商务网站建设与维护
知识回顾
1.表格的创建与使用
2.页面背景和文本的格式化
常见错误
1.表单对象命名重复；
2.表单域没有放在统一的表格中；
3.表单属性设置错误。
问题与讨论
1.表单的主要作用是什么？标准的表单域有哪几种？它们的功能分别是什么？
2.表单中【提交表单】按钮和【重设表单】按钮的作用是什么？如何添加这两个按钮？
3.如何利用 E-mail 发送表单数据？
4.创建表单后，为什么还要创建表单处理程序？如何创建这种程序？
学生作业
1.为某网上商店设计一个在线意见反馈表单。
2.制作一个用 E-mail发送数据的表单。
课堂总结
通过本单元的学习我们重点掌握表单技术的使用。表单（Form）技术可以实现浏览者与
Internet 服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表
单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。无
论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，
而表单就是网站获取用户信息的最重要的手段之一。

项目单元 5 用 ASP 制作网上聊天室
教学目标
熟悉静态页面、简单动态页面、复杂动态页面的处理流程；
掌握 Application 对象、Request 对象和 Session 对象的使用；

名师精编精品教案
掌握利用表单传递数据；
掌握简单程序的编写。
重点难点
SQL 语句的使用；ASP对象的使用。
教学方法
案例驱动，讲练结合：通过网上聊天室的设计过程讲解表单传递数据的实现、ASP 对象
的应用。
教学过程
一．问题引出
运用前面章节所述的方法，已经可以建立一个完整的网站，并为访问者提供静态的信息。
但是，这样一个网站只能提供信息，其性质等同于一个出版物，不能称为一个真正的 Web
应用，这样的静态网站是不能用于电子商务活动的，电子商务活动要求网站提供与使用者
交
互的手段。本单元我们将通过网上聊天室表单传递数据功能的实现，学会ASP 对象的使用。
电子商务网站建设与维护
二．解决方法
1.用 Dreamweaver MX生成网上聊天室的相关页面
2.表单的应用
对象的使用
三．完成过程
1.选择主菜单中的【文件】 | 【新建】命令，在弹出【新建文档】对话框中单击【常规】
选项卡。在【类别】框中选择【动态页】，在右边出现的【动态页】类型选项中，选择 ASP
VBScript，单击【创建】按钮，这样就会创建一个新的支持采用 VBScript 语言的 ASP 技
术
的无标题文档。
2.根据规划布局建立网页，表单域的属性和说明如表所示。
边讲边练：让学生根据聊天室网页布局及功能，设计表单域属性。
3.选中表单，在表单的【属性】面板中设置表单的属性。
4.保存网页（可命名为）。
5.新建动态页面，设置页面背景颜色为#99FFCC。
6.在网页上居中输入标题文字“下面显示的是您的个人信息” ，并设置：字体为楷体，大
小
为 5 号，颜色为#993300。
7.单击工具栏中【显示代码视图】按钮<>，设置程序代码如下所示，在与之
间加入了粗斜体表示的代码。
`以下粗斜体字母为添加的代码

<%
Dim User_Name,Psaaword,Sex,Love,Idea
User_Name=(“txtUserName”)
Psaaword=(“Psaaword”)
Sex=(“radSex”)
Love=(“chkLove”)
Idea=(“txtIdea”)

名师精编精品教案
%>

姓名：<%=User_Name%>

密码：<%=Psaaword%>

性别：<%=Sex%>

爱好：<%=Love%>

看法：<%=Idea%>

8.保存网页。并在上传测试服务器后浏览网页。
电子商务网站建设与维护
9.创建含有表单域的动态页面。其中文本域为 70 个字符宽、3行，按钮为 “提交” ，
页面背景颜色为#FFFFCC。
10.单击工具栏【显示代码视图】按钮<>,在与之后加入如下所示的粗斜体的
代码:
<%
If trim(request(“txtTalk”))<>””then

Applic ation(“show”)=request(“txtTalk”)&”
”&Applicatio n(“show”)
`以上这句代码的意思是把新的发言内容加在旧的发言内容前，然后再保存回到
Application(“show”)中，中间加的
的意思为将每一次发言换行显示。

end if
Application(“show”)
%>
边讲边练：让学生掌握代码的编写
11.保存文件。
知识回顾
1.表格的创建与使用
2.页面背景和文本的格式化
3. Web 应用程序的一般处理流程：
（1）浏览器发出对动态页面的请求；
（2） Web 服务器找到该页面，传给应用服务器；
（3）应用服务器扫描页面，执行代码；
（4）遇外部资源访问代码，应用服务器发送资源访问命令给资源服务器；
（5）资源服务器执行资源访问命令，返回结果数据集；
（6）应用服务器执行余下的代码，插入数据到结果页面；
（7）应用服务器把结果页面返回给 Web 服务器；
（8） Web 服务器发回该结果页面给浏览器。
4.当 VBScript 代码放在服务器端执行时有 2 种语法格式。
语法格式 1：
<％ VBScript 代码％>
语法格式 2：

分类导航 :

实用模版

基础教育

互联网

生活娱乐

体育资讯

数字货币

首页 > 基础教育 >

网站规划与建设教案

玛丽莲梦兔

549次浏览

2020年12月02日 00:58

最佳经验

本文由作者推荐

毕业答辩ppt致谢-qqdenglu
2020年12月2日发(作者：臧玉琰)

名师精编精品教案
《网站规划与建设》教案
项目单元 1 简单网页制作
教学目标
1.掌握Dreamweaver MX启动和退出的方法；
2.熟悉Dreamweaver MX的网页编辑器、站点管理器和各种使用面板；
3.掌握本地站点的使用方法；
4.熟悉制作一个简单网页的过程。
重点难点
1.如何建立一个本地站点；
2.在站点中对文件进行剪切、粘贴、复制、删除、重命名操作；
教学方法
案例驱动，讲练结合。通过对Dreamweaver MX软件的初识，使我们掌握该软件的基本基本
启动、编辑和退
出；通过对一个简单网页的制作过程的描述，使我们了解建立一个网页的最基本的方法。
教学过程
一、问题引出
Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理
于一体的软件，
不仅可以轻松设计网站前台的页面，而且也可以方便的实现网站后台的各种复杂功能。一个
网站主页可以
看成是一系列相关文档的集合，浏览者通过浏览器程序从一个页面跳转到另外一个网页，从
而完成对整个
网站的主页的访问。那么究竟该如何创建一个最基本的网页呢？我们通过一个例子一起来研
究一下网页的
基本制作方法。
二、解决方法
1.用不同的方法启动和退出Dreamweaver MX。
2.用快件捷键打开和关闭面板、【属性】面板以及【代码】浮动面板组。
3.建立网站的基本站点。
4.制作简单网页。
三、完成过程
1.启动和退出Dreamweaver MX。
选择Windows资源管理器的【开始】︱【程序】︱Macromedia︱Dreamweaver MX命令，
或单击Windows桌
面上Dreamweaver MX的快捷图标，即可启动Dreamweaver MX。
2.选择【站点】︱【新建站点】命令，选择【高级】选项卡，在【站点名称】文本框中输入
“我的站点” 。
电子商务网站建设与维护
3.单击【本地根文件夹】文本框右边的图标，将当前盘的文件夹 My site 设置为本地站点的
根文件夹，并
确认。
4.在Dreamweaver MX网页编辑器中新建一个页面。选择【修改】︱【页面属性】命令，打
开【页面属性】

名师精编精品教案
对话框，在【页面属性】对话框中作相应设置。
5.将插入背景图片的网页用为名保存在本地站点的根文件夹中，层中插入图片操
作。
6.插入表格操作，表格中输入文本内容。
7.网页编辑完毕后按F12键预览，然后用为名保存在My site文件夹中。
常见错误
1.在网页设计中，不要用中文作为文件名或文件夹名；
2.有的网站网页文件命名时区分字母大小写，列入和表示不同的文
件；
3.每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的
名字一般可命
名为；
4.首页文件应该放在站点的根文件夹下；
5.网页上进行的所有的插入对象，都是相对路径的对象，这样可以避免很多犹豫路径问题找
不到对象的错
误。
问题讨论
1.什么是本地站点？什么是相对路径？什么是绝对路径？
2.如何正确设置网页中元素的路径？如何避免浏览网页时缺少图片的错误出现？
3.在本地站点下新建文件夹、复制和移动文件的方法有哪几种？
知识回顾
eaver MX的启动方式和工作环境；本地站点的创建和设置。
2.网页文件的创建与保存、页面属性设置与基本编辑方法；创建、编辑一个简单网页的过程。 3.本地网站设置、网页的创建和保存的方法、网页对象文本与图像的插入、页面属性设置、
文字的属性设
置、图像的属性设置、层的简单应用、字体列表的编辑。

项目单元 2 制作网页超链接
教学目标
1.掌握文本插入的方法；
2.掌握网页文档的基本编辑方法；
3.掌握HTML样式的创建和使用方法；
4.掌握文本链接、图像链接、图像映射链接、电子邮件链接和锚点链接的方法；
5.熟悉导航条和跳转菜单的创建和使用方法。
重点难点
1.网页文档常用的格式化方法；
2.在网页中插入对象的方法；
3.创建各种超链接的方法。
教学方法
案例驱动，讲练结合。在项目单元 1 的基础上对网页进行编辑，对文档进行格式化在网页
中插入各种对象
以及建立各种超链接。
教学过程
一、问题引出

名师精编精品教案
网页中文字是最主要、最基本的页面元素之一，它占用的存储空间较小，与耗费网络带宽较
多的图片和多
媒体相比有无法比拟的优势，而一个网页要和网站真正联系起来，超链接是不可缺少的，本
项目通过在原
有基本网页的基础上增加相应的文档以及超链接的方式来进一步美化网页，达到应有的功
能。
二、解决方法
1.网页文档的基本操作；
2.网页文档的格式化操作；
3.图片的编辑操作；
4.创建超链接。
三、完成过程
1.在网页中插入各种元素（水平线、日期、Flash按钮、Flash文字和各种小Java Applet程序）。
打开网页编辑器窗口，选择【修改】︱【页面属性】命令，在【页面属性】对话框中
设置背景图片为，
并将网页保存在 My site 文件夹中；网页的合适位置上插入，单击【插入】面板的【常用】
选项卡的【水
平线】按钮，或选择【插入】︱【水平线】命令，可在网页中插入1条水平分隔线。
2.在网页中插入文本并对文本进行拼写检查。
电子商务网站建设与维护
在网页的顶部区域合适的位置上输入标题文字“人生的伴侣·知识的源泉” ，并选中这些
文字。按Ctrl+F11
快捷键，打开HTML面板，选择样式【标题1】并作用于标题文字“人生的伴侣·知识的
源泉” 。
3.建立网站相册并利用外部编辑器编辑图像。
4.创建导航条。
在网页的中部区域合适的位置插入光标，选择菜单【插入】︱【交互式图像】︱【导航条】
命令，或者在
【插入】浮动面板的【常用】选项卡中，单击【导航条】按钮，此时在网页编辑窗口中，
会弹出【插入导
航条】对话框。
5.设置导航条中的【状态图像】、【鼠标经过图像】、【按下图像】、【按下时经过图像】。
在【项目名称】文本框中设置第 1 个按钮的名称为 a;在下面按钮 4 个状态的文本框中分
别输入 ch04gif
文件夹中的、、、 4 个文件的路径和名称;在【按下时，前往的 URL】
文本框
中输入该按钮链接的对象名称和路径。选中【预先载入图像】和【使用表格】选项；选择【插
入】下拉列
表框中的水平方向设置导航条。
6. 插入层，添加图片。
在网页合适的位置上插入3个用于图片定位的层，并在不同的层中插入ch04文件夹中的图
片文件t4_.gif、
t4_、t4_。
7. 在站点管理器中编辑超链接，创建锚点链接和电子邮件链接。

名师精编精品教案
在网页的底部区域插入带图片的层，选中图片，在图片【属性】面板的【链接】文
本框中，输入
mailto：+，建立电子邮件链接。
8.保存文件以为名，保存在my site文件夹中。
常见错误
1.在编辑网页中文字时，常常要在文档中插入空格，插入空格的操作方法有如下4种。
● 将汉字输入方式设置为全角方式，按空格键可输入空格。
● 用与页面背景颜色相同的字符来完成插入空格。
● 在属性面板中，选择【格式】下拉列表中的【预先格式化的】选项，就可以在编辑网页
时输入空格。
● 按Shift+Ctrl+Space键插入空格。每按一次快捷键可插入一个空格。
2.在网页文字编辑时，文本的换行有如下几种方法。
● 自动换行：在输入文字时，一行长度超过了文档窗口的显示范围，后面输入的文字则
自动换到下一行。
自动换行的好处在于不管浏览器的窗口大小，网页文字都将按照窗口大小自动换行。
● 按Enter键换行：输入文字后按Enter键换行，则文字成段，上下段之间空一行。
● 按Shift+Enter键换行：输入文字后按Shift+Enter键换行，则文字分行不成段，上下
行之间无空行。
● 用特殊字符换行：单击【插入】面板的【文本】标签，在【文本】选项卡中单击按钮，
可实现与按
Shift+Enter键相同的换行效果。
问题讨论
1.建立超链接的方法有哪几种？请归纳它们的作用和优缺点。
2.网页的锚点链接的方式有几种？命名锚点在挡墙网页文档中、在当前文件夹的其他网页文
档中、在其他
3.网站的某个网页文档中的超链接的方法分别是什么？
4.如何在站点管理器中创建、修改和删除超链接？
5.网页中所应用的图像的格式主要有哪几种？图像的主要属性有哪些？如何编辑修改插入
在网页中的图
片？
知识回顾
eaver MX 的文档格式化的方法、在网页中插入各种对象以及建立各种超链接的方
法。
2.创建、编辑HTML样式的方法、利用HTML标记及HTML样式格式化文档的方法；网
页各种对象的插入方法，
超链接的基本概念及其各种应用。
标记、HTML 样式、超链接、锚点、导航条、跳转菜单、电子邮件链接、映射图链
接、Flash按钮和
电子商务网站建设与维护
Flash文字的插入、Rollover翻转图的插入、Java Applet程序的插入、第三方插件的插入等。

项目单元 3 制作框架式网页
教学目标
1.掌握表格创建、选取、编辑和格式化的方法；

名师精编精品教案
2.掌握布局表格和布局单元格的使用方法；
3.掌握层的基本操作方法；
4.熟悉层的桥套、叠放次序更改和可见性设置等操作；
5.掌握框架结构网页的创建和编辑方法。
重点难点
1.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法以及各种属性设置；
2.在表格、层、框架中输入各种网页元素的方法；
3.布局表格和单元格的使用、框架中网页的链接和显示方法等。
教学方法
案例驱动，讲练结合。本项目通过对三种网页定位技术的实际综合性运用，让学生掌握如何
将网页的版面
变得更加友好，结构更加清晰。
教学过程
一、问题引出
在我们浏览一些成功网站的网页时都有这样的感受，该网站的网页布局合理、层次清晰适合
每位访问者在整个网站的多个页面之间进行访问。要做到这一点必须要对整个网站的结构和布局有一个详
细的规划，然
后利用各种定位技术来帮助完成。比如说要创建跨平台、跨浏览器的网页用表格布局是叫理想的方案；作
为层能够精确对页面元素进行定位，设计者可以控制多个层的叠放次序，显示或隐藏层，并
且层与时间轴
的结合使用，可以很方便的设计出动态页面效果，层与行为配合使用，还可以很方便的制作
出滚动字幕、
下拉式菜单等页面效果；而我们使用框架技术可以将制作的网页页面分割成上下或左右结构
的框架，把单
页面拓展成多页面，满足浏览者在一个页面内迅速浏览更多内容的需求。可见网页的定位技
术在整个网页
的布局与设计当中是非常重要的。
二、解决方法
1.插入框架将页面划分成相对独立的几个区域；
2.对每个独立的区域进行属性设置；
电子商务网站建设与维护
3.在其中一个区域插入层以及表格以定位；
4.控制超链接页面在不同的框架中显示
三、完成过程
1.选择框架进行定位操作
选择【插入】︱【框架】︱【上方及左侧嵌套】命令，在页面中插入框架，并调整到合适的
位置。
2.对每个独立区域进行属性设置
选择【修改】︱【页面属性】命令，分别给leftframe、mainframe设置背景颜色，单击【插
入】面板组的
【常用】选项卡的【Flash】按钮，在框架topframe的合适位置上插入用F lash制作的动画文
件。

名师精编精品教案
3.对leftframe通过表格和层进行定位
在 leftframe 中插入 120*160 像素的层，在层中插入宽度为 120 像素的 4 行 1 列的表
格，并将图片文件
、、、插入表格。
4.选中【现代文学】按钮，在图片【属性】面板的【链接】文本中框中设置链接的对象为 My
site 文件夹
中的，在【目标】下拉列表框中选择链接对象显示的框架为mainframe。
5.用同样的方法分别选中【生活艺术】、【文化教育】、【科学技术】三个按钮，为它们建立名
为、
、的链接，并设置链接对象显示的框架为。
6.选择【文件】︱【保存全部框架】命令，用保存框架集文件。
常见错误
1.注意单元格与表格两种【属性】面板的区别。
2.在对对象进行选择的时候一定要注意选择的对象是什么，是层是单元格还是单元格中的图
片，对不同的
对象进行的超链接操作的效果是不一样的，我们可以在选择完对象后查看下方显示的【属性】
面板来进行
判断。
3.在使用框架进行定位之后，页面保存的时候首先保存的是整个框架集文件页面，其次是各
个分页面，注
意保存顺序，以及保存文件的命名。
问题讨论
1.表格的属性面板和单元格的属性面板的主要区别在哪里？
2.比较【标准视图】和【布局视图】两种模式的不同之处。如何连续画出多个【布局表格】？
当切换到【标
准模式】后，【布局表格】和普通表格一样么？
3.框架和框架集的主要区别和各自的作用是什么？Dreamweaver MX中预设了多少种框架？
4.如何控制超链接页面在不同的框架中显示？
知识回顾
eaver MX中的3种页面定位工具——表格、层和框架，重点介绍了表格、层和框
架在设计网页时
的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。
2.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架
集的各种属性
设置。
3.在表格、层和框架中输入各种网页元素的方法。
4.布局表格和布局单元格的应用、表格样式化、外部数据导入表格。
5.层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。

项目单元 4 利用表单制作网上调查问卷
教学目标
掌握创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表框等
多种表单域的方法;
掌握设置各种表单域属性的方法，以及用 E-mail 方式递交表单等知识。

名师精编精品教案
重点难点
各种表单域的使用及其属性的设置
教学方法
案例驱动，讲练结合：通过网上书店问卷调查的设计，掌握表单域的使用和属性设置，
以及相关网页的规划。
教学过程
一．问题引出
在前面的单元中介绍了网页制作所需的布局及效果制作内容，我们掌握了基本的网页制
作技巧，本单元我们将通过设计网上调查问卷这种网页设计者与浏览者进行交流的最有效
手
段，学会在实际工作中对表单的应用。
二．解决方法
1.用 Dreamweaver MX生成表单的页面
电子商务网站建设与维护
2. 服务器端应用程序或客户端脚本的使用
三．完成过程
1.新建网页文件，并选择【修改】 | 【页面属性】命令，设置页面背景图像。
2.单击【插入】浮动面板组的【表单】选项卡中的【创建表单】按钮。
3.在表单中插入用于定位的表格，表格为 12 行 1 列，780×460 像素，表格边框颜色为
#993300。
4.在第 1 行输入标题文字“网上书店服务调查”，字体为“红色”，背景颜色为#FFFFCC。
5.在第 2 行输入文字“尊敬的顾客：您好!为了更好地为您服务，我们非常重视您在购物过
程中的感受，您的意见与建议是我们不断进步的源泉，谢谢您对我们工作的支持，欢迎您参
与我们的网上书店服务调查。”
6.在第 4 行输入单选按钮组的标识文字：“1. 请对本书店在满足客户需求的以下方面进行
评价： ”。设背景颜色为： #CCFFCC。
7.在表格的第 5 行插入 5×6 的嵌套表格。并在【属性】面板中将嵌套表格的【间距】和
【边
框】设为 0，设置嵌套表格第1 列的宽度为 280像素，其他 5 列的每列宽度设为 100 像
素。
8.按题目要求输入单选按钮组的标识文字。并分别将光标插入到嵌套表格的单元格中，单击
【表单】选项卡中的【单选】按钮，创建 20 个单选按钮。
9.在第 6 行输入复选框的标识文字： “2.您经常关注本网上书店的哪些栏目?”。为醒目起
见，可设置背景颜色为： #99FFFF。
10.将光标插入到第 7 行的合适位置上，单击【表单】选项卡中的【复选框】按钮，创建表
单的复选框，并输入这个复选框的标识文字“新书速递”。
11.用同样的方法分别创建标识文字为“精品系列”、“科学技术”、“现代文学”、“生
活艺术”、“文化教育”、“电子音像”、“政治法律”、“网友书评”的复选框。
12.在第 8 行输入多行文本框的标识文字： “3. 如果您有任何好的建议, 能够增强我们之
间的合作关系, 请告诉我们。”。为醒目起见，可设置背景颜色为： #BBEECC。
13.将光标插入到第 9 行的合适位置上，单击【表单】选项卡中的【文本字段】按钮，创建
表单的文本框，并在文本框的【属性】面板中设置：【字符宽度】为 110，【行数】为 8，
【类型】为多行，【初始值】为“请您提建议： ”，【换行】为默认。
14.在第 10、11 行中分别创建“4.您的姓名和性别： ”、“5.邮购定单号： ”、“6.您的

名师精编精品教案
联系方法： ”单行文本框和单选按钮，操作过程不再赘述。
15.在表单合适的位置上输入下拉式列表的标识文字“7.您的职业： ”。
16.单击【表单】选项卡中的【列表菜单】按钮，此时表单中显示一个很小的下拉式列表框。
17.选中新建的下拉式列表框，在下拉式列表框的【属性】面板中设置【列表菜单】、【类
型】、
【列表值】、【初始化时选定】等有关参数。
18.用同样的方法创建标识文字为“8.您所在的城市： ”的下拉列表框。
19.个按钮。
20.单击第 1个按钮，在【属性】面板的【标签】文本框中输入“提交”，然后选中【动作】
区域中【提交表单】单选按钮，将其设置为【提交】按钮。
21.单击第 2个按钮，在【属性】面板的【标签】文本框中输入“重置”，然后选中【动作】
区域中【重置表单】单选按钮，将其设置为【复位】按钮。
22.双击表单红色虚线框，在表单的【属性】面板中设置【表单名称】为“表单实例”；【方
法】为 POST；在【动作】文本框中输入“mailto： + 收件人的电子邮件地址”。表示浏
览网页时填写的表单内容将以电子邮件的方式发送给服务器。
边讲边练:完成用 E-mail 方式递交表单
23.预览网页后，保存文件。
电子商务网站建设与维护
知识回顾
1.表格的创建与使用
2.页面背景和文本的格式化
常见错误
1.表单对象命名重复；
2.表单域没有放在统一的表格中；
3.表单属性设置错误。
问题与讨论
1.表单的主要作用是什么？标准的表单域有哪几种？它们的功能分别是什么？
2.表单中【提交表单】按钮和【重设表单】按钮的作用是什么？如何添加这两个按钮？
3.如何利用 E-mail 发送表单数据？
4.创建表单后，为什么还要创建表单处理程序？如何创建这种程序？
学生作业
1.为某网上商店设计一个在线意见反馈表单。
2.制作一个用 E-mail发送数据的表单。
课堂总结
通过本单元的学习我们重点掌握表单技术的使用。表单（Form）技术可以实现浏览者与
Internet 服务器之间信息的交互传送，它是网络信息收集处理的一种重要的方式。通过表
单可以从网络的用户端收集信息，然后将收集来的信息经过服务器处理后再反馈给用户。无
论是电子商务、网上调查，还是留言板、聊天室，都要求网页能够接收浏览者输入的信息，
而表单就是网站获取用户信息的最重要的手段之一。

项目单元 5 用 ASP 制作网上聊天室
教学目标
熟悉静态页面、简单动态页面、复杂动态页面的处理流程；
掌握 Application 对象、Request 对象和 Session 对象的使用；

名师精编精品教案
掌握利用表单传递数据；
掌握简单程序的编写。
重点难点
SQL 语句的使用；ASP对象的使用。
教学方法
案例驱动，讲练结合：通过网上聊天室的设计过程讲解表单传递数据的实现、ASP 对象
的应用。
教学过程
一．问题引出
运用前面章节所述的方法，已经可以建立一个完整的网站，并为访问者提供静态的信息。
但是，这样一个网站只能提供信息，其性质等同于一个出版物，不能称为一个真正的 Web
应用，这样的静态网站是不能用于电子商务活动的，电子商务活动要求网站提供与使用者
交
互的手段。本单元我们将通过网上聊天室表单传递数据功能的实现，学会ASP 对象的使用。
电子商务网站建设与维护
二．解决方法
1.用 Dreamweaver MX生成网上聊天室的相关页面
2.表单的应用
对象的使用
三．完成过程
1.选择主菜单中的【文件】 | 【新建】命令，在弹出【新建文档】对话框中单击【常规】
选项卡。在【类别】框中选择【动态页】，在右边出现的【动态页】类型选项中，选择 ASP
VBScript，单击【创建】按钮，这样就会创建一个新的支持采用 VBScript 语言的 ASP 技
术
的无标题文档。
2.根据规划布局建立网页，表单域的属性和说明如表所示。
边讲边练：让学生根据聊天室网页布局及功能，设计表单域属性。
3.选中表单，在表单的【属性】面板中设置表单的属性。
4.保存网页（可命名为）。
5.新建动态页面，设置页面背景颜色为#99FFCC。
6.在网页上居中输入标题文字“下面显示的是您的个人信息” ，并设置：字体为楷体，大
小
为 5 号，颜色为#993300。
7.单击工具栏中【显示代码视图】按钮<>，设置程序代码如下所示，在与之
间加入了粗斜体表示的代码。
`以下粗斜体字母为添加的代码

<%
Dim User_Name,Psaaword,Sex,Love,Idea
User_Name=(“txtUserName”)
Psaaword=(“Psaaword”)
Sex=(“radSex”)
Love=(“chkLove”)
Idea=(“txtIdea”)

名师精编精品教案
%>

姓名：<%=User_Name%>

密码：<%=Psaaword%>

性别：<%=Sex%>

爱好：<%=Love%>

看法：<%=Idea%>

8.保存网页。并在上传测试服务器后浏览网页。
电子商务网站建设与维护
9.创建含有表单域的动态页面。其中文本域为 70 个字符宽、3行，按钮为 “提交” ，
页面背景颜色为#FFFFCC。
10.单击工具栏【显示代码视图】按钮<>,在与之后加入如下所示的粗斜体的
代码:
<%
If trim(request(“txtTalk”))<>””then

Applic ation(“show”)=request(“txtTalk”)&”
”&Applicatio n(“show”)
`以上这句代码的意思是把新的发言内容加在旧的发言内容前，然后再保存回到
Application(“show”)中，中间加的
的意思为将每一次发言换行显示。

end if
Application(“show”)
%>
边讲边练：让学生掌握代码的编写
11.保存文件。
知识回顾
1.表格的创建与使用
2.页面背景和文本的格式化
3. Web 应用程序的一般处理流程：
（1）浏览器发出对动态页面的请求；
（2） Web 服务器找到该页面，传给应用服务器；
（3）应用服务器扫描页面，执行代码；
（4）遇外部资源访问代码，应用服务器发送资源访问命令给资源服务器；
（5）资源服务器执行资源访问命令，返回结果数据集；
（6）应用服务器执行余下的代码，插入数据到结果页面；
（7）应用服务器把结果页面返回给 Web 服务器；
（8） Web 服务器发回该结果页面给浏览器。
4.当 VBScript 代码放在服务器端执行时有 2 种语法格式。
语法格式 1：
<％ VBScript 代码％>
语法格式 2：