网页设计课设作业

1、辽宁工业大学网页设计 课程方案讲析作品题目：中国蛋糕企业网站设计与制作院 （系）： 专业班级： 学 号： 学生姓名： 指导教师：目录第 1 章 作品的设计构思 1.第 2 章 设计内容与制作步骤 1.第 3 章 作品设计总结 4. .第 1 章 作品的设计构思（一）设计主题中国蛋糕这个企业以其丰富的口感， 多重的样式以及甜而不腻的口感在众多 蛋糕企业中脱颖而出。 它的设计理念是服务顾客， 而我为它设计的网址主要展现 它的简约精致的理念。网址所用图片画面简洁美观，素雅淡静，给人享受。并且蛋糕是一种古老的西点， 烘烤后制成一种像海绵的点心。 加入中国元素， 更给它丰富的内涵。（二）配色在设计网页这

2、一方面， 我主要运用各种渐变的绿色， 白色，以及一点黄色这 三个色系。绿色给人感觉健康清新，而黄色给人感觉温暖安全有生活感有活力， 二者结合相得益彰， 辅之以白色更显高端简约与大气。 将这三个颜色作为我中国 蛋糕网页设计的配色是如此合适，以至于我想不到其他的颜色可以代替。（三）内容规划成功网页设计在观念上要确立活跃的思维方式， 还要有效地将图形引入网页 设计之中， 增加人们浏览网页的兴趣， 在崇尚鲜明个性风格的今天， 网页设计应 增加个性化因素， 个性化是网页设计的生命力所在。 而我的网站设计内容主要以 简洁直观为主为方便浏览者能快速找到所需要的内容， 同时能更为全面的展现中 国蛋糕企业所包含

3、的特色， 因此排版主要涵盖了以下几个部分分别是首页、 蛋糕 照片、蛋糕种类等。（四）布局我做的中国蛋糕网站使用了分屏布局， 这种布局可以同时展示两个同等重要 的内容信息。此外，我将两种信息相互对立，创造出完美的对比，以吸引更多访 客的目光。分屏布局，再加上呼应的动画，使得用户拥有更加精致的体验。 在首页浏览之后，点击菜单栏仍旧可以跳转。第 2 章 设计内容与制作步骤网站设计内容与制作步骤1. 首先在 dreamveaver 中文件 -新建- 常规- 基本页 -html ，将网页的默认文 件名 untitled.htm 改为 index.htm 。2. 在标题里空格里输入网页名称， 打开页面属性

4、窗口， 适当修改网站属性。3. 在网页的相对位置输入中国蛋糕网， 颜色设置为绿色， 并通过插入 - 图片 的方式，将中国蛋糕的企业标识的企业标识添加到网页的首页导航条上 方。4. 制作导航条，创建横向导航栏，包括网站首页、蛋糕分类、蛋糕照片等 几个部分组成。设置横向导航栏各个文本形式的内部链接。5. 然后切换“常用模式”找到 flash 这个功能，下面有一个插件功能。6. 点击进入插件功能进入，把你我事先下载好的 mp3格式音乐找出来，选 择需要的音乐，点击确认。然后把鼠标放在 flash 的功能是点击拉大， 最后点击保存，这样就插好一个音频了。7. 打开 Dreamweaver，选择一个站点

5、，再通过 HTML在站点下创建一个新项 目。8. 将新建的 html 项目进行保存， 新建 保存。 将文件保存在站点中， 并命 名为 “flash ”。9. 插入视频文件， 插入 媒体 swf 。找到我要插入的 swf 文件，然后点击 确定。这样就插好了一个动画了。10. 选中"蛋糕分类 "的字体，右击出现菜单栏，选择属性，点击链接旁 的指向文件按钮。指向到右下角站点的素材 1 文件。就可以将两个网页 链接起来了。 选中"蛋糕照片 "的字体，右击出现菜单栏，选择属性，点 击链接旁的指向文件按钮。指向到右下角站点的蛋糕照片文件。就可以 将两个网页链接起来了

