Dreamweaver教案一一课时平山中学.docx

1、Dreamweaver教案一一课时平山中学平山中学校本课程网 页 设 计2008 2009陈 红晋 江 市 平 山 中 学第一节 了解Dreamweaver 教学目的：初步了解Dreamweaver的操作 教学重点：Dreamweaver的界面 教学难点：各个面板的调用 一、引入 *为什么要用Dreamweaver而不用Frontpage？ Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。 例一：m1.htm和f1.htm的大小比较 例二：frontpage安装程序和dreamweaver安装程序的大小比较 例

2、三：frontpage运行和dreamweaver启动比较 二、Dreamweaver的安装 三、Dreamweaver的界面 1文档窗口：主菜单、工具栏、底部启动条、文档编辑区 2对象面板：标准、表格、表单、框架、特殊、文件头、隐藏、字符 3启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理 4属性面板：随目前对象不同而内容不同 四、上机操作：熟悉dreamweaver界面，了解各工具的使用及相关属性。五、作业 1写出Dreamweaver对象界面中所有对象的名称 2新建一个空白网页，写出空白网页的HTML代码 第二节 Dreamweaver基本操作教学目的：回

3、忆原来学过的网页的文字知识，熟悉Dreamweaver的操作，熟悉属性面板的使用，掌握页面属性、文本属性的设置 教学难点：向导图片、预格式化、图片的路径 教学重点：常用属性 一、 复习引入 1输入文本 2回车键的作用 3如何输入换行符：Shift+ENTER，或者是对象面板符号 4换行符对应的HTML标记 二、设置页面属性 1打开页面属性对话框：右击页面，选择页面属性（page properties） 2设置标题显示（Title）： 3设置页面背景（Background image）：选择背景图像，注意路径 4设置背景颜色Background： 5设置本页面中文字的颜色Text：在没有设置其它

4、的字体颜色前，这个文字颜色发生作用，一旦对具体的文字设置颜色，这个设置就不起作用了 6设置链接的各种颜色（Visited Links、Active Links、Links） 7设置页面边界（Left Top ）：使内容与边框没有空隙 8设置文档字符集（Document Encoding）：gb2312 9设置向导图片（Tracing Image）：用于设计时，下面的滑动条用于设置这个图片的透明度（Transparent） 三、设置文本属性 1格式（Format）： （1）样式：段落（Paragraph），标题（Heading1）、预先格式化的（preformatted） *预先格式化的：可以输

5、入空格，可以按文本原来的样子排列，缺点是不能实现自动换行 （2）字体：Default Font （3）大小：Size （4）颜色： （5）其它：加粗、倾斜 （6）对齐： 2链接（Link）：链接到文件，链接到地址， *相关（Relate to）：文档（Document），站根目录（SiteRoot） 3目标（Target）：打开链接的目标_blank、_self、_parent、_top 4项目符号、编号和缩进 四、作业 根据示例网页，制作一个网页 第三节 Dreamweaver 中插入图片 教学目的：掌握网页中图片的相关操作 教学重点：dreamweaver中设置图片的属性 教学难点： 图像

6、处理软件的使用 一、复习引入 1网页的页面背景颜色和文本颜色在HTML代码中是如何表示的？ RGB方式表示颜色：红绿兰，0表示最弱，255表示最强 一共可以表示：256256256=16777216种颜色 由于浏览器的关系，只有216种颜色能在浏览器中正常显示，多于这个范围的颜色，有的浏览器显示时就可能发生偏差，不能正常显示。 这个范围我们称之为网页安全颜色范畴 2网页中运用颜色原则 切忌采用过多的颜色； 背景颜色不要太深； 要保持整个网页的色调统一； 要围绕网页主题选择颜色 二、网页中的图像格式 1GIF：Graphics Interchange Format可交换的图像格式 特点：只支持2

