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 设计好的幻灯片样式
然后,我们要增加一段简单的故事情节,并且实现页面跳转功能,使这本“游戏书”看起来更像回事。