网页培训DREAMWEAVER8讲义

1Dreamweaver讲义IIS安装与调试1、开始—控制面板—添加/删除程序--添加/删除windows组件，如下图：IIS信息服务IIS安装图：IIS信息服务2、Internet信息服务（IIS）--详细信息—万维网服务—确定—下一步至完成3、开始—控制面板—管理工具--Internet信息服务（IIS）本地计算机、网站、默认站点（右键—属性），按照下面三个图示调整相应参数。23———————————————————————————4Dreamweaver基本设置1.Dreamweaver启动：程序组方式、文件--右键2.主菜单、浮动面板、状态条图1：Dreamweaver操作界面3.建立主页准备好素材和构思好网页结构；在右侧的窗口（本地文件夹文件列表框）右击鼠标，选择“新建文件”；将“无标题”改为“index.htm”；建立子目录：如html、images、others等，可分别放入框架网页、图像、其它插件等；双击index.htm文件，进入编辑index.htm网页窗口。54.页面设置：在编辑窗口右键单击，选择页面设置5.直接创建新页面：“文件”—“新建”（CTRL+N）6.打开、保存页面：7.使用模板打开模板页面：“文件”—“新建”设置默认模板：将“Dreamweaver\Configuration\Templates”中default.html自建模板：“文件”—“另存为模板”使用模板：“文件”—“从模板中新建”基本操作———————————————————————————1、编辑文字及预览页面：输入、修改、修饰剪切、复制、粘贴撤消、恢复查找、替换预览页面2、有序列表、无序列表、嵌套列表、自定义列表有序列表：等价WORD中的项目编号无序列表：等价WORD中的项目符号嵌套列表：上面两种组合6自定义列表：“文字”—“列表”—“定义序列表”；输入要定义的“项目”（ENTER）、输入相应的定义“数据”（ENTER）；重复至两次ENTER“文字”—“列表”3、资源管理器（Assets）一旦在页面中插入图片、选择颜色、制作链接、使用了FLASH、SHOCKWAVE、视频素材、脚本，所有这些经刷新后将出现在ASSETS面板分类中。使用：选择—“插入”；选中—拖曳4、调试页面用于调试一些包括脚本的文件“文件”“在浏览器中调试”—“iexplore”5、设置页面属性“修改”—“页面设置”；右键单击编辑区—“页面设置”6、导入WORD文件“命令”—“清理WordHTML”7、HTML源文件的操作Dreamweaver可以方便修改错误的地方，先在Dreamweaver中将光标移到要修改的地方，再打开自带的HTMLsource编辑窗口即可。“修改”—“快速标签编辑器”（Ctrl+T）；有三种模式（用Ctrl+T切换）。8、熟悉界面（见复印件）操作7图像操作———————————————————————————插入图像：“插入”—“图像”修改图像：改变大小、边框移动图像：垂直距、水平距；用表格控制图像的收藏：右键—“添加到图像收藏夹”表格操作：（注意选取对象他table、tr、td）———————————————————————————建立表格：边距、间距、边框表格嵌套：在单元格中插入表格表格的操作：选取（表格、行、列）、合并、拆分、插入行、插入列、增加行或列、删除行、删除列、增加合并行、增加合并列、减少合并行、减少合并列。（“修改”—“表格”）表格修饰：对齐方式、调整大小和位置、颜色（边框、线、背景）、文字修饰、预置格式创建表格（“命令”—“格式表格”）。文字录入图像放置（放入内容不要破坏表格格式）表格排序应用提示将表格设定为网页的框架，即先设定大致模式在单元格中加入背景图片，使其构成某种图案表格（单元格）中插入表格，尽量独立操作，避免相互影响表格嵌套不应过多，以免网页过大，影响传输速度8练习1、图2所示，制作一个网页。内容、格式不限。图2：示范网页2、仿制在指定位置（\\Dmt3\tools\塘沽在线.htm）中网页布局框架———————————————————————————建立：启动Dreamweaver，创建空白文档单击“窗口”—“对象”—“▼”—“框架”，选择其中一种修改：鼠标拖动框架边界“修改”—“框架组”—选择一种框架形式保存：“文件”—“另存框架为”：将保存当前这个文件（换名）9“文件”—“保存框架”：将保存当前的这个框架文件“文件”—“保存全部框架”：将保存n+1个文件“文件”—“另存框架为模板”：将保存当前框架为模板文件框架类型：标题、目录、页脚、垂直拆分、水平拆分。如图3：图3：框架类型框架参数设置边框、边框宽度、边框颜色、行（或列）值、单位（属性面板）链接———————————————————————————路径：相对路径：见附页绝对路径：创建链接10以文本为创建链接标志的对象过程（步骤）1：选择文本对象；在属性面板中单击链接右侧的文件夹图标；在弹出的窗口中选择要链接的文件；按“选定”。在“相对到”文本框中有“文件”和“站点根目录”两个选项，为两个相对路径。过程（步骤）2：使用指向文件图标；在站点地图中直接拖动。以图片为创建链接标志的对象类似文本链接方式，但多了热区指针工具。链接到已命名的标签步骤：先“插入”—“隐藏元素”—“命名锚点”（或在“对象面板”中点击“▼”，选择“隐藏”）；在弹出的对话框中输入书签名（注意：不支持中文）；然后在文档窗口选定文本（或）图像；在“属性检查器”—“链接”域中输入“#”和书签名，若链接到其它文件中的书签，则要输入“文件名#书签名”。链接到指定邮箱方法1：选择要链接的对象；在“属性检查器”中的链接文字框里输入“mailto:邮箱地址”。11方法2：“窗口”—“对象”；选择要链接的对象；在“对象检查器”中选择“插入电子邮件链接”；在弹出的对话框中按要求输入，可以省略mailto:。远程登陆：“telnet:站点地址”（B）脚本链接：在链接文字框中输入“javascript:JavaScript”代码或函数调用（或“vbscript:VBScript”）。例如：javascript:window.open('index.htm')修改链接：应在站点管理去做测试链接：在浏览器中进行（F12）练习：将图2中文字做链接；将图2中各其它对象做链接。如树，房子等；创建一个个性模板，并设置为默认模板；用WORD创建一个WEB格式文件，导入Dreamweaver，清理；在网页中录入2段文字，第一段为5号、宋体、蓝色。第二段为5号、楷体、黄色；在网页中插入表格（2*2），将以上两段文字放入表格中（左右放置），第二段文字加灰色背景；在表格中插入图片，位置在两段文字之间；建立两个书签。一个在网页上方，另一个在下方，两个书签相互链接。框架链接———————————————————————————12可在同一个网页中显示多个网页。在产生链接要求时，按指定的位置显示被链接的对象。制作链接时各参数含义：_blank：点击链接时，被链接对象在新的空白页显示_parent：用父窗口来放置链接的网页_self：用自身的窗口来放置链接的网页_top：跳出所有框架结构显示链接的网页mainFrame：在主框架显示leftFrame：在左面框架显示topFrame：在上面框架显示cornerFrame：在角落框架显示提示：框架存盘时文件名不要用中文（Dreamweaver）样式表CSS（CascadingStyleSheet）———————————————————————————基础：htmlheadstyletype=”text/css”!-a{color:red}p{background-color:blue;color:white}--13/style/headbodyahref=””电子邮局/ap文字颜色/p一样吗？/body/html将以上内容放入Dreamweaver中，看看结果。在CSS中每一条定义都有如下的形式：selector{property:value;property:value;…}selector:三种形式1.tag:html中的标志,如A，P，BODY等2.class:类3.ID:与class类似，用法不同Property：要被修改的性质，如colorValue:给property的值,如red，红色CSS定义：HTMLselector语法：tag{property:value}例1：h1{color:red}例2：h1,h2,td{color:red}同时定义几个selector为相同的属性Classselector14相关Classselector语法：tag.classname{property:value}例：h2.redc{color:red}独立Classselector语法：.classname{property:value}例1：.bluec{color:blue}IDselector：用法同Classselector，可以使JavaScript,CSS-P操作例：htmlheadstyletype=”text/css”!-h2.redone{color:red}.blueone{color:blue}--/style/headbodyh2thisisnoclass/h2h2class=redonehaveclass/h2h3class=”blueone”blueh3/h3pclass=”blueone”blueparagraph/p15/body/html用CSS来操作和修改、文字定位字体：font-family大小：font-size字形：font-style加重：font-weight行距：line-height水平对齐：text-align垂直对齐：vertical-align段落第一行空格：text-indent字母大小写：text-transform修饰文字（加下划线等）：text-decoration改变列表前的标识符号：list-style-typeCSS样式应用技巧大部分CSS操作、修改可以用下面方法完成“窗口”—“CSS样式”—“+”选择“名称（自己定义）”、“制作自定义样式”、“仅这个文档”在左面的“选项”中点击，右面填入相应参数链接文字技巧“窗口”—“CSS样式”—“+”选择“使用CSS选择器”、“名称”—“a:hover”、“仅这个文档”16在左面的“选项”中点击，右面填入相应参数应用：1.鼠标移至链接文字，下划线消失，链接文字变红色2.鼠标移至链接文字，链接背景变黄色3.鼠标移至链接文字，文字间距变大(A)CSS滤镜实例给文字加Blur滤镜（产生立体效果）1.单击快速启动面板上的“显示（隐藏）CSS样式”图标，启动样式编辑器2.单击“编辑样式表”图标3.在弹出的对话框中选择“新建”（或“编辑”）4.在新的对话框中，选择“扩展名”—在“滤镜”中选择“blur”5.在“滤镜”中填入相应的参数（如：true,135,10）6.加载到文字7.将文字放入表格中8.选择文字所在的单元格9.单击刚才新建的样式即可给图片加Blur滤镜方法同文字，不用放入表格中（一般在表格中也会有更加好的效果）ADD：布尔参数TRUE，FALSEDirection:阴影方向，0~360度，45度一个间隔，故只有8个方向Strength:阴影的长度，代表有多少像素的宽度成为阴影17MASK滤镜的应用（产生矩形遮罩）可以是文字产生类似图像的效果，但占用空间要小的多。只有一个参数COLOR。Alpha滤镜的应用(颜色过度)把一个目标元素与背景混合。参数：opacity：透明度（0完全透明~100完全不透明）fi