《2022年web开发技术课程设计报告.pdf》由会员分享，可在线阅读，更多相关《2022年web开发技术课程设计报告.pdf（23页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、web系统设计课程设计学院：工学院专业：网络工程班级： 1401 姓名：王乐学号： 70 精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 23 页 - - - - - - - - - - 指导教师：姬广永张珊珊2016 年 7 月 1 日精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 23 页 - - - - - - - - - - 工学院课程设计评审表学生姓名王乐专业网络工程年级2014学号
2、70设计题目响应式网站项目（辽宁陆海石油响应式网站）评价内容评价指标评分权值评定成绩业务水平 （含答辩）有扎实的基础理论知识和专业技能；能够综合运用所学的 HTML 、CSS 、JavaScript等知识和 HBuilder开发工具进行 WEB 站点的规划、设计与制作；能够根据网站规划，搜集、整理相关素材；独立进行实验工作，学会调试、发布、管理网站，并能运用所学知识和技能去发现与解决实际问题；主页版面内容、结构和链接设计清晰合理； 考虑页面整体布局、 视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。40课程设计报告( 设计说明书) 质量综述简练完整；结论严谨合理；实验正确，分析处理
3、科学；文字通顺，技术用语准确，符号统一，编号齐全，书写工整规范，图表完备、整洁、正确；结果有应用价值；工作中有创新意识；对前人工作有改进或突破，或有独特见解。30精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 23 页 - - - - - - - - - - 工作量、工作态度按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实30合计100指导教师评语精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - -
4、 - - - -第 4 页，共 23 页 - - - - - - - - - - 设计题目：响应式网站项目（辽宁陆海石油响应式网站）指导老师姬广永参加学生王乐，牟敦现，常发博，陈兵，王守栋设计目的综合运用所学的 HTML 及 CSS 、 JavaScript等知识，使用 WEB开发工具编辑网页， Photoshop 或 FireWorks 处理图形，制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。设计内容1、确定所要制作网站的类型、主题、规模以及要使用的技术。2、规划网站的栏目、风格，画出站点规划层次图，建立站点目录。3、根据网站规划，搜集、整理相关素材。4、对网站用到的文本、图片、动
5、画等多媒体素材进行处理。5、主页版面内容、结构和链接设计要清晰，醒目。6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。7、网站调试：网站各个页面完成后，对站点进行调试。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 23 页 - - - - - - - - - - web开发技术课程设计任务书8、网站发布：网站建设好后，发布到网站服务器。设计要求分组：每三至五人一组，自由组合；项目演示：以小组为单位，逐一演示本小组成员所做项目，并进行项目讲解；多人进行共同合作
6、开发，在项目答辩的过程中要明确解说每个人的分工任务， 并且课程设计报告主要介绍自己所做内容，要求实训中制作的网站和目标网站相似度在70% 以上， 以完成各个方面的的训练。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 23 页 - - - - - - - - - - 辽宁陆海石油响应式网站的设计目录辽宁陆海石油响应式网站的设计 . 错误 ! 未定义书签。1 设计目的 . 错误 ! 未定义书签。2 设计要求 . 错误 ! 未定义书签。3 网站整体规划. 错误 ! 未定义书签。4 网站详细设计及实
7、现 . 错误 ! 未定义书签。负责区域 . . 错误 ! 未定义书签。负责区域网页代码 . 错误 ! 未定义书签。负责区域 CSS代码 . 错误 ! 未定义书签。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 7 页，共 23 页 - - - - - - - - - - 1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。网页是世界上最有价值的不动产之一。人们在这个不足平米的空间内投资达数百万美元
8、。网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对外的脸面。 WEB 站点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB 站点的链接，绕过主页而进入 WEB 的深层。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 8 页，共 23 页 - - - - - - - - - - 2 设计要求1站点命名与结构站点文件夹为辽宁陆海。站点文件夹中所包含文件夹：img（Images，存放图片文件），CSS （存放各部分的 css 文件） 。站点文件夹中所包含文件： （首页）
9、2. 网站制作网站技术要求页面布局合理，色彩和谐，链接正确，图文并茂，制作的网站和目标网站相似度在70% 以上，以完成各个方面的的训精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 9 页，共 23 页 - - - - - - - - - - 练。3. 合作开发分为 3 到 5 人的小组，多人进行共同合作来完成此次实训的任务。小组内部分工合作，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的任务。3 网站整体规划1.讨论网站主题精品资料 - - - 欢迎下载 - - - - - - - - - -
10、- 欢迎下载 名师归纳 - - - - - - - - - -第 10 页，共 23 页 - - - - - - - - - - 本次实训要做的网站是辽宁陆海石油装备研究院有限公司的首页，其中的各种动画、过渡等都需要做出来。2.确定栏目和板块 1 ）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。 2 ）其次就应该考虑导航条的设置了。3）正文的框架设置（横向因素和纵向因素交错）在仔细研究过原版之后，再结合我们自己的想法，在草纸上画出了大体的栏目和板块。3.小组分工合作将整个页面分为三部分，分别是头部（一人负责）、尾部（一人负责）和主体内容（三人负责） 。我主要负责的是主题内容中最新动态区
11、域。4.使用的工具HTML 编辑软件：主要是HBuilder ，DreamWeaver 作辅助。浏览器：以使用谷歌浏览器Chrome浏览为主。辅助工具：屏幕截图工具FSCapture，CSS 、w3c标准 html5 手册精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 11 页，共 23 页 - - - - - - - - - - 5.网站整体布局框图如下：4 网站详细设计及实现负责区域代码 HTML代码最新动态 News头部产品成功最新尾部搜导横变定蒙定放定信版精品资料 - - - 欢迎下载 - - -
12、 - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 12 页，共 23 页 - - - - - - - - - - 伊朗石油公司代表前来我院参观洽谈今日，伊朗石油公司的客人来到我院进行石油项目的洽谈合作，院长戴克文热情的接见Read More第三套甲板吊机完成起吊试验精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 13 页，共 23 页 - - - - - - - - - - 2016年 3 月 10 日，虽然寒潮再度来袭，但依旧没有阻挡我院工作人员完成第三套甲
13、板 Read More第三套甲板吊机排线布绳工作顺利完成2016 年 3 月 3 日，第三套甲班吊机在总工程师张晓军的带领下，上午顺利完成拼稀Read More精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 14 页，共 23 页 - - - - - - - - - - 负责区域 CSS代码.newswidth: 100%;height: 550px;.news .xin1width: 136px;height: 50px; font-size: 32px; font-weight: 900; posit
14、ion: relative; top: 45px; left: 50%; margin-left: -78px;精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 15 页，共 23 页 - - - - - - - - - - .news .xin2color: #2A7EDA;width: 70px;height: 15px;color:#1EA8EA;font-size: 28px;position: relative;left:50%;top: 30px;margin-left: -35px;.news
15、 .dongmargin: 0 auto;position: relative;精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 16 页，共 23 页 - - - - - - - - - - top: 40px;.news ul liwidth:100%;height: 200px;overflow: hidden;/*display: block;*/.news ul lilist-style: none;float: left;.news .dong .kuai精品资料 - - - 欢迎下载 - -
16、- - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 17 页，共 23 页 - - - - - - - - - - width: 28%;height: 350px;border: 1px solid #C3C3C3;padding: 10px;.news .dong .kuai .picwidth: 100%;height: 50%;overflow: hidden;.news .dong .pic imgwidth: 100%;height: 100%;transition: all 2s ease;精品资料 - - - 欢迎下载 - - -
17、- - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 18 页，共 23 页 - - - - - - - - - - .news .dong li:hover imgtransform: scale;.readwidth:38% ;height: 10%;margin: 0 auto;color: #F86C0F;border: 2px solid #F86C0F;font-size: 16px;text-align: center、padding-top: 4%;.news .dong li:hover .read精品资料 - - - 欢迎下载 - -
18、 - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 19 页，共 23 页 - - - - - - - - - - background-color:#F86C0F;color: white;.news .dong li:hovercursor: pointer;color: #2A7EDA;精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 20 页，共 23 页 - - - - - - - - - - 网页效果图精品资料 - - - 欢迎下载 - - - -
19、 - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 21 页，共 23 页 - - - - - - - - - - 5 设计总结1 设计目的（一级标题：黑体小三，倍行距，段后1 行）（正文：段落起始空两个字符，宋体，小四（英文、数字： Times New Roman ，小四） ，倍行距）2 设计要求（正文：段落起始空两个字符，宋体，小四（英文、数字：Times New Roman ，小四） ，倍行距）3 网站整体规划（正文：段落起始空两个字符，宋体，小四（英精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 -
20、 - - - - - - - - -第 22 页，共 23 页 - - - - - - - - - - 文、数字： Times New Roman ，小四） ，倍行距）4 网站详细设计及实现(二级标题黑体四号，倍行距，段前行，独占行，左侧顶格书写)（三级标题：黑体小四，倍行距，段前行）(二级标题黑体四号，倍行距，段前行，独占行，左侧顶格书写)5 设计总结对整个课程设计做归纳性总结，并分析设计过程中的困难及如何解决的，最后提出展望。精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 23 页，共 23 页 - - - - - - - - - -