网页制作教程PPT

第9章Dreamweaver的表格和网页版面设计,2020/4/26,1,本章知识技能要点：,表格在网页中的作用表格的创建与编辑利用表格对页面进行布局利用布局试图对页面进行布局Dreamweaver中框架的创建方法超链接框架目标的指定框架和框架页的基本操作,2,9.1网页中的表格,表格是现代网页制作的一个重要组成部分。表格之所以重要是因为它不仅仅可以有传统意义上的用法，更重要的是时可以用于实现网页的精确排版和定位。,如图示，一张表格横向叫行，纵向叫列。行列交叉部分叫做单元格。,3,“插入”工具栏“常用”类别中的“表格”按钮“插入”菜单下的“表格”命令,9.1.1在网页中插入表格,4,1.添加行/列当插入点位于表格的最后一个单元格中时，按Tab键会自动在表格的最后另外添加一行。“修改”菜单“表格”“插入行”命令“修改”“表格”“插入行或列”命令,9.1.4.4添加、删除行或列,5,3.删除行或列在要删除的行或列中的任意单元格中单击，然后选择“修改”菜单“表格”“删除行”或“删除列”命令。选择完整的一行或一列，然后按Delete键或选择“编辑”“清除”命令。,6,1.合并单元格选择连续的矩形单元格区域，然后后选择“修改”菜单“表格”“合并单元格”命令，或者单击属性检查器中的“合并单元格”按钮，可将所选择的多个单元格合并为一个单元格。2.拆分单元格在要拆分的单元格中单击，选择“修改”菜单“表格”“拆分单元格”命令，弹出“拆分单元格”对话框，如图9-11。在“把单元格拆分”选项组中指定要将单元格拆分为行还是列，然后在“行数”（当选择拆分为行时）或“列数”（当选择拆分为列时）数值框中输入所需数值。,9.1网页中的表格,7,9.1网页中的表格,8,9.2.1布局模式“插入”栏“布局”类中的“布局模式”按钮，进入布局模式。“布局表格”按钮“绘制布局单元格”按钮。,9.2用表格布局网页,9,9.2用表格布局网页,10,9.2.4更改布局表格和布局单元格的属性设置布局表格的属性使用布局表格的属性检查器。如图:,9.2用表格布局网页,设置布局单元格的属性使用布局单元格的属性检查器。如图:,11,框架就是把一个浏览器窗口划分为若干个独立的子窗口，每一个窗口可分别载入不同的网页文件。这里介绍利用Dreamweaver8实现框架页面。,9.3框架网页的制作,12,9.3.1新建框架集选择“文件”“新建”，在“新建文档”对话框中，选择“框架集”类别，从“框架集”列表选择合适的框架集，如图。点击“创建”，弹出“框架标签辅助功能属性”对话框。,9.3框架网页的制作,或者单击“插入”工具栏“布局”类别中的“框架”按钮，在弹出的下拉菜单中选择所需的框架类型，即可在页面上插入相应的框架。,13,9.3.2创建嵌套框架先在页面中创建一个框架，将插入点置于要创建嵌套的框架区域，再次执行创建框架的操作。9.3.3为各个框架区命名选择“窗口”菜单“框架”，弹出“框架”面板如图。从框架面板可知，系统对三个框架生成命名。左框架名为：leftFrame，上框架名为：topFrame，右框架名为：mainFrame。当然可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。9.3.4编辑框架页面对框架页面的编辑与对普通页面的编辑相同，包括输入文本、插入图像、添加表格和表单的方法都是相同的。此外，还有一种比较简便的编辑框架的方法，即先创建好整个框架集中各部分框架页面，然后将其直接拖动至框架集中对应的部分。,9.3框架网页的制作,14,9.3框架网页的制作,15,16,17,9.3.5保存框架选择“文件”菜单点击“保存全部”。系统弹出“另存为”对话框。这时，文档的三个区域被周围一圈阴影线框围住。说明保存的是一个框架结构文件。按照惯例可以命名为index.htm。点击“确定”之后，又弹出了新一个“另存为”对话框，此时文档窗口左下方的区域被阴影线框围住。说明保存的是左下方区域的网页文档。点击“确定”之后，又弹出了新一个“另存为”对话框，此时文档窗口上方的区域被阴影线框围住。说明保存的是上方区域的网页文档。,9.3框架网页的制作,18,9.3.6设置框架及框架集的属性设置框架集的属性：单击框架面板中框架的边框，选择框架集，然后在属性检查器中设置此框架集的属性。若要在网页中显示框架边框，一定要选择属性面板中的“边框”列表的值为“是”。然后方可设置边框的颜色和边框的粗细。如图。,9.3框架网页的制作,19,设置框架的属性：单击框架面板中单击某一框架区域，即可在页面中选择此框架，然后可在属性检查器中设置其属性。这里可以：在“框架名称”处为框架更名；在“源文件“处为所选框架区域指定显示的网页文档：在“滚动”处设置浏览时是否显示滚动条：如果“不能调整大小”被勾选，浏览时各个区域的大小将不可调整“边界宽度”和“边界高度”指框架中的内容与其边框的空白间隙的大小。,9.3框架网页的制作,20,9.3.7超链接框架目标的指定如果希望网页上的超级链接在指定的框架区域内显示，就要为这个超级链接指定目标框架。事项的方法是：选中这个超级链接对象（例如图示的文字“学习心得”），在属性面板上的“链接”栏里，指定所要链接的文档，在“目标”栏展开的下拉列表里，选择链接的文档在哪个框架区域里打开。如图所示。“目标”栏展开的下拉列表里后面的三项就是当前框架集文档所包含的三个框架区域的名称。,9.3框架网页的制作,21,9.3框架网页的制作,22,Iframe标记,Iframe是指在网页文档中间，以框架形式显示其他网页文档、主页、记事本和公告板的功能。即在无框架状态下，表现了框架功能。,23,Iframe标签,利用iframe，表现框架效果,24,9.4练习题,1创建网页并制作如图示的表格。,25,2在页面中插入如图（b）所示效果的表格，该表格边框为0，其图（a）所示为设计时状态。,9.4练习题,（a）,（b）,26,3在网页文档中制作如图所示的页面布局模式。,9.4练习题,27,4使用表格布局方法，制作具有如图所显示效果的网页。,9.4练习题,28,