6、。11. 在 DW中的 HTML文档中，将鼠标点击在 body 中间，然后打开插入选 项栏，找到 image 选项，快捷键可以使用 ctrl+alt+I ，然后点击选项栏， 找到存放图片的位置，选中图片确定，这样就插入蛋糕图片了。企业宣传界面( flash 作品)设计内容与制作步骤1. 在 An上新建动画， 通过矩形绘制工具， 加入一个绿色的矩形， 新建图层， 在上下两个空白部分，加入浅绿色的长条矩形。2. 选择"T" 进行文字编辑，打出"中国蛋糕"几个字，插入关键帧，将字体又 右向左水平移动，之后再添加传统补间动画，将字体从右向左逐渐进入 舞台。新建图

7、层，新建一个元件，命名为 “按钮 ”，类型设定为按钮元件。 进入按钮编辑区，时间轴上面一共有四个帧。3. 这四个帧，在第 1 帧中单击工具栏里面的矩形工具绘制一个绿色的矩形。 双击 “库”中按钮元件，进入按钮编辑区。在图层面板中新建图层2，单击文本工具键入 “button ”，调整位置。4. 添加按钮元件，新建按钮元件，通过合并绘制，画出按钮的形状，并在 按钮上面添加文字，在按钮设置的界面中，使鼠标在点击该按钮时出现 按钮上变为绿色的效果。并且通过不断添加新的动画层，制作出四个按 钮。5. 当按钮制作完成之后，在第 40 帧处添加 stop 动作，选中关键帧，右击 选择动作进行代码编写。并且设

8、置按钮动画播完之后停止的动作。要禁 止动画一开始就自动播放， 这样播放按钮才会起到作用 。单击时间轴上 的第 1 帧，打开舞台下面的 “动作”面板，双击 “影片控制 ”下的“stop ”命 令，是动画在第一帧就停止。在最后一帧同样加入 “stop ”。6. 然后新建立一个按钮元件，按照我们刚才做的方法制作出两个按钮，分 别 是 “play ”和“relplay ”。在时间轴中新建一图层，把 “play ”按钮从控 制拖动到第 1 帧的合适位置， “replay ”拖动到第 30 帧的合适位置。 分别 单击两个按钮，打开动作面板，在 “play ”和 “replay ”按钮上面加如控制 命令：

9、“play ”按钮上面的命令： on(release) play(); 7. 新建新的图层，将按钮的蛋糕种类内容进行展示，新建图形元件，新建 图层，加入文字，将文字转化成图形元件，制作出一个由小到大的传统 补形动画。8. 新建图层，开始制作点击第二个按钮播放出的动画，添加一张蛋糕图片 到舞台， 并将它们转化成图形元件， 建立三个图层， 分别放入三个元件， 并设置图片从图形由左向右的传统补间动画。9. 动画制作完毕之后在按钮二上面添加动作， 单机此帧并播放， go to paly到动画开始的那一帧。10. 设置最后一个按钮，采用同样的方式加入文字，转化为图形元件， 并插入。将所有的动作，最后复制

10、到第 40 帧，设置动作，使用组合快捷 键“Ctrl+Enter ”来进行发布测试11. 最后导出结束。第 3 章 作品设计总结通过这次中国蛋糕企业网站的设计，我有了许多心得体会。在设计过程中 我更熟练的掌握了 Dw运用的快捷键以及 An 的神奇之处。总结自己这次设计的作品。 觉得制作的时候应该更细致一点， 更应该着眼全 局，追求整体的协调。 这次作品的优点是配色还可以， 而且自认为表达的较为含 蓄，不是太直白，但还是一眼能看懂的。虽然对 An、Dw 技术的各项工具运用联合程度不够熟练。但是我对 An、Dw 这门技术的兴趣越来越浓厚了，我对未来的期望是希望我可以成为An 的大神！中国蛋糕企业网站的设计是对我的一种很好的检测， 是对我的想法思维以及 运用技术的能力的一个测试。 通过这次企业网站的设计， 让我知道我有哪些方面 的不足，也让我收获了许多新的感受新的想法。在这次设计中我遇到的最大问题是关于 Dw排版的。总觉得网站排版不够简 洁，而且总有些细节遇到问题。 后来通过找一些相关书籍， 以及寻求老师同学的 帮助，已经可以很熟练的解决了。在 f