《HTML5 跨平台游戏设计：从入门到超人气游戏开发实战》 - 台灣·大書城 - 白乃远、吴苑瑜、曾奕霖 - 清华大学出版社

	登入帳戶　 \|　訂單查詢　 \|　購物車/收銀台(0)　\|　在線留言板　 \|　付款方式　 \|　聯絡我們　 \|　運費計算　 \|　幫助中心　\|　加入書簽
		會員登入新用戶註冊

HOME

新書上架

暢銷書架

好書推介

2023年度TOP

香港／國際用戶

最新/最熱/最齊全的簡體書網

品種：超過100萬種書，正品正价，放心網購，悭钱省心

送貨：速遞 / 物流，時效：出貨後2-4日

『簡體書』HTML5 跨平台游戏设计：从入门到超人气游戏开发实战

書城自編碼： 2789116
分類：簡體書→大陸圖書→計算機/網絡→程序設計
作者：白乃远、吴苑瑜、曾奕霖
國際書號(ISBN)： 9787302430025
出版社：清华大学出版社
出版日期： 2016-03-01
版次： 1 印次： 1
頁數/字數： 312/525000
書度/開本： 16开釘裝：平装

售價：NT$ 518

我要買件

** 我創建的書架 **
未登入.

新書推薦：

《偿还：债务与财富的阴暗面》
售價：NT$ 347.0

《清华大学藏战国竹简校释（壹）：《命训》诸篇》
售價：NT$ 408.0

《封建社会农民战争问题导论（光启文库）》
售價：NT$ 296.0

《虚弱的反攻：开禧北伐》
售價：NT$ 429.0

《泰山：一种中国信仰专论（法国汉学经典译丛）》
售價：NT$ 380.0

《花外集斠箋》
售價：NT$ 704.0

《有兽焉.8 》
售價：NT$ 305.0

《大学问·明清经济史讲稿》
售價：NT$ 330.0

內容簡介：

内容简介本书由浅入深地从HTML5、CSS3和JavaScript三大基础架构开始讲解，引导读者进入游戏开发的世界。书中除了基本语法介绍，每个学习主题都设计有情境与游戏范例，有利于读者更快了解游戏开发精髓。在进阶章节中，先以一个结合个人履历互动的游戏概念作为创新应用的范例，再引入其他开源游戏引擎与HTML5衔接简化游戏制作的过程教你开发热门的游戏，以及将自己设计开发的游戏零成本发布、行销的技巧。

本书清晰的教学内容、经典的游戏范例、大量的应用素材以及完整的实战教学，可为你增强开发HTML5游戏的竞争力，让你发挥无限的创意。

本书适合于HTML5游戏开发入门者及想转型学习游戏开发的读者阅读，也适合作为HTML5游戏开发的教材和参考书。

目录

