web开发技术课程设计报告Word文档下载推荐.docx
- 文档编号:18824212
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:11
- 大小:81.19KB
web开发技术课程设计报告Word文档下载推荐.docx
《web开发技术课程设计报告Word文档下载推荐.docx》由会员分享,可在线阅读,更多相关《web开发技术课程设计报告Word文档下载推荐.docx(11页珍藏版)》请在冰豆网上搜索。
评价内容
评价指标
评分
权值
评定
成绩
业务水平(含答辩)
有扎实的基础理论知识和专业技能;
能够综合运用所学的HTML、CSS、JavaScript等知识和HBuilder开发工具进行WEB站点的规划、设计与制作;
能够根据网站规划,搜集、整理相关素材;
独立进行实验工作,学会调试、发布、管理网站,并能运用所学知识和技能去发现与解决实际问题;
主页版面内容、结构和链接设计清晰合理;
考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。
40
课程设计报告(设计说明书)质量
综述简练完整;
结论严谨合理;
实验正确,分析处理科学;
文字通顺,技术用语准确,符号统一,编号齐全,书写工整规范,图表完备、整洁、正确;
结果有应用价值;
工作中有创新意识;
对前人工作有改进或突破,或有独特见解。
30
工作量、
工作态度
按期完成规定的任务,工作量饱满,难度较大;
工作努力,遵守纪律;
工作作风严谨务实
合计
100
指导教师评语
设计题目:
指导
老师
姬广永
参加
学生
王乐,牟敦现,常发博,陈兵,王守栋
设计
目的
综合运用所学的HTML及CSS、JavaScript等知识,使用WEB开发工具编辑网页,Photoshop或FireWorks处理图形,制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。
内容
1、确定所要制作网站的类型、主题、规模以及要使用的技术。
2、规划网站的栏目、风格,画出站点规划层次图,建立站点目录。
3、根据网站规划,搜集、整理相关素材。
4、对网站用到的文本、图片、动画等多媒体素材进行处理。
5、主页版面内容、结构和链接设计要清晰,醒目。
6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。
7、网站调试:
网站各个页面完成后,对站点进行调试。
8、网站发布:
网站建设好后,发布到网站服务器。
要求
分组:
每三至五人一组,自由组合;
项目演示:
以小组为单位,逐一演示本小组成员所做项目,并进行项目讲解;
多人进行共同合作开发,在项目答辩的过程中要明确解说每个人的分工任务,并且课程设计报告主要介绍自己所做内容,要求实训中制作的网站和目标网站相似度在70%以上,以完成各个方面的的训练。
《web开发技术》课程设计任务书
辽宁陆海石油响应式网站的设计
1设计目的
熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力,提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足0.1平米的空间内投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多;
网页也是公司对外的脸面。
WEB站点就像一栋房子,它的每一个窗口都可以看成一扇门,人们可以沿着搜索引擎其他WEB站点的链接,绕过主页而进入WEB的深层。
2设计要求
1.站点命名与结构
站点文件夹为辽宁陆海。
站点文件夹中所包含文件夹:
img(Images,存放图片文件),CSS(存放各部分的css文件)。
站点文件夹中所包含文件:
index.html(首页)
2.网站制作
网站技术要求页面布局合理,色彩和谐,链接正确,图文并茂,制作的网站和目标网站相似度在70%以上,以完成各个方面的的训练。
3.合作开发
分为3到5人的小组,多人进行共同合作来完成此次实训的任务。
小组内部分工合作,每个人都要有自己负责的板块。
在竞争与合作中完成此次实训的任务。
3网站整体规划
1.讨论网站主题
本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页,其中的各种动画、过渡等都需要做出来。
2.确定栏目和板块
1)首先要考虑整个网页的长和宽,以及长度和宽度之间的比例。
2)其次就应该考虑导航条的设置了。
3)正文的框架设置(横向因素和纵向因素交错)
在仔细研究过原版之后,再结合我们自己的想法,在草纸上画出了大体的栏目和板块。
3.小组分工合作
将整个页面分为三部分,分别是头部(一人负责)、尾部(一人负责)和主体内容(三人负责)。
我主要负责的是主题内容中最新动态区域。
4.使用的工具
HTML编辑软件:
主要是HBuilder,DreamWeaver作辅助。
浏览器:
以使用谷歌浏览器Chrome浏览为主。
辅助工具:
屏幕截图工具FSCapture,CSS、w3c标准html5手册
5.网站整体布局框图如下:
4网站详细设计及实现
4.1负责区域代码
4.1.1HTML代码
<
sectionclass="
news"
>
<
divclass="
xin1"
最新动态<
/div>
xin2"
News<
dong"
<
ul>
<
liclass="
kuai"
<
pic"
<
imgsrc="
img/3b8ec93770744ff4ad12e25ec4a200b1.jpg"
/>
h4>
伊朗石油公司代表前来我院参观洽谈<
/h4>
pstyle="
text-indent:
2em;
"
今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见<
/p>
read"
ReadMore<
/li>
style="
margin:
03%;
img/a7bdec4def4146b88e1430bc7fc0ab72.jpg"
第三套甲板吊机完成起吊试验<
2016年3月10日,虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板<
img/59e7aa4560b64d9eb50299e13c745f94.jpg"
第三套甲板吊机排线布绳工作顺利完成<
2016年3月3日,第三套甲班吊机在总工程师张晓军的带领下,上午顺利完成拼稀<
/ul>
/section>
4.1.2负责区域CSS代码
.news{
width:
100%;
height:
550px;
}
.news.xin1{
136px;
50px;
font-size:
32px;
font-weight:
900;
position:
relative;
top:
45px;
left:
50%;
margin-left:
-78px;
.news.xin2{
color:
#2A7EDA;
width:
70px;
15px;
#1EA8EA;
28px;
50%;
30px;
-35px;
.news.dong{
margin:
0auto;
40px;
.news>
ul>
li{
width:
100%;
height:
200px;
overflow:
hidden;
/*display:
block;
*/
list-style:
none;
float:
left;
.news.dong.kuai{
28%;
350px;
border:
1pxsolid#C3C3C3;
padding:
10px;
.news.dong.kuai.pic{
overflow:
.news.dong.picimg{
transition:
all2sease;
.news.dongli:
hoverimg{
transform:
scale(1.3);
.read{
38%;
10%;
#F86C0F;
1pxsolid#F86C0F;
16px;
text-align:
center、
padding-top:
4%;
hover.read{
background-color:
#F86C0F;
white;
hover{
cursor:
pointer;
4.2网页效果图
5设计总结
1设计目的(一级标题:
黑体小三,1.5倍行距,段后1行)
×
……(正文:
段落起始空两个字符,宋体,小四(英文、数字:
TimesNewRoman,小四),1.25倍行距)
2设计要求
3网站整体规划
4网站详细设计及实现
4.1×
(二级标题黑体四号,1.5倍行距,段前0.5行,独占行,左侧顶格书写)
4.1.1×
(三级标题:
黑体小四,1.5倍行距,段前0.5行)
4.2×
5设计总结
对整个课程设计做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- web 开发 技术 课程设计 报告