首页 > 代码库 > 7.3 制作样式表文件并和其他页面绑定

7.3 制作样式表文件并和其他页面绑定

问题:大家发现前面应用模板的页面中存在的问题了吗?如上一节应用模板图3、图4和图5所示,是不是页面中有些字体过大、颜色搭配不合理、超链接样式极其难看、文本排列不够整齐等,那如何解决这些问题?

大家肯定想到了使用样式表,由于有多个页面甚至整个站点都要应用统一的样式,所以应该创建样式表文件,方便多个页面同时引用。

一、制作样式表

根据上一节图3、图4和图5所示的页面效果,我们应该设置哪些样式?其实,这也不难,你只要看到页面中哪里不美观,那么那里就得应用样式。所以根据上一节图3、图4和图5所示的不美观的地方,可以得出应该应用如下样式:字体样式、超链接样式、颜色及背景样式、文本样式、方框样式等。

下面我们就为上一节图3、图4和图5所示的页面创建样式文件。

(1) 打开Dreamweaver,选择“文件”一“新建”命令,弹出“新建文档”对话框,在“类别”列表框中选择“基本页”选项,在“基本页”列表框中选择“CSS”选项,如图1所示。

图1 “新建文档\对话框
图1 “新建文档"对话框

(2) 单击“创建”按钮,打开CSS样式编辑页面。

(3) 选择“窗口”一“CSS样式”命令,打开“CSS样式”面板,在面板中右击鼠标,在弹出的菜单中选择“新建”命令。

(4) 在弹出的“新建CSS规则”对话框中,就可以新建标签样式(如body、a等)、ID样式(如#head、#search form等)和类样式(如.fontcolor- white、.tableBorder等)。

(5) 创建完样式规则之后,样式文件里所对应的完整代码如下:

body {
 margin-top:7px;
 font-family:"宋体",sans-serif;
 font-size:12px;
}
a:link{
color:#000000;
}
a:visited{
color:#999999;
}
a:hover{
color:#CC0000;
}

#head{ !头部样式
 float:left;
 margin:0px auto 0px auto;
 width:950px;
 height:140px;
}
#search_form{
 margin:0px auto 0px auto;
 padding:1px 0px 1px 0px;
 width:950px;
 height:55px;
}
.fontcolor_white{
color:#FFFFFF;
font-size:12px;
}

#content{ !中间内容部分样式
 float:left;
 margin:0px auto 0px auto;
 width:950px;
 /*height:720px; */
 text-align:left;
 background-color:#FFFFFF;
 font-size:12px;
}
#content a{
color:#0033FF;
text-decoration:none;
}

#foot a{
color:#0033FF;
}
#content a:hover,#foot a:hover{
color:#FF3300;
}
.fontcolor_blue{
color:blue;
font-size:12px;
}
.font_bold{
 font-size: 16px;
 font-weight: bold;
}
.tableBorder {
 border-right-width: 2px;
 border-right-color:#FF9900;
 border-right-style:dashed;
 padding-top:10px;
 padding-left:5px;  
}
.tablePad {
padding-left:10px;  
}


#foot{
 margin:0px auto 0px auto;
 width:950px;
 height:93px;
 text-align:center;
}


.login_success1 {
 font-size: 24px;
 font-weight: bold;
}
.login_success2 {font-size: 36px}
.login_success3 {font-size: 24px}

.register_textBroader
{
 border-width:1px;
 border-style:solid;
}
.register_table_line{
 font-size:14px;
 line-height:35px;
 margin-right:5px;
 text-align:right;

}

(6) 选择“文件”一“另存为”命令,然后在弹出的“另存为”对话框中将此CSS样文件保存为mainpage.css,最后单击“保存”按钮,如图2所示。这样一个样式文就创建好了,随后就可以被多个页面引用。

图2 ”另存为“对话框
图2 ”另存为"对话框

二、应用样式文件

样式文件创建好之后,其实还是一个孤立的文件,如果不应用到页面中,就不能显示出其强大的威力。下面我们就对未应用样式的商品的详细介绍页绑定样式文件,首先来了解一下应用CSS样式表的具体操作步骤。

(1) 打开要应用样式的网页,如图3所示:

图3  打开要应用样式的网页
图3 打开要应用样式的网页

(2) 在“属性”面板中单击“样式”下拉列表框,选择“附加样式表”选项。

(3) 选择“附加样式表”选项之后,会出现如图4所示的对话框,单击“浏览”按钮指定要链接的外部样式文件为“mainpage.css”(上一节中已创建好的样式文件)。

图4 设置打开的网页和指定的样式表绑定
图4 设置打开的网页和指定的样式表绑定

(4) 单击“确定”按钮,就完成了商品详细介绍页和样式表文件“mainpage.css”之间的绑定,应用样式之后的页面效果如图5所示。

图5 应用样式之后的商品详细介绍页
图5 应用样式之后的商品详细介绍页

把图3和图5进行比较,明显可以看出图5所示的页面漂亮多啦!这就是样式文件给我们带来的美感。

本节作业:

参照教程和图示,使用Dreamweaver完成制作样式表并应用样式表操作过程。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第七章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/573.html