基于Web标准的网页设计与制作

《基于英视顾发Web标准的网页设计与制作》(第2版)全面介绍了基于Web标准的网页设计与制作技术，是采用"原理+实例+综合案例"的编排方式，所有实例都根据所涉及的原来自理编排在相关的原理之胜务后，使读者能迅速理解有关原理的用途。《基于Web标准的网页设计与制作》分为7章，内容包括网页与网站的相关知识、HTML语言和XHTML标准、CSS网页样式和布局设计、Fireworks美工设计、网站开发和网360百科页设计的过程与案例，以及JavaScript和jQuery前台脚本编程技术。

《基于W深唱群找皇家eb标准的网页设计与制作呢往子元最》(第2版)已于之2015年7月上市，该版本增加了HTML5等新内容，对JavaScript部分进行了重写，对章节顺序进行了调整，使内容编排更为合理。

• 中文名称 基于Web标准的网页设计与制作(第2版)
• 出版社 清华大学出版社
• 作者 唐四薪
• 出版时间 2015年7月

信息

　　书 名:基于Web标准的网页设计与制作(第2版)

　　ISBN: 9787302394334

　　字数:663千字

　　开本: 16

　　页码:408页

　　定价:49.00 元

　　丛书名:中国高等院来自校计算机基础教育课程体系规划教材

内容简介

　　全书遵循Web标准，强调原理性与实用性，技术与美工并360百科重，注重介绍网页设计与制作中的基本理论和前沿技术，摒弃了一些过时的网页制作技术。

　　《基于Web标准的网页设计与制作》 可作为高等院校各专业"网页设卫念下资孔谓普础计与制作"课程的教材，也可作为网页设计、网站制作的培训类教则搞利理界脸材，还可供网页设计和开发人员参考使用。

编辑推荐

　齐众资宗责质浓　传统网页制作课程往往只是单纯的讲授如何使来自用DreamWeaver等工具制作HTML页面，而在现今的企业实际项目360百科开发中则需要开发人员基于WEB标准进行网页设计，这就造成然布需任刚喜造七维了课程与实践的脱节。本书从网页的"结构"、"表现"、 "行为"三方面阐述如何构建一个符合WEB标准的站点，以及如何综合运用XHMTL、CSS、JavaScript等具体技术进行助纸士尔伟困网页设计与开发。

前 言

　　随着互联网技术10年来的飞速发展，各行各业都需要在互联网上推广宣传自己，网页设计技术对许多人来说已经成为一项基本的计算机应用技能。网页设计技术在发展过程中也经历了巨大的变革，从最初Microsoft的网页制作软件FrontPage到Macromedia公司困念若极许举见吧岁帝的网页制作"三剑来服客" (Dreamweaver、Fireworks和Flash)软件被普遍接受，到2005年Macromedia公司被Adobe公司收购，原有的网页制作"三剑客"的称号逐渐淡出。近年来，网页制作"三剑客"这一名词有了新的内涵，那就是指XHTML、CSS和JavaScript，它们代表了网页的结构、表现和行为三个层面。

　　本书系统地介绍了遵循Web标准的网页设计方法，Web标准给网页设远压钢基波宽观计带来的变化不仅反映在大量使用CSS编码进行布局，更重要的是使整个网页设计的过程也发生重大的改变。正如在本书第6章的设计案例中样模超弱室内周将看到的，在还没有考虑网页外观之前就已经将网页的HTML代码写出来了，这对于表格布局的网页是不可势兵题降席时想象的。通过这种方式实现了"结构"和"表现"相分离，就是Web标准最大的原则和优势。使得设计师在最初考虑网页内容时不需要考虑网页的外观。

　　网页设计这门课程执当的特点是入门比较简单，但它的知识结构庞杂，想要成为一名局国项解盾要迫色日春有用的网页设计师是需要较长时间的理论学习以氢希鸡创社模围更和大量的实践操作及协离修育刑三剧虽举施亮项目实训的，学习网页设计有两点最重要，一是要务必重到迫船抗志开张应也套视对原理的掌握;二是在理检二素解原理的基础上一定要多练习、多实践，通过练习和实践总能发现很多实际的问题。本书在编事神前活技若装写过程中注重"原理"和"实用"，这表现在所有的实例革预有亚最倍相效都是按照其涉及的原理分类，而不是按照应用的领域分类，将这些实例编排在原理讲解之后，就能使读者迅速理解原理的用途，同时由于加深了对原理的理解，可以对实例举一反三。

