div展示图片的5种方法

打开Dreamweaver CS5，选择文件菜单中的新建命令，在弹出的对话框中选取HTML文件类型，单击创建按钮后即可进入主操作界面。

1、 将网页标题从无标题文档更改为div布局图片效果，以准确反映页面内容与设计主题。

2、 在标题标签下方添加样式代码，用于设置页面整体外观，良好的样式设计能显著提升网页视觉效果和用户体验。

3、 在中添加三个div标签，分别为其设置类名：最外层的div类名为db，内部两个div类名依次为zpxc1和zpxc，保存后页面下方即可呈现初步布局结构。

4、 完成外部框架设计后，采用div布局来安排图片，编写对应代码，设定div的尺寸与属性，并配置图片的相关样式参数。

5、 代码如下：

6、 在类名为zpxc1的div中创建四个新div，分别为其中的img标签设置正确的src属性，实现图片有效链接。

7、 按下F12在浏览器中预览，弹出是否保存更改提示时点击是，然后选择合适位置保存文件即可。

8、 在class为zpxc的div中输入作品展示，查看效果，若不满意可继续调整修改。

9、 若图片数量较多，可调整类zpxc1和db的高度，多次调试至合适为止。参照步骤6、7，用相同方式创建多个图片div，并反复测试网页显示效果，持续优化调整。

10、 若对作品展示文字效果不满意，可替换为图片直至满意，随后按F12在浏览器中预览实际呈现效果。

11、 选择文件菜单中的另存为，在对话框中输入div布局图片作为名称，并选择合适路径保存即可。