推荐阅读

今夜无眠,良宵美景
第一步、图片的构成 开始以前,让我们先来分析这幅图都是由哪些元素构成的:有点夸张的月亮、可爱的星星、两只猫咪、屋顶&烟囱、音符若干、普通的星星。 第二步、月亮升起来了 首先,我们来画月亮,月亮的画法很简单,仔细观察,其实是两个圆构成。 1、选择“椭圆选取框”工具或者直接按M键; 2、按住shift键,在画布上拖出一个规则的圆; 3、继续,按住alt键,这时,鼠标的形状变成+_拖出另一个圆形选取。如下图: 4、选取油漆桶的颜色为:#e0e017; 5、按alt+backspace键,这时你会发现月亮变成下图的样子了: 6、为月亮加上内斜角和发光效果,参数如下: 7、然后选中月亮,按F8,将月亮转化成元件,待用。 第三步、星星出来了 1、使用钢笔工具,勾出如下图所示的轮廓来: 2、选中星星轮廓,属性中油漆桶工具的设置如下图所示: 3、为星星轮廓家上一个效果:投影,突起浮雕,内斜角。具体设置参数如下图所示:

Photoshop打造铜板雕刻文字
1、打开下图所示的背景素材。 2、新建图层,green spot层,更改为【颜色减淡】模式,用柔角画笔 #1A3404 ,涂抹一些破旧的痕迹。 3、Ctrl +a全选,羽化边缘50px(根据不同的素材图片大小做适当调整)。 4、不要取消选区,反选,新建图层frame层填充选区范围黑色,取消选择,执行滤镜:滤镜-扭曲-波浪 。
最新发布

Dreamweaver MX 2004设计留言本实战(2)
文章来源:flash8,转载请联系作者及出处。 四、留言板各页设计 ①显示留言 在DW中新建一页(在"New document.quot;新文档对话框中选"ASP VBScript"类型的文档)(图16),存为index.asp,并修改页面标题为"留言板首页"(图17)同理把第二、四、五行单元格的高都设为20,再如法炮制,在属性面板里把第一行和第五行的单元格设置为水平居中对齐,第二行和第四行的单元格为水平居右对齐: 然后在各单元格里写上文字,完成后如图:

细品DW MX 2004内建FW技术
Macromedia官方将在其他软件中内建Fireworks技术称为Fireworks技术,网上也称之为内建图片编辑器。Dreamweaver MX 2004给人的一个感觉就是与Macromedia公司其它产品的全面无缝集成,这样就大大缩短了开发人员的开发周期,提高工作效率。 以前的Dreamweaver中是没有图片处理功能的,即使你要处理也只能使用Css中的相关滤镜进行一些效果的改变,而大多数特效的制作我们则必须使用Fireworks或者Photoshop工具。现在好了,新版的Dreamweaver MX 2004中集成了一些简单的图片处理工具,使Dreamweaver不仅具有本身应该拥有的功能,还能够对图片进行简单的处理,是不是很方便、下面让我们来了解这个工具的详细特性与使用方法。 在Dreamweaver MX 2004环境中先选择一幅图片,在下边的属性对话框中就会出现内建图片编辑器(图1)。 我们看一下对话框中的选项。用框圈起来的就是我们提到的内建Fireworks技术。我们先用最左边的copy工具来选择图像的一部分(图2),中间框住的部分就是我们最后要保留的部分。另外大家还可以通过拉动框四周的控制点来调整他的大小以及拖动它的位置,选择好后按回车,如何,图像是不是已经被我们裁了一块了? 以上谈到的两个工具都是对图片的尺寸进行调整的工具,而下面的两个工具则是对图像的画质进行简单变化的工具。brightness and contrast(亮度与对比度,加框处第3个图标)以及sharpen(锐化,加框部分第4个图标)。 点击第一个亮度与对比度工具图标,弹出对话框,可以对一些较暗的图片进行亮度与对比度的处理,并填入调整后的数值(图3)。 改变后图片的效果如(图4)。 与前面的图比较是不是有了很明显的变化?锐化工具的使用与亮度和对比度工具的使用基本相同,操作方法也一样。现在即使不会其它图像处理软件,只用简单的Dreamweaver中的内建Fireworks技术也可以制作简单的图像后期效果了,真是方便!

细品DW MX 2004表格设计
Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱。在此笔者就谈谈该软件新版本中的表格设计。 表格在网页中的重要性不言而喻:网页的框架、结构都要通过合理的表格布局来完成和实现。 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1)。