7、56种颜色 支持透明效果可以交错下载 可以实现动画效果文件所占用空间小 不能支持渐变色彩更改图片大小要从原文件改起2JPEG：Joint Photographic Experts Group联合摄影专家组文件格式 特点：支持24位图像 有损压缩 3GIF与JPEG比较 三、插入图像 1插入图像：InsertImage；对象面板 2图像属性：宽（W）高（H）：默认为图片的大小，可以设置其它尺寸，但图片会变形 源文件（Src）：对齐（align）：链接（Link）：链接到的图片替代（Alt）：图像注释，当浏览器不能正常显示图片时所出现的文字提示地图（Map）：制作映射图垂直边距（V space）：

8、与上边界的距离 水平边距（H space）与左边界的距离 目标（Target）：当链接项有设置时发生作用低品质源（Low Src）：低分辨率副本文件 边框（Border）：编辑（Edit）：启动图像处理软件来对图像进行编辑 重设大小（Reset size）：当用其它工具修改了图片大小时，如果不重设图片的大小，则会变形或者在不小心改变了图片的大小时使用此项四、使用图像处理软件1、转换图像格式：打开，另存为 2、更改图像尺寸： 3、更改图像品质：另存为 五、作业下列文件均放于同一文件夹下： 1在网上寻找透明背景的GIF图片5张，JPEG图片5张，其中，GIF要有动画的至少一张，JPEG要有一张风景

9、的。2将找到的图片放置在背景为蓝色的页面上 3改变第一张GIF图片的大小4设置第二张GIF图片的替代文字为“试一试” 5设置第三张GIF图片的链接为第三张JPEG图片 6设置第四张GIF图片的垂直边距为5，水平边距为9 7对第一张JPEG图片设置映射4个，分别链接到第二、三、四、五张JPEG图片 8运用图像处理软件，制作风景JPEG图片的低品质图片，并对网页中该风景图片设置低品质源不看电脑，写出下列RGB值对应什么颜色 #FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF 第四节 Dreamweaver中表格的应用 教学目的：掌握dreamweaver

10、中表格的应用 教学难点：表格对应的HTML代码 教学重点：表格的编辑 一、复习引入 1文字的定位：空格、回车 2图片的定位：垂直边距、水平边距 二、表格 1插入表格：插入（Insert）表格（table），或者在对象面板 2行数（row） 3列数（column） 4边距（cell padding）：单元格中的内容与单元格边框之间的距离 5间距（cell spacing）：单元格之间的距离 6宽度（width）：可以是像素（pixel）或百分比为单位（percent） 7边框（boder）： 8属性面板：只有在选定整个表格时才出现表格属性 9表格中也可以通过右击，调出的快捷菜单中选择表格来对表格

11、进行设置 10清除行高和列宽按钮 11改变列宽单位按钮 12背景颜色： 13边框颜色：设置整个表格的格线颜色 14背景图像： 三、表格所对应的HTML代码 1表格： 2行： 3列： 四、选定 1单击表格左上角或边框线 2在表格内单击表格任一处，右击，选择表格（table）选定表格（select table） 3选择所有单元格 4在文档窗口的左下角选择标记 5选定行 6选定单元格 五、表格的编辑 1表格的嵌套 在网页中，要进行复杂的定位，一般需要用到嵌套表格。不过，一般不超过三层。 2复制剪切粘贴 3插入行、列，删除行列 4合并单元格，拆分单元格 5改变行、列、表格的大小：拖放，属性面板精确定义

12、 6表格模板：命令（command）格式化表格（format table） 六、导入表格数据 1文件导入导入表格数据 2数据文件 3定界符 4表格宽度 5单元格边距和间距 6格式化首行 7边框 七、学习网页制作的方法 1学习网页制作，要先模仿 2在浏览到合适的网页时，用“另存为”保存，再用dreamweaver来打开 八、作业 1将数据文件1.txt转为表格 2模仿此页制作页面第五节 Dreamweaver中框架的编辑 教学目的： 掌握框架 教学难点： 框架的编辑 教学重点： 框架的HTML代码 一、复习引入 回忆：Frontpage中的框架应用 二、框架的应用 1重复出现在不同网页文档中的元

