网页制作个人简介

网站页面布局实训实验报

=

首页的创建

1：站点的建立

Dreamwer 8 管理站点新建一个站点，站点保存在你新建的文件夹中（文件夹的名称是：学号+姓名）

2：导航栏的建立

①打开桌面上的filework软件，点击新建，创建一个大小宽为778像素；高为

任意像素；分辨率为72像素\英寸的画布。

②在矢量栏中选择“矩形”工具，勾画出一个大小适中的小画布。

③按住Ctrl+F8会弹出一个对话框，在对话框中选取按钮按Enter键即可。在使

用“矩形”工具画出相应大小的矩形框，调制自己喜欢的颜色或者在资源库中选择喜欢的样式。再点击文本工具在画布上面写上“首页”字样，点击元件对话框从中选择‘滑过’按钮，点击右下角的‘复制弹起时图形’，调整一下字体的颜色，不然在浏览时无法产生效果。之后一次按照上面的步骤分别点击“元件”中的‘按下’‘按下时滑过’按钮，在按下时会在左上角出现一栏‘包括导航栏按下状态’将前面的勾不勾中。后面就不做要求，最后点击完成即可。

④将已做好的按钮拖动到原先的画布中按照平均空隙合理安排按钮。

⑤点击左上方的文件按钮选择导出，将文件导入适应的文件夹中即可。

3：制作动态图片

①打开FLASH软件创建一个新的FLASH文档。在时间轴上添加相应的帧，例如：

在时间轴上添加四个空白帧分别在10 20 30 的点上右击分别插入一个空白

帧（如图所示）

②选中第一个帧在左上角的文件中点击导入→导入到舞台，选择一张自己喜欢

的图片导入其中，点击已导入的图片在属性栏中调整图片的大小将图片设置

一下属性

之后在按照上面的将后面的几个空白帧设置属性并且调整照片，最后一个插入一个关键帧即可。

③点击控制栏→测试影片，看看动态影像有没有瑕疵。最后点击文件→导出→

导出影片，将影片保存在相应的文件夹中。

4：插入首页

①在站点中新建一个利用布

局模式建立一个两行一列的表格在属性栏中设置属性

②转入常用模式中点击在下拉菜单中选择Fireworkes html插入你事先做

好的导航栏HTML文件。

③在下面一个表格中插入flash动态图片点击将已做好的图片插入即可。5：制作首页浮动窗口

①选择布局模式利用绘制层在首页的空白处勾画出一个大小适中的框框。

②在框内输入你的信息可以插入一张图片，图片大小应小于勾画框框的大小。

③在窗口中点出时间轴，按住框框将其拖入时间轴内

选中右击→录制层路径，绘画你所需要的路径即

可。要选中其中的最后点击在浏览器中阅览即可看到

整体的效果了。

表单制作资料页

1：在站点中重新建立一个HTML基本页，布局模式中的布局→布局表格勾画一个大表框，再使用绘制布局单元格将其分割成大小适合的单元格。

2：调整为表单模式选中一个单元格点击插入表单，在表单中输入属于你自己的个人信息（例如下图）

在

中选择相应格式并给予其

初始值。

3：利用Firework制作一张标有“个人资料”字样的图片插入在表格的顶端，大小自定义，在另外的一个表格中插入自己的照片这样你的资料页就做好了。4：后面的两个网页可以参考上面的步骤来进行，你可以自由发挥的。保存你做好的每个HTML文档。

5:利用firework来做这张图片,利用文本工具来在图片上面添加字体

6:创建一个网络相册点击命令,创建网站相册

创建相册之前得保证文件夹是空的,将源图像文件夹和表文件夹都设置在你的新建文档中

这样既可.

链接已做好的网页

1:利用Dreamweaver 8打开你所做好的所有做好的HTML文档。

2：点击位于首页的那个HTML文档同时选中导航栏中的标题，你会看到有个属性栏，将属性栏中的中的按钮按住不放并且

指向你所对应的HTML文档回车即可，上面的每个标题都以此来完成。

3：点击在浏览器中阅览即可看到整体的效果并且所有的导航栏都有自己的链接可以点进入下一个网页。

完成你以上的步骤你即可做好属于自己的网页了

注：1.请首先规划好网站目录及相关页面文件名，如文件夹“images”用来存放网页中用到的图片，文件”index.html”为网站首页。

2.所有页面的宽度为“778PX”，页面默认字体大小为“12PX”。

3. 页面中没要求具体链接的地方，直接链接到空地址，即“#”。

4. 导航栏中分别链接到要求制作的四个页面上。