个人主页设计报告.docx

个人主页设计报告.docx

《个人主页设计报告.docx》由会员分享，可在线阅读，更多相关《个人主页设计报告.docx（20页珍藏版）》请在冰豆网上搜索。

个人主页设计报告

芙蓉学院

课题:

个人主页课程设计

姓名：

学号：

同组姓名：

专业班级：

计算机科学与技术

指导教师：

设计时间：

评阅意见：

评定成绩：

指导老师签名：

年月日

目录

一运行环境………………………………………………………2

二研究背景………………………………………………………2

三网站的主题……………………………………………………2

四设计步骤………………………………………………………3

4.1Photoshop的设计步骤…………………………………3

4.2Flash的设计步骤………………………………………3

4.3Html的编写步骤………………………………………5

4.4Dreamweaver的设计步骤………………………………6

五程序源代码（主要代码）……………………………………7

六调试过程分析…………………………………………………11

七网页的测试与发布（截图）…………………………………12

八实验小结与心的体会…………………………………………14

参考文献…………………………………………………………14

一、运行环境

本课程主要基于windowsXP/2000或其他系列操作系统、photoshop和网页三剑客：

MacromediaDreamweaverMX、MacromediaFlashMX、MacromediaFirework等运行环境。

主要讲述HTML的基本语法和dreamweaverMX、flashMX的基本操作的应用。

二、 究研背景

时代突飞猛进，局势瞬息万变。

网络经济的神话已经是昨日黄花，IT业也逐渐从浮躁归于踏实，而在这个变化的大趋势下，网页设计与制作的技术却恰恰相反，它不断发展，空前流行，甚至已经成为了一种艺术形式，一种时尚文化。

几乎所有的浏览者都喜欢flash动画，因为谁也不能抗拒如此具有魅力的视觉冲击。

像摩托罗拉，宝马汽车等知名公司都开发了flash动画的广告形式，甚至连微软推行XP时都采用了flash短片。

随着电脑的日渐普及，网络队伍的不断“壮大”，随着Internet在全球的不断升温，网络技术以及与之相应的网页设计已成为最吸引人的技术，她需要灵感和不断创新。

 据介绍，近年来，国际上计算机技术、网络技术广泛应用于动画领域，人们对视觉享受的要求越来越高。

技术人员不仅要注意硬件设备的开发和运用，还要加强对艺术关注和感悟。

而多数编导人员仅注重在艺术领域的发挥和创新，对现代电子技术缺乏敏感，至多只有一点粗浅的了解，没有好的体制、环境，两者就不能达到和谐的统一，也就不可能产生顶尖的动画人才。

另外，动画对人才的制作技术和艺术性的要求比较高。

这方面的学习最复杂，且需要大量的资金“垫底”，坚持下来能够做得好的人也就更少了。

但是动画漫画的运用却越来越多，且发展前景非常看好，目前这方面的人才最为紧俏。

三、网站的主题

主题：

本网站名为嘴谗网，主要是为了介绍常德风味特产。

因为常德地域广泛，市区以及各个县的特产不同，所以在本网站中主要是以安乡，桃源，汉寿，临澧，澧县，石门六个县为主线，设计子网页（在本次网站设计中，子网页没有做出来，而是直接链接到相应区域特产的详细网页），介绍各个县的特产，这是首页的导航栏内容。

用Flash做出logo标题，Flash动画图片播放几种小吃。

在首页的内容内中，分为三个区域，第一个为特色产品，分为名茶类，水禽类和小吃类，在各个子类中介绍几种相应的特色产品。

第二个为推荐产品，主要是本网站设计人员结合自身与朋友的最爱所总出来的几类产品，而且这几种产品涵盖了前面的三类，配以图片的同时还相应的介绍了该种产品的主要简介。

第三个区域又分为两栏，上面一栏用Flash播放精选的特产图片，下面一栏为食品百科，主要讲述一两个生活常识，还有一个链接，点击可以进入食品百科资料库。

四、设计步骤

4.1PhotoShop的设计步骤

在这次设计中我们用了Ps简单的处理了相关图片和一些文字处理。

如修改甲鱼图片步骤如下：

（1）打开PhotoShop环境，新建一个空白文件，在选择文件/打开命令，选中甲鱼图片。

（2）在工具箱中选择魔法棒工具，选择除去甲鱼以外的区域，在选择反向选择只有甲鱼图像的部分。

（3）选择工具箱中的移动工具，将甲鱼拖动到新建文件空白场景中，保存。

文字处理如下操作：

（1）选择文件/打开命令，打开图片。

使用任意变形工具将图片按比例缩小并选择魔法棒工具将图中的部分选择并拖到另一个新建文件场景中。

（2）选择工具箱中的文本工具，在所选的图片中添加文字，并对其字体格式进行相应的修改。

选择文件保存命令被加以文字处理后的图片生成。

4.2Flash的设计步骤

在这次网页设计中我们运用了Flash工具制作了一个动画图片。

步骤如下：

（1）打开Flash环境，新建一个Flash文档，选择矩形工具画一个适当大小和颜色的矩形并在左上角添加一个logo图片和嘴馋网的文本。

