网页设计实验三


+++点击资源索引【查看其它实验】+++

一 设计简易灯箱画廊

实训 3 超链接与多媒体文件应用
项目 1 设计简易灯箱画廊
使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-1
所示：
（1）文件名：prj_3_1.html。 （2）页面标题：“简易灯箱画廊设计”。
（3）实验所需素材：在 trees 文件夹中提供一个 MP3 文件和 18 个 JPG 文件，
设计页面时可以使用。
（4）效果：鼠标单击任一个图像超链接，在底部浮动框架中显示大图像。 图 3-1 简易灯箱画廊 （5）部分操作如下：
○1 在 body 标记中插入 embed 标记实现背景音乐。格式如下：
<embed src=”trees/Sleep Away.mpe” loop=”true” autostart=”true” width=”0” height=”0”>
○2 插入类名为“div1”的 div。格式如下：

○3 在 div 中插入无序列表
    。 ○4 在 ul 标记中插入
    • ，依次在 li 标记中插入超链接，并将文字和图像 作为超链接的标题，格式如下：
    • T1
    • ○5 在 div 中插入浮动框架 iframe 标记，并设置浮动框架 name、src、width、 height、frameborder 等属性。浮动框架中默认显示的图像文件为 trees/t1.jpg。格 式如下： ○6 在头部 style 标记中分别定义 body、div、ul、li、h3、a 等标记的样式。格 式如下： body{text-align:center; } /*页面内容居中*/ .div1{width:900px;height:500px;margin:0px auto;text-align:center;background-color:#33cc99;} ul{margin:0 auto;width:800px;list-style-type:none;height:120px;} li{float:left;width:110px;height:90px;margin:5px;} img{border:0;width:100px;height:80px;} h3{font-size:24px;color:white;padding:10px auto;} a{color:#ffffff;text-decoration:none;} a:link,a:visited,a:active{color:#0033cc;} a:hover{border-bottom:4px solid #ff0000;} /*鼠标悬停时有红色的底边线出现*/ 
      
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易灯箱画廊设计</title>
<style type="text/css">
body
{
	text-align:center; 
} /*页面内容居中*/
.div1
{
	width:900px;
	height:500px;
	margin:0px auto;
	text-align:center;
	background-color:#33cc99;
}
ul
{
	margin:0 auto;
	width:800px;
	list-style-type:none;
	height:120px;
}
li
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
img
{
	border:0;
	width:100px;
	height:80px;
}
h3
{
	font-size:24px;
	color:white;
	padding:10px auto;
}
a
{
	color:#ffffff;
	text-decoration:none;
}

a:link;
a:visited;
a:active{color:red;}
a:hover{border-bottom:4px solid #ff0000;} /*鼠标悬停时有红色的底边线出现

/*a:link{color:yellow;} /* 未访问的链接 */
/*a:visited {color:blue;} /* 已访问的链接 */
/*a:hover{color:red;} /* 鼠标划过链接 */
/*a:active{color:green;} /* 已选中的链接 */

</style>
</head>

<body>
<embed src="tree/Sleep Away.mp3" loop="true" autostart="true" width="0" height="0"></embed>


<div class="div1">
<h3>简易灯箱画廊设计</h3>
<hr color="#FF0000" size="5">
<ul>
<li><a href="tree/t1.jpg" target="new_windows">T1<img src="tree/t1.jpg"></a></li>
<li><a href="tree/t2.jpg" target="new_windows">T2<br><img src="tree/t2.jpg"></a></li>

<li><a href="tree/t3.jpg" target="new_windows">T3<br><img src="tree/t3.jpg"></a></li>
<li><a href="tree/t4.jpg" target="new_windows">T4<br><img src="tree/t4.jpg"></a></li>
<li><a href="tree/t5.jpg" target="new_windows">T5<br><img src="tree/t5.jpg"></a></li>
</ul>

<iframe src="tree/t1.jpg" name="new_windows" width="500px" height="300px" frameborder="0"></iframe>
</div>
</body>
</html>

      二 设计支持音频、视频播放的网页

      项目 2 设计支持音频、视频播放的网页
      使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-2
      所示：
      （1）文件名：prj_3_2.html。 （2）页面标题：“多媒体及滚动字幕应用”。
      （3）歌曲名称用 2 号标题字。
      （4）用 font 标记自定义歌词内容样式，歌词内容如下：
      明月几时有？把酒问青天。
      不知天上宫阙，今夕是何年。
      我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。
      转朱阁，抵绮户，照无眠。
      不应有恨，何事偏向别时圆。
      人有悲欢离合，月有阴晴圆缺，此事古难全。
      但愿人长久，千里共婵娟。
      图 3-2 多媒体及滚动字幕网页设计效果 （5）插入图层 div，并在图层内插入无序列表，在列表项中分别插入不同的
      多媒体文件。音频、视频资源在 embed 子目录下。
      （6）在 div 结束标记中插入滚动文字 marquee 标记，设置滚动文字标记属
      性实现向左交替滚动。滚动文字内容为：欢迎来到我的多媒体世界！
      （7）在头部 style 标记中分别定义 body、ul、li、div 和 marquee 标记样式。
      body{text-align:center;}
      ul{list-style-type:none;}
      li{float:left;margin:20px;}
      div{height:250px;background-color:#99cc00;text-align:center;}
      marquee{font-size:16px;padding:4px auto;}

      
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多媒体及滚动字幕应用</title>
<style type="text/css">
body{text-align:center;}
ul{list-style-type:none;}
li{float:left;margin:20px;}
div{height:250px;background-color:#99cc00;text-align:center;}
marquee{font-size:16px;padding:4px auto;  background-color:#0FF}
</style>
</head>

<body>
<h2>明月几时有</h2>

<hr color=blue size="5">
<font size="+2">
明月几时有？把酒问青天。<br>
不知天上宫阙，今夕是何年。<br>
我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。<br>
转朱阁，抵绮户，照无眠。<br>
不应有恨，何事偏向别时圆。<br>
人有悲欢离合，月有阴晴圆缺，此事古难全。<br>
但愿人长久，千里共婵娟。<br>
</font>
<hr color=red size="5">
<ul>
<li><embed src="emed/62.swf"></embed></li>
<li><embed src="emed/蔡琴明月几时有.mp3"></embed></li>
<li>><embed src="emed/htmlexample.mpeg"></embed></li>
</ul>
<marquee behavior="scroll" direction="left"  onMouseOut="this.start()" onMouseOver="this.stop()">欢迎来到我的多媒体世界！</marquee>



</body>
</html>

      三 设计简易网站导航

      项目 3 设计简易网站导航
      使用 Dreamweaver 等软件编写符合以下要求的文档： （1）在浏览器 URL 中输入网址“http://www.hao123.com”访问网站，部分
      页面截图如图 3-3-1 所示。参照此图中第一行导航的效果编写代码实现导航条目。
      图 3-3-1 hao123 部分链接截图 （2）采用段落或无序列表与超链接组合实现网站导航，页面效果如图 3-3-2
      所示。
      图 3-3-2 两种方式实现网站导航的效果图 （3）按照表 3-3-1 所示的 URL 分别设置超链接的 href 属性和超链接的标题。
      表 3-3-1 网页首行导航链接信息表
      序号 网站名称 URL 1 百 度 http://www.baidu.com/
      2 新 浪 http://www.sina.com.cn/
      3 腾 讯 http://www.qq.com/
      4 搜 狐 http://www.sohu.com/
      5 网 易 http://www.163.com/
      6 谷 歌 http://www.google.com.hk/
      （4）文件名：prj_3_3.html。 （5）页面标题：“网站导航”。
      （6）未使用样式时页面效果如图 3-3-3 所示。
      图 3-3-3 未使用样式时导航条目页面 （7）部分样式参考代码如下：
      ○1 水平分隔线：

      ○2 无序列表和列表项： ul{list-style-type:none;text-align:center;} /*去掉列表项前面的符号，列表项居中显示*/ li{;width:100px;display:inline;} /*垂直列表项转换为水平列表项，列表项行内显示*/ li a{padding:0 20px;} /*列表项中的潮连的宽度，分割导航条目*/ ○3 图层内容居中显示 div{text-align:center;} 
      
<!--


1.float:left是从左开始，依次向右
2.display:inline   text-align:center是从中间向两边，中间对齐


-->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网站导航</title>
<style type="text/css">
ul{list-style-type:none; text-align:center} /*去掉列表项前面的符号，列表项居中显示*/
li{width:100px; display:inline;} /*垂直列表项转换为水平列表项，列表项行内显示*/
li a{padding:0 20px;} /*列表项中的潮连的宽度，分割导航条目*/
div{text-align:center;}
</style>
</head>

<body>
<strong>段落标记与超链接</strong>
<p align="center">
<a href="http://www.baidu.com/">百度</a>
<a href="http://www.sina.com.cn/">新浪</a>
<a href="http://www.qq.com/">腾讯</a>
<a href="http://www.sohu.com/">搜狐</a>
<a href="http://www.163.com/">网易</a>
<a href="http://www.google.com.hk/">谷歌</a>
</p>

<hr align=”center” size=”3 color=”#0066ff”>
<strong>无序列表与超链接</strong>
<ul>
<li><a href="http://www.baidu.com/">百度</a></li>
<li><a href="http://www.sina.com.cn/">新浪</a></li>
<li><a href="http://www.qq.com/">腾讯</a></li>
<li><a href="http://www.sohu.com/">搜狐</a></li>
<li><a href="http://www.163.com/">网易</a></li>
<li><a href="http://www.google.com.hk/">谷歌</a></li>
</ul>




</body>
</html>

      四 设计新生课程简介

      项目 4 设计新生课程简介
      使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-4
      所示：
      （1）文件名：prj_3_4.html。 （2）页面标题：“专业课程导航”。
      图 3-4 新生课程简介页面 （3）内容标题“专业课程导航”采用 2 号标题字标记，设置 align 属性为居
      中。
      （4）用超链接定义根书签名称，参考代码如下：
      专业课程导航
      （5）用无序列表定义课程书签链接导航目录。在无序列表中插入列表项，
      在列表项里，用超链接建立书签链接，书签名称分别为 dir1、dir2、dir3。参考代
      码如下：

      （6）分别用 3 号标题字标记和段落标记来定义各个书签的具体内容，并设 置返回“根书签”的链接。第一个书签名和书签名对应的内容定义代码格式如下：

      英语

      基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概 论、主要英语国家文学史及文学作品选读、主要英语国家国情等。返回

      （7）其他两个书签结构代码参照第一个，书签对应的内容如下所示。 英语 基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、 主要英语国家文学史及文学作品选读、主要英语国家国情等。 返回 高数 《高等数学》课程介绍随着科学技术的迅猛发展 数学正日益成为各学科进行科学研究的重要手段和 工具。高等数学是近代数学的基础 是理科各专业和经济管理专业类学生的必修课 也是在现代科学技术、 经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课 程是学生进入大学后 学习的第一门重要的数学基础课。通过本课程的教学 使学生掌握处理数学问题的 思想和方法 培养学生科学思维能力 同时为后续课程的学习奠定良好的基础。 返回 大学物理 以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物 理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力， 培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。 返回 
      
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>专业课程导航</title>
</head>

<body>
<h2 align="center">专业课程导航</h2>
<a name="dir0">专业课程导航</a>
<ul>
 <li><a href="#dir1">英语</a></li>
<li><a href="#dir2">高数</a></li>
<li><a href="#dir3">大学物理</a></li>
</ul>


<h3><a name=”dir1”>英语</a></h3>
基础英语、高级英语、报刊选读、视听、口语、英语写作、翻译理论与实践、语言理论、语言学概论、
主要英语国家文学史及文学作品选读、主要英语国家国情等。
<strong><a href="#dir0">返回</a><br></strong>


<h3><a name="dir2">高数</a><br></h3>
《高等数学》课程介绍随着科学技术的迅猛发展 数学正日益成为各学科进行科学研究的重要手段和
工具。高等数学是近代数学的基础 是理科各专业和经济管理专业类学生的必修课 也是在现代科学技术、
经济管理、人文科学中应用最广泛的一门课程。因此学好这门课程对学生今后的发展是至关重要的。本课
程是学生进入大学后 学习的第一门重要的数学基础课。通过本课程的教学 使学生掌握处理数学问题的
思想和方法 培养学生科学思维能力 同时为后续课程的学习奠定良好的基础。
<strong><a href="#dir0">返回</a><br></strong>


<h3><a name="dir3">大学物理</a><br></h3>
以物理学基础为内容的大学物理课程，是理工科个专业学生一门重要的通识性的必修基础课。大学物
理课程既为学生打好必要的物理基础，又在培养学生科学的世界观，增强学生分析问题和解决问题的能力，
培养学生的探索精神、创新意识等方面，具有其他课程不能替代的重要作用。
<strong><a href="#dir0">返回</a></strong>
</body>
</html>

      五 设计中国名牌大学简介页面

      项目 5 设计中国名牌大学简介页面
      使用 Dreamweaver 等软件编写符合以下要求的文档，完成后的效果如图 3-5
      所示：
      （1）文件名：prj_3_5.html。 （2）页面标题：“中国名牌大学简介”。
      图 3-5 中国名牌大学简介 （3）页面首行 3 号标题字显示，标题为“中国名牌大学简介”。
      （4）页面中间插入两条水平分隔线，分割线中间滚动文字标记，滚动方式
      为来回交替滚动。滚动文字标记内插入 7 个大学超链接，分别为：
      清华大学（http://www.tsinghua.edu.cn/）；
      北京大学（http://www.pku.edu.cn/）；
      上海交通大学（http://www.sjtu.edu.cn/）；
      复旦大学（http://www.fudan.edu.cn/index.html）；
      南京大学（http://www.nju.edu.cn/）；
      西安交通大学（http://www.xjtu.edu.cn/）；
      哈尔滨工业大学（http://www.hit.edu.cn/）。
      （ 5 ） 将 鼠 标 悬 停 在 滚 动 文 字 上 时 会 停 止 滚 动 （ 设 置
      οnmοuseοver=”this.stop();” ）， 鼠 标 从 滚 动 文 字 上 移 出 时 会 继 续 滚 动
      （οnmοuseοut=”this.start();”），单击超链接时访问相关大学网站。

      
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>中国名牌大学简介</title>
<style type="text/css">
a{
	color:#06F;
}
</style>
</head>

<body>
<h3 align="center">中国名牌大学简介</h3> 
<hr color="#FF0000" size="8">
<marquee behavior="alternate" onMouseOver="this.stop()" onMouseOut="this.start()">
<a href="http://www.tsinghua.edu.cn/">清华大学</a>
<a href="http://www.pku.edu.cn/">北京大学</a>
<a href=" http://www.sjtu.edu.cn/">上海交通大学</a>
<a href="http://www.fudan.edu.cn/index.html">复旦大学</a>
<a href="http://www.nju.edu.cn/">南京大学</a>
<a href="http://www.xjtu.edu.cn/">西安交通大学</a>
<a href="http://www.hit.edu.cn/">哈尔滨工业大学</a>
</marquee>
<hr color="#FFFF00" size="8">
</body>
</html>
    # css # html # css3
    Logo
    开放原子开发者工作坊

    开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

    更多推荐

    “源”聚天大，码动未来|开放原子校源行（天津大学站）即将启幕！

    11月22日，开放原子校源行（天津大学站）将在天津大学北洋园校区隆重举办。

    avatar 开放原子开发者工作坊

    openEuler系累计装机量突破1000万，树立操作系统产业新里程碑

    11月15日，以“以智能，致世界”为主题的操作系统大会2024在北京中关村国际创新中心召开。

    avatar 开放原子开发者工作坊

    多模态大模型&科学计算双管齐下，百度飞桨两大赛项报名倒计时！

    第二届开放原子大赛是由开放原子开源基金会组织举办的开源技术领域专业赛事，聚焦解决真问题，重点覆盖基础软件、工业软件、人工智能大模型等领域

    avatar 开放原子开发者工作坊