当前位置:首页 >> 其它课程 >> dreamweaver8网页设计教案

dreamweaver8网页设计教案


初识 Dreamweaver 8
课题:Dreamweaver8 简介及创建文档
一、教学基本内容 1、什么是网页和网站 2、网页的分类 3、网页中的常用术语 4、网页设计的相关知识 5、认识 Dreamweaver 8 6、Dreamweaver 8 的基本操作 7、Dreamweaver 8 工作界面介绍 二、课型:新授课 三、课时:1 个课时 四、教学重

点与难点 重点:什么是网页和网站 难点:1、网页的分类 2、网页设计的一般步骤 3、Dreamweaver 8 的基本操作 五、教学目的 1 、对 Dreamweaver 这个制作网页的工具及网页有一定的认识,激发学 生学习网页设计的兴趣 2、一定要学会建立一个空白网页 3、会对页面有一个简单的设置 六、教学过程 1、什么是网页和网站
1

(1)网页 网页是由 HTML(超级文本标识语言)或者其他语言编写的,通过 IE 浏览 器编译后供用户获取信息的页面,它又称为 Web 页,其中可包含文字、图像、 表格、动画和超级链接等各种网页元素。 (2)网站 网站就是一个或多个网页的集合。从广义上讲,网站就是当网页发布到 Internet 上以后,能通过浏览器在 Internet 上访问的页面 。 ? 门户网站 ? 职能网站 ? 专业网站 ? 个人网站 2、网页的分类
(1)按所处位置分类 按网页在网站中所处的位置可将网页分为主页和子页两类。

(2) 按表现形式分类 按网页的表现形式可将网页分为静态网页和动态网页。 3、网页设计的相关知识 (1)设计网页的原则 A、整体规划 B、鲜明的主题 C、善用图像 D、醒目的导航 E、及时更新 F、易记的网站名称 G、通用网页 H、动画适量

2

(2)网页设计的一般步骤 A、规划网站 B、收集整理资源 C、配置站点 D、创建页面 E、测试站点 F、发布站点 G、维护、更新站点 (3)网页制作的常用工具 A、网页设计软件 Dreamweaver 是目前使用最多的网页设计软件。 B、图像处理软件 制作网页图像的软件种类繁多,大多数网页设计人员选择的是 Fireworks 或 Photoshop。 C、动画制作软件 网页动画制作中最常用的软件非 Flash 莫属。 4、Dreamweaver 8 的基本操作 A、启动 Dreamweaver 8 B、新建空白 HTML 网页 C、保存网页文档 D、预览网页效果 E、退出 Dreamweaver 8

3

第一章 Dreamweaver8 概述
课题:Dreamweaver8 简介及创建文档
一、教学基本内容 1、Dreamweaver8 的工作界面 2、建立 html 文档 二、课型:新授课 三、课时:1 个课时 四、教学重点与难点 重点:熟悉 Dreamweaver8 工作界面中各个工具的作用 难点:1、各个面板的调用 2、建立一个 HTML 的网页 3、插处图像 五、教学目的 1 、对 Dreamweaver 这个制作网页的工具及网页有一定的认识,激发学生学 习网页设计的兴趣 2、一定要学会建立一个空白网页 3、会对页面有一个简单的设置 六、教学过程 1、引入 (1)为什么要用 Dreamweaver 而不用 Frontpage?
Dreamweaver 是 Macromedia 公司的出品,它以程序小、运行速度快、所制作网页代码少这 些优点,赢得了网页制作人员的喜爱。 (2)相关工具的介绍

因为这是第一节网页制作课,所以首先要简单介绍下制作网页的一些相关工具, 比如与 Dreamweaver 合称为网页三剑客的 Flash 和 Fireworks。 2、讲授新课
(1) Dreamweaver 的界面

4

a.文档窗口:主菜单、工具栏、底部启动条、文档编辑区 b.对象面板:标准、表格、表单、框架、特殊、文件廷冖隐藏、字符 c.启动面板:站点管理、代码检查、HTML 样式、CSS 样式、行为、历史记录、资源 管理 d.属性面板:随目前对象不同而内容不同

(2)创建 HTML 网页 (3)在网页中插入图像 输入文字以后, 插入图像, 并对图像设置对齐的方式, 使之与文字呈混排的状态。 3、巩固练习 练习使用界面中的各个工具 七、作业处理 根据本节所学的内容,课堂上练习创建一个空白网页,并且输入一段文字,在文 本的左边插入一张图片 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

5

第二章

创建与规划站点

课题:规划站点及创建静态站点
一、教学基本内容

1、站点规划概念 2、站点规划的方法 3、站点的组成 4、定义站点 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、站点组成 2、如何创建静态站点 难点:1、站点的定义 2、编辑、删除站点 五、教学目的 1、掌握建立静态站点的流程 2、掌握静态站点的基本操作 六、教学过程 1、复习引入 由上节所学习的建立 HTML 网页引出站点概念 2、讲授新课 (1)站点规划概念及方法 概念:所谓本地站点,就是指定本地硬盘中存放远程站点所有文档的文件夹 方法:规划网站一般需要从 3 个方面去思考,即网站的主题、网站的内容和 网站的对象。

6

(2)创建本地站点 站点组成:Dreamweaver 8 站点由 3 部分组成,具体内容取决于环境和所开 发的 Web 站点类型。包括本地文件夹、远程文件夹、动态页文件夹 定义站点: (01) 选择“站点”|“新建站点”选项, 或者选择“站点”|“管 理站点”选项, 在弹出的“站点管理”对话框中单击“新建”按钮, 弹出对话框, 在“基本”选项卡的站点名称输入框中输入所要创建站点的名称, 如图 2-5 所示

(02)输入站点名称后,单击“下一步”按钮,在弹出的是否使用服务器技 术对话框中,根据自己所制作网页的类型,确定是否使用服务器技术。在此制作 静态页面,因此不使用服务器技术,如图 2-6 所示。

7

(03)单击“下一步”按钮,在弹出的设置站点文件夹对话框中,选择或输 入一个本地文件夹作为“本地站点文件夹”,如图 2-7 所示。

(04)选择了本地站点文件夹后,单击该对话框中的“下一步”按钮,进入 设置是否与远程服务器相连的对话框,在这里选择“无”,设置为不与远程服务 器相连,如图 2-9 所示。

8

(05) 单击“下一步”按钮,便会显示在站点定义向导中所选择设置的详细 报告,如果感觉满意,单击“完成”按钮,完成本网站的创建,如图 2-10 所示; 否则单击“上一步”按钮重新修改各项设置。

(3)站点的基本操作 其基本操作包括编辑、复制、删除站点。 3、巩固练习 练习站点的建立,及其基本操作。 七、作业处理 在课堂上要求每一个同学在 F 盘下建立一个名为“我的站点”的文件夹,在 dreamweaver 中创建一个静态站点,将站点信息存放到我的站点文件夹中。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

9

课题:搭建动态网站服务器及创建动态站点
一、教学基本内容

