基于Web标准的网页设计与制作（微课版）_唐四薪、唐琼、李浪_9787302652601

本书内容涵盖HTML 5、CSS 3、JavaScript、jQuery和Vue.js等各种网页设计与制作技术，在叙述有关原理时安排大量的相关实例。本书分为8章，内容包括网页设计与网站开发概述，HTML 5、CSS语法基础、CSS盒子模型、CSS布局、网站开发过程与环境配置、Photoshop、JavaScript及其框架。本书面向工程实际，强调原理性与实用性。
本书适合作为高等院校各专业网页设计或Web前端开发等课程的教材，也可作为网页设计与制作的培训类教材，还可供网站设计和开发人员参考使用。

近20年来，互联网领域涌现出大量创新技术和产品，使得互联网领域的产品开发成为众多年轻人渴望学习的领域。互联网开发的技术基础仍然是网页设计，网页设计技术历经20多年始终在快速发展变化。网页设计也是高校很多专业学生的一项技能，就业市场对网页设计的人才需求量很大。网页设计技能之所以重要，是因为网页设计涉及界面设计与交互，个性化要求很高，导致网页设计项目的重用性水平很低，这使得网页设计人才需要掌握更多相关领域的知识，网页设计者需要具备良好的自学能力和强烈的兴趣。
网页设计与制作这门课程的特点是入门比较简单，但它的知识结构庞杂，想成为一名优秀的网页设计师，需要较长时间的理论学习和大量的实践操作及项目实训经验。学习网页设计有两点最重要：一是务必重视对原理的掌握；二是在理解原理的基础上一定要多练习，多实践，通过练习和实践发现实际问题。本书在编写过程中注重原理和实用，这表现在所有的实例都是按照其涉及的原理分类，而不是按照应用的领域分类，将这些实例编排在原理讲解之后，就能使读者迅速理解原理的用途。同时，由于加深了对原理的理解，因此可以对实例举一反三。
目前，网页设计的知识体系结构以HTML 5、CSS 3、JavaScript为框架，这3种语言分别定义了网页的结构、表现和行为，Web标准的含义就是将网页划分为结构、表现和行为，各部分相对独立，尽管Web标准已成为当今网页设计领域的一种共识，不被经常提起，但对于初学者来说，理解并遵循Web标准设计网页对快速掌握网页设计技能是有重要意义的。在网页设计各种语言中，CSS是核心。为此，本书在编写时注重培养学生兴趣，在章节安排上将CSS的内容作为重点，按照CSS的知识体系将CSS的内容分为3章。这是因为只有接触CSS，学生才会领会网页设计课程的乐趣。其次，考虑到初学者以前并没接触过任何网页设计语言，本书将传统CSS知识和CSS 3的内容进行统一编排，帮助读者更容易地系统掌握CSS的传统技术和新技术。
网页设计是技术和艺术的结合，因此网页的风格设计和色彩搭配也是网页初学者应当重点掌握的内容，考虑到大多数初学者没有任何平面设计基础，本书在编写时安排了色彩的基本原理，网页色彩的搭配等内容，同时安排了Photoshop章节，帮助初学者掌握使用该软件进行网页图像的合成、网页效果图的制作等技能。
为了便于读者阅读和减少篇幅，本书采用精简代码的编排方式，读者一般都能够容易地将其还原成完整代码，同时每个示例都标有序号（例如，例34对应的源代码文件就是34.html），读者能够容易地在配套源代码中找到完整代码并能直接运行。
本书的教学大概需要64学时，其中实验学时不少于16学时，如果学时量不足，则可以主要讲授第1～5章的内容。
本书为使用本书作为教材的教师提供教学用多媒体课件、实例源文件和实验大纲，可登录清华大学出版社官网免费下载。书中提供了有关重点和难点内容的微课视频，读者扫描书中二维码即可观看。
本书由唐四薪、唐琼、李浪编著，唐四薪编写了第3～8章的内容，唐琼编写了第1章和第2章的部分内容。李浪编写了第2章的部分内容。
由于编者水平和教学经验有限，书中错误和不妥之处在所难免，欢迎广大读者和同行批评指正。

编者2023年9月

