推荐阅读
Photoshop设计大气的2014艺术字教程
最终效果1、新建一个1024 * 900像素的文件，选择渐变工具，颜色设置为红色至暗红色如图1，然后由中间向边角拉出图2所示的径向渐变。2、打开文字素材(先保存下图所示的素材，然后用PS打开)，直接可以拖进来，为了便于观察，可以先把文字添加白色。3、把文字图层复制一层，用套索把2014选取出来，按Delete删除，如下图。
详解Web图像的常见应用策略与技巧
本文介绍一些关于响应式图像的适配应用策略，回退原理，SVG的换色技巧，雪碧图的百分比定位计算公式等相关的一些小知识点，目的在于帮助一部分同学快速的理清图像应用思路，以及一些web图像的应用技巧。特点：应用简单，上手容易，性能表现良好难点：lazyload实现根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：1.1 固定尺寸图像基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。在dom里图像与在css里的图像写法如下面的例子<img srcset="test.jpg 1.5x, test2.jpg 2x" src="test.jpg" 768.jpg 768w, 1200.jpg 1200w, 1920.jpg 1920w" sizes=" (max-width: 360px) 100vw, (max-width: 768px) 90vw, (max-width: 1980px) 80vw, 768px" src="360.jpg" src="http://www.missyuan.net/uploads/allimg/170502/1409454491-0.png" "393""293" />在iphone4（320）下，图像宽度和我们设置的100vw一致，但是为什么浏览器选择了768的图像而没有选择360的?因为4的dpr是2呀^_^，浏览器很智能的选择了质量最合适的768.再看一下6p（414），很听话的按照我们的设置，显示了90vw。因为他的dpr更高，浏览器聪明的选择了1200质量的图像。这里我们可以欺骗一下浏览器：
最新发布
Flash AS 实例进阶-制作时钟
用 Flash 制作的时钟基本有两种形式，数字型和指针型，此外也有与众不同的，大成校长还作过语音报时的，这里介绍的是应用最普遍的指针型时钟。 源文件下载 >点击查看动画效果<实例2-6时钟 基本思路 ① 作 3 个指针 MC ，分别按不同的速度旋转，实现时钟效果。 ②若 要拖拽效果，则要把 12 个数字分别作成 MC 。然后作鼠标跟随。 ① Date 类的方法的应用： ②一种缓冲公式应用 实例说明 ①此时钟实例是由数字和指针共 15 个 MC 组成，并又是嵌套在 MC “ biao” 中，各 MC 的注册点一定要确定准确，
Flash AS 实例进阶-遮罩效果实例讲解
遮罩在学习 Flash 中是较早就接触到的基本知识，那是在图层操作区设定，现在我们学习在动作脚本中使用遮罩的方法，应该是使用更简便，效果更丰富，这里用简单的只有两个遮罩层的实例来作说明，如果遮罩层越多，其优越性更明显。 源文件下载 >点击查看动画效果<实例2-7遮罩 基本思路 ① 以一个矩形做遮罩，面积由线到面慢慢展开，被遮罩的图形即逐渐显现。 ②同样的图形，以变形设置令长度扩大到 2 倍，再让这图形与上面的遮罩作反方向的运动，形成一个长图逐渐压缩成标准状态的变化效果。 实例说明 用 ％（模）控制 _width 或 _height 的变化。 编写动作脚本 ①在第 1 帧上输入：
Flash AS 入门-鼠标跟随
这篇教程为“Flash AS 入门教程”的一部分。查看全套教程>>>>。 源文件下载 本节应掌握的知识要点： ① startDrag和stopDrag应用；②with 语句应用； 鼠标拖拽也是使用比较多的特效形式，这一节我们将学习一个简单的鼠标拖拽动画。要学习以下几个新的语句： startDrag();动作，使目标影片剪辑在影片播放过程中可拖动。语法格式是： myMovieClip.startDrag(lock, left, top, right, bottom)； myMovieClip 要拖动的影片剪辑实例名。 Lock 是一个用true或false表示的布尔值，true指定可拖动的影片剪辑锁定到鼠标位置*，false则为不锁定。 left, top, right, bottom 参数是 相对于影片剪辑的父级坐标的值，可以设置这些值来指定该影片剪辑拖动的左、上、右、下的矩形范围。
关于 Dreamweaver 工作区布局概述
Dreamweaver 工作区使您可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使您可以快速更改文档。 在 Windows® 中，Dreamweaver 提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。查看完全大小图形
巧制可全屏拖动的图片
我们可以用鼠标把Dreamweaver的层在页面内拖动，但要全屏拖动就困难了,下面是一种实现的方法:制作步骤：一、准备图片，取名back.jpg，如下：二、建一个htm文件取名drag.htm，并写入下列代码：< html> < head> < title>可拖动的图片< /title> < meta http-equiv="Content-Type" content="text/html; charset=gb2312"> < /head> < body bgcolor="#FFFFFF" text="#000000" scroll=no topmargin=0 leftmargin=0 onmousedown="x=event.x;y=event.y;setCapture()" onmouseup="releaseCapture()" onmousemove="if(event.button==1)top.moveTo(screenLeft+event.x-x，screenTop+event.y-y)" ondblclick="self.close()"> < img src="http://www.vipcn.com/InfoView/back.jpg" width="120" height="120" style="cursor:hand;border:3 gold ridge"> < /body> < /html>drag.htm便是一个可以被拖动的页面。三、在其他页面中调用drag.htm，加上下面的代码：
增强网站的魅力 网页制作技巧三则
1、给滚动条换色 好多网站的滚动条不是系统默认的灰色，而是一些红色、蓝色的，请问这是如何做的？ 答：这个很好实现，插入下面的代码： < style> body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色) SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色) SCROLLBAR-SHADOW-COLOR:#333333;(立体滚动条阴影的颜色) SCROLLBAR-ARROW-COLOR:#666666;(按钮上三角箭头的颜色) SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
相对路径和绝对路径在网页中的用途
经常听到网友苦述自己的网页中有许多图片不能正常显示，究竟为什么不能正常显示呢？总结其原因绝大部分都是因为使用了错误路径所致。网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。在网页中的路径大体可分为相对路径和绝对路径，大家(尤其是初学网页设计的朋友)往往对它们不够认识，在应该使用相对路径的地方使用了绝对路径，从而导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。 那什么是相对路径？什么是绝对路径呢？为什么使用了绝对路径有时就不能显示呢？让我们一起来认识一下它们吧。 比如C盘的My Pictures目录下有一个tp.jpg图像，那么它的路径就是c:My pictures p.jpg，其实这种完整地描述文件位置的路径就是绝对路径。如网页index.htm中有一张图片tp.jpg，它们的绝对路径是： c:My picturesindex.htm c:My pictures p.jpg 如果你使用了绝对路径c:My pictures p.jpg进行图片链接，那么在本地电脑中将一切正常，因为在c:My pictures下的确存在tp.jpg这个图片。但你将它们上传到网站服务器上后，就不会正常了，因为服务器给你划分的存放空间可能在C盘其他目录中，也可能在D盘其他目录中，总之不会那么巧的就是c:My pictures。那么图片路径应该如何设置呢？这里就必须使用相对路径了，所谓相对路径，顾名思义就是自己相对与目标位置。在上例中index.htm中连接的tp.jpg就可以使用My pictures p.jpg来定位文件，这样不论将这些文件放到哪里，只要它们的相对关系没有变，就不会出错。具体的链接方式是这样的：“..My picturesimg.jpg”，其中使用“..”来表示上一级目录，“....”表示上上级的目录，以此类推。 我们一起来看看初学的朋友可能犯的几个路径错误： 例1 c:mywedwedindex．htm
Dreamweaver行为全接触4
为让网页的浏览速度更快，有时不得不用Flash动画代替Gif动画，但并不是所有的人都安装了其插件，一个好的网站为解决此问题，一般给出两种版本，Flash版和Html版，但需要我们自己选择进入那一个版本，随着上网的普及并不是所有的人都知道什么是Flash，什么是Html，这部分网民怎么选择？我们可以让你的网页自己做出选择进那一种版本，一解后顾之忧。这就是我们本节要讲的主要内容――Check Plugin(检查插件)。 一，认识Check Plugin编辑窗口 在DW编辑框中按F8调出Behaviors面板，点击选Check Plugin立刻出现以下窗口： Plugin：第一项Select选择它提供的几种插件选项，一般常用的有Flash，Shockwave，Quick Time。而第二项是直接输入第一项没有列出的插件，一般很少用。 If Found,Go To URL：如果发现插件就打开当前页面。Otherwise,Go To URL：当没有发现插件就打开当前位置。 Always go to first URL if detection is not possible：这个选项一般不要选择，它是的意思是如果不能进行插件检查就进入第一个页面。
Dreamweaver的操作诀窍点滴
1、巧妙调用Style 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠 标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表 上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上 产生的HTML代码则完全不同。比如用Custon Style来调用Style标准，在网 页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿 而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来 调用Style。 2、使字体适应不同的分辨率我们在制作网页的时候，经常有这种体会， 那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机 上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢？原来各个 计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可 以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。 使不同分辨率的显示器都能较好地显示。 3、善用拖放技术我们在使用Dreamweaver编辑网页的时候，经常需要 插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显 得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把 Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示EXPlorer窗口， 找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位， Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里 要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在 网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有 超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链 接地址。 4、善于为对象取名我们在用Dreamweaver来制作非常复杂的效果时， 有可能需要经常重复地使用某一个或者多个对象，例如我们经常需要定位 某个特定的表格、图象等，如果我们没有给某一个网页中的多个对象取名 的话，那么在重复应用这些对象的时候，可能很麻烦或者容易出错。为了 能够方便调用这些对象，我们应该在每创建一个新的对象时，都记得给它 取一个有代表性而且比较容易记忆的名称。在给这些对象命名时，我们可 以通过对象的“属性”面板来操作就行了。 5、多用快捷键来提高效率为了提高操作的效率，我们可以在Dreamweaver 中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式， 也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式：Ctrl-0:无 格式 Ctrl-T:段落 Ctrl-1:标题1 Ctrl-2:标题2 Ctrl-3:标题3 Ctrl-4:标题4 Ctrl-5:标题5 Ctrl-6:标题6 6、一次链接到两个网页我们都知道超级链接一次只能连到一个页面。 如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL” javascript行为。打开一个有框架的网页，选择文字或图象，然后从行为 面板中选择“Go To URL”。我们会注意到Dreamweaver会在 “Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接 的框架并输入相应的URL后再选择另一个框架并输入另一个URL。 7、利用“Format Table”命令来修饰网页在复杂的网页设计中，表格 的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现 的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不 甘落后，我们可以使用其中的“Format Table”（格式化表格）命令来快 速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标 置于表格的任意一个单元格内，再选择“Command”→“Format Table”命 令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按 “Apply”键来查看效果，如果不满意的话，还可以重新设置或者修改部分 参数的值，如边界粗细，背景颜色等等。 8、尽量不要给文件起中文名称大家在制作好了网页后，通常会给网页 起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件 所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在 Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是 太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver 中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上 面的出错现象。 9、经常保存当前被编辑的文件有网友说经常保存文件是不是怕突然死 机呀？这话当然没错，但我们在Dreamweaver中要经常保存文件还有它特别 的意义。因为我们在设计主页的时候，Dreamweaver会跟踪我们对文件作出 的任何改动，也就是说即使我们在主页中简单地移动了一下某个对象， Dreamweaver也能生成大量的临时源代码，想象一下，如果在主页中作了 很多改变，那么生成的这些大量代码就变得很难管理，从而会影响系统的 性能。因此我们发现如果Dreamweaver的性能开始降低，这可能是由于驻 留在内存中的大量代码变得太庞大的缘故，只要保存一下文件，就会使这 些临时代码消失，从而提高性能，所以以后我们在使用Dreamweaver时， 要有经常保存文件的习惯。
Dreamweaver行为全接触1
第一节 “左三拳，右三拳，脖子扭扭，屁股扭扭.....”，我已热身好，你准备好了吗？本节将是开始教程之前的一次热身，在序言中讲到了什么是行为，以及行为的基本组成。下面将要讲到的是在DW3中行为面板的基本组成。 首先，我们得把行为面板调出来，用鼠标点击DW3编辑窗口中的Window->Behaviors（或在编辑窗口中按F8），即可出来Behaviors浮动面板，它的样子如：图一 就这么大一个浮动面板，里面蕴藏着无限技巧，先来看看，它是加入动作的按钮，用鼠标点击它会出现很多动作可以选择，在选项中黑色的选项是你当前对象支持的动作，而浅色的选项则是你当前对象不支持的动作。紧挨着得减号功能是，删除一个行为，你在编辑窗口中选取一个行为，在点击这个减号，就可以删除被选中的行为。 ，浏览器选项下拉菜单，严格来说不能称它为下拉菜单，因为他根本就没有下拉选项。这应该是DW3的一个Bug，没下拉菜单应如何选择浏览器？（别看这个问题很傻，但这是我回答网友最多的一个问题）点击Events for右边的小三角形，再用键盘的上下键选你需要的浏览器，一般选IE 5.0，浏览器的版本越高，他支持的事件就越多，这样就会有更多创意。 ，它们的功能是给行为排序，其实这个功能没有太大用去。只有在多个动作都是相同的触发事件时，这个功能才有用处。例如：希望别人进入你主页时弹出信息提示框和打开一个小窗口，由于网络速度的问题，两个动作之间有个时间差，此时你就可以使用此功能，给响应动作排个序。此范例今后要讲到它的实现方法，在此不必多费口舌。