HTML5、CSS3与jQuery俨然成为了标準Web製作技术的黄金组合。《HTML5+CSS3+jQuery套用之美》由韩国专业视觉设计师倾力奉献其多年商业网站设计与製作的从业经验,通过八大商业案例,以HTML5搭建结构、CSS3设定样式、jQuery实现动态套用这三者相结合的实际套用方式,详细讲解它们的新技术点,以及流行套用热点的设计思路与製作方法。技术核心穿插在实际操作中阐述,更便于读者在了解技术理论的同时明晰其套用本质。《HTML5+CSS3+jQuery套用之美》案例完整,跟学书中实例后,相信会使读者的网页设计与製作水平均有实质提升。 《HTML5+CSS3+jQuery套用之美》适合Web设计人员和前端开发人员阅读,也适合作为相关培训用途的参考用书。
基本介绍
- 书名:HTML5+CSS3+jQuery套用之美
- 作者:池勛
- 译者:武传海
目录
第1章 搭建网页开发环境 015
客户与主机 016
搭建Web客户测试环境 017
选择与安装网页製作工具 023
搭建Web主机环境 025
选择内容管理系统(CMS) 029
第2章 HTML5、CSS3、jQuery基础 030
超文本标记语言,HTML5基础 031
创建HTML5基本文档 031
编写正文主体:列表 035
HTML5大纲算法(Outliner)与Section元素 036
层叠样式表,CSS3基础 039
控制正文主体(body)样式 039
控制标题(h1,h2)样式 041
控制网页背景与字型 042
脚本语言JavaScript基础 045
JavaScript Library,jQuery基础 058
第3章 设计网页动态横幅广告(Banner) 063
设计效果预览 064
设计网页布局 065
编写HTML5代码 066
输入单击Banner时要连结的网站 066
向Banner中添加图片与文字 066
使用class属性标识各元素 067
编写CSS3样式表 069
控制body样式 069
控制Banner样式 069
向Banner插入背景图片 070
设定横幅广告的Logo图像 071
向Banner上的文字套用字型 073
设定Banner文字的位置与颜色 074
设计滑鼠指针未移动到Banner上的Banner 075
使用jQuery播放声音 081
浏览器兼容性检查 085
第4章 设计气泡悬浮框 087
设计效果预览 088
设计网页布局 089
编写HTML5代码 090
编写CSS3样式表 093
控制body样式 093
设定标题字型样式 093
控制图片样式 095
控制气泡悬浮框1:基本样式 099
控制气泡悬浮框2:位置 100
控制气泡悬浮框3:添加圆角与尾巴 102
控制气泡悬浮框4:製作Transition动画 104
使用jQuery实现淡入/淡出效果 109
检查是否支持CSS3的transition 属性 109
使用jQuery实现淡入/淡出效果 111
第5章 製作Lava Lamp滑动导航条 117
设计效果预览 118
设计网页布局 119
编写HTML 5代码 120
编写CSS3样式表 123
控制body样式 123
控制标题样式:套用英文网页字型 123
控制导航条框线样式 124
控制导航条选单项样式 126
控制导航条样式:渐变 128
指定默认激活的选单项 130
编写jQuery脚本代码 131
声明变数与引用文档对象 132
控制lava样式 135
设定lava的位置 136
向lava套用渐变 138
调整lava的位置 138
事件监听与处理 140
创建命名空间(Namespace) 144
製作外挂程式 145
第6章 製作气泡动画按钮 149
设计效果预览 150
网页布局设计 151
编写HTML5代码 152
编写CSS3样式表 155
控制body样式 155
向body添加彩虹渐变 155
从CSS代码中提取重複代码,使用LESS重写 159
创建LESS函式 161
控制buttons_wrap样式 162
向jQuery按钮添加声音外挂程式 175
第7章 设计带动画的选项卡选单 183
设计效果预览 184
设计网页布局 185
编写HTML5代码 186
兼容IE 8之前版本的代码 186
套用Web字型与调用外部档案 188
编写网页结构代码 189
编写CSS3与LESS样式代码 194
控制基本样式 194
向整个选项卡区域与标题指定样式 196
控制选项卡样式 196
选项卡区域样式控制1:不支持JavaScript脚本的情形 199
选项卡区域样式控制2:支持JavaScript脚本的情形 200
编写jQuery外挂程式 201
编写使用外挂程式的脚本档案 201
编写外挂程式 202
第8章 製作动态表格 209
设计效果预览 210
设计网页布局 211
编写HTML5表格代码 212
编写基本结构 212
编写表单代码 213
编写CSS3与LESS样式代码 217
编写基本样式控制代码 218
为整个表单区域(容器元素)编写样式代码 218
设定标题样式 222
控制表单元素样式1:标籤与输入文本框 223
控制表单元素样式2:用户使用条款与信息收集 224
控制表单元素样式3:向输入文本框左侧添加图示 224
控制表单元素样式4:提交按钮 226
使用jQuery编写脚本代码 229
第9章 使用HTML5製作视频播放器 233
设计效果预览 234
设计网页布局 235
编写HTML5视频播放器 236
编写基本的HTML代码 236
编写JavaScript脚本自动生成的代码 240
编写jQuery视频播放外挂程式 242
调用外挂程式&设定初始值 243
建视频播放器容器元素 244
编写视频控制项动态生成代码 247
设定视频控制项按钮 249
设定视频播放进度条 251
製作播放进度条的滑块 252
编写播放条状态更新函式 254
编写声音控制滑块 256
为声音调节按钮编写函式 256
编写CSS3与LESS样式代码 259
基本样式控制 260
为视频容器编写样式代码 262
视频控制项样式1:整体 263
视频控制项样式2:播放按钮 264
视频控制项样式3:播放进度条 265
视频控制项样式4:计时器 268
视频控制项样式5:声音控制项 268
视频控制项样式6:声音调节条 269
设定播放控制条到视频内部,并改变颜色 272
第10章 製作设备感应型网页 277
设计效果预览 278
设计网页布局 279
编写HTML5网页代码 280
header(logo与导航)与header bar 281
contents区域 282
编写CSS3与LESS样式代码 285
设定基本环境(下载normalize.css) 285
编写response.css框架 286
桌面显示样式1:基本样式 290
桌面显示样式2:header 291
桌面显示样式3:header bar 297
桌面显示样式4:contents 299
桌面显示样式5:footer 302
桌面显示样式6:设定拖选区域的背景色与文字颜色 303
为平板电脑编写显示样式 304
为智慧型手机编写显示样式 305
使用JavaScript编写固定的导航选单外挂程式 307