网站规划与建设教案.docx

网站规划与建设教案.docx

《网站规划与建设教案.docx》由会员分享，可在线阅读，更多相关《网站规划与建设教案.docx（40页珍藏版）》请在冰点文库上搜索。

网站规划与建设教案

《网站规划与建设》教案

项目单元1简单网页制作

教学目标

1.掌握DreamweaverMX启动和退出的方法；

2.熟悉DreamweaverMX的网页编辑器、站点管理器和各种使用面板；

3.掌握本地站点的使用方法；

4.熟悉制作一个简单网页的过程。

重点难点

1.如何建立一个本地站点；

2.在站点中对文件进行剪切、粘贴、复制、删除、重命名操作；

教学方法

案例驱动，讲练结合。

通过对DreamweaverMX软件的初识，使我们掌握该软件的基本基本启动、编辑和退

出；通过对一个简单网页的制作过程的描述，使我们了解建立一个网页的最基本的方法。

教学过程

一、问题引出

DreamweaverMX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件，

不仅可以轻松设计网站前台的页面，而且也可以方便的实现网站后台的各种复杂功能。

一个网站主页可以

看成是一系列相关文档的集合，浏览者通过浏览器程序从一个页面跳转到另外一个网页，从而完成对整个

网站的主页的访问。

那么究竟该如何创建一个最基本的网页呢？

我们通过一个例子一起来研究一下网页的

基本制作方法。

二、解决方法

1.用不同的方法启动和退出DreamweaverMX。

2.用快件捷键打开和关闭面板、【属性】面板以及【代码】浮动面板组。

3.建立网站的基本站点。

4.制作简单网页。

三、完成过程

1.启动和退出DreamweaverMX。

选择Windows资源管理器的【开始】︱【程序】︱Macromedia︱DreamweaverMX命令，或单击Windows桌

面上DreamweaverMX的快捷图标，即可启动DreamweaverMX。

2.选择【站点】︱【新建站点】命令，选择【高级】选项卡，在【站点名称】文本框中输入“我的站点”。

电子商务网站建设与维护 

3.单击【本地根文件夹】文本框右边的图标，将当前盘的文件夹Mysite设置为本地站点的根文件夹，并

确认。

4.在DreamweaverMX网页编辑器中新建一个页面。

选择【修改】︱【页面属性】命令，打开【页面属性】

对话框，在【页面属性】对话框中作相应设置。

5.将插入背景图片的网页用exel-1.htm为名保存在本地站点的根文件夹中，层中插入图片操作。

6.插入表格操作，表格中输入文本内容。

7.网页编辑完毕后按F12键预览，然后用exel-1.htm为名保存在Mysite文件夹中。

常见错误

1.在网页设计中，不要用中文作为文件名或文件夹名；

2.有的网站网页文件命名时区分字母大小写，列入INDEX.HTM和index.htm表示不同的文件；

3.每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的名字一般可命

名为index.htm；

4.首页文件index.htm应该放在站点的根文件夹下；

5.网页上进行的所有的插入对象，都是相对路径的对象，这样可以避免很多犹豫路径问题找不到对象的错

误。

问题讨论

1.什么是本地站点？

什么是相对路径？

什么是绝对路径？

2.如何正确设置网页中元素的路径？

如何避免浏览网页时缺少图片的错误出现？

3.在本地站点下新建文件夹、复制和移动文件的方法有哪几种？

知识回顾

1.DreamweaverMX的启动方式和工作环境；本地站点的创建和设置。

2.网页文件的创建与保存、页面属性设置与基本编辑方法；创建、编辑一个简单网页的过程。

3.本地网站设置、网页的创建和保存的方法、网页对象文本与图像的插入、页面属性设置、文字的属性设

置、图像的属性设置、层的简单应用、字体列表的编辑。

项目单元2制作网页超链接

教学目标

1.掌握文本插入的方法；

2.掌握网页文档的基本编辑方法；

3.掌握HTML样式的创建和使用方法；

4.掌握文本链接、图像链接、图像映射链接、电子邮件链接和锚点链接的方法；

5.熟悉导航条和跳转菜单的创建和使用方法。

重点难点

1.网页文档常用的格式化方法；

