计算机图形学精品课程网站建设论文

《计算机图形学精品课程网站建设论文》由会员分享，可在线阅读，更多相关《计算机图形学精品课程网站建设论文（34页珍藏版）》请在装配图网上搜索。

1、洛阳理工学院毕业设计（论文）计算机图形学精品课程网站建设摘 要计算机图形学(Computer Graphics，简称CG)是一种使用数学算法将二维或三维图形转化为计算机显示器的栅格形式的科学。简单地说，计算机图形学的主要研究内容就是研究如何在计算机中表示图形、以及利用计算机进行图形的计算、处理和显示的相关原理与算法。图形通常由点、线、面、体等几何元素和灰度、色彩、线型、线宽等非几何属性组成。从处理技术上来看，图形主要分为两类，一类是基于线条信息表示的，如工程图、等高线地图、曲面的线框图等，另一类是明暗图，也就是通常所说的真实感图形。本文介绍了建设计算机图形学精品课程所用到的基本技术，及具体是网

2、站设计及实现方法。该网站以Dreamweaver为开发工具，以IIS为解释服务器，以Asp（Active Server Page）为编程语言，以CSS+Div为网站前台网页样式设计及页面框架搭建，以Access为数据库来建设的。内容主要有：师资队伍、课程描述、教学资源、师生交流、实验教学、成果展示、在线考试。关键词：精品课程 网站建设 Dreamweaver Css Div JavascriptThe construction of Computer Graphics Excellent Courses WebsiteABSTRACTComputer Graphics (Computer Gr

3、aphics, referred to as CG) is a mathematical algorithm science which using two-dimensional or three-dimensional computer graphics display into a rid form . Simply put, the main researched content of computer graphics was that how to display the computer graphics in the computer and the using of the

4、calculation, processing and display the relevant principles and algorithms Graphics are composed by that the non-geometric attributes , which such as point, line, face, body and other geometric elements, and gray, color, line, line width. In terms of processing technology , graphics is mainly divide

5、d into two kinds of graphics.One is based on the lines, such as engineering drawings, contour maps, surface wireframe map, and the other is a light map, which is usually called realistic graphics. This paper introduces the basic technology of the construction of Cmputer Graphics Courses excellent Co

6、urses website, the design of this web and the implementation of this web. In the construction of this web, I used the Dreamweaver as the site development tools, used the IIS Server as web server, used Asp(Active Server Page) for the programming language,used CSS + Div for the front web design of thi

7、s website ,used Access as the database for this website. This website is mainly included: the introduction of teachers, the description of Computer Graphics Course, the resources of teaching,the exchange between teachers and students,the experiment teaching,the showing of the research achievements ,

8、 the on-line examination.KEY WORDS: Excellent Courses，Website，Dreamweaver Css Div Javascript6目录前言1第1章 计算机图形学的发展及应用21.1 计算机图形学发展简史21.2 计算机图形学的应用及研究前沿31.3 计算机图形学网络教学特点及发展6第2章 精品课程网站需求分析82.18第3章 精品课程网站设计103.1 精品课程网站总体设计103.1.1 网站建设流程设计103.1.2 网站建设选用的编程语言123.1.3 网站建设开发工具123.1.4 网站建设使用服务器133.1.5 网站建设使用技术

9、133.2 精品课程网站详细设计183.2.1 网站模块划分及设计183.2.1 网站主页设计193.2.2 网站子页设计22第4章 精品课程网站具体功能代码实现234.1 网站子页左侧导航234.2 Javascript 输出日期时间254.3 Div显示和隐藏实现视频播放26结论30谢 辞31参考文献32前言计算机图形学是利用计算机研究图形的表示、生成、处理、显示的学科。经过30多年的发展 , 计算机图形学已成为计算机科学中 , 最为活跃的分支之一 , 并得到广泛的应用。搭建计算机图形学精品课程的目的是在计算机图形学基本原则指导下，建立方便的在线浏览计算机图形学方面的知识和在线管理一些图形

10、学方面的科学资料，通过师生互动环节提高学生计算机图形学方面的专业知识。积极开发科技信息资源，及时、有效地提供图形学方面的分享和利用,给各个科研部门提供一个标准化的、规范化、网络化的科研成果信息交流的平台。高度利用科研成果，提高我国的科技发展水平。通过网站，全面宣传，展示计算机系图形学的风采、优点与特色，发布计算机图形学方面的知识和在线视频教程等信息内容，使学生对计算机图形学有更深刻的了解，增强学生、老师之间的联系，在Internet网上，让学生及时得到计算机图行学方面的重要信息，同时也帮助了学校完成部分事务，提高办事效率,给学生，学校最方便的联系桥梁。在这里学生也可以提出意见及想法，互通教学之

