原创力文档马鞍山师范高等专科学校毕业设计(论文)
PAGE
PAGE 2
马鞍山师专软件与食品工程系
计算机多媒体技术专业
毕业论文设计说明书
全套设计加扣?3012250582
题 目： 蛋糕之家LAZY主题站
专业方向：12计算机多媒体技术（影视后期）
姓 名：
学 号：
指导教师：
目录
22768 一、作品主题 1
25629 二、基本构思 1
10525 三、素材收集整理 1
17395 四、制作流程及应用的技术 4
12219 五、使用软件 12
12219 六、自己操作中所遇到的问题，最后是否解决…………13
一、作品主题：
蛋糕之家LAZY主题站
二、基本构思：
首先有个大概的构思，以蛋糕为主题，通过简洁、大方的页面，向浏览者提供图文、视频等关于蛋糕的内容，让浏览者在了解所需内容的同时，也有良好的体验感。其次通过浏览其他网站，学习模仿，取其精华去其糟粕。
三、素材收集整理：
1.图片（百度图片下载）:
动画（下载+PS制作）：
四、制作流程及应用的技术：
1.首页的制作：
（1）导航的制作，如图1所示：
图1
此部分应用的技术：
①鼠标移到导航上，字体会变小，主要运用的代码如下：
ul#nav li a:hover{font-size:18px;}
②二级导航的制作。二级导航的制作主要运用了display的none（此元素不会被显示）属性，当鼠标移动到此链接上才会被显示。
（2）轮播、设为首页、收藏本站、显示系统时间的制作。由于知识有限，而且制作轮播等要自己写JS代码固从网上下载。为了丰富页面内容，下面还有一些网上下载的效果。如图2、图3所示：
图2
图3
（3）首页主要内容的制作。如图4所示：
图4
此部分应用的技术：
①首先从网上下载如上的图片，然后写上“欢迎来到LAZY蛋糕房”的字样，对这些字加上斜面浮雕和投影效果。至于底下的波浪是用圆形工具绘制而成。
②对于最右边的div里面包含的字用了类you1 对部分字样加了链接 代码如下：
.you1{ width:250px;
float:right;
margin-right:20px;
font-size:18px;
line-height:35px;
color:#FFF;}
（3）首页主要内容的制作。如图5所示：
图5
此部分应用的技术：
最上角的花样用的是ps抠图，然后保存为png格式。
图片中的10个蛋糕按照顺序排开，做好一个div作为模板，其余的进行复制。所用到的代码如下：
.div1 {
width:160px;
float:left;
color:#F60;
font-size:16px;
border:1px #FFF solid;
margin-right:5px;
background-color: #FCC;
}
对于每张图片的下方都有不同颜色的字样，是事先设置了不同颜色模式的类，然后加以运用。
（4）首页主要内容的制作。如图6所示：
图6
此部分应用的技术：
用ps里的“窗口—时间轴”制作，用的是隐藏图层并且设置成永远播放模式，背景使用牛奶和草莓合成。最后保存成gif格式。
在图6之上还运用了AP div加入了一些事先下载好的透明动画。
（5）首页主要内容的制作。如图7所示：
图7
此部分应用的技术：
最左边用到的效果是鼠标移动有下滑线 代买如下：
a {color:#000; text-decoration:none;}
a:hover{color:#933;text-decoration:underline;}
图7右边的图片用到了“行为”里面的“晃动”，增加了浏览的趣味性。
（6）首页主要内容的制作。如图8所示：
图8
此部分应用的技术：
这部分主要给红色模拟按钮做了个链接 代码如下：
.btn {color:#fff;
padding:8px 16px;
background:#db3222;}
.btn:hover {background:#2e2e2e；}
图8底部主要是版权信息，其版权符号是在“插入—HTML—特殊字符”。
2.子页面1的制作：
（1）蛋糕教学的制作。 如图9所示：
图9
此部分应用的技术：
此部分主要是文字信息的展示，主要介绍的是蛋糕的做法步骤等。右边是老师的教学视频，左边主要运用的是类zuo4使其向左浮动 代码如下：
.zuo4{width:280px;
float:left;
margin:5px 5px 0 0px;
文档评论（0）