网页设计之爱家窗帘

夏洋

【摘 要】进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程。经过几个月的学习，我对网页设计有了一些初步的认识。在网页设计过程中，我借鉴学习了国内外优秀网页的设计方法，运用dreamweaver和firworks进行图片的处理和网页的制作，设计了一个窗帘的网页。

【关键词】网页设计；爱家；图片的制作

一、选题原因及优势

具备充分了解窗帘的家庭条件：父母从事窗帘行业的个体经营工作，所以我对窗帘了解也比较多，从量尺寸到裁剪布料再到做成成品，以至于安装，我都有深刻的了解，也曾自己亲手做过，因而在网页设计实战中选择窗帘平台的建设；同时，家里所做的窗帘生意大多都是线下的，我也想将所学的专业知识应用于在这里，打造线上出售窗帘的平台。

二、网页设计概述

1.查找资料

网页设计技术方面的主要资料来自于课本《网页设计与制作》，同时在《网页配色100%》中学习了配色；网页设计内容方面知识主要来自于家里窗帘的宣传板和图片，部分来自于网络。

2.开发工具

本次网页设计使用了firworks和Dreamweaver软件。

其中，firworks主要是对图片进行处理，使用Dreamweaver的Div和表格为整个网页布局，并用代码制作网页特效。

3.设计理念

21世纪是信息主宰的世纪，随着电子商务的发展，人们乐于并习惯于网购；但对于窗帘方面的电子商务，因其对尺寸要求比较严格、需专业人员安装等特点，消费者对此的网购热情没有完全的被激发出来，同时也没有一家窗帘的品牌被广大网页得知，特设计此网页来填补这片空白，让大家能通过互联网选购到自己喜爱的窗帘。

4.基本框架

上方导航栏分为七个方面，分别为首页、新品、热卖经典款、遮光窗帘、棉麻窗帘、窗纱和配饰。在首页的最下方还有一个导航栏，分为新手上路、帮助中心以及客户服务三个方面。

5.总体选材

在选择材料的过程中，考虑到主题，颜色的统一，主体的颜色采用黑白两种颜色；网页中的窗帘类型均来自于家里的窗帘，选取几款卖的比较好窗帘放到平台上；图片选取与背景比较搭配的，大多都是颜色偏暗的图片，大多来自于供应商的店铺网站。

三、对于网站中图片的处理

1.对于logo的制作（如图3.1 1）

Logo：在logo制作中，采用了三种格式文字搭配的形式，主体是一个英文形式的AIJIA字样，在左边和下边分别采用新宋体和宋体的文字搭配使用，使得整个logo看起来简约而不简单，让看到logo的消费者能一下子记住我们的品牌--爱家，同时也蕴含着我们走中高端路线，体现了我们的服务群体。

2.图片批处理

在网页设计过程中，图片处理是很重要的一部分，图片的批处理更是重要；在很多地方需要放相同规格的图片，所以就用到了firworks的批处理功能，文件-批处理-选择图片-缩入-添加-scale to size-更改图片像素。同时利用firworks对个别图片实现锐化、模糊、修剪、添加文字等等。

3.导航条的设计（如图3.3 1，3.3 2所示）

（1）为主导航条，每一个链接都可实现（链接到下一个网页）。（2）为副导航条，位于首页的最下方，提供浏览窗帘之外的一些服务。

主导航条是荧光效果的导航，采用黑白搭配的方式，当鼠标放上时，对应文字会由暗白变成亮白，有一种被点亮的感觉。副导航条当鼠标放上时，文字会呈现出加粗的效果。

四、分说每一内容页的制作过程

1.首页

对于首页，整体的框架利用表格和div来完成的；页顶部分添加logo图片和一个搜索栏，紧接着是主导航条，在页面的中心位置放置了多张firworks生成的图片，其中第一个大图是裁剪出左右部分进行模糊处理组合在一起的，同时通过在窗帘图片上加上文字，在个别窗帘图片中间放入用firworks做成的文字图片，使得整个页面更加生动和谐，在页底，放上设计好的副导航条。（如图所示）