13、素：网页标题、导航栏等等 三、建立框架 1将对象面板切换到框架页（Frame） 2插入不同的框架，一个区域对应于一个页面 3在框架中打开原有网页：文件（File）在框架中打开（Open in Frame） 四、保存框架 1选择文件（File）/保存所有框架（Save Frameset），先保存框架文件，接着会出现提示，逐个保存框架中的网页 2保存时注意名称 五、框架编辑 1框架面板：窗口（Windows）其它（Other）框架（Frame）调出框架面板 2选定框架组：单击整个框架组的边框；或在框架面板中单击整个框架的边框 3框架属性：名称、源文件，滚动否，是否可以调整大小，是否有边框，边框颜色

14、，边界宽度，边界高度等 4拆分框架：按Alt键，拖动边框；修改（Modify）框架页（Frameset）拆分左/右/上/下（split frame top/bottom/left/right） *注意区别：插入一个新的框架与拆分框架的区别 5链接打开的目标 六、框架所对应的HTML代码 1框架组： 2通过设置：rows或cols来设定是横的还是竖的，是顶部还是底部 3框架组属性：frameborder框架是否有边框，border边框的宽度多少，framespacing框架间距 4框架项： 5框架属性：src指向的页面，name框架名，scrolling是否有滚动条，noresize不能由用户改

15、变大小 6无框架提示 七、作业 1建立框架页面如图，菜单链接到不同的图片，单击菜单中的一项，图片在右边的框架中打开 2建立左右型的框架，并在其中的左框架中插入上下型的框架 3建立左右型框架，并将左边的框架拆分为上下型 4将2、3题所得出的代码写在作业本上比较第六节 Dreamweaver中层的应用教学目的： 掌握层的相关操作，为动画设置打基础 教学难点： z-index、子层 教学重点： 层的属性 一、复习引入 *网页中的定位表格 二、建立层 1菜单，插入（Insert）层（Layer），默认大小：200115 2对象面板 三、层的意义 1可以将元素重叠 2可以用于精确定位网页元素 3可以通过

16、应用时间线使层移动和变换，实现简单的动画效果 4网页和网页元素的可见或不可见可以通过层的显示和隐藏属性实现 5层可以转换成表格 四、层所对应的HTML代码 五、层属性 1层编号（LayerID） 2L、T、W、H 3Z轴（Z-index）：控制层重叠时谁在前谁在后的问题 4背景图像（Bgimage） 5显示（Vis）：默认（default）、（继承）inherit、（可见）visible、隐藏（hidden）四个选项之一 6标签（Tag）：DIV、SPAN、LAYER、ILAYER，选DIV 7溢出（Overflow）：当层内容超过层大小的时候如何显示。显示层内的全部内容（visible）、只

17、显示层尺寸以内的内容（hidden）、不改变层大小、只添加滚动条（scroll）、只有层不够大时才显示滚动条（auto） 8剪裁（Clip）：指定层的哪一部分是可见的，输入的数值是距离层的4个边界的距离 六、层面板 1选择窗口（Window） 层（Layer）打开层面板 2防止重叠（Prevent Overlap）： 3缩放层： 4移动层： 5对齐层： 6改变层的可见性 7改变层的Z轴属性 例：阴影字的制作 七、子层 1在一个层中再插入一个层，后者就是前者的子层 2子层不一定在父层里面 3移动子层，父层位置不发生变化 4移动父层，子层跟着变化，对父层的相对位置不变 5子层可以继承父层的可见性

