静态网页制作报告

目录
一、制作题目 (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.在“常用”栏中选择“图像”点击则打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。

1
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.在“常用”栏中选择“媒体”切换到“flash video”单击，此时弹出相应的对话框，在“URL”浏览中选择相关文件并在“外观”下拉列表框中选择一种外观，再设置视频的“高”、“宽”、“自动播放”。

确定后则完成了该项插入，在“关于我们”网页体现。

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

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

（四）设置交换图像
1.将已插好的图像选中，并在“属性”面板中对它命名，
2.在窗口中去勾选“行为”，再在“行为”面板中单击“+”选择“交换图像”弹出相应的对话框再去选择其他与本图不一样的图片，确定则完成。

（五）文字背景图像设置
1.选中网页里的文字，在窗口中打开“css样式”。

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

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

4.在“css规则定义”的类别选“背景”并可以进行需要的设置后确定。

5.在网页的“属性”面板的“类”选刚取的名即图片被用到该文字中。

（六）制作弹出信息效果
1.在标签选择器中单击“boby”则选定了整个网页。

2.在窗口中去勾选“行为”，再在“行为”面板中单击“+”选择“弹出信息”则打开其对话框在里键入你要显示的信息，确定后并在“行为”面板中把事件设置为“onload”则完成了。

3
（七）设置滚动图片和文字
1.选择图片或文字，点开“代码”视图。

2.在以选中的文字或图片的地址开头前输入<marquee>，再选中的在以选中的文字或图片的地址后输入</marquee>，中间部分则需要输入相应的代码则可达到效果。

（八）表单的制作
（1）制作文本域
1.将“插”入栏切换到“表单”插入栏，单击“文本字段”，
2.在光标所在的位置插入文本域，在“属性“面板中进行相应的需要设置，同时那里面包含三种类型的设置“单行”、“多行”、“密码”设置。

三种分别用于网页中。

、
（2）制作单选按钮
1.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位子显示出来。

2. 在“属性”面板中对它进行相应的设置就完成。

（3）制作复选框
1.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位
显示出来。

2. 在“属性”面板中对它进行相应的设置就完成
（4）制作菜单
1.在“表单”插入栏中选择“列表/菜单”按钮则它就在光标的位
显示出来。

2. 在“属性”面板中的类型选择“菜单”，并在“列表值”键入你需要的文字，则完成了该制作。

（5）制作普通按钮
1. 在“表单”插入栏中选择“按钮”按钮则它就在光标的位子显示
出来。

2. 在“属性”面板中对它进行相应的设置就完成。

（6）制作跳转菜单
1.将光标定在要插入的菜单位置，在“表单”插入栏中选择“跳
菜单”按钮，则弹出其对话框。

2.在“文本”和“浏览”输入相应的文本和网址即完成了该制作。

本网页在“公司首页”里设了“百度”和“谷歌”跳转菜单。

（九）链接
（1）文字链接
1.选中需要链接的文字。

2.在“属性”面板中的链接去选择需要链接的文件里的网页或输入需要外部衔接的网址则可。

（2）图片热点链接
1.选中图片，在“属性”面板中选择你需要的形状的图像热点工具按钮并单击它，当光标变成“十“字形时则对它拖延。

2.再在“属性”面板中“链接”选择需要链接的文件里的网页或输入需要外部衔接的网址。

（3）转到URL
1.这里主要是用在每张网页的导航条上的去链接每张网页。

2.首先选择导航条的图片，在“行为”里添加“转到URL”，后在“浏览”中选择需要链接的网页“确定”，再在“行为”面板中将事件设为“onmouseover”，则完成。

→
（十）制作flash图像查看器
1.在“那年我们还年轻”里的相关位置把光标定位，再在“flash元素”插入面板中单击“图像查看器按钮”，此时弹出对话框将它保存在我的文件“image”中，并命名为“img”，在“属性”中修该它的大小。

2.在“flash元素”面板中“frameshow”后选“是”，“imageURLs”打开编辑它进行图片添加此添加照片张，在“slidedelay”后输入“2”，再“slideloop”选择“是”，在“transitions….”选择“wipe”，最后保存达到其效果。

5
三、制作代码
（一）重要文字代码：
<marquee scrollamount="6">每个人心中都有个未知的幸福就像海一样美丽</marquee></span> </div></td>
<p align="center"><marquee direction="up" scrollamount="1" height="353" onmouseover='this.stop()' onmouseout='this.start()' width="447"> 上下滚动字幕<span class="STYLE1"><a href="Untitled-4.html">你的心情好吗</a></span></div></td>
<textarea name="textfield2" cols="69" rows="6">例：从没想过是否要继续逃离这陌生的城市；丢了自己、丢了灵魂</textarea>
<embed src="青春纪念册可米小子.mp3" width="32" height="32" hidden="true" loop="true"></embed>
（二）滚动图片代码：
<td width="180">&nbsp;<marquee onmouseover="stop" onmouseout="start()" scrollamount="3" loop="infinite" deplay="0"><img src="image/12.jpg" width="157" height="180" /></marquee></td>
<td width="180">&nbsp;<marquee onmouseover="stop" onmouseout="start()" scrollamount="3" loop="infinite" deplay="0"><img src="image/28.jpg" width="157" height="180" /></marquee></td>
<td width="180" height="172">&nbsp; <marquee onmouseover=""="stop" onmouseout="start()" scrollamount="3" loop="infinite" deplay="0"><img src="image/11.jpg" width="157" height="180" /></marquee></td> </tr>
四、心得体会
网站制作的心得体会
通过这次网站的制作，我对网站有了更深层次得到了解，也有了更浓厚的兴趣。

尤其是对网站制作的过程与一些技巧手法更有了另外一番了解，对网站制作的基础知识也有了进一步的掌握。

这个学期我们的网页设计课，与以前的课相比更加注重个人的创意能力和软件的运用实战能力，更加综合的考验了我，使我更加完善自我。

现将我的作业情况汇报如下：
在本专业课程理论教学、实训教学的基础上，将课堂教学与社会实践相结合，通过行业生产实践的形式，进一步了解、认识网页艺术设计工作在实际生活中广泛应用的表现渠道和表现方法，提高认知水平，缩短工作磨合期。

根据项目课题要求，结合本专业所学网页设计理论知识，通过对网络广告等方面的调研和
项目实践形成文字思路，并以自命题目设计完成多媒体网页设计制作。

两项内容要求准确、完整，工作过程报告内容既要客观实际又要有认识深度，设计作品新颖有创意。

我首先的工作就是制作网站整体框架和收集资料，将其通过美图秀秀完善图片，然后导入Dreamweaver进行排版，并进一步的加以制作，完善美化，如加入 Flash Css。

由于我在某些方面的技术运用还不能得心应手，许多情况下不得不求助于他人，幸好有老师和同学的无私帮助，我才能完成这次任务。

我经过初步的构思，我因为要做的是追忆青春网页设计，所以要有一个时光主题，我在网上自己找到一些图片和文字，做一个简单的网站初步积累，考虑到主要是锻炼我们相关软件的操作能力与代码初步掌握的熟练成度，由于我们这段时间没有进行网站相关的课程，刚着手时，很多技术上的问题就暴露出来了，我感觉制作网页是需要耐心的，如果你没有耐心，你学不好网页设计，这是我最大的体会。

因为当你碰到一个问题时，如果不能立刻得到问题的答案，你可能需要长时间去解决，我就碰到过一个问题，用了很长时间才解决，这还要多亏了老师的悉心指导，同学们的无私帮助。

学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.注重实用，我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论，可以交互的。

四周的时间，我完成了全部课件内容，忙碌的四周让大家从新熟悉制作网站的过程，由于这次课程的网页都是静态的，难度不算大。

但收获还是很多的。

比如将你的标志尽可能的放在每个页面上最突出的位置．突出你的标准色彩．总结一句能反映贵站精髓的宣传标语．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！这些都是经验收获，蛮开心！！
五、参考资料
百度知道
《dreamweaver 8技术精粹与特效实例》
7
9。