《射界很好》PPT课件.ppt

本章要点 一个成功的网页，不仅要有丰富、有趣的内容，而且还要有清晰、美观的页面布局，这样才能吸引网民的注意。 表格是很有用的网页设计工具。利用表格可以控制文本和图像在页面上出现的位置。为了简化用表格进行布局的过程，Dreamweaver提供了【布局】模式。在这种模式下，可以很轻松地使用表格作为基本结构进行页面布局，同时可以避免传统模式下使用表格进行布局的缺陷。,制作表格,在表格中添加内容,设置表格属性,使用布局模式布局页面,使用表格布局页面,预备知识,网页制作基本操作 制作Excel表格,本章学习目标： 掌握表格的基本使用方法 熟悉表格的属性设置 制作表格的导入、排序与导出 创建布局表格和单元格 熟练布局表格和单元格属性设置 掌握框架的实际运用,布局表格的使用方法,布局单元格的使用技巧,3.1 创建表格,执行【插入】【表格】命令。 在实际应用中，嵌套表格是应用的很广泛的。将光标移到一个单元格内，然后按照上面的步骤，新插入一个表格。,插入表格,在网页中，表格除了具有组织数据的功能，还可以清晰地以列表的形式显示网页中的元素，使浏览者一目了然。另外，表格还能进行页面布局。平时在网上浏览时看到的排列整齐的页面，在很大程度上就是利用表格进行布局的。,3.1 创建表格,在Dreamweaver中可以向单元格中输入文本，插入图像或其他各种元素。 如果输入的文本过长，单元格会自动扩展。,在表格中添加内容,3.1 创建表格,选中表格 鼠标单击表格边框 在表格内单击鼠标右键，执行【表格】【选择表格】命令 单击表格的任意位置，然后在菜单中执行【修改】【表格】【选择表格】命令,选中表格元素,3.1 创建表格,选中一个或多个单元格 将鼠标置于单元格中，沿任意方向拖动 按住Ctrl键的同时单击其他单元格 按住Shift键的同时单击其他单元格,选中表格元素,3.1 创建表格,选中行或列 将鼠标移到该行或列的左侧或上边，单击即可选中行或列,选中表格元素,3.1 创建表格,将鼠标指针移动到表格的控制柄上，拖动即可 在表格【属性】面板的【宽】 和【高】文本框中，直接输入数值来精确调整。,调整表格大小,3.1 创建表格,执行【文件】 |【导入】|【表格式数据】命令 执行【插入】|【表格对象】|【导入表格式数据】命令,导入表格数据,3.2 格式化表格,选中表格，打开如图所示面板。如果想要看到该表格的所有属性，可以单击其右下角的扩展按钮图标。,设置表格属性,通过设置表格的属性，可以有效地改变表格的外观，从而充分发挥表格的布局作用。,3.2 格式化表格,选中单元格，打开如图所示面板。,设置单元格属性,3.2 格式化表格,如果要提高制作表格的效率，可以使用Dreamweaver预置的表格格式。首先选中整个表格，然后执行【命令】 |【格式化表格】命令。如图所示。,使用预先设计的格式化表格,3.3 课堂练习3-1：表格的导入、排序与导出,导入Excel表格,本节主要讲述在Dreamweaver中导入一个Excel文档”学习成绩表”，然后对“学习成绩表”中的“总分”进行排序，最后再将排序好的表格导出为文本文件的全部过程。具体的操作步骤如下： （1）单击【文件】【导入】【Excel文档】命令，在弹出的对话框中，选择Excel文档“学习成绩表”，然后单击【打开】按钮，即可导入如图所示的表格。,（2）选中该表格，然后单击【命令】【排序表格】选项，打开如图3-25所示的对话框。在该对话框的【排序按】列表框中选择【列7】，因为表格中的“总分”为第7列。在【顺序】列表框中选择【按数字顺序】并且按【升序】排列，勾选【完成排序后所有行颜色保持不变】复选框，然后单击【确定】按钮，即可得到如图3-26所示的表格。 （3）如果要将该表格导出为文本文件，首先将鼠标置于表格的任意单元格中 。,图3-25 【排序表格】对话框,图3-26 对“总分”进行排序,（4）然后单击【文件】【导出】【表格】命令，打开如图3-27所示的对话框。在该对话框的【定界符】列表框中，根据需要选择一种分隔符，接着在【换行符】列表框中，选择将要导出文件的操作系统，有Windows、Mac和UNIX三个选项。 （5）然后单击【导出】按钮，即可打开如图3-28所示的对话框。,图3-27 【导出表格】对话框,图3-28 【表格导出为】对话框,（6）在该对话框中，为导出的表格确定目标位置以及文件名，在【文件名】中输入xuexicjb.txt，单击【保存】按钮即可得到如图所示的文本文件。,导出为文本文件,3.4 对表格的操作,复制及粘贴单元格 增加和删除表格行与列 拆分、合并单元格,3.5 课堂练习3-2：利用表格制作产品报价单,本节主要讲述在Dreamweaver中利用表格来组织数据，从中体会到运用表格可以是的网页上的数据排列更有条理、更美观。具体的操作步骤如下：,（1）新建空白文档，将【文档】工具栏上的【标题】改为产品报价单。然后插入一个8行4列的表格。如图所示。,3.5 课堂练习3-2：利用表格制作产品报价单,（2）选中第一行的4列单元格，执行【表格】| 【合并单元格】命令，输入标题“产品报价单”，并设置文字格式。,3.5 课堂练习3-2：利用表格制作产品报价单,（3）输入文字并将其居中，然后在表格【属性】面板中，将【填充】设置为5。,3.5 课堂练习3-2：利用表格制作产品报价单,（4）执行【命令】|【格式化表格】命令，打开【格式化表格】 对话框，选择一种样式，并在下面的【边框】中输入1，单击确定按钮 。,3.6 应用【布局】模式设计网页,对于初学者来说，还没有表格的设计经验，要想使用表格设计出布局合理的页面，往往会适得其反。为了简化利用表格布局页面，Dreamweaver中就特意提供了一种新的【布局】模式，可以轻松的在页面中绘制布局表格以及单元格。并且可以方便地设置其属性或者会期进行移动等操作。该模式既具有表格的准确定位的特点，又具有层的可移动性的特点。布局表格可以有一定的固定宽度，也可以占据整个浏览器窗口。,3.6 应用【布局】模式设计网页,在【插入】工具栏中，单击其左边的 【常用】按钮，选择 【布局】选项。单击其中的 【布局】按钮，会弹出一个 【从布局模式开始】的提示对话框。如图所示。,在【布局】模式中创建表格和单元格,3.6 应用【布局】模式设计网页,在【布局】选项卡中，单击【布局表格】按钮，鼠标会变为“十”形状。按住左键进行拖动，页面中将会出现带有绿色边框的表格。如图所示。,创建布局表格,3.6 应用【布局】模式设计网页,在【布局】选项卡中，单击【布局单元格】按钮，鼠标会变为“十”形状。按住左键进行拖动，页面中将会出现带有蓝色边框的单元格。在页面中绘制的单元格，必须在表格中创建。如图所示。,创建布局单元格,3.6 应用【布局】模式设计网页,添加布局单元格内容,在【布局】模式中为单元格添加文本和图象的操作，类似于【标准】模式中的添加操作。如果添加的内容大于单元格的尺寸时，单元格会自动扩大以适应内容。如图所示。,3.6 应用【布局】模式设计网页,调整布局表格和单元格,为了使整个网页的布局效果更加美观，就需要对布局表格和单元格进行调整。移动布局表格和单元格的方法是：单击表格或单元格，然后拖动至合适的位置。调整布局表格和单元格的方法是：单击表格或单元格，然后拖动表格上的控制柄即可。,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,在【布局】模式下，表格和单元格的宽度格式分为两种：固定宽度和自动伸展。固定宽度是一个指定的数字，例如：500像素；而自动伸展取决于窗口的大小，它是以单元格占浏览器窗口的百分比为单位，显示为波浪线。使用表格设计页面时，通常将页面中某些内容所在的表格和单元格设置为固定宽度，而其他的设置为自动伸展宽度，以保证固定宽度的单元格内容总能够显示在浏览器中。,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,在【布局】模式下，在属性面板的【固定宽度】中输入宽度值即可。如果输入的值小于内容的宽度，则会弹出对话框，提示单元格宽度不够。,1. 设置表格的固定宽度,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,在【布局】模式下，在属性面板中选中【自动伸展】单选按钮，可以将其设置为自动伸展。首次设置时，会弹出如下对话框，询问如何建立间隔图文件。,2. 设置表格的自动伸展宽度,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,间隔图像是一种浏览器中不显示的透明图像，它可以用来控制自动伸展表格的间隔。如果在伸展宽度表格中不选择间隔图像，固定宽度列的大小会改变，当它里面没有内容的时候甚至不会显示。 在列中插入间隔图或者设置一列为自动伸展宽度时，会弹出上图所示的对话框。如果已经设置好间隔图的话，该对话框就不会出现。,3. 使用间隔图,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,如果要在某一列中插入间隔图,单击列底部的黑色下三角，选择【添加间隔图像】命令。添加到页面中的间隔图是不显示的，只是起到固定单元格宽度的作用。,3. 使用间隔图,3.6 应用【布局】模式设计网页,设置表格和单元格宽度格式,如果要删除间隔图像,单击列底部的黑色下三角，选择【删除间隔图像】命令。表格中所有的间隔图像都会被移去。,3. 使用间隔图,3.6 应用【布局】模式设计网页,修改布局表格和单元格的属性,选中要修改的布局表格或者单元格，然后通过其属性面板即可进行修改。,3.8 框架,在网页设计中，框架可以划分Web页面，将整个窗口分割成几个不同的小窗口，各窗口可以包含不同的网页，而且在替换窗口中的网页文件时，各个窗口之间没有影响。最典型的框架应用就是在顶部或者左侧的框架窗口中设置链接标题，而链接的内容部分出现在右侧的框架窗口中。,3.8 框架,框架由框架集和框架两部分组成。框架集是在文档内定义一组框架结构的HTML网页。,创建框架集,在制作框架之前，先单击【查看】| 【可视化助理】| 【框架边框】命令，将框架的边框属性设置为可见。 确定要插入框架的位置，然后执行【插入】| 【HTML】| 【框架】命令，在弹出的子菜单中选择想要的框架格式。,3.8 框架,创建框架集,在【插入】工具栏的【布局】选项卡中，单击【框架】右侧的向下箭头，在弹出的下拉菜单中选择框架格式。,3.8 框架,保存框架,框架页面制作完成后，每个框架区域中都会显示一个页面，所以保存时要将所有的文档都保存，浏览器才能够正确地显示。 执行【文件】| 【保存全部】命令，将保存所有的文件。,3.8 框架,选中框架和框架集,首先执行【窗口】|【框架】命令，打开框架面板。在【框架】面板中单击某个框架，即可选择该框架。,3.8 框架,为框架添加内容,将插入点放置在要添加内容的框架中，执行【插入】|【图像】命令。 将插入点放置在要添加内容的框架中，直接输入文字内容，或者把其他文档中的内容直接复制并粘贴过来。,3.9 设置框架和框架集属性,将插入点放置在框架中，在【属性】面板中选择【页面属性】命令。,设置框架背景颜色,3.9 设置框架和框架集属性,使用框架属性面板可以查看和设置框架属性，包括命名框架、设置边框、链接和边框等。,设置框架属性,3.9 设置框架和框架集属性,使用框架集属性面板可以设置边框和框架大小。设置框架属性会覆盖在框架集中设置的相应属性。,设置框架集属性,3.10 使用链接控制框架内容,选择文本或对象，在属性面板的【链接】文本框中，输入要链接的文件名。 在【目标】下拉菜单中，为链接的文档选择一个目标。 _blank 在新的浏览器窗口中打开被链接文档 _parent 在链接所在的父框架中打开链接文档 _self 在当前框架打开链接 _top 在当前文档最外层框架中打开链接,3.11 课堂练习3-4 框架制作实例,（1）在【插入】工具栏的【布局】选项卡中，单击【框架】按钮，选择【顶部和嵌套的左侧框架】选项。,3.11 课堂练习3-4 框架制作实例,（2）选中最上面的框架，在【属性】面板中将其命名为top，设置【滚动】为否，【边框】为否，并且启用【不能调整大小】复选框。,3.11 课堂练习3-4 框架制作实例,（3）选中左侧的框架，在【属性】面板中将其命名为left，设置【滚动】为否，【边框】为否，并且启用【不能调整大小】复选框。,3.11 课堂练习3-4 框架制作实例,（4）选中右侧的框架，在【属性】面板中将其命名为main，设置【滚动】为自动，【边框】为否。,3.11 课堂练习3-4 框架制作实例,（5）设置上框架背景颜色为#EFE485, 输入标题，并设置其文字属性。,3.11 课堂练习3-4 框架制作实例,（6）在左侧框架中插入一个8行1列的表格，表格宽度为156像素。将【对齐】设置为居中， 【背景颜色】设置为#FFFFCC。最后插入4张导航图片。设置框架【背景颜色】为#DBDFD5.,3.11 课堂练习3-4 框架制作实例,（7）选中第一张图片，在属性面板中添加链接。选择一个已经制作好的网页文档，并在【目标】栏中选中m