Dreamweaver的使用.ppt

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