《创意设计类网站的设计与实现8500字（论文）》

VI创意设计类网站的设计与实现TOC\o"1-3"\h\u21792第1章绪论 17311.1创意设计前景 1285951.2创意设计网站开发意义 129060第2章网站相关技术简介 1214302.1HTML5语言 2297262.2CSS样式表 210572.3JavaScript脚本 3281142.4DIV+CSS 3233602.5jQuery 427747第3章创意设计网站的需求分析 5250633.1可行性分析 599883.1.1经济可行性分析 5177643.1.2市场可行性分析 5176743.2网站业务流程分析 625473.2.1用户浏览体验流程 6130813.2.2后台管理流程 617843第4章网站设计理念 7170764.1网页首部布局 8205954.1.1登录注册 8285094.1.2logo部分 8304254.1.3首页 9157844.1.4设计作品 9296034.2网页中部布局 930514.2.1设计轮播图 9184554.2.2首页推荐 9106144.2.3热门推荐 953474.3网页尾部布局 9287854.4网页整体构架 9243084.5网页设计详细介绍 10163464.5.1导航栏部分 10184454.5.2轮播图部分 11241154.5.3作品展示部分 1116687第5章网站功能实现 11212185.1首页导航栏 11115255.2轮播图设计 12232875.3登陆 1226435.4注册 1318322第6章网站测试 14295196.1测试的流程 14136626.2测试的方法 1441706.3测试的结果 152412结束语 1830923参考文献 20创意设计类网站的设计与实现第1章绪论1.1创意设计前景随着移动互联网的兴起以及飞速发展，人们的生活越来越丰富，丰富的生活带给了人们不一样的互联网体验，致使人们对于移动互联网产品的用户体验也不断的提升，对于移动互联网的认知度也逐步增加，（主要表现为对产品交互和外观审美的要求），因此设计行业越发的重要，更是成为了企业产品的核心内容。当今社会，不论是一根笔，还是一架飞机、一栋大楼、一个城市的规划布局等等，都离不开设计师们在背后默默无闻的付出。所以设计师的社会需求相对来说还是比较多的，他们中有的人是在自己的事业中风生水起，在公司和领导团队中担任着重要的职务，还有的自己创业发展，成立了自己的工作室等诸如此类的优秀设计师数不胜数。但是还有一小部分或许是初出茅庐，又或者是未遇到伯乐的千里马，总之就是还未在设计行业大放光彩的，对于他们，一个好的平台就很难能可贵了。一个好的平台可以让他们在设计行业大展拳脚，也可以让他们不断进步。1.2创意设计网站开发意义网站是企业向用户提供信息的一种渠道。它也是企业向电商方向发展的根本。在IT行业迅猛发展的当今社会，大多有需求的人利用网站来获取所需知识。素材资源在创业设计网站与开发行业中占着无比重要的地位。依赖素材资源为设计开发参考与灵感来源的设计者更是可贵。在本网站，人们可以去首页浏览其他设计师的优秀作品并留言交流，而且还可以在论坛社区与设计者以及更多对设计作品感兴趣的人分享心得。第2章网站相关技术简介随着计算机在当今社会的应用和发展，网站已然成为了企业向大众展示自家企业形象的重要方式。当然企业想要介绍自己的产品以及服务也都是通过网站来实现的。网页设计是作为当今社会计算机与艺术的结合体,是电商社会的产物,虽然网页设计也是平面设计的一种,但是对于网页设计还不同于平面设计，它需要设计师们拥有独特的设计需求、设计准则以及设计师们对网页的独特的见解,所以在对网页设计的前提是必须有一个对Web页面的理解。2.1HTML5语言HTML语言概括了很多的标签，利用这些标签统一网络上的文档格式。它利用超链接的方法使文字、图片、表格等与其他信息媒体相关联。随着HTML语言的发展，HTML5开始慢慢发展成为一种搭建网络的主要语言，HTML5涉及到的范围越来越广，HTML5的使用率越来过高，因此HTML5的开发人才越来越被企业、市场所需要和重视。HTML5的主要优势：1.兼容性：基本上所有的现代浏览器都能支持HTML5。它也为外部应用程序直接连接到浏览器内部的数据打开了市场，由于它良好的兼容性，使得手机上的各种软件，应用程序，都很容易使用。2.HTML5能支持大多数网民所使用的手机系统。3.强化Web的表现性，表现在附加本地数据库，可用于脱机应用程序开发 4.HTML5开发能够为用户提供更加迅速、便捷的服务，为大部分用户带来了方便。能够实现代码的高度利用。5.用户体验感极佳，尤其是手机上的APP，会大量减少代码量。让用户有更好的视觉体验。6.随着HTML5开发的飞速发展，市场对HTML5开发人员越来越重视，所需要的HTML5的开发人才也越来越多，对于他们的需求也越来越高。2.2CSS样式表CSS是级联样式表。它可以对页面有更好的布局，它的一些对页面的修饰是HTML所没有的，他可以比HTML更精准的控制页面布局以及美化页面。同时编写一个CSS可以被多个页面所使用，从而为网页节省大量的时间与空间。避免了浪费资源，同时提高了网页打开的效率。CSS在某种程度上也可以算是HTML的拓展，但是它不能将HTML替代，换句话说就是，CSS与HTML不分家，它只是一个修饰页面的“工具”，它还可以设计和维护网站。比如一夜之间让所有网站全变成了黑白色，就是依靠CSS来实现的，改变其中的某一个元素的属性就能改变整个页面与之相关的所有元素以及页面外观。CSS3新版本的主要是新增加了一些选择器和属性，增加的这些内容可以更方便的让网页实现想要的效果，美化网页的外观。与旧版本相比节省了大量书写代码时间。CSS几乎支持任何字体字号以及图标字体。还可以通过CSS特性增加动画效果，使网页更加的绚丽。语言特点：CSS是前端开发人员定义的,优先级较高。CSS的主要优势：1.减少了页面代码，代码结构简洁，为网页节省了大量的时间，提高了浏览器的速度。2.轻松地控制页面的布局和改变页面的各种审美风格。只需要重新改编CSS代码，便可以轻松排版网页。3.页面布局和排版效果非常好，控制页面的字体以及外观也非常的方便，呈现给用户的视觉感也很棒。4.因为CSS类似于HTML5的拓展，所以CSS代码也是非常的易于编写。5.变现和结构分离，你可以先编写一个控制网页设计的CSS代码，将控制网页设计部分的CSS代码放置在一个独立的文件下，可以被其他网页引用，这也就是我们常说的引用外部文件，一个CSS外部文件可以被多个网页使用。2.3JavaScript脚本JavaScript脚本是一种高级编程语言。它是关于在HTML代码中添加一些页面的用户交互，也就是网页与用户之间的互动，使用户在浏览网页的时候具有最佳的浏览效果。换句话说是给这个网页赋予了生命。JavaScript是一种相对来说比较弱的语言，它不像Java语言那么严格，也正是因为它对语言要求没有那么多，所以更容易被广大程序员所接受。JavaScript用于对网页动态功能的修饰。JavaScript的优点：1减少网络流量。在还未发现JavaScript语言之前，传统的数据提交和验证都是由客户机浏览器通过网络向服务器开发执行的。一旦数据量过大，就会造成浪费。2.易于操作的HTML对象。JavaScript使得操作各种页面对象变得很容易，用户使用它来控制每个元素的状态、运行等等都很方便。JavaScript允许您选择浏览器，以使您的web页面更加友好和提高视觉吸引力。2.4DIV+CSSDIV+CSS是Web标准中常用语言之一。Div+CSS是现在页面布局的常用方法之一。这种页面布局方式不同于HTML语言中的传统的表格布局方式，这种布局方式是真正的做到了w3c中的表现行为与结构行为相分离。table表格的布局方式过于的死板，而且表格的标签比较多在表格中的标签需要互相嵌套使用，整段代码看起来非常的乱且复杂，代码的复杂度高，就会降低网页的浏览速度。还会降低网页的搜索引擎。因此现在越来越多的网页设计中开始摒弃之了之前传统的table表格的布局方式，开始使用全新的DUV+CSS布局方式。DIV+CSS布局方式的优点：1.符合w3c的标准，代码结构简单，不会像table表格布局方式一样复杂，一个CSS代码可以被多个网页重复使用，而且想要改变页面的某一元素只需要改变CSS中的某个属性就可以实现。但如果是使用table表格布局方式，想要改变一个元素就要改动整个表格，牵一发而动全身。2.浏览速度提高，因为table表格布局方式需要使用很多标签，标签互相嵌套使用，代码结构复杂，反应时间长，而DIV+CSS布局方式不需要像table一样繁琐，代码结构清晰简洁，反应时间短，打开网页的速度得到了提高。3.DIV+CSS代码结构简单，因为代码量少所以很容易被搜索引擎抓取到重点，便于搜索引擎的搜索。4.网页的样式改变非常方便，因为DIV+CSS布局方式是内容在一个DIV容器下，结构在CSS外部文件下，内容部分与结构部分是分开的，因此对于也页面的样式的调整比较容易，只需要改变CSS外部文件就可以实现。现在国内许多网站网站都是使用DIV+CSS这种框架模式，由此可以看出来DIV+CSS布局模式在未来的网页布局能够成为主流框架模式。2.5jQueryjQuery是对Javascript原生代码的一种封装，jQuery相对于JavaScript来说代码更简单，更方便书写。把一些常用固定代码简化整合成的一种固定模式。JQ的兼容性非常好，这使得用户更容易使用HTML、事件、动画等还可以为网站提供Ajax交互。jQuery也可以说是一个JavaScript代码库。它简化了原生JavaScript的编程代码，使代码结构更简洁明了，方便易懂。jQuery实现大部分的CSS选择器,可以方便的获取DOM对象。jQuery的特点：支持链式编程结构：对象、添加样式、修改文字、过滤添加子元素支持对象自动化检测：对于空对象。jQuery有自己的处理体系，不会直接抛出错误，对于单个对象和对象集合通过同一个方法进行操作。jQuery的优点是：jQuery非常的轻巧。不会占用户过多的空间。轻量级，对项目的影响较轻，可以反复的更换。jQuery基本上实现了绝大多数的CSS选择器。jQuery也提供了一些更快、更简洁的方法来代替CSS选择器，使编程结构更加灵活、简单。jQuery的实现，完善的处理机制将会把对象检测，浏览器检测等功能集成jQuery中。第3章创意设计网站的需求分析本节主要探讨创意设计网站的可行性分析、系统业务流程分析。企业向用户和网民传递各种企业相关信息主要是依靠网站，网站是企业发展电商行业的主要途径和信息平台。提到网站，就能想到拥有不同的权限，并且每个权限之间功能差异很大，所以可以笼统的将网站分为两大模块：前台模块和后台模块。两个模块之间的权限分工明确，相辅相成。前台模块主要起到浏览的作用，后台模块就是管理各种用户信息、作品信息、新闻信息等等。因为本网站是面向用户开发的。所以，用户的需求和体验为首要。怎么让网站更加方便使用，如何让用户拥有最佳的体验是本章节着重讨论的方面。同时，制定清晰有效的业务流程、使系统突出差异化也是本节讨论的内容之一。3.1可行性分析一个网站的开发是会受到很多资源的限制的，可能是资源、素材，有可能是是代码编写时间，还可能是人为因素等一系列的因素都会影响网站的开发的。因此，在网站开发之前对此进行分析还是很有必要的。本节主要围绕经济可行性和社会可行性两个方面进行讨论分析。3.1.1经济可行性分析本网站使用了Bootstarp框架。框架的合理搭配使用可以极大程度节省开发人员的精力，所需人力成本较少。可以大大减少开发的成本。同时，本网站对于电脑的配置要求也不高，家用的普通配置的电脑也可以很轻松流畅的打开并浏览本网站。开发网站所需要的成本大大低于系统在实际中应用所需要的成本，所以在经济上是可行的。3.1.2市场可行性分析创意设计行业的收入本身就很高，这就吸引了大多数人的眼球。而想要进去创意设计市场的人们就会对技术以及创意设计的素材有很大的依赖性，为了实时了解创意设计相关的技术性知识以及收集创意的素材，人们需要一个能够及时了解行业动态以及能够不断学习提高自我，提升技巧的平台。经济全球化的趋势下，有很多新兴产业的崛起。创意设计为新兴产业的一种，不管是大公司还是小公司都会对创意设计与开发有着很大的需求。诸如广告宣传、品牌设计等等，正因为这方面的人才缺失，才给了人们商机以及生存发展的机会。有意愿的大学生可以通过网络平台等渠道去培养自己这方面的才能，提高自己的技巧，使他们能够在创意设计行业有更好的发展。素材资源在创意设计行业中有着不可或缺的重要地位，有很多设计师都是依赖素材资源去参考设计的。用素材资源来激发设计灵感的更是存在，因此创意类网站对于他们来说是非常重要的存在。通过实时提供行业动态、素材资源等一些展现形式就可以让更多设计师们以及设计爱好者们来关注这个平台。3.2网站业务流程分析本节主要对网站基本的使用流程进行分析，主要分析的是用户浏览使用网站以及后台管理员对一些用户、新闻等信息的基本数据库操作流程、用户的登录注册的流程等3.2.1用户浏览体验流程如果用户只是想要浏览一下其他设计师的作品是不需要登录注册的。如果想要发表自己的看法、与其他用户、设计师交流意见则需要用户登录该网站。体验感极佳。图3-1网站前台模块流程3.2.2后台管理流程需要用户注册并登录网站并可以看到自己的个人资料、发布作品、我的发布、我的评论、回复评论等还可以上传设计作品，这就是后台模块的登录注册功能。还有一个管理员功能，可以看到后台的注册用户数据库、作品管理、新闻管理、社区管理、以及管理员密码的修改。图3-2创意设计网站后台管理流程图第4章网站设计理念由于人们一直以来先上后下，先左后右的视觉习惯，因此一个好的网页的布局就显得尤为重要。页面的首部占一个页面的多少，中间要就多少，给页面的尾部剩多少等等，这都是用户所关心的问题，而研发人员要着重考虑的问题是用户的体验。一个网页过长就会有加载时间，网页太大，下载的速度就会很慢，这样一来用户的体验感就会极差。但是太小的网页又展现不全。用户看的不彻底。因此本人便设计了如下的整体构架图。图4-1首页布局设计图4.1网页首部布局4.1.1登录注册登录，注册是以自适应来显示高度跟宽度的。其一是因为它本身宽度和高度比较小，其二是它们本身不是用户一进入网站所需求的内容，但是考虑到它们是网站的门户及对待用户的态度和为吸纳用户的使命。设置在网页的最顶部。其中登录，注册主要体现在用户投稿作品以及与其他设计师探讨心得时候必经的过程。4.1.2logo部分Logo是网页中相对独立的一部分，但也需要呼应主题和名称，让用户能够直接了当的了解页面主要想展现的内容。这里考虑到logo主要用来体现商场的商标，但是不能占据太多的空间，因此在网页上设置logo的位置，也不能占据太多的宽度和高度的思路。4.1.3首页首页就是用户一点进网站所看到的页面，也是最直观的能看到的网页。基本上一个网站的美观与否看它的首页就可以了，首页就是一个网站的“门面担当”。由此可以看出首页的重要性。4.1.4设计作品这个便是用户的体验了，用户可通过这个平台将自己设计作品上传到设计作品这个网页中。还有其余的新闻等网页交互，都会给用户带来十足的体验。4.2网页中部布局4.2.1设计轮播图这个板块的设计其目的就是为了吸引更多的用户。好看的设计图能吸引用户，也可以让网站给人眼前一亮的感觉。更能有继续浏览的欲望。还有一方面就是能让用户更直观的了解到网站的应用性，就是网站主要是关于什么的。有了这个版块就非常的直观。4.2.2首页推荐首页推荐主要就是作品的展示。为用户浏览优秀作品提供了便利，使用户能更好、更方便的浏览其他设计师的作品。体验感极佳。4.2.3热门推荐热门推荐这个板块就是将优秀作品以轮播图的方式展现出来。设置优秀作品图片，在一个div框中显示，很好的节约了空间，但是div大小有限，把全部图片展示图片显得很小，不利于用户观看，因此在其下方放了相应图片文字链接，当鼠标悬停在这段文字链接时，对应文字就会显示相应图片。这样既方便用户的浏览又节约了空间。4.3网页尾部布局当用户浏览完作品后。就可以关注网页信息了。这个就是每个网站都必备的。这个版块就不重点说明了。4.4网页整体构架网站整体分为六个模块，首页、设计作品、新闻、论坛社区、投稿以及联系我们。首页就是我们一打开网站最先映入眼帘的那个网页，也分为作品区和热门作品区就是一些设计师们所投稿的作品。设计作品这个版块就是不注册登陆网站也是可以看到他人作品的，当然如果用户登陆网站了会有留言功能，就是在其他设计师作品下的留言。新闻版块是可以阅读每日新闻。论坛社区是必须要求用户注册登陆的，在这里可以与其他用户共同交流，一起探讨心得。投稿就是需要用户注册登陆然后在投稿这个版块上传自己的作品。最后联系我们就是基本每个网站必备的，也是网站的一些信息。图4-2网页整体构建图4.5网页设计详细介绍图4-3主页效果图4.5.1导航栏部分本网站的导航栏改变了传统的table表格样式。运用的是列表ul、li浮动所编写的。为网页节省了大量的代码书写以及加载时间。导航栏的背景以黑色为主。黑色给人一种精简的感觉，不会让人过分注意到的颜色。本身网站是以创意设计的作品为主。黑色沉稳内敛的导航栏不会喧宾夺主，吸引人的眼球。让人们把目光放到作品上面。导航栏精简全面的展示了网站的各种应用。4.5.2轮播图部分取到了以往的flash动画效果。用书写代码来达到相应的功能，节约了网页加载时间及兼容性问题和网页维护工作时间。4.5.3作品展示部分让用户来浏览作品。既要做到突出所有作品可以让用户直接就能看到，还要保证每个作品的完整性，做到每一个作品都可以完美的展现在用户的面前，因此布局的重要性就得以体现了。本网页的布局是每行四个图片，每个图片之间都会有一定的像素作为空隙，空隙以白色作显示。当用户鼠标放入图片上时，该作品会有高亮显示，方便用户。提高了用户的体验感。同时也为了防止浏览器兼容性问题或图片不存在，出现图片不能显示以至于用户提出疑问，特别设置缓冲图，这也是网页图片出现bug的解决方法之一。4.5.4注册页面的功能与设计图4-4注册页面功能图注册页面的功能包括用户名、手机号、邮箱、设置密码、确定密码。用户注册时需要填写以上内容，且不能随便填写，必须符合格式，这就要求程序员必须设置验证，同时也保证了用户个人信息的安全性。注册页面主要是由表单form来完成的。且这些个人信息是一定会保护好不会被泄露的。第5章网站功能实现5.1首页导航栏首部导航栏是用样式为collapsenavbar-collapse的Div容器下的ul、li来实现的，主要包括首页、设计作品、新闻、论坛社区、投稿和联系我们还有样式为col-sm-8的Div容器下的登录注册网页。其中登录注册是一些表单验证。利用Js来完成的。对于首页、设计作品、新闻、论坛社区、投稿和联系我们是利用HTML和CSS来完成的。图5-1导航栏5.2轮播图设计轮播图是为了让用户更好的看到优秀的作品，既不占空间也不浪费资源。还能为用户提供最佳的视觉体验。其主要是用JS来实现的。轮播的效果如图所示。图5-2轮播图5.3登陆用户注册页面，注册页面主要由用户名，手机号，邮箱，密码，确认密码组成。其主要体现的就是表单的验证，同时也给用户足够明确的提示能够让用户对不正确的输入进行更改，方便用户以后登陆创意设计网站。表单验证的实现主要由JQuery来实现。图5-3登录效果图5.4注册同样注册也是用jQuery来实现的。新用户必须要注册才可以登录倡议涉及网站。图5-4用户注册图第6章网站测试6.1测试的流程 测试需要站在用户的角度上来测试这个网站。软件测试的流程应该是先从了解用户的需求出发、再在用户需求的基础上设计测试用例、最后执行实施测试计划。测试包括很多，其中黑盒测试和网络测试都可以根据特定的性能指标进行。不过本网站需要的更多的还是软件测试。6.2测试的方法通过系统测试来检验网站是否有潜在的错误或缺陷。分别通过以下几方面。登陆、注册两个网页的输入框的字段长度、数据格式、特殊字符、非法字符、空格处理以及是否必填字段。比如手机号是特定的11位字符的长度不能多也不能少。还有邮箱的特定格式必须要有@和.这两个特殊字符等诸如此类。提交检查：注册成功后是否能成功提交，能否反复提交以及能否保存用户数据等。删除检查：以管理员身份登录本网站，测试能否实现增删改查新闻、作品、用户信息等。上传功能：注册成功后检查上传作品功能是否完善，如上传不同类型的文件是否能够实现。反应时长：HTTP的请求时长。概率：以上每个测试都要多测几遍，有可能会出现概率事件，要记录好是测试几遍才会出现