实训任务书.doc

长　沙　学　院

CHANGSHA UNIVERSITY

企业门户网站

系 部：计算机科学与技术系
专 业：软 件 工 程
班 级：软 件 9 班
姓 名： 罗 利
学 号：2 0 10 0 2 2 9 0 5
指 导 老 师： 夏 彦
最终评定成绩：

长沙学院课程设计鉴定表
姓名
罗利
学号
2010022905
专业
软件工程
班级
9班
设计题目
企业门户网站
指导教师
夏彦
指导教师意见：

评定等级： 教师签名： 日期：
答辩小组意见：

评定等级：　　　　　答辩小组长签名：　　　　　日期：　　　　
教研室意见：

教研室主任签名： 日期： 　
系（部）意见：

系主任签名：　　　　　　　　日期：　　　　　
说明
课程设计成绩分“优秀”、“良好”、“及格”、“不及格”四类；

摘要
在此次实训中，从最开始的茫无头绪到现在的有话可说，我觉得自己成长了很多。最开始接到任务去学习最基本的实现时，还在害怕这么大的程序怎么可能写得出来。而现在看着自己的成果，虽有不足，却也处处洒下了泪与汗。我觉得自己虽已实现基本功能，但仍有很多不足之处。界面不够明亮，对框架的掌握还是不太熟悉。但是我相信，我以后会做得越来越好。期待下一次的努力和成功。团队的力量也是巨大的，我在此更学会了团结的重要性。
虽然期中出现了各种各样的我问题，出现了很多错误，经过我长时间的修改，还是不能解决问题，无奈之下去请教老师，老师给我提供了许多帮助，经过仔细的检查和调试我最终吧问题大致都解决了，顺利的完成了网页的制作。
通天这次实训，我才体会带自己学到的还远远不够，而且不扎实，所以以后我要更深入的学习网页设计。;
关键词：企业门户网站，框架，层，ExtJS

目录
1 .课程设计任务………………………………………………………………………………… 1
1．1阶段任务……………………………………………………………………………………… 1
1．2实训目的……………………………………………………………………………………… 1
2 .设计内容与要求………………………………………………………………………………3
2.1功能要求…………………………………………………………………………………………3
2.2技术要求…………………………………………………………………………………………4
2.3开发计划…………………………………………………………………………………………4
3．界面设计……………………………………………………………………………………… 5
4.关键代码………………………………………………………………………………………… 9
4．1总框架………………………………………………………………………………………… 9
4.2标题区……………………………………………………………………………………………9
4.3公司简介区……………………………………………………………………………………11
4.4联系我们区……………………………………………………………………………………11
4.5产品展示区……………………………………………………………………………………12
4.6公司新闻…………………………………………………………………………………… 12
4.7关于我们…………………………………………………………………………………… 13
4.8工艺介绍……………………………………………………………………………………… 14
4.9业务流程……………………………………………………………………………………… 14
4.10招聘人才………………………………………………………………………………………15
4.10联系我们………………………………………………………………………………………16

总结………………………………………………………………………………………………… 17
附录源代码……………………………………………………………………………………… 18

1.课程设计任务书
课程名称：工程实训（二）
设计题目：企业门户网站
已知技术参数和设计要求：
1. 问题描述（功能要求）：
企业门户网站用来展示企业特色，其中模块主要包括：
(1) 公司新闻
(2) 关于我们
(3) 工艺介绍
(4) 业务流程
(5) 人才招聘
(6) 联系我们
等网站常用频道
2. 运行环境要求：
（1）客户端：
windows操作系统
IE浏览器
（2）服务器：
windows server 版操作系统
IIS组件安装
3. 技术要求：
要求分别使用三种不同的方式来实现。
l HTML
l CSS
l JS
l JavaScript
l XML
l PhotoShop
(1)了解有关Web网站建设的基本概念与方法。
(2)掌握网页设计制作的基本概念，有关美学基本知识与设计制作流程。
(3)掌握网络信息发布与维护的方法。
(4)掌握HTML、CSS、ExtJS等页面设计方面相关技术。

