毕业设计（论文）-蛋糕之家LAZY主题站.doc

马鞍山师范高等专科学校毕业设计(论文)马鞍山师专软件与食品工程系计算机多媒体技术专业 毕业论文设计说明书全套设计加扣3012250582 题 目： 蛋糕之家LAZY主题站 专业方向：12计算机多媒体技术（影视后期） 姓 名： 学 号： 指导教师： 目录一、作品主题1二、基本构思1三、素材收集整理1四、制作流程及应用的技术4五、使用软件12六、自己操作中所遇到的问题，最后是否解决13一、作品主题：蛋糕之家LAZY主题站二、基本构思：首先有个大概的构思，以蛋糕为主题，通过简洁、大方的页面，向浏览者提供图文、视频等关于蛋糕的内容，让浏览者在了解所需内容的同时，也有良好的体验感。其次通过浏览其他网站，学习模仿，取其精华去其糟粕。三、素材收集整理：1.图片（百度图片下载）:2. 动画（下载+PS制作）：四、制作流程及应用的技术：1.首页的制作：（1）导航的制作，如图1所示：图1此部分应用的技术：鼠标移到导航上，字体会变小，主要运用的代码如下：ul#nav li a:hoverfont-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:hovercolor:#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使其向左浮动 代码如下：.zuo4width:280px;float:left;margin:5px 5px 0 0px;padding:0 10px 7px 40px;background:#fff;border-radius:18px;图9的整体框架运用类content 对其框架进行了圆角处理，这样看起来不至于太呆板。用了border-radius这一属性。3. 子页面2的制作：（1）知识技巧的制作。 如图10所示：图10此部分应用的技术： 图10与图9相比起来区别可能是在图10分成了2个板块。图10最主要的是介绍一些蛋糕制作的必要技巧以及注意事项。其中分成2个板块是改动了一下content里面的内容。 用到的代码如下：#content1 background:url(./images/bg.gif);width:960px;margin:0 auto;padding:0; 最左边的圆圈1用到的代码如下：.zuo2float:left;width:54px;background:#000;border-radius:26px;font-size:45px;line-height:48px;color:#fff;text-align:center;padding:1px 0 5px;margin:0 12px 18px 0；4. 子页面3的制作：（1）精品展示的制作。 如图11所示：图11此部分应用的技术： 这一部分加入本网站的宣传标语“健康源自天然”融于背景。 右边的文字主要是运用了向右浮动 代码如下：.main2height:157px;width:480px;float:right;background-color:#fdfcfb; border-radius:18px;（2）精品展示的制作。 如图12所示：图12此部分应用的技术： 图12上半部分主要运用了图片滚动的效果 代码如下： 底部的动态效果是源于网上下载，为了增加页面的生动性。5、子页面4的制作：（1）关于我们的制作。 如图13所示：图13此部分应用的技术：这主要介绍LAZY完善的体制，免费实习，迅速开点、就业。上一图片顶部主要运用到border-radius这一属性，然后加入水平分割线。5、子页面5的制作：（1）联系我们的制作。 如图14所示：图14此部分应用的技术： 这一部分主要是表单的运用，都是运用了DW软件里的表单直接插入的。主要用到表单里的“文本字段”和“文本区域”，然后对其设置。 代码如下：#textfield background: #e8e7de; border: 1px solid #d1cfbd; width: 84%; height:30px;#textareabackground: #e8e7de; border: 1px solid #d1cfbd; width: 84%; height:190px;五、使用软件：（1） Dreamweaver： 用于添加整个网页的代码；（2） Adobe Photoshop CS6： 用于处理整个网页所用到的图片；六、自己操作中所遇到的问题，最后是否解决1.由于不怎么制作网站所以在很多方面都很欠缺，所以在实际操作的过程中会遇到很多困难。大多数上网百度搜索都得到了解决方法，比如：（1）首先就是寻找素材，由于欠缺设计水平所以在总体的把握上有待提升。怎么把搜集来的素材融合为一体比较困难。（2）好多效果都是要会写JS语言才能实现，所以从网上下载了不少效果。但同时修改也是比较困难的，要不断地修改参数，看是否是你想要的效果，直到最后达到效果才能停止修改。（3）设置DIV框架到底有多大的时候，你估计框架的大小与你实际需要的不符合，需要不断修改。（4）基本代码不熟练，在制作的时候需要