推荐阅读

Photoshop调出灰蒙蒙外景婚纱照片清新色调
最终效果图加上设计排版,文字的加入以及版面设计,可以大幅度的提升画面空间以及氛围,从而使照片整体得到升华。首先我们打开原始文件RAW【注意,佳能相机拍摄的原始文档文件名是以CR2,尼康相机拍摄的文件文档是以NEF。】分析照片,很多人都知道,拿到照片第一件时间就是分析照片,那么我们要从哪些方面,如何去分析照片了,想想, 结合自己平常积累的知识。对第一件事情就是从照片本身上去分析前期所拍摄的风格,服装搭配,场景,表情,道具, 若是外景就要分析天气,有晴天(蓝天白云+夕阳晚霞),有阴天(阴天是灰蒙蒙的,对于后期来说,可调性空间大, 光线柔和。),肢体语言等等去分析,这些因素就造就了我们如何从这些方面去着手定义色调,世上所有拍摄的照片 都是不可缺少三大的元素,人、服装、背景(环境),这是拍照中的三大要素,其实就是为了让人,服装,背景能够 更好的彼此相融合,以及摄影师所想表达的一种风格,所以需要合适的道具,合适的造型 装饰等元素结合表达。那么从这张照片我们可以分析,这是一张外景,是在草地与树林中拍摄的场景,这应该是冬天拍摄,很多小草都枯萎了,从双方的表情中我们可以看到出幸福的感觉,从服装上,婚纱拖尾很漂亮的,搭配是一种很经典的搭配色彩,蓝与白。对,就是我们平常经常看到的蓝天加白云,道具的话是薰衣草的瓶子。道具比较少,前面说到外景要了解天气。这一张阴天拍摄的 。后期可调性大。可以厚重的夕阳,也可以清爽的自然。综合以上前期的分析,定义为小清新自然色调。幸福感的表情,经典的清新蓝天白云以及枯萎凋零的树叶以及草地。1、调整画面中的光影,明显的曝光过度

Photoshop制作后期人像甜美逆光效果教程
本系列是后期高手他山之眼独家授权优设首刊的后期风格全方位科普教程,囊括了十几种常见的后期风格,而且每一种都有系统全面的综合教学,可以帮你从头开始完整地掌握后期修图。同学们别看是免费的就马克不看,这样高质量的教程放到哪个培训班都可以直接收钱,给大神点赞吧。在线修图神器泼辣熊:Polaxiong.com日系风格的照片多以静物、人物为主题,注重捕捉细节,擅长营造氛围,前期多以大光圈拍摄,加上合理光线的运用以及留白的处理,以及偏蓝、偏青色彩的运用,能够给人一种干净、祥和而又充满生活趣味的感觉。运用日系风格比较纯熟的摄影师有川内伦子、小林纪晴、岩田俊介、嶋本麻利沙、滨田英明等,有兴趣的可以自行去翻阅一些他们的作品。日系风格大致有如下分类:一:逆光类这类照片的共同点是巧妙利用侧逆光、正逆光等拍摄手法,整体颜色偏淡,有留白处理。例如滨田英明的作品:二:胶片类

合成玫瑰花丛中漂亮美女照片的PS教程
本教程的效果相对来所非常简单,不过人物部分的处理还是需要一点技巧的。添加蒙版后最好选择一些类似小草的画笔把人物的裙子部分擦出来,这样人物裙子上会留有一些小草,非常真实。最终效果 一、首先打开美女图片。 二、用钢笔抠出拖入背景图片中,头发部分我们后期处理。

