web开发技术课程设计报告

1、满南仪申泉城学院web系统设计课程设计学院：工学院专业：网络工程班级：1401姓名：王乐学号：70指导教师：姬广永张珊珊2016年7月1日工学院课程设计评审表学生姓名王乐专业网络工程年级2014学号70设计题目响应式网站项目（辽宁陆海石油响应式网站）评价内容评价指标评分权值评士7E成绩业务水平（含答辩）有扎实的基础理论知识和专业技能；能够综合运用所学的HTMLCSSJavaScript等知识和HBuilder开发工具进行WEB占点的规划、设计与制作；能够根据网站规划，搜集、整理相关素材；独立进行实验工作，学会调试、发布、管理网站，并能运用所学知识和技能去发现与解决实际问题；主页版面内容、结构和

2、链接设计清晰合理；考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。40课程设计报告（设计说明书）质量综述简练完整；结论严谨合理；实验正确，分析处理科学；文字通顺，技术用语准确，符号统一，编号齐全，书写工整规范，图表完备、整洁、止确；结果有应用价值；工作中有创新意识；对前人工作有改进或突破，或有独特见解。30工作量、工作态度按期完成规定的任务，工作量饱满，难度较大；工作努力，遵守纪律；工作作风严谨务实30合计100指导教师评语设计题目：响应式网站项目（辽宁陆海石油响应式网站）姬广永王乐，牟敦现，常发博，陈兵，王守栋综合运用所学的HTM及CSSJavaScript等知

3、识，使用WEB开发工具编辑网页，Photoshop或FireWorks处理图形，制作出主题鲜明、结构清晰、图文并茂、具有专业水平的网站。1、确定所要制作网站的类型、主题、规模以及要使用的技术。2、规划网站的栏目、风格，画出站点规划层次图，建立站点目录。3、根据网站规划，搜集、整理相关素材。4、对网站用到的文本、图片、动画等多媒体素材进行处理。5、主页版面内容、结构和链接设计要清晰，醒目。6、考虑页面整体布局、视觉效果、页面尺寸和框架等因素，保持网站的整体设计风格一致。7、网站调试：网站各个页面完成后，对站点进行调试。8、网站发布：网站建设好后，发布到网站服务器。设计要求分组：每三至五人一组，自

4、由组合；项目演示：以小组为单位，逐一演示本小组成员所做项目，并进行项目讲解；多人进行共同合作开发，在项目答辩的过程中要明确解说每个人的分工任务，并且课程设计才艮告主要介绍自己所做内容，要求实训中制作的网站和目标网站相似度在70必上，以完成各个方面的的训练。web开发技术课程设计任务书目录辽宁陆海石油响应式网站的设计设计目的设计要求网站整体规划辽宁陆海石油响应式网站的设计错误 ! 未定义书签。错误 ! 未定义书签。错误 ! 未定义书签。错误 ! 未定义书签。网站详细设计及实现错误 ! 未定义书签。负责区域 .错误 ! 未定义书签。负责区域网页代码错误 ! 未定义书签。错误 ! 未定义书签。负责区

5、域CSS弋码1 设计目的熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。网页是世界上最有价值的不动产之一。人们在这个不足平米的空间内投资达数百万美元。网页对公司的影响比简单的电子商务增收方法大得多；网页也是公司对外的脸面。WEB占点就像一栋房子，它的每一个窗口都可以看成一扇门，人们可以沿着搜索引擎其他WEB占点的链接，绕过主页而进入WEB勺深层。2 设计要求1. 站点命名与结构站点文件夹为辽宁陆海。站点文件夹中所包含文件夹：img（Images,存放图片文件），CSS（存放各部分的css文件）

6、。站点文件夹中所包含文件：（首页）2. 网站制作网站技术要求页面布局合理，色彩和谐，链接正确，图文并茂，制作的网站和目标网站相似度在70%以上，以完成各个方面的的训练。3. 合作开发分为3到5人的小组，多人进行共同合作来完成此次实训的任务。小组内部分工合作，每个人都要有自己负责的板块。在竞争与合作中完成此次实训的任务。3网站整体规划1. 讨论网站主题页，其中的各种动画、过渡等都需要做出来。2. 确定栏目和板块1 ）首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。2 ）其次就应该考虑导航条的设置了。3）正文的框架设置（横向因素和纵向因素交错）在仔细研究过原版之后，再结合我们自己的想法，在草

7、纸上画出了大体的栏目和板块。3. 小组分工合作将整个页面分为三部分，分别是头部（一人负责）、尾部（一人负责）和主体内容（三人负责）。我主要负责的是主题内容中最新动态区域。4. 使用的工具HTM编辑软件：主要是HBuilder,DreamWeave作辅助。浏览器：以使用谷歌浏览器Chrome浏览为主。辅助工具：屏幕截图工具FSCapture,CSSw3c标准html5手册5.网站整体布局框图如下:4网站详细设计及实现负责区域代码HTML代码<sectionclass="news"><divclass="xin1">最新动态</

8、div><divclass="xin2">News</div><divclass="dong"><ul><liclass="kuai"><divclass="pic"><imgsrc="img/"/></div>vh4X尹朗石油公司代表前来我院参观洽谈</h4><pstyle="text-indent:2em;">今日，伊朗石油公司的客人来到我院进行石

9、油项目的洽谈合作，院长戴克文热情的接见v/p><divclass="read">ReadMore</div></li><liclass="kuai"style="margin:03%;"><divclass="pic"><imgsrc="img/"/></div>vh4>第三套甲板吊机完成起吊试验v/h4><pstyle="text-indent:2em;">20

10、16年3月10日，虽然寒潮再度来袭，但依旧没有阻挡我院工作人员完成第三套甲板</p><divclass="read">ReadMore</div></li><liclass="kuai"><divclass="pic"><imgsrc="img/"/></div><h4>第三套甲板吊机排线布绳工作顺利完成</h4><pstyle="text-indent:2em;">

11、;2016年3月3日，第三套甲班吊机在总工程师张晓军的带领下，上午顺利完成拼稀</p><divclass="read">ReadMore</div></li></ul></div></section>负责区域CSS弋码.newswidth:100%;height:550px;.news.xin1width:136px;height:50px;font-size:32px;font-weight:900;position:relative;top:45px;left:50%;margin-le

12、ft:-78px;.news.xin2color:#2A7EDA;width:70px;height:15px;color:#1EA8EA;font-size:28px;position:relative;left:50%;top:30px;margin-left:-35px;.news.dongmargin:0auto;position:relative;top:40px;.news>ul>liwidth:100%;height:200px;overflow:hidden;/*display:block;*/.news>ul>lilist-style:none;flo

13、at:left;.news.dong.kuaiwidth:28%;height:350px;border:1pxsolid#C3C3C3;padding:10px;.news.dong.kuai.picwidth:100%;height:50%;overflow:hidden;.news.dong.picimgwidth:100%;height:100%;transition:all2sease;.news.dongli:hoverimgtransform:scale;.readwidth:38%;height:10%;margin:0auto;color:#F86C0F;border:2pxsolid#F86C0F;font-size:16px;text-align:center、padding-top:4%;background-color:#F86C0F;color:white;.news.dongli:hovercursor:pointer;color:#2A7EDA;网页效果图5设计总结1设计目的（一级标题：黑体小三，倍行距，段后1行）XXXXXXXXXX（正文：段落起始空两个字符，宋体，小四（英文、数字：TimesNewRomap小四），倍行距）2设计要求XXXXXXXXXXXXXXXXXXXXX（正文：段落起始空两个字符，宋体，小四（