《网页设计与制作》课件——项目4 创建网页.pptxVIP

主讲教师：项目4创建网页1.CSS美化网页

示例

学习目标完善网页内容1类CSS的使用方法2掌握使用CSS美化网页的方法3

总结完善网页内容01类CSS的使用方法02掌握使用CSS美化网页的方法03

提示背景图像与网页内容和主题相配；使用CSS变量和继承来减少重复代码，提高代码的可维护性；确保文本颜色和背景颜色有足够的对比度。

思考题为了实现网页中字体的加粗显示，需要设置的字体属性是（）font-sizefont-weightfont-stylefont-family100%D

2.CSS样式和

优先级项目4创建网页主讲教师：

概念CSS（层叠样式表）是能将样式信息与网页内容分离的一种标记性语言。打开不需要编译，直接由浏览器解释执行。作用对页面的HTML元素和其他效果实现更加精准的控制。CSS样式和优先级

学习目标CSS四种样式1CSS优先级2

CSS四种样式1.行内样式（InlineStyles）直接在HTML元素的style属性中定义CSS样式。例如：pstyle=color:red;行内样式。/p优点：快速应用样式到单个元素。缺点：难以维护和重用样式。

CSS四种样式2.内部样式表（InternalStyleSheets）例如：headstylep{color:blue;}/style/head优点：适用于单个网页的样式定义。缺点：不适用于多个网页的样式共享。

CSS四种样式3.外部样式表（ExternalStyleSheets）例如：headlinkhref=styles.cssrel=stylesheettype=text/css/headstyles.css文件内容：p{color:green;}优点：样式可以跨多个网页重用和维护。缺点：需要额外的文件请求，可能影响页面加载速度（但可以通过缓存优化）。

CSS四种样式4.导入样式表（ImportingStyleSheets）在一个CSS文件中使用@import规则导入另一个CSS文件。例如：@importurl(reset.css);p{color:purple;}优点：可以在一个文件中集中管理多个CSS文件。缺点：@import必须在CSS文件的最开始部分，且可能增加页面加载时间（因为需要额外的HTTP请求，尽管可以合并为一个文件来优化）。

CSS优先级来源顺序（OrderofOrigin）!important声明具有最高优先级，但应谨慎使用以避免样式冲突。重要性（Importance）内联样式ID选择器类选择器、属性选择器、伪类元素选择器、伪元素。例如：#header（ID选择器）比.nav（类选择器）具有更高的特异性。选择器特异（Specificity）?如果特异性相同，则后定义的样式会覆盖先定义的样式（后者优先）。浏览器默认样式用户代理样式表作者样式表（即你的CSS文件）读者样式表（用户自定义样式，如浏览器扩展）。层叠顺序（CascadingOrder）

总结CSS四种样式1CSS优先级2

提示尽可能使用外部样式表；? 使用ID选择器时应谨慎；创建更灵活和可重用的样式；了解并应用CSS优先级规则。

项目4创建网页主讲教师：3.插入图像和视频

学习目标图像文件类型1图像主要属性2视频文件类型3视频主要属性4实例演示5

图像文件类型GIF（.gif）适用于照片和复杂图像，支持有损压缩，文件大小相对较小。JPEG（.jpg）适用于需要透明背景的图像，支持无损压缩，文件大小可能较大。PNG（.png）?适用于简单的动画和具有有限颜色的图像，支持透明背景但颜色深度较低。基于XML的矢量图像格式，适用于缩放而不损失质量的图像，例如图标和图形。SVG（.svg）在网页设计中，常用的图像文件类型包括：

图像主要属性源文件（Src）01指定图像的路径和文件名。替换（Alt）02为图像提供文本描述，当图像无法加载时显示，有助于SEO和可访问性。

图像主要属性指定图像的路径和文件名。源文件（Src）为图像提供文本描述，当图像无法加载时显示，有助于SEO和可访问性。替换（Alt）

网页中视频的格式AVI是将语音和影像同步组合在一起的文件格式。主要应用在多媒体光盘上，用来保存电视、电影等各种影像信息。SWF是Macromedia（现已被ADOBE公司收购）公司的动画设计软件Flash的专用格式，被广泛应用于网页设计动画制作等领域，SWF文件通常也称Flash文件。网络上常用的文件格式有AVI（*.av）和SWF（*.swf）格式等。

总结网页中图像的格式1图像的主要属性2网页中视频的格式3插入图像和视频4

思考题想要在网页