目录
一、实训简介................................................................................................................ 2 二、实训内容................................................................................................................ 2
1、HTML................................................................................................................... 2 2、CSS..................................................................................................................... 2 3、JavaScript....................................................................................................... 3 4、jQuery............................................................................................................... 3 5、jQuery easyUI................................................................................................. 3 6、jQuery easyUI的基本插件............................................................................ 3 （1）基本插件................................................................................................ 3 （2）布局管理器............................................................................................ 6 （3）菜单和按钮............................................................................................ 6 （4）表单........................................................................................................ 6 （5）窗口........................................................................................................ 7 （6）数据表格和树形菜单............................................................................ 7
三、实训过程................................................................................................................ 7
1、实训................................................................................................................... 7
（1）内容........................................................................................................ 7 （2）目的........................................................................................................ 7 2、实践................................................................................................................... 8
（1）制定网站主题........................................................................................ 8 （2）网站简介................................................................................................ 8 （3）收集素材................................................................................................ 8 （4）网站规划................................................................................................ 8 （5）网站制作................................................................................................ 8 （6）网站测试................................................................................................ 8 3、编写文档........................................................................................................... 9 四、实训总结................................................................................................................ 9
一、实训简介
Web本意是蜘蛛网和网的意思。在这个遍布网络的世界里，Web网络成为不可或缺并且极其重要的一部分。Web功能强大，其内容包括存储在世界各地Internet计算机中的大量文档的集合。Internet将海量的信息以某种关联的文档形式组织在一起，每一个文档将会以主页的形式展现，这些主页是一种超文本信息，通过超链接进行连接。
Web标准并不是一个单一的标准，而是一个系列的标准的集合。Web标准中具有代表性的几种语言有：XML可扩展标记语言、XHTML可扩展超文本标记语言、CSS层叠样式表、DOM文档对象模型、JavaScript脚本程序设计语言等。
本次实训主要是学习jQurey，它是一个优秀的JavaScript框架，是轻量级的js库，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
本次实训的目的是通过对JavaScript的学习，学会使用HTML标记语言，通过CSS对页面的布局，在HTML基础上，使用JavaScript开发交互式动态Web网页。能够熟练使用JavaScript语言和jQurey对网页界面实现动画效果，让网页能够动态显示，美观大方。
二、实训内容
1、HTML
HTML是超文本标记语言，互联网传输的标准语言。HTML具有很大的兼容性，例如
2、CSS
CSS是层叠样式表的简称。为了弥补HTML在显示属性上的不足，W3C协会制定了这一套扩展样式标准。CSS标准中重新定义了HTML中原来的文字显示样式，并增加了新的概念，例如类、层等，还可以对文字进行重叠、定位等操作。它提供了更为丰富多彩的样式；同时CSS可集中进行样式管理。另外，CSS允许将样式定义单独存储于样式文件中，这样就可以
进行样式管理，不仅便于样式管理，还可以在多个HTML文件共享样式定义。一个HTML文件允许引用多个不同的CSS样式文件中的样式定义。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制
3、JavaScript
在HTML基础上，使用JavaScript可以开发交互式动态Web网页
4、jQuery
jQuery是一个优秀的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里面插入一堆js来调用命令了，只需定义id即可
5、jQuery easyUI
easyui是一个基于jquery的集成了各种用户界面的插件。
使用easyui不需要写太多javascript代码，一般情况下只需要使用一些html标记来定义用户接口。
easyui非常简单，但是功能非常强大
6、jQuery easyUI的基本插件
（1）基本插件
简单载入器-easyloader 使用方法： 1. 2. easyloader.base = '../'; // set the easyui base directory easyloader.load('messager', function(){ // load the specified module 3. 4.
$.messager.alert('Title', 'load ok'); }); 一般拖动-draggable 使用方法： 1.
拖动至容器-droppable 使用方法： 1.
$('#dd').draggable({ handle:'#title' }); 脚本语言： 1. 2. 3.缩放-resizable 使用方法： 1.
$('#dd').droppable({ accept:'#d1,#d3' }); 脚本语言： 1. 2. 3. 4.分页-pagination 使用方法：
$('#rr').resizable({ maxWidth:800, maxHeight:600 }); 1.
脚本语言： 1. 2. 3. 4.搜索框-searchbox 使用方法： 1. 2. 3. 脚本语言： 4. 5. 6. 7. 8.
进度条-progressbar 使用方法： 1.
$('#pp').pagination({ total:2000, pageSize:10 }); 脚本语言： 1. 2. 3.$('#p').progressbar({ value: 60 }); （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，它是一个优秀的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、实践
每个人自己设计一个动态网站，使用HTML编写网页、CSS布局、jQurey实现动态效果。
（1）制定网站主题
网站主题——健康生活 品质享受
主要是以绿色环保，时尚品质为主题，倡导人们健康生活。
（2）网站简介
在本网站中，可以浏览到各种精品家居用品、绿色食品、健康养生、低碳环保等内容。在该网站中，可以注册成为我们的会员，享受精品家居、绿色食品优惠；可以浏览健康养生内容，上传养生心得；学习低碳生活，绿色环保等。
（3）收集素材
在网上收集了有关绿色环保，品质家居等相关的文字、图片、动画等素材。
（4）网站规划
本网站是由一个主页和多个子网页组成。主页和子页都采用CSS布局，主页和子页中设有超链接，可以在各个网页中自由切换。
（5）网站制作
使用Dreamweaver 8和Macromedia Fireworks 8进行网站制作和图片修改。
（6）网站测试
将制作好的网站运行在浏览器上，检查预期功能是否实现。
3、编写文档
对实训过程编写《实训报告》。 对设计的网站编写《网站设计报告》
四、实训总结
通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的网页。总体来说，整个网页制作的过程，我学会了很多知识，
在设计网页的这几天里，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！
做好页面，并不是一件容易的事，它包括主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。
因篇幅问题不能全部显示，请点此查看更多更全内容