配套课件-网站设计与Web应用开发技术(第三版)1

1、第1章 WWW简介 教学目标教学重点教学过程第2页教学目标理解Internet与网站技术的发展历程Web的基本概念Web技术基础及高级技术介绍Web应用开发基础第3页教学重点Web技术基础及高级技术介绍Web应用开发基础第4页教学过程Internet与WWWWeb的基本概念Web技术基础及高级技术Web应用开发基础第5页1.1 Internet与WWW第6页Internet的发展史ARPANET1969年,美国国防部 (DoD, Department of Defense)实验性质的包交换 (packet-switched) 网络系统1980年,分成APARNET及Milnet: 军事用途19

2、70年USENET, 1980年CSNET及BITNET学术用途NSFNET (National Science Foundation Network)1986年,美国国家科学基金会取代ARPANET成为连结网络的主要网络INTERNET第7页 Internet 的历史 第8页Internet的演进过程19451995Memex Conceived1945WWWCreated1989MosaicCreated1993A MathematicalTheory of Communication1948Packet Switching Invented1964SiliconChip1958First

3、 Vast ComputerNetworkEnvisioned1962ARPANET1969TCP/IPCreated1972InternetNamed and Goes TCP/IP1984HypertextInvented1965Age ofeCommerceBegins1995第9页1.1 Internet与WWW第10页1.1 Internet与WWWInternet的技术基础Internet和Web的包含关系第11页1.1 Internet与WWWInternet的技术基础IPV6TCP/IP 包括近100个协议，其中TCP是传送控制协议;IP(Internet Protocol)是

4、网际网协议。 域名系统(DNS) 实现域名与其所对应的IP地址进行对应和转换 第12页1.1 Internet与WWWInternet提供的服务 WWW服务 文件传输服务(FTP)电子邮件服务(E-mail)视音频业务电子商务对等网服务(P2P) 第13页1.2 WWW概述世界上最大的网中网Internet的核心是TCP/IP协议和包交换Internet实现了与公用电话网的互连Internet是一个用户自己的网络From Dr. Vinton Cerf, Co-Creator of TCP/IP第14页1.2 WWW概述Web的技术基础 统一资源定位技术(URL)实现全球资源的精确定位；用应用

5、层协议(HTTP)实现分布式的信息传送；以超文本技术(HTML)实现信息的表现。这三个特点无一不与信息的分发、获取和利用有关。 超文本传送协议(HTTP) 超文本标记语言(HTML)浏览器(Browser) 第15页1.2 WWW概述Web的高级开发技术 CGIApplet JavaScript Servlet、JSP、ASP和PHP等 Flash SilverLight第16页1.2 WWW概述Web的高级开发技术 CGI通用网关接口(Common Gateway Interface，CGI) 可采用多种编程语言编写可访问数据库但存在一定的安全隐患第17页1.2 WWW概述Web的高级开发技

6、术 Applet 属于Java技术 “胖”客户应用 编程存在一定限制客户端必须安装合适的软件第18页1.2 WWW概述Web的高级开发技术 JavaScript 基于对象和事件驱动并具有安全性能的脚本语言 形成了标准，受到广泛支持 能丰富客户端页面效果，并丰富用户体验可能存在不完全兼容的情况第19页1.2 WWW概述Web的高级开发技术 Servlet、JSP、ASP和PHP等 在服务器端运行属于瘦客户端应用 动态生成HTML 编程难度较大一定程度上受到系统软硬件条件的限制第20页1.2 WWW概述Web的高级开发技术 Flash 和 SilverLight等可生成高度交互性的应用 需要客户端

7、软件支持 制作需要专用的软件第21页1.2 WWW概述WWW的将来 DHTML革命 XML技术 XHTML技术HTML5AJAX技术 第22页1.3 Web应用开发的需求与方法Web需求的发展静态页面 动态页面 活动页面 第23页1.3 Web应用开发的需求与方法Web需求的发展静态页面 第24页1.3 Web应用开发的需求与方法Web需求的发展动态页面 第25页1.3 Web应用开发的需求与方法Web需求的发展活动页面 第26页1.3 Web应用开发的需求与方法应用程序发展的需求 两层结构(Two-Tier) 客户机、服务器胖客户机/瘦服务器 发布较困难第27页1.3 Web应用开发的需求与

