《html5与css3网页设计教学课件作者库波html5与css5网页设计第一章》由会员分享，可在线阅读，更多相关《html5与css3网页设计教学课件作者库波html5与css5网页设计第一章（27页珍藏版）》请在金锄头文库上搜索。
1、第1章 网页设计入门,1.1 Internet简史 1.2 为什么建立一个网站 1.3 网页的基本概念 1.4 HTML5简介 1.5 CSS3简介 1.6 网页设计的开发环境,返回,1.1 Intern et简史,在20世纪80年代初期，ARPA和美国国防部通信局成功研制了用于异构网络的TCP/IP协议并将其投入使用;1986年在美国国会科学基金会的支持下，人们用高速通信线路把分布在各地的一些超级计算机连接起来，以NFSNET接替ARPANET;其又经过十几年的发展形成Internet。其应用范围也由最早的军事、国防扩展到美国国内的学术机构，进而迅速覆盖了全球的各个领域，运营性质也由科研、教
2、育逐渐转向商业。 Internet从用于军用通信的一个模糊概念演化成为几亿人使用的重要工具，使人们可以互相通信、研究和收集信息、远程工作、购物、游戏并参与无数其他全球性的活动。,返回,1.2 为什么建立一个网站,公司和个人一样，建立网站都有实用和商业的原因。通过网站人们能够与全球的有同样想法的个人或潜在的客户通信。 从实用的角度来看，网站每天24小时都存在于网络，这与印刷媒体不同，印刷媒体在一分钟之后就变成再生垃圾。在线分发比邮寄印刷媒体要便宜得多。同样，开发(特别是改正和更新)往往也要便宜得多。,返回,1.3 网页的基本概念,1.3.1 网页与网站的关系 如果把网站比作一本书，那么网页就是这
3、本书中的一页。网页是构成网站的基本单位，是承载各种网站应用的平台，是网站信息发布和表现的主要形式。简单描述，网站是由网页组成的，如果只有域名和虚拟主机而没有制作任何网页的话，任何人都无法访问网站。 网页(Web Page)就是一个文本文件，其扩展名多为“. htm”或“. html “，也有“. asp “ “ . aspx “ . phP”或“.jsp”等。使用任何文本编辑器都可以打开并编辑网页文件。网页可以存放在世界的某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址(URL )来识别和存取，当用户在浏览器中输入网址后，经过一段复杂而又快速的程序处理，网页文件会被传送
4、到当前位置的计算机上，然,下一页,返回,1.3 网页的基本概念,后再通过浏览器解释网页的内容而展示出来。 网站(Web SitP)是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，其不一定有很多网页，关键是有独立域名和空间，哪怕只有一个页面也叫网站。 1.3.2 网页的基本元素 1.文本 网页信息主要是以文本为主的。文本在网络上的传输速度很快，浏览者可以方便地浏览和下载。在制作网页时，可以通过字体、字型、字号、颜色、边框、间距和背景来设置文本的属性，美化版面布局，如图1-1所示。 2.图像,上一页,下一页,返回,1.3 网页的基本概念,现在几乎所有的网站都会使用
5、图像来增加网页的吸引力，可以在网页中使用GIF, JPEG和PNG等多种图像格式，其中使用最广泛的是CIF和JPEG两种格式。 3.动画 在网页中应用的动画元素主要有CIF和Flash两种形式，CIF动画的效果单一，已经不能适应人们对网页视觉效果的要求。随着Flash动画技术的不断发展，Flash动画的应用已经越来越广泛，特别是在网页中，其已经成为最主要的动画形式，打开任何一个网站，几乎都可以在该网站上看到Flash动画。 4.超链接 超链接是从一个网页指向一个目的端的链接。超链接是网站得以整合,上一页,下一页,返回,1.3 网页的基本概念,的“灵魂”。 5.表单 网页中通常用表单来联系数据库
6、并接收访问用户在浏览器端输入的数据。表单的作用是收集用户在网页上输入的联系信息、登录信息、反馈意见等，如图1-4所示。 6.导航栏 导航栏是浏览网页时有效的指向标志，它相当于一个网站的目录。导航栏通过超链接与站点中的网页或其他网站进行链接，从而快速切换到另一个栏目，如图1-5所示。导航栏即可使用文本导航的形式，也可以使用图片导航的形式。,上一页,下一页,返回,1.3 网页的基本概念,1.3.3 网页的技术构成 1. HTML 网页最基础的技术是HTML ( Hyper Text Markup Language，超文本标记语言)，它并不是一种程序设计语言，而是一种页面描述语言。当用户通过网页浏览
7、阅读HTML文件时，浏览器负责解释插入到HTML文本中的各种标记，并以此为依据显示文本的内容。我们把用HTML语言编写的文件称为HTML文本。HTML语言即Web页面的描述语言。HTML至今已发展到了HTML5，本书将在第3章对HTMLS进行详细介绍。 2. CSS CSS的全称为Cascading Style Sheets(层叠样式表)，是一组用于定,上一页,下一页,返回,1.3 网页的基本概念,义Web页面外观格式的规则。 3. JavaScript JavaScript就是为了适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 JavaSc
8、ript使网页增加了互动性。 4. Ajax Ajax用来描述一组技术，它使浏览器可以为用户提供更加自然的浏览体验。 Ajax由几种蓬勃发展的技术以新的强大方式组合而成，包含 (1)基于XHTML和CSS标准的表示; (2)使用Document Object Model进行动态显示和交互;,上一页,下一页,返回,1.3 网页的基本概念,(3)使用XMLHttpRequest与服务器进行异步通信; (4)使用JavaScript绑定一切。 Ajax能在网页中加入精美特效，让网站更受用户喜爱。 5. jQuery jQuery是一个兼容多浏览器的JavaScript库，其核心理念是write le
9、ss , do more(写的更少，做的更多)。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发工作更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。 6. PHP PHP是一种基于服务端来创建动态网站的脚本语言，人们可以用PHP和HTML生成网站主页。当一个访问者打开主页时，服务端便执行,上一页,下一页,返回,1.3 网页的基本概念,PHP的命令并将执行结果发送至访问者的浏览器中，这类似于ASP和CoildFusion。然而PHP和它们的不同之处在于PHP开放源码和跨越平台，PHP可以运行在Windows NT和多种
10、版本的UNIX上。它不需要任何预先处理便可快速反馈结果，它也不需要modperl的调整来使服务器的内存映象减小。PHP消耗的资源较少，当PHP作为Apache Web服务器的一部分时，运行代码不需要调用外部二进制程序，服务器不需要承担任何额外的负担。,上一页,返回,1.4 HTML5 简介,1.4.1 HTML的发展历史 (1)超文本标记语言(第一版)在1993年6月由IETF工作草案发布(并非标准)。 (2) HTML2.0于1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时。 (3) HTML3.2于1996年1月14日发布，为W3C推荐标准。
11、(4) HTML4.0于1997年12月18日发布，为W3C推荐标准。 (5) HTML4.01(微小改进)于1999年12月24日发布，为W3C推荐标准。 (6) XHTML1.0于2000年1月26日发布，为W3C推荐标准，后来经过修订于2002年8月1日重新发布。,下一页,返回,1.4 HTML5简介,1.4.2 HTML4.01 和 XHTML XHTML的全称是eXtensible Hyper Text Markup Lanuae，即扩展的超文本标记语言。XHTML和HTML4. 01具有良好的兼容性，而且XHTML是更严格、更纯净的HTML代码。XHTML就是最新版本的HTML规范
12、。 人们习惯上认为HTML也是一种结构化文档，但实际上HTML的语法非常自由、宽容(主要是各浏览器纵容的结果)，所以才有如下HTML代码: 不规范的HTML文档 不规范的HTML文档,上一页,下一页,返回,1.4 HTML5 简介,上面代码中4个粗体字标签都没有正确结束，这显然违背了结构化文档的规则，但使用浏览器来浏览这份文档时，依然可以看到浏览效果这就是HTML不规范的地方。而XHTML致力于消除这种不规范,XHTML要求HTML文档首先必须是一份XML文档。 XML文档是一种结构化文档，它有如下4条基本规则 (1)每个开始标记必须和结束标记配套使用。 (2)文档中必须包含唯一的打开和关闭标
13、记，文档中的所有其他标记都必须包含在这两个标记中。 (3)各个标记之间不能重叠，或者说不能交叉定义。 (4)元素的属性必须有属性值，而且属性值应该用引号(单引号和双引号都可以)引起来。,上一页,下一页,返回,1.4 HTML5 简介,1.4.3 从XHTML到HTML5 现有的HTML页面大量存在不符合规范的内容，如元素的标签名大小写混杂的情况;元素没有合理结束的情况;元素中使用了属性，但没有指定属性值的情况;为元素的属性指定属性值时没有使用引号的情况等。 可能是出于“存在即合理”的考虑，WHATWG组织开始制订一种“妥协式”的规范:HTML5。既然互联网上存在大量上述不符合规范的内容，而且制
14、作者从来也不打算改进这些页面，因此HTML5干脆承认它们是符合规范的。,上一页,返回,1.5 CSS3简介,1.5.1 什么是CSS CSS其实是一种描述性的文本，用于增强或者控制网页的样式，并允许将样式信息与网页内容分离。用于存放CSS样式的文件的扩展名为“. css“ 。 随着Web页面效果的要求越来越多样化，依赖HTML的页面表现已经不能满足网页开发者的需求。 CSS的出现，改变了传统HTML页面的样式效果。CSS规范代表了Web发展史上的一个独特的阶段。 1.5.2 CSS的历史 CSS的发展是伴随着HTML的发展而发展的。从20世纪90年代初HTML被发明开始，样式表就以各种形式出现
15、了。,下一页,返回,1.5 CSS3简介,1994年哈坤提出了CSS的最初建议。 1996年年底，CSS完成，同年12月发布了第一个版本的规范CSS1;1998年5月发布第二个版本的规范CSS2;2004年发布CSS2.1，这是CSS2的修订版。 近10年间CSS可以说基本上没有什么大的变化，一直到2010年，其终于推出了一个全新的版本CSS3。 1.5.3 CSS3能做什么 CSS3并没有采用总体结构，而是采用了分工协作的模块化结构。把总体结构分成几个模块，各浏览器可以选择对哪个模块进行支持，对哪个模块不进行支持，支持的时候也可以集中把某一个模块全部支持完了再支持另一个模块，以减少支持不完全
16、的可能性。,上一页,返回,1.6 网页设计的开发环境,1.6.1 Web设计软件 1. Dreamweaver CS6 Dreamweaver CS6是Adobe公司推出的一款网页设计的专业软件，其强大功能和易操作性使它成为同类开发软件中的佼佼者。图1-8所示为Dreamweaver CS6制作网页的界面。 2. Microsoft Expression Web Microsoft Expression Web受制于PHP支持的缺乏(它主要关注面向Microsoft的技术)和Mac OS X版本的缺乏，但是，对于基于Windows且只对静态网站感兴趣的Web设计人员，以及开发基于ASP. NET站点的人来说，这个软件值得一用。,下一页,返回,1.6 网页设计的开发环境,1.6.2 图形设计软件 1. Photoshop CS6 PhotoshopCS6是Adobe公司的最新的图像编辑软件，它提供了高效的图像编辑和处理功能、人性化的操作界面，深受美术设计人员的青睐。图1-9所示为使用Photoshop CS6处理网页图像的界面。 2. Fireworks CS6 在网页图像设计