第1章游戏设计与HTML5
1.1 HTML5简介................................... 2
HTML是什么.................................... 2
HTML的缺陷.................................... 3
HTML5的发展................................... 3
HTML5全新体验................................. 4
HTML5特质.................................... 5
HTML5与游戏设计............................... 6
1.2 HTML5开发环境的建立............................ 6
编辑工具Notepad ............................. 7
安装Notepad ................................ 9
1.3 HTML5测试与调试.............................. 14
安装Firefox浏览器............................ 15
安装Selenium IDE............................ 16
应用Selenium IDE............................ 18
1.4 范例：HelloWorld............................ 21
范例说明..................................... 21
重点技术..................................... 21
代码段....................................... 23
程序代码解析.................................. 23
第2章 HTML5基础
2.1 结构化元素................................... 26
什么是结构化元素............................... 26
结构化元素图解................................ 26
实际应用..................................... 28
2.2 内容标记方法................................. 31
绘图元素..................................... 31
分组元素..................................... 31
文字层级元素.................................. 32
交互式元素................................... 34
2.3 多媒体应用................................... 35
audio.................................... 35
video.................................... 36
source................................... 37
track.................................... 37
补充说明：WebVTT格式.......................... 38
embed.................................... 38
2.4 Web应用程序................................. 39
datalist................................. 39
keygen................................... 39
output................................... 40
meter.................................... 41
progress 41
第3章 CSS3应用
3.1 CSS基础知识................................. 44
CSS是什么.................................... 44
CSS3闪亮登场................................. 44
CSS基本语句.................................. 45
引用CSS..................................... 47
实战CSS..................................... 49
3.2 文字与图片................................... 49
文字样式..................................... 50
图片........................................ 55
盒子模式box model.......................... 58
3.3 表格与窗体................................... 61
表格........................................ 61
窗体........................................ 63
第4章 CSS3网页小游戏
4.1 制作游戏场景................................. 67
游戏策划..................................... 67
HTML结构.................................... 68
CSS样式..................................... 70
4.2 制作地鼠和死亡动画............................ 73
地鼠布局方式.................................. 73
地鼠死亡动画的触发原理.......................... 73
动画属性Animation............................ 74
CSS样式..................................... 74
4.3 制作得分动画................................. 83
得分动画制作原理............................... 83
渐变属性Transition........................... 83
CSS样式..................................... 84
4.4 制作关卡时间条与游戏结束画面..................... 85
关卡时间条动画原理............................. 85
CSS样式..................................... 86
第5章常用的触发事件与组件
5.1 鼠标单击事件监听.............................. 90
JavaScript提要.............................. 90
鼠标单击事件.................................. 92
5.2 键盘按键事件监听.............................. 96
按下一个键onKeyDown........................ 96
按住（keyPress）与放开（KeyUp）................ 98
5.3 网页锚点跳转................................. 98
认识URL地址格式............................... 98
认识hash值................................... 99
5.4 浏览器检测.................................. 100
认识navigator.............................. 100
实践一下navigator........................... 102
5.5 DOM控制................................... 102
认识getElementById......................... 102
认识eval语句.............................. 104
实现一个加减乘除计算器......................... 105
5.6 分辨率检测.................................. 107
检测屏幕数值................................. 107
自动转换电脑版与移动版版面...................... 108
5.7 发送E-Mail客户回复系统.................... 109
使用Chrome浏览器启动mailto................... 109
使用JavaScript启动E-Mail.................... 109
5.8 当前时间日期................................ 112
日期时间检测计时器......................... 112
日期对象Date................................ 112
实现时间显示与计时器........................... 112
程序的执行效率............................... 113
第6章多媒体播放
6.1 Canvas画布基础绘图.......................... 116
Canvas语句的基础............................ 116
画布样版.................................... 116
绘制图形.................................... 117
控制图形的变形............................... 122
6.2 Canvas动画应用............................. 126
函数setInterval.......................... 126
函数requestAnimationFrame................ 128
6.3 多媒体影音播放............................... 131
函数drawImage.............................. 131
播放器尺寸的控制.............................. 133
6.4 范例：动画小剧场............................. 135
范例画面.................................... 135
角色表（sprite）原理......................... 136
程序剖析.................................... 136
第7章 Web应用
7.1 基础介绍................................... 141
AJAX...................................... 141
JSON...................................... 144
7.2 范例：Web服务器实际演练....................... 148
建立Web服务器............................... 148
AJAX传输范例................................ 152
JSON实际演练................................ 155
第8章网页数据存储
8.1 Cookie和Session........................... 158
Stateless和Stateful........................ 158
Cookies简介................................ 159
Session简介................................ 160
8.2 Web Storage.............................. 161
Web Storage的优势........................... 161
Web Storage的种类........................... 161
8.3 范例：窗体切换............................... 165
第9章学习使用jQuery
9.1 jQuery事件与函数............................ 169
开始使用jQuery.............................. 169
认识jQuery语句.............................. 170
jQuery声明................................. 170
jQuery选取指令.............................. 171
jQuery函数................................. 174
jQuery事件处理.............................. 174
9.2 标签控制................................... 177
属性Attributes和样式CSS控制.............. 177
DOM操作.................................... 179
动画效果.................................... 181
连续使用函数................................. 186
9.3 开源模块的应用............................... 188
认识jQuery Plugin.......................... 188
引用jQuery Plugin.......................... 188
创建jQuery Plugin.......................... 189
应用jQuery Plugin.......................... 190
9.4 范例：拉霸游戏............................... 191
jQuery Plugin资源.......................... 191
拉霸游戏.................................... 193
第10章趣味交互式个人履历网站
10.1 确定履历呈现的内容单元....................... 198
角色设置................................... 198
场景设置................................... 198
美术风格................................... 201
故事脚本................................... 202
系统规划................................... 205
10.2 建立视差滚动网站场景......................... 207
初始设置................................... 208
游戏内容................................... 208
10.3 制作角色外观与常态动画....................... 213
显示环境设置................................ 213
天空背景设置................................ 214
角色设置................................... 215
地面背景设置................................ 224
标题云与文字内容............................. 225
10.4 制作场景对象动画事件......................... 227
视差滚动................................... 227
触发动画................................... 229
第11章认识HTML5游戏引擎
11.1 gameQuery............................... 236
第一次接触gameQuery......................... 236
快速浏览gameQuery函数....................... 237
11.2 Quintus................................. 239
第一次接触Quintus........................... 239
范例快速浏览................................ 240
11.3 Melonjs................................. 245
第一次接触Melonjs........................... 245
范例快速浏览................................ 247
11.4 LimeJS.................................. 250
第一次接触LimeJS............................ 250
范例快速浏览................................ 253
11.5 Cocos2D................................. 256
第一次接触Cocos2D........................... 256
官方范例快速浏览............................. 257
第12章游戏制作2D游戏地图
12.1 下载与安装Tiled Map Editor................. 261
12.2 2D免费游戏场景资源介绍....................... 262
OpenGameArt.............................. 262
Reiner''s Tilesets........................ 264
Game-icons.net........................... 264
其他免费资源................................ 265
12.3 绘制2D游戏场景与对象........................ 265
绘制场景................................... 265
绘制对象................................... 269
12.4 编辑场景对象的属性.......................... 270
12.5 实机测试.................................. 271
第13章游戏制作仓库番推宝箱
13.1 Quintus环境建立........................... 274
13.2 2D游戏场景建设............................. 275
13.3 人物操控与Sheet动画......................... 279
13.4 2D碰撞系统................................ 285
13.5 游戏关卡建立............................... 287
13.6 加载多媒体资源.............................. 289
13.7 实机测试.................................. 290
第14章游戏制作 Facebook网络应用
14.1 Facebook API下载与权限申请.................. 293
开发人员注册................................ 293
添加应用程序................................ 294
获取API................................... 296
14.2 Facebook会员登录按钮....................... 298
JavaScript部分............................ 298
HTML部分.................................. 302
14.3 Facebook发帖分享.......................... 302
JavaScript部分............................ 302
HTML 部分.................................. 305
第15章 HTML5游戏的上线分享
15.1 Google云端存储架设游戏网站................... 307
Google云端存储架站的限制..................... 307
Google云端存储架设网站的步骤.................. 307
15.2 使用二维码分享网址.......................... 310
二维码..................................... 311
加入桌面 311

