jQuery课程设计
课程设计报告
课程名称: jQuery基础教程
课程设计名称: jQuery个人空间
系部名称:中印计算机软件学院
姓名学号:周在峰201301070001
张敏20101070032
陈慧君201301070031班级:13应用一班
成绩:
指导教师:刘效伟
开课时间:2014-2015学年第二学期
摘要
近年来,随着网上个人空间的兴起,越来越多的人开始关注这项新的网络交流方式,越来越多的人开始拥有自己的个人空间就定义而言,Blog的全文名字是Web log,中文意思是“网络日志”,是一种通常由个人管理、不定期张贴新的文章的网站。一个典型的个人空间结合了文字、图像、其他个人空间或网站的链接、及其它与主题相关的媒体。利用个人空间,人们可以简便迅速的将自己的生活经历、感想、个人图片、所见所闻的事件等等向外界展示,并及时的与评论者进行交流互动。个人空间作为一种新的生活、学习、工作方式,已经被越来越多的人所接受,成为时下最流行的网络交流工具。
个人空间“网络日志”的本质决定了其固有的几种表现形式,如日志、相册、分享、留言互动区等等。同时,作为一种典型的个人网站,个人空间的各种表现方式也展现了博主个人的风格,更体现了个人空间个性化与多样化的特征。设计一个个人空间网站能充分运用到我们动态网页设计课程所学习的知识,在实现网站几个基本功能的前提下,学以致用,展现出自己独特的风格。
关键词: jQuery;个人空间;动态网站
目录
一、网站设计的流程 (1)
二、项目背景及发展趋势 (1)
2.1背景 (1)
2.2 发展趋势 (1)
三、项目需求 (2)
四、总体设计 (3)
4.1 设计目标 (3)
4.2设计风格、色彩搭配 (3)
4.3设计原则 (4)
五、网站概述 (5)
5.1网站主题结构 (5)
5.1.1 网站主要栏目说明 (5)
5.2 主要页面截图 (5)
六、总结 (10)
6、1 学习总结 (10)
6、2心得体会 (10)
七、参考文献 (10)
一、网站设计的流程
1.搜集资料:包括所用到的图片,文字等
2.处理图片:用PS等图片处理工具进行处理已达到网站设计的要
求,能够符合色彩搭配
3.设计logo
4.以自己的学号建立站点把图片等素材放在站点里
5.设计各个网页的整体布局(用div建立)
6.对各个页面进行设计
7.完成后检查各个页面的链接状况,以及各个页面的色彩搭配是否
合理,以及网站的整体效果是否符合网站标准
二、项目背景及发展趋势
2.1背景
在社会信息化的大背景下,对信息技术人才的需求也比较大,为了适应这个大背景,我需要做一个网站来提高自己的水平。
2.2 发展趋势
趋势一:个人空间现在正在形成个人的信誉机制,有了个人空间之后就确立了一个个人虚拟身份,简单的来讲就是个人在互联网上是有名有姓的,而不再是一种匿名的行为,网民从流浪汉变成了一个定居者。以前在互联网上的各种行为都是在匿名状态中,相互之间是不认识的,但有了个人空间之后可以天天关注,而别的人也可以通过个
人空间找到这个人。这样随着时间的积累就会产生一个新的东西,概括叫做“个人的信誉”,个人的信誉就是个人空间和个人空间之间发展各种关系的组合,这种信誉对每个人来讲可能是不同的,但对每个个人空间来讲就产生了新的评价机制,这个机制将是个人空间商业化的一个前提条件。
趋势二:个人空间越来越呈现出富媒体化,早期的个人空间是以文字为主,但随着多媒体发展个人空间相册、个人空间图片已经成为个人空间的基本配置,而现在许多个人空间网站已经提供了个人空间音频和个人空间视频。
趋势三:个人空间现在正在形成并完善精选机制,个人空间作为自媒体和个人媒体,产生的信息非常巨大。其中难免产生信息垃圾,随着个人空间的发展,个人空间通过精选机制精选出大家喜闻乐见的信息,像国个人个人空间的特点。
三、项目需求
作为一个网站学习者和软件学习者,应该有一个自己的网站,但是企业型网站对一个初学者来说无疑是一种挑战,应该循序渐进,先做一些个人网站,而个人个人空间则是最好的选择。
四、总体设计
4.1 设计目标
形象定位:
提高自己在网站上的知名度,美誉度,树立一个睿智、讲诚信的形象。
功能定位:
根据自己目前的情况和实际发展方向,应该把网站建设成高度互动的,内容丰富、新颖的多功能静态利于百度优化的网站。其主要功能有:展示自己在网站方面的心得和成绩,在线交流等。
设计定位:
采用简洁、大气、流畅的版面设计,使之富有现代时尚感;洋溢友情、温馨以服务为主导的理念,加之人性化设计来真情感染每一个浏览者;网站各版块清晰明确,彼此协调配合,突出大气形象。
4.2设计风格、色彩搭配
设计风格:网站采取垂直型的设计理念以符合不同人的浏览者的浏览方式
色彩搭配:网站主要以黄色为基调,在搭配蓝色等其他颜色。
4.3设计原则
经济性原则
建立适合新发现自身需求的网络平台,提供广泛的涵盖用户多种需求的功能,数据处理方式灵活以满足高度用户化的需求,节省网站建设成本,并确保其较好的拓展性和开放性;同时网站具有基于WEB 界面的管理后台,自己能够自主的对网站中大部分内容作更新、修改操作,节省了自己网站的运营成本,提高了信息更新、传播效率。
扩充性原则
网站的整体规划及框架设计是具可扩充性的,前台页面的设计能保证自己的网站在增加栏目后不会破坏网站的整体结构。后台数据库的设计具有高度的扩充性,自己能够根据需要对栏目、类别的增、删、修改。
易用性原则
网站功能模块的开发遵循以人为本的原则。在提供强大功能的同时,充分考虑网站维护人员操作习惯,对后台的操作进行了优化与整合,使网站后台管理易于上手。
五、网站概述
5.1网站主题结构
5.1.1 网站主要栏目说明
关于我:介绍了我的个人信息、日记、相册
娱乐:主要是我的音乐和动画 联系我:主要是给我留言
5.2 主要页面截图
首页
关于我:档案
日记
相册
娱乐:音乐
动画
联系我:留言
六、总结
6、1 学习总结
通过这学期的学习我对网页设计有了更深层次的认识,我学会了HTML语言常用标签的使用,对css+div的网站布局模式有了一定的了解,并能够使用它们进行简单的网页布局设计,对javascript 也有了一定的了解并能够使用其基础的知识与Html结合设计简单的交互效果,能够熟练地使用js库和jQuery库进行高级交互。
6、2心得体会
在学习网页设计的过程中,首先应该学会基础标签的使用,然
后加以实际操作,然后学习CSS+div的使用,学习过程中应该对网
站的整体布局加以了解,学习javascript的时候注重区别和其他语言的不同之处,在学习javascript的过程中可以学习ActionScript,一举两得。网站设计的学习不是一两天就能学会
的,应该坚持学习。
七、参考文献
[1] 张强等编著. 网页制作与开发教程.北京:人民邮电出版社,2008
[2] 何东健,朱俊平等编著. 网页设计与Web编程.西安:西安交通大学出版社,2007
[3] 张正礼,王坚宁https://www.360docs.net/doc/3316336953.html, 4.0从入门到精通.北京:清华大学出版社,2011
[4] 俞传正.基于个人空间的个人知识管理平台研究.天津:天津师范大学,2006
jQuery前端开发实战教程
《jQuery前端开发实战教程》试卷 得分 单选题(每题2分,共计30分) 1.页面中存在可见元素div,代码“if( $("div").show().is(:animated) ){ $("div").hide(1000); }” 的执行效果是() A、元素以动画效果隐藏 B、元素没有任何变化 C、元素无动画效果隐藏 D、元素先以动画效果隐藏,再无动画形式显示 2.关于代码“$.fn.test = function() { };”,下列说法错误的是() A、test方法可以被jQuery对象调用 B、test方法被jQuery对象调用时,this指向调用该方法的jQuery对象 C、在test方法中可以书写代码“return this”来实现链式编程 D、$.fn是jQuery原型对象jQuery.prototype的简写3.jQuery Mobile选择菜单中,当选择菜单中含有多个类别时,可添加()元素,让jQuery Mobile根据此元素中label属性的文本创建含有分割项的选项。 A、label B、optgroup C、select D、option 4.在使用tree组件时,dnd属性和lines属性设置为true分别代表()含义。 A、显示横线条显示竖线条 B、显示竖线条显示横线条 C、表示可拖动表示可拖拽 D、表示可拖动表示显示竖线条 5.下列哪种方法不可以让元素设置为不可见() A、fadeIn B、fadeOut C、fadeTo D、hide 总分题型单选题多选题填空题简答题题分 得分
6.在jQuery Mobile列表视图中,可以将任意大小的图片自动缩放到()像素,展示到列表中。 A、60 B、70 C、80 D、90 7.跟jQuery相继诞生的JavaScript库还有很多,不包括() A、Prototype B、ExtJS C、YUI D、node.js 8.下面选项中this的使用说法正确的是() A、this指向当前元素 B、this可以用来绑定事件 C、this可以获取到所有元素 D、this是一种方法9.使用animate方法实现与代码$("div").fadeIn(600)相同效果的代码写法是() A、$("div").animate({"opacity":"1"}) B、$("div").animate({"opacity":"1"},"fast") C、$("div").animate({"opacity":"1"},600) D、$("div").animate({"opacity":"1"},"normal") 10.从EasyUI网站下载到的“jquery-easyui-1.5.4.2.zip”压缩包解压,保存到“chapter08\ easyui-1.5.4.2”目录中下面说法错误的是() A、locale目录是国际化资源文件包 B、plugins是插件包目录 C、jsrc是源码包目录 D、demo和demo-mobile目录都是样例,没有区别 11.在jQuery事件中,当调整浏览器窗口时触发的事件是()事件。 A、resize() B、change() C、scroll() D、select()
jQuery入门教程(很不错)
jQuery入门[1]-构造函数 https://www.360docs.net/doc/3316336953.html,/archive/2008/03/05/1091816.html jQuery优点 ?体积小(v1.2.3 15kb) ?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器(IE6,FF,Safari,Opera) ?链式代码 ?强大的事件、样式支持 ?强大的AJAX功能 ?易于扩展,插件丰富 jQuery的构造函数接收四种类型的参数: jQuery(expression,context) jQuery(html) jQuery(elements) jQuery(fn) 第一种根据表达式(ID,DOM元素名,CSS表达式,XPath表达式)找出文档中的元素,并组装成一个jQuery对象返回。 DEMO: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/3316336953.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">