18、八、层与表格的转换 1层转换为表格：修改转换层到表格 2表格转换为层：修改转换表格到层 九、作业： 1、制作阴影字 2、用层将5个图片放置围绕一个图片 3、将上题结果转换为表格第七节 实例教学及操作教学目的：让学生综合运和所学的知识。教学难点：技巧的综合运用，色彩的搭配，页面的设计教学重点：利用所学技巧，构建一个完整的页面。一、 复习所学的基本技巧二、 以实例来讲述一个页面的完整制作过程三、 学生进行实际操作练习四、 作业1、 每个小组讨论定下一个网页主题2、 每个小组进行分工，搜索素材及文本内容，制作网页补充材料网页设计原则Web作为出版物的一种，同其他出版物如报纸，杂志等在设计上有许多共同

19、之处，也要遵循一些设计的基本原则，不同之处在于每章提到的Web的“非所见即所得”特性和交互性。因此，熟悉一些设计的基本原则，再对Web的特殊性作一些考虑，便不难设计出美观大方的页面来。如果有美术设计基础，对Web页面的设计会很有帮助。如果不具备这方面的背景知识，那么下面的一些原则将会对有所帮助。 设计的3C原则 所谓3C原则是指简洁、一致性、好的对比度。Web页面设计需要遵循这三条原则。 1.简洁 设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里 为人们所理解和接受。它与绘图有内在联系，但又不同于绘画，它以满足人们的实用和需求为目标，因而它比绘画更单纯，清晰和精确。页

20、面设计属于设计的一种，同样要求简练，准确。 从人记忆能力角度来说，由于人的大脑一次最多可记忆五到七条信息，因此如果希望人们在看完你的Web后能留下印象，最好也应该用一个简单的关键词语或图像吸引他们的注意力，如天极网的的“YESKY”.，醒目易记。 保持简洁的常用做法是使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。另一种保持简洁的做法是限制所用的字体和颜色的数目。一般每页使用的字体不超过三种，一个页面中使用的颜色少于256种。页面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把页面装点起来，初学者容易犯的一个错误是把页面搞的花里呼哨，却不能让别人明白他到底要突出

21、表达的是什么内容，主题和意念。 2.一致性 一致性是表现一个丫点的独特风格的重要手段之一。 要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距，文本，图形之间保持相同的间距；主要图形，标题或符号旁边留下相同的空白；如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。 一致性还包括：页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。所有的图标都应当彩相同的设计风格，比如全部采用图象的线条剪辑画或全部使用写实的照片等。 另一个保持一致性的办法是字体和颜色的使用。文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。一个

22、站点通常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近。比如，站点的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。 3.对比度 使用对比是强调突出某些内容的最有效的办法之一。好的对比度使内容更易于辨认和接受。实现对比的方法很多，最常用的是使用颜色的对比，比如，内容提要和正文使用不同颜色的字体，内容提要使用蓝色，而正文采用黑色；也可以使用大的标题，也即是面积上的对比；还可以使用图像现对比，题头的图像明确的向浏览者传达本页的主题，这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接的文字难地辨认。 还有一种

23、实现对比的方法是使用学体变化。在文字排版中，可以使用斜体和黑体实出关键内容，但是注意不要滥用，否则就达不到应有的强调效果。 使用对比的关键是强调突出关键内容，以吸引浏览者，鼓励他去发掘更深层次的内容。 为了对3C原则上有直观的认识，可以到等优秀的站点上看看，体会一下这些站点对简洁，一致性和对度等原则的把握。 4.页面设计要点 WebWebWeb上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的Web站点总是有许多共同之处，例如： 精心组织的内容； 格式美观的正文； 和谐的色彩搭配； 较好的对比度，使得文字具有较强的可读性； 生动背景图案； 页面元素大小适中，布局匀称； 不同元素之间留有足够

24、空白，给人视觉上休息的机会； 各元素之间保持平衡； 文字准确无误，无错别字、无拼写错误； 总的来说评价一个页面设计的好坏基本上要考虑以下几个方面的因素。 5.组织内容 设计Web页面时，所发布的材料必须经过精心组织，比如说按逻辑、按时间顺序或按地理位置等等进行组织，而且这种内容组织应当是易于理解的。 材料组织好后，下一步就是在Web页面上布置文本、图片等内容，目的是引导浏览者在页内浏览。我们应该控制页面上的元素的放置顺序和它们相互之间的空隙。比如，可以把与一段文字相关的图形放在段落旁边或嵌入段落中，但不要把与段落无关的图形放在段落边上，以免引起浏览者的误解。把相关的内容放在一起，而不相关的内容

