网页制作-清华大学详解.ppt

第12章 网页设计基础 12.1 Dreamweaver 8.0简介 12.2创建与编辑本地站点 12. 3网页文件的基本操作 12. 4简单网页的制作实例 12. 5本章小结 12．1 Dreamweaver 8.0简介 2005年4月Macromedia公司被著名的软件公司Adobe收购，Dreamweaver 8.0是Macromedia公司最后发布的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的web 应用程序开发，以及广泛的代码编辑和ASP/JSP/ASP.NET/PHP等动态网页的支持，并可以实现完整的数据库的编写。也就是说Dreamweaver 8.0不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。 12.1.1 Dreamweaver 8.0的启动方式 启动Dreamweaver 8.0与启动一般软件的方法相同，其过程依次是选择Windows XP操作系统中的【开始】| 【所有程序】| 【Macromedia】| 【Macromedia Dreamweaver 8.0】命令。 也可双击桌面上的快捷方式图标 ，便可启动Dreamweaver 8.0，随即可看到Dreamweaver 8.0全新的工作界面。 12. 1. 2 Dreamweaver 8.0的工作环境 Dreamweaver 8.0新的工作区环境比早期的版本更加灵活、方便、实用。启动Dreamweaver 8.0以后首先看到的是起始页，如图12-1所示。 设计者可以在起始页中选择【打开最近项目】、【创建新项目】和【从范例创建】等选项组中的相应的操作，常用的选项组的具体意义如下。 （1）【打开最近项目】选项组：单击【打开最近项目】下的文件名称，可以直接打开最近编辑过的网页文件。 （2）【创建新项目】选项组：单击【创建新项目】下的相应命令，可以创建不同的网页文件。如单击【HTML】选项，将创建一个静态网页文件；单击【ASP VBScript】选项，将创建一个动态网页；单击【CSS】选项，将创建一个CSS样式表文件。 （3）【从范例创建】选项组：可以参考Dreamweaver 8.0预置的范例创建新的网页文档。 单击【创建新项目】下的【HTML】选项后，屏幕显示的是工作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件文档窗口中设计者可以完成网页的设计。 工作区窗口由标题栏、菜单栏、工具栏、网页文档编辑区、状态栏和面板组等基本部分组成，如图12-2所示。 工作区窗口各部分功能如下。 1．标题栏 标题栏是显示当前网页的标题信息，当前被编辑网页文件的文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以完成窗口的【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。 2．菜单栏 菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。 3．插入栏 无论多么精美的网页，其基本组成元素无非是些图片、文字以及多媒体特效，这些网页元素可以利用插入栏中的工具来置放到网页上。用插入栏可以插入网页设计中的一些最常用的元素，如图像、文本、特殊字符、Flash动画等等。 插入栏在菜单栏下方，选择【窗口】|【插入】命令，可显示或隐藏插入栏，快捷键 CTRL + F2是显示或隐藏插入栏的切换开关，如图12-2所示。其中默认的9个选项分别为：常用、布局、表单、文本、HTML、应用程序、Flash元素、收藏夹、显示为制表符，单击【显示为制表符】选项，可以改变插入栏的显示方式。 3．文档工具栏 在文档窗口中有一个文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的三种视图方式之间切换，改变网页的编辑方式。设计者在编辑网页的过程中可随时了解相应的HTML代码，或者在编写HTML代码时方便地看到网页的设计效果。中间【标题】文本框可输入当前网页名称，如果当前网页文档已经有了一个标题，则该标题将显示在该文本框中。右边是一些文档常用的工具按钮，如图12-3所示。 文档工具栏中主要的工具按钮功能如下。 （1） 没有浏览器/检查错误：可以检查跨浏览器兼容性。 （2） 验证标记：可以验证当前文档或选定的标签。 （3） 文件管理：单击这个按钮可以在下拉菜单中实现对文件只读属性的编辑；本地站点和服务器端文件的上传和下载；以及方便团队工作的设计备注等菜单命令。 （4） 在浏览器中预览和调