成功在线技术部Web开发培训_第1页
成功在线技术部Web开发培训_第2页
成功在线技术部Web开发培训_第3页
成功在线技术部Web开发培训_第4页
成功在线技术部Web开发培训_第5页
已阅读5页，还剩61页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

动态网页设计入门

--畅享网络之美成功在线技术部1主要内容：开发背景网页构成三层架构素材准备程序开发2Web1.0

web1.0的发展出现了向综合门户合流现象，早期的新浪与搜狐、网易等，继续坚持了门户网站的道路，而腾讯、MSN、GOOGLE等网络新贵，都纷纷走向了门户网络，尤其是对于新闻信息，有着极大的、共同的兴趣。这一情况的出现，在于门户网站本身的盈利空间更加广阔，盈利方式更加多元化，占据网站平台，可以更加有效地实现增值意图，并延伸由主营业务之外的各类服务。3web1.0的盈利都基于一个共通点，即巨大的点击流量。无论是早期融资还是后期获利，依托的都是为数众多的用户和点击率，以点击率为基础上市或开展增值服务，受众群众的基础，决定了盈利的水平和速度，充分地体现了互联网的眼球经济色彩。[success]造就了门户.检索类搜索引擎.yahoo.42000互联网泡沫5Web2.0

6Web2.0特征1、多人参与

Web1.0里，互联网内容是由少数编辑人员（或站长）定制的，比如各门户网站；而在Web2.0里，每个人都是内容的供稿者。2、人是灵魂在互联网的新时代，信息是由每个人贡献出来的，各个人共同组成互联网信息源。Web2.0的灵魂是人。3、可读可写互联网在Web1.0里，互联网是“阅读式互联网”，而Web2.0是“可写可读互联网”。虽然每个人都参与信息供稿，但在大范围里看，贡献大部分内容的是小部分的人。4、Web2.0的元素

Web2.0包含了我们经常使用到的服务，例如博客、播客、维基、P2P下载、社区、分享服务等等。博客是Web2.0里十分重要的元素，因为它打破了门户网站的信息垄断，在未来里，博客的地位将更为重要。

5、个人看法

Web2.0实际上是对Web1.0的信息源进行扩展，使其多样化和个性化。78Web2.0多人参与Web1.0里，互联网内容是由少数编辑人员（或站长）定制的，比如各门户网站；而在Web2.0里，每个人都是内容的供稿者。--twitter91011SNS12RSS也叫聚合RSS是在线共享内容的一种简易方式（也叫聚合内容，ReallySimpleSyndication）。通常在时效性比较强的内容上使用RSS订阅能更快速获取信息，网站提供RSS输出，有利于让用户获取网站内容的最新更新。同时也是医学、物理学、数学等学科专有名词的英文缩写简称。13GoogleReader14Mashup【聚合开发】借力使力不费力【用户数，开发数据库】一般使用源应用的API接口，或者是一些rss输出（含atom）作为内容源，合并的web应用用什么技术，则没有什么限制。mashup在geek群体和互联网玩家之中获得了极大的欢迎，mashup未必需要很高的编程技能，只需要熟悉api和网络服务工作方式，都能进行开发，所以很快成为一个流行的网络现象。很多公司例如yahoo/google都为此提供开放接口，以吸引这个群体。wing||开放平台15Wing--SinaminiBlogUIiskey!视觉设计、交互设计、用户研究、前端开发16Web3.0?Mobile;recommendationandpersonalization17iGoogle18MobileInternet1G2G3G19WebvsApps20网页构成

HTML

HTTP21发展历程：静态页面时代文本+静态图片、平面设计、无交互客户端动态技术时代gif、JavaScript、VBScript、CSS、Applet、Flash、各种音视频的应用（插件）等服务器端动态技术时代CGI、PHP、ASP、ASP.NET、Servlet、JSP、JavaBean等容器：IIS、Tomcat等22HTML简介23

HTML（HypertextMarkupLanguage，超文本标记语言）不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。24HTML标记1．双标记语法格式：<标记>内容</标记>2．单标记语法格式如下：<标记>在使用的大多数单标记和双标记的开始标记内通常可以包含一些属性，其语法格式如下：

<标记

