dreamweaver cs5第一次课教案.docVIP

第一讲 初识网页制作工具 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等程序生成，具有动态效果。注意：静态网页和动态网页不是以网页中是否包含动态元素区分的，而是针对客户端与服务器是否发生交互而言，不发生交互的是静态网页，发生交互的是动态网页。 按网站内容可将网站分为四种类型：门户网站、个人网站、专业网站和职能网站。u 门户网站：这类网站是一种综合性网站，涉及领域非常广泛。如搜狐、网易等。u 个人网站：具有较强个性化，是以个人名义开发创建的。u 专业网站：这类网站具有很强的专业性，通常只涉及某一个领域。u 职能网站：具有专门的功能，如政府职能网站等。网页布局类型（1）左右对称结构布局左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适。（2）“同”字型结构布局“同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主 体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷。（3）“回”字型结构布局“回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪。 （4）“匡”字型结构布局和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构。（5）自由式结构布局 以上4种结构是传统意义上的结构布局。自由式结构布局的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作。（6）封面型 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。二、Dreamweaver CS5的工作界面（边操作边讲解） 和以前的版本相比，DreamweaverCS4的界面几乎被完全颠覆，可以说是做了一次脱胎换骨的改进，类似苹果操作系统的界面，操作更加简洁，从中看到了更多的设计元素。另外，Dreamweaver CS5的工作区非常灵活，用户可以根据自己的习惯进行定制，并且可以快捷地创建代码规范的应用程序。首次启动Dreamweaver CS5时系统会弹出如图所示的工作设置对话框。 DreamweaverCS5的工作界面包括：菜单栏、文档工具栏、编辑区、属性检查器、面板组等部分组成，而插入栏则整合在面板组中。（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.保存网页 如果网页编辑完成或已经告一段落，需要保存，根据不同的需要，保存的方法也不同。u 打开【文件】菜单，要保存当前文档选择“保存”命令；u 如果当前文档已经保存过，可选择“另存为”命令；u 如果在编辑时已经打开了多个文档，希望将所有的文档进行保存，则选择“保存全部”命令。五、设置页面属性（边操作边讲解）1. 设置背景属性操作步骤：单击修改页面属性命令菜单，打开“页面属性”对话框。单击背景下拉列表框，在弹出的色盘中，用吸管吸取一个颜色。在“页面属性”对话框中，单击“应用”按钮，此时，对话框不会消失，可以看到“编辑区”的背景颜色发生改变，页面背景颜色设置完毕。设置背景图像。在“页面属性”对话框中，在“背景图像”文本框中输入图像的地址或单击“浏览”按钮，在本地硬盘浏览选择要插入的图片，单击确定按钮。然后单击应用按钮，可以看到图像自动平铺铺满整个网页。2.设置文字属性 网页中用不同的文字颜色来标示不同的内容，可以帮助浏览者更为方便、快捷地浏览网站。操作步骤：在“页面属性”对话框中，在“文本颜色”框中选择网页普通文本的颜色，在“链接颜色”框、“已访问链接”框中设置不同的颜色。3. 设置页面边距“左边距”、“由边距”两个属性是针对IE浏览器，用于设置整个页面距离浏览器左侧边缘的宽度以及整个页面距离浏览器顶部边缘的高度，以像素为单位。操作步骤：在“页面属性”对话框中，输入像素值，单击确定即可。六、文本（边操作边讲解） 文本在网页中具有举足轻重的地位。文本内容充实，可以吸引众多的浏览者；文本编辑处理得当，可以使浏览者在获得信息的同时感到赏心悦目，这对于提高站点的浏览次数极为重要。向网页中输入文本以后，可以进行文本的格式、对齐方式等的设置。1.文本的输入 可以在文档窗口中直接键入文本，也可以复制、剪切并粘贴文本，还可以从其他文档导入文本。如果要将其他文本格式粘贴到DW中，可以使用【粘贴】或【选择性粘贴】命令。 【选择性粘贴】允许用户以不同的方式指定所粘贴文本的格式。如将文本从带格式的Word文档粘贴到DW文档中时，如果想要去掉文本原有格式，可以使用【选择性粘贴】命令选择只粘贴文本的选项。在编辑窗口中输入所需的文本。如需换行分段，可以按下Enter键；如需换行但不分段，可以按住Shift键的同时按下Enter键。可通过插入HTML特殊字符不换行命令，在文中插入多个空格，实现首行缩进的效果；可以通过【插入】/【日期】，打开【插入日期】对话框，选择日期格式，实现日期的插入。2.设置文本格式 在网页中输入文本以后，可以根据需要设置文本属性。选择要编辑的文本，在【属性】面板里可以设置文本的各种格式。注意：选中文本，在【属性】面板中，对段落中的文本进行对齐、缩进、添加段落间距、项目列表和编号列表等格式化设置。七、图像（边操作边讲解） 在网页中除了文本以外，应用最广泛的就是图像了，使用图像不但可以美化网页，还可以作为超链接的源端点，可谓一举两得。在Dreamweaver中，既可以使用动态图像，也可以使用静态图像，但无论使用哪种图像，首先要考虑文件的大小，例如，使用静态图像时最好使用GIF、JPG或PNG格式的图像，因为这些图像的体积相对较小。 1.插入图像在网页中插入图像时有两种情况：一种情况是图像已经规划在站点中；另一种情况是图像位于站点之外。如果在建站前期没有将图像规划在站点之内，插入图像时将弹出一个提示框，提示用户将图像复制到站点中。插入图像的操作比较简单，只要在编辑区中，将光标移至要插入图像的地方，单击菜单栏中的【插入】【图像】命令，或者在【插入】工具栏的【常用】标签中单击图像选项即可。2设置图像属性插入到网页中的图像可以通过【属性】面板设置其属性，如改变图像的大小、建立超链接、设置对齐方式等。要设置图像的属性，首先要选择网页中的图像，这时【属性】面板将显示图像的属性。 八、表格（边操作边讲解） 在Dreamweaver CS5中，表格除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，即将网页中的元素放到表格的单元格中进行网页排版，因此它是控制页面整体布局的重要工具。1 插入表格在网页中插入表格的操作步骤如下：（1）在网页中要插入表格的位置处定位光标。（2）在【插入】工具栏中选择【常用】标签，单击其中的表格选项，则弹出【表格】对话框。 （3）在对话框中进行选项设置。 【行数】和【列】：用于设置插入表格的行数和列数。 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与浏览器窗口的宽度将保持相同的百分比。 【边框粗细】：用于设置表格的边框宽度。 【单元格边距】：用于设置表格中单元格内的元素距离单元格边框的距离。 【单元格间距】：用于设置表格中单元格之间的间距。 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 【摘要】：用于描述表格的相关信息。 （4）单击确定按钮，即可在网页中插入表格， 在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。2 表格的编辑操作插入到网页中的表格、单元格可以进行各种编辑操作，如选择、拆分与合并、复制、删除等。选中整个表格。将光标指向表格边框，当光标变成双向箭头形状时单击鼠标，可以选择整个表格。选中表格后，在表格的底边框和右边框将出现三个小方块。 单击状态栏中的标签，也可以选中整个表格。 选中表格的列。将光标移至表格其中一列的上方，当鼠标指针变为向右的黑色小箭头时，单击鼠标，可以选择一列单元格。按住鼠标左键左右拖曳，可以选择连续的多列单元格。 选中表格的行。将光标移至表格其中一行的左侧，当鼠标指针变为向右的黑色小箭头时，单击鼠标，可以选择一行单元格。按住鼠标左键上下拖曳，可以选择连续的多行单元格。另外，单击状态栏上的标记，可以选择光标所在的一行单元格。选中一个或多个单元格。将光标定位在一个单元格中，按住 Ctrl键的同时单击鼠标，即可选中鼠标所在的单元格，或者多个其他的单元格，另外，单击标签，可以选择光标所在的单元格。将鼠标移至要选定的第一个单元格中，然后按住Shift键的同时单击最后一个单元格，可以选择二者之间的连续单元格。合并单元格的操作步骤如下： 选择表格中要合并的多个相邻的单元格。 单击【属性】面板中的合并按钮，即可将所选单元格合并为一个单元格，原单元格中的内容将组合为一组存放在合并后的单元格中。拆分单元格的操作与合并单元格操作正好相反，它是将一个单元格拆分为几个连续的单元格，其基本的操作步骤如下：将光标定位在要拆分的单元格中。单击【属性】面板中的拆分按钮，则弹出【拆分单元格】对话框。在话框中选择要将单元格拆分成的行或列，并设置相应的行数或列数。单击确定按钮，即可拆分单元格，原单元格中的内容将保留在拆分后的左上角单元格中。插入或删除行或列的操作步骤如下： 选择表格的行、列或单元格后，单击鼠标右键，则弹出快捷菜单。选择【表格】子菜单中的相应命令，可以插入或删除行或列。选择【插入行】命令，可以在所选单元格的上方插入一行单元格。选择【插入列】命令，可以在所选单元格的左侧插入一列单元格。选择【插入行或列】命令，则弹出【插入行或列】对话框。在对话框中进行选项设置，即可插入多行或多列单元格。 选择【删除行】命令，可以删除所选的一行单元格。选择【删除列】命令，可以删除所选的一列单元格。 在表格中插入图片、表格、文本将光标移至要插入图像的单元格中，单击菜单栏中的【插入】【图像】命令，或者在【插入】工具栏的【常用】标签中单击插入图像选项即可。将光标移至要插入表格的单元格中，单击菜单栏中的【插入】【表格】命令，或者在【插入】工具栏的【常用】标签中单击插入表格选项即可。将光标移至新插入表格的单元格中个，通过键盘直接在单元格中输入文字，或通过其他文档采用“复制粘贴”的方法将文字输入到单元格中。3设置表格的属性如果插入到网页中的表格不能满足网页设计的需要，可以通过设置表格的属性进行调整。选择要设置属性的表格区域(可以是整个表格、一行或一列或一个单元格)后，在【属性】面板中设置其相应的属性。九、应用多媒体（边操作边讲解）随着多媒体技术的发展，网页已由原先单一的图片、文字内容发展为多媒体相集合的表现形式。在网页中应用多媒体技术，如音频、视频、Flash动画动画等内容，这样增强网页的表现效果，使网页更生动，激发访问者兴趣。1. 在网页中添加声音相信读者会有这样的经历，在浏览一个制作精美的网页时，豁然听到一段抒情的乐曲或一段感人心腑的音乐，会让人在欣赏到悦目制作的同时身心同时受到洗礼，从而对网页流连忘返。音乐能让网站增添无穷的魅力，在网页中添加声音有两种方式：“添加音频”、“添加背景音乐”。（1） 插入音频在网页中插入音频时，考虑到下载速度、声音效果等因素，一般采用rm或mp3格式的音频，系统会生成默认的播放器。在编辑区，将光标移到要插音频的位置上单击“插入媒体插件”命令菜单，在弹出的“选择文件”对话框中，选择要插入的音频，单击确定。在相应的位置出现插入的插件，在属性检查器中可以对其进行设置。（2） 添加背景音乐背景音乐，就是在加载页面时，自动播放预先设置的音频，可以预先设定播放一次或重复播放等属性。单击窗口行为菜单，打开行为面板，单击按钮，在下拉菜单中选择“播放声音”，在弹出的播放声音对话框中单击浏览，选择需要的音频，单击确定。选中插件，在属性检查器中单击参数，在弹出的对话框中可以看到四个参数，其中LOOP是指循环播放，“autostart”是指自动播放，“hidden”是指隐藏插件，将各个参数的值改为true，单击确定。2. 插入视频在编辑区，将光标移到要插视频的位置上单击“插入媒体插件”命令菜单，在弹出的“选择文件”对话框中，选择要插入的视频频，单击确定。3. 插入Flash Flash动画中的元素都是矢量的，可以随意放大，都不会降低画面质量，此外Flash动画文件小，适合在网络上使用，Flash动画的扩展名为“.swf”。在编辑区，将光标移到要插Flash的位置上单击“插入媒体swf”选项，选择要插入的文件，单击确定，在属性检查器中可以设置动画的宽、高等属性。十、定义C