Dreamweaver的使用PPT课件.ppt

Dreamweaver MX的使用的使用教学目的与要求：通过本章学习，使学生能熟练使用网页专业制作软件Dreamweaver制作图文并茂、生动形象的网页教学重点与难点：重点：Dreamweaver工作环境、基本网页制作难点：图层概念及运用、站点规划和管理更多内容请点击进入新浪博客：http:/ MXDreamweaver MX的使用的使用 1、Dreamweaver MX基础知识一、概述 Macromedia Dreamweaver MX 是一款专业的 HTML 编辑器，用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论是手工编写 HTML 代码或在可视化编辑环境中工作，Dreamweaver 是非常有用的工具。Dreamweaver MX Dreamweaver MX基础知识基础知识二、二、Dreamweaver MXDreamweaver MX的启动与删除的启动与删除 (一)启动 1、标准的启动方式“开始”“程序/Macromedia/Macromedia Dreamweaver MX或通过桌面快捷方式 3、直接载入需要编辑的文档 选中要编辑的文件图标 单击鼠标右键 选择“使用Dreamweaver MX编辑”DreamweaverDreamweaver MX MX基础知识基础知识二、Dreamweaver MX的启动与删除（二）删除 “开始”“设置/控制面板”“添加/删除程序”选择Macromedia Dreamweaver MX 单击“更改/删除”按钮 DreamweaverDreamweaver MX MX基础知识基础知识三、Dreamweaver MX工作区1、工作区布局（软件演示）2、Dreamweaver MX工作区元素及调整起始页:“编辑”“首选参数”“插入”面板:“窗口”“插入”文档工具栏:“右键”“文档”“标准”工具栏:“右键”“标准”Dreamweaver MX Dreamweaver MX基础知识基础知识二、Dreamweaver MX工作区标签选择器、面板组“文件”面板:管理站点文件 菜单“窗口”“站点文件”或按 F8键属性检查器:“窗口”“属性”或“修改”“属性”Dreamweaver MXDreamweaver MX基础知识基础知识3、文档窗口视图模式：视图模式：“设计”视图：用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境“代码”视图：用于编写和编辑 HTML、JavaScript等手工编写环境“代码和设计”视图：在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。二、Dreamweaver MX工作区 2 2、一般网页的设计与制作、一般网页的设计与制作一、站点的管理（一）定义 1、“站点”“新建站点”：采用向导方式定义本地站点 2、定义站点名称 3、要求用户指定站点文件存放位置 4、完成本地站点的定义 一般网页的设计与制作一般网页的设计与制作一、站点的管理（二）打开 “站点”“站点文件”（三）修改 “站点”“编辑站点”选择要编辑的站点名称 单击“编辑”在对话框中对站点进行编辑“确定”“完成”一般网页的设计与制作一般网页的设计与制作二、一般网页概念 所谓一般网页是指没有采用定位技术、HTML高级技术、Javascript等修饰的网页。（演示示例网页）一、站点的管理 （四）删除 “站点”“编辑站点”选择要编辑的站点名称 单击“删除”“是”“完成”一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作1、新建/打开页面 方法：“文件”“新建”2、页面属性的设置 方法：在页面空白处点击右键“页面属性”3、文本的录入直接录入从已有的文档中复制修改已有的网页一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作 插入“不换行空格”按ctrl+shift+space组合键“插入”“特殊符号”“不换行空格”“插入”面板“字符”选项卡单击不换行空格按钮“编辑”“参数选择”，在“分类”列表里选择“常规”，选中“允许多个连续的空格”选项 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作4、水平线的插入 方法：菜单“插入”“HTML”水平线”工具栏“HTML”水平线”图标注:dreamweaver中修改水平线的颜色 使用属性栏中的快速属性编辑器5、插入版权和日期 方法：工具栏“常用”“日期”图标 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作6、图象插入及图文混编 图片格式：JPG、GIF、PNG、BMP、SWF 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作7、图象热点的制作 方法：选中图象图片属性工具栏热点图标 工具栏“常用”“图象”按纽热点选项6、图象插入及图文混编 方法：定位图象插入点工具栏图象图标 菜单“插入”“图象”快捷键:Ctrl+Alt+I 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作8、锚点的插入方法 菜单“插入”“不可见标签”“命名锚点”工具栏“常用”“命名锚点”快捷键:Ctrl+Alt+A建立命令锚点9、导航栏翻转图象 方法：工具栏“常用”“图象”按纽导航条选项 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作10、翻转图象制作方法 定位图象插入点工具箱常用“鼠标经过图象”11、超级链接制作热点链接方法:选择热点右键“链接”或点击热点属性工具条上“指向文件”图标 一般网页的设计与制作一般网页的设计与制作三、一般网页的设计与制作11、超级链接制作网页间锚点链接 链接地址格式：文件名（包括后缀名）+锚点名网页间链接作业题：1、针对课堂内容，自选主题使用Dreamweaver MX建立一个简单的站点。2、练习在Dreamweaver MX中进行网页的布局。3 3、Dreamweaver MXDreamweaver MX的网页定位技术的网页定位技术一、概述 网页布局是指网页中各个对象在网页中的相对位置。在Dreamweaver MX中,可以用表格、层表格、层和框架进行定位布局。Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术二、利用表格进行页面布局二、利用表格进行页面布局1、插入表格 工具箱/插入表格图标 2、表格属性编辑 对齐方式、边框线、背景等 注：在800600分辨率下宽度不超过 778高度不超过460 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术二、利用表格进行页面布局二、利用表格进行页面布局3、单元格属性编辑4、合并/拆分单元格5、对象的插入 logo图象、广告条、栏目、水平线、栏目及项目、图象f、文字、版权和日期等 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术三、利用表格进行数据规则转换三、利用表格进行数据规则转换 使用表格进行数据转换要求数据要按一定的规律排列，比如数据间使用，Tab等符号排列 方法：点击插入工具条“布局”“表格数据”Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术四、使用表格增加网页的层次 表格可以增加网页层次，表格有表格背景和单元格背景之分，这为增加表格的层次感提供可能。文字、图象、多媒体、表单等各种对象均可放到表格中进行网页定位,且表格应用不受浏览器的限制。THANK YOUSUCCESS2024/2/26 周一25可编辑 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术五、框架的应用1、框架的创建菜单“文件”“新建”插入工具条“布局”“框架”菜单“文件”“新建”“插入”“HTML”框架”Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术五、框架的应用 2、框架的修改大小、框架删除、框架的再分割 3、框架的保存框架网页和内容网页 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术六、层表格和层的使用 1、概述层表格利用层布局网页，最后生成表格的HTML代码;Layer是真正的层，是网页定位技术中的高级技术。2、插入层表格切换网页到布局视图下点击工具条“布局”“布局表格”/“布 局单元格”Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术六、层表格和层的使用注:空文档中绘制表格时，表格自动捕捉到页面窗口的左上角。层单元格回自动捕捉附近的单元格边界，按住alt键可暂时消除该功能 布局表格中可嵌套布局表格和单元格，布局单元格中无法嵌套 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术六、层表格和层的使用3、分割层表格 点击工具条“布局”“布局单元格”4、移动和调整布局表格和单元格5、为布局单元格添加内容 6、格式化布局单元格和布局表格 Dreamweaver MX Dreamweaver MX的网页定位技术的网页定位技术六、层表格和层的使用7、层（Layer）（1）插入层 插入工具栏“布局”“描绘层”（2）定位层边框线网格 （3）内容对象的输入 （4）层与表格的转化4 4、Dreamweaver Dreamweaver 样式表样式表一、样式表概念 样式表英文缩写为CSS（Cascading Style Shets 层叠样式单）。可以看作是对HTML语言功能的一种扩展。二、样式表示例1、九磅字2、固定背景3、活动的超级链接 Dreamweaver Dreamweaver 样式表样式表三、样式表类型 1、自定义样式是生成一个新的样式 制作完成后需要手工应用。2、定义HTML标签，将现有的HTML标 签赋上样式，制作后不需手工应用。3、CSS选择器用于针对超级链接进行设置，主要有以下几种类型a:Active选中超级链接状态a:Hover光标移上超级链接状态a:Link超级链接的正常状态，没有任何动作的时候a:Visited访问过的超级链接状态 Dreamweaver Dreamweaver 样式表样式表四、样式表冲突 显示规则：1、两种样式同时应用与同一文本时，显示所有格式，除非格式发生冲突。2、当应用与同一文本的样式冲突时浏览器首先显示内部的样式设置3、若有直接冲突 Dreamweaver Dreamweaver 样式表样式表（一）概述 Filter是微软对CSS的扩展，它可以用很简单的方法对页面中的文字特效作出特效处理，静态如阴影、模糊的效果，动态如各种淡入淡出效果，它可以实现Javascript或Vbscript作为脚本语言等高级语言无法实现的功能 五、五、csscss滤镜（滤镜（FilterFilter）的使用的使用 Dreamweaver Dreamweaver 样式表样式表（二）例子演示 1、文字光晕效果 Glow 2、文字阴影效果 DropShow 3、文字动感效果 Blur五、五、csscss静态滤镜的使用静态滤镜的使用 5 5、Dreamweaver Dreamweaver 动态网页设计动态网页设计一、表单的制作1、基本表单的建立2、表单数据的提交 提交方式：get:在地址拦能看到表单的数据，数据长度有限，速度快 post：在地址栏看不到，数据长度不限，速度相对慢 Dreamweaver Dreamweaver 动态网页设计动态网页设计二、行为控制例子演示：1、简单鼠标行为动画2、简单菜单制作 鼠标行为的应用 网页特效代码的应用 onmouseout=this.style.backgroundColor=onmouseover=this.style.backgroundColor=#ffddee Dreamweaver Dreamweaver 动态网页设计动态网页设计二、行为控制3、层的隐藏与显示4、菜单调出方法 视觉假象 使用鼠标移动事件5、层的拖动6、播放声音 引发声音行为的调整7、状态栏的文本设置8、打开浏览器窗口 Dreamweaver Dreamweaver 动态网页设计动态网页设计三、网页变换效果1、网页过渡 “插入”“头标记”“Meta”“插入”工具条“文件头”代码：revealtrans(duration=4 transtion=2)duration：延时 transtion：过渡效果 Dreamweaver Dreamweaver 动态网页设计动态网页设计三、网页变换效果Transtion其他的部分效果取值：盒状收缩 0 圆形收缩 2 向上擦除 4 垂直百页窗 8 溶解 12 左右向中部收缩 13 随机垂直线 22 随机 23 Dreamweaver Dreamweaver 动态网页设计动态网页设计四、交互式图象的使用 方法：“插入”“交互式图象”1、Flash按纽的使用 2、Flash文本的使用 3、导航条的使用 Dreamweaver Dreamweaver 动态网页设计动态网页设计五、时间轴的使用（二）、时间轴面板 “窗口”其他”“时间轴”（一）、概述 层将网页设计从二维空间延伸到三维空间，而时间轴则进一步将网页设计延伸到思维空间。只有图象和层可以使用时间轴，其他对象必需放置到层内才能使用时间轴。Dreamweaver Dreamweaver 动态网页设计动态网页设计五、时间轴的使用（三）、建立时间轴动画 1、使用时间轴建立动画主要是将层放置到时间轴中，用时间轴来改变每一帧属性（包括层的位置、大小、可见度等）2、将对象添加到时间轴的三种方法 例子：可以动的文字 3、录制层的时间轴路径 Dreamweaver Dreamweaver 动态网页设计动态网页设计五、时间轴的使用（四）、时间轴的修改 1、修改时间轴 2、使用时间轴更改层和图象 的属性 6 6、Dreamweaver Dreamweaver 模板和库模板和库一、概述 模板是指具有固定格式和内容的文件，文件的扩展名为.dwt，其最大的作用四可以创建统一风格的网页文件，不需要直接修改。模板支持时间轴及行为，应用了模板的文档，都没有属于自己的时间轴及行为。二、创建模板 1、存现有网页为模板 2、新建空白模板 Dreamweaver Dreamweaver 模板和库模板和库三、模板的应用三、模板的应用（一）直接将模板拖动至编辑的页面（二）菜单“修改”“模板”“套用模板到页”可选区域可编辑区域重复区域更多内容电子商务人新浪博客：http:/ YOUSUCCESS2024/2/26 周一49可编辑