网页制作实训报告

目录

摘要 (1)

概述 (2)

主题介绍 (2)

制作目的及其方法 (2)

网站规划及其实现过程 (3)

系统结构图 (4)

网站制作的具体内容 (5)

主页的制作 (5)

分页的制作 (6)

背景音乐、Flash图片和视频的插入 (10)

框架排版和时间轴的运用 (12)

鼠标特效代码的插入 (13)

制作网站出现的问题 (18)

在做超链接时出现的问题及解决方法 (18)

实训总结 (18)

参考文献 (20)

摘要

《网页制作》实训的目的主要是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。我所作的网页主题为《圣诞节》，其中主要是介绍关于圣诞节的起源、习俗、各种促销活动和圣诞老人、圣诞大餐等，在主页面中展示的是整个页面的布局排版，在分页面中详细的介绍了每个页面的主要展现的主题。在制作初期，主要是收集设计素材、内容，下载关于圣诞节的图片、相关的视频和各种鼠标特性效果代码，中期，主要是创建主页面和分链接，浏览色彩搭配的效果，页面是否美观，分析如何使用框架和利用Dreamweaver8软件创建模板和布局表格，最后，主要是细化各个页面，对各个页面的图像、表格、链接进行适当的调试，是站点更加美观，并上传和测试整个站点运作情况，做好所有链接工作，使用PPT展示最终的效果。

概述

主题介绍

大家都知道圣诞节是西方的节日，也是基督教世界最大的节日，这一天，世界所有的基督教会都举行特別的礼拜仪式。但是有很多圣诞节的欢庆活动和宗教并无半点关联。交换礼物，寄圣诞卡，这都使圣诞节成为一个普天同庆的日子。由于是圣诞节的临近，我们想抓住这个主题给大家展示一个不一样的圣诞节，也希望所有的人都能过的开心，圣诞节的来临，也意味着新年即将到来，我想以这个为主题，预祝大家在2012年里有好运气、学习成绩更优，每个人的生活都很精彩。

制作目的及其方法

主要目的是掌握网页设计与制作流程并熟练运用Dreamweaver、Flash、Photoshop等相关辅助软件。

1、应用远程站点管理的知识和技能；

2. 应用本地站点管理的知识和技能；

3. 应用网页页面设计的知识和技能；

4. 应用网页制作的知识和技能；

5. 培养以上知识和技能的综合应用能力。

主要方法是通过使用Dreamweaver8中文版软件规划站点、布局表格、插入图像、链接、建立框架制作、创建分层、运用时间轴等相关素材进行操作。

网站规划及其实现过程

我通过前期的网站策划首先搜集相关资料并最终确定了制作一个以圣诞节为主题网站，网站页面选择以灰色为背景色辅以鲜色点吸引访问者的视觉，网站栏目主要有：首页，圣诞起源，圣诞雪景，圣诞老人，圣诞大餐，圣诞前夕，圣诞活动，圣诞祝福语，内容不多，选择页面设计宽950像素，能够在各类型显示器下很好的呈现。前期的策划完毕，现在勾画出了网站设计草图，最后开始实施网站页面设计

工工作，页面设计主要运用Dreamwever制作，图片设计选择photoshop制作。

系统结构图

网站制作的具体内容

主页的制作

1、主页表格的布局及其图片的插入

2、主页文字的输入及其最终效果图

3、导航条的设计

1、圣诞起源表格布局及其效果图

3、插入滚动图片的代码及其效果图

4、圣诞促销层的插入及其效果图

背景音乐、Flash图片和视频的插入

1、背景音乐插入代码

2、flash图片插入的代码及其效果

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="/pub/shockwave/ca bs/flash/swflash.cab#version=7,0,19,0" width="1295"

height="151" title="top">

quality="high"

pluginspage="/go/getflashplayer"

type="application/x-shockwave-flash"

wmode="transparent">

3、flash视频插入区域的说明及其视频

框架排版和时间轴的运用

鼠标特效代码的插入

if (document.all){

colours=new

Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')

amount=colours.length;

YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0, my=0,mx=0;

document.write('

style="position:absolute;top:0;left:0;">

'); for (i=0; i < amount; i++)

document.write('

style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier

New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:cen ter">.

');

document.write('

');

ini=1;

gstep=1;

function iMouse(){

my=event.y;mx=event.x;

}

document.onmousemove=iMouse