当前位置:首页 >> 其它课程 >> 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


更多相关文档:

dreamweaver8教案

第1 课 Dreamweaver8 基础知识教学目的:对 Dreamweaver8 有总体了解,掌握 ...创建站点 要制作一个能够被公众浏览的网站, 首先需要在本地磁盘上制作这个网 ...

dreamweaver8网页设计教案

dreamweaver8网页设计教案_工学_高等教育_教育专区 暂无评价|0人阅读|0次下载|举报文档dreamweaver8网页设计教案_工学_高等教育_教育专区。《dreamweaver8 网页设计》...

dreamweaver8网页设计教程

58 第一章 遨游 Dreamweaver8 精彩世界 课题:Dreamweaver8 简介及创建文档一、...网页 3、插处图像 五、教学目的 1 、对 Dreamweaver 这个制作网页的工具及网页...

Dreamweaver 8 教案

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

Dreamweaver8教案

Dreamweaver8教案_教育学_高等教育_教育专区。第一章 遨游 Dreamweaver8 精彩世界...激发学生学 习网页设计的兴趣 2、一定要学会建立一个空白网页 3、会对页面有...

Dreamweaver网页设计+授课教案

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

HTML网页设计教案

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

网页设计教学教案

网页设计教学教案_中职中专_职业教育_教育专区。《Dreamweaver CS5 网页设计教程...1.2.8 确定网站风格和布局 网站需求分析 规划站点内容 界面概述 标题栏 菜单...

《Dreamweaver网页设计》教案

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

DREAMWEAVER_8.0_网页制作教案

DREAMWEAVER_8.0_网页制作教案_IT/计算机_专业资料。这个好!DREAMWEAVER 8.0 网页制作教案(二) 网页制作教案(邝翠珊 cskuang@gdut.edu.cn 39322544-826 复习: ...
更多相关标签:
dreamweaver8网页设计 | dreamweaver网页设计 | dreamweaver8网页模板 | dreamweaver8制作网页 | dreamweaver8动态网页 | dreamweaver8上传网页 | 网页设计教案 | 网页设计与制作 教案 |
网站地图

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