静态网页制作报告.docx

静态网页制作报告.docx

《静态网页制作报告.docx》由会员分享，可在线阅读，更多相关《静态网页制作报告.docx（13页珍藏版）》请在冰点文库上搜索。

静态网页制作报告

一、制作题目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.在“css规则定义”的类别选“背景”并可以进行需要的设置后确定。

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

（六）制作弹出信息效果

1.在标签选择器中单击“boby”则选定了整个网页。

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

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

1.选择图片或文字，点开“代码”视图。

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

（八）表单的制作

（1）制作文本域

1.将“插”入栏切换到“表单”插入栏，单击“文本字段”，

2.在光标所在的位置插入文本域，在“属性“面板中进行相应的需要设置，同时那里面包含三种类型的设置“单行”、“多行”、“密码”设置。

三种分别用于网页中。

、

（2）制作单选按钮

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

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

（3）制作复选框

1.在“表单”插入栏中选择“单选按钮”按钮则它就在光标的位

显示出来。

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

（4）制作菜单

1.在“表单”插入栏中选择“列表/菜单”按钮则它就在光标的位

显示出来。

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

（5）制作普通按钮

1.在“表单”插入栏中选择“按钮”按钮则它就在光标的位子显示

出来。

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

（6）制作跳转菜单

1.将光标定在要插入的菜单位置，在“表单”插入栏中选择“跳

菜单”按钮，则弹出其对话框。

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

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

（九）链接

（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”，最后保存达到其效果。

三、制作代码

（一）重要文字代码：

每个人心中都有个未知的幸福就像海一样美丽