网页设计与前端开发实用教程(Dreamweaver+CSS+Photoshop+JavaScript+HTML)
上QQ阅读APP看书,第一时间看更新

1.1 Dreamweaver CC工作界面

Dreamweaver CC的工作界面主要由菜单栏、文档窗口、“属性”面板以及多个浮动面板组成,如图1-1所示。

图1-1 Dreamweaver CC的工作界面

●菜单栏:菜单栏由各种菜单构成。

●文档窗口:文档窗口中的内容与浏览器中的画面内容相同,是进行实际操作的窗口。

●“属性”面板:用于设置文档窗口内元素的属性。

●浮动面板:其他的面板可以统称为浮动面板,这主要是根据面板的特征进行命名的,因为这些面板都是浮动于文档窗口之外的。

1.1.1 菜单栏

菜单栏包括“文件”“编辑”“查看”“插入”“工具”“查找”“站点”“窗口”“帮助”共9个菜单,如图1-2所示。

图1-2 菜单栏

●“文件”菜单:用来管理文件,包括创建和保存文件、导入与导出文件、浏览和打印文件等。

●“编辑”菜单:用来编辑文本,包括撤销与恢复、复制与粘贴、参数设置和快捷键设置等。

●“查看”菜单:用来查看对象,包括代码、拆分、查看模式、切换视图、实时代码、检查、刷新设计视图和相关文件等。

●“插入”菜单:用来插入网页元素,包括图像、表格、模板、表单、标题和HTML等。

●“工具”菜单:用来修改页面元素,包括清除页面HTML/Word HTML、CSS样式、快速标签编辑器、检查拼写、库和模板等。

●“查找”菜单:用来对文本进行操作,包括在当前文档中查找和替换、在文件中查找和替换、查找下一个、查找所选等。

●“站点”菜单:用来创建与管理站点,包括新建站点、管理站点、上传与存回和查看链接等。

●“窗口”菜单:用来打开和切换所有的面板和窗口,包括插入栏、“属性”面板、站点窗口和“CSS”面板等。

●“帮助”菜单:内含Dreamweaver教程、快速教程、Dreamweaver帮助、登录和更新等。

1.1.2 文档窗口

文档窗口主要用于文档的编辑,可同时打开多个文档进行编辑,可以在“代码”视图、“拆分”视图和“设计”视图中分别查看文档,如图1-3所示。

●“代码”视图:显示HTML源代码视图。

●“拆分”视图:同时显示HTML源代码视图和“设计”视图。

●“设计”视图:包含“实时”视图和“设计”视图,系统默认设置为“设计”视图。

图1-3 文档窗口

1.1.3 “属性”面板

“属性”面板主要用于查看和更改所选对象的各种属性,每种对象都具有不同的属性。在“属性”面板中有两种选项,一种是“HTML”选项,该选项将默认显示文本的格式、样式和对齐方式等属性;另一种是“CSS”选项,单击“属性”面板中的“CSS”选项后,便可以在“CSS”选项中设置各种属性,如图1-4所示。

图1-4 “属性”面板

1.1.4 面板组

在Dreamweaver CC工作界面的右侧排列着一些浮动面板,这些面板集中了网页编辑和站点管理过程中非常常用的一些工具按钮。这些面板被集合到面板组中,每个面板组都可以展开或折叠,并且可以和其他面板组停靠在一起。面板组还可以停靠到集成的应用程序窗口中,这样就能够很容易地访问所需的面板,而不会使工作区变得混乱。面板组如图1-5所示。

图1-5 面板组

1.1.5 “插入”栏

“插入”栏有两种显示方式:一种是以菜单方式显示,另一种是以制表符方式显示。“插入”栏中放置的是制作网页的过程中经常用到的对象和工具,通过“插入”栏可以很方便地插入网页对象。“插入”栏中包含了用于创建和插入对象(如表格、图像和链接)的按钮。这些按钮按几个类别进行组织,可以在顶部的下拉菜单中选择所需类别来进行切换,如图1-6所示。

图1-6 “插入”栏