下载文档原格式
Photoshop 网页设计实例——下载动画图标制作在网页中往往会看到一些动态图标，例如下载栏目和搜索栏目等，形象播放增强了网页感染力。
由于GIF动画文件小，在插入网页下时，下载速度快且不用安装插件。
因此这些栏目中的图标通常采用GIF动画图片，而不用Flash动画。
网页中的下载图标以向下箭头形式出现，如图1-106所示。
图1-106 房地产网页操作步骤：（1）新建一个【宽度】和【高度】分别为100和90像素，白色背景文档。
使用【钢笔工具】，建立一个70×60像素的路径。
按Ctrl+Enter快捷键，将路径转换为选区。
新建“图层1”，填充淡绿色（#D1F073），取消选区，如图1-107所示。
图1-107 建立路径建立路径时，可以拉出参考线做辅助。
通过使用【直接选择路径】，添加、移动路径锚点，调整路径。
1副本”图层，打开【图层样式】对话框。
启用【渐变叠加】选项，设置#54A511-#468D11-#54A518渐变。
并选择【移动工具】，向下移动1个像素，如图1-108所示。
图1-108 绘制文件夹背面图像（3）新建“图层2”，使用【矩形工具】，绘制一个65×45像素的矩形。
双击该图层，打开【图层样式】对话框，启用【渐变叠加】选项，设置由灰色到白色渐变，设置参数，如图1-109所示。
图1-109 绘制矩形（4）启用【斜面和浮雕】选项，设置【阴影强度】为10%，【斜面大小】为0像素，设置参数，如图1-110所示。
图1-110 添加厚度（5）复制“图层2”，对该图层图像执行【斜切变换】操作。
按Ctrl+Shift+Alt+T快捷键3次，复制变换上次操作3次，如图1-111所示。
图1-111 复制变换操作（6）使用【钢笔工具】，建立路径。
新建“图层3”，将路径转换为选区，填充任意颜色。
取消选区，添加【渐变叠加】效果，设置参数，如图1-112所示。
图1-112 绘制图像（7）如同（2）操作，复制“图层3”，将副本向下移动1个像素。
Photoshop 网页设计实例——设计工作室网页Banner 制作根据网站的主题来设计网页Banner，本案例是一个设计工作室网站，如图1-58所示。
依据题目名称设定整体风格，画面比较柔和。
Banner的背景以一种纸张的纹理而出现，在背景上绘制有一片灰色的墨迹水印效果，彩色图案与黑白色图案结合，蕴含一种诗意味道。
图1-58 设计工作室Banner操作步骤：（1）新建一个【宽度】和【高度】分为1000和250像素，10%灰色背景文档。
执行【滤镜】|【纹理】|【纹理化】命令，打开【纹理化】对话框，设置【纹理】为“画布”，设置参数，如图1-59所示。
图1-59 添加纹理效果（2）新建“图层1”，填充蓝色（#ABD5CF），单击【图层】面板下的【添加图层蒙版】按钮，对图层添加蒙版。
在蒙版处于工作状态下，使用黑色【画笔工具】，设置【硬度】为0%，在画布中央进行涂抹，如图1-60所示。
（3）打开“墨迹”图片素材，使用【魔棒工具】，设置【容差】为30像素，在画布白色出点击建立选区。
按Ctrl+Shift+I快捷键，反选选区。
新建“图层1”，将选区填充土黄色（#D1b57A），取消选区，如图1-61所示。
图1-61 绘制图形（4）使用【移动工具】，将图像放置到Banner文档中，命名图层为“墨迹”图层。
按Ctrl+T快捷键，对图像进行缩小变换，并按Enter键结束变换，如图1-62所示。
图1-62 放置图像（5）按住Ctrl键，单击该图层缩览图，载入选区。
执行【选择】|【修改】|【扩展】命令，设置【扩展量】为5像素，如图1-63所示。
图1-63 建立选区（6）新建图层“墨迹1”，填充土黄色（#D1b57A），设置【不透明度】为30%。
如同（2）步骤操作，对“墨迹”添加蒙版后在图像边缘进行涂抹，如图1-64所示。
图1-64 绘制墨迹水印效果（7）打开“水墨画”图片素材，执行【图像】|【模式】|【灰度】命令。
将图像由彩色转换为黑白。
用vfp制作WEB网页（二）实例教程概览这是一个计算机中级考试的成绩查询系统，可以通过姓名或者准考证号码查询出考试成绩，查询界面是这样的：如果有结果返回，返回的结果将这样显示：如果没有记录被查到，将显示这个页面：代码分析Index.htm这是客户端浏览器上的查询界面，负责向 WEB 服务器发送请求。
关键代码是：<FORM name=search onsubmit="return validate_form()" action=search.asp method=post>表示用 POST 方法调用名称为 search.asp 的ASP 页面。
这里提交请求时，它会将客户端控件 cxxx 和 cxnr 的值一并传递到 WEB 服务器。
其中 cxxx 表示查询的关键字：是按照姓名查询还是按照准考证查询；cxnr 表示查询内容，就是具体姓名或者准考证号码。
Search.asp接着就是search.asp了，刚才客户端指明 WEB 服务器用 search.asp 来对应客户端的请求。
所有代码，如下：<%set ox=server.createobject("putertest")response.write ox.search(CBool(request("cxxx")),CStr(request("cxnr")))set ox=nothing%>这是用 VB Script 编写的 ASP 脚本程序，很简单。
先是创建 COM 对象实例，这和 Visual FoxPro 里的 CreateObject() 是很像的：set ox=server.createobject("putertest")创建了 COM 对象实例以后，就要调用它了。
这时通过 ASP 的 Request 对象取得查询参数 cxxx 和 cxnr ，由于 VB Script 里仅有一种数据类型就是 Variant，为了保证 COM 通讯时，参数的数据类型不出错误，我们进行强制类型转换；调用 search 函数，并等待 search 函数返回 HTML 代码。
![实例4——国字型布局网页_网站设计 开发 维护 推广 从入门到精通_[共6页]](https://uimg.taocdn.com/ceef96dd79563c1ec4da712e.webp)
使用表格排列网页数据Chapter 7 7.5.4 实例4——国字型布局网页国字型布局常用于主页布局，下面通过实例讲述国字型布局网页的制作，具体操作步骤如下。
◆ 选择菜单中的【文件】|【新建】命令，创建一空白文档，如图7-51所示。
选择菜单中的【文件】|【另存为】命令，弹出【另存为】对话框，在对话框中的【名称】文本框中输入index1，如图7-52所示。
图7-51 新建文档 图7-52 【另存为】对话框 ♦ 单击【保存】按钮，保存文档。
选择菜单中的【插入】|【表格】命令，弹出【Table 】对话框，如图7-53所示。
⌧ 在对话框中将【行数】设置为1，【列数】设置为1，【表格宽度】设置为780像素，单击【确定】按钮，插入表格，此表格设置为表格1，如图7-54所示。
图7-53 【Table 】对话框 图7-54 插入表格1 ⍓ 将光标放置在单元格中，选择菜单中的【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择“images/banner.jpg ”文件，如图7-55所示。
7.5 实例——利用表格布局网页单击【确定】按钮，插入图像，如图7-56所示。
图7-55 【选择图像源文件】对话框图7-56 插入图像将光标置于表格1的右边，选择菜单中的【插入】|【表格】命令，插入2行1列的表格，此表格设置为表格2，如图7-57所示。
将光标放置在表格2的第1行单元格中，选择菜单中的【插入】|【图像】命令，弹出【选择图像源文件】对话框，在对话框中选择“images/topbj.jpg”文件，单击【确定】按钮，插入图像，如图7-58所示。
图7-57 插入表格2 图7-58 插入图像❝将光标放置在表格2的第2行单元格中，选择菜单中的【插入】|【表格】命令，插入1行5列的表格，此表格设置为表格3，如图7-59所示。
❞将光标放置在表格3的第1列单元格中，在【属性】面板中将【宽】设置为7，【背景颜色】设置为#198402，如图7-60所示。
网页草图设计实例绘制草图是为了能够得到整体的页面结构，制作者通过网页草图与客户进行沟通，从而确定网站外观、功能和一些特效，知道客户这样能减满意为止，这样能减少麻烦。
同时如果在设计页面阶段还没有完全确定整个网站的功能，那么在以后的开发过程中会浪费很长时间去修改，并且从页面设计到网页制作这个过程是不可逆的过程。
同时草图文件还可以作为Dreamweaver中的跟踪图像，使用软件设计草图，效果如图所示。
制作网站首页草图的具体操作步骤。
（1）执行“文件”| “新建”命令，新建文档。
（图像大小：960×900像素）（2）打开“sky.jpg”、“建筑.jpg”文件。
（3）工具箱中选择“移动工具”，将“sky.jpg”文件拖到新建“网页草图”文件上，图层重命名为“天空”。
将“建筑.jpg”文件拖到新建“网页草图”文件上，图层重命名为“建筑”。
（4）当前层为“建筑”图层，按【Ctrl+T】组合键调整图像大小，按【Enter】确定。
（5）为“建筑”图层添加图层蒙版。
（6）工具箱中设置“前景色/背景色”为默认的“黑色/白色”（#000000/#ffffff）。
工具箱中选择“渐变工具”，选择“前景色到背景色的渐变”，在“建筑”图层蒙版上从左到右拖动鼠标填充。
（7）工具箱中选择“画笔工具”，前景色黑色#000000，画笔直径70px，硬度0%，在“建筑”图层蒙板上涂抹对图像遮罩，效果如图所示。
（8）打开“人物.gif”文档，执行“图像”|“模式”|“RGB颜色”命令，将图像转换成RGB颜色模式。
（9）工具箱中选择“移动工具”，把“人物.gif”图像拖动到“网页草图”文件上，该图层重命名为“人物”。
（10）打开images文件夹中的“logo. gif”文件。
执行“图像”|“模式”|“RGB颜色”命令。
（11）工具箱中选择“移动工具”，把“logo.gif”图像拖动复制到“网页草图”文件上，该图层重命名为“Logo”。
D re am we a ve r网页设计制作的实例教程100例第一章软件简介与设置 1.课程介绍与基础知识 2.软件起始页的用法 3.界面布局与切换 4.定制工具箱 5.代码拆分与设计模式 6.定制实用界面布局7.标签选择器8.选取手形和缩放工具9.显示设置与速度统计10.属性面板与设置11.菜单命令快速上手12.网页色彩搭配13.HT ML 基础知识14.企业识别系统与W WW 第二章定义站点页面属性1.制作网站三大原则 2.定义新站点 3.文件面板基础操作 4.创建新网页与网站地图 5.创建新的链接 6.地图模式下修改文件标题7.自定义根查看链接关系8.CSS的设置一，外观设置9.CS S的设置二，链接设置10.CSS的设置三，标题设置11.CSS的设置四，跟踪图像12.基础HT ML 页面设置13.本小节HT ML基础14.名词解释，h ttp和URL 第三章文本与列表控制 1.文本与列表控制学习 2.网页标题修改多种途径 3.征文标题文字格式的设置 4.文字大小颜色与对齐 5.问题，文本中输入空格 6.段落切换与强行换行7.文本编辑基础8.从外部导入文本内容9.清理冗余代码10.列表与排序11.定义列表12.插入排版水平线第四章链接的使用 1.链接的使用学习计划 2.定义页面链接样式3.一般链接的常见形式 4.输入法建立第一个链接 5.指向法制作链接 6.快捷键拖动法创建链接7.插入法建立链接8.直接用代码建立链接9.插入标签法建立链接10.环绕标签法建立链接11.链接的修改与Em a il链接12.制作特殊的Em a il链接13.制作下载类链接14.锚链接的制作15.色彩搭配和HT ML基础第五章图像处理 1.图像处理学习计划与目标 2.用菜单插入及设置图片 3.用代码直接插入图片 4.为图片添加链接 5.为图片添加提示文本 6.用标签检查器设置图片7.用属性面板设置图片8.编辑图像热区9.调用外部程序编辑图像10.优化与裁切图像11.对图像重新取样12.调整图像亮度和对比度13.锐化图像14.插入图像占位符15.插入鼠标经过图像16.添加导航条17.基础知识与名词解释第六章添加多媒体内容 1.添加多媒体内容 2.插入F LAS H S WF文件 3.插入F LAS H按钮 4.插入F LAS H文本 5.插入F LAS H PAP ER 6.插入F LAS HVI D EO 7.插入媒体插件8.插入视频文件9.插入F LAS H元素10.插入注释11.插入时间第七章表格基础知识 1.表格基础学习计划与目标 2.在页面中插入表格 3.设置表格页眉及辅助功能 4.在表格中添加内容5.如何导入和导出表格数据 6.导入Exc e l文件与导出表格7.选择表格的常用方法8.插入行或列9.嵌套表格10.表格属性设置11.行，列和单元格属性设置<I MG t it le=“友情的语言，不是文字，而是意义。
web页面交互设计实例Web页面交互设计是指通过网页来进行用户与系统之间的信息交流和操作的过程。
良好的交互设计可以提升用户体验，使用户更加方便、快捷地完成操作。
下面以购物网站的页面交互设计为例，来介绍一下Web页面交互设计的实例。
一、首页设计购物网站的首页需要直观地展示各类商品，引导用户浏览和购买。
页面的布局需要简洁明了，各个模块之间需要有明显的分隔，避免用户产生困惑。
在首页的顶部通常设置网站的Logo和搜索框，方便用户快速找到想要的商品。
在页面的中部，可以设置推荐商品的轮播图，吸引用户的注意力。
在页面的底部，可以设置网站的联系方式、服务协议等信息。
二、分类页面设计分类页面是购物网站的重要组成部分，用于将各个商品按照类别进行分类展示。
在分类页面的侧边栏通常设置商品的分类目录，方便用户快速定位到自己感兴趣的商品类别。
在商品列表的展示上，可以采用瀑布流式布局，将商品以瀑布的形式依次展示出来，使用户可以一次性看到更多的商品。
三、商品详情页面设计商品详情页面是用户购买商品的关键页面，需要详细展示商品的图片、价格、描述等信息。
在页面的上方通常设置商品的图片轮播图，使用户可以清晰地看到商品的各个角度。
在商品的基本信息下方，可以设置商品的详细描述、参数、用户评价等内容，帮助用户更好地了解商品的特点。
在页面的右侧可以设置商品的购买按钮和加入购物车按钮，方便用户进行购买操作。
四、购物车页面设计购物车页面是用户管理购物车中商品的页面，需要清晰地展示购物车中的商品信息和价格。
在购物车页面的顶部通常设置全选按钮和删除选中商品的按钮，方便用户进行批量操作。
在购物车商品列表的下方，需要展示商品的总价和结算按钮，方便用户进行结算操作。
在页面的底部可以设置推荐商品，引导用户继续购物。
五、结算页面设计结算页面是用户进行订单生成和支付的页面，需要用户填写收货地址、选择支付方式等信息。
在页面的上方通常设置订单商品的列表，方便用户确认购买的商品。
DIV+CSS：网站首页布局实例教程第一步：页面布局与规划在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。
在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
第二步：写入整体层结构和CSS接下来我们在桌面新建一个文件夹，命名为“DIV+CSS布局练习”，在文件夹下新建两个空的记事本文档，输入以下内容：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link href="css.css" rel="stylesheet" type="text/css" /></head><body></body></html>这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
Photoshop 网页设计实例——摄影网页动画Banner制作雅之美摄影网站，以神秘、热情、温和、浪漫的紫色调为主。
在Banner制作中，背景以多种颜色多色块和谐搭配组成，加上背景圆环图案，呈现一种朦胧光晕效果，如图1-131所示。
在静态Banner制作完成，放置了两张摄影图片，采用了动态Banner使之循环播放。
在Photoshop中，分别对两张图像插入关键帧，制作从无到有的动画效果。
图1-131 摄影Banner1 制作背景（1）新建一个【宽度】和【高度】分别为1000和600像素，黑色背景文档。
新建“图层1”，填充白色。
双击该图层，打开【图层样式】对话框。
启用【渐变叠加】选项，设置【渐变类型】为“径向”，设置参数，如图1-132所示。
图1-132 添加蒙版（2）单击【图层】面板下的【添加图层蒙版】按钮，对“图层1”添加蒙版。
使用黑色【画笔工具】，设置【硬度】为0%，【画笔大小】和【不透明度】根据需要随时更改。
在画布上涂抹，如图1-133所示。
图1-133 绘制紫红色烟雾效果（3）新建“图层2”，填充棕色（#7D463E）。
如同上例操作，绘制棕色烟雾，如图1-134所示。
图1-134 绘制棕色烟雾效果（4）新建“图层3”，填充白色。
双击该图层，启用【渐变叠加】图层样式。
设置【渐变类型】为“线性”，设置参数，如图1-135所示。
图1-135 添加渐变效果（5）使用【矩形选框工具】，在画布左下角建立选区。
按Shift+F6快捷键，设置【羽化半径】为10像素，羽化选区。
单击【图层】面板下的【添加图层蒙版】按钮，对“图层3”添加蒙版，如图1-136所示。
图1-136 添加图层蒙版（6）新建“图层5”，使用【椭圆工具】，绘制紫色（#931D7B）正圆。
双击该图层，启用【外发光】图层样式。
设置【外发光】颜色为粉色（#DF85C3），并设置该图层【填充】为5%。
设置参数，如图1-137所示。
图1-137 绘制发光圆环（7）如同上例操作，绘制多个发光效果不同的圆环。
CSS混沌初开I：导航菜单素材的设计现在开始我们将学习如何一步一步的构建一张CSS页面。
本教程分成以下几个局部：第一讲主要是关于如何在PS中制作导航按钮素材；第二局部主要针对的内容是背景，接着是页面的整体布局以及顶部解析，最后一局部是如何整合CSS和XHTML。
有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上我的初衷是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。
首先看一下完成的效果：玻璃质感导航图片的制作：首先我们在Photoshop中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮〞，并用灰色#ECECEC进行填充。
再新建一个图层命名为“高光〞，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。
然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里我使用的是大小20px透明度为50%的橡皮刷：新建一个名为“网点〞的图层，用1px的铅笔工具在适当的位置绘制几个小点，例如中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序：接着我们可以通过钢笔工具绘制路径创立选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。
整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差，不是么？鼠标经过导航时的翻转图片：创立翻转效果图片，我们只要简单的在原有素材根底上调整色调就即可，关于文本的添加在这里就不细说了。
我们可以为每个图层调整色调，在例如中我主要使用了一下几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B。
这局部教程涉及到一些Photoshop的根本知识，如果你不是很了解，建议先学习一些PS的入门根底，毕竟Adobe合并了*之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。
制作属于自己的第一个网页之一前期准备欢迎来到WYSIWYG Web Builder 中文教程网本站将通过一个个实战案例教会你如何使用WYSIWYG Web Builder。
你只需了解基本的网页制作知识，无需编程，就可以快速制作属于自己的网页。
WYSIWYG Web Builder是网页制作工具，如果想达到更好的制作效果，本站建议学习并且理解以下相关基础知识：1.网站以及网页的构成2.网页元素以及样式3.DIVCSS布局4.JS&JQUERY如果您对服务器端编程以及数据库系统有所了解，也可以使用WYSIWYG Web Builder制作交互性很强的网页应用，如php动态网页。
用WYSIWYG Web Builder制作属于自己的第一个网页工欲善其事，必先利其器。
1.我们要清楚希望制作的网页的效果是怎样的。
在这里我们需要的效果如下：DEMO演示：小猩猩幼儿园2.制作这个网页，我们需要额外的一些素材：背景图片，视频文件之类的本教程素材下载:images3.确定我们这个网页的布局。
我们现在的布局采用整体上为固定宽度的单列多行布局：头部---内容--底部。
每一部分所占据的宽度、高度我们都要做到心里有数，比我我们现在各个部分的宽高准备如下：头部：宽：1600 px 高120+36px （banner+导航层，导航层中包含了菜单高度36px 宽度1000px）内容：宽度1000px 高度：图片轮换高度350px+侧边栏导航高度540px+家育共建高度260px+20px（预留空间）底部：宽度1000px 高度100px制作属于自己的第一个网页之二页面布局首先我们要对当前页面的基本信息进行设置：标题，宽度，页面居中显示，高度可以不设置，软件会自动扩展高度。
工作区--右键--page properties然后，我们放置layer对象进行布局：wysiwyg 布局的原理有两种：table 或者CSS，由于table布局已经几乎被淘汰，所以软件默认采用div css 布局，实现方式是一个wysiwyg web builder 的layer对象，一个layer对象就是一个网页DIV块(也称为DIV容器)，就像是一个可以装东西的盒子那样，我们在里面放置网页元素。
目录分割线 (1)弹出菜单 (5)滑动折叠菜单 (10)多彩文字链接 (17)极酷的鼠标 (26)网站个性小图标 (28)网站过度特效 (30)插入flash按钮 (32)插入flash文字 (34)插入透明背景的flash (35)Flash个性播放界面 (38)制作电子相册 (43)随机播放音乐 (45)滚动布告栏 (47)数据库连接 (51)验证用户注册 (62)在线音乐网站 (74)实现购物车 (84)实现产品搜索 (90)Blog日历事件 (94)随笔管理及评论 (106)分割线是网页中不可缺少的元素，它主要用于分隔网页内容，也可以用于装饰网页。
效果说明在网页中间会出现一条漂亮的分隔线，并且能够不断闪动，从而充分体现出网站的个性，如图32-1 所示。
创作思想本实例使用层作为定位，然后在层中插入表格，在表格中插入图片并在时间轴中分别添加样式滤镜效果。
操作步骤（ 1 ）新建一个网页文件，并在网页中插入一个层，然后在层中插入一个1 行 2 列的表格，如图32-2 所示。
（ 2 ）设置表格的间距，然后在表格的单元格中插入图片，如图32-3 所示。
（ 3 ）设置时间轴。
调出时间轴，在时间轴的第5 帧处添加【改变属性】行为，并设置层对象的属性，如图32-4 所示。
（ 4 ）添加行为和改变属性。
在其他帧中分别添加行为，并根据需要改变属性，在第40 帧处添加转到时间轴的第 1 帧行为，再勾选【自动播放】复选框，如图32-5 所示。
本图代码如下所述：Glow(Color=red, Strength=1)Glow(Color=red, Strength=2)Glow(Color=red, Strength=3)Glow(Color=red, Strength=4)Glow(Color=red, Strength=3)Glow(Color=red, Strength=2)Glow(Color=red, Strength=1)实例制作完成。
Photoshop 网页设计实例——横幅动画广告据调查网上最著名的10%的站点吸引了90%的用户，可见提高站点知名度，是扩大访问量的重要手段。
下面将要制作的是关于网页的横幅动画广告，如图1-76所示。
通过使用淡蓝色调的背景来实现音乐网站清新的风格，继续通过使用文字的闪动画和线条的动画，来体现出网站的快速和及时更新的基本要求。
本实例主要是通过动画面板中的位置关键帧来实现的，通过使用【移动工具】在画布上的移动，建立关键帧得到的动画效果。
图1-76 制作横幅动画广告1制作效果动画（1）新建640×90像素，分辨率为72的像素文档，分别导入素材，如图1-77所示。
图1-77 导入素材（2）执行【窗口】|【动画】命令，选择【人物】图层，单击位置【在当前时间添加或删除关键帧】在0.00秒上建立关键帧，如图1-78所示。
图1-78 创建关键帧（3）继续单击位置【在当前时间添加或删除关键帧】在0.02秒上建立关键帧，使用【移动工具】将人物图片向右方移动，如图1-79所示。
图1-79 创建移动动画（4）继续选择人物图层，在0.10秒上建立关键帧，使用【移动工具】将人物图片向上方移动，创建抖动动画，如图1-80所示。
图1-80 创建抖动动画（5）移动【当前时间指示器】放置0.17秒的处，在0.17秒上建立关键帧，使用【移动工具】将人物图片向下方移动，创建抖动动画，如图1-81所示。
图1-81 创建下方抖动动画（6）继续采用上述方法，在0.26秒上建立关键帧，使用【移动工具】将人物图片向上方移动，如图1-82所示。
图1-82 上方抖动动画（7）使用【文字工具】输入横排文字，并填充颜色，按Ctrl+T快捷键改变文字的方向，将【当前时间指示器】移动到0.29秒处，将【动画轨道开始】拖至0.29秒，如图1-83所示。
图1-83 移动动画轨道开始（8）复制文字，将文字颜色改为白色，继续把【当前时间指示器】移动到1.0秒处，将【动画轨道开始】拖至1.0秒，继续将【动画轨道结束】拖至1.03秒处，如图1-84所示。
Photoshop 网页设计实例——房产网页动画Banner制作Banner可以放置在网页上的不同位置，其尺寸是根据所在网页整体配比设置。
本案例中Banner是展示网页整体风格的主题，采用了蓝色调和绿色调，与网站的灰色调想配合，在网页中显得清新，如图1-94所示。
此外，该Banner是动态的，制作成动画形式，在单击进入该网站时，使整个网站的生动而又朝气。
图1-94 房地产网操作步骤：（1）打开准备好的PSD格式分层素材，如图1-95所示。
图1-95 打开素材图像（2）隐藏“背景”、“播放栏”和“天空”以外的所有图层。
打开【动画（时间轴）】面板，在“天空”图层0秒处创建【不透明度】属性关键帧，并且设置图层【不透明度】为0%，如图1-96所示。
图1-96 创建天空第1关键帧（3）在15f处创建第2个关键帧，设置该图层的【不透明度】为100%，如图1-97所示，创建天空逐渐显示动画。
图1-97 创建天空显示动画（4）显示“白云”图层，在同时间的该图层【不透明度】属性中创建关键帧，并且设置该图层的【不透明度】为0%，如图1-98所示。
图1-98 创建白云第1关键帧（5）在01:00f处创建第二个关键帧，设置该图层的【不透明度】为100%，如图1-99所示，形成白色显示动画。
图1-99 创建白云显示动画（6）使用相同方法，创建“太阳”、“彩虹”和“草地”中图像的显示动画，动画过程如图1-100所示。
图1-100 显示动画过程（7）显示“树”图层后，在该图层的【位置】属性02:15f处创建第1关键帧，将树放置到如图1-101所示位置。
图1-101 创建树第1关键帧（8）在03:00f处创建第2个关键帧，将树垂直向下移动到如图1-102所示，形成树显示动画。
图1-102 创建树显示动画（9）在该图层的第一个关键帧，将图像垂直向上移至画布外围，形成降落动画。
使用相同方法制作“房子”、“风车”、和“树”图像动画，动画过程如图1-103所示。
网页制作三剑客Dreamweaver (Mx2004 Flash Fireworks)实例教程第一篇Dreamweaver mx2004 实例 (2)实例1 站点的建立 (2)实例2 布局表格 (8)实例3 层的运用 (13)实例4 显示隐实藏图层 (17)实例5 插入背景音乐 (21)实例6 插入背景图像 (24)实例7 文本超链接 (27)实例8 图像热点链接 (30)实例9 弹出信息 (33)实例10 自动跳转链接 (35)实例11 创建交换图 (37)实例12 跳转菜单 (40)实例13 插入FLASH文本 (42)实例14 插入FLASH按钮 (44)实例15 插入FLASH动画 (46)实例16 插入视频 (48)实例17 显示弹出式菜单 (50)实例18 框架的使用 (53)实例19 创建网站相册集 (56)实例20 插入按钮 (58)实例21 页面配色方案 (60)实例22 CSS的使用 (63)实例23 自动格式化表格 (67)实例24 使用表格间隔图像 (70)实例25 单元格自动延伸 (73)实例26 炽热文字 (76)实例27 显示当前日期 (79)实例28 显示登陆时间 (82)实例29 状态栏中跳动的文字 (85)实例30 左右移动的图片 (88)第一篇Dreamweaver mx2004 实例实例1 站点的建立了解和掌握怎么建一个网站,这是做网站的第一步,因此必须掌握。
要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤（1）启动Dreamweaver mx2004,如图1.1.1所示.图1.1.1 启动后所示的界面(2) 选择菜单栏的站点(S)→站点管理(M)命令,打开对话框,如图1.1.2所示.图1.1.2 “站点管理”对话框(3) 单击”站点管理”对话框的新建(N)出现”站点(S)和FTP与RDS服务器(F)”,选择其中的”站点(S)”出现对话框,如图1.1.3所示.图1.1.3 “站点定义1”对话框(4) 在文本框里可以为你的站点起个名字,然后按下一步出现对话框,如图1.1.4所示.图1.1.4 “定义站点2”对话框(5) 在对话框中,根据自己所做的网站选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按下一步出现对话框,如图1.1.5所示.图1.1.5 “站点定义3”对话框(6) 选择系统推荐的选项,在文本框里可以填入你所建网站的保存路径,也可以不变系统默认的路径,然后按下一步出现对话框,如图1.1.6所示.图1.1.6 “站点定义4”对话框(7) 根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用的上传方法,如果不想上传的话,就选择”无”,然后再按下一步,出现对话框,如图1.1.7所示,按完成,出现图1.1.8所示,再按完成这就完成了建一个站点的过程.图1.1.7 “站点定义5”对话框图1.1.8 “站点定义6”对话框实例2 布局表格学会制作表格,能熟悉掌握表格的作用,现在大部分网页都运用到了表格,它是做网页不可缺少的技术,也要熟悉掌握.最终效果如图:.主要应用布局表格和布局单元表格来绘制表格,同时在表格中插入图片和添加文本,或者flash等等,最终实现你所想的效果. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver mx 2004 软件.(2)选择文件→新建(N) …Ctrl+N命令,打开新建文档对话框,如图1.2.1所示,单击创建(R)按钮,创建一个空白HTML文档,如图1.2.2图1.2.1 “新建文档”对话框图1.2.2 新建空白HTML文档(3)选择菜单栏的修改→页面属性(P)…Ctrl+J命令,弹出页面属性对话框,如图1.2.3所示,在标题(T):栏中输入文字作为标题,如现在输入”布局表格”,再按确定,返回主界面.图1.2.3 “页面属性”对话框(4)单击工具栏的按钮,切换到”布局视图”工作界面,如图1.2.4所示.图1.2.4 “布局视图”工作界面(5)单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图1.2.5所示. 还可以根据你的需要来调整表格的大小.图1.2.5 绘制布局表格(5)单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单元格,如图1.2.6所示.图1.2.6 绘制布局单元格(6)重复第(4)和(5)步的操作,绘制其它布局表格和布局单元格,如图1.2.7所示.图1.2.7 绘制其它单元格(7)在布局单元格添加文本和图像,如图1.2.8所示.图1.2.8 表格添加内容(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.2.9所示.图1.2.9 浏览器中的效果实例3 层的运用学会使用层的技术,虽然现在的大部分的网页是没有用到层,但要制作一些比较特别的网页时,用层比用表格简单得多.本例要用到层的技术,建层,改变层的属性等,制作一些布局比较简单的网页. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”层的运用”的网页,如图1.3.1所示.图1.3.1 “层的运用”网页的建立(3)选择插入(I)→布局对象→层(Y)命令,插入一个层,如图1.3.2所示.图1.3.2 层的建立(4)点击层的里面便可对层的内容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入(I)→图像(I)…Ctrl + Alt +I打开对话框,如图1.3.3所示图1.3.3 “打开”的对话框(4)选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图1.3.4所示.图1.3.4 插入图片(5)重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”属性”修改层,最后效果如图1.3.5所示.图1.3.5 最终效果(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.3.6所示图1.3.6 在浏览器中的效果实例4 显示隐实藏图层制作显示隐藏图层的效果,使网页具有动态效果.如右图.本例主要应用”显示隐藏图层”命令.单击”显示”按钮,页面中显示所有的图层,单击”隐藏”按钮,隐藏所有的图层. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”显示隐藏图层”的网页,如图1.4.1所示.图1.4.1 “显示隐藏图层”网页的建立(3)在网页使用布局表格技术建立表格,如1.4.2所示.(4)单击第一个单元表格内,单击插入(I)→布局对象(Y)→层(Y)命令,调整层的大小刚好等于第一个单元表格的大小,单击层里面,选择插入(I)→图像(I)…Ctrl +Alt +I 命令,出现对话如图1.4.3所示,选择图像按..(5)单击第二个单元表格,按步骤4,插入层和图像,并在第三和第四个单元表格内分别写上”显示”和”隐藏”.最后效果如图1.4.4所示.图1.4.2 建立表格的网页图1.4.3 “打开”对话框(6) 选择第三单元表格里的”显示”,单击窗口(W)→行为(E)…Shift + F3,打开行为面板,如图1.4.5所示(7) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示-隐藏层命令,打开显示隐藏层对话框,如图1.4.6所示.(8) 选中所有图层,单击按钮,为所有层添加显示行为,如图1.4.7所示,单击按钮,关闭显示-隐藏层对话框.(9) 单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onClick选项,如图1.4.8所示.(10)重复6~9步的操作,选中第四单元表格里的”隐藏”,为那二层(即那二张图像)添加隐藏图层及相应触发事件,如图1.4.9.所示.图1.4.4 插入图像的网页图 1.4.5 行为面板图1.4.6 “显示-隐藏层”对话框图1.4.7 设置显示层行为图1.4.8 设置触发事件图1.4.9设置隐藏层行为(11)选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.4..10和1.4.11所示图1.4.10 单击”显示”的效果图1.4.11单击”隐藏的效果实例5 插入背景音乐使网页更加活泼生动.如右图所示.本例主要让你了解本软件的基本功能,学习怎么在网页中添加音乐. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”背景音乐”的网页,如图1.5.1所示.图1.5.1 “背景音乐”网页的建立(3)按上例在网页中插入图像居中,再插入一个层,并在层里输入文字”让我唱支歌!”调整层的大小和位置.如图1.5.2所示.(4) 按上例单击窗口(W)→行为(E)…Shift + F3,打开行为面板.(5) 单击”添加行为”按钮,在弹出的下拉菜单中选择播放声音命令,打开播放声音对话框,如图1.5.3所示.(6)单击播放声音文本框后的按钮,在弹出选择文件对话框中选中一个音乐文件(见图1.5.4所示)单击按钮.图1.5.2 插入图像和层的效果.图1.5.3 “播放声音”对话框图1.5.4 “选择文件”对话框(7)单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onLoad选项,如图1.5.5 所示.(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.5.6所示.图1.5.5 设置触事件图1.5.6 浏览器中的效果实例6 插入背景图像使网页在颜色方面不是那么单调.效果如右图所示.本例主要学习如果把一张图片作为网页的背景图像,使网页更加好看. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”插入背景图像”的网页,如图1.6.1所示.如图1.6.1 ”插入背景图像”网页的建立(3)在网页中输入文字,并在网页下面的中,改变文字的大小和位置,如图1.6.2所示.(4) 在网页空白处按右键,选择页面属性(T)…出现对话框,如图1.6.3所示,(5) 单击页面属性对话框中的出现选择文件对话框,如图 1.6.4所示.按.(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.6.5所示.图1.6.2 在网页中输入文字图1.6.3 页面属性的对话框图1.6.4 选择文件对话框图1.6.5 在浏览器中的效果实例7 文本超链接制作具有超链接的网页.如右图所示.本例学习如何设置超链接,它是制作网站的最基本技术,因为现在的网站可以说没有一个不用到它,因此学会它是非常有必要的. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”超链接”的网页,如图1.7.1所示.图1.7.1 ”超链接”的网页建立(3)按上例的步骤制作同样的网页,并在诗的下面加多一行字”更多的诗”,效果如图1.7.2所示.(4)选择最后一行字”更多的字”点击右键,选择创建链接(L)出现选择文件对话框,如图1.7.3所示.然后选择你选定的网页,即当点击文字”更多的诗”时所显示的网页,你应该先做好它.最后按.图1.7.2 添加字后的网页图1.7.3 选择文件的对话框(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.7.4所示..当你点击”更多的字”时,网页就会转到你所链接的网页.图1.7.4 在浏览器中的效果实例8 图像热点链接制作出具有图像链接的网页,即当你点击图像中的某一处时,网页会转到它所链接的网页去,最后如右图所示.本例所用到的技术跟上例差不多,上例是文本的超链接,而本例是图像的一小处的超链接.特别是介绍照片中很多人的其中一个是谁时,就能用到这种技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”图像热点链接”的网页,如图1.8.1所示.图1.8.1 ”图像热点链接”的网页的建立(3) 按以上几例所讲到的技术在网页中插入图片,并调整图片的大小和位置,结果如图1.8.2所示.(4) 选择图片,点击下面的,鼠标就变成一个”+”,然后在图片中选择区域的大小,如图1.8.3所示.(5) 在后面的文本框里填入你要链接的文件或者点击下面右边的,出现选择文件对话框, 如图1.8.4所示,并在后面写上”了解我更多”..图1.8.2 插入图片后的网页图1.8.3 选择图片的区域图1.8.4 选择文件对话框(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.8.5所示..当你鼠标移到刚才你所选的区域时,就会显示”了解我更多”点击它网页就会转到你所链接的网页.图1.8.5 在浏览器中的效果实例9 弹出信息制作一些能自动跳出信息的网页.如右图所示.本例主要应用了”添加行为”的技术,跟例5有点相像,也是用到”添加行为”技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)选择文件(F)→打开(Q)…Ctrl + 0命令,打开打开对话框(见图1.9.1),选择上例的网页,如图1.9.2所示.图1.9.1 “打开”对话框(3) 按上例单击窗口(W)→行为(E)…Shift + F3,打开行为面板.如图1.9.3所示.(4)单击”添加行为”按钮,在弹出的下拉菜单中选择弹出信息命令,打开弹出信息对话框并文本框里写入”欢迎光临本站”.按确定退出. 如图 1.9.4所示(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.9.5所示.图1.9.3 “行为”面板图1.9.2 打开上例的网页图1.9.4 “弹出信息”对话框图1.9.5 在浏览器中的效果实例10 自动跳转链接制作”自动跳转链接”效果的网页.本例主要实现网站首先自动跳转功能,当用户浏览网页时,系统会自动进入新的网址. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)选择文件(F)→打开(Q)…Ctrl + 0命令,打开打开对话框(见图1.10.1),选择例8的网页,如图1.10.2所示.图1.10.1 “打开”对话框(3) 单击文档窗口左下角标签栏中的<body>标签,选择窗口(W)→行为(E)…Shift + F3命令,打开行为面板,如图1.10.3所示.(4) 单击”添加行为”按钮,在弹出的下拉菜单中选择转到URL命令,打开转到URL对话框,并在URL后面的文本里输入一个网站如,如图1.10.4所示.单击确定.(5) 单击行为面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onload项,即设置触发事件为当用户浏览系统自动进入相应的网址,如图1.10.5所示,(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.10.6所示.图1.10.3 行为面板图1.10.2 打开例8的网页图1.10.4 “转到URL”对话框图1.10.5 设置触发事件图1.10.6 在浏览器中的效实例11 创建交换图制作”创建交换图”效果的网页.如右图所示.本例主要讲述交换图的创建过程,用来交换的图必须和原图大小相同. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”创建交换图”的网页,如图1.8.1所示.图1.11.1 ”创建交换图”的网页建立(3) 选择插入(I)→表格(T)…Ctrl + Alt命令,出现表格对话框,如图1.11.2所示,(4) 在表格对话框中,输入行数和列数都为1.按确定插入网页中,并调整表格的大小,使其居中,效果如呼1.11.3所示.(5)单击表格里面,选择插入(I)→图像对象(G)→鼠标经过图像(R)命令,出现对话框.如图1.11.4所示.(6)在后的文本输入原始图像的路径,或单击选择一个图片为原始图像.图1.11.2 表格对话框图1.11.3 插入表格后的网页图1.11.4 插入鼠标经过图像的对话框(7)同样为选择一个图片作为鼠标经过的图像.最后按确定.效果如图1.11.5所示.图1.11.5 插入图像后的效果(8) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.11.6所示.当鼠标经过图像时的效果如图1.11.7所示.图1.11.6 图1.11.7实例12 跳转菜单制作”跳转菜单”效果的网页.如右图所示.本例主要应用跳转菜单呈菜单或者列表的形式制作,当用户选择其中的项目时,会自动从当前页面跳转到相应页面中. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”跳转菜单”的网页,如图1.12.1所示.图1.12.1 ”跳转菜单”的网页的建立(3)选择插入(I)→表单(F)→跳转菜单(J)命令,出现”插入跳转菜单”对话框,如图1.12.2所示.(4) 在”插入跳转菜单”对话框中的后面输入要跳转菜单名,在后面输入该跳转菜单的地址,再按添加其它的菜单.(如图1.12.3),按确定.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.12.4所示.图1.12.2 ”插入跳转菜单”对话框图1.12.3 ”插入跳转菜单”的设置图1.12.4 在浏览器中的效果实例13 插入FLASH文本制作”插入FLASH文本”效果,使网页具有动态美感.如右图所示.本例主要学习如何插入FLASH文本技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH文本”的网页,如图1.13.1所示.图1.13.1 ”插入FLASH文本”的网页建立(3)选择插入(I)→媒体(M)→FLASH文本(L)命令,打开FLASH文本对话框,如果系统提示要保存的话,你就先保存网页,如图1.13.2所示.(4) 输入你想要写的文字,并改变字体的大小,格式,颜色,位置等设置,最终效果如图1.13.3所示.按确定.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.13.4所示.图1.13.2 “FLASH文本”对话框图1.13.3 “FLASH文本”对话框的设置图1.13.4 在浏览器中的效果实例14 插入FLASH按钮制作”插入FLASH按钮”效果的网页.如右图所示.本例主要学习如何插入FLASH按钮技术. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH文本”的网页,如图1.14.1所示.图1.14.1 ”插入FLASH文本”的网页的建立(3) 选择插入(I)→媒体(M)→FLASH按钮(F)命令,打开FLASH按钮对话框, 如果系统提示要保存的话,你就先保存网页,如图1.14.2所示.(4) 在FLASH按钮对话框的后面可以选择按钮的样式,在后面输入”播放”或者其它,点击后面的选择所要链接文档的URL地址,可以不设置,在下拉表框中指定所要链接文本的打开方式,可以不设置.其它的就可以按自己的意愿设置,按确定.(如果在文本框中指定的SWF格式的文件名路径或文件名中含有中文字符,系统会弹出要求你重新输入的提示框)图1.14.2 FLASH按钮对话框(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.14.3所示.图1.14.3 在浏览器中的效果实例15 插入FLASH动画制作”插入FLASH动画”效果.如右图所示.本例主要应用FLASH动画的矢量动画制作完成,它下载速度快,在网页中经常应用,本例学习如何插入FLASH动画. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH动画”的网页,如图1.15.1所示.图1.15.1 ”插入FLASH动画”的网页建立(3) 选择插入(I)→媒体(M)→FLASH (F)命令,打开FLASH对话框,如图1.15.2所示.选择要插入的FLASH按确定.(4) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.15.3所示.图1.15.2 FLASH对话框图1.15.3 在浏览器中的效果实例16 插入视频制作”插入视频”效果.如右图所示.本例主要学习如何插入视频,即在网页中可以观看视频文件. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”插入FLASH动画”的网页,如图1.16.1所示.图1.16.1 ”插入FLASH动画”的网页建立(3) 选择插入(I)→媒体(M)→插件(P)命令,打开插件对话框,如图1.16.2所示.选择要插入的视频文件按确定.(4) 在网页中调整播放窗口的大小和位置,如图1.16.3所示.(5) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.16.4所示.图1.16.2 插件对话框图1.16.3 调整播放窗口图1.16.4 在浏览器中的效果实例17 显示弹出式菜单制作”显示弹出式单”效果.如右图所示.本例主要运用”显示弹出式菜单”的技术,这种技术虽然不是在很多网页中能看到,但它也有它独特的用处,比如说网中的栏目太多而放不下时,就可以进行归类应用这种技术,从而使网页清洁好看. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)新建一个名为”显示弹出式菜单”的网页,如图1.16.1所示.图1.17.1 ”显示弹出式菜单”的网页(3)按上几例所学知识,在网页中插入一个3行1列的表格,并在每个单元表格内输入文字,调整文字的大小和位置,效果如图1.17.2所示.(4) 选择表格内的”电影欣赏”,在下面的后面文本框里输入”* “以表示”电影欣赏”是具有超链接的.(5) 选择窗口(W)→行为(E)…Shift + F3命令,打开行为面板,如图1.17.3所示(6) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示弹出式菜单命令,打开显示弹出式菜单对话框,如图1.17.4所示.。
网页制作实例一、网页设计基础1、熟悉Dreamweaver 8的工作环境2、创建新站点创建本地站点：站点----管理站点----新建----站点（前三步也可直接从“新建站点”进入下面的设置向导对话框）----跟随向导设置直至完成3、网页文件的基本操作a、创建、打开和保存网页文件创建：文件----新建----创建打开：文件---打开----选择欲打开的文件或者在右边的文件浮动面版中选择打开保存：文件---保存或另存为b. 设置网页的页面属性修改---页面属性---然后设置（标题、背景、背景图像、文本等）c. 设置网页对象的颜色网页对象，如页面背景、文字、链接都经常需要设置颜色。
可在各自对应的属性面版中设置。
d. 网页文本的输入和属性设置文本可键入、导入、粘帖文字可设置字体、大小、颜色、格式等。
键入空格的方法：1、汉字输入法设置为全角方式，按空格键即可输入。
2、属性面版格式中：预先格式化的换行：ENTER、SHIFT+ENTER实例练习：1、输入以下文字书签夹在诗集里，落叶夹在深秋里。
喜悦夹在生活里，追求夹在人生里。
2、第一次设置格式为“无”，字体为“华文行楷”，字体颜色为“红色”，字号为“5号”，添加项目符号。
然后保存、预览。
3、第二次设置格式为“标题一”，字体为“楷体”，字体颜色为“蓝色”，字号为“5号”，添加项目符号，对齐方式为“居中”。
然后保存、预览。
比较两次设置的效果。
e. 网页图片的插入和属性设置插入图片，在对话框中选择图片。
（最好在建立站点时将欲用的图片素材复制到本地站点目录中）插入图像占位符，在图片准备好后再加入图片。
加入方法：1、双击图像占位符；2、点“属性面版”中的“指向文件”，拖到右边文件中要插入的文件处。
在图像属性面版中设置f. 插入层方法: 1、点击插入面版中的“描绘层”；2、在网页编辑器窗口中按住鼠标左键拖画出定位用的层；3、可以随意移动层的位置；4、可在层中插入图像、文字等。
g. *插入表格,用表格定位方法：1、先用鼠标点至欲插入表格的位置；2、点插入面版中的“表格”—“插入表格”；3、确定行数、列数后确定即将表格插入到选定位置了；4、可在表格中任何单元格里插入图像、文字等。
h. 建立超链接方法: 1、选中要建立超链接的文字或图像；2、点右键“创建链接”打开的窗口或在属性的链接栏里，填入链接的目标。
（如：本网站另一个网页，或外部网页如，或电子邮件如：mailto:zdhwangji@）3、在页面属性里修改链接的属性：修改--页面属性（链接、活动链接、访问过链接）二、制作实例1制作要求：（网页效果）1、页面的背景图片为bg0100.jpg;2、在合适的位置插入图片earth.gif;3、在网页中输入横排带阴影的文字“欢迎访问网络工程08级3、4班主页”4、将网页用index.htm为名保存在本地站点My site中。
操作步骤：1、按下面操作建立站点：先新建一个文件夹My site（下面举例中是建立在桌面上）。
●选择“站点”---“新建站点”命令；●在弹出的对话框中，在“站点名称”文本框中输入“应用实例1”，并点下一步；●按下图选择“否，我不想使用服务器技术”，然后点“下一步”；然后点“下一步”；●在“您如何连接到服务器？”选项里选择“无”，然后点“下一步”；然后点“完成”。
这样就已经建立好一个新的站点了，可以在Dreamweaver界面右边的“文件”窗口里看到新建立的站点信息。
5、2、在文件夹My site下创建文件夹images，以后此站点中用到的图像文件准备全部存放在images文件夹里；为方便，这里先把此例中需要用到的图片bg0100.jpg和earth.gif 事先存放在此images文件夹里了。
3、创建一个新网页：网页文件--- 新建--- 选“基本页”---创建；然后在网页编辑器窗口中，选择“修改”-—“页面属性”命令，在“页面属性”对话框中设置各项参数；在“标题”文本框中输入“实例1”；4、用index.htm为名保存文件到本地站点My site中，保存并按F12预览网页。
5、选择“插入”—“布局对象”—“层”命令，或单击工具栏中“布局”选项卡中的“绘制层”按钮，在工作区合适的位置上插入图片定位用的层Layer1，并将光标定位在层中。
6、“插入”--“图像”命令，或“常用”选项卡的“图像”按钮，在打开的对话框中选择文件earth.gif插入层中（若跳出“图像标签辅助功能属性”对话框，里面“替换文本”可填写“地球”或其他，或者不填），然后调整层及图像的位置至合适处；保存并按F12预览网页，若图像位置不合适，则调整到合适位置。
7、在网页合适位置插入第二个层Layer2，在层中输入文字“欢迎访问网络工程08级3、4班主页”，并设置文字属性中的字体、大小等，颜色为黑色；然后保存并按F12预览，若文字属性及位置不合适，则调整到合适为止。
8、选中层中的文字，将其复制到剪贴板中；在网页合适位置处插入第三个层Layer3, 并将文字粘贴到层Layer3中，将Layer3中的文字颜色改为白色，并适当调整层Layer3，使两个层中的黑白重叠文字产生阴影效果。
然后保存并按F12预览，若效果不满意，则调整到满意为止。
三、制作实例2要求：（网页效果）1、网页名为exa.htm，网页的背景图片为bg0040.gif，网页保存在My site文件夹中；2、在网页的顶部区域输入标题文字“人生的伴侣.知识的源泉”，用HTM样式“标题1”将其格式化，预览页面效果；3、在网页的中部区域插入导航条，导航条的6个按钮对应的图片是a1.gif, a2.gif, a3.gif, …..f2.gif, f3.gif, f4.gif（共有24个），每个按钮可以链接一个My site文件夹中的HTML 文件。
4、在网页的合适位置上插入图片t4_1.gif, t4-2.gif, t4-3.gif。
5、在网页的底部区域插入图片wyfy.jpg，并为该图片建立电子邮件链接；6、预览页面效果后，修改保存网页文件。
操作步骤：先将要用到的图片素材复制到My site文件夹里的images文件夹。
1、新建一个网页，并将新网页取名为exa.htm，保存在My site文件夹中；在网页编辑器窗口中，选择“修改”--“页面属性”命令，在“页面属性”对话框中设置标题为”应用实例2”, 背景图片为bg0040.gif；2、在网页的顶部区域合适的位置上输入标题文字“人生的伴侣.知识的源泉”，并选中这些文字。
在属性面板中，选择格式中“标题1”；3、在网页的中部区域合适的位置插入光标，选择菜单“插入”—“图像对象”—“导航条”命令，此时的网页编辑窗口中，会弹出“插入导航条”对话框。
在“项目名称”文本框中设置第1个按钮的名称为a；在下面按钮4个状态的文本框中分别输入images文件夹中的a1.gif, a2.gif, a3.gif, a4.gif 4个文件的路径和名称；在“按下时，前往的URL”文本框中输入该按钮链接的对象名称和路径（因此实例站点中只有index.htm 和exa2.htm两个网页文件，所以这里先填入index.htm来看看效果）。
选中“预先载入图象”和“使用表格”选项；选择“插入”下拉列表框中的水平方向设置导航条；4、点“插入导航条”对话框最上面的“+”后，重复步骤3，可设置其他5个按钮（这里为简便，后五个按钮只对“状态图像”进行设置，其他三种图像不再设置了），设置完成后，效果如下：5、在网页合适的位置上插入3个用于图片定位的层，并在不同的层中插入images文件夹中的图片文件tu1.gif, tu2.gif, tu3.gif；6、在网页的底部区域插入带图片wyfy.jpg的层，选中图片，在图片“属性”面板的“链接”文本框中，输入mailto:+EMAIL地址，建立电子邮件链接；7、保存并预览网页，调整各方面属性及位置直至满意。
最终效果如下：在预览中尝试点击“科学技术”按钮和“我要发言”图片。
四、制作实例3: 用表格布局定位应用实例要求：页面效果(1) 创建新网页名称为shu.htm, 网页的背景图片为本bg0040.gif, 网页文件保存在My site 文件夹中.(2) 在网页中插入7行6列的表格, 按照页面效果对网页中单元格进行合并调整，在表格上方合适位置的单元格里插入Flash文件shu.swt，在表格左边合适位置的单元格里分别插入图片文件t5-1.gif, t5-3. gif, t5-4. gif, t5-6. gif. 每个图片与My site 文件夹中的一个HTML文件或某一外部网站建立超链接,被链接的HTML文件在新窗口中打开，在表格右边合适位置的单元格中,插入逐帧动画文件shu-1.gif.(3) 预览页面效果后,保存网页文件.操作步骤：.(1) 新建一个页面,选择[修改]|[页面属性]命令,在[页面属性]对话框中设置背景图片为bg0040.gif, 并将网页取名为shu.htm保存在My site 文件夹中.(2) “插入”---“表格”, 在弹出的“表格”对话框中设置7行6列，表格宽度设为800像素，然后确定，则网页中插入了一个7行6列的表格。
(3) 选定第一行，然后点右键，在菜单中选“表格”—“合并单元格”；选定第五列的三、四、五行，然后点右键，在菜单中选“表格”—“合并单元格”；(4) 在表格中的第一行单元格中插入光标，选择菜单中“插入”—“媒体”—“Flash”，此时可在表格顶部的单元格中,插入Flash文件shu.swf。
若希望动画是透明的，则在属性中将“参数”设置入下图：(5) 在表格的第三行第二列、第四行第三列、第五行第二列、第六行第三列和第三行第五列的单元格中中分别插入光标，插入图像文件shu1.gif, shu3.gif, shu5.gif, shu6.gif, shu-1.gif。
将图像shu1.gif链接到exa.html页面（在下面图像shu1.gif的属性面板中“链接”项填入“exa.html”），将图像shu5.gif链接到一个外部的网站（比如链接到百度，在属性“链接”项中填入）。
按F12键预览页面后，保存文件。
下面是预览效果图：五、制作实例4: 框架集的使用要求：页面效果操作步骤：1、新建站点名为“框架集应用”的站点；2、“文件”--- “新建”--- 选“框架集”--- 选“左侧固定”--- “创建”，然后在弹出的“框架标签辅助功能属性”对话框中按“确定”。
3、“文件”--- “保存全部”：将框架集页面保存为index.htm，左侧框架页面保存为leftFrame.htm，右侧框架页面保存为rightFrame.htm。