设计工作量：
40课时

工作计划：
(1) 2010级软件工程所有班级
2课时：课程设计相关知识介绍。多媒体教室
18课时： 设计，普通教室。
16课时：上机、调试。计算机系机房
4课时：答辩。计算机系机房。
（具体时间地点老师先申请，机动安排）

指导教师签名：　　　　　　　　　日期：　　　　　　　　
教研室主任签名：　　　　　　　 日期：　　　　　　　　
系主任签名：　　　　　　　　　 日期：　　　　　　　　

2.设计内容与要求
2.1 功能要求：
企业门户网站
公司新闻
首页
关于我们
工艺介绍
业务流程
人才招聘
联系我们
功能
首页模块之间拖放
首页产品图片滚动

2.2 技术要求：
采用Html+ext语言开发；工具采用DreamweaverCS5+ext智能提示spketdwcs-ext-2.0.2.mxp。

2．3 开发计划：
阶段
任务名称
开发时间（工作日）
知识准备
学习该项目开发所涉及到的技术知识以及相关知识
3
需求分析
需求理解
1

系统设计
（2套风格）
首页
1
公司新闻/新闻详细页面
1
关于我们
1
工艺介绍
1
业务流程
0.5
人才招聘/联系我们
1

编码测试
个人首页制作
2
公司新闻页面制作/详细页面制作
2
关于我们页面制作
1
工艺介绍页面制作
1
业务流程页面制作
0.5
人才招聘页面制作
0.5
联系我们页面制作
0.5
结项发布
项目部署与发布
0.7
项目总结
0.3
合计
-
18

3 界面设计
主页整体采用的是Fit布局，用面板Panel构成，主要分为首面板、主面板、底面板。首面板应用底部条做了一个导航栏以链接各网页；产品展示采用了滚动图片，见图3.1；

图3.1主页

在公司介绍中运用grid制作表格，在表格中创建链接，表格主要设计了四列：编号、新闻类型、新闻名称、日期。表格中的每列都可以左右拖动调换位置，方便使用。每列宽度也可以调节。如果调节宽度超过面板宽度，则自动生成滚动条，方便观看和使用。鼠标移至列标题，可发现隐藏按钮。单击按钮，可实现表格的升序、降序及删除相应的列这些功能，见图3.2；

图3.2公司新闻

关于我们网页版面采用Fit布局设计。运用Panel组合，见图3.3；

图3.3关于我们
工艺介绍网页版面采用Fit布局设计。运用Panel组合，见图3.4；

图3.4工艺介绍

业务流程网页版面采用Fit布局设计。运用Panel组合，如图3.5：

图3.5业务流程

招聘人才网页版面采用layout布局，如图3.6：

图3.6招聘人才
联系网页版面采用Fit布局设计。运用Panel组合，如图3.7

图3.7联系我们

4 关键代码
4.1总框架
#bodym {
position:absolute;
width:1024px;
height:1000px;
z-index:1;
}
这里是采用的框架布局，主要拆分为四个部分。

4.2 标题区：
<div id="headm">
<!----网页头部---->
<img src="图/2b.jpg" align="left" />
<br/>
<font size="+3" >北京欣宸智和模型科技有限公司</font>
</div>
<div id="head" style="margin-top:60px; margin-left:100px;"></div>
创建链接并用类设置链接字体
Ext.onReady(function(){
new Ext.Panel({
renderTo:'head',
width:824,
height:270,
html:"<img src='图/1b.jpg'>",
bbar:[{
text:'首页',
handler:function(){
window.location.href="首页.html";
}
},"-",{
text:'公司新闻',
handler:function(){
window.location.href="公司新闻.html";
}
},"-",{
text:'关于我们',
handler:function(){
window.location.href="关于我们.html";
}
},"-",{
text:'工艺介绍',
handler:function(){
window.location.href="工艺介绍.html";
}
},"-",{
text:'业务流程',
handler:function(){
window.location.href="业务流程.html";
}
},"-",{
text:'招聘人才',
handler:function(){
window.location.href="招聘人才.html";
}
},"-",{
text:'联系我们',
handler:function(){
window.location.href="联系我们.html";
}
}]
});
});

4.3 公司简介区
<div id="left" style="margin-top:10px; margin-left:100px;"></div>
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left',
width:560,
height:340, collapsible:true,
html:"<img src='图/12.jpg' align='left'><br/><h1>公司简介</h1><br/>******************************************<br/><br/> 北京欣宸智和模型科技有限公司是为客户新产品<br/>开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。我们致力于为客户提供专业化的解决方案，致力于为客户创造效率更快，质量更好，成品更低的价值回报。北京欣宸智和模型科技有限公司是为客户新产品开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。<br/><br/>********************************************************************",

});
});
插入文本并用类设置字体，保留空格设置文本样式
4.4 联系我们区：
<div id="right" style="margin-top:-340px; margin-left:675px;"></div> <a Ext.onReady(function(){
new Ext.Panel({
renderTo:'right',
title:'联系我们',
width:250,
height:340,
collapsible:true,
html:"<br/><p align='center'><b>联系方式</b></p><font size='-2'>*************************************************</font><table align='center'><tr><td width=60px>传真</td><td>010-12345678</td></tr><tr><td>座机</td><td>010-12345678</td></tr><tr><td>手机</td><td>15584757859</td></tr><tr><td>QQ</td><td>738299229</td></tr><tr><td>联系人</td><td>吴灿亮</td></tr><tr><td>邮箱</td><td>wukan@</td></tr><tr><td>网址</td><td><a href=''></a></td></tr><tr><td>地址</td><td><br/>北京海淀西北旺韩家<br/>川50号院内</td></tr><tr><td></td><td></td></tr></table>"
});
});
<!----网页右侧---->

插入文本并用类设置字体，保留空格设置文本样式
4.5 产品展示区：
<div id="buttom" style="margin-top:10px; margin-left:100px;"></div> <img Ext.onReady(function(){
new Ext.Panel({
renderTo:'buttom',
width:824,
height:200,
collapsible:true,
html:"<marquee behavior='alternate' scrollamount='5' ><table><tr><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td><td><a href='t1.html'><img src='图/3b.jpg'></a></td><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td></tr><tr><td align='center'>产品1</td><td align='center'>产品2</td><td align='center'>产品3</td><td align='center'>产品4</td><td align='center'>产品5</td><td align='center'>产品6</td></tr></table></marquee>"

});
});
<!----网页底部---->

插入滚动图片
4.6 公司新闻

//创建数据源
var store=new Ext.data.ArrayStore({
fields:[
{name:'newsKind'},
{name:'newsName'},
{name:'data'}
]
});
store.loadData(data);

var grid=new Ext.grid.GridPanel({
renderTo:'left',
title:'新闻列表',
store:store,
width:560,
height:550,
columns:[
{header:'新闻类型',dataIndex:'newsKind',sortable:true},
{header:'新闻名称',dataIndex:'newsName',width:356,sortable:true},
{header:'日期',dataIndex:'data',sortable:true}
]
});
<!----新闻列表---->

此页面采用的grid表格设计

4.7 关于我们
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left1',
title:'公司简介',
width:560,
height:150,
collapsible:true,
html:" <div class='left'>北京欣宸智和模型科技有限公司是为客户新产品开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。我们致力于为客户提供专业化的解决方案，致力于为客户创造效率更快，质量更好，成品更低的价值回报。北京欣宸智和模型科技有限公司是为客户新产品开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。</div>"

});
});
<!----公司简介---->

此页面采用的Panel面板设计。
4.8 工艺介绍
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left1',
title:'工艺内容',
width:560,
height:390,
collapsible:true,
html:" <div class='left'> 制作手板模型是产品设计过程中的一个关键环节，为保证产品设计的可行性和产品准备投入试产提供可靠的实物依据。<br/><b>A)检验外观设计：</b><br/>通过制作实体模型，把设计师的构想以形体，颜色，尺寸，材质反映出来，为更深的交流，评估，修改和完善设计方案，提供有效的实物参照。<br/><b>B)检验设计结构：</b><br/>手板可以验证结构设计十分满足预期要求，如结构的合理与否，安装的难易程度，人机学尺度的细节处理等。<br/><b>C)降低开发风险：</b><br/>通过对手板的体验，可以在开发模具之前发现问题并解决问题，避免开模具过程中出现的问题，造成不必要的损失，传统的方法是根据几何造型在数控机床上加工，这对于一个价值数十万乃至百万元的复杂模具来说风险太大，设计上任何不慎反映到模具上就是不可挽回的损失。制作手板模型可在开模前真实而准确地制造出零件原型，设计上的各种细微特征和错误就能在模型上一目了然地显示出来，这就大大减少了修模和开模风险。<br/><b>D)快速推向市场：</b><br/>根据手板制作速度快的特点，很多公司在模具开发出来之前会通过手板制作产品，在展示会的宣传，前期的销售，快速把新产品推向市场。对促进企业产品创新，缩进新产品开发周期，提高产品竞争力有积极的推动作用。<br/><b>E)小批量生产：</b><br/>对于有益产品无法开模具，或者因产品需求不是很多，开发模具费用太高的情况下，就可以直接通过手板制作直接生产小批量的产品来销售</div>"

});
});
此页面采用的Panel面板设计。

<!----工艺内容---->

4.9 业务流程
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left',
title:'业务流程',
collapsible:true,
width:560,
height:550,
html:" <img src='图/5b.jpg' /> ",
bbar:[{
text:'放大',
handler:function(){
window.location.href="业务流程图.html";
}
}]
});
});
<!---业务流程----->
插入图片和文本，采用的Panel面板设计。

.4.10 招聘人才
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left',
title:'招聘信息',
collapsible:true,
width:560,
height:550,
items:[{
width:560,
height:220,
html:"<div class='left'>公司发展至今拥有一批资深的专业技术人员和先进的机器设备，是一家多年手板模型制作、工业产品开发设计的专业科技模型厂，是手板行业中最具有竟争力的，同时公司产品品质优异、交货快速、设计图纸和资料保密最好的公司。</div><div class='left'>我们设计和制作了各种各样的模型手板。手机、MP3、MP4、数码相机、电脑外壳、机箱、鼠标、U盘、读卡器、MD、液晶电视、加湿机、风扇、按摩器、电饭煲、电视机、音响、DVD机、榨汁机、空调面板、收录机，还有各种医疗器械、汽车零部件等等，不能尽述,在未来的新产品开发路上，我们期待与您携手并进，共同发展，共同进步！</div>",
}],
html:"<div class='right2'>暂无招聘信息</div><div class='left'><img src='图/4b.jpg'></div>"
});
});
插入图片,链接标题并用类设置字体，保留空格设置文本样式

4.11 联系我们
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left',
title:'联系我们',
width:560,
height:550,
collapsible:true,
html:"<img src='图/10b.png'>"

});
});
<!---联系我们----->
插入图片

总结
在此次实训中，从最开始的茫无头绪到现在的有话可说，我觉得自己成长了很多。最开始接到任务去学习最基本的实现时，还在害怕这么大的程序怎么可能写得出来。而现在看着自己的成果，虽有不足，却也处处洒下了泪与汗。我觉得自己虽已实现基本功能，但仍有很多不足之处。界面不够明亮，对框架的掌握还是不太熟悉。但是我相信，我以后会做得越来越好。期待下一次的努力和成功。团队的力量也是巨大的，我在此更学会了团结的重要性。
虽然期中出现了各种各样的我问题，在完成各自模块建立起程序后运行时，出现了很多错误，经过我长时间的修改，还是不能解决问题，无奈之下去请教老师，老师给我提供了许多帮助，经过仔细的检查和调试我最终吧问题大致都解决了，顺利的完成了程序的运行。
通天这次课程设计，我才体会带自己学到的还远远不够，而且不扎实，所以以后我要更深入的学习程序设计。;

