Dreamweaver_MX快速入门.ppt

Dreamweaver MX Dreamweaver MX入门 1.1界面的结构 1.2”文档”工具栏 1.3面板组 1.4”属性”检查器 1.5创建一个简单网页 HTML语言简介 2.1 HTML语言简介 2.2 查看源代码 动态HTML 1.1界面的结构 1.2”文档”工具栏 1.3面板组 1.4”属性”检查器 1.5创建一个简单网页 动态HTML行为 1.1界面的结构 1.2”文档”工具栏 1.3面板组 1.4”属性”检查器 1.5创建一个简单网页 综合实例制作特效 Dreamweaver MX快速入门 1.1界面的结构 1.2”文档”工具栏 1.3面板组 1.4”属性”检查器 1.5创建一个简单网页 1.1 界面的结构 启动Dreamweaver MX时,即可出现该程序的启动画面,见图: 1.1 界面的结构 下面是对Dreamweaver MX界面结构详细的介绍，见图： 1.2 ”文档”工具栏 选择“查看”菜单中的“工具栏”来显示.如图： 1.2 ”文档”工具栏 1.3 面板组 面板组有各种的高级工具面板组成: 如在“设计”面板组 中包括“CSS样式”、“HTML样式”、和 “行为”面板。如右图： 1.3 面板组 单击面板组名称前的三角按钮，可以隐藏或显示面板组；如果执行面板菜单中的“新组合面板”命令，可以将其与其他面板分离开，见图： 1.3 面板组 单击任一面板右上角的弹出按钮 ,可以弹出相关的菜单。 1.4”属性”检查器 在默认状态下, “属性”检查器显示的是文本属性.见图: 1.4”属性”检查器 如果打开一个包含图像的HTML文档. “属性”检查器会显示图像属性. 1.4”属性”检查器 如果打开一个包含表格的HTML文档. “属性”检查器会显示表格属性. 1.5 创建一个简单网页 1.5.1输入文字 1.5.2插入图像 1.5.3插入超连接 1.5.4完成编辑 1.5.1 输入文字 1.将光标定位在要插入文字的位置之前. 2.输入一段文字,见下图: 1.5.1 输入文字 3.在换行位置处,用鼠标单击“插入”栏中“字符”选项卡中的”换行符”按钮; 或者在换行位置处,按住Shift键再按回车键. 1.5.1 输入文字 4.软回车;如图 1.5.2 插入图像 1.将光标定位在要插入图像的位置上,然后单击“插入”栏中”常用”中的”图像”按钮 . 1.5.2 插入图像 2.在弹出的“选择图像源”中选择添加的图像文件. 1.5.2 插入图像 3.单击“确认”按钮,刚才选定的那幅图像就出现在网页中了. 1.5.3 插入超连接 1.选中要插入超连接的文字. 2.在“属性”检查器的“连接”栏中输入连接的目标地址或网页,见图: 1.5.3 插入超连接 3.在空白出单击一下,这时会发现文字已经变为蓝色,并且下面出现了下划线.见图: 1.5.4 完成编辑 1.存储文件 (1) 1.打开“文件”菜单,选择“保 存” 命令. (2)打开“文件”菜单,选“保存为”输入要保存的文件名,单击“保存”按钮. 1.5.4 完成编辑 2.保存并退出 (1)单击Dreamweaver 窗口右 上角的关闭按钮. (2)保存文件后, Dreamweaver 会显示提示,询问是否真的要退出程序,单击“是”按钮. HTML语言简介 2.1 HTML语言简介 2.2查看源代码 2.3常见的HTML文件结构 2.4Body标签 2.5文字和图像标签 2.6超连接标签 2.1 HTML语言简介 HTML是超文本标记语言,超文本使网页之间具有跳转的能力,是一种信息组织的方式,使浏览器可以选择阅读的路径,从而可以不需要顺序阅读. 2.1 HTML语言简介 本章主要介绍常用的HTML标签,例如:BODY,HEAD,FONT,IMG和A等. 2.2 查看源代码 在IE中查看网页的源代码 1.在网页的空白处单击鼠标右键. 2.2 查看源代码 2.在弹出的菜单中选择“查看源文件”命令.见图: 2.2 查看源代码 3.Widows将自动打开记事本,显示网页的源代码.见图: 2.3 常见的HTML文件结构 1.标签 HTML文件由许多元素组成,有起始标签和结尾标签, 起始标签和结尾标签之间的部分是元素体. 2.常见的标签介绍 2.3 常见的HTML文件结构 HTML…/HTML标识HTML文件的开始和结束,中间是一些HTML的语言元素.允许网络浏览器把文件内容确认为HTML文件. HEAD…/HEAD标题标签,其中的信息不会出现在网页中.HEAD一般紧跟HTML标签,