Dreamweaver MX中移动层的使用
这是一个使用Dreamweaver MX中 拖动层行为的运用实例。你可以通过操作上面的实例感觉一下。 因为接触DW不久,所以技术有限,如果有不对的地方,请各位指出来。在这儿首先要说的是同一个效果,实现的方法有很多,关键在自己如何去实现。 在这里,我只是提出自己的想法。如果有什么好意见或建议,可到论坛提出来或直接通过下面的评论发表。 下面是该教程的正文: 1、首页我们需要先创先一个大一点的层,用来包含移动层。 大致参数为上图。层的大小你可以自己调节。

SHTML网页SSI使用详解
1、Config命令 Config命令主要用于修改SSI的默认设置。其中: Errmsg:设置默认错误信息。为了能够正常的返回用户设定的错误信息,在HTML文件中Errmsg参数必须被放置在其它SSI命令的前面,否则客户端只能显示默认的错误信息,而不是由用户设定的自定义信息。<!--#config errmsg="Error! Please email webmaster@mydomain.com --> Timefmt:定义日期和时间的使用格式。Timefmt参数必须在echo命令之前使用。 <!--#config timefmt="%A, %B %d, %Y"--> <!--#echo var="LAST_MODIFIED" --> 显示结果为:Wednesday, April 12, 2000 也许用户对上例中所使用的%A %B %d感到很陌生,下面我们就以表格的形式总结一下SSI中较为常用的一些日期和时间格式。 Sizefmt:决定文件大小是以字节、千字节还是兆字节为单位表示。如果以字节为单位,参数值为"bytes";对于千字节和兆字节可以使用缩写形式。同样,sizefmt参数必须放在fsize命令的前面才能使用。

Dreamweaver MX应用表格排序
在Dreamweaver MX中,您可以对一列的内容进行简单排序,也可以对两列的内容进行更为复杂的排序。您不能对包含有Colspan或Rowspan属性的表格进行排序的,也就是说,不能对那些包含有合并单元格的表格进行排序。 下面就看一下具体的排序过程吧! 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 MX中新增加的。 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按钮,完成了表格排序操作,好了,现在可以交差了!

用DW MX控制下拉菜单精确定位
浏览带有下拉菜单的网页时,我们经常会注意到当更改显示器分辨率时,其下拉菜单的位置并没有改变,这也是我们设计网页时容易忽略的一个问题,其实通过Css控制页面元素精确定位后,这一点就不难实现了。 建立主菜单栏新建页面,执行菜单“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和FrontPage比较,哪个好?
Dreamweaver比FrontPage都是比较知名的网页设计软件,可称得上是网页设计中的佼佼者。但到底谁更好些呢? FrontPage占领的是中级市场,其地位犹如字处理软件中的Word,比较重视网页的开发效率、易学易用的引导过程;而Dreamweaver主攻的是网页高级设计市场,其地位犹如出版领域的PageMaker,所强调的是更强大的网页控制、设计能力及创意的完全发挥。 Dreamweaver在功能的完善,使用的便捷上比FrontPage要强些。它囊括了FrontPage的所有基本操作,并开发了许多独具特色的设计新概念,诸如行为(Behaviors)、时间线(Timeline)、资源库(Library)等,还支持层叠式样表(Css)和动态网页效果(DHTML)。 而动态HTML是Dreamweaver最令人欣赏的功能,是它的最大的特色(图1)。 图1 Dreamweaver和FrontPage启动画面 Dreamweaver与FrontPage比较,有几下几点优势: 1. 产生的垃圾代码少,网页可读性好,可以提高浏览" class="sitelink">网页浏览速度; 2. 通过图层功能,可以快速制作出复杂的页面,图片定位更容易; 3. 可基本解决IE与Netscape的兼容性; 4. 设计思路广,内涵丰富,创作随意性强,可充分展现你的创意。

