![Dreamweaver实例教程(Dreamweaver 2020):电子活页微课版](https://wfqqreader-1252317822.image.myqcloud.com/cover/560/48356560/b_48356560.jpg)
1.1 Dreamweaver 2020的工作界面
Dreamweaver 2020的工作界面将多个文档集中到一个窗口中,不仅减少对系统资源的占用,还可以使用户更方便地操作文档。Dreamweaver 2020的工作界面简洁易用,可大大提高网页的设计及制作效率。
1.1.1 友好的开始界面
启动Dreamweaver 2020,首先看到的是开始界面,用户可在此界面中选择新建文件的类型或打开已有的文档等,如图1-1所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-013-1.jpg?sign=1739402718-KERJlvAZhL3yEzJclz15gFB7nIvwxODT-0-f56104825adc501d1a2dc40ba406b89c)
图1-1
如果不太习惯开始界面,可选择“编辑>首选项”命令,或按Ctrl+U组合键,弹出“首选项”对话框,取消选中“显示开始屏幕”复选框,如图1-2所示。单击“应用”按钮,然后单击“关闭”按钮。这样打开Dreamweaver 2020时将不再显示开始界面。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-013-2.jpg?sign=1739402718-5bZlorseldUmw157fWcMiZhj2q8kFGsq-0-d16281a70dd09d65a12568887ae2e4e3)
图1-2
1.1.2 不同风格的工作界面
Dreamweaver 2020的工作界面相比老版本的有一些改变。若用户想修改工作界面的风格,切换到自己熟悉的开发环境,可选择“窗口>工作区布局”命令,弹出其子菜单,如图1-3所示,在子菜单中选择“开发人员”或“标准”命令,即选择其中一种风格,工作界面会发生相应的改变。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-014-1.jpg?sign=1739402718-AA8CMxS01hmTjA4oK1IM8anpHKR7OvNd-0-d0e18d7da032de9737f3ec2e2adf4eee)
图1-3
1.1.3 伸缩自如的面板
在浮动面板的右上方单击按钮,如图1-4所示,可以隐藏或展开面板。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-014-3.jpg?sign=1739402718-agSnn1FvEO55wpYwLQReSiJ2BUg8MidK-0-168810e9f3ce7d618af12ed6986751ac)
图1-4
如果用户觉得工作区不够大,可以将鼠标指针放在文档编辑窗口右侧与面板的交界处,当鼠标指针呈双向箭头时按住鼠标左键并拖曳,调整工作区的大小,如图1-5所示。若用户需要更大的工作区,可以将面板隐藏。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-014-4.jpg?sign=1739402718-OqIw53zfj5d2gzXxSHuykR7Y4zHyb2Az-0-93160011af00d44e250ad4b2751006e4)
图1-5
1.1.4 多文档编辑界面
Dreamweaver 2020提供了多文档的编辑界面,将多个文档整合在一起,方便用户在各个文档之间切换,如图1-6所示。单击文档编辑窗口上方的标签,即可快速切换到相应的文档,方便同时编辑多个文档。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-015-1.jpg?sign=1739402718-Mrb12p8Y905jxIk3wq655wY5eJ6nT1DY-0-aca204908e7aa5a88ca8451f5ee8b91c)
图1-6
1.1.5 新颖的“插入”面板
Dreamweaver 2020的“插入”面板可以与其他面板组合。为了方便操作,一般会将它放置在菜单栏的下方,如图1-7所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-015-2.jpg?sign=1739402718-y33dXkTmAtL6Wxa6rigqkagPN0n8MxRQ-0-01db414f1a994d41948a5135a187647a)
图1-7
“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQuery Mobile”“jQuery UI”“收藏夹”7个标签,具有不同功能的按钮分门别类地放在不同标签对应的选项卡中。在Dreamweaver 2020中,“插入”面板可用菜单和标签2种样式显示。如果需要以菜单样式显示,可在“插入”面板上单击鼠标右键,在弹出的快捷菜单中选择“显示为菜单”命令,如图1-8所示,更改后的效果如图1-9所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-015-3.jpg?sign=1739402718-I3qEiQuNK0CBOjeTuOOkhilA3Ae0mFZb-0-28552000c661a2805dadbd17760aa8a6)
图1-8
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-015-4.jpg?sign=1739402718-ZUVe84PjLMOikx4yq0UXGsEyXqsnpQtu-0-fb7ca8402b4b4a4d70e72c4b9ff792ef)
图1-9
如果需要以标签样式显示,可单击“HTML”右侧的下拉按钮,在下拉列表中选择“显示为制表符”选项,如图1-10所示,更改后的效果如图1-7所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-015-5.jpg?sign=1739402718-aLOgFtIZW65EqcSpXM6vlJxmedTj1HUp-0-287bf3d721183f6658001f6f7961d3f4)
图1-10
“插入”面板将一些功能相似的按钮组合在一起,当某个按钮右侧有黑色箭头时,表示其为展开式按钮,如图1-11所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-016-2.jpg?sign=1739402718-V2LryktYDyA8sv6tuLM8bAtEHqdApR3k-0-b95d41047c71cb0aba771d0e4308e9a3)
图1-11
1.1.6 更完整的CSS功能
传统的HTML所提供的样式及排版功能非常有限,因此,复杂的网页版面主要依靠CSS样式实现。而CSS的功能较多,语法比较复杂,需要有一个很好的工具来有条不紊地整理复杂的CSS源代码,并适时地提供辅助说明。Dreamweaver 2020就提供了这样的功能。
Dreamweaver 2020中的“属性”面板提供了CSS功能。用户可以通过“属性”面板对所选的对象应用、创建和编辑样式,如图1-12所示。若某些文字应用了自定义样式,当用户调整这些文字的属性时,会自动生成新的CSS样式。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-016-3.jpg?sign=1739402718-emYHk8vKQNeEXOo0tpoVjbQ1nllSgObV-0-41f74a34cf44dd4952b7b32effca4d92)
图1-12
通过“页面属性”按钮,也可以使用CSS功能。单击“页面属性”按钮,弹出“页面属性”对话框,如图1-13所示。用户可以选择“分类”列表中的“链接(CSS)”选项,在“下划线样式”下拉列表中选择超链接的样式,这个设置会自动转化成CSS样式,如图1-14所示。
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-016-4.jpg?sign=1739402718-xAnQKuIdN1YM3EtBRFhBBsW7hiuRiqF6-0-db6204f21a66d8a0428450fc4882260b)
图1-13
![](https://epubservercos.yuewen.com/48844B/27923208707354106/epubprivate/OEBPS/Images/61869-00-016-5.jpg?sign=1739402718-kwwx0yTlJ7u4hKEXm3RqtCNJBiGm9yx2-0-55079587092573e22138fbe98227475e)
图1-14