11、间的意见想法，更加有效的办好教学，和学生需要哪样的教学方式能够更好的吸收与接纳，这些都能成为学校的参考，以便更好的提高学校的教学质量。此计算机图形学精品课程网站，是搭建一个以计算机图形学为主要知识内容的在线网络教学平台。所以它的基本技术要求是在网络上要实现计算机图形学理论知识以Web页面的形式呈现。还要有在线互动的动态技术的支持。 第1章 计算机图形学的发展及应用1.1 计算机图形学发展简史1950年 ，第一台图形显示器作为美国麻省理工学院(MIT) 旋风 号 (Whirlwind 1) 计算机的附件诞生了。该显示器用1个类似于示波器的阴极射线管 (CRT) 来显示一些简单的图形。1958 年

12、美国 Calcomp 公司由联机的数字记录仪发展成滚筒式绘图仪 ， GerBer 公司把数控机床发展成为平板式绘图仪。在整个50年代 ，只有电子管计算机 ， 用机器语言编程， 主要应用于科学计算，为这些计算机配置的图形设备仅具有输出功能。计算机图形学处于准备和酝酿时期，并称之为：“被动式”图形学。到 50 年代末期，MIT的林肯实验室在“旋风”计算机上开发 SAGE空中防御体系， 第一次使用了具有指挥和控制功能的 CRT显示器，操作者可以用笔在屏幕上指出被确定的目标。与此同时，类似的技术在设计和生产过程中也陆续得到了应用，它预示着交互式计算机图形学的诞生。1962年，MIT林肯实验室的 Iva

13、n E1Sutherland 发表了 1篇题为“Sketchpad ： 一个人机交互通信的图形系统”的博士论文，他在论文中首次使用了计算机图形学“Computer Graphics”这个术语，证明了交互计算机图形学是一个可行的、有用的研究领域，从而确定了计算机图形学作为一个崭新的科学分支的独立地位。20世纪70年代是计算机图形学发展过程中的一个重要的历史时期。由于光栅显示器的产生，在60 年代就已萌芽的光栅图形学算法，迅速发展起来，区域填充、裁剪、消隐等基本图形概念及其相应算法纷纷诞生，图形学进入了第一个兴盛的时期，并开始出现实用的 CAD图形系统。又因为通用与设备无关的图形软件的发展，图形软

14、件功能的标准化问题被提了出来。1974 年，美国国家标准化局(ANSI ) 在 ACM SIGGRAPH的一个“与机器无关的图形技术”的工作会议上，提出了制定有关标准的基本规则。此后ACM专门成立了一个图形标准化委员会，开始制定有关标准。该委员会于 1977、1979 年先后制定和修改了“核心图形系统” (Core Graphics System) 。ISO随后又发布了计算机图形接口 CGI (Computer Graphics Interface) 、计算机图形元文件标准 CGM (Computer Graphics Metafile) 、计算机图形核心系统 GKS (Graphics Ke

15、rnel system) 、面向程序员的层次交互图形标准 PHIGS ( Programmerp s Hierarchical InteractiveGraphics Standard) 等。这些标准的制定，为计算机图形学的推广、应用、资源信息共享，起了重要作用。 20世纪70年代 ，计算机图形学另外两个重要进展是真实感图形学和实体造型技术的产生。1970 年Bouknight 提出了第一个光反射模型， 1971 年 Gourand 提出“漫反射模型+插值”的思想，被称为 Gourand明暗处理。1975 年 Phong提出了著名的简单光照模型 Phong模型。这些可以算是真实感图形学最早的开

16、创性工作。另外，从 1973 年开始，相继出现了英国剑桥大学 CAD 小组的 Build 系统、美国罗彻斯特大学的 PADL21系统等实体造型系统。1980年 Whitted 提出了一个光透视模型Whitted 模型，并第一次给出光线跟踪算法的范例，实现 Whitted 模型；1984年，美国 Cornell大学和日本广岛大学的学者分别将热辐射工程中的辐射度的方法引入到计算机图形学中，用辐射度方法成功地模拟了理想漫反射表面间的多重漫反射效果；光线跟踪算法和辐射度算法的提出，标志着真实感图形的显示算法已逐渐成熟。从 20 世纪 80 年代中期以来，超大规模集成电路的发展，为图形学的飞速发展奠定了

