第七章网页制作电子教案.docx
《第七章网页制作电子教案.docx》由会员分享，可在线阅读，更多相关《第七章网页制作电子教案.docx（40页珍藏版）》请在冰豆网上搜索。
第七章网页制作电子教案
第七章网页制作电子教案（计划8学时）
第一次课（2学时）
课题：
§7.1了解网页设计与Dreamweaver8
课型：
理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解：
1、了解Dreamweaver8的功能及特点。
2、了解网页、网站和网页的组成元素。
2、了解工作窗口的组成部分；
掌握：
1、熟练掌握Dreamweaver8软件的启动和退出,。
2、熟练掌握Dreamweaver8菜单的使用方法，
重点与难点
重点：
1、网页、网站和网页的组成元素，Dreamweaver8窗口及菜单的使用方法。
难点：
1、Dreamweaver8窗口及菜单的使用方法。
网页的设计理念。
教学进程
组织教学
复习提问引入新课
讲授新课：
7.1了解网页设计与Dreamweaver8
7.1.1网页、网站和网页的组成元素
网页是网站的基本信息单位，
通常是由若干网页组成。
网站中主页是访问一个网站首先看到的网页也是所有页面的链接中心。
网页中包含的元素很多，主要包含以下元素：
1、文本
文本是最重要的信息载体与交流工具，是网页发布信息所用的主要形式，利用文本可以准确表达出网页想要传达的信息。
2、图形
它可以是普通的绘制图形，可以是各种图像，还可以是动画。
图形不仅能提供更多的信息，还可以美化和装饰页面。
在网页上最常用的图像格式有GIF、JPEG等格式。
3、超级链接
是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。
建立超级链接的对象可以是文本、图像、按钮或热点标记。
浏览时鼠标指向超级链接时就会变成伸出食指的右手形状，单击超级链接后即可打开目标对象。
超链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。
4、表格
表格不仅用来显示相关数据，而且用来控制网页中信息的布局方式。
控制图形、文字出现的位置，使之规范整齐、均衡协调。
5、表单
6、声音
声音是多媒体网页的一个重要组成部分。
网页的声音文件格式很多，常用的有MIDI、WAV、MP3和AIF等。
由于MP3是采用MP3压缩技术的音频文件，具有压缩比大，占用空间小的特点，目前比较流行使用MP3音频文件制作网页背景音乐。
7、动画与视频
在网页中添加动画或视频元素作为传播的媒介，增加了页面的动态效果和观赏性。
在网页上可以添加的动画文件主要是GIF动画文件（.gif）和FLASH影片文件（.swf）两种类型。
7.1.2网页的设计理念
1、站点内容要及时更新
浏览者之所以访问你的网站，大多是因为内容来的，如果网站内容太普通，不专业，而且又长时间不更新，那么访问者就不会再有兴趣访问你的网站。
2、网页内容便于阅读
要让浏览者容易找到要找的东西，网页内容应当便于阅读，也就是要有导航功能。
一个站点并不是由许多Web主页简单地堆砌而成，必须要有一定的组织形式将它们有机地组织起来。
3、注重色彩的搭配
一个网站的标准色彩不超过3种，太多则让人眼花缭乱。
标准色彩要用于网站的标准、标题、主菜单和主色块，给人以整体统一的感觉，至于其它色彩，也可以使用，只是作为点缀和衬托，决不能喧宾夺主。
4、考虑适应不同浏览器和分辨率
应该站在浏览者的角度，考虑方方面面的因素。
如果用不同的浏览器和不同的分辨率浏览网站，结果杂乱无章、毫无次序，因此在设计好主页后，要事先将其放到各种操作系统、各种浏览器环境中去试用，以便检测是否能够适应不同浏览器及不同分辨率。
5、提供交互性
交互性原则，即界面设计强调交互过程。
一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。
Dreamweaver是Macromedia公司推出的一款大众化的网页制作软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网页制作人员所掌握。
7.1.3Dreamweaver8简介
Dreamweaver8是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。
1、Dreamweaver8运行环境
Dreamweaver8在Windows平台和Macintosh平台都可使用。
2、Dreamweaver8启动与退出
使用Dreamweaver8之前，应该先启动它，其方法主要有以下几种：
择【开始】/【所有程序】/【Macromedia】/【MacromediaDreamweaver8】命令，如图7-1所示。
●双击桌面上的Dreamweaver8快捷方式图标，如图7-2所示。
●单击快速启动栏中的Dreamweaver8快捷方式图标，如图7-3所示。
退出Dreamweaver8的操作很简单，单击窗口右上角的
按钮或选择【文件】/【退出】命令即可。
7.1.4Dreamweaver8工作界面
一、起始页
在Dreamweave8中首先将显示一个起始页，
在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目。
可以进行新建网页、打开网页以及查看帮助等操作，其界面如图7-5所示。
二、
主窗口
Dreamweaver8的标准工作界面包括：
标题栏、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题栏
启动MacromediaDreamweave8后，标题栏将显示文字MacromediaDreamweave8，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称如图7-7所示。
2、菜单栏
Dreamweave8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。
其中，编辑菜单里提供了对Dreamweaver8菜单中[首选参数]的访问，如图7-8所示。
其中各个菜单作用如下：
文件：
用来管理文件。
例如新建，打开，保存，另存为，导入，输出打印等。
编辑：
用来编辑文本。
例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：
用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：
用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。
修改：
具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格等。
文本：
用来对文本操作，例如设置文本格式等。
命令：
所有的附加命令项
站点：
用来创建和管理站点
窗口：
用来显示和隐藏控制面板以及切换文档窗口
帮助：
联机帮助功能。
例如按下F1键，打开帮助文本
3、插入面板组
插入面板组集成了可以在网页中应用的对象。
插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易地加入图像、声音、多媒体动画、表格、绘制层、框架、表单、Flash和ActiveX等网页元素，单击
按钮，在弹出的下拉菜单中可以选择要插入的网页元素的类型如图7-9所示。
4、文档工具栏
“文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
如图7-10所示。
5、标准工具栏
“标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：
“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”。
如图7-11所示。
图7-11
6、文档窗口
当我们打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作，它主要由项目选择标签、文档工具栏、水平标尺、垂直标尺、编辑区域、状态栏、垂直扩展按钮和水平扩展按钮构成，如图7-12所示。
“文档”窗口显示当前文档。
可以选择下列任一视图：
“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。
编辑区域是用于编辑网页和编写网页代码的区域，该区域有代码、拆分和设计3种视图模式。
v设计视图：
单击文档工具栏中的
按钮可以将编辑区域的视图模式切换到设计视图模式，在该模式中可以直接对网页进行编辑。
v代码视图：
单击文档工具栏中的
按钮可以将编辑区域的视图模式切换到代码视图模式，在该模式中可以编写或修改网页代码，如图7-13（a）所示。
v拆分视图：
单击文档工具栏中的
按钮可以将编辑区域的视图模式切换到拆分视图模式，在该模式下整个编辑区域被分为上下两个部分，上边为代码视图，下边为设计视图，如图7-13（b）所示。
这样可以在代码视图和设计视图之间进行切换，并可对照编辑。
7、状态栏
“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。
8、属性面板
属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来显示对象的属性，属性面板的显示内容完全是随当前在文档中选择的对象来确定的。
9、标签选择器
位于“文档”窗口底部的状态栏中，它显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其文档中标签的全部内容，如图7-16所示。
其他面板为浮动面板，这些面板都浮动于编辑窗口之外。
在初次使用Dreamweave8的时候，这些面板根据功能被分成了若干组。
例如“文件”面板用于管理Dreamweaver8站点和远程服务器上的文件和文件夹，它还可以访问本地磁盘上的全部文件，类似于Windows资源管理器，如图7-17所示。
7.1.5Dreamweaver8帮助
1、打开帮助
选择菜单“帮助”→“Dreamweaver8帮助”。
搜索帮助
（1）可以对Dreamweaver8帮助执行全文搜索。
在Dreamweaver8帮助中，单击“搜索”选项卡。
（2）在文本框中键入一个单词或短语，然后单击“列出主题”。
（3）双击结果列表中的一个主题，可显示该主题。
若要搜索产品中的帮助（Macintosh），请执行以下操作：
（1）在Dreamweaver8帮助中，在“提出问题”文本框中键入一个单词或短语，然后按Enter。
（2）双击结果列表中的一个主题，可显示该主题。
2、使用索引
使用索引可以快速找到信息。
若要使用索引（Windows），请执行以下操作：
（1）在Dreamweaver8帮助中，单击“索引”选项卡。
（2）滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。
提示：
可以在文本框中键入一个关键字，以快速滚动到某一索引项。
若要使用索引（Macintosh），请执行以下操作：
（1）在Dreamweaver8帮助中，在目录中单击“索引”链接。
（2）单击某个字母以滚动到列表中的某一索引项。
（3）单击该项旁边的数字，可显示索引信息。
课堂小结
本节课所学知识点比较多，但应分清主次，应重点复习需掌握的内容
作业布置：
1、复习今天所讲的内容，网页的设计理念。
2、做相关的题
3、预习新课
思考题：
如何使用Dreamweaver8帮助
第二次课（2学时）
课题：
§7.2站点的创建与管理
课型：
理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解：
了解站点的设计流程
掌握：
1、掌握Dreamweaver8建立站点的方法。
2、掌握Dreamweaver8管理站点的方法。
重点与难点
重点：
Dreamweaver8站点的设计、创建、管理方法。
难点：
Dreamweaver8站点的管理方法。
教学进程
组织教学
复习提问引入新课
Dreamweaver8的窗口、菜单的组成
讲授新课：
7.2.1站点设计
1、认识站点
1）本地站点
本地站点是用户工作的目录，是存放用户网页、素材等的本地文件夹。
在制作一般网页时只需建立本地站点即可。
（2）远程站点
若需要不连接Internet就能对所建的站点进行测试，可以在本地电脑上创建远程站点模拟真实的Web服务器环境进行测试。
（3）测试站点
测试站点主要是对动态页面进行测试时使用，是Dreamweaver8处理动态页面的文件夹。
Dreamweaver8使用此文件夹生成动态内容并在工作时连接到数据库。
2、规划站点结构
站点是管理网页与素材的场所。
规划站点结构是指利用不同的文件夹将不同的网页内容分门别类地保存，合理地组织站点结构，可提高工作效率。
应该事先在本地磁盘上创建一个文件夹作为站点的根目录，然后在文件夹下建若干个子文件夹，形成合理的目录结构，将不同类型的文件分门别类地存放在不同的目录中，在网站设计中所有创建和编辑的网页都应当保存在该文件夹中。
在发布站点时，只需将此文件夹中的所有内容上传到Web服务器上即可。
制作网页所需的图片或动画等文件存放的位置也是规划站点结构时应考虑的。
如果是大型站点，可在站点根目录下创建一个名称为images的文件夹，用以存放主页中用到的图片和动画。
3、制作导航流程
做好站点的规划后，就可以根据规划制作一个导航流程图，以便理清思路，制作时可直接在纸上粗略地绘出导航流程图。
如图7-18所示是一个班级网站最初的导航草图。
4、绘制页面草图
制作好导航流程图后，接下来应确定整个站点的页面风格，也就是设计站点的样式和版面草图。
它可以用Photoshop、CorelDRAW和Fireworks等图形软件制作。
7.2.2创建站点
1、进入Dreamweaver8工作界面后，选择【站点】/【新建站点】命令或【站点】/【管理站点】命令，弹出“管理站点”对话框。
单击
按钮，在弹出的下拉菜单中选择【站点】命令。
3、弹出站点定义对话框，在“您打算为您的站点起什么名字？
”文本框中输入站点名称，如“班级网站”。
4、单击
按钮，在弹出的对话框中选中
单选按钮。
5、单击
按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中
单选按钮，在“您将把文件存储在计算机上的什么位置?
”文本框中输入本地站点存储的位置，如“f:
\dw\”。
6、单击
按钮，在弹出的对话框中的“您如何连接到远程服务器？
”下拉列表框中选择“无”选项。
7、单击
按钮，单击
按钮完成本地站点的定义。
现在，你可以试着用上面介绍的方法，使用Dreamweaver8创建一个名为“学校网站”的站点。
7.2.3管理站点
创建站点完成后，还需要对站点进行管理。
这是非常重要的操作，只有将站点管理得井井有条，才能顺利进行后面的工作。
1．编辑站点
（1）选择【站点】/【管理站点】命令，弹出“管理站点”对话框，选择需要编辑的站点，这里选择“班级网站”站点。
（2）单击
按钮，弹出“班级网站的站点定义为”对话框，如图7-27所示。
（3）在该对话框中即可对站点进行编辑，其操作过程和站点的创建方法类似，只需按提示进行操作即可。
选择“班级网站”的站点定义对话框中的“高级”选项卡可对站点进行一些高级设置，如设计备注、站点地图布局等。
2．删除站点
（1）选择【站点】/【管理站点】命令，弹出如图7-29（a）所示的“管理站点”对话框，在左侧列表框中选择要删除的站点后单击
按钮。
（2）弹出一个警告对话框，提示执行本操作后将不能撤销，如图7-29（b）所示。
单击
按钮返回“管理站点”对话框，可以看见站点已被删除，如图7-29（c）所示。
（3）单击
按钮即可删除所选的站点。
3．管理站点中的文件和文件夹
（1）添加文件或文件夹
通过“文件”面板可以直接在站点中添加文件或文件夹，如要在站点“班级网站”中添加一个名为images的新文件夹，其具体操作如下：
a、单击“文件”面板左侧的
图标显示该浮动面板的内容。
b、在根目录图标上单击鼠标右键，在弹出的快捷菜单中选择【新建文件夹】命令，如图7-30（a）所示。
c、Dreamweaver8将自动在根目录下创建一个名为untitled的文件夹，如图7-30（b）所示。
d、新建的文件夹名处于改写状态，读者可根据需要输入文件夹名，这里将文件夹命名为images，然后按Enter键确认，如图7-30（c）所示。
（2）删除文件或文件夹
如果某个站点下不需要一些文件或文件夹，可以将其删除。
删除文件或文件夹的方法是：
选择需删除的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择【编辑】/【删除】命令，或直接按Del键，在弹出的确认对话框中单击
按钮即可，（3）重命名文件或文件夹
为了使文件名或文件夹名更加直观，常常需要为文件或文件夹重命名，
选择需重命名的文件或文件夹并单击鼠标右键，在弹出的快捷菜单中选择【编辑】/【重命名】命令如图7-32所示，使文件或文件夹名进入可改写状态，然后输入新的名称，按Enter键确认名称即可。
（4）编辑文件
如果需要对站点中的文件进行编辑，除了可以使用第2章介绍的打开文件的方法外，还可以直接在“文件”面板中双击需要编辑的文件，打开该文件并进入编辑窗口进行编辑。
例：
在D盘上建立自己姓名为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”
操作步骤：
a、在D盘上建立文件夹
b、在Dreamweaver8中，选择菜单“站点-新建站点”，可以按向导一步一步操作，也可以直接选“高级”选项卡设置
c、在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录
4、如何把一个已有目录定义为一个站点
例：
首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为”公司网站”
5、使用站点管理器
例：
以学校结构为例，学生自己创建学校网站站点。
课堂小结
教师结合学生完成实例的情况，对本节课的教学过程进行小结，指出学生在练习中存在的问题。
作业布置：
1、复习今天所讲的内容，尤其是站点的创建与管理。
2、做选择题第2—4题。
3、预习新课
思考题：
站点地图的操作方法。
第三次课（2学时）
课题：
§7.3网页的基本操作
课型：
理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解：
网页的组成
掌握：
1、掌握创建网页的操作方法。
2、掌握设置网页属性的方法。
3、掌握网页中添加文本和各种符号的方法。
重点与难点
重点：
创建网页的操作方法，网页的属性设置，网页中添加文本和各种符号的方法。
难点：
网页的属性设置
教学进程
组织教学
复习提问引入新课
复习上节课所学内容，为下面要做的实训做好准备，指出在操作中应注意的问题。
7.3.1创建网页
创建网页有如下几种方法：
1、启动Dreamweaver8的时创建网页，选择“创建项目”中的HTML，就可以创建一个新的网页，如图7-33所示。
2、在【文件】菜单中选择“新建”命令。
在弹出的“新建文档”对话框中“常规”选项中，选择“基本页”，在“基本页”区域下选择“HTML选项”，然后单击“确定”，即可创建一个新的网页。
4、在站点窗口直接创建网页。
在“文件”面板中打开本地站点，然后单击右键，在弹出的快捷菜单中，选择“新建文件”命令，即可以创建一个新的网页。
7.3.2设置网页属性
1．设置网页外观
在“分类”列表框中选择“外观”选项，对话框右侧将显示“外观”选项的相应参数设置，如图7-36所示。
其中各参数含义如下：
●“页面字体”下拉列表框：
用于设置网页中文字所使用的字体，单击右侧的
和
按钮可设置文本为加粗和斜体格式。
●“大小”文本框：
用于设置网页中文字的大小。
●“文本颜色”文本框：
用于设置网页中文字的颜色，可以单击
按钮，在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入颜色的值。
●“背景颜色”文本框：
用于设置网页中的背景颜色，可以单击
按钮，在弹出的颜色列表中选择需要的颜色或直接在后面的文本框中输入颜色的值。
●“背景图像”文本框：
用于设置网页中的背景图像，在该文本框中输入背景图片的路径，也可单击
按钮指定背景图片的路径。
●“重复”下拉列表框：
用于设置背景图像的重复方式。
●“左边距”文本框：
在该文本框中设置网页内容与浏览器左边界的距离。
●“右边距”文本框：
在该文本框中设置网页内容与浏览器右边界的距离。
●“上边距”文本框：
在该文本框中设置网页内容与浏览器上边界的距离。
●“下边距”文本框：
在该文本框中设置网页内容与浏览器下边界的距离。
2．设置超级链接样式
在“分类”列表框中选择“链接”选项，右侧将显示链接的相应参数设置选项，如图7-37所示，其中各参数的含义如下：
●“链接字体”下拉列表框：
用于设置网页中超级链接的字体，单击右侧的
和
按钮可设置超级链接的字体为加粗和斜体格式。
●“大小”下拉列表框：
在该文本框中设置超级链接字体的大小。
●“链接颜色”文本框：
设置超级链接的基本颜色。
●“变换图像链接”文本框：
设置鼠标指针移动到超级链接上时，超级链接的颜色。
●“已访问链接”文本框：
设置访问后的超级链接颜色。
●“活动链接”文本框：
设置正在访问的超级链接颜色。
●“下划线样式”下拉列表框：
设置超级链接的下划线类型。
3．设置标题样式
在“分类”列表框中选择“标题”选项，右侧将显示“标题”的参数设置选项，如图7-38所示，其中各参数的含义如下：
●“标题字体”下拉列表框：
在该下拉列表框中设置页面标题的字体。
●
“标题1”～“标题6”下拉列表框：
在文本框中设置1级标题至6级标题的字体、大小和颜色。
4．设置网页标题和网页编码
在“分类”列表框中选择“标题/编码”选项，右侧将显示标题/编码的相应参数设置选项，如图7-39所示，其中各参数的含义如下：
●“标题”文本框：
在该文本框中输入网页标题，该标题将出现在浏览器标题栏中。
●“文档类型”下拉列表框：
选择需要新建的网页类型。
●“编码”下拉列表框：
设置页面使用的字体编码类型。
5．设置跟踪图像
在“分类”列表框中选择“跟踪图像”选项，右侧将显示跟踪图像的相应参数设置选项，如图7-40所示，其中各参数的含义如下：
●“跟踪图像”文本框：
指定一幅图像作为设计网页时的参考图像。
●“透明度”栏：
确定跟踪图像的不透明度，从左到右表示从完全透明到完全不透明。
7.3.3添加文本
1、添加普通文本
在Dreamweaver8中为网页添加文本有直接输入文本、从其他文档中复制文本和导入文本3种方式，下面分别进行讲解。
（1）直接输入文本
直接输入文本的方法较简单，只需将光标插入点定位在需添加文本的位置，打开所需的输入法直接输入文本即可。
如图7-41所示为正在输入的文本。
（2）从其他文档中复制文本
从其他文档中复制文本的方法可以节省输入文本的时间，从而提高制作网页的速度。
先选择要复制的文本，选择【编辑】/【复制】命令或按Ctrl+C键复制，然后切换到Dreamweaver8中，将光标定位在需添加文本的位置，再按Ctrl＋V键进行粘贴即可。
（3）导入文本
1、选择【文件】/【导入】/【Word文档】命令，弹出“导入Word文档”对话框,如图7-43所示。
2、在“查找范围”下拉列表框中选择导入文档的路径，然后选择要导入的文件，这里选择“webtext.doc”文件，在“格式化”
升级会员 