1、安装 IIS 2、动态站点与静态站点的区别 3、搭建动态站点 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:动态站点与静态站点的区别 难点:1、虚拟目录的概念 2、动态站点的定义 3、站点测试 五、教学目的 1、学会安装 IIS,知道 IIS 的作用 2、学会创建虚拟目录 3、会创建动态站点 六、教学过程 1、引入 先提出静态站点的作用及限制性,引入动态站点的功能 2、讲授新课 (1)安装并启动 IIS(现场操作) (2)定义一个动态站点 步骤:<01>设置虚拟目录。 (1)在本地磁盘“C:\”下新建一个 site 文件夹作为本地站点的根文件夹。 (2)设置 web 共享。找到“C:\site”文件夹,选中并右击该文件夹,从弹出的快 捷菜单中选择“共享和安全”选项。 在打开的“site 属性”对话框中, 选择“Web 共享” 选项卡,如图 2-19 所示

10

(3)设置“编辑别名”对话框。选中“共享文件夹”单选按钮,在弹出的“编辑别名” 对话框中将“别名”设置为 site;在“访问权限”中选择“读取”;在“应用程序权限” 中选择“脚本”,如图 2-20 所示。最后单击“确定”按钮关闭对话框,便完成了定 义动态站点的准备工作。

<02>进入“高级”选项卡。 (1)选择“站点”|“新建站点”选项,选择“站点定义”对话框中的“高级”选项卡。 (2)从“分类”列表框中选择“本地信息”(默认选项)选项,如图 2-21 所示。