17、物质基础。计算机的运算能力的提高，图形处理速度的加快，使得图形学的各个研究方向得到充分发展，图形学已广泛应用于动画、科学计算可视化、CAD/ CAN、影视娱乐等各个领域。 ACM SIGGRAPH会议是计算机图形学最权威的国际会议，每年在美国召开 , 参加会议的人在50 000人左右。SIG 2GRAPH会议很大程度上促进了图形学的发展，世界上不会有第二个领域会每年召开如此规模巨大的专业会议。到了 1997 年，参加会议的人数已经增加到48 700。因为每年只录取大约 50 篇论文，在Computer Graphics杂志上发表，因此论文的学术水平较高，基本上代表了图形学发展的主流方向。1.2

18、 计算机图形学的应用及研究前沿 1、计算机辅助设计与制造 CAD/ CAU是计算机图形学在工业界最广泛、最活跃的应用领域。计算机图形学被用来进行土建工程、机械结构和产品的设计, 包括设计飞机、汽车、船舶的外形和发电厂、化工厂等的布局以及电子线路、电子器件等。随着计算机网络的发展 , 在网络环境下进行异地异构系统的协同设计 , 已经成为 CAD领域最热门的课题之一。CAD领域另一个非常重要的研究领域是基于工程图纸的三维形体重建。2、科学计算可视化 科学技术的迅猛发展 , 数据量的与日俱增使得人们对数据的分析和处理变得越来越难 , 人们无法从数据海洋中得到最有用的数据 , 找到数据的变化规律, 提

19、取最本质的特征。但是如果能将这些数据用图形的形式表示出来 , 情况就不一样了 , 事物的发展趋势和本质特征将会很清楚地呈现在人们面前。目前科学计算可视化广泛应用于医学、流体力学、有限元分析、气象分析当中。3、图形实时绘制与自然景物仿真 在计算机中重现真实世界的场景叫做真实感绘制。真实感绘制的主要任务是模拟真实物体的物理属性,简单的说就是物体的形状、光学性质、表面的纹理和粗糙程度,以及物体间的相对位置、遮挡关系等等。这其中光照和表面属性是最难模拟的。为了模拟光照 , 已有各种各样的光照模型。从简单到复杂排列分别是: 简单光照模型、局部光照模型和整体光照模型。从绘制方法上看有模拟光的实际传播过程的

20、光线跟踪法 , 也有模拟能量交换的辐射度方法。除了建造计算机可实现的逼真物理模型外,真实感绘制还有一个研究重点是研究加速算法 , 力求能在最短时间内绘制出最真实的场景。4、计算机动画 早期的计算机动画灵感来源于传统的卡通片 , 在生成几幅被称做“关键帧”的画面后 , 由计算机对 2 幅关键帧进行插值生成若干“中间帧” , 连续播放时2个关键帧就被有机地结合起来了。计算机动画内容丰富多彩 , 生成动画的方法也多种多样,比如基于特征的图像变形、二维形状混合、轴变形方法、三维自由形体变形 ( FFD , Free2FormDeformation) 等。近年来人们普遍将注意力转向基于物理模型的计算机动

21、画生成方法。这是一种崭新的方法,该方法大量运用弹性力学和流体力学的方程进行计算,力求使动画过程体现出最适合真实世界的运动规律。然而要真正到达真实的运动是很难的 , 比如人的行走或跑步是全身的各个关节协调的结果 , 要实现很自然的人走路的动画 , 计算方程非常复杂和计算量极大 , 基于物理模型的计算机动画还有许多内容需要进一步研究。 20世纪90年代是计算机动画应用辉煌的 10 年。Disney公司每年都要出一部制作精美的卡通动画片 , 好莱坞的大片屡屡大量运用计算机生成各种各样精彩绝伦的特技效果。广告设计 , 电脑游戏也频频运用计算机动画。计算机动画也因这些商业应用的大力推动而有了极大的发展。

22、5、用户接口 用户接口是人们使用计算机的第一观感。一个友好的图形化的用户界面能够大大提高软件的易用性,在 DOS时代,计算机的易用性很差 , 编写一个图形化的界面要费去大量的劳动 , 过去传统的软件中有 60 %的程序是用来处理与用户接口有关的问题和功能的。进入 80 年代后 , 随着Xwindow标准的提出 , 苹果公司图形化操作系统的推出 , 特别是微软公司 Windows操作系统的普及 , 标志着图形学已经全面融入计算机的方方面面。 目前几个大的软件公司都在研究下一代用户界面,开发面向主流应用的自然、高效多通道的用户界面。研究多通道语义模型、多通道整合算法及其软件结构和界面范式是当前用户

