网页培训DREAMWEAVER8讲义

1、Dreamweaver讲义IIS安装与调试1、 开始控制面板添加/删除程序-添加/删除windows组件，如下图：IIS信息服务IIS安装图：IIS信息服务2、 Internet信息服务（IIS）-详细信息万维网服务确定下一步至完成3、 开始控制面板管理工具- Internet信息服务（IIS）本地计算机、网站、默认站点（右键属性），按照下面三个图示调整相应参数。Dreamweaver基本设置1.Dreamweaver启动：程序组方式、文件-右键2.主菜单、浮动面板、状态条图1：Dreamweaver操作界面3.建立主页准备好素材和构思好网页结构；在右侧的窗口（本地文件夹文件列表框）右击鼠标，

2、选择“新建文件”；将“无标题”改为“index.htm”；建立子目录：如html、images、others等，可分别放入框架网页、图像、其它插件等；双击index.htm文件，进入编辑index.htm网页窗口。4.页面设置：在编辑窗口右键单击，选择页面设置5.直接创建新页面：“文件”“新建”（CTRL+N）6.打开、保存页面：7.使用模板l 打开模板页面：“文件”“新建”l 设置默认模板：将“Dreamweaver ConfigurationTemplates”中default.htmll 自建模板：“文件”“另存为模板”l 使用模板：“文件”“从模板中新建”基本操作1、编辑文字及预览页面

3、：l 输入、修改、修饰l 剪切、复制、粘贴l 撤消、恢复l 查找、替换l 预览页面2、有序列表、无序列表、嵌套列表、自定义列表l 有序列表：等价WORD中的项目编号l 无序列表：等价WORD中的项目符号l 嵌套列表：上面两种组合l 自定义列表：“文字”“列表”“定义序列表”；输入要定义的“项目”（ENTER）、输入相应的定义“数据”（ENTER）；重复至两次ENTER“文字”“列表”3、资源管理器（Assets）一旦在页面中插入图片、选择颜色、制作链接、使用了FLASH、SHOCKWAVE、视频素材、脚本，所有这些经刷新后将出现在ASSETS面板分类中。使用：选择“插入”；选中拖曳4、调试页面

4、用于调试一些包括脚本的文件“文件”“在浏览器中调试”“iexplore”5、设置页面属性“修改”“页面设置”；右键单击编辑区“页面设置”6、导入WORD文件“命令”“清理Word HTML”7、HTML源文件的操作Dreamweaver可以方便修改错误的地方，先在Dreamweaver中将光标移到要修改的地方，再打开自带的HTML source编辑窗口即可。“修改”“快速标签编辑器”（Ctrl+T）；有三种模式（用Ctrl+T切换）。8、熟悉界面（见复印件）操 作图像操作u 插入图像：“插入”“图像”u 修改图像：改变大小、边框u 移动图像：垂直距、水平距；用表格控制u 图像的收藏：右键“添加

5、到图像收藏夹”表格操作：（注意选取对象他table、tr、td）u 建立表格：边距、间距、边框u 表格嵌套：在单元格中插入表格u 表格的操作：选取（表格、行、列）、合并、拆分、插入行、插入列、增加行或列、删除行、删除列、增加合并行、增加合并列、减少合并行、减少合并列。（“修改”“表格”）u 表格修饰：对齐方式、调整大小和位置、颜色（边框、线、背景）、文字修饰、预置格式创建表格（“命令”“格式表格”）。u 文字录入图像放置（放入内容不要破坏表格格式）u 表格排序应用提示将表格设定为网页的框架，即先设定大致模式在单元格中加入背景图片，使其构成某种图案表格（单元格）中插入表格，尽量独立操作，避免相互

