登入帳戶  | 訂單查詢  | 購物車/收銀台(0) | 在線留言板  | 付款方式  | 聯絡我們  | 運費計算  | 幫助中心 |  加入書簽
會員登入   新用戶註冊
HOME新書上架暢銷書架好書推介特價區會員書架精選月讀2023年度TOP分類閱讀雜誌 香港/國際用戶
最新/最熱/最齊全的簡體書網 品種:超過100萬種書,正品正价,放心網購,悭钱省心 送貨:速遞 / 物流,時效:出貨後2-4日

2024年10月出版新書

2024年09月出版新書

2024年08月出版新書

2024年07月出版新書

2024年06月出版新書

2024年05月出版新書

2024年04月出版新書

2024年03月出版新書

2024年02月出版新書

2024年01月出版新書

2023年12月出版新書

2023年11月出版新書

2023年10月出版新書

2023年09月出版新書

『簡體書』HTML5与CSS3网页设计基础(第2版)

書城自編碼: 2706768
分類: 簡體書→大陸圖書→計算機/網絡程序設計
作 者: 莫里斯 (Terry Felke-Morris),周靖
國際書號(ISBN): 9787302422006
出版社: 清华大学出版社
出版日期: 2015-12-01
版次: 2 印次: 1
頁數/字數: 392/532000
書度/開本: 16开 釘裝: 平装

售價:NT$ 407

我要買

share:

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



新書推薦:
新民说·逝去的盛景:宋朝商业文明的兴盛与落幕(上下册)
《 新民说·逝去的盛景:宋朝商业文明的兴盛与落幕(上下册) 》

售價:NT$ 790.0
我从何来:自我的心理学探问
《 我从何来:自我的心理学探问 》

售價:NT$ 545.0
失败:1891—1900 清王朝的变革、战争与排外
《 失败:1891—1900 清王朝的变革、战争与排外 》

售價:NT$ 390.0
万千心理·我的精神分析之道:复杂的俄狄浦斯及其他议题
《 万千心理·我的精神分析之道:复杂的俄狄浦斯及其他议题 》

售價:NT$ 475.0
荷马:伊利亚特(英文)-西方人文经典影印21
《 荷马:伊利亚特(英文)-西方人文经典影印21 》

售價:NT$ 490.0
我的心理医生是只猫
《 我的心理医生是只猫 》

售價:NT$ 225.0
股权控制战略:如何实现公司控制和有效激励(第2版)
《 股权控制战略:如何实现公司控制和有效激励(第2版) 》

售價:NT$ 449.0
成吉思汗传:看历代帝王将相谋略 修炼安身成事之根本
《 成吉思汗传:看历代帝王将相谋略 修炼安身成事之根本 》

售價:NT$ 280.0

建議一齊購買:

+

NT$ 540
《 HTML5网页设计案例课堂 》
+

NT$ 593
《 Python语言及其应用 》
+

