新書推薦:
《
佛山华家班粤菜传承 华家班59位大厨 102道粤菜 图文并茂 菜式制作视频 粤菜故事技法 佛山传统文化 广东科技
》
售價:HK$
221.8
《
武人琴音(十周年纪念版 逝去的武林系列收官之作 形意拳一门三代:尚云祥、韩伯言、韩瑜的人生故事 凸显百年武人命运)
》
售價:HK$
43.7
《
剑桥斯堪的纳维亚戏剧史(剑桥世界戏剧史译丛)
》
售價:HK$
154.6
《
禅心与箭术:过松弛而有力的生活(乔布斯精神导师、世界禅者——铃木大拙荐)
》
售價:HK$
66.1
《
先进电磁屏蔽材料——基础、性能与应用
》
售價:HK$
221.8
《
可转债投资实战
》
售價:HK$
99.7
《
王氏之死(新版,史景迁成名作)
》
售價:HK$
54.9
《
敢为天下先:三年建成港科大
》
售價:HK$
77.3
|
編輯推薦: |
本书是HTML5 Web前端开发经典教材,面向工程实际,强调原理性与实用性,被多所高校用作教材。本书全面介绍了基于HTML5 CSS3的Web前端开发技术,在叙述有关原理时安排了大量的相关实例。本书分为9章,内容包括Web前端开发概述,HTML,HTML5与Web标准,CSS样式美化,CSS布局,表格与表单,响应式网页设计,JavaScript与jQuery基础,Bootstrap响应式网页设计等。附录中安排了作为课程教学的实验。全书面向工程实际,强调原理性与实用性。本书适合作为高等院校各专业Web前端开发或网页设计等课程的教材,也可作为网页设计与制作的培训类教材,还可供网站设计和开发人员参考使用。
|
內容簡介: |
本书全面介绍了基于HTML5 CSS3的Web前端开发技术,在叙述有关原理时安排了大量的相关实例。本书分为9章,内容包括Web前端开发概述,HTML,HTML5与Web标准,CSS样式美化,CSS布局,表格与表单,响应式网页设计,JavaScript与jQuery基础,Bootstrap响应式网页设计等。附录中安排了作为课程教学的实验。全书面向工程实际,强调原理性与实用性。 本书适合作为高等院校各专业Web前端开发或网页设计等课程的教材,也可作为网页设计与制作的培训类教材,还可供网站设计和开发人员参考使用。
|
目錄:
|
目录
第1章Web前端开发概述1
1.1Web前端开发与网页设计1
1.1.1网页的概念和本质1
1.1.2网页设计的两个基本问题2
1.1.3网页设计语言HTML简介3
1.1.4网页制作软件4
1.2网站的创建和制作流程5
1.2.1网站的特征5
1.2.2网站的开发步骤6
1.2.3在Dreamweaver中建立站点8
1.3Web服务器与浏览器10
1.3.1Web服务器的作用11
1.3.2浏览器的种类和作用11
1.4URL与域名13
习题114第2章HTML15
2.1HTML概述15
2.1.1HTML文档的结构15
2.1.2Dreamweaver的开发界面16
2.1.3使用DW新建HTML文件17
2.1.4HTML标记17
2.1.5常见的HTML标记及属性18
2.2在网页中添加文本和图像19
2.2.1创建文本和列表19
2.2.2插入图像21
2.3利用DW代码视图提高效率22
2.3.1代码提示23
2.3.2代码快速定位23
2.3.3DW中的常用快捷键24
2.4创建超链接25
2.4.1超链接标记252.4.2绝对URL与相对URL27
2.4.3超链接的种类28
2.4.4超链接目标的打开方式30
2.4.5超链接制作的原则30
2.4.6DW中超链接属性面板的使用31
2.5插入Flash及嵌入其他网页32
2.5.1插入Flash 32
2.5.2嵌入式框架标记33
2.6头部标记34
习题35第3章HTML5与Web标准36
3.1HTML5的改进36
3.1.1HTML5新增的标记36
3.1.2HTML5语法的改进38
3.1.3HTML5的视音频功能39
3.1.4HTML5的绘图功能41
3.2Web标准44
3.2.1传统HTML的缺点44
3.2.2Web标准的含义45
3.2.3Web标准的优势47
3.3HTML元素的概念47
3.3.1行内元素和块级元素48
3.3.2和标记48
习题49第4章CSS样式美化50
4.1CSS基础50
4.1.1CSS的语法50
4.1.2在HTML中引入CSS的方法51
4.1.3选择器的分类53
4.1.4CSS文本修饰56
4.2CSS的特性57
4.2.1CSS的层叠性57
4.2.2CSS的继承性59
4.2.3选择器的组合60
4.3CSS高级选择器64
4.3.1关系选择器64
4.3.2属性选择器66
4.3.3伪类选择器67
4.3.4使用过渡属性配合动态伪类效果70
4.3.5伪元素选择器73
4.4CSS设计和书写技巧75
4.4.1CSS样式总体设计原则75
4.4.2DW对CSS的可视化编辑支持76
4.4.3CSS属性的值和单位79
4.4.4网页中的字体80
4.4.5字体图标技术82
4.5盒子模型及其属性84
4.5.1盒子模型概述84
4.5.2边框border属性85
4.5.3圆角borderradius属性87
4.5.4图像边框borderimage属性89
4.5.5padding和margin属性91
4.6标准流下的定位及应用92
4.6.1标准流下的定位原则92
4.6.2margin合并现象95
4.6.3盒子模型的应用96
4.6.4Chrome浏览器的CSS调试功能99
4.7背景的运用100
4.7.1CSS的背景属性100
4.7.2背景的基本运用技术104
4.7.3滑动门技术107
4.7.4背景图像的翻转111
4.7.5传统圆角效果112
4.8CSS3样式美化功能114
4.8.1阴影和发光效果114
4.8.2渐变效果117
4.8.3描边效果120
4.8.4遮罩效果121
4.9变形与动画效果123
4.9.1平面变形效果123
4.9.23D变换效果126
4.9.3animation动画效果131
习题134第5章CSS布局137
5.1浮动137
5.1.1盒子浮动后的特点137
5.1.2清除浮动元素的影响140
5.1.3清除浮动影响的方法140
5.2浮动的应用举例143
5.2.1图文混排及首字下沉效果143
5.2.2水平导航条144
5.2.3新闻栏目框145
5.2.4微博对话框148
5.3相对定位149
5.3.1定位属性和偏移属性149
5.3.2相对定位的特点149
5.3.3相对定位的应用举例150
5.4绝对定位和固定定位152
5.4.1绝对定位152
5.4.2绝对定位的应用举例154
5.4.3固定定位163
5.4.4与定位属性有关的CSS属性163
5.4.5overflow属性166
5.4.6verticalalign属性167
5.5CSS分栏布局168
5.5.1分栏布局的种类169
5.5.2网页居中的方法170
5.5.3131版式网页布局170
5.5.4121可变宽度布局174
5.5.5CSS两列布局案例176
5.5.6HTML5 新增的文档结构标记181
5.5.7HTML5网页布局案例183
5.6CSS3新增的布局方式186
5.6.1弹性盒布局186
5.6.2分栏布局190
5.7CSS浏览器的兼容问题192
习题193第6章表格与表单195
6.1创建表格195
6.1.1表格标记195
6.1.2表格行和单元格标记197
6.1.3在DW中操作表格的方法199
6.1.4制作固定宽度的表格201
6.1.5特殊效果表格的制作201
6.2使用CSS美化表格203
6.2.1边框和背景的美化203
6.2.2隔行变色效果204
6.3创建表单205
6.3.1标记及其属性206
6.3.2标记208
6.3.3和标记211
6.3.4多行文本域标记211
6.3.5表单数据的传递过程212
6.3.6表单中的按钮213
6.3.7表单的辅助标记214
6.3.8HTML5新增的表单标记和属性215
6.4美化表单218
6.4.1搜索框218
6.4.2用户登录表单219
6.4.3用户注册表单222
习题223第7章响应式网页设计225
7.1响应式网页的基本技术225
7.1.1媒体查询225
7.1.2流式布局227
7.1.3自适应图片229
7.1.4一列变宽、一列固定的方法231
7.1.5响应式网页的头部代码设置231
7.2响应式布局的网站实例232
7.2.1页面总体布局的实现233
7.2.2页头的设计235
7.2.3响应式导航条的制作235
7.2.4响应式栏目的制作237
习题239第8章JavaScript与jQuery基础240
8.1JavaScript的代码结构240
8.2JavaScript的事件编程242
8.2.1JavaScript语言基础242
8.2.2常用JavaScript事件242
8.2.3事件监听程序243
8.3JavaScript DOM编程245
8.3.1动态效果的实现245
8.3.2获取指定元素246
8.3.3访问元素的CSS属性247
8.3.4访问元素的内容249
8.4使用浏览器对象249
8.5jQuery基础253
8.5.1jQuery的功能和使用253
8.5.2jQuery中的$254
8.5.3jQuery对象与DOM对象258
8.5.4jQuery的选择器260
8.5.5jQuery的事件绑定261
8.5.6jQuery中的常用方法262
8.5.7jQuery应用举例263
习题265第9章Bootstrap响应式网页设计267
9.1Bootstrap的使用267
9.1.1下载和引用Bootstrap框架267
9.1.2Bootstrap栅格系统269
9.1.3使用栅格系统进行响应式布局271
9.2Bootstrap中的网页组件277
9.2.1基于组件的网页制作方法277
9.2.2导航条279
9.2.3轮播插件283
9.2.4选项卡面板286
9.2.5媒体对象288
9.2.6折叠面板组290
9.2.7提示框与弹出框292
9.2.8模态弹窗293
9.3Bootstrap网页重构实例295
习题297附录实验299
实验1个人简历网页299
实验2圆饼型盒子的制作299
实验3制作背景翻转的图标300
实验4栏目框的制作300
实验5页头和导航条的制作301
实验6图片滚动栏的制作301
实验7网页的布局设计301
实验8网站首页的实现301
实验9网站列表页的实现301
实验10制作下拉菜单302
实验11制作Tab面板302
实验12使用Bootstrap制作响应式网页302参考文献303
|
內容試閱:
|
前言
Web前端开发是由很多互联网公司一致命名的一种工作职位。毋庸置疑,Web前端开发这个职位是由网页设计演变而来,但随着近几年来,移动互联网时代的到来,Web前端开发已经有了更广泛的内涵,因为像微信公众号、手机APP其中的Web APP和Hybrid APP和移动端网页的开发都需要Web前端开发技术。
目前,Web前端开发对人才的需求量非常大,前端开发人员的薪酬通常比同层次的后端开发人员薪酬水平还要高,这是因为前端开发由于涉及界面设计和交互,个性化很强,导致项目的重用性水平低,而后端很多项目都可以重用,比如许多不同的网站可以共用一个后台,这就造成了前端开发人员的需求量远大于后端开发人员的需求量。
Web前端开发技术的基础是HTML5、CSS3和JavaScript。虽然其主要任务仍然是网页设计,但已经产生了巨大的变化,比如通过CSS3就能制作出炫丽的动画和交互效果,而过去却要依赖于Flash或JavaScript;固定宽度的网页布局已逐步向能适应各种屏幕的响应式网页布局华丽转变;基于组件式的网页设计思想相对于从头开始的网页制作方法来说,能极大地减少开发人员的工作量。
Web前端开发的教学主要有两项任务,即传授知识和培养兴趣。笔者认为教学成功的关键是在这两方面寻找一个折中。如果上课讲授的知识点过多过细,则学生思考和实践的环节就会减少;如果讲授的知识点过少,片面强调让学生实践,则学生由于知识点没理清,又容易陷入低水平的盲目实践。
为此,本书在编写时,注重培养学生兴趣,在章节安排上尽快让学生进入CSS阶段的学习,将表格和表单的内容安排在CSS基础知识的后面,因为只有接触到CSS,学生才会领会到这门课程的乐趣。并且本书重点讲授CSS的内容,因为CSS仍然是Web前端开发这门课程最重要的内容。其次,考虑到初学者以前并未接触过任何网页设计语言,本书将传统的CSS知识和CSS3的内容进行统一编排,从而使读者更容易系统掌握CSS的传统技术和新技术。Bootstrap作为前端开发的一种流行技术,代表了网页制作技术的两大发展趋势: 一是响应式网页布局的趋势,可以说,响应式网页布局将是网页布局历史上的第二次革命,第一次革命是CSS布局取代表格布局;二是基于组件的网页制作方法,这种网页制作方法能避免从头开始写代码,避免了过去网页制作过程中令人厌倦的重复劳动,极大地提高了网站的开发效率,因此Bootstrap必将引起更多网站开发者的重视。
为了便于读者阅读和减少篇幅,本书采用精简代码的编排方式,读者一般都能够容易地将其还原成完整代码,同时每个代码都标有序号,读者能够方便地在配套源代码中找到完整代码并能直接运行。
本书的教学大概需要64学时,其中实验学时不少于16学时。如果学时量不足,则可以主要讲授第2、4、5章的内容。带*号的章节建议学生自学。
本书为将其作为教材的教师提供教学用多媒体课件、实例源文件和实验大纲,可登录本书的配套网站http:wxy.hynu.cnec免费下载,也可和作者联系微信号: tangsx4,邮箱: tangsix@163.com。
本书由唐四薪编写了第3~10章。林睦纲、唐琼编写了第1章和第2章的部分内容。参加编写的还有谭晓兰、喻缘、刘燕群、唐沪湘、刘旭阳、陆彩琴、唐金娟、谢海波、尹军、唐琼、何青、唐佐芝、舒清健等,他们编写了第2章的部分内容。
本书的写作得到衡阳师范学院十三五专业综合改革试点项目计算机科学与技术的支持。本书是衡阳市科技计划项目2016KJ02的研究成果。
由于编者水平和教学经验有限,书中错误和不妥之处在所难免,欢迎广大读者和同行批评指正。
作者
2018年3月
|
|