1 / 9

应用样式表

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>.

holly
Télécharger la présentation

应用样式表

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

  5. 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>

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

  7. 样式表小结

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

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

More Related