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:背景图案及配色本教程的第二部分主要有两个重点：一是如何正确选择导航菜单中所涉及的颜色，虽然它没有很多的技术含量，但使用的颜色是否恰当，与后期出来的效果是有很大影响的；另外一部分主要是关于页面背景的，侧重于制作背景图片素材时的一些细节问题。在第一讲中，我主要是介绍一种实现玻璃材质按钮的快捷途径，现在来讲颜色的选择似乎有点滞后了。不过鉴于网站的风格存在差异，素材色系的选择也是界面设计阶段很重要的一块内容，网络上也有很多关于网页色彩的文章，大家可以依据其中介绍的一些基本知识进行参考，虽然良好的色彩感觉需要很长一段时间来培养。选择你的色彩体系事实上色系的选择会体现很多个人因素，毕竟每个人都会有各自的色彩偏好，你的选择也会彰显你的个人风格。没人能建议你“必须选择什么颜色”，这里我也只能提供一些个人认为比较实用的意见：1.使用至少一种高饱和度、高辨识度的色彩，并以其色调定义站点的整体基调。把这个色彩运用在文本链接上，能使其更加显眼、引人关注；2.谨记不要在一张页面中使用过多的颜色，这样只会让你的网页看起来很花哨繁杂。我的建议是最好保持在三种之内：一个强调色和两个辅色；在颜色的搭配上，不论是主色还是辅助色，都要善于通过它们明度变化来衍生更多的色彩，如果只是反复的使用三种以下的颜色未免会让人感觉单调，当然这也不是意味着颜色变化越多你的页面看起来就会越出色，仍然要视乎网站的整体风格和设计者对颜色的驾驭能力：在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=navcontainerulliahref=#Home/a/liliahref=#Aboutme/a/liliahref=#ximicc/a/liliahref=#Articles/a/liliahref=#Photoroll/a/li/ul/divul和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容器相同。第