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

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

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

3、964SiliconChip1958First 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的技术基础 IPV6 TCP/IP 包括近100个协议，其中TCP是传送控制

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

5、Creator of TCP/IP第14页1.2 WWW概述概述Web的技术基础 统一资源定位技术(URL)实现全球资源的精确定位；用应用层协议(HTTP)实现分布式的信息传送；以超文本技术(HTML)实现信息的表现。这三个特点无一不与信息的分发、获取和利用有关。超文本传送协议(HTTP)超文本标记语言(HTML)浏览器(Browser)第15页1.2 WWW概述概述Web的高级开发技术 CGI Applet JavaScript Servlet、JSP、ASP和PHP等 Flash SilverLight第16页1.2 WWW概述概述Web的高级开发技术 CGI 通用网关接口(Common

6、Gateway Interface，CGI)可采用多种编程语言编写 可访问数据库 但存在一定的安全隐患第17页1.2 WWW概述概述Web的高级开发技术 Applet 属于Java技术 “胖”客户应用 编程存在一定限制 客户端必须安装合适的软件第18页1.2 WWW概述概述Web的高级开发技术 JavaScript 基于对象和事件驱动并具有安全性能的脚本语言 形成了标准，受到广泛支持 能丰富客户端页面效果，并丰富用户体验 可能存在不完全兼容的情况第19页1.2 WWW概述概述Web的高级开发技术 Servlet、JSP、ASP和PHP等 在服务器端运行 属于瘦客户端应用 动态生成HTML 编程

7、难度较大 一定程度上受到系统软硬件条件的限制第20页1.2 WWW概述概述Web的高级开发技术 Flash 和 SilverLight等 可生成高度交互性的应用 需要客户端软件支持 制作需要专用的软件第21页1.2 WWW概述概述WWW的将来 DHTML革命 XML技术 XHTML技术 HTML5 AJAX技术 第22页1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展 静态页面 动态页面 活动页面 第23页1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展 静态页面 第24页1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展 动态页

8、面 第25页1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展 活动页面 第26页1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求 两层结构(Two-Tier)客户机、服务器 胖客户机/瘦服务器 发布较困难第27页1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求 三层结构(three-tier)表示层、功能层和数据层 瘦客户机/胖服务器 更灵活，更好的弹性第28页1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求 基于Web的B/S模式 静态模式 一般动态模式 多层动态模式 选取原则 第29页1.3 We

9、b应用开发的需求与方法应用开发的需求与方法应用程序发展的需求 RIA(富互联网应用)结合桌面应用程序的交互式体验，传统的WEB应用的部署灵活性，成本控制 特点：立即部署、跨平台、逐步下载等 有关产品：Adobe的Flex、微软的Silverlight、Oracle的JavaFX和Java SWT、XUL、Bindows、Curl、Laszlo和MUILIB等第30页习题习题1.Internet与WWW有什么关系？2.统一资源定位符(URL)https:/ 网站策划设计与网站运行环境设置 教学目标教学重点教学过程第32页教学目标 掌握网站建设的基本流程 掌握网站策划的总体方法 掌握网站设计的步骤

10、和策略 掌握网站运行环境的建立与配置 了解网站的安全与防范策略l 网站开发模型及网站评估第33页教学重点 网站设计的步骤和策略 网站运行环境的建立与配置 第34页教学过程 网站设计的总体流程 网站策划的总体方法 网站的设计 网站的架设方法 网站的安全 开发模型及评估第35页2.1 网站设计的总体流程网站设计的总体流程l 初始会商：收集待建设网站的关键信息，包括：站初始会商：收集待建设网站的关键信息，包括：站点的目标受众，要发布的主要内容等点的目标受众，要发布的主要内容等l 概念开发：设计人员根据已收集到的信息，开始构概念开发：设计人员根据已收集到的信息，开始构思。通常，网站设计师以草图的形式呈

