推荐阅读
Illustrator设计个性时尚风格的名片教程
很多人都知道,Illustrator 为我们提供了简单好用的工具制作一些小小的印刷设计,比如说名片等。这个简短的教程让你轻易学会如何利用Illustrator 制作精美有趣的名片,而且,有每一个步骤都有实图参照哦!首先,我们将手绘一张人的画像插图,用粗略线条勾勒即可,然后在一个已有的名片模板上制定背景模式和文字信息,适当地保留空白和需上色部分。效果图我们将要做的名片的尺寸是传统名片的比例大小,同时充分利用卡片的两边。这个设计只包含两种颜色 -- 蓝绿色和黑色。蓝色是贯穿整个设计的,但只需用刀低比例的黑色,即灰色,用来做网状背景图。每一种颜色都只用单一原色,可以让你的名片看起来整洁且清新美观哦。一,手绘插图图01首先,让我们从这张线条型的人物粗略图开始吧。把图片上你的最佳笑容挖出来,然后放进Illustrator 里,把opacity 降低,按住CMD/Ctrl和2把它锁定到位。(图02)图02
Photoshop形状工具(2)
第一章:形状工具基础 第二步 第三步 第四步 第五步 对箭头线段做一些调整,按住Ctrl/Command点击直线箭头选中它,然后在选项栏中选中"显示定界框"复选框显示出可调大小的定界框,将鼠标放在定界框的外缘它会变成旋转图标,按住Shift键可以限定旋转角度增量为15度,如图所示进行旋转 。最后在形状外点击结束变换。 第六步
CS3新增黑白转换命令原理剖析
对颜色范围以及可选颜色命令有一定了解的朋友都知道,一般情况下,图象中任意一点的颜色包含两种颜色:一种是由MAX(R,G,B)所对应的颜色,为了讨论的方便,我们将其称为单色;另一种是由MAX(R,G,B)与MID(R,G,B)所定义的颜色,同样为了讨论的方便,我们将其称为复色。 当MAX(R,G,B)=MID(R,G,B)<>MIN(R,G,B)时,只有复色而无单色; 当MID(R,G,B)=MIN(R,G,B)<>MAX(R,G,B)时,只有单色而无复色; 当MAX(R,G,B)=MID(R,G,B)=MIN(R,G,B)时,无色,呈中性灰。 勾选“染色”选项的情形
PhotoShop利用LAB通道调制油画风格的照片
那些角度普通,质感平淡的花朵,常常被我们认为是一些没有意义的废片。其实废片可以再利用,只需一分钟,经过简单的PS后期处理之后,马上变得非常鲜艳生动。下面我们介绍在LAB通道中制作油画效果,几步就可以把你的费片变成色彩动人的好片。在LAB通道中进行色彩调整,能够最大限度地挖掘原图隐藏的色彩潜力,最大的优势是调出色彩自然和谐,不会产生严重的色彩溢出现象和刺眼的色彩分离。下面我们来实验一下:一、效果对比二、操作步骤: 1.首先将图像模式从RGB模式转化为LAB模式(打开图像,在菜单的编辑栏中找到图像->模式->选择LAB颜色项目),进入通道面板: 2.在LAB通道内调整颜色:选中B通道Control+A ,使用Control+C复制该通道,选中明度通道Control+V粘贴刚才复制的B通道,Control+D取消选区。这样的目的是加亮黄色,加暗蓝色,使得颜色得以强化,得到以下图像
最新发布
妙用dw图层与表格进行网页布局
使用图层可以像素为单位精确定位页面元素,并且可以将层放置在页面的任意位置。当把页面元素放入图层之中时,还可以控制哪个显示在前面、哪个显示在后面、哪个显示、哪个隐藏,可见,层的优点是很明显的。但是目前浏览器只有4.0以上的高版本才支持层,考虑到兼容性和修改时的方便,一般可在编辑网页时采用层布局或者部分页面采用层布局,而在发布网页时再将其转换为表格布局。下面以Dreamweaver 4.0为例介绍图层与表格的相互转换操作。将表格转换为图层将表格转换为图层是为了调整网页布局时方便,具体操作步骤如下:1、选中页面中欲转换为层的表格。 2、单击菜单“Modify/Convert/Tables to Layers”,在弹出的对话框(如图1)中选择想要的选项。Prevent Layer Overlaps防止层重叠选择此项可以在建立、移动层和调整层大小时防止层互相重叠。Show Layer Palette显示层面板选择此项,在转换完成后显示层面板。Show Grid显示网格选择此项,在转换完成后显示网格。Snap to Grid吸附到网格选择此项,可借助网格来定位层。3、单击OK按钮开始转换。
用Dreamweaver4添加背景音乐及制作动态字
添加背景音乐 在Dreamweaver中插入背景音乐是非常容易实现的,这里介绍两种方法,供大家选择。1、在页面不显眼的地方插入一空层 ,并在层内放入一个ActiveX对象,双击该对象,在打开的对话框中选择一个MIDI、WAV等音乐文件,然后在层对象属性面板中设定其可视性为“Hidden(隐藏)”,保存变动后按F12预览网页,听听是否有音乐声。2、还可以利用Dreamweaver的“Behaviors(行为编辑器)”,单击“+”按钮,选择其中的“Play Sound”选项,在弹出的对话框中选择一个音乐文件即可。自己动手试一试吧!制作动态文字特效在Dreamweaver中普通的文字是以字符为单位的,不能作为对象,即一些非常有用的JavaScript事件不能赋予文字。因为文字不像图片和其他控件有具体的“标记”,所以文字与很多特效失之交臂。为了给文字添加特效,只有把文字做成超链接来处理。这样文字就成为了对象,可以施加行为了。但是这样又带来了一些不需要的超链接属性,比如下划线,以及hover、visited等颜色变化。要想单纯为文字添加特效,可以先把所想设置的文字做成超链接,然后再在它的上面添加行为,最后我们再把超链接转变为普通文字。具体的步骤如下:选中你想编辑的文字,在链接目标框里随便填入几个字符。选中这个链接,单击窗口(Windows)→行为(Behaviors),弹出行为面板。按下“+”添加你想要的行为,如Play Sound等。打开Dreamweaver的超文本编辑器,找到这个链接,把< a>改为< font>,把< /a>改为< /font>。最后把“href=……”删掉。保存此页。按F12预览一下。效果还不错吧!
HTML5:b和i标记将被赋予真正的语义
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用,甚至是反对使用的,因为认为他们只是“表现”粗体和斜体,而没有任何“语义”。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的:
DTD文档类型声明doctype
HTML是万维网上发布超文本的通用语言[1]。从1982年Tim Berners-Lee简化SGML建立HTML的原始定义到2001年发布XHTML1.1规范,HTML成为了有多个版本的国际标准[2]。各版本的规范都用一种机器可读的语言定义,它描述了法定结构、元素和属性,这就是文档类型定义(Document Type Definition),简称DTD。相关文章:HTML代码学习:DOCTYPE的缩写DTD描述了文档类型声明(DTD declaration,简称doctype[3])位于HTML文档最前面,它是联系文档和DTD指令。比如HTML4.01 Strict的doctype是:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 它指明了文档使用的HTML版本,这是诸如浏览器之类的工具解析文档时最需要的信息。比如W3C的验证工具可依据它来检查语法和指出错误。早期浏览器对标准的错误实现、私有扩展的大量滋生和为了向前兼容以及早期标准本身的混乱等导致了那时的文档既没有doctype也没有对DTD的直接引用,也导致了新的标准难以得到应用和普及,因为浏览器无法区分它们。为了处理根据Web标准创作的网页和根据陈旧实践创作的网页,Todd Fahrner 在1998年提出了“came up with a toggle”方法[4]能允许浏览器提供两套渲染模式: 即有完整的doctype的文档使用W3C的标准进行解析,否则使用旧的方式解析。这个方法符合实际且简单有效。两年后,Mac版IE上首次运用,很快的其他浏览器制造商纷纷采用, 这就诞生了doctype嗅探(doctype sniffing或doctype switching)。浏览器通过它来决定其引擎应该采用标准模式、准标准模式还是怪癖模式,这将对HTML和CSS的解析、CSS布局及JavaScript脚本产生非常大的影响[5] 。毫无疑问,我们应该尽可能的采用标准模式。HTML5虽然还处于草案中,但最新浏览器Firefox3.5、Chrome2、Safari4和IE8已经开始支持部分特性,特别是Google Wave的发布掀起了推进HTML5实践的新高潮。HTML5并不基于SGML也没有DTD,但它为了向前兼容,接受了doctype嗅探这个事实,定义了在text/html中doctype是唯一的模式转换声明,除此外没有什么用处。其doctype如此简洁:<!doctype html>[6] 。值得一提的是IE8为了解决向前兼容采用了X-UA-Compatible声明[7],导致在IE8中浏览器的渲染模式不仅仅取决于doctype嗅探还取决于X-UA-Compatible声明,这个不仅仅导致了模式判断更加复杂[8],也违背了web设计的逐渐增强(progressive enhancement)思想[9]。
网页中的H1标记的使用注意事项
H1标签是网站排名非常重要的一个因素,因此我们一定要正确使用它。本文为你介绍H1标签使用的七大注意事项:每个页面都应该有H1标签,H1标签是每个网页不可缺少的要素。 使用H1标签的内容应该简洁明了; H1标签要尽量出现在源文件代码的开头的部分,这样可以让访问者和搜索引擎蜘蛛能尽快了解页面的内容。 每个页面的H1标签元素的内容应该是不一样的,每个页面包含的内容肯定是不一样的,所以总能够为每个页面的H1标签找到一个不同的角度。 使用H1标签的元素的文字应该包含页面的目标关键字。 每个页面中应该只有一个H1标签。在博客网站上最常见的错误是在博客首页的每个文章标题上都使用了H1标签。 使用H1标签的元素不应该加链接——如果要加的话也是链向它自己,很明显没有那个页面需要自己链向自己。
HTML教程:定义列表
原文:http://andymao.com/andy/post/104.html上一节:有序列表写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什么意思,但是这两篇重要的地方就在于要读者加入自己的思考。有序无序单标签很简单,只要知道用法就行,但是关键点我认为不在于知道这个标签长什么样,重点是在于什么样的数据适合使用什么样的列表。什么样的数据是有序的,什么样的数据是无序的?阅读完要思考,这样才能学到东西,知识才能是自己的。定义列表其形式特别,用法也很特别,相比较无序列表来说用到定义列表的就少很多。也有很多朋友还没有开始使用这个列表,那么下面就来分解一下这个列表的代码:<dl> <dt></dt> <dd></dd> </dl>看上面这段代码我们发现这里并没有出现<li>标签,而是由DL、DT、DD三个标签组成,根据外型以及之前的列表我们可以知道,DL是这个列表的一个容器,就像个箱子,不同的是这次箱子里不只有统一标准的单个小盒子了。而是出现两个不同的内容我们怎么理解这个DT与DD呢?从语义上来讲,DT是名称,是标题,而DD是解释,是内容。DT与DD都是盒子,DD只对应解释他上面的一个DT,不能越级或是向下解释。当DT不存在的时候那么DD也就没有存在的意义,而DT是否一定需要DD跟随其后,这点上我还没有找到确切的文献可以说明这一点,但是以我对于定义列表的理解,我认为如果数据中只有DT没有DD那么这就一不能成为定义列表,直接用UL无序列表就可以了。但是当数据中只有某一个或是少数几个没有DD,而大部分都有DD,那么我认为这种形式是可以存在的。<dl> <dt>有序列表</dt> <dt>有序列表</dt> <dt>有序列表</dt> <dt>有序列表</dt> </dl>以上这种很明显就不合适了,这样的形式就是无序列表,何必要用定义列表呢,从语意上也说不通。<dl> <dt>有序列表</dt> <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd> <dt>有序列表</dt> <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd> <dt>这一句没有解释</dt> <dt>有序列表</dt> <dd>有序列表就是有序列的数据以列表形成组织而成的数据形式</dd> </dl>上面这种形式则我个人认为是可行的。那么一个DT是否可以带多个DD呢?这点上我同样没有找到文献说明不可以,并且在一些知名的网站中这种一个DT带多个DD的依然很多。我对此的看法是,物殊情况下一个DT带多个DD是可以的,但是一般情况上我认为这种做法还是有所欠缺。从释上来看,多个DD是否表明着多个解释?或是解释内容要分段也不需要让DD来当这只抓耗子的狗。一个DD中完全可以内嵌很多个段落标签。再则从样式应用上来讲,多个DD整体松散,其设计的扩展性不足。比如,当我们要做一个点击DT隐藏对应的DD的效果时,这种多DD的做法就不那么好实现了。所以在不是特殊用途情况下尽可能不要使用一个DT带多个DD的做法,还是把内容放在DD里,分段的就让段落标签去做,分列表的就让有序或是无序列表去表现。
HTML教程:有序列表
原文:http://andymao.com/andy/post/103.html上一节:无序列表信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……以前我们面对这些有着顺序或是有数字注明排序的内容时大多是在数据前自行加上一个数值,或是由程序加上这个数值。而如果使用有序列表则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了。那么还是先来了解一下有序列表的代码形式:<ol> <li>这就是列表的内容了,这是第一句</li> <li>这就是列表的内容了,这是第二句</li> <li>这就是列表的内容了,这是第三句</li> <li>这就是列表的内容了,这是第四句</li> <li>这就是列表的内容了,这是第五句</li> </ol>大家看到了其本形式与无序列表的一样,只是在外围标签上名称不同。无序是UL,有序就变成OL了。所不同的是有序列表将会有比无序更多的标签属性。因为是有序的就会涉及顺序的方方面面。改变开始值通常情况下浏览器会从阿拉伯数字“1”开始自动有序编号。而事有特殊,当有序列表需要变成两个部分,那么下一部人从头开始编号自然就是不对的了。那么下一部分的编号自然是要根据上一段最后一个编号加1为开始号。这就是说我们需要改变列表的开始值。改变开始值的属性是:"start",正式的写法是:<ol start="6"> <li>这就是列表的内容了,这是第一句</li> <li>这就是列表的内容了,这是第二句</li> <li>这就是列表的内容了,这是第三句</li> <li>这就是列表的内容了,这是第四句</li> <li>这就是列表的内容了,这是第五句</li> </ol>大家注意到了,上面这段代码是说列表的开始值是从6开始的,那么现在可以试着在一段有序列表中加入这一属性看看是否发生了变化?改变编号类型
HTML教程:无序列表
原文:http://andymao.com/andy/post/102.html段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作万用膏药一样倒处使用,不过相信大家也都知道现在“DIV”这个标签的作用已经被扩大化了(POPO曾有一篇文章《<DIV>不是万能膏药》),更已经被一些人拿来与CSS一并说事。这里呢还是要重新强调一次:DIV只不过是HTML中的一个无语意标签,他可以用来布局或是作为无语意部分的处理,而CSS则是一种样式语言。名不正则言不顺,我这里不是古板,而是这种说法会让大家对于标准的理解会产生偏颇。基本的等级都弄不清楚,把标签功能无限放大,这些都不是一个正确的学习态度。我这里细细讲解各种标签以及用途其中一点也是希望大家正确理解WEB标准的意义。正确的说法应该是“xHTML+CSS”或是“WEB标准”简称为“标准”也可以。今天不是为发牢骚的,还是讲今天的主题《无序列表》列表,相信大家都已经用过了,Word里也有,很多文档编辑里也都有。而在HTML中的列表则有三种类型:无序列表、有序列表、定义列表。饭要一口口的吃,事要一件件的做,今天只讲无序列表,并且今天所讲的列表不会涉及到CSS的美化工作。说到这里大家应该也明白了,我的讲解都是分开来的,并不以样式美化为主,这也是要告诉大家标签代码非常重要。那么我们首先就要来理解列表。我们日常生活工作都是琐碎而没有条理的,而要想得到一个高效的友好的信息互通那么就要梳理信息,做好归类。这样才能有效传达信息。用列表把同类的内容进行简单的归纳,我认为这是列表的一个基本作用。常见的用途有:图书目录、饭店菜单、人员名单、待办事宜等等。而这些信息大多不是大篇的信息内容,而是简要的标题。当然列表的用途不是说只能是归纳标题信息,列表并没有去限制内容的多少。只是我们常用列表去归纳的多是些标题信息罢了。那么我们又如何去理解无序列表呢?无序的对应就是有序,从字面上去理解就很容易,有序就是说他本身就标明了前后顺序的,这是严格的,并且这些信息本身就有着顺序特性。比如我们写操作步骤那就就需要明确第一步第二步,这样的信息必然是有序的,而无序呢?也就是说其本身就是无序的没有任何顺序可言。这里要举个实例让大家思考一下:*部门的领导名单前后顺序是他们最头疼的事,虽然他们有时会写着排名不分先后,但是实际上依然是有排名的,那么这里我想提出问题:这样的名单应用有序列表还是用无序列表呢?当然这个没有标准答案,各人都有各人的思考方式,那么你是怎么想的?不妨在评论上留下你的想法。这里我就不说我是怎么想的,希望大家能多动动脑筋,多思考。列表的标签形式是:<ul> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> <li>这就是列表的内容了</li> </ul>这里我们要注意到,列表有两个部分,一个是最外面的一个标签<ul></ul>,一个是里面的内容<li></li>。我们可以这样去理解,<li></li>是一个个标准化的小盒子,他们主要存放着列表信息,而<ul></ul>则是个大箱子,他的作用就是存放小盒子。这些一个个的小盒子只有放在大箱子里他们才不会弄丢了。整齐而有利于运输(移植)、存放(定位)。那么列表与段落一样可以有很多属性在其中,比如,我们可以为<ul></ul>设置一个id或是class或是title等属性,其特点功用与段落中的一样。而<li></li>也可以有这些属性,但是一般情况下来说列表即然是同类的一般也不作特殊化处理。那么无序列表基本上也就算是讲完了,其实这篇最重要的内空就是什么样的信息应该用无序列表,而这些则需要在实际应用的时候多分析多思考。那么对于还没使用列表标签的朋友,开始使用列表标签,放弃用DIV代替列表标签的做法。或是用表格来表现列表的朋友也可以试着改变一下。从现在开始使用无序列表标签。当然如果你已经用了发现这样还不能满足你,那就等后面讲解如何用样式去开发出列表的潜力吧。今天讲的内容虽然比较简单,但是还是希望来读本篇文章的朋友可以思考一下上面我提出的问题。
HTML网页制作的强大8条技巧
虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。 1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用网络<br><i>曾伟滨</i><br></tt> 2。不要用800*600的分辨率来制作网页,当浏览者用640*480看网页时,不旦会使速度减慢,还会使网页图像和文字出现错位。当然,也可以使用帧,水平控制,表格等标识语句来取代己设定的象素,但就增加了工作量。 3。使用<br><p>只有一行,而使用<p><br>就会多了空白的一行。 4。使用16进制数来定义网页的颜色,而不要用red,black等语句,才能够充分利用Web调色板的216种色彩(另外的40种,一般人难以分辨)。 5。在<head>中加上<base target="_top">就可以使你的网页不至于在帧链接到他处时缩小,或者用<a target="_new"href="http://。。。"></a> 打开一个新窗口。 6。用<div>来按制就能够让许多浏览器都可以看到表格居中的效果,如果您用的是Netscape 4。0也可以加入align=center来代替它。 7。HMTL中的四个特殊字符(<,>,&,")是不能直接写在文件中的,必须用后面的语句来替换, <=< >=> &=& "="(英文字母一定要小写) 8。一些语义格式的字体效果<cite>,标题的斜体字<code>,显示源程序的宽体字<em>,强调用的斜体字<kbd>,要求键盘输入的宽体字<samp>,状态表示的宽体字<strong>,强调的粗体字<var>,构造变量的斜体字
网页表格表框制作技巧
网页表格表框制作技巧。--------------------------------------------------------------------------------表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。只显示上边框 <table frame=above>只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides>只显示上、下边框 <table frame=hsides>只显示左边框 <table frame=lhs>只显示右边框 <table frame=rhs>不显示任何边框 <table frame=void>