第2章网页制作工具Dreamweaver 8.docx
- 文档编号:30310441
- 上传时间:2023-08-13
- 格式:DOCX
- 页数:45
- 大小:567.02KB
第2章网页制作工具Dreamweaver 8.docx
《第2章网页制作工具Dreamweaver 8.docx》由会员分享,可在线阅读,更多相关《第2章网页制作工具Dreamweaver 8.docx(45页珍藏版)》请在冰豆网上搜索。
第2章网页制作工具Dreamweaver8
第2章 网页制作工具Dreamweaver8
在网页制作过程中,如果采用传统的HTML编辑方法,会使得整个工作复杂冗长,因此网页开发人员通常会使用一些所见即所得的工具来进行此项工作,例如Dreamweaver、FrontPage、ASPEdit、HotDog等。
在这些工具中,Microsoft公司的FrontPage属于Office套装软件之一,它的操作界面类似于Word,因此非常容易学习,但是它的操作都是基于模板的,因此灵活性不大,适合初学者学习。
对想要在可视化环境下制作复杂网页的专业网页制作者来说,Dreamweaver是最佳选择,它提供给网页制作者更快速的设计、更容易的编码及整合性更强的功能。
利用它可以对Web站点、Web页和Web应用程序进行设计、编码和开发。
根据Macromedia公司的调查,Dreamweaver目前已累计有超过70万名的使用者,占有率在网页编辑工具中居首。
Dreamweaver的优越性体现在以下几个方面。
(1)简洁高效的设计和开发界面:
界面更易于使用,可使工作效率和工作质量均得到提高。
(2)“插入”工具栏的改进:
简洁高效的新外观,占用更少的工作区空间。
还新增加了一个“收藏”类别,可以对“插入”工具栏进行自定义,将最常使用的对象放置在该工具栏上。
(3)表格编辑可视化:
在表格中进行列调整操作时能看到实际效果。
(4)用户界面改进:
可得到最大的可用工作区,更清晰地显示上下文和焦点,更易于使用和更具逻辑性。
(5)起始页:
能够访问最近使用过的文件,创建新文件和访问Dreamweaver8资源。
起始页会在启动Dreamweaver8或尚未打开文档时显示。
(6)保存桌面选项:
可以选择当重新启动Dreamweaver8时重新打开上一次使用的文档。
(7)完全支持Unicode:
Dreamweaver8支持InternetExplorer所支持的所有文本编码方式。
可以使用几乎所有的系统中安装的语言字体,Dreamweaver8会正确地显示和保存这些字体。
(8)安全FTP:
能够完全加密所有文件传输。
(9)新式的页面布局和设计环境。
(10)增强的CSS功能:
提供了一个更为精巧的方法来进行样式设计及提高设计交互性。
(11)动态跨浏览器验证:
在保存文档时自动检查当前文档的跨浏览器兼容性问题。
下面将全面地介绍使用Dreamweaver8完成网站开发的方法。
2.1 概述
2.1.1 Dreamweaver8的窗口布局
Dreamweaver8提供了将全部元素置于一个窗口中的集成工作区。
在集成工作区中,全部窗口和面板集成在一个应用程序窗口中,用户可以选择面向设计人员的布局或面向手工编码人员的布局。
首次启动Dreamweaver时,会出现一个如图2.1所示的工作区设置对话框。
图2.1 Dreamweaver“工作区设置”对话框
用户可以从中选择一种工作区布局。
如果不熟悉编写代码,可以选择“设计者”选项。
如果以后想更改工作区,可以使用“编辑”→“首选参数”命令,在弹出的“首选参数”对话框中切换到一种不同的工作区布局。
“首选参数”对话框如图2.2所示。
图2.2 Dreamweaver“首选参数”对话框
2.1.2 Dreamweaver8的工作界面
选择了工作区布局后就进入了Dreamweaver8的工作界面,如图2.3所示。
图2.3 Dreamweaver8工作界面
在该界面中,主要包含以下几个部分。
1.标题栏
标题栏位于工作界面的顶部,包含了控制菜单按钮、应用程序名、当前网页的标题、打开的文档名称、“最小化”按钮、“还原/最大化”按钮以及“关闭”按钮等。
2.菜单栏
标题栏下面是菜单栏,如图2.3所示。
3.“插入”工具栏
“插入”工具栏在菜单栏下面,如图2.3所示。
“插入”工具栏包含用于创建和插入对象(如表格、层和图像)的按钮。
当鼠标指针滚动到一个按钮上时,会出现一个工具提示,其中含有该按钮的名称。
某些类别具有带弹出菜单的按钮,从弹出菜单中选择一个选项时,该选项将成为该按钮的默认操作。
例如,如果从“图像”按钮的弹出菜单中选择“图像占位符”选项,下次单击“图像”按钮时,Dreamweaver8会插入一个图像占位符。
每当从弹出菜单中选择一个新选项时,该按钮的默认操作都会改变。
“插入”工具栏按以下的类别进行组织。
(1)“常用”类别可以创建和插入最常用的对象,例如图像和表格。
(2)“布局”类别可以插入表格、div标签、层和框架。
还可以从3个表格视图中进行选择:
“标准”(默认)、“扩展表格”和“布局”。
当选择“布局”模式后,可以使用Dreamweaver布局工具“绘制布局单元格”和“绘制布局表格”。
(3)“表单”类别包含用于创建表单和插入表单元素的按钮。
(4)“文本”类别可以插入各种文本格式设置标签和列表格式设置标签。
(5)“HTML”类别可以插入用于水平线、文件头、表格、框架和脚本的HTML标签。
(6)“服务器代码”类别仅适用于使用特定服务器语言的页面,这些类别中的每一个都提供了服务器代码对象,可以将这些对象插入“代码”视图中。
(7)“应用程序”类别可以插入动态元素,例如记录集、重复的区域以及插入记录和更新记录。
(8)“Flash元素”类别可以插入Flash元素。
(9)“收藏夹”类别可以将“插入”工具栏中最常用的按钮分组和组织到某一常用位置。
4.“文档”工具栏
“文档”工具栏中包含的按钮可以实现在文档的不同视图间快速切换,包括“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的“拆分”视图,如图2.4所示。
(1)“代码”视图:
仅在“文档”窗口中显示“代码”视图。
(2)“拆分”视图:
在“文档”窗口的一部分中显示“代码”视图,而在另一部分中显示“设计”视图。
当选择了这种组合视图时,“视图选项”按钮弹出菜单中的“在顶部查看设计视图”选项变为可用。
可以使用该选项指定在“文档”窗口的顶部显示哪种视图。
(3)“设计”视图:
仅在“文档”窗口中显示“设计”视图。
(4)“标题”文本框:
为文档输入一个标题,它将显示在浏览器的标题栏中。
如果文档已经有了一个标题,则该标题将显示在该区域中。
(5)“没有浏览器检查错误”按钮:
可以检查跨浏览器兼容性。
(6)“文件管理”按钮:
显示“文件管理”弹出菜单。
(7)“在浏览器中预览/调试”按钮:
在浏览器中预览或调试文档,可以从弹出菜单中选择一个浏览器。
(8)“刷新设计视图”按钮:
在“代码”视图中进行更改后刷新文档的“设计”视图。
(9)“视图选项”按钮:
为“代码”视图和“设计”视图设置选项。
图2.4 Dreamweaver“文档”工具栏
5.状态栏
状态栏提供与正创建的文档有关的其他信息,如图2.5所示。
其中“标签选择器”显示环绕当前选定内容的标签的层次结构,单击该层次结构中的任何标签可以选择该标签及其全部内容,例如单击
可以选择文档的整个正文。“窗口大小”用于将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
图2.5 Dreamweaver状态栏
6.“属性”面板
“属性”面板用于查看和更改所选对象或文本的各种属性,如图2.3所示。
7.面板组
面板组是分组在某个标题下面的相关面板的集合,如图2.3所示。
若要展开一个面板组,请单击组名称左侧的展开箭头;若要取消停靠一个面板组,请拖动该组标题条左边缘的手柄。
8.“文件”面板
“文件”面板用于管理文件和文件夹,无论该文件和文件夹是Dreamweaver站点的一部分还是在远程服务器上,如图2.3所示。
“文件”面板还可以访问本地磁盘上的全部文件,类似于Windows中的资源管理器。
此外,Dreamweaver8提供了多种此处未说明的其他面板、检查器和窗口。
若要打开其可使用“窗口”菜单打开其他面板。
2.2 建立站点
Web站点是一组具有相关的主题、类似的设计、用超级链接连接好的文档和资源。
Dreamweaver8是一个站点创建和管理工具,使用它不仅可以创建单独的文档,还可以创建完整的Web站点。
为了达到最佳效果,在创建任何Web站点页面之前,应对站点的结构进行设计和规划。
决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
创建站点的步骤如下。
(1)启动Dreamweaver8,选择“站点”→“管理站点”命令,出现“管理站点”对话框,如图2.6所示。
图2.6 “管理站点”对话框
(2)在“管理站点”对话框中,单击“新建”按钮,然后从弹出菜单中选择“站点”选项。
出现“站点定义”对话框,如图2.7所示。
如果对话框显示的是“高级”选项卡,则单击“基本”选项卡就会出现站点定义向导的第一个界面,要求为站点输入一个名称。
在文本框中,输入一个名称,用于在Dreamweaver8中标识该站点。
图2.7 “站点定义”对话框
(3)单击“下一步”按钮,出现向导的下一个界面,询问是否要使用服务器技术,如图2.8所示。
选中“否,我不想使用服务器技术”单选按钮,指示目前该站点是一个静态站点,没有动态页。
单击“下一步”按钮。
图2.8 设置是否使用服务器技术
(4)出现询问要如何使用文件的对话框,如图2.9所示。
选中“编辑我的计算机上的本地副本,完成后再上传到服务器(推荐)”单选按钮。
在站点开发过程中有多种处理文件的方式,初学网页制作的用户请选择此选项。
图2.9 设置如何使用文件
(5)单击该文本框右侧的文件夹图标,会弹出“选择站点的本地根文件夹”对话框,选择要存放站点的文件夹。
注意:
在创建网站前需要事先做好一个专门存放网站的文件夹,该文件夹名字需要用小写英文书写,然后将站点信息和网站包含的所有文件保存在一起。
如果在同一个网站中使用的文件保存在机器的不同位置,在插入对象和建立超级链接的时候就会出错。
(6)单击“下一步”按钮,将询问如何连接到远程服务器,在下拉列表框中选择“无”选项(有关远程站点的信息和设置方法将在后续内容中介绍)。
本地站点信息对于开始创建网页已经足够了。
单击“下一步”按钮,显示站点定义的设置概要对话框,如图2.10所示。
图2.10 站点设置概要对话框
(7)单击“完成”按钮完成设置,返回“管理站点”对话框,在列表框中会显示新站点。
单击“完成”按钮关闭“管理站点”对话框。
为站点定义了一个本地根文件夹以后,用户就可以编辑自己的网页了。
2.3 网页制作
2.3.1 新建网页
创建新的页面,可以使用Dreamweaver8起始页来创建新文件,或者可以选择“文件”→“新建”命令,弹出如图2.11所示的对话框。
图2.11 Dreamweaver新建对话框
从各种预先设计的页面布局中选择一种。
比如:
选择“基本页”HTML,单击“创建”按钮,Dreamweaver8即展开如图2.3所示的工作区界面。
可以在这个空白页添加表格和输入文本进行编辑。
如果要向页面添加图片或其他元素,应先保存这个空白页。
选择“文件”→“另存为”命令,在“另存为”对话框中,浏览到站点本地根文件夹下,输入文件名,保存退出。
注意:
在网站创建过程中使用的所有文件名,包括站点、页面、图片等都要使用小写的英文或拼音文字命名,不能用中文,否则在文件浏览和链接时就很容易出现错误。
2.3.2 设置页面属性
1.设置网页标题
网页标题指的是显示在浏览器的标题栏中的部分。
设置时直接在设计窗口上方的标题栏内输入或更改,就可以完成网页标题的编辑了。
在Dreamweaver8中,网页标题和标题级文字设置的不是同一个对象。
2.设置页面属性
选择“修改”→“页面属性”命令,系统弹出“页面属性”对话框,如图2.12所示。
在此对话框中,可以设计网页的外观效果、超级链接、标题显示等。
“外观”是设置页面的一些基本属性,可以定义页面中的默认文本字体、文本字号、文本颜色、背景颜色和背景图像等。
“链接”选项内是一些与页面的链接效果有关的设置。
“链接颜色”定义超链接文本默认状态下的字体颜色,“变换图像链接”定义鼠标放在链接上时文本的颜色,“已访问链接”定义访问过的链接的颜色,“活动链接”定义活动链接的颜色。
“下画线样式”可以定义链接的下画线样式。
“标题”用来设置标题字体的一些属性,注意这里的标题并不是指上面说到的网页标题,而是可以应用在具体文章中各级不同标题上的一种标题字体样式。
可以定义“标题字体”及6种预定义的标题字体样式,包括粗体、斜体、大小和颜色等。
例如要修改网页中默认字体的颜色和大小,就可以在这个对话框中制作。
图2.12 “页面属性”对话框
2.3.3 处理网页文字
1.插入文本
要向Dreamweaver文档添加文本,可以直接在Dreamweaver的文档编辑窗口中输入文本,也可以剪切并粘贴,还可以从Word文档导入文本。
在文档编辑窗口的空白区域单击,窗口中出现闪动的光标,提示文字的起始位置,就可以将准备好的文字素材复制粘贴进来。
2.编辑文本格式
网页的文本分为段落和标题两种格式。
在文档编辑窗口中选中一段文本,在“属性”面板“格式”下拉列表框中选择“段落”选项,把选中的文本设置成段落格式。
“标题1”到“标题6”分别表示各级标题,应用于网页的标题部分,对应的字体由大到小,同时文字全部加粗。
另外,在“属性”面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等内容,如图2.13所示。
图2.13 设置文本格式的“属性”面板
3.设置字体组合
Dreamweaver8预设的可供选择的字体组合只有6项英文字体组合,要想使用中文字体,必须重新编辑新的字体组合,在“字体”下拉列表框中选择“编辑字体列表”选项,弹出“编辑字体列表”对话框,就可以将需要的中文字体添加进来了,如图2.14所示。
图2.14 “编辑字体列表”对话框
格式化文本时在"字体"下拉列表框中包含一个或多个字体组合,中间用(、逗号)分隔
4.文字的其他设置
(1)文本需要换行时,可按Enter键插入行距较大的换行(在代码区生成标签),按Shift+Enter键换行的行间距较小(在代码区生成
标签)。
网页文档中无法直接输入空格,要在文本中增加空格,可以选择“编辑”→“首选参数”命令,在弹出的对话框中左侧的“分类”列表框中选择“常规”选项,然后在右边选中“允许多个连续的空格”复选框,就可以直接按空格键给文本添加空格了。
网页中不支持直接输入空格,要输入空格,必须采用特殊字符的输入方法。
(2)向网页中插入特殊字符可以使用“插入”→HTML→“特殊字符”命令,或者在“插入”工具栏中选择“文本”类别,单击文本插入工具栏的最后一个按钮右侧的下拉按钮,可以向网页中插入相应的特殊符号。
(3)对于以列表方式排列的文字,可以分为有序列表和无序列表。
无序列表没有顺序,每一项的开头都以同样的符号显示,有序列表前边的每一项有序号引导。
在文档编辑窗口中选中需要设置的文本,选择“文本”→“列表”→“项目列表”命令,则选中的文本被设置成无序列表,选择“文本”→“列表”→“编号列表”命令则被设置成有序列表。
(4)插入水平线。
水平线起到分隔文本的排版作用,选择“插入”→HTML→“水平线”命令,即可向网页中插入水平线。
选中插入的这条水平线,可以在“属性”面板中对它的属性进行设置。
(5)插入日期。
在文档编辑窗口中,将鼠标光标移动到要插入日期的位置,单击常用插入工具栏中的“日期”按钮,在弹出的“插入日期”对话框中选择相应的格式即可,或者可以使用“插入”→“日期”命令。
2.3.4 处理网页图像
1.插入图像
如果要在网页中插入图像,首先要构想好网页布局,在图像处理软件中将需要插入的图片进行处理,然后存放在站点根目录下的文件夹里。
目前互联网上支持的图像格式主要有GIF、JPEG和PNG,其中使用最为广泛的是GIF和JPEG。
常用的插入图片的方法有以下3种。
(1)选择“插入”→“图像”命令,弹出“选择图像源文件”对话框,选中需要插入的图像文件,单击“确定”按钮,如图2.15所示。
图2.15 “选择图像源文件”对话框
(2)使用“插入”工具栏。
在常用插入工具栏中单击
按钮,弹出“选择图像源文件”对话框,其余操作同上。
(3)使用“文件”面板组中的“资源”面板,如图2.16所示。
在面板组中打开“资源”面板,在“资源”面板上单击
按钮,展开根目录的图片文件夹,选定相应图片文件,拖动至工作区合适位置。
图2.16 “文件”面板组
注意:
在插入图片的时候,如果没有将图片保存在站点根目录下,会弹出图2.17所示的对话框,提醒用户要把图片保存在站点内部,这时单击“是”按钮,然后选择本地站点的路径将图片保存,图像也可以被插入到网页中。
如果插入的图片文件是存放在站点根目录之外的,在浏览器中浏览网页就会发生错误,图片无法正确显示,因此在弹出图2.17的对话框时,一定选择“是”按钮将图片复制到站点根目录中。
图2.17 插入位于站点根目录外图像时的提示对话框
2.设置图像属性
选中图像后,在“属性”面板中显示出了图像的属性,如图2.18所示。
图2.18 图像的“属性”面板
在“属性”面板的左上角,显示当前图像的缩略图,同时显示图像的大小。
在缩略图右侧有一个文本框,在其中可以输入图像标记的名称。
“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其他页面元素的距离。
“边框”文本框用来设置图像边框的宽度,默认的边框宽度为0。
“替换”下拉列表框用来设置图像的替代文本,可以输入一段文字,当图像无法显示时,将显示这段文字。
单击“属性”面板中的对齐按钮,可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。
而“属性”面板中的“对齐”下拉列表框用于设置图像与文本的相互对齐方式,共有10个选项。
通过它可以将文字对齐到图像的上端、下端、左边和右边等,从而可以灵活地实现文字与图片的混排效果。
3.插入其他图像元素
在“插入”菜单中除了“图像”命令外,还有“图像对象”命令,它包括“图像占位符”、“鼠标经过图像”、“导航条”等选项。
图像占位符指的是在布局页面时,如果要在网页中插入一张图片,可以先不制作图片,而是使用占位符来代替图片位置。
选择“插入”→“图像对象”→“图像占位符”命令,打开“图像占位符”对话框。
按设计需要设置图片的宽度和高度,输入要插入图像的名称即可。
鼠标经过图像指的是该图像位置由两个图像组成,网页载入时显示一张图像,当鼠标指针移过该图像时显示另外的图像。
制作该效果通常要求两张图片大小相同。
2.3.5 插入Flash动画
1.插入Flash动画
选择“插入”→“媒体”→Flash命令,找到相应的Flash文件插入即可。
插入的Flash动画并不会在文档窗口中显示内容,而是以一个带有字母F的灰色框来表示。
在网页编辑窗口单击这个Flash文件,就可以在“属性”面板中设置它的属性。
2.设置Flash动画的背景为透明
如果要忽略Flash文件本身的背景颜色,使网页的背景在Flash下能够衬托出来,可以将Flash文件的背景变为透明。
选中插入的Flash文件,单击“属性”面板中的“参数”按钮,打开“参数”对话框,设置参数为wmode,值为transparent,如图2.19所示。
这样在任何页面中,Flash动画都能实现透明背景的显示效果。
图2.19 设置Flash文件的参数
3.插入其他Flash对象
在“插入”→“媒体”命令的子菜单中还可以插入一些现成的Flash对象,例如Flash文本和Flash按钮。
这些对象的效果变换方法都已经设计好了,插入对象时设置相应的变化状态就可以使用了,使用它们进行导航文字和图标的设计非常方便。
2.3.6 添加背景音乐
网页中常见的声音格式有WAV、MP3、MIDI、AIF、RA和RealAudio格式。
针对不同类型的声音文件和格式,将声音添加到Web页面的方法也不同。
在确定采用哪一格式和方法添加声音前,需要考虑以下因素:
添加声音的目的、文件大小、声音品质和不同浏览器中的差异。
因为浏览器不同,处理声音文件的方式也会有很大差异和不一致的地方。
最好的办法是将声音文件添加到Flash影片,然后嵌入SWF文件以改善一致性。
要在页面中嵌入背景音乐,格式应该是WAV、MP3或MIDI文件。
设置好音乐文件后,在文档左下角的“标签选择器”中选择“
”标签,如图2.20所示。图2.20 “
”标签打开“行为”面板,单击“+”按钮添加行为,在下拉菜单中选择“播放声音”选项,如图2.21所示。
图2.21 “行为”面板
在弹出的“插放声音”对话框中单击“浏览”按钮,选择声音文件,如图2.22所示。
一个网页的背景音乐就添加好了。
保存页面后,按F12键预览网页,所插入的声音文件就会使用WindowsMediaPlayer(媒体播放器)播放。
注意,采用这种方法添加页面的背景音乐,默认的播放器都是WindowsMediaPlayer。
如果浏览该网页的用户没有安装该播放器,则无法听到背景音乐。
图2.22 选择声音文件
如果希望循环播放音乐,在页面上选中插入音乐文件的图标,在“属性”面板上单击“参数”按钮,在打开的“参数”对话框中,将“LOOP”参数的值改为“true”,单击“确定”按钮。
如果要让音乐文件自动播放,将“AUTOSTART”参数的值改为“true”就可以实现了,如图2.23所示。
图2.23 设置背景音乐的参数
2.3.7 添加视频
要将视频文件添加到网页中,可以用“插入”→“媒体”→“插件”命令来插入视频文件。
但是,不同格式的视频需要的播放器不一样,插件也不一样,采用直接插入的方法难以保证网页浏览过程中视频的正常播放。
因此,最好的方法是将视频文件添加到Flash影片,然后嵌入SWF文件以改善一致性。
2.3.8 制作超级链接
网站中通常有很多页面,如果页面之间彼此是独立的,那么网页就好比是孤岛,这样的网站是无法运行的。
为了建立起网页之间的联系必须使用超级链接。
根据链接对象的不同,制作的方法也不一样。
设置超级链接时需要找到被链接文件的位置,这时需要指定被链接对象的路径。
网页文件的路径通常有以下几种。
绝对路径,为文件提供完全的路径,包括适用的协议,例如HTTP、FTP,RTSP等。
如果链接的是其他网站上的文件或资源,则采用绝对路径是合适的。
相对路径最适合网站的内部链接。
如果链接到同一目录下,则只需要输入要链接文件的名称。
要链接到下一级目录中的文件,只需要输入目录名,然后输入“/”,再输入文件名。
如链接到上一级目录中的文件,则先输入“../”再输入目录名、文件名。
根路径是指从站点根文件夹到被链接文档经由的路径,以前斜杠开头,例如,/fy/maodian.html就是站点根文件夹下的fy子文件夹中的一个文件(maodian.html)的根路径。
1.页面之间的超级链接
在网页中选择要做超级链接的文字或者图片,在“属性”面板中单击“链接”文本框右侧的黄色文件夹图标按钮,在弹出的对话框里选中相应的网页文件,一个页面间的超级链接就完成了(被链接的页面要事先做好、保存)。
做好超级链接,“属性”面板出现链接文件显示,如图2.24所示。
图2.24 超级链接的设置
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第2章 网页制作工具Dreamweaver 网页 制作 工具 Dreamweaver