11、现，其中包思。通常，网站设计师以草图的形式呈现，其中包含整个网站的结构，不同的布局设计及导航等含整个网站的结构，不同的布局设计及导航等l 内容综合：当设计人员的构思得到了确认，就可以内容综合：当设计人员的构思得到了确认，就可以开始制作一些初始图样，之后再配合文字加以说明。开始制作一些初始图样，之后再配合文字加以说明。l HTML布局和导航：若前面的设计获得了确认，则布局和导航：若前面的设计获得了确认，则进入编制进入编制Web页面样例阶段，加入导航器，并进行页面样例阶段，加入导航器，并进行初次的尝试和体验初次的尝试和体验第36页2.1 网站设计的总体流程网站设计的总体流程l 媒体制作：经反复修改

12、后，站点的外观和感受最终媒体制作：经反复修改后，站点的外观和感受最终得到了认可，此时再制作所需的各种媒体素材，并得到了认可，此时再制作所需的各种媒体素材，并进行优化进行优化l 内容整合：利用各种技术将不同的媒体素材内容整合：利用各种技术将不同的媒体素材(HTML、CSS、JavaScript、JAVA、.NET、FLASH等等)，按照网站的目标有机的整合在一起按照网站的目标有机的整合在一起l 网站测试：在站点被正式发布之前，测试人员要完网站测试：在站点被正式发布之前，测试人员要完整测试整个网站，尽量减少站点中包含的错误，并整测试整个网站，尽量减少站点中包含的错误，并在修改后进行必要的回归测试在

13、修改后进行必要的回归测试l 交付：一旦测试完成，就可以正式启用该网站。这交付：一旦测试完成，就可以正式启用该网站。这标志着网站正式进入运行阶段，当然网站的完善还标志着网站正式进入运行阶段，当然网站的完善还需要持续的做下去需要持续的做下去第37页2.1 网站设计的总体流程网站设计的总体流程第38页2.2 前期工作前期工作网站策划网站策划(1)建立网站前的市场分析(2)建设网站目的及功能定位(3)网站的技术解决方案(4)网站内容规划(5)网页界面设计(6)网站测试(7)网站发布与推广(8)网站维护(9)网站建设日程表(10)费用明细第39页2.3 网站的设计网站的设计网站的CI形象设计 设计网站的

14、标志(logo)设计网站的主色调 设计网站的标准字体 设计网站的宣传标语 第40页2.3 网站的设计网站的设计网站的总体结构设计 网站的目录结构 合理设计网页间的逻辑结构 第41页2.3 网站的设计网站的设计网站的版面设计 布局的基本原则 布局设计过程 版面布局的总体形式 第42页2.3 网站的设计网站的设计网站的色彩设计 216种安全色彩 色彩的意义 色彩搭配方案 不同色彩方案在网页设计中的应用第43页2.3 网站的设计网站的设计 网站导航设计 导航需要放置在重要的位置上 注意超链接颜色与一般文字的区分 测试所有的超链接与导航按钮的有效性 让超链接的字串长短适中 对较长的文本提供必要的链接

15、在较长的网页内提供目录与标题 暂时不提供到尚未完成网页的超链接 不要在一篇短文里提供太多的超链接 第44页2.3 网站的设计网站的设计网站信息的可用性设计 文字列表形式 图片形式 图片加文字内容形式 使用迷你块第45页2.3 网站的设计网站的设计网站的交互设计 基于用户行为体验的交互设计 基于用户情感体验的交互设计 设计的原则和方法第46页2.4 网站的架设：网站的架设：IIS的安装与配置的安装与配置 Web服务器是通过服务软件实现的 常用软件：IIS和Apache等 第47页Web 服务器服务器Web 服务器装有 Web 浏览器的客户端网络TCP/IPTCP/IPHTTPIP 地址Inter

16、net ExplorerHTTP第48页IIS 的基本功能的基本功能Microsoft Internet 信息服务信息服务(IIS)索引服务 安全套接字层 Windows Media 服务 附加的开发人员支持 Active Server Pages（活动服务页面）VBScript 和 JavaScript 远程管理InternetIIS第49页IIS 的版本的版本 IIS 1.0 Windows NT 3.51 IIS 2.0 Windows NT 4.0 IIS 3.0 Windows NT 4.0 with SP3 Installed IIS 4.0 Windows NT 4.0 with

