4.4 案例实战_HTML5+CSS3+JavaScript从入门到精通（微课精编版）-QQ阅读中文历史网

上QQ阅读APP看书，第一时间看更新

4.4　案例实战

本节将通过多个案例练习如何使用图像标签，如何灵活使用JavaScript脚本控制HTML5多媒体播放。

4.4.1　设计图文新闻

视频讲解

本节示例将设计一个图文新闻页面，通过添加图片，重新设计，优化新闻内容页的页面版式，使其结构更符合标准，以适应大型新闻站的自动化编排需要，同时让页面设计更具专业性，更适合新闻阅读习惯。

　注意：本例需要CSS知识，如果读者暂时不熟悉CSS，建议先跳过本节，等学习完CSS之后，回头再学习。

【操作步骤】

第1步，启动Dreamweaver，新建网页，保存为index.html，在<body>标签内输入以下代码。

设计新闻内容页面结构，初步效果如图4.11所示。

图4.11　未添加图片效果的新闻内容页

示例效果

为了能实现图文并茂的新闻内容页面，我们需要在页面内容中插入图片，而需要修饰的背景图片只需要通过CSS的background属性调用即可。因此需要修改HTML页面结构，通过<img>标签插入需要在页面中出现的图片。

第2步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后准备定义样式。

第3步，如果本例继续使用上一节中提到的样式设计方法，会发现该页面中新闻图片独占一行，而且并不是居中显示，对于视觉效果来说并不是很理想，如图4.12所示。

图4.12　初步CSS混排效果

第4步，图文新闻内容页面的页面效果大概的外观已经呈现出来了，但为了能使页面效果更佳，希望在新闻标题后面添加一个代表新闻内容为图文新闻的图标并且将内容区域中的图片居中显示。

第5步，修改CSS样式表中的部分代码，最终在浏览器中会看到如图4.13所示的效果。

第6步，在上图中，可以看到新闻图片的宽高比较小，而继续使用居中的方式显示图文新闻内容页，将会使图片的周围显得很空阔。这时可以考虑使用图文环绕的版式设计图文新闻内容页，如图4.14所示。

第7步，在图4.13中，将图片由原来的大图变更为一张小图，因此在HTML页面结构中修改<img>标签中的文件名。

    <img src="images/new_pic_s.jpg" alt="新闻图片" />

图4.13　增加图片效果后的图文新闻内容页

图4.14　文字围绕着图片的图文新闻内容页

第8步，基于原有的图文新闻内容页的CSS样式，需要将.news-box .content部分的CSS样式全部去掉，已经不需要再设置新闻内容区域的居中显示，并设置图片浮动（float）属性，使图片周围的文字能围绕着图片。

    ……
    .news-box .content {
        text-align:center; /* 新闻内容区域居中显示 */}
    .news-box .content img.news_pic {
        float:left;
        margin-right:10px;} /* 设置文字围绕着图片的图文混排效果 */
    .news-box .content p {
        margin-bottom:10px;
        line-height:22px;
        text-indent:2em;
        text-align:left; /* 调整新闻内容区域文字居左显示 */
    } /* 新闻内容区域的每个段落加大行间距（行高），并首行缩进，段落与段落之间存在一点间距 */

简单几句CSS样式代码即可设计漂亮的页面布局效果。不过图文混排的页面效果只能设置图片居左或者居右显示，无法实现当图片在文字内容中间时文字围绕图片左右显示的页面效果。

4.4.2　设计阴影白边

视频讲解

本例设计为img元素定义一个默认的阴影样式，这样当在网页中插入一个图像时，它会自动显示为阴影效果，如图4.15所示。与设置前插入的图像效果比较之后，如图4.16所示，会发现这种定义有阴影效果的图像更真实而富有立体感，特别适用于网上照片发布页面。

图4.15　为图像定义默认的阴影样式

图4.16　图像未定义阴影样式效果

　注意：本例需要CSS知识，如果读者暂时不熟悉CSS，建议先跳过本节，等学习完CSS之后，回头再学习。

【操作步骤】

第1步，需要在图像编辑器中设计一个4像素高、1像素宽的渐变阴影，如图4.17所示。

示例效果

图4.17　设计一个渐变阴影图像

第2步，在网页<head>标签中定义如下样式。

　注意：在定义底边内边距，考虑到底边阴影背景图像可能要占用4个像素的高度，因此要多设置4像素。左右两侧的阴影颜色可以根据网页背景色时适当调整深浅。

第3步，在页面<body>标签内插入任意多个图像即可，演示效果如图4.17所示。

    <img src="images/1.jpg" width="200">
    <img src="images/2.jpg" width="300">
    <img src="images/3.jpg" width="400">

4.4.3　设计音乐播放器

视频讲解

如果需要在页面上播放一段音频，同时又不想被默认的控制界面影响显示效果，则可创建一个隐藏的audio元素，即不设置controls属性，或将其设置为false，然后用自定义控制界面控制音频的播放。

本例主要代码如下：

演示效果如图4.18所示。

示例效果

图4.18　用脚本控制音乐播放

在上面示例中，先隐藏了用户控制界面，也没有将其设置为加载后自动播放，而是创建了一个具有切换功能的按钮，以脚本的方式控制音频播放：

    <button id="toggle" onclick="toggleSound()">播放</button>

按钮在初始化时会提示用户单击它以播放音频。每次单击时，都会触发toggleSound()函数。在toggleSound()函数中，首先访问DOM中的audio元素和button元素。

通过访问audio元素的paused属性，可以检测到用户是否已经暂停播放。如果音频还没开始播放，那么paused属性默认值为true，这种情况在用户第一次单击按钮的时候遇到。此时，需要调用play()函数播放音频，同时修改按钮上的文字，提示再次单击就会暂停。

    else {
        music.pause();
        toggle.innerHTML ="播放";
    }

相反，如果音频没有暂停，则会使用pause()函数将它暂停，然后更新按钮上的文字为“播放”，让用户知道下次单击的时候音频将继续播放。

4.4.4　设计视频播放器

视频讲解

本例将设计一个视频播放器，用到HTML5提供的video元素和HTML5提供的多媒体API的扩展，示例演示效果如图4.19所示。

图4.19　设计视频播放器

示例效果

使用JavaScript控制播放控件的行为（自定义播放控件），实现如下功能：

　利用HTML+CSS制作一个自己的播放控件条，然后定位到视频最下方。

　视频加载loading效果。

　播放、暂停。

　总时长和当前播放时长显示。

　播放进度条。

　全屏显示。

【操作步骤】

第1步，设计播放控件。

上面是全部HTML代码，.controls类就是播放控件HTML，引用CSS外部样式表：

    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/player.css">

为了显示播放按钮等图标，本例使用了字体图标。

第2步，设计视频加载loading效果。先隐藏视频，用一个背景图片替代，等视频加载完毕之后，再显示并播放视频。

第3步，设计播放功能。在JavaScript脚本中，先获取要用到的DOM元素。

    var video = document.querySelector("video");
    var isPlay = document.querySelector(".switch");
    var expand = document.querySelector(".expand");
    var progress = document.querySelector(".progress");
    var loaded = document.querySelector(".progress > .loaded");
    var currPlayTime = document.querySelector(".timer > .current");
    var totalTime = document.querySelector(".timer > .total");

当视频可以播放时，显示视频：