《好的塑业网页设计-职业学院毕业论文》由会员分享，可在线阅读，更多相关《好的塑业网页设计-职业学院毕业论文（11页珍藏版）》请在金锄头文库上搜索。
1、嘉兴职业技术学院毕业设计（论文）题目名称：好的塑业网页设计姓 名：张思思 所在分院：信息技术分院专业班级：计算机应用技术 142 班指导教师：金志鹏2016 年 12 月 31 日 嘉兴职业技术学院毕业论文（设计） 1目 录摘要 .1关键词 .1引言 .11.设计思想 .22.语言 .23.网 站制作流程与主要 内容 .24.设计稿说明 .24.1 首页( index.html) .34.2 关于 我们 页(aboutUs.html ) .34.3 留言页（leave a message.html） .75.设计 过程 的问题与解决办法 .86.结 论 .87.致 谢 .9参考文献 .9作者简
2、介 .9 嘉兴职业技术学院毕业论文（设计） 1好的塑业网页设计嘉兴职业技术学院 张思思 计算机 142 班 143061235指导老师：金智鹏 职务：副教授摘 要随着互联网行业的发展，互联网越来越进入我们的生活给我们带来方便，一夜网站给客户了解一个企业带来便利。因此企业的发展也需要一个网站来宣传他们的公司形象和产品。本文详细介绍了好的塑业网站设计与制作。通过设计思路、设计语言、设计稿详细说明、设计制作过程中遇到的问题和相对应的解决方法等信息来讲解如何制作并完成该网站的设计制作。本文重点描述了设计稿的布局和色彩搭配，通过设计搞的详细说明来阐述好的塑业网站的设计理念和风格走向。网站的设计稿主要版面
3、有：首页、内容页等两大大板块。重点说明首页的布局和色彩搭配设计，布局设计可以让网站的信息得到充分的展示，恰到好处的色彩搭配能提升整个网站的文化底蕴以及加大网站的美观度。关键词网站；网页；企业形象；产品宣传；好的塑业；网页设计引言宣传在企业的发展中起很重要的位置，那么网站在宣传公司形象和公司产品中起着更加重要的位置。有一个好的网站，能让客户留下深刻影响，增加好感。所以网站在现代企业网站中起着非常重要的地位。根据不同的企业类型和想要宣传方向来决定制作一个怎么样的网站。网站要在操作，设计感，和交互上都做到统一才是个好网站，既美观，又实用，光是有好看的页面，但是并没有什么功能，都是没有什么用的。这样的
4、前提 嘉兴职业技术学院毕业论文（设计） 2下，网页设计师就显得尤为重要。本网站通过色彩搭配和网站内容传达出了公司的形象：专业、大气。1.设计思想该网站是网页设计网站，用来介绍宣传公司产品和企业形象。在网站布局上走现代简约的设计风格。简约、现代化、追求网站的实用性和便利性。本网站的布局设计不同于一般传统网站的的设计风格，给人的第一印象就是现代和风格突出，色块之间的对比明显能突出重点。在网站色调的搭配上，以蓝色为网站主基调，体现网站的大气和专业。2.语言网站是由 html 构成,div+css 是网站的主体，为了增加网站的交互性与动感，运用了很多 jq 代码以及其他 js 代码。提高客户体验，追求
5、简洁的代码和好的体验。3.网站制作流程与主要内容网站制作的流程：与客户交流想要网站的风格、类型以及色调。网站类型大致为：中国风、简约风、日韩风等。网站类型大致为：产品营销型、公司宣传性、信息门户型。经常几天的交涉了解，以及对旧网站的分析。决定以蓝色为主色调。定位为产品宣传型网站。然后做了几个初稿给客户，经过反复的讨论，最终决定为现在的这个设计稿。4.设计稿说明本网站的设计稿主要有 6 大页面：首页、关于我们、联系我们、新闻中心、客户留言根据这 6 个版面来制作网站，网站的信息得到充分的展示，并且 6 个版面各具特色，但同时又形成一个整体。 嘉兴职业技术学院毕业论文（设计） 34.1 色彩搭配整
6、个网站用了深蓝色#0168b7，灰色#e4e1e1，黑色#000000 为主要色调，烘托出网站的大气与专业。如图 4-1。色调冷静统一。和谐自然。图 4-14.2 首页(index.html)首页是一个网站的门面，首页的设计成功与否，直接影响到整个网站的品味和水准，而首页当中又以 banner 为最主要的部分。该网站的风格偏向简约，在版面的设计上打破了传统网站设计的呆板布局。网页总体设计效果如图 4-1 所示。导航：网站的导航设计放在页面的最顶部，logo 颜色采用红色，和 banner 中产品的红色相互呼应，和谐又突出。让人一目了然，方便用户点击与查看信息。导航的内容设计上，当鼠标经过的时候
7、对应的字体颜色会加粗，背景也会变换颜色，不仅考虑到网站的用户体验还增加了网站的动感。也放了搜索框，可以可以自行检索想要了解的产品。Banner 加入了轮播的代码，会自动切换 banner 也可以手动切换 banner，最大化利用客户停留在页面上的时间进行宣传。第一张 Banner：用深蓝色地球做背景，再叠加了白色的公司名称，显得大气又专业，白色的晨光划破了天际，令人眼前一亮，印象深刻！使用主色调深蓝色，再加上苍劲有力的毛笔字体书上公司名字。海报的左上角加上公司的网址。客户会记住公司的名字。如图 4-1 所示。第二张 Banner：在黑色的背景上放了产品图，经过处理的专业的产品处理后，为了突出公
8、司产品。因为文案虽然重要，但是图片比起文字是更加直观，更能留下深刻印象的。公司主营玻璃阀门，塑料阀门等。选择的是销量最好的转化率最好的玻璃阀门。最大化利用最好的位置。如图 4-2 所示。 嘉兴职业技术学院毕业论文（设计） 4图 4-2 海报 1图 4-3 海报 2内容头部：内容部分分为;公司产品、销售网络、荣誉资质、新闻资讯。首页内容最上面部分是产品中心，以色块分隔，吸引人们的眼球。眼实现吸引到产品上去。还有个类似于大括号的符号，链接的是其它的产品。首页第二部分放了销售网络、荣誉资质二大类信息。蓝色区块和销售网络图与荣誉资质图都是可以链接到相应的网页的。将鼠标移到蓝色色块上蓝色色块会变换颜色，
9、提醒人们这是一个链接。丰富了整个网页的样式。首页第三部分放了新闻资讯。新闻资讯板块加入了 tab 切换技术，移动到公司新闻上市会切换到公司新闻，移动到行业新闻上是会切换到行业新闻。让人们更多关注到更多玻璃钢管行业和塑业的新闻，让人们意识到这个塑料钢管和塑业产品在现代生活中的重要性，激发客户群体的购买欲。内容文字：网站的正文字体为规范的微软雅黑、字体大小 12px、行高26px。页脚：页脚部分以网站的主色调黑色为背景色，文字为白色，整体与网站头 嘉兴职业技术学院毕业论文（设计） 5部呼应，不会显得头重脚轻。内容上放了快速导航信息以及版权信息。还有加入了会到顶部和分享代码，因为网页较长，客户浏览后
10、想跳回最上面，点击代码即可。还添加了在线客服功能，如果客户觉得有想要了解的想法可以直接打开和客服的 qq 聊天窗口，或是扫描上面的微信二维码进行添加好友。在上面也有公司的号码，可以直接进行拨打。再点击一下在线客服功能就会收回。 嘉兴职业技术学院毕业论文（设计） 6图 4-4 嘉兴职业技术学院毕业论文（设计） 74.2 关于我们(About us.html)关于我们页面介绍了公司的的基本情况以及放一张公司的工人生产的图片图 4-54.3 留言页（leave a message.html ）留言页的设计以新闻列表页为前身，在内容上面做了排版，适当的字体、文字大小以及行高让内容排版更加规范化，使得页
11、面整洁有序又大气。图 4-6 嘉兴职业技术学院毕业论文（设计） 85.设计过程的问题与解决办法网站的设计和制作过程中，运用到多种应用工具以及多方面的技术。当需要把多种知识和功能同时用上时，不乏会出现一些突发问题。好的塑业网页的设计过程，就是一个不断地出现问题、解决问题的过程。问题出现之前要预防，出现问题之后要选择正面突破。以下例举了在本网站的设计与制作过程中遇到的问题以及对应的解决办法。可以通过客户喜欢的网站来了解客户喜欢的风格，再结合客户的需求制作成客户喜欢的网页颜色。再结合博大精深的 ps，ps 是一个博大精深的工具，通过 ps制作效果图，来不断地调整成客户想要的效果，再用 dw 来制作页
12、面。配色是一大重点，合理恰当的色彩搭配是网站的设计要求。本网站的 logo 颜色主色是红色，黄色一般应用于电商的网页色彩搭配。而本网站的主题是企业网站设计，企业网站还是要整体弘扬企业形象和宣传公司产品。如何才能将颜色进行更好的搭配呢？解决方法：考虑到色调上要和 logo 的颜色相呼应。将冷暖色相互呼应，就将蓝色作为主色，是网站看起来大气、专业，正符合该公司的特质需求。文件也放在各自的文件夹里。避免错放乱放。代码出错。6.结论在网页设计中最重要的就是沟通，透彻了解客户的想法，为避免后续做程序是大量修改做好准备，再用扎实的代码基本快速制作网页网页设计就是在不断的学习新技术、不断树立新思路，这样未来
13、的设计理念和思想才能走在前端。不能被自己狭窄的视野所局限，创新才是发展自我的硬道理。毕业设计以及平时的项目都要做好积累，这样在用的时候才能快速的找到，直接添加修改即可。而且要不断地从平时的书本理论学习中跳脱出来，结合实际情况去处理问题。这次的毕业设计让我对 ps、dw、以及实际的项目有了更深的理解，让我对更好的融入社会做了更好的过渡。让我对未来的道路更加增强了信心。 嘉兴职业技术学院毕业论文（设计） 97.致谢通过这段时间的努力，我的毕业论文好的塑业网页设计终于完成了，这也意味着大学三年的学习生涯即将结束。在大学阶段，我在学习上和思想上都受益匪浅，要感谢老师和同学们的帮助和支持与鼓励，感谢每一个帮助过我们的人。3 年时间受益匪浅，感谢大家。参考文献1 ACAA 专家委员会，DDC 传媒. Adobe Photoshop CS6 标准培训教材M.2013.第一版.人民邮电出版社.2 黄谷来.2012 天猫商家网络营销策略研究J.华中师范大学,3 朱宇婷.极简主义风格的平面设计研究M. 2012.第 1 版.安徽工程大学出版社4 齐元.淘宝网 Ivy 皇冠店铺的竞争战略研究J.华南理工大学,2013 学,20125 管佳莺.编排设计M. 20