內容試閱：

第3章 CSS3应用

CSS是负责网页外观的艺术总监，凡是网页里的文字、图片、表格、窗体等组件，通通得听它的号令进行排版。虽然HTML里也有关于外观设计的标签，但远远不及CSS可以做到的精准定位、多层次的颜色、框线变化，甚至还能更改鼠标光标的形状，以及做出类似动画般梦幻的过场效果，带给我们更缤纷的在线体验。
在本章中将学到的重点内容包括：

认识CSS基础语句
使用CSS设计文字与图片
使用CSS美化表格与窗体

3.1 CSS基础知识
CSS与HTML是相辅相成的网页技术，但是CSS语言在应用上却与HTML略有不同。接下来要先跟大家介绍CSS的语句构造以及引用方式，待认识了CSS的基础之后，才能灵活发挥CSS提供的丰富样式。
CSS是什么
CSS全名是Cascading Style Sheets，是一种样式表单（Stylesheet）语言。CSS诞生的理由是为了替HTML这种标记语言（markup language）处理页面外观与页面布局的部分，凡是字体、颜色、边距、定位、背景等都有专用的样式可以设置。
虽然在前几代的HTML里就已经出现了可以控制外观的标签，但除了功能比起CSS简单许多外，每个浏览器却不一定都支持，这让开发人员伤透脑筋。因此，这时候才出现专注于设计区块的网页设计语言，于是催化了CSS的诞生。
CSS中的样式不仅得到所有浏览器的支持，开发人员在设计网站时可以更清楚地将数据与外观的程序设计部分分开，也就是让HTML文件仅保存文件结构，而CSS专心负责网页的外观显示，它们各司其职让整个程序的维护更加容易。
CSS3闪亮登场
随着HTML升级到第5版，当然CSS3也不甘落后地推出了更加丰富的新样式，例如盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等。灵活应用CSS3甚至能直接设计出各种好玩有趣的小游戏，例如打鳄鱼这种过去要用Flash处理动画才能做出的游戏，现在完全只要靠HTML和CSS就能完成；甚至更高级一点的2D射击游戏，也可以靠CCS3就能够完全实现，是不是非常神奇呀！如图3-1所示。

图3-1 用CSS就可以完全实现的游戏
CSS基本语句
CSS虽然与HTML的语句结构不太一样，但是毕竟两个是相辅相成的好朋友，因此许多属性的相似度颇高，在学习时会有种似曾相识的感觉，甚至有些在经营个人博客的朋友，早就已经使用了简单的CSS来打造个人风格的网页。接下来要详细介绍CSS的基本语句结构，由于CSS是游戏设计非常重要的一个环节，学习绝对不能马虎唷！

基本声明
CSS语句是由选择器、属性和设置值三个元素所组成。声明CSS的基本语句如下：
选择器 {
属性：设置值；
...
}

选择器

选择器的功能是用于指定在HTML程序中遇到何种标签时，就套用括号内的属性与设置。选择器主要有三种类型，分别是Type、Class和ID。Type是HTML里会使用到的选择器标签，例如body、header等；Class和ID则是由开发人员自行定义的选择器。

属性

