DREAMWEAVER网页制作和css实例

CSS混沌初开I：导航菜单素材的设计现在开始我们将学习如何一步一步的构建一张CSS页面。本教程分成以下几个部分：第一讲主要是关于如何在PS中制作导航按钮素材；第二部分主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一部分是如何整合CSS和XHTML。

有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。首先看一下完成的效果：玻璃质感导航图片的制作：

首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：接着我们可以通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？鼠标经过导航时的翻转图片：

创建翻转效果图片，我们只要简单的在原有素材基础上调整色调就即可，关于文本的添加在这里就不细说了。我们可以为每个图层调整色调，在示例中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。这部分教程涉及到一些Photoshop的基本知识，如果你不是很了解，建议先学习一些PS的入门基础，毕竟Adobe合并了*之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。当然颜色选择要视乎你的需要，制作的方法大致还是相通的，你也可以发挥创意进行更好的细节设计：

CSS混沌初开II:背景图案及配色本教程的第二部分主要有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。

在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。

选择你的色彩体系

事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见：使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注；谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色；在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力：在PS中我们可以通过在色相/饱和度（Ctrl+U）面板中调整参数来调配颜色。事实上图中的几组颜色就是通过这种方法调制出来的，当然在这个面板中可以变化出很多颜色，具体哪个参数应该为什么值都没有硬性的规定，网络上有很多推荐的色彩组合并明确给出了RGB值，大家在利用这种方法配色的时候也可以参考那些文章教程。

如果你看了上面的讲解之后仍然不知道如何着手，这段关于颜色的影片或许会对你有所帮助。事实上我觉得每个人都应该去看一下这个影片，不仅因为它本身设计得相当有趣，更重要的是对于认识和了解大众化的色彩体验和感知从而运用到网页设计中，它都是一个很好的引导和巩固。

是时候开始绘制背景图案了

现在我们开始讨论网页的背景图案。当我们在PS等软件中创作背景图案时，往往要精细到像素，尤其是那些平铺填充的背景。首先我们在PS中新建一个30x像素的空白文档，填充适当的颜色，并用铅笔工具在其上绘制一些单像素小点，下面是一些例子：如第一讲中导航按钮上的小点一样，在这里你也可以尽量的发挥自己的创意，但是还是有几个需要注意的地方，比如小点的颜色，不能跟背景色反差太大，不然平铺以后它们会变得很刺眼。如果要利用小点来组合出一些图案或线条，我通常会采用复制图层并通过方向键调整其位置的方法，适当的时候还会变化其图层模式或透明度等。制作这些背景图案的一个难点就是，如何保证图案平铺时能实现无缝接合，毕竟背景的面积往往比较大，它上面若有割裂就会很显眼。我通常采用的方法是利用PS中的矩形选框工具，比如下图中，正方形选区左上角标识出的像素必须与其它三个标识区一致，那么当我们把这样一块区域截取下来进行平铺的时候就不会有问题：当然这个问题是否容易解决，也是视乎你最初设计的背景图案，如果我们动手的时候就把可能遇到的一些问题考虑在内，那么到解决的时候也不会太费力甚至返工了。

CSS混沌初开III:顶部图片视觉修饰这节是关于素材设计的最后一部分了，设计工作完成后将会开始讲解如何切片以及在CSS和XHTML中构建最终页面。首先看一下这节设计的效果图：在制作按钮时，我用了粉红和暗绿两种色调，可能看起来有点怪，但个人很钟意这个组合。在设计网页整体界面的过程中，我会给出一些意见和建议，重点是顶部的图片，如何增加一些细节，让它看起来更加的美观、精致。

顶部图片的视觉处理

在教程的前两部分中，提到过导航按钮的颜色选择，现在我们来看一下如何处理一张花卉图像的色调，使其与页面的风格达到统一。在用到的花卉图像素材中，大家可以发现它上面也有红和绿两种色调，我要做的事情就是把其中的颜色调制成粉红和暗绿，就好似导航菜单中使用的色调一样：首先来看一下图片中花朵的颜色，它的色调偏向于大红，还是使用PS中的色相/饱和度命令来对它进行调整。利用快捷键按Ctrl+U调出色相/饱和度面板，在“编辑”项的下拉列表中选择“红色（Ctrl+1）”，这样我们就能只针对图像中的红色进行调整了。拖动色相滑块调制出我们需要的红色，具体的数值依据实际情况，比如我这里是大致是-30左右：下一步就是通过修饰细节增加一些辅助色调来增进视觉效果，为接下来的滤镜处理作一些预处理。顶部图片的处理对创意有一定的要求，如果有相关的经验的话也就不是件难事，所以素材处理能力以及个人的美工基础都会对设计过程、设计结果产生影响：在之前的步骤中图片的尺寸和体积无疑已经进行了调整，但是如果有比较多的细节要处理的话，建议还是在原始尺寸上操作，像示例中的图片我刚开始也是在16001200的原始大小下进行处理的。我为图像添加了个人比较偏爱的绘画涂抹滤镜（滤镜菜单—艺术效果），效果如下图。在PS中，滤镜的运用是很有趣的一件事情，调节其中的参数就可以达到很多意想不到的效果，加之在CS版本中提供了可用滤镜效果的缩略图预览，让这个实用的工具用起来更加方便：接着我们添加一些波浪线条来营造虚幻的意境，可以用笔刷或者钢笔绘制一些曲线，当然也可以用渐变工具制作，只要达到下图中渐隐效果即可。事实上我们只需要做出其中一条就可以了，然后复制图层调整其透明度、角度、扭曲制作出其它的线条。这里使用的颜色还是推荐使用粉红，为了区别于花朵的颜色，可以把线条的粉红明度调大一点。在图片的右边，我利用Tamuz字体添加了一个修饰符号，效果如下：如果对以上操作有疑问，可以下载QuickTime演示影片观看！

在图片上添加BLOG标题

Blog的标题反映了你网站的内容主题，其文字组织因人而异，一般还会加上一个图标或LOGO，毕竟每个人都想自己的Blog与众不同，有一些标志性的元素，在这里我就简单的选用一个仙人掌标志：下面是一些关于字体或修饰符号的资源链接：Minion修饰符和Tamuz字体Adobe提供的修饰性字体一系列免费的Dingbats字体最终的界面设计效果

至今为止，不论是在导航按钮还是顶部图片的制作，我们都还没有遇到什么棘手的难题。现在让我们把做出来的素材整合在一起，拼合成一张最终的界面效果。这已经是界面设计的最后一个阶段了，所有若还有什么可添加的修饰元素，最好都在界面效果图中体现出来。在我的示例页面中，文章标题和友情链接的前面我都用精致的图标进行修饰，效果看起来还可以，当然你们可以选择自己喜欢的素材替换，最好也能在设计过程中体会到乐趣！