NT$ 739
《 HTML5与CSS3权威指南(第3版 上册) 》
編輯推薦:
HTML5和CSS3已成为新一代网页设计师不可缺少的工具。本书作者在信息技术行业浸染二十多年,具有丰富的教学和从业经验,她的经典教材《Web开发与设计基础第5版》被誉为“美国网页设计师就业宝典”。这是作者针对HTML 5和 CSS 3推出的**标准教程。本书包含的主题有:Internet和Web概念,创建HTML5网页;用CSS配置颜色和文本;用CSS配置页面布局;配置图像和多媒体;探索新增的CSS3特性;应用网页设计**实践;设计可访问和可用的网页;搜索引擎优化设计;选择域名;发布网站。本书适合所有对网页设计感兴趣的读者阅读。
內容簡介:
HTML5和CSS3已成为新一代网页设计师不可缺少的工具。本书作者在信息技术行业浸染二十多年,具有丰富的教学和从业经验,她的经典教材《Web开发与设计基础第5版》被誉为“美国网页设计师就业宝典”。这是作者针对HTML 5和 CSS 3推出的最新标准教程。本书包含的主题有:Internet和Web概念,创建HTML5网页;用CSS配置颜色和文本;用CSS配置页面布局;配置图像和多媒体;探索新增的CSS3特性;应用网页设计最佳实践;设计可访问和可用的网页;搜索引擎优化设计;选择域名;发布网站。本书适合所有对网页设计感兴趣的读者阅读。
目錄
目 录
第1章 Internet和Web基础1
1.1 Internet和Web2
Internet2
Internet的诞生2
Internet的发展2
Web的诞生3
第一个图形化浏览器3
各种技术的聚合3
1.2 Web标准和无障碍访问4
W3C推荐标准4
Web标准和无障碍访问4
无障碍访问和法律4
Web通用设计5
1.3 网上的信息6
信息和可靠性6
有道德地使用网上信息的道德使用7
1.4 浏览器和服务器7
网络概述7
客户端服务器模型8
1.5 Internet协议9
电子邮件协议9
超文本传输协议9
文件传输协议10
IP地址10
1.6 统一资源标识符URI和域名11
URI和URL11
域名12
1.7 HTML概述13
什么是HTML13
什么是XML13
什么是XHTML14
HTML5——HTML的最新版本14
1.8 网页幕后揭秘14
文档类型定义DTD15
网页模板15
html元素15
页头部分15
主体部分16
1.9 第一个网页16
动手实作1.116
创建文件夹17
保存文件18
测试网页18
复习和练习19
复习题19
动手练习20
Web研究20
聚焦Web设计20
第2章 HTML基础23
2.1 标题元素24
动手实作2.124
HTML5更多的标题选项25
2.2 段落元素25
动手实作2.226
对齐26
2.3 换行和水平标尺27
换行元素27
动手实作2.327
水平标尺元素28
动手实作2.428
2.4 块引用元素29
动手实作2.529
2.5 短语元素30
2.6 有序列表31
type,start和reversed属性32
动手实作2.632
2.7 无序列表33
动手实作2.733
2.8 描述列表34
动手实作2.835
2.9 特殊字符36
动手实作2.936
2.10 HTML语法校验37
动手实作2.1038
2.11 结构性元素39
div元素39
HTML5结构性元素40
header元素40
nav元素40
footer元素40
动手实作2.1140
2.12 锚元素42
动手实作2.1242
链接目标43
绝对链接43
相对链接43
block anchor43
2.13 练习使用链接44
站点地图44
动手实作2.1344
2.14 电子邮件链接47
动手实作2.1448
复习和练习48
复习题48
动手练习49
聚焦Web设计50
案例学习:Pacific Trails Resort50
案例学习:JavaJam Coffee House53
第3章 网页设计基础57
3.1 为目标受众设计58
浏览器友好性59
屏幕分辨率59
3.2 网站组织59
分级式组织60
线性组织60
随机组织61
3.3 视觉设计原则61
重复:在整个设计中重复视觉元素62
对比:添加视觉刺激和吸引注意力62
近似:分组相关项目63
对齐:对齐元素实现视觉上的统一63
3.4 提供无障碍访问63
无障碍设计的受益者63
无障碍设计有助于提高在搜索
引擎中的排名64
法律规定64
无障碍设计的热潮64
3.5 文本的使用65
文本设计的注意事项65
3.6 Web调色板66
十六进制颜色值67
Web安全颜色67
无障碍设计和颜色67
3.7 颜色的运用68
面向儿童68
面向年轻人69
面向所有人69
面向老年人70
3.8 使用图形和多媒体71
文件大小和图片尺寸71
抗锯齿锯齿化文本的问题71
只使用必要的多媒体71
提供替代文本72
3.9 更多设计上的考虑73
感觉到的加载时间73
第一屏74
适当留白74
水平滚动74
3.10 导航设计74
网站要易于导航74
导航栏74
面包屑导航75
图片导航76
动态导航76
站点地图76
站点搜索功能76
3.11 线框和页面布局77
3.12 固定和流动布局79
固定布局79
流动布局80
3.13 为移动网络设计81
三种方式81
移动设备设计考虑81
桌面和移动网站的例子82
移动设计小结83
3.14 响应式网页设计83
3.15 Web设计最佳实践85
复习和练习87
复习题87
动手练习88
聚焦Web设计89
案例学习:Web项目89
项目里程碑89
第4章 CSS基础知识一93
4.1 CSS概述94
层叠样式表的优点94
配置CSS的方法95
层叠样式表的“层叠”95
4.2 CSS选择符和声明96
CSS语法基础96
background-color属性96
color属性96
配置背景色和文本色96
4.3 CSS颜色值语法97
4.4 配置内联CSS99
style属性99
动手实作4.199
4.5 配置嵌入CSS100
style元素100
动手实作4.2101
4.6 配置外部CSS103
link元素103
动手实作4.3103
4.7 CSS的class、ID和上下文选择符104
class选择符104
id选择符105
后代选择符105
动手实作4.4105
4.8 span元素106
span元素106
动手实作4.5106
4.9 练习使用CSS108
动手实作4.6108
将嵌入CSS转换为外部CSS109
将网页与外部CSS文件关联109
4.10 CSS语法校验111
动手实作4.7111
复习和练习113
复习题113
动手练习114
聚焦网页设计114
案例学习:Pacific Trails Resort115
案例学习:JavaJam Coffee House118
第5章 图片样式基础121
5.1 图片122
GIF图122
JPEG图片123
PNG图片124
新的WebP图像格式124
5.2 img元素125
动手实作5.1125
5.3 图片链接126
动手实作5.2127
无障碍访问和图片链接128
5.4 配置背景图片128
background-image属性128
同时使用背景颜色和背景图片128
浏览器如何显示背景图片129
background-attachment属性129
5.5 定位背景图片130
background-repeat属性130
定位背景图片130
动手实作5.3131
5.6 用CSS3配置多张背景图片132
渐进式增强133
动手实作5.4133
5.7 收藏图标134
配置收藏图标135
动手实作5.5135
5.8 用CSS配置列表符号136
用图片代替列表符号136
动手实作5.6137
5.9 图像映射137
map元素137
area元素137
探究矩形图像映射138
复习和练习139
复习题139
动手练习140
聚焦Web设计141
案例学习:Pacific Trails Resort141
案例学习:JavaJam Coffee House143
第6章 CSS基础知识二147
6.1 字体148
动手实作6.1148
6.2 文本属性150
font-size属性150
font-weight属性151
font-style属性151
text-transform属性151
line-height属性151
动手实作6.2151
6.3 对齐和缩进152
text-align属性153
text-indent属性153
动手实作6.3153
6.4 CSS的宽度和高度154
width属性154
min-width属性155
max-width属性155
height属性155
动手实作6.4156
6.5 CSS的框模型156
框模型实例157
6.6 CSS的边距和填充158
margin属性158
padding属性158
6.7 CSS的边框159
动手实作6.5160
6.8 CSS3的圆角161
动手实作6.6162
6.9 CSS的页面内空居中设置居中
页面内容163
动手实作6.7164
6.10 CSS3的边框阴影和文本阴影165
CSS3的box-shadow属性165
CSS3的text-shadow属性166
动手实作6.8166
6.11 CSS3的background-clip和
background-origin属性167
CSS3的background-clip属性167
CSS3 background-origin属性168
6.12 CSS3背景大小和缩放168
6.13 CSS3的opacity属性170
动手实作6.9170
6.14 CSS3 RGBA颜色172
动手实作6.10173
6.15 CSS3 HSLA颜色173
色调、饱和度、亮度和alpha173
HSLA颜色示例174
动手实作6.11175
6.16 CSS3的渐变175
CSS3线性渐变语法176
CSS3渐变和渐进式增强176
配置CSS3渐变176
复习和练习177
复习题177
动手练习178
聚焦Web设计179
案例学习:Pacific Trails Resort179
案例学习:JavaJam Coffee House181
第7章 页面布局基础185
7.1 正常流动186
动手实作7.1186
7.2 浮动188
float属性188
动手实作7.2189
浮动元素和正常流动189
7.3 清除浮动190
clear属性190
7.4 溢出191
overflow属性191
7.5 CSS的双栏页面布局194
左侧导航的双栏布局194
顶部logo左侧导航的双栏布局195
还不算完美195
7.6 用无序列表实现垂直导航196
用CSS配置无序列表196
用CSS text-decoration属性消除
下划线196
动手实作7.3197
7.7 用无序列表实现垂直导航198
CSS display属性198
动手实作7.4199
7.8 用伪类实现CSS交互性200
动手实作7.5201
7.9 CSS双栏布局练习202
动手实作7.6202
7.10 用CSS进行定位205
static定位205
fixed定位205
相对定位206
绝对定位207
7.11 定位练习208
动手实作7.7208
7.12 CSS精灵210
动手实作7.8211
复习和练习212
复习题212
动手练习212
聚焦网页设计213
案例学习:Pacific Trails Resort213
案例学习:JavaJam Coffee House214
第8章 链接、布局和移动开发进阶217
8.1 深入了解相对链接218
相对链接的例子218
动手实作8.1219
8.2 区段标识符220
动手实作8.2221
8.3 figure元素和figcaption元素222
figure元素222
figcaption元素222
添加图题222
动手实作8.3223
8.4 图片浮动练习224
动手实作8.4224
8.5 更多HTML5元素226
8.5 更多HTML5元素227
hgroup元素227
section元素227
article元素227
aside元素227
time元素227
动手实作8.5227
8.6 HTML5与旧浏览器的兼容性229
配置CSS块显示229
HTML5 Shim230
动手实作8.6230
8.7 CSS对打印的支持231
打印样式最佳实践231
动手实作8.7232
8.8 移动网页设计233
移动网页设计要考虑的问题234
为移动使用优化布局234
优化移动导航234
优化移动图片235
优化移动文本235
为One Web而设计235
8.9 viewport meta标记235
8.10 CSS3媒体查询238
什么是媒体查询238
使用link元素的媒体查询例子238
使用@media规则的媒体查询示例239
8.11 媒体查询练习240
动手实作8.8240
8.12 灵活的图像242
动手实作8.9243
8.13 测试移动显示244
用桌面浏览器测试245
针对专业开发人员246
复习和练习247
复习题247
动手练习248
聚焦网页设计248
案例学习:Pacific Trails Resort249
案例学习:JavaJam Coffee House252
第9章 表格基础257
9.1 表格概述258
table元素258
border属性259
表格标题259
9.2 表行、单元格和表头260
动手实作9.1261
9.3 跨行和跨列261
动手实作9.2262
9.4 配置无障碍访问表格263
9.5 用CSS配置表格样式265
动手实作?9.3265
9.6 CSS3结构性伪类267
动手实作9.4267
配置首字母268
9.7 配置表格区域268
复习和练习270
复习题270
动手练习271
聚焦Web设计271
案例学习:Pacific Trails Resort272
案例学习:JavaJam Coffee House273
第10章 表单基础275
10.1 概述276
form元素277
表单控件277
10.2 文本框278
10.3 提交按钮和重置按钮279
提交按钮279
重置按钮279
示例表单279
动手实作10.1280
10.4 复选框和单选钮281
复选框281
单选钮282
10.5 隐藏字段和密码框283
隐藏字段283
密码框283
10.6 textarea元素284
动手实作10.2285
10.7 select和option元素286
select元素287
option元素287
10.8 label元素288
动手实作10.3288
10.9 fieldset元素和legend元素289
fieldset元素289
legend元素289
前瞻:用CSS配置fieldset分组
样式290
10.10 用CSS配置表单样式291
10.11 服务器端处理292
隐私和表单293
10.12 表单练习294
动手实作10.4294
10.13 HTML5文本表单控件295
E-mail地址输入表单控件295
URL表单输入控件296
电话号码表单输入控件296
搜索词输入表单控件296
HTML5文本框表单控件的
有效属性296
10.14 HTML5的datalist元素297
10.15 HTML5的slider控件和
spinner控件298
slider表单输入控件298
spinner表单输入控件299
HTML5和渐进式增强300
10.16 HTML5日历和颜色池控件300
日历输入表单控件300
颜色池表单控件301
10.17 HTML5表单练习302
动手实作10.5302
复习和练习304
复习题304
动手练习305
聚焦Web设计305
案例学习:Pacific Trails Resort305
案例学习:JavaJam Coffee House309
第11章 媒体和交互性基础313
11.1 插件、容器和codec314
辅助应用程序和插件314
11.2 配置音频和视频315
访问音频或视频文件315
动手实作11.1316
多媒体和浏览器兼容问题316
11.3 Flash和HTML5 embed元素317
embed元素317
动手实作11.2318
11.4 HTML5的audio元素和source元素318
audio元素318
source元素319
动手实作11.3320
11.5 HTML5的video元素和
source元素320
video元素321
source元素321
11.6 HTML5视频练习322
动手实作11.4322
11.7 嵌入YouTube视频323
iframe元素323
动手实作11.5324
11.8 CSS3的transform属性325
CSS3旋转变换325
动手实作11.6326
11.9 CSS3的transition属性327
动手实作11.7328
11.10 CSS过渡练习329
动手实作11.8329
11.11 HTML5的canvas元素331
复习和练习333
复习题333
动手练习333
聚焦Web设计334
案例学习:Pacific Trails Resort334
案例学习:JavaJam Coffee House336
第12章 上网发布339
12.1 注册域名340
选择域名340
注册域名341
12.2 选择主机341
主机的类型342
选择虚拟主机342
12.3 用FTP发布344
FTP应用程序344
用FTP连接344
使用FTP344
12.4 提交到搜索引擎345
搜索引擎的组成346
在搜索引擎中列出你的网站347
12.5 搜索引擎优化347
链接349
图片和多媒体349
有效代码349
有价值的内容349
12.6 无障碍访问测试349
通用设计和无障碍访问349
网络无障碍访问标准349
测试无障碍设计相容性350
12.7 使用性测试351
进行使用性测试351
动手实作12.1352
复习和练习353
复习题353
动手练习354
聚焦Web设计354
案例学习:Pacific Trails Resort354
案例学习:JavaJam Coffee House355
附录A 复习和练习答案357
附录B HTML5速查表358
附录C CSS速查表362
附录D XHTML速查表366
附录E 对比XHTML和HTML5369
附录F WCAG 2.0快速参考375
內容試閱
第 1 章
Internet和Web基础
Internet和Web是我们日常生活的一部分。它们是如何产生的?是什么网络协议和程序设计语言在幕后控制着网页的显示?本章讲述了网页开发人员必须掌握的基础知识,并指导你开始编制自己的第一个网页。你将学习超文本标记语言HTML,这是创建网页时使用的语言。将学习可扩展标记语言XHTML,这是HTML逐渐发展形成的标准版本。还将学习HTML5,它是HTML目前最新的草案标准。
学习内容
Internet和 Web的演变
对Web标准的需求
通用设计
无障碍Web设计的益处
Web上可靠的信息资源
使用Web时的道德规范
Web浏览器和Web服务器的作用
Internet协议
URI和域名
HTML,XHTML和HTML5
创建第一个网页
使用body,head,title和meta元素
命名、保存和测试网页
1.1 Internet和Web
Internet
Internet一词是指由计算机网络连接而成的网络,即“互联网络”、“网际网络”或者音译成“因特网”。它如今随处可见,已成为我们生活的一部分。电视和广播没有一个节目不敦促你浏览某个网站,甚至报纸和杂志也全面入驻Internet。
Internet的诞生
Internet诞生于连接科研机构和大学计算机的一个网络。在这个网络中,信息能通过多条线路传输到目的地,使网络在部分中断或损毁的情况下也能照常工作。信息重新路由到正常工作的那部分网络从而送达目的地。该网络由美国高级研究计划局Advanced Research Projects Agency,ARPA提出,所以称为阿帕网ARPAnet。1969年底,有4台计算机分别位于加州大学洛杉矶分校、斯坦福研究所、加州大学圣芭芭拉分校和犹他大学连接到一起。
Internet的发展
随着时间的推移,其他网络如美国国家科学基金会的NSFnet相继建立并连接到阿帕网。这些互相连接的网络,即Internet,起初仅限于在政府、科研和教育领域使用。对Internet的商用限制在1991年被解禁,Internet继续发展,Internet World Stats的报告表明,到2011年,Internet用户的数量已超过33亿。图1.1展示了2015年第3季度按地域划分的Internet用户数量。
按地域划分的Internet用户数量2015年第三季度
百万
图1.1 Internet用户的增长情况①
Internet的商用被解禁后,为未来的电子商务奠定了基础。然而,虽然不再限制商业使用,但当时的Internet仍然是基于文本的,使用起来极为不便。后来的发展解决了这个问题。
Web的诞生
视频讲解:Evolution of the Web
蒂姆·伯纳斯-李Tim Berners-Lee在瑞士欧洲粒子物理研究所CERN工作期间,构想了一种通信方式,使得科学家之间可以轻易“链接”到其他研究论文或文章并立刻查看该文章的内容。于是他建立了万维网World Wide Web来满足这种需求。1991年,他在一个新闻组上发布了这些代码。在这个版本的万维网中,客户端和服务器之间用超文本传输协议Hypertext Transfer Protocol,HTTP进行通信,用超文本标记语言Hypertext Markup Language,HTML格式化文档。
第一个图形化浏览器
1993年,第一个图形化Web浏览器Mosaic问世图1.2。
图1.2 Mosaic:第一个图形化浏览器
它由马克·安德烈森Marc Andreessen和美国国家超级计算中心NCSA工作的一个研究生团队开发,该中心位于伊利诺斯大学香槟分校。他们中的一些人后来开发了另一款著名的Web浏览器Netscape Navigator,即今天的Mozilla Firefox浏览器的前身。
各种技术的聚合
上个世纪90年代初,采用易于使用的图形化操作系统比如Microsoft Windows,IBM OS2和Apple Macintosh的个人电脑大量面世,而且价格变得越来越便宜。在线服务提供商比如CompuServe,AOL和Prodigy也提供了便宜的上网连接。价格低廉的计算机硬件、易于使用的操作系统、便宜的上网费用、HTTP协议和HTML语言以及图形化的浏览器,所有这些技术聚合在一起,使Internet上的信息很容易获得。在这个时候,万维网World Wide Web应运而生,它提供了图形化界面,方便用户访问存储在Web服务器上的信息。
1.2 Web标准和无障碍访问
你可能已经注意到,万维网不是由单一个人或团体运作的。然而,万维网联盟W3C,http:www.w3.org在提供与网络相关的建议和建立技术模型上扮演着重要的角色。W3C主要解决以下三个方面的问题:Web架构、Web设计标准和无障碍访问。W3C提出规范称为推荐标准,即recommendations来促进Web技术的标准化。图1.3是W3C的徽标。
图1.3 W3C的徽标
W3C推荐标准
W3C推荐标准由下属工作组提出,工作组则从参与技术开发工作的许多主要公司获取原始技术。这些推荐标准不是规定而是指导方针,许多开发Web浏览器的大软件公司,比如微软并不总是遵从W3C推荐标准。这给开发人员造成了不少麻烦,因为他们编写的网页在不同的浏览器中显示的效果不完全相同。
但也有好消息,那就是主流浏览器的新版本都在向这些推荐标准靠拢。甚至还有专门的组织团体,如Web标准项目Web Standards Projects,http:webstandards.org,专门从事W3C建议通常称为Web标准的推广,他们的推广对象不仅包括浏览器开发商,还包括开发人员和设计师。使用本书编码网页时,须遵从W3C推荐标准,这是创建无障碍访问网站的第一步。
Web标准和无障碍访问
无障碍网络倡议WAI,http:www.w3.orgWAI是W3C的一个主要工作领域。Web已成为日常生活不可分割的一部分,有必要确保每一个人都能使用它。
Web可能对视觉、听觉、身体和神经系统有残疾的人造成障碍。无障碍访问accessible的网站通过遵循一系列标准来帮助人们克服这些障碍。WAI为Web内容开发人员、Web创作工具的开发人员、浏览器开发人员和其他用户代理的开发人员提出了建议,使得有特殊需要的人也能够更好地使用网络。要想查看这些建议的一个列表,请访问WAI的“Web内容无障碍指导原则”Web Content Accessibility Guidelines,WCAG,网址是http:www.w3.orgWAIWCAG20glanceWCAG2-at-a-Glance.pdf。
无障碍访问和法律
1990年颁布的《美国残疾人保障法》ADA是一部禁止歧视残疾人的美国联邦公民权利法,ADA要求商业、联邦和各州均要对残疾人提供无障碍服务,1996年美国司法部的一项规定http:www.usdoj.govcrtfoiacltr204.txt指出,ADA无障碍要求适用于Internet资源。
1998年对《联邦康复法案》进行增补的Section 508条款规定,所有由美国联邦政府发展、取得、维持或使用的电子和信息技术都必须提供无障碍访问。美国联邦信息技术无障碍推动组http:www.section508.gov为信息技术开发人员提供了无障碍设计要求的资源。近年来,美国各州政府也开始鼓励和推广网络无障碍访问,伊利诺斯州网络无障碍法案http:www.dhs.state.il.usIITAAIITAAWebImplementationGuidelines.html是这种发展趋势的一个例证。
Web通用设计
通用设计中心Center for Universal Design将通用设计universal design定义为“在设计产品和环境时尽量方便所有人使用,免除届时进行修改或特制的必要”。通用设计的例子在我们四周随处可见。路边石上开凿的斜坡既方便推婴儿车,又方便驾驶电动平衡车图1.4。自动门方便了带着大包小包东西的人。斜坡设计既方便人们推着有滑轮的行李箱上下,也方便了手提行李的人。
图1.4 电动平衡车受益于通用设计
网页开发人员越来越多地采用通用设计。有远见的开发人员在网页的设计过程中会谨记无障碍要求。为有视觉、听觉和其他缺陷的访问者提供访问途径应该是网页设计的一个组成部分,而不是网页设计完后才考虑的事情。
有视觉障碍的人也许无法使用图形导航按钮,而是使用屏幕朗读器来提供对页面内容的声音描述。只要做一点简单的改变,比如为图片添加描述文本或在网页底部提供文本导航区,网页开发人员就可以把自己的网页变成无障碍页面。通常情况下,提供无障碍访问途径对于所有访问者来说都有好处,因为它提升了网页的可用性。
为图片提供备用文本,以有序的方式使用标题,为多媒体提供旁白或字幕,这样的网站不仅方便有视听障碍的人访问,还方便移动浏览器的用户访问。搜索引擎可能对无障碍网站进行更全面的索引,这有助于将新的访问者带到网站。本书在介绍网页开发与设计技术的过程中,会讨论相应的无障碍和易用性设计方法。
1.3 网上的信息
任何人都可以在网上发布几乎任何信息。本节探讨如何判断你获得的信息是否可靠,如何利用那些信息。
信息和可靠性
目前有数量众多的网站,但哪些才是可靠的信息来源呢?访问网站获取信息时,重要的一点是切忌只看表面图1.5。任何人可以在网上发布任何东西!一定要明智地选择信息来源。
图1.5 谁知道你所看的网页是由谁更新的呢
首先评估网站本身的信用。它是有自己的域名比如http:mywebsite.com还是一个免费网站,寄存在免费服务器上的一个文件夹中?
寄存在免费服务器上的网站的URL一般包含免费服务器名称的一部分,可能采用http:mysite.tripod.com或者http:www.angelfire.comfoldernamemysiste这样的形式。和免费网站相比,有自己域名的网站通常但并非总是提供的信息更为可靠。
还要评估域名类型,它是非赢利组织.org,商业组织.com或.biz,还是教育机构.edu?商家可能提供对自己有利的信息,所以要小心。非赢利组织或者学校有时能更客观地对待一个主题。
另外要考虑的是网页创建日期或者最后更新日期。虽然有的信息不受时间影响,但几年都没有更新的网页极有可能已过时,可能算不上是最好的信息来源。
有道德地使用网上信息的道德使用
万维网这一奇妙的技术为我们提供了丰富的信息、图片和音乐,基本都是免费的当然网费少不了。下面谈谈与道德相关的一些话题。
* 能不能复制别人的图片并把它用到自己的网站上?
* 能不能复制别人的网站设计并把它用到自己或客户的网站上?
* 能不能复制别人网站上的文章,并把它的全部或部分当作自己的作品?
* 在自己的网站上攻击别人,或者侮辱性地链接他们的网站,这样的行为是否恰当?
对于所有这些问题的回答都是否定的。在未经许可的情况下使用别人的图片的行为就像是盗窃,事实上,如果链接这些图片,你用的其实是他们的带宽,并且有可能是在让他们花钱。复制他人或公司的网站设计也属于盗窃。在美国,无论网站上是否有版权的标记,它的任何文字和图片都自动受到版权保护。在你的网站上攻击他人和公司或者侮辱式地链接其网站都被视为诽谤。
诸如此类的与知识产权、版权和言论自由相关的事件常常被诉诸公堂。良好的网络礼节要求你在使用他人的作品之前获得许可,注明所用材料的出处美国版权法称“合理使用”,并以一种不伤害他人的方式行使言论自由权。世界知识产权组织World Intellectual Property Organization,WIPO,http:wipo.int是致力于保护国际知识产权的组织。
如果想保留所有权,又想方便其他人使用或采纳你的作品,又该怎么办呢?“知识共享”Creative Commons,http:creativecommons.org是一家非赢利性组织,作者和艺术家可利用它提供的免费服务登记一种称为“知识共享”Creative Commons的版权许可协议。可以从几种许可协议中选择一种,具体取决于你想授予的权利。“知识共享”许可协议提醒其他人能对你的作品做什么和不能做什么。http:meyerweb.comerictoolscolor-blend展示了基于Creative Commons Attribution-ShareAlike 1.0署名-相同方式共享许可协议的一个网页,它“保留部分权利”Some Rights Reserved。
1.4 浏览器和服务器
网络概述
网络network由两台或多台相互连接的计算机构成,它们以通信和共享资源为目的。图1.1展示了网络常见的组成部分,包括:
* 服务器计算机;
* 客户端工作站计算机;
* 共享设备,如打印机;
* 连接它们的设备路由器和交换机和媒介。
图1.6 网络常见的组成部分
客户端是个人使用的计算机,如桌面PC台式机。服务器用于接收客户端计算机的资源请求,比如文件请求。用作服务器的计算机通常安放在受保护的安全区域,只有网络管理员才能访问它。集线器hub和交换机switch等网络设备用于为计算机提供网络连接,路由器router将信息从一个网络传至另一个网络。用于连接客户端、服务器、外设和网络设备的媒介包括电缆、光纤和无线技术等。
客户端服务器模型
客户端服务器这个术语可追溯到上个千年20世纪80年代,表示通过一个网络连接的个人计算机。客户端服务器也可用于描述两个计算机程序——客户程序和服务器程序——的关系。客户向服务器请求某种服务比如请求一个文件或数据库访问,服务器满足请求并通过网络将结果传送给客户端。虽然客户端和服务器程序可存在于同一台计算机中,但它们通常都运行在不同计算机上图1.7。一台服务器处理多个客户端请求也是很常见的。
? 客户端 服务器
图1.7 客户端和服务器
Internet是客户端服务器架构的一个典型例子。想象以下场景:某人在计算机上用浏览器访问网站,比如 http:www.yahoo.com。服务器是在一台计算机上运行的服务器程序,该计算机具有分配给yahoo.com这个域名的IP地址。连接到服务器后,它定位和查找所请求的网页和相关资源,并将它们发送给客户端。
下面简单列举了客户端和服务器的区别。
客户端
* 需要时才连接Internet
* 通常会运行浏览器客户端软件,如Internet Explorer或谷歌浏览器
* 使用HTTP
* 向服务器请求网页
* 从服务器接收网页和文件
服务器
* 一直保持和Internet的连接
* 运行服务器软件比如Apache或Internet Information Server
* 使用HTTP
* 接收网页请求
* 响应请求并发送状态码、网页和相关文件
客户端和服务器交换文件时,它们通常需要了解正在传送的文件类型,这是使用MIME类型来实现的。多用途网际邮件扩展 Multi-Purpose Internet Mail Extensions,MIME是一组允许多媒体文档在不同计算机系统之间传送的规则。MIME最初专为扩展原始的电子邮件协议而设计,但也被HTTP使用。MIME提供了7种不同类型文件的传送方式:音频、视频、图像、应用程序、邮件、多段文件和文本。MIME还使用子类型来进一步描述数据。例如,网页的MIME类型为texthtml,GIF和JPEG图片的MIME类型分别是imagegif和imagejpeg。
服务器在将一个文件传送给浏览器之前会先确定它的MIME类型,MIME类型连同文件一起传送,浏览器根据MIME类型决定文件的显示方式。
那么信息是如何从服务器传送到浏览器的呢?客户端如浏览器和服务器如服务器之间通过HTTP,TCP和IP等通信协议进行数据交换。
1.5 Internet协议
协议是描述客户端和服务器之间如何在网络上进行通信的规则。Internet和Web不是基于单一协议工作的。相反,它们要依赖于大量不同作用的协议。
电子邮件协议
大多数人对电子邮件已习以为常,但许多人不知道的是,它的顺利运行牵涉到两个服务器:一个入站邮件服务器和一个出站邮件服务器。需要向别人发邮件时,使用的是简单邮件传输协议SMTP。接收邮件时,使用的是邮局协议POP,现在是POP3和Internet邮件存取协议IMAP。
超文本传输协议
超文本传输协议HTTP是一组在网上交换文件的规则,这些文件包括文本、图形图像、声音、视频和其他多媒体文件。浏览器和服务器通常使用这一协议。浏览器用户输入网址或点击链接请求文件时,浏览器构造一个HTTP请求并把它发送到服务器。目标机器上的服务器收到请求后进行必要的处理,再将被请求的文件和相关的媒体文件发送出去,进行应答。
文件传输协议
文件传输协议File Transfer Protocol,FTP是一组允许文件在互联网上不同计算机之间进行交换的规则。HTTP供浏览器请求网页及其相关文件以显示某一页面。相反,FTP只用于将文件从一台计算机传送到另一台。开发人员经常使用FTP将网页从他们自己的计算机传送到服务器。FTP也经常用于将程序和文件从服务器下载到自己的PC。
TCPIP传输控制协议Internet协议被采纳为Internet官方通信协议。TCP和IP有不同的功能,它们协同工作以保证Internet通信的可靠性。
TCP TCP的目的是保证网络通信的完整性,TCP首先将文件和消息分解成一些独立的单元,称为数据包。这些数据包图1.8包含许多信息,如目标地址、来源地址、序号和用以验证数据完整性的校验和。
图1.8 TCP数据包
TCP与IP共同工作,实现文件在网上的高效传输。TCP创建好数据包之后,由IP进行下一步工作,它使用IP寻址在网上使用特定时刻的最佳路径发送每个数据包。数据到达目标地址后,TCP使用校验和来验证每个数据包的完整性,如果某个数据包损坏就请求重发,然后将这些数据包重组成文件或消息。
IP IP与TCP共同工作,它是一组控制数据如何在网上不同计算机之间进行传输的规则。IP将数据包路由传送到目的地址。发送后,数据包将转发到下一个最近的路由器用于控制网络传输的硬件设备。如此重复,直至到达目标地址。
IP地址
每一台连接到互联网的设备都有唯一的数字IP地址,这些地址由4组数字组成,每组8位bit,称为一个octet八位元。现行的IP版本IPv4使用的是32位地址,用十进制数字表示就是xxx.xxx.xxx.xxx,其中xxx是0~255的十进制数值。IP地址可以和域名相对应,在浏览器的地址栏中输入URL或域名后,域名系统Domain Name System,DNS服务器会查找与之对应的IP地址。例如,当我写到这里的时候查到谷歌的IP是74.125.73.106。
可以在Web浏览器的地址栏中输入这串数字如图1.9所示,按Enter键,谷歌的主页就会显示了。当然,直接输入“google.com”更容易,这也正是人们为什么要创建域名如google.com的原因。由于一长串数字记忆起来比较困难,所以人们引进了域名系统,作为一种将文本名称和数字IP地址联系起来的办法。
图1.9 在Web浏览器中输入IP地址
什么是IPv6?
IPv6是下一代IP协议。它的目的是改进当前的IPv4,同时保持与它的向后兼容。ISP和互联网用户可以分批次升级到IPv6,不必统一行动。
IPv6提供了更多的地址,因为IP地址从32位加长到128位。这意味着总共有2128个唯一的IP地址,或者说340 282 366 920 938 463 463 374 607 431 768 211 456个。即每个PC、笔记本、手机、传呼机、PDA、汽车和烤箱等都可以分配到足够的IP地址。
1.6 统一资源标识符URI和域名
URI和URL
统一资源标识符Uniform Resource Identifier,URI代表Internet上的一个资源。统一资源定位符Uniform Resource Locator,URL是一种特别的URI,代表网页、图形文件或MP3文件等资源的网络位置。URL由协议、域名和文件在服务器上的层级位置构成。
URL
例如http:www.webdevbasics.netchapter1index.html这个URL如图1.10所示,它表示要使用HTTP协议和域名webdevbasics.net上名为www的服务器。在这个例子中,根文件通常是index.html或index.htm会显示。
图1.10 描述文件夹中的一个文件的URL
域名
域名用于互联网上定位某个组织或其他实体。域名系统DNS的作用是通过标识确切的地址和组织类型,将互联网划分为众多逻辑性的组别和容易理解的名称。DNS将基于文本的域名和分配给设备的唯一IP地址联系起来。
以www.yahoo.com这个域名为例:.com是顶级域名,yahoo.com是雅虎公司注册的域名,被看成是.com下面的二级域名。www是在yahoo.com这个域中运行的Web服务器的名称有时称为Web主机。从整体上看,www.yahoo.com称为一个完全限定域名Fully-Qualified Domain Name,FQDN。
顶级域名Top-Level Domain Name,TLD是域名的最右边的部分。一个TLD要么是国际顶级域名如com为商业公司,要么是国别顶级域名如fr代表法国。IANA网站http:www.iana.orgcctldcctld-whois.htm提供了完整国家代码TLD列表。ICANN管理着表1.1列出的国际顶级域名。
表1.1 顶级域名
顶级域名
代表
.aero
航空运输业
.asia
亚洲机构
.biz
商业机构
.cat
加泰罗尼亚语或加泰罗尼亚文化相关
.com
商业实体
.coop
合作组织
.edu
仅限于有学位或更高学历授予资格的高等教育机构使用
.gov
仅限于政府使用
.info
无使用限制
.int
国际组织很少使用
.jobs
人力资源管理社区
.mil
仅限于军事用途
.mobi
要和一个.com网站对应–.mobi网站专为方便移动设备访问而设计
.museum
博物馆
.name
个人
.net
与互联网支持相关的团体,通常是互联网服务提供商或电信公司
.org
非赢利性组织
.pro
会计师、物理学家和律师
.tel
个人和业务联系信息
.travel
旅游业
.com,.org和.net这三个顶级域名目前基于诚信系统使用,也就是说假如某个人开了一家鞋店与网络无关,也可以注册shoes.net这个域名。
DNS的作用是将域名与IP地址关联,每次在Web浏览器中输入一个新的URL,就会发生下面这些事情。
1 访问DNS。
2 获取相应的IP地址并将地址返回给浏览器。
3??浏览器使用这个IP地址向目标计算机发送HTTP请求。
4??HTTP请求被服务器接收。
5 必要的文件被定位并通过HTTP应答传回浏览器。
6??浏览器渲染并显示网页和相关文件。
下次如果还想不通为什么打开一个网页需要这么长时间,就想想幕后要经历的这么多步骤吧!
1.7 HTML概述
标记语言markup language由规定浏览器软件或手机等其他用户代理如何显示和管理Web文档的指令集组成。这些指令通常称为标记或标签tag,执行诸如显示图片、格式化文本和引用链接的功能。
万维网World Wide Web由众多网页文件构成,文件中包含对网页进行描述的HTML和其他标记语言指令。蒂姆·伯纳斯-李Tim Berners-Lee使用标准通用标记语言Standard Generalized Markup Language,SGML创建了HTML。SGML规定了在文档中嵌入描述性标记以及描述文档结构的标准格式。SGML本身不是网页语言;相反,它描述了如何定义这样的一种语言,以及如何创建文档类型定义DTD。W3Chttp:w3c.org订立了HTML及其相关语言的标准。和Web本身一样,HTML也在不断地发生改变。
什么是HTML
HTML是一套标记符号或者代码集,它们插入可由浏览器显示的网页文件中。这些标记符号和代码标识了结构元素,如段落、标题和列表。还可用HTML在网页上放置多媒体如图片、视频和音频,或者对表单进行描述。浏览器的作用是解释标记代码,并渲染页面供用户浏览。HTML实现了信息的平台无关性。换言之,不管网页是用什么计算机创建的,任何操作系统的任何浏览器所看到的页面都是一致的。
每个独立的标记代码都称为一个元素或标记,每个标记都有特定功能,它们被尖括号和括起来。大部分标记成对出现:有开始标记和结束标记;它们看起来就像是容器,所以有时被称为容器标记。例如,title和title标记对之间的文本会显示在浏览器窗口的标题栏中。
有些标记独立使用,不作为标记对的一部分。例如,在网页上显示水平分隔线的标记hr ,就是独立标记,它没有对应的结束标记。你以后会逐渐熟悉它们。另外,大部分标记还可使用属性attribute进一步描述其功能。
什么是XML
XMLeXtensible Markup Language,可扩展标记语言是W3C用于创建通用信息格式以及在Web上共享格式和信息的一种语言。它是一种基于文本的语法,设计用于描述、分发和交互结构化信息比如RSS“源”。XML的宗旨不是替代HTML,而是通过将数据和表示分开,从而对HTML进行扩展。开发人员可使用XML创建描述自己信息所需的任何标记。
什么是XHTML
如今使用的HTML最新标准化版本实际是XHTMLeXtensible Hyper Text Markup Language,可扩展超文本标记语言。XHTML使用HTML4的标记和属性,同时使用了更严谨的XML语法。XHTML在Web上已经使用了超过10年,许多网页都是用这种标记语言编码的。W3C有段时间开发过XHTML的新版本,称为XHTML 2.0。但W3C后来停止了XHTML 2.0的开发,因为它不向后兼容HTML4。相反,W3C改为推进HTML5。
HTML5——HTML的最新版本
本书写作之时,W3C的“HTML工作组”正在忙于更新HTML5的草案。图1.11展示了它的徽标。它是HTML 4的下一个版本,取代的是XHTML。HTML5集成了HTML和XHTML的功能,添加了新元素,提供表单编辑和原生视频支持等新功能,而且向后兼容。
图1.11 W3C制作的HTML5徽标http:www.w3.orghtmllogo
现在已经可以开始使用HTML5了!主流浏览器的最新版本比如Internet Explorer,Firefox,Safari,谷歌浏览器和Opera已经开始支持HTML5的许多新功能。本书将完全使用HTML5语法。由于HTML5尚处在起草阶段,本书出版后可能发生变化,所以请访问http:www.w3.orgTRhtml-markup了解最新的HTML5元素列表。
1.8 网页幕后揭秘
前面已经讲过HTML标记语言告诉浏览器如何在网页上显示信息。下面让我们揭开每个网页幕后的秘密图1.12。
图1.12 幕后的秘密挺有意思的
文档类型定义DTD
由于存在多个版本多种类型的HTML和XHTML,W3C建议在网页文档中使用文档类型定义Document Type Definition,DTD标明所使用的标记语言的类型。DTD标识了文档里包含的HTML的版本,浏览器和HTML代码校验器在处理网页的时候会使用DTD中的信息。DTD语句通常称为DOCTYPE语句,它是网页文档的第一行。HTML5的DTD如下所示:
!DOCTYPE html
网页模板
每个网页都包含html,head,title,meta和body元素。下面将遵循使用小写字母并为属性值添加引号的编码样式。基本的HTML5模板如下所示chapter1template.html:
!DOCTYPE html
html lang="en"
head
title文件标题放在这里title
meta charset="utf-8"
head
body
... 主体文本和更多的HTML标记放置于此
body
html
注意,除了网页标题,你创建的每个网页的前7行通常都是相同的。注意在上述代码中,除了文档类型定义语句之外,HTML标记都使用小写字母。接着讨论一下html,head,title,meta和body元素的作用。
html元素
html元素指出当前文档用HTML进行格式化。html元素告诉浏览器如何解释文档。起始html标记放在DTD下方。结束html标记指出网页的结尾,位于其他所有HTML元素之后。
html元素还需要指出文档的书面语言比如英语或中文。这个额外的信息以属性的形式添加到html标记,属性的作用是修改或进一步描述某个元素的作用。用于指定文档书面语言的是lang属性。例如,lang="en"指定英语。搜索引擎和屏幕朗读器可能会参考这个属性。在html元素中包含网页的两个主要区域:页头head和主体body。页头区域包含对网页文档进行描述的信息,而主体区域包含实际由浏览器显示的标记、文本、图像和其他对象。
页头部分
位于页头部分的元素包括网页标题。用于描述文档的meta标记比如字符编码和可以由搜索引擎访问的信息以及对脚本和样式的引用。这些信息大多不在网页上直接显示。
页头部分包含在head元素中,以head标记开始,以head标记结束。页头部分至少要包含一个title元素和一个meta元素。
页头部分的第一个标记是title元素,它包含要在浏览器窗口标题栏显示的文本。title和title之间的文本就是网页的标题,收藏和打印网页时会显示标题。流行的搜索引擎比如Google根据标题文本判断关键字的相关性,甚至会在搜索结果页中显示标题文本。应指定一个能很好描述网页内容的标题。如果网页是为公司或组织设计的,标题中应该包含公司或组织的名称。
meta元素描述网页的特征,比如字符编码等。字符编码是指字母、数字和符号在文件中的内部表示方式。有多种不同的字符编码方式。但是,平时应该使用一个得到广泛支持的字符编码,比如utf8,它是Unicode的一种形式。meta标记独立使用——而不是使用一对起始和结束标记。我们说它是一种独立或“自包容”标记,在HTML5中称为“void元素”。meta标记使用charset属性来指定字符编码,如下例所示:
meta charset="utf-8"
主体部分
主体部分包含在浏览器窗口称为浏览器的视口中实际显示的文本和元素。该部分的作用是配置网页的内容。
主体部分以body标记开始,以body标记结束。我们的大多数时间都花在网页主体部分的编码上。在主体部分输入文本,它将在网页上直接显示。
1.9 第一个网页
视频讲解:Your First Web Page
创建网页文档无需特殊软件,只需要一个文本编辑器。记事本是Windows自带的文本编辑器,TextEdit是Mac OS X自带的 配置请参考http:support.apple.comkbTA20406。除了使用简单的文本编辑器或字处理程序,另一个选择是使用商业网页创作工具,比如Microsoft Expression Web或Adobe Dreamweaver。还有许多自由或共享软件可供选择,包括Notepad++,TextPad和TextWrangler。不管使用什么工具,打下牢靠的HTML基础将让你受益匪浅,本书的例子使用记事本程序编辑。
动手实作1.1
熟悉了网页的基本元素之后,接着开始创建第一个网页,如图1.13所示。
图1.13 第一个网页
创建文件夹
使用本书开发自己的网站时,有必要新建一个文件夹来管理文件。使用操作系统在硬盘或U盘上新建文件夹chapter1。
在Mac上新建文件夹
1.启动Finder,选择想要创建新文件夹的位置。
2.选择File New Folder。创建一个无标题文件夹。
3.为了重命名文件夹,选择它并点击当前名称。输入文件夹的新名称,按Return键。
在Windows上新建文件夹
1.启动Windows资源管理器按Windows键或选择“开始”“所有程序”“附件”“Windows资源管理器”,切换到想要新建文件夹的位置,比如“我的文档”。
2.选择“组织”“新建文件夹”。
3.为了重命名文件夹,右击它,从上下文关联菜单中选择“重命名”。输入文件夹的新名称,然后按Enter键。
现在准备好新建第一个网页了。启动记事本或其他文本编辑器,输入以下代码。
!DOCTYPE html
html lang="en"
head
titleMy First HTML5 Web Pagetitle
meta charset= "utf-8"
head
body
Hello World
body
html
注意:文件的第一行包含的是DTD。HTML代码以html标记开始,以html标记结束,这两个标记的作用是表明它们之间的内容构成了一个网页。
head和head标记界定了页头部分,其中包含一对标题标记标题文本是“My First HTML5 Web Page”和一个meta标记指定字符编码。
body和body标记界定了主体部分,主体标记之间输入了“Hello World”这一行文本。这些代码在记事本中的样子如图1.14所示。你刚刚创建了一个网页文档的源代码。
图1.11 网页源代码在记事本中的显示
每个起始标记都要另起一行吗?
不用。即使所有标记都挤在一行中,中间不留任何空白,浏览器也能正常显示网页。然而,如果恰当地使用换行和缩进,人们在读代码的时候会感觉非常舒服。
保存文件
网页使用.htm或.html扩展名。网站主页常用的文件名是index.htm或index.html。本书的网页使用.html扩展名。
当前文件使用index.html这个名称来保存。
1.在记事本或其他文本编辑器中显示文件。
2.选择“文件”|“另存为”Save As。
3.在“另存为”对话框中输入文件名,如图1.15所示。
4. 单击“保存”Save按钮。
图1.15 保存和命名文件
学生文件提供了动手实作的示例解决方案。如果愿意,可在测试网页之前将自己的作品与示例解决方案chapter1index.html进行比较。
为什么我的文件有一个.txt扩展名?
老版本Windows的记事本程序会自动附加一个.txt扩展名。在这种情况下,请在Windows资源管理器中将文件重命名为index.html。
测试网页
有两种方式测试网页。
1.启动Windows资源管理器Windows或者FinderMac,找到自己的index.html文件,双击它。随后就会打开默认浏览器并显示index.html网页。
2.启动Web浏览器。选择“文件”|“打开”找到自己的index.html文件,选定index.html,单击“确定”。浏览器会显示index.html网页。
如果使用Internet Explorer,网页的显示效果如图1.16所示。图1.13是使用Firefox 12显示的效果。注意浏览器窗口的标题栏显示了标题文本“My First HTML5 Web Page”。有的搜索引擎利用title和title标记之间的内容判断关键字搜索的相关性。因此,请确保每个网页都包含了描述性的标题。当网站的访问者把你的网页加入书签或收藏夹的时候也会用到title标记。吸引人的、贴切的网页标题会引导访客再次浏览你的网站。如果是某个公司或组织的网页,在标题中包含公司或组织的名称是个不错的主意。

