推荐阅读
Photoshop调出古典唯美效果图的外景婚片调色
案列对比图：左为原片，右为效果图1、[注：一直不厌其烦的讲复制背景层，不要在背景层上修改]。复制背景层，生成新的背景层，而后复制背景层生成图层1，修改混合模式为滤色，操作目的：提亮。2、创建“色相/饱和度”调整层，设置参数如下：3、创建“渐变映射”调整层，操作布草如下：
插画艺术网
本实例以造型优美的、抽象的花朵形象和渐变的、绚丽的花朵色彩，来表现插花艺术网页页面的设计主题。该设计效果强烈，点、线、面、色彩和图形的组合运用是构成网页的装饰要素。紫红色的运用为画面增添了浪漫气息。如图11-40所示，为本实例的完成效果。图11-40 本实例完成效果在本实例中所设计的内容与主题相符，体现插花这门艺术的优美与浪漫。协调的处理色彩与其他设计要素之间的相互关系，增强网页的信息和情感传递效果，使人们在浏览的时候产生共鸣。在制作过程中主要采用绘制路径、描边路径来绘制图像，使用“画笔”工具来修饰图像的颜色，更改图像的混合模式使两幅图像叠加起来，能得到更加丰富的图像效果。如图11-41所示，为本实例的制作流程。图11-41 本实例制作流程（1）启动Photoshop，执行“文件”→“新建”命令，参照图11-42所示对打开的“新建”对话框进行设置，创建一个名为“插画艺术网”的新文档。图11-42 设置“新建”对话框（2）单击“图层”调板底部的“创建新图层”按钮，新建“图层 1”，然后使用工具箱中的“矩形选框”工具，参照图11-43所示在视图中绘制一个矩形选区。
CSS兼容IE6,IE7,FIREFOX的一些收集
第一种，是CSS HACK的方法height:20px; /*For Firefox*/*height:25px; /*For IE7 & IE6*/_height:20px; /*For IE6*/注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。#example { color: #333; } /* Moz */* html #example { color: #666; } /* IE6 */*+html #example { color: #999; } /* IE7 */第二种是使用IE专用的条件注释<!--其他浏览器 --><link rel="stylesheet" type="text/css" href="css.css" /><!--[if IE 7]><!-- 适合于IE7 --><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]--><!--[if lte IE 6]><!-- 适合于IE6及一下 --><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->第三种css filter的办法，以下为经典从国外网站翻译过来的。.新建一个css样式如下：#item { width: 200px; height: 200px; background: red;} 新建一个div,并使用前面定义的css的样式：
最新发布
巧用Adobe Dreamweaver CS3的Spry框架实现表单验证功能
在以往版本的Dreamweaver中，我们如果要实现表单验证只有两种途径，一种是使用行为面板中的检查表单行为。另一个是借助其他表单验证插件来实现。其中检查表单行为所提供的功能太过于简陋，而使用其他插件功能也不能尽如人意。 好在新版本的Adobe Dreamweaver CS3提供了一个ajax的框架Spry。Spry框架内置表单验证的功能，这对于设计新手来说的确是非常方便的一项功能。Spry 验证文本域构件是一个文本域，该域用于在站点访问者输入文本时显示文本的状态（有效或无效）。例如，您可以向访问者键入电子邮件地址的表单中添加验证文本域构件。如果访问者无法在电子邮件地址中键入“@”符号和句点，验证文本域构件会返回一条消息，声明用户输入的信息无效。 下例显示一个处于各种状态的验证文本域构件： 除了文本框验证，Spry还提供了其他几个验证的表单元素。具体设置请看下面的组图：
巧用Dreamweaver CS3对表格进行排序
下面就看一下具体的排序过程吧！ 1.将光标移动到表格内任一单元格内，或选定表格，单击“Command/Sort Table…”，打开Sort Table对话框，如图所示。 2.在对话框中进行如下的选择： 在Sort By选项中选择要排序的Column(列)。 在Order选项中选择是根据alphabetically(字母)还是根据Numberically(数字)进行排序。 当列的内容是数字的时候这个选项是非常重要的。数字的排序是对列表按照一位和二位这样进行的(如1, 10, 2, 20, 3, 30)，而不是一个整洁的数字序列(如1, 2, 3,10, 20, 30)。 选取排列顺序是上升-Ascending(A to Z)，还是下降-Descending(Z to A)。 在对成绩表按总分或名次排序时，设置为： Sort By：Column5或Column6 Order：Numberically及Descending 3.要在不同的列进行次一级的排序，在Then By弹出菜单中指定排序选项。 4.选取Sort Includes First Row选项可以将第一行在排序时包括进去。假如第一行是不能移动的标题行，则不要选这个选项，如对成绩表排序时就不能选中此项。 5.对于Sort THEAD Rows(If Any)、Sort TFOOT Rows(If Any)两选项，是Dreamweaver CS3中新增加的。 Sort THEAD Rows(If Any)：排序时是否包含THEAD行。 Sort TFOOT Rows(If Any)：排序时是否包含TFOOT行。 6.Keep TR Attributes With Sorted Row：保持TR属性同排序行的一致。若选中此项，TR属性(例如颜色)将同排序行中单元格中的属性一同变化，否则将不变化。 例如，对图1所示成绩表的排序中，选中Keep TR Attributes With Sorted Row后，排序结果如下图所示，第三行中灰色背景排序时随同整行数据一同变化。 不选中后排序结果如下图所示，第三行中的数据移动了，而背景色灰色没有变化。 7.最后点击Apply或OK按钮，完成了表格排序操作，好了，现在可以交差了！
用Dreamweaver CS3控制下拉菜单精确定位
建立主菜单栏新建页面，执行菜单“Insert/Table”命令打开“Insert Table”对话框，插入一个一行多列的表格，表格列数由你的菜单条目决定，同时设置“Cell Padding”、“Cell Spacing”以及“Border”参数(如图1)。在建立的表格中输入主菜单导航文字，选取表格及文字后，用快捷键“Ctrl+F3”打开其属性窗口，我们可以定义一个字体控制CSS来控制文字属性，调整相关参数。 CSS实现相对定位菜单栏定义一个CSS相对定位的定义控制，将相对定位模型(菜单栏表格)定义为这个CSS属性。使浏览器以相对定位模型左上角作为原点，建立新的坐标系。再在这个相对定位模型下级插入层，使之相对于该相对定位模型定位。使用CSS控制后再在表格中插入的层是不可拖动的，改变其位置可以直接在其属性面板上输入L、T的参数值。 打开“CSS Styles”面板，点击“New Style”按钮，在弹出“New Style”窗口中定义一个名称为.pos的CSS属性，并且选择“Make Custom Style”的“Type”类型和“This Document 0nl”的“Define”类型，“确认”进入“Style Defintion For .pos”窗口，选取“Positioning”定义Type为“Relative”确定。选取菜单栏表格，将该CSS控制添加到菜单栏所在的表格中。使该相对定位模型(表格)建立新的坐标系，只要我们在其中插入下拉菜单层，并设置层内容和主菜单的鼠标响应事件就可以使下拉菜单精确定位了。 插入菜单栏目光标移入表格第一列，执行菜单“Insert/Layer”命令插入一个新层，作为“菜单一”的下拉菜单，点击层内部，执行“Insert/Table”命令，设定该表格行数、列数，并将表格线宽度设为“0”，表格底色为喜好颜色，输入菜单项目文字，设定文字CSS控制效果，并调整菜单大小。以同样的方式做出其他下拉菜单图层效果。 设置层属性和鼠标响应事件分别选中层Layer1、Layer2、Layer3、Layer4，在其属性窗口中把“Vis”项改为“Hidden”，把这4个层隐藏。 选择主菜单中的“菜单一”，用快捷键“Shift+F3”打开“Behaviors”行为窗口，单击“+”按钮，执行菜单“Show-Hide Layers”命令，于弹出窗口中选择“Layer‘Layer1’”，点击“Show”按钮，然后设置其两层为“Hide”。该动作表示把“Layer1”显示，而其他层均隐藏。最后点击“Behaviors”窗口“Events”下刚才定义的行为右侧的箭头，于弹出菜单中选择“onMouseOver”鼠标响应事件。 同样的方法制作出其他下拉菜单效果，当你“F12”预览时，就会发现即使分辨率改变，该下拉菜单层的位置也不会改变。
巧用Dreamweaver CS3制作阴影文字
3、选中图层“layer1”，单击“编辑”菜单下的“拷贝”命令，将光标移到图层“layer1”，再单击“编辑”菜单下的“粘贴”命令，将复制的图层编号改为“layer2”，这样图层“layer2”成为图层“layer1”的子层； 4、将图层“layer2”中的“阴影字”三个字设置颜色为“#FF0000”，如图2所示；5、移动图层“layer2”，使两个图层中的“阴影字”三个字略微错位，形成阴影字的形式，这样阴影字就制作完成了，如图3所示。最后按下F12键预览一下，效果不错吧！利用图层制作的阴影字，比起图象软件制作的阴影字要小的多，它的显示速度远远超过图片的显示速度，更适合在网页上应用。
在Dreamweaver CS3中改变鼠标事件和样式
2、在出现的下拉菜单中选择“交换图像” 3、选择鼠标移上去后显示的图片，确定。 4、这时候行为面板中会有事件和动作，直接保存叶面，完成。 不过此方法会产生较长的js代码，所以并不推荐使用。 其实实现鼠标事件效果最完美的方法是插入一小句代码即可。代码如下： <img onmouseout="this.src='img1'" onmouseover="this.src='img2'" src="img1" alt="" /> 而事实上，这种效果一般不超过100个字节（你别告诉我文件名就有几十个字节哦）。
利用Dreamweaver CS3自带的行为制作弹出菜单
大家可以看到有四个选项，分别为：“内容、外观、高级、位置”。 2.在文本框写上你的菜单名称，通过点击+号来增加你所需菜单数目如下图： 假如你的菜单还有下级菜单的话，则选取其菜单，再点击缩进项，如下图： 3.点击“外观”选项，名副其实这里可以设定你的菜单外观，可以选择垂直菜单还是水平菜单，字体的大小，是否居中，和菜单的一般状态和鼠标滑过的样式。如下图： 4.点击“高级”选项，这里我没做什么改动，只是把默认的菜单延迟时间改为500，如下图： 5.点击“位置”选项，这里有四种选择，当然也可以通过X.Y坐标值来自己设定。我在这里选择了下方位置，如下图： 好了，再点确定就完成了，这时Dreamweaver CS3会生成一个js文件在你的文件夹中，在上传你的网页时别忘了也把它传上去哦。
用Dreamweaver CS3定义CSS改变文本框的字体颜色
在使用Adobe Dreamweaver CS3设计网页的时候我们通常会遇到要建立表单。但是有些情况下我们希望表单字段里显示的文字不要是千篇一律的黑色。那么我们想改变表单中的文本字段的字体颜色应该如何在Adobe Dreamweaver CS3中实现呢？首先我们来看看Adobe Dreamweaver CS3默认的文本字段颜色是什么样子的。我们看到文字是黑色的。接下来我们需要在Adobe Dreamweaver CS3新建一个CSS。如下图这里我们选择标签CSS。这样做的目的是为了做全局定义，当然你也可以使用类来定义单个文本框。确定后我们进入CSS设置面板我们设置好字体颜色后单击确定。我们就看到了文本字段内的字体颜色已经变成了红色。
Dreamweaver CS3中图片元素的一些应用技巧
（ 2 ）保存页面并插入图片。为了在插入图片时不提示相对路径，先保存页面为“ 36.htm ”。然后插入要预载的图片，如图 36-2 所示。 图 36-2 插入图片 （ 3 ）添加“预先载入图像”功能。使用 Dreamweaver 的行为面板添加“预先载入图像”功能，如图 36-3 所示。 （ 4 ）选择要预载的图片，操作如图 36-4 所示。 提示：假如站点上有几张大图片，可以单击【预先载入图像】上方的【 + 】图标，添加多张预载图像，具体操作与图 36-4 所示相同。 （ 5 ）保存文件完成操作。这样就可以加快图片的下载速度，让用户在浏览网页时不会等太久，这对于提高网站的效能具有非常重要的意义。 随机广告图片 浏览者浏览网页时可以发现，网页中动态更新的广告图片比静态固定的图像更具有活力和吸引力。如何制作网页中的随机广告图片是本实例所要研究的问题。 效果说明 在浏览网页时，网页的 banner 区域将出现一张广告图片，如图 38-1 所示。随后每两秒更新一次广告图片，而且广告图片是以随机的方式出现的，如图 38-2 所示。 创作思想 通过使用 Macromedia 的扩展插件 Advance_Random_Images ，可以轻松地完成网页中随机广告图片的制作。操作步骤 （ 1 ）安装插件。使用菜单栏中的【命令】｜【扩展治理】命令调出【 Macromedia 扩展治理器】对话框，安装 Advance_Random_Images 扩展，如图 38-3 所示。 （ 2 ）调用命令。打开本实例源文件夹中的 banner.htm 文件，将光标置于要插入广告的位置上，并调出【 AdvancedRandomImages 】命令，如图 38-4 所示。
在Dreamweaver CS3 中制作漂亮的虚线
2.选择工具面板上的“缩放”工具，放大画布。3.选择工具面板上的“矩形”工具，在画布上画一个1×1象素的矩形。4.在“优化”面板中，设置图像为GIF格式。选择“文件”/“导出”，保存虚线图像。假如直接把虚线图像作为单元格的背景图像，会出现虚线很宽的情况。这是由单元格中的空格字符引起的，要想删除可不是那么轻易的事，在代码视图，删除后，Dreamweaver CS3还是会产生。这时插入1×1象素透明图像，自然就会删除。生成1×1象素透明图像选择“编辑”/“参数选择”。在“布局视图”类别中，单击“创建”按钮，创建一个透明图像。制作虚线1.插入一个一行二列的表格。插入点放在需要制作虚线的单元格中。2.在“站点”面板中，选中1×1象素透明图像spacer.gif，并且把这个图像拖到需要制作虚线的单元格中。这时，字符自动消失。 3.把插入点放在需要制作虚线的单元格中，然后选择文档左下角“标签选择器”中的td标签。4.在属性面板中，设置宽度为1。5.现在需要把虚线图像设置为单元格背景。在“站点”面板中，选择虚线图像。6.把虚线图像拖到到属性面板上的单元格背景中。7.制作好的虚线。8.按F12，在浏览器中测试的效果。假如需要制作横虚线，使用类似的方法就可以了。
用Dreamweaver CS3做网页如何减少网页的内存与CPU占用
有Dreamweaver CS3设计的网页看起来并不大但打开会很卡，有的网页虽然很长但使用流畅，占用用户电脑的内存与CPU就影响这些。 浏览器问题，有各自的浏览器处理内存问题会影响到，但几乎没办法控制得了，Windows上的： * IE系列，刷新回收的量不大，但最小化会释放内存，。 * Firefox2据说也会在最小化回收，可我从没见过最垃圾，用多少是多少，基本不回收。据说prototype的ajax还会引起内存一直增加。 * Opera最好。一直控制得很好。不存在什么问题。。 Linux的内存分配机制与Win的不一样，有多少用多少，如果浏览器占光时说不定会干掉系统。 页面问题，浏览器渲染页面会消耗内存和CPU，能减少一点就减少点。 结构上 * 使用DocType，告诉浏览器你在用什么，html4也有DTD。也许Transitional更适合你 * 如果使用的是XHTML并能保持良好结构的话，记得输出相应的MIME跟XML头1，可以减少浏览器的代码检查， * 保持结构的完整，不要让浏览器帮你补全代码。 * 控制页面的文件大小，可以通过程序把为了看代码比较舒服的缩进去掉。2~3K也是大小。 * iframe会产生新的页面，其实有很多方式可以代替iframe * 引入的JS与CSS可以适当合并，同样背景图片也可以合并，甚至有人连Flash都合并 * 给已知宽高的内容图片/Object加上宽度的属性可以减少页面的局部重渲染 表现上 * 质量99跟70的jpg在大多数情况下只有文件有大小不一样。gif的也一样，特别是小图标，256色跟128色的差别是文件大小． * flash动得太快吃CPU很大，控制每秒的帧数及动画的效果可以减少一些，如果把品质用中低显示会省很多资源，但这样却牺牲了效果。。quality属性 有时选择Autolow2 或者Autohigh会更适合，没必要一直low 或者best， * flash使用矢量图会节省文件大小，但计算复杂的图形跟动画时花的是CPU。复杂的太多滤镜，则会占用大量内存，模糊滤镜有减少些3。 * IE的滤镜也是比较占用内存，同时也有兼容性问题。全屏的半透明很吃资源的。 * 2*2的图片跟8*8的图片大小差不多，但是平铺背景2*2却占用大很多。 * gif动画同样有帧的概念，别把gif当成flash来玩就行。 *尽量少在Dreamweaver CS3使用表格嵌套。 行为上 * 别为了使用一个$()引入整个pretotype或jQuery，它们有更多的作用。 * AJAX很帅。但是用xml会用上XML解析器，有人推荐用JSON，可是这样要eval数据，其实可以直接import已经是对象的 script来用。只是要多传个对象名，或者把对象名写死，或者像flickr那样jsonFlickrApi({"xxx":"xxx"})，直接当函数用，挖哈哈。 * 实现某些效果时能用visibility:hidden解决时就别用display:none来玩。 * 在这里强调js变量要注全局跟局部等等的意义并不大，JS复杂的地方也不是一两句能说得清的，关注大家关注月影的正在出版的新书吧。^^ 其实这里有的内容有不少跟 如何快速的呈现我们的网页 相近，不过那篇是以处理服务端为主，但在很多时候，节省服务端资源消耗的同时也会节省客户端的资源消耗。 再其实，这篇已经蹲在草稿箱里好久了，一直没有时间去整理。现在给的也不是完整的，因为没有完整，慢慢补充吧。 1. 产生问题：虽然会引起 浏览器的模式问题 ，但问题是可以解决滴。参考Serving up XHTML with the correct MIME type ，派送XML头浏览器不会容错显示，出现错误结构会导致整个页面无法显法。 2. Autolow: 优先考虑速度，但是也会尽可能改善外观。 回放开始时，消除锯齿功能处于关闭状态。 如果 Flash Player 检测到处理器可以处理消除锯齿功能，就会打开该功能。 Autohigh: 开始时回放速度和外观两者并重，必要时会牺牲外观来保证回放速度。回放开始时，消除锯齿功能处于打开状态。如果实际帧频降到指定帧频之下，就会关闭消除锯齿功能以提高回放速度。使用此设置可模拟“消除锯齿”命令（“视图”>“预览模式”>“消除锯齿”）。 3. 模糊滤镜:使用模糊滤镜时，如果用于 blurX 和 blurY 的值是 2 的整数次幂（例如 2、4、8、16 和 32），则可以加快计算速度，并且可以使性能提高 20% 到 30%（flash的帮助是介样说滴）。