爱宠商城网站设计与实现
：爱宠商城由网站首页、店面展示、爱宠服饰、宠物百科，宠物论坛、联系我们这些主页面组成，店面展示由宠物狗跟宠物猫子页面面组成，宠物百科里包含护理百科，疾病百科，饲养百科这些子页面组成。宠物买卖，宠物护理，宠物论坛都可以在爱宠商城上面直接进行，为需要帮助的宠物跟宠物的主人提供更加便利的方式。爱宠商城网的开发使用的是HTML超文本语言，网页的布局技术使用的是DIV+CSS布局，在网页中所使用的图片切换技术是JAVASCRIPT脚本，和FLASH播放控件技术。网页的设计效果和整体风格设计是在PHOTOSHOP中完成的。
目录
一、 引言 1
二、开发工具与开发技术 1
（一） Photoshop网站设计工具介绍 1
（二） Dreamwear网页制作工具介绍 1
（三）DIV+CSS布局技术 1
三、 爱宠商城网站设计 1
（一） 网站的设计理念与风格 1
（二）网站的栏目结构 2
（三）页面布局设计 2
3.1爱宠商城首页的布局结构 2
3.2爱宠商城店面展示页面布局 3
3.3爱宠商城爱宠服饰页面布局 3
3.4爱宠商城宠物百科页面布局 3
3.5爱宠商城宠物论坛页面布局 3
3.6爱宠商城联系我们页面布局 3
3.7爱宠商城三级页面结构布局 4
（四）详细设计 4
四、爱宠商城网站实现 5
（一）爱宠商城网首页设计与制作 5
（二）爱宠商城网店面展示页面设计制作 6
（三）爱宠商城网爱宠服饰页面设计制作 6
（四）爱宠商城网宠物百科页面设计制作 8
（五）爱宠商城网宠物论坛页面设计制作 9
（六）爱宠商城网联系我们页面设计制作 12
（七）爱宠商城三级页面设计制作 12
五、总结 15
致谢 16
参考文献 17
引言
随着宠物行业的日益兴旺，从刚刚开始宠物网站仅有的的宠物交易，交易猫跟狗这两项已经不能满足人们的需求了，人们对宠物的呵护也越来
*好棒文|www.hbsrm.com +Q: ^351916072*
越细致化，爱宠人士开始给宠物买衣服，给宠物护理跟爱宠人士一起交流怎么更好的照顾宠物，爱宠商城就是基于人们的需求开发的一项集宠物交易，宠物服饰，宠物百科，宠物护理，宠物论坛的大型宠物商城，爱宠人士可以在爱宠商城里享受他们所需要的任何服务，可以给自己的小宠物购买衣服，在宠物护理里学到呵护宠物的知识，在论坛里发表宠物趣事一起交流怎么更好的饲养宠物，让宠物更加健康快乐的成长。
本文运用HTML超文本标记语言来开发爱宠商城网，首先是素材的收集和风格设计的确定，参考其他宠物网站设计结合自己的企业特色，确定整个网站的色调和设计风格，然后在PHOSHOP中进行网页的设计工作，在网站的设计工作完成之后开始在DREAMWEAVER中开始网站的制作，整个网站将要采用DIV+CSS技术进行布局，最后使用JAVASCRIPT脚本语言实现网页中的互动方式。
二、开发工具与开发技术
（一） Photoshop网站设计工具介绍
在爱宠商城网中第一步要做的就是对网页的整体效果进行设计，界面设计的效果是在Photoshop中完成的，其中包括网站的整体色调设计，相关素材的搭配，以及网站的整体栏目布局。爱宠导航上面的脚印在界面设计好之后还需要在PS中进行切图，使用切图工具，把爱宠商城的图片素材命名相关的名字，保存为网页所用格式，最后保存在图片文件夹中。
（二） Dreamwear网页制作工具介绍
爱宠商城网的制作是在Dreamwear中进行，首页的导航代码都是在dreamwear里进行编写，页面的布局以及js特效都是用dreamwear里编写。
（三）DIV+CSS布局技术
爱宠商城网所使用的布局技术是DIV+CSS。DIV就是Dreamwear中的层区块，而CSS通过控制DIV的位置和样式来使网页和爱宠商城网设计效果一致，制作过程主要是在Dreamwear中进行。
三、 爱宠商城网站设计
（一） 网站的设计理念与风格
爱宠商城的网的设计要以人为本，把用户对宠物的喜爱之情在设计上表现出来。网站的设计主要以蓝色和绿色调为主，充分体现出宠物的可爱，和对人类的忠诚，让网站的访问者在打开网页的时候能够喜欢上网上的色调风格。
在爱宠商城的头部是白色和浅绿色的圆点交错排列横向平铺，主要是起到吸引客户视觉焦点的作用，让用户第一眼就看到网站头部，在网站的顶部是网站的logo信息，在logo的旁边是一只宠物狗，旁边写着“有你的生活更精彩”，用来宣誓网站的主题，在头部的右侧是搜索框，用户可以搜索出喜欢的宠物信息。
在头部的下方使用的是深青色的导航背景图片，在导航背景上隐者宠物狗的脚印，起到渲染主题的作用，爱宠商城的主体部分左侧上部是一个用小黑板素材来做网站的公告信息，把站内消息第一时间通知给网站的访客，右侧是网站的焦点图板块，里面是三张宠物广告图轮播的形式展示给用户，爱宠商城的主体栏目条使用的是深红色，既可以更好的衬托栏目板块信息，有可以对整体色调起到点缀作用，让整个网站色彩更加丰富起来。配色见图31
图31 宠物商城配色表
（二）网站的栏目结构
在爱宠商城网中主要的栏目结构有，网站的首页，店面展示，爱宠展示，爱宠百科，宠物论坛，和联系我们页面。店面展示里面有宠物猫，宠物狗这两个二级子页面，爱宠服饰里面有各种各样服饰的图片，每张图片都能点进去进行购买，爱宠百科里包括护理百科，疾病百科，饲养百科
（三）页面布局设计
3.1爱宠商城首页的布局结构
爱宠商城的首页布局使用的是上中下“巨型”布局结构，在网站的最上面是网站的头部信息吗，头部的左侧部分是网站的Logo信息，头部的右侧部分是搜索框，在头部的下方是网站的导航信息，通过导航可以进入其他栏目页面，导航下方是网站的主体部分，主体部分的头部是网站的公告栏目，公告的右侧是网站的焦点图，里面放着宠物的广告图片，在主体的中间部分左侧是宠物的今日特价商品部分，和爱宠商城知识栏目，右侧是宠物的商品中心部分。在主体的最下面是爱宠服饰栏目和版权信息栏目。
网站头部
网站导航
网站公告
网站焦点图广告
今日特价
宠物展示中心
宠物百科
爱宠宣传图
爱宠服饰展示
版权信息
图32爱宠商城网首页结构布局图
3.2爱宠商城店面展示页面布局
爱宠商城店面展示页面布局在头部沿用了首页的布局结构，主要是在主体部分做出了变化，左侧是网站公告和爱宠商城两个主要栏目，下面放一张宠物图片，右侧是店面展示的具体内容主要包含了宠物猫宠物狗两个板块。
3.3爱宠商城爱宠服饰页面布局
爱宠商城网爱宠服饰页面布局结构，头部沿用了首页的头部布局，在页面的左侧头部是商品的分类信息，左侧下部分是今日特价信息和爱宠商城信息，在爱宠服饰的右侧头部是flash图片切换，右侧下部分是宠物模特的商品信息内容，在网站的最底部是版权信息内容，具体的布局结构如下：
目录
一、 引言 1
二、开发工具与开发技术 1
（一） Photoshop网站设计工具介绍 1
（二） Dreamwear网页制作工具介绍 1
（三）DIV+CSS布局技术 1
三、 爱宠商城网站设计 1
（一） 网站的设计理念与风格 1
（二）网站的栏目结构 2
（三）页面布局设计 2
3.1爱宠商城首页的布局结构 2
3.2爱宠商城店面展示页面布局 3
3.3爱宠商城爱宠服饰页面布局 3
3.4爱宠商城宠物百科页面布局 3
3.5爱宠商城宠物论坛页面布局 3
3.6爱宠商城联系我们页面布局 3
3.7爱宠商城三级页面结构布局 4
（四）详细设计 4
四、爱宠商城网站实现 5
（一）爱宠商城网首页设计与制作 5
（二）爱宠商城网店面展示页面设计制作 6
（三）爱宠商城网爱宠服饰页面设计制作 6
（四）爱宠商城网宠物百科页面设计制作 8
（五）爱宠商城网宠物论坛页面设计制作 9
（六）爱宠商城网联系我们页面设计制作 12
（七）爱宠商城三级页面设计制作 12
五、总结 15
致谢 16
参考文献 17
引言
随着宠物行业的日益兴旺，从刚刚开始宠物网站仅有的的宠物交易，交易猫跟狗这两项已经不能满足人们的需求了，人们对宠物的呵护也越来
*好棒文|www.hbsrm.com +Q: ^351916072*
越细致化，爱宠人士开始给宠物买衣服，给宠物护理跟爱宠人士一起交流怎么更好的照顾宠物，爱宠商城就是基于人们的需求开发的一项集宠物交易，宠物服饰，宠物百科，宠物护理，宠物论坛的大型宠物商城，爱宠人士可以在爱宠商城里享受他们所需要的任何服务，可以给自己的小宠物购买衣服，在宠物护理里学到呵护宠物的知识，在论坛里发表宠物趣事一起交流怎么更好的饲养宠物，让宠物更加健康快乐的成长。
本文运用HTML超文本标记语言来开发爱宠商城网，首先是素材的收集和风格设计的确定，参考其他宠物网站设计结合自己的企业特色，确定整个网站的色调和设计风格，然后在PHOSHOP中进行网页的设计工作，在网站的设计工作完成之后开始在DREAMWEAVER中开始网站的制作，整个网站将要采用DIV+CSS技术进行布局，最后使用JAVASCRIPT脚本语言实现网页中的互动方式。
二、开发工具与开发技术
（一） Photoshop网站设计工具介绍
在爱宠商城网中第一步要做的就是对网页的整体效果进行设计，界面设计的效果是在Photoshop中完成的，其中包括网站的整体色调设计，相关素材的搭配，以及网站的整体栏目布局。爱宠导航上面的脚印在界面设计好之后还需要在PS中进行切图，使用切图工具，把爱宠商城的图片素材命名相关的名字，保存为网页所用格式，最后保存在图片文件夹中。
（二） Dreamwear网页制作工具介绍
爱宠商城网的制作是在Dreamwear中进行，首页的导航代码都是在dreamwear里进行编写，页面的布局以及js特效都是用dreamwear里编写。
（三）DIV+CSS布局技术
爱宠商城网所使用的布局技术是DIV+CSS。DIV就是Dreamwear中的层区块，而CSS通过控制DIV的位置和样式来使网页和爱宠商城网设计效果一致，制作过程主要是在Dreamwear中进行。
三、 爱宠商城网站设计
（一） 网站的设计理念与风格
爱宠商城的网的设计要以人为本，把用户对宠物的喜爱之情在设计上表现出来。网站的设计主要以蓝色和绿色调为主，充分体现出宠物的可爱，和对人类的忠诚，让网站的访问者在打开网页的时候能够喜欢上网上的色调风格。
在爱宠商城的头部是白色和浅绿色的圆点交错排列横向平铺，主要是起到吸引客户视觉焦点的作用，让用户第一眼就看到网站头部，在网站的顶部是网站的logo信息，在logo的旁边是一只宠物狗，旁边写着“有你的生活更精彩”，用来宣誓网站的主题，在头部的右侧是搜索框，用户可以搜索出喜欢的宠物信息。
在头部的下方使用的是深青色的导航背景图片，在导航背景上隐者宠物狗的脚印，起到渲染主题的作用，爱宠商城的主体部分左侧上部是一个用小黑板素材来做网站的公告信息，把站内消息第一时间通知给网站的访客，右侧是网站的焦点图板块，里面是三张宠物广告图轮播的形式展示给用户，爱宠商城的主体栏目条使用的是深红色，既可以更好的衬托栏目板块信息，有可以对整体色调起到点缀作用，让整个网站色彩更加丰富起来。配色见图31
图31 宠物商城配色表
（二）网站的栏目结构
在爱宠商城网中主要的栏目结构有，网站的首页，店面展示，爱宠展示，爱宠百科，宠物论坛，和联系我们页面。店面展示里面有宠物猫，宠物狗这两个二级子页面，爱宠服饰里面有各种各样服饰的图片，每张图片都能点进去进行购买，爱宠百科里包括护理百科，疾病百科，饲养百科
（三）页面布局设计
3.1爱宠商城首页的布局结构
爱宠商城的首页布局使用的是上中下“巨型”布局结构，在网站的最上面是网站的头部信息吗，头部的左侧部分是网站的Logo信息，头部的右侧部分是搜索框，在头部的下方是网站的导航信息，通过导航可以进入其他栏目页面，导航下方是网站的主体部分，主体部分的头部是网站的公告栏目，公告的右侧是网站的焦点图，里面放着宠物的广告图片，在主体的中间部分左侧是宠物的今日特价商品部分，和爱宠商城知识栏目，右侧是宠物的商品中心部分。在主体的最下面是爱宠服饰栏目和版权信息栏目。
网站头部
网站导航
网站公告
网站焦点图广告
今日特价
宠物展示中心
宠物百科
爱宠宣传图
爱宠服饰展示
版权信息
图32爱宠商城网首页结构布局图
3.2爱宠商城店面展示页面布局
爱宠商城店面展示页面布局在头部沿用了首页的布局结构，主要是在主体部分做出了变化，左侧是网站公告和爱宠商城两个主要栏目，下面放一张宠物图片，右侧是店面展示的具体内容主要包含了宠物猫宠物狗两个板块。
3.3爱宠商城爱宠服饰页面布局
爱宠商城网爱宠服饰页面布局结构，头部沿用了首页的头部布局，在页面的左侧头部是商品的分类信息，左侧下部分是今日特价信息和爱宠商城信息，在爱宠服饰的右侧头部是flash图片切换，右侧下部分是宠物模特的商品信息内容，在网站的最底部是版权信息内容，具体的布局结构如下：
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/657.html