<03>设置“本地信息”的各参数(见图 2-22
11

<04>设置“测试服务器”的各参数(见图 2-23) 。

<05>显示结果。 (3)测试站点 <01>将 ch02\ test.asp 文件复制到 C:\site 文件夹中,并使用 Dreamweaver 8 打开 test.asp。 <02>单击浏览器中“预览/调试” 按钮,或者按 F12 键在浏览器中运行 test.asp 页 面。出现如图 2-25 所示的成功页面。若浏览器提示找不到服务器,则需重新搭 建 ASP 服务器。

12

3、巩固练习 练习站点的建立,及其基本操作。 七、作业处理 在课堂上要求每一个同学在 F 盘下建立一个名为”我的动态站点”的文件夹, 将其设置为虚拟目录,在 dreamweaver 中创建一个动态站点,将站点信息存放到 我的动态站点文件夹中。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

13

第三章 文本及其格式化
课题:输入文本及其格式化
一、教学基本内容 1、输入普通文本 2、插入符号、日期 3、使用项目列表 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、插入符号、空格和日期 2、使用项目列表 难点:1、项目列表 五、教学目的 1、掌握文本输入方法 2、掌握日期的插入 3、掌握项目列表的使用 六、教学过程 1、引入 首先例用一个已完成的网页,让学生来看别人的设置,由此引入文本的格式化。 2、讲授新课 (1)文本的输入 两种方法:a:直接在文档窗口中输入文本。即先选择要插入文本的位置,然后直 接输入文本。 b:在其他编辑器中复制已经生成的文本,然后切换到 Dreamweaver 8 文档窗口中,将选取插入点,然后选择“编辑”|“粘贴”选项。 (2)创建项目列表 类型:无序列表、有序列表、定义列表、目录列表和菜单列表。
14

(3)插入日期 3、巩固练习 练习各种项目列表的使用 七、作业处理 要求每一个同学建立一个名为 “我的网页” 的空白文档, 在网页中输入文字, 然后在右下角插入日期,在内容当中便用有序列表。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

15

课题:CSS 样式
一、教学基本内容 1 、演示并讲解 CSS 的应用 2 、 CSS 的基本概念 3 、 CSS 的特点 4 、 CSS 样式定义 5 、 CSS 常用属性与值 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、掌握 CSS 样式定义 2、掌握 CSS 常用属性与值 难点:1、掌握 CSS 样式定义 2、CSS 常用属性与值 3、能独立完成 CSS 样式的应用 五、教学目的 1 、掌握 CSS 的基本概念 2 、掌握 CSS 样式定义 3 、掌握 CSS 常用属性与值 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程, 在每个阶段演示完毕后, 让学生对此阶段进行巩固。讲解完毕后学生完成课后作 业,教师实施指导。 第一步:演示并讲解用 CSS 样式制作的网页。 第二步:分步演示并讲解 CSS 样式的基本概念。 第三步:讲解并分析 CSS 常用属性与值。 第四步:结合 CSS 样式的使用制作网页 第四步:课程小结。 七、作业处理

16

课堂上进行计论: 第一步:演示并讲解用 CSS 样式制作的网页。 第二步:分步演示并讲解 CSS 样式的基本概念。 第三步:讲解并分析 CSS 的知识点。 第四步:结合 CSS 样式的使用制作网页 第四步:课程小结。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

17

第四章 表格
课题:表格创建及设置
一、教学基本内容 1 、创建表格 2 、 添加表格对象 3 、自动套用表格格式 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表格 2、自动套用表格格式 难点:套用表格格式 五、教学目的 1 、掌握创建表格的基本方法 2 、会使用自动套用表格格式 六、教学过程 1、引入 网页需要进行排版,由报纸的排版引入网页的排版,由此提出表格的作用 2、讲授新课 (1)创建表格 步骤:<01>将光标停放在页面需要创建表格的位置。 <02>如果未打开“插入”工具栏,可以在文档窗口单击按钮。如果在文档窗 口中找不到该按钮, 可使用 Ctrl+F2 快捷键切换“插入”工具栏的显示或隐藏状态, <03>在“常用”标签中,单击“表格”按钮 <04>弹出“表格”对话框 输入要插入表格的行数,在此输入 2。 列数 输入要插入表格的列数,在此输入 3

<05>单击“确定”按钮
18

(2)套用表格格式 3、巩固练习 创建一个表格,练习格式的套用。 七、作业处理 在课堂上创建一个五行四列的表格,要求边框为 0,宽 150,高 254 的表格。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

19

课题:表格的应用
一、教学基本内容 1、设置单元格 2、表格的基本操作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:表格的编辑 难点:排序表格 五、教学目的 1 、掌握表格的基本操作 2 、能够熟练设置单元格格式 六、教学过程 1、引入 (1)文字的定位:空格、回车 (2) 图片的定位:垂直边距、水平边距 2、 表格 插入表格:插入(Insert)表格(table) ,或者在对象面板 行数(row) 列数(column)

边距(cell padding) :单元格中的内容与单元格边框之间的距离 间距(cell spacing) :单元格之间的距离 宽度(width) :可以是像素(pixel)或百分比为单位(percent) 边框(boder) : 属性面板:只有在选定整个表格时才出现表格属性 在表格中也可以通过右击, 调出的快捷菜单中选择表格来对表格进行设置清 除行高和列宽按钮 改变列宽单位按钮 背景颜色:
20

边框颜色:设置整个表格的格线颜色 背景图像: 3、 表格所对应的 HTML 代码 表格:[table][/table] 行:[tr][/tr] 列:[td][/td] 4、 表格的编辑 (1) 表格的嵌套 (2) 在网页中, 要进行复杂的定位, 一般需要用到嵌套表格。 不过, 一般不超过三层。 (2) 复制剪切粘贴 (3) 插入行、列,删除行列 (4) 合并单元格,拆分单元格 (5) 改变行、列、表格的大小:拖放,属性面板精确定义 (6) 表格模板:命令(command)格式化表格(format table) 七、作业处理 根据课本上的实训作出一个精美课程表网页 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

21

第五章 图像
课题:图像插入及属性设置
一、教学基本内容 1、图像的类型 2、插入鼠标经过图像 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:插入图像 难点:图像属性 五、教学目的 1 、掌握图像的插入方法 2 、掌握图像属性设置 六、教学过程 1、引入 网页的页面背景颜色和文本颜色在 HTML 代码中是如何表示的? RGB 方式表 示颜色:红绿兰, 0 表示最弱, 255 表示最强 一共可以表示: 256 ╳ 256 ╳ 256=16777216 种颜色 由于浏览器的关系, 只有 216 种颜色能在浏览器中正常显 示,多于这个范围的颜色,有的浏览器显示时就可能发生偏差,不能正常显示。 这个范围我们称之为网页安全颜色范畴 网页中运用颜色原则 :切忌采用过;背景颜色不要太深;要保持整个网页的色 调统一; 要围绕网页主题选择颜色 2、讲授新课 (1)网页中的图像格式 *BMP:位图格式 GIF: Graphics Interchange Format 可交换的图像格式 特点: 只支持 256 种颜色支 持透明效果、可以交错下载、可以实现动画效果、文件所占用空间小、不能支持 渐变色彩、更改图片大小要从原文件改起 JPEG:Joint Photographic Experts Group 联合摄影专家组文件格式 特点:支持 24
22

位图像、有损压缩。 (2)插入图像 3、巩固练习 练习设置图像的属性。 七、作业处理 在表格中插入一张背景图像。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

23

课题:制作地图网页及电子相册
一、教学基本内容 1、制作地图网页 2、电子相册 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:制作地图网页 难点:热点选择 五、教学目的 1 、掌握图像使用 2 、掌握图像的其它操作 六、教学过程 此节是实验课,实验步骤为: (01)启动 Dreamweaver 8,打开 ch05\SAMPLE01\MAP.ASP 文件。 (02)选中该文档中“丝绸之路示意图”图像。 (03) 在菜单栏中依次选择“窗口”|“属性”选项或按下 Ctrl+F3 组合键, 打开“属性” 面板,如果没有显示图像地图制作工具,单击“属性”面板右下角的扩展箭头, (04)在“属性”面板中的“地图”文本框中输入图像地图名称。 (05)创建图像地图(热区) ,可根据地图中不同的形状选择不同的热区工具, 在所选定图像上拖动鼠标指针,便可完成图像地图的创建。 (06)图像地图创建完成后,选中所创建的热区,打开“属性”面板。 在热点“属性”面板的“链接”文本框中输入链接文件的名称,或者单击文件夹图标 并通过浏览选择在用户单击该热点时要打开的文件。 在“目标”下拉列表中,选择用于打开该文件的窗口。 (07)在“地中海”创建一个矩形热区,在“替换”框中输入“关于地中海的论述”替 代文本,并设置好链接(链接到 DZH.ASP) 。 (08) 按照相同的方法分别为不同的路线或地名创建热区,并输入不同的链接和
24

替代文字, 保存并预览。当鼠标指针移到图像地图中时将显示“替换”框中的内容,如果设置 有链接,单击便可进入所链接的文档。 (9)完成创建。

25

第六章 框架
课题:框架集的创建及其基本操作
一、教学基本内容 1 、演示并讲解用框架制作的网页 2 、框架的基本结构 3 、框架的各种属性 4 、框架结构之间的链接 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、框架的各种属性 2、框架结构之间的链接 难点:1、框架的各种属性 2、框架结构之间的链接 五、教学目的 1 、掌握框架的基本结构 2 、掌握框架的各种属性 3 、掌握框架结构之间的链接 六、教学过程 1、复习引入 回忆:Frontpage 中的框架应用 2、框架的应用 重复出现在不同网页文档中的元素:网页标题、导航栏等等 3、建立框架 (1) 将对象面板切换到框架页(Frame) (2)插入不同的框架,一个区域对应于一个页面 (3) 在框架中打开原有网页: 文件 (File) à在框架中打开 (Open in Frame)
26

4、保存框架 (1) 选择文件(File)/保存所有框架(Save Frameset) ,先保存框架文 件,接着会出现提示,逐个保存框架中的网页 (2) 保存时注意名称 5、框架编辑 框架面板:窗口(Windows)à其它(Other)à框架(Frame)调出框架面 板 选定框架组: 单击整个框架组的边框;或在框架面板中单击整个框架的边 框 框架属性:名称、源文件,滚动否,是否可以调整大小,是否有边框,边 框颜色,边界宽度,边界高度等 拆分框架:按 Alt 键,拖动边框;修改(Modify)à框架页(Frameset)à 拆分左/右/上/下(split frame top/bottom/left/right) *注意区别:插入一个新的框架与拆分框架的区别 6、 框架所对应的 HTML 代码 框架组: 通过设置 rows 或 cols 来设定是横的还是竖的,是顶部还是底部 框架组属性:frameborder 框架是否有边框,border 边框的宽度多 少,framespacing 框架间距 框架项: 框架属性:src 指向的页面,name 框架名,scrolling 是否有

滚动条,noresize 不能由用户改变大小 七、作业处理 1、建立框架页面如图,菜单链接到不同的图片,单击菜单中的一项,图片在右 边的框架中打开 2、 建立左右型的框架,并在其中的左框架中插入上下型的框架 3、建立左右型 框架,并将左边的框架拆分为上下型 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

27

课题:创建电子图书
一、教学基本内容 利用框架制作电子图书网页 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:框架结构之间的链接 难点: 框架集 五、教学目的 1 、掌握框架的运用 2 、掌握框架结构之间的链接 六、教学过程 步骤: (01)打开或新建一个空白的文档,在该文档中创建一个 框架集。 (02)命名框架。将左列框架命名为 index、右列上部框架命名为_top、右列下 部框架命名为 main。 (03) 保存框架。 将框架集保存为 06A.asp 文档, index 框架保存为 06B.asp 文档, _top 框架保存为 06C.asp 文档,main 框架保存为 06D.asp,文档均保存在 ch06 文件夹下。 (04)设置框架的行或列。将 index 框架的列设置为 150 像素,_top 框架的行设 置为 90 像素。 (05)设置页面的配色方案。单击“属性”面板中的“页面属性”按钮,将 index 框 架的 06B.asp 文档的文本颜色设置为#669966,背景颜色设置为#FFCC99。 (06)将链接颜色按图 6-14 右侧图进行设置,然后单击“确定”按钮。 (07)定义样式。选择“文本”|“CSS 样式”|“新建”选项,将 index 框架的 06B.asp 文档的 tr 标签定义为宋体 9points。 (08)填充页面。在 index 框架 06B.asp 文档中输入如图 6-15 所示的文本并插入 一个 9 行 1 列的表格。

其中“休闲娱乐”文本为隶书 5 号字体, 颜色为#66CC00; 表格边框的颜色为白色;
28

单元格的高度为 30 像素,单元格的对齐方式为水平居中、垂直居中。 (09)在“页面属性”对话框中将_top 框架的标题设置为“标题栏”,将所有边界都 设置为 0 (10)将光标停留在_top 框架中,输入文本并插入 images 文件夹下的图像,其 中文本为 4 号宋体,颜色为#66CC00。 (11)设置链接。选中左边框架(index)中目录下的“考试作弊”文本,在“属性” 面板中的“链接”框中设置与之对应的笑话内容(WJ/wj6-1.asp)的链接。这时“目 标”框变为激活状态,从“目标”下拉列表框中选择链接的目标为 main。 (12)使用相同的方法设置其他“笑话”目录所链接的内容和链接目标,其他的链 接目标均为 main 框架。笑话目录各项和 WJ 文件夹中 wj6-1.asp~wj6-8.asp 是一 一对应的关系。 (13)指定框架源文件。选中 main 框架,在“属性”面板中的“源文件”文本框中 设置框架的源文件。单击旁边的文件夹,选择 WJ 文件夹中 wj6-1.asp 文件 (14)在文档窗口的菜单栏中选择“文件”|“保存全部”选项,将所有的框架进行保 存。 (15)按 F12 键便可预览该实例

29

第七章 页面布局视图的使用
课题:布局表格和布局单元格的基本知识及操作
一、教学基本内容 1、布局表格和布局单元格的基本知识 2、布局表格和布局单元格的创建 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:创建布局表格和布局单元格 难点:布局表格的使用 五、教学目的 1 、掌握布局的基本知识 2 、熟练运用布局表格和布局单元格 六、教学过程 1、引入 在第四章学习过了表格的布局,用表格与布局表格相比,看其特点,从而使学生 更加了解什么是布局表格和布局单元格。 2、讲授新课 (1)布局表格的基本知识 (2)布局表格和布局单元格的基本操作 选择布局表格: 须要执行下列操作之一: a:双击所绘制的布局表格中的 标志。

b:单击文档窗口左下角的<table>标签,如图 7-3 所示。 调整布局单元格的大小: 具体操作步骤如下: (01)选中要调整的布局单元格。
30

(02) 选择布局单元格边线上的调整手柄,拖动鼠标便可调整布局单元格的大小 移动布局表格和布局单元格: (01)选中要移动的布局表格或布局单元格。 (02)使用方向键便可移动布局表格或布局单元格了,但这样每次只能移动 1 像素的距离;如果是在按下 Shift 键的同时再利用方向键移动,每次可移动 10 像 素的距离。 设置布局宽度为固定宽度: 具体操作步骤如下: (01)选择要设置固定宽度的布局表格。 (02)在菜单栏中选择“窗口”|“属性”选项,打开“属性”面板。 (03) 在“属性”面板中选择“固定”单项按钮, 并在后面的文本框中输入一个数值, 在此输入 640,其单位在默认的条件下是像素。 七、作业处理 进入布局模式,练习布局与布局单元格 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

31

课题:制作完整页面
一、教学基本内容 利用布局制作完整页面 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:布局表格的创建 难点:布局单元格的使用 五、教学目的 1 、掌握布局表格的运用 2 、掌握布局单元格的作用 六、教学过程 步骤: (01)选中在布局表格中所绘制的布局单元格,在“属性”面板中将该布 局单元格的宽度也设置为 775 像素,高度为 68 像素。 (02)将光标停留在布局单元格内,选择菜单栏中的“插入”|“图像”选项, 在弹出的“选择图像源文件”对话框中,选择存放在 ch07\IMAGES 文件夹下的 BANER.JPG 图像 (03)选择图像文件后,单击“确定”按钮,便可在布局单元格内插入该图像文 件 (04)单击“绘制布局单元格”按钮 3 个布局单元格 (05)分别选中所绘制的布局单元格,并打开“属性”面板,将布局单元格的宽 度和高度分别设置为: (156、40) 、 (338、40) 、 (199、40) 。 (06) 在所绘制布局单元格 1 和 2 内分别输入文本“生活空间”和“音乐天地”, 并在布局单元格 3 内插入存放在 ch07\IMAGES 文件夹下的 01.GIF 图像 (07)在其下绘制 2 个布局单元格,分别选中并同时打开“属性”面板,将单元 格的宽度和高度分别设置为: (148、326) 、 (516、326) ,如 (08)在图 7-17 所示布局单元格(1)中绘制 4 个宽度为 136 像素,高度为 34 像素的布局单元格,并在其单元格内分别输入文本, ,在已经插入图像的布局表格下面绘制

32

(09)填充布局单元格内容。完成所对应的布局单元格文本的输入 (10) 最后将“布局模式”转化为“标准模式”。在“标准模式”中根据自己的 审美观进行调整,可为布局单元格的边框进行修饰

33

第八章 链接
课题:链接与路径介绍
一、教学基本内容 1、链接的基本知识 2、路径的基本知识 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:链接与路径的概念 难点:路径的理解 五、教学目的 1 、掌握路径的类型 2 、能够正确运用路径 六、教学过程 1、引入 在打开一个文件或插入一张图片的时候都会用到路径, 由此来引入究竟什么是路 径。 2、讲授新课 (1)URL 简介 URL(Uniform Resource Locator,统一资源定位符)主要用于指定欲取得因特 网上资源的位置与方式。一个 URL 的构成如下: [资源取得方式]://[URL 地址][port]/[目录]/?/[文件名称] (2)路径类型 要正确创建链接, 必须了解链接与被链接文档之间的路径。每个网页都有一个唯 一的地址,即 URL。常用的文档路径类型有 3 种: 绝对路径 : 绝对路径就是被链接文档的完整 URL, 包括所使用的传输协议 (对 于网页通常是 http://) 。
34

文档相对路径 : 文档相对路径指以原来文档所在位置为起点到被链接文档所 经过的路径。这是用于本地链接最适宜的路径。 根相对路径:根相对路径是指从站点根文件夹到被链接文档所经过的路径。 一个根相对路径以正斜杠开头,其代表站点根文件夹。 给出例子以区分这三种类型: 例:a: c:/website/img/photo.jpg(这是 photo.jpg 的绝对路径) b: c:/website/web/index.htm c:/website/img/photo.jpg(指出 photo.jpg 的相对路径)

七、作业处理 通过在地址栏中输入一个文件的地址来练习路径的使用。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

35

课题:创建链接
一、教学基本内容 1、创建锚记链接 2、创建空链接 3、创建下载链接 二、课型:讲授+实验 三、课时:2 个课时 四、教学重点与难点 重点:下载链接 难点:锚记链接 五、教学目的 1 、掌握链接创建的不同方法 2 、掌握锚记链接的创建 六、教学过程 1、创建链接 方法: (01)选择窗口中要链接的文本或图像。选择“窗口”|“属性”选项,打 开“属性”面板,并执行以下操作之一 a:单击“链接”框右边的“浏览文件”图标 ,如图 8-1 所示,在弹出的

“选择文件”对话框中浏览并选择一个文件。注意,在“选择文件”对话框 中的“相对于”下拉列表中,通常选择“文档”而不选择“站点根目录”。 单击“选择文件”对话框中的“确定”按钮,在“链接”框中将显示出被链 接文件的路径。 b:在“属性”面板的“链接”框中,输入要链接的文档的路径,如图 8-2 所 示。 (02)选择被链接文档的载入位置。在默认情况下,被链接文档在当前窗口 或框架中打开。要使被链接的文档显示在其他地方,需要从“属性”面板的 “目标”下拉列表中选择一个选项。

36

2、创建锚记链接 锚记链接(简称锚记)就是在文档中插入一个位置标记,并给该位置设置一个名 称。 步骤: (01)打开 ch08\LIANJIE.ASP 文件,把光标置于文档中“比输赢”文本的 右边(文档中需要设置锚记的地方) 。 (02)在文档窗口的菜单栏中依次选择“插入”|“命名锚记”选项 (03)在“命名锚记”对话框的“锚记名称”文本框中输入锚记名:mj1(注意, 所命名锚记是区分大小写的) 。 (04) 如果锚记标记没有出现在插入点,选择“查看”|“可视化助理”|“不可 见元素”选项,在所选择插入“锚记”的位置便会出现锚记标志,如图 8-16 所 示。 (05)同样的方法,分别在笑话栏下的“先生尿裤”、“大街上叫喊的人”文本 的右边插入锚记,并且分别命名为 mj2、mj3。 (06)在菜单栏中选择“窗口”|“属性”选项,打开“属性”面板。 (07)选中窗口左边“笑话集锦”下的“比输赢”文本,在“属性”面板中的 “链接”框中输入#mj1。 (08)同样的方法,分别创建“笑话集锦”栏下的“先生尿裤”、“大街上叫喊 的人”文本与#mj2、#mj3 的锚记链接。 (09)保存操作结果。 七、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

37

第九章 层与时间轴
课题:层的创建与设置
一、教学基本内容 1、层的创建 2、层的基本操作 3、层的属性 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:层的属性 难点:z-index、子层 五、教学目的 掌握层的相关操作,为动画设置打基础 六、教学过程 1、 复习引入 网页中的定位--表格 2、建立层 (1)菜单,插入(Insert)层(Layer) ,默认大小:200╳115 (2) 对象面板 3、层的意义 (1)可以将元素重叠 (2)可以用于精确定位网页元素 (3)可以通过应用时间线使层移动和变换,实现简单的动画效果 (4)网页和网页元素的可见或不可见可以通过层的显示和隐藏属性实 现 (5) 4、层属性 层可以转换成表格

38

(1)层编号(LayerID) ( 2 ) Z 轴 ( Z-index ) :控制层重叠时谁在前谁在后的问 题 (3)背景图像(Bgimage) (4) 显示(Vis) :默认(default) 、 (继承)inherit、 (可见) visible、隐藏(hidden)四个选项之一 (5)标签(Tag) :DIV、SPAN、LAYER、ILAYER,选 DIV (6)溢出(Overflow) :当层内容超过层大小的时候如何显示。显 示层内的全部内容 (visible) 、 只显示层尺寸以内的内容 (hidden) 、 不改变层大小、只添加滚动条(scroll) 、只有层不够大时才显示滚 动条(auto) (7) 剪裁(Clip) :指定层的哪一部分是可见的,输入的数值是

距离层的 4 个边界的距离 6、 子层 (1) (2) 在一个层中再插入一个层,后者就是前者的子层 子层不一定在父层里面

(3) 移动子层,父层位置不发生变化 (4) 移动父层,子层跟着变化,对父层的相对位置不变

(5)子层可以继承父层的可见性 7、层与表格的转换 (1)层转换为表格:修改---转换层到表格 (2)表格转换为层:修改----转换表格到层 七、作业处理 1、制作阴影字 2、用层将 5 个图片放置围绕一个图片 3、将上题结果转换为表格 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

39

课题:时间轴与其相关操作
一、教学基本内容 1、时间轴的概念 2、制作层的时间轴动画 3、给时间轴附加动作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:制作层的时间轴动画 难点:1、录制层的时间轴运动路径 2、添加附加动作 五、教学目的 掌握简单的动画设置 六、教学过程 创建时间轴动画 步骤: (01)在页面添加层,并在层中插入元素(如一幅图片或一些文字) ,把层 移到动画的起始位置。 (02)选择“窗口”|“时间轴”选项,打开“时间轴”面板。 (03)选择要制作动画的层。单击层标记或层边界,或用“层”面板选择层(注 意:在层内部单击,可以把插入点置于层内,但并不选中该层。当一个层被选中 时,层边界会显示出可调整大小的手柄) 。 (04) 直接把选定的对象拖入“时间轴”面板中;或者单击“时间轴”面板中的 按钮,选择“添加对象”选项。 (05)此时时间轴的第一个通道中将出现一个紫色条,即动画条,条中显示了层 的名称 Layer1,动画条两端的两个圆圈,即为时间轴的关键帧。 (06)单击第 1 个关键帧,将红色的播放头移到第 1 个关键帧,拖动被选中的层 到某一个位置,即确定动画运动的起始位置。 (07)单击动画条最后的关键帧标记(注意播放头也跟着移到该处) ,再把页面 上的该层拖到动画结束处。 之后,从动画起始位置到结束位置会显示一条线,这就是层的运动轨迹。如果没
40

有显示一条线,说明做法不对,需要重新开始。 (08)如果使动画层作曲线移动,选择动画条,按住 Ctrl 键单击,在插入点位 置添加一个关键帧; 或在动画条中间单击一帧,并从右键快捷菜单中选择“增加 关键帧”选项。 (09)移动层,使运动轨迹呈曲线状。 (10)单击“播放”按钮,预览页面上的动画 七、作业处理 根据书上的实例,创建一个网站广告。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

41

第十章 表单
课题:表单创建、对象及其属性
一、教学基本内容 1 、表单概念 2 、表单创建 3 、表单属性 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表单 2、掌握表单的应用 难点:1 、掌握表单元素的各项属性 2 、能独立制作完成常见的各种表单页面 五、教学目的 掌握表单创建方法 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程, 在每个阶段演示完毕后, 让学生对此阶段进行巩固。讲解完毕后学生完成课后作 业,教师实施指导。 第一步:演示并讲解注册网页。 第二步:分步演示并讲解、制作表单元素。 第三步:分析并制作网页。 第四步:课程小结。 七、作业处理 第一步:演示并分析网页中的相关效果。 第二步:分步讲解并完成网页中效果的实现。 第三步:分组讨论并修改网页

42

八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。

43

课题:制作调查表单
一、教学基本内容 1 、表单概念 2 、表单创建 3 、表单属性 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:1、创建表单 2、掌握表单的应用 难点:1 、掌握表单元素的各项属性 2 、能独立制作完成常见的各种表单页面 五、教学目的 能够熟练的运用表单中的各个属性,会制作表单。 六、教学过程 调查表单制作过程: (01)用 Dreamweaver 8 打开 ch10\SAMPLE02\FORM2.ASP 文件。 (02)打开“插入”工具栏,在“表单”标签下单击“表单”按钮 ,在页面中 创建一个表单。 03)在所插入的表单中插入一个 6 行 4 列、宽度为 600 的表格,其中表格的边框 粗线为 1。 (04)根据需要对表格进行编辑,并在表格内输入所要调查的项目。 (05)在表格内插入对应的表单对象,设置各表单对象属性(名称不做要求) , 。 (06)完成该网上调查表单的制作,保存文档 七、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。学生利用计算机进行实验操作。

