《网页设计与网站建设课程设计》报告.pdf

湖北汽车工业学院

《网页设计与网站建设》课程设计报告

网站名称：森宿天猫旗舰店

班级：T1153-1

学号：***********

姓名：lj

2013

一、网页设计主题

电子商务类的网站如果想一眼吸引到客户，首先，网页打开速度不能过太

慢（过慢会使客户没有耐心，最终直接关闭页面），这点要求网页自身大小不要

过大。其次，为了顾客在自己的网页上停留的时间长，最后购买商品，网页设计

要有自己的鲜明的特点，各网页及相关的下级页面的配色要一致。

在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整

体风格和特色作出定位，规划网站的组织结构。Web站点应针对所服务对象（机

构或人）的不同而具有不同的形式。为了做到主题鲜明突出，要点明确，应该使

配色和图片围绕预定的主题；调动一切手段充分表现网站点的个性和情趣，办出

网站的特点。充分利用已有信息，如客户手册．公共关系文档．技术手册和数据

库等。

我设计的森宿网页，（森：森林，真我的世界；宿：停留，诗意的栖息）森

宿的主题是文艺、怀旧、复古、记录、慢生活。所以我做的网页围绕简约、怀旧

的主题设计而成。

二．网站的总体规划与网站的结构框图；

我的网站共有7个频道：首页、收藏本店、新品、裙装、上装、下装、配

饰、品牌*记、会员*惠、无线专享问卷领心意

每一个页面用都统一的背景图片，并且颜色都采用棕色系的，以保证网站

统一的页面风格。如下图：

网站整体色调为，然后深棕色，点缀其他不同的颜色相配，突出主题，

颜色没有过多，过杂，用以避免给人一种杂乱的感觉。版面设计十分灵活，根据

各部分内容的不同适当的自由设计。网页布局主要用框架和表格，用框架定位内

容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体

内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、

准确的调用。另外，为了网页布局不至于太单调，我在主页加入了适当的自动切

换动态图片，用以达到更好的浏览效果。

每个页面都可以通过导横条链接到相应的页面，新品一栏主要是每周发

布新品发布，让顾客可以第一时间浏览到最新的服饰；裙装、上装、下装和配饰

是都所有商品进行大致划分；品牌记则是宣传旗舰店的设计及服务理念，让客户

更了解网页的思想；会员惠主要展示会员价的商品；无线专享页面是一个新闻页

面，上面显示了每日特价的一些商品基本信息和店铺相关活动的新闻；我的网站

还涉及了填写问卷，以便于与客户互动，了解客户动态及对网站做出相应调整。

三．网页风格说明；

网页风格是指：网站页面设计上的视觉元素组合在一起的整体形象，展现

给人的直观感受。这个整体形象包括网站的配色、字体、页面布局、页面内容、

交互性、海报、宣传语等因素。

1.网站风格一般要与与企业的整体形象相一致，结合企业的整体色调、

企业的行业性质、企业文化、提供的相关产品或服务特点的众多因素，我将网页

的风格定为文艺、天然、质朴，网站所出售的衣服钟情于棉麻天然材质，所以网

页的配色选为与棉麻色相呼应的棕色，并且带点渐变，这也体现了麻布的纹理特

色。网站风格既能传递企业文化信息，又能帮助客户认识和了解网站背后的企业，

帮助企业树立别具一格的形象。

森宿网站主张，追求布料的艺术审美，感悟内心的时尚，欣赏一件衣裳素雅、

简洁，却不简单地模样，记录生活珍贵片段。独特的网页气质，直接给自身网站

和所处行业的其它网站之间营造出一种清晰的辨识度。

2.线条和形状的选择

文字、标题、图片等的组合，会在页面上形成各种各样的线条和形状。这

些线条与形状的组合，构成了主页的总体艺术效果。

我的网页大多是直线（矩形）的应用。因为直线条的艺术效果是流畅、挺

拔、规矩、整齐的，也就是所谓的有轮有廓。直线和矩形在页面上的重复组合可

以呈现井井有条、泾渭分明的视觉效果。一般应用于比较庄重、严肃的主页题材。

但在图片搭配上部分也采用了曲线，曲线效果是流动、活跃，具有动