网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.8
合集下载
《网页设计与制作》课件
《网页设计与制作》PPT 课件
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
# 网页设计与制作
本课程旨在传授网页设计与制作的基础知识和技能。通过课程学习，您将掌 握网页设计的流程、布局原则、交互设计以及网站的维护与发布。
第一章：课程介绍
1 学习目标
明确课程学习目标，了解学习内容和要求。
2 课程安排
详细介绍每个章节的内容安排和学习进度。
3 教学方法
2 标准布局
讲解网页布局设计的基本原则和注意事项。
介绍常用的标准网页布局模式和技巧。
3 自适应布局
பைடு நூலகம்
4 响应式布局
学习如何设计适应不同设备和屏幕尺寸的 网页布局。
解析响应式设计的概念和实现方法。
第四章：网页交互设计
1 交互设计概述
揭示交互设计的重要性和基本原则。
3 交互设计流程
探讨交互设计的典型流程和步骤。
2 常用交互元素
介绍常见的网页交互元素和设计技巧。
4 JavaScript基础
入门级JavaScript语法和常用函数的使用。
第五章：网站维护与发布
1 网站测试与调试
学习进行网站测试、调 试和优化的方法。
2 网站备份与恢复
讲解网站备份和恢复的 重要性和实施步骤。
3 网站发布与维护
指导网站发布和日常维 护的关键要点。
介绍教学方法，包括理论讲解、实践演练和案例分析等。
第二章：网页设计基础
1 网页设计概述
2 HTML基础
介绍网页设计的定义、重要性和发展趋势。
学习HTML标签的使用和基本语法规范。
3 CSS基础
学习CSS样式的定义和常用属性。
4 网页设计流程
简要介绍网页设计的典型流程和步骤。
第三章：网页布局设计
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作》电子教案课程课件PPT 第五章
第5章 HTML语言和动态交互
HTML语言含有大量的标记符号， 并且还在不断的增加当中。本节 将介绍HTML一些常用的标记符号， 以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系
在Dreamweaver的可视化窗口中制作网页时， 形成的目标文件仍然是HTML代码，如果切换 到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象， 这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。
在HTML语言中规定，两个 <Body>之间是输入网页对象 的位置。那么，如果是一幅 图像，情况又会怎样呢？ 注意：在代码窗口调试 HTML代码时，如果有语法 或格式错误，代码将会用黄 色显示。
图5-5代码窗口中的文本对照
3．在网页中插入图像 在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则
1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。
HTML语言含有大量的标记符号， 并且还在不断的增加当中。本节 将介绍HTML一些常用的标记符号， 以及它们使用时的语法规则
5.1.1 网页和HTML语言的关系
在Dreamweaver的可视化窗口中制作网页时， 形成的目标文件仍然是HTML代码，如果切换 到代码窗口中，马上就可以看到对应的HTML 代码。 1．一个空白网页的HTML代码 当新建一个网页时，网页上没有什么对象， 这就是一个空白页，现在看一下空白页的 HTML代码。如图5-1所示。
在HTML语言中规定，两个 <Body>之间是输入网页对象 的位置。那么，如果是一幅 图像，情况又会怎样呢？ 注意：在代码窗口调试 HTML代码时，如果有语法 或格式错误，代码将会用黄 色显示。
图5-5代码窗口中的文本对照
3．在网页中插入图像 在网页中输入一行文本，采用5号字，再插入一幅大小为 150×100像素的图像，在两个窗口中观察对比一下。如图5的语法规则
1．HTML语言文件的基本结构 对于一个网页，即一个HTML文档，其基本结构为： <html> <head> 文档标题部分 </head> <body> 页面主体部分 </body> </html> · 从上面的格式可以看出，文档内容以<标记符>开始，以</标记符>结束。 · <head>文档标题</head> 是文件标题标记。 · <body>文档标题部分</body> 是页面主体部分标记。 · <html> </html>是一个页面的开始和结尾。
【完整版】网页设计与制作课程课件
探索响应式网页设计的原理和技巧，学习如何创建适应不同屏幕和设备的网 页。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页排版和布局
深入研究网页排版和布局的原则，包括网格系统、流式布局和固定布局等技术。
图像、音频和视频在网页中的应用
学习如何在网页中嵌入各种媒体文件，创建富媒体的用户体验，提升网页的吸引力。
动态交互效果设计实战
通过实际案例和项目，学习如何使用JavaScript和CSS创建各种动态交互效果。
PHP语言基础
介绍PHP的基本语法、函数和流程控制，学习如何使用PHP开发动态网页。
MVC模式与Web应用程序框架
深入研究MVC模式的原理和应用，介绍常用的Web应用程序框架。
网站发布与维护
了解网站发布的流程和方法，学习如何进行网站的维护和更新。
网站安全和防范策略
探索网站安全的重要性和挑战，学习如何应对常见的安全威胁和攻击。
【完整版】网页设计与制 作课程课件
探索网页设计与制作的全过程，从前端开发基础到后端开发基础，通过丰富 的案例和实战项目，提升您的技能与知识。
网页设历程以及课程的主要内容和学习目标。
前端开发基础
介绍前端开发的基本概念、技术工具和流程，包括HTML、CSS和JavaScript。
网页性能和优化
深入了解网页性能优化的技术和策略，提高网页的加载速度和用户体验。
前端框架的使用
介绍常见的前端框架，如Bootstrap和Vue.js，学习如何使用框架开发快速高效的网页。
后端开发基础
探索后端开发的基本概念和技术，包括服务器端语言和数据库。
数据库设计和应用
学习数据库的基本原理和设计方法，以及如何使用SQL语言进行数据查询和操 作。
HTML语言基础
学习HTML的基本语法和标签，掌握常用标签的用法以及语义化网页的重要性。
网页设计与制作实用教程电子教案、教学建议第5章 在网页中使用CSS样式-26页文档资料
程P80。 修改类样式.textcss，操作步骤见教程P80。
06.04.2020
第5章 在网页中使用CSS样式
8
创建高级样式改变超级链接样式风格
设置重新定义HTML标签<a>，操作步骤见教程 P82。
设置a:link的样式，操作步骤见教程P84。 设置a:visited的样式，操作步骤见教程P84。 设置a:active的样式，操作步骤见教程P85。 设置a:hover的样式，操作步骤见教程P85。
2．素材网页文件ex5_city.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该文件复 制到本地站点future\webpages文件夹下。
3．页面效果请参见配套光盘webcourse\chapter05\result文件夹 下的ex5_city.html文件。
返回
5
实训引导
1．本页面用到的9个图像文件：img4_3_3.jpg、img4_3_4.jpg、 img4_3_5.jpg、img4_3_6.jpg（文档中的图像）、 img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项 目符）及img5_5.gif（背景图片）由配套光盘 webcourse\chapter05\images文件夹提供，在制作页面之前， 先将用到的图像文件复制到本地站点future\images文件夹 中。
06.04.2020
第5章 在网页中使用CSS样式
2
CSS 样式美化网页实例
设计目标 页面分析 实训引导 制作步骤
06.04.2020
第5章 在网页中使用CSS样式
3
设计目标
应用CSS样式对网页中的各种元素进行格式化， 浏览效果如图所示 。
06.04.2020
第5章 在网页中使用CSS样式
8
创建高级样式改变超级链接样式风格
设置重新定义HTML标签<a>，操作步骤见教程 P82。
设置a:link的样式，操作步骤见教程P84。 设置a:visited的样式，操作步骤见教程P84。 设置a:active的样式，操作步骤见教程P85。 设置a:hover的样式，操作步骤见教程P85。
2．素材网页文件ex5_city.html由配套光盘 webcourse\chapter05\materials文件夹提供，请将该文件复 制到本地站点future\webpages文件夹下。
3．页面效果请参见配套光盘webcourse\chapter05\result文件夹 下的ex5_city.html文件。
返回
5
实训引导
1．本页面用到的9个图像文件：img4_3_3.jpg、img4_3_4.jpg、 img4_3_5.jpg、img4_3_6.jpg（文档中的图像）、 img5_1.gif、img5_2.gif、img5_3.gif、img5_4.gif（图像项 目符）及img5_5.gif（背景图片）由配套光盘 webcourse\chapter05\images文件夹提供，在制作页面之前， 先将用到的图像文件复制到本地站点future\images文件夹 中。
06.04.2020
第5章 在网页中使用CSS样式
2
CSS 样式美化网页实例
设计目标 页面分析 实训引导 制作步骤
06.04.2020
第5章 在网页中使用CSS样式
3
设计目标
应用CSS样式对网页中的各种元素进行格式化， 浏览效果如图所示 。
网页设计与制作教程——Web前端开发(第6版)课件第1章 HTML 5概述1.2
2. HTML的全局事件属性 事件是针对某个元素的，可识别的动作。例如，针对“确定”按钮的单击事件， 文本框内容变化事件、复选框的选中或取消选中事件等。 HTML有使事件在浏览器中触发动作的能力，例如，当用户单击某个元素时执 行JavaScript程序。在HTML中，事件既可以通过JavaScript直接触发，也可以通 过全局事件属性触发。所谓全局事件属性是指可用于大多数HTML元素的事件属 性。有关事件编程的知识，将在第9章JavaScript事件处理中介绍。
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集， 称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文 档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声 明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就 会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类 依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素 元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档 自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改 日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元 素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用 户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。
1.2 HTML5的基本结构和语法规则
4．<meta charset>标签 <head>…</head>标签中的<meta charset>指定网页文档中的字符集， 称为HTML文档编码，HTML5文档直接使用meta元素的charset属性指定文 档编码，语法格式如下： <meta charset="UTF-8"> 为了被浏览器正确解释和通过W3C代码校验，所有的HTML文档都必须声 明它们所使用的编码语言。文档声明的编码应该与实际的编码一致，否则就 会呈现为乱码。对于中文网页的设计者来说，指定代码的字符集为“UTF8”。
1.2 HTML5的基本结构和语法规则
1.2.4 元素的分类 依据元素的作用不同，元素可以分为元信息元素和语义元素。 1．元信息元素 元信息（meta-information）或称元数据（Metadata）类元素是指用于描述文档 自身信息的一类元素，meta元素定义元信息，包含页面的描述、关键字、最后的修改 日期、作者及其它元信息，<meta>标签写在<head>…</head>标签中。元信息类元 素是提供给浏览器、搜索引擎（关键字）以及其它Web服务调用，一般不会显示给用 户。 meta元素的常用属性如下： 1）charset：定义文档的字符编码，常用的是“UTF-8”。 2）content：定义与name和http-equiv相关的元信息。 3）name：关联content的名称（常用的有keyowrd关键字、author作者名、 discriptiont页面描述）。
网页设计与制作案例教程(HTML5 CSS3)素材
网页设计与制作案例教程（HTML5CSS3）素材本文旨在介绍《网页设计与制作案例教程（HTML5 CSS3）素材》的主题和背景。
本教程的主题是网页设计与制作案例教程，重点涵盖HTML5和CSS3素材的使用。
随着互联网的迅速发展，网页设计和制作变得越来越重要。
作为一种应用广泛的技术，HTML5和CSS3提供了丰富的功能和特性，可以使网页呈现出更加精美和交互性强的效果。
因此，研究和掌握HTML5和CSS3的使用对于提高网页设计和制作的质量和效果至关重要。
本教程将为读者提供一系列实际案例，展示如何利用HTML5和CSS3素材设计和制作各种类型的网页。
通过研究这些案例，读者将能够掌握重要的网页设计原理和技巧，提升自己的设计能力，并能够应用到实际项目中。
教程内容涵盖了HTML5和CSS3的基础知识、常用元素和样式以及高级特性的运用。
每个案例都包含了详细的步骤和说明，帮助读者理解和掌握相关的技术和方法。
希望通过本教程，读者可以研究到实用的网页设计和制作技巧，并能够应用到自己的项目中，提升自己的能力和竞争力。
本部分将介绍HTML5的基本概念和语法，包括标签、属性和元素的使用。
HTML5是一种用于构建网页的标记语言，它在HTML4的基础上进行了增强和改进。
HTML标签是HTML文档的基本结构元素，它们用于定义网页的内容和结构。
在HTML5中，标签可以包含属性，用于提供更多的信息和控制网页的呈现方式。
属性可以对标签进行设置，如字体、颜色、大小等。
除了标签和属性，HTML5还引入了一些新的元素，用于创建更丰富和动态的网页内容。
例如，``元素可以用于嵌入视频文件，``元素可以用于绘制图形等。
掌握HTML5的基本概念和语法是网页设计与制作的基础，它将为你提供开发高质量和现代化网页的能力。
待续。
本部分将介绍CSS3的基本概念和语法，包括选择器、属性和样式表的使用。
CSS3（Cascading Style Sheets 3）是一种用于描述网页样式的标记语言，它是CSS的最新版本。
网页设计与制作Dreamweaver CS6标准教-ppt课件-05
文本超链接是以文本为对象构建的超级链接，链 接的源端点是文本。文本超链接是网页中最常使 用的一种链接方式。
3 5.2.4 5.2.5 5.2.6
课堂案例—婚礼公司 创建文本链接 页面文本链接的状态 下载文件链接 电子邮件链接 空链接
在一个图像中创建的不同几何图形区域 称为热点或热区，以这些区域为超链接 的源端点，建立的不同超链接被称为热 点链接。
5.4.1课堂案例-儿童课堂 5.4.2 创建热点链接
案例学习目标：学习创建热点链接。 案例知识要点：使用【属性】面板创建热点链 接。 素材所在位置：光盘/案例素材/ch05/课堂案 例-儿童课堂。 案例效果如图5-32所示。
5.1.1 按超链接端点分类 5.1.2 按超链接路径分类
按照源端点来划分，超级链接可以分为文本超链 接和非文本超链接两种。文本超链接是把文本作 为源端点，而非文本超链接是用除文本外的其他 对象作为源端点。 按照目标端点来划分，超级链接可分为外部链接、 内部链接和电子邮件链接等
网页设计与制作 Dreamweaver CS6 标准教程
1. 2. 3. 4. 5. 6.
超链接的概念与路径知识 文本超链接 图像超链接 热点链接 锚点超链接 链接管理
超级链接由两个端点和一个方向构成，通常将 起始端点（即鼠标单击的位置）称为源端点 （或源锚），将跳转到的目标位置称为目标端 点（或目标锚）。 源端点可以是文本、按钮、图像等对象，目标 端点可以是同一页面的不同位置，也可以是一 个其他页面、一幅图像、一个文件或一段程序 等。
下载文件链接是通过单击链接来实现文件下载， 建立方法和文字链接建立方法类似，所不同的 是所链接的文件不是网页文件而是其他文件， 如.rar压缩文件等，单击链接后并不是打开网页， 而是实现下载。 具体创建步骤如下： 在【文档】窗口中选择需要添加下载文件链接 的对象。 在【属性】面板的【链接】下拉文本框中设置 链接的文件。
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.6
</head> <body>
5.6 CSS表格属性
<table border="1" style="caption-side: bottom;"> <caption>每餐饮料</caption> <tr> <th>早餐</th><th>午餐</th><th>晚餐</th> </tr> <tr> <td>可可</td><td>咖啡</td><td>茶</td> </tr>
<head> <meta charset="utf-8"> <title>CSS表格属性</title> <style type="text/css"> table.one { border-collapse: separate; /*表格边框独立*/ border-spacing: 10px; /*单元格水平、垂直距离均为10px*/ } table.two { border-collapse: separate; /*表格边框独立*/ border-spacing: 10px 20px; /*单元格水平距离10px、垂直距离30px*/ empty-cells: hide; /*表格的单元格无内容时隐藏单元格的边框*/ } </style>
</table> <hr /> <table border="1" style="border-collapse: collapse;border-spacing: 10px 20px;">
5.6 CSS表格属性
<table border="1" style="caption-side: bottom;"> <caption>每餐饮料</caption> <tr> <th>早餐</th><th>午餐</th><th>晚餐</th> </tr> <tr> <td>可可</td><td>咖啡</td><td>茶</td> </tr>
<head> <meta charset="utf-8"> <title>CSS表格属性</title> <style type="text/css"> table.one { border-collapse: separate; /*表格边框独立*/ border-spacing: 10px; /*单元格水平、垂直距离均为10px*/ } table.two { border-collapse: separate; /*表格边框独立*/ border-spacing: 10px 20px; /*单元格水平距离10px、垂直距离30px*/ empty-cells: hide; /*表格的单元格无内容时隐藏单元格的边框*/ } </style>
</table> <hr /> <table border="1" style="border-collapse: collapse;border-spacing: 10px 20px;">
网页设计与制作Dreamweaver CS6标准教程(微课版 第3版)第五章
网页设计与制作Dreamweaver CS6标准教程（微课版第3版）第五章该节介绍了网页设计的基本原则，包括布局、色彩、字体、图片等方面的要点。
该节详细介绍了如何使用Dreamweaver CS6创建网页，包括新建网页、添加文本、插入图片等操作步骤。
该节讲解了如何使用CSS样式来美化网页，包括设置背景色、文本样式、边框效果等。
该节教授了如何创建超链接，包括内部链接和外部链接的创建方法。
该节介绍了如何使用Dreamweaver CS6中的模板和库来快速创建和管理网页。
模板是预先设计好的网页样式和布局，可以用于多个网页。
通过使用模板，您可以避免重复性的工作，节省时间和精力。
在Dreamweaver CS6中，您可以选择现有的模板，也可以自定义创建自己的模板。
本节将向您展示如何使用这些模板。
库是一组可以在不同网页中重复使用的元素或代码片段。
通过使用库，您可以轻松地在多个网页中保持一致的元素和代码。
本节将向您介绍如何创建并使用库。
___:了解如何使用Dreamweaver CS6中的模板创建网页学会创建自定义模板掌握如何使用库在网页中重复使用元素和代码学会创建和管理库5.1 使用模板创建网页Dreamweaver CS6提供了一系列模板供您选择，包括网站模板和文档类型模板。
您可以根据自己的需求选择适合的模板，并进行自定义设置，如网页标题、导航菜单、页脚等。
本节将向您展示如何使用Dreamweaver CS6中的模板创建网页。
5.1.1 选择现有模板Dreamweaver CS6中内置了许多现有的网站和文档类型模板供您使用。
您可以从模板库中选择适合您的模板，并进行进一步的定制。
本节将向您介绍如何选择并使用现有的模板。
5.1.2 创建自定义模板除了使用现有模板外，您还可以创建自己的模板。
自定义模板可以根据您的需求进行设计和设置，并在创建新网页时使用。
创建自定义模板的过程相对复杂一些，但是一旦创建完成，您可以多次重复使用它。
网页设计与制作第6讲PPT课件
32
CSS的基本概念
CSS(Cascading Style Sheet)层叠样式表将对网页 的布局、字体、颜色、背景和其他图文效果实现更加 精确的控制，使显示描述彻底独立于文档结构。
CSS的特点： •将格式和结构分离 •控制页面布局 •制作体积更小、下载更快的网页 •可将多张网页同时更新 •浏览器将成为更友好的界面
行为的应用--插入鼠标经过图象
1
2
49
初始页面
鼠标经过时的页面
50
鼠标按下后的页面
制作跳转菜单
1
51
制作跳转菜单
插入菜单项并做相应的链接
52
网页中的跳转菜单
浏览器中的跳转菜单
在第3步中选择 “alpha(opacity =50)”的视觉效果
47
CSS示例
在“记事 本”中编 写代码
48
<html> <head> <title>CSS中的透明层次滤镜</title> <style type="text/css"> <!-img{ filter:alpha(opacity=50);} --> </style> </head> <body> <h2>强大的CSS滤镜</h2> <img src=“花.jpg"> </body> </html>
“表格属性”面 板
“图层属性”面板
11
“资源”面板
12
创建新文档
13
设置页面属性
14
Dreamweaver 中的对象插入
15
CSS的基本概念
CSS(Cascading Style Sheet)层叠样式表将对网页 的布局、字体、颜色、背景和其他图文效果实现更加 精确的控制，使显示描述彻底独立于文档结构。
CSS的特点： •将格式和结构分离 •控制页面布局 •制作体积更小、下载更快的网页 •可将多张网页同时更新 •浏览器将成为更友好的界面
行为的应用--插入鼠标经过图象
1
2
49
初始页面
鼠标经过时的页面
50
鼠标按下后的页面
制作跳转菜单
1
51
制作跳转菜单
插入菜单项并做相应的链接
52
网页中的跳转菜单
浏览器中的跳转菜单
在第3步中选择 “alpha(opacity =50)”的视觉效果
47
CSS示例
在“记事 本”中编 写代码
48
<html> <head> <title>CSS中的透明层次滤镜</title> <style type="text/css"> <!-img{ filter:alpha(opacity=50);} --> </style> </head> <body> <h2>强大的CSS滤镜</h2> <img src=“花.jpg"> </body> </html>
“表格属性”面 板
“图层属性”面板
11
“资源”面板
12
创建新文档
13
设置页面属性
14
Dreamweaver 中的对象插入
15
网页设计与制作教程——Web前端开发(第6版)课件第5章 CSS3的属性5.1
5.1 CSS背景属性
5.1.8 背景覆盖区域属性backgroud-clip 语法：background-clip: border-box|padding-box|content-box; 【例5-7】设置背景覆盖区域，本例文件5-7.html在浏览器中显示的效果，如图5-7所示。
5.1 CSS背景属性
5.1 CSS背景属性
5.1.2 背景图像属性e 语法：background-image : none | url(url), url(url), … | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient 【例5-2】设置元素的背景图像。本例文件5-2.html在浏览器中显示的效果如图52所示。
5.1 CSS背景属性
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>背景图像大小属性</title>
</head> <body>
<div style="border: 1px solid #00f; padding:90px 5px 10px; background:url(images/lotus.jpg) no-repeat; background-size:100% 80px">
这里的background-size: 100% 80px。背景图像与div一样宽，高为80px。 </div> </body> </html>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
祝贺你又学完了一章
5.8 CSS属性的应用
【例5-21】设置图像边框，本例文件5-20.html的显示效果，如图5-25所示。
5.8 CSS属性的应用
3. 图像的不透明度 语法：opacity：value | inherit; 【例5-22】设置图像的透明度，本例文件5-22.html的显示效果，如图5-26所示。
5.8 CSS属性的应用
2. 图文链接 对链接的修饰，还可以利用背景图片将文字链接进一步的美化。 【例5-24】图文链接，本例文件5-24.html，鼠标未悬停时文字链接的效果，如图528（a）所示；鼠标悬停在文字链接上时的效果，如图5-28（b）所示。
5.8 CSS属性的应用
5.8.3 创建导航菜单 1. 纵向导航菜单 【例5-25】制作纵向列表模式的导航菜单，本例文件5-25.html，鼠标未悬停在 菜单项上时的效果，如图5-29（a）所示；鼠标悬停在菜单项上时的效果，如图 5-29（b）所示。
padding:5px 5px 5px 0.5em; text-decoration:none; /*链接无修饰*/ border-left:12px solid #711515; /*左边的粗红边框*/ border-right:1px solid #711515; /*右侧阴影*/ } #nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/ background-color:#c11136; /*改变背景色*/ color:#fff; /*改变文字颜色*/ } #nav li a:hover{ /*鼠标悬停于菜单项上时的样式*/ background-color:#990020; /*改变背景色*/ color:#ff0; /*改变文字颜色*/ } 菜单经过进一步美化，显示效果如图5-29所示。
5.8 CSS属性的应用
（1）建立网页结构 首先建立一个包含无序列表的Div容器，列表包含5个项目，每个项目中包含1个用于 实现导航菜单的文字链接。代码如下。 <body>
<div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">关于</a></li> </ul>
</head> <body>
<div id="box"> <img src="images/sunshine.jpg"> <!--图像的原始大小--> <img src="images/sunshine.jpg" class="per"> <!--相对于父元素缩放的大小--> <img src="images/sunshine.jpg" class="pixel"> <!--绝对像素缩放的大小-->
5.8 CSS属性的应用
2. 横向列表模式的导航菜单 【例5-26】制作横向列表模式的导航菜单，本例文件5-26.html，鼠标未悬停在菜 单项上时的效果，如图5-32（a）所示；鼠标悬停在菜单项上时的效果，如图5-32 （b）所示。
5.8 CSS属性的应用
（1）建立网页结构 代码如下。 <body>
《网页设计与制作教程Web前端开发第6版》 刘瑞新主编 配套资源
第5章 CSS3的属性
5.8 CSS属性的应用
本章介绍CSS设置背景、文本、列表、图像、表格、表单、链接等元素的属性样 式。
目录
第5章 CSS3的属性 5.1 CSS背景属性 5.2 CSS字体属性 5.3 CSS文本属性 5.4 CSS尺寸属性 5.5 CSS列表属性 5.6 CSS表格属性 5.7 CSS内容属性 5.8 CSS属性的应用 5.9 实训——制作社区网页面 习题5
</div> </body>
5.8 CSS属性的应用
（2）设置容器及列表的CSS样式 代码如下。 <style type="text/css">
#nav { width: 200px; /*设置菜单的宽度*/ font-family: Arial; }
#nav ul { list-style-type: none; /*不显示项目符号*/ margin: 0px; /*外边距为0px*/ padding: 0px; /*内边距为0px*/ }
5.8 CSS属性的应用
5.8.1 设置图像样式 CSS样式中有关图像控制的常用属性，见表5-3。
5.8 CSS属性的应用
1. 图像缩放 【例5-20】设置图像缩放，本例文件5-20.html的显示效果，如图5-23所示。
5.8 CSS属性的应用
<!DOCTYPE html> <html>
<head> <meta charset="utf-8"> <title>设置图像的缩放</title> <style type="text/css"> #box { padding: 10px; width: 500; height: 200px; border: 2px dashed #FF8C00; } img.per { width:30%; /*相对宽度为30%*/ height: 40%; /*相对高度为40%*/ } img.pixel {width:180px; /*绝对宽度为180px*/ height: 200px; /*绝对高度为200px*/ } </style>
5.8 CSS属性的Байду номын сангаас用
（3）设置菜单项超链接的CSS样式 代码如下。 #nav li a{ display:block; /*块级元素*/
padding:3px 6px 3px 6px; text-decoration:none; /*链接无修饰*/ border:1px solid #711515; /*超链接区块四周的边框线效果相同*/ margin:2px; } #nav li a:link, #nav li a:visited{ /*未访问过的链接、访问过的链接的样式*/ background-color:#c11136; /*改变背景色*/ color:#fff; /*改变文字颜色*/ } #nav li a:hover{ /*鼠标悬停于菜单项上时的样式*/ background-color:#990020; /*改变背景色*/ color:#ff0; /*改变文字颜色*/ }
</div> </body>
5.8 CSS属性的应用
（2）设置容器及列表的CSS样式 代码如下。 <style type="text/css">
#nav { width: 360px; /*设置菜单水平显示的宽度*/ } #nav ul { /*设置列表的类型*/
list-style-type: none; /*不显示项目符号*/ margin: 0px; /*外边距为0px*/ padding: 0px; /*内边距为0px*/ } #nav li { float: left; /*使得菜单项都水平显示*/ } </style>
</div> </body> </html>
5.8 CSS属性的应用
2. 图像边框 例如以下示例代码： <img src="images/sunshine.jpg" border="0"> <!--显示为没有边框--> <img src="images/sunshine.jpg" border="1"> <!--设置边框的粗细为1px--> <img src="images/sunshine.jpg" border="2"> <!--设置边框的粗细为2px --> <img src="images/sunshine.jpg" border="3"> <!--设置边框的粗细为3px --> 通过浏览器的解析，图像的边框粗细从左至右依次递增，效果如图5-24所示。
#nav li { border-bottom: 1px solid #ed9f9f; /*设置列表选项（菜单项）的 下边框线*/ } </style> 经过以上设置容器及列表的CSS样式，菜单显示效果，如图5-31所示。
5.8 CSS属性的应用
（3）设置菜单项超链接的CSS样式 代码如下。 #nav li a{ display:block; /*区块显示*/
5.8 CSS属性的应用
5.8.2 设置链接 使用CSS样式可以实现链接的多样化效果。 1. 设置文字链接的外观 在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用 <a>标记的href属性，代码如下： <aCSS伪类设置超链接样式，鼠标放上去有按下去的效果，本例 文件5-23.html的显示效果，如图5-27所示。