DreamWeaver最新课件

功能一：“网页排版”功能功能二：“网站管理”功能功能三：“动态网页”的制作一.网页排版1.利用表格进行页面规划，2.将网页元素：文字、图片、动画、声音综合到表格中，3.添加好相关的网页特效，便能制作成一个完整的网页例如:太奇教育网站二.网站管理站点：管理网页及网页元素的文件夹（库）一般来说：要利用DW创建网页，首先应该建立本地站点然后在本地站点范围内对网页进行编辑，保证相对链接的正确性，可以更好地管理站点文件，方便上传文件。2.打开站点窗口：“窗口”-“文件”、“站点”-“管理站点”、F81.在本地机上：建立一件文件夹用于存放站点内的所有文件，再在文件内建立几个文件夹，将文件分类,如：图片文件存放在Image文件夹里，html文件放在HTML文件夹里。便于以后的管理与查看。3.创建方法：1利用站点向导(basic)过于简单，不直观；2利用增加方式(Advanced)建立站点的步骤：“站点”对话框：站点名称：识别作用，不要使用中文名字本地目录：存放站点的位置自动刷新文件列表：选中，便自动刷新图像文件夹：专门存放图像的文件夹HTTP地址：该站点的HTTP地址启用缓存：加快链接的速度三.动态网页的制作1.管理员登录系统2.班级留言板3.一个简单的论坛4.搜索引擎实例操作：第一章DreamWeaver基础篇第1节：网页和网站的基本知识第2节：DreamWeaver的三种编辑模式第3节：页面设置的修改第一章DreamWeaver基础篇第1节：网页和网站的基本知识网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页(index或default)。注：(1)静态网页文件格式为.htm或.html(2)动态网页为.asp网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。一：网页和网站的基本概念第一章DreamWeaver基础篇第1节：网页和网站的基本知识1.WWW是英文WorldWideWeb的缩写，既通常所说的万维网，简称Web。Web是一种基与因特网的分布式信息查询系统。2.WWW的组成：WWW由Web浏览器(WebBrowser或称客户机)和Web服务器(WebServer).两者之间通过HTTP通信协议连接,形成一个客户机/服务器系统。二：WWW的相关介绍第一章DreamWeaver基础篇第2节：DreamWeaver编辑模式Dreamweaver编辑模式介绍1.代码模式(html模式)特点：用代码来实现网页的编写，会自动生成注：ctrl+u可更改代码的颜色2.设计模式:特点:利用菜单和工具来实现网页的编写第一章DreamWeaver基础篇第2节：DreamWeaver编辑模式3.混合模式（代码+设计模式）：1在一般情况下，代码窗位于项端，可通过“视图选项”或“文档”工具栏”的将“设计模式置于顶部”将设计窗位于顶端2具有“所见即所得”的特性：刷新：F5、点击另一种模式3代码=0设计=0设计模式代码模式第一章DreamWeaver基础篇第3节：页面设置一.页面设置的方法：1“修改”菜单“页面属性”2右击页面空白处，选“页面属性”3快捷键：Ctrl+J第一章DreamWeaver基础篇第3节：页面设置二.“页面设置”对话框设置(一)1.“大小”：设置字号，一般为12-14px2.“背景图像”：一般设置图案或标志作背景显示3.“边距“：设置表格距页面四边的距离第一章DreamWeaver基础篇第3节：页面设置二.“页面设置”对话框设置(二)补充：如何在页面中设置几种不同的链接方式设置“CSS样式”第一章DreamWeaver基础篇第3节：页面设置二.“页面设置”对话框设置(三)注：一般网页文档通常最多设置2级标题格式，第3级格式为正文。(结合“属性栏”中的“标题格式”)第一章DreamWeaver基础篇第3节：页面设置二.“页面设置”对话框设置(四)注：国际标准编码GB2312第一章DreamWeaver基础篇第3节：页面设置二.“页面设置”对话框设置(五)跟踪图像：设置表格排版中的草稿图效果，在网页全部编辑完后应该删除。第二章文本及超链接应用第1节：文本应用及处理第2节：超链接的制作第二章文本及超链接应用第1节：文本应用及处理一．在DreamWeaver中特殊文本的录入：1.文本的换行操作：Shift+Enter文本的空行操作：Enter2.输入空格：(1)切换到中文全角下，便可输入空格；(2)切换到“代码”视图：添加 第二章文本及超链接应用第1节：文本应用及处理3.特殊文本的输入：第二章文本及超链接应用第1节：文本应用及处理二．给文本添加项目符号与编号：方法：直接在文本排版好后插入图片，不要使用项目符号与编号第二章文本及超链接应用第1节：文本应用及处理三．文本的属性栏设置：强调：(1)字体的添加与删除(2)链接的2种方式第二章文本及超链接应用第2节：超链接一．超链接的基本概念：利用超级链接，可以实现文档间或文档中的跳转。很显然，超级链接由两个端点(锚)和一个方向构成，开始位置称为源端点(源锚)目标位置端点称为目标端点(目标锚)。超链接就是由源锚指向目标锚的一种跳转源锚目标锚(页面、图像、声音、程序)第二章文本及超链接应用第2节：超链接二．超链接的分类：1.根据源锚分类：1超文本(Hypertext):利用文本构成的超级链接(源锚：文本)2超链接(Hyperlink):除文本外所构成的超级链接(源锚：非文本)第二章文本及超链接应用第2节：超链接二．超链接的分类：2.根据目标锚分类：1外部链接:网站链接2内部链接:本地页面3E-mail链接:邮件地址链接4局部链接:书签链接5空链接:#、###、javascript:;6脚本链接:javascript:alert(‘你好，欢迎使DW’)第二章文本及超链接应用第2节：超链接在地址栏中e-mail链接后输入：?subject=主题&bcc=秘密抄送地址&cc=抄送地址补充一：E-mail链接补充二：书签链接内部锚(本文档中的书签):直接在link栏输入#name外部锚(其它文档中的某书签):直接在link栏输入路径#name一般：用于制作电子书刊(电子杂志)第二章文本及超链接应用第2节：超链接1._blank在新的未命名窗口中打开2._parent在父框架集中打开()3._selt在当前框架或窗口中打开4._top载入到整个浏览器窗口并删除所有框架()三．链接的目标窗口：第二章文本及超链接应用第2节：超链接第三章网页素材的应用第1节：图片的属性设置第2节：图片的其它操作第3节：Flash动画的应用第4节：背景音乐的制作第三章网页素材的应用第1节：图片的属性设置一.图片的属性设置：1.“替代”框：制作鼠标移上去时的说明文本2.边框颜色只能通过CSS样式修改(补充)3.重点介绍:编辑图片的6种方式第三章网页素材的应用第2节：图片的其它操作二.图片的其它操作：1.图像占位符：在图片未处理好前，用来标识位置2.鼠标经过时：设置鼠标的2种翻转状态3.导航条:制作鼠标的4种翻转状态(可加超链接)第三章网页素材的应用第3节：Flash动画的应用三.Flash动画：1.插入.Swf文件2.制作精彩的Flash按钮3.制作Flash文本按钮补充:将Flash文件的背景设为“透明”：在“参数”中设置：wmode=transparent第三章网页素材的应用第4节：背景音乐的制作四.背景音乐的制作：1.结合behavior行为面板，onload“播放声音”2.切换到代码视图：加入embed制作带播放器控制的音乐(1)Src文件路径(2)width播放器宽度(3)height播放器高度(4)autostart自动播放(5)loop循环次数(6)Hidden隐藏播放器第四章表格排版与应用第1节：表格排版的基本理论第2节：布局表格的应用第3节：标准表格的应用第4节：表格的特殊效果第四章表格排版与应用第1节：表格排版的基本理论表格排版的作用：1.综合排列页面中的各元素，将它们组成一个整体；2.对齐数据：平均分布对象；第四章表格排版与应用第1节：表格排版的基本理论表格排版的基本思路：1.使用布局表格对页面进行大致分布布局视图2.再使用标准表格对细节内容进行排列标准视图第四章表格排版与应用第2节：布局表格的应用(一)布局视图:Ctrl+F6手绘表格1.绘制布局表格2.在表格中绘制各单元格(按Ctrl键连续绘制,按alt键精确绘制)3.制作单元格提示信息:尺寸及内容4.插入已准备好的素材对象第四章表格排版与应用第2节：布局表格的应用布局表格的应用第四章表格排版与应用第3节：标准表格的应用(二)标准视图:用表格工具精确定位对象优点：平均分配单元格间距第四章表格排版与应用第3节：标准表格的应用表格实例一：::上海大众的公司网站::第四章表格排版与应用第3节：标准表格的应用表格实例二：::某某学校的网站首页::第四章表格排版与应用第3节：标准表格的应用表格实例三：::学校的新闻版面::第四章表格排版与应用第3节：标准表格的应用补充表格中的特殊效果：第四章表格排版与应用第4节：表格的特效制作1.水平线2.垂直线3.极细线表格4.立体感表格5.动态表格第四章表格排版与应用第4节：表格的特效制作1.水平线表格1设置表格属性:实例一:水平线表格第四章表格排版与应用第4节：表格的特效制作2.垂直线表格1设置表格属性:实例二:垂直线表格第四章表格排版与应用第4节：表格的特效制作3.极细线表格1设置:border=0,cellspacing=1,bgcolor=“black”2全部选定单元格(注意不要选取表格)将bgcolor=“white”实例三:极细线表格第四章表格排版与应用第4节：表格的特效制作4.立体感表格1切换到代码视图：bordercolor=white,bordercolorlight=black实例四：立体感表格第四章表格排版与应用第4节：表格的特效制作5.动态表格1在单元格的td标记里加上：onMouseOut=“this.style.backgroundColor=‘原颜色’”onMouseOver=“this.style.backgroundColor=‘lightgreen’”就可以了，这些是些JavaScript脚本，如果你看不懂，可以暂时不必理会，其中lightgreen为鼠标移上去的时候单元格出现的颜色。第五章页面动画的制作第1节：层的创建与设置第2节：时间轴的应用第五章页面动画的制作第1节：层的创建与设置一.创建分层:1.单击“常用”面板上的“层”按钮2.“插入”“布局对象”“层”按住ctrl键可连续绘制绘制嵌套层：按住Alt键＋绘制在layer面板中按住ctrl键直接拖第五章页面动画的制作第1节：层的创建与设置二.层的属性参数:强调：1.Z轴:层的次序(数值越大，层越上)2.溢出:层内容超出时的处理方案，设置是否需要滚动条第五章页面动画的制作第1节：层的创建与设置三.层应用的精彩实例:1.图片的注释效果2.怕鼠标的图片3.图片的拖动游戏结合“行为”面板第五章页面动画的制作第2节：时间轴的应用时间线(时间轴)一、启动方式：1.“窗口”“时间轴”2.Alt+F9DW可以使用时间轴制作动态网页，这种动态网页是建立在时间的基础上，在时间轴中固定的时间段或是时间点上对应用时间轴的对象的状态进行修改，从页实现网页的动态效果。第五章页面动画的制作第2节：时间轴的应用二.时间轴的精彩实例:1.页面动画的移动2.Loading加载动画3.随鼠标的变化进控结合“层”来实现动画制作制动画的播放第六章框架技术第1节：框架的基本理论第2节：框架的常用操作第3节：框架的应用第六章框架技术