17、 Option Pack IIS 5.0 Windows 2000 IIS 5.1 Windows XP IIS 6.0 Windows Server 2003 IIS 7.0 Windows 7，windows 2008 IIS 7.5 windows 2008 r2 IIS 8.0 windows 2012 IIS 8.5 windows 2012 r2，windows 8第50页 IIS 的安装2.4 网站的架设：IIS的安装与配置 第51页 IIS 的配置2.4 网站的架设：IIS的安装与配置 第52页 其他Web服务器 Apache GFE/GWS Nginx Lighttpd Ze

18、us BEA WebLogic Tomcat2.4 网站的架设 第53页2.5 网站运行的基础网站运行的基础安全安全 网站安全威胁 信息截取 内部窃密和破坏 黑客 技术缺陷 计算机病毒 拒绝服务攻击 第54页2.5 网站安全网站安全 防范策略 操作系统安全 加密 Web服务器安全 防火墙 安全认证 反病毒、防木马 入侵检测 安全扫描工具 勤于备份 用户审计 建立良好、可操作的安全制度第55页2.6 网站开发过程网站开发过程 瀑布模型第56页2.6 网站开发过程网站开发过程 敏捷开发模型 测试驱动开发 代码重构 持续集成 结对编程 计划扑克 代码审查 每日站会 回顾第57页2.7 网站评估网站评

19、估 准备工作理解目标网站的行业定位、内容质量、用户类型等 数据分析 网站的 SEO 数据 网站在搜索引擎中的分析 社交平台数据 网站自身社交内容数据 网站外链数据分析 网站用户聚合第58页习题习题1.网站策划的主要步骤以及每个步骤的要求是什么？2.如何判断本机是否已安装或运行了Web服务器？如果没有，需要如何进行安装？如何根据实际情况选择合适的Web服务器软件？3.使用IIS安装并设置了新网站后，再将网站的有关文件导入后是否就可以立即投入使用？4.网站安全的基本原则及设置方法有哪些？5.一旦网站遭遇了攻击，该如何应对？6.网站开发和评估过程如何进行管理？第3章 HTTP协议及其开发与HTML语

