DreamWeaver中应用CSS样式表 |
|
一、 去除超级链接的下划线以及在超级链接上实现鼠标悬停变色： 在默许状况下，用DreamWeaver设计的网页中的超级链接都有下划线，看上去不大 好看 。要去除这些 讨厌的下划线,众多报刊介绍的 步骤都是在HTML源代码中手工加入一段代码，其 着实DreamWeave中很方便去除链接的下划线 。首先在DreamWeaver的Document Windows中 随便 构建一个链接，你 可以看到这个链接会有下划线 。 怎么去除这条下划线呢？ 1.在点击菜单栏上的"Text"|"CSS Styles"| "Edit Style Sheet…"(或者直接按快捷键Ctrl+shift+E),调出Edit Style Sheet(编辑 款式表)对话框窗口 。 2.点击"New (新建)"， 而后在"New Style (新 款式)"对话框中，点击"Use CSS Selector"按钮 。 3.在Selector栏中键入a, 而后点OK 。 4.随后弹出"CSS 款式定义"对话框，在Type类的decoration( 装璜)中，勾选none， 而后点OK，再点Done 。你将 立即在Document Windows中发现链接的下划线已经消逝了 。那么又 怎么实现当鼠标悬停在链接上时链接变色呢？ 反复上述步骤中的的第一、第二步 。 而后点选Selector旁的下拉箭头， 取舍"a:hover",再点OK 。在随后弹出的 "Style definition for a: hover"对话框中，在Type类的color中任意 取舍一种 色彩( 比方 取舍红色)， 而后点OK，再点Done便 实现了 。按F12预览，将鼠标放在链接上，该链接是否变成了红色？假如在 方才的"Style definition for a: hover"对话框中，在Backgroud(背景)类里， 取舍backgroud的 色彩为绿色，那么当你把鼠标放在超级链接上时，不单链接会变成红色，并且还会有绿色的背景 。事实上，通过 方才的CSS 款式定义对话框，你还 可以实现更多的特别 动机，感兴趣的朋友 不妨去好好 推敲一下 。 二、 缔造可 反复 使用的外部CSS 款式表 用DreamWeaver在某网页中 缔造了一种CSS 款式后，假如你要在另外的网页中 利用该 款式，你 毋庸从新 缔造该CSS 款式， 惟独你 缔造了外部CSS 款式表文件(external CSS style sheet)，你便 可以在今后任意调用该 款式表文件中的 款式 。为了便于治理，先在站点所在文件夹中，新建一个文件夹，取名为CSS，专门用于 搁置外部 款式表文件(其 扩大名为css) 。 1、在Document Window中按Ctrl+shift+E，调出Edit Style Sheet(编辑 款式表)对话框窗口 2、点击"link" 。 3、在弹出的Link External Style Sheet(链接外部 款式表)对话框，点BROWSE，找到 方才 缔造的CSS文件夹 。 4、在Select Stylesheet File ( 取舍 款式表文件)窗口"文件名"栏中，键入*.css (* 可 认为任意名)，请 留神，事实上此时在CSS文件夹中并无 款式表文件，在"文件名"栏中键入的新名字将成为外部 款式表新文件的名字 。 比方键入title.css，, 而后点Select | OK 。 5、在Edit Style Sheet(编辑 款式表)对话框窗口中，会新添加 title.css (link), 双击它 。 6、在弹出的"title.css"窗口中，点"New" 。 7、在"New Style"对话框中，点选"Make Custom Style (class)"按钮 8、在Name栏中键入某个名字，如myheadline,点OK 。 9、在接下来的"Style definition for .myheadline in title.css"对话框中，进行字体、 色彩等各种设置， 实现后点OK 。如还要 缔造新的 款式，再点"New", 反复 方才的步骤6、7、8、9，最终点"save"| "done",于是title.css这个外部 款式表文件便 缔造好了 。菜单栏上的"TEXT" |"CSS Styles"子菜单中将会列出title.css中的全部 款式 。如要在 其余网页中调用这个title.css， 惟独 反复上述1至3步， 而后在Select Stylesheet File窗口"文件名"栏中输入title.css 。点"select"| "ok"| "done", title.css中全部的 款式便会浮现在该网页菜单栏上的"Text" |"CSS Styles"子菜单中，你将 可以在此网页中 利用这些 款式 。 |
