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）状态栏位于文档窗口的底部，从中可以查看正在创建的文档的有关信息。
其中“标签选择器”显示环绕当前选定内容的标签的层次结构。
若单击该层次结构中的任何标签，则选定该标签全部内容。
如单击状态栏的<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.设置背景属性操作步骤：①单击修改→页面属性命令菜单，打开“页面属性”对话框。
单击背景下拉列表框，在弹出的色盘中，用吸管吸取一个颜色。
②在“页面属性”对话框中，单击“应用”按钮，此时，对话框不会消失，可以看到“编辑区”的背景颜色发生改变，页面背景颜色设置完毕。
Dreamweaver第一次课学案
Dreamwever课的学案一、定义站点1.创建站点单击菜单栏中的【站点】\【新建站点】命令。
（1）单击菜单栏中的【站点】\【新建站点】命令，弹出“站点定义”对话框，在弹出的对话框中输入站点的名字，在第二个号文本框中，会出现站点储存的默认位置，或者在下面的文本框中指定一个存储位置，Dreamweaver将在其中存储站点文件。
（2）单击保存按钮，则通过向导建立了一个本地站点。
2．添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。
根据站点的规划，需要向其中添加网页文件或站点文件夹。
网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。
在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：①在【文件】面板中，右键单击“站点”根目录，则弹出一个快捷菜单。
②选择快捷菜单中的【新建文件】命令，则新建了一个网页文件。
③同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。
二、创建和保存网页1.创建新文档（1）创建空文档。
【文件】/【新建】，打开【新建文档】对话框。
在【空白页】类别中从【页面类型】列表选择【HTML】，【布局】中选择【无】，即可创建一个纯HTML空白页。
（2）创建应用CSS布局的文档。
选择【文件】/【新建】，在【新建文档】对话框的【空白页】选项卡中从【页面类型】列表选择要创建的页面类型。
如果从【布局】列表中选择一个预设的CSS布局，将创建一个包含预设CSS布局的页面。
从【页面类型】列表中选择【HTML】、【HTML模板】等，右侧的【布局】列表中显示相应的文档布局类型。
预设的CSS布局类型有：①固定：列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。
②弹性：列宽是以相对于文本大小来决定的。
如果访问者更改了文本设置，该列的宽带将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。
项目一初识Dreamweavercs5(上机)2
项目一网页制作基础任务二初识Dreamweaver CS5一、教学目标1、知道创建站点。
2、掌握创建网站的首页及子页。
二、学生特征分析学生利用Dreamweaver cs5软件，尝试创建站点，首页、子页，并制作一个简单的首页页面。
三、课型实训课四、教学重点创建一个网站站点：名称为“青春我美丽”。
五、教学难点创建一个首页，另创建子页名称为“新闻、文章、下载、图片”。
六、课前准备机房七、课时安排2课时（45分钟×2）八、教学过程1、复习思考与组织教学初步创建站点，首页、子页及首页页面。
2、引入新课老师先讲解步骤方法及演示引入课题。
3、讲授新课在首页中编辑内容《见素材》。
1、准备好网页素材。
2、创建青春我美丽的站点。
3、创建子页“新闻、文章、下载、图片”并在主页中编辑内容。
4、保存并用浏览器浏览网页看其较果。
如下图所示。
4、巩固深化尝试建立首页页面。
5、课堂小结A、教学内容与时间分配：第一节课：一、在软件中定义站点（10分钟）二、在软件中管理站点（10分钟）三、网站文档的基本操作（25分钟）第二节课上机操作（45分钟）B、教学活动：通过软件功能解析深入学习软件功能和制作特点。
C、教师活动：通过软件相关功能的解析学习Dreamweaver CS5工作界面的基本操作和设置文件头的基本方法。
D、学生活动：除了课堂讲解的软件功能外，还可以根据相关的工具特点进行简单的练习和操作。
布置作业上机作业（见素材）。
九、板书设计十、教学反思我和学生一起学习了怎样建立一个自己的站点，并且在自己的站点内建立一张网页，然后在这张网页内输入文字、插入图片、设置网页背景等，并进行一些格式的设置。
但仍然有一小部分学生没有完成，于是我就查看了一下学生的来源，发现有的学生初中来自农村中学，动手能力相对较差一点。
Dreamweaver cs5标准实例教程配套全册教学课件
2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面 板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数 据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉 列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序， 从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档； 不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章 网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工 具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了 网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站 网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及 链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单 地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过 超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计 中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的， 当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用 户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。
Dreamweaver网页制作课件教案第1章
通过本章的学习，您可以：
Dreamweaver CS5的新增功能。 工作界面的构成及各菜单栏、工具栏、插入栏和浮动面板的功能与作用。 文件的打开、创建和存储的基本方法。
1.1 Dreamweaver CS5的新功能
集成CMS支持 CSS 检查 启用/禁用CSS 集成Adobe BrowserLab PHP 自定义类代码提示 站点特定的代码提示 与 Business Catalyst 集成 增强的CSS起始布局 增强的Subversion支持 简化的站点设置 保持跨媒体一致性 动态相关文件
第1章 网页制作基础知识
本章重点
本 章 介 绍 Dreamweaver CS5 中 文 版 的 基 础 知 识 ， 内 容 包 括 ： Dreamweaver CS5的新增功能和安装，简单介绍其用户界面以及创建与保存 文件的方法等。Dreamweaver CS5是著名影像处理软件公司Adobe推出的最 新网页设计制作工具，是继Dreamweaver CS5之后的升级版本，是目前最完 美的网站制作工具。
1.2.6 浮动面板
在Dreamweaver CS5工作环境的右侧存在着浮动面板。浮动面板中包括了“CSS 样式”面板、“AP元素”面板、“代码片段”面板、“参考”面板、“数据库”面 板、“绑定”面板、“服务器行为”面板、“组件”面板、“属性”面板、“行为” 面板、“历史记录”面板、“框架”面板、“标签检查器”面板、“文件”面板和 “资源”面板等。
1.2.1 菜单栏 1.2.2 文档工具栏 1.2.3 “插入”面板
1.2.4 文档窗口
设计视图 代码视图 拆分视图（垂直拆分/水平拆分）
1.2.5 属性面板
属性面板分成上下两部分。不同的对象有不同的属性，因此选中不同对象 时，属性面板显示的内容是不相同的。单击面板右下角的三角形按钮可以关闭 属性面板的下部分。
项目一初识Dreamweavercs5(理论)1
项目一网页制作基础任务一初识Dreamweaver CS5一、教学目标1、了解网页制作软件。
2、掌握创建本地站点。
二、学生特征分析学生利用Dreamweaver cs5，学会创建站点、首页、子页、制作一个简单的页面，利用它学生可以方便快捷地制作出美观大方、功能齐全的网页，这也是学生将要学习的主要内容。
三、课型理论课四、教学重点了解网页制作软件工作界面组成。
五、教学难点创建本地站点。
六、课前准备多媒体七、课时安排2课时（45分钟×2）八、教学过程(一)、导入在Dreamweaver CS5中有哪几种方法可以创建站点？同时本地站点与远程站点有什么区别？（5分钟）（二）、新授认识Dreamweaver：一、打开DM：开始—程序—Adobe Dreamweaver—Adobe Dreamweaver CS4二、认识DM：标题栏、菜单栏、工具栏、编辑栏、状态栏、面板。
工具栏：视图—工具栏—插入/文档/标准。
面板：窗口—相应面板。
折叠面板/展开面板。
三、网页制作步骤：创建文件—设置标题—编辑内容—保存文件—浏览器查看效果。
浏览网页：1、在编辑状态下，按F12浏览。
2、保存文件，打开浏览器，打开文件浏览。
站点操作：一、新建站点：方法：1、站点—新建站点；2、站点—管理站点—新建—站点；3、文件面板—站点下拉菜单—管理站点—新建—站点步骤：方法1：基本选项—给站点命名—不使用服务器—确定站点存储位置（选择已有文件夹或新建文件夹）--选择无远程服务器—完成。
方法2：高级选项—输入站点名称—选择本地根文件夹位置（选择已有文件夹或新建文件夹）二、编辑站点：方法：1、站点—管理站点—选择站点—编辑—修改站点名称或存储位置；2、文件面板—站点下拉菜单—管理站点—选择站点—编辑—修改站点名称或存储位置。
三、复制站点：方法：1、站点—管理站点—选择站点—复制；2、文件面板—站点下拉菜单—管理站点—选择站点—复制。
四、删除站点：方法：1、站点—管理站点—选择站点—删除；2、文件面板—站点下拉菜单—管理站点—选择站点—删除。
网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
DreamweaverCS5网页设计教程课程设计
Dreamweaver CS5网页设计教程课程设计一、教学目标本课程的主要目标是：1.了解网页设计的基本原理与规范。
2.掌握Dreamweaver CS5的使用方法和网页设计技巧。
3.能够独立完成基本网页设计与制作。
二、教学内容2.1 网页设计概述本章主要介绍网页设计的概念和原理，阐述网页设计的规范和流程。
包括以下内容：1.网页设计的概念和作用。
2.网页设计的规范和流程。
3.网页设计中常用的设计软件和工具介绍。
2.2 Dreamweaver CS5入门本章主要介绍Dreamweaver CS5的基本界面和功能，让学生熟悉Dreamweaver CS5的基本操作。
包括以下内容：1.Dreamweaver CS5的安装和界面介绍。
2.Dreamweaver CS5的基本功能介绍。
3.Dreamweaver CS5的基本操作。
2.3 网页设计基础本章主要介绍网页设计的基础知识和技巧，包括页面布局、图片处理、文字处理和颜色搭配等。
包括以下内容：1.页面布局的概念和方法。
2.图片处理和文字处理的技巧。
3.颜色搭配的原则和方法。
2.4 网页设计实战本章主要介绍如何使用Dreamweaver CS5实现网页设计，通过实战让学生熟练掌握Dreamweaver CS5的使用和网页设计的流程。
包括以下内容：1.Dreamweaver CS5实现网页设计的流程。
2.网页设计实战案例介绍和指导。
3.指导学生独立完成网页设计任务。
三、教学方法本课程采用教师授课和学生实践相结合的教学方法。
具体包括：1.教师讲课。
2.演示Dreamweaver CS5的使用。
3.学生模仿和操作。
4.学生独立完成网页设计任务。
四、考核方式本课程的考核方式主要采用网页设计实战任务和学生作业。
具体包括：1.网页设计实战任务：由教师给出网页设计题目，要求学生独立完成。
任务要求设计符合规范、美观大方的网页，并在规定时间内提交。
2.学生作业：要求学生根据教师课堂讲解和演示，完成与课程相关的作业。
《DreamweaverCS5网页设计》课件
第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏 来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章 制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板
第1章目录
13／183
Dreamweaver CS5网页设计案例教程1
“插入”面板
6.更完整CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网
页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，
需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供 辅助说明。Dreamweaver CS5就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“类” 选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应 用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS5中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上 的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点 中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程 站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访 问它们。
开始页面
“首选参数”对话框
2.不同风格的界面
Dreamweaver CS5的操作界面新颖淡雅，布局紧凑，为用户提供了一 个轻松、愉悦的开发环境。 若户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择 “窗口 > 工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器” 或“设计器”命令，选择其中的一种界面风格，页面会发生相应的改变。
1.2 创建网站框架
操作目的 操作步骤
相关工具
1.2.1 操作目的
通过打开效果文件，熟练掌握打开命令。通过复制效果，熟练
Dreamweaver CS5网页制作基础教程-教学大纲
《Dreamweaver CS5网页制作基础教程》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS5界面的组成2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握添加和设置文本、图像和媒体的方法5、掌握创建和设置超级链接的方法6、掌握创建、编辑表格及其属性设置方法7、掌握使用框架创建网页的方法8、掌握使用Div和CSS样式布局网页的方法9、掌握使用模板和库创建网页的方法10、掌握使用行为的基本方法11、掌握使用表单设计网页的方法12、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章网页制作基础∙ 了解与网页有关的一些常用名词术语。
∙ 了解HTML和CSS的一些基本知识。
∙ 了解Dreamweaver CS5的工具栏和功能面板。
∙ 掌握Dreamweaver CS5设置首选参数的方法。
第2章旅游网站站点设计∙ 了解旅游网站的基本知识。
∙ 了解站点规划的基本知识。
∙ 掌握定义和管理站点的基本方法。
∙ 掌握创建文件夹和文件的基本方法。
第3章旅游网站文本设置∙ 掌握设置页面属性的方法。
∙ 掌握插入文件头标签的方法。
∙ 掌握添加文本和特殊对象的方法。
∙ 掌握设置字体属性的方法。
∙ 掌握设置段落属性的方法。
第4章旅游网站CSS样式设置∙ 了解CSS速记规则与普通规则的区别。
∙ 了解设置CSS样式首选参数的方法。
∙ 了解CSS类型等属性的基本涵义的设置技巧。
∙ 掌握创建、编辑、管理和应用CSS样式的方法。
第5章旅游网站CSS和Div布局设计∙ 了解常用的页面布局类型和技术。
∙ 掌握插入和编辑Div标签的基本方法。
∙ 掌握使用CSS+Div布局页面的基本方法。
∙ 掌握创建和设置AP Div的基本方法。
∙ 掌握使用Spry布局构件的基本方法。