WEB前端人机导论实验-实训3超链接与多媒体文件应用

1.项目1  设计简易灯箱画廊

A.题目要求:

编程实现简易灯箱画廊,鼠标单击任一个图像超链接,在底部浮动框架中显示大图像,效果如下的页面。

WEB前端人机导论实验-实训3超链接与多媒体文件应用_第1张图片

B.思路:

(1)CSS样式:

a.在样式中对body元素进行居中对齐,设置标题的字体大小和颜色,以及列表、列表项、图片和链接的样式。

b..创建一个名为"div1"的

元素,作为整个内容的容器。这个
元素具有指定的宽度、高度和背景颜色。

(2)主体内容:

a.在"div1"中,设置一个标题

标签,并使用水平线
来分隔标题和图像列表。

b.创建一个无序列表

2.项目2  设计支持音频、视频播放的网

A.题目要求:

编程设计支持音视、视频播放的网页,效果下图所示的页面

WEB前端人机导论实验-实训3超链接与多媒体文件应用_第2张图片

B.思路:

(1)CSS样式:

a.在样式中,将body元素的文本居中对齐,设置标题

的字体大小和颜色,定义段落

的字体、字号和颜色。

b.创建一个无序列表

    ,并去除列表项符号。

    c.创建两个

    元素,分别具有id属性为"div1"和"div2",用于组织页面的不同部分。

    d."div1"的背景颜色为"yellowgreen",宽度为1500px,高度为250px。

    e."div2"的背景颜色为"dodgerblue",宽度为1500px,高度为20px。

    (2)主体内容

    a.在部分,设置一个标题

    ,之后是紫色的水平线。

    b.在段落

    中,插入一首诗歌,以及作者的名字。

    c.使用


    标签创建红色的水平线。

    d.在列表中创建三个列表项

  • ,每个包含一个元素,用于嵌入不同的多媒体内容(Flash动画和视频)。元素包含src属性,指定要嵌入的多媒体文件的路径,以及宽度、高度、自动播放和循环等属性。

    e.在div1中创建一个横向的列表,用于显示嵌入的多媒体内容。

    f.在div2中显示滚动的文字,通过元素实现。

    C.总体代码:

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

    明月几时有


    明月几时有?把酒问青天。
    不知天上宫阙,今夕是何年。
    我欲乘风归去,又恐琼楼玉宇,
    高处不胜寒,起舞弄清影,何似在人间。
    转朱阁,抵绮户,照无眠。
    不应有恨,何事偏向别时圆。
    人有悲欢离合,月有阴晴圆缺,此事古难全。
    但愿人长久,千里共婵娟。


    欢迎来到我的多媒体世界!

    3.项目3  设计简易网站导航

    A.题目要求:

    采用段落或无序列表与超链接组合实现网站导航,效果图如下图

    WEB前端人机导论实验-实训3超链接与多媒体文件应用_第3张图片

    B.思路:

    (1)CSS样式:

    a.所有

    元素文本内容居中对齐。

    b.所有无序列表

    你可能感兴趣的:(html,前端,css,前端,html,css)