23、界面和接口方面研究的主流方向 , 而图形学在其中起主导作用。6、计算机艺术 现在的美术人员、尤其是商业艺术人员都热衷于用计算机软件从事艺术创作。可用于美术创作的软件很多,如二维平面的画笔程序 (如 CorelDraw,Photoshop , PaintShop)、专门的图表绘制软件 (如 Visio) 、三维建模和渲染软件包(如 3DMAX, Maya) 以及一些专门生成动画的软件 (如Alias , Softimage) 等 , 可以说是数不胜数。当然,传统艺术的一些效果也是上述软件所不能达到的,比如钢笔素描的效果,中国毛笔书法的效果,而且在传统绘画中有许多个人风格化的效果也是上述软件所无法

24、企及的。然而图形学工作者们是不甘失败的,就在真实感图形学如火如荼发展的同时,模拟艺术效果的非真实感绘制 (NPR NonPhotoreal Rendering) 也在逐渐发展。钢笔素描是非真实感绘制的一个重要内容 , 目前仍然是一个非常活跃的研究领域。1.3 计算机图形学网络教学特点及发展计算机图形学精品课程网站的教学属于网络教学，由于网络具有远程、实时、异步、海量信息的特点，因此，跨时空、大信息量、交互性和个性化，是网络教学的主要优势；丰富的信息资源和方便的获取方式是网络教学的主要标志。网络教学资源包括按照一定的教学目标、网络教学策略组织起来的教学内容和网络教学支撑环境，教师与学生在地理空间

25、上的分离，其具有以下特点。1.信息传递的远程性Internet是个连接着世界各地的巨大网络，它突破了时间和空间的限制，任何学习者无论身处何时何地，只要通过网络就能获得教学信息。2.教学的交互性通过网络，教师和学习者可以及时地交换信息。这样，一方面，利于学习者学习，另一方面，有利于教师教学，使教和学互相促进，达到良好的教学效果。3.信息共享性任何信息一旦上网，就能被全球的用户所接收。对学习者来说，网络资源的共享性，一方面，使他们能够最大限度的占有教学资源，有利于开阔他们的视野；另一方面，有利于他们正确地理解和整合教学信息，因为他们可将相关的教学信息进行对比、对照，取长补短，以促进学习。4.学习的

26、个别化在网络教学资源中，学习者的学习可以不再受课时和教学进度的限制，他们可以根据自己的情况，自主地确定学习内容和学习进度，根据自己的时间安排各学科学习的时间。学习者能与教师共享各种信息知识资源，教学的时空扩展后，学习者可以在Internet上就某一教学内容向自己欣赏的老师请教，展开讨论，以求个别指导，实现个别化学习。因此，基于网络的教学是以学习者为中心的学习者对自己的行为负责，学习是一种高度个人化的行为。5.教学的时效性在网络教学资源中，学习者通过网络接收的教学信息既可以是实时的，也可以是非实时的。一方面，有利于学习者及时地接受学习信息，另一方面，它支持学习者的重复信息，保证学习效果，故带有很

27、强的实效性。网络教学资源的建设决不是教学手段和教学方式的变化，而是要推动人才培养模式的变革，不是把书本内容电子化和把音像教材数字化，其内容和形式必须发挥网络的特点和优势，进行教学资源的再设计和开发，不能仅仅停留在内容或教学资源的分析上，应该以系统的观点，从过程的角度分析网络课程的活动和实施过程，也就是对网络课程的教学过程进行分析，使之符合学习规律，体现教学活动过程，具有远程性、交互性、共享性、适应性和时效性等基本特征，能够促进学生的有效学习。第2章 精品课程网站需求分析2.1 精品课程网站的建设可以响应国家的号召，它的最终目的是提高教学质量。精品课程建设工程的适时推出，不仅具有极强的针对性，还

28、是一个具有战略意义的重大举措。它是一项以点带面的改革，即以精品课程建设为突破点，着力打造一批具有时代特征的高水平课程；以整体教学内容改革为面，推进高校教学质量的全面提升。我系为了更好的办学，提高系里面计算机图形学的知名度，为老师和学生提供一个友谊的桥梁，增加同学们对计算机图形学的了解，建构计算机图形学精品课程网站。计算机图形学知识是纯理论的知识，如果通过传统的老师在课堂上授课的方式来讲授图形学知识，就会很枯燥，可能会达不到预想的授课的效果。现在通过建设计算机图形学网站，就可以解决枯燥乏味的问题。并且，在网站上有生动的图形演示、flash动画、师生在线交流、教学课件等。与传统的教室授课方式相比，

