电子商务网站建设-的课件

第4章CSS样式本课要点具体要求本课导读上机练习本课要点创建CSS样式应用外部样式表文件使用DIV+CSS布局页面

具体要求掌握CSS样式的创建与应用熟悉CSS规则定义中各分类的作用掌握外部样式表文件的创建掌握附加并应用外部样式表文件的方法了解WEB标准的本质，掌握页面中的内容、结构和表现的概念掌握DIV+CSS页面布局的基本方法本课导读在网页设计中为了操作简便，常用CSS样式来控制文本、边框、背景和列表等对象的样式，创建的样式可以反复调用。应用的CSS样式可以嵌入在当前文档的头部标签中，也可导出为外部样式表文件以应用到其他文档中。本课导读在DIV+CSS布局中，div承载的是内容，而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击，尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习，会发现div+css的好处实在是太明显了。4.1创建CSS样式

CSS指层叠样式表，它是CascadingStyleSheets的缩写。在制作网页时，需要让整个网站的风格统一，如果手动设置每个元素将会非常麻烦，用CSS样式就能快速完成网页元素格式的统一，有利于提高工作效率。4.1创建CSS样式4.1.1知识讲解4.1.2典型案例——在简介页中应用CSS样式4.1.1知识讲解

本节将介绍【CSS样式】面板、CSS样式的创建及应用方法。4.1.1知识讲解1.认识【CSS样式】面板2.创建CSS样式3.应用CSS样式1.认识【CSS样式】面板选择【窗口】→【CSS样式】命令或按【Shift+F11】组合键），打开【CSS样式】面板，如右图所示。2.创建CSS样式创建CSS样式的具体操作如下：（1）在【CSS样式】面板中单击按钮，在打开的【新建CSS规则】对话框中进行相应的设置，如下图所示。2.创建CSS样式2.创建CSS样式类（可用于任何标签）自定义样式，注意类名称必须以句点开头，可以包含任何字母和数字组合。如果没有输入开头的句点，Dreamweaver

将自动输入句点。标签（重新定义特定标签的外观）重定义HTML标记的功能是改变HTML的原有功能。2.创建CSS样式高级（ID、伪类选择器等）为具体某个标签组合或所有包含特定Id属性的标签定义格式设置。提供的选择器包括a:active、a:hover、a:link

和a:visited四种。2.创建CSS样式（2）在【新建CSS规则】对话框中设置完成后，单击【确定】按钮，打开CSS规则定义对话框。或者选中【新建样式表文件】单选按钮，保存样式表文件，打开CSS规则定义对话框，如下图所示。2.创建CSS样式2.创建CSS样式（3）在CSS规则定义对话框的【分类】列表框中选择要定义的分类，右侧将显示对应的参数项，进行设置。（4）设置完成后，单击【确定】按钮，定义的样式显示在【CSS样式】面板中。如果要修改样式，可以单击【CSS样式】面板底部的按钮，打开CSS规则定义对话框，也可单击或按钮，在【属性】列表框中添加或修改样式的属性。3.应用CSS样式CSS样式的应用比较简单，在窗口中选中要应用CSS样式的对象，在对应的【属性】面板的【样式】或【类】下拉列表中选择需要的样式名称即可。4.1.2

典型案例——在简介页中应用CSS样式案例目标本案例将为“fa.html”页面中的文本和链接创建并应用CSS样式，主要练习自定义CSS样式和样式的使用，完成的效果如右图所示。4.1.2

典型案例——在简介页中应用CSS样式操作思路：（1）打开“素材\fa.html”。（2）分别新建“.tt1”、“.tt2”、“.dot”、“a:link”、“a:hover”和“a:visited”样式。（3）应用“.tt1”“.tt2”和“.dot”样式。4.1.2

典型案例——在简介页中应用CSS样式案例小结本案例介绍了如何在“jie.html”文档中应用CSS样式，主要介绍了自定义CSS样式的方法和链接状态样式的设置等。从本例可以看出，定义样式时，用户必须明确对象所需定义的参数项，才能准确地对其进行设置。

4.2使用外部样式表文件外部样式表文件是将文档中将要用到的CSS样式定义在一个单独的文件中，并存储在站点中，以便该站点中各页面的调用。4.2使用外部样式表文件4.2.1知识讲解4.2.2典型案例——为产品页应用外部样式4.2.1知识讲解

本节主要介绍外部样式表文件的创建及应用外部样式表文件中样式的方法。4.2.1知识讲解1.创建外部样式表文件2.附加并应用外部样式表文件1.创建外部样式表文件

