《2022年Dreamweaver网页设计+授课教案.pdf》由会员分享，可在线阅读，更多相关《2022年Dreamweaver网页设计+授课教案.pdf（10页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、Dreamweaver教案 ( 一课时 ) 教学目的：初步了解Dreamweaver的操作教学重点： Dreamweaver的界面教学难点：各个面板的调用一、 引入为什么要用 Dreamweaver而不用 Frontpage ？Dreamweaver是 Macromedia 公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。例一： m1.htm和 f1.htm 的大小比较例二： frontpage安装程序和 dreamweaver安装程序的大小比较例三： frontpage运行和 dreamweaver启动比较二、 Dreamweaver的安装三、 Dre
2、amweaver的界面1文档窗口：主菜单、工具栏、底部启动条、文档编辑区2对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符3启动面板：站点管理、代码检查、HTML 样式、 CSS样式、行为、历史记录、资源管理4属性面板：随目前对象不同而内容不同四、 作业1写出 Dreamweaver对象界面中所有对象的名称2新建一个空白网页，写出空白网页的HTML 代码精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 1 页，共 10 页 - - - - - - - - - - Dreamweaver教案二 (
3、一课时 ) 教学目的：回忆原来学过的网页的文字知识，熟悉 Dreamweaver 的操作，熟悉属性面板的使用，掌握页面属性、文本属性的设置教学难点：向导图片、预格式化、图片的路径教学重点：常用属性一、 复习引入1输入文本2回车键的作用3如何输入换行符： Shift+ENTER，或者是对象面板符号4换行符对应的 HTML 标记 二、 设置页面属性1打开页面属性对话框：右击页面，选择页面属性（page properties）2设置标题显示（ Title） ：3设置页面背景（ Background image ） ：选择背景图像，注意路径4设置背景颜色 Background：5设置本页面中文字的颜色
4、Text ：在没有设置其它的字体颜色前，这个文字颜色发生作用，一旦对具体的文字设置颜色，这个设置就不起作用了6设置链接的各种颜色（ Visited Links、Active Links、Links ）7设置页面边界（ Left Top ） ：使内容与边框没有空隙8设置文档字符集（ Document Encoding） ：gb2312 9设置向导图片（ Tracing Image ） ：用于设计时，下面的滑动条用于设置这个图片的透明度（ Transparent ）三、 设置文本属性1格式（ Format） ：（1） 样式：段落（Paragraph ） ，标题（ Heading1） 、预先格式化的
5、（preformatted ）*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 2 页，共 10 页 - - - - - - - - - - 自动换行（2） 字体： Default Font （3） 大小： Size （4） 颜色：（5） 其它：加粗、倾斜（6） 对齐：2链接（ Link ） ：链接到文件，链接到地址，*相关（ Relate to） ：文档（ Document ） ，站根目录（ SiteRoot ）3目标（ Target
6、） ：打开链接的目标 _blank 、_self 、_parent 、_top 4项目符号、编号和缩进四、作业根据示例网页，制作一个网页Dreamweaver 教案三 ( 两课时 ) 教学目的：掌握网页中图片的相关操作教学重点： dreamweaver中设置图片的属性教学难点：图像处理软件的使用一、 复习引入 1 网页的页面背景颜色和文本颜色在HTML 代码中是如何表示的？ RGB 方式表示颜色：红绿兰， 0 表示最弱， 255表示最强一共可以表示： 256256256=16777216种 颜色 由于浏览器的关系，只有 216 种颜色能在浏览器中正常显示， 多于这个范围的颜色， 有的浏览器显示
7、时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴2网页中运用颜色原则l切忌采用过多的颜色；精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 3 页，共 10 页 - - - - - - - - - - l背景颜色不要太深；l要保持整个网页的色调统一；l要围绕网页主题选择颜色二、 网页中的图像格式 *BMP： 位图格式 1 GIF： Graphics Interchange Format可交换的图像格式特点： l只支持 256 种颜色 l支持透明效果 l可以交错下载 l可以实现动画效果 l文
8、件所占用空间小 l不能支持渐变色彩l更改图片大小要从原文件改起 2 JPEG ：Joint Photographic Experts Group 联合摄影专家组文件格式特点： l支持24 位图像 l有损压缩3GIF与 JPEG 比较三、插入图像 1 插入图像：Insert Image； 对象面板 2 图像 属性： l宽（W ）高（H） ：默认为图片的大小，可以设置其它尺寸，但图片会变形 l源文件 （Src） ： l对齐（align ） ： l链接（Link ） ： 链接到的图片 l替代（Alt ） ：图像注释，当浏览器不能正常显示图片时所出现的文字提示 l地图（ Map ） ：制作映射图 l垂
9、直边距（V space） ：与上边界的距离 l水平边距（H space）与左边界的距离 l目标（ Target ） ：当链接项有设置时发生作用 l低品质源（Low Src） ：低分辨率副本文件 l边框（Border ） ： l编辑（ Edit ） ：启动图像处理软件来对图像进行编辑 l重设大小（ Reset size ） ：当用其它工具修改了 图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项四、 使用图 像处理软件 1 、 转换图像格式：打开， 另存为 2 、更改图像尺寸： 3 、更改图像品质：另存为五、作业 l下列文件均放于同一文件夹下： 1 在网上寻找透明背
10、景的GIF 图片 5 张，JPEG图片 5 张，其中，GIF 要有动画的至少一张， JPEG要有一 张风景的。 2 将找到的图片放置在背景为蓝色的页面上 3 改变第一张 GIF 图片的大小 4 设置第二张GIF 图片的替代文字为“试一试” 5 设 置第三张 GIF 图片的链接为第三张JPEG图片 6 设置第四张 GIF 图片的垂直边距为5，水平 边距为 9 7 对第一张 JPEG图片设置映射 4 个， 分别链接到第二、三、 四、 五张 JPEG 图片 8 运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低 品质源 l不看电脑，写出下列RGB值对应什么颜色 #FF00
11、0#00FF00 #0000FF #FFFF00 #FF00FF #00FFFF Dreamweaver教案四 ( 三课时 ) 教学目的：掌握 dreamweaver中表格的应用教学难点：表格对应的HTML 代码教学重点：表格的编辑一、复习引入精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 4 页，共 10 页 - - - - - - - - - - 1文字的定位：空格、回车2图片的定位：垂直边距、水平边距二、表格1插入表格：插入（Insert ）表格（table ） ，或者在对象面板2行数（ row）3
12、列数（ column）4边距（ cell padding） ：单元格中的内容与单元格边框之间的距离5间距（ cell spacing） ：单元格之间的距离6宽度（ width ） ：可以是像素（ pixel ）或百分比为单位（ percent ）7边框（ boder） ：8属性面板：只有在选定整个表格时才出现表格属性9在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置10清除行高和列宽按钮11改变列宽单位按钮12背景颜色：13边框颜色：设置整个表格的格线颜色14背景图像：三、表格所对应的 HTML 代码1表格： 2行： 3列： 四、选定精品资料 - - - 欢迎下载 - - -
13、- - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 5 页，共 10 页 - - - - - - - - - - 1单击表格左上角或边框线2在表格内单击表格任一处，右击，选择表格（ table ）选定表格（select table ）3选择所有单元格4在文档窗口的左下角选择标记5选定行6选定单元格五、表格的编辑1表格的嵌套在网页中，要进行复杂的定位， 一般需要用到嵌套表格。 不过， 一般不超过三层。2复制剪切粘贴3插入行、列，删除行列4合并单元格，拆分单元格5改变行、列、表格的大小：拖放，属性面板精确定义6表格模板：命令（command ）格式化表格（
14、format table）六、导入表格数据1文件导入导入表格数据2数据文件3定界符4表格宽度5单元格边距和间距6格式化首行7边框精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 6 页，共 10 页 - - - - - - - - - - 七、学习网页制作的方法1学习网页制作，要先模仿2在浏览到合适的网页时，用“另存为”保存，再用dreamweaver来打开八、作业1将数据文件 1.txt转为表格2模仿此页制作页面Dreamweaver教案五 ( 两课时 ) 教学目的：掌握框架教学难点：框架的编辑教学重点：
15、框架的 HTML 代码一、复习引入回忆： Frontpage 中的框架应用二、框架的应用1重复出现在不同网页文档中的元素：网页标题、导航栏等等三、建立框架1将对象面板切换到框架页（ Frame ）2插入不同的框架，一个区域对应于一个页面3在框架中打开原有网页：文件（ File ）在框架中打开（Open in Frame ）四、保存框架1选择文件（ File ）/ 保存所有框架（ Save Frameset ） ，先保存框架文件，接着会出现提示，逐个保存框架中的网页精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - -
16、-第 7 页，共 10 页 - - - - - - - - - - 2保存时注意名称五、框架编辑1框架面板：窗口（Windows ）其它（Other ）框架（ Frame）调出框架面板2选定框架组： 单 击整个框架组的边框； 或在框架面板中单击整个框架的边框3框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等4拆分框架：按 Alt键，拖动边框；修改（ Modify ）框架页（Frameset）拆分左 / 右/ 上/ 下（split frame top/bottom/left/right）*注意区别：插入一个新的框架与拆分框架的区别5链接打开的目标六、框
17、架所对应的 HTML 代码1框架组： 2通过设置： rows 或 cols 来设定是横的还是竖的，是顶部还是底部3框架组属性： frameborder框架是否有边框， border边框的宽度多少，framespacing 框架间距4框架项： 5框架属性： src 指向的页面， name框架名， scrolling是否有滚动条，noresize 不能由用户改变大小6无框架提示 七、作业1建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开2建立左右型的框架，并在其中的左框架中插入上下型的框架3建立左右型框架，并将左边的框架拆分为上下型精品资料 - - - 欢迎下载 -
18、 - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 8 页，共 10 页 - - - - - - - - - - 4将 2、 3 题所得出的代码写在作业本上比较Dreamweaver教案六 ( 三课时 ) 教学目的：掌握层的相关操作，为动画设置打基础教学难点： z-index 、子层教学重点：层的属性一、复习引入*网页中的定位表格二、建立层1菜单，插入（Insert ）层（ Layer） ，默认大小： 200115 2对象面板三、层的意义1可以将元素重叠2可以用于精确定位网页元素3可以通过应用时间线使层移动和变换，实现简单的动画效果4网页和网
19、页元素的可见或不可见可以通过层的显示和隐藏属性实现5层可以转换成表格四、层所对应的 HTML 代码 五、层属性1层编号 （LayerID ）精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 9 页，共 10 页 - - - - - - - - - - 2L、T、W 、H 3Z轴（Z-index ） ：控制层重叠时谁在前谁在后的问题4背景图像（Bgimage ）5显示（Vis ） ： 默认（ default ） 、 （继承） inherit、 （可见） visible、隐藏（hidden ）四个选项之一6标签
20、（ Tag） ： DIV 、SPAN 、LAYER 、ILAYER ，选 DIV 7溢出（ Overflow ） ：当层内容超过层大小的时候如何显示。显示层内的全部内容（visible） 、只显示层尺寸以内的内容（hidden ） 、不改变层大小、只添加滚动条（ scroll） 、只有层不够大时才显示滚动条（auto ）8剪裁（ Clip ） ： 指定层的哪一部分是可见的，输入的数值是距离层的4 个边界的距离六、层面板1选择窗口（Window ） 层（ Layer）打开层面板2防止重叠（Prevent Overlap） ：3缩放层：4移动层：5对齐层：6改变层的可见性7改变层的 Z 轴属 性例：阴影字的制作七、子层1在一个层中再插入一个层，后者就是前者的子层2子层不一定在父层里面3 移动子层，父层位置不发生变化4移动父层，子层跟着变化，对父层的相对位置不变5子层可以继承父层的可见性八、层与表格的转换1层转换为表格：修改转换层到表格2表格转换为层：修改转换表格到层九、作业：1、制作阴影字2、用层将 5 个图片放置围绕一个图片3、将上题结果转换为表格精品资料 - - - 欢迎下载 - - - - - - - - - - - 欢迎下载 名师归纳 - - - - - - - - - -第 10 页，共 10 页 - - - - - - - - - -