![Dreamweaver基础与实战教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/816/47548816/b_47548816.jpg)
1.4.2 “插入”面板
网页中的内容虽然多种多样,但是都可以被称为对象,简单的对象有文字、图像和表格等,复杂的对象包括导航条和程序等。
Dreamweaver CC 2018改进了“插入”面板,对可以插入到网页中的元素进行了重新分类,并提供了许多全新的网页元素,移除了许多不实用的网页元素。大部分对象都可以通过“插入”面板插入到页面中。“插入”面板如图1-16所示。
在“插入”面板中,在面板名称下方有一个下拉列表框,在下拉列表中可以选择需要在“插入”面板中显示的元素类别,如图1-17所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_19_2.jpg?sign=1738885996-ghxc2HoN4uzIZWVH2LEtXhpGfavvZ6uY-0-02b63f050f8185232233e4b82c22c8eb)
图1-16 “插入”面板
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_19_3.jpg?sign=1738885996-55FR8Qtf2iUuHg6s7e4YdYZssPITjtA0-0-e298898b7bee4fb4f4b607a4e7bb1d34)
图1-17 元素类别下拉列表
HTML:选择此选项后,“插入”面板中会显示网页中除表单元素外的几乎所有元素的插入按钮,并且分类排列。
第1部分是HTML页面中常用元素的插入按钮,包括Div、图像和项目列表等,如图1-18所示。
第2部分是HTML 5文档结构标签按钮,通过这些按钮可以在网页文件中光标所在位置插入相应的HTML 5文档结构标签,如图1-19所示。
第3部分是HTML文档头信息的相关按钮,通过这些按钮可以在HTML文档中插入关键字、说明等头信息内容,如图1-20所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_1.jpg?sign=1738885996-rgrcv67fWwqrsxBwE9Ulz00PWHT27glW-0-6ea54633d64cdb42caacf1cf3ed5b41f)
图1-18 HTML常用元素
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_2.jpg?sign=1738885996-TbSqS7ObtYwHPwZV01Ar11FLkFwKDNM8-0-b297c6895cb4622ddc90d831c932613e)
图1-19 HTML 5文档结构元素
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_3.jpg?sign=1738885996-HZp7Cm4mgGlckj0E26djSPk27taOZqTk-0-cc2152a71ea9201adc957174037c7bf2)
图1-20 HTML头信息元素
第4部分是HTML多媒体元素的插入按钮,包括视频、音频和Canvas等,如图1-21所示。
第5部分是HTML页面中的框架和特殊字符插入按钮,包括“IFRAME”“水平线”“日期”等,如图1-22所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_4.jpg?sign=1738885996-bmEegSgRKPXCNKlShb8vhEZiDBRMJmc2-0-f643f171e07581b794f2ae9e97d0dd62)
图1-21 HTML多媒体元素
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_5.jpg?sign=1738885996-p7pg1jKOfBQtVr0OxF0GZQ133YGWL220-0-5e5b17e869cf1127928924113adc76c4)
图1-22 HTML框架和特殊字符元素
表单:选择该选项后,“插入”面板中会显示HTML页面中所有表单元素的插入按钮,包括HTML 5新增的表单元素,如图1-23所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_6.jpg?sign=1738885996-OCxpimsVooJEF3haTANVJPNJgRhvYEvG-0-e6ae6f74ab6666cfd58e1775c069a0f7)
图1-23 HTML表单元素
模板:选择该选项后,“插入”面板中会显示Dreamweaver中各种模板对象的创建按钮,包括“创建模板”“可编辑区域”等,如图1-24所示。
Bootstrap组件:选择该选项后,“插入”面板中会显示用于开发响应迅速的CSS和HTML组件元素,包括按钮、表单、导航、图像旋转视图,以及可能在网页上使用的其他元素,如图1-25所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_7.jpg?sign=1738885996-cTc2UnQZzWpT69QGmv663Bkny8yJRdrG-0-2102612cb8714c469d6892d23b06fc82)
图1-24 模板元素
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_20_8.jpg?sign=1738885996-RhDn0gkJEtDtlgBUXTkEUf3OuHUHd1H5-0-cd112f7a68e8a180e13d7c74b71521fc)
图1-25 Bootstrap组件元素
jQuery Mobile:选择该选项后,“插入”面板中会显示一系列针对移动设备页面开发的按钮,包括“页面”“列表视图”“布局网格”等,如图1-26所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_21_1.jpg?sign=1738885996-YMWyj7mXfyZfKOJdgniMxmz0RDwmMygz-0-8d34024c56bc501d9f8a581ab2eb3cb4)
图1-26 jQuery Mobile元素
jQuery UI:选择该选项后,“插入”面板中会显示以jQuery为基础的开源JavaScript网页用户界面代码库,如图1-27所示。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_21_2.jpg?sign=1738885996-9l40HRuhTRzUV4KyxAZljKa3nZcSla4Z-0-55d3630cf47d03ce596eeaccad1a52a1)
图1-27 jQuery UI元素
收藏夹:选择该选项后,“插入”面板中会显示用于收藏用户自定义的HTML元素创建按钮,默认情况下该类别中没有对象,用户可以根据自己的使用习惯,将自己常用的HTML元素创建按钮添加到该类别中,如图1-28所示。
隐藏标签:选择该选项后,可以隐藏“插入”面板中各HTML元素按钮的标签提示,只显示插入按钮,如图1-29所示。当选择了“隐藏标签”选项后,该选项将变为“显示标签”选项,如图1-30所示。选择“显示标签”选项,将恢复默认的显示标签提示效果。
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_21_3.jpg?sign=1738885996-wl2zB5Kqu9hsxkoqe8Pjjbu50h2YqAYX-0-3af57ee3b70c78b9a70fb754bd615d3f)
图1-28 “收藏夹”类别
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_21_4.jpg?sign=1738885996-Kv9xr8Yyidp0rXmwt8Yak9Po3vgfwJ8M-0-4139cad92e58369ca2a06fbebd2d4b21)
图1-29 隐藏标签提示
![](https://epubservercos.yuewen.com/1AFB80/26947480604637406/epubprivate/OEBPS/Images/44465_21_5.jpg?sign=1738885996-WN6imv49ISuG3kDjMtaZsRh17ige4XxT-0-1f9a06eb657f35f69ea25440bd068e67)
图1-30 选择“显示标签”选项
提示
每一个对象都是一段HTML代码,允许用户在插入对象时设置不同的属性。例如,用户可以在“插入”面板中单击Div按钮,插入一个Div。当然,也可以不使用“插入”面板,选择“插入”菜单中的命令来插入页面元素。