Dreamweaver网页设计+授课教案

市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”Dreamweaver教案(一课时)教学目的：初步了解Dreamweaver的操作教学重点：Dreamweaver的界面教学难点：各个面板的调用一、引入为什么要用Dreamweaver而不用Frontpage？Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。例一：m1.htm和f1.htm的大小比较例二：frontpage安装程序和dreamweaver安装程序的大小比较例三：frontpage运行和dreamweaver启动比较二、Dreamweaver的安装三、Dreamweaver的界面1．文档窗口：主菜单、工具栏、底部启动条、文档编辑区2．对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符3．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理4．属性面板：随目前对象不同而内容不同四、作业1．写出Dreamweaver对象界面中所有对象的名称2．新建一个空白网页，写出空白网页的HTML代码市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”2Dreamweaver教案二(一课时)教学目的：回忆原来学过的网页的文字知识，熟悉Dreamweaver的操作，熟悉属性面板的使用，掌握页面属性、文本属性的设置教学难点：向导图片、预格式化、图片的路径教学重点：常用属性一、复习引入1．输入文本2．回车键的作用3．如何输入换行符：Shift+ENTER，或者是对象面板à符号4．换行符对应的HTML标记br二、设置页面属性1．打开页面属性对话框：右击页面，选择页面属性（pageproperties）2．设置标题显示（Title）：3．设置页面背景（Backgroundimage）：选择背景图像，注意路径4．设置背景颜色Background：5．设置本页面中文字的颜色Text：在没有设置其它的字体颜色前，这个文字颜色发生作用，一旦对具体的文字设置颜色，这个设置就不起作用了6．设置链接的各种颜色（VisitedLinks、ActiveLinks、Links）7．设置页面边界（LeftTop）：使内容与边框没有空隙8．设置文档字符集（DocumentEncoding）：gb23129．设置向导图片（TracingImage）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent）三、设置文本属性1．格式（Format）：（1）样式：段落（Paragraph），标题（Heading1）、……预先格式化的（preformatted）*预先格式化的：可以输入空格，可以按文本原来的样子排列，缺点是不能实现市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”3自动换行（2）字体：DefaultFont（3）大小：Size（4）颜色：（5）其它：加粗、倾斜（6）对齐：2．链接（Link）：链接到文件，链接到地址，*相关（Relateto）：文档（Document），站根目录（SiteRoot）3．目标（Target）：打开链接的目标_blank、_self、_parent、_top4．项目符号、编号和缩进四、作业根据示例网页，制作一个网页Dreamweaver教案三(两课时)教学目的：掌握网页中图片的相关操作教学重点：dreamweaver中设置图片的属性教学难点：图像处理软件的使用一、复习引入1．网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？BODYBGCOLOR=”#FFFFFFF”TEXT=”#”LINK=”#FF0000”VLINK=”#FFFF00”ALINK=”#00FFFF”RGB方式表示颜色：红绿兰，0表示最弱，255表示最强一共可以表示：256╳256╳256=种颜色由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。这个范围我们称之为网页安全颜色范畴2．网页中运用颜色原则l切忌采用过多的颜色；市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”4l背景颜色不要太深；l要保持整个网页的色调统一；l要围绕网页主题选择颜色二、网页中的图像格式*BMP：位图格式1．GIF：GraphicsInterchangeFormat可交换的图像格式特点：l只支持256种颜色l支持透明效果l可以交错下载l可以实现动画效果l文件所占用空间小l不能支持渐变色彩l更改图片大小要从原文件改起2．JPEG：JointPhotographicExpertsGroup联合摄影专家组文件格式特点：l支持24位图像l有损压缩3．GIF与JPEG比较三、插入图像1．插入图像：InsertàImage；对象面板2．图像属性：l宽（W）高（H）：默认为图片的大小，可以设置其它尺寸，但图片会变形l源文件（Src）：l对齐（align）：l链接（Link）：链接到的图片l替代（Alt）：图像注释，当浏览器不能正常显示图片时所出现的文字提示l地图（Map）：制作映射图l垂直边距（Vspace）：与上边界的距离l水平边距（Hspace）与左边界的距离l目标（Target）：当链接项有设置时发生作用l低品质源（LowSrc）：低分辨率副本文件l边框（Border）：l编辑（Edit）：启动图像处理软件来对图像进行编辑l重设大小（Resetsize）：当用其它工具修改了图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项四、使用图像处理软件1、转换图像格式：打开，另存为2、更改图像尺寸：3、更改图像品质：另存为五、作业l下列文件均放于同一文件夹下：1．在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一张风景的。2．将找到的图片放置在背景为蓝色的页面上3．改变第一张GIF图片的大小4．设置第二张GIF图片的替代文字为“试一试”5．设置第三张GIF图片的链接为第三张JPEG图片6．设置第四张GIF图片的垂直边距为5，水平边距为97．对第一张JPEG图片设置映射4个，分别链接到第二、三、四、五张JPEG图片8．运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低品质源l不看电脑，写出下列RGB值对应什么颜色#FF000#00FF00#0000FF#FFFF00#FF00FF#00FFFFDreamweaver教案四(三课时)教学目的：掌握dreamweaver中表格的应用教学难点：表格对应的HTML代码教学重点：表格的编辑一、复习引入市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”51．文字的定位：空格、回车2．图片的定位：垂直边距、水平边距二、表格1．插入表格：插入（Insert）à表格（table），或者在对象面板2．行数（row）3．列数（column）4．边距（cellpadding）：单元格中的内容与单元格边框之间的距离5．间距（cellspacing）：单元格之间的距离6．宽度（width）：可以是像素（pixel）或百分比为单位（percent）7．边框（boder）：8．属性面板：只有在选定整个表格时才出现表格属性9．在表格中也可以通过右击，调出的快捷菜单中选择表格来对表格进行设置10．清除行高和列宽按钮11．改变列宽单位按钮12．背景颜色：13．边框颜色：设置整个表格的格线颜色14．背景图像：三、表格所对应的HTML代码1．表格：table/table2．行：tr/tr3．列：td/td四、选定市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”61．单击表格左上角或边框线2．在表格内单击表格任一处，右击，选择表格（table）à选定表格（selecttable）3．选择所有单元格4．在文档窗口的左下角选择标记5．选定行6．选定单元格五、表格的编辑1．表格的嵌套在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。2．复制剪切粘贴3．插入行、列，删除行列4．合并单元格，拆分单元格5．改变行、列、表格的大小：拖放，属性面板精确定义6．表格模板：命令（command）à格式化表格（formattable）六、导入表格数据1．文件导入导入表格数据2．数据文件3．定界符4．表格宽度5．单元格边距和间距6．格式化首行7．边框市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”7七、学习网页制作的方法1．学习网页制作，要先模仿2．在浏览到合适的网页时，用“另存为”保存，再用dreamweaver来打开八、作业1．将数据文件1.txt转为表格2．模仿此页制作页面Dreamweaver教案五(两课时)教学目的：掌握框架教学难点：框架的编辑教学重点：框架的HTML代码一、复习引入回忆：Frontpage中的框架应用二、框架的应用1．重复出现在不同网页文档中的元素：网页标题、导航栏等等三、建立框架1．将对象面板切换到框架页（Frame）2．插入不同的框架，一个区域对应于一个页面3．在框架中打开原有网页：文件（File）à在框架中打开（OpeninFrame）四、保存框架1．选择文件（File）/保存所有框架（SaveFrameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页市委召开了全市乡科级主要领导干部集中学习班暨“大学习、大讨论、大调研”活动启动会，根据会议安排，在镇党委统一组织学习的基础上，坚持以问题为导向，紧扣“天府六问”“果城十二问”82．保存时注意名称五、框架编辑1．框架面板：窗口（Windows）à其它（Other）à框架（Frame）调出框架面板2．选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框3．框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色，边界宽度，边界高度等4．拆分框架：按Alt键，拖动边框；修改（Modify）à框架页（Frameset）à拆分左/右/上/下（splitframetop/bottom/left/right）*注意区别：插入一个新的框架与拆分框架的区别5．链接打开的目标六、框架所对应的HTML代码1．框架组：frameset/frameset2．通过设置：rows或cols来设定是横的还是竖的，是顶部还是底部3．框架组属性：frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距4．框架项：frame5．框架属性：src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改变大小6．无框架提示noframesbody/body/noframes七、作业1．建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开2．建立左右型的框架，并在其中的左框架中插入上下型的框架3．建立左右型框架，并将左边的框