2.新品页

新品页主要向买家展示最新的窗帘款式，主要采用了div进行布局；上方是主导航栏，紧接着是用firworks为新品页面做的一个图片（如图4.2 1），展示本店的优惠政策，下方展示了两款新品，用户可以通过单击查看详情了解更多关于两款新品的信息，在对应链接的子页中详细介绍了该款式窗帘。

3.热卖经典款页

热卖经典款页主要向用户展示了销量最好的一款窗帘，页顶是logo以及主导航条，紧接着是文字和窗帘图片合成的一张热卖经典款样图（如图4.3 1），然后在下方重点介绍了“南池秋晓”这款热卖窗帘，从材质、风格、货号对它进行了全面的介绍；如果用户在浏览过程中看中了这款窗帘，可以对它进行收藏购买。

4.遮光窗帘页

遮光窗簾是窗帘大类的一种，遮光效果很好，利于睡眠；遮光窗帘页的页顶，也和前面保持一致，是logo以及主导航条，紧接着是文字和窗帘图片合成的一张遮光窗帘样图，为使得整个网页简单大方，对于窗帘的介绍都采取统一的模式，即如热卖经典款样式，对窗帘的材质、风格、产品搭配、产品实拍进行了全面的介绍。

5.棉麻窗帘页

棉麻窗帘是窗帘大类里面的一种，因其比较薄，容易清洗而广受大众喜爱；棉麻窗帘页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张棉麻窗帘样图，在该图片的右下角，是了解详情的超链接，链接到“浪漫四叶草”子页，对“浪漫四叶草”这一款窗帘进行了详细的介绍。

6.窗纱页

窗纱也是窗帘大类的一种，白天拉上窗纱，既可以让阳光照进室内，也可以适当地起到遮挡的作用；窗纱页采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张窗纱样图（如图4.6 1），然后在下方介紹了一款窗纱“玫瑰心语”，介绍该窗纱的方式与窗帘相同，从材质、风格、原料、情景展示、产品实拍等多方面进行介绍，如果买家看中，可进行收藏购买。

7.配饰页

窗帘配饰主要包括扎带，窗帘轨道，挂钩等，在该页主要介绍了窗帘轨道；采用div进行布局，页顶是logo以及主导航条，紧接着是运用firworks实现文字和窗帘图片合成的一张配饰样图，在下方详细介绍了窗帘轨道，从货号、颜色等基础信息再到商品实拍、细节展示等，带领买家充分的了解了该轨道。

8.副导航条——订单查询页和了解店铺页

在订单查询页上有一个登录界面，登录账号和密码即可进行查询，若已登录可直接进行查询。了解店铺页就是对店铺进行介绍，店铺大小、位置、发展状况等。

9.副导航条——售后服务页和窗帘百科页

这两页是全文本的形式，对售后服务和窗帘百科进行了介绍。

10.副导航条——联系我们页

该页是一个图片。介绍了联系电话，邮箱，地址等。

五、设计中遇到的重点与难点

在专业知识，软件使用的过程中发现的难点与不足的同时，更要说明的是一种常识问题以及一些周边学科知识的空白。

说到常识，自然是网页的结构，在我们平时的学习生活中，也会看到很多的网站，但大多大家都是关注它的实用内容，即使美观也是抱着欣赏的态度去看，并没有静下心来看一看，网站是如何布局的？字体大小如何设置的？而这都是在平时制作过程中所发现的不足。

还有一点就是周边学科知识的空白，比如在制作过程中，网页的颜色涉及到色彩学，颜色与主题紧密结合，什么主题使用什么颜色。不仅仅是主题颜色，还有各个模块的协调，用什么样的颜色来突出关键部分，采用对比色还是邻近色还是渐变色…都是我们在平时学习中所欠缺的，专业知识固然重要，但周边知识的学习同样不可或缺。

【参考文献】

【1】《网页设计与制作》，清华大学出版社，第三版.

【2】《网页布局与配色实战》，清华大学出版社，2017.