本教程的内容主要包括Javascript、jQuery、HTML5、CSS3、移动网站开发、网站的发布和优化等。其中JavaScript、HTML5API和CSS3选择器由于学习难度和浏览器兼容性的问题,根据现实中的应用场景进行了省略或缩减。本书中的内容基本可以保证读者能够完成绝大多数电脑网站和手机网站的前端的设计与实现。
基于以上思路,同时针对课程项目的构思、设计、实现、运行的总的过程设计,本教材共分为7章。
第1章对网站前端和课程项目做了总体的介绍,并对课程项目进行构思。
第2章主要介绍JavaScript,并对课程项目中基于JavaScript的网页要素进行了设计和实现。
第3章主要介绍jQuery,并对课程项目中基于jQuery的网页要素进行了设计和实现。
第4章主要介绍HTML5,使学生掌握HTML5的规范,掌握网页的内容设计方法,并对课程项目进行整体的设计和布局实现。
第5章主要介绍CSS3,使学生掌握网页的样式设计方法,对课程项目的基于CSS3的网页要素进行设计和实现。
第6章介绍了移动网站的设计和运行。使学生掌握移动网站的设计方法,能够完成课程项目的手机版本的实现和运行。
第7章介绍了网站的优化和发布,使学生掌握网站的优化技巧,对课程项目的电脑版、手机版进行优化,在服务器上发布和运行课程项目。
第1章项目导学1
1.1项目背景2
1.1.1技术背景2
1.1.2业务背景3
1.2项目构思3
1.3项目分析与项目基本规范4
1.3.1需求分析4
1.3.2网站目录结构5
1.3.3浏览器6
1.3.4HTML规范6
1.3.5CSS规范8
1.3.6网站元素设计10
1.3.7前端工具软件12
1.4小结13
实践环节设计14
习题14
第2章 JavaScript16
2.1JavaScript基础17
2.1.1语法18
2.1.2运算符19
2.1.3控制和循环语句20
2.2函数和事件22
2.2.1JavaScript函数22
2.2.2JavaScript事件23
2.2.3修改HTML和CSS24
2.2.4出错处理28
2.2.5图像装入出错处理29
2.3对象30
2.4数组35
2.5表单校验38
2.6定时器41
2.7小结46
实践环节设计47
习题47
第3章jQuery48
3.1jQuery概述49
3.2使用jQuery的方法49
3.3HTML DOM结构50
3.4jQuery基础51
3.4.1基本选择器52
3.4.2ready函数52
3.4.3基本方法53
3.4.4选择器54
3.4.5事件处理57
3.4.6常用方法59
3.5基于JavaScript的网页元素设计68
3.5.1hover效果68
3.5.2下拉菜单73
3.5.3tab选项卡80
3.5.4手风琴效果87
3.5.5遮罩90
3.6jQuery动画92
3.7jQuery插件102
实践环节设计105
小结105
第4章HTML5107
4.1HTML5概述108
4.2HTML5基本结构108
4.3HTML5布局元素109
4.4常用HTML5基本元素111
4.5表单112
4.6canvas画布113
实践环节设计114
习题114
第5章CSS3115
5.1CSS3概述116
5.2阴影与圆角116
5.3CSS3背景118
5.4CSS3 动画120
5.5CSS3变形125
5.6小结132
实践环节设计132
习题132
第6章移动网站开发133
6.1移动网站开发概述134
6.2网页布局134
6.3内容设计135
6.4JavaScript142
6.4.1移动平台上的JavaScript库142
6.4.2触屏JavaScript事件142
6.5小结143
实践环节设计143
习题144
第7章网站的发布与优化145
7.1网站测试146
7.2网站前端的优化146
7.2.1SEO146
7.2.2CDN146
7.2.3服务器端优化147
7.2.4文件的压缩147
7.2.5代码规范147
7.3网站的发布148
7.3.1WWW服务器148
7.3.2FTP148
7.3.3项目发布149
实践环节设计151
习题151
附录学习知识要点及能力要点152
参考文献154
本教程的编写基于课程项目(课程项目),对实际项目中暂时不能用到的内容,进行了删减或省略。希望读者能够在阅读本书时,根据书中的规划完成一个实际的项目需求分析、设计、实现和运行。前端的学习必须通过实践来进行,一个好的项目也是对一个初出茅庐的没有工作经验的新人的最好的能力证明。