ITPub博客

第5天:head区的其他设置(转)[@more@] 　　这些技巧主要讲meta标签设置的，其实与符合web标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门教程，就写得详细一点吧。 收藏夹小图标 　　如果你将本站加入收藏夹，可以看到在收藏夹网址之前的IE图标变成了本站特别的图标。要实现这样效果很简单，首先制作一个16x16的icon图标，命名为favicon.ico，放在根目录下。然后将下面的代码嵌入head区： 　　<link rel="icon" href="/favicon.ico" type="image/x-icon" /><link rel="shortcut icon" href="/favicon.ico"

第6天:XHTML代码规范(转)[@more@] 　　在开始正式内容制作之前，我们必须先了解一下web标准有关代码的规范。了解这些规范可以帮助你少走弯路,尽快通过代码校验。 1.所有的标记都必须要有一个相应的结束标记 　　以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:<br /><img height="80" alt="网页设计师" src="../images/log

第7天:CSS入门(转)[@more@] 　　在了解XHTML代码规范后，我们就要进行CSS布局。首先先介绍一些CSS的入门知识。如果你已经很熟悉了，可以跳过这一节，直接进入下一节。 　　CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。 1.基本语法规范 　　分析一个典型CSS的语句：p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 样式声明写在一对大括号"{}"中； COLOR和BACKGROUND称为"属性"(property)，不同属性之间

第8天:CSS布局入门(转)[@more@] 　　CSS布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin,padding,border等属性来控制版块的间距。 1.定义DIV 　　分析一个典型的定义div例子：#sample{ MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px;BORDER-TOP: #CCC 2px solid;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM: #CCC 2px solid;BORDER-LEFT: #CCC 2px solid;BACKGROUND: url(images/bg_poem.jp

第9天:第一个CSS布局实例(转)[@more@] 　　接下来开始要真正设计布局了。和传统的方法一样，你首先要在脑海里有大致的轮廓构想，然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素，因为web标准更关注结构和内容，实际上它与网页的美观没有根本冲突，你想怎么设计就怎么设计，用传统表格方法实现的布局，用DIV也可以实现。技术有一个成熟的过程，把DIV看成和TABLE一样的工具，如何运用就看你的想象力了。 　　注：在实际应用过程中，DIV在有些地方的确不如表格方便，比如背景色的定义。但任何事情都有得有失，取舍在于

第10天:自适应高度(转)[@more@] 　　如果我们想在3列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐3列底部的问题。在table布局中，我们用大表格嵌套小表格的方法，可以很方便对齐三列；而用div布局，三列独立分散，内容高低不同，就很难对齐。其实我们完全可以嵌套div，把三列放进一个DIV中，就做到了底部对齐。下面是实现例子(白色背景框模拟一个页面)： 　　Body 这里是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;} 　　这里是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROU

在Fireworks中制作淡入淡出动画效果(转)[@more@] 　　淡入淡出动画效果 　　用fireworks做的淡入淡出效果，有人说看PNG格式看不出真正的步骤，所以在此补上这样一篇教程。 　　对象的淡入淡出效果是firewoks可以创建的普通效果之一，对两个链接对象进行插帧的时候，其中一个对象的不透明度设置为0%，一个对象的不透明度设置为100%，就可以获得淡入淡出效果。 　　制作步骤： 　　一、首先新建一个文件，画一个圆，在FILL面板中设置edge:feather:10，设feather的目的是在运动过程中边缘不至于太生硬，影响效果。点中圆，按F8键，选择t

Firewoks 营造残破纹理(转)[@more@] 　　刻意在物件和文字上营造残破的效果也是一种流行的表现方式。 　　让我们以Firewoks处理网页影像时，在简单的实例上来应用看看。 　　打开新文件，先来画个按钮。 　　Ctrl+Shift+D原位克隆一个。 　　网上找张纹路无序的素材图片，这里我们用的是张石纹。 　　导入正在Fireworks编辑的文件。 　　在属性面板上按下效果添加按钮， 　　进行两处特效设置。 　　亮度50，对比度100； 　　色相36，饱和度72，明亮度81，勾选彩色化。 　　图层混合模式设置为Multiply色彩增值。 　　将我们克