属性与设置值会成对地出现，属性可能是背景颜色（background-color）、字体大小（font-size）等需要被设置的元素。一个选择器里面可以有多个属性，属性之间要用分号;隔开。

设置值

设置值则是决定属性呈现的方式，例如可以将背景颜色（background-color）的设置值指定为红色（red）。
套用背景颜色所使用的CCS语句如下所示，可以从这条语句中找出选择器、属性和设置值吗？
body {
background-color: #FFFF00;
}

body：Type选择器，当在html里遇到body标签时套用这个样式。
background-color：选用背景颜色的属性。
#FFFF00：将背景颜色指定为这个颜色代码。

集体声明
如果有多个标签要共享同样的样式，就可以使用集体声明的方式让程序变得更简洁。举例来说，若要将h1、h2和h3内的文字设置为红色，可以这样进行集体声明：
h1,h2,h3 {
color:red;
}

Class声明
除了上述的Type声明方式，也就是除了用HTML内原有的标签来声明之外，也可以使用自行声明的名词来设置样式，Class声明就是其中的一种。Class声明的基本结构如下：
.css 文件
.myStyle {
Color: red；
}
与 type 声明不同的是，在 class 名称前面必须加上一个点.作为标识，除此之外，要套用到HTML文件里面的方式也有所不同，必须在HTML标签内加上class属性并指定我们所命名的选择器名称，方法如下：
.html 文件
p class="myStyle"
黄色的字
p

type结合class声明
至于还有一种type结合class声明的方式，适用于需要在不同HTML标签中使用同种名称的class选择器，但要给予不同的设置。举例来说，声明一个class为myTextColor代表专门用来处理文字颜色，但是希望在b标签里和i标签中，能够显示不同的文字颜色。这时候可以在css文件中这样声明：
.css 文件
b.myTextColor {
Color: red；
}
i.myTextColor {
Color: yellow；
}
回到HTML文件中就可以如下进行应用，虽然class都指定为myTextColor，但在不同的标签下显示结果也不同。
.html 文件
b class=" myTextColor " 粗体是红色 b
i class=" myTextColor " 粗体是黄色 i

ID声明
ID声明和Class声明同样是自行替选择器命名的方式，但是ID选择器在HTML文件中只能出现一次，主要用来配合Javascript中的GetElementByID函数，而Class就没有使用次数的限制。使用ID声明时，要在选择器名称前面加上井字符号#作为标识。
.css 文件
#myTextColor {
Color: red；
}
引用CSS
要在网页中显示CSS样式表单的设置，必须从HTML文件中引用CSS。一般常见的引用方式共有三种，分别是内联（Inline）、嵌入（Embed）以及外部链接（External link）。一般在设计游戏的时候都采用外部链接方式，这样比较方便进行程序代码的整理与维护。

内联样式表单
内联样式表单是直接在HTML标签中加入style属性进行设置的，同样以设置body的背景色为黄色作为示范，引用语句如下：
body style = background-color: #FFFF00;
p 黄色背景 p
body

