web开发技术课程设计报告范本模板.docx

上传人:b****6 文档编号:6326874 上传时间:2023-01-05 格式:DOCX 页数:11 大小:56.65KB
下载 相关 举报
web开发技术课程设计报告范本模板.docx_第1页
第1页 / 共11页
web开发技术课程设计报告范本模板.docx_第2页
第2页 / 共11页
web开发技术课程设计报告范本模板.docx_第3页
第3页 / 共11页
web开发技术课程设计报告范本模板.docx_第4页
第4页 / 共11页
web开发技术课程设计报告范本模板.docx_第5页
第5页 / 共11页
点击查看更多>>
下载资源
资源描述

web开发技术课程设计报告范本模板.docx

《web开发技术课程设计报告范本模板.docx》由会员分享,可在线阅读,更多相关《web开发技术课程设计报告范本模板.docx(11页珍藏版)》请在冰豆网上搜索。

web开发技术课程设计报告范本模板.docx

web开发技术课程设计报告范本模板

 

 

《web系统设计》课程设计

 

学院:

工学院

专业:

网络工程

班级:

1401

姓名:

王乐

学号:

2014011070

指导教师:

姬广永张珊珊

2016年7月1日

工学院课程设计评审表

学生姓名

王乐

专业

网络工程

年级

2014

学号

2014011070

设计题目

响应式网站项目(辽宁陆海石油响应式网站)

评价内容

评价指标

评分

权值

评定

成绩

业务水平(含答辩)

有扎实的基础理论知识和专业技能;能够综合运用所学的HTML、CSS、JavaScript等知识和HBuilder开发工具进行WEB站点的规划、设计与制作;能够根据网站规划,搜集、整理相关素材;独立进行实验工作,学会调试、发布、管理网站,并能运用所学知识和技能去发现与解决实际问题;主页版面内容、结构和链接设计清晰合理;考虑页面整体布局、视觉效果、页面尺寸和框架等因素,保持网站的整体设计风格一致。

40

课程设计报告(设计说明书)质量

综述简练完整;结论严谨合理;实验正确,分析处理科学;文字通顺,技术用语准确,符号统一,编号齐全,书写工整规范,图表完备、整洁、正确;结果有应用价值;工作中有创新意识;对前人工作有改进或突破,或有独特见解。

30

工作量、

工作态度

按期完成规定的任务,工作量饱满,难度较大;工作努力,遵守纪律;工作作风严谨务实

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.网站整体布局框图如下:

首页

头部header

产品服务header

成功案例

最新动态

尾部footer

搜索框

导航

横幅

变换

定位

蒙版

定位

放大

定位

信息

版权

4网站详细设计及实现

4。

1负责区域代码

4.1.1HTML代码

最新动态〈/div〉

〈divclass="xin2">News〈/div〉

〈ul>

〈imgsrc="img/3b8ec93770744ff4ad12e25ec4a200b1.jpg”/>

〈pstyle="text-indent:

2em;"〉今日,伊朗石油公司的客人来到我院进行石油项目的洽谈合作,院长戴克文热情的接见

〈/li〉

03%;”〉

〈divclass="pic”>

jpg”/>

第三套甲板吊机完成起吊试验〈/h4>

2em;”>2016年3月10日,虽然寒潮再度来袭,但依旧没有阻挡我院工作人员完成第三套甲板〈/p〉

〈divclass="read”〉ReadMore

〈/li〉

〈liclass="kuai”>

〈imgsrc="img/59e7aa4560b64d9eb50299e13c745f94.jpg”/〉

〈/div>

〈h4〉第三套甲板吊机排线布绳工作顺利完成

2em;”>2016年3月3日,第三套甲班吊机在总工程师张晓军的带领下,上午顺利完成拼稀

ReadMore

〈/li〉

4.1.2负责区域CSS代码

news{

width:

100%;

height:

550px;

news.xin1{

width:

136px;

height:

50px;

font-size:

32px;

font—weight:

900;

position:

relative;

top:

45px;

left:

50%;

margin-left:

-78px;

news.xin2{

color:

#2A7EDA;

width:

70px;

height:

15px;

color:

#1EA8EA;

font—size:

28px;

position:

relative;

left:

50%;

top:

30px;

margin—left:

-35px;

news。

dong{

margin:

0auto;

position:

relative;

top:

40px;

}

.news〉ul〉li{

width:

100%;

height:

200px;

overflow:

hidden;

/*display:

block;*/

news〉ul〉li{

list-style:

none;

float:

left;

}

news.dong.kuai{

width:

28%;

height:

350px;

border:

1pxsolid#C3C3C3;

padding:

10px;

.news.dong。

kuai。

pic{

width:

100%;

height:

50%;

overflow:

hidden;

}

.news。

dong。

picimg{

width:

100%;

height:

100%;

transition:

all2sease;

}

news.dongli:

hoverimg{

transform:

scale(1。

3);

}

.read{

width:

38%;

height:

10%;

margin:

0auto;

color:

#F86C0F;

border:

1pxsolid#F86C0F;

font-size:

16px;

text-align:

center、

padding-top:

4%;

news。

dongli:

hover.read{

background—color:

#F86C0F;

color:

white;

}

.news。

dongli:

hover{

cursor:

pointer;

color:

#2A7EDA;

}

4。

2网页效果图

5设计总结

 

1设计目的(一级标题:

黑体小三,1.5倍行距,段后1行)

××××××××××……(正文:

段落起始空两个字符,宋体,小四(英文、数字:

TimesNewRoman,小四),1.25倍行距)

2设计要求

×××××××××××××××××××××……(正文:

段落起始空两个字符,宋体,小四(英文、数字:

TimesNewRoman,小四),1。

25倍行距)

3网站整体规划

×××××××……(正文:

段落起始空两个字符,宋体,小四(英文、数字:

TimesNewRoman,小四),1.25倍行距)

4网站详细设计及实现

4.1××(二级标题黑体四号,1.5倍行距,段前0.5行,独占行,左侧顶格书写)

4。

1。

1××(三级标题:

黑体小四,1。

5倍行距,段前0.5行)

4。

2××(二级标题黑体四号,1。

5倍行距,段前0。

5行,独占行,左侧顶格书写)

5设计总结

对整个课程设计做归纳性总结,并分析设计过程中的困难及如何解决的,最后提出展望。

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 表格模板 > 合同协议

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1