商务第3章.ppt

第3章 网页设计基础 3.1 Dreamweaver MX简介 3.2 创建新站点 3.3 网页文件的基本操作 3.4 简单网页的制作实例 3.5 本章摘要与重点回顾 3.1 Dreamweaver MX简介 Dreamweaver MX是Macromedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软件。它保留了Dreamweaver早期版本的各种优点，提供了可视化的布局工具、快速的Web 应用程序开发以及广泛的代码编辑支持。它新增了对ASP、JSP、ASP.NET、PHP等动态网页的支持，可以实现完整的数据库的编写。也就是说，Dreamweaver MX不仅可以轻松设计网站前台的页面，而且也可以方便地实现网站后台的各种复杂功能。 3.1.1 Dreamweaver MX的启动方式 启动Dreamweaver MX与启动一般软件的方法相同，其过程是依次选择Windows XP操作系统中的【开始】｜【所有程序】｜Macromedia｜Dreamweaver MX选项。也可双击桌面上的快捷方式图标来启动Dreamweaver MX。第一次启动Dreamweaver MX，系统会显示让设计者选择工作区布局的对话框，如图3-1所示。 Dreamweaver MX工作区的3种选择是Dreamweaver MX工作区、Dreamweaver 4工作区、HomeSite/代码编写者样式。习惯于使用Dreamweaver 4的设计者可以继续使用Dreamweaver 4风格的工作区界面，无须花费精力适应新的工作区环境。HomeSite/代码编写者样式是一个纯代码编辑界面，具有较高网页编程水准的用户，可选择这个工作区界面完成手编程序的调试工作。 本书主要介绍Dreamweaver MX风格的工作区。在图3-1中，选择【Dreamweaver MX工作区】，单击【确定】按钮，系统显示【欢迎】对话框，如图3-2所示。这是软件为使用者熟悉和学习新软件而设置的对话框，Dreamweaver的老用户可查询Dreamweaver MX的新特性，新用户可以学习Dreamweaver MX的功能和特性。了解了软件的功能和特性后，关闭Dreamweaver MX的【欢迎】对话框，即可看到Dreamweaver MX全新的工作界面。 3.1.2 Dreamweaver MX的工作环境 Dreamweaver MX新的工作区环境比早期的版本更加灵活、方便、实用。工作区窗口由标题栏、菜单栏、工具栏、网页文件编辑区、状态栏和浮动面板组等基本部分组成，如图3-3所示。启动Dreamweaver MX后，屏幕显示的是工作区窗口，此时系统打开一个名为Untitled的空白文档，在网页文件编辑区中，设计者可以完成网页的设计。 工作区窗口各部分功能如下所述。 1. 标题栏 标题栏是显示当前网页的标题信息，当前被编辑网页文件的路径和文件名会在括号里显示。用标题栏左边和右边的窗口控制按钮，可以对窗口完成【最大化】、【最小化】、【移动】、【还原】、【关闭】等操作。 2. 菜单栏 菜单栏是设计者选择操作命令的地方。菜单栏的选项依次为【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】。浮动面板上的各项操作基本上都有菜单操作命令与之相对应，在以后的章节中会逐一介绍主要的菜单操作命令。 3. 文档工具栏 在菜单栏的下面是文档工具栏。文档工具栏最左边的是代码视图和设计视图的切换按钮。利用切换按钮可在【代码】、【设计】、【代码和设计】的3种视图方式之间切换，改变网页的编辑方式。设计者在编辑网页的过程中可随时了解相应的HTML代码，或者在编写HTML代码时方便地看到网页的设计效果。在【标题】文本框中可输入当前网页名称，如果当前网页文档已经有了一个标题，则该标题将显示在该文本框中。右边是一些文档常用的工具按钮，如图3-4所示。 文档工具栏中主要的工具按钮功能如下。 ① (活动数据视图)： 能够实时动态测试数据库中数据。 ② (文件管理)： 单击这个按钮可以在下拉菜单中实现对文件只读属性的编辑、本地站点和服务器端文件的上传和下载、网页文件的自动检查以及方便团队工作的设计备注等菜单命令。 ③ (网页预览和调试)： 单击这个按钮可以在下拉菜单中实现网页预览（可按F12键代替），纠正JavaSript的错误以及选择浏览器等。 ④ (刷新设计视图)： 用于刷新本地和远程站点的目录列表。 ⑤ (参考查询)： 显示设计者所单击的标签、属性或关键字等有关的信息。 ⑥ (代码导航)： 可在 JavaScript 代码中进行设置断点，方便设计者编辑调试手写代码。 ⑦ (视图选项)： 单击这个按钮可以在下拉菜单中实现一些人性化