特别致谢 ![]() 本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用,深受广大读者的欢迎,目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。 朋友们可以在全国各新华书店购买此书,或者在当当网、互动出版网邮购此书。 第七课 链接外部CSS样式文件前面在创建CSS样式时,都是直接将CSS样式嵌入到网页文档中,这属于网页文档的内部CSS样式应用。CSS样式不但可以直接嵌入在页面中,而且可以保存为独立的样式文件(扩展名为.css),需要引用样式文件中的CSS样式时,可以将其链接到网页文档中。多个网页文件可以共享一个.css样式文件,对.css样式文件的修改将会影响所有以链接方式调用这个.css样式文件的网页文件。 7.4.1 制作CSS样式文件1.从CSS模板新建CSS文件 (1)选择【文件】|【新建】命令,在弹出的【新建文档】对话框中,选择【常规】标签页,在【类别】列表中选择【CSS样式表】,然后在【CSS样式表】中选择【完整设计:Arial,蓝色/绿色/灰色】(这是Dreamweaver自带的一个CSS模板),然后单击【创建】按钮,如图7-1所示。 图7-1 新建CSS样式表 (2)这时代码视图中出现了一些CSS代码。按下键盘上的快捷键Ctrl + S ,弹出【另存为】对话框,在【文件名】中输入myCSS,展开【保存类型】后面的下拉列表选择【样式表(*.css)】,然后单击【保存】按钮,如图7-2所示。 图7-2 保存CSS文件 2.修改CSS样式 (1)myCSS.css仍然处于打开状态,注意看【文档】工具栏可以发现,拆分视图和设计视图都是不可用的,对于CSS文件,只能在代码视图中直接编辑其源代码,这和普通HTML文件是不同的,如图7-3所示。 图7-3 代码视图中显示的CSS文件 (2)在代码视图中可以对这里的CSS样式进行修改,这时应该充分利用Dreamweaver 8提供的代码提示工具,这里仅举一个例子来说明。在代码视图中,找到“.title”内的font-family,将“:”后面的字体列表删除,定位光标到“:”后面,按下键盘上的空格键,这时将弹出字体列表代码提示窗口,从中选择“Verdana,宋体”并双击鼠标左键,如图7-4所示。 图7-4 利用代码提示工具设置CSS属性值 (3)完成对myCSS.css的修改之后,按下键盘上的快捷键Ctrl+ S 保存文件,然后将其关闭。 专家点拨:以上步骤是通过Dreamweaver提供的CSS模板创建了一个CSS文档,这种方式比较高效,但也有一定的局限性。也可以直接新建一个空白CSS文档,然后通过在“CSS样式”面板添加CSS规则来完成CSS文档的创建。 7.4.2 通过链接使用外部样式表1.链接外部CSS文件 (1)打开示例文件C:\Samples\part6\6.4.html,这个文件中包含简单的页面,如图7-5所示。 图7-5 使用CSS样式之前的页面效果 (2)在【CSS样式】面板中单击右下角的【附加样式表】按钮 |