《网页设计》完整课件网页设计

第四讲Dreanweaver

MX网页设计基础及基本操作与文字编辑主要内容：一、Dreamweaver

MX简介二、Dreamweaver

MX工作界面三、Dreamweaver

MX基本操作与文字编辑四、五、本节小结六、作业•《网页设计》完整课件网页设计Dreamweaver

MX简介•《网页设计》完整课件网页设计Dreamweaver

MX是Macromedia公司推出的最新版本的优秀的可视化、功能强大的所见即所得的网页制作工具，一直以来它是专业人事的首选。因为它不但能够完成一般网页编辑器所能完成的工作，而且还能制作出许多需要通过编程才能达到的效果。而对于广大的爱好者来说，该软件功能强大、界面友好、操作方便、容易掌握。只要熟练掌握该软件的使用，便能够制作出相当高水平的网页。必须注意：Dreamweaver和现在市场上使用的其它的网页制作软件如Frontpage,微软的Word等在风格上有所不同，Dreamweaver采用的是

Macromedia浮动面板的设计风格，对于初

学者来说，可能会感到不适应。但当你习

惯了其操作方法后，就会发现Dreamweaver的直观性和高效性是Frontpage和其它软件所无法比拟的。更多的体会可能只能靠我

们同学学习、掌握、熟练使用该软件以后…留给同学们自己总结了。•《网页设计》完整课件网页设计Dreamweaver

MX工作界面介绍当我们第一次启动Dreamweaver

MX软件时，会弹出一个工作界面选择窗口：•《网页设计》完整课件网页设计可以让用户根据自己的需要设置，可选择的界面包括“Dreamweaver

MX工作区”和“Dreamweaver

4工作区”。（也就是说，Dreamweaver

MX提供了有二种工作界面的风格：）第一种：将全部元素置于一个窗口的集成布局风格，即“Dreamweaver

MX工作区”。请看下图示例：•《网页设计》完整课件网页设计对象面板属性面板标题栏主菜单中间空白的就是网页编辑区（文档窗口）状态栏面板组站点面板Dreamw•e《a网v页e设r计M》X完工整课作件界网页面设计第二种：非常类似于

Dreamweaver

4的浮动布局风格，即“Dreamweaver

4工作区”。请看下图示例：•《网页设计》完整课件网页设计提示：如果不是第一次使用DreamweaverMX，如何可以重新设置自己的需要的界面？也就是说：选择一种工作区后要切换到另一个工作区该怎么办？操作方法是：1、选择Dreamweaver

MX中的菜单“编辑”→“参数选择”命令，会弹出“参数选择”对话框：•《网页设计》完整课件网页设计参数选择对话框可以修改工作区的风格•《网页设计》完整课件网页设计2、在“参数选择”对话框中的左侧的

“分类”列表中选择“常规”类。3、单击“更改工作区”按钮。4、选择一种工作区布局，然后单击“确定”按钮。此时系统会出现一条警告信息，通知您重新启动Dreamweaver后将出现新的布局。5、退出Dreamweaver

MX，并重新启动它，就换了一种工作界面。•《网页设计》完整课件网页设计DreamweaverMX工作区功能介绍•《网页设计》完整课件网页设计一、标题栏标题栏用来显示当前编辑页面的标题。标题的内容相当于HTML中TITLE标记引出的标题内容。在括号中显示了当前文件所在的目录和文件名。如果该文件尚未保存或尚未保存的改动时，则文件名后面将会有星号出现，提醒你保存。二、主菜单主菜单中包括文件（File）、编辑（Edit）、查看（View）、插入（Insert）、修改（Modify）、文字（Text）、命令（Commands）、站点（Site）、窗口（Window）、帮助（Help）十个菜单选项。每个菜单中又包括许多命令和子菜单，当单击菜单中的命令时，就会执行相应的功能。主菜单中囊括了Dreamweaver中的所有功能和命令，这就像是《网页设计》完整课件网页设计Dreamweaver的大本营一样。三、对象面板（“插入”栏）•《网页设计》完整课件网页设计对象面板的作用就是在光标的后面加入不同的对

象，如表格、图像、图层等。它包含用于将各种类型的“对象”插入到文档中的按钮。对象面板共分12项，分别是：常用、布局、文本、

表格、框架、表单、模板、字符、媒体、文件头、脚本、应用程序。对象面板是在网页中创建各种类型元素的重要工

具，使用对象面板时，只要单击对象按钮到页面编辑窗口就可以插入对象了。根据插入的对象不同，Dreamweaver会弹出相应的对话框，让用户对插入的对象做进一步的设置。四、状态栏•《网页设计》完整课件网页设计状态栏的左边是HTML元素信息条，它以

HTML的方式显示光标当前位置的网页元素信息。可以在此选中HTML标签，所以有的教科书把称为HTML标签选择器。567×289表示窗口大小信息栏，它可以显示和调节窗口的大小。1K/1秒表示当前文件的大小和下载的时间（或者是网页的连接速度）。五、属性面板（属性检查器）•《网页设计》完整课件网页设计属性面板用于检查或修改当前页面中被选定元素的各种属性。当用户在属性面板中修改对象属性后，大多数的属性都可以立即在文档窗口中显示出来，如改变图像的对齐方式等。而有些个别属性需要将当前操作焦点跳出文本框或按Enter键后才能更新。如修改图像尺寸。说明：属性面板的内容是动态变化的，它会随当前选择对象的不同而变化，因为不同类型的对象拥有不同的属性。六、网页编辑区（文档窗口）•《网页设计》完整课件网页设计在DreamweaverMX界面的中间空白处就是网页编辑区，或者称为文档窗口，它显示当前创建和编辑的文档。该窗口基本可以显示页面在浏览器中的最终显示效果，其中有些元素只能在浏览器中才能正确显示，如一些图片或Flash动画等。运行DreamweaverMX后会自动新建一个空白的文档窗口，用户就可以在其中进行各种输入、设计、编辑操作。七、面板组：面板组是组合在一个标题下面的相关面板的集合。•《网页设计》完整课件网页设计面板组包含有设计面板（包括“CSS样式”、

