一个实例教程对DW插入图像/图像占位符和交互式图像

如何插入图片,图像占位符,在Dreamweaver的交互式图像

1。当您第一次插入图像时,我们需要构建一个站点作为基本需求。


2,网站的名称是今天的思想;


3,然后将插入面板设置为常用选项。


4、点击图像按钮,将图像插入网页。


5,选择一个图片作为所需的图片插入图像


6、点击确定按钮即可插入。


7。在插入图像之后,在代码部分,我们可以看到代码选项的新部分。


8。在这里,我们可以调整它为设计的界面,在那里我们可以看到我们插入的图像。


9,然后我们将浏览选项中的网页,这是直接针对f12或在这里我们点击浏览器上的小图标的工具;一个小地球;在网页中,我们还可以看到一张我们插入。


10,然后我们进行占位符插入;点击插入面板;常用标签下的图像按钮菜单;图像占位符按钮。


11,在下图中弹出一个类似占位符的对话框


12。在这里,我们设置红色,名称设置为ASD,然后单击OK。


13。此外,插入后,我们可以看到代码的一部分是它的一部分。


14。在这里,我们直接进入浏览器浏览,我们可以看到我们插入的占位符。


15、插入互动图像;互动图像是将鼠标移动到图片,这里的图片将成为另一幅图片);在这里,我们首先需要准备两幅图像,按需插入图像,点击鼠标越过图像;


16。我们在这里的命令框中可以看到有两张图片可供选择。


17,首先我们选择第一张图片原始图片;当鼠标不在图片中时,我们在下一张图片中显示一种风格。


18,下一个选择是另一个图像,鼠标移动到原来的图标,我们需要改变这里。


19。如下图所示,我们的原始图像和鼠标通过图像被选中并单击以确定。


20,跳转到我们的代码位置。在这里,我们可以看到代码生成部分。这里生成了许多代码,这也是我们函数所必需的。


21,然后保存,并按F12进入网站查看。起初,当鼠标不在图像中时,我们是一个图片样式。


22,当鼠标移动到图片时,这里我们是另一种类型的图标。


相关建议:

Dreamweaver代码提示功能是如何打开的

Dreamweaver项目列表前面的项目符号删除小圆点。

DW模板是如何制作Dreamweaver网页模板的详细教程的