Dreamweaver制作网页幻灯片效果
作为一位不懂代码的业余网页制作爱好者,常常羡慕专业程序人员在浏览器中编制出的效果超酷的一些多媒体作品。唉,无奈程序那东东,酶涩南学,非一日之功,需要良好的逻辑思维能力和足够的磨练方可成就。是不是不会程序,就永远就不能实现自己的创意和想法了呢?非也!现在我们要制作的就是在网页中的一个幻灯片播放器。当用户按下控制盘上的“PLAY”键时图片将作幻灯片似的连续循环播放。按下“PAUSE”时,播放中的图片就停留在当前位置。按下“RESTART”键时,幻灯片又从头播放。而这一切,仅仅采用Dreamweaver3的内嵌的层(Layer)、时间链(Timeline)和行为(Behavior)技术,就可实现,所有的JavaScript代码都会在Dreamweaver中自动生成。这里不是鼓励大家不要接触程序代码,相反,若读者掌握了一些编程技术的基础,会在网页制作中起到相当重要的作用。实际上,这已是当今专业WEB页面制作人员的一项基本素质要求。 下面分步骤对这个播放器的制作加以说明。 步骤一:图形元素的制作和准备 制作幻灯片所用的图片并将之放入Dreamweaver的层中。我们准备在每个幻灯片中实现7幅图片的交替变换,因此我们需要制作7幅内容不同的图片。注意图片要在Photoshop中进行优化压缩,并调整成相同的尺寸。建立一个层,插入初始图片,该图片就是幻灯片默认得头一张图片。将层命名为Layer_main,并把该层的Index值设为1。 步骤二:制作播放器的外观和四个控制按钮 利用Photoshop制作一个金属效果的播放器外观。(具体效果就看你的喜好啦,也许你可从WinAMP的SKIN中受点启发)。作最佳优化后,输出一个透明的GIF图片。为了让鼠标移上后按钮有些变化,你不得不每个按钮制作2张图片(共6个),两个按钮只需有颜色上的差异即可。先建三个层,调整好位置,并插入三个播放键的各自的二张翻滚图片(Rollover Image)(Insert-Rollover Image)。通过调节层的Index-Z的值,确保播放器所在的层在Layer_main层的上面,在按钮所在层的下面。排版好的各层如图所示。 步骤三:创建幻灯片播放时间链 按Ctrl+F9键打开时间链浮动工具面板。选取其中幻灯片所在层(Layer_main)中的初始图片(确保选取的是图像,而不是层),用鼠标拖至时间链浮动工具面板,在时间链起始处释放鼠标。设定帧速率为Fps为5,并勾选Loop框。选择时间链中的其中一帧,右击鼠标,选择"Add Keyframe"(添加关键帧),选择另一幅幻灯片图片,以更换层(Layer_main)中的初始图片。重复这个操作,将剩下的5幅图片全部加到该时间链的不同关键帧上。最后适当调节各关键帧之间的距离。并将该时间链命名为TimeLine_main。建立好的时间链如图所示。 步骤四:为按钮和其它添加行为(Behavior) 点击选择PLAY按钮所在的图片,在行为浮动工具面板中,从+(添加)动作下拉列表中选择Timeline-Play Timeline(播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。点击选择PAUSE所在的图片。在行为浮动工具面板中,从+(添加)动作下拉列表中选择Timeline---Stop Timeline(停止播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。 点击选择REPLAY所在的图片。在行为浮动工具面板中,从+(添加)动作下拉列表中选择Timeline---Go to Timeline Frame(转向放时间链帧),并在弹出的对话框中选择时间链Timeline_main,在Frame文本框中输入1。单击OK。默认方式下,就会为切换动作设置一个onClick事件。再添加下一个动作。从+(添加)动作下拉列表中选择Timeline---Play Timeline(播放时间链),并在弹出的对话框中选择时间链Timeline_main。单击OK。默认方式下,就会为切换动作设置一个onClick事件。REPLAY的图片添加好的行为如图所示。 本例中做好的播放器,可在下列地址浏览: http://webart.myrice.com/sample/index.htm。进一步,为了让播放器更加生动,你可以同时给幻灯片的播放加上声音。 若要把这个播放器放到网上,同时图片总容量超过150K,可以给页面作一个“Loading(加载)层”,待全部内容下载完毕后,才显示出来。以免由于图片未下载完而产生播放不畅的感觉。关于“Loading”层的制作方法,在很多地方有介绍,这里就不再详述了。 把这个例子变通一下,我们可以作一个相册。你可以把你的家庭或女朋友的相片加在幻灯片所在的时间链上,并且加上Last(上一张)、 Next(下一张)等按钮,便于浏览者逐张欣赏。若觉得相片太小不能看清楚细节,你还可以加一个Zoom In(放大)按钮,链接到一个有单张放大相片的新窗口页面。最后把它放到网上,相信一定会给你的家人或女朋友带去一份惊喜。

Dreamweaver:制作目录树
编者按】在网页设计中我们可能看到过一种目录结构的网页,这种网页就像我们的电脑文件系统管理我们的文件一样,管理着网页,我们一起看看它是怎么实现的? 在总目录的前方有一个“+",一按这个“+",即可显示其下子目录,“+"即变成“-",一按“-",即可隐藏其下子目录,就像在资源管理器中一样,这需要做二个页面,一个页面写上总目录,一个页面写上子目录。把总目录的页面上的“+”号设置成超级链接,在“Link”栏中添上子目录页面的地址。把子目录的页面上的“-”号设置成超级链接,在“Link”栏中添上总目录页面的地址。具体效果可看一看Dreamweaver的帮助文档,在这帮助文档里也是按一下总目录,弹出子目录,按下子目录上的总目录则返回到总目录,只是没用“+”、“-”表示而已。你再看一下该文档的源代码就一目了然了