静态网页制作报告

目录一、制作题目.................................................................................................................1二、制作过程............................................................................................................................1（一）建立布局................................................................................................................1（二）网页中相关插入....................................................................................................1（三）设置导航条............................................................................................................2（四）设置交换图像........................................................................................................3（五）文字背景图像设置................................................................................................3（六）制作弹出信息效果................................................................................................3（七）设置滚动图片和文字............................................................................................4（八）表单的制作............................................................................................................4（九）链接........................................................................................................................5（十）制作flash图像查看器..........................................................................................5三、制作代码.................................................................................................................4（一）重要文字代码........................................................................................................5（二）滚动图片代码........................................................................................................5四、心得体会.............................................................................................................6五、参考资料.............................................................................................................7六、教师评语…………………………………………………………………………………..81一、制作题目永不老去的青春二、制作过程（一）建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格和绘制层的帮助，很难组织出一个协调合理的页面。1.在Dreamweaver8“插入”工具栏中单击“布局”进入布局模式，再切到“绘制层”绘制大概的布局再结合布局表格，从而建立一个大概的布局。2.使用背景颜色：选中该项，按浏览可以插入准备需要的背景颜色作为表格的背景颜色（二）网页中相关插入图像传输是的真正魅力所在，它与文字相比具有显著的优点：一直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。（1）在网页中插入图像利用Dreamweaver8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。1.在网页需要的地方把光标定位在此位置。2.在“常用”栏中选择“图像”点击则打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。23.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置，这选中所插入的图片，单击它，则可以在下面的“属性”面板中对图片的高、宽等进行需要的设置，从而来达到自己的需要的尺寸。（2）在网页中插入flash1.在网页需要的地方把光标定位在此位置。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个字体黄色色，此时就为做3导航条打下基础了，下面进行设置导航条：1.在网页需要的地方把光标定位在此位置。2.在“常用”栏中选择“图像”切换到“导航条”单击则弹出相关对话框在“状态图像”浏览中去找上做的蓝色字体的的图像，再在“鼠标经过图像”浏览中找黄色字体图像来完成图像转换，同样在此框中添加剩下的最后确定则完成。（四）设置交换图像1.将已插好的图像选中，并在“属性”面板中对它命名，2.在窗口中去勾选“行为”，再在“行为”面板中单击“+”选择“交换图像”弹出相应的对话框再去选择其他与本图不一样的图片，确定则完成。（五）文字背景图像设置1.选中网页里的文字，在窗口中打开“css样式”。2.在“css样式”面板中单击“+”则弹出对话框，选择“类”并以点开头取英文名。3.选择需要的图片作为文字背景图确定。4.在“css规则定义”的类别选“背景”并可以进行需要的设置后确定。5.在网页的“属性”面板的“类”选刚取的名即图片被用到该文字中。（六）制作弹出信息效果1.在标签选择器中单击“boby”则选定了整个网页。2.在窗口中去勾选“行为”，再在“行为”面板中单击“+”选择“弹出信息”则打开其对话框在里键入你要显示的信息，确定后并在“行为”面板中把事件设置为“onload”则完成了。4（七）设置滚动图片和文字1.选择图片或文字，点开“代码”视图。2.在以选中的文字或图片的地址开头前输入marquee，再选中的在以选中的文字或图片的地址后输入/marquee，中间部分则需要输入相应的代码则可达到效果。（八）表单的制作（1）制作文本域1.将“插”入栏切换到“表单”插入栏，单击“文本字段”，2.在光标所在的位置插入文本域，在“属性“面板中进行相应的需要设置，同时那里面包含三种类型的设置“单行”、“多行”、“密码”设置。三种分别用于网页中。、（2）制作单选按钮1.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位子显示出来。2.在“属性”面板中对它进行相应的设置就完成。（3）制作复选框1.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位显示出来。2.在“属性”面板中对它进行相应的设置就完成（4）制作菜单1.在“表单”插入栏中选择“列表/菜单”按钮则它就在光标的位显示出来。2.在“属性”面板中的类型选择“菜单”，并在“列表值”键入你需要的文字，则完成了该制作。（5）制作普通按钮1.在“表单”插入栏中选择“按钮”按钮则它就在光标的位子显示出来。2.在“属性”面板中对它进行相应的设置就完成。（6）制作跳转菜单1.将光标定在要插入的菜单位置，在“表单”插入栏中选择“跳菜单”按钮，则弹出其对话框。2.在“文本”和“浏览”输入相应的文本和网址即完成了该制作。本网页在“公司首页”里设了“百度”和“谷歌”跳转菜单。5（九）链接（1）文字链接1.选中需要链接的文字。2.在“属性”面板中的链接去选择需要链接的文件里的网页或输入需要外部衔接的网址则可。（2）图片热点链接1.选中图片，在“属性”面板中选择你需要的形状的图像热点工具按钮并单击它，当光标变成“十“字形时则对它拖延。2.再在“属性”面板中“链接”选择需要链接的文件里的网页或输入需要外部衔接的网址。（3）转到URL1.这里主要是用在每张网页的导航条上的去链接每张网页。2.首先选择导航条的图片，在“行为”里添加“转到URL”，后在“浏览”中选择需要链接的网页“确定”，再在“行为”面板中将事件设为“onmouseover”，则完成。→（十）制作flash图像查看器1.在“那年我们还年轻”里的相关位置把光标定位，再在“flash元素”插入面板中单击“图像查看器按钮”，此时弹出对话框将它保存在我的文件“image”中，并命名为“img”，在“属性”中修该它的大小。2.在“flash元素”面板中“frameshow”后选“是”，“imageURLs”打开编辑它进行图片添加此添加照片张，在“slidedelay”后输入“2”，再“slideloop”选择“是”，在“tr