目录:
视频: 1.1 Dreamweaver CC 基本工作界面 2024
中编辑样式。在Dreamweaver中使用CSS布局创建新页面后,编辑它的方式看起来无限多,但首先您必须确定样式表中的哪些样式与您要编辑的元素相对应。
正如您可以想象的那样,您可以用多种方式编辑CSS布局中的样式来创建自己的设计。
在调整现有样式以获得所需的基本页面设计之后,您可以根据需要创建其他样式。
<! - 1 - >如何检查可用样式并进行基本编辑
您可以将这些基本说明与Dreamweaver中包含的任何CSS布局一起使用。要编辑CSS布局中的样式,请执行以下步骤:
-
打开基于Dreamweaver CSS布局的页面文件,然后选择窗口→CSS样式(或者单击CSS设计器选项卡以展开面板)。
CSS设计器面板打开或展开。
<! - 2 - > -
单击以在CSS设计器顶部的“来源”面板中选择样式表的名称。
与新页面相关的所有样式都列在“选择器”面板中。
-
选择“CSS设计器选择器”面板中列出的任何样式的名称。
为样式定义的相应CSS规则显示在“CSS设计器”面板底部的“属性”面板中。单击样式列表并查看其相应规则是快速浏览设计并查看各种页面格式选项存储位置的好方法。
HTML5头。 nav和footer标签控制页面的主要部分。例如,标题样式包含使背景颜色为绿色的规则。因此,要更改页面顶部标题区域的颜色,可以更改标题规则中的背景颜色设置。
如何编辑页面范围设置
要编辑页面范围设置(例如页面的背景颜色或整个页面使用文本的主要字体,大小和颜色),请执行以下步骤:
-
在CSS设计器选择器面板中,选择名为body的样式。
所选样式规则中定义的属性显示在“属性”面板中。
-
单击“属性”面板顶部的T图标,然后更改或添加所需的字体和其他文本设置。
您可以更改字体,大小,样式和重量。要更改文本行之间的空间,请更改行高。
-
向下滚动到“属性”面板的“背景”区域,然后在“背景颜色”字段中使用颜色以指定页面整个背景的颜色。
或者,您可以在“背景颜色”字段中输入任何十六进制颜色代码,或使用吸管对任何颜色进行采样。要添加背景图像,请单击“背景”部分中的“URL”字段,然后单击显示的“浏览”按钮,然后选择要用作背景的图像。使用“背景重复”图标指定背景图像在页面上的重复方式。
-
对样式规则进行其他更改或添加。
“属性”面板中对样式规则的更改会自动保存并应用于使用规则格式化的内容。
如何自定义内容区域
要更改主要内容区域的宽度或其他设置(主要内容区域控制页面和页眉,页脚和侧栏的整体大小),请执行以下步骤:
-
更改整个主设计区域的宽度:
-
单击。 CSS设计器面板“选择器”面板中的容器样式。
的属性。容器样式规则显示在“属性”面板中,您也可以在其中编辑样式。
-
在“宽度”字段中更改尺寸或为所需的页面宽度键入一个新号码。
页面设计的宽度根据您输入的尺寸自动更改。当你改变的宽度。容器的风格,你改变整个设计的宽度,因为所有的标签和其他元素都包含在格式中。容器风格 - 他们都设置为扩展填充。容器。
-
-
要更改页面内容区域的大小,请选择名为的样式。内容并在“属性”面板中指定您需要的大小和其他选项。
如果在包含侧边栏的布局中更改内容区域的宽度,则还必须更改边栏的宽度。
-
要更改页面上任何样式的背景颜色,请单击相应样式的名称,然后更改“属性”面板的“背景”部分中的设置。
例如,在Dreamweaver的CSS布局中,边栏以名为的样式定义。 sidebar1。因此,要更改背景颜色,请单击。在“选择器”面板的sidebar1中,选择“属性”面板中的“背景”类别,然后选择所需的颜色。同样,要更改标题的背景颜色,请在“选择器”面板中选择命名标题样式,并使用颜色。
-
将图像添加到标题:
-
选择标记为“插入标识”的占位符图像,然后按Delete或Backspace键。
-
选择插入→图像→图像,然后使用选择图像源对话框选择图像。
-
-
替换文字并在侧边栏和主要内容区域插入图像。
您可以添加或替换文本,也可以在从CSS布局创建的任何页面中插入图像,就像在任何其他网页中一样。
-
选择文件→全部保存以保存页面和样式。