2.在网页中插入对象的方法；

3.创建各种超链接的方法。

教学方法

案例驱动，讲练结合。

在项目单元1的基础上对网页进行编辑，对文档进行格式化在网页中插入各种对象

以及建立各种超链接。

教学过程

一、问题引出

网页中文字是最主要、最基本的页面元素之一，它占用的存储空间较小，与耗费网络带宽较多的图片和多

媒体相比有无法比拟的优势，而一个网页要和网站真正联系起来，超链接是不可缺少的，本项目通过在原

有基本网页的基础上增加相应的文档以及超链接的方式来进一步美化网页，达到应有的功能。

二、解决方法

1.网页文档的基本操作；

2.网页文档的格式化操作；

3.图片的编辑操作；

4.创建超链接。

三、完成过程

1.在网页中插入各种元素（水平线、日期、Flash按钮、Flash文字和各种小JavaApplet程序）。

打开网页编辑器窗口，选择【修改】︱【页面属性】命令，在【页面属性】对话框中设置背景图片为bg0040.gif，

并将网页保存在Mysite文件夹中；网页的合适位置上插入，单击【插入】面板的【常用】选项卡的【水

平线】按钮，或选择【插入】︱【水平线】命令，可在网页中插入1条水平分隔线。

2.在网页中插入文本并对文本进行拼写检查。

电子商务网站建设与维护

在网页的顶部区域合适的位置上输入标题文字“人生的伴侣·知识的源泉”，并选中这些文字。

按Ctrl+F11

快捷键，打开HTML面板，选择样式【标题1】并作用于标题文字“人生的伴侣·知识的源泉”。

3.建立网站相册并利用外部编辑器编辑图像。

4.创建导航条。

在网页的中部区域合适的位置插入光标，选择菜单【插入】︱【交互式图像】︱【导航条】命令，或者在

【插入】浮动面板的【常用】选项卡中，单击【导航条】按钮，此时在网页编辑窗口中，会弹出【插入导

航条】对话框。

5.设置导航条中的【状态图像】、【鼠标经过图像】、【按下图像】、【按下时经过图像】。

在【项目名称】文本框中设置第1个按钮的名称为a;在下面按钮4个状态的文本框中分别输入ch04/gif

文件夹中的a1.gif、a2.gif、a3.gif、a4.gif4个文件的路径和名称;在【按下时，前往的URL】文本框

中输入该按钮链接的对象名称和路径。

选中【预先载入图像】和【使用表格】选项；选择【插入】下拉列

表框中的水平方向设置导航条。

6.插入层，添加图片。

在网页合适的位置上插入3个用于图片定位的层，并在不同的层中插入ch04文件夹中的图片文件t4_.gif、

t4_2.gif、t4_3.gif。

7.在站点管理器中编辑超链接，创建锚点链接和电子邮件链接。

在网页的底部区域插入带图片wyfy.jpg的层，选中图片，在图片【属性】面板的【链接】文本框中，输入

mailto：

+，建立电子邮件链接。

8.保存文件以exa4.htm为名，保存在mysite文件夹中。

常见错误

1.在编辑网页中文字时，常常要在文档中插入空格，插入空格的操作方法有如下4种。

●将汉字输入方式设置为全角方式，按空格键可输入空格。

●用与页面背景颜色相同的字符来完成插入空格。

●在属性面板中，选择【格式】下拉列表中的【预先格式化的】选项，就可以在编辑网页时输入空格。

●按Shift+Ctrl+Space键插入空格。

每按一次快捷键可插入一个空格。

2.在网页文字编辑时，文本的换行有如下几种方法。

●自动换行：

在输入文字时，一行长度超过了文档窗口的显示范围，后面输入的文字则自动换到下一行。

自动换行的好处在于不管浏览器的窗口大小，网页文字都将按照窗口大小自动换行。

●按Enter键换行：

输入文字后按Enter键换行，则文字成段，上下段之间空一行。

●按Shift+Enter键换行：

输入文字后按Shift+Enter键换行，则文字分行不成段，上下行之间无空行。

●用特殊字符换行：

单击【插入】面板的【文本】标签，在【文本】选项卡中单击按钮，可实现与按

