这是一个教你如何一步一步学习建立基于CSS制作网站的开始，这个教程将由几个部分组成。第一部分是讲述如何在photoshop中制作导航按扭的；第二部分将讲述背景的制作，再下一个是讲述标题(header)和页面的设计规划的，在最后是CSS和XHTML的应用的执行。现在也许有些人想知道为什么在我的教程里要以导航按扭的制作来开始，呵呵，其实我最初的目的是要讲述一段关于这些简单按扭的制作方法的小教程的，但是即然这个想法开始了，为什么不做一个全面的讲解呢！建立一个像玻璃面一样的导航按扭在photoshop里新建一个RGB模式的文件，大小为178x122像素，背景色为白色，然后新建一个图层（起名为“button”），然后填充这个图层用灰色（#ececec），再建一个新的图层（起名为“highlight”），并画一个一个像素的白的加亮的线分别在左边上上边（用铅笔工具，1个像素的笔头）。用“减淡工具”（大小为20像素的笔刷，透明度为50%）将左侧的白线条减淡一些形成上下渐变的效果。新建一个图层（起名为“bullet”），画一堆像素小点用铅笔工具（1px,#727272）,当然你也可以按照自己的意愿来选择颜色和大小。用钢笔工具画一个类似于玻璃斜面效果的曲线路径（颜色为#d6d6d6）。好了，你已经做好了自己的按扭，没有什么难度吧？建立鼠标经过时效果建立鼠标经过时要显示的图像效果最简便的方法便是复制我们的图层，然后改变它的颜色。现在，你需要到每一个图层去它们的颜色来建立这个鼠标经过时的图像的效果，这是我在这个例子里用到的颜色设置：按扭的背景层：#bfe3ff曲线斜面层：#a5d1f3小像素点层：#e4001b下载这个教程中用到的photoShop源文件！了解这个系列教程的这些基本的知识是必需的！
今天我将带大家一起开始关于我们的基于CSS的网页制作的第二部分，这一部分是讲述关于改变一个适当的颜色配置的和为我们的网页制作一个漂亮的背景图案的，在第一部分我们落下了这个，所以在这儿补上。就像大家所知道的，我的最初的意图是给你们讲述一个小的如何用简单的方法制作漂亮的立体按扭的教程，，所以这个教程的第一部分可能对你来说有点儿单一，以下我们将讲述关于色彩方案的设计在这个教程的第二部分，这实际上来讲是我们的第一步，按扭的创建，背景的制作等。选择你的色彩方案无论如何，你都可能有一个领先，选择恰当的颜色配置是至关重要，它反映了你是谁，你喜欢什么等！实际上，解释给你，你选择什么或许不是至关重要的，尽管我总是努力遵循以下几个小的提示：1、使用至少一种能对比突现出来的颜色来用于强调在你的页面上，用它来做文本链接的颜色将是很显眼的，可见性就比较好。2、务必不要用太多的不同的颜色，否则你将以一个没有重点的混乱设计而告终。我最多只用3种颜色，两种相差不多的和一种高亮的。3、从这两种相差不多的当中，来通过明暗的变化而调节，如果你只用了不到3种颜色，那可能会看上去有一些单调的，尽管你也用了足够多的明暗变化。以下几种配色方案可能对你实际工作有所帮助：在photoshop中使用色彩饱和度的调节来观看你所选择的颜色的变化，你会发现，实际上上面的这些例子的颜色都是通过这个方法得到的以下我们再讲一下画像素图案现在是教大家画像素图案的时间！在photoShop中新建一个文件，大小为30x30像素，色彩模式为RGB，背景色可以是你想要的任意颜色，用铅笔工具画一些像素点，这是一些你可以开始时照着做的例子：花大量的时间来制作这些像素图案，实际上是一种通过不同的方法的尝试，任何我们所不知道的技巧只有通过亲自尝试自己的想法才会成为技巧。我所做的大多数网页都是先开始于背景图案的制作，选择一个接近于背景色的颜色，然后来画些像素点。如果我建立的背景图案是一些线，我可以在photoshop中把那个包含一条线的图层复制一份新的出来，然后向左或右或上下移动一点儿。或者再改变一下透明度和层选项等。这些放大的图案是真实的像素点的分布，被裁切开的右边正好又和左边相连从而铺开就构成了一个完整的循环。下一步我们将要讲述实际的页面框架的设计和规划，核心内容将是讲如何制作一个引人注目的页头和标题，包括标题的装饰，希望大家喜欢这些教程！下载这个教程中用到的源文件（photoshop格式）
终于到了我们CSS教程的第三部分，但在我的Blog上的第一第二部分仍然是很有用的，今天的这部分将是我们最后的一部分关于设计方面的，在这之后我们将再一步步的花时间来开始我们XHTML和CSS的讲述，这是网页最终结果的大概样子（点击小图可以看到大图）:我选择了粉红和绿的颜色做为按扭的普通和鼠标经过的状态颜色，可能会感觉有一点偏重于女性化的设计。今天我将做一个完整的讲述关于这个模板设计，你将会得到一些关于如何制作页面头部的知识，以及如何添加一个完全的像装饰一样的格调，以及介绍一些从哪里可以得到特别的创意和一些漂亮的字体的资源网站。建立页头的背景在第一和第二部分，我们制作了按扭并选择了我们要的颜色，现在轮到寻找一个包含了我们已经首选颜色的图片来制作我们的页对头部的背景了。从我的色板上也可以看出我们用到了绿色和粉红色，所以我决定用一种很富贵的亮粉色做为主色调背景，用一个浓的樱桃色做Banner，用一个绿的东西做标志。当我在我收集的图像中寻找时，我看中了这一张图片，因此我将这张图片从一个特别红的颜色改变为了一个更为适当的一个略带桃色的颜色，这个操作可以在photoshop中利用“调节”---“色相饱和度”来实现，改变红色的色相，使其色调+24下一步是选择一个更细的部分能包含我们要的适当的颜色，并且可以出现一个有趣的效果。并且在接下来我们还要用一些滤镜来实现进一步的效果。制作这个背景图片是需要一些创意的，而且要不断尝试你的想法，直到满意为止。这是我最后选中的我认为可以用来尝试一下的一部分图片。这里显示的图片当然只是简化了的一部分，实际开始时我用到的图片是一个大一点的（1600x1200px）,我添加了一个我喜欢的滤镜在它上面，在photoshopCS中可以用到好多生动的滤镜来实现我们的想法的。你也可以用别的滤镜来看看效果，这里我最好得到的图片：这个背景图片融合了我们想要的数种的樱桃色彩。完成了上面的几步之后，新建一个图层我又用钢笔工具勾了一些曲线路径，用笔刷工具对路径描边。之后改变图层的透明度为30%，然后再复制这个层，轻移一点，旋转一些，再重复复制几次。下载这个制作过程的演示视频我添加了一个点缀物在右边（这是用一个叫Tamuz的字体做的），一会儿将提供一些可能下载到漂亮字体的网站。这是现在的结果：我们的Blog模板的标题网页的标题完全是按照个人的意源来命名的，并且他应该有一个小的图标或是标志，图标应可能的特别一些，容易辩认一些，有时又能表现你自己一些等。在这个教程中我选择了一个仙人掌，因为他是诚实久远的像征，而且又有一点儿别的意思。但同时我选择它做为图标也是因为这个图标放在这里颜色上和我们使用的色彩方案在设计上讲是很协调的。最好，我用叫做Bon Guia的字体写了一个标题，这就是我们的网页头的最终结果：提供一些有用的资源下载的网站链接：Minion Ornaments, Tamuz, Klunder Script Kreatures, Big Cheese from EmigreAdobe ornamental fontsfree Dingbats fonts总结：这一部分我们就已经把网页顶部logo和Banner的设计做了一个小的示范了，最主要的几个要点就是色彩的搭配和背景的选取以及小装饰图片的添加和滤镜的运用，大家不妨也按照这个思路去进行一些尝试，也欢迎大家大胆的不要吝啬的贴出自己的链接！
现在油漆桶和铅笔刷应该扔到一边了，我们进行第四部分的内容，在这一章节中，将要集中讲一下DIV这个容器的设计。你需要问的问题是，我们设计的不同部分是什么？一个页面由哪些不同的部分组成？报着这个想法，我将在这里回答这些问题讲解一下如何为网页进行切片，如果你是一个网页设计师，这可能对你来说是很简单的问题，因为你已经在过去的日子里把表格运用的如火如荼，但现在你要思的是如何不用表格而用DIV容器及CSS和Xhtml来控制实现一个不但文件体积小而且内容和页面更具亲和力的效果。这是通常的我们见过的网页构成：页面头（the header）页左栏（the left）页主体内容（the content）导出需要的gif和jpeg图像这些是用到你需要导出为gif或jpeg图像不同的素材* 1. 页面头文件header* 2. 导航按扭背景bg_navbutton* 3. 导航按扭bg_navbutton_over* 4. 普通小图标bullet_extlink* 5. 标题前小图标bullet_title好了，你大概会想，“背景图片怎么办？”，不错，它没有在这儿列出来，这需要一点儿说明，我们想要一个严格的解决方案，因为我们仍然想要在窗口大小变化的时候内容居中，这就是你将导出的背景，这是一个1600像素宽，5像素高的图片（这已经是足够了，除非你是一个富人，用着30英寸的苹果机显示器）。使用CSS设置背景这就是我们要使我们的背景居中的CSS以下内容为程序代码
Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长：MinTao ICP备案号：鄂ICP备11006601号-18
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
