Web网站设计与开发教程（HTML5、JSP版）（第二版)配套教材课件完整版电子教案.pptx
《Web网站设计与开发教程（HTML5、JSP版）（第二版)配套教材课件完整版电子教案.pptx》由会员分享，可在线阅读，更多相关《Web网站设计与开发教程（HTML5、JSP版）（第二版)配套教材课件完整版电子教案.pptx（348页珍藏版）》请在冰点文库上搜索。
Web网站设计与开发教程（HTML5、JSP版）（第二版）,347页完整版课件正版可修改PPT,商务网站设计与开发,第1章Web技术概述,内容,Web系统简介,1.1,B/S结构和Web应用程序,1.2,HTML简介,1.3,HTML文档结构,1.4,思考题,1.5,1.1Web系统简介,HTML的产生瑞士日内瓦的欧洲核子研究中心的软件工程师TimBerners-Lee编写一个软件程序，利用一系列标签描述出信息的内容和表现形式，再通过链接把这些文件串起来，让世界各地的人能够轻松共享信息。
TimBerners-Lee给这种系统命名为“WorldWideWeb”，1990年11月，第一个Web服务器nxoc01.cern.ch开始运行。
浏览器的产生1993年美国伊利诺州的伊利诺大学的MarcAndreessen及其同事开发出了第一个支持图文并茂展示网页的Web浏览器Mosaic浏览器，并成立了网景公司（NetscapeCommunicationCorp.）。
W3C组织1994年10月TimBerners-Lee联合CERN、DARPA和欧盟成立了Web的核心技术机构W3C（WorldWideWebConsortium，万维网联盟）。
1.1Web系统简介,HTMLWeb通过超文本标记语言（HyperTextMarkupLanguage，简称HTML）实现信息与信息的连接；,URI通过统一资源标识符（UniformResourceIdentifier,简称URI）实现全球信息的精确定位；,HTTP通过超文本传输协议（HyperTextTransferProtocol，简称HTTP）实现信息在互联网中的传输。
1.2B/S结构和Web应用程序,1.2B/S结构和Web应用程序,B/S的系统结构图,1.2B/S结构和Web应用程序,传统的C/S建立在小范围里的网络环境；B/S适合建立在广域网之上的。
（1）硬件环境不同,传统的C/S一般面向相对固定的用户群，对信息安全的控制能力很强；B/S通常建立在广域网之上，对安全的控制能力相对弱。
（2）对安全要求不同,传统的C/S结构可以更加注重流程，可以对权限多层次校验；B/S系统所依托的HTTP协议缺少对流程、状态等方面的管理。
（3）系统架构不同,传统的C/S结构意味着在用户的计算机中必须安装特定的客户端软件；B/S结构的维护和升级都发生在服务器端。
（4）系统维护不同,传统的C/S结构适合对大量数据进行批量的增、删、改操作；B/S结构适合面向不同的用户群。
（5）处理问题不同,传统的C/S结构客户端软件对操作系统有特定的要求，跨平台性较差；B/S的前台建立在浏览器上。
（6）用户接口不同,传统的C/S结构的软件随着应用范围的扩大，投资会连绵不绝；B/S结构软件一般只有初期一次性投入成本，系统总拥有成本（TCO）较低。
（7）投入成本构成不同,传统的C/S结构软件来讲无法适应企业快速扩张的特点；而B/S结构软件通过一次安装，以后只需设立账号、培训即可。
（8）系统规模的扩展性不同,1.3HTML简介,HTML是使用SGML定义的一个描述性语言，或可说HTML是SGML的一个应用。
与SGML的关系HTML的语法简单XHTML与DHTML广义的HTML技术,HTML的格式和语法非常简单，只是由文字及标签组合而成，任何文字编辑器都可以编辑HTML文件，只要能将文件另存成ASCII纯文字格式即可。
在开发技术的选型中，通常会选择传统HTML的扩展技术，包括可扩展超文本标记语言（eXtensibleHyperTextMarkupLanguage，简称为XHTML）和动态HTML（DynamicHTML，简称为DHTML）。
一是HTML（或XHTML），其中定义了各种页面元素对象；二是CSS，CSS中的属性也可被动态操纵从而获得动态的效果；三是客户端脚本（包括Javascript等），用以编写程序操纵Web页上的HTML对象和CSS。
1.4HTML文档结构,网页制作教学HelloWorld!
1.4HTML文档结构,在HTML中任何标签皆由”所围住，如，标签名与小于号之间不能留有空白字符。
在起始标签之标签名前加上符号”/”便是其终结标签，如。
标签字母大小写皆可。
由开始标签和终结标签所构成的对象可以称为HTML元素（或HTML对象）。
元素带有参数，也称为元素的属性。
参数只可加于起始标签中。
熟悉面向对象程序设计的开发人员更习惯将它们称为“HTML对象和属性”。
通常在一个完整的HTML文件中，html元素是HTML文档的根元素，其中包含二个部份：
头部元素和体部元素，它们分别被包含在标签和标签中。
DEMO,HTMLHello,1.5思考题,
（1）,HTML与W3C组织分别是如何产生的？
（2）,C/S体系结构和B/S体系结构有何不同之处？
商务网站设计与开发,第2章HTML元素,内容,文本元素群组元素超链接元素表格元素内嵌元素结构元素编辑元素表单元素头部元素HTML中的颜色设置绝对路径与相对路径思考题,2.12.22.32.42.52.62.72.82.92.102.112.12,2.1文本元素,在HTML中，文本元素（Text-levelsemantics）用来定义网页中文本内容和语义，增加文字的易读性。
文本元素主要包括、等。
虽然文本的显示样式通常是由CSS来定义，但文本元素的语义也会影响文本的显示风格，比如上标（sup）、下标（sub）等文本。
2.1文本元素,em定义强调文本，显示为斜体字strong定义强调文本，显示为粗体small定义小号文本s定义加删除线的文本sub定义下标文本，比如a2sup定义上标文本，比如a2i定义斜体文本b定义粗体文本u定义下划线文本mark定义有加亮记号的文本,2.1文本元素,中zhong文wen,DEMO,文本元素,2.2群组元素,在HTML中，群组元素（Groupingcontent）用来定义网页中具有关联性的内容和语义。
群组元素主要包括、等。
与文本元素一样，群组元素的语义也会影响显示风格，比如多个列表项元素在显示时通常会在前面加上数字序号或图形符号。
2.2群组元素,这是段落。
hr标签定义水平线：
pre标签很适合显示计算机代码：
fori=1to10printinexti段落前面有缩进,DEMO,群组元素1,2.2群组元素,咖啡咖啡茶,牛奶,茶,红茶牛奶,绿茶,2.2群组元素,一个定义列表：
计算机用来计算的仪器.显示器以视觉方式显示信息的装置.,2.2群组元素,div元素元素用来将页面内容分割成各个独立的部分。
在每个元素中，不仅可以包含文本内容，也可以包含图片、表单等其他内容。
在默认的情况下，元素所包含的内容，将在新的一行显示。
2.2群组元素,.,DEMO,群组元素2,2.3超链接元素,网页之间的链接（Links）能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。
超链接就像整个网站的神经细胞，把各种信息有机地结合在一起。
在HTML中，超链接可以通过元素和嵌套在元素内部的元素来实现。
关于元素将在嵌入式元素中展开描述，本节将主要讨论元素。
2.3超链接元素,2.3超链接元素,文本链接是最常见的一种超链接，它通过网页中的文件和其他文件进行链接，语法如下：
链接元素链接元素可以是文字，也可以是图片或其他页面元素。
href属性是元素最常用的属性，用来指定链接目标的URL地址。
链接地址可以是绝对地址，也可以是相对地址。
例如链接到W3C官方网站，并打开新的浏览器显示该网站，实现代码如下：
W3C,2.3超链接元素,target属性的取值及功能说明,2.3超链接元素,书签链接也是常用的一种超链接，用来在创建的网页内容特别多时对内容进行链接。
书签可以与所链接文字在同一页面，也可以在不同的页面。
建立书签的语法如下：
文字在代码的前面增加链接文字和链接地址就能够实现同页面的书签链接。
语法如下：
链接的文字其中，#代表这是书签的链接地址，书签的名称则是上面定义的书签名。
如果想链接到不同的页面需要在链接的地址前增加文件所在的位置。
语法如下：
链接的文字,DEMO,超链接元素,2.4表格元素,在HTML5中使用、等表格元素构建和展示表格式数据（Tabulardata）。
元素可以用来定义表格，包括表格的标题、表头及单元格内容等。
作为元素的子元素，表格行用定义，表头元素用元素定义（表头通常显示成黑体），单元格内容用元素定义。
一个元素可包含一个或多个元素，一个元素又可以包含一个或多个、元素。
2.4表格元素,2.4表格元素,a1b1c1a2b2c2,2.4表格元素,跨两列的单元格姓名电话张小明13999912345325330425,DEMO,表格元素,2.5内嵌元素,除了文字信息，网页中还可以呈现图形、图像、音频、视频等多媒体信息。
为了丰富网页的表现方式，HTML5允许以内嵌元素（Embeddedcontent）的方式在网页中嵌入图形、图像、视频、音频以及其他可操作的对象。
相关的元素包括、系列和系列。
2.5内嵌元素,2.5内嵌元素,HTML提供了元素用来描述图像信息的内容和表现形式，但图像的数据并不会直接插入HTML文档中，元素的作用是让HTML文档在展示时给图像留出一个位置。
图像文件的地址由元素的src属性指定，当浏览器无法下载图像文件时，则在相应的位置显示一些文字，文字的内容由alt属性指定。
图像的大小可以在元素中使用width和height属性给出，如果不设置这两个属性，则将默认为按照图像的实际尺寸显示。
2.5内嵌元素,支持最多256色的图像。
虽然GIF的颜色不够丰富，但它支持动画和透明色，在网页中常常被用来设计按钮、菜单等较小的图像。
GIF,可以支持高分辨率、颜色丰富的图像。
由于JPG具有很好的压缩比，非常适合在网页中展现照片。
当然，在使用JPG格式处理图像时，压缩比越大，图片的质量就越差。
JPG,可以支持颜色丰富的图像，同时还可支持alpha滤镜的透明方式。
虽然PNG不支持动画效果，但与GIF一样适合作为较小的图像的显示方式。
PNG,2.5内嵌元素,元素的usemap属性可以指定可点击区域的图像映射元素，而图像映射元素本身的设置是在元素中，其中的元素则给出了具体的区域和超链接的位置，功能类似于元素。
下列代码给出了图像映射的方式，即在一个图像中设置了三个不同形状的区域，当用户点击这些区域时会产生如同超链接的效果。
2.5内嵌元素,DEMO,嵌入图片,2.5内嵌元素,在早期的网页设计中，开发者经常使用框架标记把浏览器窗口划分成几个大小不同的子窗口，每个子窗口显示不同的页面，也可以在同一时间浏览不同的页面。
定义子窗口使用元素。
HTML5已经不再支持与元素，但仍然支持创建包含文档的内联框架的元素。
2.5内嵌元素,元素可以构成“浮动”的框架，可以在一个HTML文档的一个特定区域中展示另一个HTML文档。
2.5内嵌元素,百度注意：
因为超链接的目标表明为iframe，因此当点击超链接时会在iframe中显示百度页面,DEMO,嵌入框架,2.5内嵌元素,根据HTML5的规范，在网页上呈现的视频和音频需要符合一定的标准，否则就通过插件（如activeX）来呈现。
元素用来定义声音，如音乐或其他音频流。
与之间插入的内容是供不支持audio元素的浏览器显示的。
2.5内嵌元素,你的浏览器不支持音频元素。
2.5内嵌元素,元素用来定义视频，如电影片段或其他视频流。
与之间插入的内容是供不支持video元素的浏览器显示的。
2.5内嵌元素,你的浏览器不支持视频元素。
DEMO,嵌入媒体,2.5内嵌元素,A=xy,MathML中的一系列元素,可以帮助在HTML文档内显示数学公式，并且这些元素本身也具有相应的语义。
注意：
并不是所有的浏览器都能显示MathML标签，因此在网站中使用这个系列的元素时需要告知所支持的浏览器及版本情况。
2.5内嵌元素,根据HTML5的规范，和元素都可以完成在网页中的绘图功能。
与元素不同的是，SVG是一种使用XML描述2D图形的语言，SVG中所描述的2D图形元素是以矢量图形对象的方式存在，不依赖分辨率，可以附加Javascript事件处理器。
可以通过Javascript来修改图形对象的属性，浏览器会自动重绘图形。
注意，一些浏览器需要插件才能支持SVG。
2.5内嵌元素,2.5内嵌元素,HTML本身的元素是有限的，特别是在HTML5之前的版本，开发者为了在HTML页面中实现多媒体应用和更复杂的客户端操作，就需要在HTML文档中增加各种插件对象以扩展文档的表现能力。
自从1996年NetscapeNavigator2.0引入了对QuickTime插件的支持，插件这种开发方式为其它厂商扩展Web客户端的信息展现方式开辟了一条自由之路。
微软公司迅速在IE3.0浏览器中增加了对ActiveX的插件对象支持，RealNetworks公司的Realplayer插件也很快在Netscape和IE浏览器中取得了成功。
然而，随着HTML5标准的制定与应用，通过使用新技术（包括音频元素、视频元素、矢量图形元素、应用缓存）让浏览器直接支持相关的多媒体或交互应用，这种技术趋势必然导致Flash等很多传统的插件技术被新的技术标准取代。
2.5内嵌元素,Java小应用程序（JavaApplet）凭借Java本身的跨平台性、安全性等优点，可以实现图形绘制、字体和颜色控制、动画和声音的播放、人机交互及远程数据访问等功能。
Java小应用程序,ActiveX是Microsoft对于一系列面向对象程序技术和工具的称呼，其中主要的技术是组件对象模型（ComponentObjectModel，简称为COM）。
ActiveX只能在Windows环境下运行。
ActiveX,Flash是一种基于矢量图像的交互式多媒体技术。
矢量图像也称为面向对象的图像，它使用称为矢量的直线和曲线来描述图像。
Flash,2.6结构元素,、,HTML5中支持的多种结构元素来呈现文档中的各节（Sections）内容，包括HTML4中已经定义的、和元素，以及HTML5中新定义的、和元素。
2.6结构元素,这是标题1这是标题2这是标题3这是标题4这是标题5这是标题6,2.6结构元素,在HTML5中新增了、等新元素，而这些元素的作用主要体现在语义上，主要目的是增加文档的可读性和搜索引擎优化，在内容展示方面并没有特别的改变。
为了方便理解，这里将这些结构元素和word文档结构进行类比：
相当于页眉，相当于页脚，相当于正文，是正文中包含的各个部分（可以理解为段落或章节），是正文的注解，而则是网站中经常使用的导航栏。
2.7编辑元素,HTML5中的编辑元素（Edits）包括和，它们配合可以描述对文档的更新和修正。
2.7编辑元素,我喜欢吃苹果。
我喜欢吃梨。
2.8表单元素,元素在页面中产生表单，表单提供了用户与Web服务器的信息交互功能，是Web技术的要素之一。
表单接受用户信息后，把信息提供给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。
表单的定义元素是。
表单中可以包含、等子元素。
2.8表单元素,2.8表单元素,元素的4个主要属性分别是action、method、enctype、target。
例如下面的代码：
该属性值指定了提交表单时对应的服务器程序地址。
action属性,method属性指定表单中的输入数据的传输方法，它的取值是get或post。
method属性,enctype属性指定表单中输入数据的编码方法。
enctype属性,target属性用来指定目标窗口的打开方式。
target属性,2.8表单元素,input元素定义输入控件，用来搜集用户信息。
2.8表单元素,元素的属性type的取值及意义,2.8表单元素,请输入姓名：
请输入密码：
上传的文件：
请选择旅游城市，可多选北京请选择付款方式,信用卡出发日期出发时间,DEMO,表单元素1,2.8表单元素,元素可以将表单中的一部分内容组合起来，生成一组相关表单的字段。
当一组表单元素作为子元素放到元素内时，浏览器通常会以加上边框的方式进行显示。
作为元素的第一个子元素，元素可以为元素加上标题。
2.8表单元素,健康信息：
身高：
体重：
2.8表单元素,元素定义下拉式列表框和滚动式列表框。
当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表。
在将表单数据提交给服务器时，同时还包括了元素的name属性值。
2.8表单元素,元素的语法如下所示:
选项描述选项描述使用元素定义下拉列表框时，由元素定义列表框的各个选项。
元素位于元素内部。
一个元素可以包含多个元素。
元素要与元素一起使用，否则元素是无意的。
2.8表单元素,DEMO,表单元素2,2.8表单元素,和是在HTML5中新增的元素。
元素可以用来显示正在执行的状态或进度情况，配合Javascript程序，可以控制元素中的value属性，以精确地显示进展情况。
元素可以以直方图的形式显示值的大小。
为了实现直方图的显示，除了需要通过value属性给出具体的数值，还需要通过min和max属性给出该直方图的最小和最大值，以便可以按比例进行显示。
min和max属性的缺省值为0和1。
2.8表单元素,下载进度：
显示度量值：
3/1060%,DEMO,表单元素3,2.8表单元素,元素中可以嵌入脚本程序，HTML5中脚本程序默认是用Javascript语言书写；当浏览器不支持脚本程序的执行，则会显示元素中的内容。
元素中可以定义前端模板，可以通过Javascript代码进行调用；元素用来绘制2D图形，这与SVG的作用相似。
不同的是，元素的绘图机制依赖于分辨率、不支持事件处理器，但可以按照像素重新生成。
元素也需要Javascript代码的支持。
2.8表单元素,2.9头部元素,头部元素中可以包含多个元素用来描述脚本、链接样式表、提供元信息等，这些信息虽然不能直接在页面上展示，但对于文档的说明、可读性和搜索引擎优化等方面至关重要。
元素的子元素包括、和等。
2.9头部元素,2.9头部元素,TitleofthedocumentThecontentofthedocument.,2.9头部元素,元素用来定义HTML文档和外部资源的关系，通常用来声明HTML所引用的CSS文档。
例如下面的代码中链接了一个名为mystyle.css的文档：
除了链接，在HTML中还可以直接嵌入CSS样式代码。
下例中使用元素来完,成这一任务：
bodybackground-color:
yellow;pcolor:
blue;,2.9头部元素,元素可以给出HTML文档的元数据（metadata）。
元数据不会在网页中显示，但会被浏览器、搜索引擎等程序解析和应用。
在下面的代码中，通过元数据给出了页面的简述、关键词、作者、字符集等信息：
元素所给出的网页元数据对于搜索引擎判断网页类型、内容都很有帮助。
2.10HTML中的颜色设置,HTML中的颜色是由红（Red）、绿（Green）、蓝（Blue）三种颜色组合而成的RGB值来表示。
RGB中三个颜色的值分别都可以从0（十六进制记作#00）到255（十六进制记作#FF），所以可以组合出16777216（256x256x256）种颜色。
比如，红色为#FF0000，黄色为#FFFF00，黑色为#000000，白色为#FFFFFF。
在HTML标准中，有许多种颜色还可以直接用颜色名称表示，比如aqua、black、blue、gray、green、purple、red、white和yellow等。
2.10HTML中的颜色设置,ColorsetbyusinghexvalueColorsetbyusingrgbvalueColorsetbyusingcolorname,2.11绝对路径与相对路径,绝对路径来说明文件的位置Hello!
上述的代码语法正确，也能达到预定的效果，但却不符合软件工程的要求。
网站在设计开发和运行维护的过程中需要不断进行适当修改，甚至可能会整体迁移（从一个域名变为另外一个域名）。
在这类情况下，绝对路径的缺点会非常明显，不便于系统的开发和维护。
2.11绝对路径与相对路径,相对路径的描述方式如果该HTML文档和被引用的文档在同一个目录下，则直接写引用文件名即可。
如果被引用的文档是在该HTML文档的下一级目录，则使用在之前加入子目录的名称即可。
例如“img/abc.jpg”。
如果被引用的文档是在该HTML文档的上一级目录，则可使用“.”来说明。
例如“./abc.htm”。
前面列举的几个绝对路径的描述可改为如下相对路径：
Hello!
或以“/”开头来描述：
Hello!
这种方式的好处在于，文件的引用不受该HTML文件本身路径的影响，便于开发和,维护。
2.12思考题,
（1）,HTML是一种计算机语言，它与同样也是计算机语言的C语言等都什么本质的不同？
（2）,相对之前的标准，HTML5的主要变化包括哪些？
（3）,表格元素在页面设计中非常重要，特别是在商业系统中的数据展示方面尤为常用。
请说明、元素分别具有什么功能。
（4）,超链接元素中可以设置target属性，请分别描述target属性的不同取值及功能。
（5）,HTML中支持插入的图像文件格式主要有哪些，它们各有什么特点？
2.12思考题,（6）,请在不同的浏览器中测试它们对HTML5频、视频元素的支持情况，测试音频和视频的编码要求。
（7）,试用元素在网页中嵌入你所在地区的天气情况。
提示：
可以在互联网中先找到可以正常显示的小型天气页面，然后将其嵌入。
（8）,请思考在什么样的情况下会使用元素，编写代码完成单选和多选的功能。
（9）,元素常常用来进行页面的布局设计，试应用元素模仿设计一个门户网站（比如新浪或网易等）的页面布局。
（10）,请分别应用绝对路径和相对路径方式的超链接设计两个页面，并让它们相互指向。
商务网站设计与开发,第3章层叠样式表CSS,内容,CSS简介,3.1,选择符,3.2,CSS的层叠性与优先次序,3.3,常用属性及其应用实例CSS盒子模型和网页布局方式,3.4,3.5,思考题,3.6,3.1CSS简介,层叠样式表（CascaingStyleSheet，简称为CSS）是W3C组织所拟定出的一套标准的样式语言规范。
随着CSS技术技术的使用，HTML页面真正“活动”了起来。
而在HTML5中，一些纯粹用作显示效果的元素将取消，因为它们显示效果的工作更适合由CSS来担当。
作为一种用于网页展示的样式语言，CSS增加了更多的样式定义方式来辅助HTML语言。
通过CSS样式表的定义，只要设定某种元素（如：
表格、背景、连结、文字、按钮、滚动条等）的样式，则各网页相同种类的元素将会呈现出相同的风格。
这种方式不仅加快了网站开发的进度，而且便于建立一个风格统一的网站。
3.1CSS简介,CSS的定义可以直接放在HTML元素中，称为内联样式。
形式如下：
Thisisaparagraph.CSS的定义可以放在HTML文件的元素中，称为内部样式表。
形式如下：
background-color:
yellow;,body,CSS的定义也可以独立保存在一个扩展名为.css的文件中，通过链接的方式包含入,网页中，称为外部样式表。
形式如下：
3.2选择符,一条CSS规则中包括两个部分：
一个选择符（selector）和一个或多个描述（declaration），描述之间用分号隔开。
每一个描述中又包含属性名（property）和属性值（value）。
语法如下：
selectorproperty:
value;property:
value;.下面的CSS规则中声明了段落元素的显式方式，包括
升级会员 