网页设计之爱家窗帘

　　【摘要】进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程。经过几个月的学习，我对网页设计有了一些初步的认识。在网页设计过程中，我借鉴学习了国内外优秀网页的设计方法，运用dreamweaver和firworks进行图片的处理和网页的制作，设计了一个窗帘的网页。
　　【关键词】网页设计；爱家；图片的制作
　　一、选题原因及优势
　　具备充分了解窗帘的家庭条件：父母从事窗帘行业的个体经营工作，所以我对窗帘了解也比较多，从量尺寸到裁剪布料再到做成成品，以至于安装，我都有深刻的了解，也曾自己亲手做过，因而在网页设计实战中选择窗帘平台的建设；同时，家里所做的窗帘生意大多都是线下的，我也想将所学的专业知识应用于在这里，打造线上出售窗帘的平台。
　　二、网页设计概述
　　1。查找资料
　　网页设计技术方面的主要资料来自于课本《网页设计与制作》，同时在《网页配色100》中学习了配色；网页设计内容方面知识主要来自于家里窗帘的宣传板和图片，部分来自于网络。
　　2。开发工具
　　本次网页设计使用了firworks和Dreamweaver软件。
　　其中，firworks主要是对图片进行处理，使用Dreamweaver的Div和表格为整个网页布局，并用代码制作网页特效。
　　3。设计理念
　　21世纪是信息主宰的世纪，随着电子商务的发展，人们乐于并习惯于网购；但对于窗帘方面的电子商务，因其对尺寸要求比较严格、需专业人员安装等特点，消费者对此的网购热情没有完全的被激发出来，同时也没有一家窗帘的品牌被广大网页得知，特设计此网页来填补这片空白，让大家能通过互联网选购到自己喜爱的窗帘。
　　4。基本框架
　　上方导航栏分为七个方面，分别为首页、新品、热卖经典款、遮光窗帘、棉麻窗帘、窗纱和配饰。在首页的最下方还有一个导航栏，分为新手上路、帮助中心以及客户服务三个方面。
　　5。总体选材
　　在选择材料的过程中，考虑到主题，颜色的统一，主体的颜色采用黑白两种颜色；网页中的窗帘类型均来自于家里的窗帘，选取几款卖的比较好窗帘放到平台上；图片选取与背景比较搭配的，大多都是颜色偏暗的图片，大多来自于供应商的店铺网站。
　　三、对于网站中图片的处理
　　1。对于logo的制作（如图3。11）
　　Logo：在logo制作中，采用了三种格式文字搭配的形式，主体是一个英文形式的AIJIA字样，在左边和下边分别采用新宋体和宋体的文字搭配使用，使得整个logo看起来简约而不简单，让看到logo的消费者能一下子记住我们的品牌爱家，同时也蕴含着我们走中高端路线，体现了我们的服务群体。
　　2。图片批处理
　　在网页设计过程中，图片处理是很重要的一部分，图片的批处理更是重要；在很多地方需要放相同规格的图片，所以就用到了firworks的批处理功能，文件批处理选择图片缩入添加scaletosize更改图片像素。同时利用firworks对个别图片实现锐化、模糊、修剪、添加文字等等。
　　3。导航条的设计（如图3。31，3。32所示）
　　（1）为主导航条，每一个链接都可实现（链接到下一个网页）。（2）为副导航条，位于首页的最下方，提供浏览窗帘之外的一些服务。
　　主导航条是荧光效果的导航，采用黑白搭配的方式，当鼠标放上时，对应文字会由暗白变成亮白，有一种被点亮的感觉。副导航条当鼠标放上时，文字会呈现出加粗的效果。
　　四、分说每一内容页的制作过程
　　1。首页
　　对于首页，整体的框架利用表格和div来完成的；页顶部分添加logo图片和一个搜索栏，紧接着是主导航条，在页面的中心位置放置了多张firworks生成的图片，其中第一个大图是裁剪出左右部分进行模糊处理组合在一起的，同时通过在窗帘图片上加上文字，在个别窗帘图片中间放入用firworks做成的文字图片，使得整个页面更加生动和谐，在页底，放上设计好的副导航条。（如图所示）
　　2。新品页
　　新品页主要向买家展示最新的窗帘款式，主要采用了div进行布局；上方是主导航栏，紧接着是用firworks为新品页面做的一个图片（如图4。21），展示本店的优惠政策，下方展示了两款新品，用户可以通过单击查看详情了解更多关于两款新品的信息，在对应链接的子页中详细介绍了该款式窗帘。
　　3。热卖经典款页
　　热卖经典款页主要向用户展示了销量最好的一款窗帘，页顶是logo以及主导航条，紧接着是文字和窗帘图片合成的一张热卖经典款样图（如图4。31），然后在下方重点介绍了南池秋晓这款热卖窗帘，从材质、风格、货号对它进行了全面的介绍；如果用户在浏览过程中看中了这款窗帘，可以对它进行收藏购买。
　　4。遮光窗帘页
　　遮光窗簾是窗帘大类的一种，遮光效果很好，利于睡眠；遮光窗帘页的页顶，也和前面保持一致，是logo以及主导航条，紧接着是文字和窗帘图片合成的一张遮光窗帘样图，为使得整个网页简单大方，对于窗帘的介绍都采取统一的模式，即如热卖经典款样式，对窗帘的材质、风格、产品搭配、产品实拍进行了全面的介绍。
　　5。棉麻窗帘页
　　棉麻窗帘是窗帘大类里面的一种，因其比较薄，容易清洗而广受大众喜爱；棉麻窗帘页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张棉麻窗帘样图，在该图片的右下角，是了解详情的超链接，链接到浪漫四叶草子页，对浪漫四叶草这一款窗帘进行了详细的介绍。
　　6。窗纱页
　　窗纱也是窗帘大类的一种，白天拉上窗纱，既可以让阳光照进室内，也可以适当地起到遮挡的作用；窗纱页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张窗纱样图（如图4。61），然后在下方介紹了一款窗纱玫瑰心语，介绍该窗纱的方式与窗帘相同，从材质、风格、原料、情景展示、产品实拍等多方面进行介绍，如果买家看中，可进行收藏购买。
　　7。配饰页
　　窗帘配饰主要包括扎带，窗帘轨道，挂钩等，在该页主要介绍了窗帘轨道；采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张配饰样图，在下方详细介绍了窗帘轨道，从货号、颜色等基础信息再到商品实拍、细节展示等，带领买家充分的了解了该轨道。
　　8。副导航条订单查询页和了解店铺页
　　在订单查询页上有一个登录界面，登录账号和密码即可进行查询，若已登录可直接进行查询。了解店铺页就是对店铺进行介绍，店铺大小、位置、发展状况等。
　　9。副导航条售后服务页和窗帘百科页
　　这两页是全文本的形式，对售后服务和窗帘百科进行了介绍。
　　10。副导航条联系我们页
　　该页是一个图片。介绍了联系电话，邮箱，地址等。
　　五、设计中遇到的重点与难点
　　在专业知识，软件使用的过程中发现的难点与不足的同时，更要说明的是一种常识问题以及一些周边学科知识的空白。
　　说到常识，自然是网页的结构，在我们平时的学习生活中，也会看到很多的网站，但大多大家都是关注它的实用内容，即使美观也是抱着欣赏的态度去看，并没有静下心来看一看，网站是如何布局的？字体大小如何设置的？而这都是在平时制作过程中所发现的不足。
　　还有一点就是周边学科知识的空白，比如在制作过程中，网页的颜色涉及到色彩学，颜色与主题紧密结合，什么主题使用什么颜色。不仅仅是主题颜色，还有各个模块的协调，用什么样的颜色来突出关键部分，采用对比色还是邻近色还是渐变色都是我们在平时学习中所欠缺的，专业知识固然重要，但周边知识的学习同样不可或缺。
　　【参考文献】
　　【1】《网页设计与制作》，清华大学出版社，第三版。
　　【2】《网页布局与配色实战》，清华大学出版社，2017。