计算机网页 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 与制作论文示例. 内蒙古科技大学 本科生毕业设计说明书(毕业论文) 题 目:三星手机网站前台的设计及实现 学生姓名: 学 号: 专 业:计算机科学与技术 班 级: 指导教师:张静 内蒙古科技大学毕业设计说明书(毕业论文) 三星手机网站前台的设计及实现 摘 要 网站是网络信息的主要承载者，是人们获取网络信息的主要渠道。企业网站的分类方式多种多样，根据功能可分为宣传型、客户服务型、电子商务型。此次设计主要研究的是宣传型企业网站建设。通过网站将产品信息的具体情况以及网站的最新动态展示给浏览者，不仅增加了对企业及产品的宣传力度，而且增加了最新信息和最新动态的时效性，以便人们掌握第一手信息。在设计过程中用到了HTML、DIV+CSS、JavaScript等开发语言，开发软件则用到了DreamweaverCS6 和Flash CS5.5，经过对网站的需求 分析 定性数据统计分析pdf销售业绩分析模板建筑结构震害分析销售进度分析表京东商城竞争战略分析 、总体设计、详细设计和测试，最终通过首页、产品分类页、产品概述页、产品功能页、规格参数页、注册页、登录页完成了三星手机网站的前台设计及实现。 关键词:网站设计;div+css;javascript;三星 I 内蒙古科技大学毕业设计说明书(毕业论文) Design and Implementation of Samsung Mobile Phone Website Interface Abstract The website is the main bearer network information, is the mainchannel for people to obtain network information.Classification of enterprise website is varied, according to thefunction can be divided into propaganda type, customer service,electronic commerce.The main research of this design is the propaganda enterprise website construction.Through the web site to show product information and website news to visitors,Not only adds to the enterprise and the product propaganda, but also increase the latest information and updates the timeliness, so that people can get the first hand information.In the design used in HTML, DIV + CSS, JavaScript, such as development language,developing software is used to DreamweaverCS6 and Flash CS5.5.After the site requirements analysis, overall design, detailed design and testing, finally through the home page, product classification, product overview pages, product features, specifications parameters pages, registration page, login page completed at the front of samsung mobile website design and implementation. Key words: website design;div+css;javascript;samsung II 内蒙古科技大学毕业设计说明书(毕业论文) 目 录 摘 要 ......................................................................................................................................... I Abstract ...................................................................................................................................... II 第一章 引 言 .............................................................................................................................1 1.1 网站开发背景 .............................................................................................................1 1.2 网站开发目的 ...........................................................................................................1 1.3 需求分析 .....................................................................................................................2 第二章 开发语言和工具的介绍 ...............................................................................................3 2.1 开发语言 .....................................................................................................................3 2.1.1 HTML语言........................................................................................................3 2.1.2 DIV+CSS布局综述...........................................................................................3 2.1.3 网页特效脚本语言JavaScript..........................................................................4 2.2 开发工具 .....................................................................................................................4 2.2.1 Dreamweaver CS6 ..............................................................................................4 2.2.2 Flash CS5 ........................................................................................................5 第三章 网站的总体设计 ...........................................................................................................6 3.1 网站色彩设计 .............................................................................................................6 3.1.1 确定网站的主题色 ...........................................................................................6 3.1.2 蓝色的信息量与网页表现力 ...........................................................................6 3.2 网页版式设计 .............................................................................................................7 3.3 网站的组织结构 .........................................................................................................7 第四章 详细设计 .......................................................................................................................9 III 内蒙古科技大学毕业设计说明书(毕业论文) 4.1 使用Dreamweaver创建站点 .....................................................................................9 4.2 首页 ...........................................................................................................................10 4.2.1 首页布局实现 .................................................................................................10 4.2.2 顶部header的实现 ........................................................................................12 4.2.3 主体main的实现 ...........................................................................................14 4.2.4 使用 4.3 首页特效的实现 1、首页的亮点其中之一在于图片滚动那块，这一块通过图片自由滚动传递最新产品 的信息，网页图片自动切换效果是通过js代码来实现的。如图4.7所示。 16 内蒙古科技大学毕业设计说明书(毕业论文) 图4.7 js实现图片滑动 实现图片自动切换的程序代码: (1)html代码: (2)在html中用到的js代码，代码先定义了一个数组，用来存放循环显示的图片 地址，然后有定义了一个存放按钮的ID编号。通过函数function loopShow(d1)设置显示 当前图片和下一张图片。通过设定定时器的时间，自动显示下一张图片。js代码如下: var scorll_img=new Array(); scorll_img[0]="images/dd_scroll_1.jpg"; 17 内蒙古科技大学毕业设计说明书(毕业论文) scorll_img[1]="images/dd_scroll_2.jpg"; scorll_img[2]="images/dd_scroll_3.jpg"; scorll_img[3]="images/dd_scroll_4.jpg"; /*按钮的ID编号*/ var scroll_number=new Array(); scroll_number[0]="scroll_number_1"; scroll_number[1]="scroll_number_2"; scroll_number[2]="scroll_number_3"; scroll_number[3]="scroll_number_4"; var NowFrame = 1; //最先显示第一张图片 var MaxFrame = 4; //一共四张图片 function loopShow(d1){ if(Number(d1)){ NowFrame=d1; //设当前显示图片 } for(var i=1;i<(MaxFrame+1);i++){ if(i==NowFrame){ document.getElementById("dd_scroll").src =scorll_img[i-1]; //显示当前图片 document.getElementById(scroll_number[i-1]).className="scroll_number_over"; // 设置当前按钮的CSS样式 } else{ 18 内蒙古科技大学毕业设计说明书(毕业论文) document.getElementById(scroll_number[i-1]).className="scroll_number_out"; } } if(NowFrame == MaxFrame){ //设置下一个显示的图片 NowFrame = 1; } else{ NowFrame++; } //var theTimer=setTimeout('loopShow()', 3000); //设置定时器，显示下一张图片 } var theTimer=setInterval('loopShow()', 3000); //设置定时器，显示下一张图片 2、首页右侧浮动的图片也从整体丰富了首页，他可以随着页面滚动而滑动。如图4.8所示。 图4.8 右侧浮动窗口 实现这样特效的代码如下: (1)在css中确定右侧浮动图片的位置，通过html来实现。 19 内蒙古科技大学毕业设计说明书(毕业论文) (2)右侧随鼠标滚动的广告图片在js代码中这样实现: var rightT; var rightR; var objRight; var rightWidth; function place(){ objRight=document.getElementById("right"); rightWidth=document.getElementById("right1").width; if(objRight.currentStyle){//IE浏览器 rightT=parseInt(objRight.currentStyle.top); rightR=parseInt(objRight.currentStyle.right); } else{//fireFox浏览器 rightT=parseInt(document.defaultView.getComputedStyle(objRight,null).top); rightR=parseInt(document.defaultView.getComputedStyle(objRight,null).right); } } function move(){ objRight.style.top=rightT+parseInt(document.documentElement.scrollTop)+"px"; 20 内蒙古科技大学毕业设计说明书(毕业论文) objRight.style.left=parseInt(document.documentElement.scrollLeft)+parseInt(document.d ocumentElement.clientWidth)-rightR-rightWidth+"px"; document.getElementById("dd_close").style.left="63px"; } window.onload=place; window.onscroll=move; /*右侧随鼠标滚动的广告图片关闭*/ function dd_close(){ var objRight=document.getElementById("right"); objRight.style.display="none"; } 3、首页底部也能看到加了特效后的网站新闻版块块，它是以循环垂直向上滚动的文 字特效传递网站最新新闻、最新动态、最新活动等最新资讯，当鼠标移动到区域内时新 闻滚动停止，移开是继续滚动，这也是通过js代码完成的。如图4.9所示。 图4.9 新闻滚动 实现代码: 21 内蒙古科技大学毕业设计说明书(毕业论文) (1)html引入新闻版块，在css中确定好网站新闻版块的样式、文字滚动区域的大小以及字体颜色、大小。具体的html代码如下: (2)js实现网站新闻循环垂直向上滚动的文字特效，通过函数设置向文字上滚动速度、定时器、鼠标移上时清除定时器达到滚动停止的目的以及鼠标移开时重设定时器，继续滚动。代码如下: var dome=$("dome"); var dome1=$("dome1"); var dome2=$("dome2"); var speed=50; //设置向上滚动速度 dome2.innerHTML=dome1.innerHTML //复制dome1为dome2 function moveTop(){ if(dome2.offsetTop-dome.scrollTop<=0) //当滚动至dome1与dome2交界时 dome.scrollTop-=dome1.offsetHeight //dome跳到最顶端 else{ dome.scrollTop++ } } var MyMar=setInterval(moveTop,speed) //设置定时器 dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的 dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}//鼠标移开时重设定时器，继续滚动 4、首页还有弹出窗口这一亮点，它的加入使得页面更加醒目。如图4.10所示。 23 内蒙古科技大学毕业设计说明书(毕业论文) 图4.10 弹出窗口的实现 实现代码: window.open('open.html','','top=0,left=200,width=500,height=327,scrollbars=0,resizable=0'); 4.4 首页效果图 经过设计后最终完成的效果图，如图4.11所示。 24 内蒙古科技大学毕业设计说明书(毕业论文) 图 4.11首页效果图 25 内蒙古科技大学毕业设计说明书(毕业论文) 4.5 产品分类页 4.5.1 分类页布局实现 通过分类导航对产品进行分类及部分产品的展示。整体布局如图4.11所示。 图4.11分类页整体布局 1、本页面的特别之处在于flash图片滚动区域，首先通过flash制作动画，然后加到 网页中，如图4.12所示。 26 内蒙古科技大学毕业设计说明书(毕业论文) 图4.12 flash 动画 通过和标签将flash文件在html代码中显示，具体代码如下: 2、分类导航也是本页较为丰富的一块，用到了二级菜单，如图4.13所示。 27 内蒙古科技大学毕业设计说明书(毕业论文) 图4.13 二级菜单 (1)首先建立在html中的组织结构，整体采用了div+ul+li的结构，再对每部分样 式逐一进行设定。 (2)添加css样式 .my_left_category{width: 190px;font-size:12px;font-family:arial,sans-serif; letter-spacing: 2px;color: #000;} .my_left_category .my_left_cat_list{width: 188px;line-height: 13.5pt;border: 1px solid 28 内蒙古科技大学毕业设计说明书(毕业论文) #cccccc;} 实现对按操作系统、按网络模式、主摄像头像素、高级功能的字体属性、超链接样 式和鼠标上后样式的修饰。 .my_left_category .my_left_cat_list h2 {margin:0px;padding:3px 5px 0px 9px;} .my_left_category .my_left_cat_list h2 a {color: #333333;font-weight: bold;font-size: 14px;line-height: 22px;} .my_left_category .my_left_cat_list h2 a:hover {color: #4a74a7;font-weight: bold;font-size: 14px;line-height: 22px;} .my_left_category .h2_cat{width: 188px;height: 26px;line-height: 26px;color: #333333; background-image: url(../images/dd_arrow_right.gif);background-position: 138px 8px; background-repeat: no-repeat;font-weight: normal;position: relative} .my_left_category a{ font:12px;text-decoration:none;color:#333333;} .my_left_category a:hover{text-decoration: underline;color: #4a74a7;} 通过类标签.my_left_category h3中的属性display:block;实现列表区域的显示。 .my_left_category h3{margin:0px; padding:0px;height:26px; font-size:12px; display:block;font-weight:normal;padding-left:8px;} .my_left_category h3 span{color:#999999; width:145px; float:right;} .my_left_category h3 a{ line-height:26px;} 通过类标签.my_left_category h3中的属性display:none;实现列表区域的隐藏。 .my_left_category .h3_cat{display:none;width:204px; position:absolute; left:123px; margin-top:-26px; cursor:auto;} 对二级菜单区域背景、列表项、字体样式和边框的定义。 .my_left_category .shadow{position: inherit;width: 504px;background-color:#c00; 29 内蒙古科技大学毕业设计说明书(毕业论文) background-position: 220px 8px;} .my_left_category .shadow_border{position: inherit;width: 200px;border: 1px solid #959595;margin-top: 1px;border-left-width: 0px;background-color: #ffffff;margin-bottom: 3px;background-image:background-repeat: no-repeat;background-position:-223 0px;} .my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px} .my_left_category .shadow_border ul li {list-style:none;padding-left:10px;float:left; background-image:url(../images/dd_arrow_right.gif);background-repeat:no-repeat; background-position:0px 8px;width:75px;height:26px;overflow:hidden;letter-spacing:0px;} .my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;} .my_left_category .active_cat h3 { font-weight:bold} .my_left_category .active_cat h3 span{ display:none;} .my_left_category .active_cat div{display:block;} (3)分类导航的实现的部分代码。 31 内蒙古科技大学毕业设计说明书(毕业论文) 4.5.2 产品分类页效果图 图 4.14分类页效果图 32 内蒙古科技大学毕业设计说明书(毕业论文) 4.6 产品详细介绍页 4.6.1 产品详细介绍页布局实现 对某具体型号的手机进行概述、及功能和参数的详细介绍。布局图如图4.15所示。 图 4.15产品详细介绍页的布局图 1、产品概述导航 加了子导航使条例更加清晰、也更加便捷的切到其他页面，方便了浏览者浏览页面。 2、图片滑动区的实现 用js实现图片左右滑动，新颖，是页面的一道亮丽风景线，更具有吸引力。具体如 图4.16所示。 33 内蒙古科技大学毕业设计说明书(毕业论文) 图4.16 图片左右滑动的实现 (1)图片滑动实现的html代码。 [10](2)实现向左向右滑动的函数代码。 Slide.prototype = { /* ==== target positions ==== */ calc : function() { var that = this.parent; // left slides for (var i = 0; i <= this.N; i++) { that.slides[i].x1 = i * that.Z; } // right slides for (var i = this.N + 1; i < that.NF; i++) { that.slides[i].x1 = that.wh - (that.NF - i) * that.Z; } } (3)实现鼠标移动到图片上后图片亮度发生改变的函数。 over : function () { 35 内蒙古科技大学毕业设计说明书(毕业论文) this.parent.resize(); this.parent.over = true; setOpacity(this.parent.view.img, this.parent.oP); this.parent.view = this; this.start = new Date(); this.cpt = 0; this.pro = false; this.calc(); setOpacity(this.img, 100); } } 3、服务支持 服务支持中的四个div块用到了块浮动，都是用到左浮动。如图4.17所示。 (1)html组织结构。 (2)css样式的设定。 .center3_left_1,.center3_left_2,.center3_left_3,.center3_left_4{width: 248px;height: 228px;float: left} 37 内蒙古科技大学毕业设计说明书(毕业论文) 图4.17 块浮动 4.6.2 产品详细介绍页效果图 38 内蒙古科技大学毕业设计说明书(毕业论文) 图4.18 产品详细介绍页的效果图 4.7 规格参数页 此页面主要用到表格，表格用途很广，可以用来在页面中显示表格的数据、图片、文字等。如图4.19所示。 39 内蒙古科技大学毕业设计说明书(毕业论文) 图4.19 规格参数页效果图 4.8 登录页 登录页面实现了简单的客户端的验证，登录时提示是否记住密码，当登录用户名栏中空格时，提示请输入E-mail地址或昵称，当密码栏空格时，提示输入密码。整体效果，如图4.20所示。 图4.20 登录页效果图 实现客户端验证的代码: /*单击登录按钮时，验证email地址和密码是否为空*/ function checkLogin(){ var email=document.getElementById("email").value; var pwd=document.getElementById("pwd").value; 40 内蒙古科技大学毕业设计说明书(毕业论文) if(email==""){ alert("请输入Email地址或昵称"); return false; } if(pwd==""){ alert("请输入密码"); return false; } return true; } 4.9 注册页 注册为网站会员的页面。本页是通过表单实现的，表单就是在网页中使用的各种控件，它可以实现数据采集的功能，比如可以采集访问者的名字、E-mail地址等信息。表单由多个表单元素组成，众多的表单元素使得表单的功能更加强大。每个表单元素又放在DIV块中，这样易于控制表单元素的位置。注册页效果图如图4.21所示。 41 内蒙古科技大学毕业设计说明书(毕业论文) 图4.21 注册页效果图 42 内蒙古科技大学毕业设计说明书(毕业论文) 第五章 网站的测试 5.1 浏览器之间的兼容性测试 根据用户使用的浏览器版本，测试网页在不同浏览器上显示效果是否一致。根据当下情况，一般要求保证IE浏览器和火狐浏览器兼容即可。目前，IE浏览器一般要求从IE6.0-IE8.0即可，火狐一般要求Firefox3.5。安装好各版本浏览器之后，就可以测试页面在不同版本浏览器上的显示效果了。 5.2 网页W3C标准的测试 1、制作期间使用Dreamweaver兼容性提示 (1)单页测试 打开三星手机网站的任何一个页面，依次点击“文件”—>“验证”—>“验证当前文档(W3C)(V)”，稍后会在底部验证里出现提示。 (2)整站测试 在文件窗口中选中“站点—设计”，依次点击下方属性窗口中的“验证”标签—>“验证整个当前本地站点”，稍后会在右侧窗口中出现提示。 2、网页制作完成后使用Firefox插件进行检测 安装Firefox3.5，从网上下载W3C验证插件和firebug脚本插件，进行验证。 3、发送到validator.w3.org官方网站进行在线验证 [7]将网址发送的W3C官网，进行验证，根据提示进行相应的操作即可。 43 内蒙古科技大学毕业设计说明书(毕业论文) 第六章 总结 通过本次的毕业设计，我独自完成了对三星手机网站的设计。这次我的网站设计不是完全来自自己的想法，也参照了部分三星官方网站的页面制作，但每一步设计都是由自己完成的。网站属于宣传型网站，所以网站以简单、经典商务的风格完成。每个页面虽然简单但内容吩咐，而且预想的效果也都实现了，在这次设计过程中我掌握了一些网站前台设计技术的知识，对平时的所学的知识有了进一步的巩固和提高，主要是注意到了很多细节上的问题。 在网站前台开发过程中，主要运用了HTML、DIV+CSS、JavaScript等网站前台开发技术及Flash影音动画制作软件、DreamweaverCS6网页制作软件，做网页的关键在于需要细心和耐心，遇到问题要坚持不懈，找到解决问题的方法。 虽然毕业设计仍有一些不足，但在毕业设计过程中遇到的问题及解决问题的过程却让我受益匪浅，那对我在今后的工作道路上而言将是一种宝贵的财富，可以在今后的学习及工作中不断地提高和完善自我。 44 内蒙古科技大学毕业设计说明书(毕业论文) 参考文献 [1,沙景荣,贺相春. 专题网站的设计与技术实现[M]，北京:北京大学出版社，2010，6 [2,袁润非. DIV+CSS网站布局 案例 全员育人导师制案例信息技术应用案例心得信息技术教学案例综合实践活动案例我余额宝案例 精粹[M]，北京:清华大学出版社，2011，8 [3,韩宝玉,刘改. 网站前台设计综合实训[M]，北京:电子工业出版社，2010，4 [4,李军. 网页制作教程——HTML、CSS、JavaScript[M]，北京:清华大学出版社，2012，4 [5,何丽. 精通DIV+CSS网页样式与布局[M]，北京:清华大学出版社，2011，236-237 [6,王津涛. 网页设计与开发——HTML、CSS、JavaScript[M]，北京:清华大学出版社，2012，214-215 [7,北京阿博泰克北大青鸟信息技术有限公司 职业技术研究院. ACCP软件开发初级程序员[M]，北京:科学技术文献版社，2011，210-233，280 [8,顾群业. 网页配色密码[M]，北京:清华大学出版社，2006，132-134 [9,朱印宏,邓艳超. DIV+CSS网站布局从入门到精通[M]，北京:石油工业出版社，2011，1 [10,明日科技.JavaScript从入门到精通[M]，北京:清华大学出版社，2012，220-223 45 内蒙古科技大学毕业设计说明书(毕业论文) 致谢 在我的学位论文完成过程中，我要特别感谢张静老师，从题目的选择到论文的最终完成，张老师都始终给予我细心的指导，她一次次指出我设计的问题所在并给与我很好的建议，使我的设计和论文从最初的粗糙到现在变得更加完善。张老师不仅在学业上给我以精心的指导，而且在思想上，给了我很大的帮助，她得鼓励使我在完成过程中更加有信心。在此谨向张老师致以诚挚的谢意和崇高的敬意。 我还要感谢身在各地却依旧支持我的朋友，你们永远是我最坚强的后盾。在此还要对一起度过愉悦大学生活的525宿舍的舍友们说声谢谢，正是由你们的帮助和鼓励，我才能克服一个有一个的困难，直至本文的顺利完成。 最后我还要感谢默默支持我的的父母，是你们的不放弃才有了今天的我，谢谢你们～ 46