选择168帧的位置上添加帧。

（2）新建图层11，在第五帧位置上添加一个关键帧，选择文件/打开命令打开图片XX，改变其相应大小及位置。

然后将该图片转化名为元件1的图形元件。

再在10、18、50、55帧位置上添加关键帧，并将第5、10、18、50、55帧位置上的图形的Alpha值分别为0%、17%、55%、27%、23%。

最后在第5、10、18、55、帧位置上创建补间动画。

如图1所示。

（3）新建图层2，在15帧的位置上添加关键帧，选择打开命令将相应图片放置到场景的左偏上方，并加该图片转化为元件2的图形元件。

然后在25帧、65帧、70帧位置添加关键帧，在鼠标点在25帧位置上将该图形拖到相应的位置。

最后选中15、70帧位置上的图形将其Alpha的值设为0%并在15、65帧位置创建补间动画。

如图1-1到图1-4所示。

（4）其他步骤基本与上相似，故不再详述。

其总帧情况如下图2所示：

图1-1（第10帧）图1-2（第18帧）

图1-3（第55帧）图1-4（第68帧）

图2

4.3Html的编写步骤

在此过程中，虽然利用了Dreamweaver来制作的网页，但我们还采用了html来设计编写。

如在此网页中对于导航栏的设计是利用html来编写的。

编写代码如下所示：

（1）利用html语言对导航栏的设计与编写。

 桃源       

  安乡       

   汉寿       

   石门       

  临澧       

（2）对网页相关内容的设计与编写。

a对名茶类的框架内的编写设计：

名茶类:

更多......

b对水禽类框架的设计编写。

水禽类:

• 童胖子酱板鸭
• 美食五味肉之汉寿甲鱼
• 常德武陵鸭
• 澧县"张公"狗肉
• 石门土家腊肉
• 安乡县珊珀湖渔场盛产的洞庭大闸蟹

更多......

利用不同的代码对html列表的设计。

c对食物以及健康与营养栏的介绍

蒿子粑粑介绍：

蒿子粑粑，是常德市许多地方人民喜食的一种具有独特风味的食品。

每年农历三月初三日，各家各户都做蒿子粑粑，边做边唱：

“三月三，蛇出山，做粑粑，塞蛇眼。

......

[详细]

其他类似，故省略其代码。

4.4Dreamweaver的设计步骤

由于做网页设计，加上我们还是得能力还不是很好，操作还不熟练，故采用Dreamweaver来辅助设计网页的制作，使编写时简单了许多。

1、利用表格来分布网页的布局，如分为几行几列，将哪一个表格又分为几行几列等。

。

2、在相应的单元格中利用Dreamweaver环境中提供的操作功能插入相应的图片、文字Flash动画等。

例如：

在网页的第一行内插入Flash动画，操作为在第一行中，选择三列的单元格，鼠标右击，选择“表格”—合并单元格。

再点击“插入”—“媒体”—“.swf”，在弹出的对话框中，选择相应要插入的多媒体即Flash文件，点击确定，完成对Flash文件的插入。

若插入图片则选择“插入/图像”命令，在选择你需要的图片。

3、添加文字时可以利用Dreamweaver环境直接在单元格内编写文字。

但若需要一些格式是Dreamweaver无法直接表现的则可自己编写，如需要制作表单等。

对文字的字体以及其他风格可以由Dreamweaver直接设置。

4、对文字和图片的链接等功能可以直接利用Dreamweaver环境中属性栏中的功能完成。

如需对文字、图像进行链接则选中要进行链接的文字再在属性栏中的链接栏选择被链接的对象。

对Dreamweaver的设计不用自己编写代码就能够自动生成。

五、程序源代码（主要代码）

//www.w3.org/1999/xhtml">

@importurl（"CSS/Level3_1.css"）;

body,td,th{

font-size:

14px;

color:

#030303;

font-family:

Arial,Helvetica,sans-serif;

list-style-type:

disc;

}

body{

background-color:

#468648;

}

D27CDB6E-AE6D-11cf-96B8-444553540000"width="848"height="350">

D27CDB6E-AE6D-11cf-96B8-444553540000"width="392"height="317"align="baseline"id="FlashID2">

D27CDB6E-AE6D-11cf-96B8-444553540000"width="100"height="350">

1、什么是绿色食品？

绿色食品并非特指那些"绿颜色"的食品，而是指：

按照特定生产方式生产，经专门机构认定，许可使用绿色食品标志商标的无污染的安全、优质、营养类食品。

它可以是蔬菜、水果，也可以是水产、肉类

2、胡萝卜营养介绍：

益肝明目、利膈宽肠、健脾除疳、增强免疫功能、降糖降脂，一般人都可食用。

更多知识请进食品百科资料库

名茶类:

        更多......

蒿子粑粑介绍：

蒿子粑粑，是常德市许多地方人民喜食的一种具有独特风味的食品。

每年农历三月初三日，各家各户都做蒿子粑粑，边做边唱：

“三月三，蛇出山，做粑粑，塞蛇眼。

......