44

第十一章 行为
课题:行为面板用法及基本操作
一、教学基本内容 1 、行为的基本知识 2 、事件的基本知识 3 、行为动作 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、行为面板的用法 2、行为动作 难点:行为的动作 五、教学目的 掌握行为面板的用法,并且会添加行为。 六、教学过程 1、行为的概念 行为是事件和动作的组合。动作是预先编写好的 JavaScript 脚本,可用来执行 指定任务。 事件则是由浏览器为每个页面元素定义的,是访问者对网页的基本操 作 2、行为面板的用法 (01)选择“窗口”|“行为”选项或按 Shift+F4 组合键打开“行为”面板, (02) 单击“行为”面板中的 按钮, 则可在出现的菜单中选择所需要的动作。

(03)选中“行为”面板中某一事件,单击 按钮便可从事件列表中删除所选择 的事件。 3、行为的基本操作 (1)添加行为 (2)修改行为 4、行为动作

45

在这里行为包含了二十多种动作,不再一一叙述。 5、巩固练习 对各种行为动作进行练习,看其效果。 七、作业处理 在网页中添加一些内容,然后添加一些行为。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机 上用 PPT 课件进行演示。学生利用计算机进行实验操作。

46

课题:行为动作及事件设置 一、教学基本内容 1 、事件的基本知识 2 、行为事件的设置 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、行为面板的用法 2、事件的种类 难点:对事件的理解及掌握 五、教学目的 掌握各个事件的作用。 六、教学过程 检查表单步骤: (01)用 Dreamweaver 8 打开光盘中的 ch11\SAMPLE02\FORM.ASP 文件。 (02)在文档的标签栏中选中<form>标签。选择“窗口”|“行为”选项,打开 “行为”面板。 (03)在打开的“行为”面板中单击 按钮,在弹出的行为菜单中选择“检查表 单”选项。 (04) 在“检查表单”对话框中,从“命名的栏位”中选择要验证的表单对象文 本域的名称, “值”是用来确定某个文本域是否可以空缺,“可接受”栏中用来 设置文本域所要输入的文本类型以及对文本的限制,将 E-MAIL 文本域设置为必 填内容、电子邮件地址。最后单击“确定”按钮返回。 (05)更改行为的触发事件。选择“行为”面板中的 按钮,在弹出的菜单中, 将行为事件设置为 onSubmit,即触发点为提交表单时触发,然后关闭“行为” 面板。 (06)保存文档,按 F12 键测试效果。 5、巩固练习 对各种事件进行练习,看其效果。

