琉璃之释女装网站的设计与实现
Key words: DIV+CSS;Compatibility; JavaScript 目 录
一、序言 2
（一）课题开发意义 2
（二）课题开发目的 2
（三）项目实现技术 2
1.开发工具的概述 2
2.布局方式的概述 2
二、网站内容规划 3
（一）网站主题 3
（二）网站色彩搭配 3
三、网站开发步骤 3
（一）网站素材准备 3
（二）网站素材加工 4
1.logo设计 4
2.页面设计 4
3.程序设计 4
（三）层框架设计 5
1.head层 5
2.middle层 5
3.foot层 12
（四）JS特效 12
（五）网站测试 13
总结 14
致谢 15
参考文献 16
附录 17
一、序言
（一）课题开发意义
每一位女性都爱美丽，都会不断的追求自我的完美。因此，在大千发展的时代里，时尚成为一种潮流。在不断追求时尚的同此，我们也在不断的改造自己、完善自我。从外观开始体现自我的一种价值。比如说：在面试的场合，不论是男士还是女士，都需要从外观开始改造自己。首先，我们在面试时，会注重自己的穿着是不是得体，举止是不是文明等等。在服装搭配上，会选择比较正规、严谨的制服，给面试官一种大方得体的感觉。有时候还需要女性适当的画个淡妆等要求。再比如说，在舞会上，我们可以穿上自己最喜欢的礼服。可以有不同的装扮。因此，服装对于一个人整体的外在美，很重要！毕竟人靠衣装嘛。服饰总是因人而异， *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
不同的人有不同的风格。有的可以是欧美风、可以是可爱甜美的、清晰复古的、街头潮流的等。在穿着上可以展现出不同的自己，从而找到对美的诠释。都说人的长相三分靠天生，七分靠打扮。只有不断的修饰自己，才会发现自己内在的美。所以，要想美丽就从外观开始一点一点的改变，从服装上发现美。从而看到不一样的自己，不一样的美丽。
（二）课题开发目的
琉璃之释女装网站的设计与实现，可以使这家店面向大众化。不仅仅局限于学校附近，可以有更多的顾客前来选购自己所喜爱的服装。可以提高琉璃之释的名气以及它的口碑等。从而扩大该服装店的知名度。与此同时，随着在网上多元化、多方面时尚因素的影响。可以让本店的服饰更加的多元化，与时俱进，使本店更早的与时尚相接轨。在与诸多时尚元素、潮流搭配相结合的同时，加上自己的一些看法，多引进一些别具一格的服装。这样，不仅能让顾客满意，同时，也增加了自身的价值。
（三）项目实现技术
1.开发工具的概述
Dreamweaver是一款集成网页程序带自动补充功能的编辑软件，大学的网页美工课程有使用过它，此项目使用的是8这个版本。此软件不仅可以开发html，css等代码还可以开发JavaScript等，因此被很多程序员所使用，是一款不错的网页编辑软件。
Photoshop是Adobe公司的用于图片处理的程序，它功能比较强大，适用于网页设计阶段的处理，它对与图层的管理比较全面，矢量图像的编辑，抠图都有相应的方案，减少了大部分网页抠图花费的时间。是制作网页的得力助手。
2.布局方式的概述
DIV+CSS是现阶段网页最流行的布局方式之一，它通过float，position等方式去给框架定位浮动，使网页更具有色彩，它的布局实施比较简单相对与Table布局，有利于网站的优化。
二、网站内容规划
（一）网站主题
网页里面包含琉璃之释女装的图片。网站的设计内容比较完整，色彩搭配协调，页面比较美观，符合WEB标准的原创网站。这是专为女性设计的网站，网站有三部分组成，head层、middle层、foot层。琉璃之释女装网站设计的制作用到了Photoshop、Dreamweaver等软件。我通过实地走访、查阅资料等方式获取灵感，从而保证了网站的原创性。在网站制作过程中，我使用DIV+CSS完成网站、JS完成了2个网页的动态效果、网页的数量达到50页、网站的目录安排合理，内容比较完整。
（二）网站色彩搭配
对于一份好的网站，它的色彩搭配很重要。如果网站的色彩鲜明，会很容易吸引观众，给人一种耳目一新的感觉，这样才能给人留下深刻的印象。服装网站的颜色大多是色彩丰富的，好的衣服给人一种阳光明媚的感觉。顾客穿的舒心，我们看的也舒服。
整体网站的色彩基调大多采用暖色，低亮度紫色给人一种舒适、阳光的感觉。这是因为，本人很喜欢紫色，我把它同能量、阳光结合为一体。紫色，可以根据它的变换色，调制出不同的颜色效果，从而营造出不同的氛围。低亮度紫色显得很有分量，给人一种高雅的氛围。使心情浮躁的人冷静下来，这是一种非常具有女性化的代表颜色。对紫色的的透明度以及饱和度进行了改善，这样的页面看起来色彩统一，具有层次感。
紫色短款卫衣，服装设计简单、大方、图案可爱。风格偏向于可爱，适合现代大学生的选择。这款服装和网站的主体颜色一样，从视觉效果来看，让你醒目、清新。（见图2-1）。
图2-1 页面使用颜色
三、网站开发步骤
（一）网站素材准备
背景图片：因为网站的颜色搭配已经确认，所有对于网站的背景图片就好选择了。
专题栏：这里选择了四个卡通人物和比较好听的名字，这样可以吸引用户的眼球。
图片的准备：一部分图片是来自网络，一部分图片是来自琉璃之释店里销售的产品。
（二）网站素材加工
1.logo设计
Logo的设计比较简单，由于店铺没有使用标志只有简单的琉璃之释四个字，所有这里大胆的使用了文字式的logo。这样的logo不好制作，可能与网页的颜色不太搭配，在Photoshop里做了许多版本都不太适合，突然想到了艺术字这个概念，然后我就下载可牛影像。根据网站的颜色logo为白色比较显眼，就使用可牛影像做了一个白色的logo。（见图3-1）
图3-1 LOGO
2.页面设计
页面分为head，middle，foot三层，第三节具体讲解。网站背景图片是不规则的颜色，不能根据css去设置，所以只能定网页的高度了，在高度决定的情况下，只能对内容实施了控制，内容可以少，但是不可以多，对所有的产品列表的数据，至多只能有4个，超出部分可以会使背景会变成黑色。对每个产品的Div大小都设置了固定的高和宽。产品列表的分页是采用的超链接实现的。产品详细就包含了产品详细和简介。潮流搭配这个页面是单放了一个js特效，做的相对来说比较简单。
整个网站总体来说，head和foot是固定的，middle层的left也是固定的，每个页面的不同点也就是在right那一块，把right层的框架确定了，网站的整个框架就确定了。
#left
#right
产品详细页：此页面左边是放一张带有边框的图片样式左浮动，边框5像素的灰色实线，右边是用表格做的一个表单样式左浮动10像素，宽度是260像素，行距34像素，就拿2015年冬装新款韩版可爱甜美卫衣来说，左边调用了/images/nav_list1_detail1.jpg这张图片加上了border:5px solid gray;高和宽固定300和250这样即使图片大小有偏差也不影响整个网站。Table也固定的宽度，设置了行间距，并向左浮动了10px因为离图片太紧显得小气了。表格第一行产品名称：2015年冬装新款韩版可爱甜美卫衣。第二行：产品的简介。第三行：价格。第四行：配送范围。第五行：承诺。第六行：支付方式。第七行则是两个按钮。下面则是详细简介的背景，最后就是用p标签写的详细简介。样式：左浮动，宽度530像素，高度210像素，上浮动20像素。（见图3-11、图3-12）
一、序言 2
（一）课题开发意义 2
（二）课题开发目的 2
（三）项目实现技术 2
1.开发工具的概述 2
2.布局方式的概述 2
二、网站内容规划 3
（一）网站主题 3
（二）网站色彩搭配 3
三、网站开发步骤 3
（一）网站素材准备 3
（二）网站素材加工 4
1.logo设计 4
2.页面设计 4
3.程序设计 4
（三）层框架设计 5
1.head层 5
2.middle层 5
3.foot层 12
（四）JS特效 12
（五）网站测试 13
总结 14
致谢 15
参考文献 16
附录 17
一、序言
（一）课题开发意义
每一位女性都爱美丽，都会不断的追求自我的完美。因此，在大千发展的时代里，时尚成为一种潮流。在不断追求时尚的同此，我们也在不断的改造自己、完善自我。从外观开始体现自我的一种价值。比如说：在面试的场合，不论是男士还是女士，都需要从外观开始改造自己。首先，我们在面试时，会注重自己的穿着是不是得体，举止是不是文明等等。在服装搭配上，会选择比较正规、严谨的制服，给面试官一种大方得体的感觉。有时候还需要女性适当的画个淡妆等要求。再比如说，在舞会上，我们可以穿上自己最喜欢的礼服。可以有不同的装扮。因此，服装对于一个人整体的外在美，很重要！毕竟人靠衣装嘛。服饰总是因人而异， *好棒文|www.hbsrm.com +Q: 3 5 1 9 1 6 0 7 2
不同的人有不同的风格。有的可以是欧美风、可以是可爱甜美的、清晰复古的、街头潮流的等。在穿着上可以展现出不同的自己，从而找到对美的诠释。都说人的长相三分靠天生，七分靠打扮。只有不断的修饰自己，才会发现自己内在的美。所以，要想美丽就从外观开始一点一点的改变，从服装上发现美。从而看到不一样的自己，不一样的美丽。
（二）课题开发目的
琉璃之释女装网站的设计与实现，可以使这家店面向大众化。不仅仅局限于学校附近，可以有更多的顾客前来选购自己所喜爱的服装。可以提高琉璃之释的名气以及它的口碑等。从而扩大该服装店的知名度。与此同时，随着在网上多元化、多方面时尚因素的影响。可以让本店的服饰更加的多元化，与时俱进，使本店更早的与时尚相接轨。在与诸多时尚元素、潮流搭配相结合的同时，加上自己的一些看法，多引进一些别具一格的服装。这样，不仅能让顾客满意，同时，也增加了自身的价值。
（三）项目实现技术
1.开发工具的概述
Dreamweaver是一款集成网页程序带自动补充功能的编辑软件，大学的网页美工课程有使用过它，此项目使用的是8这个版本。此软件不仅可以开发html，css等代码还可以开发JavaScript等，因此被很多程序员所使用，是一款不错的网页编辑软件。
Photoshop是Adobe公司的用于图片处理的程序，它功能比较强大，适用于网页设计阶段的处理，它对与图层的管理比较全面，矢量图像的编辑，抠图都有相应的方案，减少了大部分网页抠图花费的时间。是制作网页的得力助手。
2.布局方式的概述
DIV+CSS是现阶段网页最流行的布局方式之一，它通过float，position等方式去给框架定位浮动，使网页更具有色彩，它的布局实施比较简单相对与Table布局，有利于网站的优化。
二、网站内容规划
（一）网站主题
网页里面包含琉璃之释女装的图片。网站的设计内容比较完整，色彩搭配协调，页面比较美观，符合WEB标准的原创网站。这是专为女性设计的网站，网站有三部分组成，head层、middle层、foot层。琉璃之释女装网站设计的制作用到了Photoshop、Dreamweaver等软件。我通过实地走访、查阅资料等方式获取灵感，从而保证了网站的原创性。在网站制作过程中，我使用DIV+CSS完成网站、JS完成了2个网页的动态效果、网页的数量达到50页、网站的目录安排合理，内容比较完整。
（二）网站色彩搭配
对于一份好的网站，它的色彩搭配很重要。如果网站的色彩鲜明，会很容易吸引观众，给人一种耳目一新的感觉，这样才能给人留下深刻的印象。服装网站的颜色大多是色彩丰富的，好的衣服给人一种阳光明媚的感觉。顾客穿的舒心，我们看的也舒服。
整体网站的色彩基调大多采用暖色，低亮度紫色给人一种舒适、阳光的感觉。这是因为，本人很喜欢紫色，我把它同能量、阳光结合为一体。紫色，可以根据它的变换色，调制出不同的颜色效果，从而营造出不同的氛围。低亮度紫色显得很有分量，给人一种高雅的氛围。使心情浮躁的人冷静下来，这是一种非常具有女性化的代表颜色。对紫色的的透明度以及饱和度进行了改善，这样的页面看起来色彩统一，具有层次感。
紫色短款卫衣，服装设计简单、大方、图案可爱。风格偏向于可爱，适合现代大学生的选择。这款服装和网站的主体颜色一样，从视觉效果来看，让你醒目、清新。（见图2-1）。
图2-1 页面使用颜色
三、网站开发步骤
（一）网站素材准备
背景图片：因为网站的颜色搭配已经确认，所有对于网站的背景图片就好选择了。
专题栏：这里选择了四个卡通人物和比较好听的名字，这样可以吸引用户的眼球。
图片的准备：一部分图片是来自网络，一部分图片是来自琉璃之释店里销售的产品。
（二）网站素材加工
1.logo设计
Logo的设计比较简单，由于店铺没有使用标志只有简单的琉璃之释四个字，所有这里大胆的使用了文字式的logo。这样的logo不好制作，可能与网页的颜色不太搭配，在Photoshop里做了许多版本都不太适合，突然想到了艺术字这个概念，然后我就下载可牛影像。根据网站的颜色logo为白色比较显眼，就使用可牛影像做了一个白色的logo。（见图3-1）
图3-1 LOGO
2.页面设计
页面分为head，middle，foot三层，第三节具体讲解。网站背景图片是不规则的颜色，不能根据css去设置，所以只能定网页的高度了，在高度决定的情况下，只能对内容实施了控制，内容可以少，但是不可以多，对所有的产品列表的数据，至多只能有4个，超出部分可以会使背景会变成黑色。对每个产品的Div大小都设置了固定的高和宽。产品列表的分页是采用的超链接实现的。产品详细就包含了产品详细和简介。潮流搭配这个页面是单放了一个js特效，做的相对来说比较简单。
整个网站总体来说，head和foot是固定的，middle层的left也是固定的，每个页面的不同点也就是在right那一块，把right层的框架确定了，网站的整个框架就确定了。
#left
#right
产品详细页：此页面左边是放一张带有边框的图片样式左浮动，边框5像素的灰色实线，右边是用表格做的一个表单样式左浮动10像素，宽度是260像素，行距34像素，就拿2015年冬装新款韩版可爱甜美卫衣来说，左边调用了/images/nav_list1_detail1.jpg这张图片加上了border:5px solid gray;高和宽固定300和250这样即使图片大小有偏差也不影响整个网站。Table也固定的宽度，设置了行间距，并向左浮动了10px因为离图片太紧显得小气了。表格第一行产品名称：2015年冬装新款韩版可爱甜美卫衣。第二行：产品的简介。第三行：价格。第四行：配送范围。第五行：承诺。第六行：支付方式。第七行则是两个按钮。下面则是详细简介的背景，最后就是用p标签写的详细简介。样式：左浮动，宽度530像素，高度210像素，上浮动20像素。（见图3-11、图3-12）
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/1750.html