29、网络教学更具有优势。尤其是在计算机较难较抽象的理论知识的讲解方面。传统的授课方式比较直白、枯燥，难于理解。而通过网络教学可以很大程度的上的解决这方面的问题，并且还有自己本身的优点。网络教学可以通过实例图片、视频等多媒体材料，展示丰富的效果，来增加讲解理论知识的生动性，让学习者更直观的学习知识，更容易理解和掌握知识。通过网站进行网络教学，还可以通过在线交流，在线问答等方式增加学习知识时的互动性，也可以及时解决遇到的问题，当然了，这些交流不只是限于学生和老师之间。此外，网站还可以提供教学课件、教学录像下载。另外一个优点是：理论上网络教学不受地域限制。计算机图形学精品课程的基本任务是在计算机图形学基

30、本原则指导下，建立方便的在线浏览计算机图形学方面的知识和在线管理一些图形学方面的科学资料，通过师生互动环节提高学生计算机图形学方面的专业知识。积极开发科技信息资源，及时、有效地提供图形学方面的分享和利用,给各个科研部门提供一个标准化的、规范化、网络化的科研成果信息交流的平台。高度利用科研成果，提高我国的科技发展。根据可行性研究的结果，分析现有情况和问题，针对在校老师和学生的需求，决定采用B/S层次结构，将计算机图形学系统分为两个子系统，即在线计算机图形学知识浏览系统和师生互动系统。其中，在线计算机图形学知识浏览子系统的功能是给学生提供一些关于计算机图形学发面的技术支持及一些图形学方面的文档和视

31、频供学生下载及学习，他以网站形式体现，主要实现计算机图形学师资队伍概况的介绍、计算机图形方面的课程描述和一些关于图形学方面的科技文章及视频资源，学生进入网站后可以根据自己的需要很方便的从网站导航处访问到。师生互动是采用论坛的形式实现师生间的交流的。系统的功能是通过计算机网络将客户端与服务器数据库相连，学生通过在线提出问题，老师在线回答问题或在线提供一些关于图形学方面的资料。8第3章 精品课程网站设计3.1 精品课程网站总体设计3.1.1 网站建设流程设计根据需求分析，计算机图形学精品课程网站可以分为：师资信息、在线计算机图形学知识浏览和师生互动两个功能模块。当学生打开网站首页时就可以浏览师资信

32、息、计算机图形学知识的浏览。当登录到师生互动的论坛时，就可以提出自己的问题，或解答别人提出的问题。退出时会进入论坛首页。网站流程图如下图：师资队伍课程描述教学资源师生交流试验教学成果展示在线考试网站首页课程负责人课程组成人员教学大纲教学课件教学视频在线教学在线交流教学答疑科研成果习题选编在线考试学生设计试验大纲试验指导算法演示图3-1 网站主流程图由于在线交流业务逻辑比较复杂，为了对其进行详细说明，因此将其提取进行详细描述，如下图所示：在线交流论坛首页登录论坛用户信息验证论坛会员用户注册解答问题管理问题发布问题会员中心会员问题管理问题解答管理会员管理论坛管理个人信息管理操作数据库Access退

33、出论坛用户类型是否是否普通会员管理员信息验证成功失败图 3-2 在线互动论坛流程图3.1.2 网站建设选用的编程语言本站选用的编程语言是Asp。Asp 为Activeserverpags(动态服务器页面)的简称。Active Server Pages主要就是Scipts脚本环境，主要结合的是VBscript脚本。它是Microsoft公司推出的用于Web应用开发的一种编程技术。因其简单的语法和嵌入HTML的编辑方法在很短的时间内便取得了巨大的成功，成为Windows平台上Web开发技术的霸主，在当时地位难以动摇。虽然ASP技术取得了极大的成功，但是随着PHP，JSP的技术的出现，ASP的王者地

34、位受到了严峻的挑战。Asp的开发、维护快速简便，编程语言通用，多种功能强大的内置对象和组件，而且与浏览器无关性，加上IIS的功能支持，是比较简易快速的开发技术。3.1.3 网站建设开发工具本站选用的开发工具为Dreamweaver。Dreamweaver是一款有着多年历史和良好口碑的可视化网页编辑工具（简称DW），他最大的优点就是所见即所得，对W3C网页标准化支持十分到位，同时它还支持网站管理，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML，而且还支持

