dreamweaver cs5第一次课教案
- 格式：doc
- 大小：75.00 KB
- 文档页数：8
第一讲初识网页制作工具——Dreamweaver cs5的基本功能及操作授课题目：初识网页制作工具——Dreamweaver cs5的基本功能及操作教学资源：多媒体、Internet授课方式：讲授、操作课时安排：2个课时教学目标：1.认识Dreamweaver cs5的基本界面，了解各菜单、面板的组成；2.能够进行创建、管理站点的操作；3.能熟练地建立新网页，并能在网页中熟练地插入文字、并对页面属性进行设置；4.能在网页中熟练地插入表格、图片、视频、动画，并能对其进行相关设置；5.熟练的应用CSS、超链接。
教学重点：1.站点的建立。
2.表格的使用3.CSS样式的创建4.超链接的应用教学难点：1.站点的建立2.表格、图片的插入3.CSS、超链接的应用教学过程：一、网页和网站（通过举例讲解）网页实际上是一个文件，网页经由网址来识别与存取。
当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。
网站是各种网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。
在构成网站的众多网页中，有一个页面比较特殊，称为首页。
按网页的表现形式可将网页分为静态网页和动态网页。
静态网页：指用HTML语言编写的网页。
动态网页：这类网页使用ASP、PHP等程序生成，具有动态效果。
注意：静态网页和动态网页不是以网页中是否包含动态元素区分的，而是针对客户端与服务器是否发生交互而言，不发生交互的是静态网页，发生交互的是动态网页。
按网站内容可将网站分为四种类型：门户网站、个人网站、专业网站和职能网站。
◆门户网站：这类网站是一种综合性网站，涉及领域非常广泛。
如搜狐、网易等。
◆个人网站：具有较强个性化，是以个人名义开发创建的。
◆专业网站：这类网站具有很强的专业性，通常只涉及某一个领域。
◆职能网站：具有专门的功能，如政府职能网站等。
网页布局类型（1）左右对称结构布局左右对称结构是网页布局中最为简单的一种。
“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。
一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。
左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。
（2）“同”字型结构布局“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。
在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。
（3）“回”字型结构布局“回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪。
（4）“匡”字型结构布局和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构。
（5）自由式结构布局以上4种结构是传统意义上的结构布局。
自由式结构布局的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。
这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作。
（6）封面型这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。
二、Dreamweaver CS5的工作界面（边操作边讲解）和以前的版本相比，Dreamweaver CS4的界面几乎被完全颠覆，可以说是做了一次脱胎换骨的改进，类似苹果操作系统的界面，操作更加简洁，从中看到了更多的设计元素。
另外，Dreamweaver CS5的工作区非常灵活，用户可以根据自己的习惯进行定制，并且可以快捷地创建代码规范的应用程序。
首次启动Dreamweaver CS5时系统会弹出如图所示的工作设置对话框。
Dreamweaver CS5的工作界面包括：菜单栏、文档工具栏、编辑区、属性检查器、面板组等部分组成，而插入栏则整合在面板组中。
（1）菜单栏主要由10个菜单组成：文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助。
所有的操作都可以在这里找到相应的菜单。
（2）文档工具栏代码、拆分、设计视图模式间的快速切换。
设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。
代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言（如PHP、ColdFusion标记语言CFML)以及任何其他类型语言的手工编码环境。
拆分视图：又称代码和设计视图，可以在窗口中同时看到文档的代码视图和设计视图。
（3）【插入】面板包含了用于将图像、表格、应用程序AP等各种类型的对象插入到文档中的命令。
面板中的选项卡可以自由切换，再次启动DW时，系统会打开上次使用的选项卡。
某些选项卡中的命令带有弹出式菜单按钮，从中选择一个选项时，该选项将成为该按钮的默认操作。
常用【插入】面板下拉菜单包括：布局、表单、数据、Spry、文本、收藏夹、显示标签。
（4）属性检查器可以检查和编辑当前选定页面元素（文本或插入的对象）的最常用属性。
内容不是一成不变的，会随着选定元素的改变而改变。
默认情况下位于工作区的底部，也可以将其停靠在工作区的顶部，或变为活动面板。
（5）状态栏位于文档窗口的底部，从中可以查看正在创建的文档的有关信息。
其中“标签选择器”显示环绕当前选定内容的标签的层次结构。
若单击该层次结构中的任何标签，则选定该标签全部内容。
如单击状态栏的<body>标签，则选择中文档中整个正文。
“缩放工具”可以设置当前页面的缩放比率。
状态栏右侧显示当前页面的文档大小和估计下载时间。
（6）【面板组】是将相同类型或功能的面板组织在一起构成的。
面板组中绝大多数的面板是折叠的，若要打开某一面板，只需要单击每个面板标题栏上。
若再次单击可以将其折叠。
面板组内的面板显示方式多为选项卡方式。
三、定义站点（边操作边讲解）站点是一个管理网页文档的场所，简单地讲，一个个网页文档连接起来就构成了站点。
站点可以小到一个网页，也可大到一个网站。
1.创建站点在Dreamweaver工作环境下，单击菜单栏中的【站点】\【新建站点】命令。
这种创建站点的方法是通过向导完成的，非常直观。
（1）单击菜单栏中的【站点】\【新建站点】命令，弹出“站点定义”对话框，在第二个号文本框中，会出现站点储存的默认位置，或者在下面的文本框中指定一个存储位置，Dreamweaver将在其中存储站点文件。
（6）单击保存按钮，则通过向导建立了一个本地站点。
2．添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。
根据站点的规划，需要向其中添加网页文件或站点文件夹。
网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。
在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：①在【文件】面板中，右键单击“站点”根目录，则弹出一个快捷菜单。
②选择快捷菜单中的【新建文件】命令，则新建了一个网页文件。
③同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。
四、创建和保存网页（边操作边讲解）1.创建新文档（1）创建空文档。
【文件】/【新建】，打开【新建文档】对话框。
在【空白页】类别中从【页面类型】列表选择【HTML】，【布局】中选择【无】，即可创建一个纯HTML空白页。
（2）创建应用CSS布局的文档。
选择【文件】/【新建】，在【新建文档】对话框的【空白页】选项卡中从【页面类型】列表选择要创建的页面类型。
如果从【布局】列表中选择一个预设的CSS布局，将创建一个包含预设CSS布局的页面。
从【页面类型】列表中选择【HTML】、【HTML模板】等，右侧的【布局】列表中显示相应的文档布局类型。
预设的CSS布局类型有：①固定：列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。
②弹性：列宽是以相对于文本大小来决定的。
如果访问者更改了文本设置，该列的宽带将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。
③液态：列宽是以站点访问者的浏览器宽度的百分比来决定的。
如果站点访问者将浏览器变宽或变窄，该列的宽度将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。
④混合：用上述3个选项的任意组合来决定列类型。
如，两列混合，左侧栏布局具有可缩放至浏览器大小的液态主列，而右侧的弹性列可缩放至站点访问者的文本设置的大小。
【文档类型】弹出菜单中选择文档类型，一般情况下使用默认选项【XHTML 1.0 Transitional】。
如果在【布局】列表中选择了一种CSS布局，则从【布局CSS位置】弹出菜单中为布局的CSS代码选择一个位置。
①添加到文档头：将布局的CSS代码添加到要创建的页面头中。
②新建文件：将布局的CSS代码添加到新的外部CSS文件，并将新的样式表附加到要创建的页面中。
③链接到现有文件：指定当前页面使用的现有CSS文件。
单击【附加CSS文件】窗格上方的【附加样式表】图标并选择一个现有的CSS样式文件。
2.保存网页如果网页编辑完成或已经告一段落，需要保存，根据不同的需要，保存的方法也不同。
◆打开【文件】菜单，要保存当前文档选择“保存”命令；◆如果当前文档已经保存过，可选择“另存为”命令；◆如果在编辑时已经打开了多个文档，希望将所有的文档进行保存，则选择“保存全部”命令。
五、设置页面属性（边操作边讲解）1.设置背景属性操作步骤：①单击修改→页面属性命令菜单，打开“页面属性”对话框。
单击背景下拉列表框，在弹出的色盘中，用吸管吸取一个颜色。
②在“页面属性”对话框中，单击“应用”按钮，此时，对话框不会消失，可以看到“编辑区”的背景颜色发生改变，页面背景颜色设置完毕。