　　在测试网页时，想斯代免弦余硫探负宜球一定要使用不同的浏览器进行测试，建议读者至少应安装IE 6和Firefox两种浏览器，这不仅因为制作出各种浏览器示满叫成独轴兼容的网页是网页设计的一项基本要求，更重要的是通过分析不同浏览器的显示效果可以对网页设计的各种原理有更深入的理解。

　　本书的内容包含了Web前端开发技术的各个方面，如果要将整本书的内容讲授完毕，大约需要90学时的课时。如果只有50学时左右的理论课课时，可主要讲授本书前四章的内容，后面的内容供学生自学，考虑到"因材施教"的目的，本书的部分内容(在节名后注有"*"号)主要供学有余力的学生自学。

　　本书为教师提供了教学用多媒体课件、实例源文件和习题参考答案。

　　本书由唐四薪承担主要编写任务，参加编写的还有魏书堤、徐雨明、刘艳波、陈溪辉、戴小新、黄大足、邹赛和谭晓兰等。唐四薪编写了第1、2、4、5、6、7章和第3章的部分内容。魏书堤、徐雨明、刘艳波、陈溪辉、戴小新、黄大足、邹赛和谭晓兰编写了第3章的部分内容。

　　本书是作者多年从事网页设计工作及近年来从事网页设计教学的经验总结，在编写过程中，我的学生眭艳凤、郭文静、田梦洁、石灵智、何娴、叶艳、练小祥、容莉莉等提出了很多有创意的想法和建议，为本书的编写提供了帮助，在此向他们及所有关心本书编写工作的人士表示感谢。

　　由于本人水平和教学经验有限，书中错误和不妥之处在所难免，欢迎广大读者和同行批评指正。

目 录

　　第1章 网页设计概述 10

　　1.1 初识网页设计 10

　　1.1.1 什么是网页 10

　　1.1.2 网页设计的两个基本问题 11

　　1.1.3 网页设计语言--HTML简介 12

　　1.1.4网页制作软件 13

　　1.2 网站的建立 13

　　1.2.1 网站的特征 14

　　1.2.2 在Dreamweaver中建立站点 14

　　1.3 Web服务器与浏览器 16

　　1.3.1 Web服务器的作用 17

　　1.3.2浏览器的种类和作用 17

　　1.4 静态网页和动态网页 18

　　1.5 URL的含义和结构 20

　　1.6 域名与主机的关系 21

　　习 题 1 22

　　第2章HTML 22

　　2.1 HTML概述 22

　　2.1.1 HTML文档的结构 23

　　2.1.2 Dreamweaver的开发界面 24

　　2.1.3使用DW新建HTML文件 24

　　2.1.4 HTML标记 25

　　2.1.5 常见的HTML标记及属性 26

　　2.2在网页中添加文本 26

　　2.2.1 文本格式标记 27

　　2.2.2文本的换行和空格 28

　　2.2.3 文本中的字符实体 29

　　2.2.4字体标记 30

　　2.2.5创建列表 31

　　2.3 利用DW代码视图提高效率 32

　　2.3.1 代码提示 32

　　2.3.2 拆分视图和代码快速定位 33

　　2.3.3 DW中的常用快捷键 34

　　2.4 插入图像 34

　　2.4.1 img>标记 35

　　2.4.2 网页中支持的图像格式 35

　　2.5 创建超链接 37

　　2.5.1 超链接标记a> 37

　　2.5.2 绝对URL与相对URL 38

　　2.5.3 超链接的种类(href属性的取值) 40

　　2.5.4 超链接目标的打开方式 40

　　2.5.5 超链接制作的原则 41

　　2.5.6 DW中超链接属性面板的使用 41

　　2.6插入flash及多媒体元素 42

　　2.6.1 插入flash的方法 42

　　2.6.2 插入视频或音频文件 43

　　2.6.3 HTML 5新增的多媒体标记 44

　　2.7 创建表格 46

　　2.7.1 表格标记(table>) 46

　　2.7.2 行tr>和单元格标记(td>、th>) 48

　　2.7.3 在DW中操作表格的方法 51

　　2.7.4制作固定宽度的表格 52

　　2.7.5 特殊效果表格的制作 53

　　2.7.6 用普通表格与布局表格进行网页布局 55

　　2.7.7 表格布局综合案例--制作太阳能网站 57

　　2.8 创建表单 59

　　2.8.1form>标记及其属性 59

　　2.8.2 input/>标记 61

　　2.8.3 select>和option>标记 63

　　2.8.4 多行文本域标记textarea> 64

　　2.8.5 表单数据的传递过程 64

　　2.8.6表单中的按钮 66

　　2.8.7 表单的辅助标记 66

