网站制作前端怎样在网页中插入图像经验（二）

当前位置：

发布时间：2018-09-18

文章编辑：网站建设文章来源：建站行业资讯浏览量：次

一个网站是由网站前端与后台整合制作而成，在互联网高度发达的今天，我们对网站的要求越来越高，这个要求不仅仅是功能上的，其中视觉效果也很重要，制作一个高大上的网站平台离不开图像。网站制作公司博纳网络在前面的文章中分享了关于网页图片编辑方面的经验，今天我们继续接前面文章未完部分分享我们网页设计师的实际操作案例“如何在网页中插入图像”。

网站制作时在有了丰富的图像素材，就可以利用Dreamweaver把这些图像组织在一起，设计出具有一定审美效果的网页页面。下面设计一个简单的网页演示在网页中如何插入图像的一般方法。本网页的效果如图所示。网页制作图像插入实例图

　在网页中插入图像的效果该页面由LOGO图标、Banner广告条、按钮、背景和修饰图案组成，制作并整理的图像素材如图所示。网页制作图像插入实例图

　本页所需要的图像素材5.2.1　插入背景和标题头面对图5.12所列图像素材，如何把它们有机地组织在一起，在具体上机之前用户应心中有数，最好在纸上随意打个草稿，避免盲目操作。本页布局简明，结构也不是太复杂，但对于初学网页设计来说仍然会存在不小的困难，下面就逐步介绍。
【操作步骤】
第1步，启动Dreamweaver，新建一个网页文件，保存为main.html。
提示：把上面制作的所有图像素材都汇集到images文件夹中，并保证该文件夹和main.html文件同处在一个目录下。
第2步，在Dreamweaver文档编辑窗口中，单击窗口底部的【属性】面板中的【页面属性】按钮，如图5.13所示。如果没有显示【属性】面板，可以选择【窗口】|【属性】命令。

单击【页面属性】按钮
第3步，打开【页面属性】对话框，在【分类】列表框中选择【常规】选项，然后在右侧设置区域设置网页的背景图像，如图所示

。
第4步，设置完毕，单击【确定】按钮关闭【页面属性】对话框，则编辑窗口如图5.15所示。网页制作图像插入实例图

　设置背景图像的网页效果
第5步，在编辑窗口中插入一个表格。选择【插入】|【表格】命令，打开【表格】对话框，设置：1行2列，宽度800像素，边框、单元格边距和单元格间距都为0，如图5.16所示。

网页制作图像插入实例图
网页制作图像插入实例第6步，插入表格之后，在【属性】面板中设置表格居中显示，如图5.17所示。

网页制作图像插入实例图，插入表格并使其居中显示。
第7步，把光标置于插入表格的第1个单元格中，在【属性】面板中设置第1个单元格宽为200像素，如图5.18所示。

设置单元格宽度效果
网页制作图像插入实例第8步，选择【插入】|【图像】|【图像】命令，在打开的【选择图像源文件】对话框中选择要插入的LOGO图标。然后，把光标置于第2个单元格中，以同样的方法插入Banner广告条，并设置该图像在单元格中居中显示，如图5.19所示。

　插入LOGO和Banner效果插入按钮和修饰图案前面博纳网络所分享文章中讲到的一样完成了网页页面的标题设计，本节利用表格插入导航按钮和制作圆角的修饰图案。【操作步骤】第1步，把光标置于第1个表格的后面，选择【插入】|【表格】命令，插入一个表格，设置：1行2列，宽度800像素，边框粗细、单元格间距和单元格边距都为0，【表格】对话框设置相同。第2步，插入表格之后，在【属性】面板中设置表格居中显示，同时设置第1个表格也居中显示，并设置第2个表格的第1个单元格宽度为100，效果如图5.20所示。