《网页设计与制作教程》-第三章讲稿

第三章Dreamweaver基础Dreamweaver是一款功能强大的可视化网页设计和编程工具，它可以与其它网页设计软件有效的结合起来，提高网页设计开发的效率和质量。本章主要讲解Dreamweaver的基本功能和使用方法，熟悉使用Dreamweaver开发和测试网页的基本过程。3.1Dreamweaver软件基础介绍Dreamweaver与Flash、Fireworks称为网页制作“三剑客”，三者可以完美的结合，是一套强大的网页编辑工具。由Macromedia公司所设计，Adobe收购了Macromedia后，软件前冠名都以Adobe开头。较新的版本是CS（CreativeSuite）版，意思是创意组件套装。3.1Dreamweaver软件基础介绍教材选用Dreamweaver8制作网页，Dreamweaver8是一款专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。可以用于手工编写代码，也可以利用可视化编辑环境编写代码，Dreamweaver8提供大量的开发工具，让你拥有更加完美的Web创作体验。3.1.1Dreamweaver概述Dreamweaver是一个网页集成开发环境，可以将Flash制作的动画和Fireworks制作的图片放到Dreamweaver中进行组合。Dreamweaver提供了功能全面的编码环境，支持多种网页文件格式，例如，HTML、CSS、PHP、ASP、XML、ASP.NET、JavaScript和VBScript等。Dreamweaver还可以使用服务器技术（如ASP.NET、ASP、JSP和PHP）生成由动态数据库支持的Web应用程序。3.1.1Dreamweaver概述Dreamweaver可以自动完成代码编辑工作，可以根据设计视图的内容自动添加相应的标签和属性，并且提供了有关层叠样式表(CSS)、JavaScript和ColdFusion标记语言(CFML)等的语言参考资料。3.1.1Dreamweaver概述Dreamweaver还可以对本地站点和远程站点进行管理，通过连接FTP服务器对远程站点进行维护。3.1.1Dreamweaver概述Dreamweaver可以直接导入用Fireworks或其他图形应用程序中创建和编辑的图像，或者将Flash开发的动画直接嵌入到网页中，无需编写任何代码，这些工作由Dreamweaver自动完成。3.1.2Dreamweaver的特点随着Dreamweaver

CS3的发布，意味着它将与Adobe公司制作的其它CS（创意组件套装）套件产品更好的结合。Dreamweaver已经成为最为流行的网页设计、开发工具，是因为它有以下几大优点：3.1.2Dreamweaver的特点简单易用

具有符合人体工学原理的面板设计，对常用快捷工具分类显示在工具栏里，代码编辑和站点管理都提供了向导式的服务。代码窗体与设计窗体支持无缝的同步功能，可视化的编辑环境，可以通过拖拉方式添加页面对象。3.1.2Dreamweaver的特点可视化编程

在设计窗体里可以直接创建网页对象，设计窗体还可以操作页面对象实现可视化布局，代码窗体会自动生成相应代码。

3.1.2Dreamweaver的特点高效的HTML代码生成

在设计窗体里制作的对象，代码窗口里会生成与之对应的代码，Dreamweaver对每次修改都进行优化处理，将优化后的代码显示在代码窗体里。3.1.2Dreamweaver的特点Dreamweaver可以定义元素库，对于重复使用的元素（代码段）独立定义，在设计中需要这些元素的地方可以直接插入。3.1.2Dreamweaver的特点高效站点管理

Dreamweaver提供了高效的本地站点管理工具，可以通过本地站点对文件和资源进行管理。Dreamweaver还提供了强大的远程站点维护功能，拥有一个专业的FTP管理界面，可以有效的与远程的FTP服务器通信，实现对远程的Web站点内的数据和网页更新。

3.1.3Dreamweaver8界面简介掌握Dreamweaver的特点之后我们了解一下Dreamweaver的界面，以Dreamweaver8为例，如图3-1所示。

图3-1Dreamweaver8编辑界面3.1.3Dreamweaver8界面简介Dreamweaver8编辑界面主要包含菜单栏、插入栏、编码工具栏、属性查看器、文件面板、设计视图和代码视图等。主要栏目的作用是：

3.1.3Dreamweaver8界面简介插入栏里存放了常用的快捷工具按钮，Dreamweaver快捷工具较多，为了方便操作对快捷工具进行了分类，做成多项选单的形式。3.1.3Dreamweaver8界面简介属性查看器是对网页的各种对象的属性进行编辑和查看的工具，可以通过属性面板以可视化的方式对页面对象进行编辑，处理页面效率非常高。

3.1.3Dreamweaver8界面简介代码视图是Dreamweaver提供编辑代码的窗口，可以手工编写代码，也可以与设计视图结合，在设计视图添加和修改的对象可以在代码视图里自动添加相应代码，可以说这是Dreamweaver的一大技术优势。文件面板是对站点文件和文件夹以及站点结构进行修改和管理的窗口，通过文件面板可以实现高效的可视化站点管理和远程站点的维护。

3.2Dreamweaver管理站点Dreamweaver通过站点这种方式来集中管理站内的文档和资源，它是管理站点文件的有效工具。

3.2.1新建站点站点既然是文件的集合，我们就必须给它在本地提供一个存储位置，例如，D:\myweb，我们就将这个目录称为“站点的根目录”，站点内的文件都包含在这个文件夹里。

3.2.1新建站点使用Dreamweaver新建站点具体步骤如下：

