基于AJAX技术和CodeIgniter框架下的网页设计

1、本科学生毕业论文（设计）题目(中 文):基于AJAX技术和CodeIgniter框架下的网页设计(英 文):Webpage design and AJAX technology based on CodeIgniter framework姓 名 6院 （系）电子工程系专业、年级电子信息工程 指导教师 湖南科技学院本科毕业论文（设计）诚信声明本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明

2、确方式标明。本人完全意识到本声明的法律结果由本人承担。 本科毕业论文（设计）作者签名：年 月 日 毕业论文（设计）任务书课题名称：基于AJAX技术和CodeIgniter框架下的网页设计学生姓名： 系 别：电子工程系专 业：电子信息工程指导教师： 1、主题词、关键词： CodeIgniter、框架、网页设计、AJAX 1、主题词、关键词： CodeIgniter、框架、网页设计、AJAX 2、毕业论文（设计）内容要求： 为了使用CodeIgniter框架设计一个基础的网页框架并且使用AJAX技术实现局部刷新，程序制作步骤大致如下：（1） 介绍MVC模式和CodeIgniter框架；（2） AJ

3、AX技术简介和Jquery框架的介绍；（3） Web技术的基础介绍html、css、javascript、php；（4） 对数据库的操作；（5） 在CodeIgniter框架下开发程序；（6） 制作出的基本网页结构展示；3、文献查阅指引：1 CodeIgniter开源中国社区.2 姜力,高群.SQL Server数据库设计与管理M.北京:中国林业出版社，2006.3 王珊,陈红.数据库系统原理教程M.北京:清华大学出版社，2008.4 陆振光,常晋义.电子商务M.中国电子出版社.5 钟丽云. CSS框架技术在WEB开发中的应用J. 信息与电脑(理论版). 2010(06).6 冀建刚. 基于A

4、jax与SVG的构造地质学课程网站开发D. 电子科技大学 2010.7 徐金云. 网页设计中的常见问题及解决办法J. 青岛科技大学学报(自然科学版). 2003(S1).8 郑俊生,姜敏. 一种基于Div+CSS+JavaScript的网页布局特效研究J. 电脑知识与技术. 2008(17).9 杨芳菊. DIV+CSS布局可视化尝试J. 电脑知识与技术. 2008(26).10 (美)马斯洛(AbrahamH.Maslom)著,成明编译.马斯洛人本哲学M. 九州出版社, 2003.11 Yi-xiong Feng,Bing Zheng,Jian-rong Tan. Exploratory s

5、tudy of logistics service quality scale based on online shopping mallsJ ,2007.12 Jon R Prescott.Using Structured Methodology for Software Necessity. J SystemManagement . 2003.13 WILLIAMSTALLINGS.Cryptography and Network Security:Principles andPractice. . 1998.14 John Gosney,StacyL. Hiquet.Asp Progra

6、mming for the Absolute Beginner. 2001.4、毕业论文（设计）进度安排：（1） 第7学期的寒假，查文献，熟悉和web相关语言的使用；（2） 第8学期的第1周，查文献熟悉MVC模式；（3） 第23周，掌握html标记语言；（4） 第4周，掌握css对网页的设计以及对数据库的操作；（5） 第5周，掌握javascript语言以及codeigniter框架；（6） 第6周，初步完成基础的网页框架，写论文；（7） 第7周，初步完成程序，迎接中期检查，填写中期检查表，进一步补充毕业论文内容；（8） 第8周，进行程序结果的测试，修改程序并进一步完善毕业论文内容；（9） 第

7、9周，完成毕业论文初稿； (10) 第10周，定稿，填写相关表格； （10） (11) 第11周，毕业论文装订，准备答辩；教研室意见： 负责人签名： 注：本任务书一式三份，由指导教师填写，经教研室审批后一份下达给学生，一份交指导教师，一份留系里存档。湖南科技学院本科毕业论文（设计）开题报告书论文（设计）题目基于AJAX技术和CodeIgniter框架下的网页设计作 者 姓 名李棕仁所属系、专业、年级 电子工程系 电子信息工程 专业 2009 年级指导教师姓名、职称陈爱武 讲师预计字数10000开题日期2012-12-26选题的根据：1）说明本选题的理论、实际意义 2）综述国内外有关本选题的研究

