网站建设实训报告模板（网站建设实训报告万能模板）

今天给各位分享网站建设实训报告模板的知识，其中也会对网站建设实训报告万能模板进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、要一份网页实训报告
• 2、跪求：网页设计实训个人总结
• 3、《网页设计》实验报告

要一份网页实训报告

一、实习目的：

通过教学实习掌握站点制作、站点测试与发布技术。会综合利用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文档“个人简历”(代码：a

href="my.doc")，下面有个信息反馈的链接，链接到有关的“浏览者信息反馈表”，此信息反馈表用表单做的，用到单行文本域，多行文本域，单选框，复选框，按键，此表单可以用邮件方式反馈信息（mailto:redcarrot2001@163.com）。链接页面，前面是我的个人主页LOGO，一张用Firworks做的LOGO，并建立有关链接，中间是一些文字，下面是世界著名网页的有关网址以及相应链接。

附录：源代码

(1) 状态栏逐字出现的效果代码：

script language="JavaScript"

var msg = "欢迎来到☆※◎~~~微言微语~~~☆※◎个人主页，请多提意见。谢谢! "

;

var interval = 120

var spacelen = 120;

var space10=" ";

var seq=0;

function Helpor_net() {

len = msg.length;

window.status = msg.substring(0, seq+1);

seq++;

if ( seq = len ) {

seq = 0;

window.status = '';

window.setTimeout("Helpor_net();", interval );

}

else

window.setTimeout("Helpor_net();", interval );

}

Helpor_net();

/script

(2) 首页收藏代码：

onClick="window.external.addFavorite('','微言微语个人主页')"---收藏本站br

（3）设为首页代码：

onclick="var

strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('');"---设为首页/span/p

（4）滚动字幕代码：

marquee align=left direction=up

behavior=scroll height=400

width=550 hspcace=5 scrollmount=2 scrolldelay=200

vspce=5 loop=-1

pspan class="564978f96533c3f9 css"1、真的很喜欢那些记录多于表达的人。

br /

…………

…………

183、希望每一个新的一天，醒来的那个你都神清气爽。/span

/p

/div

/p

/marquee

（5）添加背景音乐代码：

bgsound src="aa.mp3" loop=1

（6）禁止右键复制功能代码：

script language="JavaScript"

!--

document.oncontextmenu=new

Function("event.returnValue=false;"); //禁止右键功能,单击右键将无任何反应

document.onselectstart=new

Function("event.returnValue=false;"); //禁止先择,也就是无法复制//--

/script

style type="text/css"

（7）光芒四射代码：

duplicateMovieClip("line","line"+i,i);

setProperty("line"+i,_rotation,random(360));

setProperty("line"+i,_alpha,random(100));

i++;）

if(i100){

gotoAndPlay(1);

}else{

i=1;

}

（8）鼠标跟随代码：

movie._visible=0;

i=0;

i++;

if(i100){

i=1;

}

movie._x+=(_xmouse-movie._x)/30;

movie._y+=(_ymouse-movie._y)/30;

duplicateMovieClip(movie,"movie"+i,i);

this["movie"+i]._x=movie._x;

this["movie"+i]._y=movie._y;

gotoAndPlay(2);

（9）循环滚动图片：

onClipEvent (enterFrame) {

this._x-=(_root._xmouse-300)/15;

if(this._x1371.1){

this._x=this._x-1371.1;

}

if(this._x-1371.1){

this._x=this._x+1371.1;

}

}

（10）左右键控制的图片移动按钮：

on(release)

{getURL("index.html","_blank");}

六、实训中遇到的难点及解决办法：

在设计开始的时候，想的太多，不知道怎么开头，定哪个主题，背景，色调，文字，布局都没有头绪，后来，开始做，而且觉得越做越有头绪了，所以我觉得，还是不要想的太多，太复杂了，不要追求完美，不要做的网页太多，搞到最后，别人都不知道，你这个网站的主题是什么了。

还有就是布局的时候总是不能做到很美观，后来，我把页面属性改了左过距为10，上边距为10，刚好把背景图片里面的那些亮丽的钮扣图案显示出来，改变了表格背景图的灰暗，使网页的整体看起来更美观了。

在做CSS样式表的时候，做字的颜色的时候，老是不知道用哪种颜色才搭配的起这个背景，后来，看到那个背景的钮扣颜色与灰色配起来很好看就用吸管取了钮扣的颜色了。

七、实训心得：

在我看来，设计网页，应该先策划，策划很重要，加上创意，配色很重要，技术与鉴赏能力是最主要的。建立站点的时候，各个文件夹取名的时候，最好用相应的英语，见名知意，如图片文件夹用image，网页文件夹用html。

