应用样式表

4.4 网页的美化与特效制作 看懂HTML代码应用样式表动态HTML效果 Active控件和组件的应用在学习网站中有操作动画

HTML网页基本结构 <html> <head> 头部标记、标记属性及内容 </head> <body> 主体标记、标记属性及内容 <table border="1" width="100%"> <tr> <td width="50%"></td> <td width="50%"></td> </tr> </table> ……. </body> </html> HTML是一种标记语言，不是编程语言。基本结构如右所示：

HTML大多都是以一对<></>开始和结束。 • 标题1样式标记 <h1></h1> 设置为标题样式 • 字体标记 <font></font> 设置字体 • 字体标记的常用属性是size、color • 段落标记<p></p>、表格标记<table></table>等 <标记属性=“值”> 网页内容</标记> 如：<a href =“url”></a> 超链接标记 HTML有时以<>开始，不用以</>结束。 • <br>换行标记没有结束标记 • <hr>水平线标记没有结束标记 Html标记、属性名与值不分大小写

Html代码阅读练习 • 试试从我校主页源文件中找出所有flash动画文件的URL。提示： • 查看网页代码：查看/源文件 • flash动画文件的扩展名为“swf”。 • 再应用相对路径的知识，组合出其URL。 Tips：找到文件的URL，即可以直接通过下载软件，对其进行下载，包括视频、声音、动画等文件的下载。

4.4.1 什么是样式表(Cascading Style Sheets，简写为 CSS) • 级联样式表 (CSS) 是一系列格式设置规则，它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。如：<font face="黑体" size="2"><a href="../../beijinjiexiao/beijinjiexiao.htm " style="text-decoration: blink; font-size: 20px " >背景介绍</a></font>

指向一个外部样式表的链接 注意：高中阶段要求会阅读这些代码，但具体在frontpage中的操作方法必须掌握。 4.4.1 样式表分类 • 内嵌样式表（作用范围：本标记模块） • <a href=“bjjx.htm"style="text-decoration: blink">背景介绍</a> • 内部样式表（作用范围：当前页面的所有相应标记模块） <head> <style>  </style> </head> • 外部样式表（作用范围：可应用于当前网站的所有网页相应标记模块）前提：已经将样式表放在一个独立的.css文件之内 <head> <link rel="stylesheet" type="text/css" href="poem.css"> </head>

样式表小结

4.3.2 动态HTML效果 鼠标悬停到摄影机图片上时，图片会发生变化 • “格式”菜单 • 动态HTML效果 • 网页过渡课外思考：动态HTML还可以制作什么效果？（提示：上网查找相关知识）

4.3.3 ActiveX控件和组件的应用 • ActiveX 是一个独立的对象. • Active X控件最奇妙的地方在于它的可编程性和可重复使用性. • 控件对外有三个属性集.(属性,对象,方法) 课外思考： ActiveX控件为什么可以出现PPT、网页……

应用样式表

应用样式表

Presentation Transcript