设计一个基于CSS的网页模板-教程教材教学_网页设计特效

这是一个教你如何一步一步学习建立基于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 Emigre
Adobe ornamental fonts
free 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
以下内容为程序代码

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
}

我们的背景图是一个5像素高的“线条”，它在垂直方向上延伸重复就铺满了整个页面。在水平方向是以浏览

器窗口的50%水平方向开始平铺线条，上边距为0。Background-attachment: fixed,意思是背景将不随着内容

的滚动而变化，是固定的。我们Body标签作为我们的放置这些参数的容器，是因为它要应用到整个页面。
观看这时的结果：点这里

添加我们的第一个DIV
现在我们就要依次添加我们的DIV了。
这是我们的网页头的CSS
以下内容为程序代码

#header {
text-align: center;
}

我们用一个ID符号建立我们的网页头的容器DIV，一个ID符号总是对应仅有的一个网页上的元素。一个对此ID

的CSS描述必须是唯一的伴随这个文件，我们的header是需要居中的，所以我们用到了"text-align:

centered;"，这段代码就是添加header的内容的。
以下内容为程序代码

你可能注意到这时预览结果时的图像没有在最顶上，所以我们在body标签里还要加上 "margin: 0"

and"padding: 0"
以下内容为程序代码

body {
background: #F7F7F6 url(images/background.gif) repeat-y 50% 0;
background-attachment: fixed;
margin: 0;
padding: 0;
}

观看结果：点这里
如果以上讲的这些对你非常陌生的话，那么你最好阅读一下这个

完整的关于CSS的介绍以便有一个更好的了解对

我们现在做的事情，祝你好运！

在我们以前的几个部分里，我们做过了一些很基本的CSS代码，如果是第一次来这儿的朋友可以先看看前几部分的内容：第一部分、第二部分、第三部分、第四部分，今天我们的教程里将来实现左侧导航栏的制作。
但在开始之前，当建立一个网页的时候，我们必须总是尽可能让人容易理解的写语法，如果你看了第四部分内容的评价的话，你可能注意到有人提出了一个建议是，使用h1标签元素是更好的对于网页头部分，因为那是更容易理解的代码并且它使一个站点更具有亲和力容易更好地被搜索引擎收录。想当然这些更重要一些，所以我已经把我们的代码按照这种方法来修改了。

图片更换的技术
这个技术实际上叫做图像替换技术，意思是我们用一个文本来替换真实的图片在我们的html代码中。页面头的图片在支持CSS（当我们使用“ background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);”来设置背景图片时）的浏览器里将会显示出来，并且文本是隐藏的（因为代码：“text-indent: -9999px;”），因为我们的CSS代码将文本定位到了我们可见区域之外。在旧的浏览器上或是在盲人用的屏幕阅读器上你将会看到文本的替代，我们用这种更易理解的代码。
以下内容为程序代码

h1 {
width: 692px;
height: 90px;
text-indent: -9999px;
background: url(/Files/BeyondPic/2006-9/27/0692717292096322.jpg);
margin: 0;
padding: 0;
}

网页头的背景图像的宽和高是必须定义一些空间的。为了确保我的们的图像是很精确的置于我们的页而后顶部位置 margin: 0; padding: 0;也是必须的，此外，我在body标签中放置text-align: center;是因为所有的内容都将要是居中的。然后，有些内容是不居中的，所以我们要添加text-align: left;在那里。我们的这个容器margin: 0px auto;意思是它将出现在一个最顶端（0px）和居中的（auto）。
制作导航栏
要制作左侧的导航栏按扭，首先要制作一个ID容器存放里面的内容:
以下内容为程序代码

#left {
width: 178px;
}

到目前为止我们需要做的只是定义它的宽度，在这个宽度的left容器中我们放置一个DIV容器作为这个导航，命名为：navcontainer.用CSS建立一个导航最好的方法是用它本身那些导航的点，就像以前用html做好内容,然后再定义它的CSS样式一样。就像这样：
以下内容为程序代码

<div id="navcontainer">
<ul>
<li><a href="#" id="current">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Photo roll</a></li>
</ul>
</div>

这样会出一个默认的点，而因为我们不想用它的默认的这个点，而要用一个漂亮的背景上的点来代替，所以我们要在CSS中移除这些点，要进行的CSS定义为：
以下内容为程序代码

#navcontainer {
width: 178px;
}

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
font: bold 12px/22px Verdana, Arial, Helvetica, sans-serif;
text-indent: 20px;
letter-spacing: 1px;
border-bottom: 1px solid #fff;
}

第一部分代码定义了这个导航容器的宽度，第二部分定义了这个导航容器的“Ul”标签.margin: 0;padding: 0;确保了在按扭和按扭之间没有空隙并且移掉了左边的缩进。list-style-type: none;移除了标准html格式里的小点，然后是定义里面文字样式，在最后一行，是用来给我们要做的漂亮的导航按扭每行下面加一条白线。
以下内容为程序代码

#navcontainer a {
display: block;
width: 178px;
height: 22px;
}

这个定义了一个我们的导航栏的“a”标签，或者叫做“链接标签”。这样定义之后就会影响到每一个导航栏里的按扭，首先，我们使用display: block;，显示设置为一个元素的显示方式，这里设置为“block”是需要让这个链接的块儿自动调整到适合大小，后两行是设置的每个按扭的宽和高。

鼠标经过时的状态是通过交换背景图片来实现的，使用的是a:hover 的样式。这是详细的代码：
以下内容为程序代码

#navcontainer a:hover {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

颜色的设置是通过改变Color属性的，而text-decoration: none;是用来防止正规的链接中的下划线出现的。通常状况下，为了使你的导航栏能表现的更清晰，更具体，所以我又添加了一个额外的样式current，这个用来显示当前网站所处的页面。代码如下：
以下内容为程序代码

#navcontainer li a#current {
background: url(bg_navbutton_over.gif);
color: #A5003B;
text-decoration: none;
}

这个样式的定义用在导航栏里的链接里(li a)，属性和值都和经过状态时是一样的。
现在剩下仅有的事情就是把这个ID添加到我们的html代码里了：
以下内容为程序代码

观看最后的结果

一些关于CSS导航栏的例子可以到这些网站上去看一下：
http://css.maxdesign.com.au/listamatic/
http://css.maxdesign.com.au/listamatic2/
http://css.maxdesign.com.au/listutorial/

这就是我们的制作导航栏的全过程，我希望大家能喜欢它，并且继续关注我们下一部分的内容！

这是我们教程的第六部分，现在我们将要填加我们网页的内容部分。

为网站的内容添加主体容器
首先我们要在我们的样式表单中添加一个ID选择器，设定他的宽度为514像素，
以下内容为程序代码

本新闻共2页,当前在第1页下一页 12

设计一个基于CSS的网页模板

相关新闻

热点新闻

推荐新闻