嵌入样式表单
嵌入样式表单同样是直接在HTML文件中引用CSS，但这次是以把style当作标签进行设置，且style通常要放在head标签内。引用语句如下：
head
style type=textcss
body {background-color: #FFFF00;}
style
head
body
p 黄色背景 p
body

外部样式表单
外部样式表单是将CSS独立保存为一个扩展名为.css的文件，然后在HTML文件中通过一行指令指定CSS文件的存放位置，加载时直接从外部将内容导入。这样做的好处是可以将网页外观的CSS与网页结构HTML分开处理，有益于程序代码的管理。因此，实际的做法是将CSS文件与HTML文件存放在同一个文件夹中，然后在HTML文件的head标签内加入link来指定从外部加载CSS文件。引用语句如下：
link rel=stylesheet type=textcss
href=style.css
这段语句中的href属性是用来指定CSS文件存放的路径，因为我们将CSS文件取名为style.css，并与HTML文件存放在同一个文件夹下，所以直接引用style.css即可。最后，这行语句必须放在HTML文件中的head标签内，所以完整的语句如下：
head
link rel=stylesheet type=textcss href=style.css
head
body
p 黄色背景 p
body
通过引用外部样式表单的方式，可以同时对多个网页进行一致的外观管理，只要修改单个CSS文件就可以同步更改所有链接到此CSS文件的HTML网页，在维护上相当方便。
实战CSS
接下来，以一个实际范例来呈现HTML文件引用外部CSS文件达到控制网页外观的方式。可以从本书下载文件的\范例\ch03\3-1文件夹中使用Notepad 打开范例，从范例中发现存在两个文件，分别是HTML文件test.html和CSS文件style.css。
在HTML文件中，通过link导入外部的CSS文件style.css，除此之外不在这里使用任何的外观标签。
\范例\ch03\3-1\test.html
html
head
title 范例 title
link rel="stylesheet" type="textcss"
href="style.css"
head
body
h1 样式表单 h1
body
html
在CSS文件中使用type声明方式，指定HTML文件内body标签内对象的背景颜色为黄色。
\范例\ch03\3-1\style.css
body {
background-color: yellow;
}
最后用浏览器打开test.html，将会看到一个具有黄色背景的页面。恭喜！你已经完成了自己的第一个样式表单了。
3.2 文字与图片
文字与图片是构成游戏画面最基础、也是最重要的元素，游戏开发人员最常遇到的问题就是虽然美术人员已经将游戏版面规划完善，但因为程序员对CSS不熟悉而导致无法排出与规划相同的版面，这样就让整个游戏外观大打折扣了。因此，在本节中我们就先来谈谈在CSS中常见的文字与图片样式，才有办法在后面的游戏画面布局时做到精准的排版。
文字样式
在文字的CSS样式中又可区分为两大分类。其一是字体（font），主要用于规定文字的外观，例如字体、大小、粗体、斜体等等；其二是文字（text），主要用于文字的排版，例如对齐、字距、行距等等。
字体（font）
字体主要用于规定文字的外观，常见的属性包括：

font-family（字体）
font-style（斜体）
font-weight（粗体）
font-size（大小）

{font-family}
属性font-family是用来指定字体的属性，例如可以指定字体为Arial、Times New Roman或黑体等。之所以会称为family是因为可以设置一组字体列表，当游戏加载的时候会按照这组列表依次选用字体，当目前载体没有安装第一顺位的字体时，就会自动选用第二顺位的字体显示。实际使用方式请参考以下范例。
在HTML文件中使用link导入CSS文件，并指定text1使用font1样式，text2使用font2样式。
\范例\ch03\3-2-1_font-family\test.html
html
head
title 范例 title
link rel="stylesheet" type="textcss"
href="style.css"
head
body
p class="font1"text1p
p class="font2"text2p
body
html
声明font1样式中的font-family属性包括impact和arial，而font2样式包括不存在的字体xx以及arial。
\范例\ch03\3-2-1_font-family\style.css
.font1 {font-family: impact, arial;}
.font2 {font-family: xx, arial;}
从显示结果可以发现，text1直接以第一顺位的impact字体显示；而text2因为第一顺位的字体不存在，所以选用第二顺位的arial字体。如图3-2所示。

图3-2 设置文字的字体

{font-style}
属性font-style用来决定字体要以normal（正常）、italic（斜体）或oblique（斜体）显示，如图3-3所示，请参考以下范例。

图3-3 设置字体的字样
\范例\ch03\3-2-2_font-style\style.css
.font1 {font-style: italic;}
.font2 {font-style: oblique;}
注：由于HTML文件的内容都相同，所以不再重复说明。

{font-weight}
属性font-weight用来指定字体显示的粗细，可以选择normal（正常）或bold（粗体），也可以用100到900之间的数值表示，请参考以下范例。

图3-4 设置字体的粗细
\范例\ch03\3-2-3_font-weight\style.css
.font1 {font-weight: bold;}
.font2 {font-weight: 500;}

{font-size}
属性font-size用来指定字体显示的大小，可以通过多种不同的单位，例如像素px、百分比%等，如图3-5所示。请参考以下范例。

图3-5 设置字体显示的大小
\范例\ch03\3-2-4_font-size\style.css、
.font1 {font-size: 9px;}
.font2 {font-size: 150%;}

{font}
属性font可用于简化字体声明的程序行数，例如原本声明了四种font属性样式，通过font就可以缩写成一行指令即可完成。但需要特别注意的是，font后面所使用的属性必须按照font-style、font-variant、font-weight、font-size、font-family的顺序排列，属性之间以空格分隔，若无需设置的属性可以跳过。请参考以下范例指令：
\范例\ch03\3-2-5_font\test.html
.font1 {
font-style: italic; font-weight: bold; font-size: 16px; font-family:
impact;
}
使用font缩写：
\范例\ch03\3-2-5_font\style.html
.font1 {
font: italic bold 16px impact;
}
文字（text）
文字主要用于文字的排列设置，例如方向、对齐方式、字距、行距等，常用的属性包括：

Direction（文字方向）
letter-spacing（字母间距）
line-height（行高）
text-align（对齐方式）
text-decoration（划线方式）
text-indent（第一行空格）
text-transform（字母大小写）
word-spacing（单字间距）

{direction}
属性direction用来决定文字的方向，可设置从左开始阅读LTR与从右开始阅读RLT两个值。请参考以下范例。
\范例\ch03\3-2-6_direction\style.css
.font1 {direction:LTR;}
.font2 {direction:RTL;}

{letter-spacing}
属性letter-spacing用来决定字符与字符之间的距离（字距），单位使用px，值设置越大则字母与字母间的距离越大，如图3-6所示。请参考以下范例。

图3-6 设置字符之间的间距
\范例\ch03\3-2-7_letter-spacing\style.css
.font1 {letter-spacing: 1px;}
.font2 {letter-spacing: 8px;}

line-height
属性line-height用来决定行与行之间的距离（行距），单位使用px，值设置越大则行与行之间的距离越大，如图3-7所示。请参考以下范例，使用行距设置让两行的字距离近一点。

图3-7 设置行间距
\范例\ch03\3-2-8_line-height\style.css
.font1 {line-height: 12px;}

text-align
属性text-align用来决定文字的对齐方式，包括靠左对齐（left）、靠右对齐（right）、居中对齐（center）以及左右对齐（justify）。请参考以下范例。
\范例\ch03\3-2-9_text-align\style.css
.font1 {text-align: right;}
.font2 {text-align: center;}

text-decoration
属性text-decoration用来决定文字上的划线方式，包括文字下划线（underline）、文字上划线（overline）、文字中间划线（line-through）。如图3-8所示，请参考以下范例。

图3-8 设置文字的划线方式
\范例\ch03\3-2-10_text-decoration\style.css
.font1 {text-decoration: overline;}
.font2 {text-decoration: line-through;}

text-indent
属性text-indent用来决定第一行的第一个文字前面要保留多少空白，单位可使用px或%。如图3-9所示。请参考以下范例。

图3-9 设置文字前面的留白
\范例\ch03\3-2-11_text-indent\style.css
.font1 {text-indent: 12px;}
.font2 {text-indent: 0%;}

text-transform
属性text-transform用来决定一串字符的大小写显示方式，包括第一个字母大写（capitalize）、所有字母大写（uppercase）、所有字母小写（lowercase）。如图3-10所示，请参考以下范例。

图3-10 设置字母的大小写显示方式
\范例\ch03\3-2-12_text-transform\style.css
.font1 {text-transform: capitalize;}
.font2 {text-transform: uppercase;}

word-spacing
属性word-spacing用来设置字与字之间的距离，与letter-spacing不同，word-spacing是以英文的单词为基本单位作为距离的。如图3-11所示，请参考以下范例。

图3-11 设置英文单词间的间距
\范例\ch03\3-2-13_word-spacing\style.css
.font1 {word-spacing: 12px;}
.font2 {word-spacing: 0px;}
图片
在图片的单元中，我们重点要介绍的是如何改变游戏的前景与背景，以及在CSS中一个重要的盒子模式（box
model）布局概念，掌握这些重要技巧，对于游戏版面布局有着举足轻重的影响。
前景与背景
前景属性通常应用于指定文字显示的颜色，而背景属性可以决定游戏图片或是颜色要以何种方式布局在游戏画面的最底层。

Color（前景颜色）
background-color（背景颜色）
background-image（背景图案）
background-repeat（背景图案重复）
background-attachment（背景图案滚动）
background-position（背景图案位置）

{color}
属性color用于指定元素的前景颜色。颜色的表示方式共有三种，分别是：

16进制值：每码范围从0~9，以及A~F，例如#ff0000。
RGB值：RGB 3码表示，范围介于0~255，例如RGB255, 0, 0。
颜色名称：例如red。

\范例\ch03\3-2-14_color\style.css
.font1 {color: #ff0000;}
.font2 {color: rgb255,0,0;}

background-color
属性background-color可以通过上色的方式指定元素的背景色。例如以下范例，将body与p标签填上不同的背景色。
\范例\ch03\3-2-15_background-color\style.css
body {background-color: #FF0000;}
p {background-color: green;}

background-image
属性background-image可以通过加入图像文件的方式指定元素的背景。例如以下范例，使用球的图像作为整个body背景，使用url指定图像文件的存放路径。设置完成之后会发现画面将以球的图像重复填满整个背景，那是因为我们准备的图像尺寸远比画面显示的长宽小很多，因此系统自动采用重复填满效果帮忙补足空白的部分。
\范例\ch03\ 3-2-16_background-image\style.css
body {background-image:
url"ball.png";}

background-repeat
针对backgroud-image属性，如果我们不想使用重复填满的效果，可以加入属性background-repeat来指定背景图案的重复方式，包括不重复no-repeat、在x轴重复repeat-x、在y轴重复repeat-y。请参考以下范例。
\范例\ch03\3-2-17_background-repeat\style.css
body { background-image:
url"ball.png";
background-repeat: no-repeat}

background-attachment
属性background-attachment可以决定当画面滚动时，背景图案要跟着画面滚动scroll或不跟着画面滚动fixed。请参考以下范例，当此属性设置为fixed后，无论画面如何滚动，球都会显示在页面的固定位置上。
\范例\ch03\3-2-18_background-attachment\style.css
body {
background-image: url"ball.png";
background-repeat: no-repeat;
background-attachment: fixed;
}
（注：练习此范例请记得将浏览器拉到较小显示范围，才能看见滚动条滚动的效果）

background-position
属性background-position可以指定图案作为背景所在的坐标，通过此属性可以精准定位背景图案的位置，共有三种指定方式。

文字：选择对齐x轴与y轴的left、right和center。

\范例\ch03\3-2-19_background-positionstyle.css
body {
background-image: url"ball.png";
background-repeat: no-repeat;
background-position: center center;
}

百分比：选择放置x轴与y轴的比例位置。

\范例\ch03\3-2-19_background-position\style1.css
body {
background-image: url"ball.png";
background-repeat: no-repeat;
background-position: 50% 50%;
}

坐标：选择对齐x轴与y轴的坐标位置。

\范例\ch03\3-2-19_background-position\style2.css
body {
background-image: url"ball.png";
background-repeat: no-repeat;
background-position: 640px 360px;
}

{background}
属性background则是上述所有与背景有关的属性的缩写用法。可以用一行指令代表所有对background的设置，安排属性时应按照background-color、background-image、background-repeat、background-attachment、background-position的顺序排列，属性与属性之间保持空格，若不需设置的属性则可以直接忽略不写。例如我们可以将\范例\ch03\3-2-19原有的三行指令缩短成一行，如下所示。
\范例\ch03\3-2-20_background\style.css
body {
background: url"ball.png" no-repeat center center;
}
盒子模式box model
过去要在网页画面上布局元素是采用表格排版的方式，通过设置不同大小的表格、边框，以表格作为网页排版的定位基准。但是改用CSS排版之后，这些大小不同的表格全部置换成盒子（box），在画面中摆入不同大小的盒子作为图文内容的表达框架。使用CSS的盒子来排版画面，具备程序代码简洁、兼容更多浏览器等优点，使盒子模式成为CSS中一个重要的必学概念。
盒子模式被用来描述一个显示图文的表达框架，为了能够更好地操控框架的属性，又可将一个盒子细分为边界（margin）、边框（border）、留白（padding）和内容（content）等四个部分，由于其一层一层的包覆方式，得到了盒子模式这个名称。如图3-12所示。

图3-12 盒子模式

{Margin}
属性Margin在边框之外，也是盒子最外层的属性，主要用来决定盒子与周围其他元素的距离。由于盒子共有四个边，所以可以分别决定上、下、左、右的距离，设置的属性为：

margin-top（上边界）
margin-right（右边界）
margin-bottom（下边界）
margin-left（左边界）

我们可以通过三种方式来设置边界，分别是像素、百分比和auto，从范例来看看实际设置的方法。
\范例\ch03\3-2-21_margin\style.css
.font1 {
margin-top:10px;
margin-left:10%;
margin-right:10px;
margin-bottom:auto;
border: 1px solid 000000
}
也可以使用缩写的方式，一次指定四个边的距离，但设置时一定要注意遵循上、右、下、左的顺时针顺序依次提供数值。
\范例\ch03\3-2-21_margin\style.css
.font2 {
margin: 10px 10px auto 10%;
border: 1px solid 000000
}

{Border}
属性border可以控制盒子的边框显示效果，例如边框样式、宽度、颜色等等，常见的属性包括以下几种。

border-style：style可以决定外框的样式，例如实线（solid）、虚线（dashed）、双线（double）、点线（dotted）、凹线（groove）、凸线（ridge）、嵌入线（inset）、浮出线（outset）。
border-width：可以决定外框的粗细，可用数字（px）表示，或是用文字thin（薄）、medium（中等）与thick（厚）来表示。
border-color：可以决定外框的颜色，可通过16进制数、RGB编码和文字来设置。
border-top-，border-left-，border-bottom-，border-right-：在上述属性前加入这些前导字，可以分别设置上下左右边框的外观。

\范例\ch03\3-2-22_border\style.css
.font1 {
border-style:double;
border-width:6px;
border-color:red;
border-top-color:green;
}

border：使用属性border可以将多行border设置缩减成一行，但仅限于四个边都用相同的设置时使用。

\范例\ch03\3-2-22_border\style.css
.font2 {
border: double red 6px
}

{Padding}
属性padding可以控制内容与边框之间的距离，也就是内容四周的留白部分，因此同样有上下左右四边可以设置，设置的单位可以使用长度（px）、百分比%和auto。

padding-top（上）
padding-right（右）
padding-bottom（下）
padding-left（左）

\范例\ch03\3-2-23_padding\style.css
.font1 {
padding-top:10px;
padding-left:10%;
padding-right:10px;
padding-bottom:10%;
border: 1px solid 000000;
}
也可以使用缩写的方式，一次指定四个边的距离，但设置时一定要注意遵循上、右、下、左的顺时针顺序依次提供数值。
\范例\ch03\3-2-23_padding\style.css
.font2 {
padding: 10px 10px 10% 10%;
border: 1px solid 000000;
}
3.3 表格与窗体
学会了CSS的文字与图片配置方式后，我们接着可以尝试把这些技巧应用在美化表格与窗体上。通过从CSS文件中的选择器选择HTML中表格与窗体所使用的标签，就可以在不改动HTML结构的情况下修改外观。
表格

HTML5表格结构
在纯粹只有HTML5语句的时候，可以简单地使用table、th、tr与td来构造表格的结构，我们先来复习一下HTML5的表格标签是如何使用的。如图3-13所示。

图3-13 HTML5的表格结构

table标签：表示整个表格的范围。
tr标签：表示表格中一行的单元格。
th标签：表示表格中一列的单元格。
td标签：表示表格中一个基本的单元格。

上面那样的成绩表格可以通过以下的HTML结构来实现。
\范例\ch03\3-3-1_table\test.html
table border="1"
tr
th 科目 th
th 小明 th
th 小花 th
tr
tr
td 语文 td
td 55分 td
td100分 td
tr
tr
td 英语 td
td30分 td
td92分 td
tr
tr
td 数学 td
td 99分 td
td10分 td
tr
table

加入CSS控制表格
运用我们在前面所学过的图文属性，为表格加上不同的装扮。通过CSS选择器标记表格会应用到的标签table、th、td和tr，分别给予不同的参数设置。
\范例\ch03\3-3-2_CSStable\style.css
table{
width:50%;
}
table,th,td{
border-collapse:collapse;
border: 2px solid black;
}
th{
height:50px;
color:red;
}
td{
text-align:right;
color:gray;
}
tr{
border-bottom:5px solid #0000FF;
}

table{width:50%;}

表格 {宽度: 50% 半版;}

table, th, td{border-collapse:collapse;
border: 2px solid black;}

表格, 行, 列 {设置表格: 非双线框线; 表格框线粗细: 2 像素颜色: 黑色;}

th{height: 50px color:red;}

定义标题 {表格高度:50 像素颜色: 红色;}

td{text-align: right; color: gray;}

定义行 {文字: 靠右
颜色: 灰色;}

tr{border-bottom: 5px solid
#0000FF;}

定义列 {下边框线粗细:5 像素颜色: 蓝色;}
在不改动HTML文件的情况下，就完成了表格的外观布置。如图3-14所示。

图3-14 在不改动HTML文件的情况下通过CSS的选择器改变表格外观
窗体
窗体是网页中频繁使用的互动元素，主要担任搜集用户信息并存储至后台数据库的角色。在窗体中会使用到的HTML标签包括form、input、select和textarea等，现在先来复习一下这些HTML窗体标签。

form标签：标记窗体的结构范围。
input标签：调用一个输入字段。
select标签：调用一个下拉式选单字段。
textarea标签：调用一个多行输入的文字栏。

接下来以一个简易的窗体范例，来练习如何建立输入会员资料的窗体。
\范例\ch03\3-3-3_form\test.html
form method="post"
p 姓名 :brinput type="text" name="name"
id="name"p
p 居住城市 :br
select name="city"
id="city"
option value="Taipei" 台北市 option
option value="Taichung" 台中市 option
option value="Kaohsiung" 高雄市 option
selectp
p 自我介绍:brtextarea name="comments"
id="comments" cols="30" rows="4"
textareap
pinput type="submit"
name="btnSubmit" id="btnSubmit"
value="Submit"
p
form
与表格一样，我们可以通过CSS选择器来标示窗体中所使用到的标签，进而改变整个窗体的外观，例如改变单一字段的颜色，适用于提示用户哪些字段是必填的。
\范例\ch03\3-3-4_CSSform\style.css
form {
border: 5px solid #696969;
width: 300px;
padding: 3px 6px 3px 6px;
margin:0px;
font:16px Arial;
}
select, input, textarea {
color:
#4682B4;
background-color: #00BFFF;
border: 1px solid #4682B4;
}
select {
width: 80px;
}
textarea {
width: 200px;
height: 40px;
}
同样在不改动HTML中窗体结构的情况下，完成了新窗体样式的添加，来比较一下纯HTML窗体与加入CSS装饰窗体的差别。如图3-15所示。

纯HTML HTML CSS
图3-15

書城介紹　 \|　合作申請　\|　索要書目　 \|　新手入門　\|　聯絡方式　 \|　幫助中心　\|　找書說明　 \|　送貨方式　\|　付款方式	台灣用户　\|　香港/海外用户

megBook.com.tw
Copyright (C) 2013 - 2024 （香港）大書城有限公司　All Rights Reserved.