Web基础实训报告

Web基础实训报告目录一、实训简介................................................................................................................2二、实训内容................................................................................................................21、HTML...................................................................................................................22、CSS.....................................................................................................................23、JavaScript.......................................................................................................34、jQuery...............................................................................................................35、jQueryeasyUI.................................................................................................36、jQueryeasyUI的基本插件............................................................................3（1）基本插件................................................................................................3（2）布局管理器............................................................................................6（3）菜单和按钮............................................................................................6（4）表单........................................................................................................6（5）窗口........................................................................................................7（6）数据表格和树形菜单............................................................................7三、实训过程................................................................................................................71、实训...................................................................................................................7（1）内容........................................................................................................7（2）目的........................................................................................................72、实践...................................................................................................................8（1）制定网站主题........................................................................................8（2）网站简介................................................................................................8（3）收集素材................................................................................................8（4）网站规划................................................................................................8（5）网站制作................................................................................................8（6）网站测试................................................................................................83、编写文档...........................................................................................................9四、实训总结................................................................................................................9一、实训简介Web本意是蜘蛛网和网的意思。在这个遍布网络的世界里，Web网络成为不可或缺并且极其重要的一部分。Web功能强大，其内容包括存储在世界各地Internet计算机中的大量文档的集合。Internet将海量的信息以某种关联的文档形式组织在一起，每一个文档将会以主页的形式展现，这些主页是一种超文本信息，通过超链接进行连接。Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。本次实训主要是学习jQurey，它是一个优秀的JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。本次实训的目的是通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript开发交互式动态Web网页。能够熟练使用JavaScript语言和jQurey对网页界面实现动画效果，让网页能够动态显示，美观大方。二、实训内容1、HTMLHTML是超文本标记语言，互联网传输的标准语言。HTML具有很大的兼容性，例如li并不一定要用/li来对其进行关闭，因此使用起来比较方便。2、CSSCSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足，W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了新的概念，例如类、层等，还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式；同时CSS可集中进行样式管理。另外，CSS允许将样式定义单独存储于样式文件中，这样就可以进行样式管理，不仅便于样式管理，还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制3、JavaScript在HTML基础上，使用JavaScript可以开发交互式动态Web网页4、jQueryjQuery是一个优秀的Javascript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可5、jQueryeasyUIeasyui是一个基于jquery的集成了各种用户界面的插件。使用easyui不需要写太多javascript代码，一般情况下只需要使用一些html标记来定义用户接口。easyui非常简单，但是功能非常强大6、jQueryeasyUI的基本插件（1）基本插件简单载入器-easyloader使用方法：1.easyloader.base='../';//settheeasyuibasedirectory2.easyloader.load('messager',function(){//loadthespecifiedmodule3.$.messager.alert('Title','loadok');4.});一般拖动-draggable使用方法：1.divid=ddclass=easyui-draggabledata-options=handle:'#title'style=width:100px;height:100px;2.脚本语言：1.$('#dd').draggable({2.handle:'#title'3.});拖动至容器-droppable使用方法：1.divid=ddclass=easyui-droppabledata-options=accept:'#d1,#d3'style=width:100px;height:100px;/div脚本语言：1.$('#dd').droppable({2.accept:'#d1,#d3'3.});缩放-resizable使用方法：1.divid=rrclass=easyui-resizabledata-options=maxWidth:800,maxHeight:600sty