|
|
|
| 第4课 用CSS样式表设计留言板站点 |
| www.study51.com |
| 【字体：大 中 小】【打印】【关闭】 |
|
|
经过前面三课的学习，我们已经在留言板站点创建两个页面了，一个是说明页面（shuoming.htm），一个是主页面（main.asp）。下面我们首先挑毛病，挑一挑两个页面的创建过程和创建结果的毛病。
1、在浏览器中打开这两个页面，然后执行浏览器中的“查看/文字大小/最大”命令。咣当！字大了，段落也乱了！怎么这个效果啊！
2、在页面的编辑过程中，每次按Enter（回车）键是一个新段落的开始，但段落间的距离怎么那么大啊？也找不到控制距离的命令。：（
3、仔细再看一看页面效果，怎么超级链接的文字下面都有一个下画线啊？这多不好看啊，能不能去掉呢？
4、我想文字段落前空两个汉字的位置，每次都要按空格键设置，能不能在新段落前自动前空两格？
5、我想表格线更细一些，可在属性面板里面好象完成不了这个目的？
……………………
我们还可以找到很多毛病和不如意的地方，怎么解决？哈哈，今天就让一个重量级选手出场吧，它叫CSS层叠式样式表。它可是设计网页的重要技术，有了它，我们刚才找到的那些问题就马上可以解决掉。
一、关于CSS样式表
层叠样式表（CSS）是一系列格式规则，它们控制网页内容的外观。使用CSS样式可以非常灵活并更好地控制确切的网页外观，从精确的布局定位到特定的字体和样式。
CSS样式使您可以控制许多仅使用HTML无法控制的属性。例如，可以指定自定义列表项目符号并指定不同的字体大小和单位（像素、点数等等）。通过使用CSS样式和以像素为单位设置字体大小，可以确保以更一致的方式在多个浏览器中处理页面布局和外观。除了设置文本格式外，还可以控制网页中块级别元素的格式和定位。例如，可以设置边距、边框、其他文本周围的浮动文本等等。
CSS样式表的主要优点是提供便利的更新功能；更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。
在Dreamweaver MX中主要通过“CSS样式面板”创建CSS样式、查看CSS样式的属性以及将CSS样式应用于文档中的元素。选择执行“窗口/CSS样式”命令可以打开“CSS样式面板”，如图1所示。
CSS样式面板中有两种视图，一个是应用样式视图，另一个是编辑样式试图，如图1和图2所示。
●应用样式视图：在这个视图下可以选择应用于文档元素的类（class）样式。“应用样式”视图只显示自定义（class）样式。该窗格中不显示重定义的HTML样式和选择器样式。
●编辑样式视图：在这个视图下可以查看与当前文档关联的样式定义。“编辑样式”视图显示自定义（class）CSS样式、重定义的HTML标签和CSS选择器样式的样式定义。
图1 CSS样式面板
图2 CSS样式面板——编辑样式面板
二、在网页文档内部定义和引用CSS样式
在Dreamweaver MX中打开留言板站点的说明文件（shuoming.htm），我们在这个页面文档内部定义和引用CSS样式。
▲重定义html标签body的属性样式
1、打开CSS样式面板，选择编辑样式面板视图。
2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图3所示。请按照图3所示进行设置。
图3 新建CSS样式对话框——重定义body属性
3、设置完成以后，单击确定按钮，进入body标签的属性设置对话框中，如图4所示。
图4 body属性样式设置——类型属性
▲重新定义文本超级链接属性样式
1、打开CSS样式面板，选择编辑样式面板视图。
2、单击面板右下角的新建CSS样式按钮，会弹出一个新建样式对话框，如图5所示。请按照图5所示进行设置。
图5 新建CSS样式——重新定义超级链接属性
3、设置完成以后，单击确定按钮，进入a:link的属性设置对话框中，如图6所示。只设置“修饰”和“颜色”，其它不设置。
图6 a:link的类型属性样式设置
4、重复步骤2、步骤3，分别再重新定义a:visited和a:hover的属性样式。和前面重新定义a:link唯一的不同是文字颜色的设置，分别设置成灰色和红色，其他的设置都一样。
●a:link 超级链接文字的正常外观属性。
a:visited 超级链接文字访问过以后的外观属性
a:hover 当鼠标经过超级链接文字时的外观属性
●经过前面对body和a标签的属性重新定义以后，定义的CSS样式会自动套用到页面的元素上。这是最终的页面效果：shuoming_css.htm
三、定义和附加外部样式表
上面我们是在文档内部重新定义了一些html标签的属性样式，定义的CSS样式只对本文档起作用，如果换了一个新文档，又要重复上面的操作，这样也太麻烦了！实际上，对于一个站点，站点内的页面大多要求一致的外观和效果，如果我们针对一个站点定义一次CSS样式，然后把定义的结果套用到整个站点的页面文档，那么我们设计网站和管理网站的效率就大大提高了。Dreamweaver MX的外部样式表就是用来实现这个目的的。
让我们开始外部样式表的应用吧，先在Dreamweaver MX中打开留言板站点的主页面文档（main.htm），我们要以这个文档为实例完成我们的学习。
▲定义外部CSS样式表文件
1、打开CSS样式面板，单击右下角的新建样式按钮 ，则弹出新建样式对话框，如图7所示。请按照图7进行设置。
图7 新建CSS样式——外部样式文件
2、完成图7的设置后，单击确定按钮，则弹出保存外部样式表对话框，如图8所示。请按照图8所示进行设置和操作。
图8 保存外部样式表对话框
3、完成图8的设置并单击保存按钮后，会弹出body的CSS样式定义对话框，如图4所示，请按照图4进行设置。
▲在这个外部CSS样式表文件中继续定义CSS样式
1、单击右下角的新建样式按钮 ，则弹出新建样式对话框，如图9所示。请按照图9进行设置。
图9 新建CSS样式——td的属性样式
2、单击确定按钮以后，就弹出td的CSS样式定义对话框，它的设置和body的设置一样。也可参看图4。
3、重复步骤1、步骤2，在这个外部CSS样式表中继续定义a:link 、a:visited 、a:hover的属性样式。
4、重定义p标签的“盒子”属性样式可以设置段落间距，如图10所示。
图10 p标签的盒子属性样式
图11 外部CSS样式表
△定义的外部CSS样式表最终结果如图11所示。
▲附加外部样式表
上面我们建立了一个外部CSS样式表文件（*.css），这个外部CSS样式文件自动附加到定义它的页面文档中了。但站点中的其它页面文档如果想使用这个外部CSS样式表中的样式，就必须先附加它。具体步骤如下：
1、打开站点中的另一个页面文档。
2、打开CSS样式面板，单击面板右下角的“附加外部样式表”按钮 ，马上会弹出一个“链接外部CSS样式表”对话框，如图12所示。
图12 链接外部样式表
3、在图12所示的链接外部样式表中浏览找到要附加的CSS样式表文件以后，单击“确定”按钮就完成了将一个外部CSS样式表附加到页面文档的操作，我们在CSS样式表面板的编辑视图下就可以看到附加的样式表，如图11所示。
▲利用CSS样式表模板创建外部CSS样式表
除了在CSS样式面板中创建外部CSS样式表以外，我们还经常利用CSS样式表模板创建外部CSS样式表。步骤如下：
1、执行“文件/新建”命令，会弹出一个新建页面文档对话框，如图13所示。
图13 利用CSS模板创建外部CSS样式表
2、按照图13所示操作以后，我们就选择了一个包含body、th、td、h1、h2、h3、h4、h5、h6、a等html标签的属性样式的CSS样式表模板，如图14是代码视图下CSS样式表模板的部分内容。
图14 代码视图下CSS样式表模板的内容
3、我们可以直接在CSS样式表模板的代码视图下直接对它的内容进行编辑，也可以把它附加到某一个页面文档以后再在CSS样式面板的编辑视图下对它进行编辑。
4、CSS样式表模板中的h1、h2、……、h6这些属性样式对应在属性面板中的格式操作如图15所示。当我们选择属性面板格式中的标题1、标题2、……、标题6时，实际上光标所在的文档段落就应用了这些属性样式了。
图15 属性面板中段落格式设置
四、教程副页
▲特定CSS样式设置信息参考 |
|
|
| 【字体：大 中 小】【打印】【关闭】 |
|
|
|