Shift+Enter键相同的换行效果。

问题讨论

1.建立超链接的方法有哪几种？

请归纳它们的作用和优缺点。

2.网页的锚点链接的方式有几种？

命名锚点在挡墙网页文档中、在当前文件夹的其他网页文档中、在其他

3.网站的某个网页文档中的超链接的方法分别是什么？

4.如何在站点管理器中创建、修改和删除超链接？

5.网页中所应用的图像的格式主要有哪几种？

图像的主要属性有哪些？

如何编辑修改插入在网页中的图

片？

知识回顾

1.DreamweaverMX的文档格式化的方法、在网页中插入各种对象以及建立各种超链接的方法。

2.创建、编辑HTML样式的方法、利用HTML标记及HTML样式格式化文档的方法；网页各种对象的插入方法，

超链接的基本概念及其各种应用。

3.HTML标记、HTML样式、超链接、锚点、导航条、跳转菜单、电子邮件链接、映射图链接、Flash按钮和

电子商务网站建设与维护

Flash文字的插入、Rollover翻转图的插入、JavaApplet程序的插入、第三方插件的插入等。

项目单元3制作框架式网页

教学目标

1.掌握表格创建、选取、编辑和格式化的方法；

2.掌握布局表格和布局单元格的使用方法；

3.掌握层的基本操作方法；

4.熟悉层的桥套、叠放次序更改和可见性设置等操作；

5.掌握框架结构网页的创建和编辑方法。

重点难点

1.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法以及各种属性设置；

2.在表格、层、框架中输入各种网页元素的方法；

3.布局表格和单元格的使用、框架中网页的链接和显示方法等。

教学方法

案例驱动，讲练结合。

本项目通过对三种网页定位技术的实际综合性运用，让学生掌握如何将网页的版面

变得更加友好，结构更加清晰。

教学过程

一、问题引出

在我们浏览一些成功网站的网页时都有这样的感受，该网站的网页布局合理、层次清晰适合每位访问者在

整个网站的多个页面之间进行访问。

要做到这一点必须要对整个网站的结构和布局有一个详细的规划，然

后利用各种定位技术来帮助完成。

比如说要创建跨平台、跨浏览器的网页用表格布局是叫理想的方案；作

为层能够精确对页面元素进行定位，设计者可以控制多个层的叠放次序，显示或隐藏层，并且层与时间轴

的结合使用，可以很方便的设计出动态页面效果，层与行为配合使用，还可以很方便的制作出滚动字幕、

下拉式菜单等页面效果；而我们使用框架技术可以将制作的网页页面分割成上下或左右结构的框架，把单

页面拓展成多页面，满足浏览者在一个页面内迅速浏览更多内容的需求。

可见网页的定位技术在整个网页

的布局与设计当中是非常重要的。

二、解决方法

1.插入框架将页面划分成相对独立的几个区域；

2.对每个独立的区域进行属性设置；

电子商务网站建设与维护 

3.在其中一个区域插入层以及表格以定位；

4.控制超链接页面在不同的框架中显示

三、完成过程

1.选择框架进行定位操作

选择【插入】︱【框架】︱【上方及左侧嵌套】命令，在页面中插入框架，并调整到合适的位置。

2.对每个独立区域进行属性设置

选择【修改】︱【页面属性】命令，分别给leftframe、mainframe设置背景颜色，单击【插入】面板组的

【常用】选项卡的【Flash】按钮，在框架topframe的合适位置上插入用Flash制作的动画文件shu.swf。

3.对leftframe通过表格和层进行定位

在leftframe中插入120*160像素的层，在层中插入宽度为120像素的4行1列的表格，并将图片文件

a1.jpg、a2.jpg、a3.jpg、a4.jpg插入表格。

4.选中【现代文学】按钮，在图片【属性】面板的【链接】文本中框中设置链接的对象为Mysite文件夹

中的literature.htm，在【目标】下拉列表框中选择链接对象显示的框架为mainframe。

5.用同样的方法分别选中【生活艺术】、【文化教育】、【科学技术】三个按钮，为它们建立名为art.htm、

edu.htm、scie.htm的链接，并设置链接对象显示的框架为main.frame。