外部样式表文件有两种创建方法：一是直接新建外部样式表文件，另一种是将当前文件中的样式导出为外部样式表文件。新建外部样式表文件的具体操作如下：（1）在【CSS样式】面板中单击按钮，在打开的【新建CSS规则】对话框中选中【定义在】栏的【新建样式表文件】单选按钮。1.创建外部样式表文件（2）单击【确定】按钮，打开【保存样式表文件为】对话框，在【文件名】文本框中输入新建的样式表文件名称。（3）单击【保存】按钮，在打开的【.tt的CSS规则定义】对话框中按上一节介绍的样式定义方法进行定义，单击【确定】按钮，保存于“mycss.css”样式表文件中的“.tt”样式就显示在【CSS样式】面板中了。

1.创建外部样式表文件（4）要在样式表文件中增加样式，在【新建CSS规则】对话框中，在【定义在】栏的下拉列表中选择【mycss】选项，并按新建样式的方法，建立其他样式。1.创建外部样式表文件

如果要将嵌套在其他文件中的CSS样式，创建为外部样式表文件，可以通过移动CSS规则的方法创建，具体操作如下：（1）在【CSS样式】面板中右键单击要导出的样式的名称，选择【移动CSS规则】命令。（2）打开【移至外部样式表】对话框，选中【新样式表】单选按钮，单击【确定】按钮完成样式的移动。2.附加并应用外部样式表文件可将外部样式表文件附加到当前网页中，具体操作如下：（1）打开要附加外部样式表文件的网页文档。（2）选择【文本】→【CSS样式】→【附加样式表】命令，打开【链接外部样式表】对话框。2.附加并应用外部样式表文件（3）设置完成后，单击【确定】按钮，完成外部样式表文件的附加操作。4.2.2

典型案例——为产品页应用外部样式案例目标本案例将对网页中的元素应用外部样式，主要介绍将当前文件中的样式导出为外部样式和附加并应用外部样式的方法，完成后的效果如右图所示。4.2.2

典型案例——为产品页应用外部样式操作思路：（1）导出“fa.html”文件中的CSS样式，并保存为“fa.css”。（2）在“cp.html”文件中导入“fa.css”。（3）分别在“cp.html”文件的各元素中应用“fa.css”中的对应样式。

4.2.2

典型案例——为产品页应用外部样式案例小结

本案例介绍了如何将文档中的样式导出为外部样式，如何附加外部样式表文件到当前文档及如何应用外部样式等知识。链接样式会在头部标签中生成<linkhref="fa.css"rel="stylesheet"type="text/css"/>语句，如果采用导入外部样式的方式，则会生成@importurl("fa.css");及对应的样式设置。4.3DIV+CSS标准化网页布局4.3.1知识讲解4.3.2典型案例4.3.1知识讲解Web标准DIV+CSS网页布局常见的布局类型1.Web标准Web标准可以分为３个方面：结构标准语言（主要包括XHTML和XML）、表现标准语言（主要包括CSS）和行为标准（主要包括对象模型、ECMAScript）等。Web标准最核心的概念就是结构、表现和行为相分离。1.Web标准内容内容就是页面实际要传达的真正信息，包含数据、文档或图片等。不包含任何辅助信息，如导航菜单或装饰性图片等。下面一段文本是页面要表现的信息。1.Web标准1.Web标准结构虽然在上图中已经完全包括了页面所有要传达的信息，但是这些信息简单地罗列在一起，难于阅读，内容的信息也不能很清晰地传达给阅读者。将上图所示的页面内容进行整理，分成文章标题、作者、文章内容、段落、段落标题、段落内容、列表等各个部分。1.Web标准1.Web标准表现以上虽然从结构上对页面内容进行了分区，但是页面内容的外观并没有改变。例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰等。要让阅读者能更好地阅读页面内容，就需要设置内容部分的字体样式、对齐方式、背景修饰等，所有这些外观的效果就成之为表现。1.Web标准1.Web标准2.DIV+CSS网页布局什么是DIVDIV全称division意为“区分”，使用方法跟使用其他tag的方法一样。如果单独使用DIV而不加任何CSS，那么它在网页中的效果和使用<P></P>是一样的。DIV本身就是容器性质的，不但可以内嵌table还可以内嵌文本和其它的HTML代码。2.DIV+CSS网页布局DIV+CSS标准的优点结构化HTML，提高易用性结构清晰，表现和内容相分离。更好的控制页面布局。结构的重构性强，缩短改版时间。大大缩减页面代码，提高页面浏览速度，缩减带宽成本结构清晰，容易被搜索引擎搜索到2.DIV+CSS网页布局DIV+CSS应用这个应用最经典的例子就是各大blog程序了。都是采用div+css构架。内容和样式的分离导致我们在重构页面布局或者更换皮肤的时候，只用针对每一个div元素重新定义其具体位置、样式就行了。而在原来的table基础上进行改版，几乎必须改变所有的内容注入渠道，实在是太过于麻烦。2.DIV+CSS网页布局盒子模型每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。2.DIV+CSS网页布局盒子模型2.DIV+CSS网页布局盒子模型2.DIV+CSS网页布局div的CSS样式定义float:left;clear:left;width:600px;height:400px;padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;margin:5px;2.DIV+CSS网页布局div的CSS样式定义position:absolute;visibility:visible;z-index:5;overflow:scroll;clip:rect(1px2px3px4px);height:400px;width:600px;3.常见的布局类型单列结构<body>#wrap单列结构div定义

