《第三章讲稿 网页设计与制作》由会员分享，可在线阅读，更多相关《第三章讲稿 网页设计与制作（64页珍藏版）》请在金锄头文库上搜索。
1、网页设计与制作教程,作者：孟显勇 北京理工大学出版社,Dreamweaver是一款功能强大的可视化网页设计和编程工具，它可以与其它网页设计软件有效的结合起来，提高网页设计开发的效率和质量。本章主要讲解Dreamweaver的基本功能和使用方法，熟悉使用Dreamweaver开发和测试网页的基本过程。,3.1 Dreamweaver软件基础介绍,Dreamweaver与Flash、Fireworks 称为网页制作“三剑客”，三者可以完美的结合，是一套强大的网页编辑工具。由Macromedia公司所设计，Adobe收购了Macromedia后，软件前冠名都以Adobe开头。较新的版本是CS（Cre
2、ative Suite）版，意思是创意组件套装。,3.1 Dreamweaver软件基础介绍,教材选用Dreamweaver 8制作网页，Dreamweaver 8 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。可以用于手工编写代码，也可以利用可视化编辑环境编写代码，Dreamweaver 8提供大量的开发工具，让你拥有更加完美的 Web 创作体验。,3.1.1 Dreamweaver概述,Dreamweaver是一个网页集成开发环境，可以将Flash制作的动画和Fireworks制作的图片放到Dreamweaver中进行组合。 Dr
3、eamweaver提供了功能全面的编码环境，支持多种网页文件格式，例如，HTML、CSS、PHP、ASP、XML、ASP.NET 、JavaScript和VBScript等。Dreamweaver 还可以使用服务器技术（如 ASP.NET、ASP、JSP 和 PHP）生成由动态数据库支持的 Web 应用程序。,3.1.1 Dreamweaver概述,Dreamweaver可以自动完成代码编辑工作，可以根据设计视图的内容自动添加相应的标签和属性，并且提供了有关层叠样式表 (CSS)、JavaScript 和 ColdFusion 标记语言 (CFML) 等的语言参考资料。,3.1.1 Dream
4、weaver概述,Dreamweaver还可以对本地站点和远程站点进行管理，通过连接FTP服务器对远程站点进行维护。,3.1.1 Dreamweaver概述,Dreamweaver可以直接导入用Fireworks 或其他图形应用程序中创建和编辑的图像，或者将Flash开发的动画直接嵌入到网页中，无需编写任何代码，这些工作由Dreamweaver自动完成。,3.1.2 Dreamweaver的特点,随着Dreamweaver CS3的发布，意味着它将与Adobe公司制作的其它CS（创意组件套装） 套件产品更好的结合。Dreamweaver已经成为最为流行的网页设计、开发工具，是因为它有以下几大优
5、点：,3.1.2 Dreamweaver的特点,简单易用 具有符合人体工学原理的面板设计，对常用快捷工具分类显示在工具栏里，代码编辑和站点管理都提供了向导式的服务。代码窗体与设计窗体支持无缝的同步功能，可视化的编辑环境，可以通过拖拉方式添加页面对象。,3.1.2 Dreamweaver的特点,可视化编程 在设计窗体里可以直接创建网页对象，设计窗体还可以操作页面对象实现可视化布局，代码窗体会自动生成相应代码。,3.1.2 Dreamweaver的特点,高效的HTML代码生成 在设计窗体里制作的对象，代码窗口里会生成与之对应的代码，Dreamweaver对每次修改都进行优化处理，将优化后的代码显示
6、在代码窗体里。,3.1.2 Dreamweaver的特点,Dreamweaver可以定义元素库，对于重复使用的元素（代码段）独立定义，在设计中需要这些元素的地方可以直接插入。,3.1.2 Dreamweaver的特点,高效站点管理 Dreamweaver提供了高效的本地站点管理工具，可以通过本地站点对文件和资源进行管理。 Dreamweaver还提供了强大的远程站点维护功能，拥有一个专业的FTP管理界面，可以有效的与远程的FTP服务器通信，实现对远程的Web站点内的数据和网页更新。,3.1.3 Dreamweaver 8界面简介,掌握Dreamweaver的特点之后我们了解一下Dreamwea
7、ver的界面，以Dreamweaver 8为例，如图3-1所示。,图3-1 Dreamweaver 8 编辑界面,3.1.3 Dreamweaver 8界面简介,Dreamweaver 8编辑界面主要包含菜单栏、插入栏、编码工具栏、属性查看器、文件面板、设计视图和代码视图等。主要栏目的作用是：,3.1.3 Dreamweaver 8界面简介,插入栏里存放了常用的快捷工具按钮，Dreamweaver快捷工具较多，为了方便操作对快捷工具进行了分类，做成多项选单的形式。,3.1.3 Dreamweaver 8界面简介,属性查看器是对网页的各种对象的属性进行编辑和查看的工具，可以通过属性面板以可视化的
8、方式对页面对象进行编辑，处理页面效率非常高。,3.1.3 Dreamweaver 8界面简介,代码视图是Dreamweaver提供编辑代码的窗口，可以手工编写代码，也可以与设计视图结合，在设计视图添加和修改的对象可以在代码视图里自动添加相应代码，可以说这是Dreamweaver的一大技术优势。 文件面板是对站点文件和文件夹以及站点结构进行修改和管理的窗口，通过文件面板可以实现高效的可视化站点管理和远程站点的维护。,3.2 Dreamweaver管理站点,Dreamweaver通过站点这种方式来集中管理站内的文档和资源，它是管理站点文件的有效工具。,3.2.1 新建站点,站点既然是文件的集合，我
9、们就必须给它在本地提供一个存储位置，例如，D:myweb，我们就将这个目录称为“站点的根目录”，站点内的文件都包含在这个文件夹里。,3.2.1 新建站点,使用Dreamweaver新建站点具体步骤如下： 选择菜单栏的【站点】【新建站点】,弹出站点定义对话框，如图3-2所示。给站点取一个名字，最好与站点根目录名一致，这样在Dreamweaver建立多个站点之后便于区分每个站点和对应的根目录。,图3-2 站点名定义,3.2.1 新建站点,点击【下一步】如图3-3所示，选择单选按钮【否，我不想使用服务器技术】，网页设计主要是利用HTML语言制作静态网页，所以在这里没有选择动态网页的服务器技术。,图3
10、-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所示，选择要编
11、辑的站点，然后选择【编辑】弹出站点管理的对话框如图3-7所示，对站点的具体选项进行修改。,图3-6 选择站点进行管理,图3-7 站点的管理界面,3.3 站点结构设计,根据站点的总体设计确定站点的主要功能模块和系统结构，并在详细设计阶段根据网站的功能对网站的风格和版式进行设计。,3.3 站点结构设计,在网站实施阶段，根据各模块的功能，在站点根目录里为每个模块建立一个子目录，例如，产品宣传类页面建立一个目录，后台管理类页面建立一个目录。另外，网站内包含多种文件类型，根据文件类型也可以分别建立一个子目录。,3.3 站点结构设计,Dreamweaver 8是制作网站的集成开发环境，使用dreamwea
12、ver可以设计站点的文件结构，如图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 利用d
13、reamweaver调试网页,3.4 建立web服务器,在Windows 2000 Server中启动Internet信息服务（IIS），建立一个名为myweb的Web站点，如图3-10所示。选择Web服务器的IP地址为：172.16.16.88，端口号为81，因为默认端口“80”被“默认站点”已占用，如图3-11所示。站点主目录选择D:myweb，如图3-12所示。根据向导指示完成其它配置。,图3-10 在IIS上建立Web站点,图3-11 选择Web站点的IP地址和端口号,图3-12 选择Web站点主目录,3.4 建立web服务器,建立Web站点后，打开dreamweaver，在dream
14、weaver内对站点myweb进行管理，选择菜单栏【站点】【管理站点】，在站点管理对话框上选择【高级】选项单，在分类选项表中选择【本地信息】，如图3-13所示，在文本框【HTTP地址】中填入：http:/172.16.16.88:81，即访问Web服务器的URL(网址)。,图3-13 修改站点本地信息,3.4 建立web服务器,然后在分类选项表中选择【测试服务器】，如图3-14所示，对测试服务器选项进行配置，【服务器模型】项选择【无】，在【访问】下拉列表框中选择【本地/网络】，在【URL默认前缀】文本框中添加：http:/172.16.16.88:81。验证无误后点击【确定】完成站点的管理。,
15、图3-14 修改测试服务器信息,3.4 建立web服务,Dreamweaver站点与Web站点已经建立起联系，在Dreamweaver中打开网站首页index.html，然后在文档工具栏里选择【在浏览器中预览/调试】，效果如图3-15所示。,图3-15 Web服务器中测试网页,3.5 远程站点发布与维护,实际站点维护都是通过远程方式进行的，通过设置Dreamweaver里的站点的相关属性，可以实现与远程的FTP服务器和Web服务器的通信，达到使用Dreamweaver对远程站点进行维护和管理的目的。,3.5.1 定义远程站点,实际站点维护都是采用远程维护方式，即将远程Web站点的文件下载到本地
16、计算机，用Dreamweaver修改和编辑后上传到Web服务器。要实现远程站点维护必须要有FTP服务器的支持，首先建立一个FTP站点，如图3-16所示。,图3-16 建立FTP站点,3.5.1 定义远程站点,选择FTP服务器的IP地址为：172.16.16.88，端口号为：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-20 Dreamweaver连接远程FTP服务器,3.5.3 远程站点维护,在Dreamweaver文件面板上选择按钮，打开Dreamweaver【本地和远程站点】管理界面，如图3-21所示。,