6.选择【文件】︱【保存全部框架】命令，用exa3.htm保存框架集文件。

常见错误

1.注意单元格与表格两种【属性】面板的区别。

2.在对对象进行选择的时候一定要注意选择的对象是什么，是层是单元格还是单元格中的图片，对不同的

对象进行的超链接操作的效果是不一样的，我们可以在选择完对象后查看下方显示的【属性】面板来进行

判断。

3.在使用框架进行定位之后，页面保存的时候首先保存的是整个框架集文件页面，其次是各个分页面，注

意保存顺序，以及保存文件的命名。

问题讨论

1.表格的属性面板和单元格的属性面板的主要区别在哪里？

2.比较【标准视图】和【布局视图】两种模式的不同之处。

如何连续画出多个【布局表格】？

当切换到【标

准模式】后，【布局表格】和普通表格一样么？

3.框架和框架集的主要区别和各自的作用是什么？

DreamweaverMX中预设了多少种框架？

4.如何控制超链接页面在不同的框架中显示？

知识回顾

1.DrameweaverMX中的3种页面定位工具——表格、层和框架，重点介绍了表格、层和框架在设计网页时

的定位作用以及表格、层、框架的创建、编辑和属性设置等操作。

2.表格、层、框架和框架集的创建、选择、编辑、保存等操作方法，表格、层、框架和框架集的各种属性

设置。

3.在表格、层和框架中输入各种网页元素的方法。

4.布局表格和布局单元格的应用、表格样式化、外部数据导入表格。

5.层及嵌套层、层的叠放次序、层的可见性、框架中网页的链接和显示方法等。

项目单元4利用表单制作网上调查问卷

教学目标

掌握创建表单和表单的单行文本框、多行文本框、单选按钮、复选框、下拉式列表框等

多种表单域的方法;

掌握设置各种表单域属性的方法，以及用E-mail方式递交表单等知识。

重点难点

各种表单域的使用及其属性的设置

教学方法

案例驱动，讲练结合：

通过网上书店问卷调查的设计，掌握表单域的使用和属性设置，

以及相关网页的规划。

教学过程

一．问题引出

在前面的单元中介绍了网页制作所需的布局及效果制作内容，我们掌握了基本的网页制

作技巧，本单元我们将通过设计网上调查问卷这种网页设计者与浏览者进行交流的最有效手

段，学会在实际工作中对表单的应用。

二．解决方法

1.用DreamweaverMX生成表单的页面

电子商务网站建设与维护 

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.用DreamweaverMX生成网上聊天室的相关页面

2.表单的应用

3.ASP对象的使用

三．完成过程

1.选择主菜单中的【文件】|【新建】命令，在弹出【新建文档】对话框中单击【常规】

选项卡。

在【类别】框中选择【动态页】，在右边出现的【动态页】类型选项中，选择ASP

VBScript，单击【创建】按钮，这样就会创建一个新的支持采用VBScript语言的ASP技术

的无标题文档。

2.根据规划布局建立网页，表单域的属性和说明如表所示。

边讲边练：

让学生根据聊天室网页布局及功能，设计表单域属性。

3.选中表单，在表单的【属性】面板中设置表单的属性。

4.保存网页（可命名为input.asp）。

5.新建动态页面show.asp，设置页面背景颜色为#99FFCC。

6.在网页上居中输入标题文字“下面显示的是您的个人信息”，并设置：

字体为楷体，大小

为5号，颜色为#993300。

7.单击工具栏中【显示代码视图】按钮<>，设置程序代码如下所示，在与之

间加入了粗斜体表示的代码。

`以下粗斜体字母为添加的代码

<%

DimUser_Name,Psaaword,Sex,Love,Idea

User_Name=Request.Form（“txtUserName”）

Psaaword=Request.Form（“Psaaword”）

Sex=Request.Form（“radSex”）

Love=Request.Form（“chkLove”）

Idea=Request.Form（“txtIdea”）

%>

姓名：

<%=User_Name%>

密码：

<%=Psaaword%>

性别：

<%=Sex%>

爱好：

<%=Love%>

看法：

<%=Idea%>

8.保存网页show.asp。

并在上传测试服务器后浏览网页。

电子商务网站建设与维护 

9