网页设计与制作(第一讲).

吉林大学计算中心徐昊[e-mail]网页设计与制作课程安排共10次课，每次3学时(10月12日-12月14日)理论课(6次)+实验课(2次)+项目讨论(2次)考试：网页作品(分组)课程内容网络技术基础网站建设概要网页设计语言HTML网页制作工具：Dreamweaver,FrontPage,Flash网页制作发展趋势及相关技术：HTML5，手机网页一、网络技术基础因特网（国际互联网）是基于TCP/IP协议的，由许多小的网络（子网）互联而成的一个超级广域网。是以资源共享为目的。网络发展阶段：Web1.0Web2.0社会网络SocialNetworkWeb3.0语义网SemanticWeb1、Internet发展蒂姆·伯纳斯·李（TimBerners-Lee）爵士（1955年6月8日出生于英国）是万维网的发明者，互联网之父，英王功绩勋章（OM）获得者，不列颠帝国勋章（OBE）获得者，英国皇家学会会员，英国皇家工程师学会会员，美国国家科学院院士。1989年3月他正式提出万维网的设想，1990年12月25日，他在日内瓦的欧洲粒子物理实验室里开发出了世界上第一个网页浏览器。90年代以来国际互联网的发展正如蒂姆所预见的，网景与微软的浏览器之争，被称为环球第一商战，快速膨胀的网络已有瘫痪之虞。为此在1994年，蒂姆创建了非赢利性的环球国际集团W3C（WorldWideWebConsortium），邀集Microsoft、Netscape、Sun、Apple、IBM等共155家互联网上的著名公司，致力达到技术标准化的协议，并进一步推动Web技术的发展。蒂姆坚持，W3C最基本的任务是维护互联网的对敌性，让它保有最起码的秩序。TimBernersLee与W3C社会网络六度分割理论：20世纪60年代，美国心理学家米尔格兰姆设计了一个连锁信件实验。米尔格兰姆把信随机发送给住在美国各城市的一部分居民，信中写有一个波士顿股票经纪人的名字，并要求每名收信人把这封信寄给自己认为是比较接近这名股票经纪人的朋友。这位朋友收到信后，再把信寄给他认为更接近这名股票经纪人的朋友。最终，大部分信件都寄到了这名股票经纪人手中，每封信平均经手6．2次到达。于是，米尔格兰姆提出六度分割理论，认为世界上任意两个人之间建立联系，最多只需要6个人。Facebook,LinkedIn,人人，微博…..2、IP地址和域名(1)IP地址：任何连接在Internet的计算机,都叫做主机(Host),任何一台主机在互联网上都有一个唯一的地址,成为IP地址。依靠IP地址可以识别各个不同主机。IP（InternetProtocol）地址由4组数字构成，每组8位，共32位。它包含了两部分信息，即网络代号（NetID）和主机代号（HostID），共计43亿左右个如：60.191.134.205192.168.0.1等IPV6由32位增加到128位(2)域名IP地址是一串枯燥的数字很难理解和记忆,为了解决这个问题引入了域名,每一个域名与IP地址是一一对应的，人们输入域名，再由域名服务器（DNS）解析成IP地址，从而找到相应的网站。如：、统一资源定位器（URL）URL(UniformResoureLocator统一资源定位器）是网页的地址，好比一个街道在城市地图上地址。url使用数字和字母按一定顺序排列以确定一个地址。URL的第一个部分http://表示的是要访问的文件的类型。在网上，这几乎总是使用http。它是用来转换网页的协议。有时也使用ftp,意为文件传输协议,主要用来传输软件和大文件;telnet（远程登录）,主要用于远程交谈;以及文件调用等,意思是浏览器正在阅读本地盘外的一个文件,而不是一个远程计算机.URL地址格式排列为：scheme://host:port/path例如就是一个典型的URL地址。客户程序首先看到http（超文本传送协议），便知道处理的是HTML链接。接下来的是站点地址（域名），最后是目录/bbsHTTPS和HTTP的区别HTTPS（全称：HypertextTransferProtocoloverSecureSocketLayer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。一、https协议需要到ca（CertificateAuthority）申请证书，一般免费证书很少，需要交费。二、http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。三、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。四、http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。4、超文本标记语言（HTMLHypertextMarkedLanguage）是一门专门用于的编程语言。用于描述超文本各个部分的构造，告诉浏览器如何显示，怎样生成文档链接等信息，需要通过WEB浏览器显示出效果。•超文本标记语言(第一版)--在1993年6月(并非标准)•HTML2.0--1995年11月发布•HTML3.2--1996年1月14日,W3C推荐标准•HTML4.0--1997年12月18日,W3C推荐标准•HTML4.01(微小改进)--1999年12月24日,W3C推荐标准•XHTML1.0--发布于2000年1月26日,是W3C推荐标准XHTML1.1--于2001年5月31日发布HTML5HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做WebHypertextApplicationTechnologyWorkingGroup（Web超文本应用技术工作组-WHATWG）的组织。WHATWG致力于Web表单和应用程序，而W3C专注于XHTML2.0。在2006年，双方决定进行合作，来创建一个新版本的HTML。HTML5草案的前身名为WebApplications1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。HTML5的第一份正式草案已于2008年1月22日公布。HTML5仍处于完善之中。然而，大部分现代浏览器已经具备了某些HTML5支持。支持的浏览器包括Firefox，IE9，Chrome，Safari等。A.语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。B.本地存储特性（Class:OFFLINE&STORAGE）基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5APPCache，以及本地存储功能。IndexedDB（html5本地存储最重要的技术之一）和API说明文档。C.设备兼容特性(Class:DEVICEACCESS)从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联HTML5特性D.连接特性（Class:CONNECTIVITY）更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-SentEvent和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据’推送’到客户端的功能。E.网页多媒体特性(Class:MULTIMEDIA)支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。F.三维、图形及特效特性（Class:3D,Graphics&Effects）基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。G.性能与集成特性（Class:Performance&Integration）没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。H.CSS3特性(Class:CSS3)在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。跨平台！！！5、和浏览器（1）的缩写，万维网（亦作“网络”、“”、“3W”，英文“Web”或“WorldWideWeb”），是一个资料空间。在这个空间中：一样有用的事物，称为一样“资源”；并且由一个全域“统一资源标识符”（URL）标识。这些资源通过超文本传输协议(HyperTextTransferProtocol)传送给使用者，而后者通过点击链接来获得资源。从另一个观点来看，万维网是一个透过网络存取的互连超文本(interlinkedhypertextdocument)系统。浏览器是指可以显示网页服务器或者文件系统的HTML文件内容，并让用户与这些文件交互的一种客户端程序。微软的InternetExplorer、Mozilla的Firefox、Apple的Safari、Opera、HotBrowser、Google的Chrome。2008年3月1日起停止开发网景浏览器（NetscapeNavigator），并停止一切技术支持。（2）浏览器（Browser）二、初识网页1、静态网页并不是网页中元素都是静止不动的，而是指网页制作完成后，在浏览时，Web服务器中不再发生应用程序的执行。静态网页是标准的HTML文件，其文件扩展名是.htm或.html。它可以包含HTML标记、文本、Jave小程序、客户端脚本以及客户端ActiveX控件，但这种网页不包含任何服务器端脚本，该页中的每一行HTML代码都是在放置到Web服务器前由网页设计人员编写的，在放置到Web服务器后便不再发生任何更改，所以称之为静态网页。静态网页的执行过程2、动态网页除了普通页面中的元素外，还包括一些应用程序，这些应用程序使得浏览器与Web服务器之间发生交互。动态网页的执行过程3、动态网页与静态网页之间的区别动态网页中的某些脚本只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web服务器上运行。当Web服务器接收到对静态网页的请求时，服务器将该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到对动态网页的请求时，它将做出不同的反映：它将该页传递给一个称为应用程序服务器的特殊软件扩展，然后由这个软件负责完成页。应用服务软件与Web服务器软件一并安装、运行在同一台计算机上。4、网页开发流程静态网页动态网页photoshopfireworkflashDreamweaver（整合各种媒体）数据库（SQLServer）ASP/JSP/PHP网站浏览器客户端24网页设计与网页文件规划1.1定位网站的系统、类别和形象1.2网站建立步骤1.3网页规划和步骤1.4网页制作工具251.1定位网站的系统、类别和形象——定位网站的系统在因特网飞速发展的今天，网络技术和与之相应的建立网站、制作网页，已经成为最吸引人的技术。从网站功能考虑，网站系统可以划分为以下方向：1．辅助政府部门进行国家管理。2．为新闻和宣传提供平台。3．为商业活动提供交易平台。4．为科研和学