网页制作的程序与设计毕业论文

合集下载

【计算机网页设计毕业论文】网页设计毕业论文范文

《【计算机网页设计毕业论文】网页设计毕业论文范文》摘要：rvrrx(\"r"r("l")"\")"，l"r("l")" rr b lrr",,,，r("l")""r("l")""技术交式页设计运用、技术简介技术（v rvr g动态页）是微软公司推出种用以取代g（ g r通用关接口）技术目前r上许多基平台b已开始应用替换g简单地讲是位器端脚运行环境通这种环境用户可以创建和运行动态交式b器应用程序如交式动态页包括使用l表单收集和处理信息上传与下等等通常情况下用户通浏览器看到页多是静态目前r 上许多仍然提供"静态"（）主页容所谓"静态"指就是主页容是"固定不变"当浏览器通r 协议向器(b rvr)要提供主页容器收到要就传送原已设计静态l 件数据给浏览器"静态"若要更新主页容必须手动更新其l件数据而随着b应用发展用户希望能够看到根据要而动态生成主页例如响应用户询数据库要、生成报表等当浏览器上填表单(r)输入数据以提供要可以器执行应用程序而不只是l 件器收到要执行应用程序分析表单(r)输入数据将执行结以l格式传送给浏览器根据用户请生成动态主页传统方法有g、等g是根据浏览器端请激活响应进程每请对应进程当有很多请程序挤占系统造成效率低下；针对这缺进行改进利用ll（动态链接库）技术以线程代替进程提高了性能和速但要考虑线程步问题而且开发步骤烦琐这两种技术和另普遍使用开发动态页技术v都还存着另外问题那就是开发困难程序开发和l写作是两完全不程要专门程序员开发而较简单开发技术如vr和(r b r)等功能有限不敷使用使用vx技术基开放设计环境用户可以己定义和制作组件加入其使己动态页几乎具有无限扩充能力这是传统g等程序所远远不及地方与常见l端实现动态主页技术如v l、vx rl、vbr、vr等不命令和r语句都是由器释执行执行结产生动态生成b页面并送到浏览器；而l端技术r命令则是由浏览器释执行由是器端释执行开发者可以不必考虑浏览器是否支持；由它器端执行开发者也不必担心别人下程序从而窃取编程逻辑通缀名件实现件相当可执行件因必须放b器上有可执行权限目录下当用户从浏览器输入了件地浏览器就将这rl请发给b rvr如b rvr上装了就调用出相应件释并执行命令动态生成l页面回传b rvr然b rvr再把结发送给浏览器件制作和l类似且和l开发集成可以程完成利用将可以执行脚嵌入到l件(将l件缀名改)这使得l件编写与脚开发融合起通置对象、器组件（rvr ）可以完成非常复杂任而且用户还可以己开发或利用别人开发器组件完成专门任比较关及器扩展模式有着以下优()完全与l件融合起；()容易创建不要其它编译、链接程序；(3)面向对象并通vx rvr对象可扩展二、电子商数据访问方式电子商是指通电子方式并络基础上实现物、人员程协调以便商业交换活动电子商系统b提供了与客户进行通信络有效手段利用b技术实现b器与数据库系统连接完成对数据处理与询用户可以通操作简单易学浏览器询处理所要各种数据实现b器与数据库连接般有两种方法种是利用件技术两者建立连接和通信如g(通用关接口)和(应用程序编程接口)b器通调用g程序实现与b浏览器交即g程序接受浏览器发给b器信息进行处理将相应结再送回给b器通b器将信息传送给浏览器但g程序响应速和利用等方面有较局限性客户端每请g程序器端便打开进程当请数量较容易引起瓶颈现象开发人员常利用编程扩展器功能程序占系统少运行效率较高但它编程较g程序更复杂；另种是由浏览器v应用程序(v l)通浏览器访问b器上数据库利用了b(v b v)技术它通b 提供实现对b rvr访问由v l身局限性目前多数应用是基件技术也是属件种模式但平台上它比较关及器扩展模式有着较优关特是它平台无关性但关程序通常较难编写和改变关程序通常是独立程序并不和l件融合起它要用如、、vb、rl等语言编写独立应用程序而应用改变了这使用不仅可以取和 ql rvr数据库而且还可以取其他b（ b 开放式数据库）兼容数据库访问数据库是通(vx b b活动数据对象)及事处理语句实现是种操作r所支持数据库方法是项容易使用并且可扩展将数据库访问添加到 b 页技术对象使用与（数据访问对象）、r（远程数据对象）方式相似可以看作是器组件更简单说是系列对象应用这些功能强对象即可轻松完成对数据库复杂操作三、电子商应用电子商对用户而言进行上信息询目是寻己要产品或而对商品或提供者说其目则是向用户推销己产品或因让用户通浏览器询器端数据库是许多b提供者必有通置b组件实现这功能可以使用编写紧凑简明脚以便连接到b 兼容数据库和 l b 兼容数据具体操作步骤可以归纳以下几步① 创建数据库名（） b通b工作因要b设置（数据名）打开"控制面板"双击"b"图标然选择"件 "属性页单击添加选择数据库驱动程序然单击"下步"按照屏幕指示键入数据件名称然单击"下步"再单击"完成"创建数据②创建数据库链接链接用以保持些关正访问数据动态信息以及链接者信息利用b成员函数和先前设定与数据库连接其语法如下 rvrrb("b") \"创建了链接对象("；r；r") \"打开链接数据名；r用户名；r用户口令③创建数据对象数据对象通常保存是询结rr 是复杂对象有许多属性和方法灵活运用可以达到许多效其创建方法如下 rr x(qr) \"创建并打开了对象rr qr是串代表条标准ql语句例如 qlr"lr b" rr x(qlr) 这条语句执行对象rr就保存了b所有记录④操作数据库可利用x方便地执行数据插入、修改、删除等操作如执行插入操作 qlr"r bvl(,)" x(qlr)⑤关闭数据对象和链接使用了对象定要关闭数据对象和链接通调用方法l实现关闭关闭创建数据对象rr l rr g 关闭创建链接对象 l g 完整程序片段产生组件实例％rvrrb("b")连接数据库(";r;r")执行询qll＊rbl rx(ql) ％显示结％l r％％r(l)％％rvxl％上述是用访问数据库全程由应用面向对象思想所有操作都比较简单用户要仅是对数据结构了、当前所操作对象及对象属性等等只要对这些有了清晰认识再加上强功能络上使用数据库实现用户与页面交换信息就再也不是什么难事了[xg]四、主要功能程序段、打开数据库xl,r,b,rb"b#b" 数据库路径rvrrb("b")r"rvrrlb0; r" rvr(""b"")r．数据库询操作类讯 rrvrrb("brr")只方式打开r "l l,l r l",,,l rrr " rvrrx(\"r"r("l")"\")"r(r("l"))" "rvxlrl类询rrrvrrb("brr")r "l l,l r l r l"r("l")" rr b lrr",,, l rrr " rl?"r("l")""r("l")""r(r("l"))" "rvxl．3 添加记录操作rrvrrb("brr")可写方式r "l bk,r,zg,zgr r ",,,3r 添加条新记录r("bk")bk 添加相应记录r("r")r…………r("zg")6r("zgr")0r 更新数据库．删除记录操作从表删除匹配记录; x "l r r "rqqrrg("")．5 记录修改和看rrvrrb("brr")r "l r bk r bk"bk,,,3r("l")(rq("l")) 修改各项记录………………rrl五、结束语随着b技术发展基r电子商系统无疑较传统商有着更应用前景如何提系高这种电子商统数据访问效率及事处理能力仍是当前人们所关问题。

web网页设计毕业论文

web网页设计毕业论文导师：院系：专业：学号：姓名：题目：Web标准化网页设计目录摘要 (1)第一章概述 (2)1.1 HTML (2)1.2 HTML语言的产生 (2)1.3层叠样式表 (3)1.4 项目介绍 (4)1.5 页面设计规划 (4)第二章网站制作前期准备 (5)2.1 软件的准备 (5)2.2 软件的应用 (6)2.3 Fireworks的应用 (8)2.4 Dreamweaver的应用 (9)第三章CSS样式建站 (11)3.1 CSS排版与普通排版的区别 (11)3.2 DIV+CSS样式页面布局 (12)3.3 CSS样式表 (13)3.4 CSS色彩及颜色基础知识 (15)3.5 两种方法设置对象颜色样式 (16)3.6 文字颜色控制一样 (16)3.7 RGB颜色给出了四种方法之一 (17)3.8 CSS盒子模型 (17)第四章网站后期特效 (19)4.1 网站特效 (19)4.2 本网站的特效 (19)五. 结论与总结 (21)参考文献 (22)致谢 (23)摘要随着信息技术的发展，信息技术使用传递速度突破了时间和地域性的局限，网络化与全球化成为一种不可避免的世界趋势。

然而网页制作并不是一个简单的过程，期间要运用好多技术，包括图像设计和处理、网页动画的制作和网页版面的网页布局编辑等。

随着网页制作技术的不断发展和完善，产生了众多网页制作与网站建设软件。

目前使用最多的是较为常用的Dreamweaver、Flash、Fireworks这三个软件，也就是人们俗称的建站“三剑客”，其中Dreamweaver是网页制作的核心。

相对于一个网站页面的标准化，美观化是更为重要的，CSS是最主要的表现标准化的语言。

在本论文将通过对网友需求的了解和对其他网站的参考，在网页设计与制作中着重使用CSS+DIV样式布局来标准化美观化网页，最终成功完成一个CSS样式网站。

用一段话来概括网站标准化的作用就是；1.确保任何网站文档都能够长期有效简化代码、降低建设成本；2.让网站更容易使用，能适应更多不同用户和更多网路设备的需求；3.确保所有应用都能够持续准确的执行；【关键词】：Dreamweaver、CSS、DIV 、网页设计标准化、Html。

大学网页设计毕业设计论文

石家庄邮电职业技术学院石家庄邮电职业技术学院毕业设计学生姓名：李影系部：电信工程系专业：指导教师：赵月恩年月日2石家庄邮电职业技术学院3 摘要本论文将对网页的设计和制作进行研究和探讨。

作品的主要技术指标包括：1、制作出一个具有静态和动态技术的“关于公司的宣传网页”；2、在制作的过程中，加强和深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法和理论；3、最后是追求后台操作的稳定性。

本设计的主要内容包括：1、公司宣传网页的设计思想，整体规划及相关基础知识；2、公司宣传网页的前台设计，包括汇编HTML语言程序及效果图；3、公司宣传网页后台设计（通过后台操作实现对网页内容的修改）；4、公司宣传网页的调试。

网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

网页主题就是所要包含的主要内容，一个网页必须要有一个明确的主题。

特别是对于个人网页，不可能像综合网站那样做得内容大而全，包罗万象。

所以必须要找准一个自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。

关键词：宣传网页基本原则制作步骤网页主题AbstractThis will be web page design and production of research and discussion. Works of the main technical indicators include: To produce a static and dynamic technology " company pages"; In the process of strengthening and deepening of previously learned about web design methods, while a better understanding of Reference Information on the methods and theories; Finally, the pursuit of stability of the background operation.The design of the main contents include:company web page design ideas, the overall planning and relevant basic knowledge; company web pages front design, including the compilation of HTML language program and effect diagram; Personal web pages background design (back-office operations through the implementation of the web content changes); Personal web pages debugging.Page plan includes a great many things, such as the page structure, and column settings, web style, color combinations, layout, text, images and other use of, and only this website in order to have produced personality characteristics, attractive.Web theme is to be included in the main contents of a web page must have a clear theme. Especially for personal web pages, it is impossible to do, as an integrated Web site content as large and comprehensive, all-inclusive. Must be4石家庄邮电职业技术学院necessary to identify one most interested in their own content, so deep, be thorough, to do its own characteristics, so as to give the left a deep impression.Key words:Company Homepage Ground Rules Process Web Theme目录摘要 (1)前言 (2)第一章、系统分析 (6)1.1关于公司宣传网页的网站建设发展历程 (6)1.2关于公司宣传网页的网站建设的必要性分析 (7)1.3本选题的现实意义.................................................................................................. 9)第二章、上海绪盛纺织品有限公司宣传网站的设计 (11)2.1关于公司宣传网站的特点 (12)2.2上海绪盛纺织品有限公司宣传网站的基本组成结构 (12)第三章、具体网站的分析 (13)3.1需求分析 (14)3.2系统运行环境分析 (15)3.3系统设计流程图 (15)第四章、开发工具的选用及介绍 (17)54.1 Asp 脚本语言介绍.......................................................................................... (18 4.2 Dreamweaver简介. (18)4.3 SQL Server 数据库简介 (19)4.4 网站图片制作工具Photoshop简介 (19)第五章、网站前台界面的设计与实现 (20)5.1 网站前台首页 (20)5.2 站内展示功能的实现 (21)5.3 网站前台界面的设计与实现分析 (21)附录 (22)参考文献 (23)致谢 (24)6石家庄邮电职业技术学院7 前言随着网络技术的不断发展，如今的公司越来越倾向于在网络上进行宣传产品，网页设计成了企业展示自身形象、发布产品信息、联系网上客户的新平台、新天地，进而可以通过电子商务开拓新的市场，以极少的投入获得极大的收益和利润。

（完整版）网页设计毕业论文

网站的设计与制作目录第一章前言第二章1．1课题来源1．2 网站开发项目需求分析1．3 软件1．4 软件运行环境第二章网站制作2．1做网页的步骤2. 2做网页的要素2．3 系统各模块功能实现第三章网站的设计3．1 主页的要求3．2 子页的要求第四章结束语参考文献摘要汽车网站是一个结合了汽车销售等多功能浏览的汽车网站，我所使用的软件是Macromedia 公司推出的一款用于网页设计的软件——dreamweaver8。

在网页的制作与链接中，我学到了很多。

关键词：超链接外观性能第一章前言1．1课题来源随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。

就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。

可喜的是在这几十年的发展中我们有了互联网。

互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。

以往，人们出行都以自行车居多，后来公交事业发展壮大，人们便乘坐公交汽车，现如今，随着人们生活水平的提高，越来越多的家庭已经拥有或者想拥有自己的私家车。

正是因为人们的这些需求，越来越多的汽车网站出现在网络上，使人们可以随时了解自己想知道的汽车方面的新闻，真正的做到足不出户，便知天下事。

把汽车销售与网络连接起来，是今后汽车销售发展的必然方向之一。

1．2 网站开发项目需求分析一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。

面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。

因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。

HTML网页设计毕业论文-html网页设计论文

毕业论文网站设计与制作所属系：计算机专业：应用技术学生姓名： ***学号： ************指导老师： ****二〇一一年五月第 1 章网站总体分析及概要设计1.1 模块功能分析1.1.1 引导首页模块引导首页使用整体颜色背景，配合图片或Flash 构成，顶部为导航首页链接。

1.1.2 班级形象模块该模块功能主要是展示班级的形象，同时作为网站的导航首页，在用户登录后就可以看到班级的更整体形象，班级的展示及班级动态，用户还可以通过顶部和左侧的导航栏进入网站，深入的了解该班级。

1.1.3 用户模块用户注册与登录：网络上的用户通过填写ID、密码等信息可以注册成为会员，并获得相应的用户权限。

系统自动把用户的注册信息存储到服务器端的数据库中。

如果用户ID 重复或者填写错误，系统会给出提示信息，而通过用户注册与登录、可以自由发布与查看各种信息。

用户信息维护：系统的注册用户可以随时修改自己的注册信息，这些修改后的信息将自动更新到服务器端的数据库中。

用户登录 / 退出：系统的注册用户可以登录系统并且获得相应的权限，登录了的用户也可以选择退出登录。

1.1.4 留言板模块该模块功能主要是提供用户与网站主之间的交流平台及站长收集用户反馈信息以改善站点。

1.2 网站导航功能结构网站主要实现的功能有：网站首页导航，各页面导航以及其他模块。

1.3 论文可行性分析1.3.1 社会可行性分析可行性分析主要分析现有技术条件能否顺利完成开发工作，软硬件配置能否满足开发者的需要等。

随着计算机硬件和软件技术的飞速发展，为网站的建设提供了有利的技术条件，由此看来技术基础也已非常成熟，因而技术上是可行的。

1.3.2 软件可行性分析1.3.2.1 ASP技术介绍ASP（ Active Server pages）即“动态服务器网页”，ASP之所以能受到大家的重视与使用的原因，只要在于脚本在服务器上而不是在客户端运行，传送到浏览器上的Web 页是在 Web 服务器上生成的。

网页设计毕业论文范文

网页设计毕业论文范文在当今信息化时代，网页设计作为一门新兴的学科，受到了越来越多人的关注和重视。

随着互联网的不断发展和普及，网页设计的重要性也日益凸显。

作为一名网页设计专业的学生，我对网页设计这一领域有着浓厚的兴趣和热情。

在进行毕业论文的撰写过程中，我深入研究了网页设计的相关理论和实践，结合自己的学习和实践经验，撰写了本文，旨在探讨网页设计的相关内容，希望能够为同行提供一些借鉴和参考。

首先，我从网页设计的基本概念和原理入手，系统地介绍了网页设计的相关知识。

我认为，了解网页设计的基本概念和原理对于从事网页设计工作的人来说是非常重要的，只有深入理解了这些基本知识，才能够在实践中得心应手。

因此，我在论文中对网页设计的基本概念和原理进行了详细的阐述，希望能够帮助读者更好地理解和掌握网页设计的基本要点。

其次，我重点讨论了网页设计中的一些重要技术和工具。

随着科技的不断进步，网页设计所使用的技术和工具也在不断更新和发展。

在论文中，我对网页设计中常用的技术和工具进行了介绍和分析，希望读者能够了解到这些技术和工具的特点和用途，从而更好地应用到实际工作中去。

最后，我结合了一些实际案例，分析了网页设计在实际应用中的一些问题和挑战。

在实际工作中，网页设计师经常会面临各种各样的挑战和困难，例如兼容性、响应式设计、用户体验等方面的问题。

在论文中，我结合一些实际案例，对这些问题进行了深入的分析和探讨，希望能够为读者提供一些解决问题的思路和方法。

总的来说，本文围绕网页设计这一主题展开了深入的研究和探讨，内容涵盖了网页设计的基本概念和原理、重要技术和工具以及实际应用中的问题和挑战。

希望本文能够对网页设计领域的学习和研究提供一些借鉴和参考，也希望能够为网页设计师的实际工作提供一些帮助和指导。

最后，希望读者能够从本文中获得一些启发和收获，进一步深入研究和探讨网页设计这一领域，为网页设计的发展和进步贡献自己的力量。

网页设计与应用毕业论文

网页设计与应用毕业论文一、综述随着互联网的普及和发展，网页设计已经渗透到我们生活的方方面面。

从社交娱乐到工作学习，从购物消费到信息查询，我们无时无刻不在与网页打交道。

那么什么样的网页能够吸引我们的眼球，让我们愿意停留、探索、互动呢？这就是我们今天要探讨的话题——网页设计与应用。

首先让我们来谈谈网页设计的魅力所在，一个好的网页设计，首先得有个让人眼前一亮的外观。

就像我们逛街时，漂亮的店面总是能吸引我们的注意力。

网页设计也一样，美观大方的页面总能让人心情愉快，愿意进一步了解。

接下来就是用户体验，一个易于使用的网页，能让我们轻松找到想要的信息，完成想要的操作。

就像我们用某个APP，操作流畅功能齐全，我们就会觉得这个APP很好用，愿意长期使用。

1. 论文背景及研究意义当我们打开计算机，随时随地都能接触到各式各样的网页。

网页已经成为现代社会生活中不可或缺的一部分，承载着我们的信息需求、交流情感和日常生活功能。

今天我们所见的网页设计，早已超越了简单的文字与图片展示，它融入了更多的设计理念和技术应用，成为了连接人与数字世界的桥梁。

那么为什么我们需要关注网页设计与应用呢？这就涉及到了我们这篇论文的主题。

回想一下互联网刚刚兴起的时候，那时的网页多是静态的，功能相对单一。

但随着科技的进步，尤其是移动互联网的飞速发展，网页设计和应用也迎来了巨大的变革。

从简单的信息展示到复杂的交互应用，从桌面端浏览到移动设备的便捷访问，网页设计在不断地挑战与创新。

我们每天浏览的新闻网站、社交媒体、购物平台等，背后都有着精良的网页设计和应用技术的支撑。

可以说网页设计已经渗透到我们生活的方方面面。

那么为什么我们要研究网页设计与应用呢？这不仅是因为它关乎我们的日常体验，好的网页设计不仅能提供美观的界面，更能提升用户体验，增强网站的吸引力和黏性。

同时随着网络技术的不断进步，网页应用也在不断地拓展新的领域和新的功能。

比如现在的网页应用已经不仅仅是简单的信息浏览，还涉及到了在线支付、在线教育、在线办公等各个方面。

网页设计与制作毕业论文

网页设计与制作毕业论文尊敬的评审委员会成员：我将在这篇论文中介绍网页设计和制作方面的基础知识，并针对这一领域的最新趋势进行探讨。

该论文的目的是了解这项技术的发展和应用，并提供一些有关网站设计和制作的建议，以帮助那些希望在这个领域取得成功的人。

一、网页设计与制作的基础知识网页制作所需的技能包括HTML、CSS、JavaScript等，这些技术是网页制作的基础，可以用于创建精美的、富有交互性的网站。

在这些技术的基础上，还涉及到图片和其他多媒体元素的处理，以及对服务器端技术和数据库的了解。

这些技能的掌握对于创建一个有吸引力、功能丰富的网站非常重要。

HTML是网站制作的基础，用于构建网页的结构和内容，它是一种用于描述文档结构的标记语言。

CSS是一种用于美化网页的样式表语言，它用于控制网页的样式和布局。

JavaScript是一种基于Web的编程语言，可用于网页的动态效果和响应式设计。

使用这些技术可以为网站带来丰富的功能和美观的样式。

二、网页设计和制作的最新趋势1．响应式设计响应式设计是指网站可以自动适应不同屏幕大小的设计。

这种设计可以使网站在多种设备上都具有很好的显示效果，包括笔记本电脑、平板电脑和智能手机等。

这是一个适应移动设备的网络世界的必需品。

2．单页面设计单页面设计是指所有内容在一个页面上展示的网站设计方式。

这种设计方式使得网站页面更加简洁，用户可以在一个页面上浏览所有信息，并且可以带来更好的用户体验。

3．图形动画设计图形动画设计是指运用动画效果增强网站的交互性，使功能更加丰富和吸引人。

例如，当用户输入信息时，页面会根据用户输入的内容进行动画反馈。

这种设计方式可以增强用户与网站之间的联系和互动性。

三、网站设计和制作的建议1．保持简洁一个简洁但功能齐全的网站可以为用户带来更好的体验。

设计应该以用户为中心，提供用户最需要的功能和信息。

避免过于复杂的设计，可能会降低用户体验。

2．遵循Web标准遵循Web标准不仅可以改善页面的兼容性和可访问性，而且也利于搜索引擎优化（SEO）。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页制作的程序与设计毕业论文目录摘要 (I)第1章选题背景 (1)1.1来源 (2)1.2目的 (2)1.3意义 (2)1.4应解决的主要问题 (2)1.5应达到的技术要求 (3)1.6国外现状及发展趋势 (3)1.7所用各技术特点 (3)1.8网页制作优缺点 (4)1.9 PS页面样式 (5)第2章方案论证 (9)2.1设计原理 (10)2.2方案选择 (15)2.3方案的特点 (16)2.4 css代码 (17)第3章后台 (29)1 后台页面 (29)2 页面代码 (30)3 运行环境 (33)3 小结 (34)第4章总结 (35)致谢 (35)第1章引言一、介绍超是网页中最活泼、最有吸引力的一种元素。

表单用于特殊的信息，使用户和进行交互，使你找到用户的详细信息。

表格在许多工作中有着广泛的应用。

框架网页是一种特殊的HTML网页，使用框架网页可以同时浏览几个不同的Web页面，使用Web页面显示一致的用户界面和灵活的页面容。

网页制作的高级技术包括：在网页中插入FLASH动画利用Java或者JavaScript制作网页的动态效果。

网页中使用插件，视频等Web组件以及创建、发布和管理站点等技术。

Web页面往往是具有各种各样的页面元素、丰富的容和复杂的布局。

因此仅仅使用到一种或者两种网页制作技术，不可能创作出一个优秀的Web页面，一个美观而实用的Web页面往往需要综合利用各种技术。

二、概述1. 名称：“JONY的天空”2. 步骤：(1) 确立主题(2) 收集资料(3) 创建(4) 编辑网页(5) 美化网页三、目的运用已经掌握的知识完成一个环境保护企业。

通过此次设计可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握运用Dreamweaver制作网页的基础上再加以实践，进一步提高、加强自身的综合能力。

四、要求根据公司的要求，设计一个，以达到宣传该公司及其产品的目的。

有整体框架结构，表格定位等，布局合理，色彩搭配协调统一，容丰富多彩，页面风格独特。

五、设计工具Dreamweaver、Flash、Photoshop等。

六、站点构思1.整体构思：本主题为：JONY的天空个人。

总共有主网页7个，外加后台网页及程序。

主页是一个总目录的网页，里面加有网页动画效果“相册浏览”及Flash动画，本站几个主要分网页分别为：首页、展示时刻、心情日志、随笔感悟、温馨相册、关于我们。

还有许多子网页。

2.页面构思：下面介绍一下中的几个网页的制作。

背景色采用跟主页一样的蓝色，淡蓝色的背景给人以干净大方的感觉，上方为Flash动画与导航部分，全部均是用Photoshop制作的图片PSD图片，每个页色调均不相同。

左边的LOGO是用Photoshop制作的图片。

每个页面都有一个置的播放器，不同的页面有不同风格的音乐，让浏览者有身临其境的感觉，播放器支持点击播放/停止的功能，更加人性话。

七所用各技术的特点1.Dreamweaver : Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理于一身的网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

Dreamweaver是当前主流的站点和网页编辑器，其代码简洁、兼容性和整体功能都很强。

Dreamweaver的介入，使得网页一些部分的实现变得更加直观简便。

Dreamweaver的主要特点：最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。

使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。

对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。

Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dremweaver便可完成，整体运用流程自然顺畅。

除此之外，只要单击便可使Dreamweaver 自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。

管理使用地图可以快速制作雏形，设计，更新和重组网页。

改变网页位置或档案名称，Dreamweaver会自动更新所有。

使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的更新变得迅速又简单。

无可比拟的控制能力Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。

它包含HomeSite和BBEdit等主流文字编辑器。

帧(frames)和表格的制作速度快的令您无法想像。

进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。

所供即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party 厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。

当您正使用Dreamweaver在设计动态网页时，所供即所得的功能，让您不需要透过浏览器就能预览网页。

梦幻样版和XMLDreamweaver将容与设计分开，应用于快速网页更新和团队合作网页编辑。

建立网页外观的样版，指定可编辑或不可编辑的部分，容提供者可直接编辑以样式为主的容，却不会不小心改变既定之样式。

您也可以使用样版正确地汇入或输出XML容。

全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。

对于cascading style sheets的动态HTML支援和鼠标换图效果，声音和动画的DHTML效果资料库可在Netscape和Microsoft 浏览器上执行。

使用不同浏览器检示功能，Dreamweaver可以告知您在不同浏览器上执行的成效如何。

当有新的浏览器上市时，只要从Dreamweaver的下载它的描述档，便可得知详尽的成效报告。

2.Photoshop:Adobe photoshop 在绘图、色彩调整等诸多方面有着出色的功能，集成度高、适应面广和操作简便。

他不仅提供强大的绘图工具，可以直接绘制艺术图形，还能直接从扫描仪，数码相机等设备中采集图像，并对他们进行编辑、修复、以及调整效果，同时可以改变图像的颜色模式，并能在图像中制作艺术文字等。

Photoshop中的高级绘图工具，可自动生成背景纹理、图层效果，多种特殊效果滤镜，可创建多种艺术效果和绚丽的web图形并可直接在photoshop中定义和编辑切片的工具透明控制，包括用于混合到任意背景中的边缘的仿色透明度。

强大的彩色校正工具——修复画笔，可在消除瑕疵的同时保留色调和纹理图层。

Photoshop的强大工具可以使操作者不管制作任何图像都游刃有余。

对于设计网页，photoshop是不可或缺的工具，是强大的图片处理工具。

3.FlashMX: Macromedia公司出品的Flash是制作网页动画的利器。

严格来说， F1ash是网络多媒体制作工具而不是网页编辑工具。

F1ash是制作动感网页的权威。

对于使用者来说，只需很短时间的学习，就可以用它制作出美观的网页动画。

可以让制作者随心所欲地实现各种创意，并且可以和JavaScript一起创作出具有强大交互性的网页动画。

Flash是一种绘制矢量图形和创作互动多媒体动画的软件。

它可以用少量的矢量数据就可以描述相当复杂的对象，所以生成的文件尺寸小，便于在网上传输。

Flash创建的动画集可以插入到html文档中，也可以单独制作网页。

使网页的效果更加完美。

八网页制作的优缺点比较明确，风格统一。

并运用了一些其它的设计软件加以辅助设计。

使网页更加具有动感，形式丰富。

就容而言，比较丰富。

大量运用了图片，并进行了文字说明，做到了图文并茂。

但是由于我们刚接触网页制作，做出的效果还是有些稚嫩的，需要以后不断的实践。

九 ps页面样式一．首页二．展示时刻三．心情日志四．随笔感悟五．温馨相册六．关于我们代码1.页面代码<html xmlns="/1999/xhtml"><style type="text/css"></style><head><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>懿——[jony天空]</title><meta name="description" content=""><meta name="keywords" content=""><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script></head><body><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td width="1024" height="110" valign="bottom" background="Images/in_01.jpg"><div id="apDiv1"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','1024','height','300','src','Images/PGY','quality','high','plugins page','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tr ansparent','movie','Images/PGY' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="1024" height="300"><param name="movie" value="Images/PGY.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/PGY.swf" width="1024" height="300" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></div><table width="1004" border="0" cellspacing="0" cellpadding="0"><tr><td width="960" align="right" class="fong_FFFFFF"><a href="index.asp" class="a3">首页</a> | <a href="user.qzone.qq./362173487/infocenter" target="_blank" class="a3">空间</a> |<a href="user.qzone.qq./996723423/infocenter" target="_blank" class="a3">爱人</a> |<a href="/Product.asp" target="_blank" class="a3">案例</a></td><td width="44" align="right" class="fong_FFFFFF"> </td></tr><tr><td height="40" colspan="2" align="right" valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','515','height','35','src','Images/Top','quality','high','pluginspa ge','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tran sparent','movie','Images/Top' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="515" height="35"><param name="movie" value="Images/Top.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/Top.swf" width="515" height="35" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr><tr><td height="13" colspan="2" align="right" valign="bottom"></td></tr></table></td></tr><tr><td><img src="Images/in_02.jpg" width="1024" height="109" alt=""></td></tr><tr><td><img src="Images/in_03.jpg" width="1024" height="95" alt=""></td></tr><tr><td><img src="Images/in_04.jpg" width="1024" height="87" alt=""></td></tr></table><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="ShowTime.asp" class="a5"><img src="Images/in_05.jpg" alt="" width="257"<td><a href="MoodDiary.asp" class="a5"><img src="Images/in_06.jpg" alt="" width="339" height="57" border="0"></a></td></tr><tr><td align="right" valign="top"><table border="0" cellpadding="5" cellspacing="0"><tr><%set rs=server.CreateObject("ADODB.Recordset")rs.open "select top 4 * from jcl_photo where P_zx=1 and P_cla=13 order by id desc",conn,1,1 if not rs.eof theni=0do while not rs.eofi=i+1%><td align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><table width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#666600"> <tr><td bgcolor="#FFFFFF"><table border="0" cellpadding="0" cellspacing="0"> <tr><td><span class="unnamed2"><a href="showtimeDisp.asp?id=<%=rs("id")%>" target="_blank"><img src="upImgFile/<%=rs("p_url")%>" width="90" height="70" border="0" /></a></span></td></tr></table></td></tr></table></td><td valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','10','height','70','src','Images/YY2','quality','high','pluginspag e','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','trans parent','movie','Images/YY2' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"<param name="movie" value="Images/YY2.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/YY2.swf" width="10" height="70" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr><tr><td colspan="2" align="center"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','88','height','6','src','Images/yy','quality','high','pluginspage' ,'.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','Images/ yy' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="88" height="6"><param name="movie" value="Images/yy.swf"><param name="quality" value="high"><embed src="Images/yy.swf" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" width="88" height="6"></embed></object></noscript></td></tr></table></td><%if i mod 2 = 0 then%></tr><%end ifrs.movenextlooprs.closeset rs=nothing%></table></td><td align="right" valign="top"><table width="320" border="0" cellspacing="2" cellpadding="3"><%set rs=server.createobject("ADODB.Recordset")rs.open "select top 1 * from Record order by id desc",conn,1,1if not rs.eof thenid=rs("id")%><tr><td></td></tr><tr><td class="td04">∷<strong> <%=rs("P_date")%>  <%=rs("Title")%></strong>∷</td> </tr><tr><td class="fong_25"><%if len(rs("Content"))>180 thenresponse.write left(rs("Content"),180)&"..."elseresponse.write rs("Content")end if%></td></tr><%end if%></table></td></tr></table></td><td width="428" height="192" valign="top" background="Images/in_07.jpg" class="td_Bj"><table width="100%" border="0" cellspacing="0" cellpadding="0"><td height="150" align="right" valign="bottom"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','100','height','50','src','Images/Music_In','quality','high','plug inspage','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode', 'transparent','movie','Images/Music_In' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="100" height="50"><param name="movie" value="Images/Music_In.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="Images/Music_In.swf" width="100" height="50" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr></table></td></tr></table><table width="1024" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><img src="Images/in_10.jpg" width="1024" height="26" alt=""></td></tr><tr><td height="64" background="Images/in_12.jpg"></td></tr></table></body></html>2.Left导航代码<meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height="60"> </td></tr><tr><td align="center"><script type="text/javascript">AC_FL_RunContent( 'codebase','download.macromedia./pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0','width','150','height','310','src','Images/left','quality','high','plugins page','.adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','wmode','tr ansparent','movie','Images/left' ); //end AC code</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="150" height="310"><param name="movie" value="Images/left.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><embed src="Images/left.swf" width="150" height="310" quality="high" pluginspage=".adobe./shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" wmode="transparent"></embed></object></noscript></td></tr></table>3.底栏代码<meta http-equiv="Content-Type" content="text/html; charset=GB2313" /><link href="Css/css.css" rel="stylesheet" type="text/css"><link rel="shortcut icon" href="favicon.ico" ><script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="13%" align="center"></td><td width="87%" class="fong_FFFFFF">技术所有懿© CopyRight <a href="user.qzone.qq./362173487/infocenter"class="a1">user.qzone.qq./362173487/infocenter</a> All rights reserved<br />美工设计：<a href="user.qzone.qq./362173487/infocenter" target="_blank" class="a1">懿</a> 系统程序：懿遥阳科技<a href="/" target="_blank" class="a1"></a></td></tr></table>4.css代码一．css.cssBODY {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;SCROLLBAR-FACE-COLOR: #61A2AD;SCROLLBAR-HIGHLIGHT-COLOR: #61A2AD;SCROLLBAR-SHADOW-COLOR: #61A2AD;SCROLLBAR-3DLIGHT-COLOR: #61A2AD;SCROLLBAR-ARROW-COLOR: #fFFFFF;SCROLLBAR-TRACK-COLOR: #ffffff;SCROLLBAR-BASE-COLOR: #ffffff;font-size: 12px;color: #666666;text-decoration: none;background-color: #FFFFFF;background-image: url(../Images/bj.jpg);background-repeat: repeat-y;background-position: center;}}COLOR: #666666;TEXT-DECORATION: none }A:active {TEXT-DECORATION: none}A:hover {COLOR: #ff6600;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-size: 12px;}A:link {TEXT-DECORATION: none ;font-size: 12px;color: #666666}P {FONT-SIZE: 12px;LINE-HEIGHT: 16px}TD {FONT-SIZE: 12px;LINE-HEIGHT: 16px}DIV {FONT-SIZE: 12px;line-height: 16px;}a.a1:link {color: #FFFFFF;}color: #FFFFFF;}a.a1:hover {color: #CCCCCC;font-size: 12px;font-weight: normal; }a.a2:link {color: #ABE3EB;}a.a2:visited {color: #43C0D4;}a.a2:hover {COLOR: #FFFFFF;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-size: 14px;font-weight: bold;}a.a3:link {color: #000000;}a.a3:visited {color: #66666;}a.a3:hover {COLOR: #333333;LEFT: 1px;POSITION: relative;TEXT-DECORATION: none;TOP: 1px;font-weight: bold;}a.a4:link {]font-size: 14px;color: #717843;font-size: 14px;font-weight: bold;}a.a4:visited {font-size: 14px;color: #9FAA66;font-weight: bold;}a.a4:hover {COLOR: #B8C08D;LEFT: 1px;POSITION: relative;TEXT-DECORATION: underline;TOP: 1px;font-size: 14px;font-weight: bold;}a.a5:hover {LEFT: 0px;POSITION: relative;TOP: 0px;font-weight: bold;right: 0px;bottom: 0px;}.td_Bj {background-repeat: no-repeat;background-position: top;}color: #FFFFFF;text-decoration: none;}.fong_25 {line-height: 25px;}.td01_au {line-height: 25px;color: #664F00;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC; }.td02_XX_CCCCCC {border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;line-height: 25px;}.td03_xxX4 {line-height: 20px;font-weight: bold;color: #FFFFFF;letter-spacing: 2px;font-size: 14px;border: 1px dashed #CCCCCC; }.td03_xxX3 {border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: dashed;border-bottom-style: dashed;border-left-style: dashed;border-bottom-color: #CCCCCC;border-left-color: #CCCCCC;}.td03_xxX2L {border-bottom-width: 1px;border-left-width: 1px;border-bottom-style: dashed;border-left-style: dashed;border-bottom-color: #CCCCCC;border-left-color: #CCCCCC;}.td03_xxX {border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;}.td03_xxX2 {line-height: 25px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;}.td04 {color: #3C8445;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #CCCCCC;line-height: 25px;}.font_3C8445 {line-height: 25px;color: #3C8445;}.font_en {font-family: Arial, Helvetica, sans-serif;font-size: 10px;}二．Default.css/*Yes this layout was inspired by lightbox v2.0's page, the reason being, the layout works really well for a doc*/* {margin: 0;padding: 0;}body {padding: 0;margin: 0;background-color: #171B20;font-size: 12px;font-family: "Lucida Grande", Tahoma, sans-serif;}.page-body {margin: 0 auto 0 auto;width: 600px;padding: 30px 0 20px 0;text-align: left;}.page-footer {margin: 0 10% 0 315px;width: 600px;padding: 0 0 50px 0;text-align: left;}.page-body ul, .page-body ol { color: #ffffff;margin: 10px 0 30px 25px;}.page-body ul li,.page-body ol li {padding: 0;margin: 0 0 5px 0;color: #cccccc;line-height: 140%;font-size: 100%;}.page-footer p {margin: 0;}.page-footer {padding: 20px;}.page-title h1 span {text-align: left;font-weight: normal;font-size: 100%;color: #ffffff;margin: 5px 0 15px 0;}h1 {text-align: left;font-weight: normal;font-size:%;color: #96BF55;margin: 5px 0 15px 0;h1 span {clear: both;font-size: 60%;color: #FF9;}h2 {text-align: left;font-weight: normal;font-size: 150%;color: #09f;margin: 5px 0 15px 0;}h2 span {clear: both;font-size: 70%;color: #FF9;}h3 {clear: both;font-size: 120%;color: #FF9;font-weight: normal;margin: 0 0 10px 0;}.notice {border: 3px solid #ffffbe;padding: 10px;color: #ffffff;background-color: #09f;margin: 0 0 20px 0;.notice p,.notice p a,li a {color: #ffffff;text-decoration: none;}a.page-options {color: #000000;text-decoration: none;display: block;text-align: left;padding: 5px;background: #a9d06a;margin: 3px 0 0 0;border-bottom: 1px solid #333333;border-bottom: 1px solid #555555; }a.page-options:hover,a.page-options:focus {color: #fff;background: #09F;}p {margin: 0 0 20px 0;color: #cccccc;line-height: 140%;}p small,li small {color: #09F;font-size: 100%;p em,em {color: #ffffff;}.hidden {display : none;}三．Lightbox.css#lightbox{position: absolute;left: 0;width: 100%;z-index: 100;text-align: center;line-height: 0;}#lightbox a img{ border: none; }#outerImageContainer{position: relative;background-color: #fff;width: 250px;height: 250px;margin: 0 auto;}#imageContainer{padding: 10px;}#loading{top: 40%;left: 0%;height: 25%;width: 100%;text-align: center;line-height: 0;}#hoverNav{position: absolute;top: 0;left: 0;height: 100%;width: 100%;z-index: 10;}#imageContainer>#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{width: 49%;height: 100%;background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */display: block;}#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{font: 10px Verdana, Helvetica, sans-serif;background-color: #fff;line-height: 1.4em;}#imageData{ padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; }#imageData #caption{ font-weight: bold; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }#overlay{position: absolute;top: 0;left: 0;z-index: 90;width: 100%;height: 500px;background-color: #000;filter:alpha(opacity=60);-moz-opacity: 0.6;opacity: 0.6;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}/* Hides from IE-mac \*/* html .clearfix {height: 1%;}。