8、方法应用程序发展的需求 三层结构(three-tier) 表示层、功能层和数据层 瘦客户机/胖服务器 更灵活，更好的弹性第28页1.3 Web应用开发的需求与方法应用程序发展的需求 基于Web的B/S模式 静态模式一般动态模式 多层动态模式 选取原则 第29页1.3 Web应用开发的需求与方法应用程序发展的需求 RIA(富互联网应用) 结合桌面应用程序的交互式体验，传统的WEB应用的部署灵活性，成本控制特点：立即部署、跨平台、逐步下载等 有关产品：Adobe的Flex、微软的Silverlight、Oracle的JavaFX和Java SWT、XUL、Bindows、Curl、Laszlo和M

9、UILIB等第30页习题1. Internet与WWW有什么关系？2. 统一资源定位符(URL)/aip/index.html中，既包含了HTTP，又包含了WWW，三者之间是什么关系？ 3. 本章提到的开发技术中哪个更好？我们应该学习哪项技术呢？4. 简述DNS应用系统的主要作用、系统组成及其基本工作原理。5. HTML、DHTML、XHTML、XML、HTML5间存在什么异同？6. 简述URL访问网站时的网络传输全过程。7. 对某一特定的网站建设需求，应该如何选择合适的架构方式？第2章 网站策划设计与网站运行环境设置 教学目标教学重点教学过程第32页教学目标 掌握网站建设的基本流程 掌握网站

10、策划的总体方法 掌握网站设计的步骤和策略 掌握网站运行环境的建立与配置 了解网站的安全与防范策略 网站开发模型及网站评估第33页教学重点网站设计的步骤和策略 网站运行环境的建立与配置 第34页教学过程网站设计的总体流程 网站策划的总体方法网站的设计 网站的架设方法网站的安全 开发模型及评估第35页2.1 网站设计的总体流程初始会商：收集待建设网站的关键信息，包括：站点的目标受众，要发布的主要内容等概念开发：设计人员根据已收集到的信息，开始构思。通常，网站设计师以草图的形式呈现，其中包含整个网站的结构，不同的布局设计及导航等内容综合：当设计人员的构思得到了确认，就可以开始制作一些初始图样，之后再

11、配合文字加以说明。HTML布局和导航：若前面的设计获得了确认，则进入编制Web页面样例阶段，加入导航器，并进行初次的尝试和体验第36页2.1 网站设计的总体流程媒体制作：经反复修改后，站点的外观和感受最终得到了认可，此时再制作所需的各种媒体素材，并进行优化内容整合：利用各种技术将不同的媒体素材(HTML、CSS、JavaScript、JAVA、.NET、FLASH等)，按照网站的目标有机的整合在一起网站测试：在站点被正式发布之前，测试人员要完整测试整个网站，尽量减少站点中包含的错误，并在修改后进行必要的回归测试交付：一旦测试完成，就可以正式启用该网站。这标志着网站正式进入运行阶段，当然网站的完

12、善还需要持续的做下去第37页2.1 网站设计的总体流程第38页2.2 前期工作网站策划 (1) 建立网站前的市场分析(2) 建设网站目的及功能定位 (3) 网站的技术解决方案(4) 网站内容规划(5) 网页界面设计(6) 网站测试(7) 网站发布与推广(8) 网站维护(9) 网站建设日程表(10) 费用明细第39页2.3 网站的设计网站的CI形象设计设计网站的标志(logo) 设计网站的主色调 设计网站的标准字体 设计网站的宣传标语 第40页2.3 网站的设计网站的总体结构设计 网站的目录结构 合理设计网页间的逻辑结构 第41页2.3 网站的设计网站的版面设计 布局的基本原则 布局设计过程 版

13、面布局的总体形式 第42页2.3 网站的设计网站的色彩设计 216种安全色彩色彩的意义色彩搭配方案 不同色彩方案在网页设计中的应用第43页2.3 网站的设计 网站导航设计 导航需要放置在重要的位置上 注意超链接颜色与一般文字的区分 测试所有的超链接与导航按钮的有效性 让超链接的字串长短适中 对较长的文本提供必要的链接 在较长的网页内提供目录与标题 暂时不提供到尚未完成网页的超链接 不要在一篇短文里提供太多的超链接 第44页2.3 网站的设计网站信息的可用性设计 文字列表形式 图片形式 图片加文字内容形式 使用迷你块第45页2.3 网站的设计网站的交互设计 基于用户行为体验的交互设计基于用户情感

