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

日期：2007年8月10日作者：查看:[大字体中字体小字体]

这是一个教你如何一步一步学习建立基于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] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] 下一页
设计一个基于CSS的网页模板相关文章：
·路由器安全设置详解
·ADSL猫路由设置方法
·校园网网络方案设计及分析
·某大学校园网设计方案六(组图)
·VB+Access设计图书管理系统
·宽带共享该怎样设置无线路由器
·综合布线系统工程设计参考大全
·如何进行局域网设置
·静态路由的设置及相关命令
·VB设计有语音报时和报警功能的闹钟
设计一个基于CSS的网页模板相关软件
·天下第一签个性签名设计系统 V1.2
·AUTOCAD经典设计作品 V2.0
·局域网共享设置梦想吧专用版
·C/C++程序设计学习与实验系统 V2008.2
·《经典FTP服务器架设》教学视频录象
·机械设计手册 V3.0
·星智名片设计系统 V1.1
·经典的地产广告设计欣赏一（PSD分层)
·施工组织设计软件(标书制作系统) V6.2
·WIN98启动盘启动USB设备程序 V1.0

上一篇:XML配置文件的读取处理

下一篇:CSS:word-spacing

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

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

精品推荐

热点TOP10

特别推荐