8、动态和自己的见解1）本选题的理论、实际意义选择本课题的意义在于使用框架来开发网页，利用框架的特性，对目标产品的质量及开发效率的提高，有很大的优势。通过codeigniter框架来设计网页，不仅提高效率，还可以让网页的扩展更容易。避免一大堆的自定义模块。 2）国内外有关本选题的研究动态和自己的见解 使用CodeIgniter框架来开发网页，很多的大型网站都在使用。在开源社区很多的新功能都在不断的开发，它提供一套丰富的标准以及简单的接口和逻辑结构。使用CodeIgniter可以减少代码的编写量，并将你的精力投入到项目的创造性开发上。主要内容：绪论1 介绍MVC模式和CodeIgniter框架。2

9、AJAX技术简介和Jquery框架的介绍。3 web技术的基础介绍html、css、javascript。4 在CodeIgniter框架下开发程序并实现一些功能。 4.1 基本页面的设计 4.2 用户登陆设计 4.3 邮件发送 4.4 图片结论研究方法：1、 学习web相关知识。2、 理解MVC模式。3、 学会使用CodeIgniter框架。4、 查阅国内外最新资料，开拓视野，对已有的成果加以分析利用。虚心向导师和同学学习，不断积累知识，再运用所学知识，完成论文。完成期限和采取的主要措施： 1、完成期限：2013.1.1-2013.5.8(1)第7学期的寒假，查文献，熟悉和web相关语言的使

10、用；(2)第8学期的第1周，查文献熟悉MVC模式；(3)第23周，掌握html标记语言；(4)第4周，掌握css对网页的设计以及对数据库的操作；(4)第5周，掌握javascript语言以及codeigniter框架；(5)第6周，初步完成基础的网页框架，写论文。(6)第7周，初步完成程序，迎接中期检查，填写中期检查表，进一步补充毕业论文内容。(7)第8周进行程序结果的测试，修改程序并进一步完善毕业论文内容；(8)第9周完成毕业论文初稿；(9)第10周定稿，填写相关表格；(10)第11周毕业论文装订，准备答辩。2、采取的主要措施：(1)密切联系本组设计成员及毕业设计指导导师，寻求有关毕业设计信

11、息，确定设计课题方向与设计内容；(2)充分利用图书馆和网络查阅相关资料，广泛获取必要的知识，了解最新研究动态。(3)虚心向老师请教和同学进行学习交流，保障毕业设计的顺利完成。主要参考资料：1 CodeIgniter开源中国社区.2 姜力,高群.SQL Server数据库设计与管理M.北京:中国林业出版社，2006.3 王珊,陈红.数据库系统原理教程M.北京:清华大学出版社，2008.4 陆振光,常晋义.电子商务M.中国电子出版社.5 钟丽云. CSS框架技术在WEB开发中的应用J. 信息与电脑(理论版). 2010(06).6 冀建刚. 基于Ajax与SVG的构造地质学课程网站开发D. 电子科

12、技大学 2010.7 徐金云. 网页设计中的常见问题及解决办法J. 青岛科技大学学报(自然科学版). 2003(S1).8 郑俊生,姜敏. 一种基于Div+CSS+JavaScript的网页布局特效研究J. 电脑知识与技术. 2008(17).9 杨芳菊. DIV+CSS布局可视化尝试J. 电脑知识与技术. 2008(26).10 (美)马斯洛(AbrahamH.Maslom)著,成明编译.马斯洛人本哲学M. 九州出版社, 2003.11 Yi-xiong Feng,Bing Zheng,Jian-rong Tan. Exploratory study of logistics service

13、 quality scale based on online shopping mallsJ ,2007.12 Jon R Prescott.Using Structured Methodology for Software Necessity. J SystemManagement . 2003.13 WILLIAMSTALLINGS.Cryptography and Network Security:Principles andPractice. . 1998.14 John Gosney,StacyL. Hiquet.Asp Programming for the Absolute Be

14、ginner. 2001.指导教师意见：指导教师签名： 教研室意见：签 名： 年 月 日开 题 报 告 会 纪 要时间 2012年12月26日地点三教517与会人员姓 名职务（职称）姓 名职务（职称）姓 名职务（职称）包本刚副教授宫彦军教授贾竹君副教授何红松讲师陈爱武讲师游珍珍讲师会议记录摘要：1 为什么要用AJAX技术？ (陈爱武老师)Ajax即异步传输，可以在不完全刷新页面的情况下，动态的修改页面上的内容，是一种用于创建更好的更快交互性更强web应用程序的技术。主要是为了改善web应用的用户体验而产生的新技术,避免用户在页面上不停的提交和刷新.而大多数的刷新是没有必要的. 2动态图片是怎样