14、体验的交互设计设计的原则和方法第46页2.4 网站的架设：IIS的安装与配置 Web服务器是通过服务软件实现的常用软件：IIS和Apache等 第47页Web 服务器Web 服务器装有 Web 浏览器的客户端网络TCP/IPTCP/IPHTTPIP 地址Internet ExplorerHTTP第48页IIS 的基本功能Microsoft Internet 信息服务 (IIS)索引服务安全套接字层Windows Media 服务附加的开发人员支持Active Server Pages （活动服务页面）VBScript 和 JavaScript远程管理InternetIIS第49页IIS 的版本

15、IIS 1.0 Windows NT 3.51IIS 2.0 Windows NT 4.0IIS 3.0 Windows NT 4.0 with SP3 InstalledIIS 4.0 Windows NT 4.0 with Option Pack IIS 5.0 Windows 2000IIS 5.1 Windows XPIIS 6.0 Windows Server 2003IIS 7.0 Windows 7，windows 2008IIS 7.5 windows 2008 r2IIS 8.0 windows 2012IIS 8.5 windows 2012 r2，windows 8第50

16、页IIS 的安装2.4 网站的架设：IIS的安装与配置 第51页IIS 的配置2.4 网站的架设：IIS的安装与配置 第52页其他Web服务器ApacheGFE/GWSNginxLighttpdZeusBEA WebLogicTomcat2.4 网站的架设 第53页2.5 网站运行的基础安全网站安全威胁 信息截取 内部窃密和破坏 黑客 技术缺陷 计算机病毒 拒绝服务攻击 第54页2.5 网站安全防范策略 操作系统安全加密Web服务器安全防火墙安全认证反病毒、防木马入侵检测安全扫描工具勤于备份用户审计 建立良好、可操作的安全制度第55页2.6 网站开发过程瀑布模型第56页2.6 网站开发过程敏捷

17、开发模型测试驱动开发代码重构持续集成结对编程计划扑克代码审查每日站会回顾第57页2.7 网站评估准备工作理解目标网站的行业定位、内容质量、用户类型等数据分析网站的 SEO 数据网站在搜索引擎中的分析社交平台数据网站自身社交内容数据网站外链数据分析网站用户聚合第58页习题1. 网站策划的主要步骤以及每个步骤的要求是什么？2. 如何判断本机是否已安装或运行了Web服务器？如果没有，需要如何进行安装？如何根据实际情况选择合适的Web服务器软件？3. 使用IIS安装并设置了新网站后，再将网站的有关文件导入后是否就可以立即投入使用？4. 网站安全的基本原则及设置方法有哪些？5. 一旦网站遭遇了攻击，该如

