• 1. 网页编程基础朱辉, zhui@xupt.edu.cn 网络教研室
  • 2. 本课程内容1. HTML 2. JAVASCRIPT 3. CSS
  • 3. 参考书目关于HTML 4.0的书籍 关于JavaScript的书籍 关于CSS的书籍,Cascading Style Sheets(层叠样式表)
  • 4. 考核办法以实验报告为主 1:编辑软件的熟悉, 基本标志练习; 2:掌握页面布局,制表和分栏设计; 3:掌握表单控件; 4:练习JavaScript语言,对控件进行事件处理; 5:练习CSS布局设计
  • 5. 第一章 概述1.1 屏幕分辨率 1.2 RGB 1.3 静态网页 1.4 HTML 1.5 常用软件
  • 6. 1.1 屏幕分辨率Screen Resolution显示分辨率就是屏幕上显示的像素个数,由于屏幕上的点、线和面都是由像素组成的。分辨率160×128的意思是水平像素数为160个,垂直像素数128个。 分辨率越高,像素的数目越多,感应到的图像越精密。而在屏幕尺寸一样的情况下,分辨率越高,显示效果就越精细和细腻。
  • 7. 像素的成像原理
  • 8. 点距 像素间距(pixel pitch)的意义类似于CRT的点距(dot pitch),一般是指显示屏相邻两个象素点之间的距离。 我们看到的画面是由许多的点所形成的,而画质的细腻度就是由点距来决定的,点距的计算方式是以面板尺寸除以解析度所得的数值。 以LCD为例,14寸液晶显示器的可视面积一般为285.7mm×214.3mm,分辨率为1024×768,从而计算出此LCD的点距是285.7/1024或者214.3/768=0.279mm。
  • 9. (本页无文本内容)
  • 10. 常见的分辨率存在以下几种 4:3 16:9 16:10 5:4
  • 11. 4:3屏幕比最常见屏幕比例,从电视时代流传下来的古老标准。 VGA (640x480) - 其实本来不是个分辨率的规格,而是 IBM 计算机的一种显示标准。在规范里有 320x200 / 256 色、320x200 / 16 色、640x350 / 16 色、640x480 / 16 色等多种模式,甚至还有 80x25 和 40x25 等文字模式。只是最后因为官方支持的最高分辨率是 640x480,所以 VGA 就成为了 640x480 的代名词。VGA 的重要地位在于它是所有显卡都接受的基准分辨率,Windows 在加载显卡驱动程序之前(BIOS 之后)的画面就是在 VGA 分辨率下的。 SVGA (800x600) - SVGA 的情况和 VGA 有点像,也是以一种「规格」的身份起家的,只是最后好像变成无论规格如何,所有比 VGA 强的显示器都自称自已是 Super VGA,
  • 12. 4:3屏幕比(续)XGA (1024x768) - 到了 SVGA 的年代,IBM 已经失去了市场的独占性,PC 界也正式进入了百家争鸣的时代。IBM 虽然定义出了XGA 的规格,但实际上它只是当年多种 Super VGA 规格中的一种。XGA 最后成为 1024x768 这个分辨率的代名词。 SXGA+ (1400x1050) - 是大约 2003 年~2007 年间偶尔会在笔记本电脑上看到的分辨率。 UXGA (1600x1200) - 分辨率刚好是 VGA 的四倍。UXGA 是许多 4:3 的 20" 和 21" 屏幕的析度,不过随着 4:3 屏幕愈来愈少见,要买到这个分辨率的屏幕是愈来愈困难了。 QXGA (2048x1536) - QXGA 的分辨率是 XGA 的四倍,也是大部份 4:3 屏幕支持的极限。
  • 13. 16:10屏幕比16:10 就是常见的「宽屏幕」比例。 WVGA (800x480) - VGA 的加宽版,大部份的 MID(Mobile Inernet Device,移动互联网设备 ) 和小号的 Netbook 采用的分辨率。第一代的 7" Eee PC 就是这个分辨率的。 WSVGA (1024x600) - 这个比例并不是 16:10(960x600 才是),不过这是个愈来愈常见的宽屏幕分辨率。8.9" 的 Netbook 大多是这个分辨率,部份的 10" Netbook也是。 WXGA (1280x800、1366x768) - WXGA 最早是指 1366x768(1024x768 的加宽版),是 LCD TV 面板最常见的分辨率。但到了电脑上 WXGA 通常是指 1280x800 这个分辨率,通常出现在 13~15“ 的笔记本电脑上。
  • 14. 16:10屏幕比(续)WXGA+ (1440x900) - 也是宽屏幕笔电常见的分辨率,但更常出现在 19" 的宽屏幕 LCD 上。 WSXGA+ (1680x1050) - 20" 和 22" 宽屏幕 LCD 和部份 15.4"笔记本电脑爱用的分辨率。 WUXGA (1920x1200) - UXGA 的宽屏幕版。必须要到达这个分辨率才能在屏幕上无损地显示 1080p 的影片。桌电上 1920x1200 大致上是 24"~27" LCD 的领域,而笔记本电脑则是 17" 以上才比较看得到。 WQXGA (2560x1600) - 主要是 30" LCD 屏幕在用的分辨率,著名的 Apple Cinema Display、Dell UltraSharp 3007WFP / 3008 WFP 都是这个分辨率。
  • 15. 16:9屏幕比它主要是 HD 电视在用的比例。常听到的 720p、1080p 都是这个比例。 720P (1280x720) - 与其这是一种分辨率,还不如说它是一种信号?没听说有电脑屏幕是这个分辨率的,电视面板好像也都是做 1366x768 的多。 1080P (1920x1080) - 1080p 就是俗称的 Full HD(Sony 超拼的),以前只有在电视上看得到(电脑用 1920x1200 的多),不过最近开始出现采用 1080p 面板的笔电,像第二代的 Acer 宝石机,标榜可以「让画面塞满屏幕,不留黑边」。
  • 16. 5:4屏幕比该类其实只有 SXGA 这一个成员而已。怎么,从来没注意到自已的屏幕比较方?其实 1280x1024 除下来比例是 5:4 才对,不是 4:3。 SXGA (1280x1024) - 后期的 17" 屏幕和绝大部份非宽屏幕的 19" 屏幕都是这个分辨率。为什么 SXGA 要采用 5:4 的比例到现在还是个谜,但总之它是成了办公室中几乎无所不在的存在。5:4 因为很接近正方形,其实旋转起来意义不大 XD。
  • 17. 1.2 RGBRGB色彩模式是工业界的一种颜色标准,是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的,这个标准几乎包括了人类视力所能感知的所有颜色,是目前运用最广的颜色系统之一。 RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0~255范围内的强度值。例如:纯红色R值为255,G值为0,B值为0;灰色的R、G、B三个值相等(除了0和255);白色的R、G、B都为255;黑色的R、G、B都为0。RGB图像只使用三种颜色,就可以使它们按照不同的比例混合,在屏幕上重现16777216种颜色。
  • 18. 1.3 WEB PAGE网页作为一个信息共享和交互的形式,在我们的客户端(浏览器)表现为HTML的文本形式,其内容由多种标识构成,由客户端浏览器进行解析和显示。
  • 19. 统一资源定位URL统一资源定位符(URL,英语Uniform Resource Locator的缩写)是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。 它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址的。现在它已经被万维网联盟编制为因特网标准RFC1738了。 Internet上的每一个网页都具有一个唯一的名称标识,通常称之为URL地址,这种地址可以是本地磁盘,也可以是局域网上的某一台计算机,更多的是Internet上的站点。简单地说,URL就是Web地址,俗称“网址”。
  • 20. URL的格式协议://IP地址(或者域名):端口/目录/文件?参数 http://www.xupt.edu.cn/index.html 浏览器将URL分解为三个部分: 协议(“http, FTP”) 服务器名(“www.xupt.edu.cn”) 文件名(“index.htm”)
  • 21. 可用的协议file 资源是本地计算机上的文件。格式file:// ftp 通过 FTP访问资源。格式 FTP:// gopher 通过 Gopher 协议访问该资源。 http 通过 HTTP 访问该资源。 格式 HTTP:// https 通过安全的 HTTPS 访问该资源。 格式 target=_blank>HTTPS:// mailto 资源为电子邮件地址,通过 SMTP 访问。 格式 mailto: MMS 通过 支持MMS(流媒体)协议的播放该资源。(代表软件:Windows Media Player)格式 MMS:// ed2k 通过 支持ed2k(专用下载链接)协议的P2P软件访问该资源。(代表软件:电驴) 格式 ed2k:// Flashget 通过 支持Flashget:(专用下载链接)协议的P2P软件访问该资源。 thunder 通过 支持thunder(专用下载链接)协议的P2P软件访问该资源。
  • 22. 静态网页静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站。
  • 23. 静态网页的特点(1)静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”; (2)网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件; (3)静态网页的内容相对稳定,因此容易被搜索引擎检索; (4)静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难; (5)静态网页的交互性较差,在功能方面有较大的限制。
  • 24. 静态网页与动态的区别(一)静态网页、动态网页主要根据网页制作的语言区分: 静态网页使用语言:HTML(超文本标记语言) 动态网页使用语言:HTML+ASP 或 HTML+PHP 或 HTML+JSP 等。 程序是否在服务器端运行,是重要标志。在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页,例如ASP、PHP、JSP、ASP.net、CGI等。运行于客户端的程序、网页、插件、组件,属于静态网页,例如html页、Flash、JavaScript、VBScript等等,它们是永远不变的。
  • 25. 静态网页与动态的区别(二)区分动态网页与静态网页的基本方法:第一看后缀名,第二看是否能与服务器发生交互行为 静态网页是相对于动态网页而言,是指没有后台数据库、不含程序和不可交互的网页。你编的是什么它显示的就是什么、不会有任何改变。静态网页相对更新起来比较麻烦,适用于一般更新较少的展示型网站。
  • 26. 静态网页的用途网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页的方式会更简单, 静态网页是网站建设的基础,静态网页和动态网页之间也并不矛盾,为了网站适应搜索引擎检索的需要,即使采用动态网站技术,也可以将网页内容转化为静态网页发布。
  • 27. 1.4 HTMLHTML(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。 HTML只不过是组合成一个文本文件的一系列标签。 HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面。 超文本链接标示文字或者图片
  • 28. 主要特点1 简易性,HTML版本升级采用超集(SuperSet)方式,从而更加灵活方便。 2 可扩展性,HTML语言的广泛应用带来了加强功能,增加标识符等要求,HTML采取子类元素的方式,为系统扩展带来保证。 3 平台无关性。虽然PC机大行其道,但使用MAC等其他机器的大有人在,HTML可以使用在广泛的平台上,这也是WWW盛行的另一个原因。
  • 29. HTML版本历史超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布(并非标准) HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时 HTML 3.2——1996年1月14日,W3C推荐标准 HTML 4.0——1997年12月18日,W3C推荐标准 HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准 ISO/IEC 15445:2000(“ISO HTML”)——2000年5月15日发布,基于严格的HTML 4.01语法,是国际标准化组织和国际电工委员会的标准 XHTML 1.0——发布于2000年1月26日,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。 XHTML 1.1, 于2001年5月31日发布 (XHTML 2.0, W3C工作草案)
  • 30. HTML 4的新功能WebTV 层Layers 样式表CSS 图文框FrameSet 动态字体
  • 31. WEBTV
  • 32. 层
  • 33. 样式表用于定义文字和页面布局的参数 H2{ color: navy; Font-weight: bold; Font-size: 12pt; Line-height: 16pt; Font-family: gb2312; Font=style: normal; }
  • 34. 图文框
  • 35. 动态字体由于页面作者所在地区、页面设计需要等因素, 经常设计一些特殊的字体来达到突出页面效果的需求,而浏览者用户经常没有安装这些特殊的字体。 动态字体是指将字体与内容一起下载到浏览器的功能。 通过样式表定义字体 通过link方法设定字体
  • 36. HTML编辑软件HTML其实是文本,它需要浏览器的解释,HTML的编辑器大体可以分为三种, 1 基本编辑软件,使用WINDOWS自带的记事本或写字版都可以编写,当然,如果你用WPS来编写,也可以。不过存盘是请使用.htm或.html作为扩展名,这样浏览器就可以解释执行了。 2 半所见即所得软件,这种软件能大大提高开发效率,它可以使你在很短的时间内做出HOMEPAGE,且可以学习HTML,这种类型的软件主要有HOTDOG,还有国产的软件网页作坊。 3 所见即所得软件,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,这类软件主要有FRONTPAGE98,DREAMWEAVER。
  • 37. HTML规范
  • 38. 中文环境 yourtitle
  • 39. 1.5 常用软件常用网页浏览器, IE6, NS7等 常用服务器, Tomcat 5, IIS 常用编辑软件, DREAMWEAVER , ULTRAEDIT, NOTEPAD
  • 40. NetScape 网景(Netscape)是一个自1994年开始的品牌。即网景通讯公司(Netscape Communications Corporation)。她曾经是一家美国的电脑服务公司,以其生产的同名网页浏览器而闻名。 1998年11月,网景被美国在线(AOL)收购,而美国在线之后又成为时代华纳的一部分。 2008年3月1号,Netscape已经正式结束它的的浏览器舞台,不再提供任何支持,内核开发虽早已停止,只是Firefox内核的扩展皮肤。
  • 41. ApacheApache音译为阿帕奇,是北美印第安人的一个英勇善战部落,叫阿帕奇族。 Apache软件基金会(也就是Apache Software Foundation,简称为ASF),是专门为运作一个开源软件项目的 Apache 团体提供支持非盈利性组织。 ASF创建于1999年,创建者是自称为“Apache 组织”的群体。在美国伊利诺斯大学超级计算机应用程序国家中心(National Center for Supercomputing Applications,简称为NCSA)开发的 NCSA HTTPd 服务器的基础上开发与维护一个叫 Apache 的 HTTP服务器。
  • 42. TomcatTomcat 服务器是一个免费的开放源代码的Web 应用服务器,目前最新版本是6.0.20(截止到2009-03-20)。 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持,最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现,Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定,而且免费,因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可,成为目前比较流行的Web 应用服务器。
  • 43. DreamWeaverDreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Macromedia2005年被Adobe并购,故此软件现已为Adobe旗下产品。
  • 44. UltraEditUltraEdit 是一套功能强大的文本编辑器,可以编辑文本、十六进制、ASCII 码,完全可以取代记事本(如果你的电脑足够强大),内建英文单字检查、C++ 及 VB 指令突显,可同时编辑多个文件,而且即使开启很大的文件速度也不会慢。软件附有 HTML 标签颜色显示、搜寻替换以及无限制的还原功能,一般大家喜欢用其来修改EXE 或 DLL 文件。
  • 45. 课后作业1. 收集HTML4资料 2. 收集软件Tomcat和Dreamweaver