《成功在线技术部Web开发培训》由会员分享，可在线阅读，更多相关《成功在线技术部Web开发培训（68页珍藏版）》请在金锄头文库上搜索。
1、动态网页设计入门 -畅享网络之美,成功在线技术部,主要内容：,开发背景 网页构成 三层架构 素材准备 程序开发,Web 1.0,web1.0的发展出现了向综合门户合流现象，早期的新浪与搜狐、网易等，继续坚持了门户网站的道路，而腾讯、MSN、GOOGLE等网络新贵，都纷纷走向了门户网络，尤其是对于新闻信息，有着极大的、共同的兴趣。这一情况的出现，在于门户网站本身的盈利空间更加广阔，盈利方式更加多元化，占据网站平台，可以更加有效地实现增值意图，并延伸由主营业务之外的各类服务。,web1.0的盈利都基于一个共通点，即巨大的点击流量。无论是早期融资还是后期获利，依托的都是为数众多的用户和点击率，以点击
2、率为基础上市或开展增值服务，受众群众的基础，决定了盈利的水平和速度，充分地体现了互联网的眼球经济色彩。 success 造就了门户.检索类搜索引擎.yahoo.,2000 互联网泡沫,Web 2.0,Web 2.0特征 1、多人参与 Web1.0里，互联网内容是由少数编辑人员（或站长）定制的，比如各门户网站；而在Web2.0里，每个人都是内容的供稿者。 2、人是灵魂 在互联网的新时代，信息是由每个人贡献出来的，各个人共同组成互联网信息源。Web2.0的灵魂是人。 3、可读可写互联网 在Web1.0里，互联网是“阅读式互联网”，而Web2.0是“可写可读互联网”。虽然每个人都参与信息供稿，但在大
3、范围里看，贡献大部分内容的是小部分的人。 4、Web2.0的元素 Web2.0包含了我们经常使用到的服务，例如博客、播客、维基、P2P下载、社区、分享服务等等。博客是Web2.0里十分重要的元素，因为它打破了门户网站的信息垄断，在未来里，博客的地位将更为重要。 5、个人看法 Web2.0实际上是对Web1.0的信息源进行扩展，使其多样化和个性化。,Web 2.0,多人参与 Web1.0里，互联网内容是由少数编辑人员（或站长）定制的，比如各门户网站；而在Web2.0里，每个人都是内容的供稿者。-twitter,SNS,RSS也叫聚合RSS是在线共享内容的一种简易方式（也叫聚合内容，Really
4、Simple Syndication）。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息，网站提供RSS输出，有利于让用户获取网站内容的最新更新。同时也是医学、物理学、数学等学科专有名词的英文缩写简称。,Google Reader,Mash up【聚合开发】,借力使力不费力【用户数，开发数据库】一般使用源应用的API接口，或者是一些rss输出（含atom）作为内容源，合并的web应用用什么技术，则没有什么限制。mashup在geek群体和互联网玩家之中获得了极大的欢迎，mashup未必需要很高的编程技能，只需要熟悉api和网络服务工作方式，都能进行开发，所以很快成为一个流行的网络现象。
5、很多公司例如yahoo/google都为此提供开放接口，以吸引这个群体。 wing|开放平台,Wing -Sina miniBlog,UI is key! 视觉设计、交互设计、用户研究、前端开发,Web 3.0 ?,Mobile; recommendation and personalization,iGoogle,Mobile Internet,1G-2G-3G,Web vs Apps,网页构成,HTMLHTTP,发展历程： 静态页面时代 文本+静态图片、平面设计、无交互 客户端动态技术时代 gif、JavaScript、VBScript、CSS、Applet、Flash、各种音视频的应用（
6、插件）等 服务器端动态技术时代 CGI、PHP、ASP、ASP.NET、Servlet、JSP、JavaBean等 容器：IIS、Tomcat等,HTML简介,HTML（Hypertext Markup Language，超文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。,HTML标记,1双标记 语法格式： 内容 2单标记 语法格式如下：在使用的大多数单标记和双标记的开始标记内通常可以包含一些属性，其语法格式如下： ,HTML基本结构,HTML中的基本结构如下：头部信息主体内容,HTML文档中的第一个标记，该标记用于表示该文档是HTML文档，当浏览器遇
7、到标记时，就会按HTML的标准来解释文本。结束标记出现在HTML文档的尾部。,标记,此标记出现在标记内起始的部分，此标记称为头部标记。 头部标记用于提供与Web页面有关的各种信息。在头部标记中，可以使用标记模拟HTTP协议的响应头报文，用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等，在HTML头部可以包括任意数量的标记；使用标记来指定网页的标题；使用标记来定义CSS样式表；使用标记来插入脚本语言等。一般来说，位于头部标记中的内容都不会在网页上直接显示。,标记 实例,此标记称为主体标记，在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分，此标记有很多
8、的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等。,文本标记,标题标记 语法格式如下：标题 标题 ,段落,1、段落标记 语法： 2、换行标记在页面中一行文字达到一定长度浏览器会对其自动换行，如果文字未达到一定长度可以使用换行标记对其强制换行。换行标记是单标记。,例1,段落与换行互联网发展的起源 第1阶段 1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。 第2阶段20世纪70年代末到80年代初，
9、计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模 和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。,网页示例(notepad),大家好，我是网页标题 此处是标题一这儿是网页内容 ,超链接,HTML文件最重要是特性之一就是超链接，通过网页上所提供的链接功能，用户可以链接到网络上的其他网页。建立超链接所使用的HTML标记为。超链接最重要的有两个要素，设置为超链接的文本内容和超链接指向的目标地址。,超链接标记常用的属性及说明,success,图像,图像标记 常用的属
10、性及说明,彩蛋,例3,图像,在CSS还未应用之前，如何构建网站的框架？,表格,使用表格可以清晰地显示列成表的数据，例如如下图所示的是股票行情的数据列表。,表格（续1）,创建一个表格的语法格式如下：表格标题内容表头内容表头内容单元格内容单元格内容,表格标记的常用属性及说明,表格（续2）,表格（续3）,表格标题标记用来设置一种比较特殊的单元格“标题单元格”。标题单元格位于整个表格的第一行位置，起到为表格显示标题的作用。表格表头标记在表格中还有一种特殊的单元格，此单元格为“表头”，表格的表头一般位于第一行的第一列位置，用来说明这一行的内容的类别。表头中的内容是加粗显示的。,行标记的常用属性及说明,表
11、格（续4）,一个普遍的问题 (css+html+javascript),HTML 标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。 由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。,一个普遍的问题 如何解决？,框架 HTML 装饰 css 能源 javascript,为了解决这个问题，
12、万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style） 所有的主流浏览器均支持层叠样式表 CSS示例,CSS 层叠样式表 (Cascading Style Sheets) 样式,定义如何显示 HTML 元素 样式通常存储在样式表中 可以有效地解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中,又一个问题：样式与网页内容的分离,外部级联样式表示例这是一个外部级联样式表这行文字应该是红色的这段的底色应是黄色,关于DIV,body #Container /*页面层容器*/#Header /*页面头部*/
13、#PageBody /*页面主体*/ #Sidebar /*侧边栏*/ #MainBody /*主体内容*/#Footer /*页面底部*/,CSS+DIV示例,javascript,什么是脚本？,脚本语言（Scripting Language）是一种简单的程序，这些程序是由一些ASCII字符构成，可以使用任何一种文本编辑器来编写。以往的一些程序语言（如C、C+、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器（Interpreter）就可以执行。 脚本语言可以简单地分为两类：服务器端脚本语言(CGI，Php,Py
14、thon，ruby，VBScript，ASP，JSP)和客户端脚本语言(JavaScript，Jscript，ActionScript)。,JavaScript和Java的区别,虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。 Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；Java的前身是Oak语言。 JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script。,
15、Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。 JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。,JavaScript的功能,1、交互性 使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。 2、动态性 JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。,J
16、avaScript的局限性,安全性有关的局限性JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。(1) JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2) JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。,JavaScript与HTML, function display_alert() alert(“I am an alert box!“) ,
