网站开发技术课程设计报告题目：兄弟依旧专业：班级：学号：姓名：老师：成绩：_____________________一、网站设计要求✧站点题目：自定✧具体内容自行设计；✧具体要求：按照Fireworks作效果图—〉切图—〉页面布局的过程进行；须提交完整的Fireworks页面效果图；必须用CSS+DIV页面布局；页面中必须包含JavaScript编程；页面中必须包含Flash动画（须提交Flash源文件.fla）；二、信息等相关素材收集基于设计网站的的要求，其内所包含的图片与文字信息皆来自互联网。
并且其选材比较贴合电影说体现的主题，再加上其内的色彩调用，很会让人为之动容并有一种身临其境的感觉。
三、个人网站的总体规划和步骤1、设计的目的又一年毕业季，又是一个让彼此动容的季节，在向这段充满欢笑、充满浪漫、充满豪情壮志、也充满酸涩与淡淡忧郁的学生时代告别之际。
为此做了个网站以怀念曾经的你和我、曾经一起奋斗的日子、以及那个他或者她。
还有此刻的美丽,以及无限的未来向往。
2、设计布局在网站的右上角有一个音乐播放器，重复播放着BEYONGD的代表作（光辉岁月），在其下面有一个利用JavaScript制作的一个图片轮显效果的界面。
写满了对大学四年的怀念图片。
网站的左上角用flash制作的一个标题，并在其下方有一个用户登录栏，主要是为了方便用户对网页进行操作。
最后一个网站的右下角是主题介绍的大学毕业的微电影链接。
3、网站具体设计过程首先选定本网页制作工具是网页三剑客：Adobe Dreamweaver CS3+Adobe Fireworks CS3+Adobe Flash CS3再次设计核心内容，页面采用CSS+DIV布局，最外层DIV为框架，其内，右上角为一embed标签，在页面中嵌入一音乐文档，接着在其下方用java script编写并用DIV设置其图片表现形式。
且左上角DIV插入一Flash主题动画，然后下方插入一DIV，用来说明用户登录、注册等问题。
最后也是网站主题所在，用以DIV设置自己一个大二生对毕业以及兄弟的感言，并用标签a超链接一网站，我所喜欢的一部微电影。
四、代码设计编写源代码<embed src="music/BEYONGD -光辉岁月.mp3" width="300" height="45"type=audio/mpeg loop="true" autostart="true" volume="0" align="right"> </embed>向网页中添加一个音乐播放器，其中定义音乐播放器属性为宽300，高45，自动循环播放音乐。
下面添加 div布局，在div中再嵌套div实现页面的大概布局，在利用css 对页面内的内容进行具体的布局。
在每个div中添加代码。
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="/pub/shockwave/cabs/flash/swf lash.cab#version=6,0,29,0" width="385" height="86"><param name="movie" value="未命名-1.swf" /><param name=quality value=high /><embed src="未命名-1.swf" quality=high pluginspage="/shockwave/download/index.cgi?P 1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="385" height="86"></embed></object>这是在首个嵌套的div中添加一个flash动画。
<div id="top_1"> <form name="form1" method="post" action=""><label>帐号：<input name="帐号" type="text" value="" maxlength="15" /></label><br><br><label>密码：<input name="密码" type="password" maxlength="15" /><br><input name="登陆" type="button" value="登陆" /><br><input name="记住密码" type="checkbox" value="记住密码" /></label><span class="STYLE3">记住密码</span><br><input name="自动登录" type="checkbox" value="自动登录" /><span class="STYLE3">自动登录</span><br><input name="注册帐号" type="checkbox" value="注册帐号" /><span class="STYLE3">注册帐号</span></div>这是添加用户登录栏。
<meta http-equiv="content-type" content="text/html; charset=utf-8"><script type="text/javascript" src="jquery-1.2.6.js"></script><script type="text/javascript">$(document).ready(function(){$(".clickButton a").attr("href","javascript:return false;");$(".clickButton a").each(function(index){$(this).click(function(){changeImage(this,index);});});autoChangeImage();});function autoChangeImage(){for(var i = 0; i<=10000;i++){window.setTimeout("clickButton("+(i%5+1)+")",i*1000);}}function clickButton(index){$(".clickButton a:nth-child("+index+")").click();}function changeImage(element,index){var arryImgs = ["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg"];$(".clickButton a").removeClass("active");$(element).addClass("active");$(".imgs img").attr("src",arryImgs[index]);}</script><style type="text/css"><!--img{border:0px;}.imgsBox{overflow:hidden;width:282px;height:176px;}.imgs a{display:block;width:282px;height:164px;}.clickButton{background-color:#888888;width:282px;height:12px;positio n:relative;top:-1px;_top:-5px;}.clickButton div{float:right;}.clickButton a{background-color:#666;border-left:#ccc 1px solid;line-height:12px;height:12px;font-size:10px;float:left;padding: 0 7px;text-decoration:none;color:#fff;}.clickButton a.active,.clickButton a:hover{background-color:#d34600;} --></style></head><body><div class="imgsBox"><div class="imgs"><a href="#"><img id="pic" src="images/01.jpg" width="282" height="164" /> </a></div><div class="clickButton"><div><a class="active" href="">1</a><a class="" href="">2</a><a class="" href="">3</a><a class="" href="">4</a></div>这是在网页中添加一个图片轮显效果的界面，把我设置好的4个图片轮番显示出来。