《HTML和中文Dreamweaver MX2004实用教程 配套课件作者 杜金 郭海 曲彭生 第2章》由会员分享，可在线阅读，更多相关《HTML和中文Dreamweaver MX2004实用教程 配套课件作者 杜金 郭海 曲彭生 第2章（78页珍藏版）》请在金锄头文库上搜索。
1、第2章 Dreamweaver MX 2004概述,本章要点 2.1 Dreamweaver MX 2004概述 2.2 “自我介绍”网页 2.3 修改“使用图像链接”网页 2.4 再做“自我介绍”网页 2.5 “捉迷藏的图像”网页 2.6 “北京的四合院”网页 习题 2,2.1 Dreamweaver MX 2004概述,2.1.1 Dreamweaver MX 2004简介 Macromedia Dreamweaver MX 2004是一套功能强大的可视化网页设计软件。使用该软件，开发人员和设计师能够快速创建代码规范的应用程序。该软件集成度非常高，开发环境精简而高效，开发人员能够使用该软件
2、与服务器技术进行配合，构建功能强大的网络应用程序，并且可以与用户数据或网络服务体系进行链接，实现各种高级应用。 Dreamweaver MX 2004提供了一套规范的管理方法来完成高质量的设计工作。在设计过程中自动生成CSS样式，能够快速建立一个代码简介、外观专业规范的站点。 Dreamweaver MX 2004是开放式和可扩展的。赋予使用者最大的自由度和灵活性来选择最适合使用者工作的技术。 Dreamweaver MX 2004的特点如下。 （1）将世界一流水平的“设计”和“代码”编辑器合二为一。在设计窗口中精化源代码，使用户能够按工作的需要定制自己的用户界面。 （2）利用丰富的CSS样式
3、表支持构筑复杂的、规范标准的站点。同时提供了丰富的使用工具，使用户能够快速选择样式属性。,2.1 Dreamweaver MX 2004概述,（3）跨浏览器的有效性检查。保存时可自动检查当前文档在浏览器中的兼容性。可以指定何种浏览器为测试用浏览器，同时自动检验以确定页面有没有目标浏览器不支持的代码。动态跨浏览器有效性检查功能可以自动核对tags和CSS规则是否适应目前的主浏览器。 （4）使用内置的图形编辑程序提高制作速度。裁剪、缩放等一些辅助性的图像编辑功能可以不用离开Dreamweaver就能够完成，其编辑工具是内置的Macromedia Fireworks技术。 （5）使用更合理的操作界面
4、。在设计模式下允许开发者不用固定的浏览器预览网页，而利用“设计”视图即可预览网页的显示效果。 （6）CSS样式的功能更多。CSS的可视化设计检查工具，在设计窗口中运用重新设计的Tag检查工具来检测哪个CSS规则应用于当前的选择。在CSS中创建版面设计配置非常容易，在设计窗口中选取divs及其他块元素，然后利用CSS准则检查工具修改它们的属性，单击任意一个CSS规则可以查看其属性的详细说明（例如，border款式、margin、padding或text size）。即时编辑功能在编辑CSS的同时能够同时看到设计窗口中的变化。,2.1 Dreamweaver MX 2004概述,（7）改进CSS直
5、观应用效果。增强的设计窗口可以直接看到复杂CSS设置的效果，实现更多精确实用的可视化操作。 （8）改进的CSS面板。使用增强面板直接在代码内部定义样式，并且可以直观地看到在哪里定义了什么样的样式。 （9）基于文本属性改进的CSS检查工具。不必切换编辑方式就可以直接选取CSS样式，样式下拉列表中内置了所有可用样式的预览显示。 （10）新的基于页面属性的CSS样式。通过“页面属性”对话框（执行“修改”“页面属性”菜单命令，即可调出该对话框）可以获取更多的页面控制属性，如标题和链接等。 （11）CSS代码提示。在代码窗口中快速查看手写的CSS样式的提示，或由Ctrl+Space键调出代码提示。 （1
6、2）运用完整的集成开发环境来开发HTML、XHTML、XML、ASP、Microsoft ASP.NET、JSP、PHP和Macromedia ColdFusion站点。通过Macromedia插件中心，可以获取超过800个免费插件来定制和扩展开发环境。 （13）FTP安全保障。所有传输的文件完全加密，并阻止越权存取信息、file内容、用户名和口令。,2.1 Dreamweaver MX 2004概述,（14）外部文档/代码的无缝结合。从Microsoft Word和Excel直接复制粘贴到Dreamweaver中的文档/代码能够同时保存字体、颜色和CSS样式。完全支持Unicode，支持使用
7、和保存任何字体以及编码（包括双字节字符）。 （15）增强与其他软件产品的结合能力，包括Flash、Fireworks及其他Macromedia Studio MX 2004设计开发工具。 （16）Microsoft ASP.net form控制对象。使用改进后的ASP.net对象和属性检查工具构建操作Microsoft ASP.net web forms。 （17）更新内容参考。在Dreamweaver MX 2004参考资料面板中可以获取OReilly的SQL以及PHP相关资料。 （18）PHP服务器行为。重新编写PHP语法和服务器行为，包括Master-Detail页面设置模块、用户身份证
8、验证模块等。 （19）支持Macromedia Flash元素。通过内置的Flash构件，Dreamweaver MX 2004增加了页面的交互性，导入一个Flash构件就像定制标签一样轻松。 （20）MX HTML构件。利用MX组件（包括按钮、模板）快速建立有效的用户界面。 （21）改进的表格编辑工具。,2.1 Dreamweaver MX 2004概述,（22）更加可靠实用的FTP客户程序。 （23）修改的insert面板。 （24）高效率的文件编辑过程。 （25）更多有效的代码编辑。像按右键弹出的编码工具，更新后的查询替换工具，更多的搜索选择项并且能够保存搜索条件，以及能够迅速启动的属性
9、检查工具。 （26）详尽的属性编辑。利用属性检查工具可以列出每个适用于当前选择项的可用标记属性。 （27）利用改进的用户界面查找东西更加快速，更多地更加清晰地显示上下文以及焦点，快速存取最近使用的文档和教程资源。,2.1 Dreamweaver MX 2004概述,2.1.2 第一次运行Dreamweaver MX 2004 1选择工作界面 图2-1-1 Dreamweaver MX 2004的“工作区设置”对话框 第一次运行Dreamweaver MX 2004，可弹出“工作区设置”对话框，如图2-1-1所示。可以看出，Dreamweaver MX 2004提供了两种工作区布局（也叫工作界面
10、）。选中某一种工作区名称的单选钮，再单击“确定”按钮，即可进入相应的工作区。 2更改工作界面 （1）执行菜单栏中的“编辑”“首选参数”菜单命令，调出“首选参数”对话框。单击该对话框左边“分类”栏中的“常规”选项。 （2）单击该对话框右边的“更改工作区”按钮，即可调出如图2-1-1所示的“工作区设置”对话框。此时可以重新选择Dreamweaver MX 2004的工作界面。 （3）重新启动Dreamweaver MX 2004后，可以看到，Dreamweaver MX 2004的工作界面就被更换了。,2.1 Dreamweaver MX 2004概述,图2-1-1 Dreamweaver MX
11、2004的“工作区设置”对话框,2.1 Dreamweaver MX 2004概述,2.1.3 Dreamweaver MX 2004的工作界面 采用“设计者”风格的Dreamweaver MX 2004的工作区如图2-1-2所示。可以看出，Dreamweaver MX 2004的工作区主要由标题栏、菜单栏、文档窗口、状态栏、“插入”栏（也叫“对象”栏或对象面板）、标准工具栏、文档工具栏、“属性”栏（也叫“属性”面板或属性检查器）和“隐藏面板”按钮等组成。 执行“查看”“工具栏”“”菜单命令，可打开或关闭“插入”栏、标准工具栏或文档工具栏。执行“窗口”“属性”菜单命令，可打开或关闭“属性”栏。
12、,2.1 Dreamweaver MX 2004概述,图2-1-2 采用“设计者”风格的Dreamweaver MX 2004工作区,2.1 Dreamweaver MX 2004概述,2.1.4 文档窗口和状态栏 1文档窗口 文档窗口用于显示或编辑当前的文档页面。文档窗口的底部有一个状态栏，可以提供多种信息。当文档窗口处于最大化状态时，在文档窗口的顶部显示文档的名称，文档工具栏和标准工具栏在文档窗口内；如果文档窗口处于还原状态，则文档工具栏和标准工具栏在文档窗口外，其标题栏内显示网页的标题和网页文档所在的文件夹名称和网页文档的名称。 文档窗口有3种视图方式，单击文档工具栏中的按钮，可进行工作
13、区视图的切换。也可以执行“查看”“代码”（或“设计”、“代码和设计”）菜单命令或按Ctrl+-键切换视图。 （1）“设计”视图：它是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，显示的效果与在网络浏览器中浏览时非常相似，可以直接进行编辑。 （2）“代码”视图：它是一个用于编写和编辑HTML、JavaScript、服务器语言代码（如ASP或ColdFusion标记语言）以及任何其他类型代码的手工编码环境。,2.1 Dreamweaver MX 2004概述,（3）“代码和设计”视图：它可以使用户在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 2状态栏 D
14、reamweaver MX 2004的状态栏位于文档窗口的底部，如图2-1-3所示。,图2-1-3 Dreamweaver MX 2004的状态栏,2.1 Dreamweaver MX 2004概述,（1）HTML标签选择器：HTML标签选择器位于状态栏的最左边，它以HTML标记显示方式来表示光标当前位置处的网页对象信息。一般光标当前位置处有多种信息，则可显示出多个HTML标记。不同的HTML标记表示不同的HTML元素信息。例如，表示文档主体，表示图像，表示表格，表示字体，表示行或表示插入对象等。 单击某一个HTML标记，Dreamweaver MX 2004会自动选取与该标记相对应的网页对象
15、，用户可对该对象进行编辑。 （2）窗口大小信息栏：用来显示与调整窗口大小。单击窗口大小信息栏会调出一个快捷菜单，在还原状态下单击该快捷菜单上边一栏中的一个菜单命令，可马上按照选定的大小改变窗口的大小。 （3）文档大小/估计的下载时间：它给出了文档大小的字节数和网页的预计下载时间。,2.1 Dreamweaver MX 2004概述,2.1.5 “属性”栏和“插入”栏 1“属性”栏 “属性”栏也叫属性检查器或“属性”面板。利用“属性”栏可以显示并精确调整网页中选定对象的属性。“属性”栏具有智能化的特点，选中网页中的不同对象，其“属性”栏的内容会随之发生变化。单击“属性”栏右下角的按钮，可以展开“
16、属性”栏；单击“属性”栏右下角的按钮，可收缩“属性”栏。 当未选中任何对象时单击“属性”栏右边的按钮，可在光标当前位置添加HTML代码；当选中一个对象时单击按钮，可以编辑相应标签的HTML代码。,2.1 Dreamweaver MX 2004概述,2“插入”栏 在Dreamweaver MX 2004中，“插入”栏可以显示为制表符和菜单两种外观效果，制表符状态如图2-1-2所示。如果要将“插入”栏切换到菜单状态，可右键单击“插入”栏右边的按钮，弹出快捷菜单，再单击该菜单中的“显示为菜单”菜单命令即可。如果要将“插入”栏切换到制表符状态，可单击“插入”栏左边的黑色箭头，弹出快捷菜单，再单击该菜单中的“显示为制表符”菜单命令即可。“插入”栏包括了“常用”、“布局”等8个标签项或8个与标签名称相同的菜单命令。当“插入”栏显示为制表符状态时，可以使用鼠标拖曳“插入”栏左边的 图标，将“插入”栏变为浮动面板。一般人们习惯使用制表符状态的“插入”栏。 在制