6、影响表格嵌套不应过多，以免网页过大，影响传输速度练习1、 图2所示，制作一个网页。内容、格式不限。 图2：示范网页2、 仿制在指定位置（Dmt3tools塘沽在线.htm）中网页布局框架u 建立：启动Dreamweaver，创建空白文档单击“窗口”“对象”“”“框架”，选择其中一种u 修改：鼠标拖动框架边界“修改”“框架组” 选择一种框架形式u 保存：“文件”“另存框架为”：将保存当前这个文件（换名）“文件”“保存框架”：将保存当前的这个框架文件“文件”“保存全部框架”：将保存n+1个文件“文件”“另存框架为模板”：将保存当前框架为模板文件框架类型：标题、目录、页脚、垂直拆分、水平拆分。如图3

7、：图3：框架类型框架参数设置边框、边框宽度、边框颜色、行（或列）值、单位（属性面板）链接路径：相对路径：见附页绝对路径：创建链接u 以文本为创建链接标志的对象过程（步骤）1：选择文本对象；在属性面板中单击链接右侧的文件夹图标；在弹出的窗口中选择要链接的文件；按“选定”。在“相对到”文本框中有“文件”和“站点根目录”两个选项，为两个相对路径。过程（步骤）2：使用指向文件图标；在站点地图中直接拖动。u 以图片为创建链接标志的对象类似文本链接方式，但多了热区指针工具。u 链接到已命名的标签步骤：先“插入”“隐藏元素”“命名锚点”（或在“对象面板”中点击“”，选择“隐藏”）；在弹出的对话框中输入书签名

8、（注意：不支持中文）；然后在文档窗口选定文本（或）图像；在“属性检查器”“链接”域中输入“#”和书签名，若链接到其它文件中的书签，则要输入“文件名#书签名”。u 链接到指定邮箱方法1：选择要链接的对象；在“属性检查器”中的链接文字框里输入“mailto:邮箱地址”。方法2：“窗口”“对象”；选择要链接的对象；在“对象检查器”中选择“插入电子邮件链接”；在弹出的对话框中按要求输入，可以省略mailto:。u 远程登陆：“telnet:站点地址”（B）u 脚本链接：在链接文字框中输入“javascript:JavaScript”代码或函数调用（或“vbscript:VBScript”）。例如：ja

9、vascript:window.open(index.htm)u 修改链接：应在站点管理去做u 测试链接：在浏览器中进行（F12）练习：将图2中文字做链接；将图2中各其它对象做链接。如树，房子等；创建一个个性模板，并设置为默认模板；用WORD创建一个WEB格式文件，导入Dreamweaver，清理；在网页中录入2段文字，第一段为5号、宋体、蓝色。第二段为5号、楷体、黄色；在网页中插入表格（2*2），将以上两段文字放入表格中（左右放置），第二段文字加灰色背景；在表格中插入图片，位置在两段文字之间；建立两个书签。一个在网页上方，另一个在下方，两个书签相互链接。框架链接可在同一个网页中显示多个网页。

10、在产生链接要求时，按指定的位置显示被链接的对象。制作链接时各参数含义：_blank：点击链接时，被链接对象在新的空白页显示_parent：用父窗口来放置链接的网页_self：用自身的窗口来放置链接的网页_top：跳出所有框架结构显示链接的网页mainFrame：在主框架显示leftFrame：在左面框架显示topFrame：在上面框架显示cornerFrame：在角落框架显示提示：框架存盘时文件名不要用中文（Dreamweaver）样式表CSS（Cascading Style Sheet）基础：电子邮局文字颜色一样吗？将以上内容放入Dreamweaver中，看看结果。在CSS中每一条定义都有如

11、下的形式：selectorproperty:value;property:value;u selector:三种形式1. tag:html中的标志,如A，P，BODY等2. class:类3. ID:与class类似，用法不同u Property：要被修改的性质，如coloru Value:给property的值,如red，红色CSS定义：u HTML selector语法：tagproperty:value例1：h1color:red例2：h1,h2,tdcolor:red同时定义几个selector为相同的属性u Class selector相关Class selector语法：tag.c

