DM网页制作实验指导书

网页设计与制作指导教案第一部分 DREAMWEAVER 1 DREAMWEAVER 8 基础基础 安装好 Dreamweaver 8 中文版后 运行 选择 Dreamweaver 8 工作区后 将看到下面的画面 一 一 为菜单区 和其它的软件一样 该软件所有的操作命令都可以从这一个区内找到 举个 例子 选中该区编辑编辑 E E 中的参数选择参数选择 S S CTRL UCTRL U 其中 CTRL U 是该选项的快捷键 如下图 所示 网页设计与制作指导教案第一部分 DREAMWEAVER 2 在这里 你可以把自己的 DREAMWEAVER MX 设置为自己喜欢的样式 一般使用默认就可以了 如 下图 为了使用的方便 选中字体这一项目 把参数设置为上图所示的样子 因为默认的时候实在太 难看了 当然也可以选自己喜欢的 如果你浏览网页时使用的不是 IE 的话 请选中在浏览器在浏览器 中预览中预览这一项 以后制作网页的时候要用到 点一下那个 添加你使用的浏览器程序 二 二 是插入项目选择工具 插入面板 在 选中了某个项目 中会出现相应的插入项 目 下面详细介绍 选中常用常用这一项后如下图 锚点锚点用于网页中的定位 如网页的上 中 下等 图像点位符图像点位符是用于动态交换图片的 后面再 说 FireworksFireworks HTMLHTML 为用 Fireworks 软件切割出来的图片 交换图像交换图像为鼠标移上去时变为另一 图片 增强动感 表格数据表格数据可以将其它文件的数据转化为表格 插进网页 标签选择器标签选择器可以插 入其它不常用的 HTML 标签 网页设计与制作指导教案第一部分 DREAMWEAVER 3 在 中选中布局布局一项 共有标准视图标准视图和布局视图布局视图两种视图 如下图所示 在标准视图标准视图下 可以插入表格和在网页制作区画图层 切换到布局视图布局视图下 如下图 在布局视图布局视图下 可以在网页制作区描绘布局视图下的表格和单元格 描绘好之后 再切换到标标 准视图准视图后 可以转化为表格 这个比较好用 可以用来排版网页 后面将说到 在 中选中文本文本一项 可以对文本进行格式化 如下图 A A 可以对字体进行全面的格式 B B 可以将字体变为粗体 I I 为斜体 S S 为加强字体 这些比较简 单 可以自己一项一项慢慢试试 看看字体有什么变化 在 中选择表单表单 表格表格和框架框架两项后面再说 可以插入各种按钮 如下图 A 为表单 B 为文本框 C 为隐藏域 D 为文本区域 E 为多选框 F 为单选框 G 为单选按 钮组 H 为列表 菜单 I 为跳菜单 J 为图像域 K 为文本字段 L 为按钮 M 为标签 N 为 字段集 详细的使用方法后面将说到 在 中选中模版模版可以使用模版制作网页或自己创建模版 做起网页更加方便快捷 在 中选中字符字符可以插入一些特殊的字符 如 其中 BR 为换行符 快捷键为 CTRLCTRL ENTERENTER 此项与 ENTERENTER 有所不同 可以自己试试 其它的可以自己试试 在 中选中媒体媒体 可以插入 FLASH FLASH 按扭 FLASH 文本 Applet 等插件 网页设计与制作指导教案第一部分 DREAMWEAVER 4 在 中选中文本头文本头 将出现下面的画面 关键字关键字为网页的关键词 可以让搜索引擎搜索到 说明说明为网页的说明 如作者 介绍等 刷新刷新 可以设定多长时间后刷新网页或跳转到其它网页 基础基础为网页的基本链接 如插入一个目标为 blank blank 基础 网页中的一切默认链接都将打开新窗口 其它比较少用不再详细讲述 在 中选中脚本脚本 可以插入各种 Javascript Vbscript 或其它脚本 在 中选中 ASPASP 编辑 ASP 网页时用到 新手可不必理会 可以插入各种 ASP 编程里用到的 标签 在 中选中应用程序应用程序 编辑动态网页时候用到 新手可不必理会 可以对数据库进行操作 三 三 对 区的详解如下图 在上图中 点击带有向下小箭头的工具 会弹出更多选择 四 四 区为网页设计区 你所设计的网页或代码将出理在该区 五 五 区为属性区 属性面板 在该区可以对选中的对象进行一些设置 后面将有详细讲解 六 六 区如下图所示 详细的使用将在后面的章节详细讲述 网页设计与制作指导教案第一部分 DREAMWEAVER 5 网页设计与制作指导教案第一部分 DREAMWEAVER 6 操作举例题目 用 DREAMWEAVER 8 制作一个简单网页 实验操作步骤 1 打开 DM 8 点击 Insert 插入工具栏表格按钮 在弹出对话框中设置表格属性 2 设置行为 5 列为 1 宽度 width 为 700 像素 3 在表格第一行中输入文本的标题 4 点击菜单 window properies 修改 打开属性面板 5 鼠标点击表格第二行 在属性面板中点击 bg 背景后的颜色框 如图 设置表格背景为 深蓝色 代码为 003366 6 第三行为空 7 第四行输入文本内容 回车 点击 insert 工具栏图片按钮 选择一个图片插入表格中 8 设置居中 再回车输入几个文字 也设置居中 9 鼠标点击表格第二行 点击 Insert 工具栏图片按钮 插入一个 1 1 像素大小的透明图片 10 设置表格高度为 1 单元格成为一条直 11 写上网页的标题 12 完成本页制作 按 F12 键预览网页效果 网页设计与制作指导教案第一部分 DREAMWEAVER 7 实验二实验二 图文并茂图文并茂 实验目的 学会使用图像和直线的做法 一 直线问题 二 图像排列 网页设计与制作指导教案第一部分 DREAMWEAVER 8 三 图文环绕 四 项目列表 五 移动文字 网页设计与制作指导教案第一部分 DREAMWEAVER 9 实验三实验三 表格应用表格应用 实验目的 学会表格在网页中的用法 实验内容 3 1 图片的叠字问题 3 2 表格的背景 3 3 表格的边框 网页设计与制作指导教案第一部分 DREAMWEAVER 10 3 4 表格的直线问题 3 5 多样的表格 Label1 3 6 表格的随意拆合 网页设计与制作指导教案第一部分 DREAMWEAVER 11 3 7 随意表格 3 8 表格应用 网页设计与制作指导教案第一部分 DREAMWEAVER 12 实验四实验四 层的应用层的应用 实验目的 学会使用层的用法实验目的 学会使用层的用法 实验步骤 实验步骤 4 14 1层的定位层的定位 4 24 2浮动的图层浮动的图层 4 34 3双背景图片双背景图片 网页设计与制作指导教案第一部分 DREAMWEAVER 13 4 44 4LayerLayer 与与 iframeiframe 4 54 5层和时间轴层和时间轴 4 64 6窗口和菜单窗口和菜单 网页设计与制作指导教案第一部分 DREAMWEAVER 14 实验五实验五CSSCSS 高级应用高级应用 实验目的 学会实验目的 学会 CSSCSS 样式表的使用样式表的使用 实验步骤 实验步骤 5 15 1 CSSCSS 简单应用简单应用 5 25 2超链接式样超链接式样 网页设计与制作指导教案第一部分 DREAMWEAVER 15 5 35 3另类链接另类链接 5 45 4改变鼠标样式改变鼠标样式 5 55 5彩色滚轴彩色滚轴 5 65 6文字阴影文字阴影 网页设计与制作指导教案第一部分 DREAMWEAVER 16 实验六实验六互动效果互动效果 行为应用行为应用 实验目的 学会使用 Dreamweaver 内置行为设置 实验内容 互动效果一 在网页上经常看到这样的效果 当鼠标移到一张图片上的时候 原来的图片就切换为另一张图 片 鼠标移开后 又恢复原来的模样 是怎么做的呢 Dreamweaver 比 Frontpage 优胜的其中一 个地方是 Dreamweaver 能做出能具互动性的网页 现在 我们就利用 Dreamweaver 制作这个最 简单的互动效果 变换图片 准备两张大小相同的图片 一张是鼠标还没有移上的状态 另一张是鼠标移上去后的图片 例 如以下两图 点击对象面板上的 区选中常用 在 区可找到 看到如下的对话框 A 图像名称图像名称 Image Name 变换图片效果的标记名称 Dreamweaver 会自动分配 B 原始图像原始图像 Original Image 指定原始的图片 例如这里是左图 C 鼠标经过图像鼠标经过图像 Rollover Image 指定鼠标移上去后的图片 例如这里是右图 D 按下时 前往的按下时 前往的 URLURL 图片的链接网址 也可以是站点内的文件 点后面的浏览浏览可以选择 例如按照上图的设置完毕后 按下 OK 然后可以按 F12F12 F12 为预览网页的快捷键 预览一下效果 了 做出来的效果 小提示 细心的朋友会发现 做出来的链接不会弹出新窗口的 你可以选中刚做好的鼠标经过鼠标经过 图像图像 在属性面板里的目标目标 T T 选 blank blank 网页设计与制作指导教案第一部分 DREAMWEAVER 17 互动效果二 按下一按钮时 弹出一个问候的窗口 在插入插入面板 区 切换到表单表单 插入一个按钮 如遇到对话框 选否就行了 选中刚插入的按钮 在属性面板把标签 标签 L L 改为请点击我请点击我 展开 区 再展开设计窗口 切换到行为行为窗口 也可以从 区 菜单栏 里的窗口 窗口 W W 再选行为行为 其中 Shift F3 为该操作的快捷键 点一下行为窗口上的 再选弹出信息弹出信息 如下图 如果你发现弹出信息弹出信息这一项为灰色的 不可选时 不用急 先选显示事件显示事件 接着 IEIE 5 05 0 选 IEIE 5 55 5 或 IEIE 6 06 0 也是可以的 如下图 接着再按上一步的去操作 选中弹出信息弹出信息后会出现下面的对话框 网页设计与制作指导教案第一部分 DREAMWEAVER 18 填上你喜欢的消息消息 按下确定确定就 OK 了 再按下 F12F12 就可以看到你的大作了 下面的是做出来的效果 请点击我 在 Dreamweaver 中 更复杂的效果是通过一个叫行为行为 Behaviors 的功能实现的 我们又称为 事件的响应 通过网页元素的变化 如鼠标的移动 点击等 事件 Events 触发弹出窗口 关闭页面等 响应 Actions 就是一个事件的响应 而值得高兴的是 行为 的制作过 程几乎是傻瓜式的 下面讲述行为行为的用法 按 Shift F3 打开行为面板 上面已经说过 1 选取产生行为的元素 例如图片 带链接的文字 层等 如果需要在页面一载入就开始出现 效果 可以选择状态栏上的标签 弹出菜单在网页制作中是一种非常常用的菜单方式 这种菜单不但制作简单 而且效果也 很好 效果说明效果说明 本实例所要完成的效果是当鼠标移动到文字上时 就会弹出一个漂亮的菜单 如图 17 1 和 图 17 2 所示 弹出菜单在网页制作中是一种非常常用的菜单方式 这种菜单不但制作简单 而且效果也很好 网页设计与制作指导教案第一部分 DREAMWEAVER 19 创作思想创作思想 本实例首先在网页中输入一行文字 并对文字做一个特殊的超链接 然后利用 Dreamweave r MX 2004 自带的行为制作弹出菜单 操作步骤操作步骤 1 输入文字并设置超链接 在网页中输入文字 因为单独的文本文字是无法添加行为的 按照 Dreamweaver 中的约定 将文字的超链接设置为 javascript 才能够添加行为 所以 将文字的超链接设为 javascript 并执行 显示弹出式菜单 行为 如图 17 3 所示 网页设计与制作指导教案第一部分 DREAMWEAVER 20 2 设置菜单项和子菜单项 并为菜单设置超链接 然后安排好各个菜单的次序 如图 17 4 所示 网页设计与制作指导教案第一部分 DREAMWEAVER 21 3 设置页面元素 将菜单设置为垂直菜单 并分别设置菜单的字体 字号 对齐方式 一般状态和鼠标滑过时的状态 如图 17 5 所示 网页设计与制作指导教案第一部分 DREAMWEAVER 22 4 设置 高级 标签 在 高级 标签选项中设置菜单的延迟时间 以及是否显示菜单边 框 然后设置边框的宽度 颜色 阴影 高亮 如图 17 6 所示 网页设计与制作指导教案第一部分 DREAMWEAVER 23 2 按按钮选择一种响应 不同的元素 对应的响应也有所不同 并在随后的对话框中设 置此响应的属性 以下是可以供选择的响应说明 播放声音 可以为网页加入声音 打开浏览窗口 可以打开一个小窗口 和网上的弹出窗口一样 弹出信息 可以弹出一条警告信息 调用 JavaScript 调用网页中包含的 Javascript 程序 交换图像 实际上是交换图像 更改办容 可以改变已经插入的层的内容 恢复交换图像 把已经交换的图像恢复过来 检测插件 可以检测访问者的浏览器是否己安装浏览网页所必须的插件 检测浏览器 检测访问者使用的是什么类型的浏览器 检查表单 检验网页中的表单是否合法 网页设计与制作指导教案第一部分 DREAMWEAVER 24 控制 Shockwave 或 Flash 控制网页中包含的 Shockwave 或 Flash 转到 URL 跳转到其它页面 设定图像导航条 和交换图像差不多 设置文字 在特定的地方显示文字 显示或隐藏层 设置图层的显示或隐藏 时间轴 可以制作更多的动态交果 以后再说 跳转菜单 插入跳转导航菜单 跳转菜单开始 控制导航菜单跳到哪个页面 拖动层 设定图层是否允许拖动 预先载入图像 在网页装载前先预先载入图像 显示事件 设定显示 IE 或 NS 各个版本的事件 下载更多的行为事件 打开网页 去下载更多的事件 3 选择事件 Events 决定在什么情况下触发响应 常见的的事件有 onMouseOver 鼠标移到目标上 onMouseUp 按下鼠标再放开左键时 onMouseOut 鼠标移开时 onMouseDown 按下鼠标时 不需要放开左键 onClink 点击时 onDblClick 双击时 onLoad 载入网页时 网页设计与制作指导教案第一部分 DREAMWEAVER 25 onUnload 离开页面时 onResize 当浏览者改变浏览窗口的大小时 onScroll 当浏览者拖动滚动条的时 注意 当你找不到所需要的事件时 选显示更多事件 换取另一个浏览器的件事 或更高版本 浏览器的事件 网页设计与制作指导教案第一部分 DREAMWEAVER 26 实验七实验七互动效果互动效果 行为高级应用行为高级应用 实验目的 内置行为的高级设置 实验内容 一 浮动提示 1 首先插入一个两行三列的表格 第二行的三个单元格合并起来 边框为 0 并填充文字 文字 加上应该的链接 第二行的单元格插上一个图层 命名为 good 如下 2 选取 品味人生 四个字 按 Shift F3 打开行为面板 点击行为面板上的 选取设置文设置文 本本 再选设置层文本层文本 如下图 3 然后出现对话框如下 在新建新建 HTMLHTML 里填上需要的文字 然后按确 网页设计与制作指导教案第一部分 DREAMWEAVER 27 4 再点击一次重复刚才的步骤 不过这次 新建新建 HTMLHTML 里不填任何文字 然后确定 行为面 板变为下图 5 把第二次加进的行为 onMouseover 改为 onMouseout 点 onMouseover 旁边的 找到 onMouseout 后选中它 如果找不到 选显示事件显示事件 再选其它版本浏览器 这样就有 onMouseout 了 如 网页设计与制作指导教案第一部分 DREAMWEAVER 28 6 再选取网易网易两个字 操作和上面的步骤一样 只不过加入的文字不同 7 再选取搜狐搜狐两个字 操件同理 8 把网页保存下来 按 F2 看看你的大作吧 呵呵 也可以看看下面的例子 品味人生网易搜狐 提示 层是可以定义位置位置和大小大小 注意属性面板 的 如果在第 2 步的时候 设置的不是层文层文 本本 是状态条文本状态条文本 提示将出现在状态条状态条 此做法不必插入图层 二 网页中做动画 1 准备一张图片 2 了解一下 Dreamweaver MX 中的时间轴 网页设计与制作指导教案第一部分 DREAMWEAVER 29 在下图的方法中你可以找到时间轴 或者按下快捷键 ALT F9 Dreamweaver 的时间轴和 FLASH 中的时间轴是差不多的 我们的目的是让图片按时间轴上的设定 进行运动 3 点一下对象面板上的 在网页设计区画出一个图层 在图层里插入刚准备好的图片 调整 图层的大小 让其适合于图片 4 用鼠标选中图层 并将其拖到时间轴的的第 1 个小格 网页设计与制作指导教案第一部分 DREAMWEAVER 30 然后将第 15 那个格拉远一些 如拉到 40 这样可以让动画放得慢些 5 再次选中图层 并用鼠标再次把它拖到时间轴 如下图 用鼠标点一下时间轴上的第 55 点 并把它拉到第 80 点 用鼠标点一下时间轴第 40 那个格子 然后把目光移动属性面板属性面板 把层的左左 L L 加上 300 即让 其右移 300 像素 用鼠标点一下时间轴第 41 那个格子 然后把目光移动属性面板属性面板 把层的左左 L L 加上 300 即让 其右移 300 像素 请注意上图带有红色框处 原来为 73px73px 加上 300 后变为 373px373px 6 插进两个按钮 第一个的标签 标签 L L 为播放播放 第二个为停止停止 如下图 网页设计与制作指导教案第一部分 DREAMWEAVER 31 选中播放播放这个按钮 加上播放时间轴播放时间轴的动作 选中停止停止这个按钮 加上停止时间轴停止时间轴的动作 7 把时间轴上的循环循环勾上 网页设计与制作指导教案第一部分 DREAMWEAVER 32 大功告成了 按 F12 就可以看到你的大作了 网页设计与制作指导教案第一部分 DREAMWEAVER 33 实验八实验八框架和表单使用框架和表单使用 实验目的 学会使用框架和标单的使用 实验内容 一 框架使用 上网时候 经常看到点击左边 内容从右边出来之类的网页 其实就是框架的应用了 在插入面板 区 选中框加 将看到 点击需要的框架样式就可以插进去了 你还可以从菜单栏的文件文件 F F 选择新建新建 N N 建一框架 页面 比如点一下第一个 就出现了一个左右式的框架 中间的细线是可以拉动的 以便调整左右窗口的比例 点一下中间的细线 在属性面板将看到 其中边框边框 B B 处可以选 是 否和默认 即是否显示边框 如果你选显示边框的话 还可以设 边框的颜色 边框的颜色 C C 和边框的宽度 边框的宽度 W W 网页设计与制作指导教案第一部分 DREAMWEAVER 34 还有是左右框架的比例 在上图 我选了 80 像素 也就是说 左框架为 80 像素 剩下的是右 边框的宽度 当然还可以选百分比和相对的 如下图 框架的参数就说完了 接着你就可以把鼠标光标移到左边或右边设计网页了 值得注意的就是链接问题了 比如 在左边填上 链接测试链接测试 几个字 并加上链接 在属性面板的目标 目标 T T 处 将看到 在以前的链接里 只是看到 blank blank parent parent self self top top 几项的 现在多了 mainFramemainFrame 和 leftFrameleftFrame mainFramemainFrame 指的是主框架 也就是右边的 如果链接的目标选了 mainFramemainFrame 则点击链接时 内 容将在右边出现 leftFrameleftFrame 指左边 链接目标为 leftFrameleftFrame 则内容在左边出现 如果选 seft seft 刚在本窗口出现 选 parent parent 则在框架窗口出现了 也就是替换整个框架了 选 top top 将在上 级窗口出现 在本例子和选 parent parent 无差别 因为上级窗口就是 parent parent 二 表单使用 在第一章 已经有简单的说明了 如下图 网页设计与制作指导教案第一部分 DREAMWEAVER 35 A 为表单 B 为文本框 C 为隐藏域 D 为文本区域 E 为多选框 F 为单选框 G 为单选按 钮组 H 为列表 菜单 I 为跳菜单 J 为图像域 K 为文本字段 L 为按钮 M 为标签 N 为 字段集 当要在网页中输入内容时就要用到表单了 比如留言板 BBS 网上订单等 处理表单的内容 要用到网络编程 如 asp php cgi jsp 等 我们暂时不理会 下面学习制做 一个通过电子邮件发送的表单 1 点一下 A 插入一个表单 如下图 2 在表单内插入一个四行两列的表格 边框为 0 并填上文字 如下图 3 把光标移到表格的第一行第二列 点一下 B 插入一个文本框文本框 光标再移到表格第二行第二列 再插入一个文本框文本框 光标移到第三行第二列 点一下 D 插入一个文本区域文本区域 合并表格第四行的 两个单元格 点两下 L 插入两个按钮按钮 选中第二个按钮按钮 在属性面板把动作设为重设表单重设表单 R R 如下图 文本框文本框的参数说明如下 字符宽度字符宽度 可以理解为框的宽度 即为多少个字符的长度 最大字符数最大字符数 框可以填写字符的最大个数 类型类型 单行单行就是见到的样子 如果选多行多行就变为文本区域了 如果选了密码密码 填上去的内容将 以 号表示 初始值初始值 是表单最初的内容 按钮按钮的参数说明 网页设计与制作指导教案第一部分 DREAMWEAVER 36 按钮名称按钮名称 可以理解为名字 标签标签 就是按钮上显示的字 动作动作 提交