web开发技术课程设计报告.docx
《web开发技术课程设计报告.docx》由会员分享，可在线阅读，更多相关《web开发技术课程设计报告.docx（12页珍藏版）》请在冰点文库上搜索。
web开发技术课程设计报告
《web系统设计》课程设计
学院：
工学院
专业：
网络工程
班级：
1401
姓名：
王乐
学号：
70
指导教师：
姬广永张珊珊
2016年7月1日
工学院课程设计评审表
学生姓名
王乐
专业
网络工程
年级
2014
学号
70
设计题目
响应式网站项目（辽宁陆海石油响应式网站）
评价内容
评价指标
评分
权值
评定
成绩
业务水平（含答辩）
有扎实的基础理论知识和专业技能；能够综合运用所学的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设计目的
熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。
培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。
网页是世界上最有价值的不动产之一。
人们在这个不足平米的空间内投资达数百万美元。
网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对外的脸面。
WEB站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB站点的链接，绕过主页而进入WEB的深层。
2设计要求
1．站点命名与结构
站点文件夹为辽宁陆海。
站点文件夹中所包含文件夹：
img（Images，存放图片文件），CSS（存放各部分的css文件）。
站点文件夹中所包含文件：
（首页）
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网站详细设计及实现
负责区域代码
HTML代码
最新动态
升级会员 