网页设计综合应用技术课件作者苏智张新华模块四.pptVIP

工作任务一 DIV+CSS技术的应用 核心知识：web标准 核心知识：web标准 更简易的开发与维护：使用更具有语义和结构化的 HTML，将更加容易、快速的理解。 与未来浏览器的兼容：当使用已定义的标准和规范的代码，那么这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。 更快的网页下载、读取速度：更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。 更好的可访问性：语义化的HTML（结构和表现相分离）将让使用读屏器以及不同的浏览设备的读者都能很容易的看到内容。 更高的搜索引擎排名：内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高在搜索引擎中的排名。 更好的适应性：一个用语义化标记的文档可以很好的适应于打印和其他的显示设备（像掌上电脑和智能电话），这一切仅仅是通过链接不同的 CSS 文件就可以完成。同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。 核心知识: 语义化的 HTML HTML是hypertext markup language的缩写，即超文本标记语言。 HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。 HTML是标准的ASCII文件，由 html命令组成的描述性文本，html 命令可以说明文字、 图形、动画、声音、表格、链接等。 HTML网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。 核心知识: 语义化的 HTML 一个HTML文件应具有下面的结构： 　html…………html文件开始 　　 head………文件头开始 　　 TITLE文件的标题/TITLE……… 标题将出现在浏览器标题栏中 　　 meta http-equiv=Content-Type content=text/html; charset=gb2312 / //网页编码gb2312 meta name=keywords content=关键字 / meta name=description content=本页描述或关键字描述 / /head………文件头结束 　　body………文件体开始 　　 文档主体 　　 /body………文件体结束 　/html…………html文件结束 核心知识:语义化的 HTML HTML文档可以用windows记事本、书写器或word输入，保存的文档扩展名为.htm 或 .html，双击HTML文档图标即可在浏览器中浏览HTML文档创建的网页。 在浏览器打开一个网页后，也可查看HTML源文件。 第一种方法是：打开一个网页后点击鼠标的右键，选择“查看源文件”，即可弹出一个记事本，而记事本内容就是此网页的html代码。 第二种方法是通过浏览器状态栏或工具栏中点击“查看”，然后选择“查看源代码”，即可查看此网页的源代码。 工作任务四 创建及使用模板与库 应用模板 从模板新建 工作任务四 创建及使用模板与库 应用模板 利用模板面板 工作任务四 创建及使用模板与库 页面与模板脱离 应用模板后的文档并不是一成不变的。当需要修改整个页面时，可以将其 脱离模板的控制。首先打开一个应用了模板的文档，然后执行【修改】 →【模板】 命令，在其子菜单中选择【从模板中分离】选项，就可以完成 上述的工作，如图： 工作任务四 创建及使用模板与库 更新页面 利用模板特性，还可以对站点中所有应用同一模板的文档进行批量更新 通过修改模板来同时更新网站上的多个或所有文档 工作任务四 创建及使用模板与库 库的概念 库项目也称为库元素，可以看成是网页上能够被重复使用的零件。 在Dreamweaver中，可以将单独的文档内容（例如一幅图像或一段文字）定义成库项目，也可以将多个文档内容的组合（例如排列成固定形状的多个层）定义成库项目。 执行【窗口】→【资源】命令，即会打开资源面板，在其中选择“库”按钮命令，就可以打开库面板 工作任务五 创建网页超链接 URL与超链接 在Dreamweaver中制作基本链接 在属性面板上使用 图标 工作任务五 创建网页超链接 为文档中被选中的文字创建链接 工作任务五 创建网页超链接 使用Link属性面板创建链接 使用Link属性面板 工作任务五 创建网页超链接 创建锚点链接 如果一个页面的内容较多，则页面会较长，为了使用户浏览起来更加方便，可以在页面的某个分项内容的标题上设置锚点； 然后再页面上设置锚点的链接，那么用户就