18、何应对？6. 网站开发和评估过程如何进行管理？第3章 HTTP协议及其开发与HTML语言基础教学目标教学重点教学过程第60页教学目标 理解HTTP的基本原理及运行机制 了解HTTP应用开发的基本方法 掌握HTML的标签、文档结构和基本语法第61页教学重点HTTP的运行机制HTML网页文档的编写第62页教学过程HTTP协议 HTML基础HTML的基本语法 HTML实例第63页3.1 HTTP协议 浏览网页时在浏览器的地址栏里输入的网站地址叫做URL(Uniform Resource Locator，统一资源定位符）在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址

19、。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页第64页3.1 URL的含义http:/www.njupt./china/index.htm 1.http:/：代表超文本传输协议，通知某台服务器显示Web页，通常不用输入2.www：代表一个Web(万维网)服务器3. njupt.：这是装有Web服务器的域名，或站点服务器的名称4.China/：为该服务器上的子目录，就好像个人电脑上的文件夹5.Index.htm：index.htm是上述文件夹中的一个HTML文件(网页)第65页3.1 HTTP HTTP协议(HypertextTransfer

20、Protocol ) ，即超文本传输协议 它用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少 它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示(如文本先于图形)等第66页3.1.2 HTTP的宏观工作原理 客户机（IE）服务器【server】请求响应统一资源标识符(URL)协议版本号MIME信息（请求修饰符、客户机信息和可能的内容）状态行（信息的协议版本号、一个成功或错误的代码）MIME信息（ 服务器信息、实体信息和可能的内容）第67页客户机【IE】服务器【server】代理网关隧道响应请求请求响应3.1.2

21、 HTTP的宏观工作原理 第68页1.建立连接2.发送请求3.发送响应4.关闭连接客户机【IE】服务器【server】请求建立连接发送响应发送请求关闭连接如果，采用是带有代理的交互过程，则在此过程中需要增加一个中介，完成请求和响应时的中转工作3.1.3 HTTP协议基础 第69页3.1.4 HTTP应用开发方法HTML的基本用法HTTP协议从通信的角度贯穿了应用开发的多个层次，包括了：HTTP客户程序、HTTP服务器程序、服务器端应用程序第70页3.1.5 HTTPS及SSL安全超文本转移协议(HTTPS)结合HTTP而设计的消息的安全通信协议，特征是浏览器里面显示的地址开头为：https:/

22、安全套接层(SSL)为网络通信提供安全及数据完整性的一种安全协议SSL记录协议(SSL Record Protocol)和SSL握手协议(SSL Handshake Protocol)第71页3.2 HTML基础HTML简介 超文本超文本是一种信息管理方式，它的本质含义是非线性的文档组织形式；是采用了符合人脑思维模式的联想机制对庞大的信息资源进行索引的一种非线性结构超媒体超文本多媒体 HTML 一种国际化标准语言，它用于在Web上发布超文本信息，是一种基于SGML，公开的资源描述格式第72页3.2 HTML基础HTML标记语法及文档结构 HTML只是一个纯文本文件，由“显示内容”及“控制语句”

23、两部分组成规范的标记方法为： 受影响内容 字符引用为了解决与标签字符冲突的问题，分为：数值字符引用和字符实体引用 注释方法 第73页HTML文件的总体结构 文件标题:表头区主体区以 开头以 结尾3.2 HTML基础第74页3.2 HTML基础HTML网页的编写和测试方法编写HTML文件，保存为后缀为html的文件双击打开该文件，即可在浏览器中查看 my first page 我的第一个网页 第75页3.3 关于声明 声明位于文档中的最前面的位置，处于标签之前。此标签可通知浏览器文档使用了什么HTML或XHTML规范 HTML4：Strict，Transitional ，FramesetXML

24、：Strict、Transitional ，Frameset为了兼容，很多网站都采用了： 方式 第76页3.3.1-2 标题、段落及列表标题和段落标题文字标签 段落标签 强行换行标签、设置段落标签 、显示预排格式标签、分区显示标签 文字标签 文字的大小、字体 、字型、颜色 列表 无序列表、有序列表、定义列表、列表嵌套 第77页3.3.3 超级链接超级链接锚点标签 浏览器中显示的热点指向其他页面的链接 热点文本 创建指向本页中的链接 热点文本 创建指向其它类型文件的链接 热点文本 创建发送电子邮件的链接 发送邮件的热点文本第78页3.3.4 表格表格 表格的标签为，行的标签，表项标签、表头跨多行

25、、多列的表项 使用、标签的colspan和rowspan属性，制作跨多行(合并行)和跨多列(合并列)的表格表格在页面中的属性 在页面中的位置、颜色和图片背景 表格的分组显示及对齐 第79页3.3.5 图像、音频、视频及嵌入元素图像 设置网页的背景 选择背景色 、指定背景图片、 插入图像 设置图片的布局用图片作为超链接 在图像上定义热区第80页3.3.5 图像、音频、视频及嵌入元素网页中加入音频和视频 通过标签实现背景音乐通过标签的dynsrc属性可以向网页中加入视频 自动刷新页面：在页面打开停留几秒钟后，自动转向其它网页第81页3.3.5 图像、音频、视频及嵌入元素在网页中插入的可执行对象，如

26、：Java Applet、ActiveX控件、插件等 Java Applet： Java小应用程序 第82页3.3.5 图像、音频、视频及嵌入元素Applet、Flash等技术 具有交互性 采用矢量作图技术 采用流控制技术 支持过渡变形技术，包括移动变形和形状变形等使用对象，并对其进行必要的设置即可嵌入网页 第83页3.3.6 框架应用通过使用的target属性 ，可实现框架间的链接 热点文本 _blank没有名字的浏览器窗口打开 _self在当前的框架打开 _top在整个浏览器窗口打开 _parent在父窗口打开 第84页3.3.6 框架应用使用DIV标签+CSS技术的方案 body fon

27、t-family:Verdana; font-size:14px; margin:0; #container margin:0 auto; width:100%; #header height:100px; background:#9c6; margin-bottom:5px; #mainContent height:500px; margin-bottom:5px; #sidebar float:left; width:200px; height:500px; background:#cf9; #content margin-left:205px !important; margin-lef

28、t:202px; height:500px; background:#ffa; 这是上部区域 这是左侧区域 2列左侧固定，右侧自适应宽度+头部。可改变浏览器的宽度来进行测试。 第85页3.3.7 表单网页上具有可输入表项及项目选择等控制所组成的栏目称为表单实现网页的交互操作 其中的“表项名” 可以是：text，password，checkbox，radio，image，hidden，submit，reset；它们对应不同的表单控件第86页3.3.7 表单实例：文字和密码的输入 输入文本和密码 个人资料 姓名: 主页的网址: 密码: 第87页常用网页编辑工具简介 编辑网页通常有两种方式文本编辑方

29、式，如：EditPlus，UltraEdit，甚至于Windows的记事本等所见即所得方式，如：FrontPage，Dreamweaver 等建议：读者学习HTML编写时，初学时使用文本编辑方式，这样能加快熟悉HTML标签和相关用法；之后转入使用高级工具，加快编写效率第88页3.3.8 关于H5的Canvas应用移除了包括：、等标签。增加了一系列新标签使搜索引擎更加容易抓取和索引提供更多的功能，提高用户的友好体验可用性的提高，提高用户的友好体验 第89页3.3.8 关于H5的Canvas应用第90页3.3.8 关于H5的Canvas应用Your browser does not support

30、 the video tag.第91页习题1. 能否通过手工在键盘上输入上述的HTTP请求来获取Web服务器的响应？2. 与HTML相类似的语言标准有不少，比HTML功能强大的语言标准也早已存在，为什么HTML能脱颖而出，成为一种在Web上流行的语言？3. 如果希望表格中的表项能随窗口的变化而自动变化，该如何设置？4. 一些网页在Chrome和FireFox浏览器中都能够非常好地工作，但是在其它浏览器（如IE等）中显示有一些问题。怎样才能在不放弃网页中那些出现问题的部分的情况下做到兼容？5. 对于之前用HTML4.0规范编写的网站，如果快速的迁移到HTML5.0版本？第4章 层叠样式表(CSS

31、) 教学目标教学重点教学过程第93页教学目标 理解CSS与网页制作之间的关系 掌握在网页中加入CSS的基本方法 理解CSS选择器及盒子模型 掌握CSS滤镜的用法 典型案例 第94页教学重点 在网页中使用CSS的基本方法 CSS选择器及盒子模型第95页教学过程 CSS概述 为网页添加CSS 用CSS定义样式 CSS选择器及盒子模型 CSS的滤镜应用 典型用法实例 第96页4.1 CSS概述是Cascading Style Sheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理几乎所有的浏览器都支持可取代以前一部分必须通过专门的图像处理

32、软件实现的图片特效功能更易于管理样式，方便编排，减少管理成本便于统一风格第97页4.2 将CSS引入网站要想使用CSS来进行样式的设定和管理，首先需要定义CSS，再让浏览器识别并调用。通常添加样式的方式有如下四种：内嵌样式内部样式表链入外部样式表导入外部样式表 请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效第98页4.2 将CSS引入网站内嵌样式CSS样式表内部样式表在下设置：pcolor:blue;font-size:10pt;链入外部样式表在单独的CSS文件中定义，之后在网页中添加：导入外部样式表 在单独的CSS文件中定义，之后在网页下添加：

33、import aDefinedCSS.css第99页4.3 用CSS定义样式CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下：selector property: value 如：body color: blackp text-align: center; color: red p text-align: center; color: black; font-family: arial此处定义的是：段落排列居中，段落中文字为黑色，字体是arial。 第100页4.3 用CSS定义样式 p text-align: center; color: black; font-fami

34、ly: arial; 利用HTML标签很复杂 利用 CSS 更简单 标签选择器第101页4.3 用CSS定义样式类别选择符类别选择器是根据类名来选择应用样式的，因此用它可以将相同的元素分类定义为不同的样式。实现时是通过在自定义类名前加点号，如： P.right text-align: right P.center text-align: center 第102页4.3 用CSS定义样式ID选择器 由HTML代码中的ID参数指定单独的样式，和类选择符类似。如： #intro font-size:150%; 第103页4.3 用CSS定义样式通用选择器 用*来表示匹配任何标签。如： *font-s

35、ize: 12px; 表示所有的元素的字体大小都是12px第104页4.3 用CSS定义样式后代选择器一种单独针对某种元素包含关系而定义的样式表 ，如： table a font-size: 32px 第105页4.3 用CSS定义样式交集选择器只有选择的元素要求同时具备多个条件时，交集选择器才能匹配并应用相关的样式。注意，交集选择器没有空格，如：h3.special color: red; 第106页4.3 用CSS定义样式并集选择器组为了减少样式的重复定义，可将相同属性和值的选择器组合起来书写，使用逗号将选择器分开，从而构成并集选择器。例如：h1, h2, h3, h4, h5, h6 c

36、olor: green 第107页4.3 用CSS定义样式伪类选择器伪类可以看作一种特殊的类别选择器，一种支持CSS的浏览器能自动识别的特殊选择器。其最大的用处在于可以对链接在不同状态下定义不同的样式效果。例如：a:link color: #FF0000; text-decoration: none; /* 未访问的链接 */a:visited color: #00FF00; text-decoration: none; /* 已访问的链接 */a:hover color: #FF00FF; text-decoration: underline; /* 鼠标停留在链接上 */a:active

37、color: #0000FF; text-decoration: underline; /* 激活链接 */第108页4.3 用CSS定义样式伪元素选择器伪元素名说 明:after用来和 content 属性一起使用，设置在对象后(依据对象树的逻辑结构)发生的内容:before用来和 content 属性一起使用，设置在对象前(依据对象树的逻辑结构)发生的内容:first-letter仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定position属性为absolute，或者设定 display属性为block。设置对象内的第一行样式:fir

38、st-line仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height或width属性，或者设定position属性为absolute，或者设定display 属性为 block。如果未强制指定对象的 width 属性，首行的内容长度可能不是固定的:placeholder设置对象文字占位符的样式:selection设置对象被选择时的样式如：p:first-letter font-size: 300%;第109页4.3 用CSS定义样式样式表的继承性与层叠性层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素实际上，所有嵌套在元素中的元素都会继承外层元素

39、已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置 div color: red; font-size:9pt 这个段落的文字为红色9号字 P中内容会继承DIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准 第110页4.3 用CSS定义样式注释 可以在CSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义 在浏览器中，注释是不显示的 注意与HTML中的注释方式的区别，此处只能以“/*”开头，以“*/”结尾 第111页4.4 CSS的布局及盒子模型定位属性值说 明static是默认选项，由元素框正常生成；块级元素生成一个矩

40、形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中relative元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据；偏移时，可能会覆盖其他元素absolute元素框不再占有文档流位置，并且相对于包含块进行偏移(包含块就是最近一级外层元素，其position不为static的元素)fixed元素框不再占有文档流位置，并且相对于文档显示区域进行定位sticky粘性定位，相当于relative和fixed的融合；最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位relative其偏移是相

41、对于原先在文档流中的位置第112页4.4 CSS的布局及盒子模型尺寸定义方式说 明px像素单位，显示的最小单位；代表显示屏上显示的每一个小点，属于绝对尺寸单位em相对于父元素的font-size，属于相对尺寸单位；一般浏览器字体大小默认为16px，则2em = 32px，这种方式计算较为复杂rem与em类似，也属于相对尺寸单位；主要不同在于它是相对于html根元素的font-size 百分比纯粹的相对尺寸单位，所描述的是其相对于父元素的百分比值第113页4.4 CSS的布局及盒子模型CSS的盒子模型第114页4.4 CSS的布局及盒子模型CSS的盒子模型 div width: 100px; h

42、eight: 20px; border: 1px solid red; padding: 20px; margin: 30px; 无中生有 缘木求鱼 盒子真实占有屏幕宽度=左border+左padding+width+右padding+右border第115页4.4 CSS的布局及盒子模型 第一点 第二点 CSS的盒子模型默认的盒子参数第116页4.4 CSS的布局及盒子模型常用布局要求设置方法行内元素对父元素设置text-align:center;定宽块状元素设置左右margin值为auto;不定宽块状元素设置子元素为display:inline,然后在父元素上设置text-align:ce

43、nter;通用方案flex布局，对其父元素设置为display:flex; justify-content:center; CSS布局水平布局第117页4.4 CSS的布局及盒子模型常用布局要求设置方法父元素一定，子元素为单行内联文本设置父元素的height等于行高line-height父元素一定，子元素为多行内联文本设置父元素的display:table-cell或inline-block，再设置vertical-align:middle;块状元素设置子元素position:fixed（absolute），然后设置margin:auto;通用方案flex布局，对其父元素设置为display:

44、flex; align-items: center; CSS布局垂直布局第118页4.4 CSS的滤镜使用CSS的滤镜，可以利用客户端的计算资源对图片生成各种类似于Photoshop特效滤镜的效果 CSS滤镜属性的标识符是filterfilter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();第119页4.4 CSS的滤镜及其应用 滤镜对比 如实例4-28第1

45、20页4.4 CSS的滤镜及其应用 复合滤镜 组合任意数量的函数来控制渲染 img -webkit-filter: blur(3px) invert(1); filter: blur(3px) invert(1); 第121页4.6 CSS典型用法实例 圆角表格（实例4-30）动画（实例4-31,4-32）制作可交互的360度全景展示 （实例4-33 ）第122页习题1. 为网页添加相同的样式表设定是有多种不同层次的，在实际制作过程中该如何灵活选择？2. 为整个网页增加背景色很容易做到，但若希望给一部分文字加背景色该如何定义呢？3. 在定义动态链接时，页面中所有的链接效果都会改变，如果想在一个

46、页面中定义两组以上的链接效果，怎么定义？4. 如何给某部分网页元素添加圆角边框？5. 简述以下两种用法：display:none与visibility:hidden之间的异同。第5章 JavaScript语言与客户端开发教学目标教学重点教学过程第124页教学目标理解JavaScript脚本语言的基本概念掌握JavaScript脚本语言的基本语法掌握JavaScript的变量、各类控制语句和函数的用法了解JavaScript内置对象和文档对象模型的基本用法了解JavaScript开发框架第125页教学重点JavaScript脚本语言的基本语法JavaScript的变量、各类控制语句和函数的用法J

47、avaScript在网页中的应用第126页教学过程 JavaScript简介 JavaScript 基本语法 对象化编程 浏览器对象模型(BOM)与文档对象模型(DOM)JS开发框架技术 JavaScript实例 Ajax技术第127页5.1 JavaScript简介 JavaScript是由Netscape公司的Brendan Eich发明的，最初称为LiveScript1995年Java出现后，以Java的设计理念，对LiveScript进行了改写，增加了对Java Applet的支持，所以改名为JavaScript JavaScript可增加网页的互动性简化HTML代码中的重复代码减少网

48、页下载时间对提交表单做即时的检查，即时响应用户的操作第128页5.1 JavaScript简介 基于对象)和事件驱动，并具有较高安全性能的脚本语言，特点如下：一种脚本语言基于对象的语言 简单性 安全性 动态性 跨平台性 第129页5.1 JavaScript简介 JavaScript不是Java的精简版 ，区别如下： Java是面向对象的，而JavaScript是基于对象的 JavaScript是解释执行的，而Java是编译执行 Java采用强变量，JavaScript采用弱变量 两者的代码格式不同 两者嵌入HTML的方式不一样 第130页5.1 JavaScript简介 JavaScript

