下载文档原格式
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://img.taocdn.com/s1/m/ceef96dd79563c1ec4da712e.png)
使用表格排列网页数据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与网页设计的关联性已经越来越紧密了，大多时候你要设计出优秀美观的网页，都离不开这些软件的帮助。
网页制作实例一、网页设计基础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。
