企业网页设计报告

《企业网页设计报告》由会员分享，可在线阅读，更多相关《企业网页设计报告（28页珍藏版）》请在装配图网上搜索。

1、2017 2018学年第一学期期末考试网页设计与制作实践考核企业网站设计说明书项目名称：万豪装饰企业网站设计专 业:学 号:姓 名:网络工程* * * *任课教师：刘艳2017年12月26日考核项目及要求项目：万豪装饰企业网站设计1 考 核要点1) 系统设计：完成完整的静态网站2) 主题明确、内容健康；3) 页面布局合理，视觉效果好；4) 网页内容样式设计合理；5) 代码书写符合标准规范；6) 具备实际应用价值与创新。2 作品要求学生根据自选的主题完成网站设计，并撰写设计说明书。目录1 选题的目的与意义 11 。 1 选题目的 11.2 选题意义 12 选用的技术及技术背景 12.1 选用的技

2、术 12 。 2 技术背景 13 网页首页的结构设计 24 网站详细设计 34.1 首页设计 34。 2 子网页设计 125项目测试与浏览器兼容性 136 总结 13附录 141 选题的目的与意义1 1 选题目的制作一个好的网页需要经过这些步骤： 确定主题和功能、 搜集材料、 规划网站、 选择合适的制作工具、 制作网页。 为了可以检验自己和提高对页面设计的认识以及对基础知识的掌握和综合利用 , 我选择了万豪装饰企业的网站设计.1.2 选题意义网页设计与制作是一门动手能力很强的课程， 掌握知识的关键在于实践， 这次选题， 最重要的意义在于走出书本, 通过一个小项目 , 培养我们的具有一定的专业素

3、质，和综合应用的能力 . 现如今很多网页都具有商业价值，因此一个好的网页必须给人舒适的感觉， 通过自己的设计和制作， 不仅让我们发现自己专业知识上的不足，也能加强我们对网页各个细节的优化，以达到更加好的效果, 加强我们的专业设计能力。2 选用的技术及技术背景2.1 选用的技术HTM、L CSS、 JavaScript 、 PS2。 2 技术背景HTML:又叫超文本标记语言，标准通用标记语言下的一个应用。从HTMLM发明开始， 样式就以各种形式存在。 不同的浏览器结合它们各自的样式语言为用 户提供页面效果的控制。超级文本标记语言文档制作不是很复杂，但功能强大， 支持不同数据格式的文件镶入，拥有：

4、简易性、可扩展性、平台无关性、通用性 等特点。是一种标记语言 .CSS: 层叠样式表（英文全称： Cascading Style Sheets ）是一种用来表现HTM L（标准通用标记语言的一个应用）或 XM L （标准通用标记语言的一个子集） 等文件样式的计算机语言。CSS仅可以静态地修饰网页，还可以配合各种脚本 语言动态地对网页各元素进行格式化。JavaScript:JavaScript 是一种直译式脚本语言，是一种动态类型、弱类基于原型的语言 , 内置支持类型。 是一种属于网络的脚本语言 , 已经被广泛用于Web 应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏 览

5、效果。通常JavaScript脚本是通过嵌入在HTM叶来实现自身的功能的。PS: Adobe Photoshop,简称 “PS，是由 Adobe Systems开发和发行的图 像处理软件。主要处理以像素所构成的数字图像.使用其众多的编修与绘图工具， 可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、 出版等各方面都有涉及。从功能上看，该软件可分为图像编辑、图像合成、校色 调色及功能色效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等；也可进行复制、去除斑点、修 补、修饰图像的残损等。3网页首页的结构设计网页结构设计是网站设计的

6、重要组成部分。 这次万豪装饰企业的网页的首页 结构设计采用扁平结构的物理结构，因为这是个小型的网页设计。对于装饰公司 的首页，最重要的是吸引浏览者的眼球，把公司的最新动态、联系方式、优秀作 品、优秀团队都展现出来.还要能够链接公司方方面面的具体信息：首页、关于 我们、新闻中心、装饰实例、万豪团队、装饰指南、一品管家、宅急修、装修订 单。一个企业的首页设计，需要将最新的产品放在网页中最显眼的位置 ，还要将 特色地成品设计轮流展播，以便访客能够很好地了解企业的文化。 网页上一定要 明确的标注联系方式。网页还添加购物车功能，方便客户收藏自己喜欢的设计。先用ps进行网页模块的规划，选定好颜色地搭配，测