35、ASP、JSP、PHP、ASP.NET、XML等程序语言的编写与调试。Dreamweaver 有三种视图模式，即代码、拆分、设计三种模式。1) 代码视图模式 该模式是全代码视图，在工作区域里是正在编辑文件的全部代码。2) 拆分视图模式 该模式是代码和设计视图的综合。在工组区域的上部分是代码显示部分，下部分是设计视图部分，在下部分一个元素，上部分会自动转到相应的代码部分。3) 设计视图模式 该模式可以在工组区域里进行布局设计，通过工具条里的工具，即可设计出自己想要的Web页面。所见即所得。很方便，不过冗余代码比较多。3.1.4 网站建设使用服务器本站选用的服务器是Microsoft公司的IIS。

36、Internet Information Server（IIS）是WINDOWS NT 提供的INTERNET服务的核心。微软有大批的产品是为INTERNET连接而设计的。实际上可用的软件很多很多，以至于很难选择。Internet Information Server 是一个在INTERNET 上提供信息发布功能的软件。微软公司也有为个人发布信息的工具例如，Personal Web Server ，但是Internet Information Server微软为企业和部门发布信息而设计的。 IIS这个软件是用来运行大型的站点，例如，, , 和。IIS现在已经是第六版了。IIS 1.0在1995

37、，但是IIS3.0直到1996年夏天才正式推出。微软在1997年夏天推出了IIS4.0 的beta版。 在IIS4.0中，微软推出了许多新特征。确切地说，IIS4.0使INTERNET成为了一个正规的应用程序开发环境。 许多基于IIS4.0的应用程序， 核心由C编写，然后用VBScipts连接起来。 现在的开发者仍然使用IIS3.0介绍的老的VBScipts和HTML的混合编程，IIS4.0的这些新特征会使他们收益不少。3.1.5 网站建设使用技术1Div+CSSDiv即通常在网页制作领域里所说的层。它是用来为HTML文档内大块 (block-level) 的内容提供结构和背景的元素。Div的

38、起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由Div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。传统的网页布局是基于Table的布局方式，但近些年来，CSS+Div的构架方式已经几乎取代了传统的方式。传统Table布局方式实际上是利用了HTML table表格元素具有的无边框特性，由于table元素可以在显示时使得单元格的边框和间距为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。 CSS是Cascading Style Sheets(层叠样式表)的简称。CSS语言是一种标记语言，它不需要编译

39、，可以直接由浏览器执行 (属于浏览器解释型语言)。CSS是有W3C (World Wide Web Consortium，万维网联盟) 的CSS工作组定制和维护的。通过CSS，可以将使用HTML (即超文本标记语言)创建的网页上显示的文本与用于描述如何显示和表示该文本 (使用CSS进行定义) 的信息完全分隔开。CSS旨在解决问题并可帮助节省时间，同时它还可以让CSS编写者以更多的方式设计网页外观。通过CSS，可以对整个网页页面设置样式属性，例如：字体的大小、颜色、链接的样式等；还可以对单个的HTML标签设置样式属性，例如：对页面内的某个段落设置字间距、行间距、字体颜色等。通过修改部分CSS就可

40、以达到修改整个页面或是其中某个部分的样式的目的，从而提高工作效率。在本站中，使用了CSS定义了字体的大小、页面布局等。如下CSS代码所示：BodyFont-family: 微软雅黑, /*定义字体*/Backgound: #f9f9f9; /*定义页面背景颜色*/Font-size: 12px; /*定义字体大小*/ Div+CSS的构架方式从总体上而言： 1)、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2)、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 3)、搜

41、索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。4)、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了 DIV+CSS是大势所趋。5)、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。Div+CSS布局比table布局节省页面代码，代码结构也更清晰明了。6)、Div+CSS布局使网站版面布局修改变的更简单,因为版面代码都写在独立

42、的CSS文件里修改起来方便多了,不象Table要在页面中修改很多信息。表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。2JavaScriptJavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：1) 脚本编写语言Java

43、Script是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言，它提供了一个易的开发过程。它的基本结构形式与C、C+、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。 2) 基于对象的语言JavaScript是一种基于对象的语言，同时可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。2) 简单性JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和

44、控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。 3) 安全性JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。 4) 动态性JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标

45、、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。 5) 跨平台性JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次，走遍天下”的梦想。综合所述JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。 JavaScript语言可以做到回应使用者的需求事件 (如： form 的输入) ，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端 (server)处理，再传回来的过程，而直接可以被客户端 (client) 的

46、应用程式所处理。JavaScript可以通过以下两种方式应用到网页中：1) 直接加入HTML文档这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：在这个例子中，我们可看到一个新的标签：，而 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。（w3c已经建议使用新的标准：)HTML的注释标签：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持 Javascript 语言的浏览器来说是很有用的。/-Javascript结束：双斜杠表示 Javascript的注释部分，即从/开始到行尾的字符都被忽略。至于程序中所用到的docu

