dreamweaver 怎么在网页中使用div展示图片效果?
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
在网页制作过程中，图片的布局直接影响到网页的整体效果，那么如何使图片布局整齐划一呢？其实使用div就可以做到，现在就自己制作的过程跟大家交流一下，同时分享制作的步骤和截图，希望对你有所帮助。
1、启动dreamweaver cs5，执行文件-新建命令，在弹出的新建文档对话框选择html文件，点击创建按钮。
2、在标签<title>无标题文档</title>中修改名称为<title>div布局图片效果</title>。
3、在<title>标签下方输入<style>相关的代码，定义网页的整体样式，样式直接影响着网页的美观程度。
4、接着在<body>中输入div标签三个，并分别设置他们所属于的类，最外边的div设置类为db，中间两个分别为zpxc1和zpxc，在下方就会看到基本的框架效果。
5、外部的框架设计好之后，接着设计使用div布局图片，书写相应的代码，设置div的尺寸大小和相关属性，同时设计图片的相关属性。
代码为：
div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}
div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}
.pic{ float:right;}
6、在类为zpxc1的div中建立新的四个div，并设置img的 src属性值，对图片进行正确的链接。
7、按f12进行在浏览器中进行预览效果，出现提醒信息“是否将改动保存到”，直接点击是，找一个合适的位置进行保存。
8、接着在类为zpxc的div中输入“作品展示”四个字，再次才看效果，如果不合适可进行再次修改。
9、如果图片过多，可以修改类zpxc1和db的高度，反复修改直至合适为止，重复步骤6、7采用同样的方法建立多个图片div。
10、如果对“作品展示”四个字不满意的话，可以使用图片进行替换，达到满意为止，再次按f12进行在浏览器中进行查看效果，
11、执行文件-另存为命令，在弹出的对话框中输入名称为“div布局图片”，找到一个合适的位置进行保存即可。
相关推荐：
dreamweaver cs5怎么给网页制作图片的挤压效果?
相关文章
dreamweaver cs5怎么给网页制作图片的挤压效果?
dreamweaver cs5怎么给网页制作图片的挤压效果？想使用dw给网页制作图片显示出来是挤压效果的样式，该怎么设计呢？下面我们就来看看详细的教程，需要的朋友可以参考下2016-10-24- 我们上网的时候可以看到很多精美的网页,这些网页都是网页制作者精心设计出来的，那么在dreamweaver中如何插入图片呢?下面小编就为大家介绍一下，来看看吧2016-10-14
- 我们经常使用Dreamweaver设计网页，今天我们就来看看比较基础的关于Dreamweaver主体的细分技巧，很简单的知识，需要的朋友可以参考下2016-09-05
- 怎么使用Dreamweaver给网站图片添加alt标签？需要给图片添加标签，该怎么办呢？今天我们就来看看Dreamweaver中给图片添加alt标签的详细教程，需要的朋友可以参考下2016-08-29
- Dreamweaver怎么显示地步的属性栏？Dreamweaver编辑网页的时候，经常会在底部的工具栏中进行一些操作，下面我们就来看看详细的教程，需要的朋友可以参考下2016-08-28
- Dreamweaver网页版权符号怎么制作？我们看到很多我那个站都会带有版权富豪，自己使用Dreamweaver设置网站的时候，该怎么添加网页版权符号呢？下面我们就来看看详细的教程，2016-08-28
- Dreamweaver制作网页的时候怎么定义主体div？使用Dreamweaver制作网页的时候，必然会使用div，今天我们就来看看一些基础教程，需要的朋友可以参考下2016-08-17
- Dreamweaver中vm文件怎么设置高亮显示？Dreamweaver中有很多vm的扩展文件，该怎么将这些文件设置成高亮呢？下面我们就来看看详细的教程，需要的朋友可以参考下2016-08-11
Dreamweaver建立的站点怎么更改图像的默认文件夹位置?
Dreamweaver建立的站点怎么更改图像的默认文件夹位置？Dreamweaver中为了让素材更好管理，各种素材都会建立文件夹，下面我们就来看看更改站点图形默认文件夹的教程，需要的2016-08-10- 这篇教程主要是向程序员之家的朋友分享Dreamweaver在网页中怎么添加图片方法，教程比较基础，适合新手来学习，推荐过来，一起来学习吧2016-08-09
最新评论