课程网站数据库原理与应用毕业设计

摘 要在信息高度发达的网络时代，精品课程网站建设在学校教学工作中，起到了举足轻重的作用。它增强学生和学校的互动性，加强学生和老师的沟通以及学生之间的交流和探讨，给老师和学生提供一个教与学交流、共享资源的平台。本系统就是基于这样的原则，构建了数据库原理与应用课程网站。系统以Html语言为依托，使用小旋风作为服务器，采用Flash、CSS样式美化页面。系统共分为12大模块，实现了在线浏览、资源下载等功能。论文首先介绍了课程网站建设的现状和意义；然后对网站进行了可行性分析和需求分析，并介绍了课程网站所实现的功能；在对网站进行详细分析后，依次对各模块的具体设计作了一个简单的阐述；通过测试分析，该系统运行稳定可靠；最后对系统进行了总结和展望。【关键词】课程网站；HTML；Flash；CSSAbstractIn highly developed information network era, quality curriculum construction site on the school teaching, has played a pivotal role. It enhances the interaction between students and schools, students and teachers to strengthen communication and exchange and discussion between students, teachers and students to provide a teaching and learning exchanges, sharing of resources platform. The system is based on this principle, to build a Database Principles and Applications course website.Html language system relying on the use of small whirlwind as a server, using Flash, CSS style landscaping page. System is divided into 12 major modules, to achieve online browsing, resources, downloads and other features.Paper introduces the course website construction status and significance; then conducted a feasibility analysis of the site and demand analysis, and describes the course website for the functions; in a detailed analysis of the site, followed by the specific design of each module for a simple exposition; by test and analysis, the system is stable and reliable operation; finally carried out on the system summary and outlook.【Keywords】 course website; HTML; Flash; CSS目 录1 引言12 项目开发的背景和意义22.1本课题研究背景22.1.1国际发展概况22.1.2国内的现状和发展概况32.2本课题研究意义33 网站需求分析43.1涉及用户及业务需求分析43.1.1主要用户43.1.2业务需求43.2 网站功能需求53.3网站可行性分析53.3.1技术可行性53.3.2经济可行性63.3.3操作可行性64 开发环境选择与简介74.1编程环境的选择74.2 小旋风安装与配置74.3具体实现中采用的关键技术及分析85 系统总体设计95.1 系统结构图95.2申报表模块105.3课程描述模块105.4教学队伍模块115.5教学方法模块115.6教学资源模块115.7学习资源模块115.8实践实训模块115.9教学效果模块115.10教学在线模块116 系统测试与实现126.1 系统的测试126.1.1 网站首页126.1.2申报表模块126.1.3课程描述模块136.1.4教学队伍模块136.1.5教学方法模块146.1.6教学资源模块146.1.7学习资源模块156.1.8实践实训模块156.1.9教学效果模块166.1.10教学在线模块166.2 系统的实现176.2.1 系统的功能实现176.2.2 系统的代码实现177 总结与展望21参考文献22致 谢231 引言精品课程是具有一流教师队伍、一流教学内容、一流教学方法、一流教材、一流教学管理等特点的示范课程。它将引导广大高等学校进一步巩固教学工作的中心地位，在切实加强教学建设、提高教学质量的基础上改善、加强高校信息化条件建设，利用现代化教育信息技术手段将优质的教学资源上网并共享，使全国其他高校在实施同类课程教学的过程中能够借鉴、使用这些优质的教学资源，在更大范围内提高高等学校的教学和人才培养质量。精品课程的建设是学校课程教学工作中一个重要的内容，为了使学生和老师之间有多角度，多渠道的沟通，以及及时、有序和高效地完成教学任务，及时了解教学当前的状态，精品课程的建设就显得尤为重要。在以往的课堂教学模式中，教师是按照自己对课程的理解来对整个班级的同学进行教学活动，但是这种教学模式不可能很好地实现“因材施教”的方针，而在精品课程这样的教学方式中，实现了学生可以通过人机交互的方式参与学习，学生可以依靠教学软件的指导和导航策略进行学习，并以自我评价和反馈信息来控制学习过程。这个数据库原理与应用课程系统就是为了配合这一流行有效的教学方式而设计的。系统是按照前台的思想来构建的，实现Flash、Html和CSS的完美结合，做出的网站集文字、图像、动画、视频于一体，充分发挥多媒体的优势，实现教学资源共享，提高学生自主学习能力、积极性和创新能力，更好地完善教学质量。通过系统的设计与实现，更加深入、实例化地了解精品课程网站建设的方方面面，很好地积累网站的开发经验，而且对于Flash、HTML和CSS的结合有了很深的了解，同时增强了系统综合设计能力和具体环境下的开发实现能力。2 项目开发的背景和意义2.1本课题研究背景实施“高等学校教学质量和教学改革工程”，是教育部为不断提高教学质量而推出的一项重大举措。精品课程建设是“质量工程”的重要内容之一，教育部计划建设1500门国家级精品课程，利用现代化的教育信息技术手段将精品课程的相关内容上网并免费开放，以实现优质教学资源共享，提高人才培养质量。对此为了响应国家的号召开始了对网络精品课程的设计与实现的课题的研究，以满足国家对人才培养的需求。2.1.1国际发展概况（1）突出了交互的重要性在国外无论是教师与学生，还是学生之间，交互是整个网络课程中必不可少的环节，不仅能使学习者通过和别人（教师、同学）的交流促进对知识的理解和运用，更在交流中实现情感和人格的完善，即使成年学习者也不例外。虚拟学习环境的教育评价框架中的会话模型，把整个学习的流程都看作教师与学生的交互，从网上学习环境提供的各种交互工具的性能上给出评价信息。而在线学习的认证标准中虽然没有明确提出“交互”这一词语，但在教学中，每一子项实际都与交互密不可分，如果在网络课程中少了这一环节，那么动机的激发、知识的迁移等学习过程都难以实现。（2）重视学习环境的创设 随着对各种学习观念的深入研究，国外的人们更加认识到，网络课程不是将教材的内容原封不动的搬到网上，而是要发挥网络的特点，为学生创设一个虚拟的学习环境。建构主义的学习理论强调要以学习者为中心，学习的发生是学习者与周围的环境交互的结果，在这个环境中，应该有促进学生学习的各种工具和资源。在传统的课程中，有教师、同学、课本、图书馆、实验室等各种各样的资源，而在网络中，如果忽视了对虚拟环境的设计，那么学生的学习就会变得乏味无趣，根本无法保证网络课程的学习效果。上述国内外的一些评价标准，并没有局限于课程的范围，而从环境的角度进行评价，实际上网络课程不应只是课程的内容，还要涉及课程的资源、活动、练习、作业，并且既有面向个人的，也有要求通过小组成员的共同努力而完成的协作学习任务，这在某种意义上已经具有环境的含义了。由鉴于此，国外的精品课程早已经提上了日程，并且有很多的课程网站已经投入到实际的应用中去了，开始为人民服务了。对以学习者为中心的网络教学，教学质量的高低决定于学生自主学习的能力。这是因为，在信息社会里，知识的数量已经大大地超越了人类记忆的极限，知识更新又是如此之快，人们不得不终生学习。已经掌握的知识会很快地过时，自己需要的知识，不仅可以通过听教师讲课，更可以跨跃时间和空间的限制，自己在浩瀚的知识海洋中寻找、挑选甚至挖掘。搜集、整理数据，提取出有用信息，学习新知识的能力，才是立足于高科技信息时代的根本。2.1.2国内的现状和发展概况我国的网络教学起步较晚，是在1994年CERNET（“中国教育和科研计算机网络”）建成后才开展的。在高等教育方面，国家教育部于1998年正式批准了清华、北邮、浙大、湖大为首批开发远程教学的试点学校；1999年初，国务院发布面向二十一世纪振兴行动计划，其中明确提出：实施“现代远程教育工程”，形成开放式教育网络，构建终身学习体系；2000年，国家教育部连续批准了人民大学等26所高校开展现代远程教育试点。这一系列举措，表明国家对INTERNET远程教育事业的重视，INTERNET远程教育的发展必将成为未来教育的焦点。对于网络教学的开始，还没有精品课程这个概念。而随着网络教学的发展，精品课程开始被提上日程，国家现在特别重视精品课程的建设问题。针对我们教育的现状，现在通过精品课程的建设来解决我国在教育上的窘状，同时也解决网络教学中的一些教学网站的一些缺点。精品课程建设是创建世界高水平大学教学质量与教学改革工程的重要组成部分，在学校课程建设中起到龙头和示范的作用。精品课程的建设对于共享全国优质教学资源，扶持中西部教育发展具有重要意义，国家正在投入大力气来做这方面的工作，出台了很多的文件来让各大高校来执行这件事情。如教育部关于启动高等学校教学质量与教学改革工程精品课程建设工作的通知(教高20031号)精神，为保证国家精品课程建设的顺利实施，特制定国家精品课程建设工作实施办法。通过这些政策的出台，使我国精品课程建设有很大的发展。 虽然我国现在大力的支持精品课程的建设，但是客观的说我国的精品课程建设还是处于起始阶段，还缺乏一些理论指导，以及统一的调配问题，形成现在的全而不精的局面。我国的精品课程建设与国外相比还是有很大差距的。2.2本课题研究意义从1998年到2002年，五年之内全国普通高校招生规模增长三倍多，从108万人增长到340万人，高等教育毛入学率达到15%以上，2003年，高等教育规模还在继续增长,本专科招生规模达到380万人，全国高等教育规模达到1900万人，高等教育毛入学率约17%。我国高等教育实现了历史性的跨越，使我国高等教育进入国际公认的大众化教育阶段。高等教育规模取得如此快速的发展，而且教育质量仍然不断提高，创造了世界教育发展史上的奇迹。但是，我国是发展中国家办大教育，而且是世界上最大规模的教育。人民群众不断增长的教育需求同教育供给特别是优质教育供给不足的矛盾，是现阶段教育发展面临的基本矛盾。教育投入严重不足，教育基础设施和教师队伍的水平都远远不能适应教育现代化的要求。要在高等教育规模持续增长的情况下，继续保持教育质量的不断提高，是我们面临的前所未有的严峻挑战。网络教学是缓解这种现状的一个方法，而精品课程为网络教学提供了一个很好的网络教材，使网络能够很好的教学。网上的资源通过教学网站来进行发布，有条件的学生可以通过学习教学网站的课件来学习，这样不用实时实地的进行学习，可以使学生可以更好的分配时间来学习。精品课程的建设极大缓解了我国教育力量不足的压力。3 网站需求分析3.1涉及用户及业务需求分析3.1.1主要用户该网站项目对于不同的用户有不同的权限，本系统用户类别包括教师用户和学生用户：(1)教师用户，2个职责：作为教学资源的提供者，精品课程的申报者。可对课件资源进行审阅和管理。(2)学生用户，作为网站的主要使用者。可以对教学课件、实验课件以及授课录像，课程习题、软件等教学资源进行查看和下载。3.1.2业务需求为了提高河北农业大学信息科学与技术学院学生的自学能力，为了方便信息科学与技术学院学生与学生的学习和交流，为了使学生获得更多的与老师沟通的时间。在老师的指导下，我完成了精品课程网站数据库原理与应用的设计与实现。随着现代信息技术的迅猛发展及广泛应用，传统的教学手段已远远不能适应现代化教学的需要，也不能满足当代大学生的信息需求。由于这种传统的教学手段所传输的信息量较少，在时空有限的课堂教学中，学生难以对课程内容进行充分的理解，并且自主选择式的学习模式不能得到实践，以学生为中心的现代教学理念很难得到实践。精品课程网站是高等学校教学质量与教学改革工程的重要组成部分。在精品课程的评审、建设、验收过程中，课程教学网站起着非常重要的作用。精品课程网站对精品课程的网络化具有不可替代的作用，是学生自主学习、教学互动、学习交流的重要平台。为了实现课程的精品化，在网站的设计中需要注重将无形的教学理念和方法融入到有形的教学资源中，实现资源的实例化、生动化和网络化。以这种思想为指导我们在规划网站时考虑了以下几个原则：(1) 内容充实(2) 体现教学资源(3) 模块化(4) 平台兼容性适应性要求：要求界面友好，菜单清晰，学生和老师都能很快熟悉网站。对资源信息的发布要求达到所见即所得的效果。3.2 网站功能需求本系统基于Windows平台，运用HTML为开发语言，结合Flash、CSS、等web技术设计开发，能够实现精品课程网站的基本功能。系统先针对单一精品课程网站进行功能设计，经测试完善后逐渐向通用型精品课程网站过渡。精品课程网站建设的目标是使教学更加方便，方便学生在家或寝室自己学习，提高学生自学能力，也节省学生、老师的时间。要求所设计系统操作方便、更新及时、易于维护管理。学生进入网站后可根据系统功能对该课程进行信息浏览，查看课件及学习等；教师进入网站后也可对课程的一些信息进行浏览，需要进入系统对网站进行维护，更新信息、修改信息或者删除某些信息。因此该系统需要满足的需求为：A为使用户操作方便，要求有良好的人机界面。B学生查看教学信息、学习资源等。C教师发布，评教内容和教学资源等。3.3网站可行性分析3.3.1技术可行性硬件：计算机的存储量大，运算速度快，成本较低，外部设备的功能好、效率高、可靠性高，通信设备的能力、质量都满足要求。系统软件：本系统主要采用B/S结构，不需安装客户端，由用户通过浏览器即可浏览系统。服务器以Windows 7为操作系统，小旋风为服务器。客户端用浏览器进行页面浏览。在B/S三层体系结构系统中，用户通过客户端浏览器向网络上的服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。B/S结构简化了客户机的工作，客户机上无需配置客户端软件。浏览器发出请求，网页生成等工作全部由Web Server完成。实际上B/S体系结构是把二层C/S结构的事务处理逻辑模块从客户机的任务中分离出来，由Web服务器单独组成一层来负担其任务，这样客户机的压力减轻了，把负荷分配给了Web服务器。这种三层体系结构如下图所示：WEB服务器端IE浏览器HTML数据库HTTP图3.1 B/S三层体系结构图3.3.2经济可行性从经济角度看，投资要小于回报，决策者才会实施计划。本系统的开发过程所进行的投资为书费和网费、电费，投入很少，而做出的系统运行后将大大方便学生学习交流，性价比极高。3.3.3操作可行性本系统的开发是在三个月的时间内完成的。前期主要是以学习以及收集资料为主，接下来就是对系统的分析，设计界面。对于计算机专业作为毕业设计来说是可行的。综上所述，该网站建设在技术上、经济上、操作上都是可行的。4 开发环境选择与简介4.1编程环境的选择系统是通过HTML +Flash+CSS+小旋风服务器实现的。使用小旋风这个软件的您完全可以抛弃体积庞大的WINNT，WIN2000服务器系统及漏洞百出的IIS了。可以在任何一个系统上调试和发布HTML、ASP程序。这两者的结合大大提高系统的可移植性和可维护性。 HTML语言是当前最流行的编程语言之一，因其高效稳定，简洁易学，又有微软的强大支持而受人们的欢迎，这些特点使系统能够长期稳定的运行提供了保证。HTML语言是世界上通用的网页编程语言，这里同样也是这种语言，所用的编程软件为Dreamweaver 8.0。Actionscript语言是Flash中通用的脚本语言，它为网站的美化起到了画龙点睛的作用。4.2 小旋风安装与配置（1）打开小旋风的安装包下的小旋风ASP服务器.exe，界面如图4-1图4-1 小旋风AspWebServer安装向导 （2）一直单击下一步按钮，选择要安装的路径，直至安装成功。 （3）小旋风安装后，打开main.box，在桌面的右下角会有图标显示，如图4-2图4-2 （4）这样就启动了小旋风服务器。4.3具体实现中采用的关键技术及分析（1）HTML程序的编写在此系统中显得至关重要。关系到网站整个页面的样式设计和布局。（2）利用CSS样式修改页面的样式，使得整个页面色彩和谐一致，视觉效果较佳。采用的是外部样式表。要将外部样式表链接到文档中，可在页面的标记之间插入以下代码：（3）在网站中Flash的地位显得尤为重要，尤其是用于教学的精品课程网站。动感绚丽的Flash动画给网站以极大的冲击力，在网站美化方面占有重要的地位，而且Flash是著名的多媒体制作软件，用它制作的动画动感十足，在数据库原理与应用教学中有广泛的应用。5 系统总体设计将该课程建设为具有一支结构合理、学术水平和教学水平高的教师队伍，能充分反映学科前沿成果并不断更新的教学内容，符合现代教育、素质教育和创新教育要求的教学方法，一流教学管理等特点的示范性课程。确保教学工作的中心地位，提高人才培养质量，以培养满足国家和地方发展需要的高素质人才为目标，提高学生的社会竞争力。数据库原理与应用精品课程网站是基于以上目标而开发的。该系统的核心功能就是对数据库原理与应用进行在线学习，由12大系统模块组成，其中包括：申报表、说课录像、屏幕演示、课程描述、教学队伍、教学方法、教学资源、学习资源、实践实训、教学效果和教学在线、软件下载12项的内容。系统的主要特点是：实用性较强，操作简单，执行迅速等。5.1 系统结构图 如图5-1申报表申报表下载申报表 说课录像说课录像 数据库原理与应用精品课程网站教学队伍教学方法教学资源课程内容实践条件课程负责人主讲教师教学队伍师资培养教学方法教学手段教学大纲实验大纲实验指导课设大纲学习资源电子课件教学视频习题试题案例库实践实训教学效果教学在线课设内容考核方式课设大纲课设要求课设项目课设规范校外专家评价行业专家评价督导评价教学效果特色与创新在线自测互动平台软件下载课程描述课程概述屏幕演示图5-1系统结构图5.2申报表模块 申报表模块可以查看申报表以及申报表的下载5.3课程描述模块课程描述模块通过课程概述、课程内容、实践条件三个方面详细介绍数据库原理与应用的主要内容、发展历程以及这门课程所要达到的目标。5.4教学队伍模块师资建设模块整体介绍了师资队伍，然后分别介绍各个教师的详细情况。通过本模块可以了解本专业拥有一批责任感强、团结协作、有敬业精神的教师队伍，另外他们教学质量高，知识结构合理的特点也得到了充分的体现。5.5教学方法模块教学方法模块实现的功能可以查看教学的方法和手段。对上传的资源进行观看和下载，达到资源共享的目的，并且可以分页显示共享资源。对精品课程所起的作用不容忽视，可提供较多有用的资源供用户下载。5.6教学资源模块 教学资源模块是整个系统的核心模块，在系统中起到了至关重要的作用。本模块共分为六个子模块，教学大纲、实验大纲、实验指导、课设大纲、课设内容和考核方式。5.7学习资源模块学习资源模块也是整个系统的核心模块，在系统中起到了至关重要的作用，也是精品课程的精髓所在。本模块共分为四个子模块，电子课件、教学视频、习题试题、案例库。在设计模块的过程中，可全面掌握数据库原理与应用的重点内容，将理论运用到实际中，起到事半功倍的作用。5.8实践实训模块实践教学模块分为四个子模块，课设大纲、课设要求、课设项目和课设规范。通过本模块，可详细了解这门课程所配置的硬件、软件设施以及学校对学生动手能力重视性。5.9教学效果模块教学效果模块分为五个子模块，校外专家评价、行业专家评价、督导评价、教学效果和特色与创新。主要用来了解这门课程的教学质量以及有待改善的地方。5.10教学在线模块教学在线模块包括两大模块，在线自测和互动平台。在模块中，用户可以根据自己的需要进行自测题的自测，也可进行互动。6 系统测试与实现6.1 系统的测试6.1.1 网站首页如图6-1图6-1 首页6.1.2申报表模块 如图6-2图6-2 申报表6.1.3课程描述模块如图6-3图6-3 课程描述6.1.4教学队伍模块如图6-4图6-4 教学队伍6.1.5教学方法模块如图6-5图6-5 教学方法6.1.6教学资源模块如图6-6图6-6 教学资源6.1.7学习资源模块如图6-7图6-7 学习资源6.1.8实践实训模块如图6-8图6-8 实践实训6.1.9教学效果模块如图6-9图6-9 教学效果6.1.10教学在线模块如图6-10图6-10 教学在线6.2 系统的实现6.2.1 系统的功能实现本系统采用Macromedia Dreamweaver 8进行代码的编写，利用HTML语言，结合FLASH、CSS美化界面。系统有关的资料、内容的显示，利用flashpaper软件将Word文档转换为flash格式的文档插入到网页中，保证版权所属问题。Flashpaper软件界面如图6-11：图6-11 flashpaper6.2.2 系统的代码实现部分CSS代码的实现：.kmm1234 LINE-HEIGHT: 25px; LIST-STYLE-TYPE: none; MARGIN-TOP: 3px; WIDTH: 245px; MARGIN-BOTTOM: 2px; FLOAT: left; HEIGHT: 20px; FONT-SIZE: 12px; TEXT-DECORATION: none.kmm00 LINE-HEIGHT: 20px; LIST-STYLE-TYPE: none; MARGIN-TOP: 3px; WIDTH: 220px; MARGIN-BOTTOM: 2px; FLOAT: left; HEIGHT: 20px; FONT-SIZE: 12px; TEXT-DECORATION: noneA.a1:link COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: noneA.a1:visited COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: noneA.a1:hover COLOR: #ff0000; FONT-SIZE: 12px; TEXT-DECORATION: none.cs FONT-FAMILY: 宋体; COLOR: #000000; FONT-SIZE: 12px.aa BACKGROUND-IMAGE: url(./image/a24.jpg); TEXT-ALIGN: center; PADDING-BOTTOM: 3px; BACKGROUND-COLOR: #ffffff; LIST-STYLE-TYPE: none; MARGIN: 5px 5px 1px 0px; PADDING-LEFT: 0px; WIDTH: 170px; PADDING-RIGHT: 0px; HEIGHT: 26px; COLOR: #ffffff; PADDING-TOP: 8pxA.c1:link COLOR: #ffffff; FONT-SIZE: 13px; FONT-WEIGHT: bold; TEXT-DECORATION: noneA.c1:visited COLOR: #ffffff; FONT-SIZE: 13px; FONT-WEIGHT: bold; TEXT-DECORATION: noneA.c1:hover COLOR: #999999; FONT-SIZE: 13px; FONT-WEIGHT: bold; TEXT-DECORATION: none.place LINE-HEIGHT: 18px; TEXT-INDENT: 12px; WIDTH: 780px; HEIGHT: 20px; COLOR: #404040; OVERFLOW: hidden.place STRONG LETTER-SPACING: 1px; COLOR: #404040; FONT-SIZE: 13px; FONT-WEIGHT: normal.place A MARGIN: 0px 2px; COLOR: #2b2b2b; FONT-SIZE: 13px; TEXT-DECORATION: none.place A:hover COLOR: #6d1667; FONT-SIZE: 13px; TEXT-DECORATION: none.place SMALL WIDTH: 8px; DISPLAY: inline-block; BACKGROUND: url(./images/ico-3.gif) no-repeat 2px 8px; HEIGHT: 20px; FONT-SIZE: 0px; VERTICAL-ALIGN: middle; OVERFLOW: hidden.mklb BORDER-BOTTOM: #666666 1px dashed; LIST-STYLE-TYPE: circle; PADDING-LEFT: 10px; WIDTH: 600px; HEIGHT: 20px; FONT-SIZE: 14px; PADDING-TOP: 10pxA.bb1:link COLOR: #000000; FONT-SIZE: 14px; TEXT-DECORATION: noneA.bb1:visited COLOR: #000000; FONT-SIZE: 14px; TEXT-DECORATION: noneA.bb1:hover COLOR: #ff0000; FONT-SIZE: 14px; TEXT-DECORATION: none.viewbox PADDING-BOTTOM: 8px; WIDTH: 765px; OVERFLOW: hidden.viewbox .title TEXT-ALIGN: center; LINE-HEIGHT: 60px; HEIGHT: 60px; COLOR: #0099ff; FONT-SIZE: 12px; OVERFLOW: hidden; PADDING-TOP: 2px.viewbox .title H2 COLOR: #000000; FONT-SIZE: 22px.viewbox .info TEXT-ALIGN: center; LINE-HEIGHT: 17px; HEIGHT: 24px; COLOR: #ffffff; OVERFLOW: hidden.viewbox .info SMALL COLOR: #ffffff; MARGIN-LEFT: 8px; FONT-SIZE: 12px; MARGIN-RIGHT: 3px.viewbox .info A COLOR: #690.viewbox .intro BORDER-BOTTOM: #ddd 1px solid; BORDER-LEFT: #ddd 1px solid; PADDING-BOTTOM: 8px; LINE-HEIGHT: 25px; MARGIN-TOP: 8px; PADDING-LEFT: 16px; PADDING-RIGHT: 16px; BACKGROUND: #fafdfe; COLOR: #666; FONT-SIZE: 12px; BORDER-TOP: #ddd 1px solid; BORDER-RIGHT: #ddd 1px solid; PADDING-TOP: 8px.viewbox .infolist WIDTH: 368px; FLOAT: left.viewbox .infolist SMALL TEXT-ALIGN: right; LINE-HEIGHT: 31px; WIDTH: 100px; DISPLAY: block; FLOAT: left; HEIGHT: 31px; COLOR: #999; CLEAR: left; FONT-SIZE: 12px; OVERFLOW: hidden.viewbox .infolist SPAN LINE-HEIGHT: 30px; WIDTH: 200px; FLOAT: left; HEIGHT: 31px; OVERFLOW: hidden.viewbox .content TEXT-ALIGN: left; LINE-HEIGHT: 25px; COLOR: #333333; FONT-SIZE: 13px.viewbox .handle LIST-STYLE-TYPE: none; HEIGHT: 59px; CLEAR: both; FONT-SIZE: 12px; OVERFLOW: hidden; PADDING-TOP: 12px.viewbox .handle .digg WIDTH: 59px; BACKGROUND: url(./images/digg-bg.gif) no-repeat; FLOAT: left; HEIGHT: 59px; MARGIN-RIGHT: 12px.viewbox .handle .digg .digg_num TEXT-ALIGN: center; LINE-HEIGHT: 34px; WIDTH: 56px; HEIGHT: 34px; COLOR: #6b9169; FONT-SIZE: 20px; OVERFLOW: hidden.viewbox .handle .digg .digg_act LINE-HEIGHT: 23px; WIDTH: 56px; HEIGHT: 22px; OVERFLOW: hidden.viewbox .handle .digg .digg_act A FLOAT: left; COLOR: #000000; MARGIN-LEFT: 11px.viewbox .handle .context TEXT-ALIGN: left; FLOAT: left.viewbox .handle .context UL LI LINE-HEIGHT: 18px; LIST-STYLE-TYPE: none; COLOR: #000000.context A LINE-HEIGHT: 10px; MARGIN: 0px 2px; COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: none.context A:hover COLOR: #6e1768; TEXT-DECORATION: none.e8 MARGIN-TOP: 10px; WIDTH: 100%; MARGIN-LEFT: 50px; CLEAR: both; OVERFLOW: hidden.e8 LI TEXT-ALIGN: center; WIDTH: 160px; DISPLAY: block; FLOAT: left; HEIGHT: 185px; OVERFLOW: hidden; MARGIN-RIGHT: 10px.e8 LI .pic TEXT-ALIGN: left; WIDTH: 160px; DISPLAY: block; HEIGHT: 120px; OVERFLOW: hidden.e8 LI .pic IMG BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #666666 2px solid; MARGIN-TOP: 2px; WIDTH: 152px; DISPLAY: block; HEIGHT: 112px; MARGIN-LEFT: 2px; BORDER-TOP: #666666 2px solid; BORDER-RIGHT: #666666 2px solid.e8 LI .title LINE-HEIGHT: 31px; WIDTH: 128px; DISPLAY: block; HEIGHT: 31px; OVERFLOW: hidden; FONT-WEIGHT: bold.e8 LI .date COLOR: #666.e8 LI .date SMALL LINE-HEIGHT: 17px; COLOR: #666; FONT-SIZE: 12pxA.ww:link COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: noneA.ww:visited COLOR: #000000; FONT-SIZE: 12px; TEXT-DECORATION: noneA.ww:hover COLOR: #6d1667; FONT-SIZE: 12px; TEXT-DECORATION: noneA.w2:link COLOR: #000000; FONT-SIZE: 14px; TEXT-DECORATION: noneA.w2:visited COLOR: #000000; FONT-SIZE: 14px; TEXT-DECORATION: noneA.w2:hover COLOR: #6d1667; FONT-SIZE: 14px; TEXT-DECORATION: none.dede_pages UL PADDING-RIGHT: 0px; FLOAT: left; FONT-SIZE: 12px.dede_pages UL LI LINE-HEIGHT: 18px; FONT-FAMILY: Tahoma; FLOAT: left; FONT-SIZE: 12px; MARGIN-RIGHT: 10px.dede_pages UL LI A PADDING-LEFT: 4px; PADDING-RIGHT: 4px; FLOAT: left; COLOR: #333333; FONT-SIZE: 12px; T