多语言展示
当前在线:1693今日阅读:165今日分享:48

怎样制作精美网页背景【dreamweaver教程】

你是不是已经厌烦了单调的网页背景,现在我们就来自己亲手设计一个网页背景。效果如如下,这个图是缩小30%后的效果。这个背景不是直接填充的图片,因此网站的速度不会受到影响。
工具/原料
1

photoshop

2

dreamweaver

步骤/方法
1

我么从网上下载一个简单的背景图,这个图片很小无法做网页背景,我们需要在这个基础之上再设计。

2

用photoshop打开这个图,然后在图层上右键单击,选择复制图层。这个文件我们会反复用到,所以我们新建一个别的文件来进行操作。

3

选择图像——图像大小。查看这张图的大小。记下宽度和高度分别为232和310像素。

4

接着我们按快捷键ctrl+n新建一个文件。命名为纵轴,宽度和高度分别为232和310。

5

接着我们回到第一个图片文件,拖住刚刚复制的图层,拖到刚刚建立的图片“纵轴”。

6

调整一下图层的位置使得图层和画布重合。然后点击图像——画布大小。

7

在弹出的对话框中我们选择宽度为5,高度为310,然后定位选择如图的位置。点击确定即可。然后我们这个图片就算做完了。

8

按快捷键ctrl+s储存这个图片,名称为纵轴,格式为jpg。

9

以上面同样的方法,重复步骤4-8,这个文件的大小和格式分别为宽232,高5,定位如图。

10

储存这个文件为横轴,格式jpg。

11

重复步骤4-8,我们再建立一个5x5的图,这个图定位为右上角,另存名称为方框。

12

我们打开dreamweaver,新建一个页面,然后点击布局,选择布局表格,画一个表格,然后设置高度为900x900。这个表格的名字为表格1,这是页面的主体部分。

13

在表格1内部的左下角我们再画一个表格,表格尺寸为232x310。下图中参数有误,应当是高310,你自己设置即可。这个表格名字是表格2.

14

接着在表格2的右边画一个表格3,表格3的尺寸为668x310.

15

在表格2的上方画表格4,表格4的尺寸为232x590.

16

在表格4的右边画表格5,尺寸为668x690.

17

选择标准按钮,接着光标放到表格2,然后点击背景右边的浏览。

18

选择我们一开始下载的那个图。

19

同样的方法,用我们刚才新建的图片“纵轴”填充一下表格3.

20

用图片“横轴”填充一下表格4.

21

用新建的图“方框”填充表格5.

22

最后按快捷键F12我们在浏览器中预览背景图。下图为缩放30%以后的背景。你学会了吗。

注意事项

不要用一张大图直接填充背景,这样会大大降低网站速度。以上面的方法建立的背景所占空间非常小。

推荐信息