15、加载的？（游珍珍老师）答：图片有一种gif类型的图片，它实际上是一个图片，分多个帧页，实现连贯动作如果是这种效果 的话，就可以。如果想实现根据不同的时间显示不同的图片，不是同一个图片的话，需要用到脚本，单纯的通过html是不可能实现的。3程序是如何实现登陆功能的？（何红松老师）答：当用户输入用户名和密码的时候，点击登陆的时候。程序会执行一个函数，这个函数实现的功能是从数据库里面读取数据和输入的数据进行匹配，如果匹配了则登陆成功。会议主持人：记 录 人：年 月 日指导小组意见负责人签名： 年 月 日系部 意 见负责人签名：年月日注：此表由学生本人填写，一式三份，一份留系里存档，指导老师和本人各保

16、存一份湖南科技学院毕业论文（设计）中期检查表毕业论文（设计）题 目基于AJAX技术和CodeIgniter框架下的网页设计学生姓名李棕仁学 号6系 别电子工程系专 业电子信息工程指导教师陈爱武检查日期2013.4.7指导教师检查情况记载及修改意见：已经完成的工作：1、网页相关的技术和相关的知识已经掌握；2、已经使用框架做出网页的基本架构；3、完成了从数据库读取数据；4、论文大部分内容已经完成； 下一步的工作：1、 完善网页的设计；2、 进行调试，对于用户的申请和邮件的发送是否成功。3、同时继续论文的写作工作，找出错误，完善论文；签名： 注：此表用于指导教师在学生毕业论文（设计）初稿完成后对学生

17、执行任务书情况进行中期检查时用，由指导教师填写。湖南科技学院毕业设计（论文）指导过程记录表毕业论文(设计)题目基于AJAX技术和CodeIgniter框架下的网页设计学生姓名李棕仁学号6专业班级电信0903指导教师陈爱武职称讲师系（教研室）电子工程系（电子科学与技术教研室）指导过程记录指导内容记录(一)CodeIgniter框架的介绍以及相关的准备工作。学 生 签 名： 2011 年 1月10 日 指导教师签名： 2011 年 1月10 日指导内容记录(二)AJAX技术的指导。学 生 签 名： 2011 年 3月 2 日 指导教师签名： 2011 年 3月 2 日指导内容记录（三)讲解网页的框

18、架以及要求。学 生 签 名： 2011年3 月 15 日 指导教师签名： 2011年3 月 15 日指导内容记录(四)讲解如何从数据库中读取数据的操作。学 生 签 名： 2011年 4 月 1 日 指导教师签名： 2011年 4 月 1 日指导过程记录指导内容记录(五)初步开始论文文字部分（原理）的写作，讨论论文的细节问题。学 生 签 名： 2011年4 月 10日 指导教师签名： 2011年4 月 10日指导内容记录(六)修改程序的一些bug，调优程序。学 生 签 名： 2011年 4 月 20 日 指导教师签名： 2011年 4 月 20 日指导内容记录(七)修改css，让界面看起来更加清

19、爽。学 生 签 名： 2011年 4 月 30 日 指导教师签名： 2011年 4 月 30 日指导内容记录(八)论文初步定稿。学 生 签 名： 2011 年 5 月 6 日 指导教师签名： 2011 年5 月 6 日答辩小组组长意见(对情况是否属实做出意见)组长(签名)： 年 月 日注：本表与毕业论文一起装订存档。湖南科技学院本科毕业论文（设计）评审表论文题目基于AJAX技术和CodeIgniter框架下的网页设计作者姓名李棕仁所属系、专业、年级电子工程系 电子信息工程 专业 2009年级指导教师姓名、职称陈爱武 讲师字 数10000定稿日期2013.5.8中 文 摘 要本文中的AJAX技术

