网页设计与制作教程杨帆严耀伟王方网页设计第二章.pptVIP

2.1.1 Dreamweaver的工作环境 1.安装 Dreamweaver 2.Dreamweaver的工作区 选择工作区 工作区布局组成 工作区布局说明 菜单栏 插入栏 文档工具栏 工作区布局说明 工作区域窗口 设计 代码 代码和设计 状态栏 工作区布局说明 “属性”面板 页面属性 工作区布局说明 面板组 工作区布局说明 “样式呈现”工具栏 自定义工作环境 显示/隐藏面板和工具栏 切换视图 代码视图 设计视图 拆分视图 2.1.2 Dreamweaver的简单操作 2.1.2 Dreamweaver的简单操作 Dreamweaver文件类型 创建新网页 创建空白页 2.1.3 Dreamweaver的视图模式 代码视图 创建空白页 创建新网页 创建空模板 创建基于现有模板的页面 创建基于Dreamweaver示例文件的页面 创建其它类型的页面 设置默认文档类型和编码 设置新HTML文档的默认文件扩展名 打开并编辑现有文档 2.1.3 Dreamweaver的视图模式 代码视图 设计视图 拆分视图 2.1.4 网页中添加内容与超级链接 网页中添加内容 插入标题文字 设置背景颜色 插入一幅画 使用插入菜单 插入一幅画 使用插入栏 网页中添加内容 输入欢迎文字 保存页面 预览网页 超级链接 页面之间的超级连接 在网页中选中要做超级链接的文字或者图片 在属性面板中选中黄色“浏览文件”文件夹图标 页面之间的超级连接 按F12预览网页。在浏览器里光标移到超级链接的地方就会变成手型。 2.1.5 网页设计结果测试 具体测试工作 确保页面在目标浏览器中能够如预期的那样工作 在不同的浏览器和平台上预览页面 检查站点是否有断开的链接，并修复断开链接 监测页面的文件大小以及下载这些页面所占用的时间 运行一些站点报告来测试并解决整个站点的问题 验证代码，以定位标签或语法错误 在站点发布后，对其进行更新和维护 使用讨论论坛 运行报告以测试站点 选择“站点”菜单项→“报告”命令 运行报告以测试站点 报告将出现在“结果”面板组的“站点报告”面板中 运行报告以测试站点 从“报告在”弹出菜单中选择要报告的内容，并设置要运行的任意一种报告类型（工作流程或HTML） 如果选择了工作流程报告，则单击“报告设置”。否则，跳过这一步。 确定取出者 设计备注 保存最近修改的情况信息 使用和保存报告 使用报告 :运行报告可参阅前面的步骤。在“站点报告”面板中，执行以下任一操作来查看报告：单击要按其排序的列标题以对结果进行排序；可以按文件名、行号或说明进行排序，还可以运行若干不同的报告并让不同的报告保持打开状态； 保存报告 :单击“保存报告”保存该报告。在保存报告时，可以将其导入到现有模板文件中。然后将该文件导入到数据库或电子表格中并进行打印，或者使用该文件在Web站点上显示报告。 2.2网页中添加文本 Dreamweaver允许通过以下方式向网页中添加文本：直接将文本键入页面，从其它文档复制和粘贴文本，或从其它应用程序拖放文本。还可以从其它文档类型导入文本或链接至其它文档类型，这些文档类型包括ASCII文本文件、RTF 文件和Microsoft Office文档。 2.2.1Dreamweaver中添加文本 从其它应用程序中复制文本 切换到 Dreamweaver，将插入点定位在“文档”窗口的“设计”视图中 选择“编辑”→“粘贴”或“编辑”→“选择性粘贴”。选择“编辑”→“选择性粘贴”后，可以选择若干粘贴格式设置选项 2.2.2文本格式设置 使用文本属性检查器可以设置当前所选文本的格式。设置文本格式时，Dreamweaver将跟踪为每个文本元素指定格式设置属性，并使用命名约定为每个元素指定一个标签:Style1、Style2.如果为两个或更多文本元素指定相同的格式属性，Dreamweaver将使用相同的标题标记这些元素，减少了不必要的样式名称。Dreamweaver应用到一段给定文本正文的标签,稍后即可使用“样式”弹出式菜单进行应用 样式 2.2.3 文本相关常用html标记 常用html标记 基本结构及格式标记 文件格式html/html ‘文件的开头与结尾 主题title/title ‘放在文件的开头 文头区段head/head ‘描述文件的信息 内文区段body/body ‘放此文件的内容 标题h?/h