在所有配色当中，不同的颜色传达着不同的意义也有不同的象征。如白色代表着：清洁、天真、洁净、真理、和平、冷淡、贫乏；灰色让人联想到灰尘、石头、水泥、白银，象征着中庸、平凡、温和、谦让，它给人以中立和高雅的感觉。太多的颜色会给人带来视觉上的疲劳。所以，在我下载准备素材的时候，就选择用灰色做背景颜色，灰色太贫乏，就加上亮色的钮扣起到“中和”的作用。

通过此次实训,我觉得平面设计的创意思维、版面设计、色彩配置、图形创意等方面都有很重要，对于网页制作来说，我觉得是一个以多学科设计为基础，受到包括视觉艺术、技术、内容的多种影响。网页设计的技术不算什么困难，真正困难的是网页的设计创意，文字我觉得也很重要，有些人浏览你的网页不是喜欢上你的艳丽漂亮的图片，也许是喜欢上你的文字，那种感动人心的，唯美的文字。文字与图片要搭得上调，不可能用一张美女图做背景，上面却写有关于亲情的文章。也就是整体的搭配问题。

通过此次实训，使我对于网页制作的三大软件有了进一步的了解，各功能都能够实现。提高了自己的鉴赏能力，综合搭配能力，也对以前学过的内容进行了综合的复习。

通过此次实训，我更了解到，生活中有许多色彩，搭配颜色的时候，联想到生活中的东西会做的更漂亮，给人一种亲切感，现在看到什么东西，我就会联想到做网页的时候，还有怎么布局。反正此次实训收获很多。

最后，我想，如果此次实训老师是要我们分组来做的话，也许，我们可以做得更好，因为，一个想的毕竟不全面，而且，一个人的申美有限，我们可以分工合作，一个人做一个方面的东西，也可以根据他所善长的方面来分工，善长动画制作的人做动画，善长图片处理的人做图片，善长文字与布局的就来布局。但是，也许那样，有些同学会懒的动手，推着给别人做。

跪求：网页设计实训个人总结

《网站设计与制作》实训报告

X学院XX班XXX号

一．实训时间：

2010年6月7日到2010年6月13日二．实训地点：

科实南213

三．实训组员：

XXX、XXX

四．实训目标：

以金华农特产为主题，制作网站，通过综合实训进一步巩固、深化和扩展学生的理论知识与专业技能。

五．实训策划：

这一周，我们要进行《网站设计与制作》实训，我们认为做网站前最主要的是确定主题、框架和标题栏的设计。因此我们相互讨论之后，确定制作以“健康”为主题的“林安健康网”，但在之后的资料收集和网页的框架的建设中，我们发现出了问题，在确认无法做出效果后，我们决定放弃这个主题，重新建立以“水果”为主题，以我们的名字连体命名的“林安水果网”。以下是我们的策划内容：

1.确定主题。制作网页,首先是确定主题，金华有许多特色水果，水果产品丰富，,经过考虑,确定以金华水果品种为主题的网站,建立一个简单的介绍金华水果的网站,专业介绍一些金华地区优秀的水果市场和销售渠道等。我们本次间的网站基本以绿色为基点，绿色是生命的颜色，绿色代表着生机勃勃，所以本站以绿色为风格，让整个网站充满绿的生机。

2.设计主页。主页的设计是整个网站的灵魂，构思导航栏的分类，然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，我们构思大致分几部分，首页，特价专区，优质水果，果树栽培，婺城商场，金东商场，客户中心，联系我们，意见反馈等板块，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。确定导航栏的各个分类标题之后对于建立二级子网尤为重要，我们运用PhotoshopCS3技术来设计出导航栏，再用FireworksCS3或PhotoshopCS3技术制作切片，建立导航栏，将整体的主页效果建立起来。

3.资料的搜集。主页的导航栏设计好后，接下来就是对主页导航栏的各个内容进行资料的收集，我们采用大量的资料收集再对资料进行塞选，得到最适合导航栏内容的资料。素材的选择，要符合网站的主题，图片的大小要符合模板的轮廓，我们将不符合模板的用Photoshop处理编辑，然后放入站点底下，进行图文的链接和排版。

4.建立模板和库。此次网站建设中我们决定大量运用模板和库，运用模板和库对于建立网站提供便利同时也为我们减少大量的工序。本次水果网的建设主要采用两个模板，各具风格，样式标准。