3D MAX模拟跳动的烛光
我们知道,3D MAX 可以模拟真实的火焰和雾化等效果,但本例主要为大家介绍火焰的设置以及利用随机动画控制火焰的变化。具体操作步骤如下:制作蜡烛造型 单击“Objects”选项卡中的“Cylinder”按钮,在顶视图中建立一个“Radius”为20,“Height”为100的圆柱体,并将“Cap Segments”设置为3。下面利用Noise编辑修改器使圆柱体顶端产生蜡烛燃烧后的高低不平的效果。单击“Modeling”选项卡中的“Edit-Mesh”按钮,在修改命令面板中的“Selection”卷展栏中单击“Polygon”按钮,并在视图中选择圆柱体顶端的面,然后点击“Modifiers”选项卡中的“Noise”按钮,在修改命令面板中参照图1进行参数设置。再次在顶视图中建立“Radius”为1.5,“Height”为25的圆柱体,作为蜡烛的烛芯,单击“Modifiers”选项卡中的“Bend”按钮,将修改命令面板中的“Angle”设为30,使圆柱体弯曲30度。将烛芯放置到蜡烛顶端的适当位置,制作好蜡烛造型(如图2)。 制作蜡烛材质 打开材质编辑器,激活第一个示例窗将它赋予蜡烛。点击“Standard”按钮,在弹出的窗口中选择“Raytrace”,设置“Diffuse”为白色,“Specular Level”为75,“Glossiness”为25。展开“Extended Parameters”卷展栏,将“Translucency”的RGB都设为170,关闭材质编辑器。 制作烛光 单击“Helpers”选项卡中的“SphereGizomo”按钮,在顶视图建立半径为35的球,并选中“Hemsphere”复选框。单击“Main Toolbar”选项卡中的“Select and Uniform Scale”按钮,并在按钮上点击鼠标右键把对话框中的“Z”设为400,拉伸球。在修改命令面板中点击“Atmosphere”卷展栏中的“Add”按钮,在弹出的窗口中选择“Combustion”,点击“Setup”打开“Environment”窗口,参照图3设置参数,将半球放置到蜡烛上方。 添加灯光 为了使火焰更逼真,可以再添加灯光效果。点击“Lights && Cameras”选项卡中的“Omni”按钮,在视图中建立两盏泛光灯:一盏用来照明场景,一盏用来模拟烛光。放置两盏灯的位置(如图4)。选择烛芯处的灯,在修改命令面板中设置颜色为:R=236,G=156,B=150,并设置“Multiplier”为1.5。展开“Attenuation Parameters”卷展栏将“Far Attenuation”中的“Start”设为30,“End”设为120。选中“Use”和“Show”复选框,修改另一盏灯的颜色RGB都为120。渲染场景,此时蜡烛的燃烧已经很真实了,下面就让烛光跳动起来。 跳动的烛光 点击“Main Toolbar”选项卡中的“Open Track View”按钮,打开“Track View”窗口,展开“Environment”项,选择其中的“Combustion”下的“Drift”。在“Track View”窗口的工具栏上点击“Edit Keys”按钮,再单击“Add Keys”按钮,在序列中加入6个关键帧,点击工具栏中的“Function Curves”按钮,移动各关键帧。“Drift”项用来控制火焰的漂移,曲线用来控制漂移效果。按同样的方法使“Phase”和“Density”项都产生曲线。然后,在“Track View”窗口中展开“Objects”项,选中“Omnio1”下的“Object”→“Multiplier”,点击窗口工具栏中的“Assign Controller”按钮,在弹出的窗口中双击“Noise Float”。点击工具栏中的“Properties”按钮,设置“Noise Controller”窗口中“Seed”为24,“Strength”为2,“Frequency”为0.06,取消“Fractal Noise”复选框,选择“>0”复选框。 现在,跳动的烛光效果制作完成,经过渲染动画后就可以看到火焰跳动的效果。
最新发布

CSS网页布局兼容性的要点与诀窍
IE vs FFCSS 兼容要点:DOCTYPE 影响 CSS 处理FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 widthFF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式div 的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。缺点是要控制内容不要换行cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以FF: 链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格XHTML+CSS兼容性解决方案小集使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰,我就先把一些我遇到的问题写在下面。1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: 注意这两个margin的顺序一定不能写反,据阿捷的说法!important这个属性IE不能识别,但别的浏览器可以识别。所以在IE下其实解释成这样: 以下是引用片段:

CSS应用基础教程(3) 应用补充
挑选者特性的应用 在讲挑选者的特性之前,要提一下的是CSS继承的特性。所谓的继承的特性是指被包在内部的标签将拥有外部标签的样式性质。继承的特性最典型的应用通常发挥在预设整份网页的样式,而要指定为其它样式的部份再依要设定在个别元素里即可。这项特性可以提供网页设计者更理想的发挥空间。 接下来就要讲挑选者特性的应用!其实这部份应该算是声明的一种方式,但是在您看过第二章的基本的声明与应用後,到这边再讲挑选者您会比较有概念点。在CSS应用或设计的时候,有几种依据元素的关系或性质来设定显示特定性质的方法,就是挑选者特性的应用,能让您在控制与应用上更加灵活。一、前後文挑选者:依声明标签前後文关系显示特定性质的方法。 前後文挑选者便是当浏览器在显示HTML原始码所指定的内容时,会考虑元素标签的前後关系,而去显示指定的样式声明。也就是说只要HTML原始码内的标签排列前後顺序符合时,该项声明便会发生作用了!元素A(标签A) 元素B(标签B) 元素C(标签C) ... { 样式规则}要注意的是,前後文挑选者的声明跟集体声明很像,但是集体声明的元素标签间要用逗号隔开,而用前後文挑选者声明时元素标签间要用空格隔开;而这两种声明方式您可以混合使用。 元素A 元素B, 元素C 元素D 元素E, ... { 样式规则}这样您就可以用集体声明的方式,声明数组前後文挑选者的样式规则。二、类别挑选者:让单一或数个标签使用同组样式规则的方法。 类别(class)可以让不同的元素标签共同套用同一组样式性质或相同的元素标签套 用不同组的样式性质。首先介绍的是如何让不同的元素套用同一组样式性质,如下面范例所写即可。 <HTML><HEAD><STYLE><-- .blue { color : BLUE }--></STYLE></HEAD><BODY> ... <H1 class="blue">...</H1> ... <P class="blue">... </P> ...</BODY>要注意在声明时前面的小点,CLASS名称可任取。而要让相同的元素标签套用不同组的样式性质时,也可以应用类别特性来设定。 <HTML><HEAD><STYLE><-- P.blue { color : BLUE } P.red { color : RED }--></STYLE></HEAD><BODY> ... <P class="blue">...</P> ... <P class="red">...</P> ...</BODY>要注意同样是在声明时的小点,CLASS名称可任取。灵活运用类别特性,可以让您的样式设定更具机动性唷!三、ID挑选者:与类别挑选者类似,不同的是在『唯一性』。 ID特性的使用与类别特性十分雷同,但是,文件里的各个ID都是唯一的。换句话 说,类别特性可以重复套用在单一或数个元素标签之上,但是ID属性在一份文件里只能出现一次。如下面范例所写即可。 <HTML><HEAD><STYLE><-- #blue { color : BLUE }--></STYLE></HEAD><BODY> ... <P ID="blue">...</P> ...</BODY>可以看到,声明的方式是利用井字号『#』。而ID的这种『唯一性』正是让JavaScript或 VBScript能够对元素进行控制的关键。 透过以上的介绍的挑选者特性的声明与使用,可以让您的样式设定更具机动与变化 。其实您可以先熟悉上一章为您介绍的基本的声明与应用方法,再应用本章所讲的挑选者特性,一步步地去熟悉样式表的使用。 连 结 拟 似 特 性 的 应 用 还记得在HTML的基本语法,在BODY标签中可 以用link、alink、vlink属性去控制可连结或已连结的字体颜色吗?现在亦可用CSS去控制这些性质,称为『拟似类别』(pseudo class)。您可以将其当作一般类别,声明其样式规则,而实际上,这些拟似类别并不用像上面讲的类别挑选者,在HTML原始码中再 行设定指向的类别(CLASS)。下面介绍拟似类别的声明与应用。