CSS混沌初开V：侧边栏导航菜单的实现首先对教程的第四部分作一点补充。有人建议Blog的标题最好使用H1标签，以文本的形式表现标题内容，原因是不论是在CSS关闭的情况下，还是对于搜索引擎的抓取，H1标签结合文本的形式都具有更好的可访问性。这个提议很有道理，很多人也是这么做的，所以我也建议大家对之前的代码进行调整。若使用H1标签来实现Blog标题，又想保持原来标题位置的图片的话，那么就有必要了解一下CSS中很经典的图像替换文本技术。简单点说就是在XHTML中包含了文本，并为其设置背景图片，但是要通过CSS“隐藏”文本而仅仅显示背景图片。图像替换文本技术这个技术有时候我们也称之为文本替换或图像替换，其强调的核心是在HTML代码中我们使用文本，然后通过一些方法将文本“隐藏”，而仅显示背景或其它形式的图片，这样在保证可访问性的同时，也使得页面因图像的应用而更加美观。比如我们可以将图片设置为背景，让后利用text-indent使文本有足够的缩进实现隐藏，代码如下：h1{

width:692px;

height:90px;

text-indent:-9999px;

background:url(images/header.jpg);

margin:0;

padding:0;

}其中的width和height是必须定义的，且需和背景图片的尺寸保持一致。text-align:center被转移到了body标签中，这样页面中所有的内容都被定义为居中显示，而那些不需要居中的内容，如文章正文，我们可以再添加text-align:left进行覆盖。当然对于外围容器而言，我们利用margin:0pxauto使其在水平方向上保持在页面的中部。导航菜单的实现首先定义导航外围容器的样式：#left{

width:178px;

}现在外围容器我们只要简单的定义其宽度，并赋予left的id名。在left容器中，我们添加一个名为navcontainer的子容器来放置导航菜单。实现导航的标签推荐使用无序列表ul，通过CSS我们可以改变其外观和形式。HTML结构如下：<divid="navcontainer">

<ul>

<li><ahref="#">Home</a></li>

<li><ahref="#">Aboutme</a></li>

<li><ahref="#">ximicc</a></li>

<li><ahref="#">Articles</a></li>

<li><ahref="#">Photoroll</a></li>

</ul>

</div>ul和li标签构建了一个简单的项目列表，其项目符号默认为小圆点，这是我们不需要的。利用CSS可以去掉那些小圆点，并用背景图片的形式替换以我们制作好的图标：#navcontainer{

width:178px;

}#navcontainerul{

margin:0;

padding:0;

list-style-type:none;

font:bold12px/22pxVerdana,Arial,Helvetica,sans-serif;

text-indent:20px;

letter-spacing:1px;

border-bottom:1pxsolid#fff;

}第一段代码还是定义导航容器的宽度，其值与left容器相同。第二段代码主要用于改变列表的外观，margin和padding确保导航项目的周围没有空隙，并去除了列表项默认的缩进，list-style-type则定义了列表的项目符号为无。text-indent使文本左边空出一定的空间，以便在之后的步骤中定义背景图片，并保证背景图不会被文本遮盖。最后一行代码在每个导航项目的底部生成一条白线，兼具美化和分界的功能。接下来是链接外观的定义：#navcontainera{

display:block;

width:178px;

height:22px;

}以上代码是对导航内a标签的CSS定义，作用于导航中的每个链接元素。display:block将链接对象转换为块级元素，然后再定义其宽和高，使得链接能具有类似按钮一样矩形的触发区域，并且让我们可以利用伪类a:hover来定义鼠标经过链接时的翻转效果，如在第二段代码中展示的简单的改变背景色或背景图片：#navcontainera:link,#navcontainera:visited{

background:url(images/bg_navbutton.gif);

color:#5C604D;

text-decoration:none;

}#navcontainera:hover{

background:url(images/bg_navbutton_over.gif);

color:#A5003B;

text-decoration:none;

}第一段代码定义了链接文本的颜色，并设置text-decoration属性为none来去除链接默认的下划线。导航的设计往往要求简洁、明了，并且具有很强的指示性，所以我在这里定义了一个额外的样式#current来表现当前页面处于导航中的哪个项目：#navcontainerlia#current{

background:url(images/bg_navbutton_over.gif);

color:#A5003B;

text-decoration:none;

}名为current的样式针对的是列表项目li中的链接元素，其属性的定义与链接的hover状态样式是一样的，现在我们要做的事情就是把这个样式应用到HTML中：<divid="navcontainer">

<ul>

<li><ahref="#"id="current">Home</a></li>

<li><ahref="#">Aboutme</a></li>

<li><ahref="#">Contactme</a></li>

<li><ahref="#">Articles</a></li>

<li><ahref="#">Photoroll</a></li>

</ul>

</div>现在的current样式是应用在第一个li上，也就是浏览器解析后“Home”菜单较之其它的菜单项目有其独特的外观，表明当前的页面是属于“Home”这里栏目的。当然页面变化了，current样式应用的li对象也就不一样了。

CSS混沌初开IV：页面DIV布局解构在前三讲的教程中我们已经完成了网页界面设计的工作，从本节开始，我们将关注如何对效果图进行解构，并初步拟定网页文件的DIV结构。首先我们必须明确几个问题，比如设计好的界面应该划分成几块？每块对应网页中的哪部分内容？只有对这些问题有了概念之后，我们才能开始进行切片和导出的操作。如果对页面构建的整个流程很熟悉，那么以上几个问题并没有太大的难度，可能你在PS中设计素材的时候就已经开始考虑之后的DIV划分了。当然，我们是要有一定的应变能力，合理的组织CSS和XHTML，让最终出炉的网页具有更好的灵活性和可访问性。本例中页面模块划分的规划页面顶部（theheader）；左侧边栏（theleft）；主体内容（thecontent）；页脚（thefooter）；必须进行切片并导出JPF或GIF的几块区域顶部图片（header）；默认导航图片（bg_navbutton）翻转导航图片（bg_navbutton_over）友情链接图标（bullet_extlink）文章标题图标（bullet_title）也许你会想：“那背景图片呢?”我没有把它罗列在其中，因为背景图片比较特殊，不论在何种分辨率下我们都要保持主体内容的居中，所以我们需要一种更聪明的方法。这是我们要导出的背景图片，它的尺寸是1600X5px，应该够用了，除非你拥有Apple公司30英寸的超宽屏显示器。利用CSS定义页面的背景下面的CSS代码可以让我们的页面背景保持居中显示：body{

background:#F7F7F6url(images/background.gif)repeat-y50%0;

background-attachment:fixed;

}背景图片只有5px高度，所以我们将其设置为纵向平铺，然后利用参数50%使其水平居中，参数fixed的用处是让背景不随内容的滚动而滚动，它是“凝固”的。这里的选择符我们使用body，因为背景效果是针对整张页面而言的。构建页面的DIV结构首先来看一下顶部版块的CSS定义：#header{