　　2.8.8 HTML5新增的表单标记和属性 66

　　2.9 框架标记* 69

　　2.9.1 框架的作用 70

　　2.9.2 frameset>标记 70

　　2.9.3 frame />标记 71

　　2.9.4嵌入式框架标记iframe> 72

　　2.10 头部标记* 73

　　习题 74

　　第3章XHTML与Web标准 75

　　3.1 XHTML与HTML的区别 75

　　3.1.1 文档类型的含义和选择 75

　　3.1.2 XHTML与HTML的重要区别 76

　　3.2 Web标准 77

　　3.2.1 传统HTML的缺点 77

　　3.2.2 Web标准的含义 78

　　3.2.3 Web标准的优势 80

　　3.3 HTML元素的概念 80

　　3.3.1 行内元素和块级元素 81

　　3.3.2 div和span标记 82

　　3.4 HTML5简介* 82

　　3.4.1 HTML5新增的标记 83

　　3.4.2 HTML5语法的改进 84

　　习题 85

　　第4章 CSS 86

　　4.1 CSS基础 86

　　4.1.1 CSS的语法 86

　　4.1.2 在HTML中引入CSS的方法 87

　　4.1.3 选择器的分类 88

　　4.1.4 CSS文本修饰 91

　　4.1.5 伪类选择器及其应用 92

　　4.2 CSS的特性 93

　　4.2.1 CSS的层叠性 93

　　4.2.2 CSS的继承性 95

　　4.2.3 选择器的组合 97

　　4.2.4 CSS 2.1新增选择器简介 102

　　4.3 CSS设计和书写技巧* 106

　　4.3.1 CSS样式总体设计原则 106

　　4.3.2 DW对CSS的可视化编辑支持 107

　　4.3.3 CSS属性的值和单位 109

　　4.3.4 浏览器的私有CSS属性 110

　　4.4盒子模型及标准流下的定位 111

　　4.4.1 盒子模型基础 111

　　4.4.2 盒子模型的应用 115

　　4.4.3 盒子在标准流下的定位原则 117

　　4.5 背景的控制 121

　　4.5.1 CSS的背景属性 122

　　4.5.2背景的基本运用技术 123

　　4.5.3 滑动门技术-背景的高级运用 126

　　4.5.4 背景图案的翻转-控制背景的显示区域 130

　　4.5.5 CSS圆角设计 131

　　4.6 盒子的浮动 135

　　4.6.1 盒子浮动后的特点 135

　　4.6.2 浮动的清除 137

　　4.6.3 浮动的浏览器解释问题 138

　　4.6.4 浮动的应用举例 142

　　4.7 相对定位和绝对定位 147

　　4.7.1 定位属性和偏移属性 147

　　4.7.2 相对定位 148

　　4.7.3 相对定位的应用举例 148

　　4.7.4 绝对定位 150

　　4.7.5 绝对定位的应用举例 152

　　4.7.6 DW中定位属性面板介绍 161

　　4.7.7 与position属性有关的CSS属性 162

　　4.8 CSS+div布局 166

　　4.8.1 分栏布局的种类 167

　　4.8.2 固定宽度布局 168

　　4.8.3 CSS布局的案例--重构太阳能网站 168

　　4.8.4 可变宽度布局 172

　　4.8.5 HTML5 新增的文档结构标记 176

　　4.8.6 CSS 3新增功能和属性一瞥* 177

　　4.9 CSS浏览器的兼容问题* 178

　　习 题 180

　　第5章 Fireworks 182

　　5.1 Fireworks基础 182

　　5.1.1 矢量图和位图的概念 182

　　5.1.2 认识Fireworks的界面 183

　　5.1.3 新建、打开和导入文件 184

　　5.1.4画布和图像的调整 185

　　5.2 操作对象 188

　　5.2.1选择、移动和对齐对象 189

　　5.2.2 变形和扭曲 189

　　5.2.3 改变对象的叠放次序 191

　　5.2.4 设置对象的不透明度 191

　　5.2.5 操作对象的快捷键 192

　　5.3 编辑位图 192

　　5.3.1 创建和取消选区 192

　　5.3.2 复制和移动选区中的内容 196

　　5.3.3 编辑选区中的像素区域 197

　　5.4 绘制矢量图形 199

　　5.4.1 创建矢量图形 199

　　5.4.2 填充和笔触属性 200

　　5.4.3 自由形状工具 203

　　5.4.4 调整矢量线条 205

　　5.4.5 路径的切割和组合 206

　　5.4.6 路径和选区的相互转换 208

