第一讲 初识网页制作工具——
Dreamweaver cs5的基本功能及操作
授课题目：初识网页制作工具——Dreamweaver cs5的基本功能及操作 教学资源：多媒体、Internet 授课方式：讲授、操作 课时安排：2个课时 教学目标：
1. 2. 3. 4. 5.
认识Dreamweaver cs5的基本界面，了解各菜单、面板的组成； 能够进行创建、管理站点的操作；
能熟练地建立新网页，并能在网页中熟练地插入文字、并对页面属性进行设置； 能在网页中熟练地插入表格、图片、视频、动画，并能对其进行相关设置； 熟练的应用CSS、超链接。
教学重点：
1. 2. 3. 4.
站点的建立。 表格的使用
CSS样式的创建 超链接的应用
教学难点：
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文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。 在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下：
①在【文件】面板中，右键单击“站点”根目录，则弹出一个快捷菜单。 ②选择快捷菜单中的【新建文件】命令，则新建了一个网页文件。
③同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。
四、创建和保存网页（边操作边讲解）
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.设置背景属性 操作步骤：
①单击修改→页面属性命令菜单，打开“页面属性”对话框。单击背景下拉列表框，在弹出的色盘中，用吸管吸取一个颜色。
②在“页面属性”对话框中，单击“应用”按钮，此时，对话框不会消失，可以看到“编辑区”的背景颜色发生改变，页面背景颜色设置完毕。
③设置背景图像。在“页面属性”对话框中，在“背景图像”文本框中输入图像的地址或单击“浏览”按钮，在本地硬盘浏览选择要插入的图片，单击确定按钮。 ④然后单击应用按钮，可以看到图像自动平铺铺满整个网页。 2.设置文字属性
网页中用不同的文字颜色来标示不同的内容，可以帮助浏览者更为方便、快捷地浏览网站。 操作步骤：
①在“页面属性”对话框中，在“文本颜色”框中选择网页普通文本的颜色，在“链接颜色”框、“已访问链接”框中设置不同的颜色。 3.设置页面边距
“左边距”、“由边距”两个属性是针对IE浏览器，用于设置整个页面距离浏览器左侧边缘的宽度以及整个页面距离浏览器顶部边缘的高度，以像素为单位。 操作步骤：
在“页面属性”对话框中，输入像素值，单击确定即可。
六、文本（边操作边讲解）
文本在网页中具有举足轻重的地位。文本内容充实，可以吸引众多的浏览者；文本编辑处理得当，可以使浏览者在获得信息的同时感到赏心悦目，这对于提高站点的浏览次数极为重要。向网页中输入文本以后，可以进行文本的格式、对齐方式等的设置。 1.文本的输入
可以在文档窗口中直接键入文本，也可以复制、剪切并粘贴文本，还可以从其他文档导入文本。如果要将其他文本格式粘贴到DW中，可以使用【粘贴】或【选择性粘贴】命令。 【选择性粘贴】允许用户以不同的方式指定所粘贴文本的格式。如将文本从带格式的Word文档粘贴到DW文档中时，如果想要去掉文本原有格式，可以使用【选择性粘贴】命令选择只粘贴文本的选项。
在编辑窗口中输入所需的文本。如需换行分段，可以按下Enter键；如需换行但不分段，可以按住Shift键的同时按下Enter键。
可通过插入——HTML——特殊字符——不换行命令，在文中插入多个空格，实现首行缩进的效果； 可以通过【插入】/【日期】，打开【插入日期】对话框，选择日期格式，实现日期的插入。 2.设置文本格式
在网页中输入文本以后，可以根据需要设置文本属性。选择要编辑的文本，在【属性】面板里可以设置文本的各种格式。
注意：选中文本，在【属性】面板中，对段落中的文本进行对齐、缩进、添加段落间距、项目列表和编号列表等格式化设置。
七、图像（边操作边讲解）
在网页中除了文本以外，应用最广泛的就是图像了，使用图像不但可以美化网页，还可以作为超链接的源端点，可谓一举两得。在Dreamweaver中，既可以使用动态图像，也可以使用静态图像，但无论使用哪种图像，首先要考虑文件的大小，例如，使用静态图像时最好使用GIF、JPG或PNG格式的图像，因为这些图像的体积相对较小。 1.插入图像
在网页中插入图像时有两种情况：一种情况是图像已经规划在站点中；另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内，插入图像时将弹出一个提示框，提示用户将图像复制到站点中。 插入图像的操作比较简单，只要在编辑区中，将光标移至要插入图像的地方，单击菜单栏中的【插入】\\【图像】命令，或者在【插入】工具栏的【常用】标签中单击图像选项即可。 2．设置图像属性
插入到网页中的图像可以通过【属性】面板设置其属性，如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性，首先要选择网页中的图像，这时【属性】面板将显示图像的属性。
八、表格（边操作边讲解）
在Dreamweaver CS5中，表格除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，即将网页中的元素放到表格的单元格中进行网页排版，因此它是控制页面整体布局的重要工具。 1．插入表格
在网页中插入表格的操作步骤如下：
（1）在网页中要插入表格的位置处定位光标。
dreamweaver cs5第一次课教案