49、在网站开发中具有以下作用 ：创建生动的用户界面 数据有效性验证工作 数据查找 JavaScript语言的组成 JavaScript核心语言 JavaScript客户端扩展 JavaScript服务器端扩展 第131页5.1 JavaScript简介 将JavaScript引入网页 可直接将代码加入网页JavaScript可出现在网页中的任意位置，但必须使用标记“”的作用，是让不能解析标签的浏览器忽略JavaScript代码第四行前边的双反斜杠“/”是JavaScript里的注释标号第132页5.1 JavaScript简介 将JavaScript引入网页 使用外部文件的方式，将某个.js文件引

50、入 在浏览器中直接调用JavaScript 浏览器 “地址”栏输入：javascript:使用链接：a href=javascript:.第133页5.1 JavaScript简介 一个简单的JavaScript实例 一个简单的实例 document.write(一个简单的实例); 第134页5.1 JavaScript简介 JavaScript兼容性说明第135页5.2 JavaScript 基本语法 一般语句具有如下格式：; 用大括号“ ”括起来的一个或多个语句，相当于一个复合语句允许语句块的嵌套 第136页5.2 JavaScript 基本语法 JavaScript的数据类型 ：第137

51、页5.2 JavaScript 基本语法 JavaScript的变量名称符合：只包含字母、数字和/或下划线；必须以字母开头；不能太长；不能与JavaScript保留字重复变量是区分大小写的 变量名及函数名一般用小写，多个单词中除首单词外其余单词首字母大写 声明变量的方式：var = ;变量的作用域及赋值方法 第138页 赋值操作符： =、+=、-=、*=、 /=、%=、=、=、&=、=、|=；条件表达式： status = (age = 18) ? adult : minor； 算数操作符： +、- 、* 、/ 、% 、+和-，y = +x； 位逻辑运算符： &、|、; 、 布尔操作符： &、