text-align:center;

}顶部版块的样式我们使用id选择符，注意在同一个文档中id选择符必须是唯一的。网页的顶部也需要居中，这也是我们为什么定义text-align的原因。下面这段代码我们要添加在body标签之间：<divid="header">

<imgsrc="images/header.jpg"alt="ximicc"width="692"height="90"/>

</div>你可能也注意到了，当顶部图片应用到网页中的时候，其上边缘和浏览器边界之间有一定的间隙，所以在这里我们要用margin和padding进行完善：body{

background:#F7F7F6url(images/background.gif)repeat-y50%0;

background-attachment:fixed;

margin:0;

padding:0;

}如果你对以上涉及的CSS还不是很熟悉的话，这个入门教程（英文的，节哀...）建议你去看一下，相信会有很大的帮助。

CSS混沌初开VI：正文与图片的混排现在我们可以开始在网页中添加内容了，在后续教程中将会介绍友情链接版块以及页脚的制作。首先在CSS中添加一个id选择符，在其中定义一个宽度值514px(692-178)：#content{

width:514px;

float:left;

}因为导航菜单浮动在页面主体的左边，所以我们要在#left中添加一条float:left语句，#content中的左浮动是针对其外围容器的，解析之后它将显示在导航右边的正文版块：#left{

width:178px;

float:left;

}接下来在XHTML中添加如下代码：<divid="content">thisistheright</div>如果你对上面的CSS和XHTML组织感到疑惑，下面的教程可能会对你有所帮助：CSS中的Float属性入门浮动属性Float的应用你会发现正文的内容跟导航菜单贴得很紧，我们可以利用padding来增加一点间隙：#content{

width:479px;

float:left;

padding-top:15px;

padding-right:0;

padding-bottom:10px;

padding-left:20px;

}也可以将代码简化成：[/code]#content{

width:479px;

float:left;

padding:15px010px20px;

}

[/code]不论是padding还是margin，若其后跟着四个数值，对应的边缘顺序是上右下左，即顺时针方向。大家会发现现在#container中定义的宽度由原来的514变成了479，因为我们为了让正文文本与左右边框空出一点距离，左边缘用padding实现，而右边缘因为整个DIV是左浮动的，所以我们直接将DIV的宽度缩减15px，所以width的值就变成了514-20-15=479px。你可能会疑问：“为什么不直接使用"width:494px"和"padding-right:15px"呢？”刚开始的时候我也是这么做的，出来的效果在Safari,FireFox和Mozilla还算正常，但在IE中就不行了，正文版块跳到了导航的下面，好像右边没有足够的空间容纳下正文DIV，具体问题出在哪里我也说不清楚，可能也是IE的一个Bug吧。添加正文的文章标题先来看一下主内容版块的结构：我们把文章的标题放在H2标签中：<h2>Thisisthetitle</h2>针对文章标题的CSS定义如下：#contenth2{

font:normal18pxGeorgia,TimesNewRoman,Times,serif;

color:#80866A;

background:transparenturl(images/bullet_title.gif)no-repeat;

width:454px;

padding:00030px;

margin:0;

}这里我们使用#contenth2的选择符组合，当然也可以直接对H2标签进行定义，但是会对页面中所有的H2元素都起作用。这个CSS样式的定义中，除了常规的字体集、颜色、字号之外，还利用padding属性在标题文本左边空出30px的缩进，目的是不要遮盖背景图片。背景background属性中，除了图片的路径及其平铺方式，还定义了其背景色为透明transparent，使整个标题更好的与其它元素融合添加正文文本下面一个class类.text定义了正文文字的样式：.text{

font:11px/18pxVerdana,Arial,Helvetica,sans-serif;

color:#5B604C;

margin-bottom:10px;

}与id不同的是，class类可以在一张页面中重复使用，里面的属性比较简单，需要补充一下的是，11px/18px表示字体大小是11px，行高是18px。在XHTML中，我们添加一个段落标签P来放置文本，并应用.text样式：<pclass="text">Herecomesthetext</p>在正文中添加混排图像下面是应用在图像上的样式：.imageright{

float:right;

padding:7px;

background-color:#ffffff;

border:1pxsolid#bac1a3;

}这里我们还是使用class类，因为以后可能还会用到它。float:right让图片在文本块中居右，而白色的背景和四边均为7px的padding，使得图片的四周有了类似7像素白边的效果，目的是让图片内容与边框保持7px的间距。而真正的边框由border定义，1像素实线。如果在文本块中有居左的图片，我们可以再添加一个名为.imageleft的class类，具体的属性设置只要把float:right改成float:left就可以了。CSS混沌初开VII：页脚的构建在开始第七部分的教程之前，我要先纠正一个小错误。之前在添加正文内容时，我把它放在了一个DIV容器中，事实上如果我们用段落标签P作容器可以达到相同的效果，而且当CSS关闭时也能正常显示。用P标签来实现的话，还可以用margin来控制段落的上、下边距，也就不需要什么换行标签了。首先要提醒大家的是，相对于表格布局方式，CSS中页脚的实现有着很大的区别。遗憾的是Safari作为一个新生浏览器，其对Web标准的支持还不是很完善，比如min-width和min-height属性在Safari中还没能得到良好的支持，但是页脚的实现我们往往需要用到它们。在继续本节教程之前，希望大家去了解一下这篇BobbyVanDerSluis文章，它对CSS中的垂直定位和页脚实现作了很到位的讲解。首先还是要先明确一下文档的DIV结构，之前制作的内容比如顶部、导航、正文等我们都封装到一个id名为container的DIV中，这组容器标签紧跟在body标签之后，接着就是一个id名为footer的页脚容器，代码如下：<html>

...

<body>

<divid="container">...</div>

<divid="footer">...</div>

</body>

</html>页脚DIV的CSS设置如下：#footer{

margin:0pxauto;

position:relative;

background-color:#717F51;

border-top:9pxsolid#F7F7F6;

width:692px;

padding:5px0;

clear:both;

}我们为页脚设置暗绿色的背景以及9px的上边框，宽度定义为692px。Clear属性用于清除浮动，简单点说就是在其左边或右边不允许有任何浮动元素。margin:0pxauto的语法在之前的教程中已经出现过了，其作用就是让页脚在页面中居中显示。为了不让页脚文字和边框贴得太近，我们用padding在上、下空出5px的填充空间。接下来为页脚中的文字和链接定义样式：#footerh2{

maring:0;

text-align:center;

font:normal10pxVerdana,Arial,Helvetica,sans-serif;

color:#D3D8C4;

}

#footerh2a:visited,#footerh2a:link{

color:#D3D8C4;

text-decoration:none;

border-bottom:1pxdotted#D3D8C4;

}

#footerh2a:hover{

color:#F7F7F6;

text-decoration:none;

border-bottom:none;

