网页设计与网站建设第六讲

网页设计与网站建设

（第六讲）主讲教师：袁旭信息科学与技术学院五、利用CSS+Div布局网页CSS布局基础知识CSS布局方法岭南师范学院1上讲重点内容fontstextboxmodelcolorfloats岭南师范学院2CSS中的fonts设计字体的第一步不是字体的粗细、字体的大小及字体的颜色等等，而是在“本地字体”与“网络字体”这两者中做出选择。岭南师范学院3SystemFonts被广泛支持选择有限WebFonts新兴技术旧浏览器不支持CSS中使用的字体必须已安装在计算机上5.2CSS中的text虽然比不上MicrosoftWord这样的专业软件，利用CSS已经能够实现非常丰富的字体样式。岭南师范学院4font-familyfont-sizefont-weightfont-varianttext-aligntext-indentletter-spacingline-height5.3CSS中的BoxModelBoxModel是CSS中一个非常重要的概念。我们可以这样理解网页中的HTML元素：每一个元素都呆在一个矩形容器中这个矩形容器有margins、borders、width及height四个属性岭南师范学院55.3CSS中的BoxModel岭南师范学院6外边距：网页元素之间的间隔5.3CSS中的BoxModel岭南师范学院7边框：围绕网页元素的边界5.3CSS中的BoxModel岭南师范学院8内边距：元素内容与边框之间的间隔5.3CSS中的BoxModel岭南师范学院9内容宽度：网页元素内容的宽度5.3CSS中的BoxModel岭南师范学院10整个元素的宽度需要通过复杂的公式计算出来5.3.3边框borderborderborder-widthborder-styleborder-color岭南师范学院115.4CSS中的colorbackground-colorcolorborder-color岭南师范学院12前景色背景色边框色5.5CSS中的positionCSS提供了三类布局方式：岭南师范学院13NormalFlowAbsolutePositioningElementFloating六、Javascript入门JavaScript基本语法岭南师范学院14本讲重点内容岭南师范学院15VariablesConditionalOperatorsLoopsFunctionsObjects6.1网页脚本语言JavaScriptJavaScript，一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript

引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML

网页上使用，用来给HTML

网页增加动态功能。引用自维基百科岭南师范学院166.1网页脚本语言JavaScript<scripttype="text/javascript">document.write("Hello,world!");

alert("Hello,world!");

console.log("Hello,world!");</script>岭南师范学院17JavaScript的地位岭南师范学院18JS交互行为CSS样式布局HTML基础架构内容JavaScript的组成Script描述了该语言的语法和基本对象DOM描述处理网页内容的方法和接口BOM描述与浏览器进行交互的方法和接口岭南师范学院19JavaScript的功能嵌入动态文本于HTML页面对浏览器事件作出响应读写HTML元素在数据被提交到服务器之前验证数据检测访客的浏览器信息控制cookies的创建和修改等岭南师范学院206.2在HTML中使用JavaScript与CSS的使用方式类似，JavaScript可以直接内嵌在HTML文档中，或者保存在一个单独的外部文件中。岭南师范学院21外部文件内嵌6.3JavaScript基本结构如果有过一定的C++语言基础，在学习JavaScript时，你会发现原来它是那么地容易。JavaScript中很多语法规则与C++类似。区分大小写每条语句都以分号结束书写不拘一格“//”与“/**/”进行注释岭南师范学院226.4JavaScript中的变量与C++中必须明确指定变量的类型不同，JavaScript中在定义变量时不特意指定它的数据类型。岭南师范学院23这么多不同类型的数据JavaScript全都可以搞定6.4JavaScript中的变量在JavaScript中通过关键字“var”来定义变量：岭南师范学院24变量名可以是字母、数字、下划线及$的组合，且不能以数字开头var变量名;6.4JavaScript中的变量在JavaScript中定义的变量必须赋值之后才能使用。岭南师范学院25先定义后赋值定义时初始化6.4JavaScript中的变量可以为在JavaScript中定义的变量赋予不同类型的值。岭南师范学院26变量myVariable的值为最后一次所赋的值字符串用双引号6.5JavaScript中的条件在JavaScript中通过if语句来构建分支结构。if语句的基本语法与C++一致：岭南师范学院27if(条件){}JavaScript语句块varamount=50;if(amount<100){alert("It'slessthan100");}单分支if6.5JavaScript中的条件在JavaScript中通过if语句来构建分支结构。if语句的基本语法与C++一致：岭南师范学院28varamount=50;if(amount<100){alert("It'slessthan100");}else{alert("It'sbiggerthan100");}if(条件){}JavaScript语句块双分支if6.5JavaScript中的条件岭南师范学院296.6JavaScript中的运算符看到下面这些运算符的名称，大家是否有种似曾相识的感觉？没错，C++中所有与运算符相关的知识在JavaScript中同样适用。岭南师范学院30算术运算符关系运算符逻辑运算符赋值运算符自增减运算符条件运算符6.6JavaScript中的运算符在下面的JavaScript中，你能找到多少种运算符？岭南师范学院31vara=2,b=3;a+=a>b?a--:b++;if(a<b&&b>2)alert("a="+a);elsealert("b="+b);6.7利用浏览器调试JavaScript在所有主流的网页浏览器中都包含有“开发者工具”。岭南师范学院326.7利用浏览器调试JavaScript我们可以利用浏览器的“开发者工具”中的“控制台”来调试JavaScript。岭南师范学院336.7利用浏览器调试JavaScript如果为了输出JavaScript的执行结果而每次都弹出警告窗口不太方便。我们可以通过“console.log”命令在“控制台”中打印JavaScript执行结果。岭南师范学院346.8JavaScript中的循环与C++一样，JavaScript提供了3种语句来构建循环结构。岭南师范学院35whiledowhilefor6.9JavaScript中的函数当JavaScript中的语句越来越多，为了便于管理和维护代码，我们可以将完成某一特定功能的语句块存放到函数当中。岭南师范学院366.9JavaScript中的函数由于JavaScript不区分特定的数据类型，因而定义函数的格式与C++有些许区别。Javascript中利用关键词“function”来定义函数：岭南师范学院37function函数名(参数表列){}JavaScript语句块6.9JavaScript中的函数Javascript中利用关键词“function”来定义函数：岭南师范学院38无需指明参数类型函数可以有返回值6.9JavaScript中的函数在JavaScript中，变量也区分作用域：函数内定义的为局部变量函数外定义的为全局变量岭南师范学院396.10JavaScript中的数组在JavaScript处理数量较多且相互关联的数据时，可以将它们保存到数组中。JavaScript中通过“[]”来指明变量为数组：岭南师范学院40var数组名;=[]6.10JavaScript中的数组可以先定义数组，然后再对数组元素赋值。岭南师范学院41数组元素数据类型可以不同下标从0开始6.10JavaScript中的数组也可以在定义数组的同时对数组元素赋值。岭南师范学院42注意字符串的双引号6.10JavaScript中的数组在JavaScript中，数组其实是一个对象（面向对象中的对象）。岭南师范学院43面向对象太高大上了6.11JavaScript中的对象在JavaScript中，所有的变量其实都是一个对象。此处的对象可不是“你有对象了吗？”中的对象。岭南师范学院446.11JavaScript中的对象对象是面向对象编程思想中的重要概念。对于一个对象来说，它包含以下两大部