教案
实验五课程设计
一、课程设计的目的和要求
掌握Web前端编程的相关技术,包括HTML、JavaScript、JQuery等;
完成课程设计报告。
二、实验内容
使用所学知识,创建一个人网站。
1.功能要求:
?首页(公告、新闻、友情链接、登录等)
?身份证查询
?Email发送
?聊天室
?留言簿
2.设计要求:
?功能基本实现;
?使用DIV+CSS;
?界面美观。
三、实验重点和难点
相关技术的灵活使用
界面的美观和谐
四、实验过程
1、先构思网站框架,构思之后想好主题,并稍做记录。
2、用table和div+css代码写出网站框架,调整好页面,在主界面中添加内容和
背景,以及链接。
3、添加子网页,使主页具有留言和注册等功能。
4、主界面代码:
var tab = null;
var accordion = null;
var tree = null;
var tabItems = [];
$(function ()
{
//布局
$("#layout1").ligerLayout({ leftWidth: 190, height: '100%',heightDiff:-34,space:4, onHeightChanged: f_heightChanged });
var height = $(".l-layout-center").height();
//Tab
$("#framecenter").ligerTab({
height: height,
showSwitchInTab : true,
showSwitch: true,
onAfterAddTabItem: function (tabdata)
{
tabItems.push(tabdata);
saveTabStatus();
},
onAfterRemoveTabItem: function (tabid)
{
for (var i = 0; i < tabItems.length; i++)
{
var o = tabItems[i];
if (o.tabid == tabid)
{
tabItems.splice(i, 1);
saveTabStatus();
break;
}
}
},
onReload: function (tabdata)
{
var tabid = tabdata.tabid;
addFrameSkinLink(tabid);
}
});
//面板
$("#accordion1").ligerAccordion({ height: height - 24, speed: null });
$(".l-link").hover(function ()
{
$(this).addClass("l-link-over");
}, function ()
{
$(this).removeClass("l-link-over");
});
//树
$("#tree1").ligerTree({
data : indexdata,
checkbox: false,
slide: false,
nodeWidth: 120,
attribute: ['nodename', 'url'],
onSelect: function (node)
{
if (!node.data.url) return;
var tabid = $(node.target).attr("tabid");
if (!tabid)
{
tabid = new Date().getTime();
$(node.target).attr("tabid", tabid)
}
f_addTab(tabid, node.data.text, node.data.url);
}
});
tab = liger.get("framecenter");
accordion = liger.get("accordion1");
tree = liger.get("tree1");
$("#pageloading").hide();
css_init();
pages_init();
});
function f_heightChanged(options)
{
if (tab)
tab.addHeight(options.diff);
if (accordion && options.middleHeight - 24 > 0)
accordion.setHeight(options.middleHeight - 24); }
function f_addTab(tabid, text, url)
{
tab.addTabItem({
tabid: tabid,
text: text,
url: url,
callback: function ()
{
addShowCodeBtn(tabid);
addFrameSkinLink(tabid);
}
});
}
function addShowCodeBtn(tabid)
{
var viewSourceBtn = $('查看源码');
var jiframe = $("#" + tabid);
viewSourceBtn.insertBefore(jiframe);
viewSourceBtn.click(function ()
{
showCodeView(jiframe.attr("src"));
}).hover(function ()
{
viewSourceBtn.addClass("viewsourcelink-over");
}, function ()
{
viewSourceBtn.removeClass("viewsourcelink-over");
});
}
function showCodeView(src)
{
$.ligerDialog.open({
title : '源码预览',
url: 'dotnetdemos/codeView.aspx?src=' + src,
width: $(window).width() *0.9,
height: $(window).height() * 0.9
});
}
function addFrameSkinLink(tabid)
{
var prevHref = getLinkPrevHref(tabid) || "";
var skin = getQueryString("skin");
if (!skin) return;
skin = skin.toLowerCase();
attachLinkToFrame(tabid, prevHref + skin_links[skin]);
}
var skin_links = {
"aqua": "lib/ligerUI/skins/Aqua/css/ligerui-all.css",
"gray": "lib/ligerUI/skins/Gray/css/all.css",
"silvery": "lib/ligerUI/skins/Silvery/css/style.css",
"gray2014": "lib/ligerUI/skins/gray2014/css/all.css"
};
function pages_init()
{
var tabJson = $.cookie('liger-home-tab');
if (tabJson)
{
var tabitems = JSON2.parse(tabJson);
for (var i = 0; tabitems && tabitems[i];i++)
{
f_addTab(tabitems[i].tabid, tabitems[i].text, tabitems[i].url);
}
}
}
function saveTabStatus()
{
$.cookie('liger-home-tab', JSON2.stringify(tabItems));
}
function css_init()
{
var css = $("#mylink").get(0), skin = getQueryString("skin");
$("#skinSelect").val(skin);
$("#skinSelect").change(function ()
{
if (this.value)
{
location.href = "index.htm?skin=" + this.value;
} else
{
location.href = "index.htm";
}
});
if (!css || !skin) return;
skin = skin.toLowerCase();
$('body').addClass("body-" + skin);
$(css).attr("href", skin_links[skin]);
}
function getQueryString(name)
{
var now_url = document.location.search.slice(1), q_array = now_url.split('&');
for (var i = 0; i < q_array.length; i++)
{
var v_array = q_array[i].split('=');
if (v_array[0] == name)
{
return v_array[1];
}
}
return false;
}
function attachLinkToFrame(iframeId, filename)
{
if(!window.frames[iframeId]) return;
var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
var fileref = window.frames[iframeId].document.createElement("link");
if (!fileref) return;
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", filename);
head.appendChild(fileref);
}
function getLinkPrevHref(iframeId)
{
if (!window.frames[iframeId]) return;
var head = window.frames[iframeId].document.getElementsByTagName('head').item(0);
var links = $("link:first", head);
for (var i = 0; links[i]; i++)
{
var href = $(links[i]).attr("href");
if (href && href.toLowerCase().indexOf("ligerui") > 0)
{
return href.substring(0, href.toLowerCase().indexOf("lib") );
}
}
}
body,html{height:100%;}
body{ padding:0px; margin:0; overflow:hidden;}
.l-link{display:block;height:26px; line-height:26px; padding-left:10px; text-decoration:underline; color:#333;}
.l-link2{text-decoration:underline; color:white; margin-left:2px;margin-right:2px;}
.l-layout-top{background:#102A49; color:White;}
.l-layout-bottom{ background:#E5EDEF; text-align:center;}
#pageloading{position:absolute; left:0px; top:0px; background:white url('loading.gif') no-repeat center; width:100%; height:100%;z-index:99999;}
.l-link{ display:block; line-height:22px; height:22px; padding-left:16px;border:1px solid white; margin:4px;}
.l-link-over{ background:#FFEEAC; border:1px solid #DB9F00;}
.l-winbar{ background:#2B5A76; height:30px; position:absolute; left:0px; bottom:0px; width:100%; z-index:99999;}
.space{ color:#E7E7E7;}
/* 顶部*/
.l-topmenu{ margin:0; padding:0; height:120px; line-height:31px; background:url('image/27.jpg')
repeat-x bottom; position:relative; border-top:1px solid #1D438B; }
.l-topmenu-logo{ color:#E7E7E7; padding-left:35px; line-height:26px; padding-top:10px; } .l-topmenu-welcome{position:absolute;height:24px;line-height:24px;right:30px;top:2px;colo r:#070A0C; padding-top:90px;}
.l-topmenu-welcome a{ color:#E7E7E7; text-decoration:underline}
.body-gray2014 #framecenter{
margin-top:3px;
}
.viewsourcelink { background:#B3D9F7; display:block; position:absolute; right:10px; top:3px; padding:6px 4px; color:#333; text-decoration:underline;
}
.viewsourcelink-over {
background:#81C0F2;
}
.l-topmenu-welcome label {color:white;
}
#skinSelect {
margin-right: 6px;
}
.标题{
font-family:"楷体";
font-size:60px;
font-weight:200;
color:#F9C;
}
Copyright ? 2011-2014 https://www.doczj.com/doc/8511347220.html,
5、主页代码:
function get_time(){
var date=new Date();
document.writeln((date.getYear()+1900)+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日")
}
注册 帮助 | |||
我的小屋 | |||
社会娱乐: | |||
精品推荐 网站公告 | |||
友情链接: |
var marq = document.getElementById("marq");
var bd = document.getElementById("bd");
var shadow = document.getElementById("shadow");
shadow.innerHTML = bd.innerHTML;
function mq(){
if (bd.clientWidth - marq.scrollLeft == 0)
marq.scrollLeft = 0
else
marq.scrollLeft++;
setTimeout("mq()","1");
}
mq();
6、其他功能:
留言板
五、实验总结
通过本次实验,我了解到做一个网页需要很多方面的知识,不仅仅是学会编码就可以,还需要对颜色搭配的敏感度,通过本次实验,将本学期学过的web 方面的知识融会贯通, 熟悉了Web 前端编程的相关技术,包括HTML 、JavaScript 、JQuery 等。
注册
web实训心得体会 篇一:JAVAWEB实训心得体会 jsp+servlet+mysql 论坛项目实训总结 实训人:程路峰学号:11103303 通过为期10天的实训,我学习了很多关于java web的知识。在老师的正确指导下,顺利的完成了我的实训内容。在此,也有同学的帮助,在他们的帮助下我也受益匪浅。最终,能顺利完成实训的任务也很高兴。 在实训生活中,我了解开发项目的需求、设计、实现、确认以及维护等活动整个过程,让自己开始懂得一点软件工程的知识点。 首先,了解需求分析的重要性,比如:需求分析就是分析软件用户的需求是什么.如果投入大量的人力,物力,财力,时间,开发出的软件却没人要,那所有的投入都是徒劳.如果费了很大的精力,开发一个软件,最后却不满足用户的要求,从而要重新开发过,这种返工是让人痛心疾首的.(相信大家都有体会)比如,用户需要一个 for linux 的软件,而你在软件开发前期忽略了软件的运行环境,忘了向用户询问这个问题,而想当然的认为是开发 for windows 的软件,当你千辛万苦地开发完成向用户提交时才发现出了问题,那时候你是欲哭无泪了,恨不得找块豆腐一头撞死。所以,需求分析是成功的第一步,就是要全面地理解用户的各项要求,并准确地表达所接受的用户需求。 然后呢?确实客户的需求的以后我们要做什么呢,那当然是设计和分析。此阶段主要根据需求分析的结果,对整个软件系统进行设计,如系统框架设计,数据库设计等等。软件设计一般分为总体设计和详细设计。好的软件设计将为软件程序编写打下良好的基础。接下来是代码实现,此阶段是将网站项目设计的结果转换成计算机可运行的程序代码,我们这个项目为4个模块,1.界面,2.逻辑层。3实现层。4.数据库及使用说明文档,分别为4个小组成员完成。这阶段我学到很多编程的思想,如: 分层思想、mvc、三大架构的整合、dao 的编写。 编号程序之后就是软件测试了,此时在软件设计完成后要经过严密的测试,以发现软件在整个设计过程中存在的问题并加以纠正。由于时间有限,我们测试是简单的使用一下每一个功能。
实验一JSP开发环境构建 实验目的:了解动态页面技术及B/S系统 掌握开发环境的构建 理解Eclipse开发WEB应用 实验内容: 实训项目一:安装JDK并配置环境变量 请阐述配置环境变量的方法: 实训项目二:安装TOMCAT并配置Server.xml修改端口号为8090 问题一:如何测试TOMCAT是否已经成功启动? 问题二:在浏览器地址栏输入什么地址可以访问到TOMCA T的测试页? 请阐述配置Server.xml修改端口号为8090基本实验步骤: 实训项目三:应用Eclipse建立项目并浏览一个JSP页面 请阐述应用Eclipse建立项目并浏览一个JSP页面基本实验步骤: 实验心得:(遇到了哪些问题,如何解决的,有那些体会) 实验二JSP语法 实验目的:了解JSP程序的组成元素 掌握JSP中使用JA V A程序片段的方法 实验内容: 实训项目一:编写一个JSP页面输出26个小写英文字母表 实训项目二:编写页面实现九九乘法表 实训项目三:利用成员变量被所有客户共享这一性质,实现一个简单的计数器 实训项目四:使用JA V A表达式输出系统当前时间 实训项目五:编写程序shijian2_9.jsp和computer.jsp两个页面,在第一个页面中使用include动作标记动态包含文件computer.jsp,并向它传递一个矩形的长和宽,computer.jsp 收到参数后,计算矩形的面积,并显示结果。 实训项目六:编写3个JSP页面:main.jsp,first.jsp和second.jsp,将3个JSP文件保存在同一个WEB工程中,main.jsp使用include动作标记加载first.jsp和second.jsp页面。First.jsp 页面可以画一张表格,second.jsp页面可以计算两个正整数的最大公约数。当first.jsp被加载时,获取main.jsp页面include动作标记的param子标记提供的表格行数和列数,当second.jsp 被加载时,获取main.jsp页面include动作标记的param子标记提供的两个正整数的值。 要求:上机编程完成上述实训项目,上机演示给教师检查,从中挑选三个程序的核心代码写在实训报告上 实验核心代码:
WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术(信息技术及应用) 班级计信2班 学生蒋波涛 重庆交通大学 2013年
目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)
一、设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。学会和团队配合,逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。 然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。 我们选做的主题是个人主页,并且选定题目为“红尘客栈”,其目的是做一个简单的网站,介绍酒店概况,提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。 1.点击“ALT+F6”键,进入布局模式,插入布局表格。建立一个大概的布局。 2.使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。 (二)网页中的图像
长春大学 20 15 —2016学年第二学期Web前端开发技术课程 实验报告 学院:计算机科学技术专业:软件工程 班级:软件15402
学号:041440210 姓名:王悦 任课教师:车娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面; 2.掌握盒子模型相关属性,能够使用它们熟练地控制网页元素; 3.理解块元素与行内元素的区别,能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果,满足如下要求: 1.网页弹出框由上面的标题和下面的宣传内容两部分组成; 2.标题通过h2定义; 3.在段落文本中内容部分由h3和p标记进行定义; 4.应用
沈阳工学院 综合实验验收报告题目:论坛系统的设计与实现 院系:信息与控制学院 专业:计算机科学与技术 班级学号:11301105、11301121、11301122学生姓名:李媛媛、金鑫、李福林 指导教师:靳新 成绩: 2013年12月13日
当今社会正处在网络时代,信息化大潮席卷全球,网络正以前所未有的速度在我国普及开来。网站以其独特的优势在信息化的过程中占有重要的一席。 论坛在Struts2+Hibernate框架的基础上,用当今主流的网站开发技术jsp语言进行开发。论坛将采用B/S体系结构,人们通过浏览器就可以访问论坛的主页,保证的服务器的安全。数据库采用免费,小巧,易用的SQL Server数据库。 开发BBS论坛的目的是提供一个用户交流的平台,为广大用户提供交流经验,探讨问题的网上社区。因此,BBS论坛的最基本功能是发表帖子,其次是其他人根据帖子发表自己的看法和贴主回帖等功能。此外论坛还提供用户登录和注册功能。 本网站严格按照软件项目开发的流程进行开发,对于网站开发的可行性分析、需求分析、概要设计、详细设计以及实现过程。 本套论坛的优点在于它具有强大的可扩展性和可维护性,非常适合网民创建自己的中小型BBS论坛! 关键词:BBS,Struts,Hibernate,SQL Server
随着Internet技术的不断发展,以及用户群爆炸性地增长,网络不再仅仅是信息的被动获取来源,更成为人们探讨间题、交换观点的场所,其中,网上论坛扮演了极其重要的角色,随着时间的推移,论坛站点中积存了丰富的信息资源,不但有各类技术资料和新闻文档,还包含着用户的判断和评论,论坛站点己成为Web信息库的重要组成部分,自网上论坛诞生20多年以来,随着Web技术的发展,己经由原来简单的电子公告板系统发展为功能丰富的网上论坛和虚拟社区模式。各种论坛随着网络迅速发展,几乎充实着生活工作的每一个方面,无论是商界、政界,还是娱乐界,都有各种论坛。 本文分为两章,第一章为系统分析与设计,包括需求分析、系统功能设计、数据库设计。第二章为系统设计,包括系统框架和各功能模块。
Web应用程序设计综合实验报告题目:网上购物系统 学生姓名: XXX 学号: XXXXXXXXXXX 院(系): XXXXXXX 专业: XXXXXXXXXX 指导教师: XXXXXXXXXX 2014 年 7月 6 日
1、选题背景 随着计算机技术的发展和网络人口的增加,网络世界也越来越广播,也越来越来越丰富,网上商城已经成为网上购物的一股潮流。互联网的跨地域性和可交互性使其在与传统媒体行业和传统贸易行业的竞争中是具有不可抗拒的优势。在忙碌丰富的社会生活中,人们开始追求足不出户就能买到心仪的商品,是越来越多的上网爱好者实现购物的一种方式,对于企业来说,网络交易能大大提高交易速度、节约成本。在这种形势下,传统的依靠管理人员人工传递信息和数据的管理方式就无法满足企业日益增长的业务需求,因而开发了这样一个具有前台后台的网上商城系统,以满足购物者和企业的需求。 因此这次毕业设计题目就以目前现有的网上商城系统为研究对象,研究一般的网上商城的业务流程,猜测其各个功能模块及其组合、连接方式,并分析其具体的实现方式,最后使用Java加web服务器和数据库完成一个网上商城系统的主要功能模块。通过这样一个设计,可以提高自己Java编程的水准,也练习了怎样构建一个完整的系统,从系统的需求分析到设计,直至编码、测试并运行,熟悉并掌握一个完整的Web开发流程,为今后工作打下基础。 1.1设计任务 从以下几个方面实现网络商城的基本功能: 1、用户部分: (1)用户的登录和注册,用户必须注册才能购物,注册时系统会对注册信息进行验证,进入系统或是结账时,用户可以进行登录,登录时,如果密码错误,系统会进行验证并提示错误。 (2)浏览商品,实现用户可以在网络商店中随意浏览商品,商品按类别分类,方便用户查找不同类别的商品 (3)购物车管理,能实现添加商品、删除商品、更新商品的功能。 (4)生成订单,查看购物车后单击下一步则生成订单信息表,一旦提交订单,则购物车就不能被改变。 2、管理员部分:
本科实验报告 课程名称:Web开发实用技术基础 实验项目:HTML语言 网页程序设计Javascript Request与Response对象的应用 Application与Session对象的应用 实验地点:实验室211 专业班级:学号: 学生姓名: 指导教师: 2015年11月5日
学院名称学号实验成绩 学生姓名专业班级实验日期 课程名称Web开发实用技术基础实验题目HTML语言 一.实验目的和要求 1.掌握常用的HTML语言标记; 2.利用文本编辑器建立HTML文档,制作简单网页。 3.独立完成实验。 4.书写实验报告书。 二.实验内容 1.在文本编辑器“记事本”中输入如下的HTML代码程序,以文件名sy1.html保存,并在浏览器中运行。(请仔细阅读下列程序语句,理解每条语句的作用) 源程序清单如下:
item | content |
---|