7、量好各个模块的大小.接下 来再用HTM殴计网页。通过分析，我规划出模块大致分为下列四部分：如图 1。1图1。1万豪企业网页的结构设计4网站详细设计4。1首页设计首页图片效果图：；11：弁点射之曲:：转手费开索蕾懂Demi anonWanHao:二会科闻+心蒋忖等、Eg 二一品言花*JT 土成功案例nnwE万弃力区君一花“洋权房儿电居03-25J卜万硝f饰用耐伶讲宣苜砧管彝（EHHJ一之籍号五恫0CJ-io卜 UiiSi+ ：,JJ-：Jj卜,，咕工Jk超亡土为运医学才中其（E3-1?卜1P脚缰林厢翻襁（J3-W?中野将喷林学口嚼信学去指言叁以问3盘棒浊打卜方春空图立吧葡bt!4H至E京三卜i哥

8、希广结*属摩芹宝芭军因缰r千福关专百久月工 rk-qvit卜子青红应池右抖而渊E呈木擢百了赶y在峡调营请ti盥是原可什出庭5回到我f RitT广7倒也f 后县停-L电曲之皑宾体里因介用三宝用三 在若AVCBenQ购名：理包股会：a.t-dtiFJkfi主至作品;长邮南髓，1QM常 中 央南醺叫1名就物取.东国花豌中 我姓名；4日ItIW ：秘tiftM主去信上：行窜亡方走，粕标7中 出在在、叁山庭选用更一事女在充会中 出驻姓名：业隹召爵；育郎日1千中主要冲2：小碗H庭.拒景寺口 虫用而，骨有芸品I事.市彳著亍彳【 司王士名：立由堂*揖：百才仁水中主娈*慕：京都南或近、柜家书士 史笈君 lKS1

9、1h东与工是主二, 丸肚噫X /SU5mwn技3G0T GAI-AXV 11 BI9STAR入口”1&1 c LL3、vr. ruhM. at. th. All Aifhu Amh*4 e依M口 言f 万苦It)Tl?整计再那必荀曳，母知此5 .-dk k? ZiS.-iiifl.i Jl -匕三3惠$日工马,，W a：E用不洁1、第一部分：网页的顶部，包含企业logo ,顶部导航，把他们放在一个head盒子里面大小为：1366* 85部分css样式:。head width : 1366 px；height : 85px; background : url(. 。/img/topimg 。jp

10、g) no-repeat center top ； position : relative ;o head。right -Hnk width : 260 px;height : 85px；margin-bottom : 4px;position : absolute ;top : 0;right : 0;效果如下图：xr h虻壮,加祝|询WanHeo图4.12、第二部分：企业的导航设计一个nava盒子，为每个小li标签设置大小134*40：部分css样式：# nava width : 1366px;height : 40px;# nava #navwidth : 1366px;height :

11、 40px；margin: 0 ；margin-bottom: 4px;font -family :微软雅黑;nava #nav ul lifloat: left ； /*/ 让他们横排 / position ： relative ；width: 134.6px;height ： 40px ；margin-top ： 0px;margin left: 2px ；background-color ： ccc ；#nava nav ul li adisplay: block ； /*/ 超链接 a 是行内元素, 没宽高什么的 */ padding ： 0 13 。 92578px; /*width

12、: 90px;*/text-align: center ；height: 40px;line-height: 40px;/ 行高和 line-height 相等则居中 */text-decoration ： none ；color ： 000；/*font-size ： 14px ； */ nava #nav ul li a ： hover background color: fff; color: 000; nava nav ul li:hover a background-color: #fff ； color ： #000；# nava #nav ul li ul li width :

13、89px;float : none;/ *不让他们横排* /background-color : #fff ；/ * margin-top : 2px ； * /效果图如下：于奸断! 凶工口 才不融 万声杂 蜀魅耳旺一 ME4*d型号订下图4.23、第三部分：内容由于内容比较多，而且大局呈现左右分布，所以先建立一个content的大盒 子，再建立一个conleft和一个conright的盒子，通过子决父相，让conright盒子 在content盒子的右部分。部分css样式：# content width : 1366 px;position : relative ;height : 1300