background-color:#A5003B;

}页脚中的文字我们放置到H2标签中：<divid="footer"><h2>....</h2></div>上面这行代码我们添加在名为container的DIV闭合标签后面，也即是在body的闭合标签之前。接下来我们要添加一段BobbyVanDerSluis建议采用的JS脚本，让页脚在Safari浏览器中也能固定在浏览器底部。确保你使用的ID名跟在JS中定义的函数名保持一致。完成JS的添加后，如果你在浏览器中预览，你会发现页脚并没有显示出来。这可能是因为有两个浮动容器(#leftand#content)都需要进行浮动清除，在的文章中有很详细的介绍。我们需要添加下面的代码进行修正，首先添加一个用于清除浮动的DIV：<divclass="clear"></div>然后为其定义CSS：.clear{

clear:both;

}

CSS混沌初开VIII：侧边栏友情链接这是本教程的最后一部分，讲解如何实现友情链接版块。需要说明的是，这部分我们将把样式表转换为外联式来实现CSS样式的设定。首先是XHTML代码：<divid="favlinks">

<h2>MyFavoriteSites</h2>

<ulclass="extlinks">

<li><ahref="/">Stopdesign</a></li>

<li><ahref="/">SimpleBits</a></li>

<li><ahref="/">Mezzoblue</a></li>

<li><ahref="/">Ximicc</a></li>

</ul>

</div>我们把所有的链接放置在一个名为fav的DIV容器中，并将在CSS中定义其width、margin和padding等属性。栏目标题利用H2标签实现，而链接链表则还是用无序列表ul来实现。接下来定义favlinks容器的样式：#favlinks{

width:163px;

padding-left:15px;

margin-top:10px;

}其中定义的三个属性都比较简单，你可能会注意到width值与导航菜单的宽度178不相等，原因仍然是padding-left中定义了15px的内填充，所以其宽度值应该是178-15=163px。如果你对此不是很理解，建议你去参考一些介绍CSS中盒模型原理的文章。下面是栏目标题文字的CSS定义：#favlinksh2{

font:normal16pxGeorgia,TimesNewRoman,Times,serif;

color:#5C604D;

margin:0010px0;

padding:0;

}除了设置文字的字体和颜色之外，padding和margin的定义也是必须的，因为如果不明确指定的话，栏目标题和链接列表之间的间隔可能会不可预期，在这里我直接用margin属性定义了10px的下边距。无序列表ul的CSS定义：#favlinksul{

margin:0;

padding:0;