学用Fireworks中的特效（三）(转)[@more@] 　　二、效果栏的使用 　　在为图形对象添加各种特效后你会发现，在对象属性框中的效果栏内会将该对象所用到的所有特效一一罗列出来。如图31中，该椭圆对象即被添加了“内斜角”、“查找边”和“新增杂点”三个特效。图31 　　特效被添加进来后，若要再次修改其相关数值时，可点击该特效左侧的“编辑特效” 按钮，此时会再次启动该特效的设置窗口。但对一些原本就没有相关数值可供设置的特效，则不能通过这种方法启动其设置窗口，如图31中的“进一步模糊”特效。因此，“进一步模糊”左侧的

Fireworks MX 2004特效字系列---金属特效字(转)[@more@] 　　文字特效在网页或广告制作当中会被经常用到。因此在Fireworks中将制作好的文字特效保存为样式以便不时之需也是很有必要的。下面就为大家讲解在Fireworks中制作一款金属字的效果。 　　启动Fireworks后新建一个500*150大小的画布，然后用"文字"工具在画布上输入"金属效果"的字样，当然，你也可以根据自己的需要输入其它的文字。 　　然后选中文字对象并在下方的属性框中将这一文字对象的字体改为加粗的"华文新魏"，字号为96，填充色为#FF0000。其它的各项设置则不变。接着我们

一例特效文字的制作简介(转)[@more@] 　　1、打开FW，新建一个文件，文件的大小自定。用矩形绘制工具在编辑区绘制一个矩形对象，作为背景，本例背景如下图所示 　　2、在编辑区输入文字，字体采用了一种较粗的字体“Arial Black”，字号采用了“120”大小，字体颜色为黄色，具体效果如下图所示。 　　3、选中文本对象，按组合键“Ctrl+Shift+P”，将文字转化为路径对象。按组合键“Ctrl+J”将转化的文本对象接合为一个单独的路径对象，此刻编辑区效果如下图所示。 　　4、给文字添加Effect效果－－阴影和光晕－－投影，投影设定采用

Fireworks MX 2004特效字系列--金属字(转)[@more@] 　　开始第一步： 选择字体：04b-08 字体大小：125，填充如下： 　　第二步： 选效果/光晕和阴影/内侧发光........参数设置如下： 　　第三步： 选效果/斜角和浮雕/内斜角..........参数设置如下： 　　第四步： 选效果/调整颜色/曲线................参数设置如下： 　　 　　第五步： 选效果/调整颜色/亮度和对比度.....参数设置如下： 　　最后的效果如下： 　　终于完成了，可以松口气了，大家去试一试吧，只要努力一定会进步的。

用Fireworks泛起水波涟漪(转)[@more@] 　　我们在网上经常可以看到一些泛着水波涟漪的动画广告，效果非常的逼真。其实这只是巧妙地利用了动画软件中的遮照效果而制作出来的。在Fireworks里通过蒙版效果和对每帧的播放时间进行巧妙的调整后，也能做出这种有水波涟漪的GIF动画。 　　我们先将一张将要用来制作这种涟漪效果的图片导入Fireworks。这时Fireworks会自动生成一个背景层，如图01。图01 　　点击层面板右上角的下拉列表，将背景层设置为“共享此层”，如图02。 　　接着把背景层中的位图复制一份放到“层1”里面并用方向键使其

Fireworks MX 2004 制作远古兽皮卷轴(转)[@more@] 　　效果图： 　　1.新建一个500×400的画布 　　2.做一个500×400 填充：#74350C无边框矩形 　　3.给矩形添加效果Eye candy 4000LE－－>marble 设置如图 　　4.给矩形添加杂点 如图 　　5.此时的矩形已经有点兽皮的感觉了 　　6.我们给它一点磨损的感觉 给矩形添加 Alien Skin Splat LE-->Edage 设置如图 　　7.在这个矩形下层做500×400 填充#441E02无边框矩形 　　8.给新作的矩形添加Eye candy 4000LE－－>marble 设置如图 　　9.怎么样 是不是有点磨损的感觉了？

