第八章：网页.ppt

Dreamweaver的使用 如何建立站点 主页的制作 表格的使用 图像的插入 超链接（图像地图） 创建表单页面 网页布局（框架、层） Css样式 时间轴、行为 脚本语言 如何建立网站 举例说明： 举例说明：主页设计： 举例说明：主页设计 举例说明：主页设计 举例说明：主页设计 举例说明：插入图像 利用图像作为网页背景： 通过页面属性中的设置 一般情况下需要插入背景图片 网页中插入图像的图像格式： GIF格式图像举例 JPEG格式图像举例 举例说明：表格设计 举例说明：主页的进一步设计 ： 举例1： 举例2： 表单 网页布局（框架和层） 涉及网页除了考虑网页中的文字和图像内容本身之外，还有一个重要的因素就是网页布局。 要想把网页中的文字、图像和动画等对象像在word中那样实现图文混排的效果，必须借助其他技术。 这种技术包括：表格、框架、图层 表格布局 表格布局 如何使用表格布局页面 表格单位的设置：像素和% 框架布局 认识框架集网页 框架网页的创建-步骤一 框架网页的创建-步骤二 框架网页的创建-步骤三 框架网页的保存 框架之间的超链接 框架之间的超链接 层的使用 层的基本操作 用鼠标拖动的方法画出一个任意尺寸大小的层 层的编辑 层的编辑 层的编辑 图层的属性设置（层的属性面板） 层编号 层的宽和高 层的背景图像 层的可见性 hidden：对象超过图层大小时，超过的部分将隐藏 使用面板管理图层 时间轴：与图层结合实现动画效果 如何制作时间轴动画 让图层中的对象沿路径动起来 让图层中的内容动起来（滚动看板） 让图层中的内容动起来（滚动看板） 利用层插入背景音乐： 使用行为 使用行为 使用行为举例 看下面两个简单的例子： 弹出一个新的浏览器窗口 OnLoad 打开浏览器窗口 定制网页浏览器状态栏中的显示文字 OnLoad 设置文本|设置状态栏文本 利用图层实现下拉菜单-步骤一 利用图层实现下拉菜单-步骤二 步骤三：调整多个图层的叠放顺序 补充：网页背景音乐处理 网页背景音乐处理 利用框架使网页背景音乐连贯 利用框架使网页背景音乐连贯 补充：应用图像作网页背景 补充：使用导航条 补充：设计各种网页部件 CSS样式：层叠样式表 用于（增强）控制网页样式，并允许将样式信息与网页内容分离的一种标记性语言。 CSS样式的使用共有三种方式： 嵌入式样式表 局部样式表 外部样式表 CSS样式：层叠样式表 在网页的代码中通常有如下标识： style type=text/css 　!-- 　　 　-- /style 嵌入式样式表： 例如，去除网页中超链接的下划线 执行“窗口|css样式”命令，弹出css样式面板 执行面板右下方“新建css样式” 自定义文字样式 执行“窗口|css样式”命令，弹出css样式面板 执行面板右下方“新建css样式” 定义外部样式 执行“窗口|css样式”命令，弹出css样式面板 执行面板右下方“新建css样式” 定义外部样式 知识点： 创建网站的步骤：熟悉DreamWeaver的界面 页面的设计 主要是页面的布局－－表格、框架、层 表单、图像的插入（相对路径和绝对路径）、超链接 文本的格式设置 网页的特效 时间轴、行为－－图层的移动、滚动看板 简单JavaScript使用 CSS样式 导航条 背景音乐 熟悉简单的HTML语言 指定行为动作： 当鼠标指向菜单项时， 隐藏的指定图层将被 显示，当鼠标移开菜单 项时，显示的指定图层 重被隐藏。 同理应用于下拉菜单图层 步骤二： 分别为各个菜单项 和下拉菜单图层指 定行为动作。 选中图层Layer7，直接用鼠标将其拖拽到相应层次。 尽量使用mid格式的音乐文件，避免产生慢速网页。 bgsound src=images/back.mid loop=-1 Dreamweaver本身没有提供设置背景音乐的命令，需要在代码视图中head…/head之间直接输入代码。 设置开启新窗口的超链接 如何让主页音乐贯穿整个网站？ 1. 把index.htm重命名为index-content.htm 2. 新建一个 “上方固定”框架网页 3. 下框架设置初始网页为index-conten.htm 4. 取消index-content网页的背景音乐设置 5. 保存框架集网页为index.htm,上框架网页为index-top.htm 6. 在index-top.htm网页中设置背景音乐 7. 设置上框架属性: 框架高度为1像素, 不显示边框。 选择适于作背景的图像文件 选择平铺效果具有整体感的图像作背景 交互式按钮