Dreamweaver8教程

Dreamweaver 8 基础教程基础教程 一 上网基础 学习做网页之前 我们首先要知道网页是什么 一般来说网页是用在网络上 的 htm 文件 通过网页可以很方便的实现网络资源的共享 上网分为三个步骤 1 输入正确的网址 1 在桌面上找到 Internet Explorer 双击打开 出现浏览器窗口 一般会自动进入微软的网站 2 找到地址栏一个长白条 里面有一串英文字母 后头是 转到 按钮 这 就是地址栏 3 在地址栏里头点一下鼠标左键 然后删除里面的字符 输入自己的的网址 网址一般是英文的以 http 打头 然后是一个冒号和两个斜杠 双斜杠 然后是 www 三 W 后面跟一个点 最后一般是 com 结尾 例如输入 输完检查一下 没问题就按一下回车键 或者点一下后边的 转到 按钮 这时窗口右上角的小图标就开始运动 也就是正在搜索 4 一切正常就会进入到百度搜索的首页 2 找超级链接 网页上的内容是一页一页的 一般都藏在一个叫超链接的后面 所以第二步 就是要找到超链接 超链接有三个特点 首先文字的颜色是蓝色的 非常醒目 其次文字下面有 一条下划线 便于查找 最关键的是当鼠标移过去以后 指针会变成手形 这一点很重要 找到超链接以后就可以鼠标左键单击 进入相应的内容了 3 后退按钮 看完一页后如何返回呢 在窗口的左上角有一个后退按钮 点一下 就可以回到上一页 这样就不会迷失方向了 二 启动程序 安装好以后 我们就可以使用它来制作自己的网页 这一节我们来学习如何运 行 Dreamweaver 1 新建文件夹 在 D 盘中给自己新建一个文件夹 文件名用自己名字的拼音字母 数量小于 8 个 以后自己的网页都存这里头 其他文件夹也可以 要求基本是名称是英文 尽量不要用空格汉字等那些非 标准字符 2 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 第一次运行会出来一个选择面板 选默认的 设计 点 确定 即可 3 然后出来一个激活的页面 如果有正式的序列号 点 继续 即可 也可 以选择下面的 30 天免费试用 正确输入序列号后 在出来的注册页面中 点 以后提醒 按钮即可 4 接下来开始载入 Dreamweaver 直到出现一个完整的窗口 这个页面称作 起始页 中间是新建项目 我们一般选第一个 Html 普通网 页 新建一个空白文档 三 创建网页 这一节我们来学习如何创建网页 在基础 0 课程我们认识了网页 下面我们通 过一个练习来看看怎样做一个网页 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 2 保存文件 1 点菜单 文件 保存 命令 弹出一个 另存为 对话框 在上边的保存 在长条中 找到 D 盘 在中间打开自己的文件夹 2 在下边文件名那儿把 Untitled 1 删除 改成 index 然后点右边的 保存 按钮 这儿注意两点 一个是保存位置在自己的文件夹 一个是文件名改成 index 3 回到窗口 这时候在标签上就有了文件的名称 然后在标签下 面的文档工具栏中间找到 标题 把标题改一下 这个网页内容是个人主页 把标题改成 青青草 4 这样我们就修改好了标题 同时按下 Ctrl 和 S 键 Ctrl S 组合键 保 存一下文件 标签上的星号消失 3 输入内容 1 在中间工作区里点一下鼠标 这是光标在左上角一闪一闪 提示输入内容 输入下面的三行内容 输完一行按一下回车键 输完按 Ctrl S 保存一下文 件 2 在标签下边的文档工具栏中 找到一个球体的预览图标 点一下出来 一个下拉列表 点第一个在 IE 浏览器中进行浏览 如果没保存 会出来一个提示 点 是 即可 看一下自己做的页面 稍稍简单些 后面我们会逐步学习网页的修饰 四 基础练习 这一节我们来做网页练习 标题改成跟内容相关 保存的文件名改成标题的 英文或拼音缩写 不要超过 8 个字母 保存到自己的文件夹中 内容自定 三行左右 在做下一个网页之前 先点菜单 文件 关闭 命令 然后点 文件 新建 再点右下角的创建命令 1 给自己的爸爸建一个网页 2 给自己的妈妈建一个网页 3 给自己的爷爷建一个网页 4 给自己的奶奶建一个网页 5 给自己的外公建一个网页 6 给自己的外婆建一个网页 7 给自己的哥哥建一个网页 8 给自己的姐姐建一个网页 9 给自己的弟弟建一个网页 10 给自己的妹妹建一个网页 五 新建站点 网页的内容除了文字以外 还有图片 音乐 动画等等 它们共同构成了一 个网站 把它们联系在一起的目录页称作 主页 下面我们通过一个练习来 学习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 启动后显示的是起始页 窗口右边和下边都有一个侧边栏 侧边栏中间有 个折叠按钮 2 创建新站点 在右边的侧边栏中间 在文件面板上找到一个蓝色的 管理站点 链接 点 一下 出来一个 管理站点 的对话框 里面现在还是空的 点右上角的 新建 按钮 选择 站点 命令 出来一个面板 1 这时候就开始进行站点的创建步骤 把中间站点的名字改为 青青草 第二行的站点地址不动它 点 下一步 2 在第二个页面中 直接点 下一步 进入第三页 这儿不需要服务器技术 3 这时出来保存位置的对话框 点一下右边的小包图标 找一下自己的文件 夹 在出来的文件夹浏览对话框中 找到 D 盘自己的文件夹 这时里面是空的 我们要新建一个文件夹 点一下右上角的小包 新建按钮 把文件夹的名称 改成字母缩写 打开这个新建的 qqc 文件夹 点右下角的 选择 按钮即可 注意这时候上 边的位置里显示的是 qqc 这时候返回到页面 中间显示的是我们刚才选择的保存文件夹 在开始的时候 直接输入也可以 点 下一步 继续 4 在中间的 本地 网络 上点一下 弹出一个下拉列表 选择第一个 无 点 下一步 继续 5 这时候就出来了 总结 页面 显示一下刚才的设置情况 点 完成 即 可 6 这样就新建好了一个站点 注意选择文件夹那一步可以直接输入进去 这时候 管理站点 面板里头就有了一个站点 点 完成 返回 在右边的 侧边栏中 也可以看到一个名为 青青草 的站点 由于是新建的 里面还是空的 后面我们会逐渐添加各个文件 六 编辑文字 网页的内容大部分是文字 文字的属性中包括 字体 字号和颜色等 下面 我们通过一个练习来学习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 3 点菜单 文件 保存 命令 把文件名改为 index 位置保存在上次建 的站点中 把标题改为 青青草主页 保存一下文件 下面输入内容 2 设置文字 1 输入下面的内容 输完一行后按一下回车键 也可以写自己的内容 输完 保存一下文件 2 下面设置文字格式 拖黑选中标题 青青草 在下面的侧边栏 属性面 板中找第二排的各个按钮 依次是字体 大小 颜色 3 按从左到右的顺序 把字体设为 黑体 大小设成 24 颜色设为绿 色 标题一般要醒目些 4 再拖黑选中下面的三行内容 在下面的属性面板中 把字体设为 新宋体 大小为 18 颜色为蓝色 5 如果字体太少可以 点列表下边的 编辑字体列表 添加其他字体 先在右边的列表中找到字体 再点中间的 按钮添加到左边 然后点上边 的加号按钮 即可添加字体 6 设好以后 在属性面板的第一排 样式 旁边会出来一个 STYLE2 这 是自动保存了字体 字号 颜色的样式表 下次可以直接用 不用再一个一个 设了 在颜色按钮的旁边 有一串颜色代码 用数字代表颜色 以井号 开头的 6 个 数字 七 对齐和背景 接着上一课 这一节我们来学习文字的对齐方式 以及背景色的设置方法 下面我们通过一个练习来学习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 对齐 3 以 duiqi 为文件名 保存一下文件 保存位置在我们建的站点文件夹里 2 输入内容 1 输下面的三行内容 输完一行后 按一下回车键 2 拖黑选中三行内容 在下边属性面板第一排中 找到 居中 按钮点 一下 这样文字就自动排到中间的位置 一般标题放在居中的位置 保存一下文件 3 背景色 1 默认的背景色是白色 我们可以改成其他颜色 2 在下边的属性面板中 找到 页面属性 按钮 点一下 出来一个面板 3 找到中间的 背景颜色 按钮点一下 在出来的调色板中 选择一个淡绿 色 点 确定 背景色就设好了 调色板的右上角有三个按钮 第一个是返回 默认颜色 第二个 是 拾取颜色 右边的三角按钮是一个菜单 保存一下文件 点 预览 按钮 看一下网页的效果 插入背景图片的方法 在背景颜色按钮下面的背景图片中选择一幅图片 八 插入图片 网页中除了文字以外 往往还有一些漂亮的图片 在 Dreamweaver 中如何插 入图片呢 下面我们通过一个练习来学习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 插入图片 3 点 文件 保存 命令 以 tupian 为文件名保存文件 保存位置在建立 的站点中 2 插入图片 1 在右边的侧边栏中间 在文件面板中找到 站点 青青草 瞄准敲右键 选 新建文件夹 命令 新建一个名为 images 的文件夹 2 这个 images 文件夹主要用来放图片的 把要用的图片复制到这个文件夹 中 也可以直接拖进去 图片的文件名必须是英文的 在右键菜单里有个 编辑 菜单 这里面有 拷贝 粘贴 删除 重命名 等命令 3 点常用工具栏中间的 插入图像 按钮 出现一个 选择图片 对 话框 中间有一个文件夹 images 注意上面的 查找范围 应该是站点的文件夹 中间是 images 文件夹 打开 它 选择刚才复制进去的图片 点 确定 即可 如果插入的图片不在站点内 会出来一个复制的提示 这时候点 是 就可 以了 4 保存一下文件 点预览按钮 看一下图片的效果 另外一种更简单的方法是 直接把右边站点里的图片拖到页面中 要插图片 的位置 也可以插入图片 九 背景音乐 注意 按 ESC 键停止音乐的播放 点刷新重新播放 这一节我们来学习如何设置背景音乐 放一首音乐在网页中 往往能给人带 来另外的心情 下面我们来看一个练习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 背景音乐 3 点 文件 保存 命令 以 yinyue 为文件名保存文件 保存位置在建立 的站点中 4 在右面侧边栏的站点中 新建一个文件夹 名称为 music 用来存放音乐 找到一首喜欢的歌曲 把它拖到这个文件夹里面 本课 images 文件夹中有一首 1001 mid 文件可以作为练习 2 插入背景音乐 1 在标签下面的 文档 工具栏中点一下 拆分 标签 窗口分成两部分 上边是代码 下边是文档 2 在上面的代码窗口中 找到标签 在它后面点一下鼠标 然后按一 下回车键插入一个空行 3 切换到英文输入法状态 输入 输入的时候会有提示 里面的单词是代码标签 双引号里面是参数值 1 表 示循环播放 在文件名的标签上敲右键选保存命令 保存一下文件 点预览按钮 听一下 背景音乐的播放 停止音乐可以按 ESC 键或点浏览器工具栏上的停止按钮 点刷新重新播放 十 插入音乐 这一节我们来学习如何在页面插入音乐 通过播放器来播放和控制音乐 常 见的音乐格式有 mp3 wma rm 等等 音乐一般只有声音 没有图像 有图像的 叫视频 下面我们来看一个练习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 背景音乐 3 点 文件 保存 命令 以 chryy 为文件名保存文件 保存位置在建立 的站点中 4 在右面侧边栏的站点中 找到上次新建的文件夹 music 找到一首喜欢 的歌曲 把它拖到这个文件夹里面 本课 images 文件夹中有一首 m1 文件可以作为练习 它是 wma 格式的 2 插入音乐 1 在标签下面的 文档 工具栏中点一下 拆分 标签 窗口分成两部分 上边是代码 下边是文档 2 在上面的代码窗口中 找到标签 在它后面点一下鼠标 然后按一 下回车键插入一个空行 3 切换到英文输入法状态 输入下列代码 输入的时候会有提示 里面的单词是代码标签 双引号里面是参数值 loop 是循环的意思 autostart 是自动播放 这儿都是 false 也就是不用的意思 保存一下文件 点预览按钮 点左边的播放按钮 听一下悠扬的乐曲 停止音乐可以点播放器上的停止按钮 要播放其他音乐 只要修改 src 标签 后面的音乐地址即可 十一 插入视频 这一节我们来学习如何在页面插入视频 常见的视频格式有 wmv avi mpg rmvb 等等 视频文件一般既有声音又有图像 因此也叫影片 下面我们来看一个练习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 插入视频 3 点 文件 保存 命令 以 chrshp 为文件名保存文件 保存位置在建立 的站点中 4 在右面侧边栏的站点中 新建的文件夹 video 用来保存视频文件 本课 images 文件夹中有一个首 zj 文件可以作为练习 它是 wmv 格式的 2 插入视频 1 在标签下面的 文档 工具栏中点一下 拆分 标签 窗口分成两部分 上边是代码 下边是文档 2 在上面的代码窗口中 找到标签 在它后面点一下鼠标 然后按一 下回车键插入一个空行 3 切换到英文输入法状态 输入下列代码 采用复制粘贴的方法即可 里面修改的地方主要是蓝色部分 影片地址 宽 度和高度 注意播放器有 70 的高度 因此整个高度是 190 影片实际大小为 160 120 在影片属性中可以查看到 保存一下文件 点预览按钮 点左边的播放按钮 看一下影片的效果 十二 插入表格 这一节我们来学习如何在页面插入表格 利用表格可以很好地布置页面 在 表格单元中可以放文字 图片 视频等等 每个单元都是一个独立的区域 下 面我们来看一个练习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 插入表格 3 点 文件 保存 命令 以 chrbg 为文件名保存文件 保存位置在建立 的站点中 2 插入表格 1 点菜单 插入 表格 命令 出来一个对话框 一般修改上面的两行 表 格的行列数和宽度 2 点 确定 即可插入一个 3 3 的表格 横着的是行 竖着的是列 每一 个小格叫单元格 第二列第三列 第二行 第三行 3 在表格的边框上点一下 可以选中整个表格 下面的属性面板中也出来表 格的各个选项 边框为 0 的时候不显示边框线 上边绿色的三角里头有一个命令菜单 可以进行相关的操作 4 在一个单元格里点一下以后 下面的属性面板显示单元格的选项 点菜单里的 修改 表格 命令 里头可以插入一个行 一个列等等 3 练习 插入一个 3 3 的表格 在每个格子里输入一个成语 保存一下文件 点预览按钮 看一下表格的效果 十三 插入 Flash 这一节我们来学习如何在页面插入 Flash 动画 Flash 动画格式有 swf 和 Flv 下面我们来看一个练习 1 启动 Dreamweaver 1 点击 开始 所有程序 Macromedia Macromedia Dreamweaver 8 2 在中间的 创建新项目 中点第一个 HTML 打开一个空白文档 把标题 改为 插入 Flash 3 点 文件 保存 命令 以 chrflsh 为文件名保存文件 保存位置在建 立的站点中 4 在右面侧边栏的站点中 新建的文件夹 swf 用来保存 Flash 动画文件 本课 images 文件夹中有一个首 wz 文件可以作为练习 它是 swf 格式的 2 插入动画 1 插入 swf 动画 点常用工具栏 插入图像按钮旁边的