意莱家具网站设计与制作报告

在这个信息化的时代,网络急速发展,得网络者得天下并不是一句口号。随着互联网飞速发展,越来越多的人都喜欢在网上浏览网站购物,便出现了各式各样的网站,然而并不是所有的网站的浏览量都高的,根据市场调查可以发现能为企业带来不错经济效益的企业网站都有一共同点,那就是这类型的网站不管是网站的设计风格以及排版都是非常特别,只有这样与众不同的企业网站才可以吸引浏览者的关注,这样才可以把浏览者发展成为准客户。因此,我想做一个响应式家具类的网站,意莱家具网站有多种风格的家具供用户挑选,我们的家具制作精美,为客户挑选出销量最高的热卖单品,增加企业的知名度和提高转化率和销售。关健词家具;意莱;电子商务一、网站概述 3(一) 网站架构 3(二)功能分配 5二、网站建设与规划 6(一)确定网站主题 6(二)规划网站 6(三)搜集材料 7(四)选择制作工具 7(五)开始制作 7三、网站的排版与布局 7(一)明确网页排版布局的原则 7(二)明确排版对象 8四、网站形象与风格设计 8(一)网站形象设计 8五、网站的详细操作说明 10(一)网站的首页 10(二)家具分类项 10(三)家具风格项 10(四)热卖单品项 10(五)用户登录 10(六)注册会员 10六、网站的推广与维护 10(一)网站推广 11(二)网站更新与维护 11结束语 12参考文献 13一、网站概述此次设计“意莱”家具网站是为了通过网上销售的方式从而增加店铺知名度以及开发潜在新客户。通过意莱网站的设计可以及时准确进行网络宜传、推广产品,增加点击率和浏览量。意莱家具可以帮助客户进行选择自己需要的产品,我们有各种各样风格的家具,网页上面我设置了首页、家具风格、家具分类、我的购物车、联系我们、注册会员。(见图1)/图1网站首页图网站架构我没有用壁纸,是为了让家具产品在白色底色的衬托下,更加显眼,可以一眼就可以看到上面的产品,让客户更方便的浏览。如果点击上面的图片会有阴影,视觉传达的效果更好。1.首页上面的框架是各个子页和子页的超链接,首页左上方我放的是网站的LOGO,右上方我放的是搜索引擎,下面我放的是导航栏,再下面是首页的主图上面是意莱家具网站主推的家具产品,下面是欧式田园风格、现代简约风格、传统中式风格图片,介绍产品风格的图片。用白色的底色,加上我们精美的家具,优美的文字加以概括,看上去很有设计感。下面还有热卖单品,一共有四款,还是用 *好棒文|www.hbsrm.com +Q: #351916072# 
白色的底色,加上我们精美的家具,优美的文字加以概括,看上去很有设计感。如果点击左上角会出现一个黄色购物车的小logo,图片会凸显出来,视觉效果很好。(见图2)/图2热卖单品图再下面的就是意莱家具网站的声明关于图片图片因光线和产品批次等问题,可能会有差异,请以收到实际货品为准。7天无理由退换货。本店支持7天无理由退换货,买家主观原因的退换货,买家承担邮费,商品质量问题等卖家原因的退换货卖家承担所有邮费100%正品保证,本店承诺,所售产品均为正品,购买商品请认准授权,谨防假冒劣质。关于发货每日下午16:00前的订单当日可以发货。本店默认汇通,EMS快递。(见图3)/图3网站声明图子页家具分类意莱家具是一家小型网站,虽然没有大型网站种类繁多,但是我们只做精品类的床、沙发和椅子。每周会定时更新,会有不同新产品的上线。家具风格意莱家具网站有欧式田园风格,欧式经典风格,现代简约风格,传统中式风格这四种不同风格的家具。每个人的需求都不同,要有不同风格的家具,来供用户挑选,才会留住用户。我的购物车这是每个网站必备的,客户不但可以将自己喜欢的家具添加进去,然后还可以根据自己的需要进行删减,这个页面也是为了支付平台而搭建的。联系我们上面有店铺地址,售后电话,和邮箱。对网站来说,用户的每一条建议都弥足珍贵,我们会解答每个用户的每一个的问题,时间段在800-2100之间。(5)注册会员每一个进来的用户都可以注册会员,我们会有会员的活动,可以减少金额,享受我们店铺的优惠和服务,如果点击购买要注册登入,才能进行购买,用户如果完善自己的信息,可以享受会员折扣价,有50元的优惠卷可以免费领取,但名额有限,领完即止。我们也可以根据这个掌握您的订单情况。本网站通过首页、热卖单品、家具风格、以及图片与图片相对应的文字叙述,通过整体框架的设置来向访客介绍了我们网站的主营产品以及网站整体的色彩格调和产品相对应的形象。(二)功能分配1.导航栏导航栏中含有产品具体分类(家具风格、家具分类),网站主导航位于网站最上面,居于banner之下通常网站的主导航主要包括网站的首页和产品栏目及各个单页面的导入链接。点击家具风格会有下拉菜单,上面有四个不同风格的选项可供客户选择,让客户可以更方便的找到自己想要的产品,方便用户以最快,最简单的方式到达不同的网页!同时也方便用户一目了然的发现网站的主要信息,而不用费力的寻找!如图4/图4导航图2..搜索栏的制作网站搜索框就是用户内容的查找。好的搜索框设计对于网站优化有一定的帮助,所以搜索栏在网站中,它的位置至关重要的,都对我们的用户有着直接的影响。网站搜索框帮助用户在极短时间查找到自己想要看的网站内容。网站搜索框应居于显眼位置,我的导航栏是土黄色,我的搜索框是蓝色的,这样更能凸显出来,我将他放在右侧便于客户进行搜索。3.购物车的设置页面上的购物车它好比是超市购物时我们使用的推车或篮子,可以暂时把挑选商品放入购物车、删除或更改购买数量,并对多个商品进行一次结款,是网上商店里的一种快捷购物工具。购物车是必备的,就好像每当我去超市购物的时候,我的第一反应就是去拿购物车了,因为双手所携带的东西是非常有限的,当你购买的商品多于你双手所能携带的商品的时侯,你就需要借助其它的工具来方便你携带以及进一步的购物。所以在这个时侯,购物车便出现了。 而就我个人的认识来看,网上购物车有合并购买的方便。并且可以减少很多多余的操作,客户可以很方便的在多个页面之间跳转,操作简单,看到自己想要自己的产品时,可以点击加入购物车的按钮,就会自动加入购物车里,然后进入后台进行统一付款!4.咨询客服现在的网站都配置了像线下导购一样用途的东西。那就是客服。当你在购物的时候需要咨询推荐或者有一些疑问都可以直接咨询客服,它能及时为您提供建议,它的作用就是解决客户的问题,要想更多的访客转化为客户。解决用户浏览产品,遇到问题可以直接拨打售后电话,进行询问。二、网站建设与规划(一)确定网站主题1,主题内容不分散制作网站主题时不要太分散,主题的内容可以在很多方面呈现,但有必要确定一个全面开发的主题,以便可以防止网站内容过于混乱,如果整体风格设置和配色非常混乱,会影响每个人的浏览体验,并会直接影响网站整体内容的分布。在浏览过程中,每个人都会感到特别不舒服。2,确定受众群体一定要了解不同受众群体的需求,了解这些需求者的审美角度,以及更好地判断他们对相应类别的网站需求,确定网站的设计风格的唯一方法是确定主题,并展示您自己的网站建设和设计的优势。3,网站内容丰富性网站的整体内容必须更加丰富,布局的设计必须合理,这对于确定网站的主题也非常有用,因为想为网站的内容获得更好的主题,还可以使内容更加一致。针对目标群体的需求,有必要确定内容的方向,以便更好地开发主题。当呈现网站的内容时,它将满足更多群体的需求。(二)规划网站 首先,规划网站我认为是个循序渐进的一个过程就像盖房子,你先需要想到它的整体布局,然后再在这个布局里面规划图片、文字等,所以是它是个有规律地来制作的一个过程。有了好的规划板块,才能把布局做好。列如网站的banner、网站的框架结构、栏目的设置、网站的背景风格、颜色搭配、版面布局、图文结合等,这些都需要在网页制作之前考虑好的只有这样才能在制作时驾轻就熟。也只有这样制作出来的网页才能有有特色和吸引力(三)搜集材料 确定了网站的主题之后,就可以围绕你的网站主题收集图片材料了。符合家具网站的材料,关于产品的相关图片,还有相关文字的收集。先要搜索功能健全的网站,然后根据自己的情况,确定自己的想要做哪几种家具,然后到百度图片、花瓣网或包图网等,进行收集图片,将符合自己的图片留下,进行编辑放到自己的网站里面。(四)选择制作工具一个网站的制作往往不止通过一个软件,我们需要选择适合自己的。一款操作简单、功能强大的软件往往可以起到事半功倍的效果。我选择的是Dreamweaver软件来制作我的网页。除此之外,我还实用了Photoshop,要知道图片虽然可以搜集,但是想要和自己的主题相对应还是少不了对图片的更改;这些软件合理的运用可以给网站增分不少。(五)开始制作 建房子的地皮,图纸以及材料都有了,工具也都准备得当。下面就需要按照规划一步步地把洋房建起来了。想法变成现实,这是一个复杂而细致的过程,我们要先把网站的框架和模板做出来,有了模板你做下面其他的网页就方便多了。当出现问题修改的时候也比较方便。灵活运用模板,大大提高了制作效率。三、网站的排版与布局(一)明确网页排版布局的原则 1.平衡性(1)文字、图像等要素的空间占用上分布均匀 (2)色彩的平衡,要给人一种协调的感觉。2.对称性 我国古代建筑大多都是用的对称性,空间位置的这种对称性设计,但网站不能过多的使用,否则会显得呆板,无趣,要适当加一点变化,这样会使网站不同于其他同行业的网站。3.对比性 色彩的冷暖给人的感觉会不一样,对比中最具魅力也是对比性的最关键的环节就是冷暖对比,形态对比,然而很多人在对于处理这一对比的时候会感到非常的困惑与迷茫,如果你处理得当往往可以创造出与众不同的视觉效果。 4.疏密度人们往往说做事要疏密有度,做网站恰好也需如此,网页不可就一种样式,要适当留白,这样顾客看着也不会视觉疲劳,要适当的加上一点变化,这样才会增长顾客在网站上停留的时间。 5.比例做网站比例虽然不一定要是黄金比例,但是一定要恰到好处,网页布局在网站中也是非常重要的一点。 (二)明确排版对象1.从网站内容上来进行排版文字是网站页面内容的主体,其排版工作主要包括字体、颜色、间距等,而这些内容是否合理、优化直接关系到用户体验的好坏,所以我们必须要做好网站内容的排版优化工作。网站内容中的处个文字之间的间距设置是否合理,不仅会影响网站页面的美观度,还会影响用户对网站的阅读效果。在进行间距排版时一定要符合用户的阅读习惯,如文字清晰,间距合适,文字适中,呈现出舒服的阅读感受。网站的内容也是可以有颜色的,所以我们在对网站内容进行排版时,要注意内容的颜色是否与网站整体的风格相统一,是否与页面背景搭配合理,是否能够突出文字内容等。如在白色背景的网站中,使用红色文字标题以及黑色文字正文,能将重点内容突出的同时,使整个网站充满层次感,在视觉上更加清晰明朗。设计风格是一种从美学的角度体现的一种艺术效果,我们在对网站的内容进行排版时,需要将内容的排版格式调整的与整个网站的页面设计风格相协调,让整个网站看起来整齐划一。如果想要创新的话,那么一定要把握好一个度的问题,必须保证整个网站看起来和谐统一。当然这些没有强制性要求,也可根据网站的需求适当灵活变动,但不宜过于另类。2.从网页的布局形式上来看制作了模板网站后我们的布局就会比较规范,一个页面由几个部分组成,每个部分针对他们都有着不同的功能。从上到下,从左到右。最上面现实banner,然后是导航栏,之后中间就是主要内容。3.综合起来看内容和形式即具体的网页的排版布局要能够达到一种协调的状态下才能真正的成功的网页设计,所以,不能单独考虑网页的内容的排版,如果单独考虑会造成整个页面的形式感很差,这样的排版布局会给使用者带来不良的心情。四、网站形象与风格设计(一)网站形象设计1.网站logo意莱家具的logo,我用的是土黄色做底色,土黄色是暖色调,对人们也能够产生微暖的视觉心理感受,给人以一种稳重、踏实的感觉。可以使客户对我们的产品放心,信任我们的产品。所以我用了土黄色作为底色,并且与网站风格一致。意莱家具这几个字是用的是Adobe illustrated做的,用的是造字工坊的字体,然后用钢笔工具稍微改了一下。英文和中文相结合,视觉效果很好。(见图5)图5logo图2.banner的设计与制作在网站设计中,banner的设计极其重要,它就像主食一样,支撑着一个项目一个公司,一个网站的运转。也是多数新产品,新事物,各种优惠活动呈现给用户和消费者的主要第一途径。Banner的核心使命其实是吸引用户关注,然后被点击,banner主要有图片和文字组成。(1)图片产品数量不宜过多。摆放太多产品,反而被淹没,视觉效果大打折扣。要符合网站 的特色,banner的背景图最好是结合企业的行业特点进行独立只做或者是搜集符合其主旨的图片来使用。(2)文字Banner用两句话表达即可,广告语要朗朗上口,突出重点,并且文字的字体大小、颜色、特效与网页的排版息息相关,让文字对banner起到画龙点睛的作用,烘托出整个网站的整体主旨。 二)网站风格设计根据网站主题据此来设计网站的风格。1.CSS技术通过CSS技术可以使得网页设计变的更加灵活,它提供了丰富的文档样式,我们可以通过CSS样式来给文字进行艺术化的编辑,以及文本的设置。可以在多个页面上重复使用。有了文字我们当然也要有合适的背景来搭配。背景的更改也可以在通过CSS样式实现。合理的运用CSS样式可以加快我们网站的加载速度,还能给我们的网页增添了其他的功能,使页面更具吸引力。CSS样式修改方便使用灵活,是我们只做网页的重要工具。2.网站子页面网页的制作有很多软件,我使用了Dreamweaver软件先结合自己构思制作了一个大的框架。然后通过Dreamweaver软件在页面里编辑代码内容,然后再发布到自己的网站上。模板页的制作,它可以使网页的风格保持一致。我在里面保留了banner,点击其中的某一个产品,就会跳出这个产品的子页面,我首先是用PS将它做成一个长图,然后将它放进子页面里面,用代码将它实现出来,还有一些小的图标都是用PS做出来的,要知道他们是多少像素,然后用代码将他们实现出来。3.色彩搭配网页整体的设计与色彩的搭配息息相关,不同的颜色可以给人产生不一样的视觉情感效果。4.行为页面效果通过选中页面编辑区下方的,并点击行为面板上的“+”号按钮,我们可以在菜单里选择设置文本,在设置状态栏文本在里面输入“欢迎宝贝们来到梦乐坊!”你点击浏览器预览即可在网页左下角呈现效果。弹出消息窗口的设置可以让客户对店铺的主要活动一目了然,有意向购买的客户也一定会主动了解此活动,我们通过选中页面编辑区下方的,然后点击行为面板上的“+”号按钮,在菜单里选择弹出信息并在里面输入店铺相应活动即可。如图10五、网站的详细操作说明(一)网站的首页网站的首页集合了网站的重要信息和内容。首页包含了店铺的公告,产品的展示,以及店铺热门产品等。首页导航栏更是体现了网站的精华,导航栏目中的内容都含有链接可以供网站浏览者点击查看。只需将鼠标放在导航栏的各栏目下点击即可。(二)家具分类项之所以有家具分类这一块,是家具的种类有许多,用户可以挑选自己想要的哪一款家具,可以快速、方便的找到家具。点击家具分类就能找到用户自己想要的,可以帮助用户进行浏览。(三)家具风格项是因为,家具的风格有恒很多种,如果顾客不知道自己的家具应该买什么风格的,这个可以帮助他们找到自己想要的那种风格或者符合装修风格的家具。(四)热卖单品项针对有选择困难症的顾客我们可以介绍其了解一下热门产品,从而减少选择对象,提高选择效率。点击热卖必看可以看到产品一条搜索栏,可以让客户自己删选心仪的产品。每一款产品里面都插入了它独立的链接。只需点击产品图片即可进入。内置返回按钮,轻点返回即可回到首页。(五)用户登录点击用户登录即可进入登录界面,输入相应内容后点击登录即可。内置返回按钮。可以直接点击返回,即可回到首页。用户如果遇到注册问题,可以直接点击返回首页去咨询客户哦!(六)注册会员点击注册会员即可进入注册页面,里面需填写手机号码获取验证码,还有完善信息按钮,点击完善信息即可进入新用户礼包页面。完善信息后即可登录获取5.5折新人优惠还有50元无门槛优惠券,可以更加实惠购买到我们的家具。六、网站的推广与维护(一)网站推广网站成功的建立后我们的推广工作也一定要跟上,通过各种有效的手段将公司网站的访问量提升上去。这成了每一个网站必要的考虑因素。我们可以通过使用搜索引擎推广、撰写软文、网址交换链接、传统的媒体宣传、老客户推新、手机软件营销等方式实现对网站的开发。1、搜索引擎推广搜索引擎是我们最常用的,要单从推广方式来说最有效的莫过于搜索引擎推广了吧,访问速度快、内容独特少重复,对网民有用,而且具有唯一性。我们可以在百度,360,搜狗之类较为知名的搜索引擎上做宣传,当别人在搜索家具,实木等相关字眼的时候能够搜索到我们公司,产品,网址等信息。2、撰写软文阔以通过书写软文或者是引用好的文章,并在里面巧妙地加入自己的网址的形式在新浪、网易、凤凰、搜狐这些大门户网站上发表,从而形成关注,达到推广效果,阔以让文章的价值最大化。3、网址交换链接和具有相似目标的网址之间实现相互推广的名单,利用合作伙伴间彼此的访问量合作推广,实现资源共享传统的媒体宣传4、论坛营销论坛营销适用于商业企业的论坛营销分析,对长期无投资项目组合应用,精确的预估未来企业投资回报率以及资本价值。然后发表热门内容,利用论坛的超高人气,可以加速企业知名度的提升。它具有较强的聚众能力。通过企业或个人在论坛上发帖,它可以通过这个平台与网友进行互动。这种推广方式成本低廉,可信度高,见效快。5、老客户推新定时给老客户发送邮件或者留言,现在来说也是有一定的宣传效用。特别是针对对我们有一定信赖度的客户而言,我们可以在活动佳节时期给老客户推送一些活动信息,来促进他们的再次消费。并且提出推荐新客户可以享受5折优惠的超大力度。来吸引客户推进新客户的滋生。6、手机软件营销现在智能手机功能是越来越全面,什么功能都有,利用手机的便利性,传播信息也非常快。我们可以在微信朋友圈里面发送活动消息,也可以在一些社交软件上面发布文章,通过现有的客户群体去传播。达到一传十,十传百的妙处。(二)网站更新与维护一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。维护方向如下1.根据企业产品的上新,以及活动的内容,对网页进行不定时的更新!2.针对老客户,我们需要不定时的去推送活动或是信息(时间间隔要有度)3.为了适应客户的需求而对网页开发新的子页来充实网站4.与时俱进,我们也要吸取竞争对手的优点5.想要让客户找得到我们的网站,我们的推广工作也要跟的上,无论是网络广告还是友情链接都需要开拓。结束语首先感谢我的授课老师赵老师,网站的设计与知识,都离不开你的细心指导。而你无私的教学,帮助我们很快学会网站设计和网站设计。 不知不觉,时间飞逝,两年的大学已然到达了尾声,在此期间大学让我不但学习了丰厚的知识,而且更重要的是学习到了在阅读、实现中所培养的思维方式、表达能力和广阔视野。很庆幸这两年来我遇到了如此多的良师益友,无论在学习上、生活上,还是工作上,都给予了我无私的帮助和热心的照顾,让我在一个充满温暖的环境中度过两年的大学生活。感恩之心难以用言语度量,谨以最真诚的话语致以最崇高的敬意。    “长风破浪会有时,直挂云帆济沧海。”这是我少年时最喜欢的诗句。就用这话作为这篇报告的一个结尾,也是一段生活的结束。希望自己归来时仍是少年,能够继续少年时的梦想,永不放弃。参考文献赵春燕主编.电子商务网站设计与制作[M].-北京北京大学出版社,2011.4赵浩波,马尚平.新建网站的推广方法与对策研究[J].管理观察,2016(23):64-67.张岩. 电商网站视觉设计应用研究[D].湖北工业大学,2016.袁泉.网站维护和安全管理的重要性分析[J].计算机光盘软件与应用,2014,17(11)194+196.黄旭东.浅议Flash在网站中的应用[J].湖南大众传媒职业技术学院学报,2013,13(01)50-52蒋继红.电子商务美工课中PS图片处理教学探索[J].中国教育技术装备,2017(13)147-148+152.韩媛媛.浅谈Dreamweaver在网页设计中的应用[J].信息与电脑(理论版),2016(07)57-58王艳.Dreamweaver网页制作技巧与问题处理[J].电脑编程技巧与维护,2016(19)70-72.
目录

版权保护: 本文由 hbsrm.com编辑,转载请保留链接: www.hbsrm.com/jmgl/dzsw/135.html

好棒文