47、mentwrite（）函数则表示将括号中的文字输出到窗口中去。另外一点需要注意的是，的位置并不是固定的，可以包含在. 或.中的任何地方。还有一个更高级版本的嵌入脚本，它使用了HTML中的CDATA语法（Character Data，就是把CDATA中的文本全部当作纯文本处理，除非遇到CDATA的结束）。2) 引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个

48、Javascript源代码文件“Script.js”，其内容如下：document.writeln(这是Javascript！采用直接插入的方法！);在网页中可以这样调用程序： 也可以同时在导入文件时制定javascript的版本，例如：3.2 精品课程网站详细设计3.2.1 网站模块划分及设计根据需求分析，可以将该网站按功能化分为：内容介绍型模块和在线互动型模块两大模块。1内容介绍性模块该模块主要是介绍网站的静态信息。主要包括：师资队伍、课程介绍、在线教学的内容等。师资队伍是介绍的教师的基本信息等内容。主要使用的Table表格，其中也包括教师的照片信息。课程介绍的内容是关于计算机图形学的内容

49、介绍。在线教学的内容是计算机图形学的理论知识和图形示例的综合。其中使用了Html的框架frameset，使用了JavaScript来动态调用内容页面，实现在线教学的功能。在线教学效果图如下图所示：图 3-3 在线教学页面缩略图2在线互动性模块此模块的主要功能是实现在线的考试、提问、回答等具有互动的环节。在线考试是通过JavaScript调用页面来实现的。在线提问或回答是通过内含的学习论坛（bbs）实现的。学生通过登录到论坛可以提出自己的问题，等待老师或其他学生的回答，也可以回答他人的问题。界面如下图：图 3-4 在线交流论坛缩略图3.2.1 网站主页设计一个网站是否能吸引住人，和主页的设计关系

50、相当的密切，主页上的每一部分可以说在设计中都是很重要的，一个网站不仅要从美观上能给人以吸引的感觉，还要有内容上的吸引，华而不实的网站是不能得到好的评价的，相反，虽然内容好特别的丰富但界面不好，浏览者进入的时候都没兴趣往下继续浏览，显然也不是我们设计网页时所追求的。网页设计要注意下面几点：1. 关键字：关键字对网站来说都是至关重要的，很多网站的流量也是来至于这些关键字搜索。一个网站关键字的设置在很大程度上决定了这个站排名和流量。首页的关键字设计更是重要，应该是主要关键字加长尾关键字，title Description keywords三包含原则。关键字的布局，首页关键字采用主关键字其他的则因分布

51、各个栏目和其他页面，比如，把首页关键字写做“精品课程”这一个词，而像其他“计算机图形学”等关键字则分布到其他页面或是二级目录里。2. 代码设计：网站首页代码采用div+css设计，这样做的目的是网页改版方便，代码比较简洁，对搜索引擎友好。另外一个主要因素也就是采用div+css设计的首页在添加首页广告时就变得简单，既不破坏机构又比较方便，主要目的不破坏页面的效果，这一点相信很多用table做首页设计的站长都深有体会，想在首页加些广告却发现加上去之后整个页面都发生了变化。3. 导航设计：导航的设计，好的网站导航不但可以让用户方便的到达网站的主要页面，而且方便搜索引擎对网站的收录以及其他页面的权重

52、。在设计导航时尽量少使用图片导航，少使用js下拉菜单或是其他特效导航。使用div+css在背景图片的形式再结合网站整体效果也可以设计出好看实用的导航。4. 首页样式结构：网站的结构这里我用的是三列式的布局方式。这种方式比较简洁大方，可以让用户更方面更直观的浏览页面信息。5. 用户友好性:一个网站能带来多少客户是网站优化和推广产生的效果，可最终能带来多少的忠实用户靠的就是网站对用户的黏性和友好性。再结合网站结构模型把用户最需要的东西很方便的呈现，在细节上做到细致入微。结合以上几点内容，我设计的首页如下图所示：图 计算机图形学精品课程网站首页从该图可以明显看出三列式的布局方式。最上部是头部，包括一

53、个flash和横向下拉式导航，以及当前日期的显示。下部是版权信息。中间的部分分成竖向三列。最左侧是网站的快速导航，也是使用频率最大的导航，它的下部是用JavaScript来实现的图片切换效果，图片是涉及计算机图形学领域的图片。中部是“计算机图形学的简介”。右侧的顶部是计算机图形学教材的缩略图。下部是从下向上滚动的关于计算机图形学教师的部分信息简介。该页面的结构布局全部采用div+css布局，摒弃了原先用表格布局的不方便性，用层布局你可以任意的控制页面的结构和各方面的元素，使各方面的元素很容易的适合你的构想的那种布局。字体和结构统一用css控制，当需要修改的时候可以直接对css样式表进行修改，而

