《网页传统设计》PPT课件.ppt

1,第5章 网页传统设计,前面章节所介绍的各种网页元素在网页中的插入，均是直接插入。这时生成的网页，其中的文本或者图像会随着IE窗口的放大或者缩小发生变化，这使得网页处于不稳定状态。要想改变这种情况，最简单的方法就是使用表格。表格不仅能够控制网页在IE窗口中的位置，还可以控制网页元素在网页中的显示位置，这样无论IE窗口如何变化，其中的网页都会保持默认的状态。,本章学习要点：,2,创建表格编辑表格资源管理器库元素模板网页,5.1 表格建立,3,表格具有归纳的作用，在Dreamweaver中，表格除了具有上述作用外，还具有定位与组合作用。这样才能够将网页元素，定位在网页中任何想要显示的区域中。所以说，网页设计就是从创建表格开始，而表格的创建可以为后来的网页设计奠定基础。,5.1.1 创建各种表格,4,对于较为复杂的网页图像来说，并不是只有一个表格组成，而是有多个表格，甚至包括表格中的表格组合而成，也就是嵌套表格。嵌套表格，顾名思义就是在表格中插入表格。这样一来，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。各司其职，互不冲突。,1插入表格,2插入嵌套表格,5,1插入表格,在网页中插入表格的方法非常简单，在【插入】面板中，单击【常用】选项卡中的【表格】按钮，在弹出的【表格】对话框中设置相应的参数，即可插入表格。,6,2插入嵌套表格,要想插入嵌套表格，首先要插入表格，然后将光标放置在表格中，使用插入表格的方法插入嵌套表格即可。,5.1.2 在表格中插入网页元素,为了使网页中的元素能够有序地、按照要求显示在IE窗口中，在插入文本或者图像之前，插入表格是最好的解决方法。在表格中插入文本或者图像的方法与直接在网页中插入方法是基本相同的，只是在插入之前，需要将光标放置在表格中即可。,7,8,1在表格中输入文本,在输入文本之前，首先插入一个1行1列表格。然后将光标放置在表格中，即可输入文本。,9,2在表格中插入图像,图像的插入与文本输入顺序相同，都是先插入表格后，将光标放置在表格中，按照图像插入方法在表格中插入图像。,5.2 设置表格属性,表格是由单元格组成的，即使是一个最简单的表格，也是由一个单元格组成。而表格与单元格的属性完全不同，选择不同的对象，【属性】检查器中的属性选项就会显示相应的选项参数。,10,5.2.1 表格属性,当插入表格后，该表格同时被选中。而在【属性】检查器中，则显示表格的基本属性，比如表格整体、行、列和单元格。,11,5.2.2 单元格属性,由于一个最简单的表格中包括一个单元格、一行与一列，所以将光标放置在表格中后，其实是将光标放置在单元格，也就是选中了单元格。这时【属性】检查器中显示的是单元格属性。,12,5.2.3 表格标签,表格是一种复杂的XHTML元素。在使用Dreamweaver创建和编辑表格时，应了解表格的XHTML标签结构，从而更有效地控制和使用表格显示数据。一个XHTML表格通常多种嵌套的XHTML标签组成。,13,常见的表格标签,5.3 编辑表格,由于Dreamweaver是一个可视化操作的软件，所以表格的属性除了能够在【属性】检查器中设置外，还能够通过鼠标进行改变，并且进行某些【属性】检查器无法完成的操作，比如选中表格、复制与粘贴单元格等。,14,5.3.1 选中表格元素,在设置表格属性时发现，将光标放置在表格中，【属性】检查器中显示的是单元格属性，而不是表格属性，这说明选中的是单元格，而不是表格。创建一个表格，既包含其本身，还包含单元格、行与列元素，而这些元素的选择方法各不相同。,15,5.3.2 调整表格大小,当选中整个表格后，在表格右下角区域显示3个控制点，分别通过这3个控制点能够将表格横向、纵向或者整体放大。,16,5.3.3 合并及拆分表格元素,当创建的表格不符合要求时，可以通过合并或者拆分单元格来改变单元格的数量，其中，删除或者增加表格的行与列同样能够改变单元格的数量。,17,18,1删除和增加表格行与列,要想删除表格中的行，而不影响其他行中的单元格，可以将光标放置在想要删除行的其中一个单元格中，然后执行【修改】|【表格】|【删除行】命令,19,2合并及拆分单元格,删除或者增加行与列，就会删除或者增加整行或者整列的单元格。如果只需要一个单元格时，合并或者拆分单元格是最快捷的方法。,5.3.4 复制及粘贴单元格,表格中的单元格除了能够进行添加与删除等操作，还可以像文本、图片一样能够被复制与粘贴，并且可以在保留单元格格式化的情况下，复制并且粘贴多个单元格。表格中的单元格既可以覆盖现有的单元格，也可以生成新的表格。,20,5.4 管理网页元素,建立网站经常会使用非常多的网页元素，比如图像与多媒体等，以及建立的网页，如何有效管理这些网页和网页元素成为一件令人非常头疼的事情。在Dreamweaver中有一种功能，即资源管理。使用该功能，设计者可以方便地管理站点的每一种资源。,21,5.4.1 认识和编辑资源,【资源】面板是用于组织站点资源的主要工具，它包括可重复使用的内容片段，比如库项目。在该面板中，可以跟踪和预览站点中存储的资源，比如图像、影片、颜色、脚本和链接。还可以直接拖动某个资源，将其插入到当前文档的某一页中。,22,5.4.2 使用收藏列表方式管理资源,在【资源】面板中，站点列表和收藏列表对资源的绝大多数操作是一样的。但是，有些比较特殊的任务只能在收藏列表中完成，这是因为【资源】面板中的站点列表一般显示的是站点中所有能识别的资源。对于一个大型站点来说，列表将会显得臃肿。因此，可以将经常使用的资源添加到收藏列表中，这样能够重点管理相关的资源。,23,3在【收藏】列表中创建资源,2在【收藏】列表中管理资源,1在【收藏】列表中添加资源,5.4.3 在站点中应用资源,通过【资源】面板，可以将大多数资源直接插入到文档中，而资源中的颜色与URL元素既可以插入文档中，也可以应用于文本或者图像。,24,1将资源添加到文档,在【资源】面板中，图像、Flash、视频等元素可以直接插入文档中。,25,2使用资源面板将URL应用于图像或文本,【资源】面板中的URL同样可以应用于图像或者文本，只要选中文本后，将【资源】面板中的URL元素选中，单击面板底部的【应用】按钮即可。,5.4.4 库元素,任何标签内的对象，比如文本、表格、表单、图像、插件和ActiveX等控件都可以作为库元素。当创建了一个库元素后，Dreamweaver会在当前站点的根目录下自动创建一个库文件夹Library，以后生成的库元素都将自动放在该文件夹内,26,1基于选定内容创建库项目,如果想将现有网页文档中的某些元素创建为库项目，首先在文档中选中该元素，然后直接单击【新建库项目】按钮，即可创建库项目。,27,2设置库属性,3编辑库项目和更新站点,当将网页中的某个元素转换为库项目后，选中该库项目，【属性】检查器中显示的是库项目的基本属性。,当没有选中任何网页元素时，在【资源】面板的【库】元素中，创建的库项目是一个空白库项目，其中没有任何网页元素。要想应用该库项目必须为其添加、编辑库项目；或者将网页文档中的元素转换为库项目后，也可以再次编辑库项目，而更改后的库项目可以更新所在网页文档。,5.5 模板网页,模板是一种特殊类型的文档，用于设计固定的页面布局，并且能够基于模板创建文档，而创建的文档会继承模板的页面布局。这样在后期修改网页时，可以修改模板网页，而所有基于该模板创建的网页会同时被更新。,28,5.5.1 创建模板,模板实际上也是文档，它的扩展名是.dwt，存放在根目录的Templates文件夹中。模板文件夹并不是原来就有的，它只是创建模板的时候才自动生成。在Dreamweaver中有两种建立模板的方法，一种是建立一个新的空白模板，另一种是将一个已经存在的网页另存为模板。,29,30,1创建空白模板,在Dreamweaver中创建空白模板，与创建普通的网页方法相同，执行【文件】|【新建】命令，在【新建文档】对话框的默认【空白区】选项卡中，选择【页面类型】列表中的【HTML模板】选项，即可创建一个空白模板。,31,2将现有文档保存为模板,在Dreamweaver中想要将现有的网页另存为模板，首先要打开已有的网页文档，然后执行【文件】|【另存为模板】命令，设置模板名称后，网页文档转换为模板文档。,5.5.2 编辑模板,模板文档只是一个制作网站网页的样板，所以模板中有些区域是不能编辑的，称为锁定区，确保网页风格的统一性；有些区域则是可以编辑的，称为可编辑区，这样才可以制作出不同的网页内容。,32,33,1定义可编辑区域,2定义重复区域,在默认情况下，新创建的模板所有区域都处于被锁定状态。因此要使用模板，必须将模板中的某些区域设置为可编辑区域。,重复区域是模板的一部分，这一部分可以在基于模板的页面中重制多次。重复区域通常与网页元素一起使用，,34,3定义可选区域,4定义可编辑标签属性,可选区域是模板中的区域，可将其设置为在基于模板的文档中显示或者隐藏。Dreamweaver中包括两种可选区域对象：一个是单纯的可选区域；一个是可以编辑的可选区域。,可编辑标签属性是根据模板创建的文档中修改指定的标签属性，例如在模板文档中设置背景颜色，但仍允许为创建的页面设置不同的背景颜色。,5.5.3 应用模板,创建模板文档后，就可以基于该模板创建具有统一风格的不同信息内容的网页。得到的网页还可以从模板文档中分离，形成独立的网页文档。,35,1从模板创建文件,2在现有的文档中应用模板,3从模板中分离文档,4编辑区域类型,5修改模板并更新站点,