　　5.5 文本对象的使用 210

　　5.5.1 文本编辑和修饰的过程举例 210

　　5.5.2 特殊文字效果制作举例 212

　　5.5.3 将文本附加到路径 213

　　5.6 蒙版 214

　　5.6.1 使用"粘贴于内部"创建矢量蒙版 214

　　5.6.2 创建图层蒙版 220

　　5.7 简单GIF动画的制作* 223

　　5.7.1 使用补间实例制作动画 223

　　5.7.2 制作遮罩动画 224

　　5.8 切片及导出 225

　　5.8.1 切片的作用 226

　　5.8.2 切片的基本操作 226

　　5.8.3 切片的实例 228

　　习 题 231

　　第6章 网站开发和网页设计过程 233

　　6.1网站开发的过程 233

　　6.1.1 基本任务和角色 233

　　6.1.2 网站开发过程的各环节 234

　　6.2 遵循Web标准的网页设计步骤 237

　　6.2.1网页设计步骤概述 237

　　6.2.2 内容分析 239

　　6.2.3 HTML结构设计 240

　　6.2.4 原型设计 243

　　6.2.5 网页效果图设计 245

　　6.2.6 布局设计 247

　　6.2.7 视觉设计 252

　　6.2.8 交互效果设计 260

　　6.2.9 CSS布局的优点 262

　　6.3 网站的风格设计 262

　　6.3.1 网站风格设计的基本原则 263

　　6.3.2 网页色彩的搭配 263

　　6.3.3 网页版式设计 271

　　6.4 网站的栏目规划和目录结构设计 274

　　6.4.1 网站的栏目规划 274

　　6.4.2 网站的目录结构设计 275

　　6.5 网站的导航设计* 276

　　6.5.1 导航的实现方法 277

　　6.5.2 导航的设计策略 278

　　6.6 网站的环境准备* 278

　　6.6.1 架设网站的基本条件 278

　　6.6.2 购买主机空间和域名 279

　　6.6.3 配置主机空间和域名 279

　　6.6.4 上传网站 280

　　习 题 6 281

　　第7章 JavaScript 282

　　7.1 JavaScript简介 282

　　7.1.1 JavaScript的特点 282

　　7.1.2 JavaScript的用途 282

　　7.1.3 JavaScript的代码结构 283

　　7.1.4 事件监听程序 285

　　7.1.5 开发和调试JavaScript的工具 286

　　7.2 JavaScript语言基础 287

　　7.2.1 JavaScript的变量 287

　　7.2.2 JavaScript的运算符 288

　　7.2.3 JavaScript数据类型 290

　　7.2.4 数组(array) 292

　　7.2.5 JavaScript语句 294

　　7.2.6 函数 298

　　7.3 对象 299

　　7.3.1 JavaScript对象 299

　　7.3.2 with语句 301

　　7.3.3 this关键字 301

　　7.3.4 JavaScript的内置对象 302

　　7.4 浏览器对象模型BOM 303

　　7.4.1 window对象 303

　　7.4.2定时操作函数 305

　　7.4.3 location对象 308

　　7.4.4 history对象 309

　　7.4.5 document对象 309

　　7.4.6 screen对象 311

　　7.5 文档对象模型DOM 312

　　7.5.1 网页中的DOM模型 312

　　7.5.2 DOM编程引例 313

　　7.5.3 访问指定节点 316

　　7.5.4 访问和设置元素的HTML属性 319

　　7.5.5 访问和设置元素的内容 321

　　7.5.6 访问和设置元素的CSS属性 321

　　7.5.7 创建和替换元素节点 324

　　7.5.8 用DOM控制表单 325

　　7.6 事件处理 327

　　7.6.1 事件流 327

　　7.6.2 处理事件的两种方法 328

　　7.6.3 浏览器中的常用事件 330

　　7.6.4 事件对象 333

　　7.6.5 DOM和事件编程实例 335

　　7.7 JavaScript插件应用举例 340

　　7.7.1 使用Highslide制作lightbox效果 340

　　7.7.2 使用pxiviewer制作图片轮显效果 342

　　7.8 jQuery框架使用入门* 343

　　7.8.1 jQuery框架的功能 343

　　7.8.2下载并使用jQuery 344

　　7.8.3 jQuery中的"$" 345

　　7.8.4 jQuery对象与DOM对象 348

　　7.8.5 jQuery的选择器 349

　　7.8.6 jQuery中的常用方法 352

　　7.8.7 jQuery的应用举例 353

　　7.8.8 jQuery的插件应用举例* 360

　　习 题 362

　　参考文献 364