爱尚丽丝甜品网站的设计与实现(附件)
本文是以介绍爱尚丽丝甜品制作“网站”为主，主要介绍爱尚丽丝甜品制作网站的设计规划，网站的结构，网站中的内容设计及编辑。喜欢制作甜品的人可以通过本网站浏览和学习制作甜品，网站中还有教学视频供人学习。本网站是以静态网站的方式进行表现的，使用了html与DIV+CSS布局方式，动画以及特效是使用JavaScript软件进行设计的。
目录
一、引言 5
二、开发工具介绍 5
三、网站模块设计 5
（一）网站功能模块 5
（二）网页框架结构 6
1.首页框架结构 6
2.子页框架结构 6
四、网站设计 7
（一）页面色调设计 7
（二）LOGO的设计 7
（三）布局的设计 7
五、网站的实现 8
（一） 网站首页的设计 8
（二）网站内页的设计 9
1.品牌故事 9
2. 产品推荐 10
3. 中式甜点 12
4. 西式甜点 14
5. 冷饮系列 14
6. 视频教学 15
7. 关于我们 16
（三） 网站的搭配方式 17
1. 网站色彩的和谐搭配及统一 17
2. 注重网站内容的建设 17
（四） 网页配色中存在的问题分析及解决方案 17
1. 网页配色问题分析 17
2.解决方案 18
（五）网站的样式和特效代码 18
总结 20
致谢 20
参考文献 21
附录1（banner轮播图实现效果CSS代码）： 22
一、引言
喜爱制作甜品的人到店学习制作甜品的人群越来越少，因为现在网络的发展，让这部分人群在网站上就能观看学习制作自己喜欢的而甜品，大大省去了这类人群的时间，为他们带来了极大的方便，并且能更好的规划时间。并且，在网上观看视频，可以自由的选择停止时间，能跟得上步骤，也能做的和教学一样，跟教学视频同步，这样可以做出更满意的甜品。不但自己可以观看，也可以转发或者推荐网站给他人进行学习， *好棒文|www.hbsrm.com +Q: ￥351916072$
把甜品制作分享给更多的人。
二、开发工具介绍
（一）Dreamweaver
网站主要采用了Dreamweaver网页编辑工具，使用Dreamweaver网页编辑工具的原因是其主要有效率高，制作的网站易管理，调试方便等诸多优点。本网站采用了Dreamweaver工具对html, div, css等进行编写，同时也通过本软件工具实现了网页的JS特效。
（二）Photoshop
Photoshop是一款图片处理软件工具，可以对图片进行修改以及再加工，不仅可以处理图片，还可以绘制图片。本网站LOGO就是通过Photoshop软件绘制并且处理的，还有一些甜品的图片，也是通过此软件进行处理美化的。
三、网站模块设计
（一）网站功能模块
爱尚丽丝甜品制作网站功能模块，包括首页惊喜，品牌故事，产品推荐，中式甜点，西式甜点，冷饮系列，视频教学，关于我们这几大功能，其中首页惊喜是将网站的品牌故事，推荐产品，视频教学，关于我们进行了一个小小的展示。
品牌故事分为四大块：一是爱尚丽丝“文化篇”，二是爱尚丽丝“历程篇”，三是爱尚丽丝“故事篇”，四是爱尚丽丝“文化篇”，通过四大块内容进行介绍品牌；分别点击文化篇、历程篇、故事篇、文化篇会进入详细的页面介绍。
产品推荐对产品进行分类，其中分为中式甜点，西式甜点，冷饮系列；分别将其中的热销进行推荐展示；分别点击中式甜点，西式甜点，冷饮系列，会进入中式甜点的、西式甜点的、冷饮系列，会进入相对应的产品介绍。
中式甜点详细介绍了中式甜点包括哪些，有烤制品，炸制品，蒸制品。熟粉制品，其他制品；分别点击烤制品，炸制品，蒸制品。熟粉制品，其他制品，会进入相对应的产品信息。
西式甜点也是详细介绍其中包括什么，有曲奇，布丁，蛋糕，提拉米苏，其他种类；分别点击曲奇，布丁，蛋糕，提拉米苏，其他种类，也会进入相对应的产品介绍。
冷饮系列介绍了它的分类，包括冰淇淋，雪糕，奶茶，果汁，其他种类；一次点击冰淇淋，雪糕，奶茶，果汁，其他种类，会依次显示其相对应的产品信息页面。
视频教学介绍其中有哪些制作教学视频，其中有冰沙的制作过程，有水果鸡蛋布丁的制作过程，有奶茶的制作过程，蛋糕的制作过程，冰淇淋的制作过程，还有蛋挞的制作过程。分别点击冰沙的制作过程，水果鸡蛋布丁的制作过程，奶茶的制作过程，蛋糕的制作过程，冰淇淋的制作过程，蛋挞的制作过程，会进入对应的视频界面，播放相对应的视频教学。
（二）网页框架结构
1.首页框架结构
首页布局分为上中下三部分，上部分左面是LOGO右边是导航条和登录注册，紧接着是banner轮播图，中部是概括的内容，分别为品牌故事，推荐产品，视频教学，关于我们，底部为底下导航条加上LOGO以及版权。如图32示首页布局框架：
LOGO 导航条 登录注册
Banner轮播图
品牌故事
推荐产品
关于我们
视频教学
导航条
LOGO
版权
图32首页布局框架
2.子页框架结构
目录
一、引言 5
二、开发工具介绍 5
三、网站模块设计 5
（一）网站功能模块 5
（二）网页框架结构 6
1.首页框架结构 6
2.子页框架结构 6
四、网站设计 7
（一）页面色调设计 7
（二）LOGO的设计 7
（三）布局的设计 7
五、网站的实现 8
（一） 网站首页的设计 8
（二）网站内页的设计 9
1.品牌故事 9
2. 产品推荐 10
3. 中式甜点 12
4. 西式甜点 14
5. 冷饮系列 14
6. 视频教学 15
7. 关于我们 16
（三） 网站的搭配方式 17
1. 网站色彩的和谐搭配及统一 17
2. 注重网站内容的建设 17
（四） 网页配色中存在的问题分析及解决方案 17
1. 网页配色问题分析 17
2.解决方案 18
（五）网站的样式和特效代码 18
总结 20
致谢 20
参考文献 21
附录1（banner轮播图实现效果CSS代码）： 22
一、引言
喜爱制作甜品的人到店学习制作甜品的人群越来越少，因为现在网络的发展，让这部分人群在网站上就能观看学习制作自己喜欢的而甜品，大大省去了这类人群的时间，为他们带来了极大的方便，并且能更好的规划时间。并且，在网上观看视频，可以自由的选择停止时间，能跟得上步骤，也能做的和教学一样，跟教学视频同步，这样可以做出更满意的甜品。不但自己可以观看，也可以转发或者推荐网站给他人进行学习， *好棒文|www.hbsrm.com +Q: ￥351916072$
把甜品制作分享给更多的人。
二、开发工具介绍
（一）Dreamweaver
网站主要采用了Dreamweaver网页编辑工具，使用Dreamweaver网页编辑工具的原因是其主要有效率高，制作的网站易管理，调试方便等诸多优点。本网站采用了Dreamweaver工具对html, div, css等进行编写，同时也通过本软件工具实现了网页的JS特效。
（二）Photoshop
Photoshop是一款图片处理软件工具，可以对图片进行修改以及再加工，不仅可以处理图片，还可以绘制图片。本网站LOGO就是通过Photoshop软件绘制并且处理的，还有一些甜品的图片，也是通过此软件进行处理美化的。
三、网站模块设计
（一）网站功能模块
爱尚丽丝甜品制作网站功能模块，包括首页惊喜，品牌故事，产品推荐，中式甜点，西式甜点，冷饮系列，视频教学，关于我们这几大功能，其中首页惊喜是将网站的品牌故事，推荐产品，视频教学，关于我们进行了一个小小的展示。
品牌故事分为四大块：一是爱尚丽丝“文化篇”，二是爱尚丽丝“历程篇”，三是爱尚丽丝“故事篇”，四是爱尚丽丝“文化篇”，通过四大块内容进行介绍品牌；分别点击文化篇、历程篇、故事篇、文化篇会进入详细的页面介绍。
产品推荐对产品进行分类，其中分为中式甜点，西式甜点，冷饮系列；分别将其中的热销进行推荐展示；分别点击中式甜点，西式甜点，冷饮系列，会进入中式甜点的、西式甜点的、冷饮系列，会进入相对应的产品介绍。
中式甜点详细介绍了中式甜点包括哪些，有烤制品，炸制品，蒸制品。熟粉制品，其他制品；分别点击烤制品，炸制品，蒸制品。熟粉制品，其他制品，会进入相对应的产品信息。
西式甜点也是详细介绍其中包括什么，有曲奇，布丁，蛋糕，提拉米苏，其他种类；分别点击曲奇，布丁，蛋糕，提拉米苏，其他种类，也会进入相对应的产品介绍。
冷饮系列介绍了它的分类，包括冰淇淋，雪糕，奶茶，果汁，其他种类；一次点击冰淇淋，雪糕，奶茶，果汁，其他种类，会依次显示其相对应的产品信息页面。
视频教学介绍其中有哪些制作教学视频，其中有冰沙的制作过程，有水果鸡蛋布丁的制作过程，有奶茶的制作过程，蛋糕的制作过程，冰淇淋的制作过程，还有蛋挞的制作过程。分别点击冰沙的制作过程，水果鸡蛋布丁的制作过程，奶茶的制作过程，蛋糕的制作过程，冰淇淋的制作过程，蛋挞的制作过程，会进入对应的视频界面，播放相对应的视频教学。
（二）网页框架结构
1.首页框架结构
首页布局分为上中下三部分，上部分左面是LOGO右边是导航条和登录注册，紧接着是banner轮播图，中部是概括的内容，分别为品牌故事，推荐产品，视频教学，关于我们，底部为底下导航条加上LOGO以及版权。如图32示首页布局框架：
LOGO 导航条 登录注册
Banner轮播图
品牌故事
推荐产品
关于我们
视频教学
导航条
LOGO
版权
图32首页布局框架
2.子页框架结构
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/xxaq/413.html
