- 1、本文档共24页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
?
??首页??素材图片??高精图库??矢量图库??网页素材??网页模板??壁纸??明星??下载??教程??字体??香车美女??QQ专题??论坛
??本站内容有哪些信誉好的足球投注网站:
???您的位置:素材中国教程 网页设计 Html/Css 设计一个基于CSS的网页模板
设计一个基于CSS的网页模板[ 来源:素材中国 | 作者:芦大伟| 时间:2006-03-02 19:24:39 | 浏览:101人次 ]
?
?
这是一个 教你如何一步一步学习建立基于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中把那个包含一 条线的图层复制一份新的出来,然后向左或右或上下移动一点儿。或者再改变一下透明度和层选项等。这些放大的图案是真实的像素点的分布,被裁切开的右边正好又和左边相连从而铺开就构成了一个完整的循环。下一步我们将要讲述实际的页面框架的设计和规划,核心内容将是讲如何制作一个引人注目的页头和标题,包括标题的装饰,
文档评论(0)