dreamweaver cs5第一次课教案

第一讲初识网页制作工具——

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）状态栏

位于文档窗口的底部，从中可以查看正在创建的文档的有关信息。其中“标签选择器”显示环绕当前选定内容的标签的层次结构。若单击该层次结构中的任何标签，则选定该标签全部内容。如单击状态栏的标签，则选择中文档中整个正文。“缩放工具”可以设置当前页面的缩放比率。状态栏右侧显示当前页面的文档大小和估计下载时间。

（6）【面板组】

是将相同类型或功能的面板组织在一起构成的。面板组中绝大多数的面板是折叠的，若要打开某一面板，只需要单击每个面板标题栏上。若再次单击可以将其折叠。面板组内的面板显示方式多为选项卡方式。

三、定义站点（边操作边讲解）

站点是一个管理网页文档的场所，简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。

1.创建站点

在Dreamweaver工作环境下，单击菜单栏中的【站点】\【新建站点】命令。这种创建站点的方法是通过向导完成的，非常直观。

（1）单击菜单栏中的【站点】\【新建站点】命令，弹出“站点定义”对话框，在第二个号文本框中，会出现站点储存的默认位置，或者在下面的文本框中指定一个存储位置，Dreamweaver将在其中存储站点文件。

（6）单击保存按钮，则通过向导建立了一个本地站点。

2．添加网页文件与站点文件夹

新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。

在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：

①在【文件】面板中，右键单击“站点”根目录，则弹出一个快捷菜单。

②选择快捷菜单中的【新建文件】命令，则新建了一个网页文件。

③同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。

四、创建和保存网页（边操作边讲解）