25、用空白，水平线或其他图形分隔开，最好是浏览者看完一页之后可以选择继续读下去或通过链接跳到其他合适的主题上去。 由于人们阅读材料习惯于从左到右，从上到下进行，因此他们眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯。我们在组织内容时可以把希望浏览者最先看到的内容放在页面的左上角和页面顶部，如公司的标记，最新消息以及其他一些重要内容等等；然后按重要性递减的顺序，由上而下放轩其他一些内容。重要的内容应当是浏览者最容易发现，而不是放在很深 的链接之后的，页面上的广告为了达到宣传效果，通常也放在页面顶部显著位置。在段落中不宜放入过多的链接，否则会引起浏览者浏览上的混乱，最好的办法是按逻辑关系选

26、择放置，而不是随便乱放。如果可能的话，应该把链接放在一些相关的说明性文字旁边。比如，在一列放置文本，在另一列放置链接。这样就可以提示浏览者去使用这些链接。 6.设计时可用的一些元素 在确定Web站点的基本组织结构之后，就可以着手设计页面了。下面是设计时可供使用的一些元素： 文本格式化：Web本身对文本和字体的格式化能力并不强，在Web页面中，可以指定文本尺寸、排列和其他的一些格式化属性（序号列表和无序号列表），但建议不要改变这体而应当使用缺省字体，以确保页面的平以无关必画面为浏览器是用本地机器上的字体显示示页面内容的，你指定的字体在浏览者那里并不一定能够找到，如果确实有必要少量使用某种特殊字体

27、，可以把这些字画在图片上，然后将图片插入到页面中； 按钮、图标和其他导航工具，帮助浏览者在Web内导航。 背景：给页面添加背景，包括纹理填充、水印式背景和长条状背景等等，可以使得页面更加美观，给浏览者留下深刻的映象； 图形：可加入图片、图表和图形等； 表格：用来显示按行和列组织的信息，比如产品价格表，客户名单等； 颜色：包括图片的色彩、文本和背景的色彩等； 多媒体元素：包括声音、动画、视频片断、背说音乐等。 页面布局：在页面上放置文本、图形等元素，在元素间添加横线条，空白等，并用表格、杠架进行排版。 在后面的章节我们将陆续介绍这些元素的使用。 7.选择文本和背景的色彩 色彩可以使页面更加生动。

28、首先，使用色彩可以产生强烈的视觉效果，使你的页面在浏览者心中留下很深的映象；色彩还可以传递设计者的思想情感。但是必注意慎重的使用色彩，否则很可能弄巧成拙。滥用色彩容易造成视觉上的混乱。一般情况下不要过多的使用效果太强烈的色彩，对于大面积的文字来说，白底黑字或黑底白字总是最佳选择。 通常还应该选择相近的色彩。多数的页面背景为白色、黑色或灰色，其他一些次要的元素，如背景图片、线条适宜采用不抢眼的色彩。在数量有限的情况下，只有少量精心选择的元素为了突出强调的需要，才彩用明亮的色彩。在数量有奶的情况下，这引起彩色亮点会产生强烈的视觉冲击，但如果用得太多了，就会形成一种均匀的噪声，而达不到强调的效果。 在选择背景和正文颜色时，最重要的一点是注意易读性。实现易读性的关键在于提供足够的明暗对比。由于黑白之间有最强烈的对比度，因此大多数网页都采用黑底折字显示文本，但是，也不必拘泥于黑白两色实现对比，可以选择一对颜色，其中一个是亮的，一个量暗的，只要它们保持足够的对比度，比如说，灰底黑字也是很好的选择。 大面积的适宜采用低对比