1、第3章 网页设计基础,3.1 Dreamweaver MX简介3.2 创建新站点3.3 网页文件的基本操作3.4 简单网页的制作实例3.5 本章摘要与重点回顾,Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的Web 应用程序开发以及广泛的代码编辑支持。它新增了对ASP、JSP、ASP.NET、PHP等动态网页的支持，可以实现完整的数据库的编写。也就是说，Dreamweaver MX不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂
2、功能。,3.1 Dreamweaver MX简介,启动Dreamweaver MX与启动一般软件的方法相同，其过程是依次选择Windows XP操作系统中的【开始】【所有程序】MacromediaDreamweaver MX选项。也可双击桌面上的快捷方式图标来启动Dreamweaver MX。第一次启动Dreamweaver MX，系统会显示让设计者选择工作区布局的对话框，如图3-1所示。,3.1.1 Dreamweaver MX的启动方式,Dreamweaver MX工作区的3种选择是Dreamweaver MX工作区、Dreamweaver 4工作区、HomeSite/代码编写者样式。习惯
3、于使用Dreamweaver 4的设计者可以继续使用Dreamweaver 4风格的工作区界面，无须花费精力适应新的工作区环境。HomeSite/代码编写者样式是一个纯代码编辑界面，具有较高网页编程水准的用户，可选择这个工作区界面完成手编程序的调试工作。,本书主要介绍Dreamweaver MX风格的工作区。在图3-1中，选择【Dreamweaver MX工作区】，单击【确定】按钮，系统显示【欢迎】对话框，如图3-2所示。这是软件为使用者熟悉和学习新软件而设置的对话框，Dreamweaver的老用户可查询Dreamweaver MX的新特性，新用户可以学习Dreamweaver MX的功能和特
4、性。了解了软件的功能和特性后，关闭Dreamweaver MX的【欢迎】对话框，即可看到Dreamweaver MX全新的工作界面。,Dreamweaver MX新的工作区环境比早期的版本更加灵活、方便、实用。工作区窗口由标题栏、菜单栏、工具栏、网页文件编辑区、状态栏和浮动面板组等基本部分组成，如图3-3所示。启动Dreamweaver MX后，屏幕显示的是工作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。工作区窗口各部分功能如下所述。,3.1.2 Dreamweaver MX的工作环境,1. 标题栏标题栏是显示当前网页的标题信息，当前被
5、编辑网页文件的路径和文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以对窗口完成【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。,2. 菜单栏菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。,3. 文档工具栏在菜单栏的下面是文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的3种视图方式之间切换，改变网页的编辑方
6、式。设计者在编辑网页的过程中可随时了解相应的HTML代码，或者在编写HTML代码时方便地看到网页的设计效果。在【标题】文本框中可输入当前网页名称，如果当前网页文档已经有了一个标题，则该标题将显示在该文本框中。右边是一些文档常用的工具按钮，如图3-4所示。,文档工具栏中主要的工具按钮功能如下。 (活动数据视图)： 能够实时动态测试数据库中数据。 (文件管理)： 单击这个按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查以及方便团队工作的设计备注等菜单命令。 (网页预览和调试)： 单击这个按钮可以在下拉菜单中实现网页预览（可按F12键代替），纠正J
7、avaSript的错误以及选择浏览器等。, (刷新设计视图)： 用于刷新本地和远程站点的目录列表。 (参考查询)： 显示设计者所单击的标签、属性或关键字等有关的信息。 (代码导航)： 可在 JavaScript 代码中进行设置断点，方便设计者编辑调试手写代码。 (视图选项)： 单击这个按钮可以在下拉菜单中实现一些人性化的功能，如HTML代码高亮度显示、语法颜色提示、代码缩进、行号提示、页面排版标记显示等。,4. 网页文件编辑区网页文件的编辑区域是Dreamweaver MX的主工作区。启动Dreamweaver MX时，就创建了一个空白的网页文件等待编辑，网页编辑区的大小可以通过用鼠标拖曳编辑
8、区右面边框线来调整，或者单击编辑区右面边框线上的按钮，完成最大化或还原网页编辑区的操作，如图3-5所示。,5. 状态栏状态栏显示当前网页的有关信息。在状态栏中自左至右分别是： 标记选择器（Tag Selector）、页面信息栏（视窗设置框、页面信息框）、快速启动条，它们特点和功能如下所述。1) 标记选择器编辑网页时，将光标置于网页某个位置，便会在标记选择器中显示相应的HTML标记，单击HTML标记则可选择网页中相对应的编辑对象。右击某个HTML标记，选择快捷菜单中的相应命令，可对HTML标记做进一步的编辑。,2) 视窗设置框在视窗设置框中显示的当前文档窗口的大小都是以像素为单位的。这个窗口尺寸
9、是动态显示的，用鼠标拖动文档窗口边框改变窗口大小时，显示的窗口尺寸也会随之改变。单击视窗设置框右边的小按钮，在弹出的快捷菜单中选择【编辑大小】命令，可以定制窗口的大小尺寸，如图3-6所示。,3) 网页信息框网页信息框显示网页容量、传输速率和该网页在Internet上完全下载的时间（系统默认的连接速度为28.8Kbps）。例如表示当前网页文档大小为25KB，下载时间约为4秒。将连接速度改为当前主流产品的速度56Kbps，便可关注当前正在编辑的网页下载所需的时间，如图3-6所示。,4) 快速启动条快速启动条是状态栏最右边可选的显示项目，其中是用来快速打开和关闭各种面板、检查器和窗口的按钮。快速启动
10、条是否在状态栏上显示，以及在快速启动条中定制哪些按钮都可以根据需要自行设定。选择【编辑】【参数选择】命令，打开【参数选择】对话框。在【分类】列表中选择【面板】选项，并选中【在面板和启动器中显示图标】的选项，可在状态栏右边显示快速启动条。利用按钮和可选择快速启动条中的启动按钮和调整快速启动按钮的次序，如图3-7所示。,6. 浮动面板和浮动面板组Dreamweaver MX的浮动面板是该软件的一个特色，它不同于对话框。用对话框来设置对象的各种属性后，必须关闭对话框才能看到设置的效果。利用浮动面板对网页对象进行属性设置，在网页编辑窗口中可以直接看到操作的结果，从而避免了属性设置的盲目性，真正实现了“
11、所见即所得”的实时编辑功能。浮动面板组也是Dreamweaver MX的一个特色。设计者可以按自己的需要组合或拆分浮动面板组中的浮动面板。,Dreamweaver MX默认的浮动面板组有以下5个。(1) 【设计】浮动面板组包含【CSS样式】、【HTML样式】、【行为】3个浮动面板，主要提供交互式网页设计和网页格式化的工具。(2) 【代码】浮动面板组包含【标签检查器】、【代码片断】、【参考】3个浮动面板，主要提供方便手编代码的调试工具。(3) 【应用程序】浮动面板组包含【数据库】、【绑定】、【服务器行为】、【组件】4个浮动面板，主要提供动态网页设计和数据库管理的工具。,(4) 【文件】浮动面板组
12、包含【站点】、【资源】2个浮动面板，主要提供管理站点的各种资源。(5) 【答案】浮动面板组包含教程、技术说明、在线更新系统等几个选项，使设计者能快速了解掌握和更新维护Dreamweaver MX。(6) 【结果】面板组可为设计者提供搜索验证文件、检查超链接(也称超级链接)、站点报告、服务器调试等结果信息。(7) 【高级布局】面板组可为设计者提供层、框架等Web 页面元素定位工具等。,常用的浮动面板组的操作方法如下所述。(1) 展开和折叠浮动面板组： Dreamweaver MX的每个浮动面板组都具有展开与折叠的功能，单击面板左上角的三角标记即可展开与折叠浮动面板组，如图3-8所示。(2) 移动
13、浮动面板组： 将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标时，便可移动浮动面板组。利用这种方法可将浮动面板组拖离浮动面板组停靠区，或将浮动面板组拖入浮动面板组停靠区。,图3-8 展开和折叠的浮动面板组,(3) 重新组合浮动面板： 选中浮动面板组中某个选项卡，单击浮动面板组右上角的按钮，打开下拉式菜单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮动面板，如图3-9所示。,图3-9浮动面板组的级联菜单,(4) 浮动面板组的其他操作： 选中浮动面板组中的某个选项卡，单击浮动面板组右上角的按钮，打开下拉式菜单，选择【重命名面板组】命令，可在弹出的【重命名面板组】
14、的对话框中给面板组定制一个个性化的名字，如图3-10所示； 在下拉式菜单中选择【最大化面板组】和【关闭面板组】命令，便可完成对面板组的相应操作。,图3-10【重命名面板组】对话框,7. 【插入】面板无论多么精美的网页，其基本组成元素无非是些图片、文字以及多媒体特效。对这些网页元素，可以利用【插入】面板中的工具按钮来置放在网页上。【插入】面板处理Web设计中的一些最常用的对象元素，如图像、文本、特殊字符、Flash动画等。,【插入】面板在网页文件编辑区上方，如图3-3所示。选择【窗口】【插入】命令可显示或隐藏【插入】面板，Ctrl+F2快捷键是显示或隐藏【插入】面板的切换开关，其中默认的12个选
15、项卡分别为： 常用、布局、文本、表格、框架、表单、模板、字符、媒体、文件头、脚本、应用程序。单击选项卡标签可在不同的选项卡之间切换。12个选项卡的主要用法在后面的章节中将逐一介绍。在整个【插入】面板中，选项卡中的按钮可以根据自己的爱好和需要来重新定制。选择【编辑】【参数选择】命令，打开【参数选择】对话框。在【分类】列表中选择【常规】选项，在【插入】面板的下拉菜单中，可进行如下选择。,(1) 图表和文本： 选择该项，则在【插入】面板上既显示图标也显示文本。(2) 仅图标： 选择该项，则在【插入】面板上只显示图标，这是系统默认的选择。(3) 仅文本: 选择该项，则在【插入】面板上只显示按钮的说明文
16、本。如果【插入】面板显示区域太小，则会在面板左侧显示一个向上或向下的小箭头，借助小箭头可以翻滚整个选项卡上的内容，如图3-11所示。,图3-11【插入】面板的默认选项卡,8. 【属性】面板【属性】面板位于网页文件编辑区下方，是用来显示、设置和修改网页中当前选中对象的属性的重要工具。选择【窗口】【属性】命令可显示或隐藏【属性】面板，Ctrl+F3快捷键是显示或隐藏【属性】面板的切换开关。当某个页面对象的属性被修改后，可以直接在编辑窗口中预览到对象被修改后的结果，真正实现了交互式面对面地修改网页对象功能。,对于选择文字、表格、层、表单等不同的对象，【属性】面板的设置内容也会相应有所不同。另外，为了
17、不过多地遮挡网页编辑窗口，设计者还可根据需要单击【属性】面板右下角的三角形按钮，展开和折叠【属性】面板。如图3-12所示的是图像【属性】面板（折叠），如图3-13所示的是表格【属性】面板（展开）。关于【属性】面板的具体使用方法将在后面章节逐一介绍。,图3-12 图像【属性】面板（折叠）图3- 13 表格【属性】面板（展开）,在Dreamweaver MX中，打开和关闭浮动面板的操作除了在浮动面板组中完成外，还可以选择【窗口】菜单中的相关命令或按相应的快捷键来完成。按F4键可显示或隐藏全部浮动面板组。,一个网站主页可以看成是一系列相关文档的集合，设计者在制作一个网站的主页时，实际上是将这些相关文
18、档通过各种超链接把它们联系在一起。浏览者通过浏览器程序从一个网页转跳到另一个网页，从而对整个网站的主页进行访问。,3.2 创建新站点,Dreamweaver MX除了网页制作外的另一项功能是网站管理，利用Dreamweaver MX的网站管理功能可对位于Internet服务器上的网页文件直接进行编辑操作。但是由于目前网络速度较慢和网络不稳定等因素会给网站管理和文件编辑带来不必要的麻烦，而且对远程Internet服务器上的网页文件进行在线编辑，其上网的费用也是很昂贵的，所以设计者一般都是先在本地计算机上创建网站的本地站点，设计、编辑和调试网页及其相关文件，当网页编辑调试完毕后再利用文件上传工具，
19、将本地站点的内容上传到Internet服务器上，完成远程站点的构建。,先建立本地站点既可以从全局上控制网站的结构，完成对网页的编辑调试工作，又可以提高效率、降低成本。创建网站一般有以下几个步骤。(1) 规划站点： 了解建站的目的，收集各种有关的资料。确定站点的主题、风格、网站要提供的服务和网页要表达的主要内容。(2) 创建站点的基本结构： 在计算机中创建本地站点的根文件夹以及存放各种资料的子文件夹，配置好所有系统的参数和站点测试路径。(3) 网页设计： 充分利用收集到的数据资料，合理地运用Dreamweaver MX提供的技术，最完美地设计出能表达网站中心思想的Web 页面。,所谓本地站点即在
20、本地计算机的硬盘上创建一个文件夹，并把这个文件夹设置为本地站点的根文件夹。在网页制作中将会使用大量的图片、照片、动画文件和文本文件。一个比较成熟的网站会有很多各种类型的文件。为了便于管理，可在本地站点的根文件夹中分门别类地建立子文件夹，然后按类型把不同的文件存放在不同的子文件夹中，以便使站点结构清晰明了，文件管理更加方便。,3.2.1 创建本地站点,注意： 在网页设计中，不要用中文作为文件名或文件夹名；网页文件命名时区分字母大、小写；每个网站都有而且只有一个首页，浏览者在访问该站点时首先访问这个文件，首页文件的名字一般可命名为index.htm；首页文件index.htm应该放在站点的根文件夹
21、下。,创建本地站点的操作步骤如下。（1） 选择【站点】【新建站点】命令，打开【站点定义】对话框，如图3-14所示。在【基本】选项卡的【您打算为您的站点起什么名字?】文本框中输入站点名称，本例输入My site。（2） 单击【高级】标签，在【高级】选项卡中设置本地站点的参数，如图3-15所示。,图3-14【站点定义】对话框,图3-15设置本地站点参数,（3） 在对话框左侧的【分类】列表中显示了站点设置的多种类型选项，从中选定不同选项后，其右侧选项卡中将显示不同的设置内容，选择【本地信息】选项可设置本地站点。（4） 在【站点名称】文本框中输入当前编辑的站点名称。本例用My site作为站点的名称。
22、设计者可能会创建多个站点，站点名称是站点的标识，便于Dreamweaver MX对各个站点分别管理。站点名称不能含有“”、“/”、“： ”、“；”、“*”、“？”、“”、“”、“”符号。,（5） 在【本地根文件夹】文本框中输入本地站点所对应的本地根文件夹，指明当前创建的网页所在的位置。单击文本框右侧的按钮，可用浏览的方式输入本地站点的路径。若在文件列表区域右击，可利用快捷菜单新建一个文件夹，并可将其指定为本地根文件夹。（6） 选中【自动刷新本地文件列表】复选框后，当设计者将文件复制到站点有关的文件夹中时，系统会自动更新站点文件列表。如果不选该复选框，则要单击站点管理器窗口中的【刷新】按钮，才能
23、自动更新站点的文件列表。,（7） 在【默认图像文件夹】文本框中输入本地站点所对应的图像文件夹，指明当前创建的网页所用图片的位置。单击文本框右侧的按钮，可用浏览的方式输入本地站点的路径。（8） 在【HTTP 地址】文本框中，输入当前网页将要使用的网址。如果设计者已经申请了域名，可在此文本框中输入申请好的域名。例如网站的网址是http: /202.121.160.100，可将此网址输入到【HTTP 地址】的文本框中。,（9） 选中【缓存】复选框后，Dreamweaver MX会给这个本地站点设置一个缓存，以提高站点管理的速度。（10） 完成以上设置后，单击【确定】按钮，新的本地站点就创建完毕。【分
24、类】列表中的其他6类选择项是【远程信息】、【测试服务器】、【遮盖】、【设计备注】、【站点地图布局】、【文件视图列】。用Dreamweaver MX对站点管理器以及对系统设置进行调整的方法将在第11章中作详细的介绍，对于初学者来说，这6类选项的参数不妨采用系统默认的参数。,3.2.2 创建站点地图Dreamweaver MX的站点地图是提供本地站点结构的高度可视化的表现形式，可用于管理站点内的文件和目录，对站点内的文件进行改名、编辑和删除等基本操作；也可用来完成添加、删除、更改站点内的超链接等操作。在站点地图的窗口中，站点的首页总是出现在地图的最上端，在首页的下面显示所有与首页有链接关系的文件，
25、如图3-16所示。,图3-16【站点】地图结构,创建站点地图的操作步骤如下。 （1） 选择【站点】【站点文件】命令，或者按F8键打开【站点】浮动面板。（2） 在【站点】下拉列表框中选择要创建地图的站点名（本例选择站点My site）。（3） 在【站点视图方式】下拉列表框中选择【本地视图】，并在文件列表中右击文件index.htm，在快捷菜单中选择【设成首页】命令，将其设为My site站点的首页。（4） 选择【站点】【站点地图】命令，或者按Alt+F8键显示站点地图，如图3-16所示。,在站点地图中，有些文件旁边有个加号，表示该文件与其他文件有链接关系。单击加号可展开该文件的所有链接，单击减号
26、可折叠该文件的所有链接。如果要修改或设置站点的首页文件，可选择【站点】【编辑站点】命令，在【编辑站点】对话框中选中要编辑的站点名，并单击【编辑】按钮，如图3-17所示。,图3-17【编辑站点】对话框,此时在【定义站点】对话框中（见图3-15），单击【高级】标签，在【高级】选项卡左侧的【分类】列表中选定【站点地图布局】选项，在其右侧的选项卡中修改站点的主页。另外在此选项卡中还可以设置站点地图的【列数】和【列宽】，设置站点地图中小图标的名字是按网页文件名还是按网页标题来显示，以及是否显示被标记的隐藏文件等参数，如图3-18所示。,图3-18【站点地图布局】设置,选择【站点】【站点文件】命令，可以按
27、文件列表的形式查看本地站点，选择、添加新文件和文件夹，剪切、粘贴、复制、删除、重命名文件，具体操作方法如下所述。,3.2.3 站点中的文件操作,1. 在本地站点中新建文件夹要在本地站点中新建文件夹可打开【站点】浮动面板，选择【文件】【新建文件夹】命令，然后在本地文件列表中命名新建的文件夹。或者，在【站点文件】视图的某个文件夹上右击，并选择快捷菜单中的【新建文件夹】命令，便可完成新建子文件夹的操作。,2. 在本地站点中新建文件与在本地站点中新建文件夹一样，若要在站点中新建文件，可打开【站点】浮动面板，选择【文件】【新建文件】命令，然后在本地文件列表中命名新建的文件。或者，在【站点文件】视图的根文
28、件夹上右击，并选择快捷菜单中的【新建文件】命令，便可完成新文件的创建。,3. 在站点中选择多个文件在【站点文件】视图中选择多个文件可用以下操作方法： (1) 单击第一个文件，按住Shift键，然后单击最后一个要选择的文件，可选择一组连续的文件。(2) 按住Ctrl键，然后单击要选择的文件，可选择一组不连续的文件。,4. 在本地站点中剪切、粘贴、复制、删除、重命名在【站点文件】视图中对文件的剪切、粘贴、复制、删除、重命名操作可先选中要操作的文件，右击选中的对象，在快捷菜单中选择相应的命令或按相应的快捷键便可完成相应的文件操作。,3.3.1创建、打开和保存网页文件 1. 创建HTML文档 2. 打
29、开已建的HTML文档 3. 保存指定文件 4. 关闭文件,3.3 网页文件的基本操作,在创建新网页时，默认的页面总是以白色为背景，没有背景图像和标题。制作一个Web 页面时，一般需要先设置网页的页面标题、背景图像和颜色，文本和超链接的颜色，文档编码方式，文档中各元素的颜色等属性。选择【修改】【页面属性】命令，系统将打开【页面属性】对话框，如图3-20所示。设计者可对Web 页面的各项参数进行设置，各项参数具体意义如下所述。,3.3.2 设置网页的页面属性,图3-20【页面属性】对话框,(1) 在【标题】文本框中输入页面标题（其内容将出现在浏览器窗口的标题栏上）。(2) 在【背景图像】文本框中，
30、输入页面背景图片的路径和文件名，或者单击文本框右边的【浏览】按钮，在打开的【选择图像源】对话框中选择背景图片的路径和文件名，如图3-21所示。选中文件后单击【确认】按钮。图3-21【选择图像源】对话框(3) 在【背景】文本框中，设置页面的背景颜色。若设置了页面的背景图片，则此处的设置不再起作用。,图3-21 【选择图像源】对话框,(4) 在【文本】和【链接】文本框中，设置网页文件中默认的文本和链接文本颜色。(5) 在【访问过的链接】和【活动链接】文本框中，设置网页文件中访问后链接的文本和动态链接的文本颜色。(6) 在【左边界】和 【顶部边界】文本框中，设置整个页面距离浏览器左侧边缘和顶部边缘的
31、宽度，通常设置为0。(7) 在【边界宽度】和【边界高度】文本框中，设置整个页面距离页边的宽度和高度，通常可设置为0。,(8) 在【文档编码】下拉式菜单中，设置用于显示文档字符集字体的HTML编码方式。(9) 在【跟踪图像】文本框中，输入页面跟踪图像的路径和文件名。或者单击文本框右边的【浏览】按钮，在打开的【选择图像源】对话框中选择跟踪图像的路径和文件名，如图3-21所示。选中文件后单击【确认】按钮。借助该图片安排网页布局，该图片浏览时是见不到的。(10) 在【图像透明度】中，可设置跟踪图像的透明度。,在网页设计时，经常要对页面背景、文字、链接、激活的链接设置颜色。一种颜色可以由色调、亮度、饱和
32、度来定义，也可以由其所含的红、绿、蓝（RGB）的比例所对应的值来定义。例如，在Dreamweaver MX中对文字设置颜色，可选择【文本】【颜色】命令，打开【颜色】对话框，如图3-22所示，在这个对话框中可以选择【基本颜色】，也可以通过右侧的色板和滑块来选择新的颜色，并把选中的新颜色添加到【自定义颜色】中去。还可以用Dreamweaver MX中颜色的工具“吸管”来检测选取颜色。,3.3.3设置网页对象的颜色,图3-22【颜色】对话框,1. 网页中文本输入2. 设置汉字的字体列表3. 输入网页中的空格4. 文本换行5. 文本的属性设置,3.3.4 网页文本的输入和属性设置,1. 网页图像格式简
33、介(1) GIF（Graphics Interchange Format）(2) JPEG（Joint Photographic Experts Group）(3) PNG（Portable Network Graphic）2. 插入网页图像的方法注意：应先将该网页文档保存在本地站点中，然后再将该网页文档打开后插入图像文件，此时图像文件以相对路径插入。图像文件不要以URL的绝对路径插入，否则会导致图像不能显示。,3.3.5 网页图片的插入和属性设置,3. 图像的属性设置(1) 在【图像】文本框中可以设置该图像的名称。(2) 在【宽】和【高】文本框中设置的是该图像的宽度和高度。(3) 在【源文件
34、】文本框中输入这个图片的路径和文件名称。也可以单击文本框右边的图标，以浏览的方式得到图形文件的路径和名称。(4) 在【链接】文本框中设置图像超链接的URL地址，此时该图像被设置为一个超链接的源端点。(5) 在【替代】文本框可输入图像的说明文字。,(6) 单击【编辑】按钮，可打开外部编辑器进行图片编辑。设计者用右击图片，或按住Ctrl键再双击图片，在快捷菜单中选择【编辑方式Fireworks】命令，也能打开Fireworks进行图片编辑。(7) 单击【重设大小】按钮，将改变了大小的图像重新设置为图像的原始尺寸。(8) 在【垂直边距】和【水平边距】两个文本框中设置图片四周空出的尺寸。(9) 在【目
35、标】下拉列表中指定图像链接的目标文件的显示方式。如果图像无链接，此项设置无效。,(10)在【低品质源】文本框中指定另一个图像，这个图像一般是原图的低品质替换图形。在原图没有显示出来之前先显示这幅图，让浏览者能大体了解图形的内容。(11)【边框】文本框中可输入图形边框的宽度。(12)3个按钮定义图像在页面中的对齐方式：左对齐、居中对齐和右对齐。对齐方式和文本在页面中的对齐方式一样。(13)在【对齐】下拉式列表中是设置在一行中图形和文本的对齐方式，其功能分别为： (14)在【地图】中选择创建热区的工具可建立图像的多个链接热区，具体操作方法在第4章中介绍。,图3-32在网页中插入的图像及其图像【属性
36、】面板,例3.2 制作如图显示的网页。,3.4 简单网页的制作实例,本例的制作要求如下： （1） 页面的背景图片为bg0000.jpg； （2） 在合适的位置插入图片earth.gif ；（3） 在网页中输入横排带阴影的文字“BusinesstoCustomer”和“欢迎访问电子商务网站”；（4） 将网页用welcome.htm为名保存在本地站点My site中。,完成本例的操作步骤如下。 （1） 启动Dreamweaver MX，选择【站点】【新建站点】命令。（2） 在弹出的对话框中，在【站点名称】文本框中输入“应用实例”。（3） 单击【本地根文件夹】文本框右边的图标，在【选择站点】对话框中
37、右击，选择快捷菜单【新建】【文件夹】，在当前盘的根目录下创建文件夹My site。（4） 将My site文件夹设置为本地站点的根目录。（5） 将配套盘上文件夹ch03复制到本地站点的根文件夹My site中。,（6） 在Dreamweaver MX网页编辑器窗口中，选择【修改】【页面属性】命令，在【页面属性】对话框中设置各项参数。（7） 在【标题】文本框中输入【实例1】。（8） 单击文本框【背景图像】右边的【浏览】按钮，选择本地站点的文件夹ch03中的文件bg0000.jpg后，单击【确定】按钮； 将【左边界】、【顶部边界】、【边界宽度】、【边界高度】分别设置为0； 然后单击【确定】按钮。（
38、9） 选择【文件】【另存为】命令，将网页用welcome.htm为名保存在本地站点My site中。,（10） 选择【插入】【层】命令，或单击【插入】面板中【常用】选项卡的按钮，在工作区合适的位置上插入图片定位用的层Layer1，并将光标定位在层中。（11） 选择【插入】【图像】命令，或单击【插入】面板中【常用】选项卡的按钮，在打开的【选择图像源】对话框中，选择要插入的图像文件的路径和文件名，将ch03文件夹中的图像文件earth.gif插入层中，并调整图片至合适处。 （12） 在网页合适处插入第二个层Layer2，在层中输入文字BusinesstoCustomer，并设置文字属性，字体为“黑
39、体”，大小为5，颜色为#000000（黑色）。,（13） 选中层中的文字，按Ctrl+C快捷键将文字复制到剪贴板，在页面合适处插入第三个层Layer3，并将文字粘贴到层Layer3中。（14） 将Layer3中的文字颜色改为#FFFFFF(白色)，并适当调整层Layer3，使文字产生阴影效果。（15） 用同样的方法，在网页合适处插入带阴影的文字“欢迎访问电子商务网站”。（16） 按F12键预览网页，选择【文件】【保存】 命令，将网页用welcome.htm保存在本地站点My site中。,在本章中详细介绍了Dreamweaver MX的启动方式和工作环境，重点介绍了本地站点的创建和设置、网页文件的创建与保存、页面属性设置与基本编辑方法，还介绍了创建、编辑一个简单网页的过程。本章涉及的重点知识有： 本地网站设置、网页的创建和保存的方法、网页对象文本与图像的插入、页面属性设置、文字的属性设置、图像的属性设置、层的简单应用、字体列表的编辑等。,3.5 本章摘要与重点回顾,
