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