list-style-type:none;

}这里的属性设置与第五部分教程中实现导航的ul设置一样，主要是隐藏了默认的小圆点项目符号，并把边距和填充设置为0。为列表中各个链接添加图标：ul.extlinksli{

background:url(images/bullet_extlink.gif)no-repeat03px;

font:normal11px/16pxVerdana,Arial,Helvetica,sans-serif;

padding-left:12px;

}在XHTML中我们把名为extlinks的class类应用在了ul标签上，所以这里用ul.extlinksli的选择符组合来定义.Extlinks下级中的li元素样式。图标还是采用背景的方式实现，属性中为其定义了坐标，即Y轴方向下移3px，目的是为了让图标与其后的链接文字实现更好的对齐。Padding中只定义了一个左填充，防止链接文字与图标产生重叠。链接样式的定义：.extlinksa:link{

color:#A5003B;

text-decoration:none;

border-bottom:1pxdotted#A5003B;

}.extlinksa:visited{

color:#6F2D47;

text-decoration:none;

border-bottom:1pxdotted#959E79;

}.extlinksa:hover{

background-color:#C3C9B1;

color:#A5003B;

text-decoration:none;

border-bottom:1pxsolid#A5003B;

}在鼠标经过的状态中，除了背景色外，我们还用边框属性定义了一条1px的实线下边框，相应的也就需要设置doc属性来消除默认的链接下划线。关于字体的定义不是必须的，因为在li标签的CSS中已经体现过了。对访问之后的链接，我们将文字及下边框的颜色作了细微的淡化，使其不会那么显眼，并提示访问者这个链接你已经点击过了。定义链接样式的时候，注意四个链接转台的顺序，正确的应该是LVHA，否则鼠标经过等效果可能会不能正常显示，这里有一种很好很有趣的方法希望能帮你牢记这个顺序：LOVE/HATE。创建外部样式表现在所有的界面设计和页面构建工作已经完成了，还剩下最后一项工作。在本教程的学习中，你可能会发现我经常使用内联样式，事实上在很多人的概念中外部样式表才是王道，我们应该把CSS样式定义在一个单独的样式表文件中，然后与网页文档连接起来。现在我们可以把之前的样式定义剪切出来，粘贴到一个新文档中，命名为ximicc.css。连接外部样式表<linkrel="stylesheet"type="text/css"media="screen"href="ximicc.css"/>因为这里的样式我们只要显示在电脑屏幕上，所以连接代码里的media参数设置为screen，若需要打印页面，则把该参数设置为print会有更好的打印效果。附录资料:不需要的可以自行删除Excel表格的35招必学秘技一、让不同类型数据用不同颜色显示在工资表中，如果想让大于等于2000元的工资总额以“红色”显示，大于等于1500元的工资总额以“蓝色”显示，低于1000元的工资总额以“棕色”显示，其它以“黑色”显示，我们可以这样设置。1.打开“工资表”工作簿，选中“工资总额”所在列，执行“格式→条件格式”命令，打开“条件格式”对话框。单击第二个方框右侧的下拉按钮，选中“大于或等于”选项，在后面的方框中输入数值“2000”。单击“格式”按钮，打开“单元格格式”对话框，将“字体”的“颜色”设置为“红色”。2.按“添加”按钮，并仿照上面的操作设置好其它条件(大于等于1500，字体设置为“蓝色”；小于1000，字体设置为“棕色”)。3.设置完成后，按下“确定”按钮。看看工资表吧，工资总额的数据是不是按你的要求以不同颜色显示出来了。二、建立分类下拉列表填充项我们常常要将企业的名称输入到表格中，为了保持名称的一致性，利用“数据有效性”功能建了一个分类下拉列表填充项。1.在Sheet2中，将企业名称按类别(如“工业企业”、“商业企业”、“个体企业”等)分别输入不同列中，建立一个企业名称数据库。2.选中A列(“工业企业”名称所在列)，在“名称”栏内，输入“工业企业”字符后，按“回车”键进行确认。仿照上面的操作，将B、C……列分别命名为“商业企业”、“个体企业”……3.切换到Sheet1中，选中需要输入“企业类别”的列(如C列)，执行“数据→有效性”命令，打开“数据有效性”对话框。在“设置”标签中，单击“允许”右侧的下拉按钮，选中“序列”选项，在下面的“来源”方框中，输入“工业企业”，“商业企业”，“个体企业”……序列(各元素之间用英文逗号隔开)，确定退出。再选中需要输入企业名称的列(如D列)，再打开“数据有效性”对话框，选中“序列”选项后，在“来源”方框中输入公式：=INDIRECT(C1)，确定退出。4.选中C列任意单元格(如C4)，单击右侧下拉按钮，选择相应的“企业类别”填入单元格中。然后选中该单元格对应的D列单元格(如D4)，单击下拉按钮，即可从相应类别的企业名称列表中选择需要的企业名称填入该单元格中。提示：在以后打印报表时，如果不需要打印“企业类别”列，可以选中该列，右击鼠标，选“隐藏”选项，将该列隐藏起来即可。三、建立“常用文档”新菜单在菜单栏上新建一个“常用文档”菜单，将常用的工作簿文档添加到其中，方便随时调用。1.在工具栏空白处右击鼠标，选“自定义”选项，打开“自定义”对话框。在“命令”标签中，选中“类别”下的“新菜单”项，再将“命令”下面的“新菜单”拖到菜单栏。按“更改所选内容”按钮，在弹出菜单的“命名”框中输入一个名称(如“常用文档”)。2.再在“类别”下面任选一项(如“插入”选项)，在右边“命令”下面任选一项(如“超链接”选项)，将它拖到新菜单(常用文档)中，并仿照上面的操作对它进行命名(如“工资表”等)，建立第一个工作簿文档列表名称。重复上面的操作，多添加几个文档列表名称。3.选中“常用文档”菜单中某个菜单项(如“工资表”等)，右击鼠标，在弹出的快捷菜单中，选“分配超链接→打开”选项，打开“分配超链接”对话框。通过按“查找范围”右侧的下拉按钮，定位到相应的工作簿(如“工资.xls”等)文件夹，并选中该工作簿文档。重复上面的操作，将菜单项和与它对应的工作簿文档超链接起来。4.以后需要打开“常用文档”菜单中的某个工作簿文档时，只要展开“常用文档”菜单，单击其中的相应选项即可。提示：尽管我们将“超链接”选项拖到了“常用文档”菜单中，但并不影响“插入”菜单中“超链接”菜单项和“常用”工具栏上的“插入超链接”按钮的功能。四、制作“专业符号”工具栏在编辑专业表格时，常常需要输入一些特殊的专业符号，为了方便输入，我们可以制作一个属于自己的“专业符号”工具栏。1.执行“工具→宏→录制新宏”命令，打开“录制新宏”对话框，输入宏名?如“fuhao1”?并将宏保存在“个人宏工作簿”中，然后“确定”开始录制。选中“录制宏”工具栏上的“相对引用”按钮，然后将需要的特殊符号输入到某个单元格中，再单击“录制宏”工具栏上的“停止”按钮，完成宏的录制。仿照上面的操作，一一录制好其它特殊符号的输入“宏”。2.打开“自定义”对话框，在“工具栏”标签中，单击“新建”按钮，弹出“新建工具栏”对话框，输入名称——“专业符号”，确定后，即在工作区中出现一个工具条。切换到“命令”标签中，选中“类别”下面的“宏”，将“命令”下面的“自定义按钮”项拖到“专业符号”栏上(有多少个特殊符号就拖多少个按钮)。3.选中其中一个“自定义按钮”，仿照第2个秘技的第1点对它们进行命名。4.右击某个命名后的按钮，在随后弹出的快捷菜单中，选“指定宏”选项，打开“指定宏”对话框，选中相应的宏(如fuhao1等)，确定退出。重复此步操作，将按钮与相应的宏链接起来。5.关闭“自定义”对话框，以后可以像使用普通工具栏一样，使用“专业符号”工具栏，向单元格中快速输入专业符号了。五、用“视面管理器”保存多个打印页面有的工作表，经常需要打印其中不同的区域，用“视面管理器”吧。1.打开需要打印的工作表，用鼠标在不需要打印的行(或列)标上拖拉，选中它们再右击鼠标，在随后出现的快捷菜单中，选“隐藏”选项，将不需要打印的行(或列)隐藏起来。2.执行“视图→视面管理器”命令，打开“视面管理器”对话框，单击“添加”按钮，弹出“添加视面”对话框，输入一个名称(如“上报表”)后，单击“确定”按钮。3.将隐藏的行(或列)显示出来，并重复上述操作，“添加”好其它的打印视面。4.以后需要打印某种表格时，打开“视面管理器”，选中需要打印的表格名称，单击“显示”按钮，工作表即刻按事先设定好的界面显示出来，简单设置、排版一下，按下工具栏上的“打印”按钮，一切就OK了。六、让数据按需排序如果你要将员工按其所在的部门进行排序，这些部门名称既的有关信息不是按拼音顺序，也不是按笔画顺序，怎么办?可采用自定义序列来排序。1.执行“格式→选项”命令，打开“选项”对话框，进入“自定义序列”标签中，在“输入序列”下面的方框中输入部门排序的序列(如“机关,车队,一车间,二车间,三车间”等)，单击“添加”和“确定”按钮退出。2.选中“部门”列中任意一个单元格，执行“数据→排序”命令，打开“排序”对话框，单击“选项”按钮，弹出“排序选项”对话框，按其中的下拉按钮，选中刚才自定义的序列，按两次“确定”按钮返回，所有数据就按要求进行了排序。七、把数据彻底隐藏起来工作表部分单元格中的内容不想让浏览者查阅，只好将它隐藏起来了。1.选中需要隐藏内容的单元格(区域)，执行“格式→单元格”命令，打开“单元格格式”对话框，在“数字”标签的“分类”下面选中“自定义”选项，然后在右边“类型”下面的方框中输入“；；；”(三个英文状态下的分号)。2.再切换到“保护”标签下，选中其中的“隐藏”选项，按“确定”按钮退出。3.执行“工具→保护→保护工作表”命令，打开“保护工作表”对话框，设置好密码后，“确定”返回。经过这样的设置以后，上述单元格中的内容不再显示出来，就是使用Excel的透明功能也不能让其现形。提示：在“保护”标签下，请不要清除“锁定”前面复选框中的“∨”号，这样可以防止别人删除你隐藏起来的数据。八、让中、英文输入法智能化地出现在编辑表格时，有的单元格中要输入英文，有的单元格中要输入中文，反复切换输入法实在不方便，何不设置一下，让输入法智能化地调整呢?选中需要输入中文的单元格区域，执行“数据→有效性”命令，打开“数据有效性”对话框，切换到“输入法模式”标签下，按“模式”右侧的下拉按钮，选中“打开”选项后，“确定”退出。以后当选中需要输入中文的单元格区域中任意一个单元格时，中文输入法(输入法列表中的第1个中文输入法)自动打开，当选中其它单元格时，中文输入法自动关闭。九、让“自动更正”输入统一的文本你是不是经常为输入某些固定的文本，如《电脑报》而烦恼呢?那就往下看吧。1.执行“工具→自动更正”命令，打开“自动更正”对话框。2.在“替换”下面的方框中输入“pcw”(也可以是其他字符，“pcw”用小写)，在“替换为”下面的方框中输入“《电脑报》”，再单击“添加”和“确定”按钮。3.以后如果需要输入上述文本时，只要输入“pcw”字符?此时可以不考虑“pcw”的大小写?，然后确认一下就成了。十、在Excel中自定义函数Excel函数虽然丰富，但并不能满足我们的所有需要。我们可以自定义一个函数，来完成一些特定的运算。下面，我们就来自定义一个计算梯形面积的函数：1.执行“工具→宏→VisualBasic编辑器”菜单命令(或按“Alt+F11”快捷键)，打开VisualBasic编辑窗口。2.在窗口中，执行“插入→模块”菜单命令，插入一个新的模块——模块1。3.在右边的“代码窗口”中输入以下代码：FunctionV(a,b,h)V=h*(a+b)/2EndFunction4.关闭窗口，自定义函数完成。以后可以像使用内置函数一样使用自定义函数。提示：用上面方法自定义的函数通常只能在相应的工作簿中使用。十一、表头下面衬张图片为工作表添加的背景，是衬在整个工作表下面的，能不能只衬在表头下面呢?1.执行“格式→工作表→背景”命令，打开“工作表背景”对话框，选中需要作为背景的图片后，按下“插入”按钮，将图片衬于整个工作表下面。2.在按住Ctrl键的同时，用鼠标在不需要衬图片的单元格(区域)中拖拉，同时选中这些单元格(区域)。3.按“格式”工具栏上的“填充颜色”右侧的下拉按钮，在随后出现的“调色板”中，选中“白色”。经过这样的设置以后，留下的单元格下面衬上了图片，而上述选中的单元格(区域)下面就没有衬图片了(其实，是图片被“白色”遮盖了)。提示?衬在单元格下面的图片是不支持打印的。十二、用连字符“&”来合并文本如果我们想将多列的内容合并到一列中，不需要利用函数，一个小小的连字符“&”就能将它搞定(此处假定将B、C、D列合并到一列中)。1.在D列后面插入两个空列(E、F列)，然后在D1单元格中输入公式：=B1&C1&D1。2.再次选中D1单元格，用“填充柄”将上述公式复制到D列下面的单元格中，B、C、D列的内容即被合并到E列对应的单元格中。3.选中E列，执行“复制”操作，然后选中F列，执行“编辑→选择性粘贴”命令，打开“选择性粘贴”对话框，选中其中的“数值”选项，按下“确定”按钮，E列的内容(不是公式)即被复制到F列中。4.将B、C、D、E列删除，完成合并工作。提示：完成第1、2步的操作，合并效果已经实现，但此时如果删除B、C、D列，公式会出现错误。故须进行第3步操作，将公式转换为不变的“值”。生成绩条常有朋友问“如何打印成绩条”这样的问题，有不少人采取录制宏或VBA的方法来实现，这对于初学者来说有一定难度。出于此种考虑，我在这里给出一种用函数实现的简便方法。此处假定学生成绩保存在Sheet1工作表的A1至G64单元格区域中，其中第1行为标题，第2行为学科名称。1.切换到Sheet2工作表中，选中A1单元格，输入公式：=IF(MOD(ROW()，3)=0，″″，IF(0MOD?ROW()，3(=1，sheet1！Aū，INDEX(sheet1！$A：$G，INT(((ROW()+4)/3)+1)，COLUMN())))。2.再次选中A1单元格，用“填充柄”将上述公式复制到B1至G1单元格中；然后，再同时选中A1至G1单元格区域，用“填充柄”将上述公式复制到A2至G185单元格中。至此，成绩条基本成型，下面简单修饰一下。3.调整好行高和列宽后，同时选中A1至G2单元格区域(第1位学生的成绩条区域)，按“格式”工具栏“边框”右侧的下拉按钮，在随后出现的边框列表中，选中“所有框线”选项，为选中的区域添加边框(如果不需要边框，可以不进行此步及下面的操作)。4.同时选中A1至G3单元格区域，点击“常用”工具栏上的“格式刷”按钮，然后按住鼠标左键，自A4拖拉至G186单元格区域，为所有的成绩条添加边框。按“打印”按钮，即可将成绩条打印出来。十四、Excel帮你选函数在用函数处理数据时，常常不知道使用什么函数比较合适。Excel的“搜索函数”功能可以帮你缩小范围，挑选出合适的函数。执行“插入→函数”命令，打开“插入函数”对话框，在“搜索函数”下面的方框中输入要求(如“计数”)，然后单击“转到”按钮，系统即刻将与“计数”有关的函数挑选出来，并显示在“选择函数”下面的列表框中。再结合查看相关的帮助文件，即可快速确定所需要的函数。十五、同时查看不同工作表中多个单元格内的数据有时，我们编辑某个工作表(Sheet1)时，需要查看其它工作表中(Sheet2、Sheet3……)某个单元格的内容，可以利用Excel的“监视窗口”功能来实现。执行“视图→工具栏→监视窗口”命令，打开“监视窗口”，单击其中的“添加监视”按钮，展开“添加监视点”对话框，用鼠标选中需要查看的单元格后，再单击“添加”按钮。重复前述操作，添加其它“监视点”。以后，无论在哪个工作表中，只要打开“监视窗口”，即可查看所有被监视点单元格内的数据和相关信息。十六、为单元格快速画边框在Excel2002以前的版本中，为单元格区域添加边框的操作比较麻烦，Excel2002对此功能进行了全新的拓展。单击“格式”工具栏上“边框”右侧的下拉按钮，在随后弹出的下拉列表中，选“绘图边框”选项，或者执行“视图→工具栏→边框”命令，展开“边框”工具栏。单击工具栏最左侧的下拉按钮，选中一种边框样式，然后在需要添加边框的单元格区域中拖拉，即可为相应的单元格区域快速画上边框。提示：①如果画错了边框，没关系，选中工具栏上的“擦除边框”按钮，然后在错误的边框上拖拉一下，就可以清除掉错误的边框。②如果需要画出不同颜色的边框，可以先按工具栏右侧的“线条颜色”按钮，在随后弹出的调色板中选中需要的颜色后，再画边框即可。③这一功能还可以在单元格中画上对角的斜线。十七、控制特定单元格输入文本的长度你能想象当你在该输入四位数的单元格中却填入了一个两位数，或者在该输入文字的单元格中你却输入了数字的时候，Excel就能自动判断、即时分析并弹出警告，那该多好啊!要实现这一功能，对Excel来说，也并不难。例如我们将光标定位到一个登记“年份”的单元格中，为了输入的统一和计算的方便，我们希望“年份”都用一个四位数来表示。所以，我们可以单击“数据”菜单的“有效性”选项。在“设置”卡片“有效性条件”的“允许”下拉菜单中选择“文本长度”。然后在“数据”下拉菜单中选择“等于”，且“长度”为“4”。同时，我们再来到“出错警告”卡片中，将“输入无效数据时显示的出错警告”设为“停止”，并在“标题”和“错误信息”栏中分别填入“输入文本非法!”和“请输入四位数年份。”字样。很显然，当如果有人在该单元格中输入的不是一个四位数时，Excel就会弹出示的警告对话框，告诉你出错原因，并直到你输入了正确“样式”的数值后方可继续录入。神奇吧?其实，在Excel的“数据有效性”判断中，还有许多特殊类型的数据格式可选，比如“文本类型”啊，“序列大小”啊，“时间远近”啊，如你有兴趣，何不自作主张，自己设计一种检测标准，让你的Excel展示出与众不同的光彩呢。十八、成组填充多张表格的固定单元格我们知道每次打开Excel，软件总是默认打开多张工作表。由此就可看出Excel除了拥有强大的单张表格的处理能力，更适合在多张相互关联的表格中协调工作。要协调关联，当然首先就需要同步输入。因此，在很多情况下，都会需要同时在多张表格的相同单元格中输入同样的内容。那么如何对表格进行成组编辑呢?首先我们单击第一个工作表的标签名“Sheet1”，然后按住Shift键，单击最后一张表格的标签名“Sheet3”(如果我们想关联的表格不在一起，可以按住Ctrl键进行点选)。此时，我们看到Excel的标题栏上的名称出现了“工作组”字样，我们就可以进行对工作组的编辑工作了。在需要一次输入多张表格内容的单元格中随便写点什么，我们发现，“工作组”中所有表格的同一位置都显示出相应内容了。但是，仅仅同步输入是远远不够的。比如，我们需要将多张表格中相同位置的数据统一改变格式该怎么办呢?首先，我们得改变第一张表格的数据格式，再单击“编辑”菜单的“填充”选项，然后在其子菜单中选择“至同组工作表”。这时，Excel会弹出“填充成组工作表”的对话框，在这里我们选择“格式”一项，点“确定”后，同组中所有表格该位置的数据格式都改变了。十九、改变文本的大小写在Excel中，为表格处理和数据运算提供最强大支持的不是公式，也不是数据库，而是函数。不要以为Excel中的函数只是针对数字，其实只要是写进表格中的内容，Excel都有对它编辑的特殊函数。例如改变文本的大小写。在Excel2002中，至少提供了三种有关文本大小写转换的函数。它们分别是：“=UPPER(源数据格)”，将文本全部转换为大写；“=LOWER(源数据格)”，将文本全部转换成小写；“=PROPER(源数据格)”，将文本转换成“适当”的大小写，如让每个单词的首字母为大写等。例如，我们在一张表格的A1单元格中输入小写的“excel”，然后在目标单元格中输入“=UPPER(A1)”，回车后得到的结果将会是“EXCEL”。同样，如果我们在A3单元格中输入“mr.weiwei”，然后我们在目标单元格中输入“=PROPER(A3)”，那么我们得到的结果就将是“Mr.Weiwei”了。二十、提取字符串中的特定字符除了直接输入外，从已存在的单元格内容中提取特定字符输入，绝对是一种省时又省事的方法，特别是对一些样式雷同的信息更是如此，比如员工名单、籍贯等信息。如果我们想快速从A4单元格中提取称谓的话，最好使用“=RIGHT(源数据格，提取的字符数)”函数，它表示“从A4单元格最右侧的字符开始提取2个字符”输入到此位置。当然，如果你想提取姓名的话，则要使用“=LEFT(源数据格，提取的字符数)”函数了。还有一种情况，我们不从左右两端开始，而是直接从数据中间提取几个字符。比如我们要想从A5单元格中提取“武汉”两个字时，就只须在目标单元格中输入“=MID(A5,4,2)”就可以了。意思是：在A5单元格中提取第4个字符后的两个字符，也就是第4和第5两个字。二十一、把基数词转换成序数词将英文的基数词转换成序数词是一个比较复杂的问题。因为它没有一个十分固定的模式：大多数的数字在变成序数词都是使用的“th”后缀，但大凡是以“1”、“2”、“3”结尾的数字却分别是以“st”、“nd”和“rd”结尾的。而且，“11”、“12”、“13”这3个数字又不一样，它们却仍然是以“th”结尾的。因此，实现起来似乎很复杂。其实，只要我们理清思路，找准函数，只须编写一个公式，就可轻松转换了。不信，请看：“=A2&IF(OR(VALUE(RIGHT(A2,2))={11,12,13}),″th″,IF(OR(VALUE(RIGHT(A2))={1,2,3,},CHOOSE(RIGHT(A2),″st″,″nd″,″rd″),″th″))”。该公式尽管一长串，不过含义却很明确：①如果数字是以“11”、“12”、“13”结尾的，则加上“th”后缀；②如果第1原则无效，则检查最后一个数字，以“1”结尾使用“st”、以“2”结尾使用“nd”、以“3”结尾使用“rd”；③如果第1、2原则都无效，那么就用“th”。因此，基数词和序数词的转换实现得如此轻松和快捷。二十二、用特殊符号补齐位数和财务打过交道的人都知道，在账面填充时有一种约定俗成的“安全填写法”，那就是将金额中的空位补齐，或者在款项数据的前面加上“$”之类的符号。其实，在Excel中也有类似的输入方法，那就是“REPT”函数。它的基本格式是“=REPT(“特殊符号”，填充位数)”。比如，我们要在中A2单元格里的数字结尾处用“#”号填充至16位，就只须将公式改为“=(A2&REPT(″#″,16-LEN(A2)))”即可；如果我们要将A3单元格中的数字从左侧用“#”号填充至16位，就要改为“=REPT(″#″,16-LEN(A3)))&A3”；另外，如果我们想用“#”号将A4中的数值从两侧填充，则需要改为“=REPT(″#″,8-LEN(A4)/2)&A4&REPT(″#″)8-LEN(A4)/2)”；如果你还嫌不够专业，要在A5单元格数字的顶头加上“$”符号的话，那就改为：“=(TEXT(A5,″$#,##0.00″(&REPT(″#″,16-LEN(TEXT(A5,″$#,##0.00″))))”，一定能满足你的要求。二十三、创建文本直方图除了重复输入之外，“REPT”函数另一项衍生应用就是可以直接在工作表中创建由纯文本组成的直方图。它的原理也很简单，就是利用特殊符号的智能重复，按照指定单元格中的计算结果表现出长短不一的比较效果。比如我们首先制作一张年度收支平衡表，然后将“E列”作为直方图中“预算内”月份的显示区，将“G列”则作为直方图中“超预算”的显示区。然后根据表中已有结果“D列”的数值，用“Wingdings”字体的“N”字符表现出来。具体步骤如下：在E3单元格中写入公式“=IF(D30,REPT(″n″,ROUND(D3*100,0)),″″)”，也拖动填充柄至G14。我们看到，一个没有动用Excel图表功能的纯文本直方图已展现眼前，方便直观，简单明了。二十四、计算单元格中的总字数有时候，我们可能对某个单元格中字符的数量感兴趣，需要计算单元格中的总字数。要解决这个问题，除了利用到“SUBSTITUTE”函数的虚拟计算外，还要动用“TRIM”函数来删除空格。比如现在A1单元格中输入有“howmanywords?”字样，那么我们就可以用如下的表达式来帮忙：“=IF(LEN(A1)=0,0,LEN(TRIM(A1))-LEN(SUBSTITUTE(TRIM(A1),″,″,″″))+1)”该式的含义是先用“SUBSTITUTE”函数创建一个新字符串，并且利用“TRIM”函数删除其中字符间的空格，然后计算此字符串和原字符串的数位差，从而得出“空格”的数量，最后将空格数+1，就得出单元格中字符的数量了。二十五、关于欧元的转换这是Excel2002中的新工具。如果你在安装Excel2002时选择的是默认方式，那么很可能不能在“工具”菜单中找到它。不过，我们可以先选择“工具”菜单中的“加载宏”，然后在弹出窗口中勾选“欧元工具”选项，“确定”后Excel2002就会自行安装了。完成后我们再次打开“工具”菜单，单击“欧元转换”，一个独立的专门用于欧元和欧盟成员国货币转换的窗口就出现了。与Excel的其他函数窗口一样，我们可以通过鼠标设置货币转换的“源区域”和“目标区域”，然后再选择转换前后的不同币种即可。所示的就是“100欧元”分别转换成欧盟成员国其他货币的比价一览表。当然，为了使欧元的显示更显专业，我们还可以点击Excel工具栏上的“欧元”按钮，这样所有转换后的货币数值都是欧元的样式了经在Excel中完成过上百张财务报表，也许你已利用Excel函数实现过上千次的复杂运算，也许你认为Excel也不过如此，甚至了无新意。但我们平日里无数次重复的得心应手的使用方法只不过是Excel全部技巧的百分之一。本专题从Excel中的一些鲜为人知的技巧入手，领略一下关于Excel的别样风情。一、让不同类型数据用不同颜色显示在工资表中，如果想让大于等于2000元的工资总额以“红色”显示，大于等于1500元的工资总额以“蓝色”显示，低于1000元的工资总额以“棕色”显示，其它以“黑色”显示，我们可以这样设置。1.打开“工资表”工作簿，选中“工资总额”所在列，执行“格式→条件格式”命令，打开“条件格式”对话框。单击第二个方框右侧的下拉按钮，选中“大于或等于”选项，在后面的方框中输入数值“2000”。单击“格式”按钮，打开“单元格格式”对话框，将“字体”的“颜色”设置为“红色”。2.按“添加”按钮，并仿照上面的操作设置好其它条件(大于等于1500，字体设置为“蓝色”；小于1000，字体设置为“棕色”)。3.设置完成后，按下“确定”按钮。看看工资表吧，工资总额的数据是不是按你的要求以不同颜色显示出来了。二、建立分类下拉列表填充项我们常常要将企业的名称输入到表格中，为了保持名称的一致性，利用“数据有效性”功能建了一个分类下拉列表填充项。1.在Sheet2中，将企业名称按类别(如“工业企业”、“商业企业”、“个体企业”等)分别输入不同列中，建立一个企业名称数据库。2.选中A列(“工业企业”名称所在列)，在“名称”栏内，输入“工业企业”字符后，按“回车”键进行确认。仿照上面的操作，将B、C……列分别命名为“商业企业”、“个体企业”……3.切换到Sheet1中，选中需要输入“企业类别”的列(如C列)，执行“数据→有效性”命令，打开“数据有效性”对话框。在“设置”标签中，单击“允许”右侧的下拉按钮，选中“序列”选项，在下面的“来源”方框中，输入“工业企业”，“商业企业”，“个体企业”……序列(各元素之间用英文逗号隔开)，确定退出。再选中需要输入企业名称的列(如D列)，再打开“数据有效性”对话框，选中“序列”选项后，在“来源”方框中输入公式：=INDIRECT(C1)，确定退出。4.选中C列任意单元格(如C4)，单击右侧下拉按钮，选择相应的“企业类别”填入单元格中。然后选中该单元格对应的D列单元格(如D4)，单击下拉按钮，即可从相应类别的企业名称列表中选择需要的企业名称填入该单元格中。提示：在以后打印报表时，如果不需要打印“企业类别”列，可以选中该列，右击鼠标，选“隐藏”选项，将该列隐藏起来即可。三、建立“常用文档”新菜单在菜单栏上新建一个“常用文档”菜单，将常用的工作簿文档添加到其中，方便随时调用。1.在工具栏空白处右击鼠标，选“自定义”选项，打开“自定义”对话框。在“命令”标签中，选中“类别”下的“新菜单”项，再将“命令”下面的“新菜单”拖到菜单栏。按“更改所选内容”按钮，在弹出菜单的“命名”框中输入一个名称(如“常用文档”)。2.再在“类别”下面任选一项(如“插入”选项)，在右边“命令”下面任选一项(如“超链接”选项)，将它拖到新菜单(常用文档)中，并仿照上面的操作对它进行命名(如“工资表”等)，建立第一个工作簿文档列表名称。重复上面的操作，多添加几个文档列表名称。3.选中“常用文档”菜单中某个菜单项(如“工资表”等)，右击鼠标，在弹出的快捷菜单中，选“分配超链接→打开”选项，打开“分配超链接”对话框。通过按“查找范围”右侧的下拉按钮，定位到相应的工作簿(如“工资.xls”等)文件夹，并选中该工作簿文档。重复上面的操作，将菜单项和与它对应的工作簿文档超链接起来。4.以后需要打开“常用文档”菜单中的某个工作簿文档时，只要展开“常用文档”菜单，单击其中的相应选项即可。提示：尽管我们将“超链接”选项拖到了“常用文档”菜单中，但并不影响“插入”菜单中“超链接”菜单项和“常用”工具栏上的“插入超链接”按钮的功能。四、制作“专业符号”工具栏在编辑专业表格时，常常需要输入一些特殊的专业符号，为了方便输入，我们可以制作一个属于自己的“专业符号”工具栏。1.执行“工具→宏→录制新宏”命令，打开“录制新宏”对话框，输入宏名?如“fuhao1”?并将宏保存在“个人宏工作簿”中，然后“确定”开始录制。选中“录制宏”工具栏上的“相对引用”按钮，然后将需要的特殊符号输入到某个单元格中，再单击“录制宏”工具栏上的“停止”按钮，完成宏的录制。仿照上面的操作，一一录制好其它特殊符号的输入“宏”。2.打开“自定义”对话框，在“工具栏”标签中，单击“新建”按钮，弹出“新建工具栏”对话框，输入名称——“专业符号”，确定后，即在工作区中出现一个工具条。切换到“命令”标签中，选中“类别”下面的“宏”，将“命令”下面的“自定义按钮”项拖到“专业符号”栏上(