dreamweaver cs5第一次课教案.doc

第一讲 初识网页制作工具—— Dreamweaver cs5的基本功能及操作 授课题目：初识网页制作工具——Dreamweaver cs5的基本功能及操作 教学资源：多媒体、Internet 授课方式：讲授、操作 课时安排：2个课时 教学目标： 认识Dreamweaver cs5的基本界面，了解各菜单、面板的组成； 能够进行创建、管理站点的操作； 能熟练地建立新网页，并能在网页中熟练地插入文字、并对页面属性进行设置； 能在网页中熟练地插入表格、图片、视频、动画，并能对其进行相关设置； 熟练的应用CSS、超链接。 教学重点： 站点的建立。 表格的使用 CSS样式的创建 超链接的应用 教学难点： 站点的建立 表格、图片的插入 CSS、超链接的应用 教学过程： 一、网页和网站（通过举例讲解） 网页实际上是一个文件，网页经由网址来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。 网站是各种网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有的网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页。 按网页的表现形式可将网页分为静态网页和动态网页。 静态网页：指用HTML语言编写的网页。 动态网页：这类网页使用ASP、PHP等程序生成，具有动态效果。 注意：静态网页和动态网页不是以网页中是否包含动态元素区分的，而是针对客户端与服务器是否发生交互而言，不发生交互的是静态网页，发生交互的是动态网页。 按网站内容可将网站分为四种类型：门户网站、个人网站、专业网站和职能网站。 门户网站：这类网站是一种综合性网站，涉及领域非常广泛。如搜狐、网易等。 个人网站：具有较强个性化，是以个人名义开发创建的。 专业网站：这类网站具有很强的专业性，通常只涉及某一个领域。 职能网站：具有专门的功能，如政府职能网站等。 网页布局类型 （1）左右对称结构布局 左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。 （2）“同”字型结构布局 “同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主 体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。 （3）“回”字型结构布局 “回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪。 （4）“匡”字型结构布局 和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构。 （5）自由式结构布局 以上4种结构是传统意义上的结构布局。自由式结构布局的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作。 （6）封面型 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。 这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。 二、Dreamweaver CS5的工作界面（边操作边讲解） 和以前的版本相比，Dreamweaver?CS4的界面几乎被完全颠覆，可以说是做了一次脱胎换骨的改进，类似苹果操作系统的界面，操作更加简洁，从中看到了更多的设计元素。另外，Dreamweaver CS5的工作区非常灵活，用户可以根据自己的习惯进行定制，并且可以快捷地创建代码规范的应用程序。首次启动Dre