2.1　第一步：设计页面样式

进入本书范例代码的interactive_fiction目录，并用编辑器打开initial/index.html页面文件，你会发现，里面其实没什么内容。目前的代码只是把impress程序库载入进来了，还没有创建代表故事页面的div元素（本章把这种div元素称为幻灯片）。现在请把程序清单2.1中的粗体代码加入网页文件中。

程序清单2.1　在index.html文件中加入显示故事情节所用的页面

首先请注意没有加粗的那部分样板代码（boilerplate code）。charset="utf-8"这一行其实也可以不写，如果不写的话，即便在网页中只显示简单的英语字符，也会使控制台出现错误信息，而加上这行之后，控制台就不报错了。本书很多范例代码都没写这行，但如果你不喜欢在控制台里看到那些错误的话，那还是写上为好。此外，对于使用屏幕阅读器（screen reader） 的用户来说，加上这个属性，可以使网页更具亲和力 （也就是说，屏幕阅读器能够正确判断出网页内容是用何种语言写成的，从而将其播报给用户），比如，屏幕阅读器可以询问用户是否需要翻译网页内容。还需注意的是，加载JavaScript程序库所用的<script>标签，应该放在body元素的末尾，而非开头。这样做是对的，因为加载JavaScript可能比较耗时，所以应该使网页中的其他内容先显示出来，而像这样把加载语句放到最后，就不会阻塞浏览器对网页的渲染过程了。还有一件事要注意，就是这里没有canvas元素，而且载入impress.js程序库时也不会创建此元素。我们在做这款游戏的时候，不仅会使用JavaScript与CSS3，而且还会用到HTML5，然而，我们却用不到其中与canvas相关的那些功能。

接下来看看创建网页所用的代码。这段程序很简单。外围的div元素有个值为impress的id属性，而内部3个div元素的class属性均为step及slide。这三张幻灯片中的文字会告诉玩家如何在本游戏的页面之间切换，但是，我们现在还没有写好相关的CSS代码，所以各个幻灯片之间还无法切换。网页代码中载入了一个名为main.css的文件，而这个文件当前还没建立。需要创建该文件，并把程序清单2.2中的代码加入其中。

程序清单2.2　main.css中实现幻灯片切换功能及修改网页风格所用的代码

这段代码主要做了两件事。第一件事情就是通过CSS重置来重设网页样式。网上能够找到很多执行CSS重置的范例代码，有些长达数百行。由于各种浏览器在渲染元素时均会使用其各自的那套默认样式，所以才需要执行CSS重置。我们这样做就可以把各种浏览器的样式尽可能统一起来了，在这个基础上设计，可使网页风格较为一致，而不会在浏览器之间出现太大差异。

从body这一行往下，才真正开始定义元素的样式。我们定义了一种放射渐变色来渲染body标签：网页中心是蓝色，在向边缘发散的过程中，逐渐变为深灰色。定义渐变色时采用了好几种不同的写法，这是因为各种浏览器在实现较新的CSS功能时，使用了互不相同的方式。接下来在定义与opacity特性相关的样式时，也是这么做的。通过这两套样式，我们把当前活动的页面设为可见，把其他页面隐藏起来，并且为页面跳转的过程添加1秒钟的切换效果。最后，我们为slide元素 设定一些标准样式，令其可以在蓝黑背景中凸现出来。

提示

要是想再多学一些CSS3样式的话，可以花点时间逛逛这个网站：http://css3please.com/。

用浏览器打开index.html，如果一切顺利，浏览器就会呈现如图2.1这样的画面。

图2.1　设计好的幻灯片样式

然后，我们要增加一段简单的故事情节，并且实现页面跳转功能，使这本“游戏书”看起来更像回事。