52、|、!比较操作符： =、=、启动事件处理程序-事件处理程序作出反应 “on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如：onClick、onfocus、onSubmit等用户浏览器JavaScript事件处理机制鼠标/键盘操作显示处理结果事件提交调用事件处理函数完成处理第144页5.3 对象化编程 JavaScript的内部对象 “数字”对象Number 字符串对象String 数组对象 Array算术对象Math 日期对象Date JavaScript中的系统函数 JavaScript的全局对象 第145页5.3 对象化编程 自定义类及对象

53、 自定义类 function class1() var s=abc; this.p1=s; this.method1=function() alert(this is a test method); var obj1=new class1(); obj1.method1(); 第146页5.4 浏览器对象模型(BOM)与文档对象模型(DOM)第147页5.4 浏览器对象模型(BOM)与文档对象模型(DOM)文档对象(DOM)是从网页文档里划分出来的对象在网页特效或验证过程需要使用这些对象名称含义名称含义navigator 浏览器对象location 位置对象window 窗口对象documen

54、t 文件对象screen 屏幕对象Link 链接对象event 事件对象Form 表单对象history 历史对象CookieCookie对象第148页浏览器对象 with (document) write (你的浏览器信息：); write (代码：+navigator.appCodeName); write (名称：+navigator.appName); write (版本：+navigator.appVersion); write (语言：+navigator.language); write (编译平台：+navigator.platform); write (用户表头：+navig

55、ator.userAgent); 5.4 浏览器对象模型(BOM)与文档对象模型(DOM)第149页屏幕对象 with (document) write (您的屏幕显示设定值如下：); write (屏幕的实际高度为, screen.availHeight, ); write (屏幕的实际宽度为, screen.availWidth, ); write (屏幕的色盘深度为, screen.colorDepth, ); write (屏幕区域的高度为, screen.height, ); write (屏幕区域的宽度为, screen.width); 5.4 浏览器对象模型(BOM)与文档对象模