47

七、作业处理 制作一个弹出式菜单。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

48

第十二章 制作动态页面
课题:构建动态页面、数据库链接
一、教学基本内容 1、建立 ACCESS 数据库 2、创建 DSN 3、定义数据库连接 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、ACCESS 数据库 2、创建 DSN 难点:定义数据库连接 五、教学目的 能够掌握配置数据源的方法,正确连接数据库。 六、教学过程 设定 DSN 的方法: (01)启动控制面板,双击“管理工具”下的“数据源(ODBC)”图标。 (02)在弹出的“ODBC 数据源管理器”对话框中,选择“系统 DSN”选项卡,单 击“添加”按钮。 ( 03 ) 在 弹 出 的 “ 创 建 新 数 据 源 ” 对 话 框 中 , 选 择 数 据 库 的 驱 动 程 序 为 Microsoft Access Driver(*.mdb) ,单击“完成”按钮。 (04)在弹出的“ODBC Microsoft Access 安装”对话框中,“数据源名”文本 框中输入 dwmx ,单击“数据库”栏中的“选择”按钮,选择网站根目录中的 DWMX.MDB。单击“确定”按钮。 (05)这时会发现系统数据源名称中已经多了一个 dwmx,这就是接下来要使用 的数据库。 (06)单击“确定”按钮,完成对 DSN 数据源的创建。
49

