还剩7页未读,继续阅读
文本内容:
Web基础实训报告目录TOC\o1-3\u
一、实训简介2
二、实训内容
31、HTML
32、CSS
33、J__aScript
34、jQuery
45、jQueryeasyUI
46、jQueryeasyUI的基本插件4
(1)基本插件4
(2)布局管理器6
(3)菜单和按钮7
(4)表单7
(5)窗口7
(6)数据表格和树形菜单8
三、实训过程
81、实训8
(1)内容8
(2)目的
82、实践8
(1)制定__主题8
(2)__简介9
(3)收集素材9
(4)__规划9
(5)__制作9
(6)__测试
93、编写文档9
四、实训总结9
一、实训简介Web本意是蜘蛛网和网的意思在这个遍布网络的世界里,Web网络成为不可或缺并且极其重要的一部分Web功能强大,其内容包括存储在世界各地Internet计算机中的大量文档的__Internet将海量的信息以某种关联的文档形式组织在一起,每一个文档将会以主页的形式展现,这些主页是一种超文本信息,通过超链接进行连接Web标准并不是一个单一的标准,而是一个系列的标准的__Web标准中具有代表性的几种语言有XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、J__aScript脚本程序设计语言等本次实训主要是学习jQurey,它是一个优秀的J__aScript框架,是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE
6.0+FF
1.5+Safari
2.0+Opera
9.0+)jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为__提供AJAX交互本次实训的目的是通过对J__aScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML基础上,使用J__aScript__交互式动态Web网页能够熟练使用J__aScript语言和jQurey对网页界面实现动画效果,让网页能够动态显示,美观大方
二、实训内容
1、HTMLHTML是超文本标记语言,互联网传输的标准语言HTML具有很大的兼容性,例如li并不一定要用/li来对其进行关闭,因此使用起来比较方便
2、CSSCSS是层叠样式表的简称为了弥补HTML在显示属性上的不足,W3C协会制定了这一套扩展样式标准CSS标准中重新定义了HTML中原来的文字显示样式,并增加了新的概念,例如类、层等,还可以对文字进行重叠、定位等操作它提供了更为丰富多彩的样式;同时CSS可集中进行样式管理另外,CSS允许将样式定义单独存储于样式文件中,这样就可以进行样式管理,不仅便于样式管理,还可以在多个HTML文件共享样式定义一个HTML文件允许引用多个不同的CSS样式文件中的样式定义在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
3、J__aScript在HTML基础上,使用J__aScript可以__交互式动态Web网页
4、jQueryjQuery是一个优秀的J__ascript框架它是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE
6.0+FF
1.5+Safari
2.0+Opera
9.0+)jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为__提供AJAX交互jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可
5、jQueryeasyUIeasyui是一个基于jquery的集成了各种用户界面的插件使用easyui不需要写太多j__ascript代码,一般情况下只需要使用一些html标记来定义用户接口easyui非常简单,但是功能非常强大
6、jQueryeasyUI的基本插件
(1)基本插件简单载入器-easyloader使用方法
1.easyloader.base = ../; // set the easyui base directory
2.easyloader.loadmessager function{ // load the specified module
3. $.messager.alertTitle load ok;
4.}; 一般拖动-draggable使用方法
1.div id=dd class=easyui-draggable data-options=handle:#title style=width:100px;height:100px;
2.脚本语言
1.$#dd.draggable{
2. handle:#title
3.}; 拖动至容器-droppable使用方法
1.div id=dd class=easyui-droppable data-options=ac__pt:#d1#d3 style=width:100px;height:100px;/div 脚本语言
1.$#dd.droppable{
2. ac__pt:#d1#d3
3.}; 缩放-resizable使用方法
1.div id=rr class=easyui-resizable data-options=__xWidth:800__xHeight:600 style=width:100px;height:100px;border:1px solid #ccc;/div 脚本语言
1.$#rr.resizable{
2. __xWidth:800
3. __xHeight:600
4.}; 分页-pagination使用方法
1.div id=pp class=easyui-pagination data-options=total:2000pageSize:10 style=background:#efefef;border:1px solid #ccc;/div 脚本语言
1.$#pp.pagination{
2. total:2000
3. pageSize:10
4.}; 搜索框-searchbox使用方法
1.input id=ss class=easyui-searchbox style=width:300px
2. data-options=searcher:__prompt:Please Input Valuemenu:#mm/input
3. 脚本语言
4.script type=text/j__ascript
5. function __valuename{
6. alertvalue+:+name
7. }
8./script 进度条-progres__ar使用方法
1.div id=p class=easyui-progres__ar data-options=value:60 style=width:400px;/div 脚本语言
1.$#p.progres__ar{
2. value: 60
3.};
(2)布局管理器控制面板-panel选项卡-tabs可伸缩面板-accordion布局面板-layout
(3)菜单和按钮菜单-menu链接按钮-linkbutton菜单按钮-menubutton分隔按钮-splitbutton
(4)表单表单-form表单验证-validatebox自定义组合框-combo可装载组合框-combobox组合树-combotree组合表格-combogrid数字验证框-numberbox日期组合框-datebox日期时间组合框-datetimebox日历-calendar调节器-spinner数字调节器-numberspinner时间调节器-timespinner
(5)窗口窗口-window对话窗口-dialog消息窗口-messager
(6)数据表格和树形菜单数据表格-datagrid属性表格-propertygrid树形菜单-tree树形表格-treegrid
三、实训过程
1、实训老师给我们讲解了本次实训的主要内容和实训目的
(1)内容学习jQurey,它是一个优秀的J__aScript框架,是轻量级的js库,它兼容CSS3,还兼容各种浏览器(IE
6.0+FF
1.5+Safari
2.0+Opera
9.0+)jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为__提供AJAX交互
(2)目的通过对J__aScript的学习,学会使用HTML标记语言,通过CSS对页面的布局,在HTML基础上,使用J__aScript__交互式动态Web网页
2、实践每个人自己设计一个动态__,使用HTML编写网页、CSS布局、jQurey实现动态效果
(1)制定__主题__主题——健康生活品质享受主要是以绿色环保,时尚品质为主题,倡导人们健康生活
(2)__简介在本__中,可以浏览到各种精品家居用品、绿色食品、健康养生、低碳环保等内容在该__中,可以注册成为我们的会员,享受精品家居、绿色食品__;可以浏览健康养生内容,上传养生心得;学习低碳生活,绿色环保等
(3)收集素材在网上收集了有关绿色环保,品质家居等相关的文字、__、动画等素材
(4)__规划本__是由一个主页和多个子网页组成主页和子页都采用CSS布局,主页和子页中设有超链接,可以在各个网页中自由切换
(5)__制作使用Dreamwe__er8和__cromediaFireworks8进行__制作和__修改
(6)__测试将制作好的__运行在浏览器上,检查预期功能是否实现
3、编写文档对实训过程编写《实训报告》对设计的__编写《__设计报告》
四、实训总结通过这次网页课程设计激发学习兴趣,调动学习的自觉性,自己动脑、动手,动口,运用网络资源,结合教材及老师的指导,通过自身的实践,创作出积聚个人风格、个性的网页总体来说,整个网页制作的过程,我学会了很多知识,在设计网页的这几天里,我充分利用了这次设计的机会,全心全意投入到网页世界,去不断的学习,去不断的探索;同时去不断的充实,去不断的完善自我,在网络的天空下逐渐的美化自己的人生!做好页面,并不是一件容易的事,它包括主页的选题、内容采集整理、__的处理、页面的排版设置、背景及其整套网页的色调等很多东西本次课程设计不是很好,页面过于简单,创新意识反面薄弱,这是我需要提高的地方需要学的地方还有很多,需要有耐心、坚持,不断的学习,综合运用多种知识,才能设计出好的web页面总体来说,通过这次的对网页课程设计,有收获也有遗憾、不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。