网页设计之爱家窗帘

1、    网页设计之爱家窗帘    夏洋【摘 要】进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程。经过几个月的学习，我对网页设计有了一些初步的认识。在网页设计过程中，我借鉴学习了国内外优秀网页的设计方法，运用dreamweaver和firworks进行图片的处理和网页的制作，设计了一个窗帘的网页。【关键词】网页设计；爱家；图片的制作一、选题原因及优势具备充分了解窗帘的家庭条件：父母从事窗帘行业的个体经营工作，所以我对窗帘了解也比较多，从量尺

2、寸到裁剪布料再到做成成品，以至于安装，我都有深刻的了解，也曾自己亲手做过，因而在网页设计实战中选择窗帘平台的建设；同时，家里所做的窗帘生意大多都是线下的，我也想将所学的专业知识应用于在这里，打造线上出售窗帘的平台。二、网页设计概述1.查找资料网页设计技术方面的主要资料来自于课本网页设计与制作，同时在网页配色100%中学习了配色；网页设计内容方面知识主要来自于家里窗帘的宣传板和图片，部分来自于网络。2.开发工具本次网页设计使用了firworks和dreamweaver软件。其中，firworks主要是对图片进行处理，使用dreamweaver的div和表格为整个网页布局，并用代码制作网页特效。3

3、.设计理念21世纪是信息主宰的世纪，随着电子商务的发展，人们乐于并习惯于网购；但对于窗帘方面的电子商务，因其对尺寸要求比较严格、需专业人员安装等特点，消费者对此的网购热情没有完全的被激发出来，同时也没有一家窗帘的品牌被广大网页得知，特设计此网页来填补这片空白，让大家能通过互联网选购到自己喜爱的窗帘。4.基本框架上方导航栏分为七个方面，分别为首页、新品、热卖经典款、遮光窗帘、棉麻窗帘、窗纱和配饰。在首页的最下方还有一个导航栏，分为新手上路、帮助中心以及客户服务三个方面。5.总体选材在选择材料的过程中，考虑到主题，颜色的统一，主体的颜色采用黑白两种颜色；网页中的窗帘类型均来自于家里的窗帘，选取几款

4、卖的比较好窗帘放到平台上；图片选取与背景比较搭配的，大多都是颜色偏暗的图片，大多来自于供应商的店铺网站。三、对于网站中图片的处理1.对于logo的制作（如图3.1 1）logo：在logo制作中，采用了三种格式文字搭配的形式，主体是一个英文形式的aijia字样，在左边和下边分别采用新宋体和宋体的文字搭配使用，使得整个logo看起来简约而不简单，让看到logo的消费者能一下子记住我们的品牌-爱家，同时也蕴含着我们走中高端路线，体现了我们的服务群体。2.图片批处理在网页设计过程中，图片处理是很重要的一部分，图片的批处理更是重要；在很多地方需要放相同规格的图片，所以就用到了firworks的批处理功

5、能，文件-批处理-选择图片-缩入-添加-scale to size-更改图片像素。同时利用firworks对个别图片实现锐化、模糊、修剪、添加文字等等。3.导航条的设计（如图3.3 1，3.3 2所示）（1）为主导航条，每一个链接都可实现（链接到下一个网页）。（2）为副导航条，位于首页的最下方，提供浏览窗帘之外的一些服务。主导航条是荧光效果的导航，采用黑白搭配的方式，当鼠标放上时，对应文字会由暗白变成亮白，有一种被点亮的感觉。副导航条当鼠标放上时，文字会呈现出加粗的效果。四、分说每一内容页的制作过程1.首页对于首页，整体的框架利用表格和div来完成的；页顶部分添加logo图片和一个搜索栏，紧接

6、着是主导航条，在页面的中心位置放置了多张firworks生成的图片，其中第一个大图是裁剪出左右部分进行模糊处理组合在一起的，同时通过在窗帘图片上加上文字，在个别窗帘图片中间放入用firworks做成的文字图片，使得整个页面更加生动和谐，在页底，放上设计好的副导航条。（如图所示）2.新品页新品页主要向买家展示最新的窗帘款式，主要采用了div进行布局；上方是主导航栏，紧接着是用firworks为新品页面做的一个图片（如图4.2 1），展示本店的优惠政策，下方展示了两款新品，用户可以通过单击查看详情了解更多关于两款新品的信息，在对应链接的子页中详细介绍了该款式窗帘。3.热卖经典款页热卖经典款页主要向

7、用户展示了销量最好的一款窗帘，页顶是logo以及主导航条，紧接着是文字和窗帘图片合成的一张热卖经典款样图（如图4.3 1），然后在下方重点介绍了“南池秋晓”这款热卖窗帘，从材质、风格、货号对它进行了全面的介绍；如果用户在浏览过程中看中了这款窗帘，可以对它进行收藏购买。4.遮光窗帘页遮光窗簾是窗帘大类的一种，遮光效果很好，利于睡眠；遮光窗帘页的页顶，也和前面保持一致，是logo以及主导航条，紧接着是文字和窗帘图片合成的一张遮光窗帘样图，为使得整个网页简单大方，对于窗帘的介绍都采取统一的模式，即如热卖经典款样式，对窗帘的材质、风格、产品搭配、产品实拍进行了全面的介绍。5.棉麻窗帘页棉麻窗帘是窗帘大

8、类里面的一种，因其比较薄，容易清洗而广受大众喜爱；棉麻窗帘页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张棉麻窗帘样图，在该图片的右下角，是了解详情的超链接，链接到“浪漫四叶草”子页，对“浪漫四叶草”这一款窗帘进行了详细的介绍。6.窗纱页窗纱也是窗帘大类的一种，白天拉上窗纱，既可以让阳光照进室内，也可以适当地起到遮挡的作用；窗纱页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张窗纱样图（如图4.6 1），然后在下方介紹了一款窗纱“玫瑰心语”，介绍该窗纱的方式与窗帘相同，从材质、风格

9、、原料、情景展示、产品实拍等多方面进行介绍，如果买家看中，可进行收藏购买。7.配饰页窗帘配饰主要包括扎带，窗帘轨道，挂钩等，在该页主要介绍了窗帘轨道；采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张配饰样图，在下方详细介绍了窗帘轨道，从货号、颜色等基础信息再到商品实拍、细节展示等，带领买家充分的了解了该轨道。8.副导航条订单查询页和了解店铺页在订单查询页上有一个登录界面，登录账号和密码即可进行查询，若已登录可直接进行查询。了解店铺页就是对店铺进行介绍，店铺大小、位置、发展状况等。9.副导航条售后服务页和窗帘百科页这两页是全文本的形式，对售后服务和窗帘百科进行了介绍。10.副导航条联系我们页该页是一个图片。介绍了联系电话，邮箱，地址等。五、设计中遇到的重点与难点在专业知识，软件使用的过程中发现的难点与不足的同时，更要说明的是一种常识问题以及一些周边学科知识的空白。说到常识，自然是网页的结构，在我们平时的学习生活中，也会看到很多的网站，但大多大家都是关注它的实用内容，即使美观也是抱着欣赏的态度去看，并没有静下心来看一看，网站是如何布局的？字体大小如何设置的？而这都是在平时制作过程中所发现的不足。还有一点就是周边学科知识的空白，比如在制作过程中，网页的颜色涉及到色彩学，颜色与主题紧密结合，什么主题使用什么颜