12、lassnameproperty:value例：h2.redccolor:redu 独立Class selector语法：.classnameproperty:value例1：.blueccolor:blueID selector：用法同Class selector，可以使JavaScript,CSS-P操作例：this is no classhave classblue h3blue paragraph用CSS来操作和修改、文字定位u 字体：font-familyu 大小：font-sizeu 字形：font-styleu 加重：font-weightu 行距：line-heightu 水平

13、对齐：text-alignu 垂直对齐：vertical-alignu 段落第一行空格：text-indentu 字母大小写：text-transformu 修饰文字（加下划线等）：text-decorationu 改变列表前的标识符号：list-style-typeCSS样式应用技巧u 大部分CSS操作、修改可以用下面方法完成“窗口”“CSS样式”“+”选择“名称（自己定义）”、“制作自定义样式”、“仅这个文档”在左面的“选项”中点击，右面填入相应参数u 链接文字技巧“窗口”“CSS样式”“+”选择“使用CSS选择器”、“名称”“a:hover”、 “仅这个文档”在左面的“选项”中点击，右面

14、填入相应参数应用：1. 鼠标移至链接文字，下划线消失，链接文字变红色2. 鼠标移至链接文字，链接背景变黄色3. 鼠标移至链接文字，文字间距变大 (A)CSS滤镜实例u 给文字加Blur滤镜（产生立体效果）1. 单击快速启动面板上的“显示（隐藏）CSS样式”图标，启动样式编辑器2. 单击“编辑样式表”图标3. 在弹出的对话框中选择“新建”（或“编辑”）4. 在新的对话框中，选择“扩展名”在“滤镜”中选择“blur”5. 在“滤镜”中填入相应的参数（如：true,135,10）6. 加载到文字7. 将文字放入表格中8. 选择文字所在的单元格9. 单击刚才新建的样式即可u 给图片加Blur滤镜方法同

15、文字，不用放入表格中（一般在表格中也会有更加好的效果）ADD：布尔参数TRUE，FALSEDirection:阴影方向，0360度，45度一个间隔，故只有8个方向Strength:阴影的长度，代表有多少像素的宽度成为阴影u MASK滤镜的应用（产生矩形遮罩）可以是文字产生类似图像的效果，但占用空间要小的多。只有一个参数COLOR。u Alpha滤镜的应用(颜色过度)把一个目标元素与背景混合。参数：opacity：透明度（0完全透明100完全不透明）finishopacity：指定结束时的透明度（0100）style：透明区域的形状特征。0：统一形状；1线形；2：放射状；3：长方形startX和

16、startY：渐变透明效果开始X和Y 的坐标finishX和finishY：渐变透明效果结束X和Y 的坐标u DropShadow滤镜的应用（阴影效果）给添加的对象阴影效果参数：color：阴影的颜色offx 和offy：阴影的偏移量（可以为负）positive：布尔值。非0时（true）为任何的非透明像素建立可见的投影；为0（Fasle）为任何的透明像素建立透明的效果u Shadow滤镜：产生渐进感的阴影操作：u 给图片加Blur滤镜1. 设置BLUR2. 单击对象面板的图片插入图标，插入一个图片3. 选取图片4. 单击CSS图标中的已经设置的CSS样式u MASK滤镜的应用（产生矩形遮罩）

17、五彩缤纷的文字1. 插入表格（1*1）2. 加入多彩的背景图3. 输入文字4. 给单元格加载一个MASK滤镜即可u Alpha滤镜的应用(颜色过度)新颖别致的跑马灯：可使文字淡出淡入1. 插入表格（1*1）2. 设置Alpha滤镜（100，20，2，0，0，100，100）3. 在表格中插入跑马灯（滚动字幕）4. 给跑马灯加载一个Alpha滤镜即可（不要给单元格加）u DropShadow滤镜的应用（阴影效果）带阴影的文字1. 插入表格（1*1）2. 设置DropShadow滤镜（gray,5,5,1）3. 在单元格上加载DropShadow滤镜图片立体边框一般DropShadow对图片无效，

