推荐阅读
Illustrator设计制作古典花纹图案教程
先来看下最终效果:一、绘制图案中的花形1、单击工具箱中的“星形工具”按钮,在页面中单击鼠标左键,弹出“星形”对话框,其参数设置如图(1)2、单击“确定”按钮,在页面中绘制一个星形,星形的轮廓色设置为橘黄色(R:255,G:204),如图(2)3、选取绘制的星形,然后将星形由下向上添加白色到紫色(R:152,G:2,B:126)的放射状渐变色,添加渐变色后的图形如图(3)4、单击工具箱中的“转换描点工具”按钮,在星形的控制点上按下鼠标左键拖曳,此时将在控制点的两侧出现控制柄,状态如图(4)5、拖曳鼠标到合适位置后释放,在右侧出现的控制柄上按下鼠标左键拖曳,将其中的一个控制柄进行调整,其控制柄的调整状态如图(5)提示:当第一次在控制点上按下鼠标左键拖曳时,在控制点的两侧将出现两个控制柄,任意拖曳鼠标的位置,出现的控制柄将始终以控制点为对称点。当释放鼠标,再次调整任意一个控制柄时,另一个控制柄将处于锁定状态。当对图形调整后,再次在控制点上单击鼠标时,调整后的控制点将还原为没有调整时的形态。
Photoshop基础教程之浮动面板综合简介
这节课简单介绍下photoshop浮动面板的组成以及种类。各种浮动面板的使用技巧和方法。具体的使用我们在以后进行讲解。 ★.浮动面板的组成: 浮动面板是Photoshop中非常重要的辅助工具,它为图形图像处理提供了各种各样的辅助功能。下面是浮动面板的名称:
如何制作狐狸叫派对海报图片的PS教程
一首狐狸叫的网络歌曲红了全球,以此为创作的广告层出不穷。下面是以此为主题的派对海报制作。过程:先构思好内容,当然少不了狐狸,然后把派对的一些元素加进去,画面看上去有个性即可。最终效果 一、选一个有纹理的背景。 二、快速找个合适的人物素材,感觉差不多就行了,注意前提是要清晰一些的素材,毕竟作为画面的主体。 三、找一个狐狸素材,最好背景干净些容易抠图,如果毛发清晰,就用“通道载入选区”方法来抠图,如果不太好抠图就随意先抠图,然后下载“毛发笔刷”来填补周边的绒毛。
Photoshop CS2 入门之菜单介绍
虽然你毫无疑问地想要自己动手把照片做些处理,想要马上发挥你的潜能,但是我建议你最好先着重了解一下Photoshop是如何工作的。首先确保你的Photoshop CS2已经正确的安装,并且事先浏览此程序各个方面的功能以便使你对它的工具和布局有一个基本的了解,这样在将来我们真正操作的时候能更方便,更熟练。当准备好开始你的Photoshop之旅的时候,要事先通过双击Photoshop图标登陆此程序。当Photoshop加载完成之后,它的菜单条、工具箱以及四个控制浮动面板出现在屏幕上。图1显示了Photoshop cs2在windows下的外观,如图所示:如果宽度没有设置成500,高度没有设置成360,现在让我们输入这些值。通过点击“宽度”域来选择它,然后输入500。按下TAB键,移动光标到“高度”域,输入360。各域之间的光标移动可以通过用鼠标点击,也可以通过按Tab键进行切换。我们一般把“分辨率”设置为72象素/英寸。Photoshop CS2将72ppi作为缺省设置,因为大多数显示器在屏幕区域中每英寸显示72个象素。换句话说,文档设置的分辨率与显示器的分辨率一样。如果你的设置不是72ppi,将其改成72。如果加大了分辨率、高度或宽度的值,那么图象的尺寸也会随之增大。在我们实际操作中我们尽量避免大图像,因为大图象在操作的时候非常笨重,反应比较慢,而且它还会降低计算机的速度。在“模式”选项中,应该设置为RGB颜色(红/绿/蓝)。Photoshop CS2将RGB颜色作为缺省设置,因为RGB是视频显示器显示颜色的标准色彩模式。在RGB模式中,颜色由红、绿、蓝三种颜色组合而成。当设置成RGB颜色模式的时候,Photoshop CS2的所有绘图和编辑属性都是有效的。如果你的计算机没有设置为RGB颜色模式,可以通过点击“模式”的弹出式菜单选择“RGB颜色”来设置RGB颜色。如果你想要把新建的图层背景是白色的,请点击组合框的“白色”按钮。如果你选择了“背景色”选项,Photoshop CS2上次使用的背景色将作为你新建文档的背景色。如果你选择“透明”,你将工作于一个没有颜色值的背景层上,当我们点击“确定”按钮关闭新建对话框时,一个新的文档窗口将出现在你的屏幕上,在窗口的主题条中写着文件的名字(未标题)、当前的显示模式和放大比例。可以滚动、改变大小和关闭Photoshop CS2的窗口,也可以通过单击和拖动主题条的方法把窗口移动到你想要位置。我们还可以通过选择“视图”颉胺糯蟆被蛘甙聪CTRL+“+”放大图片;选择“视图”颉八跣 被蛘甙聪CTRL+“-” 来缩小图片。二、Photoshop CS2菜单 Photoshop CS2的菜单条包含9个下拉式菜单。越熟悉Photoshop CS2的功能,那么越会在操作Photoshop CS2时选择正确的工作路径。下面的部分将对Photoshop CS2菜单中9个下拉式菜单做一下介绍。1、“文件”菜单: “文件”菜单中的大部分命令用于对文件的存储、加载和打印这些命令,如“新建”、“打开”、“保存”、“另存为”、“页面设置”和“退出”命令在其他Windows中的应用程序中都是极其普遍的。我们先看一下“文件”下拉菜单中的界面,如图3所示:
最新发布
网页表格分割线去除方法
网页表格分割线去除方法。其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。
X/HTML5 和 XHTML2
在了解了XHTML 2的进展之后,我们再来看看X/HTML 5 的进展。X/HTML 5酷在什么地方章节元素的构想 X/HTML 5引入新的元素用于把Web页面分成若干章节。这些组成部分有助于搜索引擎和辅助工具更好地理解页面内容。使用这些新元素可以使标签更具可读性。 章节化内容的构想很酷!但是请看一下为什么使用章节的技术不够酷。对话元素对话元素用来表示一段交谈。它包括一个用于定义会话者的dt元素和代表会话者讲话内容的dd元素。例如:<dialog> <dt>Costello</dt> <dd>Look, you gotta first baseman?</dd> <dt>Abbott</dt> <dd>Certainly.</dd> <dt>Costello</dt> <dd>Who's playing first?</dd> <dt>Abbott</dt> <dd>That's right.</dd> <dt>Costello</dt> <dd>When you pay off the first baseman every month, who gets the money?</dd> <dt>Abbott</dt> <dd>Every dollar of it.</dd> </dialog>figrue元素在印刷发行(教科书、报纸、杂志等)媒体对象(照片、插图、图表等)中经常会使用到标头。到目前为止,Web标记语言还没有可以产生这种效果的结构。figrue元素有一个legend子元素可以用来指定图像的标头。例如:
XHTML标签都有一个结束标记
原文连接:http://www.dudo.org/article.asp?id=253XHTML规范中有一条标准就是“每个XHTML标签都有一个结束标记”。那么对于HTML中原来不带结束标记的元素,则在该结束前加上“/”来关闭这个标签,如,<img>标签原来在HTML中的写法:<img src="..." alt="..."> 到了XHTML中,就应该在“>”前增加一个“/”来关闭这个标签,为了防止某些老式浏览器不认识这种写法,因此要在“/”前加上一个空格(HTML兼容性标准):<img src="..." alt="..." /> 这似乎是说在开始标记中加上一个“/”就可以关闭掉这个标签。特别是对于空内的标签来说,似乎使用这种写法更简洁了。比如说,<div class="clear"></div> 这是在清除浮动(闭合浮动元素)中经常用到的一段代码。那么它似乎可以样写:<div class="clear" /> 是的,<div>元素可以为空,这样写没有问题,但是我们对其它标签也使用类似的写法会出现什么样的后果呢?如在<head>中引入外部Javascript文件,我们一般这么写:
面向XHTML的IE条件注释
条件注释是IE特有的一种功能,能对IE系列产品进行单独的XHTML代码处理,注意,主要是针对XHTML,而非CSS。 条件注释功能非常强大,可以进行true和false判断,例如: 程序代码<!--[if IE]>此内容只有IE可见<![endif]--> <!--[if IE 6.0]>此内容只有IE6.0可见<![endif]-->条件注释能被IE判断是什么版本的浏览器,并在符合条件的情况下显示其中的内容,从IE5.0到7.0都支持注释功能,而且版本号精确到小数点后4位: 程序代码 <!--[if IE 6.1000]>此内容只有IE6.1可见<![endif]-->IE条件注释还支持感叹号非操作: 程序代码 <!--[if !IE 6.0]>此内容除了IE6.0版本之外都可见<![endif]-->
XHTML语言默认的CSS样式
html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,h2,h3,h4,h5,h6,noframes,ol,p,ul,center,dir,hr,menu,pre { display:block} li { display:list-item} head { display:none} table { display:table} tr { display:table-row} thead { display:table-header-group} tbody { display:table-row-group} tfoot { display:table-footer-group} col { display:table-column} colgroup { display:table-column-group} td,th { display:table-cell;} caption { display:table-caption} th { font-weight:bolder;text-align:center} caption { text-align:center} body { margin:8px;line-height:1.12} h1 { font-size:2em;margin:.67em0} h2 { font-size:1.5em;margin:.75em0} h3 { font-size:1.17em;margin:.83em0} h4,p,blockquote,ul,fieldset,form,ol,dl,dir,menu { margin:1.12em0} h5 { font-size:.83em;margin:1.5em0} h6 { font-size:.75em;margin:1.67em0} h1,h2,h3,h4,h5,h6,b,strong { font-weight:bolder} blockquote { margin-left:40px;margin-right:40px} i,cite,em,var,address { font-style:italic} pre,tt,code,kbd,samp { font-family:monospace} pre { white-space:pre} button,textarea,input,object, select { display:inline-block;} big { font-size:1.17em} small,sub,sup {font-size:.83em} sub center { text-align:center} abbr,acronym { font-variant:small-caps;letter-spacing:0.1em} :link,:visited {text-decoration:underline} :focus { outline:thindottedinvert} /* Beginbidirectionalitysettings(donotchange)*/BDO[DIR="ltr"] { direction:ltr;unicode-bidi:bidi-override} BDO[DIR="rtl"] { direction:rtl;unicode-bidi:bidi-override} *[DIR="ltr"] { direction:ltr;unicode-bidi:embed} *[DIR="rtl"] { direction:rtl;unicode-bidi:embed} @media print{ h1 { page-break-before:always} h1,h2,h3,h4,h5,h6 { page-break-after:avoid} ul,ol,dl { page-break-before:avoid}
XHTML常用的结构标签
结构body, head, html, title 文本abbr, acronym, address, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p, pre, q, samp, span, strong, var 链接 a 列表dl, dt, dd, ol, ul, li 表单form, input, label, select, option, textarea
HTML 5草案并没有成为正式标准
昨天在W3C看到,6月10日发布了新的 HTML 5 草案(Working Draft)。粗略的读了一下它提供的 新版本说明文档 ,作了一点笔记:HTML 5草案并没有成为正式标准引用:Publication as a Working Draft does not imply endorsement by the W3C Membership.作为“草案”发布并不意味着已经得到W3C成员的背书(支持)。The HTML 5 specification will not be considered finished before there are at least two complete implementations of the specification.HTML 5规范要等到有至少两个软件对其实现了之后,才会宣布定案。XHTML 1是1999年就发布了,经过了两三年才得到全面支持,而直到近十年之后的最近才得到全面推广。所以等HTML 5得到支持(尤其是那位“非主流”的浏览器 的支持),还得有一段日子。根据W3C的 HTML工作组 的时间表,要到2010年才会有正式的定案。简单到惊奇的DOCTYPE声明<!doctype html>就这么简单,哈。而且,没有大小写之分。值得说明的是,规范要求,如果声明了这一个DOCTYPE,则可以用所谓的“‘custom’ HTML syntax(定制的HTML语法,我也不知道为什么叫这个)”,亦即以前那种不需要标签闭合的HTML语法。同时它仍然允许XHTML那样的XML格式语法,这样的话就要声明xml文档的DOCTYPE而不用上面这个。向前兼容性HTML 5规范没有“deprecated”的元素,原因就是它一方面要求设计师不要试用某些元素,另一方面却要求浏览器必须支持这些元素。这样的话,以我的直觉,它是想支持以前所有的用HTML或XHTML编写的网页。这对设计师来说算是一个福气,终于不用再受XHTML严苛语法的限制了。被删去的元素
CSS标准:vertical-align属性
原文:http://www.mikkolee.com/13最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。vertical-align的值有点多,包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值(%,em,ex等等)。我先给大家看一个我觉得最夸张的值:bottom。代码如下:p { font-size: 18px; line-height: 36px; font-family: Tahoma, sans-serif;}img { vertical-align: bottom ;}然后大家看一看这段CSS在各个浏览器中的效果(图片是我故意做成那个样子,为了可以看清楚相对位置):
innerHTML的认识
相关文章:innerHTMLHTML DOM insertRow() 方法Definition and Usage定义与用法The insertRow() method is used to insert a new row in a specified position in a table.insertRow()方法可用来往表格中的指定位置上插入新行Syntax 语法tableObject.insertRow(index)//索引,增添新行--------------------------------------------------------------------------------Example 举例<html><head><script type="text/javascript">function insRow(){document.getElementById('myTable').insertRow(0)//在文档中寻找控件}</script></head><body><table id="myTable" border="1"><tr><td>Row1 cell1</td><td>Row1 cell2</td></tr><tr><td>Row2 cell1</td><td>Row2 cell2</td></tr></table><form>//表单内放置控件<input type="button" onclick="insRow()"value="Insert new row before the first row">//value为控件上将要显示的内容</form></body></html> 在js方法中可以直接用成对标签的id.innerHtml对标签内容进行赋值而不需要在js方法中声明变量innerHTML是html标签的属性,成对出现的标签大多数都有这个属性 //标签属性是开始标签和结束标签之间的字符,不包括标签本身 比如 <p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p> 这里的p标签和span标签嵌套在一起 那么pp.innerHTML的内容就是 aaaaaaaaaa<span id="ss">bbbbbbbb</span> ss.innerHTML的内容就是 bbbbbbbb ========================= 类似的一个属性是outerHTML 那么pp.outerHTML的内容就是 <p id="pp">aaaaaaaaaa<span id="ss">bbbbbbbb</span> </p> ss.outerHTML的内容就是 <span id="ss">bbbbbbbb</span>
表格标签(table)深入了解
表格(table)是一直以来长期被大家使用的标签,直到现在还是在用,不过呢因为现在的网站重构,建议大家不要表格(table)来布局而很多朋友误以为用表格(table)就是所谓的不标准了,其实不然,表格(table)是一个重要元素。前不久为了寻找表格(table)所包含的主要标签,一直在寻找着,找到当然就是跟大家一起来分享一下。表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下:<table>table标签可定义表格。在 <table> 标签内部,你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。<caption>caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。<th>定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。<tr>在表格中定义一行。<td>定义表格中的一个单元格。<thead>定义表格的表头。thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。<tbody>定义一段表格主体(正文)。使用 <tbody> 标签,可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。虽然您可能想包括一个,甚至会在表格中包括两个或更多个 <tbody> 标签,但是我们建议最好在表格中没有 <tbody> 标签。在 <tbody> 标签中,只有 <tr> 标签可以定义表格行。并且一旦定义,一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时,您也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。