20、，它是指在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。本文研究的是基于CodeIgniter框架的网页设计，它是基于MVC模式的。它强制性的使应用程序的输入、处理和输出分开，并将程序分为三个核心部件：视图、模型、控制器。视图是用户看到并与之交互的界面。控制器接受用户的请求并调用模型和视图去完成用户的需求。模型是数据和业务规则，负责数据的处理和为视图提供数据。利用php编程完成网页的设计，搭建了一个网页的框架，体现了静态网页和动态网页并且提供了多个视图允许加载你想要加载的内容。从给出的结果可以看出，本文使用CodeIgniter框架设计网页体现了良好的逻辑结构，减少了代码的编

21、写量，极大地提高了开发效率。关键词网页设计、框架、CodeIgniter、AJAX英文摘要In this paper, AJAX technology refers to the exchange of data and updata the part of webpage art and server without reloading the whole page. This study is the webpage design based on CodeIgniter framework，It is based on MVC mode.It is mandatory to make a

22、pplication input, processing and output separately，The program consists of three core components: model, view, controller。The view is users see and interact with the interface.The controller accepts the user request and calls the model and the view to accomplish the users requirement。Model is the da

23、ta and business rules, responsible for data processing and provid data for the view. Completed the design of webpage programming using PHP, to build a framework of webpage, embodies the static webpage and dynamic webpage and provides multiple views allows loading you want to load content. From the r

24、esults presented can be seen, in this paper, using the CodeIgniter framework design of webpage reflected a good logical structure, reduce the amount of code written, greatly improves the efficiency of development.关键词Web Page Design、Framework、CodeIgniter、AJAX指导教师评定成绩评审基元评审要素评审内涵满分指导教师实评分选题质量25%目的明确符合

25、要求选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。10理论意义或实际价值符合本学科的理论发展，有一定的学术意义；对经济建设和社会发展的应用性研究中的某个理论或方法问题进行研究，具有一定的实际价值。10选题恰当题目规模适当，难易度适中；有一定的科学性。5能力水平40%查阅文献资料能力能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。10综合运用知识能力能运用所学专业知识阐述问题；能对查阅的资料进行整理和运用；能对其科学论点进行论证。10研究方案的设计能力整体思路清晰；研究方案合理可行。5研究方法和手段的运用能力能运用本学科常规研

26、究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。10外文应用能力能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。5论文质量35%文题相符较好地完成论文选题的目的要求。5写作水平论点鲜明；论据充分；条理清晰；语言流畅。15写作规范符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。10论文篇幅10000字左右。5实评总分 成绩等级 指导教师评审意见：指导教师签名： 说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90100分记为优秀，8089分记为良好，7079

27、分记为中等，6069分记为及格，60分以下记为不及格评阅教师评定成绩评审基元评审要素评审内涵满分评阅教师实评分选题质量25%目的明确符合要求选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。10理论意义或实际价值符合本学科的理论发展，有一定的学术意义；对经济建设和社会发展的应用性研究中的某个理论或方法问题进行研究，具有一定的实际价值。10选题恰当题目规模适当，难易度适中；有一定的科学性。5能力水平40%查阅文献资料能力能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。10综合运用知识能力能运用所学专业知识阐述问题；能对查阅的资料进

28、行整理和运用；能对其科学论点进行论证。10研究方案的设计能力整体思路清晰；研究方案合理可行。5研究方法和手段的运用能力能运用本学科常规研究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。10外文应用能力能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。5论文质量35%文题相符较好地完成论文选题的目的要求。5写作水平论点鲜明；论据充分；条理清晰；语言流畅。15写作规范符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。10论文篇幅10000字左右。5实评总分 成绩等级 评阅教师评审意

29、见： 评阅教师签名： 说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90100分记为优秀，8089分记为良好，7079分记为中等，6069分记为及格，60分以下记为不及格。湖南科技学院本科毕业论文（设计）答辩记录表论文题目基于AJAX技术和CodeIgniter框架下的网页设计作者姓名李棕仁所属系、专业、年级电子工程系 电子信息工程专业 2009年级指导教师姓名、职称陈爱武 讲师答 辩 会 纪 要时间2013年5月18日地点三教517答辩小组成员姓 名职务（职称）姓 名职务（职称）姓 名职务（职称）包本刚副教授宫彦军教授贾竹君副教授何红松讲师陈爱武讲师游珍珍讲师答辩中提出的