属性1属性2属性3…>25HTML基本结构HTML中的基本结构如下：

<HTML><HEAD>…头部信息

</HEAD><BODY>…主体内容

</BODY></HTML>26

HTML文档中的第一个标记，该标记用于表示该文档是HTML文档，当浏览器遇到<html>标记时，就会按HTML的标准来解释文本。结束标记</html>出现在HTML文档的尾部。<html>…</html>标记27

此标记出现在<html>标记内起始的部分，此标记称为头部标记。头部标记用于提供与Web页面有关的各种信息。在头部标记中，可以使用<meta>标记模拟HTTP协议的响应头报文，用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等，在HTML头部可以包括任意数量的<meta>标记；使用<title>…</title>标记来指定网页的标题；使用<style>…</style>标记来定义CSS样式表；使用<script>…</script>标记来插入脚本语言等。一般来说，位于头部标记中的内容都不会在网页上直接显示。<head>…</head>标记

实例28此标记称为主体标记，在头部标记</head>之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分，此标记有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等。<body>…</body>29文本标记标题标记<hn>…<hn>语法格式如下：

<h1>标题</h1><h2>标题</h2>…30段落1、段落标记<p>语法：

<palign="对齐方式">…</p>2、换行标记<br>

在页面中一行文字达到一定长度浏览器会对其自动换行，如果文字未达到一定长度可以使用换行标记<br>对其强制换行。换行标记是单标记。31例1<html><head><title>段落与换行</title></head><body>

<h1>互联网发展的起源</h1><h2>第1阶段</h2><p>1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。</p><h2>第2阶段</h2><p>20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。</p></body></html>3233网页示例(notepad)<html><head><title>大家好，我是网页标题</title></head><body><h1>此处是标题一</h1>这儿是网页内容</body></html>34超链接

HTML文件最重要是特性之一就是超链接，通过网页上所提供的链接功能，用户可以链接到网络上的其他网页。建立超链接所使用的HTML标记为

<a></a>。超链接最重要的有两个要素，设置为超链接的文本内容和超链接指向的目标地址。3536超链接标记常用的属性及说明属性说明href指定链接文件的相对路径，相对文件路径是指在同一网站下，通过给定的目录以及文件名称确定文件的位置。如果链接同一目录下的文件，则只需指定链接文件的名称；如果链接下一级目录中的文件，则先输入目录名，然后加符号“/”，再输入文件名；如果链接上一级目录中的文件，则需先输入符号“../”，再输入目录名、文件名。当设置为“#”时表示一个空链接，即鼠标单击链接后仍然停留在当前页面name链接的名称，常用于书签链接。例如，建立并引用书签链接<aname="content_link"></a><!--建立书签链接-->…<ahref="#content_link"></a><!--引用书签链接-->title链接的提示文字，即当鼠标悬停在超链接文字或图像上时显示的文字信息target指定链接的目标窗口打开方式。共有四个属性值_blank<ahref=target=“_blank”>success</a>37图像图像标记<img>常用的属性及说明属性说明src此属性用来设置图像文件所在的路径，此路径可以是相对路径也可以是绝对路径height此属性用来设置图像的高度，单位是像素（设置图像高度其宽度会等比例进行调整）width此属性用来设置图像的宽度，单位是像素alt此属性用来设置提示文字，当浏览器没有加载上图像或加载图像后鼠标悬停在图片上方时，将显示出提示文字彩蛋38例3<html><head><title>图像</title></head><body><imgsrc="cup.gif"></body></html>3940在CSS还未应用之前，如何构建网站的框架？41表格<table>使用表格可以清晰地显示列成表的数据，例如如下图所示的是股票行情的数据列表。42表格（续1）创建一个表格的语法格式如下：

