网页制作dreamveawer.doc

教教 案案 首首 页页编号 1 2012 年 9 月 23 日课题初识 Dreamweaver CS3首次授 课日期第一周 星期三 第一、二节课时2编写日期 2011 年 2 月 20 日首次授 课班级计算机 38 班教学目标知识目标：了解建站的制作流程掌握制作过程中的一些建站经验和建 站技巧能力目标：初识Dreamweaver CS3本课重点初识 Dreamweaver CS3本课难点对建站过程的理解教学 课型多媒体教具 器材计算机教师后记该软件是制作网页的重要软件之一，通过上个学期对 FLASH 的学 习，学生已基本对网页制作有初步的了解，但本软件涉及许多英文词 汇，许多学生的理解能力尚欠缺1.1 初识 Dreamweaver CS3 1.1.1 Dreamweaver CS3的启动 开始”｜“Macromedia”｜”Dreamweaver CS3”1.1.2 Dreamweaver CS3的工作环境面板组文件面板文档编辑 窗口插入栏文档工 具栏标签状 态栏属性检查 器1.1.2 Dreamweaver CS3的工作环境 “插入”面板组文档工具栏1.1.2 Dreamweaver CS3的工作环境 “属性”检查器文档编辑窗口1.1.2 Dreamweaver CS3的工作环境 浮动面板组1.1.2 Dreamweaver CS3的工作环境 浮动面板组常用的浮动面板组的操作方法如下。

（1）展开和折叠浮动面板组 单击面板左上角的三角标记即可展开与折叠浮动面板 （2）移动浮动面板组 将鼠标指向浮动面板组左上角的标签，当鼠标指针变成4个方向箭头的图标 时，便可移动浮动面板组 （3）重新组合浮动面板 选中浮动面板组中某个选项，单击浮动面板组右上角的按钮，打开下拉式菜 单，并在级联菜单中选择与当前浮动面板组合的浮动面板组，可重新组合浮 动面板 教教 案案 首首 页页编号 2 2011 年 2 月 23 日课题制作简单网页首次授 课日期第一周 星期三 第三、四节课时2编写日期 2011 年 2 月 20 日首次授 课班级计算机 38 班教学目标知识目标：制作简单网页——我的足球网能力目标：初识Dreamweaver CS3本课重点制作简单网页本课难点建立站点程序教学 课型上机教具 器材计算机教师后记本次上机，大部分同学都能独立制作完成这一简单的网页，但存 在不够细致的问题1.2 创建本地站点—《我的足球网》 1.2.1 案例综述 效果图：我的足球网 通常创建一个网站，总是先在本地计算机上进行开发和调试，待完成后再上传 到Internet服务器上。

因此，创建网站的第一步，就是首先创建一个本地站 点，用以进行网站的开发和管理1.2.2 案例分析 创建一个网站应遵循的流程为： 1.对站点进行规划 2.素材准备 3.管理站点首先要创建一个站点） 4.制作Web页面 7.设置Web应用程序运行环境 8.创建动态页 9. 测试站点 10. 上传站点到远程服务器 1.2.3 实现步骤 1．规划站点 2．新建站点 3．在¡°文件¡±面板中管理文件 4．编辑首页文件 1.2 创建本地站点—《我的足球网》 规划站点： 在F盘新建文件夹“myfootball”，作为整个站点内容的文件夹，也是网站的根 目录网站名的“我的足球网”，分3个栏目：“我与足球”、 “足球新闻”、 “足球明星”，这3 个栏目内容分别存放在网站根目录下的“aboutme”、 “news”、 “photo”文件夹里网站所有素材图像存放于根目录下的文件夹“image”中 1.3 创建网站 1.3 创建网站 1.3 创建网站 1.3.3 管理站点 在“文件”面板中实现以下操作 选择多个文件 剪切、粘帖、复制、删除、重命名文件或文件夹 创建文件或文件夹 1.3.3 管理站点 文件面板（扩展）的使用 1.3 创建网站 1.3.4 网页文件的基本操作 创建HTML文档 文件→新建→新建文档→常规→类别→基本页 在文件面板中→右击→新建文件→双击 打开已建的HTML文档 文件→打开 在文件面板中→双击该文档 保存指定文件 文件→保存（或Ctrl+S) 文件→另存为 文件→保存全部 关闭文件 文件→关闭教教 案案 首首 页页编号 3 2011 年 3 月 2 日 课题网页的编辑首次授 课日期第二周 星期三 第一、二节课时2编写日期 2011 年 2 月 29 日首次授 课班级计算机 38 班教学目标知识目标：了解建站的制作流程掌握制作过程中的一些建站经验和建 站技巧能力目标：初识Dreamweaver CS3本课重点制作简单网页—我与足球本课难点对建站过程的理解教学 课型多媒体教具 器材计算机教师后记随着网页制作知识的延伸，有部分同学的学习热情开始散失，这 一点值得注意。