第1章网页设计与网站开发概述1
1.1网页设计与Web前端开发1
1.1.1网页的概念和本质1
1.1.2网页设计的两个基本问题2
1.1.3网页结构语言HTML3
1.2网站的创建和制作流程4
1.2.1网站的特征5
1.2.2网站的开发步骤5
1.2.3网站的开发工具7
1.2.4在DW中建立站点8
1.3Web服务器与浏览器9
1.3.1Web服务器的作用9
1.3.2浏览器的种类和作用10
1.4URL与域名11
习题13
第2章HTML 514
2.1HTML概述14
2.1.1HTML文档的结构14
2.1.2DW的开发界面15
2.1.3使用DW新建HTML文件16
2.1.4HTML标记16
2.1.5常见的HTML标记及属性17
2.2创建文本和图像18
2.2.1创建文本和列表18
2.2.2插入图像20
2.3利用DW代码视图提高效率21
2.3.1代码提示21
2.3.2代码快速定位22
2.3.3DW中的常用快捷键22
2.4创建超链接23
2.4.1超链接标记23
2.4.2绝对URL与相对URL25
2.4.3超链接的种类27
2.4.4超链接目标的打开方式28
2.4.5超链接制作的原则28
2.4.6DW中超链接属性面板的使用29
2.5插入多媒体元素及嵌入网页29
2.5.1HTML 5的视音频功能29
2.5.2嵌入式框架标记31<br />2.6创建表格32<br />2.6.1表格标记32<br />2.6.2行和单元格标记34<br />2.6.3特殊效果表格的制作36<br />2.7创建表单38<br />2.7.1<form>标记及其属性38<br />2.7.2<input>标记40<br />2.7.3<select>和<option>标记43<br />2.7.4多行文本域标记<textarea>43<br />2.7.5表单数据的传递过程44<br />2.7.6表单中的按钮45<br />2.7.7表单的辅助标记46<br />2.7.8HTML 5新增的表单标记和属性46<br />2.8HTML 5的改进50<br />2.8.1HTML 5新增的标记50<br />2.8.2HTML 5语法的改进51<br />2.8.3HTML 5的绘图功能52<br />2.8.4HTML元素的分类54<br />2.9HTML头部标记56<br />习题57<br />第3章CSS语法基础59<br />3.1CSS基础59<br />3.1.1CSS的语法59<br />3.1.2在HTML中引入CSS的方法60<br />3.1.3选择器的分类62<br />3.1.4CSS文本修饰64<br />3.2CSS的特性65<br />3.2.1CSS的层叠性65<br />3.2.2CSS的继承性67<br />3.2.3选择器的组合68<br />3.3CSS高级选择器71<br />3.3.1关系选择器72<br />3.3.2属性选择器73<br />3.3.3伪类选择器74<br />3.3.4使用过渡属性配合动态伪类效果77<br />3.3.5伪元素选择器80<br />3.4CSS设计和书写技巧82<br />3.4.1CSS样式总体设计原则82<br />3.4.2DW对CSS的可视化编辑支持83<br />3.4.3CSS的值和单位85<br />3.4.4网页中的字体86<br />3.4.5字体图标技术87<br />3.5Web标准89<br />3.5.1传统HTML的缺点89<br />3.5.2Web标准的含义90<br />3.5.3Web标准的优势92<br />习题92<br />第4章CSS盒子模型94<br />4.1盒子模型及其属性94<br />4.1.1盒子模型概述94<br />4.1.2边框border属性95<br />4.1.3圆角borderradius属性97<br />4.1.4图像边框borderimage属性99<br />4.1.5padding和margin属性100<br />4.1.6boxsizing属性102<br />4.2标准流下的定位及应用102<br />4.2.1标准流下的定位原则102<br />4.2.2margin合并现象104<br />4.2.3盒子模型的应用106<br />4.2.4Chrome浏览器的调试功能108<br />4.3背景的运用109<br />4.3.1CSS的背景属性109<br />4.3.2背景的基本运用技术112<br />4.3.3滑动门技术115<br />4.3.4背景图像的翻转119<br />4.3.5传统圆角效果120<br />4.4CSS 3样式美化功能121<br />4.4.1阴影和发光效果121<br />4.4.2渐变效果124<br />4.4.3描边效果127<br />4.4.4遮罩效果127<br />4.5变形与动画效果129<br />4.5.1平面变形效果129<br />4.5.23D变换效果132<br />4.5.3animation动画效果136<br />习题138<br />第5章CSS布局140<br />5.1浮动140<br />5.1.1盒子浮动后的特点140<br />5.1.2清除浮动元素的影响142<br />5.1.3清除浮动影响的方法143<br />5.2浮动的应用举例145<br />5.2.1图文混排及首字下沉145<br />5.2.2水平导航条147<br />5.2.3新闻栏目框147<br />5.2.4微博对话框150<br />5.3相对定位151<br />5.3.1定位属性和偏移属性151<br />5.3.2相对定位的特点151<br />5.3.3相对定位的应用152<br />5.4绝对定位和固定定位154<br />5.4.1绝对定位154<br />5.4.2绝对定位的应用156<br />5.4.3固定定位163<br />5.4.4与定位属性有关的CSS属性164<br />5.4.5overflow属性166<br />5.4.6verticalalign属性167<br />5.5CSS分栏布局168<br />5.5.1分栏布局的种类169<br />5.5.2网页居中的方法170<br />5.5.3131版式网页布局170<br />5.5.4121可变宽度布局173<br />5.5.5CSS两列布局案例176<br />5.5.6HTML 5文档结构标记180<br />5.5.7HTML 5网页布局案例181<br />5.6CSS 3新增的布局方式184<br />5.6.1弹性盒布局184<br />5.6.2分栏布局188<br />习题190<br />第6章网站开发过程与环境配置192<br />6.1网站开发的过程192<br />6.1.1基本任务和角色192<br />6.1.2网站开发过程的各环节194<br />6.2网站的风格与色彩设计198<br />6.2.1网站风格设计的基本原则198<br />6.2.2色彩的模式199<br />6.2.3色彩的特质与心理感觉201<br />6.2.4网页中色彩的角色205<br />6.2.5色彩的对比和调和206<br />6.2.6网页中色彩搭配的原则207<br />6.2.7网页版式设计208<br />6.3网站的环境准备211<br />6.3.1架设网站的基本条件212<br />6.3.2配置主机空间和域名212<br />6.3.3上传网站和网站备案213<br />习题213<br />第7章Photoshop215<br />7.1Photoshop基础215<br />7.1.1矢量图和位图的概念215<br />7.1.2认识Photoshop的界面216<br />7.1.3新建、打开和置入文件217<br />7.1.4修改图像和画布大小218<br />7.2编辑位图219<br />7.2.1图层及栅格化图层219<br />7.2.2创建和取消选区220<br />7.2.3图层的变换和透视222<br />7.3绘制矢量图形223<br />7.3.1创建矢量图形223<br />7.3.2微信图标的制作224<br />7.4编辑和修饰文本226<br />7.4.1文本编辑和修饰的过程227<br />7.4.2将文本附加到路径228<br />7.5蒙版229<br />7.5.1创建剪贴蒙版229<br />7.5.2创建位图蒙版231<br />7.6切片及导出233<br />7.6.1切片的作用233<br />7.6.2切片的基本操作234<br />7.6.3切片操作的案例235<br />习题238<br />第8章JavaScript及其框架240<br />8.1JavaScript的代码结构240<br />8.2JavaScript的事件编程242<br />8.2.1JavaScript语言基础242<br />8.2.2常用JavaScript事件242<br />8.2.3事件监听程序243<br />8.3JavaScript DOM编程245<br />8.3.1动态效果的实现245<br />8.3.2获取指定元素246<br />8.3.3访问元素的CSS属性247<br />8.3.4访问元素的内容248<br />8.4使用浏览器对象249<br />8.5jQuery基础252<br />8.5.1jQuery的功能和使用252<br />8.5.2jQuery中的$253<br />8.5.3jQuery对象与DOM对象256<br />8.5.4jQuery的选择器258<br />8.5.5jQuery的事件绑定259<br />8.5.6jQuery中的常用方法259<br />8.5.7jQuery应用举例260<br />8.6Vue基础263<br />8.6.1简单的Vue程序263<br />8.6.2Vue绑定数据实现动态效果265<br />8.6.3vif和vfor指令268<br />习题272<br />参考文献274</p> </div> </div> <div class="clear"></div> <script type="text/javascript"> function tab(a,b,c) { for(i=1;i<=b;i++){ if(c==i) { // 判断选择模块 document.getElementById(a+"_mo_"+i).style.display = "block"; // 显示模块内容 document.getElementById(a+"_to_"+i).className = "no"; // 改变菜单为选中样式 } else{ // 没有选择的模块 document.getElementById(a+"_mo_"+i).style.display = "none"; // 隐藏没有选择的模块 document.getElementById(a+"_to_"+i).className = "q"; // 清空没有选择的菜单样式 } } } </script> <div class="b-comment"> <div class="mt"> <span> 我要评论</span> </div> </div> <div class="c-comment"> <form method="post" name="comment" action="/book_comment.asp"> <table border="0" cellspacing="1" cellpadding="3" class="commentlist"> <input name=id type=hidden value="2675110"> <input name=title type=hidden value="基于Web标准的网页设计与制作（微课版）"> <tr> <th>您的姓名</th> <td><input type="text" name="name" size="20" maxlength="20" class="form" />  验证码：<input name="verifycode" type="text" size="7" style=" height:18px;" /> <img src="safecode.asp?" onClick="this.src+=Math.random()" alt="图片看不清？点击重新得到验证码" style="cursor:hand;" height="18" /></td> </tr> <tr> <th>留言内容</th> <td><textarea name="content" id="content" cols="46" rows="3" class="form-textarea" wrap=physical onKeyDown="checkMaxInput(this.form)" onKeyUp="checkMaxInput(this.form)" style="overflow:auto"></textarea></td> </tr> <tr> <td colspan="2"><input type="submit" value=" 发表评论 " name="cmdok" class="button" /><input type="hidden" name="do" value="save" /></td> </tr> </table> </form> </div>  </div> </td> </tr> </table> <div class="copyright"> <p><a href="about.asp" title="">平台介绍</a>|<a href="Honor.asp" title="">荣誉资质</a>|<a href="lxwm.asp" target="_blank" title="">联系我们</a>|<a href="/myadmin/" title="" target="_blank">出版社登陆</a></p> <div class="copyright_n"> Copyright 1993-2020 <a href="http://jiaocai.book1993.com/">jiaocai.book1993.com</a> Inc.All Rights Reserved<br> 公司名称：山东中教产业发展股份有限公司  公司地址：山东省济南市大桥镇128号  联系电话：400-0531-123 <br>版权所有：山东中教产业发展股份有限公司 <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?6cf215445bbd4b25f533195a656afb36"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script>  </div> <div class="ban_img"><img src="images/ban_img.png" width="691" height="55"></div> <script src="/images/common.js" language="javascript"></script> </body></html>