《成功在线技术部Web开发培训.ppt》由会员分享，可在线阅读，更多相关《成功在线技术部Web开发培训.ppt（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 Simple Syndi
4、cation）。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息，网站提供RSS输出，有利于让用户获取网站内容的最新更新。同时也是医学、物理学、数学等学科专有名词的英文缩写简称。,Google Reader,Mash up【聚合开发】,借力使力不费力【用户数，开发数据库】一般使用源应用的API接口，或者是一些rss输出（含atom）作为内容源，合并的web应用用什么技术，则没有什么限制。mashup在geek群体和互联网玩家之中获得了极大的欢迎，mashup未必需要很高的编程技能，只需要熟悉api和网络服务工作方式，都能进行开发，所以很快成为一个流行的网络现象。很多公司例如yahoo/
5、google都为此提供开放接口，以吸引这个群体。wing|开放平台,Wing-Sina miniBlog,UI is key!视觉设计、交互设计、用户研究、前端开发,Web 3.0?,Mobile;recommendation and personalization,iGoogle,Mobile Internet,1G-2G-3G,Web vs Apps,网页构成,HTML HTTP,发展历程：静态页面时代文本+静态图片、平面设计、无交互客户端动态技术时代gif、JavaScript、VBScript、CSS、Applet、Flash、各种音视频的应用（插件）等服务器端动态技术时代CGI、PH
6、P、ASP、ASP.NET、Servlet、JSP、JavaBean等容器：IIS、Tomcat等,HTML简介,HTML（Hypertext Markup Language，超文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。,HTML标记,1双标记语法格式：内容2单标记语法格式如下：在使用的大多数单标记和双标记的开始标记内通常可以包含一些属性，其语法格式如下：,HTML基本结构,HTML中的基本结构如下：头部信息 主体内容,HTML文档中的第一个标记，该标记用于表示该文档是HTML文档，当浏览器遇到标记时，就会按HTML的标准来解释文本。结束标记出现
7、在HTML文档的尾部。,标记,此标记出现在标记内起始的部分，此标记称为头部标记。头部标记用于提供与Web页面有关的各种信息。在头部标记中，可以使用标记模拟HTTP协议的响应头报文，用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等，在HTML头部可以包括任意数量的标记；使用标记来指定网页的标题；使用标记来定义CSS样式表；使用标记来插入脚本语言等。一般来说，位于头部标记中的内容都不会在网页上直接显示。,标记实例,此标记称为主体标记，在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分，此标记有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面
8、的背景图像、背景颜色、文字颜色以及超文本链接颜色等。,文本标记,标题标记语法格式如下：标题标题,段落,1、段落标记语法：2、换行标记 在页面中一行文字达到一定长度浏览器会对其自动换行，如果文字未达到一定长度可以使用换行标记对其强制换行。换行标记是单标记。,例1,段落与换行 互联网发展的起源第1阶段1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。第2阶段 20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、U
9、SENET、BITNET、CSNET等，在网络的规模 和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。,网页示例(notepad),大家好，我是网页标题 此处是标题一 这儿是网页内容,超链接,HTML文件最重要是特性之一就是超链接，通过网页上所提供的链接功能，用户可以链接到网络上的其他网页。建立超链接所使用的HTML标记为。超链接最重要的有两个要素，设置为超链接的文本内容和超链接指向的目标地址。,超链接标记常用的属性及说明,success,图像,图像标记常用的属性及说明,彩蛋,例3,图像,在CSS还未应用之前，如何构建网站的框架？
10、,表格,使用表格可以清晰地显示列成表的数据，例如如下图所示的是股票行情的数据列表。,表格（续1）,创建一个表格的语法格式如下：表格标题内容表头内容表头内容单元格内容单元格内容,表格标记的常用属性及说明,表格（续2）,表格（续3）,表格标题标记用来设置一种比较特殊的单元格“标题单元格”。标题单元格位于整个表格的第一行位置，起到为表格显示标题的作用。表格表头标记 在表格中还有一种特殊的单元格，此单元格为“表头”，表格的表头一般位于第一行的第一列位置，用来说明这一行的内容的类别。表头中的内容是加粗显示的。,行标记的常用属性及说明,表格（续4）,一个普遍的问题(css+html+javascript)
11、,HTML 标签原本被设计为用于定义文档内容。通过使用、这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。,一个普遍的问题如何解决？,框架 HTML装饰 css能源 javascript,为了解决这个问题，万维网联盟（W3C），肩负起了 HTML 标准化的使命，并在 HTML 4.0 之
12、外创造出样式（Style）所有的主流浏览器均支持层叠样式表CSS示例,CSS 层叠样式表(Cascading Style Sheets)样式,定义如何显示 HTML 元素 样式通常存储在样式表中 可以有效地解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中,又一个问题：样式与网页内容的分离,外部级联样式表示例这是一个外部级联样式表这行文字应该是红色的这段的底色应是黄色,关于DIV,body#Container/*页面层容器*/#Header/*页面头部*/#PageBody/*页面主体*/#Sidebar/*侧边栏*/#MainBody/*主体内容*
13、/#Footer/*页面底部*/,CSS+DIV示例,javascript,什么是脚本？,脚本语言（Scripting Language）是一种简单的程序，这些程序是由一些ASCII字符构成，可以使用任何一种文本编辑器来编写。以往的一些程序语言（如C、C+、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器（Interpreter）就可以执行。脚本语言可以简单地分为两类：服务器端脚本语言(CGI，Php,Python，ruby，VBScript，ASP，JSP)和客户端脚本语言(JavaScript，Jscript，
14、ActionScript)。,JavaScript和Java的区别,虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；Java的前身是Oak语言。JavaScript是Netscape公司的产品，其目的是为了扩展Netscape Navigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是Live Script。,Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用
15、来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。,JavaScript的功能,1、交互性 使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。2、动态性 JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。,JavaScript的局限性,安全性有关的局限性JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法
16、都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。,JavaScript与HTML,function display_alert()alert(I am an alert box!),素材准备-工欲善其事必先利其器,FLASH 动画Photoshop 改图Fireworks 制图,
17、学习建议,常用HTML标记的使用DIV与CSS的使用Javascript的使用Dreamweaver等开发平台的使用搜索关键词：HTML、DIV、CSS、JS、Flash、Fireworks、Photoshop等,程序开发微软篇,程序设计语言的选择C#、VB等IIS的安装、配置与使用Visual Studio.NET开发平台的使用.NET体系结构的学习ASP.NET、ADO.NET的学习,.NET Framework主要包括如下内容：.NET语言：五种基本语言的编译器，包括C#、Visual Basic、J#（Java语言的克隆体）、具有托管扩展的C+以及Jscript.NET（JavaScr
18、ipt的服务器端版本）。.NET FCL（Framework Class Library，框架类库）：包括对Windows和Web应用程序、数据访问、Web服务等方面的支持。CLR（Common Language Runtime，公共语言运行库）：.NET Framework核心的面向对象引擎，可以执行所有.NET程序，并且为这些程序提供自动服务，比如安全检测、内存管理以及性能优化等,无标题页 应用程序信息：页面请求数：,三层架构,1：数据数据访问层:主要是对原始数据（数据库或者文本文件等存放数据的形式）的操作层，而不是指原始数据，也就是说，是对数据的操作，而不是数据库,具体为业务逻辑层或表示层提供数据服务2：业务逻辑层:主要是针对具体的问题的操作，也可以理解成对数据层的操作,对数据业务逻辑处理，如果说数据层是积木，那逻辑层就是对这些积木的搭建。3：表示层:主要表示WEB方式,也可以表示成WINFORM方式,WEB方式也可以表现成:aspx,如果逻辑层相当强大和完善,无论表现层如何定义和更改,逻辑层都能完善地提供服务。,谢谢观看,Thanks.,