2.1 图文混排—我与足球2.1.1 实例综述 通过本例我们可以掌握网页制作时的一些基本步骤和相关的属性设置，学会在 网页中加入最基本的元素―－文字和图像2.1.2 案例分析 在制作网页，大致需要以下几下环节： 新建或打开网页 设置页面属性 设置头部信息 规划页面布局 添加页面元素制作超链接 保存网页 2.1 图文混排—我与足球 2.1.3 实现步骤 1、新建或打开网页 2、设置页面属性 3、设置头部信息 插入作者信息 插入“关键字” 插入“说明” 插入“刷新” 4、规划页面布局 5、添加页面元素 （1）插入文本 （2）插入图像 （3）图像文字的混排 （4）图像的编辑 6、设置超链接 7、保存网页 2.2 网页文本的输入和属性设置 2.2.1 文本输入 1.输入文本 文件→导入 复制→粘贴 直接输入 2.输入网页中的空格 汉字输入状态下输入 属性面板→格式→预先格式化的 Shift+Ctrl+空格 编辑→首选参数→常规→允许多个连续的空格 3.文本换行Enter→分段（隔一行）Shift+Enter→换行（不分段）2.2 网页文本的输入和属性设置 2.2.2 文本的格式设置 Dreamweaver 文字格式化主要有三种方式： 手工格式化方式 用HTML标记格式化方式 CSS样式 (第9章再讲教教 案案 首首 页页编号 4 2011 年 3 月 2 日 课题网页文本的编辑首次授 课日期第二周 星期三 第三、四节课时2编写日期 2011 年 2 月 29 日首次授 课班级计算机 38 班教学目标知识目标：了解文本编辑以及图片属性编辑能力目标：能熟练编辑网页文本本课重点文本编辑和图片编辑本课难点对属性设置的理解教学 课型上机教具 器材计算机教师后记本次上机有部分学生在上课期间玩游戏，已对他们做好思想工作， 并责令改正，欣慰的是，大部分同学对本软件任然抱有很大的学习兴 趣。

2.2 网页文本的输入和属性设置 2.2.2 文本的格式设置 1.手工格式化方式 属性面板中的字体、样式、大小、颜色等2.用HTML标记格式化方式属性面板中的格式 2.3 网页图片的插入与属性设置 2.3.1 网页图像格式 网络上支持的图像格式有3种： GIF, JPEG和PNG GIF→对色彩要求不高的地方可使用JPEG→用于色彩丰富的图片PNG→保留所有原始层、矢量、颜色和效果信息2.3 网页图片的插入与属性设置2.3.2 插入图像 插入→图像 插入面板→常用→图像 直接将图像文件拖入编辑区 注意： 在插入图像前应先将网页文件已保存，从而使所插图像引用正确 图像插入网页后，应确定图像文件已存入站点，否则在下次打开网页时，会出 现看不到图像的情况2.3.3 设置图像的属性 图像→设置的名称 宽、高→可缩小和放大图片的显示尺寸 源文件→图片的路径和名称 链接→图像超链接的URL地址 替代→图像的说明文字 2.3.3 设置图像的属性 编辑→可打开外部编辑器进行图片的编辑 （默认为Fireworks） 垂直边距和水平边距→图片四周突出的尺寸 低品质源→原图的低品质替换图形 边框→图片是否要加边框 对齐→在一行中图形和文本的对齐方式 地图→创建热区的工具教教 案案 首首 页页编号 5 2011 年 3 月 9 日 课题编织网页的链接首次授 课日期第三周 星期三 第一、二节课时2编写日期 2011 年 2 月 29 日首次授 课班级计算机 38 班教学目标知识目标：了解文本编辑以及图片属性编辑能力目标：能熟练编辑网页文本本课重点文本编辑和图片编辑本课难点对属性设置的理解教学 课型多媒体教具 器材计算机教师后记部分同学对网页链接的类型理解不到位。

3.1 编织网站链接—足球新闻3.1.1 案例综述3.1.2 案例分析本例以编织网站中的各种超链接为主要目的，介绍创建超链接种种方法和技巧 为实现网页的跳转，将创建：到网站内页面的超链接――内部链接；到网站外页面的超链接――外部链接；电子邮件形式的超链接――E-mail链接；到网页某一特定位置的超链接――锚点链接；以及其他一些链接 3.1.3 实现步骤一、准备网页内容步骤 1 选中站点；步骤 2 将素材文件夹中的相关文档复制到站点文件夹下二、创建超链接1、创建内部链接－－网站内部页面之间创建相互链接关系步骤1 选中页面中的文字或图像，在属性面板中单击“链接”文本框右侧的文件夹图标，以通过浏览选择一个文件步骤2 从“目标”下拉菜单中，选择文档的打开位置blank :新打开的空窗口_parent：如果是嵌套的框架，则在父框架中打开self：会在当前网页所在的窗口或框架中打开top：会在完整的浏览器窗口中打开2、创建外部链接－－创建链接到绝对地址的外部链接选中文字或图像之后，直接在属性面板的“链接”文本框中输入外部的链接地址，如然后在“目标”下拉菜单中设置这个链接的目标窗口3、创建E－mail链接－－当浏览者单击电子邮件链接时，可即时打开浏览器默认的电子邮件程序处理程序。

方法：选中文本和图像插入栏｜常用｜电子邮件链接｜输入邮件地址或在属性面板的链接栏中直接输入4、锚点链接－－是指同一个页面中的不同位置链接分为两步：创建命名锚记，就是在文档中设置位置标记，并给该位置一个名称，以便引用创建到命名锚记的链接创建命名锚记将光标定位在要设置标记的位置，插入栏｜命名锚记｜输入锚记名称（注意：区分大小写）创建到命名锚记的链接选择要创建链接的文本或图像在属性面板的链接文本框中，键入＃号和锚记名称或在浏览对话框中，选中要链接的文件后加＃和锚记名称5、创建其他类型的链接（1）创建下载链接当被链接的文件是exe文件或zip文件等浏览器不支持的类型时，这些文件会被下载，这就是网上下载的方法链接到下载文件的方法，和链接到网页的方法完全一样2）、创建空链接空链接用来激活页面中的对象或文本当文本或对象被激活后，可以为之添加行为方法：选中要制作空链接的对象，在链接文本框中直接输入＃在一般站点首页的导航栏中的首页链接，就可以是一个空链接6、创建跳转菜单跳转菜单是文档中的弹出式菜单，可以创建到可在浏览器中打开的任何文件类型的链接方法：插入栏｜表单｜跳转菜单在“插入跳转菜单”对话框中，单击＋号添加菜单项在“选择时。

转到URL”文本框中，输入该文件的路径7、创建图像地图图像地图指已被分为多个区域（热点）的图像当用户单击某个热点时，会发生某种操作方法：选中图像在图像属性面板中，使用热区工具（矩形、椭圆、多边形） ，在图像上划分热区为绘制的每一个热区设置不同的链接地址和替代文字3.2.1 超链接的类型 内部链接 这种链接的目标端点是本站中的其他文档利用这种链接，可以跳转到本站点其他的页面上外部链接 这种链接的目标端点是本站点之外的站点或文档利用这种链接，可以跳转到。