56、型(DOM)第150页document示例 document.bgColor = gray; document.fgColor = blue; document.linkColor = red; document.alinkColor = blue; document.vlinkColor = purple; var update_date = document.lastModified; var formated_date = update_date.substring(0,10); document.write(本网页最后更新时间： + update_date + ) document.w

57、rite(本网页最后更新日期： + formated_date+ ) 测试文件对象的颜色属性： 南京邮电大学5.4 浏览器对象模型(BOM)与文档对象模型(DOM)第151页5.4 浏览器对象模型(BOM)与文档对象模型(DOM)表单对象 文本对象Text 按钮对象、提交按钮对象和重置按钮对象 单选按钮对象Radio复选框对象Checkbox选择对象Select和选项对象Option文本区域对象Textarea文件上传对象FileUpload第152页Cookie对象 var today = new Date(); var expireDay = new Date(); var msPerMo

58、nth = 24*60*60*1000*31; expireDay.setTime( today.getTime() + msPerMonth ); document.cookie = name=ZhangSan;expires= + expireDay.toGMTString(); document.write(已经将 Cookie 写入你的硬盘中了!); document.write(内容是：, document.cookie, ); document.write(这个 Cookie 的有效时间是：); document.write(expireDay.toGMTString(); 5.4

59、 浏览器对象模型(BOM)与文档对象模型(DOM)第153页5.5 JS开发框架技术框架技术简介Bootstrap框架jQuery框架Ext JSDojoMootoolsPrototype JSYUIFoundationKissyQWap 第154页5.5 JS开发框架技术框架实例例5-33：angular+bootstrap实现无刷新翻页及查找功能第155页5.6 JavaScript实例 带动画效果的进度条例5-35第156页5.6 JavaScript实例 旋转变幻文字效果例5-36第157页5.6 JavaScript实例 指针式时钟的实现例5-37第158页5.6 JavaScrip

60、t实例 一个益智小游戏贪吃蛇例5-38第159页5.7 Ajax技术 Ajax的现状 IBM、Oracle、Yahoo!、BEA、RedHat、Novell等业界领先的公司启动了Open Ajax项目 微软开发了自己的Ajax框架Altas Sun也将Ajax技术列入了J2EE的blueprint(蓝图)中 Google建立了Google Maps、GMail、Google Suggest等，其中被公认为最优秀的Ajax应用是Google Maps 第160页5.7 Ajax技术 Ajax是什么 Asynchronous JavaScript and XML，异步JavaScript和XML