dreamwaver网页设计第4篇.ppt

第4章网页设计与美化 第4章网页设计与美化 4 1制作框架网站4 2层与时间轴的应用4 3利用行为制作动态页面4 4制作表单页面 4 1制作框架网站 框架是一个比较早出现的HTML对象 框架的作用就是把浏览器窗口划分为若干个区域 每个区域可以分别显示不同的网页 使用框架可以非常方便的完成导航工作 而且各个框架之间决不存在干扰问题 所以在模板出现以前框架技术一直普遍应用于页面的导航 它可以使网站导航比较清晰 4 1制作框架网站 使用框架建设网站的最大的特点是使网站风格能够保持统一 一个网站的众多网页最好都有相同的地方 来做到风格统一 可以把这个相同的部分单独的制作一个页面 作为框架结构的各个子框架的内容给整个站点公用 通过这个方法达到了网站的风格的统一 4 1框架的基本操作 创建框架集和框架选择框架和框架集保存框架和框架集设置框架集属性设置框架的背景色在框架中设置链接 创建框架集和框架 框架有两部分组成 即框架集和单个框架 框架集是在一个文档内定义一组框架结构的HTML网页 它定义了一个网页中的框架数目 每个框架的大小 载入每个框架的网页源和每个框架的其他属性等 单个框架指在网页中定义的一个区域 每个区域可以分别显示不同的网页 创建框架集和创建框架是同步进行的 只要创建了框架就一定形成了框架集 同样 创建的框架集就一定具有框架 创建框架页面 使用 新建文档 对话框使用菜单命令使用布局面板创建框架页面 使用 新建文档 对话框 使用菜单命令 新建一个空白文档执行 插入 HTML 框架 命令 在弹出的子菜单中选择所需的选项 使用布局面板创建框架页面 以上方法既是创建框架集也是创建框架的 创建框架集 创建自定义框架集 可以执行 查看 可视化助理 框架边框 选择框架和框架集 在文档窗口的设计视图中 在选定了一个框架后 其边框被虚线环绕 在选定了一个框架集后 该框架集内的框架的所有边框都被虚线环绕 选择框架 按住Alt键选择框架 使用框架面板选择框架 选择框架集 单击框架的边框 单击 框架 面板中最外层的边框 保存框架和框架集 在浏览器中预览框架集前 必须保存框架集文件 以及要在框架中显示的所有文档 可以单独保存每个框架集文件和带框架的文档 也可以同时保存框架集文件和框架中出现的所有文档 保存框架集选择框架集之后 进行保存 只保存框架集的框架结构页面是不能完全显示的 还必须将每个框架文档进行保存 保存框架鼠标单击框架文档 进行框架页保存 保存框架集和框架 执行 文件 保存全部 将整个框架集保存为index html接着保存下面的各框架 设置框架属性 选定具体框架 利用 属性 面板进行设置 设置框架集属性 选定框架集后 利用 属性 面板进行设置 设置框架的背景色 将光标置于要改变背景色的框架中执行 修改 页面属性 命令 打开 页面属性 对话框进行设置 在框架中设置链接 应用一个框架的一个主要目的是实现框架之间的链接 浮动框架 天气预报浮动框架 4 2层与时间轴的应用 层是一种HTML元素 可以将它定位到网页的任意位置 层可以包含文字 图像或其他任何可在HTML文档正文中放入的内容 层最主要的特性是它可以悬浮在网页内容之上 换句话说 可以在网页上任意改变层的位置 实现对层的精确定位 正是由于层的这种特性 才利用层实现对网页中的内容进行精确定位 层可以被显示或隐藏 通过程序在网页中控制层的显示或隐藏 实现层上内容的动态交替显示 实现一些特殊的显示效果 层还可以被重叠 因此可以在网页中实现内容的重叠效果 层的基本操作 在Dreamweaver中可以直接在网页中插入层 通过 层 面板可以管理文档中的层 使用 层 面板可防止重叠 更改层的可见性 将层嵌套或层叠 以及选择一个或多个层 执行 窗口 层 命令 或按F2键 打开 层 面板 可以看到所有的层都显示在其中 要更改层的排列次序 可通过修改层的Z值来实现 单击Z列中的数字 为所选层输入新的Z值 即可改变层的排列顺序 层的基本操作 插入层设置层的属性选择层调整层的大小移动层 插入层 将光标置于要插入层的位置 执行 插入 布局对象 层 命令 设置层的属性 选择一个层 执行 窗口 属性 命令 打开 属性 面板来更改层的属性 选择层 选择层的三种方法是 将光标移动至需选择的层边框 光标变为 单击鼠标左键即可选择该层 在层的内部单击属性 显示层的选择柄 单击选择柄 即可选择层 如果选择柄不可见 可在该层中的任意位置单击以显示该选择柄 打开 层 面板 在 层 面板中选择层名称 即可选择该层 按shift可以选择多个层 调整层的大小 单击层的边框调整层的大小使用属性面板调整层的大小 4 3利用行为制作动态页面 一般说来 动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的 包含JavaScript脚本的网页 还能够实现用户与页面的简单交互 但是编写脚本既复杂又专业 需要专门学习 而Dreamweaver提供了 行为 的机制 虽然行为也是基于JavaScript来实现动态网页和交互的 但却不需书写任何代码 在可视化环境中单击几个按钮 填几个选项就可以实现丰富的动态页面效果 实现人与页面的简单交互 利用行为制作动态页面 行为的概念使用行为创建动感网页利用脚本制作特效网页 4 3 1行为的概念 行为是目前设计网页的主流技术之一 它强大的网页互动功能 使众多的网页设计者能发挥最大的思维空间 其效果更令网络上的众多浏览者感叹不已 行为是一些JavaScript程序 它由两部分组成 一部分是事件 另一部分是动作 动作是特定的JavaScript程序 只要事件发生 相应的程序就会自动运行 事件 事件用于指定选定的行为动作在何种情况下发生 4 3 2使用行为创建动感网页 交换图象弹出信息打开浏览器窗口显示 隐藏层检查表单设置状态栏文本转到URL创建跳转菜单 交换图象 在网络上看到过这样的网页 当鼠标移动到图象上 网页会自动变换成不同的图象 这种方法用来展示产品 效果挺不错 交换图象 选中文档中的图片 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 交换图象 选项 打开 交换图象 对话框 弹出信息 弹出信息动作显示一个带有JavaScript警告 弹出信息 动作不能控制JavaScript警告的外观 这是由访问者的浏览器决定的 如果希望对信息的外观进行更多的控制 可使用 打开浏览器窗口 行为 打开文档 单击窗口左下角的标签 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 弹出信息 选项 打开 弹出信息 对话框 注意 将事件设置为onload 表示载入页面时弹出该信息 打开浏览器窗口 使用 打开浏览器窗口 动作可以在一个新的窗口中打开URL 可以指定新窗口的属性 特性和名称 打开文档 单击窗口左下角的标签 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 打开浏览器窗口 选项 打开 打开浏览器窗口 对话框 打开浏览器窗口 对话框 显示 隐藏层 显示 隐藏层 动作显示 隐藏或恢复层的默认可见性 此动作用于在用户与网页进行交互时显示信息 检查表单 选中表单域 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 检查表单 选项 打开 检查表单 对话框 设置状态栏信息 设置状态栏文本 动作在浏览器窗口底部左侧的状态栏中显示信息 可以使用此动作在状态栏说明链接的目标 而不是显示与之关联的URL 打开文档 单击窗口左下角的标签 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 设置文本 选项 选择 设置状态栏文本 打开 设置状态栏文本 对话框 转到URL 利用转到URL动作可在当前窗口或指定的框架中打开一个新页 此动作对通过一次单击更改两个或多个框架的内容特别有用 还可以在时间轴中调用此动作在指定的时间间隔后跳到一个新页 打开文档 单击窗口左下角的标签或任意对象 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 转到URL 选项 打开 转到URL 对话框 转到URL 对话框 创建跳转菜单 跳转菜单是超级链接的一种形式 使用跳转菜单要比其他形式链接节省更多的空间 跳转菜单从菜单发展而来 浏览者单击并选择下拉菜单时会跳转到目标网页 跳转菜单开始 创建跳转菜单插入按钮 打开 行为 面板 单击面板上的 按钮 在弹出的菜单中选择 跳转菜单开始 选项 打开 跳转菜单开始 对话框 4 3 3利用脚本制作特效网页 自动显示当前日期 制作滚动公告 滚动新闻类 biyuanbody text align center td font size 12px line height 20px text align left marquee width 100 height 100 overflow hidden m height 20px m2 height 90px 基本上够用了吧 functionBYMarquee this Content 显示内容this Speed 20 上移速度this Object marquee容器对象this Pause true 是否停留this Start function varo this Object varPause this Pause varStop false varStop2 false o onmouSEOver function Stop Stop2 true o onmouseout function Stop Stop2 false varBodyHtml for variinthis Content BodyHtml push this Content i text varDv document createElement div Dv innerHTML BodyHtml join o appendChild Dv varDvHeight Dv offsetHeight while Dv offsetHeight 2 Dv innerHTML Dv innerHTML Dv innerHTML setInterval function if Stop o scrollTop if o scrollTop o scrollHeight o offsetHeight o scrollTop DvHeight o offsetHeight if Pause if o scrollTop o offsetHeight 0 Stop true setTimeout function Stop Stop2 3000 this Speed 实例1varmarquee1 newBYMarquee marquee1 Content link text 英法国防部证实两国核潜艇相撞 link text 中国赴欧采购清单敲定涉及金额150亿元 marquee1 Object document getElementById marquee1 marquee1 Start 实例2varmarquee2 newBYMarquee marquee2 Content link text 剑仙李横握锋利嚣张的地铜剑 左右晃动 link text 你的奴隶 剑仙李 奋起反抗 被你狠狠地教训了一顿 link text 我的奴隶Su 新武将在奴隶市场输给了金光灿烂 marquee2 Speed 10 marquee2 Object document getElementById marquee2 marquee2 Start 实例3varmarquee3 newBYMarquee marquee3 Content link text 关于封装的方法之间调用的问题求助 link text 如何用Javascript来删除浏览器的历史记录 link text 请高手帮忙破解一段代码 marquee3 Speed 50 marquee3 Pause false marquee3 Object document getElementById marquee3 marquee3 Start 销毁marquee1 marquee2