CSS应用基础教程(2) 应用方式
C S S 的 声 明 方 式 这章节将开始为您介绍CSS的应用。当然一开始要介绍的是如何去建立个样式表 (Style Sheets),包括了声明的方式和应用在网页上的方法,最後还会为您概述一下CSS的一些特性。概略来说,CSS的声明有三种方式:一、基本声明:最典型的CSS声明方式。 element {property: value} 用中文来表示的话,也就是元件(标签) {性质(属性)名称: 设定值}例如: H3 {COLOR: BLUE} 即为一组声明。二、集体声明:同时声明某个或数个元件(标签)(各元件(标 签)间以逗号分隔)的一组或数组样式规则(性质)(各组规则间以分号分隔)。 元件(标签) {性质(属性)名称1: 设定值1;性质(属性)名称2: 设定值2;... }或是元件A(标签A), 元件B(标签B), 元件C(标签C), ... {性质(属性)名 称1: 设定值1;性质(属性)名称2: 设定值2;...}例如: TD {COLOR: BLUE;font-size: 9pt;}或是TD,P,DIV {COLOR: BLUE;font-size: 9pt; }三、分项声明:将许多样式规则分组再分别声明。 元件A(标签A) {性质(属性)名称1: 设定值1; 性质(属性)名称2: 设定值2; }元件A(标签A) {性质(属性)名称3: 设定值3; 性质(属性)名称4: 设定值4; }例如: TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "标楷体"; line-height: 150%}这样子的声明方式并不会互相抵触,因为所声明的性质是不同的。如果不小心对同样一个性质作了重复的声明,则只有後来声明的设定值才会发生作用。 要附带提一下的是,在您的声明中,只要您的格式正确就会被接受,而不论是大小写、空白或换行都不会对显示的结果 有影响的,您可依自己习惯来编写。 C S S 的 应 用 方 法 接下来要为您介绍的是将所建立的样式表应用在网页上的四种基本方法。一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。二、使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。 <STYLE TYPE="text/css"><!--样式规则表--> </STYLE>例如: <STYLE TYPE="text/css"><!--BODY { color: BLUE; background: #FFFFCC; font-size: 9pt}TD, P { COLOR: GREEN; font-size: 9pt}--></STYLE>通常是将整个的 <STYLE>...</STYLE>结构写在网页的<HEAD> </HEAD>部份之中。这种用法的优点就是在於整篇文件的统一性,只要是有声明的的元件即会套用该样式规则。缺点就是在个别元件的灵活度不足。三、使用 LINK标签: 将样式规则写在.css的样式档案中,再以<LINK>标签引入。 假设我们把样式规则存成一个example.css的档案,我们只要在网页中加入

CSS应用基础教程(1) 基本认识
CSS是『Cascading Style Sheets』的简称,中文翻为「串接样式表」,也有人只翻为「样式表」。CSS用以作为网页的排版与风格设计,在所谓的「新式网页」里 ,CSS不容置疑是相当重要的一环。CSS是以既有的基础,用以弥补既存HTML 规格里的不足,也让网页的设计更为灵活。 这份教学文件就要来为您介绍CSS的应用罗!在这边并不介绍CSS的所有规格 ,仅就您在网页写作上较常用到,较可能用到的语法部份及应用的方法来为您作介绍。也 由於现在两浏览器的相容是渐行渐远,将贴心地为您注明支援该语法的浏览器。而IE从 3.0开始便支援部份语法了,这点也会为为您注明的。 各 章 节 的 概 略 介 绍 为了您参考与学习上的方便,在这里先为您大略地说明一下这份教学文件各章节所包含的内容吧!让您在参考时有个方向与概念。基本上,前两章著重於概念与基本认知的建立,也就是一些为您做一些札根的工作;第三章则为您补充在应用与设定上的一些其它方式或特性的说明与介绍。而第四章到第六章则著重於语法、参数与性质的介绍,也 就是真正建立在样式表里面的东东。第一章 CSS的基本认识: 就是本章啦!就介绍您一些CSS基本概念与认识。第二章 CSS的应用方式: 为您介绍CSS的基本宣告、应用方法与特性介绍。第三章 CSS的应用补充: 为您介绍CSS的其它宣告方式、应用与特性介绍。第四章 页面性质的CSS: 为您介绍页面性质的CSS相关语法、参数与性质。第五章 文字性质的CSS: 为您介绍文字性质的CSS相关语法、参数与性质。第六章 区块性质的CSS: 为您介绍区块性质的CSS相关语法、参数与性质。 应 用 上 的 基 本 认 识 应用CSS并不困难,但是请您先参考这里的基本认识,对一些用语有了一点基本概念後,对於您在看後面的教学会有助益,看起来也才不会太吃力!一、基本用语的认识: 元件(element):亦即HTML基本语法中的标签(tag)。属性(attribute):用以描述标签特性的属性。例如: <HR WIDTH="90%">中,HR为标签,WIDTH为属性,而80%即为WIDTH属性的值。性质(property):用以描述元件的特性。相当於HTML基本 语法中的属性。样式(style):拥有一组或数组的性质,用以描述元件特性。挑选者(selector):套用样式的元件。例如: H3{ COLOR : BLUE }中,H3为挑选者,COLOR为性质,BLUE为COLOR性质的值。二、基本单位的认识: 有相对单位与绝对单位两种单位 表达方式。相对单位: 『em』:相对於字母高度的比例因子。『en』:相对於字型大小的比例因子。『%』:相对於长度单位(通常是目前字型的大小)的百分比例。绝对单位: 『in』:英寸。『cm』:公分。『mm』:公厘。『px』:像素(系统预设单位)。『pc』:pica,印刷活字单位。『pt』:像点。相对关系:1in= 6pc= 72pt= 2.54cm= 25.4mm三、颜色使用的认识: 颜色的表示共有五种方式。『#RRGGBB』: 以三个00到FF的十六进位值分别表示0到255十进位值的红、绿、蓝三原色数值。『#RGB』: 简略表示法,只用三个0到F的十六进位值分别表示红、绿、蓝三原色数值。而事实上,浏览器会自动扩展为六个十六进位的值,如『#ABC』将变为『#AABBCC』。但是,显见这样的 表示法并不精确。『rgb(R,G,B)』: 以0到255十进位值的红、绿、蓝三原色数值来表示颜色。『rgb(R%,G%,B%)』: 以红、绿、蓝彼此相对的数值比例来表示颜色,如『rgb(60%,100%,75%)』。『Color_Name』: 直接以颜色名称来表示颜色,共有141种标准的颜色名称。

DropShadow属性、Chroma属性和blur属性效果
DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影。看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色。 Offx和offy分别X方向和Y方向阴影的偏移量。偏移量必须用整数值来设置。如果设置为正整数,代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。 Positive参数有两个值:True为任何非透明像素建立可见的投影,False为透明的像素部分建立可见的投影。 同样,我们先来看一个例子(见下图): 看,图中的文字就像是从页面上飞出来一样,并且留下了一层淡淡的影子。 实际上在这里应用的就是CSS的DropShadow属性,我们来看一下它的代码: <html> <head> <title>dropshadow </title> <style>//*定义CSS样式*// <!-- div {position:absolute;top:20;width:300; filter:dropshadow(color=#FFCCFF,offx=15,offy=10,positive=1);} --> file://*定义DIV范围内的样式,绝对定位,投影的颜色为#FFCCFF, 投影坐标为向右偏移15个像素,向下偏移10个像素*// </style> </head> <body> <div> <p style=“font-family:matisse itc;font-size:64; font-weight:bold;color:#CC00CC;”> file://*定义字体名称、大小、粗细、颜色*// Love Leaf </p> </div> </body> </html> 和chroma属性一样,Dropshadow属性对图象的支持不好,我指的是JPEG、GIF格式的图象文件。不能支持的原因与Chroma一样,因为这种图象的颜色很丰富,很难找到一个投射阴影的位置。 Chroma属性 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对“leaves”字体添加chroma属性,使其透明。代码如下: <html> <head> <title>chroma filter</title> <style> <!-- div{position:absolute;top:70;width:200; filter:chroma(color=green)} file://*定义DIV范围内绿色为透明色,另外设置DIV的位置*// p{font-family:bailey;font-size:48;font-weight:bold; color:green} file://*设置P的字体名称、大小、粗细、颜色*// em{font-family:lucida handwriting italic;font-size:48; font-weight:bold;color:rgb(255,51,153)} file://*设置EM的字体名称、大小、粗细、颜色*// --> </style> </head> <body> <div> <p>LEAVES <em>LOVE</em></p> </div> </body> </html> 通过上面代码中对chroma的属性设置,使绿色透明。显示效果如下图: 我们看到绿色的leaves字体不见了,实际上它是透明了,在IE下点击它所在的区域,它还是会显示出来(见下图): 另外,需要注意的是,chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理(比如JPG、GIF等格式),所以它们很少有固定的位置可以设置为透明。

创建并引用样式类
在第一种方式中,我们可对某一类型的标志建立样式类,如: 上边的例子中,所有段落标志的字体都为宋体,大小为10pt,颜色为红色,由于排版的需要又分成了三个样式类,分别具有不同的排版属性,从这个例子你可以看出层叠样式单之所以为层叠,其意义也在于此。 第二种方式的用处则在于它规定的样式类,没有特定于某一类标志,而是其它类型的标志都可以用。 如: 它规定了三个样式类,几乎所有的类型都可以引用它们。 有一点要注意,样式类与我们上节所讲的统一风格形式并不相冲突,样式类更多地强调了风格的异,而统一的设置形式则强调了风格的同。两者常相互结合,实现样式风格的叠加,使网页风格在整体统一的基础上而各自又绚丽多彩。 二、样式类的引用 样式类的引用很简单,只需在标志后面设置Class属性值为样式类名即可,引用格式如下: <标志 Class="样式类名"> 如我们上边用第一种方式建立的样式类在一个段落标志中引用, <P Class="isLeft">你好,欢迎你来到网页制作学习园地</p>。 要再次提醒一下,用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中;而第二种则没有限制。 如果我们要动态改变某个引用了样式类的标志风格, 可通过脚本语言来修改标志对象的className属性,具体方式如下: 所要修改标志的标识号.style.className="样式类名",如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式,在脚本语言中修改语句如下: p1.style.className="isRight"

Invert属性、Glow属性和FlipH、FlipV属性
Invert属性 Invert属性可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。 它的表达式也很简单: Filter:Invert 我们再来看一下加上Invert属性前后的图片效果变化(如下图):原图 Invert属性效果图 我们看到Invert属性实际上达到的是一种“底片”的效果。 自己拿别的图来试试吧。 Glow属性 当对一个对象使用“Glow”属性后,这个对象的边缘就会产生类似发光的效果。它的表达式如下: Filter:Glow(Color=color,Strength=strength) Glow属性的参数只有两个:Color是指定发光的颜色,Strength指定发光的强度,参数值从1到255。 让我们先来看一下加上Glow属性的效果图:

让网页中的字体美起来
你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有更多的指导,告诉你该如何更好的布置家。 在目前许多的指导中,他们都在诉说,应该加一点声音或者一个说话的场地。的确我们都需要它,但我希望关心更多WEB家里底层的东西,比如如何把字体弄的漂亮些,或者让页面颜色变的活泼些,让访问者增加“看欲”,还有更多你曾经都没有关注的细微之处。今天,我们首先来探讨页面的字体。一.HTML中定义字体 二.CSS(层叠样式表)改变字体 在过去页面上的字体是一成不变的,静静的呆在那。当DHTML(动态网页)出现后,我们能有更多方式控制字体了。一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后,字体就能产生许多变化。 三.让字体动起来 要让字体动起来,我们可以利用本身CSS的事件或者让JavaScript引发事件。 2.JavaScript引发事件。

WEB2.0标准教程:第九天 第一个CSS布局实例
接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:w3cn的最初设计草图如下:用表格的设计方法的话,一般都是上中下三行布局。用DIV的话,我考虑使用三列来布局,成为这样。先定义整个页面的body的样式,代码如下:以上代码的作用在上一天的教程有详细说明,大家应该一看就明白。定义了边框边距为0;背景颜色为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不重复;定义了字体尺寸为12px;字体颜色为#666;行高150%。初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别说我偷懒,先实现简单的,增加点信心嘛!)。分别定义左中右的宽度为200:300:280,在CSS中如下定义:注意:定义中列和右列div我都采用了POSITION: absolute;,然后分别定义了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;这是这个布局的关键,我采用了层的绝对定位。定义中间列距离页面左边框200px,距离顶部0px;定义右列距离页面左边框500px,距离顶部0px;。这时候整个页面的代码是:这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?