Fireworks 制作抽线图(转)[@more@] 　　 　　用PS制抽线图是很常见的,有没有想过用Fireworks制呢?难度及复杂度更低. 首先,新建一个背景透明,大小为 1x2 的文档,放大至1600%,使用pencil tools ,在上半部分点一下.颜色为黑.如图: 　　保存为line.png . 　　 打开另一个图形文件 　　使用 Rectangle Tools 在上面画一个比原图大的柜形. 　　 打开 fill 窗口 　　选择 Texture 中的other.选择刚保存的 line.png 填充.如图: 　　 打开layer窗口 　　调整其透明度.结果如图:

Fireworks制作云彩的效果(转)[@more@] 　　教程重点简述：描边和高斯模糊的配合 　　效果简介：说到云彩效果的制作，我们会马上想到用PS的滤镜，而且我还听闻FW4自带的滤镜Candy4也能够实现这类的效果，不过我从来都没有使用过。这个效果的完成非常的简单，描边-填充材质-高斯模糊，就这么三步。但是做这个教程的根本原因在于让大家了解结构安排上的无序性。整齐的安排结构是为了严谨，使人一目了然，随机的安排结构是为了增加视觉效果。这一点有很深的内涵，而且应用的也极为广泛。你可以把它视为设计上的一种理论。 　　 　　操作步

Fireworks制作电视雪花效果(转)[@more@] 　　教程重点简述：通过渐变选项的调整实现动画效果. 　　教程开始之前，首先请看如下所示动画效果： 　　如何才能产生这种类似电视雪花效果的动画呢？通过滤镜、插件？不用，FW4里面已经为我们准备好了这种效果，请看后面的详细步骤： 　　[注意]在开始本节的学习前，请大家首先参阅一下先前的文章“模拟条形码的制作”，因为我们后面的操作是对上一节操作的继续，相关的内容这里就不再赘述了。 　　第一步、首先我们先和“模拟条形码的制作”一文简单的接一下头，在“模拟-”一文中，通

Fireworks圆角矩形之深入探索(转)[@more@] 　　首先声明，这个教程仅仅可以作为一个讨论的话题来进行，讨论话题的中心是由一个问题引起的，希望大家能够通过多种角度、思路考虑同一个问题。问题如下： 　　问题：如何才能制作出这样一个矩形框--有两个圆角，两个直角？比如下面的效果图所示： 　　如果上面的效果图你感到烦乱的话，那么就来看看这个单一的效果图吧： 　　制作的方法有很多，你可以想到有几种呢？ 　　我们的答案是：6种！ 　　[第一种方案：Mask（遮罩）的灵活运用] 　　如果是刚刚通过遮罩教程学习的朋友看到这个

做个心形动画送给心上人(转)[@more@] 　　给最亲密的MM送什么礼物呢？当然是献上一颗赤诚的红心了，一路上就可以永远心心相印！^_^，下面就请跟我来吧！为你心爱的MM献上这份神秘的礼物。 　　制作心形图案 　　1、启动Fireworks 4.0，执行“File→New”命令，设定宽度为800Pixels，高度500Pixels，然后单击确定按钮。 　　2、在左侧的工具箱中，设定Color填充色为红色，然后选择椭圆工具，按住Shift键的同时，拖动鼠标画出一个红色的圆形。执行“Edit→Clone”命令，完成后使用箭头工具选择圆形，向右侧平移，为了使两个圆形中心点保

巧用Fireworks制作精彩Banner(转)[@more@] 　　当你驾着爱机在网上冲浪时，是否注意到网页上形形色色的动态Banner呢？一个好的Banner会给人一种耳目一新的感觉，一张好的Banner会给网页添色不少。那么，你是否也想制作这么一张漂亮的Banner呢？现在我们就用Fireworks来制作出一张Banner吧！ 　　1、“巧妇难为无米之炊”，首先要收集好适合你网页的图片，如果自己能够制作出这些图片那就更好了！注意要把这些图片调好尺寸，并且转化成为GIF或JPG等格式，并保存好。 　　2、启动Fireworks，点击“File→New”(或按组合键“Ctrl+N”)新建