5.各个子网页的建立。我们设计好模板后只要在可编辑区依次编辑所需资料就可，运用模板建立子网页少了很多工序，为我们节省大量的时间。尽管我们建立了模板，但我们在建立子网时很小心，因为一张图片的大小插入就有可能破坏整个模板的结构尤其在使用表格时，因此我们对所插入的图片和表格都得进行测量，做到不影响网站整体的美观。

6.实现网页间的链接。做好个格子网和首页后，接下来就是通过模板的链接，将整个网站中的网页链接起来，过程其实很简单，主要是把要链接的文字和图标选择在选择工具栏的链接按钮最后选择自己要链接的网页单击确定便可以了。通过模板建的几张网页其实超链接都不怎么用链接，只需要修改模板上的链接就可以了，这也是通过模板新建网页的好处，省去一张一张超级链接的时间了。做好这一步后，网站基本算是建好了。

7.向静太网页插入动态效果。在基本建好网页中的插入层和时间轴，制作其动态效果，让整个网页充满生机。我们在网上进行flash素材的收集，通过FlashCS3设计出主题下的风格动态效果。然后插入到静态网页中，使网页更加生动形象。

六．实训心得：

通过这半年的学习实践中和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软件技术和应用技巧，使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作了企业水果网站，作为实习的成果。其内容是多样化的。制作网页用的软件是DeamweaverCS3软件。它提供了网页和表单的动态生成到企业级的解决方案。主图是一个网页的门面，它能体现出这个网页的整体风格。

制作网页,首先是确定主题,经过再三考虑,就做了个关于金华水果的网站,要对这些有些了解,于是确定主题,做一些类似的网站,但考虑到,现在网络上好多类似的网站,但有些内容不适合我们大学生阅读,对于我们来说有点不实际,根据这种情况,最后决定建立一个简单的介绍金华水果的网站,专门介绍一些金华地区优秀的水果市场和销售渠道等。于是网站主题确立。

然后是整体规划，每一版块都有其个性的色彩，清晰明了，便于阅读浏览，大致分几部分，首页，特价专区，优质水果，果树栽培，婺城商场，金东商场，客户中心，联系我们，意见反馈等板块，再加入个别网站等，每一部分又分几小部分，内容比较充分，多样。

再后是收集资料与素材，大量浏览相关网站，收集关于金华水果的图片，进行PhotoshopCS3图片处理和排版，插入好的文章和图片等，还有参考一些好的网站的布局，特色，颜色搭配，背景图等。

再后是设计网页图片，用flash制作网友调查表，用Photoshop制作静态图片。再后是建立站点，和制作网页了，使用dreamweaver制作。

首页内容精彩丰富，首页主要是导航作用。首页制作时，时刻考虑着网页的基本原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静，颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。

简洁实用:这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式美的要求:布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。当然雅俗共赏是人人都追求的。

利用我们所学的模板设计，制作更完美的页面。将动态网页与静态网页结合起来

再后，调试过程，好多次本来在DeamweaverCS3里好好的，把字调的好好的，位置很对，可在浏览器里御览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表格，终于满意了。

通过温本周的实训，发现自己还有很多的不足。就框架的应用很难把握，切片也很难合理切割，当插入图片的时候把原有的模板给撑破了，精确定位很重要。因为学艺不精，所以不会网页的代码设计，只能通过网络三剑客综合使用。不过也实践中也学到了很多知识，比如原本不知道网页设计还需要切片，表格的嵌套是非常重要的，模板的应用时非常便捷的。还有一些行为中的效果也是蛮不错的。所以这次实训还是很有意义的。

《网页设计》实验报告

1、

设计由多个网页组成的小型网站，自选主题，要求积极、健康，不得从网络上下载；

2、

构建本地站点，创建站点目录；

3、

站点目录中各种文件分类存放，文件命名

科学

，网站不少于10个页面；

4、

整个网站内容大小不超过20M；

5、

网页版面采用表格布局；

6、

网页中引入CSS

样式表

技术。

7、

超级链接的都可正确点通；

8、

网页中需添加如

动画

、

音频

、视频等多媒体元素；

9、

栏目设计合理，页面

文字

充实，图文并茂。

10、

使用动态页面效果，如

时间轴动画

、弹出信息、弹出菜单等；

11、

可根据个人能力和兴趣使用数据库，ASP，JSP，PHP等网页技术。

实验报告

应包涵以下几个部分：

1、实验说明：说明网战在设计所应用的技术，站点下各目录、各文件；素材的收集途径等；

2、实验步骤：详细阐述网页设计整体

流程

和其中各个环节的操作步骤；

3、实验心得。

关于网站建设实训报告模板和网站建设实训报告万能模板的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。