定义数据库连接的方法: (01)在 Dreamweaver 8 面板组中,打开“应用程序”面板组。选择“数据库” 面板, (02) 在“数据库”面板中单击 按钮,在弹出的快捷菜单中选择“数据源名

称”选项,弹出“数据源名称(DSN)”对话框。 (03)在“连接名称”文本框中输入 dsdwx。 (04)单击对话框中的“测试”按钮来测试是否可以跟数据库正确连接。 (05)单击“确定”按钮,再单击“数据源名称(DSN)”对话框中的“确定” 按钮,便完成数据库连接的设定。 七、作业处理 随堂练习数据源的连接。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

50

课程:注册、登录页面、服务器端验证 一、教学基本内容 1、客户注册页的基本知识 2、客户登录页的基本知识 3、登录验证 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:1、记录的插入 2、用户身份验证 难点:记录集 五、教学目的 掌握插入记录的方法,能够正确运用记录集。 六、教学过程 注册页面的创建步骤: (01)启动 Dreamweaver 8,打开 ch12\Register.asp 文件 (02)检查注册表单。选择新客户注册页面中的注册表单。按 Shift+F4 组合键 打开“行为”面板,在“行为”面板中单击 按钮,从弹出的菜单中选择“检查 表单”选项,弹出“检查表单”对话框。 ( 03 )单击“确定”按钮,完成检查表单设置,并将该行为的事件设置为 onSubmit。 (04)插入客户注册信息到数据库表中。 (05)使用“检查新用户名”服务器行为,防止客户注册的用户名重复。在“服 务器行为”面板中单击 按钮,从弹出的快捷菜单中依次选择“用户身份验

证”|“检查新用户名”选项,在弹出的“检查新用户名”对话框中做如书上的 设置。 (06)单击“确定”按钮返回。 (07)对完成的注册页面进行保存,便完成了注册页面的制作。 登录页面的建立: (01)打开 ch12\LOGIN.ASP 文件。
51

(02)选择“窗口”|“行为”选项,打开“行为”面板。 (03)选中需要验证表单的<form>标签,再单击“行为”面板上的“添加”按 钮 ,从弹出的菜单中选择“检查表单”选项。 (04) 在“检查表单”对话框中,把“命名的栏位”列表框中与登录相关的两项 设置为必需的就可以了。 (05)单击“确定”按钮返回。在“行为”面板中将触发事件设置为 onSubmit。 (06)这样便完成了在客户端验证的行为设置。保存文件之后,按 F12 键进行浏 览。如果用户所输入的“登录信息”不完整或不正确,系统将出现提示对话框, 提示用户输入完整的登录信息。 七、作业处理 依据书上的案例,做出一个留言页面,要求能够显示和删除留言。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

52