图1.16 用Internet Explorer显示的网页
在浏览器中查看我的网页时,文件名是index.html.html,为什么会这样?
这一般是因为操作系统设置了隐藏文件扩展名。在显示文件扩展名的情况下,将index.html.html重命名为index.html。两种操作系统显示文件扩展名的方法是不同的:
* Windows:http:support.microsoft.comkb865219
* Mac:http:www.fileinfo.comhelpmac_show_extensions。
复习和练习
复习题
选择题
1.选择正确说法。
A. 浏览器显示的内容包含在页头部分。
B. 浏览器显示的内容包含在主体部分。
C. 有关网页的信息包含在主体部分。
D. 以上都对。
2.与计算机唯一数字IP地址对应的、基于文本的网络地址称为什么?
A.??IP地址B. 域名C.??URLD. 用户名
3.以下哪一个协议的作用是确保通信的完整性?
A.??IPB.??TCPC.??HTTPD.??FTP
4.http:www.google.com这个URL的顶级域名是什么?
A.??httpB.??wwwC.??yahooD.??com
判断题
5. 标记语言提供了告诉浏览器如何显示和管理Web文档的指令集。
6. 以.net结尾的域名表明是网络公司的网站。
填空题
7.HTML的最新版本是________。
8.________规定了一组特殊的标记符号或代码,它们要插入准备由浏览器显示的文件中。
9.网页文档一般使用________或者________文件扩展名。
10.网站主页一般命名为________或者 ________。
动手练习
1. 博客是网上的个人日记,以时间顺序发表看法或链接,并经常进行更新。博客讨论的话题从政经到技术,再到个人日记,具体由创建和维护该博客的人称为博主决定。
建立博客来记录自己学习网页开发的历程。可考虑以下提供免费博客的网站:http:blog.163.com、http:blog.qq.com或http:blog.sina.com.cn。按网站说明建立自己的博客。博客可以记录自己的工作和学习经历,可以介绍有用或有趣的网站,也可记录对自己有用的设计资源网站。还可以介绍一些有特点的网站,比如提供了图片资源的网站,或者感觉导航功能好用的网站。用只言片语介绍自己感兴趣的网站。开发自己的网站时,可在博客上张贴你的网站的URL,并解释自己的设计决定。和同学或朋友分享这个博客。
2. 新浪微博http:weibo.com是著名的微博社交媒体网站。每条微博最大长度是140字。微博用户将自己的见闻或感想发布到微博上,供朋友和粉丝浏览。如果微博是关于某个主题的,可以在主题前后添加#符号,例如用#奥斯卡#发布关于奥斯卡的微博。这个功能使用户能方便地搜索关于某个主题或事件的所有微博。
请在微博上建立帐号来分享你觉得有用或有趣的网站。发布至少3条微博。也可分享包含有用设计资源的网站。等你开发自己的网站时,也可以在微博上宣传一下它。
老师可能要求发布指定主题的微博,例如#网页开发#。搜索它可以看到所有相关微博。
Web研究
1.万维网联盟W3C负责为Web创建各种各样的标准,浏览http:www.w3c.org并回答下面的问题:
A.??W3C最开始是怎么来的?
B. 谁能加入W3C?加入它的费用是多少?
C.??W3C主页上列出了很多技术,选择感兴趣的一个,点击链接并阅读相关的页面。列举你归纳的三个事实或问题。
2.世界网站管理员组织WOW是为创建和管理网站的个人与组织提供支持的一个专业协会。浏览网站http:webprofessionals.org并回答以下问题。
A. 怎样加入WOW?加入它的费用是多少?
B. 列举WOW参与的一个活动。你会参加这个活动吗?解释理由。
C. 列出WOW为网页开发人员职业规划提供帮助的三种方式。
聚焦Web设计
1.浏览本章提到的、你感兴趣的任何一个网站,打印它的主页或其他相关页面,写一页关于该网站的总结和你对它的感受。集中讨论以下问题。
A. 该网站的目的是什么?
B. 目标受众是谁?
C. 你是否认为网站能够传到目标受众那里?为什么?
D. 这个网站对你是否有用?为什么?
E. 列举该网站讨论的你感兴趣的一个话题。
F. 你是否推荐其他人浏览这个网站?
G. 该网站还应该如何改进?

 

 

書城介紹  | 合作申請 | 索要書目  | 新手入門 | 聯絡方式  | 幫助中心 | 找書說明  | 送貨方式 | 付款方式 台灣用户 | 香港/海外用户
megBook.com.tw
Copyright (C) 2013 - 2024 (香港)大書城有限公司 All Rights Reserved.