30、主要问题及回答的简要情况记录：1.论文题目描述有问题需要修正？答：原来的论文题目为“CodeIgniter框架下的网页设计及AJAX技术”，现在修正为“基于AJAX技术和CodeIgniter框架下的网页设计”。2.为什么要用CodeIgniter框架来设计网页？答：CodeIgniter框架小巧精悍且使用时配置简单，可扩展性好。且能生成非常 干净的URL。3.网页设计主要以什么编程语言编写代码的？ 答：在我的这个网页中，主要以php语言来编写代码的，其中还有javascript、html、css等网页设计最基本的语言。会议主持人：记 录 人：年 月 日答辩小组意见评语：评定等级： 负责人（签

31、名）： 年 月 日系学位委员会意见评语：论文（设计）最终评定等级：负责人（签名）： 系部（公章） 年月 日校学位委员会意见评语：评定等级： 负责人（签名）： 年月 日目录绪 论11 Web技术的基础31.1 HTML简介31.1.1 什么是HTML?31.1.2 HTML标签31.2 CSS简介41.3 JavaScript简介51.4 PHP简介72 AJAX和Jquery92.1 AJAX技术简介和Jquery框架的介绍92.1.1 什么是 AJAX ？92.1.2 关于 jQuery 与 AJAX92.2 AJAX的实现93 CodeIgniter113.1 MVC模式的介绍113.2

32、CodeIgniter简介123.3 CodeIgniter框架下的MVC的实现方式163.4 设计和架构目标173.5 CodeIgniter框架下的数据传递方式174 CodeIgniter框架下的程序开发194.1 数据库的操作194.1.1 数据库的配194.1.2 连接数据库234.1.3 查询264.1.4 生成查询结果294.2 表单验证334.2.1 概述334.2.2 表单344.2.3 设置表单验证规则374.2.4 设置错误信息404.3 发送邮件414.3.1 设置 Email 参数424.3.2 在配置文件中设置email参数46可扩展性介绍47结论48致谢48参考文

33、献49基于AJAX技术和CodeIgniter框架下的网页设计摘 要本文中的AJAX技术，它是指在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。本文研究的是基于CodeIgniter框架的网页设计，它是基于MVC模式的。它强制性的使应用程序的输入、处理和输出分开，并将程序分为三个核心部件：视图、模型、控制器。视图是用户看到并与之交互的界面。控制器接受用户的请求并调用模型和视图去完成用户的需求。模型是数据和业务规则，负责数据的处理和为视图提供数据。利用php编程完成网页的设计，搭建了一个网页的框架，体现了静态网页和动态网页并且提供了多个视图允许加载你想要加载的内容。从给出的结果

34、可以看出，本文使用CodeIgniter框架设计网页体现了良好的逻辑结构，减少了代码的编写量，极大地提高了开发效率。【关键词】：网页设计、框架、CodeIgniter、AJAXWebpage design and AJAX technology based on CodeIgniter frameworkAbstractIn this paper, AJAX technology refers to the exchange of data and updata the part of webpage art and server without reloading the whole pag

35、e. This study is the webpage design based on CodeIgniter framework，It is based on MVC mode.It is mandatory to make application input, processing and output separately，The program consists of three core components: model, view, controller。The view is users see and interact with the interface.The cont

36、roller accepts the user request and calls the model and the view to accomplish the users requirement。Model is the data and business rules, responsible for data processing and provide data for the view. Completed the design of webpage programming using PHP, to build a framework of webpage, embodies t

37、he static webpage and dynamic webpage and provides multiple views allows loading you want to load content. From the results presented can be seen, in this paper, using the CodeIgniter framework design of webpage reflected a good logical structure, reduce the amount of code written, greatly improves

38、the efficiency of development.【Key words】: Web Page Design、Framework、CodeIgniter、AJAX插图索引MVC三层架构11CodeIgnite应用程序流程图16登陆界面41网页的整体框架47绪 论今天，万维网（环球信息网world wide web）使得全世界的人们以史无前例的巨大规模相互交流。相距遥远的人们，甚至是不同年代的人们可以通过网络来发展亲密的关系或者使彼此思想境界得到升华，甚至改变他们对待小事的态度以及精神。那么他们是怎么相互交流的呢？那就是通过网站上面的网页来获取信息的。网页是网站的基本信息单位，是WWW的