第十三章 代码片断、库项目和模板
课题:代码片断创建与使用
一、教学基本内容 1、代码片断的概念及意义 2、代码片断的创建与使用 3、库项目的创建与使用 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、代码片断的创建 2、库项目的创建 难点:代码的编写 五、教学目的 掌握代码片断的使用方法,熟练运用库项目。 六、教学过程 1、代码片断 使用代码片断,可使所存储的内容快速地被重复使用。可以创建和插入 HTML、 JavaScript、CFML、ASP、JSP 等代码片断。Dreamweaver 8 本身还包含一些预定 义的代码片断, 也可以使用这些预定义的代码片断作为起始点,通过对这些代码 片断进行再编辑或修改以满足自己页面的需要。 2、代码片断的创建 新建代码片断文件夹,具体操作步骤如下: (01)启动 Dreamweaver 8,在菜单栏中选择“窗口”|“代码片断”选项,打 开“代码片断”面板。 (02) 在空白位置单击一下来选择存放新文件夹的位置,否则新文件夹将成为子 文件夹。 (03) 单击“代码片断”面板右上角的
53

按钮,从弹出的快捷菜单中选择“新

建文件夹”选项。 (04)为新建的“未命名”的代码片断文件夹命名即可,如输入“我的代码片 断”作为该文件夹的名称。 新建代码片断: 利用输入代码创建代码片断,具体操作步骤如下: (01)启动 Dreamweaver 8,在菜单栏中选择“窗口”|“代码片断”选项,打 开“代码片断”面板。 (02) 右击“我的代码片断”文件夹,从弹出的菜单中选择“创建新代码片断” 选项。 (03)弹出“代码片断”对话框。 (04)根据步骤 3 中论述,完成的设置。 (05)单击“确定”按钮,便可完成该代码片断的创建,并在“我的代码片断” 文件夹中显示出来。 七、作业处理 做一个显示当前日期的代码片断,使之插入到页面的合适位置。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

54

课题:模板使用
一、教学基本内容 1、模板的创建与使用 2、利用模板更新页面 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:模板的创建与使用 难点:使用模板更新页面 五、教学目的 掌握模板的使用方法,伟用模板更新页面。 六、教学过程 1、模板特点 使用模板创建文档可以使网站和网页具有统一的结构和外观, 如果有多个网页想 要用同一风格来制作,用模板绝对是最有效,并且也是最快的方法。模板实质上 就是作为创建其他文档的基础文档。在创建模板时,可以说明哪些网页元素应该 长期保留,不可编辑,哪些网页元素可以编辑修改。 2、在模板中定义新的可编辑区域 定义新的可编辑区域的具体步骤如下: (01)打开模板文件,在文档中选择要定义为可编辑区域的文本(或其他内容) , 这里选择页眉区的标题文本。 (02)右击从弹出菜单中选择“模板”|“新建可编辑区域”选项,弹出“新建 可编辑区域”对话框。 (03)在“新建可编辑区域”对话框中,为可编辑区域输入名称。命名一个可编 辑区域时不能使用单引号(') 、双引号(") 、尖括号(<>)和&。 (04)在模板中,可编辑区域被突出显示,并显示出可编辑区域的名称。 七、作业处理 针对书上案例实训 2 做模板的演练 八、教具

55

所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

56

第十四章 网页的制作
课题:个人主页制作流程
一、教学基本内容 1 、建站流程 2 、在网页中设置各种元素 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1 、建站流程 2 、网站的定位 3 、熟练掌握在网页中添加文字等元素 难点:1 、网站的定位 2 、网页风格的设计 五、教学目的 1 、熟练掌握建站流程 2 、掌握网站的定位 3 、掌握网站风格的设计 4 、熟练掌握在网页中添加各元素 六、教学过程 向学生演示多个项目:成品站点,分阶段演示和分析此网页的设计流程和过程, 在每个阶段演示完毕后, 让学生对此阶段进行巩固。讲解完毕后学生完成课后作 业,教师实施指导。 第一步:讲解建站的流程。 第二步:讲解市场调查与分析。 第三步:讲解建站内容。 第四步:讲解功能框架。 第五步:讲解界面设计。
57

第六步:演示站点框图。 第七步:演示网站截图。 第八步:讲解并演示在网页中添加元素。 七、作业处理 根据以上各章所讲的内容,设计一个个人主页。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

58

课题:网页特效 一、教学基本内容 1、墨林老人代码 2、飘动图层代码 二、课型:实验课 三、课时:2 个课时 四、教学重点与难点 重点:特效的使用 难点:代码的理解 五、教学目的 掌握网页特效的添加方法。 六、教学过程 墨林老人代码: <object classid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F id=ricci> </object> <script class="fsttd1"> var MerlinID;var MerlinACS; ricci.Connected MerlinACS); Merlin = ricci.Characters.Character(MerlinID); Merlin.Show();Merlin.Play("Surprised"); Merlin.Speak("欢迎来到 http://jm1218.boy.net.cn"); Merlin.Play("GestureLeft");Merlin.Think("这里是《家庭百科》 !"); Merlin.Play("Pleased");Merlin.Think("有什么问题请到论坛发言"); Merlin.Play("GestureDown");Merlin.Speak("谢谢大家光临与支持!"); Merlin.Hide(); function LoadLocalAgent(CharID, CharACS) {LoadReq = ricci.Characters.Load(CharID, CharACS); return(true);} </script>
59

=

true;MerlinLoaded

=

