Web基础实训报告

1、Web基础实训报告目录一、实训简介2二、实训内容31、HTML32、CSS33、JavaScript34、jQuery45、jQuery easyUI46、jQuery easyUI的基本插件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功

2、能强大，其内容包括存储在世界各地Internet计算机中的大量文档的集合。Internet将海量的信息以某种关联的文档形式组织在一起，每一个文档将会以主页的形式展现，这些主页是一种超文本信息，通过超链接进行连接。Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。本次实训主要是学习jQurey，它是一个优秀的JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, S

3、afari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。本次实训的目的是通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript开发交互式动态Web网页。能够熟练使用JavaScript语言和jQurey对网页界面实现动画效果，让网页能够动态显示，美观大方。二、实训内容1、HTMLHTML是超文本标记语言，互联网传输的标准语言。HTML具有很大的兼容性，例如并不一定要用来对其进行关闭，因此使用起来比较方便。2、

4、CSSCSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足，W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了新的概念，例如类、层等，还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式；同时CSS可集中进行样式管理。另外，CSS允许将样式定义单独存储于样式文件中，这样就可以进行样式管理，不仅便于样式管理，还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制3、JavaScript在HTML

5、基础上，使用JavaScript可以开发交互式动态Web网页4、jQueryjQuery是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面

6、插入一堆js来调用命令了，只需定义id即可5、jQuery easyUIeasyui是一个基于jquery的集成了各种用户界面的插件。 使用easyui不需要写太多javascript代码，一般情况下只需要使用一些html标记来定义用户接口。easyui非常简单，但是功能非常强大6、jQuery easyUI的基本插件（1）基本插件简单载入器-easyloader使用方法：1. easyloader.base=./;/settheeasyuibasedirectory2. easyloader.load(messager,function()/loadthespecifiedmodule3.

7、$.messager.alert(Title,loadok);4. );一般拖动-draggable使用方法：1. 2.脚本语言：1. $(#dd).draggable(2. handle:#title3. );拖动至容器-droppable使用方法：1. 脚本语言：1. $(#dd).droppable(2. accept:#d1,#d33. );缩放-resizable使用方法：1. 脚本语言：1. $(#rr).resizable(2. maxWidth:800,3. maxHeight:6004. );分页-pagination使用方法：1. 脚本语言：1. $(#pp).pagina

8、tion(2. total:2000,3. pageSize:104. );搜索框-searchbox使用方法：1. 3. 脚本语言：4. 5. functionqq(value,name)6. alert(value+:+name)7. 8. 进度条-progressbar使用方法：1. 脚本语言：1. $(#p).progressbar(2. value:603. );（2）布局管理器控制面板-panel选项卡-tabs可伸缩面板-accordion布局面板-layout（3）菜单和按钮菜单-menu链接按钮- linkbutton菜单按钮- menubutton分隔按钮- splitbu

9、tton（4）表单表单- form表单验证- validatebox自定义组合框- combo可装载组合框- combobox组合树- combotree组合表格- combogrid数字验证框- numberbox日期组合框- datebox日期时间组合框- datetimebox日历- calendar调节器- spinner数字调节器- numberspinner时间调节器- timespinner（5）窗口窗口- window对话窗口- dialog消息窗口- messager（6）数据表格和树形菜单数据表格- datagrid属性表格- propertygrid树形菜单- tree树

10、形表格- treegrid三、实训过程1、实训老师给我们讲解了本次实训的主要内容和实训目的（1）内容学习jQurey，它是一个优秀的JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。（2）目的通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript开发交互式动态Web网页。2、实践每个人自己

11、设计一个动态网站，使用HTML编写网页、CSS布局、jQurey实现动态效果。（1）制定网站主题网站主题健康生活 品质享受主要是以绿色环保，时尚品质为主题，倡导人们健康生活。（2）网站简介在本网站中，可以浏览到各种精品家居用品、绿色食品、健康养生、低碳环保等内容。在该网站中，可以注册成为我们的会员，享受精品家居、绿色食品优惠；可以浏览健康养生内容，上传养生心得；学习低碳生活，绿色环保等。（3）收集素材在网上收集了有关绿色环保，品质家居等相关的文字、图片、动画等素材。（4）网站规划本网站是由一个主页和多个子网页组成。主页和子页都采用CSS布局，主页和子页中设有超链接，可以在各个网页中自由切换。（

12、5）网站制作使用Dreamweaver 8和Macromedia Fireworks 8进行网站制作和图片修改。（6）网站测试将制作好的网站运行在浏览器上，检查预期功能是否实现。3、编写文档对实训过程编写实训报告。对设计的网站编写网站设计报告四、实训总结通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的网页。总体来说，整个网页制作的过程，我学会了很多知识，在设计网页的这几天里，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！ 做好页面，并不是一件容易的事，它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调