2.2.3 在Dreamweaver中创建CSS—自定义创建


2.2.3   在Dreamweaver中创建CSS—自定义创建


如果不想利用Dreamweaver提供的模板CSS,觉得有些死板的话,我们完全可以自行创建CSS,方法也非常简单。


首先单击文件→新建菜单,选择基本页、HTML文件,此时Dreamweaver处于编辑状态。单击文本菜单,选择CSS样式,如图2.6所示,可以看到在它的子菜单中有如下几项。







 
图2.6   自行创建CSS样式的菜单

新建:用于新建样式表。


附加样式表:用于附加已经编辑好的外部样式表,也就是后缀为.CSS的文件。


导出:由于我们的HTML代码中还没有包含任何的CSS,因此这项菜单项是灰色的,无法单击。


设计时间:在处理 Dreamweaver 文档时可以显示或隐藏CSS样式表所应用的设计。


下面对上述4个选项分别说明。


【新建CSS】


选择新建,弹出“新建CSS规则”对话框,如图2.7所示,忽略其上的文字,现在只需要熟悉定义分别与两个选项对应的外部样式表和内部样式表即可。选择器等专业术语将在第4章进行介绍。







 
(点击查看大图)图2.7   新建CSS规则界面

【附加样式表】


选择附加样式表,弹出链接附加样式表界面,如图2.8所示。单击“浏览”按钮,选择预先编辑好的.css文件即可。







 
(点击查看大图)图2.8   链接外部样式表界面

【导出】


当Dreamweaver正处于编辑HTML包含样式表的时候,我们可以利用导出功能将其导出到一个文件中以备类似的其他HTML使用。单击“导出”按钮后,将弹出文件对话框,提示将当前页面所包含的CSS导出到文件的位置,单击“确定”按钮后,Dreamweaver将保存成.css文件。这个功能有利于将一个文件中的样式设置推广到其他的页面,因为导出成文件后,其他文件只要通过链接外部样式表的方法就可以实现统一的风格设置。


【使用设计时间样式表】


设计时间样式表属于Dreamweaver具体的操作技巧,相对难度较高,读者可以在读完后面的章节并有一定应用基础后再来看这一段落。


设计时间样式表在处理Dreamweaver文档时可以显示或隐藏 CSS 样式表所应用的设计。例如,可以使用此选项在设计页面时,包括或排除只限于Macintosh(即苹果电脑),或只限于Windows 的样式表。


只有当前界面上有正在编辑的HTML文档时,设计时间样式表才能得到应用。当页面显示在浏览器窗口中时,只有实际附加或嵌入到文档中的样式才出现在浏览器中。


若要在设计时显示或隐藏CSS样式表,请执行如下操作的任意一种。


打开“文本|CSS样式”菜单,单击“设计时间”菜单项,打开如图2.9所示的设计时间样式表对话框。


在“CSS 样式”面板中单击鼠标右键,然后在上下文菜单中选择“设计时间”项。在图2.9所示的对话框中,设置显示或隐藏所选样式表的选项如下。







 
(点击查看大图)图2.9   设计时间样式表对话框

若要在设计时显示CSS样式表,请单击“只在设计时显示”上方的加号(+)按钮,然后在“选择样式表”对话框中选择要显示的CSS 样式表。


若要隐藏CSS样式表,请单击“设计时隐藏”上方的加号(+)按钮,然后在“选择样式表”对话框中选择要隐藏的CSS 样式表。


若要从任一列表中删除样式表,请单击要删除的样式表,然后单击相应的减号(-)按钮。单击“确定”按钮关闭该对话框。


“CSS 样式”面板使用所选样式表的名称以及一个指示器(“隐藏”或“设计”)进行更新,以反映样式表的状态。





标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2