Dream-Weaver教案

授课班级 授课日期 授课题目 授课题目 第一章 开发环境的认识和本地站点的创建 目的要求 目的要求 掌握 Dreamweaver CS3 的工作界面 创建本地站点 使用文本进行格式化处理 重点难点 重点难点 创建本地站点 使用文本进行格式化处理 组织教学 组织教学 点名考勤 复习 引入新课 讲解理论知识 实例演示 指导学生练习 总结 总结复习导入新课 总结复习导入新课 Internet 相关知识 网络上的多种网页引入如何设计网页 提问 提问 1 什么是 Internet 2 网络上的网页都一样么 有什么不同 3 知道哪些编辑网页的工具 教学方式 手段 媒介 教学方式 手段 媒介 教学手段 讲授 多媒体 媒介 教材 授课内容 授课内容 第第 1 章章 开发环境的认识和本地站点的创建开发环境的认识和本地站点的创建 理论部分理论部分 理论理论 1 网站简述网站简述 讲解 网站的基本术语 网站网站 在因特网中有许多用于存放信息和发布信息的计算机 网站 就是存放于这些机器上的一 系列文档的组合 也称为 站点 网站中信息的发布用 网页 来实现 网站中的文档通过超 链接关联起来 利用浏览器可以从一个文档跳转到另一个文档 实现整个网站的浏览 通过 超链接还可以与因特网中任何一个网站关联起来 实现在整个因特网上的浏览 可以这样说 网站是因特网的灵魂 本地机与服务器本地机与服务器 浏览网站的用户所使用的计算机被称为本地计算机 启动浏览器 打开网页等操作 都 在本地计算机上完成 Internet 服务器是指提供 Internet 服务的计算机 如 WWW 服务 FTP 服务 Email 服务 Internet 服务器主要用于存贮 Web 站点和页面 浏览网页时只要在地址栏中输入网址按下回 车键 就能实现对网页的访问 不需要知道存贮该网页的服务器的实际位置 本地计算机与 Internet 服务器之间通过各种通信线路连接 以实现相互通信 本地站点与远端站点本地站点与远端站点 我们把存贮在本地机上的站点称为本地站点 把存贮在 Internet 服务器上的站点称为远 端站点 远端站点的网站文件和磁盘组织形式 一般都在本地机上做好并调试完毕后 上载 到 Internet 服务器 在本地机上构建站点框架 完成站点设计 进行站点测试 上传到 Internet 后便形成远 端站点 在本地机上对站点文档编辑 修改 管理 测试成功后 上传到 Internet 便实现对 远端站点的管理和修改 WWW 和超文本和超文本 WWW World Wide Web 是建立在 Internet 上的网络服务 称为 万维网 是全球性 交互 动态 多平台 分布式 图形信息系统 它遵循 HTTP 协议 Hypertext Transfer Protocol 超文本传输协议 使用加入图片 声音 动画 影视等内容的超文本 Hypertext 可以从一个从一个文件跳转到另一个文件 与世界各地站点相连 IP 地址和域名地址和域名 Internet 为每个站点分配一个惟一的地址 由 4 个从 0 到 255 之间的数字组成 数字之间 用圆点隔开 如 202 102 138 66 称为 IP 地址地址 IP 地址也称为 URL Unique Resource Location 译为 统一资源定位器 域名地址域名地址 由几个具有一定意义的英文单词组成 之间用圆点隔开 如 字母不区 分大小写 除字母之外还可以使用阿拉伯数字 减号和下划线 域名地址和 IP 地址代表同一个网站 访问一个站点时输入哪种地址都可以 用域名转换服务 器转换 因为 IP 地址在 Internet 中是惟一的 所以域名地址在 Internet 中也是惟一的 有些 域名后面带有本国域名 例如新浪网址 cn 代表该网站属于中国 超级文本传输协议超级文本传输协议 HTTP HyperText Transfer Protocol 即超级文本传输协议 它是 WWW 服务器使用的最 主要的协议 通过这一跨平台的通讯协定 在 WWW 任何平台上的电脑都可以阅读远方服务 器上的文件 该协议经常用来在网络上传送 WEB 页 当用户以 http 开始一个链接的名字时 就是告诉 浏览器去访问使用 HTTP 的 WEB 页 主页和网页主页和网页 网站主页是用户登陆到网站后看到的第一个页面 是最重要的一页 被主页调用的网页 称为子页 子页又可以调用其他子页 通过超链接实现 网站的中主页使用规定的文件名 不能随便起 不同的服务器对主页默认名称规定不相 同 其文件名多为 index htm 或 index html 或 default htm 或 default html 采用了动态页面作 为主页的网站 主页文件名后缀是诸如 asp php jsp 等 在浏览器中输入网址后 主机会自动执行默认主页 主页的一个重要的功能是导航 利 用超链接指引用户浏览本网站或其他网站的信息 静态网页静态网页 静态网页是一个 html 或 htm 文件 服务器传送 HTML 代码的文件到浏览器 再由浏览 器解释为可见的对象呈现给浏览者 动态网页动态网页 动态网页的格式通常有 3 种 1 ASP 2 JSP 3 PHP 动态网站 动态网页文件 数据库 网站建设的流程 1 网站的策划与效果图的设计 2 设计与开发 3 测试与发布 构成网页的元素 网页包括的主要元素有 文本 图像 动画 声音 视频 表格 表单等 1 文本 文本是人类最重要的信息载体和交流的工具 网页的主体一般以文本为主 在制作网页时 可以根据需要设置文本的字体 字号 颜色以及所需要的其他格式 文本在网页中的主要功能是显示信息和超级链接 文本通过文字的具体内容与不同的格式来 显示信息的重要内容 这是文本的直接功能 此外 文本作为一个对象 往往又是超级链接 的触发体 通过文本表达的链接目标指向相关内容 2 图像 图像在网页中可以起到提供信息 展示作品 美化网页以及体现风格等效果 图像可以用作 标题 网站标志 网页背景 链接按纽 导航条 网页主图等 网页中使用图像的格式主要 有 GIF JPEG PNG 等格式 3 动画 动画实质上就是动态的图像 在网页中使用动画可以有效地吸引浏览者的注意 由于活动的 对象比静止的对象更具有吸引力 因而 网页上通常有大量的动画 网页中使用较多的动画 是 GIF 动画和 Flash 动画 4 声音 声音是多媒体网页的一个重要组成部分 用于网络声音文件格式非常多 常用的是 MIDI MAV MP3 和 AIF 等 一般来讲 不要使用声音文件作为网页的背景音乐 那样会影响网页的下载速度 可以在网 页中添加一个链接来打开声音文件作为背景音乐 让播放音乐变得可以控制 浏览器的不同 处理声音文件的方式也会有很大的差异和不一致的地方 最好将声音文件添 加到 Flash 影片中 然后嵌入 SWF 文件以改善一致性 视频 在网页中视频文件格式也非常多 常见的有 RealPlayer MPEG AVI 和 DivX flash 等 表格 表格是一种用来控制网页中页面布局的有效方式 为了达到理想的视觉效果 通常都不显示 边框 我们所看到的网页如果具有横竖分明的风格 一般都是用表格来辅助布局的 许多设计人员使用表格对网页进行布局 Dreamweaver 提供两种方式来查看和操作表格 标 准视图和布局视图 在标准视图中 表格显示为行和列的网格 而布局视图允许创建者在将 表格用做基础结构的同时在网页上绘制 移动方框以及调整方框的大小 表单 表单是一种特殊的网页元素 表单的主要用途是 收集联系信息 接受用户要求 获得反馈 意见 设置访问者签名 让浏览者输入关键字去搜索相关网页 让浏览者注册会员或以会员 身份登录 登录的用户名 密码 搜索引擎等都是表单 表单由不同功能的表单元素组成 最简单的表单也要包含一个输入区域和一个提交按钮 站 点浏览者填写表单的方式通常是输入文本 选中单选按钮和复选框 以及从下拉列表框中选 择选项 根据表单功能和处理方式的不同 通常可以将表单分为用户反馈表单 流言簿表单 搜索表单和用户注册表单等类型 网页设计中遵循的准则 1 严格遵循策划方案 客户的需求 2 明确网站的定位 3 界面设计要注重友好性 理论理论 2 开发工具的介绍开发工具的介绍 讲解 常用的网页编辑工具介绍 Dreamweaver CS3 工作界面 Dreamweaver 标准工作界面大致可以分为以下几个区域 标题栏 菜单栏 文件 用来管理文件 插入 用来插入各种元素 修改 具有对页面元素修改的功能 文本 用来对文本操作 命令 所有的附加命令项 站点 用来创建和管理站点 窗口 用来显示和隐藏控制面板以及切换文档窗口 帮助 联机帮助功能 文档工具栏 文档 工具栏中包含按钮 这些按钮使您可以在文档的不同视图间快速切换 代码 视图 设计 视图 同时显示 代码 和 设计 视图的拆分视图 工具栏中还包含一些与查看文档 在本地和远程站点间传输文档有关的常用命令和选项 文档窗口显示当前文档 可以选择下列任一视图 1 设计视图 是一个用于可视化页面布局 可视化编辑和快速应用程序开发的设计环境 在该视图中 Dreamweaver 显示文档的完全可编辑的可视化表示形式 类似于在浏览器中查 看页面时看到的内容 2 代码视图 是一个用于编写和编辑 HTML JavaScript 服务器语言代码 如 PHP 或 ColdFusion 标记语言 以及任何其它类型代码的手工编码环境 3 代码和设计视图 可以在单个窗口中同时看到同一文档的代码视图和设计视图 当文档窗口有一个标题栏时 标题栏显示页面标题 并在括号中显示文件的路径和文件名 如果您做了更改但尚未保存 Dreamweaver 将在文件名后显示一个星号 插入 栏 插入面板集成了所有可以在网页应用的对象包括 插入 菜单中的选项 有常用 布局 表单 文本 HTML 应用程序 Flash 元素和收藏夹共 8 个二级菜单共 167 个按钮 插入面板组其 实就是图像化了的插入指令 通过一个个的按钮 可以很容易的加入图像 声音 多媒体动 画 表格 图层 框架 表单 Flash 和 ActiveX 等网页元素 文档窗口 文档 窗口显示当前文档 可以选择下列任一视图 设计 视图是一个用于可视化页面布局 可视化编辑和快速应用程序开发的设计环境 在该视图中 Dreamweaver 8 0 显示文档的完全 可编辑的可视化表示形式 类似于在浏览器中查看页面时看到的内容 代码 视图是一个用于 编写和编辑 HTML JavaScript 服务器语言代码以及任何其他类型代码的手工编码环境 代 码和设计 视图使您可以在单个窗口中同时看到同一文档的 代码 视图和 设计 视图 属性栏 属性检查器 属性面板并不是将所有的属性加载在面板上 而是根据我们选择的对象来动态显示对象的属 性属性面板的状态完全是随当前在文档中选择的对象来确定的 例如 当前选择了一幅图像 那么属性面板上就出现该图像的相关属性 如果选择了表格 那么属性面板会相应的变化成 表格的相关属性 状态栏 文档窗口 的底部的状态栏提供了与你正在创建的文档的有关其他信息 文档 窗口底部的状 态栏提供与你正创建的文档有关的其它信息 标签选择器显示环绕当前选定内容的标签的层 次结构 单击该层次结构中的任何标签以选择该标签及其全部内容 单击 可以选择文档的 整个正文 1 标签选择器 标签选择器显示环绕当前选定内容的标签的层次结构 单击该层次结构 中的任何标签以选择该标签及其全部内容 单击可以选择文档的整个正文 若要设置 标签选择器中某个标签的 class 或 id 属性 请右键单击 Windows 或按住 Control 键并单击 Macintosh 该标签 然后从上下文菜单中选择一个类或 ID 标签选择器是选择标签的首选方 法 因为它可以确保您始终准确地选择标签 2 手形工具 可以用来单击文档并将其拖入 文档 窗口 3 缩放 工具和 设置缩放比率 缩放 工具和 设置缩放比率 弹出式菜单可以让您为 文档设置缩放比率 4 窗口大小 弹出式菜单 该菜单仅在 设计 视图中可见 用来将 文档 窗口的大小调 整到预定义或自定义的尺寸 窗口大小 弹出式菜单的右侧是页面的文档大小和估计下载时间 浮动面板组 站点的目录结构常识 理论案例理论案例 1 创建创建 taobao 站点站点 完成案例 完成案例 创建创建 taobao 站点站点 涉及的知识点 涉及的知识点 使用向导方式创建使用向导方式创建 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的方法 通过在站点中组织文 件 可以利用 Dreamweaver 将站点上传到 Web 服务器 自动跟踪和维护链接 管理文件以 及共享文件 若要充分利用 Dreamweaver 的功能 需要定义一个站点 Dreamweaver 站点由三部分组成 具体取决于开发环境和所开发的 Web 站点类型 1 本地文件夹 是您的工作目录 Dreamweaver 将该文件夹称为 本地站点 此文件夹 可以位于本地计算机上 也可以位于网络服务器上 这就是为 Dreamweaver 站点所处理的 文件的存储位置 2 远端文件夹 是存储文件的位置 这些文件用于测试 生产 协 作等 具体取决于开发环境 Dreamweaver 在 文件 面板中将该文件夹称为 远端站点 一般说来 远端文件夹位于运行 Web 服务器的计算机上 3 测试服务器文件夹 是 Dreamweaver 处理动态页的文件夹 定义一个新的站点步骤如下 1 在 C 盘新建一个文件夹 打开 我的电脑 打开 C 盘 点鼠标右键 选择 新建 选 择 文件夹 选项 此时 C 盘下会出现一个新建文件夹图标 2 现在开始在 Dreamweaver 8 中把 web 这个文件夹定义为站点 打开 Dreamweaver 8 在 菜单栏上 点击站点菜单 选择新建站点 3 接下来需要给站点起一个名字 可以起任意一个名字 这里输入 个人主页 4 按下一步按钮 选择 是否使用服务器技术 因为实例建立的是一个静态站点 就选择 否 我不想使用服务器技术 5 按下一步按钮 因为要传到网上的虚拟主页空间 就要选择 编辑我的计算机上的本地 副本 完成后再传到服务器上 6 按下一步 选择要定义的本地根文件夹 这里选择 web 文件夹 点 选择 按钮 然后 单击 下一步 按纽 因为没有使用远程服务器 就选择 无 7 然后单击 下一步 8 按完成按钮 一个站点就定义好了 同样 我们还可以使用 站点定义 对话框中的 高级 设置来设置 Dreamweaver 站点 高级 设置使您可以根据需要分别设置本地 远端和测试文件夹 1 设置本地文件夹 本地文件夹是 Dreamweaver 站点的工作目录 此文件夹可以位于本地计算机上 也可以位 于网络服务器上 设置本地文件夹 可以按如下步骤 1 选择 站点 管理站点 将出现 管理站点 对话框 2 单击 新建 出现 站点定义 对话框 3 如果未显示 高级 设置 请单击 高级 按钮 站点定义 对话框的 高级 选项卡显示 本地信息 类别选项 输入 本地信息 选项 4 如果已经做好了设置远端服务器的准备 请跳过剩下的步骤 选择左侧的 远端信息 类 别 然后完成该对话框 5 单击 确定 即可完成站点的设置工作 2 设置远端文件夹 为 Dreamweaver 站点设置本地文件夹后 可以设置远端文件夹 根据开发环境的不同 远 端文件夹是您存储用于进行测试 协作 生产 部署等的文件的位置 设置远端文件夹的步骤同设置的步骤如下 1 选择 站点 管理站点 出现 管理站点 对话框 2 选择现有的 Dreamweaver 站点 如果没有定义任何 Dreamweaver 站点 请在继续前 创建一个本地文件夹 3 单击 编辑 出现 站点定义 对话框 4 如果未显示 高级 设置 请单击 高级 按钮 5 从左侧的 类别 列表中选择 远程信息 6 选择一个 访问 选项 7 单击 确定 即可 淘宝网本地站点淘宝网本地站点 相关理论相关理论 1 创建本地站点创建本地站点 讲解 创建本地站点 定义站点定义站点 通过站点定义向导创建站点 单击 窗口 文件 命令或按 F8 键 打开 文件 面板 单击该面板上的 管理站点 超链接 或从左侧的下拉列表框中选择 管理站点 选项 弹出 管理站点 对话框 单击 新建 按钮 在弹出的下拉菜单中选择 站点 选项 打开 站点定义 对话框 1 选 择 基本 选项卡 然后 按照提示进行选项设置 直接定义站点 选择 站点 新建站点 命令 弹出 站点定义 对话框 在对话框中选择 高级高级 选项卡 从选项卡 从 分分 类类 列表框中选择列表框中选择 本地信息本地信息 选项 然后选项 然后 按照提示进行选项设置 按照提示进行选项设置 站点的基本操作站点的基本操作 打开站点 如果要打开站点 先打开站点管理窗口 打开 显示 下拉列表框 如图 2 35 所示 选择需 要打开的站点 文件窗口中即会显示该站点文件夹和文件信息 复制站点 若要复制当前站点 可以使用文档窗口或站点面板中 站点 菜单的 编辑站点 命令 打开 编 辑站点 对话框 选中要复制的站点名称 单击 复制 按钮即可对当前站点进行复制操作 执行复制站点操作后 系统会自动复制一个所选择的站点 并且会为复制的站点加上一个 拷 贝 字样的站点名称 编辑站点 如果要更改当前站点设置 比如对站点进行修改站点名称 设置参数选项等编辑操作 可以 利用上面的方法打开 编辑站点 对话框 选中一个站点后单击 编辑 按钮 即可打开该 站点 定义为 对话框 选择 高级 选项卡进行站点编辑 删除站点 在 Dreamweaver 8 中删除一个站点非常容易 在弹出的 编辑站点 对话框中 单击 删除 按 钮就可以删除选中的站点 注意 此删除操作并未真正删除站点文件夹和其中的内容 而只是无法再用 Dreamweaver 8 管理该文件夹而已 如果需要再次用 Dreamweaver 8 管理该文件夹 只要用新建站点的方式 再次将该文件夹指定为站点根目录即可 在当前站点添加页面并保存 页面属性的设置 页面属性是指网页的一般属性信息 例如 网页标题 网页背景颜色 背景图像 超链接颜页面属性是指网页的一般属性信息 例如 网页标题 网页背景颜色 背景图像 超链接颜 色 跟踪图像等 色 跟踪图像等 1 设置网页标题及编码设置网页标题及编码 2 设置网页其他属性设置网页其他属性 1 外观外观 2 链接链接 3 跟踪图像跟踪图像 小结小结 什么是网页 网站 HTML 网站建设的流程有哪些 一般站点有哪三部分组成 理论案例理论案例 2 淘宝新闻页的制作淘宝新闻页的制作 完成案例 完成案例 淘宝新闻页的制作淘宝新闻页的制作 涉及的知识点 涉及的知识点 插入文本 文本格式化 设置段落 设置列表 相关理论相关理论 1 设置文本设置文本 讲解 讲解 插入文本插入文本 文字处理主要包括 输入文字 设置文字大小 设置字体 设置文本颜色 设置文本对齐方 式等 输入文字输入文字 1 输入文字 打开 Dreamweaver 8 0 之后 然后在需要插入文本的位置单击鼠标左键定位插入点 然后输 入文字 如果需要开始新的一段 按键即可 对应的 HTML 标签是 如果想换行 显示一段内容 可以按组合键 对应的 HTML 标签是 如果输入的文字超 出一行的范围 输入的文本将自动换行 2 输入连续空格 在 Dreamweaver 8 0 中一般只能输入一个空格 若要输入连续的空格时 可以采用下面几种 方法中的一种 执行菜单命令 编辑 首选参数 打开 首选参数 对话框后 选定 分类 栏中的 常规 选项 然后在右边编辑选项中勾选 允许多个连续的空格 复选框即可 将光标定位到需要输入多个空格的位置 切换到代码视图即 HTML 源文档中连续输入多个 或者单击插入工具栏文本分类中的 字符 对象 弹出下拉菜单 选择 不换行空格 选项即可 切换到中文输入法 设置为全角输入状态 然后在欲连续输入空格的位置按空格键 3 输入特殊字符 编辑文字编辑文字 1 设置文字标题与段落 设置文字段落与标题的方法基本相同 方法如下 1 将光标定位到应用段落样式或文本样式的文本中 或直接选取文本 2 单击属性面板中的格式选择框 在弹出的下拉列表中选择 段落 或 标题 切换到代码视图 我们就会发现 字符属性面板的 格式 列表框中的 段落 标题 1 标题 2 标题 3 标题 4 标题 5 标题 6 和 预先格式化的 等选项 分别对应 HTML 语言中 的 和标记 2 设置文字字体及大小 1 设置字体 2 设置字号 3 设置文本颜色 4 设置方本对齐方式 插入水平线插入水平线 水平线对于组织信息很有用 在页面上 可以使用一条或多条水平线以可视方式分隔文本和 对象 1 插入水平线 将光标移到要插入水平线的位置 执行菜单 插入 HTML 水平线 命令或者在 插入 栏 中 选择 HTML 然后单击 水平线 按钮 插入一条默认宽度和粗细的水平线 2 修改水平线 选定插入的水平线 打开属性面板 设置水平线的高度 宽度 对齐方式以及是否有阴影等 属性 3 设置水平线的颜色 选中水平线 然后单击属性面板中的快速标签编辑器按钮 打开编辑标签窗口 键入代码 如将水平线设为红色 键入代码 color red 插入更新日期 Dreamweaver 提供了一个方便的日期对象 该对象使用户可以以喜欢的格式插入当前日期 还可以选择在每次保存文件时都自动更新该日期 1 插入日期 星期和时间 2 插入更新日期 3 修改日期 要修改网页中已插入的日期 有两种方法 1 若没有勾选 储存时自动更新 则直接手动修改日期 2 若勾选了 储存时自动更新 则选中日期后在属性面板中单击 按钮 同样弹出 插入日 期 对话框 在其中编辑修改日期格式 文本格式化文本格式化 相关理论相关理论 2 设置段落设置段落 讲解 段落 段落对齐 段落缩进 列表 项目列表 编号列表 总结总结 网页构成元素都有哪些 如何创建本地站点 制作淘宝新闻页涉及到本章学到的哪些知识 上机部分上机部分 相关理论回顾 构成网页的元素有哪些 Dreamweaver CS3 工作界面包括哪几部分 如何设置文本格式化 上机目标上机目标 创建 paipai 站点 拍拍网新闻页制作 实练案例实练案例 1 创建 创建 paipai 站点站点 需求描述 创建 paipai 本地站点 实现思路 在建站前创建好站点根目录 使用高级方式创建本地站点和存放图像的文件夹 img 实练案例 2 拍拍商品展示页 拍拍商品展示页 实现思路 打开提供的素材 设置网页标题和属性 制作标题部分 制作文章内容部分 总结巩固 总结巩固 掌握 Dreamweaver CS3 的工作界面 创建本地站点 使用文本进行格式化处理 布置作业 布置作业 p31 2 5 参考资料 参考资料 教材 教学后记 教学后记 编写日期 2010 年 11 月 3 日 编写人员 朱小燕 授课班级 授课日期 授课题目 授课题目 第二章 表格的运用 目的要求 目的要求 会绘制简单的表格 会制作跨行 跨列的复杂表格 会使用表格设计较简单的页 面布局 重点难点 重点难点 会制作跨行 跨列的复杂表格 会使用表格设计较简单的页面布局 组织教学 组织教学 点名考勤 复习 引入新课 讲解理论知识 实例演示 指导学生练习 总结 总结复习导入新课 总结复习导入新课 表格是网页中常用的信息展示方式 是页面布局极为有用的设计工具 大部分网站中的主页 是用表格来布局的 表格可以控制文本和图形在页面上出现的位置 在设计页面时 往往要 利用表格来定位页面元素 通过设置表格和单元格的属性 可实现对页面元素的准确定位 合理地利用表格来布局页面 有利于协调页面结构的平衡 创建好表格后 可以在表格中输 入文字 插入图像 修改表格属性 嵌套表格等 提问 提问 1 什么是网站 网页 2 Dreamweaver CS3 界面主要包括哪几部分 3 如何创建本地站点 4 如何实现文本格式化 教学方式 手段 媒介 教学方式 手段 媒介 教学手段 讲授 多媒体 媒介 教材 授课内容 授课内容 第二章第二章 表格的运用表格的运用 理论部分理论部分 理论案例理论案例 1 淘宝公告栏淘宝公告栏 完成案例 完成案例 淘宝公告栏淘宝公告栏 涉及的知识点 涉及的知识点 插入表格 插入背景图像 嵌套表格 插入文本 相关理论相关理论 1 插入表格插入表格 讲解 讲解 表格的基本结构表格的基本结构 行 列 单元格 行 列 单元格 表格是用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具 表格由一 行或多行组成 每行又由一个或多个单元格组成 表格由三个基本部件组成 行 列 单元格 具有宽度 高度 间距 边框等属性 插入表格的方法 插入表格的方法 选择菜单 插入记录 表格 命令 选择插入栏的 布局 或 表格 类别中的 表格 按钮 在 Dreamweaver 中插入表格的方法如下 1 将光标定位到要插入表格的位置 2 执行 插入 表格 命令或单击 常用 面板上的表格按钮或单击 布局 面板上的表格按钮 打开 表格 对话框 3 在 行数 文本框中输入表格的行数 在 列数 文本框中输入表格的列数 在 表格宽度 文 本框中输入表格在网页中的宽度 可用像素和百分数表示 在 边框粗细 框中输入表格边框 的宽度 值为 0 时 表格线将隐藏起来 在 页眉 中指定表格标题的位置 一般选择 无 4 单击 确定 按钮 即可在光标位置插入一个表格 表格常用属性介绍表格常用属性介绍 设置 表格 对话框选项如下 行数 表格的行数目 本例为 1 列数 表格的列数目 本例为 2 表格宽度 以像素为单位或按以窗口宽度的百分比来指定表格的宽度 本例为 700 象素 边框粗细 表格边框的宽度 单元格边距 单元格边框和单元格内容之间的像素数 单元格间距 相邻的表格单元格之间的像素数 页眉 选项组中一共 4 个标题选项 无 左侧 顶部 两者 无 对表格不启用列或行标题 左侧 将表格的第一列作为标题列 以便为表格中的每一行输入一个标题 顶部 将表格的第一行作为标题行 以便为表格中的每一列输入一个标题 两者 在表格中输入列标题和行标题 标题 显示在表格外的表格标题 对齐标题 表格标题相对于表格的位置 摘要 表格的说明信息 相关理论相关理论 2 单元格的拆分与合并单元格的拆分与合并 讲解 讲解 单元格的拆分单元格的拆分 单元格的合并单元格的合并 表格由一个或多个单元格构成 单元格是指表格内的每个小格子 表格由一个或多个单元格构成 单元格是指表格内的每个小格子 在表格中可以插入文字 也可以插入图片等对象 在表格中直接输入文本时 当输入文本的 长度超过单元格宽度时 单元格会自动扩展增宽 使用方向键 可在不同的单元格之间进行切换 按 TAB 键可移到下一个单元格 按 Shift Tab 键可将光标移到前一个单元格 在最后一个单元格中按 Tab 键 会自动添行 也可以选择 文件 导入 表格式数据 菜单命令或选择 插入 表格对象 导入表格 式数据 菜单命令将在另一个应用程序 如 Microsoft Excel 中创建并以分隔文本的格式 其 中的项以制表符 逗号 冒号 分号或其他分隔符隔开 保存的表格式数据导入到 Dreamweaver 中并设置为表格的格式 嵌套表格是将新表格插入到当前表格的某一单元格中 可以像对任何其他表格一样对嵌套表 格进行格式设置 但是 其宽度由它所在单元格的宽度决定 在表格单元格中嵌套表格的基本做法如下 单击现有表格中的一个单元格 执行 插入 表格 菜单命令 在 插入表格 对话框中进行设置 插入嵌套表格前的表格 需要注意的是 表格不宜嵌套太多 最多三层 使用的嵌套越多 页面的浏览速度越慢 相关理论相关理论 3 表格美化格式的设置表格美化格式的设置 讲解 讲解 表格格式化的属性表格格式化的属性 嵌套表格的使用嵌套表格的使用 插入内容插入内容 小结小结 插入表格的方法有哪些 插入表格的方法有哪些 如何修改表格宽度和高度 如何修改表格宽度和高度 如何实现插入背景图像 如何实现插入背景图像 理论案例理论案例 2 淘宝首页布局淘宝首页布局 完成案例 完成案例 淘宝首页布局淘宝首页布局 涉及的知识点 涉及的知识点 插入表格插入表格 表格的格式化表格的格式化 嵌套表格嵌套表格 相关理论相关理论 1 页面布局的概述页面布局的概述 讲解 网页布局意义 网页布局原则 1 条理清晰 2 主次分明 3 色彩对比度适当 4 布局疏密适当 网页布局的步骤 1 构思 2 初步布局 3 填充内容 4 细化布局 内容 相关理论相关理论 2 常见的网页布局形式常见的网页布局形式 讲解 讲解 上左右 型布局 上左中右 型布局 对称布局 pop 布局 海报布局 不规则布局 相关理论相关理论 3 创建表格进行布局创建表格进行布局 总结总结 表格的用途主要是什么 制作表格页面的主要步骤什么 插入表格的两种方法是什么 表格布局的主要步骤有哪些 上机部分上机部分 相关理论回顾相关理论回顾 表格有哪些用途 表格的格式化包含什么 表格布局的应用 上机目标上机目标 拍拍首页布局 拍拍商品展示页 实练案例实练案例 1 拍拍首页布局 拍拍首页布局 需求描述 拍拍首页布局 实现思路 插入表格 应用拆分 合并和嵌套生成各个模块的布局 实练案例实练案例 2 拍拍商品展示页 拍拍商品展示页 需求描述 拍拍商品展示页 实现思路 插入表格 应用拆分 合并和嵌套生成各个模块的布局 总结巩固 总结巩固 会绘制简单的表格 会制作跨行 跨列的复杂表格 会使用表格设计较简单的页 面布局 布置作业 布置作业 p63 2 4 参考资料 参考资料 教材 教学后记 教学后记 编写日期 2010 年 11 月 3 日 编写人员 朱小燕 授课班级 授课日期 授课题目 授课题目 第三章 图像和多媒体的应用 目的要求 目的要求 在网页中编辑图像 在网页中插入背景音乐文件 在网页中插入 FLASH 文件 重点难点 重点难点 在网页中编辑图像 在网页中插入背景音乐文件 组织教学 组织教学 点名考勤 复习 引入新课 讲解理论知识 实例演示 指导学生练习 总结 总结复习导入新课 总结复习导入新课 图像通常用来添加图形界面 具有视觉感染力的内容或交互式设计元素 Web 页中通常使 用的只有三种 即 GIF JPEG 和 PNG 提问 提问 1 表格有哪些用途 2 使用表格布局的主要步骤 3 如何实现单元格的拆分与合并 4 如何实现表格的格式化 教学方式 手段 媒介 教学方式 手段 媒介 教学手段 讲授 多媒体 媒介 教材 授课内容 授课内容 第三章第三章 图像和多媒体的应用图像和多媒体的应用 理论部分理论部分 理论案例理论案例 1 灌篮高手灌篮高手 介绍页介绍页 完成案例 完成案例 灌篮高手 介绍页 涉及的知识点 涉及的知识点 插入图像 设置图像属性 编辑图像 使用图像占位符 相关理论相关理论 1 图像简介图像简介 讲解 讲解 图像在网页中的应用图像在网页中的应用 Logo Gif 动画 广告图像 按钮图像 产品图像 背景图像 网页上常用的图像类型网页上常用的图像类型 Gif 图像 Jpg 图像 Png 图像 相关理论相关理论 2 设置图像设置图像 讲解 讲解 插入图像 快捷键插入图像 快捷键 Ctrl Alt I 插入图像插入图像 在 Dreamweaver 中插入图像的基本方法是 1 将光标置于要插入图像的位置 在插入工具栏的 常用 类中单击 图像 按钮或选择 插入 菜单中的 图像 命令 打开 选择图像源文件 对话框 2 在对话框中显示有图像文件名 文件类型和图像源的路径 URL 每个网页都有一个唯一的 地址 称作统一资源定位器即 URL 我们选取存放在站点中的图像文件 然后单击 确定 按钮将显示 图像标签辅助功能属性 对话框 在 替代文本 和 详细描述 文本框中输入内容 单击 确定 按钮 即可将图片插入到指定区域 3 如果所选择的图像文件不在用户设定的当前站点 则将打开 Macromedia Dreamweaver 对 话框 提示是否将图像文件复制到根文件夹 单击 是 按钮 然后打开 复制文件为 对话 框 定位到站点中用于存放图像文件的文件夹 images 最后单击 保存 按钮即可 设置图像属性设置图像属性 在网页中插入图像后可以对图像的各种相关属性进行设置 若要设置图像属性 请执行以下 操作 1 图像名称及大小 使用缩略图下面的文本框设置名称 以便在使用 Dreamweaver 行为 如 交换图像 或脚本语言 如 JavaScript 或 VBScript 时可以引用该图像 而缩略图右侧标明了 所插入图像的大小 2 宽和高 以像素为单位指定图像的宽度和高度 当您在页中插入图像时 Dreamweaver 自动 用图像的原始尺寸更新这些文本框 在 宽 和 高 文本框中输入新值 实现图像大小改变 但却与图像的实际宽度和高度不相符 若要恢复图像原始值 可单击 宽 和 高 文本框右侧 的 恢复图像到原始大小 按钮重设大小 3 源文件 指定图像的源文件 单击文件夹图标以浏览到源文件 或者直接键入路径 4 链接 指定图像的超级链接 将 指向文件 图标拖到 站点 面板中的某个文件 或单击文 件夹图标浏览到站点上的某个文档 或手动键入 URL 5 对齐 可以将图像与同一行中的文本 另一个图像 插件或其它元素对齐 当图像与图像在 网页中对齐时 可由属性面板中的按钮 来确定 当图像与文本 插件或其它元素对齐时 可将图像视为一般字符 运用属性面板中的列表来确定 6 替代 指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代 文本 在某些浏览器中 当鼠标指针滑过图像时也会显示该文本 7 地图名称和热点工具 允许您标注和创建图像映射 8 垂直边距和水平边距 沿图像的边缘添加边距 以像素为单位 垂直边距 沿图像的顶部和 底部添加边距 水平边距 沿图像左侧和右侧添加边距 若图像和文字贴得太近 容易使人产 生压迫感 因此 适当调整图像间边距可以使浏览者在浏览网页时更加舒适 9 目标 指定链接的页应当在其中载入的框架或窗口 当图像没有链接到其它文件时 此选 项不可用 当前框架集中所有框架的名称都显示在 目标 列表中 也可选用下列保留目标名 blank 将链接的文件载入一个未命名的新浏览器窗口中 parent 将链接的文件载入含有该链接的框架的父框架集或父窗口中 如果包含链接的 框架不是嵌套的 则链接文件加载到整个浏览器窗口中 self 将链接的文件载入该链接所在的同一框架或窗口中 此为默认值 top 将链接的文件载入整个浏览器窗口中 因而会删除所有框架 10 低解析度源 指定在载入主图像之前应该载入的图像 11 边框 以像素为单位的图像边框的宽度 默认无边框 12 编辑 启动在 外部编辑器 首选参数中指定的图像编辑器并打开选定的图像 13 优化 打开 优化 对话框 使用 Fireworks 优化图像 14 裁剪 修剪图像大小 删除不需要的区域 15 重新取样 对已调整大小的图像重新取样 提高图片在新的大小和形状下的品质 16 亮度和对比度 调整图像的亮度和对比度设置 17 锐化 调整图像的清晰度 相关理论相关理论 3 编辑图像编辑图像 讲解 编辑图像 裁剪 亮度 对比度 锐化 相关理论相关理论 4 图像占位符的使用图像占位符的使用 讲解 讲解 图像占位符的简介 插入图像占位符的方法 替换图像占位符的方法 插入图像占位符插入图像占位符 在 Dreamweaver 中插入图像占位符的基本操作 1 将光标置于要插入图像占位符的位置 在插入工具栏的 常用 分类中选择 图像占位符 按 钮或选择 插入 菜单中的 图像对象 中的 图像占位符 命令 打开 图像占位符 对话框 2 在对话框中进行设置 1 在 名称 文本框中 输入要作为图像占位符的标签文字显示的文本 名称可有可无 必须 以字母开头 且只能包含字母和数字 不允许使用空格和高位 ASCII 字符 2 在 宽度 和 高度 文本框中 以像素为单位键入数字以设置图像大小 3 为图像占位符选择一种颜色 可以使用颜色选择器或直接输入颜色的十六进制值 如 FF0000 或输入网页安全色名称 如 red 4 在 替代文本 中 为使用只显示文本的浏览器的访问者输入描述该图像的文本 3 单击 确定 网页文档中即会出现图像占位符 插入插入 鼠标经过图像鼠标经过图像 鼠标经过图像就是指当访问者移动鼠标使鼠标指针经过图像时 图像变为另一幅图像 而鼠 标指针离开时 图像又恢复为原始图像 这种效果通常用于导航条 图像互动等 它由两幅 图像组成 一是首次载入时显示的图像即原始图像 二是鼠标经过后翻转的图像即鼠标经过 图像 在创建鼠标经过图像时应使用相同大小的两幅图像 如果这两个图像大小不同 Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的属性 小结小结 如何实现插入图像 编辑图像主要包括哪几种形式 如何使用 说出如何插入 替换图像占位符 理论案例理论案例 2 带音乐的带音乐的 灌篮高手灌篮高手 介绍页介绍页 完成案例 完成案例 带音乐的 灌篮高手 介绍页 涉及的知识点 涉及的知识点 插入背景音乐 控制音乐的属性 教师讲解实现思路教师讲解实现思路 相关理论相关理论 插入背景音乐插入背景音乐 讲解 讲解 常用音频格式介绍常用音频格式介绍 MP3 MIDI WMA WAV RM 插入背景音乐插入背景音乐 理论案例理论案例 3 灌篮高手灌篮高手 动画宣传页动画宣传页 完成案例 完成案例 灌篮高手 动画宣传页 涉及的知识点 涉及的知识点 插入 Flash 文件 编辑 Flash 文件 相关理论相关理论 设置设置 Flash 文件文件 讲解 讲解 插入插入 Flash 文件 快捷键文件 快捷键 Ctrl Alt F 编辑编辑 Flash 文件文件 总结总结 网页上常用的图像类型主要有哪几种 如何实现图文混排 如何直接对图像进行编辑 如何制作插入背景音乐的网页 上机部分上机部分 相关理论回顾相关理论回顾 如何设置图像属性 如何插入背景音乐 如何在网页中插入 Flash 文本 上机目标上机目标 拍拍网 变形金刚玩具宣传页 拍拍网 变形金刚 20 周年宣传页面 实练案例实练案例 1 变形金刚玩具宣传页 变形金刚玩具宣传页 需求描述需求描述 变形金刚玩具宣传页 实现思路实现思路 构思布局 通过插入文本 图像和背景音乐并进行设置来实现丰富的页面 实练案例实练案例 2 变形金刚 变形金刚 20 周年宣传页面周年宣传页面 需求描述需求描述 拍拍网 变形金刚 20 周年宣传页面 实现思路实现思路 插入文本 插入 Flash 文件并进行设置来实现文字与 Flash 文件混排 总结巩固 总结巩固 在网页中编辑图像 在网页中插入背景音乐文件 在网页中插入 FLASH 文件 布置作业 布置作业 p95 2 5 参考资料 参考资料 教材 教学后记 教学后记 编写日期 2010 年 11 月 3 日 编写人员 朱小燕 授课班级 授课日期 授课题目 授课题目 第四章 HTML 与 Dreamweaver 的代码视图 目的要求 目的要求 读懂 Dreamweaver CS3 代码视图中的代码 了解 HTML 文档的结构 认识常用 HTML 标记 重点难点 重点难点 设计视图与代码视图的关系 HTML 文档的结构 常见标记以及属性 组织教学 组织教学 点名考勤 复习 引入新课 讲解理论知识 实例演示 指导学生练习 总结 总结复习导入新课 总结复习导入新课 当畅游 Internet 时 透过浏览器所看到的网页 实际上都由 HTML 所构成 HTML 是创 建网页的基础语言 前面几章学习了使用 Dreamweaver CS3 制作网页 对么本章就要了解 Dreamweaver CS3 背后的 HTML 代码 提问 提问 如何设置图片属性 如何使用 Dreamweaver CS3 来调亮图像 如何使用图像占位符 如何在网页中插入背景音乐 如何在网页中插入 Flash 文件 教学方式 手段 媒介 教学方式 手段 媒介 教学手段 讲授 多媒体 媒介 教材 授课内容 授课内容 第四章第四章 HTML 与与 Dreamweaver 的代码视图的代码视图 理论部分理论部分 本章目标 本章目标 相关理论相关理论 HTML 语言简介语言简介 讲解 讲解 什么是什么是 HTML 语言 语言 HTML HyperText Mark up Language 即超文本标记语言或 超文本链接 标示语言 是目前网络 上应用最为广泛的语言 也是构成网页文档的主要语言 HTML 文本是由 HTML 命令组成的描述性文 本 HTML 命令可以说明 文字 图形 动画 声音 表格 链接等 HTML 的结构包括头部 Head 主体 Body 两大部分 其中头部描述浏览器所需的信息 而主体则包含所要说明的具体内容 HTML 文档源代码的查看方式 文档源代码的查看方式 1 在浏览器中查看源文件 2 在 Dreamweaver CS3 中的代码视图中察看源代码 在浏览器中使用 另存为 的方式将网页存到本机上 使用拆分视图相互对照进行研究 是非常有效率的一种自学方式 HTML 标记的组成标记的组成 HTML 语言规范语言规范 标记符 标记符 1 单标记 2 双标记 内容 3 属性 小结 小结 1 HTML 与 XHTML 的区别是什么 2 标记符分为几种 写出各自的格式 3 HTML 属性的格式及使用规则是什么 理论案例理论案例 1 淘宝网商品详细信息页淘宝网商品详细信息页 完成案例 完成案例 淘宝网商品详细信息页 涉及的知识点 涉及的知识点 1 文本相关标记 2 图像标记 3 嵌套表格 4 移动标记 相关理论相关理论 1 HTML 文档结构文档结构 讲解 讲解 HTML 文档结构包括 HTML 部分 HEAD 部分 BODY 部分 DOCTYPE 声明部分 声明部分 DOCTYPE 声明部分是网页中重要的一部分 但不在 HTML 文档范围内 相关理论相关理论 2 常见标记以及属性常见标记以及属性 讲解 讲解 文本相关标记 文本相关标记 1 标题标记 2 字体标记 3 段落标记 4 换行标记 5 图像标记 图像标记中常用的属性有 图像标记中常用的属性有 1 src 属性 该属性值指示引用图像文件的路径 2 alt 属性 该属性值用于在鼠标指向该图像时显示的文字说明 该属性的另一个作 用 3 是 如果浏览器中无法显示图像时 会在图像位置上显示该文字 4 height width 属性 这两个属性指示图像在网页中显示图像的大小 5 border 属性 使用该属性可以给图像加边框 默认为 border 0 移动标记移动标记 移动标记常用属性含义如下 移动标记常用属性含义如下 1 Direction 滚动方向 默认值为 left 2 Loop 滚动次数 3 Scrollamount 滚动速度 单位像素 s 默认为 5 像素 s 4 Width height 滚动区域 像素 5 Behavior 滚动方式 Scroll 循环 默认 side 一次 alternate 来回 总结并布置作业总结并布置作业