<divid="wrap"></div>单列结构CSS定义#wrap{ height:600px; width:776px; padding:0px; margin-right:auto; margin-left:auto; border:1pxsolid#000000; background-color:#CCCCCC;}

3.常见的布局类型3.常见的布局类型左右结构

<body>#wrap#left#right左右结构div定义

<divid="wrap">

<divid="left"></div>

<divid="right"></div>

</div>左右结构CSS定义#wrap{ width:776px; padding:0px; margin-right:auto; margin-left:auto; border:1pxsolid#000000; background-color:#CCCCCC; height:600px;}3.常见的布局类型左右结构CSS定义#left{ float:left; width:200px; height:600px; background-color:#0066FF;}#right{ float:right; width:550px; height:600px; background-color:#FFFFFF;}3.常见的布局类型3.常见的布局类型左中右结构

<body>#wrap#left#right左中右结构div定义<divid="wrap">

<divid="left"></div>

<divid="right"></div>

<divid="center"></div></div>#center左中右结构CSS定义#left{ float:left; width:150px; height:600px; background-color:#0066FF; margin:0px; padding:0px;}#right{ float:right; width:150px; height:600px; background-color:#99CC00; margin:0px; padding:0px;}3.常见的布局类型#center{ width:auto; background-color:#FFFFFF; height:600px; padding:0px; margin-right:1px; margin-left:1px;}3.常见的布局类型3.常见的布局类型上下结构

<body>#wrap#top#bottom上下结构div定义<divid="wrap"><divid="top"></div>

<divid="bottom"></div></div>上下结构CSS定义#top{ width:100%; height:200px; background-color:#99CC00; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#000000;}#bottom{ width:100%; height:400px;

}3.常见的布局类型上中下结构

<body>#wrap#top#center上中下结构div定义<divid="wrap"><divid="top"></div>

<divid="center"></div

<divid="bottom"></div></div>#bottom3.常见的布局类型上中下结构CSS定义#top{ width:100%; height:100px; background-color:#99CC00; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#000000;}3.常见的布局类型#bottom{ width:100%; height:100px;}#center{ width:100%; background-color:#FFFFFF;}3.常见的布局类型3.常见的布局类型两行两列结构

<body>#wrap#left#right#top#bottom3.常见的布局类型两行三列结构

<body>#wrap#left#center#top#bottom#right3.常见的布局类型混合结构

<body>#wrap#left#top#bottom#right#center

#main1

#main#child1#child23.常见的布局类型4.3.2

典型案例——DIV+CSS布局实例案例目标

利用DIV+CSS进行网页布局是目前较为流行页面排版方式，完成后的效果如右图所示。4.3.2典型案例——DIV+CSS布局实例操作思路：（1）分析构架：画出构架图。

4.3.2典型案例——DIV+CSS布局实例操作思路：（2）模块拆分：在网页中插入Div标签，定义页面属性和定义特定Id属性的DIV标签的CSS样式。

一个总的DIV标签，它包含了4个DIV标签。Container最大的容器，将所有内容包含在内。Width：800px。Header网站头部图标，包含了一幅广告横幅，Width：800px，Height110px。Leftnav

左侧导航条，Width：200，浮动为左对齐。Content网站的主要内容。Width:480px。Footer网站底栏，包含版权信息等。

4.3.2典型案例——DIV+CSS布局实例4.3.2典型案例——DIV+CSS布局实例操作思路：（3）插入网页元素和调整页面结构，适当修改CSS样式。

4.4CSS制作实用的菜单1.无需表格的菜单2.菜单的横竖转换3.Tab菜单

1.无需表格的菜单操作思路：插入Div标签，id为

navigation。制作好背景颜色和项目列表，如下图。1.无需表格的菜单操作思路：设置navigation样式，如下所示：

#navigation{

width:200px;

}

#navigationul{

list-style-type:none;

/*不显示项目符号*/

margin:0px;

padding:0px;}1.无需表格的菜单操作思路：为<li>标记添加下划线，以分割各个超链接，并且对超链接<a>标记进行整体设置，如右图。

#navigationli{

border-bottom:1pxsolid#ED9F9F;/*添加下划线*/

}

1.无需表格的菜单操作思路：#navigationlia{

display:block;/*区块显示*/

padding:5px5px5px0.5em;

text-decoration:none;

border-left:12pxsolid#711515;/*左边的粗红边*/

border-right:1pxsolid#711515;/*右侧阴影*/

}1.无需表格的菜单操作思路：设置链接的样式：

#navigationlia:link,#navigationlia:visited{

background-color:#c11136;

color:#FFFFF