选择菜单栏的【站点】→【新建站点】,弹出站点定义对话框，如图3-2所示。给站点取一个名字，最好与站点根目录名一致，这样在Dreamweaver建立多个站点之后便于区分每个站点和对应的根目录。

图3-2站点名定义3.2.1新建站点点击【下一步】如图3-3所示，选择单选按钮【否，我不想使用服务器技术】，网页设计主要是利用HTML语言制作静态网页，所以在这里没有选择动态网页的服务器技术。

图3-3是/否选择服务器技术3.2.1新建站点点击【下一步】如图3-4所示，选择站点在本机的存储目录D:\myweb，就是使用Dreamweaver制作的网页都将存储在本地机器的D:\myweb根目录里。图3-4选择站点存储目录3.2.1新建站点点击【下一步】如图3-5所示，在下拉列表框中选择【无】，是指网站调试是在本地机器上进行，不需要连接到远程的服务器。点击【下一步】，并完成整个站点的配置。

图3-5远程服务器选择3.2.2本地站点管理在dreamweaver里建立站点后，还可以根据站点设计的具体需要对站点进行修改。选择菜单栏【站点】→【站点管理】，如图3-6所示，选择要编辑的站点，然后选择【编辑】弹出站点管理的对话框如图3-7所示，对站点的具体选项进行修改。

图3-6选择站点进行管理图3-7站点的管理界面3.3站点结构设计根据站点的总体设计确定站点的主要功能模块和系统结构，并在详细设计阶段根据网站的功能对网站的风格和版式进行设计。3.3站点结构设计在网站实施阶段，根据各模块的功能，在站点根目录里为每个模块建立一个子目录，例如，产品宣传类页面建立一个目录，后台管理类页面建立一个目录。另外，网站内包含多种文件类型，根据文件类型也可以分别建立一个子目录。3.3站点结构设计Dreamweaver8是制作网站的集成开发环境，使用dreamweaver可以设计站点的文件结构，如图3-8所示，建立一个电子商务网站的站点结构【例3-1】。按照公司介绍、产品发布、成功案例、后台管理等功能模块建立的子目录分别是company、product、cases、admin。按照数据库、下载文件、图片、flash文件等文件类型建立的子目录分别是database、download、images和flash。

图3-8利用dreamweaver建立站点结构3.4建立web服务器使用dreamweaver建立好站点结构后，只能以本地机的方式调试和制作网页，即访问网页时使用的是网页在本地的绝对地址，而不是网页的URL，如图3-9所示。图3-9利用dreamweaver调试网页3.4建立web服务器在Windows2000Server中启动Internet信息服务（IIS），建立一个名为myweb的Web站点，如图3-10所示。选择Web服务器的IP地址为：8，端口号为81，因为默认端口“80”被“默认站点”已占用，如图3-11所示。站点主目录选择D:\myweb，如图3-12所示。根据向导指示完成其它配置。

图3-10在IIS上建立Web站点图3-11选择Web站点的IP地址和端口号图3-12选择Web站点主目录3.4建立web服务器建立Web站点后，打开dreamweaver，在dreamweaver内对站点myweb进行管理，选择菜单栏【站点】→【管理站点】，在站点管理对话框上选择【高级】选项单，在分类选项表中选择【本地信息】，如图3-13所示，在文本框【HTTP地址】中填入：8:81，即访问Web服务器的URL(网址)。图3-13修改站点本地信息3.4建立web服务器然后在分类选项表中选择【测试服务器】，如图3-14所示，对测试服务器选项进行配置，【服务器模型】项选择【无】，在【访问】下拉列表框中选择【本地/网络】，在【URL默认前缀】文本框中添加：8:81。验证无误后点击【确定】完成站点的管理。图3-14修改测试服务器信息3.4建立web服务Dreamweaver站点与Web站点已经建立起联系，在Dreamweaver中打开网站首页index.html，然后在文档工具栏里选择【在浏览器中预览/调试】，效果如图3-15所示。图3-15Web服务器中测试网页3.5远程站点发布与维护实际站点维护都是通过远程方式进行的，通过设置Dreamweaver里的站点的相关属性，可以实现与远程的FTP服务器和Web服务器的通信，达到使用Dreamweaver对远程站点进行维护和管理的目的。3.5.1定义远程站点实际站点维护都是采用远程维护方式，即将远程Web站点的文件下载到本地计算机，用Dreamweaver修改和编辑后上传到Web服务器。要实现远程站点维护必须要有FTP服务器的支持，首先建立一个FTP站点，如图3-16所示。图3-16建立FTP站点3.5.1定义远程站点选择FTP服务器的IP地址为：8，端口号为：21号端口，如图3-17所示。对应主目录为D:\myweb，即为站点的根目录，如图3-18所示。FTP站点访问权限选择【读取】和【写入】权限，因为修改后网页要重新上传到FTP服务器，如果无写入权限将不能修改网页，如图3-19所示。

图3-17设置FTP服务器IP地址和端口图3-18选择FTP服务器主目录图3-19设置FTP访问权限3.5.2远程站点的发布配置完FTP服务器之后，就可以使用Dreamweaver连接远程站点，并且对站点上的网页进行修改和调试。打开Dreamweaver选择菜单栏【站点】→【管理站点】，在站点管理对话框分类列表里选择【远程信息】，如图3-20所示。

图3-20Dreamweaver连接远程FTP服务器3.5.3远程站点维护在Dreamweaver