20、言基础教学目标教学重点教学过程第60页教学目标 理解HTTP的基本原理及运行机制 了解HTTP应用开发的基本方法 掌握HTML的标签、文档结构和基本语法第61页教学重点 HTTP的运行机制 HTML网页文档的编写第62页教学过程 HTTP协议 HTML基础 HTML的基本语法 HTML实例第63页3.1 HTTP协议协议 l 浏览网页时浏览网页时在浏览器的地址栏里输入的网站地址在浏览器的地址栏里输入的网站地址叫做叫做URL(Uniform Resource Locator，统一资，统一资源定位符）源定位符）l 在浏览器的地址框中输入一个在浏览器的地址框中输入一个URL或是单击一个或是单击一个超

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

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

23、和可能的内容）第67页客户机【IE】服务器【server】代理网关隧道响应请求请求响应3.1.2 HTTP的宏观工作原理 第68页1.建立连接2.发送请求3.发送响应4.关闭连接客户机【IE】服务器【server】请求建立连接发送响应发送请求关闭连接如果，采用是带有代理的交互过程，则在此过程中需要增加一个中介，完成请求和响应时的中转工作3.1.3 HTTP协议基础 第69页3.1.4 HTTP应用开发方法lHTML的基本用法的基本用法HTTP协议从通信的角度贯穿了应用开发的多协议从通信的角度贯穿了应用开发的多个层次，包括了：个层次，包括了：HTTP客户程序、客户程序、HTTP服服务器程序、服务

24、器端应用程序务器程序、服务器端应用程序第70页3.1.5 HTTPS及SSLl安全超文本转移协议安全超文本转移协议(HTTPS)结合结合HTTP而设计的消息的安全通信协议，特而设计的消息的安全通信协议，特征是浏览器里面显示的地址开头为：征是浏览器里面显示的地址开头为：https:/l安全安全套接套接层层(SSL)为网络通信提供安全及数据完整性的一种安为网络通信提供安全及数据完整性的一种安全协议全协议SSL记录协议记录协议(SSL Record Protocol)和和SSL握手协议握手协议(SSL Handshake Protocol)第71页3.2 HTML基础基础HTML简介简介 l超文本超

25、文本超文本是一种信息管理方式，它的本质含义是非超文本是一种信息管理方式，它的本质含义是非线性的文档组织形式；是采用了符合人脑思维模线性的文档组织形式；是采用了符合人脑思维模式的联想机制对庞大的信息资源进行索引的一种式的联想机制对庞大的信息资源进行索引的一种非线性结构非线性结构l超媒体超文本多媒体超媒体超文本多媒体 l HTML 一种国际化标准语言，它用于在一种国际化标准语言，它用于在Web上发布超文上发布超文本信息，是一种基于本信息，是一种基于SGML，公开的资源描述格，公开的资源描述格式式第72页3.2 HTML基础基础HTML标记语法及文档结构标记语法及文档结构 lHTML只是一个纯文本文

26、件，由只是一个纯文本文件，由“显示内容显示内容”及及“控制语句控制语句”两部分组成两部分组成l规范的标记方法为：规范的标记方法为：受影响内容受影响内容l 字符引用字符引用为了解决与标签字符冲突的问题，分为：数值字为了解决与标签字符冲突的问题，分为：数值字符引用符引用和和字符实体引用字符实体引用 l 注释方法注释方法 第73页HTML文件的总体结构文件的总体结构 文件标题:表头区主体区以 开头以 结尾3.2 HTML基础第74页3.2 HTML基础HTML网页的编写和测试方法网页的编写和测试方法1.编写编写HTML文件，保存为后缀为文件，保存为后缀为html的文件的文件2.双击打开该文件，即可在

27、浏览器中查看双击打开该文件，即可在浏览器中查看 my first page 我的第一个网页 第75页3.3 关于关于声明声明 l声明位于文档中的最前面的声明位于文档中的最前面的位置，处于位置，处于标签之前。此标签可通标签之前。此标签可通知浏览器文档使用了什么知浏览器文档使用了什么HTML或或XHTML规范规范 HTML4：Strict，Transitional，FramesetXML：Strict、Transitional，Frameset为了兼容，很多网站都采用了：为了兼容，很多网站都采用了：方式方式 第76页3.3.1-2 标题、段落及列表l 标题和段落标题和段落 标题文字标签标题文字标签

28、 段落标签段落标签 l 强行换行标签强行换行标签、设置段落标签、设置段落标签、显示、显示预排格式标签预排格式标签、分区显示标签、分区显示标签 l 文字标签文字标签 文字的大小、字体文字的大小、字体、字型、颜色字型、颜色 l 列表列表 无序列表无序列表、有序列表有序列表、定义列表定义列表、列表嵌套列表嵌套 第77页3.3.3 超级链接超级链接超级链接l锚点标签锚点标签 浏览器中显示的热点浏览器中显示的热点l指向其他页面的链接指向其他页面的链接 热点文本热点文本 l创建指向本页中的链接创建指向本页中的链接 热点文本热点文本 l创建指向其它类型文件的链接创建指向其它类型文件的链接 热点文本热点文本

29、l创建发送电子邮件的链接创建发送电子邮件的链接 发送邮件的热点文本发送邮件的热点文本第78页3.3.4 表格表格表格 l 表格的标签为表格的标签为，行的标签，行的标签，表，表项标签项标签、表头、表头l 跨多行、多列的表项跨多行、多列的表项 使用使用、标签的标签的colspan和和rowspan属性，制作跨多行属性，制作跨多行(合并行合并行)和跨多列和跨多列(合并列合并列)的表格的表格l 表格在页面中的属性表格在页面中的属性 在页面中的位置、颜色和图片背景在页面中的位置、颜色和图片背景 l 表格的分组显示及对齐表格的分组显示及对齐 第79页3.3.5 图像、音频、视频及嵌入元素图像图像 l 设置

30、网页的背景设置网页的背景 选择背景色选择背景色、指定、指定背景图片、背景图片、l 插入图像插入图像 l 设置图片的布局设置图片的布局l 用图片作为超链接用图片作为超链接 l 在图像上定义热区在图像上定义热区第80页3.3.5 图像、音频、视频及嵌入元素l网页中加入音频和视频网页中加入音频和视频 通过通过标签标签实现实现背景音乐背景音乐通过通过标签的标签的dynsrc属性可以向网页中属性可以向网页中加入视频加入视频 l自动刷新页面：在页面打开停留几秒钟后，自动刷新页面：在页面打开停留几秒钟后，自动转向其它网页自动转向其它网页第81页3.3.5 图像、音频、视频及嵌入元素l在网页中插入的可执行对象

31、，如：在网页中插入的可执行对象，如：Java Applet、ActiveX控件、插件等控件、插件等l Java Applet：Java小应用程序小应用程序 第82页3.3.5 图像、音频、视频及嵌入元素lApplet、Flash等技术等技术 具有交互性具有交互性 采用矢量作图技术采用矢量作图技术 采用流控制技术采用流控制技术 支持过渡变形技术，包括移动变形和形状变支持过渡变形技术，包括移动变形和形状变形等形等使用使用对象，并对其进行必要的设置对象，并对其进行必要的设置即可嵌入网页即可嵌入网页 第83页3.3.6 框架应用l通过使用通过使用的的target属性属性，可实现框架间，可实现框架间的链

32、接的链接 热点文本热点文本 _blank没有名字的浏览器窗口打开没有名字的浏览器窗口打开 _self在当前的框架打开在当前的框架打开 _top在整个浏览器窗口打开在整个浏览器窗口打开 _parent在父窗口打开在父窗口打开 第84页3.3.6 框架应用l使用使用DIV标签标签+CSS技术的方案技术的方案 body font-family:Verdana;font-size:14px;margin:0;#container margin:0 auto;width:100%;#header height:100px;background:#9c6;margin-bottom:5px;#mainCo

33、ntent height:500px;margin-bottom:5px;#sidebar float:left;width:200px;height:500px;background:#cf9;#content margin-left:205px!important;margin-left:202px;height:500px;background:#ffa;这是上部区域 这是左侧区域 2列左侧固定，右侧自适应宽度+头部。可改变浏览器的宽度来进行测试。第85页3.3.7 表单l网页上具有可输入表项及项目选择等控制所网页上具有可输入表项及项目选择等控制所组成的栏目称为表单组成的栏目称为表单l实

34、现网页的交互操作实现网页的交互操作 其中的其中的“表项名表项名”可以是：可以是：text，password，checkbox，radio，image，hidden，submit，reset；它们对应不同的表单控件；它们对应不同的表单控件第86页3.3.7 表单实例：文字和密码的输入实例：文字和密码的输入 输入文本和密码 个人资料 姓名:主页的网址:密码:第87页常用网页编辑工具简介常用网页编辑工具简介 l编辑网页通常有两种方式编辑网页通常有两种方式文本编辑方式，如：文本编辑方式，如：EditPlus，UltraEdit，甚至于，甚至于Windows的记事本等的记事本等所见即所得所见即所得方式，

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

36、高，提高用户的友好体验 第89页3.3.8 关于H5的Canvas应用第90页3.3.8 关于H5的Canvas应用Your browser does not support the video tag.第91页习题l1.能否通过手工在键盘上输入上述的能否通过手工在键盘上输入上述的HTTP请求来获取请求来获取Web服务器的响应？服务器的响应？l2.与与HTML相类似的语言标准有不少，比相类似的语言标准有不少，比HTML功能强大功能强大的语言标准也早已存在，为什么的语言标准也早已存在，为什么HTML能脱颖而出，成为能脱颖而出，成为一种在一种在Web上流行的语言？上流行的语言？l3.如果希望表格中

37、的表项能随窗口的变化而自动变化，该如果希望表格中的表项能随窗口的变化而自动变化，该如何设置？如何设置？l4.一些网页在一些网页在Chrome和和FireFox浏览器中都能够非常好浏览器中都能够非常好地工作，但是在其它浏览器（如地工作，但是在其它浏览器（如IE等）中显示有一些问题。等）中显示有一些问题。怎样才能在不放弃网页中那些出现问题的部分的情况下做怎样才能在不放弃网页中那些出现问题的部分的情况下做到兼容？到兼容？l5.对于之前用对于之前用HTML4.0规范编写的网站，如果快速的迁移规范编写的网站，如果快速的迁移到到HTML5.0版本？版本？第4章 层叠样式表(CSS)教学目标教学重点教学过程

38、第93页教学目标 理解CSS与网页制作之间的关系 掌握在网页中加入CSS的基本方法 理解CSS选择器及盒子模型 掌握CSS滤镜的用法 典型案例 第94页教学重点 在网页中使用CSS的基本方法 CSS选择器及盒子模型第95页教学过程 CSS概述 为网页添加CSS 用CSS定义样式 CSS选择器及盒子模型 CSS的滤镜应用 典型用法实例 第96页4.1 CSS概述概述l 是是Cascading Style SheetCascading Style Sheet的简称的简称，中文，中文翻译为：层叠样式表；为网页设计者提供翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字更大的网页

39、空间应用弹性；将网页的文字内容与版面设计分开处理内容与版面设计分开处理 几乎所有的浏览器都支持几乎所有的浏览器都支持 可取代以前一部分必须通过专门的图像处理可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能软件实现的图片特效功能 更易于管理样式，方便编排，减少管理成本更易于管理样式，方便编排，减少管理成本 便于统一风格便于统一风格第97页4.2 将CSS引入网站l 要想使用要想使用CSS来进行样式的设定和管理来进行样式的设定和管理，首先需要定义首先需要定义CSS，再再让浏览器识别并调让浏览器识别并调用。用。通常添加样式的方式有如下四种：通常添加样式的方式有如下四种：内嵌样式内嵌样式

40、内部样式表内部样式表 链入外部样式表链入外部样式表 导入外部样式表导入外部样式表 l 请注意这四种方式的各自特点和适用场合，请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先并理解当几种方式同时出现时，按照优先级高低来决定哪个生效级高低来决定哪个生效第98页4.2 将CSS引入网站l 内嵌样式CSS样式表l 内部样式表在下设置：pcolor:blue;font-size:10pt;l 链入外部样式表在单独的CSS文件中定义，之后在网页中添加：l 导入外部样式表 在单独的CSS文件中定义，之后在网页下添加：import aDefinedCSS.css第99页4.3 用用C

41、SS定义样式定义样式l 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-family

42、:arial;利用HTML标签很复杂 利用 CSS 更简单 l标签选择器第101页4.3 用用CSS定义样式定义样式l 类别选择符类别选择符 类别选择器是根据类名来选择应用样式的，类别选择器是根据类名来选择应用样式的，因此用它可以将相同的元素分类定义为不同因此用它可以将相同的元素分类定义为不同的样式的样式。实现时是通过在自定义类名前加点。实现时是通过在自定义类名前加点号号，如：，如：P.right text-align:right P.center text-align:center 第102页4.3 用用CSS定义样式定义样式l ID选择器选择器 由由HTML代码中的代码中的ID参数指定单独

43、的样式，参数指定单独的样式，和类选择符类似。如：和类选择符类似。如：#intro font-size:150%;第103页4.3 用用CSS定义样式定义样式l 通用选择器通用选择器 用用*来表示匹配任何标签来表示匹配任何标签。如：。如：*font-size:12px;表示所有的元素的字体大小都是表示所有的元素的字体大小都是12px第104页4.3 用用CSS定义样式定义样式l后代选择器后代选择器 一种单独针对某种元素包含关系而定义的样一种单独针对某种元素包含关系而定义的样式表式表，如：，如：table a font-size:32px 第105页4.3 用用CSS定义样式定义样式l交集选择器交

44、集选择器 只有选择的元素要求同时具备多个条件时，只有选择的元素要求同时具备多个条件时，交集选择器才能匹配并应用相关的样式。注交集选择器才能匹配并应用相关的样式。注意，交集选择器没有空格意，交集选择器没有空格，如：，如：h3.special color:red;第106页4.3 用用CSS定义样式定义样式l并集选择器组 为了减少样式的重复定义，可将相同属性和值的选择器组合起来书写，使用逗号将选择器分开，从而构成并集选择器。例如：h1,h2,h3,h4,h5,h6 color:green 第107页4.3 用用CSS定义样式定义样式l伪类选择器 伪类可以看作一种特殊的类别选择器，一种支持CSS的浏

45、览器能自动识别的特殊选择器。其最大的用处在于可以对链接在不同状态下定义不同的样式效果。例如：a:link color:#FF0000;text-decoration:none;/*未访问的链接*/a:visited color:#00FF00;text-decoration:none;/*已访问的链接*/a:hover color:#FF00FF;text-decoration:underline;/*鼠标停留在链接上*/a:active color:#0000FF;text-decoration:underline;/*激活链接*/第108页4.3 用用CSS定义样式定义样式l伪元素选择器伪

46、元素选择器伪元素名伪元素名说说 明明:after用来和用来和 content 属性一起使用，设置在对象后属性一起使用，设置在对象后(依据对象树的逻辑结构依据对象树的逻辑结构)发生的内容发生的内容:before用来和用来和 content 属性一起使用，设置在对象前属性一起使用，设置在对象前(依据对象树的逻辑结构依据对象树的逻辑结构)发生的内容发生的内容:first-letter仅作用于块对象。内联要素要使用该属性，必须先设定对象的仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或或 width 属性，属性，或者设定或者设定position属性为属性为absolute，或者

47、设定，或者设定 display属性为属性为block。设置对象内的第一。设置对象内的第一行样式行样式:first-line仅作用于块对象。内联要素要使用该属性，必须先设定对象的仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height或或width属性，属性，或者设定或者设定position属性为属性为absolute，或者设定，或者设定display 属性为属性为 block。如果未强制指定对。如果未强制指定对象的象的 width 属性，首行的内容长度可能不是固定的属性，首行的内容长度可能不是固定的:placeholder设置对象文字占位符的样式设置对象文字占位符的样式:selec

48、tion设置对象被选择时的样式设置对象被选择时的样式如：p:first-letter font-size:300%;第109页4.3 用用CSS定义样式定义样式l样式表的继承性与层叠性样式表的继承性与层叠性层叠性指的是继承性，样式表的继承规则是外部的层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素元素样式继承给这个元素所包含的其他元素实际上，所有嵌套在元素中的元素都会继承外层元实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置式叠加在一起，除非另外设置

49、div color:red;font-size:9pt 这个段落的文字为红色9号字 P中内容会继承DIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准 第110页4.3 用用CSS定义样式定义样式l 注释注释 可以在可以在CSS中插入注释来说明代码的含义，注中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时释有利于自己或别人今后在编辑和更改代码时理解代码的含义理解代码的含义 在浏览器中，注释是不显示的在浏览器中，注释是不显示的 注意与注意与HTML中的注释方式的区别，此处只能中的注释方式的区别，此处只能以以“/*”开头，以开头，以“*/”结尾结尾 第111

50、页4.4 CSS的布局及盒子模型的布局及盒子模型l 定位定位属性值属性值说说 明明static是默认选项，由元素框正常生成；块级元素生成一个矩形框，作为文档流是默认选项，由元素框正常生成；块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中的一部分；行内元素则会创建一个或多个行框，置于其父元素中relative元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据；偏移时，可能会覆盖其他元素占据；偏移时，可能会覆盖其他元素absolute元素框不再占有文档流位置，并且相对于包含块