<table> <caption>表格标题内容</caption> <tr> <th>表头内容</th> <th>表头内容</th> … </tr> <tr> <td>单元格内容</td> <td>单元格内容</td> … </tr><table>43表格标记<table>的常用属性及说明属性说明width设置表格的宽度，默认表格的宽度与表格内文字的宽度相关。其属性值可以是像素也可以是浏览器的百分比数height设置表格的高度，其设置方法与设置表格的宽度相同align设置表格在网页中的位置border设置表格边框的宽度，单位为像素。需要注意的是只有设置其属性值大于0时才可以显示出表格的边框bordercolor设置表格边框的颜色，但前提是必须保证表格边框值大于0cellspacing设置表格内框的宽度，表格内框的宽度指的是单元格与单元格之间的宽度cellpadding设置表格内文字与边框的距离bgcolor设置表格的背景颜色background设置表格的背景图像表格（续2）44表格（续3）表格标题标记<caption>用来设置一种比较特殊的单元格“标题单元格”。标题单元格位于整个表格的第一行位置，起到为表格显示标题的作用。

表格表头标记<th>

在表格中还有一种特殊的单元格，此单元格为“表头”，表格的表头一般位于第一行的第一列位置，用来说明这一行的内容的类别。表头中的内容是加粗显示的。45行标记<tr>的常用属性及说明表格（续4）属性说明width设置行的宽度，此属性只对设置的当前行有效height设置行的高度bordercolor设置该行的边框颜色bgcolor设置该行的背景颜色background设置该行的背景图像align设置该行文字的水平对齐方式valign设置该行的垂直对齐方式46一个普遍的问题

(css+html+javascript)HTML标签原本被设计为用于定义文档内容。通过使用<h1>、<p>、<table>这样的标签，HTML的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape和InternetExplorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。47一个普遍的问题

如何解决？框架HTML装饰css能源javascript48为了解决这个问题，万维网联盟（W3C），肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）所有的主流浏览器均支持层叠样式表CSS示例49CSS层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中可以有效地解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中50又一个问题：样式与网页内容的分离<html><head><title>外部级联样式表示例</title> <linkhref="Style.css"rel="stylesheet"type="text/css"/></head><body> <h1>这是一个外部级联样式表</h1> <spanclass="text">这行文字应该是红色的</span> <p>这段的底色应是黄色</p></body></html>51关于DIV52│body{}

└#Container{}

/*页面层容器*/├#Header{}

/*页面头部*/├#PageBody{}

/*页面主体*/│├#Sidebar{}

/*侧边栏*/│└#MainBody{}

/*主体内容*/└#Footer{}

/*页面底部*/CSS+DIV示例53javascript什么是脚本？54脚本语言（ScriptingLanguage）是一种简单的程序，这些程序是由一些ASCII字符构成，可以使用任何一种文本编辑器来编写。以往的一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器（Interpreter）就可以执行。脚本语言可以简单地分为两类：服务器端脚本语言(CGI，Php,Python，ruby，VBScript，ASP，JSP)和客户端脚本语言(JavaScript，Jscript，ActionScript)。55JavaScript和Java的区别虽然JavaScript与Java有紧密的联系，但却是两个公司开发的不同的两个产品。Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；Java的前身是Oak语言。JavaScript是Netscape公司的产品，其目的是为了扩展NetscapeNavigator功能，而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，它的前身是LiveScript。Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软件。它是一种基于对象（ObjectBased）和事件驱动（EventDriver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。56JavaScript的功能1、交互性

使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。2、动态性

JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。57JavaScript的局限性

安全性有关的局限性

JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。58JavaScript与HTML<html><head><scripttype="text/javascript">functiondisplay_alert(){alert("Iamanalertbox!!")}</script></head><body><inputtype="button"onclick="display_alert()"value="Displayalertbox"/></body></html>59素材准备

--工欲善其事必先利其器FLASH动画Photoshop改图Fireworks制图60学习建议常用HTML标记的使用DIV与CSS的使用Javascript的使用Dreamweaver等开发平台的使用搜索关键词：HTML、DIV、CSS、JS、Flash、Fireworks、Photoshop等61程序开发——微软篇程序设计语言的选择C#、VB等IIS的安装、配置与使用VisualStudio.NET开发平台的使用.NET体系结构的学习ASP.NET、ADO.NET的学习62.NETFramework主要包括如下内容：.NET语言：五种基本语言的编译器，包括C#、VisualBasic、J#（Java语言的克隆体）、具有托管扩展的C++以及Jscript.NET（JavaScript的服务器端版本）。.NETFCL（FrameworkClassLibrary，框架类库）：包括对W

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论