静态网页制作报告.docVIP

PAGE

PAGE6

目录

一、制作题目 1

二、制作过程 1

（一）建立布局 1

（二）网页中相关插入 1

（三）设置导航条 2

（四）设置交换图像 3

（五）文字背景图像设置 3

（六）制作弹出信息效果 3

（七）设置滚动图片和文字 4

（八）表单的制作 4

（九）链接 5

（十）制作flash图像查看器 5

三、制作代码 4

（一）重要文字代码 5

（二）滚动图片代码 5

四、心得体会 6

五、参考资料 7

六、教师评语…………………..8

制作题目

永不老去的青春

制作过程

（一）建立布局

在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格和绘制层的帮助，很难组织出一个协调合理的页面。

1.在Dreamweaver8“插入”工具栏中单击“布局”进入布局模式，再切到“绘制层”绘制大概的布局再结合布局表格，从而建立一个大概的布局。

2.使用背景颜色：选中该项，按浏览可以插入准备需要的背景颜色作为表格的背景颜色

（二）网页中相关插入

图像传输是www的真正魅力所在，它与文字相比具有显著的优点：一直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。

（1）在网页中插入图像

利用Dreamweaver8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“图像”点击则打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。

4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置，这选中所插入的图片，单击它，则可以在下面的“属性”面板中对图片的高、宽等进行需要的设置，从而来达到自己的需要的尺寸。

（2）在网页中插入flash

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“媒体”切换到“flash”后同图像的插入方法进行插入并同样的方法进行修改。

（3）在网页中插入透明的flash背景

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“媒体”切换到“flash”后同图像的插入方法进行插入并同样的方法进行修改。

3.在“属性”面板里的“参数”的参数为“wmode”值为“transparent”，“确定”完成了。

（4）背景音乐的嵌入

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“媒体”切换到“插件”后同图像的插入方法进行插入并同样的方法进行修改。此时重点注意参数的设置，在此参数中键入参数“hidden”值为“true”，再添加一个参数“loop”值为“true”则确定保存即完成了此插入，在网页中隐藏体现。

（5）在网页中插入flash视频

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“媒体”切换到“flashvideo”单击，此时弹出相应的对话框，在“URL”浏览中选择相关文件并在“外观”下拉列表框中选择一种外观，再设置视频的“高”、“宽”、“自动播放”。确定后则完成了该项插入，在“关于我们”网页体现。

（三）设置导航条

在设置导航之前必须需要相关的材料，即首先需要有相应的图像，如：该网页涉及到“你的心情”、“你的追求”等这就需要把它们做相应的图像，则我就结合美图秀秀来实现的，分别做了5个字体白色的和5个字体黄色色，此时就为做导航条打下基础了，下面进行设置导航条：

1.在网页需要的地方把光标定位在此位置。

2.在“常用”栏中选择“图像”切换到“导航条”单击则弹出相关对话框在“状态图像”浏览中去找上做的蓝色字体的的图像，再在“鼠标经过图像”浏览中找黄色字体图像来完成图像转换，同样在此框中添加剩下的最后确定则完成。

（四）设置交换图像

1.将已插好的图像选中，并在“属性”面板中对它命名，

2.在窗口中去勾选“行为”，再在“行为”面板中单击“+”选择“交换图像”弹出相应的对话框再去选择其他与本图不一样的图片，确定则完成。

（五）文字背景图像设置

1.选中网页里的文字，在窗口中打开“css样式”。

2.在“css样式”面板中单击“+”则弹出对话框，选择“类”并以点开头取英文名。

3.选择需要的图片作为文字背景图确定。

4.在“c