《网页设计与制作第5章利用dreamweavermx制作网页》由会员分享，可在线阅读，更多相关《网页设计与制作第5章利用dreamweavermx制作网页（86页珍藏版）》请在金锄头文库上搜索。
1、通过本章学习，应该掌握以下内容：Dreamweaver MX的基本操作 利用Dreamweaver MX站点管理 利用Dreamweaver MX创建网页的基本对象,第5章 利用Dreamweaver MX制作网页,Dreamweaver是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与FrontPage不同，Dreamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。一旦习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是FrontPage所无法比拟的。,5.1 Dreamweaver MX基本操作,5.1.1 Dreamwe
2、aver MX的界面,1Dreamweaver MX的界面,（1）菜单栏菜单栏提供了所有的菜单命令，是提供软件最完整功能的方式。（2）工具栏工具栏提供了常用命令的快捷启动方式，例如可以使用工具栏中的“标题”框方便地设置网页的标题。（3）插入面板插入面板是Dreamweaver MX中新添的部件，其实就是Dreamweaver 4中的对象面板，在其中包含一些用于创建不同类型对象的按钮。,（4）浮动面板浮动面板是一种方便操作的界面方式，使用者可以随时获得特定功能。 （5）文档窗口文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。 （6）属性面板属性面板上显示的是被选取
3、对象或文本的各种属性，在属性面板上还可以检查和编辑当前选定页面元素的属性。,2. Dreamweaver的视图,单击工具栏上的视图切换按钮 ，即显示设计视图；使用工具栏中的按钮 ，则可以很方便地切换到代码视图，以便查看当前编辑网页的HTML源代码；如果需要同时查看代码视图和设计视图，可以单击工具栏上的显示代码和设计按钮 ，此时Dreamweaver将同时在窗口中显示代码视图和设计视图。,（1）代码视图与设计视图,（2）文档窗口文档窗口是显示用户所编辑文档的地方，显示结果与文档在浏览器中显示的结果基本相同。文档窗口的标题栏显示页面标题，圆括号内显示的是文件名，如果文档有未保存的部分，则还会出现一
4、个星号。控制被选文本或对象的标记符出现在文档窗底部左边的标记符选择器上。单击这些标记符可以准确地选取标记符及其控制的内容。单击窗口大小下拉菜单，用户可以将文档窗口的大小设为预设值或自定义值。,（3）插入面板选择“窗口”|“插入”命令，出现插入面板，如图5-5所示。在插入面板上包含了多种不同类型的按钮，用于在文档中创建不同类型的对象。默认情况下，插入面板中显示的是“常用”工具组中的工具图标。单击插入面板上的对象类型标签，会打开相应的插入面板，显示插入面板上所包含对象的类型。,图5-5 文档窗口,5.1.2 Dreamweaver MX文件操作,Dreamweaver MX可以打开多种格式的文件，
5、它们的扩展名分别是html、shtml、asp、js、dwt、xml、1h、as、css等。 （1）直接打开文件选择“文件”|“打开”命令，则会打开“打开”对话框。用户在文件名框里选择需要打开的文件，并单击“打开”按钮，即可打开该文件。,1文件的打开,（2）打开库文件在框架网页中，选择“文件”|“在框架中打开”命令，则会打开“选择HTML文件”对话框，如图5-7所示。在此方式下只能打开以HTML为扩展名的文件。,在Dreamweaver MX中创建新的网页文件，有以下3种方法：启动Dreamweaver MX，即可直接创建一个新的网页文件，等候编辑。如果Dreamweaver MX已经启动，要
6、创建新网页，可以选择“文件”|“新建”命令，打开“新建文档”对话框。从该对话框中选择一种需要创建的文件格式，然后单击“创建”按钮即可。,2. 文件的新建,如果要基于模板创建文档，则可以通过选择“文件”|“新建”命令，在出现的“新建文档”对话框中单击“模板”标签，该对话框变为“从模板新建”对话框，如图5-9所示。然后从该对话框左边的列表框中选择模板所在的站点，再在右边的模板列表中选择一个模板，用户还可以通过预览区域预先浏览所选择模板的样式，看看是否符合自己的要求。选择需要使用的模板后，单击“创建”按钮，即可基于模板创建新文档。,如果同时打开了多个Dreamweaver MX窗口，而保存的目的只是
7、为了保存文件，则切换到要保存的文档所在的窗口，然后选择“文件”|“保存”命令。如果所需要保存的网页文件中带有框架文件，而保存的目的是保存该网页文件中所有的文件，则应该选择“文件”|“保存全部”命令。 如果希望将一个网页文档以模板的形式保存。首先切换到要保存的文档所在的窗口，然后选择“文件”|“另存为模板”命令。,3. 保存网页文件,在Dreamweaver MX的编辑窗口，选择“窗口”|“站点”菜单，即可打开站点面板。在站点面板中，用户可以选择菜单“站点”|“新建站点”命令创建新站点，也可以使用“站点”|“编辑站点”命令编辑已有的站点。,5.2 站点管理,5.2.1 定义站点,1. 站点面板,
8、Dreamweaver MX的站点面板,返 回,在Dreamweaver MX中创建站点的方法有两种:（1）通过站点定义向导创建站点在编辑窗口或站点面板选择命令菜单“站点”|“新建站点”选项，弹出“站点定义”对话框1，选择“基本”选项卡，然后,按照提示进行选项设置.,2. 创建站点,（2）直接定义站点在编辑窗口或站点面板选择命令菜单“站点”|“新建站点”选项，弹出“站点定义”对话框1，选择“高级”选项卡，然后,按照提示进行选项设置.,如果要打开站点，可执行如下操作之一： （1）选择菜单栏“站点”|“站点文件”命令，即可在站点面板中打开当前编辑文件所在的本地站点，同时在文档窗口中可以进行该站点文
9、档的编辑操作。 （2）在站点面板中打开工具栏的“站点”下拉列表框，选择需要打开的站点，文件窗口中即会显示该站点文件夹和文件信息。,5.2.2 站点的基本操作,1打开站点,若要复制当前站点，可以使用文档窗口或站点面板中“站点”菜单的“编辑站点”命令，打开“编辑站点”对话框。选中要复制的站点名称，单击“复制”按钮即可对当前站点进行复制操作。执行复制站点操作后，系统会自动复制一个所选择的站点，并且会为复制的站点加上一个“拷贝”字样的站点名称。,2. 复制站点,如果要更改当前站点设置，比如对站点进行修改站点名称、设置参数选项等编辑操作，可以利用上面的方法打开“编辑站点”对话框，选中一个站点后单击“编辑
10、”按钮，即可打开该“站点定义为”对话框，选择“高级”选项卡进行站点编辑。,3编辑站点,在Dreamweaver MX中删除一个站点非常容易，在弹出的“编辑站点”对话框中，单击“删除”按钮就可以删除选中的站点。,4删除站点,注意：此删除操作并未真正删除站点文件夹和其中的内容，而只是无法再用Dreamweaver管理该文件夹而已。如果需要再次用Dreamweaver管理该文件夹，只要用新建站点的方式再次将该文件夹指定为站点根目录即可。,页面布局是进行网页设计最基本最重要的工作之一。Dreamweaver MX提供了一个布局工具布局视图。使用这个工具，页面布局变得轻松快捷。,5.3 创建网页的基本要
11、素,5.3.1 网页布局及属性设置,1页面的布局,在创建文档前，或创建文档后还需要对页面的属性进行必要设置，设定一些影响整个网页的参数。设置页面属性的方法如下：选择“修改”|“页面属性”命令，出现“页面属性”对话框，在该对话框中对页面的属性进行设置。,2设置页面属性,1）换行（1）自动换行：在输入文字时，若某一行的长度超过了Dreamweaver MX窗口的显示范围，文字将自动换到下一行。（2）利用“Enter”换行：在输入文字后按“Enter”键，文字成段，且上下段之间空一行。（3）利用“Shift+Enter”键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按“Shift+Ent
12、er”键。,5.3.2 在网页中插入文本,1编辑文本,Dreamweaver MX中，在文本开始处按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：（1）按住“Ctrl+Shift”键，按一次空格键，键入半个空格。（2）将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。（3）将编辑窗口切换到代码视图，在要输入空格的地方输入代码代码，产生半个空格。,2）输入空格,有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，在Dreamweaver MX中，这些特殊字符不仅可以通过“插入”菜单下的“特殊字符”命令来插入，还可以
13、通过插入“字符”面板来直接插入。,3）插入特殊的字符,在网页中加入适当的注释文字，可以为日后修改、管理网页提供方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注文字会破坏版面。将光标移到想要插入的注释地方，然后在插入“常用”面板中单击“注释”按钮，或选择“插入”|“文本对象”|“注释”命令，弹出“注释”对话框，再单击“确定”按钮即可。,4）加入注释文字,5）插入水平线,在页面中插入水平线的方法如下：首先确定插入水平线的位置，然后单击插入面板上“常用”选项卡中的按钮 ，或选择“插入”|“水平线”菜单命令，则可在页面中插入了一条水平线。选中水平线，打开水平线属性面板，可以设置水
14、平线的属性。,如果要在文档中查找或替找某个文字，可利用Dreamweaver MX提供的查找和替换功能。选择“编辑”|“查找和替换”命令，打开“查找和替换”对话框。在该对话框中进行查找和替换操作。,2. 查找/替换文本的内容,在Dreamweaver MX中设置文本格式可以通过属性面板，类似于Microsoft Word中对文本的属性设置，包括段落的格式、字体、字号、字的颜色、字体加粗/倾斜、对齐方式（左对齐/居中/右对齐）、文字所链接的路径或URL等。,3. 设置文本格式,4. 添加和删除中文字体,在Dreamweaver MX英文版中，默认状态只有西文的字体可供选择，要使用中文字体可以事先
15、将计算机里的中文字体添加到Dreamweaver MX的字体列表中。,在Dreamweaver中插入图像非常简单，具体操作步骤如下：（1）打开网页，将光标移到将要插入图像的位置。（2）用下列3种方法中的任意一种方法，打开“选择图像源”对话框，如图所示。 在插入“常用”面板中，单击插入图像按钮。 直接拖曳插入“常用”面板中的插入图像按钮至页面的光标处。选择Dreamweaver MX主菜单中的“插入”|“图像”命令。,5.3.3 使用图像,1插入图像,“选择图像源”对话框,返 回,（3）在对话框中选择查找图像文件的路径，选中“预览图像”复选框，选定图像的预览图就显示在对话框的右侧。 （4）如果文
16、件存放在网站的目录中，那么将“相对于”下拉列表调整到“文档”项。 （5）然后单击“确认”按钮，图像就插入到网页中了。,在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息，如图所示。,2图像属性参数,图像属性面板的左上方有一个缩略图，它的右边是“图像”字样，“图像”的右边是当前文件大小，下方的空格可以键入名称，以便将来使用时好调用该文件。,改变图像的尺寸大小，可以通过在属性面板中的“宽”和“高”文本框中直接输入数值来改变图像的尺寸大小，当在网页中需要精确地定位元素时，这种方法可以帮助设计者达到预想的效果。不过这种方法有一个弊端，如果数值输入不当，可能造成图像在浏览器中无法正常显示。此外，还可以通过拖放图像四周的缩放边框来改变图像的尺寸。,3改变图像的尺寸,Dreamweaver中调整图像位置的方法很简单，简述如下：（1）选中页面中要编辑的图像；（2）打开图像属性面板中的“对齐”下拉列表，在列表中选择需要的选项。,