附录源代码
主页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="Css/主页.css" />
<script type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="Ext/ext-all.js"></script>
</head>
<body>
<div id="bodym">
<div id="headm">
<!----网页头部---->
<img src="图/2b.jpg" align="left" /> <br/>
<font size="+3" >北京欣宸智和模型科技有限公司</font> </div>
<div id="head" style="margin-top:60px; margin-left:100px;"></div>
<div id="left" style="margin-top:10px; margin-left:100px;"></div>
<div id="right" style="margin-top:-340px; margin-left:675px;"></div>
<div id="buttom" style="margin-top:10px; margin-left:100px;"></div>
<div id="buttom2" style="margin-top:10px; margin-left:100px;"></div><br/><p align="center"><font size="-2">版权所有@2010 北京欣宸智和模型科技有限公司<br/> 技术支持：北京思络仕达教育科技有限公司</font></p> </div>
<script language="javascript" type="text/javascript">
Ext.onReady(function(){
new Ext.Panel({
renderTo:'head',
width:824,
height:270,
html:"<img src='图/1b.jpg'>",
bbar:[{
text:'首页',
handler:function(){
window.location.href="首页.html";
}
},"-",{
text:'公司新闻',
handler:function(){
window.location.href="公司新闻.html";
}
},"-",{
text:'关于我们',
handler:function(){
window.location.href="关于我们.html";
}
},"-",{
text:'工艺介绍',
handler:function(){
window.location.href="工艺介绍.html";
}
},"-",{
text:'业务流程',
handler:function(){
window.location.href="业务流程.html";
}
},"-",{
text:'招聘人才',
handler:function(){
window.location.href="招聘人才.html";
}
},"-",{
text:'联系我们',
handler:function(){
window.location.href="联系我们.html";
}
}]
});
});
Ext.onReady(function(){
new Ext.Panel({
renderTo:'left',
width:560,
height:340, collapsible:true,
html:"<img src='图/12.jpg' align='left'><br/><h1>公司简介</h1>
<br/>******************************************<br/><br/> 北京欣宸智和模型科技有限公司是为客户新产品<br/>开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。我们致力于为客户提供专业化的解决方案，致力于为客户创造效率更快，质量更好，成品更低的价值回报。北京欣宸智和模型科技有限公司是为客户新产品开发提供专业手板模型制作的科技欣公司。我们拥有工作经验丰富的工程师团队，先进的生产设备，完善的生产工艺，为您的新产品开发提供优质的服务。<br/><br/>
********************************************************************",
});
});
<!----公司简介---->
Ext.onReady(function(){
new Ext.Panel({
renderTo:'right',
title:'联系我们',
width:250,
height:340,
collapsible:true,
html:"<br/><p align='center'><b>联系方式</b></p>
<font size='-2'>*************************************************</font><table align='center'>
<tr><td width=60px>传真</td><td>010-12345678</td></tr><tr><td>座机</td><td>010-12345678</td>
</tr><tr><td>手机</td><td>15584757859</td></tr><tr><td>QQ</td><td>738299229</td></tr><tr><td>
联系人</td><td>吴灿亮</td></tr><tr><td>邮箱</td><td>wukan@</td></tr><tr><td>网址</td><td><a href=''></a></td></tr><tr><td>地址</td><td>
<br/>北京海淀西北旺韩家<br/>川50号院内</td></tr><tr><td></td><td></td></tr></table>"
});
});
<!----网页右侧---->
Ext.onReady(function(){
new Ext.Panel({
renderTo:'buttom',
width:824,
height:200,
collapsible:true,
html:"<marquee behavior='alternate' scrollamount='5' ><table><tr><td><a href='产品展示/产品.html'><img src='图/3b.jpg'></a></td><td><a href='产