Web前端开发工程师是近几年计算机行业的一个新兴岗位,而且未来发展的势头强劲,本书针对这一岗位的具体技术需求编写,内容涵盖了该岗位所需的基础及专业知识。全书共分五大部分15章,从平面设计到动画制作,从网页美工到网页动态技术,从易到难地将Web前端技术呈现在广大读者面前,每章以基础知识为主,综合练习为辅,从理论与实践两个方面对学生进行训练,以期学生好地掌握课程内容,快地适应工作岗位。 本书可以作为本、专科学校相关专业的教学用书,也可以作为想要从事Web前端开发职业的技术人员的学习用书。
本书讲授的知识点就是WEB前端岗位的技术需求,本书的案例就是工作中的实际案例。掌握了本书的知识,就是就职于工作岗位的前提条件,从学习过程中训练自身的实践动手能力,综合分析能力及全面的工作能力,以期好地掌握课程内容,很快适应工作岗位。
随着互联网从Web 1.0发展到Web 2.0,网站也在静态页面(用户使用网站的行为也以浏览为主)的基础上添加了各种桌面软件,使网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的,其中包括CSS、HTML、DOM、Ajax、JavaScript等。
Web前端开发是一个很特殊的领域,涵盖的知识面非常广,既有具体的技术,也有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。Web前端开发工程师除了要具有良好的团队合作精神以外,还要有不断学习的目标,在知识层面上包括从最初的Photoshop、Flash、Dreamweaver到现在常用的HTML、CSS、JavaScript、Ajax等技术。本书最真实地贴近Web前端工程师的岗位需求,从基础知识抓起,理论与实践相结合,在注重基础理论讲解的同时加强对动手能力的训练。
本书共分五大部分,第一部分只包括1章,是对Web知识的整体叙述; 第二部分是Photoshop部分,对Photoshop进行了详细讲解; 第三部分是Flash部分,对Flash的常用知识进行了讲解,包括工具箱的使用、动画的制作; 第四部分是HTML+CSS部分,对HTML语言、CSS用于网页美化及布局进行了详细的讲解; 第五部分是JavaScript,包括JavaScript和Ajax、jQuery,对网页的前端技术进行了讲解。
本书由在校的相关专业教师编著,其中,第1~5章由唐哲卿编写,第6、7章由单莹莹编写,第8、9、11、12章由王丽铭编写,第13、15章由刘志凯编写,第14章由郭鑫编写,第10章由王金伟编写。这些教师都在学校从事最基础的Web开发课程的讲解,同时具有企业开发的经验,对Web前端有自己的认识和理解。希望这些知识对在校学生、想从事Web前端开发的读者有一定的指导和帮助作用。
由于编者的能力有限,本书还有很多不足之处,敬请广大读者给予指正。
编者
2015年10月
第1章Web前端开发技术概述
1.1Web概述
1.1.1Web的起源
1.1.2Web技术
1.1.3Web技术的发展
1.1.4Web的工作原理
1.2Web前端的由来
1.2.1Web前端的概念
1.2.2Web前端的开发历史和开发现状
1.3Web前端开发技术
1.4Web前端开发工具
1.5Web前端工程师的职业要求
第2章Photoshop CS6概述
2.1Photoshop简介
2.1.1Photoshop的起源
2.1.2Photoshop的应用
2.1.3图像的基本概念
2.2Photoshop CS6界面简介
2.3Photoshop CS6的基本操作
2.3.1文件的新建
2.3.2文件的存储
2.3.3图像的浏览
2.3.4面板的显示与隐藏
2.3.5标尺、网格和参考线
2.4综合应用
2.4.1界面颜色的修改
2.4.2网格线的设置
2.4.3【首选项】命令
2.4.4显示与隐藏浮动面板
第3章Photoshop工具的应用
3.1选区工具
3.1.1选框工具
3.1.2移动工具
3.1.3套索工具
3.1.4魔棒工具
3.2绘画与修饰工具
3.2.1画笔工具、铅笔工具、颜色替换工具和混合器画笔工具
3.2.2渐变工具和油漆桶工具
3.2.3历史记录画笔工具和历史记录艺术画笔工具
3.2.4修复工具组
3.2.5图章工具组
3.2.6橡皮擦工具组
3.2.7模糊工具、锐化工具和涂抹工具
3.2.8减淡工具、加深工具和海绵工具
3.3路径和矢量工具
3.3.1路径的构成
3.3.2钢笔工具和自由钢笔工具
3.3.3添加锚点工具和删除锚点工具
3.3.4转换点工具
3.3.5路径选择工具和直接选择工具
3.3.6矢量图形工具
3.3.7【路径】面板
3.4文字工具
3.4.1创建文字图像和选区
3.4.2创建段落文字
3.4.3设置文字属性
3.5其他工具
3.5.1裁剪工具
3.5.2辅助工具
3.6综合应用
3.6.1奥运五环的制作
3.6.2矢量图案的制作
3.6.3图像的修剪
3.6.4文字标识的制作
3.6.5Logo的制作
第4章Photoshop图层、通道和蒙版
4.1图层
4.1.1图层的基本概念
4.1.2图层的基本操作
4.1.3图层样式
4.1.4图层的混合模式
4.2通道
4.2.1通道的基本概念
4.2.2【通道】面板
4.3蒙版
4.3.1蒙版的基本操作
4.3.2快速蒙版
4.4综合应用
4.4.1按钮的制作
4.4.2蒙版的合成
4.4.3艺术相框的制作
第5章Photoshop色彩调整及滤镜
5.1图像的编辑
5.2颜色的调整
5.3滤镜
5.4综合应用
5.4.1鲜花字
5.4.2调色
5.4.3时钟
第6章Flash CS6概述
6.1Flash CS6简介
6.2Flash CS6的工作环境
6.3Flash CS6的基本操作
6.3.1文件的新建
6.3.2文件的保存
6.3.3设置影片属性
6.3.4设置首选参数
6.3.5文件的导入与导出
6.4Flash动画的制作流程
6.5综合应用
6.5.1设置舞台的显示比率
6.5.2设置显示网格线
6.5.3自定义工具面板
第7章Flash CS6工具箱
7.1绘制图形的工具
7.1.1线条工具
7.1.2铅笔工具
7.1.3椭圆工具
7.1.4矩形工具
7.1.5多角星形工具
7.1.6刷子工具
7.1.7喷涂刷工具
7.1.8钢笔工具
7.1.9Deco工具
7.2文本工具
7.2.1文本的输入
7.2.2文本的类型
7.2.3文本工具的【属性】面板
7.3图形编辑工具
7.3.1颜料桶工具
7.3.2墨水瓶工具
7.3.3滴管工具
7.3.4橡皮擦工具
7.3.5渐变变形工具
7.3.6任意变形工具
7.3.7骨骼工具和绑定工具
7.4辅助工具
7.4.1选择工具
7.4.2部分选取工具
7.4.3套索工具
7.4.43D旋转工具和3D平移工具
7.5综合应用
7.5.1扇面的绘制
7.5.2商品标识的制作
第8章基础动画的制作
8.1动画的基础知识
8.1.1帧
8.1.2时间轴与图层
8.1.3元件的创建与编辑
8.1.4场景概述
8.1.5动画的类型
8.2逐帧动画
8.2.1直接导入生成逐帧动画
8.2.2创建逐帧动画
8.3动画补间动画
8.3.1动画补间动画的制作
8.3.2动画补间动画的参数设置
8.4形状补间动画
8.4.1形状补间动画的制作
8.4.2形状补间动画的参数设置
8.4.3添加形状提示
8.5综合应用
8.5.1按钮的制作
8.5.2运动小球的制作
8.5.3欢迎光临Banner的制作
8.5.4动画标识的制作
第9章高级动画的制作
9.1引导层动画
9.1.1引导层动画的概念
9.1.2创建引导层动画
9.1.3引导层动画的参数设置
9.1.4取消引导层动画
9.2遮罩层动画
9.2.1遮罩层的概念
9.2.2创建遮罩层动画
9.2.3取消遮罩层
9.3交互式动画
9.3.1ActionScript 3.0简介
9.3.2常用的数据类型
9.3.3语法规则
9.3.4变量及运算符、表达式
9.3.5流程控制语句
9.3.6利用【动作】面板添加动作
9.4综合应用
9.4.1星空的制作
9.4.2Banner的制作
9.4.3动作按钮的应用
第10章HTML与CSS网页设计基础
10.1HTML简介
10.1.1HTML的概念
10.1.2HTML的产生及特点
10.1.3HTML和XHTML
10.2CSS简介
10.2.1CSS的概念
10.2.2CSS的发展与特点
10.2.3CSS在网页中的应用
10.3Dreamweaver CS6的应用
10.3.1窗口界面
10.3.2基本网页的制作
10.3.3表格
10.3.4框架
10.3.5表单
10.3.6声音和动画
10.3.7CSS
第11章HTML
11.1HTML基础
11.1.1一个简单的HTML实例
11.1.2HTML的基本结构
11.1.3HTML的基本标记
11.2文字、列表与图片
11.2.1文字
11.2.2段落
11.2.3列表
11.2.4图片
11.2.5网页背景
11.3超链接
11.3.1创建超链接
11.3.2锚点
11.3.3图像的超链接
11.4表格基础
11.4.1创建表格
11.4.2表格的属性
11.4.3表格行的对齐方式
11.4.4行和列的合并
11.4.5表格的结构
11.4.6表格的标题
11.4.7表格的嵌套
11.5框架基础
11.5.1创建框架
11.5.2分割窗口
11.5.3设置框架边框
11.5.4框架的属性
11.5.5在框架中使用链接
11.5.6浮动框架
11.6表单基础
11.6.1添加表单
11.6.2输入标签
11.6.3下拉列表
11.6.4文本域
11.7多媒体和滚动文字
11.7.1多媒体元素
11.7.2插入背景音乐
11.7.3滚动字幕
11.8综合应用
11.8.1蝴蝶之恋
11.8.2个人主页
第12章CSS与DIV
12.1CSS基础
12.1.1CSS样式表的设置方法
12.1.2选择符
12.1.3伪类和伪元素
12.1.4CSS的优先级
12.1.5CSS中的单位
12.2文字和文本样式
12.2.1设置文字样式
12.2.2设置文本样式
12.2.3空白与换行
12.2.4设置间距
12.2.5CSS注释
12.3设置表格、列表和滚动条样式
12.3.1设置表格样式
12.3.2设置列表样式
12.3.3设置滚动条样式
12.4设置背景、边框、边距和补白
12.4.1设置背景
12.4.2设置边框
12.4.3设置边距
12.4.4设置补白
12.5控制元素布局
12.5.1块级元素和内联元素
12.5.2定位
12.5.3浮动
12.5.4溢出与剪切
12.5.5对象的显示与隐藏
12.6综合应用
12.6.1登录界面
12.6.2花店Banner
第13章JavaScript
13.1JavaScript基础
13.1.1JavaScript概述
13.1.2第一个JS程序
13.1.3编写与规则
13.2JavaScript程序
13.2.1语句和语句块
13.2.2代码
13.2.3消息对话框
13.2.4注释
13.3变量、数据类型和表达式
13.3.1变量
13.3.2数据类型
13.3.3运算符与表达式
13.4控制结构
13.4.1顺序结构
13.4.2分支结构
13.4.3循环结构
13.5函数
13.5.1常用系统函数
13.5.2自定义函数
13.5.3用return返回函数的计算结果
13.5.4函数变量的作用域
13.6JavaScript事件和对象
13.6.1事件
13.6.2常用对象
13.6.3BOM
13.6.4DOM
13.7综合应用
13.7.1显示时间特效
13.7.2图片特效
第14章Ajax
14.1Ajax概述
14.2Ajax原理
14.2.1Ajax的组成部分
14.2.2传统Web应用和Ajax应用
14.3应用Ajax的步骤
14.4JSON
14.4.1JSON语法
14.4.2JSON对象
14.4.3在JavaScript中使用JSON
14.5综合应用
第15章jQuery
15.1jQuery概述
15.1.1jQuery的起源
15.1.2jQuery的功能
15.1.3jQuery的应用
15.2jQuery选择器
15.2.1jQuery选择器的概念
15.2.2jQuery选择器的分类
15.2.3基础选择器
15.2.4层次选择器
15.2.5基本过滤器
15.2.6内容过滤器
15.2.7可见性过滤器
15.2.8属性过滤器
15.2.9表单选择器
15.2.10子元素过滤器
15.2.11表单过滤器
15.3查找与筛选元素
15.3.1过滤函数
15.3.2查找函数
15.3.3用jQuery操作DOM
15.4jQuery工具函数
15.4.1浏览器特性检测
15.4.2数组和对象操作
15.4.3其他工具函数
15.5jQuery UI
15.5.1jQuery UI基础
15.5.2Datepicker控件
15.5.3Button控件
15.6综合应用
参考文献