“HTML样式”、“行为”）、代码面板、

应用程序面板、文件面板。若要使用某个

面板，（则要展开一个面板组），单击组

名左侧的展开箭头。若要取消停靠一个面

板组，请拖动该组标题条左边的手柄。八、“站点”面板：“站点”面板可以管理组成站点的文件和文件夹。非常类似

Windows的资源管理器。DreamweaverMX基本操作•《网页设计》完整课件网页设计主要介绍以下四个问题：定义本地站点创建主页文件设置页面属性输入文本并对文本进行编辑什么是站点？在第一次上课介绍网页基础知识时，我们简单介绍了站点。站点（或称Web站点、网站）指的是一组具有共享属性（如相关的主题、类似的设计或共同的目的）的链接文档。绝大多数网页设计都是围绕站点目的进行的。理解：将制作好的一些相关网页以一定形式组织起来，这就是站点。严格地说，站点是网页文档的磁盘组织形式，它是由文档和文档所在的文件夹组成（利用不同的文件夹，将不同的内容分门别类地保存，便于管理和•《网更页设新计》完）整课。件网页设计介绍几个概念：1、本地计算机：若你正在使用的一台计算机，同时也是用来存放上传到服务器之前时所有的网页及站点的内容，则这台电脑称为本地计算机。2、本地站点：指的是本地计算机创建的站点。实质上它是指网站中所有的网页文件在本地计算机的存放位置。3、远程计算机：除了本地计算机外，还应

该有一台计算机来发布主页，供Internet用户浏览，这台计算机就叫做远程计算机。实际上就是Internet服务器。•《网页设计》完整课件网页设计4、远程站点：在本地站点设计完毕后，可以利用各种FTP程序将本地站点上传到Internet服务器上，形成远程站点。5、站点的规划和设计：指的是创建

Web站点通常是从对其进行规划开始的：决定要创建多少页、每页上显示什么内容、以及网页是如何互相链接起来的。•《网页设计》完整课件网页设计22创建本地站点的方法：■单1、击第一此步处必须编先辑在本母地版计算标机题的磁样盘上建立一个文件夹。（作为本地站点的根文件夹）式

提示：为了方便以后管理站点上的文件，先在本单地击文此件处夹编中辑创母建版几副个标目题录样：式htm、img、others，分别存放网页设计中用到的资源及网页文件。

2、建立本地站点，选择主菜单中的

“站点/新建站点”命令，在弹出的新建站点对话《网框页设计进》完行整课件设网页设置计。创建本地站点新建站点的操作步骤：第一步：选择菜单中的“站点”→“新建站点”命令，如图所示：在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：为站点输入一个名称，中、英文均可•《网页设计》完整课件网页设计第二步：单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：如

ASP、JavaServer

Page

JSP）•《网页设计》完整课件网页设计第三步：单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹储存

站点文件（包括网页文件及设计网页用到的其它资源）指定的文件夹称为站点的本地根文件夹•《网页设计》完整课件网页设计第四步：单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择

“无”。如下图所示：•《网页设计》完整课件网页设计第五步：单击“下一步”按钮，弹出如下图设置概要。单击“完成”按钮，完成设置。•《网页设计》完整课件网页设计*使用“高级”选项卡定义站点操作方法：选择“高级”选项卡，在“分类”区域中选择“本地信息”，如下图所示：•《网页设计》完整课件网页设计说明：在“站点名称”文本框中，输入站点的名称。

在“本地根文件夹”文本框中，指定本地计算机的磁盘上用于存放所有站点文件的文件夹。（如果本地根文件夹尚不存在，应先创建好的文件夹）。

在“自动刷新本地文本列表”选项中，指定每次文件复制到本地站点时，

DreamweaverMX是否自动刷新本地文件列表。

在“默认图象文件夹”文本框中，指定此站点的默认图象文件夹的路径。•《网页设计》完整课件网页设计

在“http地址”文本框中，输入已完成的Web站点将使用的URL。

对于“启用缓存”选项，指定是否创建本地缓存以提高链接和站点管理任务的速度，这是DreamweaverMX提供的很好的资源，要

选中。在本地计算机上设计网页，本地站点的信息

设置已经足够了，远程站点的信息以后设置。•《网页设计》完整课件网页设计创建主页文件的步骤•《网页设计》完整课件网页设计方法一：

启动了DreamweaverMX软件，如同启动

Word等其它应用软件一样打开了一个新的

空的网页文档，就可以在这个新的文档中

进行网页设计编辑；或者单击“文件”菜

单中的“新建”命令，或直接按Ctrl+N键，打开一个新页面，在该页面中也可以进行

网页的设计编辑。

网页设计编辑完毕后，保存网页文件：保存的位置在战点根目录下，新文件取名为

“index.htm”即建立了主页文件。方法二：•《网页设计》完整课件网页设计打开站点管理窗口

在站点管理窗口右边的本地文件夹列表框中建立新文件，新文件取名为

“index.htm”按回车键，即建立了主页文件。

双击“index.htm”文件，进入编辑

“index.htm”的网页文件窗口，进行主页设计。（操作演示说明）设置页面属