LoadLocalAgent(MerlinID,

七、作业处理 在上节完整页面上,添加特效代码,实现案例中的效果。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

60

第十五章 网站的测试与上传
课题:网站测试
一、教学基本内容 1、优化网站 2、优化文档 3、网站本地测试的意义 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:1、链接测试 2、搜索文件 难点:链接测试 五、教学目的 掌握测试方,会优化文档。 六、教学过程 具体的测试和修改操作步骤如下: (01) 打开需要测试的网页。 在菜单栏中选择“文件”|“检查页”|“检查目标浏览器” 选项。 (02)系统开始对当前的页面进行检查,会在“结果”面板组的“目标浏览器检查” 面板中列出一个报告单。 该报告单中列出了错误项和有可能出现的错误项, 并在该报告单的下面列出了出 现错误的具体位置和原因。 (03)可以根据报告单中的提示,对该页面中的文档进行修改,直到没有错误为 止。 检查链接,具体操作步骤如下: (01)在菜单栏中选择“窗口”|“结果”选项,打开“结果”面板组,单击其中的“链 接检查器”面板。
61

(02)单击该窗口左上角的

按钮,选择要检查的范围。

(03)如果选择“检查当前文档中的链接”选项,则弹出显示当前文档中链接检查 的报告单。 (04)在“显示”下拉列表中,用户可以选择要检查的链接方式。 七、作业处理 对自己所做的个人网站做一个测试。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

62

课题:网站上传
一、教学基本内容 上传网站 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:网站上传 难点:网站上传 五、教学目的 掌握网站上传方法。 六、教学过程 上传网页步骤: (01)单击“文件”面板中的 按钮,如图 15-12 所示,切换到站点管理窗口。 ,连接远

(02)在站点管理窗口中,单击工具栏上的“连接到远端主机”按钮 程服务器。当 Dreamweaver 8 成功连入服务器后,

按钮会自动变为“闭合”状

态,并且在一旁亮起一个小绿灯。左侧窗格中显示为“远程站点”信息,列出了远 程网站接收到的目录,右侧窗格显示为“本地信息”,是本地目录。 (03)在本地目录中选择要上传的文件,因为是第一次上传,可按 Ctrl+A 组合 键将文件全部选中,再单击工具栏上的 按钮,开始上传网页。上传后的文件

会在左侧窗格中显示出来。当此 HTML 文件上传成功后,状态条中将显示所上 传的文件,说明 Dreamweaver 8 正在上传这个 HTML 文件所调用的其他本地文 件。 七、作业处理 对大作业(即个人网站)进行上传。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

63

第十六章 使用 Fireworks 8 处理网页图像
课题:如何使用 Fireworks8
一、教学基本内容 1、Fireworks8 的工作环境 2、创建图像 3、优化图像 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:Fireworks8 的工作环境 难点:Fireworks8 的使用 五、教学目的 掌握 Fireworks8 的使用方法,会修改图像。 六、教学过程 1、引入 因为本班学生都学过了 Photoshop 这一软个, 因些可以用 Photoshop 与 Fireworks8 进行比较,以此引入这一课题。 2、讲授新课 (1)介绍 Fireworks8 这一软件的相关知识,熟悉其工作环境。 (2)Fireworks 8 的工作流程 Fireworks 8 可以在矢量图模式和位图模式下进行图像编辑。 在矢量模式下, 绘制 和编辑的是路径(线段和曲线) ;在位图模式下,编辑的是像素点。 (3)常用的操作 如何使用 Fireworks 8 真正设置图像尺寸大小。具体操作步骤如下: (01)在 Fireworks 8 中打开需要设置大小的图像,如图 16-2 所示。 (02) 在文档窗口的主菜单中选择“修改”|“画布”|“图像大小”选项,弹出 “图像大 小“对话框
64

(03)根据所需要的图像尺寸,在“像素尺寸”选项区域中输入宽度和高度值,单 击“确定”按钮便完成了图像尺寸大小的设置。 (04)当完成了大小设置后,可对该图像文件进行保存。 七、作业处理 根据 16.4 案例实训,做一个网标志。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

65

课题:制作网页动画
一、教学基本内容 网页动画 二、课型:新授课 三、课时:2 个课时 四、教学重点与难点 重点:Fireworks8 的使用 难点:动画的制作 五、教学目的 掌握 Fireworks8 的使用方法,制作网页动画。 六、教学过程 制作步骤: (01)启动 Fireworks 8 软件。选择“文件”|“新建”选项,弹出“新建文档”对话框。 在“新建文档”对话框中设置新建一个“宽度”为 100 像素, “高度”为 100 像素, “分 辨率”为 72 像素/英寸,“画布颜色”设置为透明的文档。 (02)在面板组中选择“帧”面板,如果“帧”面板未被打开,按 Shift+F2 组合键也 可打开“帧”面板。连续单击“帧”面板右下角中的“新建/重制帧”按钮 个帧。 (03)添加帧图片。在“帧”面板中选中“帧 1”,选择“文件”|“导入”选项,弹出“导 入文档”对话框,选择“图片 1.gif”图片,单击“打开”按钮,此时光标变为 状,在新建的文档中单击,导入“图片 1.gif ”图片。 (04)重复步骤 3 的操作,分别在“帧 2”中导入“图片 2.gif ”图片,在“帧 3”中导 入“图片 3.gif ”图片。 (05) 设置导出动画格式。 选择“文件”|“导出向导”选项, 弹出“导出向导”对话框, 。 (06)单击“继续”按钮,在之后的对话框中选择“GIF 动画”单选按钮。 (07)单击“继续”按钮,弹出“图像预览”对话框。选择“动画”选项卡,并选中“永 久”循环动画的循环方式。 (08)单击“导出”按钮,保存动画。 七、作业处理
66

,新建 3



在自己的网页中添加一幅动画。 八、教具 所用的教室为多媒体实验室, 因此所要板书的内容及使用的工具均在计算机上用 PPT 课件进行演示。

67


更多相关文档:

dreamweaver网页制作教案_图文

dreamweaver 网页制作教案 (Dreamweaver MX)一、Dreamweaver MX 中文版建站初步 ...8 保存文件。重新打开 Dreamweaver MX,新建一个文件,默认扩展名变成.html 了,...

Dreamweaver 8 教案

Dreamweaver 8 的操作界面及界面板组 重点与难点 教学方法 教 讲授与演示法 学内容及过程与环节备注 要从事网页设计工作,就必须学习如何制作网页。在过去,只有掌握...

Dreamweaver网页制作教案

Dreamweaver网页制作教案_计算机硬件及网络_IT/计算机_专业资料。理解Dreamweaver,...(7) 设置网页背景 (8) 设置超链接 (9) 应用框架 (10) 表单的运用 5、...

《网页设计》教案

32页 免费 dreamweaver8网页设计教案 66页 2财富值如要投诉违规内容,请到百度文库投诉中心;如要提出功能问题或意见建议,请点击此处进行反馈。 ...

Dreamweaver网页设计+授课教案

Dreamweaver 教案二(一课时) 教学目的:回忆原来学过的网页的文字知识,熟悉 ...8. 运用图像处理软件,制作 风景 JPEG 图片的低品质图片,并对网页中该风景图片...

HTML网页设计教案

学生活动:学生及时整理出网页设计原则。 教学意图:学生及时形成能力。 练习一:DREAMWEAVER8 基本操作: (1)安装与启动; (2)文档使用; (3)工作区结构 (上) (下...

《Dreamweaver网页设计》教案

《Dreamweaver网页设计教案_工学_高等教育_教育专区。教案 2012 — 2013 学年...提问 第2章 Dreamweaver 基础知识 熟悉 Dreamweaver 8 工作界面 ,熟记几个常用...

Dreamweaver8.0教案2014-2015上_图文

Dreamweaver8.0教案2014-2015上_教育学_高等教育_教育专区。网页制作教案。科目: Dreamweaver 8.0 网页制作基础教程 教师: 班别: 学期: 滕依良 13 计算机班 ...

DreamWeaver网页制作公开课教案

公开课教案授课章节 名称 课题 序号 第四单元 《DreamWeaver 网页制作——超链接...DREAMWEAVER 8.0 网页制... 6页 1下载券 网页制作(DREAMWEAVER M... 2页...

Dreamweaver8教案

dreamweaver8网页设计教案 66页 2财富值 Dreamweaver8网页全教案 30页 免费 DREAMWEAVER 教案 54页 免费 DreamWeaver教案 19页 免费如要投诉违规内容,请到百度文库投诉...
更多相关标签:
dreamweaver8网页设计 | dreamweaver8教案 | dreamweaver网页设计 | dreamweaver8制作网页 | dreamweaver8动态网页 | dreamweaver8网页模板 | dreamweaver8上传网页 | 网页设计与制作教案 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com