第七章网页制作电子教案
禁烟图片-格陵兰岛人口
第七章网页制作电子教案(计划8学时)
第一次课(2学时)
课题:§7.1了解网页设计与Dreamweaver 8
课型:理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解:1、了解
Dreamweaver8
的功能及特点。
2、了解网页、网站和网页的组成元素。
2、了解工作窗口的组成部分;
掌握:1、熟练掌握
Dreamweaver8
软件的启动和退出,。
2、熟练掌握Dreamweaver8菜单的使用方法,
重点与难点
重点:1、网页、网站和网页的组成元素,Dreamweaver8窗口及菜单的使用方法。
难点:1、Dreamweaver8窗口及菜单的使用方法。网页的设计理念。
教学进程
组织教学
复习提问引入新课
讲授新课:
7.1了解网页设计与Dreamweaver 8
7.1.1网页、网站和网页的组成元素
网页是网站的基本信息单位,
通常是由若干网页组成。
网站中主页是访问一个网站首先看到的网页也是所有页面的链接中心。
网页中包含的元素很多,主要包含以下元素:
1、文本
文本是最重要的信息载体与
交流工具,是网页发布信息所用的主要形式,利用文本可以准确
表达出网页想要传达的信息。
2、图形
它可以是普通的绘制图形,可以是各种图像,还可以是动画。 图形不仅能提供更多
的信息,
还可以美化和装饰页面。在网页上最常用的图像格式有GIF、JPEG等格式。
3、超级链接
是从一个网页指向另一个目的端的链接,这个目的端通常是另一个网页,也可以
是一幅图片、
一个电子邮件地址、一个文件、一个程序或者相同网页的不同位置。建立超级链接的对象可
以是文本、图像、按钮或热点标记。浏览时鼠标指向超级链接时就会变成伸出食指的右手形
状,
单击超级链接后即可打开目标对象。超链接是网页中一种非常重要的功能,是网页中最
重要、最根本的元
素之一。
4、表格
表格不仅用来显示相关数据,而且用来控制网页中信息的布局方式。控
制图形、文字出
现的位置,使之规范整齐、均衡协调。
5、表单
6、声音
声音是多媒体网页的一个重要组成部分。网页的声音文件格式很多,常用的有
MIDI、WA
V、MP3和AIF等。由于MP3是采用MP3压缩技术的音频文件,具有压缩比大,
占用空间小的特
点,目前比较流行使用MP3音频文件制作网页背景音乐。
7、动画与视频
在网页中添加动画或视频元素作为传播的媒介,增加了页面的动态效果和观赏性。在网
页上可以添加的动
画文件主要是GIF动画文件(.gif)和FLASH影片文件(.swf) 两种类型。
7.1.2 网页的设计理念
1、站点内容要及时更新
浏览者之所以访问你的网
站,大多是因为内容来的,如果网站内容太普通,不专业,而
且又长时间不更新,那么访问者就不会再有
兴趣访问你的网站。
2、网页内容便于阅读
要让浏览者容易找到要找的东西,网页内容应当
便于阅读,也就是要有导航功能。一个
站点并不是由许多Web主页简单地堆砌而成,必须要有一定的组
织形式将它们有机地组织
起来。
3、注重色彩的搭配
一个网站的标准色彩不超过3
种,太多则让人眼花缭乱。标准色彩要用于网站的标准、
标题、主菜单和主色块,给人以整体统一的感觉
,至于其它色彩,也可以使用,只是作为点
缀和衬托,决不能喧宾夺主。
4、考虑适应不同浏览器和分辨率
应该站在浏览者的角度,考虑方方面面的因素。如果用不同
的浏览器和不同的分辨率浏
览网站,结果杂乱无章、毫无次序,因此在设计好主页后,要事先将其放到各
种操作系统、
各种浏览器环境中去试用,以便检测是否能够适应不同浏览器及不同分辨率。
5、提供交互性
交互性原则,即界面设计强调交互过程。一方面是物的信息传达,另一方面是
人的接受
与反馈,对任何物的信息都能动地认识与把握。
Dreamweaver是Macr
omedia公司推出的一款大众化的网页制作软件,它具有可视化编辑界
面,用户不必编写复杂的HT
ML源代码就可以生成跨平台、跨浏览器的网页,不仅适合于
专业网页编辑人员的需要,同时也容易被业
余网页制作人员所掌握。
7.1.3 Dreamweaver 8简介
Dreamweaver 8是制作网页的工具,用它可以生成.htm或.html文件,而IE是浏
览网页
的工具,用IE只能看网页,而不能改网页,修改网页还是需要网页制作工具。
1、Dreamweaver 8 运行环境
Dreamweaver 8在Windows
平台和Macintosh平台都可使用。
2、Dreamweaver 8 启动与退出
使用Dreamweaver 8之前,应该先启动它,其方法主要有以下几种:
择【开始】
【所有程序】
【
Macromedia
】
【
Macromedia Dreamweaver
8
】命令,如图
7-1
所示。
双击桌面上的
Dreamweaver
8
快捷方式图标,如图
7-2
所示。
单击快速启动栏中的
Dreamweaver
8
快捷方式图标,如图
7-3
所示。
退出Dreamweaver
8的操作很简单,单击窗口右上角的
命令即可。
图7-1
按钮或选择【文件】【退出】
7.1.4 Dreamweaver
8工作界面
一、 起始页
在Dreamweave 8 中首先将显示一个起始页, 在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的
项目。可以进
行新建网页、打开网页以及查看帮助等操作,其界面如图7-5所示。
二、 主窗口
插入栏 标题栏
图7-5
菜单栏
文
档
编
辑
窗
口
标签选择
面板组
状态栏
文件面板
属性栏
图7-6
Dreamweaver 8的标准工作界面包括:标题栏、菜单栏
、插入面板组、文档工具栏、标
准工具栏、文档窗口、状态栏、属性面板和浮动面板组。
1、标题栏
启动Macromedia Dreamweave
8后,标题栏将显示文字Macromedia Dreamweave
8,新建或
打开一个文档后,在后面还会显示该文档所在的位置和文件名称如图7-7所示。
图7-7
2、菜单栏
Dreamweave 8的菜单
共有10个,即文件、编辑、视图、插入、修改、文本、命令、站
点、窗口和帮助。其中,编辑菜单里提
供了对Dreamweaver 8菜单中[首选参数]的访问,如
图7-8所示。
图7-8
其中各个菜单作用如下:
文件:用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。
编辑:用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。
查看:用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入:用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。
修改:具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格等。
文本:用来对文本操作,例如设置文本格式等。
命令:所有的附加命令项
站点:用来创建和管理站点
窗口:用来显示和隐藏控制面板以及切换文档窗口
帮助:联机帮助功能。例如按下F1键,打开帮助文本
3、插入面板组
插入面板组
集成了可以在网页中应用的对象。插入面板组其实就是图像化了的插入指
令,通过一个个的按钮,可以很
容易地加入图像、声音、多媒体动画、表格、绘制层、框架、
表单、Flash和ActiveX等网页
元素,单击按钮,在弹出的下拉菜单中可以选择要插
入的网页元素的类型如图7-9所示。
4、文档工具栏
“文档”工具栏包含各种按钮,它们提供各种“文档”窗口视图(如“设计”
视图和“代
码”视图)的选项、各种查看选项和一些常用操作(如在浏览器中预览)。如图7-10所示
。
图7-10
5、标准工具栏
“标
准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮:“新建”、“打
开”、“保存”、“
保存全部”、“剪切”、“复制”、“粘贴”、“撤销”和“重做”。
如图7-11所示。
图7-11
6、文档窗口
当我们打开或创建一个项目,进入文档窗口,我们可以在文档区域中进行输入文字、插
入表格和编辑图片
等操作,它主要由项目选择标签、文档工具栏、水平标尺、垂直标尺、编
辑区域、状态栏、垂直扩展按钮
和水平扩展按钮构成,如图7-12所示。
“文档”窗口显示当前文档。可以选择下列任一视图:“设
计”视图是一个用于可视化页面
项目选择标签
布局、可视化编辑和快速应用程序开发的设计环境。
文档工具栏
水平标尺
编辑区域
垂直标尺
垂直扩展按钮
状态栏
图7-12
编辑区域是用于编辑网页和编写网页代码的区域,该区域有代码、拆分和设计3种视图模式。
❖
设计视图:单击文档工具栏中的按钮可以将编辑区域的视图模式切换到设计
视图模式,在该模式中可以直接对网页进行编辑。
❖
代码视图:单击文
档工具栏中的按钮可以将编辑区域的视图模式切换到代码
视图模式,在该模式中可以编写或修改网页代码
,如图
7-13
(
a
)所示。
❖
拆分
视图:单击文档工具栏中的按钮可以将编辑区域的视图模式切换到拆分
视图模式,在该模式下整个编辑区
域被分为上下两个部分,上边为代码视图,下边
为设计视图,如图
7-13(b)
所示
。这样可以在代码视图和设计视图之间进行切换,
并可对照编辑。
图7-13(a)
图7-13(b)
7、状态栏
“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。
图7-14
8、属性面板
属性面板并不是将所有的属性加载在面板上,而是根
据我们选择的对象来显示对象
的属性,属性面板的显示内容完全是随当前在文档中选择的对象来确定的。
9、
标签选择器
图7-15
位于“文档”窗口底部的状态栏中,它显示环绕当前选定内容的标签的层次结构。
单击
该层次结构中的任何标签可以选择该标签及其文档中标签的全部内容,如图7-16所示。
图7-16
其他面板为浮动面板,这些面板都浮动于编辑窗口之外。在初次使用Dreamweave
8的
时候,这些面板根据功能被分成了若干组。
图7-17
例如“文件”面板用于管理Dreamweaver 8
站点和远程服务器上的文件和文件夹,它
还可以访问本地磁盘上的全部文件,类似于 Windows
资源管理器,如图7-17所示。
7.1.5 Dreamweaver 8 帮助
1、打开帮助
选择菜单“帮助” →“Dreamweaver 8 帮助”。
搜索帮助
(1)可以对 Dreamweaver 8 帮助执行全文搜索。在
Dreamweaver 8 帮助中,单击
“搜索”选项卡。
(2)在文本框中键入一个单词或短语,然后单击“列出主题”。
(3)双击结果列表中的一个主题,可显示该主题。
若要搜索产品中的帮助
(Macintosh),请执行以下操作:
(1)在 Dreamweaver 8
帮助中,在“提出问题”文本框中键入一个单词或短语,
然后按 Enter。
(2)双击结果列表中的一个主题,可显示该主题。
2、使用索引
使用索引可以快速找到信息。
若要使用索引
(Windows),请执行以下操作:
(1)在 Dreamweaver 8
帮助中,单击“索引”选项卡。
(2)滚动到字母列表中的一个索引项,然后双击该项可显示索引信息。
提示:可以在文本框中键入一个关键字,以快速滚动到某一索引项。
若要使用索引
(Macintosh),请执行以下操作:
(1)在 Dreamweaver 8
帮助中,在目录中单击“索引”链接。
(2)单击某个字母以滚动到列表中的某一索引项。
(3)单击该项旁边的数字,可显示索引信息。
课堂小结
本节课所学知识点比较多,但应分清主次,应重点复习需掌握的内容
作业布置:
1、复习今天所讲的内容,网页的设计理念。
2、做相关的题
3、预习新课
思考题:
如何使用Dreamweaver 8 帮助
第二次课(2学时)
课题:§7.2站点的创建与管理
课型:理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解:了解站点的设计流程
掌握:1、掌握Dreamweaver8建立站点的方法。
2、掌握Dreamweaver8管理站点的方法。
重点与难点
重点:Dreamweaver8站点的设计、创建、管理方法。
难点:Dreamweaver8站点的管理方法。
教学进程
组织教学
复习提问引入新课
Dreamweaver8的
窗口、菜单的组成
讲授新课:
7.2.1 站点设计
1、认识站点
1)本地站点 本地站点是用户工作的目录,是存放用户网页、素材等的本地文件夹。在制作一般网页
时只需建立本
地站点即可。
(2)远程站点
若需要不连接Internet就能对所建的站点进行测试,
可以在本地电脑上创建远程站点模
拟真实的Web服务器环境进行测试。
(3)测试站点
测试站点主要是对动态页面进行测试时使用,是Dreamweaver
8处理动态页面的文件
夹。Dreamweaver
8使用此文件夹生成动态内容并在工作时连接到数据库。
2、规划站点结构
站点是管理网页
与素材的场所。规划站点结构是指利用不同的文件夹将不同的网页内容分门
别类地保存,合理地组织站点
结构,可提高工作效率。应该事先在本地磁盘上创建一个文件
夹作为站点的根目录,然后在文件夹下建若
干个子文件夹,形成合理的目录结构,将不同类
型的文件分门别类地存放在不同的目录中,在网站设计中
所有创建和编辑的网页都应当保存
在该文件夹中。在发布站点时,只需将此文件夹中的所有内容上传到W
eb服务器上即可。
制作网页所需的图片或动画等文件存放的位置也是规划站点结构时应考虑的。如果
是大
型站点,可在站点根目录下创建一个名称为images的文件夹,用以存放主页中用到的图片和动画。
3、制作导航流程
做好站点的规划后,就可以根据规划制作一个导航流程图,
以便理清思路,制作时可直
接在纸上粗略地绘出导航流程图。如图7-18所示是一个班级网站最初的导
航草图。
4、绘制页面草图
制作好导航流程图后,接下来应确定整个站点的页面风格,也就
是设计站点的样式和版面草
图。它可以用Photoshop、CorelDRAW和Firework
s等图形软件制作。
7.2.2 创建站点
1
、进入
Dreamweaver 8
工作界面后,选择【站
点】
【新建站点】命令或【站点】
【管
理站点】命令,弹出“管理站
点”对话框。单击
【站点】命令。
按钮,在弹出的下拉菜单中选择
3
、弹出站点定
义对话框,在“您打算为您的站点起什么名字?”文本框中输入站点名
称,如“班级网站”。
4
、单击按钮,在弹出的对话框中选中单选按钮。
5
、单击按钮,
在弹出的对话框中选择在开发过程中如何使用文件,这里选中
单选按钮,在“您将把文件存储在计算机上
的什么位置
?
”文本框中输入本地站点存储的位置,如“
f:dw
”
。
6
、单击按钮,在弹出的对话框中的“您如何连接到远程服务器?”下拉列表框中选择“无”选项。
7
、单击按钮,单击按钮完成本地站点的定义。
现在,你可以试着用上面介绍的方法,使用
Dreamweaver
8
创建一个名为“学校网站”
的站点。
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、Dreamweaver
8将自动在根目录下创建一个名为untitled的文件夹,如图7-30(b)所示。
d、新建的
文件夹名处于改写状态,读者可根据需要输入文件夹名,这里将文件夹命名
为images,然后按En
ter键确认,如图7-30(c)所示。
(2)删除文件或文件夹
如果某个站点下不需要
一些文件或文件夹,可以将其删除。删除文件或文件夹的方法是:
选择需删除的文件或文件夹并单击鼠标
右键,在弹出的快捷菜单中选择【编辑】【删除】
命令,或直接按Del键,在弹出的确认对话框中单击
按钮即可,(3)重命名文件或
文件夹
为了使文件名或文件夹名更加直观,常常需要为文件或文件夹重命名,
选择需重命名的文件或
文件夹并单击鼠标右键,在弹出的快捷菜单中选择【编辑】【重
命名】命令如图7-32所示,使文件或
文件夹名进入可改写状态,然后输入新的名称,按Enter
键确认名称即可。
(4)编辑文件
如果需要对站点中的文件进行编辑,除了可以使用第2章介绍的打开文件的方
法外,还
可以直接在“文件”面板中双击需要编辑的文件,打开该文件并进入编辑窗口进行编辑。 例:在D盘上建立自己姓名为名的文件夹,把这个文件夹定义为站点,站点名的“我
的个人网站”
操作步骤:
a、在D盘上建立文件夹
b、在Dreamweaver
8中,选择菜单“站点-新建站点”,可以按向导一步一步操作,也
可以直接选“高级”选项卡设置
c、在“本地信息”中,填入“站点名称”,把“本地根文件夹”指定为该目录
4、如何把一个已有目录定义为一个站点
例:首先单击下载网站,把网站包下载到D盘,并解
压缩,在D盘上会自动生成一个
文件夹,按上面所讲的步骤,把该目录定义为一个站点,站点名为”公司
网站”
5、使用站点管理器
例:以学校结构为例,学生自己创建学校网站站点。
课堂小结
教师结合学生完成实例的情况,对本节课的教学过程进行小结,指出学生在练习中存在
的问题。
作业布置
:1、复习今天所讲的内容,尤其是站点的创建与管理。
2、做选择题第2—4题。
3、预习新课
思考题
:站点地图的操作方法。
第三次课(2学时)
课题:§7.3
网页的基本操作
课型:理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解:网页的组成
掌握:1、掌握创建网页的操作方法。
2、掌握设置网页属性的方法。
3、掌握网页中添加文本和各种符号的方法。
重点与难点
重点:
创建网页的操作方法,网页的属性设置,网页中添加文本和各种符号的方法。
难点:网
页的属性设置
教学进程
组织教学
复习提问引入新课
复习上节课所学内容,为下面要做的实训做好准备,指出在操作中应注意的问题。
7.3.1
创建网页
创建网页有如下几种方法:
1、启动Dreamweaver
8的时创建网页,选择“创建项目”中的HTML,就可以创建一
个新的网页,如图7-33所示。
图7-33
2、在【文件】菜单中选择“新建”
命令。在弹出的“新建文档”对话框中“常规”选
项中,选择“基本页”,在“基本页”区域下选择
“HTML选项”,然后单击“确定”,即
可创建一个新的网页。
4、在站点窗口直接创建网
页。在“文件”面板中打开本地站点,然后单击右键,在弹
出的快捷菜单中,选择“新建文件”命令,即
可以创建一个新的网页。
7.3.2设置网页属性
1.设置网页外观
在“分类”列表框中选择“外观”选项,对话框右侧将显示“外观”选项的相应参数设置,
如图7-
36所示。其中各参数含义如下:
“页面字体”下拉列表框:用于设置网页中文字所使用的
字体,单击右侧的和按
钮可设置文本为加粗和斜体格式。
“大小”文本框:用于设置网页中文字的大小。
“文本颜色”
文本框:用于设置网页中文字的颜色,可以单击按钮,在弹出的颜
色列表中选择需要的颜色或直接在后面
的文本框中输入颜色的值。
“背景颜色”文本框:用于设置网页中的背景颜色,可
以单击按钮,在弹出的颜
色列表中选择需要的颜色或直接在后面的文本框中输入颜色的值。
<
br>
“背景图像”文本框:用于设置网页中的背景图像,在该文本框中输入背景图片的
路径
,也可单击按钮指定背景图片的路径。
“重复”下拉列表框:用于设置背景图像的重复方式。
“左边距”文本框:在该文本框中设置网页内容与浏览器左边界的距离。
“右边距”文本框:在该文本框中设置网页内容与浏览器右边界的距离。
“上边距”文本框:在该文本框中设置网页内容与浏览器上边界的距离。
“下边距”文本框:在该文本框中设置网页内容与浏览器下边界的距离。
图7-36 图7-37
2.设置超级链接样式
在“分类”列表框中选择“链接”选项,右侧将显示链接的相应参数设置选项,如图7-37
所示,其中
各参数的含义如下:
“链接字体”下拉列表框:用于设置网页中超级链接的字体
,单击右侧的和按
钮可设置超级链接的字体为加粗和斜体格式。
“大小”下拉列表框:在该文本框中设置超级链接字体的大小。
“链接颜色”文本框:设置超级链接的基本颜色。
“变换图像链接”文本框:设置鼠标指针移动到超级链接上时,超级链接的颜色。
“已访问链接”文本框:设置访问后的超级链接颜色。
“活动链接”文本框:设置正在访问的超级链接颜色。
“下划线样式”下拉列表框:设置超级链接的下划线类型。
3.设置标题样式
在“分类”列表框中选择“标题”选项,右侧将显示“标题”的参数设置选
项,如图
7-38所示,其中各参数的含义如下:
“标题字体”下拉列表框:在该下拉列表框中设置页面标题的字体。
“标题
1
”~“标题
6
”下拉列表框:在文本框中设置<
br>1
级标题至
6
级标题的字体、
大小和颜色。
图7-39
图7-38
4.设置网页标题和网页编码 在“分类”列表框中选择“标题编码”选项,右侧将显示标题编码的相应参数设置选
项,如图7-3
9所示,其中各参数的含义如下:
“标题”文本框:在该文本框中输入网页标题,该标题将出现在浏览器标题栏中。
“文档类型”下拉列表框:选择需要新建的网页类型。
“编码”下拉列表框:设置页面使用的字体编码类型。
5.设置跟踪图像
在“分类”列表框中选择“跟踪图像”选项,右侧将显示跟踪图像的相应参数设置选项,
如图7
-40所示,其中各参数的含义如下:
图7-40
“跟踪图像”文本框:指定一幅图像作为设计网页时的参考图像。
“透明度”栏:确定跟踪图像的不透明度,从左到右表示从完全透明到完全不透明。
7.3.3 添加文本
1、 添加普通文本
在Dreamweaver
8中为网页添加文本有直接输入文本、从其他文档中复制文本和导入文
本3种方式,下面分别进行讲解。
(1)直接输入文本
直接输入文本的方法较简单,只需将光标插入点定位在需添加文本的位置
,打开所需的
输入法直接输入文本即可。如图7-41所示为正在输入的文本。
(2)从其他文档中复制文本
从其他文档中复制文本的方法可以节省输入文本的时间,从而提
高制作网页的速度。先选
择要复制的文本,选择【编辑】【复制】命令或按Ctrl+C
键复制,然后切换到Dreamweaver
8
中,将光标定位在需添加文本的位置,再按Ctrl+V键进行粘贴即可。
(3)导入文本
1
、选择【文件】
【导入】
【
Word
文
档】命令,弹出“导入
Word
文档”对话框
,
如
图
7-43
所示。
2
、在“查找范围”下拉列
表框中选择导入文档的路径,然后选择要导入的文件,这里
选择“
”文件,在“格式化
”下拉列表框中选择需要保留的格式,这里选择“文
本、结构、基本格式(粗体、斜体)”选项
3
、单击按钮,系统自动导入“
”文件的内容如图
7-45
所示。
图7-45
图7-44
图7-43
提
示:如果只需导入表格中的文本,可以在“格式化”下拉列表框中选择“仅文本”选项。
如果需要保留所
有文本的样式,可以选择“文本、结构、全部格式(粗体、斜体、样式)”选
项。
7.3.4
添加特殊字符
1
、将光标插入点定位到所需位置。
2
、单击”插
入”栏右边的按钮,在弹出的下拉菜单中选择【文本】命令,如图
7-46(a)
所示将“插入
”栏切换为“文本”插入栏,如图
7-46(b)
所示。
3
、
单击按钮右侧的按钮,弹出如图
7-47
所示的菜单
,选择需添加的特殊字符即可。
提示:也可以选择【插入】
【HTML】【特殊字符】命令下的相应命令插入相应字符。
7.3.5 添加空格
要在
文档中添加连续空格,可单击“文本”插入栏的按钮,然后再连续按空格键,
也可以选择【插入】【HT
ML】【特殊字符】【不换行空格】命令或按Shift +Ctrl +空格键
为网页文本添加空格。
7.3.6 添加水平线
编辑网页时经常需要使用水平线将各种对象分隔开来,如经常会在
标题和正文之间添加
一条水平线,如图7-48所示。
1.添加水平线
在编辑窗口
中将光标定位到需要插入水平线的位置,选择【插入】【HTML】【水平
线】命令即可添加水平线。也
可将插入栏切换到HTML插入栏,然后单击按钮添加水平
线,如图7-49所示。
2.修改水平线属性
选择要修改属性的水平线,此时“属性”面板如图7-5
0所示。在“宽”和“高”文本框中
可设置水平线的宽度和高度值;在“对齐”下拉列表框中设置水平线
的对齐方式,如左对齐、
居中对齐、右对齐等;选中复选框,水平线会有阴影效果。
7.3.7 添加日期
有时可能会需要在网页中插入当前日期或时间,在
Dreamweaver 8
中可以
很方便地进行
相应操作,
1
、将光标定位到需要插入日期和时间的位置,选择【插入】
【日期】命令,弹
出如图
7-51
所示的“插入日期”对话框。
2
、在其中可设置星期格式、日期格式和时间格式。
3
、选中复选框,这样在每次保存文档时都将更新插入的日期。
4
、单击按钮在网页中插入日期和时间,如图
7-52
所示。
7.3.8 设置文本格式
设置文本的格式需要在文本“属性”面板中进行,选择要设置的
文本后,“属性”面板
如图7-53所示,在其中可以设置文本的字体格式和段落格式。
1、设置字体格式
图7-53
(1)设置文本的字体
1、在文本“属性”面板的“字体”下拉列表框中选择“编辑字体列表”选项,弹出“编
辑字体列表”
对话框,如图
7-54
所示。
2
、在“可用字体”列表框中选择需
要添加的字体,单击按钮将其添加到左侧的“选
择的字体”列表框中。如果要添加多种字体,重复操作即
可;若需取消某种字体,选择该字
体后单击按钮即可。
3
、选择一个字体样
式后单击“字体列表”列表框左上角的按钮可将该字体添加到“字
体”下拉列表框;如果需删除某个字体
样式,选择该样式后单击按钮即可。
4
、单击按钮关闭对话框,完成字体的添加。
在“大小”下拉列框表中选择
需要的字号即可改变文本的大小。“选择”下拉列表框中
除了用数字表示字号外,还有“极小”、“极大
”等选项,其含义如下:
较大:表示在原字号的基础上更大一点。
较小:表示在原字号的基础上更小一点。
极大:表示介于
24
~
36
之间的字号。
特大:表示介于
16
~
18
之间的字号。
大:表示介于
14
~
16
之间的字号。
中:表示介于
12
~
14
之间的字号。
小:表示介于
10
~
12
之间的字号。
特小:表示使用比极小大一点的字号。
极小:表示使用最小的字号。
(3)设置文本颜色
1
、选择需要设置颜色的文本,单击“属性”面板中的按钮,弹
出颜色列表,如图
7-55
所示。
2
、此时鼠标指针变为形状,单击需要的颜色,即可将文本设置为该颜色。
3
、如果列表中没有需要的颜色,可单击
要的颜色,如图
7-56所示。
按钮,弹出“颜色”对话框,在其中选择需
4
、单击按钮关闭“
颜色”对话框,此时即可将文本设置为该颜色。
2、设置段落格式
设置文本的段落
格式包括设置段落的缩进、对齐方式和列表项等。这些都是网页文档的
宏观设置,具有布局网页文档的作
用。
(1)设置段落的缩进
设置段落缩进包括增加段落的缩进和减少段落的缩进两种。将光
标插入点定位到需要设
置格式的段落中,单击“文本缩进”按钮可增加该段落的缩进,单击“文本凸出”
按钮
可减少段落的缩进。
(2)设置段落的对齐方式
设置段落的对齐方式是网页布局中必不可少的一个步骤,在Dreamweaver
8中可以对文
本进行居中、左对齐、右对齐或两端对齐等操作。
例如设置左对齐方法:将光标
插入点定位到需要设置对齐方式的段落中,单击“属性”
面板中的“左对齐”按钮,将对齐方式设置为左
对齐。
7.3.9 创建列表
1.项目列表
选择所需的文本,单击“属性”面板中的“项目列表”按钮
列表样式,如图7-57所示。
2.编号列表
选择所需的文本,单击“属性”面板中的“编号列表”按钮
列表样式,如图7-58所示。
即可将文本设置为项目
即可将文本设置为编号
7.3.10 预览网页
选择【文件】【在浏览器中预览】【iexplore
6.0】命令或单击文档工具栏中的按钮,
在弹出的下拉菜单中选择“预览在Iexplore
6.0”命令即可打开IE浏览器预览网页。
图7-58
7.3.11 保存网页
1.直接保存
选择【文件】【保存】命令即可直接保存当前网页,如果文档为新建的文档,则
执行
保存操作时会弹出如图7-59所示的“另存为”对话框,在“保存在”下拉列表框中选择文
件需保存的位置,在“文件名”文本框中输入保存文档的名称后,单击按钮即可。
图7-59
2.另存网页
对打开的网页,如果想保存为另外的名称或保存在其他位置,就需要对网页进行
另存操
作。其方法是:选择【文件】【另存为】命令,弹出“另存为”对话框,然后设置新的文
件名或保存位置,再单击按钮即可。
7.3.12 打开网页
选择【文件】
【打开】命令或在起始页中单击“打开最近项目”栏中的“”
超级链接,在弹出的“打开”对话框中
选择要打开的网页文件,再单击按钮即
可。
在【文件】
【打开最近的文件】命令的子菜单中选择一个最近打开的网页,或在开
始页的“打开最近项目”栏中单击
一个最近使用过的网页,可以直接打开该网页。
在“我的电脑”窗口中找到需要打
开的网页文件,在该文件上单击鼠标右键,在弹
出的快捷菜单中选择“使用
Dreamweav
er 8
编辑”命令即可启动
Dreamweaver
8
并打开
该文件。
课堂小结
教师结合学生完成实例的情况,对本节课的教学过程进行小结,指出学生在练习中存在
的问题。
作业布置
:1、复习今天所讲的内容,尤其是网站的建设与管理。
2、做相关的选择题
3、预习新课
思考题
: 如何设置网页的属性。
第四次课(2学时)
课题:§7.4网站的发布与维护
课型:理论课、实践课、任务驱动多媒体教学
教学目的与要求
了解:测试站点的方法
掌握:掌握网站的发布与网站维护方法。
重点与难点
重点:网站的发布方法
网站维护方法
难点:网站的管理与维护。
教学进程
组织教学
复习提问引入新课
创建网页的步骤
讲授新课:
7.4网站的发布与维护
7.4.1测试站点
1、检测无效链接
对站点中链接的测试可以使用【链接检查器】面板步骤如下:
(1)在编辑视图点击菜单栏的【站点】
【检查站点范围的链接】,弹出【结果】对话
框,如图7-60所示:
图7-60
是检查器检查出本网站与外部网站的链接的全部信息,对于外部链接,检查器不能判断正确
与否
,请自行核对。
如果不想删除这些文件,点击保存报告按钮,如图7-63所示,在弹出的对
话框中您给
报告文件一个保存路径和文件名即可。该报告文件为一个检查结果列表。你可以参照此表,<
br>进行处理。
图7-63
2、站点报告
我们可以对当前文档、选定的文件或整个
站点的工作流程或html属性(包括服装功能)运
行站点报告,在【结果】面板中,单击【站点报告】
图7-64
单击左侧【报告】按钮,弹出【报告】对话框,单击【报告在】右侧的下拉箭头,在弹
出的下拉
列表框中选择【整个当前本地站点】选项,然后在【选择报告】项目中选择要报告
的项目,单击【运行】
按钮,获得运行报告,
图7-65
3、测试浏览器的兼容性
在【结果】
面板中,单击【目标浏览器检查】选项卡,然后单击左侧的【检查目标浏览器】
按钮,在弹出的下拉菜单
中单击【】,将自动检查浏
览器的兼容性,
图7-66
7.4.2 发布站点
使用内置上传功能
(1) 执行【站点】【管理站点】命令,弹出【管理站点】对话框如图7-67所
示,
选择要上传的站点,单击【编辑】按钮,选择【高级】选项卡,在左侧的【分类】列表
中选
择【远程信息】,在【访问】下拉列表中选择【FTP】弹出扩展设置部分如图7-68
所示,设置部分
解释如下:
图7-67
FTP主机:上传站点的目标FTP服务器地址名称
图7-68
注意:名称中不能包括协议,一般格式为:
或者IP地址。例如输入:
218.26.207.133。
在“”文本框中,输入从
FTP 根文
件夹到远程站点的根文件夹。如果您不确定该路径,请咨询您的系统管理员。在许多情况下,此文本框应该留空。
登陆:登陆FTP的名称,即你的用户名。
密码:登陆FTP的密码,星号显示以保证信息的安全。
下面的复选框分别表示:是否使用
被动式FTP(通过本机的软件而不是服务器来建
立连接)是否使用防火墙(对于上传和下载文件要求特
殊的安全保障时使用),是否使
用SFTP加密安全登录(保证登录信息的安全性),课按照需要选择。
设置完全部参数
后,单击【确定】按钮,返回到【管理站点】对话框,单击【完成】。
(2)
进入【文件】面板,单击【连接到远端主机】按钮,连接到远程主机,
并出现进度条,如图7-69所示
。
图7-69
连接完毕后就可在站点面板中看到远程服务器上的目录,单击【扩展折
叠】按钮
可以同时看到远端站点和本地站点窗口,远程服务器上的所有文件(就像它在“本
地”
视图中显示计算机上的所有本地文件一样)如图7-70所示
。
图7-70
(3)上传本地文件
成功的建立与远程服务器的连接后,选
择文件
后,使用【上传文件】按钮或【获取文件】按钮
,可以上传或下载文件了。具体操作步骤
如下:
1、 上传文件
在【文件】面板中,选择要上传的文件后,单击
【上传文件
】按钮,完成文件的上传,如图7-71
所示,如果要上传站点必须上传本站点中的所有文
件。
7.4.3 维护站点
创建站点之后,可以使用【站点】菜单或【文件】面
板维护
站点了,如导入、导出、编辑、复制与删除站点等。
图7-71
打开【站点】菜单,可以看
到管理站点、获取、取出、
上传、存回等菜单命令,如图7-72所示。
单
击菜单中的【管理站点】命令,可以打开【管理站点】对话框,如图7-73所示。利
图7-72
用该对话框可以进行创建、编辑、复制、删除以及导入或导出站点等操作。
图7-73
1、 编辑站点
若要重新定义站点,可以选择站点后,单击【编辑】按
钮,利用所打开的站点定义对话
框重新定义站点,操作步骤如下:
在【管理站点】对话框中,
选择要编辑的站点,单击【编辑】按钮,在弹出的对话框中,
单击【高级】选项卡,我们可以任意编辑其
中的项目,如图7-74所示。
图7-74
提示:还可以
在【文件】功能面板下的【文件】选项卡中,单击右侧的
中的
【管理
站点】命令,在弹
出的对话框中编辑站点。
2、 复制站点
要复制站点,在【管理站点】对话框中,可以在选
择站点后,单击【复制】按钮。默认
情况下,复制的站点名会在原站点名的后面增加”复制”两个字,如
图7-75所示。
图7-76
3、删除站点
图7-75
要删除
站点,在【管理站点】对话框中,可以在选择站点后,单击【删除】按钮,删除
时Dreamweave
会提示该操作无法撤销,例如,删除刚才复制的站点如图7-76所示。
4、导出站点
通过
Dreamweave可以将站点导出站点定义文件(*.ste),然后将其导入到Dreamweave。<
br>这样,就可以在不同计算机和不同版本之间移动站点,或者与其他用户共享。单击【导出】
按钮,
可以将导出的站点保存为ste文件。操作步骤如下:
在【管理站点】对话框中,选择站点后,单击【
导出】按钮,弹出【导出站点】对话框,
如图7-77所示。选择保存该站点的位置,单击【确定】按钮
后,Dreamweave会在指定位置
将站点保存为后缀为ste扩展名的文件。
图7-77
提示:最好定期导出站点,如果该站点出现意外,还有备份的副本。
5、导入站点
在【管理站点】对话框中,单击【导入】按钮,弹出【导入站点】对话框,如图7-78
所示,选择要导
入该站点的ste文件,单击【打开】按钮后,重新命名站点,单击【确定】
按钮后,Dreamwea
ve导入该站点。
图7-78
课堂小结:
结合学生完成实例的情况,对本节课的教学过程进行小结.
作业布置:
1、复习今天所讲的内容。
2、预习新课
3、怎样发布和维护网站?
思考题:怎
样网站发布