39、基本文档。它由文字、图片、动画、声音等多种媒体信息以及链接组成，是用HTML编写的，通过链接实现与其他网页或网站的关联和跳转。 情感经历、政治观点、文化习惯、表达方式、商业建议、艺术、摄影、文学都可以在网页上面表达出来。网页是一个文件，他存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，是万维网中的一“页”，是超文本标记语言（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页要透过网页浏览器来阅读。为了将丰富的意义和多样的形式组织成统一的页面结构，必须符合页面的内容，体现内容的丰富含义。这就需要网页设计将网页里面的内容很

40、好的表达出来，让点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，充分表达完美的设计意境。网页设计网站是企业向用户和网民提供信息（包括产品和服务）的一种方式，是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处。通过文字图形的空间组合，表达出和谐与美。多页面站点页面的编排设计要求把页面之间的有机

41、联系反映出来，特别要求处理好页面之间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，我们将反复推敲整体布局的合理性，使浏览者有一个流畅的视觉体验。在网页设计中，我们的设计根据和谐、均衡和重点突出的原则，将不同的色彩进行组合搭配来构成美丽的页面。 根据色彩对人们心理的影响，合理地加以运用。为了将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在页面设计中， 它的均衡有时会使页面显得呆板，但如果加入一些富有动感

42、的文字、图案，或采用夸张的手法来表现内容往往会达到更好的效果。在网页设计中，总是有倾向的特定技术来观察，或跟踪的网页设计师加强的趋势。这里有专有和开源和免费的技术专用的支持者。然而，近年来，又增加自由和开放源码技术，包括由W3C和WHATWG进行监控和批准，监督和实施增加。可以让网页设计者可以设计出更好的网页。但是在现在的互联网环境中，存在这大量的垃圾网站，这些网站的页面设计不便于使用，导向不清晰，存在大量的垃圾图片影响网页的访问速度。因此本文设计的网站是简洁，清爽，主题鲜明，板式设计合理对色彩形式以及内容都有较好的体现。本文设计的是一个网站的框架，网页的内容可能不全面，但是我都留有接口方便日

43、后的升级和更新。最终我是选用CodeIgniter框架和PHP语言来实现网页设计的。1 Web技术的基础1.1 HTML简介1.1.1 什么是HTML?HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签(markup tag) HTML 使用标记标签来描述网页 1.1.2 HTML标签HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成

44、对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为开放标签和闭合标签 HTML文档=网页HTML 文档描述网页HTML 文档包含HTML标签和纯文本 HTML 文档也被称为网页Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：My First HeadingMy first paragraph.例子解释： 与 之间的文本描述网页 与 之间的文本是可见的页面内容 与 之间的文本被显示为标题 与 之间的文本被显示为段落1.2 CSS简介级联样式表（Cascading St

45、yle Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。有三种方法可以在站点网页上使用样式表：外部样式：将网页链接到外部样式表。内页样式：在网页上创建嵌入的样式表。行内样式：应用内嵌样式到各个网页元素。每一种方法均有其优缺点：当要在站点上所有或部分网页上一致地应用相同样式时

46、，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表中修改一次，而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。然后在需要此样式的页面中将其链接进来，如：当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。 如：使用内嵌样式以应用级联样式表属性到网页元素上。 如：CSS document如果网页链接到外部样式表，为网页所创建的内嵌的

47、或嵌入式样式将扩充或覆盖外部样式表中的指定属性。要在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。可以链接一个或数个样式表到网页视图模式下的当前网页，或到在文件夹列表中的所选网页，或到站点上的全部网页。该“样式” 框列出标准 HTML 标记符，例如标题1，还有嵌入的样式表或链接到网页的外部样式表中所含的类或 ID 选择器。要应用样式到网页元素，请选定该样式然后单击 “样式” 框中的样式或选择器。在 Microsoft FrontPage 2000 中，某些格式设置特性会作为内嵌样式自动应用。例如如果使用 “边框与阴影” 命令（在

48、“格式” 菜单上）在普通段落周围应用框，FrontPage 会写下格式设置信息，作为段落标记符的内嵌样式属性（例如 ）。然而某些属性的应用需要使用 CSS，其他则需要使用 HTML 。如果人们只想使用 CSS 应用内嵌样式，可使用 “样式” 按钮（位于网页元素的 “属性” 对话框里）应用类或 ID 选择器或嵌入式样式。1.3 JavaScript简介JavaScript是世界上最流行的编程语言。这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。JavaScript 很容易学习。Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。JavaScript程序是由若干语句