好塑业网页设计-职业学院毕业论文.docVIP

嘉兴职业技术学院 毕业设计（论文） 题目名称：好的塑业网页设计 姓 名：张思思 所在分院：信息技术分院 专业班级：计算机应用技术142班 指导教师：金志鹏 2016年 12 月31 日 目 录 摘要 1 关键词 1 引言 1 1.设计思想 2 2.语言 2 3.网站制作流程与主要内容 2 4.设计稿说明 2 4.1首页(index.html) 3 4.2关于我们页(aboutUs.html) 3 4.3留言页（leave a message.html） 7 5.设计过程的问题与解决办法 8 6.结论 8 7.致谢 9 参考文献 9 作者简介 9 好的塑业网页设计 嘉兴职业技术学院 张思思 计算机142班 143061235 指导老师：金智鹏 职务：副教授 摘 要 随着互联网行业的发展，互联网越来越进入我们的生活给我们带来方便，一夜网站给客户了解一个企业带来便利。因此企业的发展也需要一个网站来宣传他们的公司形象和产品。本文详细介绍了好的塑业网站设计与制作。通过设计思路、设计语言、设计稿详细说明、设计制作过程中遇到的问题和相对应的解决方法等信息来讲解如何制作并完成该网站的设计制作。本文重点描述了设计稿的布局和色彩搭配，通过设计搞的详细说明来阐述好的塑业网站的设计理念和风格走向。 网站的设计稿主要版面有：首页、内容页等两大大板块。重点说明首页的布局和色彩搭配设计，布局设计可以让网站的信息得到充分的展示，恰到好处的色彩搭配能提升整个网站的文化底蕴以及加大网站的美观度。 关键词 网站；网页；企业形象；产品宣传；好的塑业；网页设计 引言 宣传在企业的发展中起很重要的位置，那么网站在宣传公司形象和公司产品中起着更加重要的位置。有一个好的网站，能让客户留下深刻影响，增加好感。所以网站在现代企业网站中起着非常重要的地位。根据不同的企业类型和想要宣传方向来决定制作一个怎么样的网站。 网站要在操作，设计感，和交互上都做到统一才是个好网站，既美观，又实用，光是有好看的页面，但是并没有什么功能，都是没有什么用的。这样的前提下，网页设计师就显得尤为重要。本网站通过色彩搭配和网站内容传达出了公司的形象：专业、大气。 1.设计思想 该网站是网页设计网站，用来介绍宣传公司产品和企业形象。 在网站布局上走现代简约的设计风格。简约、现代化、追求网站的实用性和便利性。本网站的布局设计不同于一般传统网站的的设计风格，给人的第一印象就是现代和风格突出，色块之间的对比明显能突出重点。在网站色调的搭配上，以蓝色为网站主基调，体现网站的大气和专业。 2.语言 网站是由html构成,div+css是网站的主体，为了增加网站的交互性与动感，运用了很多jq代码以及其他js代码。提高客户体验，追求简洁的代码和好的体验。 3.网站制作流程与主要内容 网站制作的流程： 与客户交流想要网站的风格、类型以及色调。网站类型大致为：中国风、简约风、日韩风等。网站类型大致为：产品营销型、公司宣传性、信息门户型。经常几天的交涉了解，以及对旧网站的分析。决定以蓝色为主色调。定位为产品宣传型网站。然后做了几个初稿给客户，经过反复的讨论，最终决定为现在的这个设计稿。 4.设计稿说明 本网站的设计稿主要有6大页面：首页、关于我们、联系我们、新闻中心、客户留言根据这6个版面来制作网站，网站的信息得到充分的展示，并且6个版面各具特色，但同时又形成一个整体。 4.1色彩搭配 整个网站用了深蓝色#0168b7，灰色#e4e1e1，黑色#000000为主要色调，烘托出网站的大气与专业。如图4-1。色调冷静统一。和谐自然。 图4-1 4.2首页(index.html) 首页是一个网站的门面，首页的设计成功与否，直接影响到整个网站的品味和水准，而首页当中又以banner为最主要的部分。该网站的风格偏向简约，在版面的设计上打破了传统网站设计的呆板布局。 网页总体设计效果如图4-1所示。 导航：网站的导航设计放在页面的最顶部，logo颜色采用红色，和banner中产品的红色相互呼应，和谐又突出。让人一目了然，方便用户点击与查看信息。导航的内容设计上，当鼠标经过的时候对应的字体颜色会加粗，背景也会变换颜色，不仅考虑到网站的用户体验还增加了网站的动感。也放了搜索框，可以可以自行检索想要了解的产品。 Banner加入了轮播的代码，会自动切换banner也可以手动切换banner，最大化利用客户停留在页面上的时间进行宣传。 第一张Banner：用深蓝色地球做背景，再叠加了白色的公司名称，显得大气又专业，白色的晨光划