54、不用像以前用表格布局时那样在本页面里修改，实现了结构和样式的分离，更适合最新的web. 2.0要求，而且这种好处在做大型系统时可以明确的分工，使各部门各做各的，减少了个部门之间的影响。3.2.2 网站子页设计该网站的内容页采用的是T型的网页页面设计。同样也是采用了div+css结构。头部和首页的头部一样。中间分为左中两个部分。左侧是一个栏目的小导航，右侧是内容的显示区域。底部和首页的底部一样，也是版权信息。如下图所示：图4.2 内容页页面浏览左侧是子栏目的导航，有CSS+Div代码实现，效果是颜色边框变化效果。右侧是内容的显示区域，有CSS+Table实现。因为考虑到内容多以表格的形式表现，所

55、以选择Table来实现，这样比较容易、明了的表现内容。 第4章 精品课程网站具体功能代码实现4.1 网站子页左侧导航内容页左侧导航是用CSS作出的效果，如下图所示：图4-1 内容页左侧导航默认的效果是：图 4-2 导航默认效果图当鼠标移动到他上面时效果是：图 4-3 鼠标经过导航时效果图左侧的颜色换成了红色，字体也变成红色，下边框变成了蓝色。CSS代码如下：.menu-list MARGIN: auto auto 50px; WIDTH: 207px; POSITION: relative; TOP: 10px.menu-list UL DISPLAY: block; LIST-STYLE-T

56、YPE: none; HEIGHT: 100%.menu-list LI margin-top:10px;DISPLAY: block;WIDTH: 100%; HEIGHT: 31px; .menu-list A padding:12px 5px 5px 0px;DISPLAY: block;WIDTH: 195px; HEIGHT: 13px; LINE-HEIGHT: 12px; border-left:#01BDEA 5px solid; BORDER-BOTTOM: #cccccc 1px dashed; BORDER-top: #cccccc 1px dashed;BORDER-r

57、ight: #cccccc 1px dashed;TEXT-ALIGN: right; TEXT-DECORATION: none.menu-list A:hover BORDER-BOTTOM: #4787fe 1px dashed; border-left:#FF0000 5px solid;此导航是通过ul li 重写列表样式实现的。Menu-list是最外面包括导航的层，在menu-list中定义了它距父标签的上左右下的距离，分别是：auto(自动)，auto（自动），auto（自动），50px。宽度是207px，相对定位，距离上是10px。Menu-list ul是使用了css的继承

58、定义了在Menu-list层中的ul列表样式，也说明此ul的定义只用于Menu-list中的ul列表。其中的css代码:display:block是将其块状显示；list-style-type:none是将其预设定的样式去除。在menu-list li中：margin-top:10px是每个设置列表项距上个元素之间填充10px。Menu-list a 和menu-list a:hover两个css定义链接样式区域中，通过设置样式，才显示了上图中的效果。Menu-list a是设置的链接默认的样是，代码padding:12px 5px 5px 0px是设置链接中链接文字距外上右下左各边框的距离。

59、Display:block设置了链接以块状显示。Border-left是定义了链接左边框的属性，即：颜色是#01BDEA浅蓝色，5像素宽，实现。Border-bottom定义了链接下边框的样式，即：颜色#CCCCCC,灰色，1像素宽，点画线。Text-align：right是定义了链接的链接文字的排列样式，是右对齐。Text-decoration：none定义了该链接无下划线。Menu-list a:hover定义了当鼠标经过链接时的样式。Border-bottom定义了链接的下边框是#4787FE,蓝色，1像素高，点画线。Border-left定义了左边框的颜色：#FF0000红色，5像素宽

60、，实线。这样当鼠标不经过时是一种样式，当鼠标经过时又是一种样式，这样就可以实现导航的动态变换效果。4.2 Javascript 输出日期时间在导航的右侧有日期输出，是用Javascript输出的。如下图：图 4-3 日期输出效果图Javascript代码如下：today=new Date();function initArray() this.length=initArray.arguments.length;for(var i=0;ithis.length;i+) thisi+1=initArray.argumentsi; var d=new initArray(星期日,星期一,星期二,星期三,星期四,星期五,星期六);document.write( 今天是 ,today.getYear(),年,today.getMonth()+1,月,today.getDate(),日 ,dtoday.getDay()+1, );