……. .">
4.4
This presentation is the property of its rightful owner.
Sponsored Links
1 / 9

应用样式表 PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

应用样式表

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


3798135

4.4 网页的美化与特效制作

看懂HTML代码

应用样式表

动态HTML效果

Active控件和组件的应用

在学习网站中有操作动画


3798135

  • HTML网页基本结构

<html>

<head>

头部标记、标记属性及内容

</head>

<body>

主体标记、标记属性及内容

<table border="1" width="100%">

<tr>

<td width="50%"></td>

<td width="50%"></td>

</tr>

</table>

…….

</body>

</html>

HTML是一种标记语言,不是编程语言。基本结构如右所示:


3798135

HTML大多都是以一对<></>开始和结束。

  • 标题1样式标记 <h1></h1> 设置为标题样式

  • 字体标记 <font></font> 设置字体

  • 字体标记的常用属性是size、color

  • 段落标记<p></p>、表格标记<table></table>等

<标记 属性=“值”> 网页内容</标记>

如:<a href =“url”></a> 超链接标记

HTML有时以<>开始,不用以</>结束。

  • <br>换行标记 没有结束标记

  • <hr>水平线标记 没有结束标记

Html标记、属性名与值不分大小写


3798135

Html代码阅读练习

  • 试试从我校主页源文件中找出所有flash动画文件的URL。

    提示:

  • 查看网页代码:查看/源文件

  • flash动画文件的扩展名为“swf”。

  • 再应用相对路径的知识,组合出其URL。

    Tips:找到文件的URL,即可以直接通过下载软件,对其进行下载,包括视频、声音、动画等文件的下载。


4 4 1 cascading style sheets css

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>


4 4 1

指向一个外部样式表的链接

注意:高中阶段要求会阅读这些代码,但具体在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>


3798135

样式表小结


4 3 2 html

4.3.2 动态HTML效果

鼠标悬停到摄影机图片上时,图片会发生变化

  • “格式”菜单

    • 动态HTML效果

    • 网页过渡

课外思考:动态HTML还可以制作什么效果?(提示:上网查找相关知识)


4 3 3 activex

4.3.3 ActiveX控件和组件的应用

  • ActiveX 是一个独立的对象.

  • Active X控件最奇妙的地方在于它的可编程性和可重复使用性.

  • 控件对外有三个属性集.(属性,对象,方法)

课外思考: ActiveX控件为什么可以出现PPT、网页……


  • Login