DreamweaverCS4网站设计实例教程课件作者汤文飞赵晓秋刘菁第1章节基础篇.ppt

对于已经创建的站点，Dreamweaver提供了报告功能来检测单个文档或整个站点，方便设计者发现网页中可能存在的问题。 在【文件】面板中切换到需要检查的站点并选中需要检查的网页文件（可多选），然后选择菜单栏【站点】|【报告】命令，此时弹出【报告】对话框，在【报告在】下拉列表中选择站点报告的范围，从列表框中勾选报告对象后单击【运行】按钮即可执行站点报告。 1.4 Dreamweaver中的站点管理 此时会在【站点报告】面板中给出检查结果以方便查看。单击面板左侧的【报告】按钮 以重新选择报告范围；单击【更多信息】按钮 以查阅相关报告的参考文献；【保存报告】按钮 则用于保存当前报告为独立文档。 1.4 Dreamweaver中的站点管理 对整个整点进行过检查，没有什么严重错误时，就可以发布整个站点或单个网页了。如果为站点定义了远端文件夹或测试服务器文件夹，可以在网页编辑完成后选择菜单栏【站点】|【上传】命令来发布。 1.4 Dreamweaver中的站点管理 在【文件】面板中切换到【远程视图】或【测试服务器】，然后单击【刷新】按钮 以更新远程文件列表。 需要发布整个站点的内容时，逐个上传网页会显得比较麻烦，此时可以选择菜单栏【站点】|【同步站点范围】命令，在弹出的对话框中选择需要同步的内容与同步方向，单击【预览】按钮并确定以执行。 1.4 Dreamweaver中的站点管理 接下来为网页底部的脚注添加CSS规则。选中它所在的div#Footer标签后单击【新建CSS规则】按钮，在弹出的对话框中保持选择器为默认值“#divFooter”，然后单击【确定】按钮以继续。 1.3 Dreamweaver面板 弹出【CSS规则定义】对话框，在【区块】类别中设置文本对齐方式（Text-align）为“居中”（center）；接着切换至【方框】类别，指定【清除】方式为“两边”（both），并将上【填充】值设为1em。 1.3 Dreamweaver面板 继续切换到【边框】类别，将上【边框】样式、宽度与颜色分别调整为实线、5px、绿色，接着保存规则后返回，使用【5号标题】适当修饰页脚中的文本。 1.3 Dreamweaver面板 同样位于【CSS】面板组中的【标签检查器】面板可由选择【窗口】|【标签检查器】命令来展开，其中包含了【属性】与【行为】两个子面板。 1.3 Dreamweaver面板 选择整个导航栏列表标签ul，在【属性】面板中为它指定【id】值“ulNavi”。此时项目列表标签标识为ul#ulNavi。 1.3 Dreamweaver面板 单击【CSS样式】面板中的【新建CSS规则】按钮并确定，保持【选择器名称】为“#ulNavi”。单击【确定】按钮，在弹出的【CSS规则定义】对话框中切换至【背景】类别，在此指定【背景颜色】为绿色；继续切换至【方框】类别以调整【高度】（Height）为3em。 1.3 Dreamweaver面板 返回【设计】视图，可以发现整个ul标签变成了一条固定高度的绿化带。 1.3 Dreamweaver面板 现在选中任一列表项标签li，然后单击【CSS样式】面板上的【新建CSS规则】按钮，在弹出的【新建CSS规则】对话框中保留默认选择器名称“#ulNavi li”。在【CSS规则定义】对话框中切换到【区块】类别，将【显示】属性指定为“inline”，然后单击【确定】按钮以保存规则。 1.3 Dreamweaver面板 返回设计视图，选择列表中的任一超链接标签a后新建CSS规则，在弹出对话框中指定【选择器】为“#ulNavi li a”。 在规则定义对话框的【类型】类别中选择一种新的衬线字体和颜色，并指定【字体大小】为1.5em，【行高】为2em并勾选【none】复选框。 1.3 Dreamweaver面板 切换至【方框】类别，在此指定左右【填充】值均为1em。 继续切换到【边框】类别，在此指定右【边框】为黄色实线。 1.3 Dreamweaver面板 保存规则并返回【设计】视图，查看初步完成的导航栏。 1.3 Dreamweaver面板 【行为】子面板集成了简单的JavaScript特效，这里就用它来设置浏览器状态栏文本。选中body标签后，切换到【行为】子面板，单击面板底部的【添加行为】按钮，从弹出的菜单中选择【设置文本】|【设置状态栏文本】命令，弹出【设置状态栏文本】对话框，在此输入适当文本，然后单击【确定】按钮以返回。 1.3 Dreamweaver面板 在【行为】面板的事件列表中选择【onLoad】，表示在Web浏览器加载网页时执行此行为。 1.3 Dreamweaver面板 现在按下【F12】键以在IE中预览网页，即可看到被修改的状态栏。 1.3 Drea