14、 Px ;#content #conleft position : absolute ;left :0;#content # conright width : 340 px;height : 1280 px;/*border: 1px solid darkgreen;*/margin -left : 30px；border-left : 1px solid # ccc;absolutepositionright : 0;top : 10px ； (1) Conleft包含成功案例、新闻中心、团队风采三部分：成功案例部分：写在succes媪子，大小为：957* 483,文字部分放在盒子 sc1中

15、，图片放在scimg盒子里面效果图如下：成功案例,二7二图4。3新闻中心部分：是左右布局，先用 css固定news盒子大小：975* 376,再将盒子news_left、news_right放在盒子里面。news_left里面有轮播图，通过css样式和js实现轮播，而且这部分展出儿童房设计，再添加一个盒子写出相应文字。news_right,为了实现比较好的效果，我在里面建立两个盒子一个放标题，一个方内容，通过css实现比较美观的效果.轮播js代码见附录，效果图如下：力新闻中心a万豪空阍装军手正于等就事即阜普(小、；下万东转年量续装施济某m战吉冠C 03-24)A建康军玛如耳三(。务A文，设7

16、(O3J3;支号工常E：法0密臣工相皆：吟心口国单二M项土77字Q9第后早才用言 0；-25上中国程学及札。蹴居学术报哥.03-25；RE图4。4团队风采部分：我设计了两个大盒子：conleft_bet和tem, conleft_bet主要写团队风采，和实现盒子的圆弧角度。为了实现左右分布，tem里面存在三个大盒子，前两个盒子在左边上下分布，在 tem的左边，右边通过子决父相放另外装 有内容的两个盒子。最终实现效果如下：-MChtml - / css” / metacharset” UTF 8 / titlelinkrel =”stylesheettype =text/csshref =” c

17、ss/wanhao 。linkrel =stylesheettype =” text/csshref =”css/lunbo.css / script src =js/lunbojs type =text/javascript ”charset=utf 8” / headbodydiv class =head” !img src=img/topimg.jpgdiv class =right-link ； a href = # 加入收藏 /aspan | /spana href = none” 投诉建议联系我们/ a/div / div ul 首页 li a href =” introducti

18、on.html关于我们/ li li a href =”新闻中心 li a href =”装饰实例/a a href = ”万豪团队/ a /li 装饰指南/ a li a href =# 一品管家/a /li li 宅急修/ a / li li 装修订单/a li /li /ul/div /div div id =” content div id =conleft ” div id =success div class =” sc1” 成功案例&emsp； emsp; / span spanclass =sucf2 ” Success Case / span/ div /div div cl

19、ass =” banner” div class =current img src =” img/ertong.jpg width =” 454px”height =” 314/ /div div class =” pic img src =img/lunbo2 。 jpg ” width =” 454px”height =” 314” / / div img src =img/lunbo3.jpg width =” 454px”height =” 314/ / div div class =” pic ” /div div class =” pic /div ol id =button li

20、 class =” crurrent ” 1/ li 2 li class =” but ” 3 / li li class =but 4div class =news_left_word ” 万振逍遥苑“蝶恋花”样板房 - 儿童房img src =img/jiantou.jpg ” / / div &ensp； &emsp新闻中心/ span a href =” # MORE/div div class =news_right_content div class =newbox” 万豪空间装饰荣获市装协多项荣誉   （03 25） /a a href =”万豪装饰健康装饰讲堂首战告

21、捷  （ 03 24） /div 健康装饰有知可识 （ 03-18） div class =” newbox” a href =# 文化与设计 ； （03-13 ） /a/div a href =# 宋春红应邀中科大09家居学术报告  （03-12） /div a href =” 中国科学技术大学 09 家居学术报告  （0325）/a/div div class =newbox a href =# 中国科学技术大学 09 家居学术报告 nbsp; （03-25）/ a /div / div div class =” conleft_bet di

22、v class =conleft_bet_left ” 团队风采 /div div class =teammore” a href =# ” MORE/div /div img src =img/pople.jpg / /div div class =bwrd div class =name 姓名 : 龚成慧 /divdiv class =name 主要作品：长春都市豪庭、柏景湾、中/ div 央花园、蜀 山明筑别墅、东海花园空中 /div 别墅/div img src =img/pople 。 jpg ” / div class =” bwrd” div class =name” 姓名 ：

23、龚成慧 / p div class =” name” 职务 ： 首席设计师 / p/ div 主要作品：长春都市豪庭、柏景湾、中/divdiv class =name 央花园、蜀山明筑别墅、东海花园空中 div class = name另JU div class =bimg div class =name 姓名：龚成慧 div class =” name” 职务 : 首席设计师/ div 主要作品：长春都市豪庭、柏景湾、中/div div class =” name” 别墅 / div / div div class =bimg img src =” img/pople.jpg ” / / d

24、iv div class =” name”姓名：龚成慧 / p / div |R务：首席设计师 /div div class =” name” 主要作品: 长春都市豪庭、柏景湾、中 / div 央花园、蜀山明筑别墅、东海花园空中/divdiv class =name墅 / div/div div id =” conright ” img src =img/conrig1.jpg /span class =t1 ” 装修须知 / span div class =” whwd&ensp； a href =# ” 万豪空间装饰荣获市装协多项荣誉 / a / div ensp; a href =”万豪

25、装饰健康装饰讲堂首战告Jt ensp； a href =” # 健康装饰有知可识 ensp； a href =” #” 文化与设计/a / div ensp; a href =”宋春红应邀中科大09家居学术报告/a 更多 / div div class =top3 ” img src =” img/con2 。 jpg width =40px ” height =” 27px” /   在线调查 div class =” top4 请问通过什么途径访问到我们/div 网站的？ / div input type =radio / 网络搜索 / div div class =” inp1

26、 input type =” radio ” / 友情链接/ div div class =inp1 新闻报纸等媒体/ div input type =radio / 通过别人介绍 / div input type =radio ” / 其他 / div /div div class =top6 /div div class =top8 img src =” img/iulog1 。 jpg ” / a href =# img src =img/iulog2.jpg / div class =log a href =”#img src =img/iulog3.jpg” / /a a href

27、=”#”/ a div class =log ” a href = ” img src =img/iulog6.jpg / / a div class =log ” / a img src =img/iulog8 。 jpg / /a/div /div /div / div Copyright emsp;?2009&emsp； www。 &emsp； ALL Rights Reserved版权所有&ensp；  合肥万豪装饰有限公司/div / body/ html 2、Js代码:window.onload=function () var current_index=0;var ti

28、mer=setInterval (autoChange,1000) ；var button_lis=document.getElementById(button )。getElementsByTagName(li ) ;var pic_divs=document 。 getElementById ( banner_pic )。 getElementsByTagName( div );for(var i=0； i button_lis 。length ; i+) button_lisi 。 onmousemove=function () clearInterval (timer ) ;if (

29、i!=current_index ) button_liscurrent_index 。 style.background= ” but;for(var i=0； ipic_divs.length;i+)pic_divs i 。className=pic_divsi.className.replace(current ，” pic ” ) ；button_lis i .className=button_lisi .className 。 replace ( current, ” but ) ;if ( button_lisi =this)this 。 className+= current ”

30、;pic_divsi.className+= current ”;button_lis i 。 onmouseout=function() timer=setInterval(autoChange,1000 ) ;function autoChange( ) +current_index ；if(current_index=button_lis 。length ) current_index=0;for (var i=0 ； ibutton_lis.length ； i+) if ( i=current_index ) button_lisi.className= ” currentpic_d

31、ivs i 。 className=current else button_lisi . className=” but ”； pic_divsi 。 className=pic ”;2017-2018学年度第一学期期末考试网页设计与制作实践考核成绩报告单排课编号：(2017-2018-1 ) -B080329-00112-014批阅日期：2017 年 12 月 30姓名* *班级*学号* *评价项目评分标准分值得分备注主题明确、内容健康根据选题情况酌情给分10贞囿布局合理正确使用div+css进行布局，样 式合理10视觉效果好颜色搭配合理，视觉效果好20网页内容样式设计使用样式表（css）对表格或字、 链接进行修饰，使页面既能统一 风格，又可突出主题201代码设计符合标准，命名规范20代码书写符合标准实际应用价值与创新网站有实际意义和实际应用价 值，具备创新点和先进性10设计说明书设计说明书表述清晰，内容完整，格式正确。10合计100考核成绩任课教师签字复核人 签字