推荐阅读
关于矢量字体type1/TrueType/OpenType
矢量字体是与点阵字体相对应的一种字体。矢量字体的每个字形都是通过数学方程来描述的,一个字形上分割出若干个关键点,相邻关键点之间由一条光滑曲线连接,这条曲线可以由有限个参数来唯一确定。矢量字的好处是字体可以无级缩放而不会产生变形。目前主流的矢量字体格式有3种:Type1,TrueType和OpenType,这三种格式都是平台无关的。 Type1全称PostScript Type1,是1985年由Adobe公司提出的一套矢量字体标准,由于这个标准是基于PostScript Description Language(PDL),而PDL又是高端打印机首选的打印描述语言,所以Type1迅速流行起来。但是Type1是非开放字体,Adobe对使用Type1的公司征收高额的使用费。 TrueType是1991年由Apple公司与Microsoft公司联合提出另一套矢量字标准。 Type1使用三次贝塞尔曲线来描述字形,TrueType则使用二次贝塞尔曲线来描述字形。所以Type1的字体比TrueType字体更加精确美观。一个误解是:Type1字体比TrueType字体占用空间多。这是因为同样描述一个圆形,二次贝塞尔曲线只需要8个关键点和7段二次曲线;而三次贝塞尔曲线则需要12个关键点和11段三次曲线。然而实际情况是一般来说 Type1比TrueType要小10%左右。这是因为对于稍微复杂的字形,为了保持平滑,TrueType必须使用更多的关键点。由于现代大部分打印机都是使用PDL作为打印描述语言,所以True1字体打印的时候不会产生形变,速度快;而TrueType则需要翻译成PDL,由于曲线方程的变化,还会产生一定的形变,不如Type1美观。 这么说来,Type1应该比TrueType更具有优势,为什么如今的计算机上TrueType反而比Type1使用更广泛呢? 这是因为第一:Type1由于字体方程的复杂,所以在屏幕上渲染的时候,花费的时间多,解决方案是大部分Type1字体嵌入了点阵字体,这样渲染快,但是边缘不光滑,比较难看。很多PS文档和PS转换的PDF文档都是这样,在计算机上浏览的时候字体很难看,但是打印出来很美观。TrueType则渲染比较快,可以平滑的显示在屏幕上,看上去很美观。 第二个原因是Type1的高额使用费,使得Type1没有被所有的操作系统所支持。Windows家族只有OS/2和windows 2000及之后的版本从操作系统级别开始支持Type1。由于这个问题,Adobe只好在其所有的产品中嵌入Adobe Type Manager(ATM)作为渲染引擎。 OpenType则是Type1与TrueType之争的最终产物。1995年,Adobe公司和Microsoft公司开始联手开发一种兼容Type1和TrueType,并且真正支持Unicode的字体,后来在发布的时候,正式命名为OpenType。OpenType可以嵌入Type1和TrueType,这样就兼有了二者的特点,无论是在屏幕上察看还是打印,质量都非常优秀。可以说OpenType是一个三赢的结局,无论是Adobe,Microsoft还是最终用户,都从OpenType中得到了好处。Windows家族从Windows 2000开始,正式支持OpenType。打开系统的字体目录(一般是C:\Windows\Fonts\或C:\Winnt\Fonts),可以看到:一个红色A的图标的是点阵字体,两个重叠的T的图标是TrueType字体,一个O的图标就是OpenType字体。
学习PageMaker对齐与锁定对象和图像控制
用户可以按对齐对象之间的相互关系设置对齐命令,该命令可以使对象准确对齐或均匀地分布。对齐命令是基于多个对象的一条共用边或对象的中央执行调整的。当用户分散对象时,可以在对象相对的边缘间添加一个均等的间隔。(1)选中要进行对齐或分散的多个图像。选择“成分”→“对齐对象”命令,打开“对齐对象”对话框,如图4-16所示。图1-16 “对齐对象”对话框(2)在水平对齐按钮行中,若选中按钮,则不设置水平对齐方式;若选中按钮,可使选中的图像以其最左边图像的左边缘对齐;若选中按钮,可使选中对象以其最左边图像的左边缘及最右边图像的右边缘间距的中线为基准对齐;若选中按钮,可使选中的图像以其最右边图像的右边缘进行对齐。(3)在垂直对齐按钮列中,若选中按钮,可取消设置的垂直对齐方式;若选中按钮,可使选中图像以其最上部图像的上边缘对齐;若选中按钮,可使选中图像以其最上部图像的上边缘与最下部图像的下边缘之间间距的中线为基准对齐;若选中按钮,可使选中图像以其最下边图像的下边缘对齐。(5)若选中按钮,并在“竖向”选项组中选择“在边界内部均匀分布”选项,可在最左边图像的左边缘与最右边图像的右边缘之间,使图像的左边缘的水平间距相等;若选择“按固定空白量均匀分布”选项,并在“空白”文本框中输入数值,可使选中图像的左边缘以指定的量间隔。(6)若选中按钮,并在“横向”选项组中选择“在边界内部均匀分布”选项,可在最左边图像的左边缘与最右边图像的右边缘之间,使图像的右边缘的水平间距相等;若选择“按固定空白量均匀分布”选项,并在“空白”文本框中输入数值,可使选中图像的右边缘以指定的量间隔。
Flash MX实战精选:大变活人
实例说明 通过隐形按钮和电影片断的灵活应用,制作一个“大变活人”的flash特效。 有关知识 绘制图像、隐形按钮、电影片断(Movie Clip)的灵活应用。 制作过程 步骤1:打开Flash,建立一个新文件。按Ctrl+M键,将帧速度(Frame rate)设为30帧/秒,Dimensions设为450px*300px,背景颜色为#FFFFFF。 步骤2:使用flash的绘图工具绘制多个人物头像(一般5-7个即可),也可先用其他矢量图工具绘制,然后导入Flash中,如图1所示。
3个技巧抓拍动感风景
风光摄影在很多人眼里是静态的、严谨的,而在摄影家眼中风景充满了动感和活力,通过作品让我们体会抓拍动感风景的经验。 一、利用天候,改变地形地貌的形象 在自然环境里,天候是最重要的变数:风起、云涌、雾 升、雨雪、闪电、飞虹。云雾的聚散是最常见也是变化最频繁的,它们和阳光的结合在大地上带来了投影和变化,甚至可以改变地形地貌在画面上的形象。 早晨我出去拍摄的时候,完全没有想到天际的云彩会突然亮开来。当看到雪山隐约地出现时,我甚至不知它到底是雪山还是白云。 远处的雪山隐现在云雾中,飘过的云层在地面上投下游动似浪的阴影,改变了地形地貌的视觉观感,画面建立在横向、不规律的色块和线条上,除了雪山和近处原野上阴影所表现的线条以外,其他色块的分界不是那么明显。为大地带来了梦幻的气氛。 画面建立在横向、不规律的色块和线条上,色块的分界不是那么明显,为大地带来了梦幻的气氛。 从云层中升起的雪山像通往天界的楼梯,为人们带来景仰、希望和遐想。同时把上部的彩云也纳入画面,它象征这条 “楼梯”的目的地。彩云为画面带来平衡感,如果没有它“拦”在上面,画面上半部就显得空荡荡。 二、运用线条和色块、考虑整体合成 景色与光影把画面分割成大小、形式不同色块,而其边缘就是线条。色块在画面上不同大小比例和安排以及线条的粗细、走向可带来不同效果。我们也要考虑到它们的整体构成, 使画面有一种连贯的整体感。 这张照片中吸引我的是云层的变化和它们在这片平静湖面上的倒影,带来一个瞬息而神奇的幻境。它让我体会到为什么藏民常把水里的景色看作是上天带来的启示。 我利用在山、云和水里的倒影形成的明暗、大小不同的色块来表现天地交汇所带来的动感。这些色块虽显随意,却有着韵律并充满画面,左上角的远山和右下角乌云的倒影不仅相互呼应,同时带来了平衡。 山、云和水里的倒影形成的明暗、大小不同的色块来表现天地交汇所带来的动感,左上角的远山和右下角乌云的倒影不仅相互呼应,同时带来了平衡。
最新发布
让IE(包括IE6)支持HTML5元素的方法
自HTML5标准的提出就得到非常多的关注,而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题,上周微软在技术大会上就表示目前微软正在开发的IE9将更加支持HTML5标准,但对于IE9是否将完全支持HTML5所有的标准,微软却表现的有点含糊其辞。HTML5标准能为网页带来更高效更洁净的代码,只有微软参与HTML5的设计工作,才能让IE浏览器识别更多的新元素。HTML5标准预计是在2022年向全世界发布,虽然目前距他发布的日期还有3年左右的时间,但是我认为它距离我们并不是那么遥远,目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面,苹果、Google、Opera和Mozilla等知名的浏览器厂商都表现的比较积极,微软现在也开始付出行动了,从上周微软在技术大会公布的IE9细节来看,微软将采取一种谨慎的态度涉足网页标准。微软也曾表示:IE浏览器将以标准HTML5为核心。但是微软的最新浏览器IE8及以下IE版本对HTML5标签的支持是有限的,我们可以通过在网页中添加脚本的方式来解决目前IE浏览器对HTML5支持的问题。让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script><![endif]–>上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。以下是html5的js文件中的代码:(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。<!–[if IE]><script>(function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})()</script><![endif]–>
网页设计的考试试题(网页制作基础知识)
一、单选题1.“常用”面板中的“图像”按钮,在_____区域中。A.插入面板 B.属性面板 C.面板组 D.菜单栏2._____在面板组中。A.CSS B.文件 C.属性面板 D.框架3.在表单中允许用户从一组选项中选择多个选项的表单对象是_____。A.单选按钮 B.列表/菜单 C.复选框 D.单选按钮组4.超级链接主要可以分为文本链接、图像链接和_____。A.锚链接 B.瞄链接 C.卯链接 D.瑁链接5.CSS表示_____。
div+css实例分享:非常不错的页面制作方法
数据块其实是微格式的一个变相应用,给不同的数据元素定义固定的结构。 Tudou.com 需要定义的数据块有: 比如 .mVideo 应该是这样的: 最后,附上关键字表,就是一些用于公共定义的ID和Class名称。 ID Class
滚动条CSS样式集合
scrollbar-face-color: #FFFFFF; ’滚动条凸出部分的颜色scrollbar-highlight-color: #FFFFFF; ’滚动条空白部分的颜色scrollbar-shadow-color: #FFFFFF; ’立体滚动条阴影的颜色scrollbar-3dlight-color: #FFFFFF; ’滚动条亮边的颜色scrollbar-arrow-color: #FF0000; ’上下按钮上三角箭头的颜色scrollbar-track-color: #FFFFFF; ’滚动条的背景颜色scrollbar-darkshadow-color: #FFFFFF; ’滚动条强阴影的颜色scrollbar-base-color: #FFFFFF; ’滚动条的基本颜色 如上设置出现的效果即为滚动条除上下三角外的其他位置都为白色,上下三角为红色。大家可以根据具体的需要来对滚动条的颜色进行修改!
使用dl,dt,dd制作CSS垂直菜单
我一直在提倡不要使用列表来制作菜单,而且我一直在研究可以替换用列表制作菜单的方法。现在我依然反对使用无序列表来制作菜单,但我做了让步,用释义列表来制作CSS菜单比起无序列表要好多了。通过释义列表你有两个不同的方法可以让你选择使用(或许是三个)比起无序列表使用释义列表可以更灵活且更容易地定义标签的样式,你甚至可以只针对连接进行样式化并忽略"dl"和"dt"它们的样式,或许"dd"的默认缩进是唯一需要删除的样式。上面的菜单在"dl"里有张背景图片,在"dt"和"dd"也有背景图片,在碰到选择大号字体的时候这样就不会发生问题。 HTML代码: 查看演示>>
Div+CSS教程:如何闭合浮动元素?
所以,原来在标准兼容浏览器中我们也可以有这么多的方法闭合一个浮动元素,而且只需要 CSS,无需其他。顺带说一下以上除了overflow,其余都有一个附加效果就是自动收缩父容器宽度。 而对于 IE/Win,它有一套自己的体系,就是 layout,具有 layout 的元素会自动闭合浮动元素,再来看看触发 layout 的 CSS 属性,会发现和上面的块级格式化范围有很多类似之处: 以上来看 IE 中闭合浮动元素的方法也不少,自然也都有其局限性,要么有附带效果,要么使用的是非标准属性(无法通过验证)。 还要提一点的是 display:inline-block,这个属性对 IE 而言本身没什么用,实际效果只是给一个元素暗地添加了 layout,但是标准兼容浏览器是认得这个属性的,所以要不影响这些浏览器,需要将 display 设回默认。这里 IE 有一个 bug,如果先定义了 display:inline-block,然后再将 display 设回 block(这两个 display 要先后放在两个 CSS 声明中才有效果),那么 layout 不会消失,同时也不会影响其他浏览器,所以目前来说,这也算一个不错的触发 layout 的方法: 所以要跨浏览器闭合浮动元素,可以选择的方式还是很多的,如何搭配使用这些 CSS 属性就要具体情况具体分析了,灵活应用条件注释也很有必要,要是实在不行我们回过头来还有 clear 可以用嘛。
CSS加载方式对页面优化的影响
This causes the blank white screen problem. The page is totally blank until the stylesheet at the bottom is downloaded, on the order of 6-10 seconds for this page. The browser is waiting for the stylesheet to be loaded before it renders anything else in the page, even the static text. 导致的问题就是,页面会有一段时间“朴素”,突然之间又“华丽”,用户体验很不好。 2、尽量使用 <link rel=”stylesheet” href=”http://www.syku.net/skin/syku/default.css” type=”text/css”> 的样式导入方式,而减少 @import 的使用,更勿使用多层嵌套的 @import 。因为在 IE 里, @import 相当于将 <link> 放在页面尾部。This is a valid syntax, but, even though it’s in the document’s HEAD, it breaks progressive rendering and instead causes the blank white screen and Flash of Unstyled Content problems.
CSS经验之谈:保持CSS文件整洁与样式统一
在52CSS.com群里,一位网友遇到了一个头疼的问题。需要对经过若干次修改以后的网站进行重整,需要剔除冗余的代码,在CSS样式重整方面,比较头疼,不仅需要对现有的样式进行合并与精简,还需要为网站增加换肤功能。 不难看出,这是一个令人感觉很烦躁的工作,面对一行一行代码头皮发麻。如果我们养成良好的习惯,或许可以让工作更容易一些。就此问题与经验,以下的文字或许有很大的参考价值: 使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性。我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰。 你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些“快速修补”的方法。一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成。想象一下,这将是一个怎样的境况。 其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的“快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里。所以现在你面对的只有2个选择:A、在一个星期之内找出一个方法去清理规整这些样式;B、找一份新的工作吧。 千万不要将你的工作变得愈来愈困难。使用链接和导入样式表是你的不二之选。规范的创建并保持样式表的整洁,你会活得更容易一些。 提示:小心使用链接或导入的方法会在标记上添加冗余的样式。每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护。因此可以理解为什么大型站点会为不同的区块部分而去分离样式表。小心不要玩过火了,过犹不及。 这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加。这些都会潜在的影响性能。因此,Internet Explorer将链接的样式表数限制在了32个。 请特别注意,在实际工作中,注意保持CSS文件整洁与样式统一。
CSS经验之谈:灵活运用注释带来的益处
CSS实战经验:灵活运行注释带来的益处 如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助。最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助。 提示和标签 这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最为重要。例如: /* Turn off borders for linked images */ img { border: 0; } 时间戳和签名 许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字。这些都会提供给我们一些联系信息以及文档更新信息。 /* Styles Updated: Thu 4.8.08 @ 5:15 p.m. Author: syku.net ――-*/ 对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要。要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情。 组织
掌握CSS缩写技巧
为了让网站能够更快,Web的建设者都会按常规地压缩和优化网站上的每一个图像文件,这常常使得为了将文件的大小减少几个百分点而牺牲了图像的质量。由于 CSS样式表是纯文本文件,和图像相比相对较小,所以Web建设者很少考虑采取措施减少其CSS样式表文件的大小。但是,通过使用CSS缩写以及其他的一些简单技巧,你可以在很大程度上减少样式表的大小。 Web网站可用性的关键指标是速度,更确切地说,是页面能以多快的速度出现在访问者的浏览器窗口里。影响速度的因素有很多种,包括Web服务器的速度、访问者的Internet连接情况,以及浏览器必须下载的文件大小。尽管你无法控制服务器和连接的速度,但是你可以控制构成网站Web页面的文件大小。 在我对自己样式表的一次非正式的特别测试中,我把文件的大小降低了大约25-50%。 使用CSS的缩写性质 CSS 的缩写性质(shorthand property)是一些专用的性质名,用来代替多个相关性质的集合。例如,间隙性质(padding property)是顶部间隙(padding-top)、右侧间隙(padding-right)、底部间隙(padding-bottom)和左侧间隙(padding-left)的缩写。 使用速写性质让你能够把多个性质/属性对(property/attribute pair)压缩进CSS样式表的一行代码里。例如,想一想下面的代码: 将它用一些缩写性质来替代就能够把代码减少为下面这样,两者的实际效果是完全一样的: 当属性是类似的值的时候,例如用于边框空白性质(margin property)的线性测量的时候,接在缩写性质之后的属性的顺序很重要。属性的次序是从顶部(顶部的边框空白)开始,然后围绕格子(box)按顺时针次序继续。 如果缩写性质的所有属性都是相同的,那么你可以简单地列出单个属性,然后在前面将它复制四遍。因此,下面的两个性质是相等的: margin: 5px 5px 5px 5px; margin: 5px; 类似的,你可以使用接在边框空白或者间隔性质之后的两个属性来代表顶部/底部和右侧/左侧属性对。 margin: 5px 10px 5px 10px; margin: 5px 10px; 属性的顺序在它们是不相似的值的时候是不重要的。因此,边框颜色、边框风格和边框宽度等属性可以以任何顺序接在大纲性质(outline property)之后。忽略某个属性等同于从样式规则里忽略掉对应的常规性质。 CSS缩写性质列表