网站名称：微言微语个人主页
班 级：J09301班，J09302班
学生姓名：
指导老师：李 向
实训时间：2010.12.6—2010.12.22
2010年下期网页设计课程实训报告
一、实习目的：
通过教学实习掌握站点制作、站点测试与发布技术。会综合利用Fireworks 、Flash和Dreamweaver三个软件进行静态网站的设计。
二、实习内容：
1.用Fireworks处理图片。对图片裁剪、钝化、高斯模糊。设置图片的GIF动画格式，制作标题动画。对文字应用效果。利用Fireworks制作导航条并导出格式为html。
2.用Flash制作标题动画。首页中的动画不超过20M。制作按钮来超级链接到其他页面。
3.使用Dreamweaver布局视图，设置本地站点。在标准视图和布局视图模式相互转换。建议使用布局视图，在标准模式中插入层对象制作层动画，利用行为面板添加鼠标行为，制作翻转动画，使用CSS样式统一网页中文字样式，插入Fireworks中的GIF 文件及导入Flash中的SWF文档，设置文档间的超级链接。
三、具体要求：
1、利用Dreamweaver制作一个静态网站，要求网站有特色，整个网站的内容和形式要统一，应能够反映一个简单的主题。可以选择制作《个人网站设计》、《企业网站设计》、《文化网站的设计》、《娱乐网站设计》或者其他自己认为适合的网站。
2、 作一个主页面，至少5个次页面。
3、 必须用到框架、表格或层排版技术、Flash技术和图像处理技术，使网站具有合理的外观和功能。
4、 主页基本要求：
页头Logo，准确无误地标识站点和企业标志；
网页标题动画，可以制作成GIF动画或者Flash动画；
导航条；
E-mail地址，用来接受用户垂询；
联系信息，如普通邮件地址或电话；
版权信息。
5、制作一个表单页面。
6、某个页面有滚动字幕。
7、为一个页面添加背景音乐。
8、至少添加一种行为效果。
9、整个网站各页面之间保持风格一致，页面之间要有合理的超级链接。
10、进行站点测试后申请免费空间并发布到网络。
四、网站设计思路：
本站应该算是一个人主页的小型网站。关于本站站名的来源：微言微语个人主页，因为，我觉得这个网站里面的所有文字都是像一个人在自言自语，在低声地向某人诉说着什么，没有主题，没有目的。取这个站名，是做了网站的大概构思后才取的，觉得，这个名字与网站的图片、背景音乐还有文字都很相符。
个人主页，一般都会包括首页，相册，链接，一些个人喜欢的文字加图片，我的个人主页也不例外，包括次首页（个人喜欢的的文章加图片），我的作品（里面包括自己做的三个FLASH动画），文章（一些自己喜欢的文章），相册（Firworks处理过的相册），关于（关于自己的文字，关于本站的一些说明），链接（世界著名网站的有关链接），反馈表（浏览者信息反馈表）。
五、网站设计过程：
把所有的素材都整理好（图片，文章，相片），开始布局。此站大多数用的是“三”字型的，三字型是我给它取的名字，因为，最开头是一张带有导航条的图片，用Firworks处理过的HTML文件，中间一大片用于放正文，下面就是版权信息，E-mail地址用来接受用户垂询；联系信息，如普通邮件地址或电话，像被分开的三个部分，所以我叫它三字型。这种布局方式看起来比较的整齐，简洁美观。
首页本想做一个动态网页，由于时间有限所以还没完全成功。只好用了一张与次页面一样的背景图片做背景，加上从下向上的滚动字幕，背景图片是用Firworks处理过的图片，大片的灰色墙壁加上颜色艳丽的钮扣图案，首页加了状态栏逐字出现的效果，加了“加入收藏”、“设为首页”等代码。
次页面包括如下些内容：首页、作品、文章、相册、关于、链接以及反馈表。这些页面是用模板做的，上面的图片，导航条以及下面的版权联系方式是不用改变的，都保持着首页的风格，背景图一样，字体与样式一样，图片风格一样。中间是两个可编辑区域。
在所有的页面导航条下面，插入层对象制作了一个层动画，来回移动的层，里面存放日期，利用行为面板为此层添加了鼠标行为，单击此层，会出现对话框，“欢迎您访问我的个人主页！”，做布局大多使用表格布局，使用了少量的css样式，字体，字号，颜色都统一套用相应的样式。
首页中添加背景音乐，小说音乐《我在那一角落患过伤风》，一边看慢慢上移的文字，一边听这轻柔的音乐，给人一种意境美。其实次页面添加《虫儿飞》，轻快而活泼。首页禁止右键复制功能，右键单击没有反应。
次首页，就是进入次页面的第一个页面。主题算是与青春有关的三种感情，三张图片，用Firworks处理，加上相应的文字。要用到两个表格，分别放在两个可编辑区域里面，一个1*2的表格，一个2*2的表格，第一个表格放一张有关于亲情的图片加一小段文字，第二个表格放一张有关于友情的图片加一小段文字,还有一张有关于爱情的图片加一小段文字。作品页面是三个FLASH动画，第一个是左右键控制的图片移动按钮，可以单击来链接到主页面（代码见附录），四个图片经过裁剪、高斯模糊。第二个是光芒四射（代码见附录），要用到ActionScript语言，长短不一的线条加上透明度的改变组成光芒四射。第三个是鼠标跟随特效（代码见附录）。文章页面，就是简单的文字页面，没有什么特别的。相册页面，上面是一个用Firworks处理后的一组图片，鼠标移到小图片上，下面做出现相应的大相片，中间有少量文字，底部是用FLASH做的一组循环滚动图片（代码见附录），图片跟着鼠标的移动而左右移动。关于页面，也是简单的文字页面，没什么特别的，“个人简历”文字链接到WORD文档“个人简历”(代码：附录：源代码 (1) 状态栏逐字出现的效果代码： (2) 首页收藏代码： onClick="window.external.addFavorite('http://redcarrot2001.xinwen520.com','微言微语个人主页')">--->>>收藏本站 （3）设为首页代码： onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://redcarrot2001.xinwen520.net');">--->>>设为首页 （4）滚动字幕代码： （5）添加背景音乐代码： （6）禁止右键复制功能代码：
