一个网站是由网站前端与后台整合制作而成，在互联网高度发达的今天，我们对网站的要求越来越高，这个要求不仅仅是功能上的，其中视觉效果也很重要，制作一个高大上的网站平台离不开图像。网站制作公司博纳网络在前面的文章中分享了关于网页图片编辑方面的经验，今天我们继续接前面文章未完部分分享我们网页设计师的实际操作案例“如何在网页中插入图像”。
网站制作时在有了丰富的图像素材，就可以利用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所示。
第3步，在第1个单元格中插入一个8行1列的表格，设置宽度为100%，同时设置边框粗细、单元格间距和单元格边距都为0的表格，对话框设置如图5.21所示。
第4步，在表格中按顺序从上到下分别插入圆角图案（border1.gif）、6个按钮（about.jpg、services.jpg、gallery.jpg、freebies.jpg、portfolio.jpg、contact.jpg）和圆角图案（border2.gif），插入效果如图5.22所示。
插入第2个表格效果图5.22 插入图像后的效果第5步，以同样的方式在右边单元格中插入一个3行3列的表格，设置表格宽度为98%，并在【属性】面板中设置居中显示。第6步，在4个顶角的单元格中插入圆角修饰图案，并设置单元格宽、高为图案大小，如图5.23所示。
插入表格和圆角图案后的效果第7步，设置没有插入圆角图案的单元格背景颜色为图案的颜色，即保持表格背景颜色的一致性，最后效果如图5.24所示
。关于在网页制作中插入图像的实际操作案例我们今天就分享到这里，明天深圳网页制作公司会继续介绍网页设计制作方面的经验。博纳网络编辑整理。
在网页中插入图像的效果该页面由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所示。第3步，在第1个单元格中插入一个8行1列的表格，设置宽度为100%，同时设置边框粗细、单元格间距和单元格边距都为0的表格，对话框设置如图5.21所示。第4步，在表格中按顺序从上到下分别插入圆角图案（border1.gif）、6个按钮（about.jpg、services.jpg、gallery.jpg、freebies.jpg、portfolio.jpg、contact.jpg）和圆角图案（border2.gif），插入效果如图5.22所示。 插入第2个表格效果图5.22 插入图像后的效果第5步，以同样的方式在右边单元格中插入一个3行3列的表格，设置表格宽度为98%，并在【属性】面板中设置居中显示。第6步，在4个顶角的单元格中插入圆角修饰图案，并设置单元格宽、高为图案大小，如图5.23所示。插入表格和圆角图案后的效果第7步，设置没有插入圆角图案的单元格背景颜色为图案的颜色，即保持表格背景颜色的一致性，最后效果如图5.24所示。关于在网页制作中插入图像的实际操作案例我们今天就分享到这里，明天深圳网页制作公司会继续介绍网页设计制作方面的经验。博纳网络编辑整理。当前文章链接：/construction/jzhyzx/1381.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
