2017.9.21 HTML学习总结---多媒体播放系统设计

1.题目：整个页面被划分三个子窗口，上面窗口为页面功能提示区，

下左部分为不同类型播放的功能选项，下右部分为播放系统显示播放信息窗口.

（1）网页设计框架：

<html>

  <head>

    <title>多媒体播放系统</title>

  </head>

  <frameset rows="80",*">

      <frame src="ch02_top.html"name="top" scorlling="no">

      <frameset cols="140,*">

          <frame src="ch02_7_left.html" name="left" scorlling="no">

          <frame src="ch02_7_right.html" name="right" scorlling="no">

          </frameset>

  </frameset>

</html>

(2)最上方的显示标题

<html>

　　<head><title>页面标题</title>  </head>
　　<body> <center><h1>多媒体播放系统</h1></center></body>
</html>

（3）左边的显示操作菜单

<html>

    <head><titile>菜单页面</title>   </head>

     <body><br><br><br><br>

          <p><a href="imgTag.html" target="right">图象显示</a></p>

          <p><a href="viwTag.html" target="right">视频播放</a></p>
　　　　　　<p><a href="soundTag.html" target="right">音乐播放</a></p>
　　</body>

</html>

(4)右边显示标题

<html>
　　<head><title>信息显示页面</title></head>
　　<body background=“imge/2.jpg”></body>
</html>

(5)图像显示页面

<html>

    <head><title>插入图象</title></head>
　　<body>
　　小鸭！<img src="data:image/xy.git" alt="小鸭" width="200" height="100"align="left">
　　</body>

</html>

(6)音乐播放界面

<html>
　　<head><title>音乐无限</title></head>
　　<body><br> <br>
　　<h2 align="center">笔记</h2>
　　<img align=“left” src="data:image/周笔畅.jpg" width="200" height="200" alt="歌手.周笔畅">
　　<bgsound src="data:image/笔记.mp3" loop="1">
　　</body>
</html>

(7)视频播放页面

<html>

　　<head><title>插入视频</title></head>
　　<body>
　　　　backkom熊<br><br>
　　<img dynsrc="data:image/Backkom.wvm" loop="3">
　　</body>
</html>

2.CSS样式表的定义与使用

　　2.1 CSS由三个基本部分----对象，属性，值组成。在这其中“对象”是最重要的有个专门的名称-------选择器

　　　　　　　　　　　　　　　　　　　　它的基本语法是：selector{属性：属性值；属性：属性值.........}

　　说明：样式表的定义实际就是定义CSS选择器，由于CSS选择器有3种类型，决定其值定义方式也是有三种

　　·css的选择器分为以下三种：

　　　（1）标记选择器：通过HTML标签定义选择器

基本语法：引用样式的对象{标签属性：属性值；标签属性：属性值........}

例如：

/*在<h1></h1>和<h2></h2>标签内的文本居中显示，并采用蓝色字体的样式表*/

h1,h2{text-align:center;color:blue;}        //定义标记h1，h2的选择器

<h1>中国</h1>                    //使用选择器，在页面中以标题1的字体居中、蓝色字体显示

<h2>北京天安门</h2>    ////使用选择器，在页面中以标题2的字体居中、蓝色字体显示

　　　（2）类别选择器：使用class定义选择器；

* 注明：若要为同一元素创建不同的样式或为不同元素创建相同的样式，可以使用css类选择器，css类有两种格式，定义时在各自类的名称前加一个点号。

例如：基本语法：标签名，类名{标签属性：属性值；标签属性：属性值；.....}

格式一：

/*

两个不同的段落，若要使一个段落向右对齐，一个段落居中对齐，则先定义两个类别选择器

*/

p.center{text-align:center;}

p.right{text-align:right;}

然后在不同的段落里，只要在html标记里加入上面定义的类
<p class="right">这个段落向右看齐</p>
<p class="center">这个段落居中看齐</p>

　　例如：.类名{标签属性：属性值；标签属性：属性值..........}

该格式的类使所有class属性值为该类名的标签都遵守该类所定义的样式

.text{font-family:宋体;color:red}    //定义类别选择器

<p class="text">段落文本</p>            //p标记引用类别选择器text

<h1 class="text">标题文本</h1>       //h1标记引用类别选择器text

该定义功能：在pp标签对上分别使用text类使标签对中的文本字体为宋体，颜色为红色

　　　（3）ID选择器：使用id定义选择器；

　　·属性是希望要设置的属性，并且每个属性都有一个值，属性和值被冒号分开，属性之间用分号间隔，并有花括号包括

　基本语法:#id 名称{标签属性：属性值；标签属性：属性值......}

例如：

注意：使用该样式表时，需要将该样式的网页内容前加一个id=“id名称”。

#sample{font-family:宋体;font-size:60pt}     //首先定义id选择器

<p id=sample>段落标记文本</p>   //使用id选择器，使标签内的文本以sample样式显示

2.2 样式表的使用

在HTML中使用css有四种方式：行内式、内嵌式、链接式、导入式。

（1）行内式：不需要定义选择器，利用style属性直接为元素设置样式，只对当前的标签起作用

例如：

<p style="color:#0000FF";font-size:20px;text-decoration:underline;>

 正文内容1</p>

（2）内嵌式：利用<style></style>标签对，将样式表定义在headhead标签对之间，内嵌式样表的作用范围是整个HTML文档；

例如：

<html>

  <head>

    <title>页面标题</title>

	<style type="text/css">

		p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}

		.info{font-size:12px;color:red;}

		//定义两个选择器：标签选择器p和类选择器

	</style>

  </head>

  <body>

   <p>这是第一行内容......</p>

   <p class="info">这是第二行正文内容......</p>

                	<!--使用选择器：第一行，标签选择器使用；第二行，类选择器使用  -->

  </body>

</html>