我的框架

Y2K网页制作全攻略（五）：使用框架作者：蓬岸 Dr.Quest 编号：1929674384194397190 创建于：2025-07-18 23:11:35 修改于：2026-05-14 03:54:34 -------------------- 任务五：使用框架框架 (Link: https://baike.baidu.com/item/HTML%E6%A1%86%E6%9E%B6/2565062)的使用可能是Y2K网页创作技巧里最有趣、并且和今天最为不同的部分了。与旖旎的“秘密花园”类似，中文互联网上一个使用框架进行开发的“活化石”是艺术家冯梦波为摇滚乐手崔健制作的主页 www.cuijian.com (Link: http://www.cuijian.com/)，这个主页完成于2000年并维持维护至今，无论是研究中国的摇滚乐、新媒体艺术还是网页设计的历史，崔健的个人主页都是极好的切入点。 (Image: https://pengan1987.github.io/images/picx/v2-f0af6b0b6e3708fd19c339f3ab35f53d_720w.jpg) 使用SeaMonkey或其他浏览器的右键→查看元素功能，我们可以检查HTML代码和页面内容的对应关系，我们会发现，这个页面的标签之后并没有大多数网页中的标签，而是出现了一个之前没见过的标签，以及两个标签，当我们选中其中一个时，浏览器会用蓝色标记出页面对应的部分。我们会发现崔健主页分为两个部分，第一个部分是左侧的导航栏，第二部分是右侧的新闻页面。而且左右两部分都分别是独立的HTML页，使用鼠标右键→此框架→在新标签页中打开框架，就可以单独打开导航、新闻页面。当使用鼠标选择左侧导航栏中的内容时，右侧展示的页面会随之变化，但左侧导航栏保持不变，浏览器的网址也没有发生变化。这就是框架工作的基本原理了，它可以在浏览器中同时加载多个独立的HTML页面，并拼接成一个更复杂的页面，当用户与网页交互时，可以有选择性地在部分框架中加载不同的内容，这一过程中不会更改网址，没有被重新加载的部分也不会被刷新。在 JavaScript等网页编程网页脚本语言发展出AJAX这样的动态网页加载技术之前，框架也是为数不多能够在不刷新整个页面的同时，局部更新网站内容的方法。框架也可以让网页的内容在一定程度上被复用，减少网站降低维护中的重复工作，比如崔健主页中的导航栏，作为独立的页面通过框架与网站中各个页面装配在一起，就不用为每个页面复制同样的导航代码了，而在导航栏内容需要更新时，也只需要修改单个导航页面即可。使用框架实现导航栏那么接下来我们也来实现一个左侧导航，右侧内容的框架页面吧。好的计划是成功的一半，我们先从一张纸上草图开始，左侧是导航栏，以纵向排列的图标+文字的形式构成，计划的宽度是160px，右侧是内容窗口，占据除导航栏之外的全部空间。 (Image: https://pengan1987.github.io/images/pica/v2-4864c03899495f6e00f5015d13f66c18_720w.gif) 这个布局是不是有点眼熟？看到Windows 2000的打开文件对话框是不是就懂啦！ (Image: https://pengan1987.github.io/images/pic1/v2-30bc09bdd8dc44bfa03afb29701a5993_720w.jpg) 首先我们分别制作我们的导航栏和内容页面，在我的例子中导航页面的文件名是sidenav.html，两个内容页面分别是content1.html和content2.html，然后我们就可以将它们放在同一个文件夹下备用。 (Image: https://pengan1987.github.io/images/picx/v2-f4845a3b7c67b13820f160ca9c87d143_720w.jpg) 由于SeaMonkey Composer是为编辑单个网页设计的，并不能直接编辑框架，因此组织框架的大部分操作都需要在Bluefish这样的文本编辑器下完成，幸运的是，Bluefish作为一款专为编写网页优化的编辑器，它内置的工具可以不用手敲代码就可以创建框架。在Bluefish中创建一个空白的文件，和我们之前创建的导航和内容页面放在一个文件夹中，名字可以随便起，比如myframes.html，然后就可以使用框架标签的第一个按钮启动“框架向导”。 (Image: https://pengan1987.github.io/images/picx/v2-ce5dba9d47aeb774f0a431dbd3b61261_720w.jpg) 在框架向导中，标题中我们填入网页的标题，比如“我的框架”，方向选“水平”，框架数量选“2”，然后在“框架的”表格中，填入名称源文件大小 sidenav sidenav.html 160 maincontent content1.html * 此处的“名称”是指框架本身的名称，在框架集中点击链接时，可以指定新页面在指定的框架中打开，这在后面会进一步提到；“源文件”就是框架本身的大小了，而“大小”则是指框架的宽度或高度，这取决于整个框架集的方向选择，如果框架集的方向是“水平”，那么这个大小就是指宽度，如果框架集的方向是“垂直”则是指高度。我们在后面“控制框架的尺寸”一节会详细介绍控制框架尺寸的办法。之后我们得到一段类似这样的代码我的框架这样一个左导航、右内容的基础框架页面就完成了。但先别高兴得太早，还有一些问题等着我们。 (Image: https://pengan1987.github.io/images/pic1/v2-89b878d100dbc815e193ffe7069aa31f_720w.jpg) 解决中文乱码的问题直接由Bluefish生成的代码可能无法正确显示中文，这是因为网页没有标识自己使用的字符集，而浏览器无法正确解读中文字符造成的，一个简单的办法是把下面一行代码复制到标签之后，或标签之前。或者使用Bluefish菜单中选择对话框→常规→Meta，在Meta对话框里可以插入同样的标签，http-equiv选择 content-type，然后content处输入 text/html; charset=UTF-8 。这些代码的含义是告诉浏览器“我的内容类型（content type）是HTML格式的文本（text）文件，我的编码是UTF-8”，这样浏览器就可以正确的解析其中的中文了。 (Image: https://pengan1987.github.io/images/picx/v2-a2a491b62f897fe5c46ec982c5ae2752_720w.jpg) 指定打开链接的框架你可能会注意到，当我们在导航栏中点击一个链接之后，新的页面并没有在我们期望的maincontent框架中打开，而是直接在导航栏所处的sidenav框架中打开了，如何让页面在我们希望的框架中打开呢？如图所示，我们希望右侧的内容随着左边按钮的点击而变化，但左边的导航栏保持不变。 (Image: https://pengan1987.github.io/images/pic1/v2-8c2717cb182be1d348c7dbc8729dbceb_720w.gif) 一个典型的由SeaMonkey Composer创建的链接如下其中“moz-do-not-send”属性仅作用于电子邮件，我们可以不用管它，href属性注明的是该链接指向的页面，而要让链接在指定的框架中打开，我们还需要使用target（目标）属性，设置target="maincontent"即可让链接在我们指定的maincontent框架打开，修改后的代码类似于就可以让链接关联的页面在右侧名为maincontent的框架中被打开了！如果你习惯使用Composer的图形化编辑器也没问题，在链接上点右键→链接属性→高级编辑→属性，即可添加target属性和对应的值。 (Image: https://pengan1987.github.io/images/pic1/v2-fcd021f2a98b9edef97ca7e6159ecc16_720w.jpg) 使用target属性，除了可以指定特定的框架名，还可以指定若干种不同的超链接行为，可以构建更加丰富的交互体验。 target的值作用 _blank 在新的浏览器窗口/标签中打开 _self 在链接所处的框架中打开（默认） _parent 在链接的上一级框架中打开，如果框架本身就是第一级，则用整个浏览器窗口/标签打开 _top 无视链接所处框架的嵌套关系，用整个浏览器窗口/标签打开框架名称用框架名称对应的框架打开控制框架的尺寸在原理上，框架集像表格一样，由若干行、列组成。但就实际的情况而言，以网格状排列框架的情形并不多，大部分情况下单个框架仅用来管理若干水平或者垂直排列的子页面，对于更加复杂的组合，则更常用下一节的多层框架嵌套技巧。我们在前面使用框架实现导航栏一节中已经提到框架带有“尺寸”这一属性，我们这一节来深入讨论下如何控制框架的尺寸，在代码层面上，框架由框架集和其中的多个框架组成，框架集中框架的数量和大小，都由cols和rows属性的值来决定。cols或rows接受三种值：示例值应用于col（列）应用于row（行）数字，单位为像素 160 创建160像素宽的列创建160像素高的行百分数，单位为屏幕的百分比 33% 创建屏幕宽度33%的列创建屏幕高度33%的行 *（星号），屏幕的剩余空间 * 创建占据全部剩余宽度的列创建占据全部剩余高度的行 n*（数字星号），带权重的屏幕剩余空间 *,3* 创建两个列，使用全部剩余宽度，比例为1：3 创建两个行，使用全部剩余高度，比例为1：3 如我们前面框架导航页面中定义的cols属性，160,* 其效果即创建第一列为固定的160px，第二列则占用全部屏幕剩余空间 (Image: https://pengan1987.github.io/images/pica/v2-edd2208e84f0384fef02c0553a1775b8_720w.jpg) 使用多层嵌套的框架如果想将一个页面分割成多个可部分，可以使用多层嵌套的框架。比如我们希望在前述的左右结构的框架页面之上再加入使用框架组织的页眉和页脚，就需要采取如下的布局，使用一个额外的垂直结构的框架将之前建立的水平结构框架包裹起来 (Image: https://pengan1987.github.io/images/pic1/v2-bf9a2fb74e228547beb48b3805080d60_720w.jpg) 我们需要建立一个由三行，每行高度分别是80，*，80的垂直结构框架，再把刚才我们创建的水平结构框架包裹起来，下面是垂直框架对应的代码：再把它和水平框架的代码合并起来我的框架就可以实现既有垂直方向的页眉页脚，又有水平方向的导航和内容的嵌套型框架网页了。 (Image: https://pengan1987.github.io/images/picx/v2-54cd2a342234cd0e9fc0ea08c2f15a95_720w.jpg) 使用框架进行非线性叙事网页框架所提供的局部更新功能让它成为90年代网络艺术（net.art）运动的重要元素。wwwwwwwww.jodi.org (Link: https://wwwwwwwww.jodi.org/)（1995）、Olia Lialina创作的My boyfriend came back from the war (Link: http://www.teleportacia.org/war/) (1996)、Agatha Appears (Link: https://www.c3.hu/collection/agatha/) (1997) 都使用了框架作为交互实现的一部分。在接下来的例子里，我们以一个简单的“开宝箱”游戏来展示使用网页框架完成非线性叙事的一般过程。 (Image: https://pengan1987.github.io/images/picx/v2-55ae52dfa05090f89b8c6aa283f49c90_720w.jpg) 游戏的剧情大概是：你来到一处海盗的藏宝洞，有三个宝箱，分别装着毒药瓶、金条和炸药，你可以查看三个宝箱，但只能选择一个道具触发下一节剧情。制作两个版本的海盗山洞场景，分别对应“宝箱关闭”和“宝箱打开”状态。 (Image: https://pengan1987.github.io/images/picx/v2-a3ad8b39ea68b9b14a90c773821391c2_720w.jpg) 然后使用本系列高级表格布局一章中的“切图仔”手法，对图像进行切图。 (Image: https://pengan1987.github.io/images/picx/v2-219f7d315cf95fbf8c0d6773e93d891f_720w.jpg) 这样我们就得到6张不同的图片，分别对应每个宝箱关闭和打开的状态，然后我们为每个图片分别制作一个仅包含该图片的网页，比如宝箱1关闭状态下的页面代码为 Box1

在这个网页中，图片是可点击的链接，当观众点击该图片后，即在同一框架中打开box1open.html，也就是宝箱打开的状态。然后我们就可以创建一个框架集来管理这些页面，代码使用相对比例来分配各个框架的宽度，以匹配切图的比例，而frameborder="no"选项则会隐藏框架的边框，让网页在观众看来是一张完整的图片 Pirate Cave 左侧的图片是没有frameborder="no"选项的状态，但能看到框架的边框，右边则是框架被隐藏的状态。每个框架可以独立工作，因此每个宝箱都可以独立开启。 (Image: https://pengan1987.github.io/images/picx/v2-8cf7d6227057539b61ce9972dac4620f_720w.jpg) 接下来我们看一下如果我们想继续推进剧情，离开“海盗山洞”应该怎么办。剧情的出口就在盒子打开后的网页里，继续点击被打开后的宝箱，我们希望导向物品被使用后的效果。比如下面的代码是“毒药”宝箱打开后的 box2open.html 页面的代码。 Box2

在上面的代码中，秘密就在标签背后的target里，使用“毒药”道具后的效果在poison.html中，我们希望效果的画面占满全屏而离开“海盗洞穴”框架，因此我们的target就设置为 _top，即整个浏览器页面窗。 (Image: https://pengan1987.github.io/images/picx/v2-b2855ec2e9064f8184f4ed24a77f7ab8_720w.jpg) 通过这个例子，我们可以了解到如何使用HTML框架实现一个具有多重分支叙事的视觉小说的基本结构，通过综合使用不同的框架组合，我们就有可能实现更复杂的多媒体交互。完成后的网页框架游戏示例：https://compumuseum.neocities.org/pirate/ (Link: https://compumuseum.neocities.org/pirate/) 框架作为可变形的“小窗户” 2011年，frameset标签被W3C从HTML5标准中移除，当年在斯图加特梅尔茨学院（Merz Akademie）任教的新媒体艺术家Olia Lialina即和学生们一起组织了名为的线上展览 (Link: https://nm.merz-akademie.de/frameset/)，其中许多作品都涉及到将框架作为某种可以拖动的“小窗户”的实践。 (Image: https://pengan1987.github.io/images/picx/v2-be87a9a3d9b98fc6008733944b23d140_720w.jpg) 图片为作品360° (Link: https://webspace.merz-akademie.de/~jan.wenger/360GRAD/) 这启发了我对框架功能进一步的好奇心，是否我们也可以基于网页框架功能做一个更有交互性的小作品呢？我在草稿上准备以“开门见山”和“拨云见日”两个成语为题，设想了这样一组交互： - 由框架交互操作两扇门的打开和关闭 - 开门之后看到山峰的景观 - 山峰上方可以以框架活动切换晴天和多云两种天气 (Image: https://pengan1987.github.io/images/picx/v2-c43a244da208a18a50fe8f32d7774e10_720w.jpg) 通常，我建议从局部到整体的顺序来制作，我们首先制作天气变化的部分，即阳光和云彩的切换，创建一个空白页面，然后加入一个新的框架集，默认的大小分别是10，* 这样默认情况下太阳是被盖住的，大部分空间是云彩。 (Image: https://pengan1987.github.io/images/pic1/v2-f0c0babda1063d6efc3b66aa94f30a69_720w.jpg) 然后我们就有了一个可以通过调整框架边框改变天气的交互了。 (Image: https://pengan1987.github.io/images/pic1/v2-3f5334a76f84f4050a4887ff14ec235a_720w.jpg) 然后我们再在该页面中添加一个新的框架集，使用框架 → 框架集，新建一个有两行的框架集，上方的框架集设置为“天气”的高度，而下方的框架集则完全留给“山丘”。 (Image: https://pengan1987.github.io/images/picx/v2-bf68b93e19d524d792edb134d0f25acd_720w.jpg) 然后在新的框架集里加入“山丘”页面。 (Image: https://pengan1987.github.io/images/pica/v2-04fecde8259796050695c211ad11ca1b_720w.jpg) 可以进一步调整尺寸的数值和图片的内容，并且使用scrolling="no"来消除框架的滚动条，得到的代码就是 weather 这样“拨云见日”效果就算做好啦！ (Image: https://pengan1987.github.io/images/picx/v2-126da5bf007e01a5759f3bd0d64d3921_720w.jpg) 类似地，我们将整个weather.html作为中间框架的“风景”，在给左右两侧装上“大门”，中间只留10像素的“门缝”，就可以实现“开门见山”了！ (Image: https://pengan1987.github.io/images/picx/v2-280c0643482c5624b91a8de2cc66373f_720w.jpg) 最终实现的效果示例：https://compumuseum.neocities.org/doors/ (Link: https://compumuseum.neocities.org/doors/) (Image: https://pengan1987.github.io/images/pica/v2-0fa65652f9107745ef471d8ef3bac280_720w.jpg) 到这里这个Y2K的网页制作系列就结束了，我们只是用的最少的内嵌CSS样式，在没有JavaScript、更没有后台代码的情况下仍然做到了这么多！在梅尔茨学院2024年的学期项目“向纯HTML致敬”（Tribute to Pure HTML） (Link: https://www.merz-akademie.de/en/projekte/tribute-to-pure-html/)中，也遵循了类似的，甚至更严格的限制。作为“数字媒体的实验考古”课程的一部分，它不仅是一扇通往历史实践的窗口，也是一种媒介反思的方法论：通过重返那些被抛弃、被遗忘的工具和技艺，来重新理解技术如何塑造表达方式，如何赋予或剥夺个体的发声权力。