提拉米苏蛋糕店网站的设计与实现
目 录
一、引言 1
（一）选题的背景与意义 1
（二）开发工具介绍 1
1.Dreamweaver 1
2. Photoshop 1
二、网站内容结构 1
三、网站总体设计 1
（一）LOGO设计 2
（二）首页设计 2
（三）子页设计 4
（四）提拉米苏介绍 5
（五）关于我们页面 6
（六）联系我们页面 7
四、页面的具体实现 8
（一）DIV+CSS布局 8
（二）首页的实现 8
（三）子页的实现 11
五、页面特效的实现 12
（一）图片切换效果 12
（二）网页背景切换效果 13
六、网页测试 13
七、总结 13
致谢 15
参考文献 16
附录 17
一、引言
本网站是通过收集多种类型的蛋糕和口味而完成的，而其主要的目的也是为了让更多的网络用户能够更好的了解蛋糕，更方便的购买到心仪的蛋糕，本网站使用HTML+CSS设计页面，使用JavaScript制作了特效，实现了网站的制作。
二、开发工具介绍
（一）Dreamweaver
Dreamweaver是所见即所得网页编辑器，该软件集管理网站和网页制作于一身，是针对于网页设计师而专门发展研究的视觉化网页开发工具，使用它可以简单的做出充满动感的网页画面。
（二）Photoshop
Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
三、网站内容结构
在首页中主要是使用了一个图片自动切换的效果，美味蛋糕的大图自动切换会让浏览者眼前一亮，并且有兴趣进行更多一步的浏览。在自动切换的美食图片上方的导航条可以链接到提拉米苏蛋糕子页，巧克力蛋糕子页，慕斯蛋糕子页，联系我们等子页，提拉米苏蛋糕子
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
三、网站内容结构
在首页中主要是使用了一个图片自动切换的效果，美味蛋糕的大图自动切换会让浏览者眼前一亮，并且有兴趣进行更多一步的浏览。在自动切换的美食图片上方的导航条可以链接到提拉米苏蛋糕子页，巧克力蛋糕子页，慕斯蛋糕子页，联系我们等子页，提拉米苏蛋糕子页主要是挑选介绍了提拉米苏的一些代表性的蛋糕，如若想更进一步了解，可点击进入第三级页面，里面介绍了提拉米苏的历史起源，食物特色等内容。婚礼蛋糕页面介绍了该如何挑选婚礼蛋糕等功能。关于我们页面主要是介绍了我们店的理念，品牌定位等方面。联系我们页面则主要写了一些联络方式，也是一种对网站做得更好的一种期待。网站内容结构图如图3-1所示。
图3-1 效果图
四、网站总体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，目的就是为了能够给客户第一眼就喜欢的感觉，LOGO主要是使用粉色做衬色，然后再在中间镶插入了咖啡色 “Tiramisu 提拉米苏蛋糕店”的艺术字，这样会给客户带来一种舒服的感觉。LOGO效果图如图4-1所示。
图4-1 LOGO效果图
（二）首页设计
首先，本网站的LOGO放于网站的左上方，“提拉米苏蛋糕店”，选用了粉色做衬色，然后再在上面镶嵌了几个艺术字，为了符合蛋糕主题，提拉米苏蛋糕店几个艺术字的采用了咖啡色，这一切都是利用的Photoshop软件完成的。首页布局图如图4-2所示。
颜色主题选择按钮
LOGO 标语 蛋糕图片
导航条
图片
蛋糕主题
版权信息
图4-2 首页布局图
为了能够营造出一种不一样的视觉氛围，可以让客户感觉到不同的感觉，所以在首页的左上端设计了四表按钮，而且每个按钮代表的颜色主题也不同，按钮主题分为：粉色信笺，绿色怡人，淡黄如菊，水蓝冰清。如图4-3，4-4，4-5，4-6所示，具体代码请见附录3。
图4-3 粉色背景首页
图4-4 绿色背景首页
图4-5 黄色背景首页
图4-6 蓝色背景首页
为了能够一眼看出该网站的主题，所以把导航条置于LOGO下面，这个网站主要介绍的是口味蛋糕，当然最后也还有一个联系我们的平台。此处使用的无序列表，无序列表使用
一、引言 1
（一）选题的背景与意义 1
（二）开发工具介绍 1
1.Dreamweaver 1
2. Photoshop 1
二、网站内容结构 1
三、网站总体设计 1
（一）LOGO设计 2
（二）首页设计 2
（三）子页设计 4
（四）提拉米苏介绍 5
（五）关于我们页面 6
（六）联系我们页面 7
四、页面的具体实现 8
（一）DIV+CSS布局 8
（二）首页的实现 8
（三）子页的实现 11
五、页面特效的实现 12
（一）图片切换效果 12
（二）网页背景切换效果 13
六、网页测试 13
七、总结 13
致谢 15
参考文献 16
附录 17
一、引言
本网站是通过收集多种类型的蛋糕和口味而完成的，而其主要的目的也是为了让更多的网络用户能够更好的了解蛋糕，更方便的购买到心仪的蛋糕，本网站使用HTML+CSS设计页面，使用JavaScript制作了特效，实现了网站的制作。
二、开发工具介绍
（一）Dreamweaver
Dreamweaver是所见即所得网页编辑器，该软件集管理网站和网页制作于一身，是针对于网页设计师而专门发展研究的视觉化网页开发工具，使用它可以简单的做出充满动感的网页画面。
（二）Photoshop
Adobe Photoshop，Adobe公司开发和发行的图像处理软件，简称“PS”。处理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
三、网站内容结构
在首页中主要是使用了一个图片自动切换的效果，美味蛋糕的大图自动切换会让浏览者眼前一亮，并且有兴趣进行更多一步的浏览。在自动切换的美食图片上方的导航条可以链接到提拉米苏蛋糕子页，巧克力蛋糕子页，慕斯蛋糕子页，联系我们等子页，提拉米苏蛋糕子
*好棒文|www.hbsrm.com +Q: ￥3^5`1^9`1^6^0`7^2$
理以像素所构成的数字图像是它的作用。使用Photoshop软件中的绘图，编辑工具，可以高效的处理图片，或者批量处理。
三、网站内容结构
在首页中主要是使用了一个图片自动切换的效果，美味蛋糕的大图自动切换会让浏览者眼前一亮，并且有兴趣进行更多一步的浏览。在自动切换的美食图片上方的导航条可以链接到提拉米苏蛋糕子页，巧克力蛋糕子页，慕斯蛋糕子页，联系我们等子页，提拉米苏蛋糕子页主要是挑选介绍了提拉米苏的一些代表性的蛋糕，如若想更进一步了解，可点击进入第三级页面，里面介绍了提拉米苏的历史起源，食物特色等内容。婚礼蛋糕页面介绍了该如何挑选婚礼蛋糕等功能。关于我们页面主要是介绍了我们店的理念，品牌定位等方面。联系我们页面则主要写了一些联络方式，也是一种对网站做得更好的一种期待。网站内容结构图如图3-1所示。
图3-1 效果图
四、网站总体设计
（一）LOGO设计
网站的LOGO设计使用了Photoshop软件，目的就是为了能够给客户第一眼就喜欢的感觉，LOGO主要是使用粉色做衬色，然后再在中间镶插入了咖啡色 “Tiramisu 提拉米苏蛋糕店”的艺术字，这样会给客户带来一种舒服的感觉。LOGO效果图如图4-1所示。
图4-1 LOGO效果图
（二）首页设计
首先，本网站的LOGO放于网站的左上方，“提拉米苏蛋糕店”，选用了粉色做衬色，然后再在上面镶嵌了几个艺术字，为了符合蛋糕主题，提拉米苏蛋糕店几个艺术字的采用了咖啡色，这一切都是利用的Photoshop软件完成的。首页布局图如图4-2所示。
颜色主题选择按钮
LOGO 标语 蛋糕图片
导航条
图片
蛋糕主题
版权信息
图4-2 首页布局图
为了能够营造出一种不一样的视觉氛围，可以让客户感觉到不同的感觉，所以在首页的左上端设计了四表按钮，而且每个按钮代表的颜色主题也不同，按钮主题分为：粉色信笺，绿色怡人，淡黄如菊，水蓝冰清。如图4-3，4-4，4-5，4-6所示，具体代码请见附录3。
图4-3 粉色背景首页
图4-4 绿色背景首页
图4-5 黄色背景首页
图4-6 蓝色背景首页
为了能够一眼看出该网站的主题，所以把导航条置于LOGO下面，这个网站主要介绍的是口味蛋糕，当然最后也还有一个联系我们的平台。此处使用的无序列表，无序列表使用
- 标签，每个列表项使用
- 。
导航条下方是一个使用JavaScript制作的一个图片切换效果。如图4-7所示。
图4-7 图片切换效果
滚动图片下面放置了蛋糕主题分类板块，包括合家欢聚，浪漫情侣，生日臻献和休闲时刻。主体使用了二级标题h2，在more上会有鼠标悬停文字变色的效果，这个效果使用了CSS的伪样式hover达到的。如图4-8所示。
图4-8 蛋糕主题合家欢聚
（三）子页设计
在主页上点击链接进入子页后会看到该链接的一些介绍，导航下面会有一张提拉米苏图片，图片下的主体部分分为两个左右板块，左边是店铺导航和联系我们，右边则是放置具体图片以及一些介绍，图片都是按照同一个规格制定的图片大小，图片与图片之间距离也都是自动调整的。如若想更进一步了解，可点击查看详情。效果图如图4-9所示。
图4-9 提拉米苏子页
（四）提拉米苏介绍
提拉米苏是网站的名字，之所以选此是因为其寓意“带走的不只是美味，还有爱和幸福”。所以单独介绍这一板块也是为了更好的诠释蛋糕形象，还有更好的理解这一名字。在提拉米苏子页中点击查看详情后，会到第三级页面，里面具体绍了提拉米苏的历史起源，食物特色以及与其的经典搭配，为了方便客户阅读版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/jsjkxyjs/2501.html
