Y2K网页制作全攻略（二）：Bling Bling的多媒体网页 作者：蓬岸 Dr.Quest 编号：1914854590291083923 创建于：2025-06-14 05:23:25 修改于：2025-07-10 16:13:23 -------------------- 任务二：Bling Bling的多媒体网页 在任务一中，我们将一篇图文并茂的Word文档转换为网页版本，当你完成任务一时，你就已经顺利掌握了World Wide Web的第一核心功能：文档编写与发表。而任务二涉及的是WWW在1990年代中期发展出来的新功能：多媒体叙事。 功能 年份 代表软件 GIF动画 1995 Netscape Navigator 2.0 鼠标指针 1997 Internet Explorer 4.0 滚动字幕 1996 Internet Explorer 3.0 闪烁字幕 1994 Netscape Navigator 1.0 背景音乐 1996 Internet Explorer 3.0 嵌入资源 1997 Netscape Navigator 4.0 GIF动图和网页背景 GIF格式诞生于1987年，历史比WWW还要悠久，最初GIF图主要通过BBS和Internet的文件分享服务传播，并在1989年加入多帧动画功能。作为一种早期出现的图像格式，它带着现在看起来非常局限的功能限制，只支持256色调色板，对于色阶丰富的照片而言，当转换为GIF图时往往经过抖动处理，使其呈现独特的“低保真”观感。 (Image: https://pengan1987.github.io/images/picx/v2-1ca4654078fd03eacd977c4e13fd4935_720w.gif) Flash及其后续Adobe Animate都支持导出GIF动画 (Link: https://helpx.adobe.com/cn/animate/using/export-for-web.html)，许多视频编辑软件也支持GIF图导出，但需要注意，GIF动图本质上是将多帧静图打包在一起，因此以高分辨率、高帧率输出的尺寸远大于现代MP4。典型的GIF动图往往使用小尺寸和低帧率以保证在网上传输的速度。如下面的动图使用320x240分辨率，3fps设置，播放时间约4秒 (Image: https://pengan1987.github.io/images/pica/v2-bb670705f9b8d618bc5c4e3db0fb056a_720w.jpg) 输出的文件大概为500KB (Image: https://pengan1987.github.io/images/picx/v2-0ed8feb0e31ed600d332a66ca8d6a08f_720w.gif) 目前网上有许多网站都可以将图片序列转换为GIF，Photoshop也有制作绘制逐帧动画 (Link: https://www.adobe.com/cn/learn/photoshop/web/create-animated-gif)和将图片序列转换为动画 (Link: https://www.adobe.com/cn/learn/photoshop/web/make-animated-gif) 的功能 如果你寻找类似Flash的关键帧动画软件，可以尝试 https://www.wickeditor.com/ (Link: https://www.wickeditor.com/) 在网页正文中插入动图的方法与普通图片相同，如果希望将GIF动图设置为背景，需要在菜单栏格式→页面颜色和背景中设置。 (Image: https://pengan1987.github.io/images/pic1/v2-5d592877dc59c9c99a2342b283cdadc6_720w.jpg) 之后即可将网页背景加入到网页。注意，在Composer中加入动图不会立即播放，点击浏览按钮在浏览器中才能看到动图效果。 (Image: https://pengan1987.github.io/images/pic1/v2-aaf46b00aa54b373b4f98dfe7ca94681_720w.jpg) 自定义鼠标指针 鼠标指针通常是一个小于128x128像素尺寸的的图片。由于鼠标箭头和用户操作精度密切相关，制作鼠标箭头的建议如下 - 最好不要太大，16x16或32x32像素即可 - 请使用透明背景的PNG文件 - 鼠标画面尽量填满整个图像文件范围，四周尽量不要留白，特别是左上角 下图是一个32x32像素的鼠标箭头文件示例，画面尽量贴紧四边 (Image: https://pengan1987.github.io/images/picx/v2-dc386f477da7860c94d99ad5c729e9c9_720w.jpg) 再菜单栏中选格式→页面颜色和背景→高级编辑→内联样式 (Image: https://pengan1987.github.io/images/picx/v2-39d8ae10029c8fa51901d326ef9cbce3_720w.jpg) 修改属性为“cursor”，值为 url("paw.png"), auto 其中paw.png是你想使用的图标文件的文件名，之后我们就有一个小爪子鼠标箭头啦！ (Image: https://pengan1987.github.io/images/picx/v2-314cdfa2f1b15e7b57653883ac98f531_720w.jpg) 最Y2K的滚动和闪烁字幕 滚动字幕是90年代网页的常用特效之一。把现有文字变成滚动字幕的方法比较简单，先选中你要让它滚起来的文字部分，然后在菜单里选 插入→HTML，之后在已有代码的前面加入，后面加入（多一个斜杠），然后点“插入”，就可以让字幕滚动起来啦！ (Image: https://pengan1987.github.io/images/picx/v2-462a41eba89d93f760e909f36afaf8a0_720w.jpg) 闪光文字标记 曾经是WWW上最常用的特效之一，为了照顾光敏性癫痫症患者（但更多是大厂们之间的政治斗争），在2010年代这一功能在主流浏览器上被取消了，但自由的开发者们怎会屈服于所谓“标准”，于是blink-polyfill (Link: https://github.com/yocontra/blink-polyfill)诞生了，让我们能够恢复标签的功能 名词解释：Polyfill原指枕头、毛绒玩具里的聚酯纤维填充物，在网页开发中，指为解决某些当前浏览器不兼容，但通常在其他较新/较旧的浏览器中被使用的功能而设计的兼容性代码。 在你的网页中加入这个polyfill的办法，是在网页代码的文件头，即 head 标签范围内加入下面一行代码。这行代码的意思是加入一个样式表（stylesheet），其内容来自http://cdn.jsdelive.net (Link: http://cdn.jsdelive.net)的blink.css文件。 在Composer下方编辑模式中选中源代码，然后在 和所包围的范围内加入一行上面的代码即可。代码保存后会自动折行，不影响使用。 (Image: https://pengan1987.github.io/images/pic1/v2-1c9b2f3cba6446536f276bc7f5a616f2_720w.jpg) 然后回到“常规”模式，和加入滚动字幕的marquee标记方法的类似使用菜单 插入→HTML，闪烁文字使用的是blink标记。然后就可以让文字闪烁起来啦！ (Image: https://pengan1987.github.io/images/picx/v2-00448cf4955d47c6063c3450ebb7ba3c_720w.jpg) 你也可以试一下使用Bluefish编辑网页，代码标签都被高亮显示了，还可以用代码旁边带着连线的小加号展开、折叠特定的代码章节，是不是编辑起来更清楚了！试着找找我们刚才编辑的内容。 (Image: https://pengan1987.github.io/images/picx/v2-e3f8a1ac89934a4dacdaa096bb8d184a_720w.jpg) 你会发现，在代码视角下的网页，各种效果，无论是我们刚才用到的marquee、blink这样的特效，还是标题、表格都被用尖括号标记（markup）包围起来，这就是超文本标记语言（HyperText Markup Language - HTML）字面上的意思啦！这时电脑就像一个自动排版机器人，根据页面编写者提供的标记把文本排成不同的样式。 什么？做网页就是在指挥机器人排版，这算是在编程（programming）吗？ 必须是的！编写HTML网页是一种声明式编程 (Link: https://baike.baidu.com/item/%E8%81%B2%E6%98%8E%E5%BC%8F%E7%B7%A8%E7%A8%8B/9939512)。看看本文前面的内容，你已经走出了这么远！你已经在跨越“用户”和“开发者”之间的界限，夺回电脑控制权的路上了！ 嵌入外站媒体资源 嵌入B站视频 在B站视频下方的分享栏中，选择点击复制链接→嵌入代码 (Image: https://pengan1987.github.io/images/pic1/v2-035596095441883349e813b74ab343fb_720w.jpg) 即可得到一段可用于嵌入到网页中的代码，类似于 在Composer里，使用 插入→HTML，或在Bluefish里粘贴这段代码到想要的位置就可以啦。 但你会发现，直接使用这段代码的效果并不好： - 在本地硬盘上播放不了 - 默认显示的窗口很小 - 视频是自动播放，但是静音开播了 我们来修复这两个问题吧！ 在本地硬盘上不能播放的原因是本地硬盘文件的URL使用"file://"开头，而网站使用"http://"或"https://"开头播放的办法最简单，就是在代码 src="//player.bilibili.com/player.html……" 这段中的两个斜杠前加https，变成 src="https://player.bilibili.com/player.html……" 就可以在本地顺利播放了 修改视频播放窗口尺寸的办法则是需要在iframe标签中加入宽度和高度信息，比如 效果还不错！ (Image: https://pengan1987.github.io/images/picx/v2-e90897832c4518d0145aa2dacf2cd057_720w.jpg) 嵌入油管视频 搞定B站视频之后，油管视频就容易很多啦 (Image: https://pengan1987.github.io/images/pica/v2-37a6d227ab759eb9836acb9eec493d1c_720w.jpg) 复制嵌入视频代码，然后粘贴到Bluefish里，就可以直接用啦，默认的效果就不错，只需要调调尺寸参数就好 (Image: https://pengan1987.github.io/images/pica/v2-a836a99c985d5cb810d722b8e3488fbd_720w.jpg) 加入SoundCloud音乐 这就更简单啦，找到框架地址就好 (Image: https://pengan1987.github.io/images/pic1/v2-911f2476a7258888c336870c32cfcc61_720w.jpg) 使用HTML5音视频标签（Neocities使用受限） 注意：由于Neocities免费账号限制上传音频、视频文件，因此需要找额外的空间来存放音视频文件，Nekoweb、Vercel、Github Pages、Cloudflare Pages、Netlify等无此限制。 加入音频播放器 虽然Neocities限制上传MP3文件，但对于网页制作者来说还是有一类提供音频文件的简便方式的，即“音频外链”，简单而言就是将音频文件上传到另外一个网站，或者直接使用音乐网站提供的音频地址。这类网站例如： - 远方在线音乐搜索 https://mp3.ltyuanfang.cn/ (Link: https://mp3.ltyuanfang.cn/) 这个网站支持搜索音乐，或将音乐网站的链接转换为外链 - Gimhoy音乐盘 https://music.gimhoy.com/list (Link: https://music.gimhoy.com/list) 这个网站支持上传自己的音乐文件，或者直接引用已经上传的音乐文件 音频标签的一般用法是： ，比如要嵌入文件为mymusic.mp3（和html网页处于同一文件夹），那么代码就类似 类似的方法也可以嵌入站外（外链）音频，但需要在src属性中填入完整的音乐链接地址，此处以远方音乐搜索为例，找到音乐之后，将音乐链接复制下来 (Image: https://pengan1987.github.io/images/picx/v2-2c9fc3554eafba4937b0a819b4e5c2af_720w.jpg) 将链接粘贴到上面提供的标签模板中，即 然后在Composer中，使用插入→HTML菜单将其加入网页，或者直接将其粘贴到Bluefish编辑器中，就可以在网页里加入一个音频播放器了！ 让音乐自动播放的办法是在标签中加入autoplay属性，而如果希望音频播放器是“隐形”的，则可以同时去掉controls属性，例如下面一段代码可以实现“背景音乐”功能，音乐会在跳转到该页面时自动播放，而且用户看不到任何控制按钮 注意：由于自动播放曾经在2010年代被网页广告滥用，从2018年开始大多数浏览器拒绝在未经用户操作的情况下播放带有autoplay标签的内容，即如果观众直接输入网址抵达某个带有自动播放媒体的网页，则该媒体不会被自动播放，参考Google Chrome (Link: https://developer.chrome.com/blog/autoplay?hl=zh-cn)或Mozilla Firefox (Link: https://developer.mozilla.org/zh-CN/docs/Web/Media/Guides/Autoplay)的说明 但如果观众从该网站的其他页面跳转而来，则可以自动播放，一个较好的处理方式是不要把自动播放添加到主页上。如果希望主页有背景音乐，则可以设计一个登陆页（Landing page），让用户从登录页跳转到主页，并播放背景音乐。中文网站的“活化石”之一“秘密花园 (Link: http://www.yini.org/)”的背景音乐就通过此方法实现。 (Image: https://pengan1987.github.io/images/pic1/v2-2fb45f93ed6868d6eba00e955439770f_720w.jpg) 加入视频播放器 HTML5的视频标签和音频标签的用法基本一致，唯一需要注意的是在大多数情况下需要使用width（宽）和height（高）来定义视频在网页中显示的尺寸，比如 就可以在网页中加入一个尺寸为600x450像素的视频播放器。 嵌入MIDI音乐（Neocities使用受限） 注意：由于Neocities免费账号被限制使用脚本从站外加载数据（Scripts accessing data on another website），因此无法加载音色库，此功能无法使用，参考：https://content-security-policy.neocities.org/ (Link: https://content-security-policy.neocities.org/) 以及 Reddit上的讨论 (Link: https://www.reddit.com/r/neocities/comments/1injgq7/i_made_a_website_about_what_the_content_security/)。建议使用“嵌入外站媒体资源”方式操作。 在千禧年前后，为网页加入背景音乐曾经简单到只需要一个bgsound标签就好 (Link: https://www.youtube.com/watch?v=-DyCsY0vcxM)。但这在过去是一个仅属于微软Internet Explorer的标签，在2010年代IE没落之后就被废弃了。即使HTML5提供了替代性的标签，但也仅支持音频（录音）文件，如mp3、ogg、aac等，不再支持MIDI了。 不过Midijs.net (Link: https://www.midijs.net/)网站提供了一种较容易地在网站上加入Midi音乐的办法，需要在网页的 中加入这样一行 还记得前面提到加入闪烁字幕所使用的文件叫做样式表（stylesheet）吗？它和脚本（script）一样，都是用来为HTML网页提供额外控制的工具。样式表控制网页的外观和样式，例如颜色、字体、布局等。而脚本控制网页的交互和行为逻辑，如点击事件、动态加载数据、用户交互等。 之后我们需要让音乐在网页加载完成之后自动播放，window.onload是指在窗口加载完成后执行，执行的是一个函数（function），功能是使用MIDIjs播放名为main-theme.mid的音乐文件。 下面这张图就是加入MIDI支持脚本的代码的示例。 (Image: https://pengan1987.github.io/images/pic1/v2-c7bd35f778627f24a66f0a0b12720e36_720w.jpg) 注意：由于Chrome不许从本地文件加载网络资源，因此在本地硬盘上浏览时使用Chrome会无法加载http://MIDIjs.net (Link: http://MIDIjs.net)上的播放脚本，上传到服务器的网页，或使用SeaMonkey浏览器不受此限制。