18、但将图片放入表格中，加载DropShadow可以产生立体边框效果u Shadow滤镜的应用（渐进感阴影效果）1. 插入表格（1*1）2. 设置Shadow滤镜（#，135）3. 在单元格上加载Shadow滤镜交互式表单收集访问者的反馈信息，与反馈者进行交流。注意：表单对象应放到表单域范围内，否则表单内容发不出去。创建表单域u 菜单：“插入”“表单”；u 对象面板标准表单-可以在表单域中加入表单组件、文字、表格等。组件：u 文本域接收访问者的输入信息“插入”“表单对象”“文字域”；对象面板：参数TextField：用于设置文本域的名字字符宽度：用于设置文本域的宽度最多字符：允许用户输入的最多文本

19、数（字符数）类型、多行、密码：文本域的类型行数：文本域的行数换行：“关”：横向坐标有效“默认”：纵坐标有效初始值：用户输入的初始值（选“换行”“关”，再选别的选项）u 单选项只能访问其中的一个Radiobutton：单选按钮组的名称选定值：用于设置选中单选按钮时的值已钩选、未钩选：初始是否被选中u 复选项CheckBox Name：复选框名选定值：复选框前面的文字即可u 列表/菜单菜单限制访问者选一项，列表允许选多项LIST/MENU：下拉菜单的名称类型：菜单、列表列表值：填入“项目标签”和“值”初始化被选择：在“列表值”中填入的内容在这里显示u 按钮使表单发送、复位等命令（三种）提交表单：将

20、表单域中的内容发送到用户指定的地址复位表单：将表单域中的内容复位为初始值自定义（无）：用户自定义按钮用途其它表单组件u 文件框：选取文件u 隐藏框：插入不可见元素（为了在编辑器中查看需：“查看”“可视化处理”“隐藏元素”）u 跳转菜单：菜单链接设置表单属性Form Name：表单的名称方法：递交的方式动作：设置服务器处理表单数据的文件源。层与时间轴的使用u 层的一般应用1、 插入层到网页中菜单“插入”“图层”；对象面板中拖曳鼠标画出图层至所需大小2、 调整层的大小手工调整在属性面板中调整3、 添加文字4、 添加背景图案：选中图层、选择背景图像5、 插入FLASH动画：u 层的管理1、调整Z-顺

21、序按F2可以调出或隐藏层面板在层面板中可以方便选择不同的层层的Z顺序值越大，层越在上层面板中的“名称”、“Z”-顺序的值可以修改2、层的隐藏与显示F2；菜单中“窗口”“层”；单击任务栏（显示历史记录）隐藏与显示层单击层窗口的左面切换3、防止层的重叠注意：在层重叠前选项有效4、层与表格转换“文件”“转换”：只能层转换成表或“修改”“转换”u 层的应用制作如图4所示效果的网页图4：层的应用制作带阴影的层u 时间轴的使用时间轴是控制层在每一秒的位置的工具步骤：1、 建立层并放入文字或图片等2、 确定图层3、 打开时间轴，加入层到时间轴4、 调节关键帧；确定图层位置如图5：时间轴面板图5：时间轴面板u

22、 简单的时间轴实例移动的文字滚动的文字：不能省略裁切，裁切以外的内容才不显示行为事件行为是响应某一事件（EVENT）而采取的一个操作（ACTION）u 调用行为步骤：1. 选中对象2. “窗口”“行为”；SHIFT+F3；点击任务栏中齿轮图标3. 点击加号按钮（减号删除行为）4. 选择其中的某个行为 调用JavaScriptalert(“提示内容”) 改变内容：改变某一对象的属性值。 检查浏览器：依不同浏览器选择不同的页面 检查插件：依所需插件有无，选择不同页面 控制SHOCKWAVE和FLASH步骤：1、 插入二者之一（注意要定义名字）2、 插入按钮并选择按钮3、 选择 行为 中的控制SHOCKWAVE和FLASH4、 选择其中4种行为之一 拖曳图层步骤：1、 插入层2、 选择 行为 中的拖曳图层 前往URL步骤：1、 选择对象2、 选择 行为 中的前往URL3