FW和DW两款软件基础应用Word格式.docx

1、然后我们将图层一点右键在状态中共享图层，共享完了之后为了避免你的操作失误，将它全部锁住。接着切换到状态面板中来，点击状态二，将素材文件夹打开，将每一个所对应的清晰的按钮选中，直接拖到FW里面来。这是你会发现有一个问题，需要将这些图表和原来的图表完全对齐重合，无法观察到前一针的状态是很难做到的，在状态二的前面有一个小图标，这个图标叫做洋葱皮。他有什么作用呢？ 我选中第二针 然后点选第一针洋葱皮的位置出现一个关联的图标就将两者连接起来了。这时候你就可以看到之前的按钮以半透明的方式显示。放大一定的显示比例，依次对齐图标即可再把洋葱皮取消，看第一帧和第二针就分别放好了。接着还需要有跟状态一里一样的字，

2、只是这些字是跟着你点击的图标一起出现的，同时颜色不同。这时候我们在状态1里面将这些字复制到第二针里面，然后选中每一个字，依次的在里面修改字体的颜色。那么把这些设置全部完成以后，就可以开始添加行为了。首先我们先选中第一个按钮，打开我们的行为面板，点击行为面板上的加号这时会弹出提示你的面板，问你是选择热点 还是切片？因此就告诉我们 在我们添加行为之前必须先设置热点或切片。 好， 回到第一针来，这个时候在工具栏里面有一个WEB网页工具，在这里面有两个工具，分别是 热点和切片。热点里面有三种不同的工具： 矩形、圆形和多边形。切片里面虽然有多边形 其实切出来还是一种即矩形外框。选择切片工具，我们在这里依

3、次绘制按钮切片。放大工作区，必须保持切片区域与按钮大小一致，接着切第二个，当你需要切同样大小的图片时，FW为大家考虑的很周到快捷，它比PS的切片更人性化。我们直接选这个园，点右键插入矩形切片，以此类推将文字也进行切片。接下来就可以添加行为了。这时选中第一个按钮在去添加行为上的加号，就可以添加了。选中这个按钮添加加号选择简单交换图像。 on 就是当mouse 鼠标over划过。 当鼠标划过这个条件成立的时候，这是它就可以简单变换了。预览看一下效果。好，同样的方法，选中切片点击中间的按钮中心也一样可以弹出这个行为对话框，便于我们快速创建。在预览看一下， 你就会发现我们的按钮本身变幻清楚的效果就做出

4、来了。接下来制作按钮的同时出现相对应的字。打开行为面板，接着添加第二个行为，也就说明在一个切片上可以添加多个行为。加一个交换图像。 弹出对话框，可以使你交换另外一个位置。这时他们之间就自动出现了一个连接的锁链。接着做其他的按钮连接。可以直接点击按钮切片上的准心选择交换图片，然后将锁链直接拽出来方知道你要连接的文字上即可。好了预览下看效果。把这个交互效果做完了之后，如何发布到你的网页中去？首先保存做好的文件。然后点击导出。或是图像预览即可。也可以使用文件在浏览器中预览。网页中的下拉菜单：首先依次选择矩形按钮，点右键选择插入矩形切片，把这个切片加进来以后， 你就可以选中某一个切片，做它的下拉菜单了

5、。点击行为面板点击加号按钮在里面有一个设置弹出菜单。弹出对话框。他实际上是一些相关的设置，你只要把它设置好效果就可以做出来了。比如：首先在内容里的第一项我们可以输入文本：“蓝色理想”在后面写入他的链接网址http/ -blank再写第二个：网页顽主 http/ -self 以此类推。那么在外观这一栏，首先在单元格这一栏可以选择是做HTML的还是图像的？这里面先选择做图像的。选择图像了之后，下面就多了个样式的选择表，是不是可以加一些背景的效果。然后可以设置文本，字体 排列方式什么的 文本颜色 比方说红色 把单元格的颜色变为黄色， 然后这叫弹起，鼠标经过的方式、比如说在调整字的颜色和单元格的颜色。

6、然后你可以给它加一个不同的背景。然后点继续就切换到高级这来了。可以控制当前按钮的宽和高，自动的话自动匹配文字，也可以手动的填像素值。单元格间距可调也可以不调，菜单延迟是鼠标放在按钮上出现效果的时间长短，默认是1000毫秒也就是一秒钟。然后是否显示边框。最后选择位置， 这个下拉菜单在你按钮选择的什么位置。选择正下方。点击完成这下就可以看到页面下的子菜单的位置了。其实这个位置是任意可调的，我们只需要在画面当中拖拽他就可以了。2. DW源代码常用代码效果：1 给背景加图片： 2 设置背景图片大小： width= height=3 表单域：form/form4 表单套用格式：tabletrtd/td/

7、tr/table5 合并表单行数：td colspan=”2”6 改变字体颜色、大小、样式 ：font/font7 文本字段的表单属性：input/8 固定属性值：value=” 9 单选按钮：input type=”radio”/input type=radio name=图片名称/img src=图片链接 border=0 alt=10 复选按钮：input type=”checkbox”/11 提交查询内容和重置：input type=”submit”/ 提交查询内容input type=”resrt”/重置 想修改内容加 valueinput type=”submit” value=”

8、 修改内容”/input type=”resrt” value=” 修改内容”/12 添加附件文件域：input type=”file”/13 大型文本区域：textarea/textarea14 下拉菜单：selsctoption 文字内容/selsct15 网页整体源代码书写区域划分：bodydiv id=containerheader/divcontentfooter3. DW CSS样式表常用代码效果：1 两张图片随鼠标滑过交替出现：源代码里面写：a href=”#” class=”lk”/aCSS样式表里面写：.lk background:url（图片链接）; width: px;

9、height: .lk：hover background:2 鼠标经过边框和文字变颜色交互效果的导航栏效果：按钮文字内容 按钮文字内容url（./img/btbg.gif）; display:block;color:颜色;font-size:text-decoration: line-height:float:left; padding-left: margin-left:.lk span background:url（./img/btbg.gif） right no-repeat; 0 8px 0 0;4 将网页底图居中放置在网页中的效果：在body和html里将：页边边框为0，填补为0，接着给整个字体的大小。0.875em 相当于14像素，宋体。body,html margin:0; font: 0.875em 宋体;#container width: background:链接背景图片地址 position:absolute;left:50%;top:margin-left:- px;margin-top: