DreamWeaver教案.doc

原创整理Dreamweaver教案第一课一、软件介绍Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、Flash、FireWorks，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，称为网页制作方面的三剑客。利用它可以制作网页、搭建网站架构。也可以制作较复杂的功能网页等，如BBS论坛、调查表格等。大多数的网页均可在DM下制作。二、操作界面1、打开方式。开始程序；桌面快捷方式2、标题栏3、菜单栏4、工具栏工具栏可显示插入、文档和标准三组常用命令的快捷面板。（1）插入面板插入面板可方便的向网页中插入一个对象。（2）文档面板（3）标准面板以上面板可通过查看/工具栏/插入，文档，标准打开或隐藏。5、编辑窗口是提供查看和编辑网页元素属性的视图三种表现形式：代码视图，设计视图，代码视图和设计视图6、状态栏7、属性面板通过 窗口/属性 打开或关闭8、组合面板（1）CSS样式面板（2）层面板（3）行为面板（4）代码片断面板（5）参考面板（6）数据库面板（7）绑定面板（8）服务器行为面板（9）组件面板（10）文件面板（11）文件面板（12）资源面板（13）标签面板（14）结果面板（15）历史记录面板（16）框架面板（17）代码检查器（18）时间轴面板（19）隐藏面板三、站点的建立1、网站建立步骤（1）建站前的准备工作确定网站的主题，计划要发布的内容（2）创建站点的导航结构，即网站的整体框架设计。注意：站点的基本结构中，页面间的链接关系要清晰，同时要兼顾以后的扩充性。（3）收集、整理相关的资料包括LOGO、相关图片、文字资料等（4）组织文档和数据，进行具体的网页制作（5）测试站点（6）申请域名和主页空间（7）连接服务器，上传网站（8）使用维护期2、站点的建立及编辑（1）新建站点打开DM，站点/新建站点（2）编辑站点站点/管理站点/编辑注意：文件扩展名一定要输入(.htm)，文件名统一用小写字母。四、DM的基本操作1、网页的操作（1）新建a、文件/新建b、站点面板：点击右键/新建文件（2）删除站点面板/右键/编辑/删除（3）打开a、文件/打开b、站点面板/右键/打开(4)重命名站点面板/右键/编辑/重合名（5）移动：鼠标拖放（6）保存：文件/保存2、文件夹的操作与文件操作相似建立文件夹的意义，使网站结构清晰，层次分明。命名方式：英文3、站点地图文件面板/地图视图/4、网页属性操作：修改/页面属性可以设置网页标题、背景图像、颜色等。5、辅助工具（1）标尺：查看/标尺（2）网格：查看/网格6、文本的编辑（1）输入：键盘输入 粘贴（2）格式的修改：选定属性面板选定右键（3）空格的输入插入面板/文本/不换行空格(4)换行插入面板/文本/BR字体颜色用DM的颜色样本，共有216种颜色，为WEB安全色。7、HTML 样式(1)分类：“段落样式”和“所选样式”段落样式前面有一个段落标记，该样式使您可以设置段落格式。所选样式前面有一个 a，该样式使您可以设置所选文本的格式。在上面的“HTML 样式”面板中，注意其中的“粗体”样式。样式前的加号 (+) 指示样式将格式添加到需应用它的文本。如果样式没有加号，则在应用所选样式之前将清除任何现有样式。(2)新建：文本/HTML样式/HTML面板-new styles3、应用：选定-点击样式4、删除：HTML面板-删除5、清除：HTML面板-清除8、图像的插入与编辑（1）支持的文件格式：GIF/JPG/JPEG/PNG/（2）图像的插入：插入/图像（3）属性的调整：选定/属性面板（4）图片编辑器的指定: 选定图片/属性面板/编辑器9、图像占位符的使用(1)新建：插入/图像占位符(2)属性的调整：选定/属性面板(3)使用方法：在制作网页时，经常会出现所需的图像还没制作完的情况，这时可先插入一个图像占位符。(4)图像占位符的高度、宽度为必填项。10、HTML编辑（1）HTML是一超文本描述性标记语言（2）组成：普通文本/ 标记/属性和值/ 脚本/ 注释/一个HTML文档是一个字符序列。不过这个序列当中的字符与字符是不平等的。有些字符的排列组合代表特殊的意思。通过这种方法，就可以在HTML文档里面表示出有层次的结构信息来。有特殊含义的排列组合叫做标记（Markup）。HTML中常见的标记种类有标签、注释、引用和声明等类型。字符是值文档中最小的不可再分的组成单元。HTML里允许出现的字符包括空格符（Unicode 0020）、制表符（Unicode 0009）、换行符（Unicode 000A）、回车符（Unicode 000D）和其它一切合法的Unicode非控制字符。空格、制表、换行、回车四个符号被统称为“空白”。除去在几个特殊标签内部，连续的几个空白符会被看成只有一个。另外，所有“后面不是换行符的回车符”以及所有“回车符后面紧跟一个换行符的组合”都会被看成是单一的换行符。在HTML当中，有三个字符是具有特殊含义的。它们是“”和“&”，被用于引入标记。标签和元素不严格的说，标签（Tag）是HTML文档里被“”包围起来字符串，但不含“!”或“”包围起来的内容。普通HTML中的两种以“”结尾但不是标签的东西是注释（comment）和文档类型声明。标签可以用于表明某一段内容代表着什么（例如被“”和“”括起来的区域是一个一级标题），也可以用于代表非文本的内容（例如一个“”表示一张应该插入这个位置的图片）。一个被标签代表的东西，称作一个元素（Element）。标签又可以分成三种：开始标签（Start-Tag）、结束标签（End-Tag）和空元素标签（Empty-Element Tag）。开始标签和结束标签用于代表里面还有其它内容的元素（比如一级标题）。开始标签的格式类似于“”，表示从这个位置开始的内容是这个标签所代表的元素；结束标签的格式类似于“”，表示从这个位置开始的内容不再是这个标签所代表的元素。从逻辑上说，开始标签应该和结束标签成对使用。但是HTML解析器都有一套专门的容错方案来处理不成对的现象。另外有一种叫做标签交错的现象：外面的标签先结束，里面的标签后结束。即类似“ABC”这样的写法。这样的形式有一定的歧义，因此应该避免。HTML解析器可以勉强容忍这种写法，而XHTML解析器则是完全拒绝接受。空元素标签用于代表里面没有其它内容的元素（比如图片）。在HTML当中的空元素标签可以用“”或“”的格式，在XHTML当中则需要采用“”的形态（也可以麻烦一些，写成一个开始标签后面紧跟一个结束标签，类似“”的格式）。这里的标签名，必须是字母（包括汉字）、数字、“.”、“-”、“_”和“:”组成的序列，而且不能以数字和“-”开头。依照传统，浏览器会忽略掉自己不知道是什么意思的标签。属性某些开始标签和空元素标签里可以包含属性（Attibutes），用于说明所代表元素的特质（例如，img标签有src属性，用来声明对应图像的URI）。在带有属性的标签的基本格式是“”。属性名的格式要求与标签名相同，属性值则可以是不含“”、“&”以及“”的任意字串。属性值前后的“”也可换为“”，这时属性值里可以出现“”而不能出现“”。另外分割属性名与属性值的“=”前后可以加上任意的空白。在不致引起混淆的情况下，HTML不严格要求属性值的前后加上引号，但是XHTML则规定引号是不能省略的。对于只有一个可能的取值的属性，HTML还支持“只加上属性名，不加上“=”与属性值”的写法（例如“”）。这种时候会按照好象真的取了这个值来处理。但是因为在某些浏览器里这种时候生成的DOM树有点别扭，这种写法已经不再流行。依照惯例，浏览器会忽略掉自己不明白是什么含义的属性名和属性值。注释注释是一种说明性的标记。用于向将来查看某一文档的源代码的人传达某些信息。HTML当中的注释以“”结尾，中间应该是不含“-”也不以“-”结尾的任意字符序列。但是实际上内容含有“-”或者以“-”结尾的注释常常也能被浏览器正确的处理。除掉在某些特殊标签内部，注释对浏览器来说，是相当于不存在的。这种安排是为了兼容早期对script标签跟style标签的处理。引用引用是以“&”开头，以“;”结尾的标记，主要被用于代替一些特殊的字符。引用分成字符引用和实体引用两种。字符引用的格式是“”或者“”。这里的编号是被引用字符在Unicode规范中的编号。使用字符实体，可以在文档中加入不方便直接输入的字符（例如在使用ISO-8859-1编码的文档中加入汉字）。也可以用于代替有特殊含义的字符（“”和“&”等），不过这种时候更常见的做法是用实体引用。实体引用的格式是“&实体名;”。实体引用会在处理的时候被替换成实体名代表的字符串。这些字符串的长度没有限制，可以是零到任意多个字符。HTML已经预先定义了一组常用的实体名。典型的有代替“”的“gt”，代替&的“amp”，代替“”的“quot”和代替“”的“apos”。不过IE 6对apos的支持有些毛病，所以一般用“”来代替。HTML没有提供自定义实体的机制，但在XHTML和其它基于XML的格式当中可以实现这种效果。页面的标题这是我的第一个页面。这是粗体文本。解释：HTML 文件中的第一个标签是 。这个标签告诉浏览器这个 HTML 文件的开始点。文件中最后一个标签是 。这个标签告诉您的浏览器，这是 HTML 文件的结束点。位于 标签和 标签之间的文本是头信息。头信息不会显示在浏览器窗口中。 标签中的文本是文件的标题。标题会显示在浏览器的标题栏。 标签中的文本是将被浏览器显示出来的文本。 和 标签中的文本将以粗体显示。参考：/index.html五、超链接1、什么是URLURL即统一资源定位符（URL，英语Uniform Resource Locator的缩写）也被称为网页地址，是因特网上标准的资源的地址。用于完整地描述Internet上网页和其他资源的地址的一种标识方法。由三部分组成：a、协议或服务方式。b、该资源所在的主机的IP地址或端口号。c、主机资源的具体地址，如目录、文件夹、文件名等。2、路径路径实际是对存放文档位置的描述。3、DM中使用的3种文档路径类型a、绝对路径：即文档的完整URL，包括传输协议。例：/index.htmlb、文档相对路径：指以当前文档所在的位置为起点到被链接文档经由的路径。是用于本地链接的最方便的表述方式。例：web/index.html注：文档间的相对路径省去了当前文档和被链接文档间的完整URL中相同的部分，只留下不同的部分。c、根相对路径：是指从站点根文件夹，即一级目录到链接文档经由的路径。根相对路径由前斜杠开头，它代表站点的根文件夹。例如/sport/web/image.htm4、链接的方式和对象方式：a、文字链接b、图像链接c、按钮链接对象：d、命名锚记的链接：通常为一段文本的内部链接e、网站内部的链接：链接到网站内部其它网页f、网站外部的链接：链接到其它网站g、文件下载的链接：以超链接的方式提供下载服务h、电子邮件的链接：建立一个填好收件人地址的空白邮件的链接。5、链接网页的打开方式_blank：将链接的文件在一个新的窗口中打开_parent：链接的文件在父窗口的框架下打开。_self：将链接的文件载入该链接所在的同一框架或窗口中。此为默认值。_top：将链接的文件载入整个浏览器窗口中，会删除所有框架。第二课一、表格1、作用：布局、定位2、组成：行/列/单元格/边线3、创建：插入/表格表格宽度的表示方式：分别为百分比和像素4、表格的选择编辑/表格/选择鼠标的点击/拖划/CTRL(SHIFT)键5、表格属性选定表格/表格属性面板单元格属性合并/拆分/删除/插入/排序 6、 调整表格的行数与列数7、 调整表格的宽度与高度8、 面板的使用9、 套用表格样式：命令/格式化表格10、 对表格数据排序：命令/排序表格11、表格的嵌套12、表格与层的转换修改/转换层的局限性是需要高版本浏览器的支持。二、层1、定义：层是网页的一个区域，在一个网页中可以有多个层存在，它最大的魅力在于各个层可以重叠，并且可以设定各层的属性和关系。使用层可以灵活有效的制作页面，它可与表格相互转换。与表格的功能相比，层与表格相似，可相互转化，但层在操作上自由度更高。层为何要转换成表格：用层在做布局的时候方便点，但是层容易出现由于不同显示分辨率定位错乱的问题，而且低版本浏览器不一定支持。所以，要转换成表格。2、创建：插入/层3、选择：4、移动：5、删除：6、属性：选定层-属性面板7、对齐：选定多层-修改-对齐8、层面板层的可见性：Default：按浏览器默认方式控制层的可见性。大多数浏览器以inherit方式控制层的可见性。Inherit：继承父层的可见性Visible：总是显示该层的内容，不管父层是否可见。Hidden：总是隐藏该层的内容，不管父层是否可见。闭眼、睁眼、及没有图标分别对应hidden、visible、inherit选项内容溢出层的控制：Visible：自动扩大层，以完整显示其中的内容Hidden：层的大小不变，超出层的部分不显示Scroll：无论层中内容是否超出层的边界，都会在层的右端、下端出现滚动条。Auto：只有当层中的内容超出层的边界时才出现滚动条9、标准视图/规划布局视图 绘制布局表格和绘制布局单元格三、框架1、定义：将一浏览器窗口划分为几个区域，每个区域可分别显示不同网页文件。2、组成：框架集和单个框架框架集：是定义了一组框架结构的网页，定义了网页中显示的框架数、框架大小、载入框架的网页源和其它可定义的属性等。单个框架：是指网页上定义的一个区域。边框线的显示/隐藏：查看/可视化助理/框架边框3、创建：（1）插入/HTML/框架（2）插入面板/布局/框架4、 保存：（1）文件/保存全部（2）文件/保存框架5、框架（集）属性：选定框架/框架属性面板6、框架的选择：(1)ALT+鼠标点击(2)窗口/框架面板/点击7、框架的拆分：（1）选定框架，ALT+拖拉（2）修改/框架页/选择 8、删除：选定框架-拖拉9、框架网页中超连接的设定窗口/框架，由文件面板中拖拽10、编辑无框架内容修改/无框架页/编辑无框架内容编辑无框架内容用于编辑浏览者使用不支持框架的浏览器时显示的内容第三课一、表单1、表单是网页浏览者与Internet服务器互动的界面。2、功能：收集用户信息2、组成： 表单区域/表单组件3、创建：(1)插入/表单/表单对象(2)插入面板/表单/表单对象 表单/单行文本框/隐藏域/多行文本框/复选框/单选按钮/单选按钮组/下拉菜单/跳转菜单/图片域/浏览域/按钮/标签/ 字段集4、属性的修改选定-属性面板二、CSS1、css层叠式样式单 CSS是Cascading Style Sheets（层叠样式表单）的简称。它允许作者在HTML文档中加入样式（如字体类型、颜色、大小等等）。CSS样式实际是含有多个文本属性和网页属性的集合。2、 分类（1）内嵌样式(Inline Style),类似于HTML中的属性（2）内部样式表(Internal Style Sheet)：在HTML中头部专门定义，然后在Body中使用。（3）外部样式表(External Style Sheet)：专门用一个文件来定义。 1).内嵌样式：例： 使用内嵌样式 第一段文字。 第二段文字。 2).内部样式表： 在HTML页面的头信息元素中给出，可以同时设置多个标记所定义信息的显示效果。内部样式表只对所在的网页有效。例： 使用内部样式表 bodybackground-color:#ccffee h2text-align:center;color:red p.mystyle1font-size:20px;color:blue p.mystyle2font-style:italic;font-size:40px; color:#dd44aa;text-align:center 标题文字 第一段文字。 第二段文字。 第三段文字。 第四段文字。 第五段文字。 3).外部样式表：例(需要两个文件)：my.css文件：bodybackground-color:#ccffeeh2text-align:center;color:redp.mystyle1font-size:20px;color:bluep.mystyle2font-style:italic;font-size:40px;color:#dd44aa;text-align:centermy.html文件： 使用外部样式表 标题文字 第一段文字。 第二段文字。 第三段文字。 第四段文字。 第五段文字。 3、创建与保存：文本/CSS 层 或 CSS面板-新建CSS样式4、修改：文本/CSS 层/编辑样式表 或 css面板-编辑 4、导入：文本/CSS 层/附加样式表 或 css面板-附加 5、删除：6、清除7、应用：三、互动行为1、行为是DW预置的javascript程序集。每个行为包括一个动作和一个事件，任何动作都需要一个事件激活。动作是一段已编辑好的javascript代码。事件是用来激活动作的条件，如点击一个按钮。行为：是事件和动作的组合。在DW中，行为被规定附属于用户页面上某个特定元素，如一个文本链接、一个图像或一个按钮。对象：是产生行为的主体，如图片、文字、多媒体文件等。事件：是触发程序运行的原因，可附加到各种网页中的元素和标记上。事件总是针对网页中的对象，如图片、文字等。动作：事件触发后要完成的效果，如弹出某段信息，交换图片等。2、行为面板 窗口/行为3、应用：选定载体-行为面板“+”入行为3、删除：选定载体-行为面板“”除行为 4、常见事件类型： onMouseOver：鼠标移到目标上；onMouseUp：按下鼠标再放开左键时；onMouseOut：鼠标移开时；onMouseDown：按下鼠标时（不需要放开左键）；onClink：点击时；onDblClick：双击时；onLoad：载入网页时；onUnload：离开页面时； onResize：当浏览者改变浏览窗口的大小时；onScroll：当浏览者拖动滚动条的时。5、动作播放声音：可以为网页加入声音；打开浏览窗口：可以打开一个小窗口（和网上的弹出窗口一样）；弹出信息：可以弹出一条警告信息；调用JavaScript：调用网页中包含的Javascript程序；交换图像：实际上是交换图像；更改办容：可以改变已经插入的层的内容；恢复交换图像：把已经交换的图像恢复过来；检测插件：可以检测访问者的浏览器是否己安装浏览网页所必须的插件；检测浏览器：检测访问者使用的是什么类型的浏览器；检查表单：检验网页中的表单是否合法；控制Shockwave或Flash：控制网页中包含的Shockwave或Flash；转到URL：跳转到其它页面；设定图像导航条：和交换图像差不多；设置文字：在特定的地方显示文字；显示或隐藏层：设置图层的显示或隐藏；时间轴：可以制作更多的动态交果；（以后再说）跳转菜单：插入跳