笨象表格Word文档格式.docx
《笨象表格Word文档格式.docx》由会员分享,可在线阅读,更多相关《笨象表格Word文档格式.docx(12页珍藏版)》请在冰豆网上搜索。
480分辨率(图3),单击状态栏上的窗口尺寸箭头,在弹出的列表中选择“600×
300(640×
480),Maximized”,窗口就小了,做出的网页在640×
480分辨率下会显示正常,编辑区大小为600×
300,我们编辑的网页宽度就定为600,高度可以大些,在浏览器中显示时会有竖直滚动条。
图3 设置页面尺寸
我们看一下网页的布局,共有三个主要表格,最上面的表格放置logo图标和banner广告条,中间的表格为主要栏目切换条,最下面的表格为网页正文。
根据网页布局,我们先来制作最上面的表格。
单击“对象面板”中的插入表格图标,弹出“InsertTable”对话框(图4)。
设置行数(Rows)为1,列数(Columns)为2,表格宽度(Width)为590Pixels,表格线宽度(Border)为0,另两个选项“CellPadding”表示表格内文本与表格线的距离,“CellSpacing”表示表格单元格之间的距离,这里我们不做设置,单击“OK”,表格就插进来了。
图4 “插入表格”对话框
将光标定位在表格的第一个单元格内,可以看到状态栏左侧的标签选择器处显示为“{body}{table}{tr}{td}”,其中table表示表格,tr表示表格中的行,td表示单元格,现在td被加粗显示,说明光标处在单元格内。
单击一下{table},标签选择器处显示为“{body}{table}{tr}{td}”(图5),再看编辑区内的表格,表格周围为一圈黑线,表示表格被选中了,四周还有几个黑色的小方块,是表格拖放手柄,可以用来改变表格的大小。
图5 用标签选择器选择表格
选中表格后,我们查看一下属性面板,可以看到刚刚设置的一些表格属性,行数(Rows)为1,列数(Cols)为2,表格宽度(W)为590Pixels。
以后要改变表格的属性,就可以在属性面板中进行了(图6)。
图5 表格的属性面板
按Ctrl+S,将此文件保存在D盘myweb文件夹下。
接下来我们在表格中插入图形。
在第一个单元格内单击,然后按下Ctrl+Alt+I键,弹出插入图片对话框,选择事先做好的logo图片,单击“Select”,图片就插到第一个单元格中了。
在属性面板中可以看到,此图片宽度为170像素,我们可以将第一个单元格的宽度也调整为170像素宽。
按一下右方向键,光标就定位在第一个单元格中了,这时属性面板中显示的是第一个单元格的属性,我们在宽度输入框中填入170,再敲一下回车,第一个单元格就刚好容纳下所插图形了。
同样,我们可以在第二个单元格中插入Banner图形,第一个表格就做好了(图7)。
图7 点击可看到浏览效果
(2)制作第二个表格
下面我们制作栏目切换条。
这是一个一行、五列的表格,我们用上面的方法插入,表格的宽度也设为590Pixels,Border为1,单元格间距“CellSpacing”为0(图1)。
图1 “插入表格”对话框
将光标定位在某一单元格中,按下Ctrl+A键,选中所插入的表格,在属性面板中设置表格高度(H)为20Pixels(图2)。
图2 表格的属性
下面我们进行各种颜色设置,使表格有背景色和立体效果。
先设置表格背景色,单击属性面板的最下排颜色选择按钮“Bg”,从弹出的颜色列表中选择一种绿色(#A3C06D)。
接下来设置表格边框高亮度效果(LightBrdr)的颜色,单击颜色选择按钮,从颜色列表中选择一种深颜色,这里我们选择“#003300”,用同样方法设置表格阴影效果(DarkBrdr)颜色为#FFFFFF,表格就变成了这个样子(图3)。
图3 在属性面板上设置立体效果
我们把最后一个单元格背景设置为另一个颜色,表示此项为当前激活的选项。
在最后一个单元格内单击鼠标,此时属性面板变为当前单元格的属性,用上面的方法设置背景颜色为#CCCC33,这里再告诉你一个选择颜色的方法,当单击颜色选择按钮后,鼠标指针变为一个吸管的样子,这时就可以在屏幕上吸取颜色了,你可以直接到我们的例子中吸取所需颜色。
如果你懒得这样做,就直接在颜色输入框中键入“#CCCC33”(图4)。
图4 设置单元格背景
你可能会问这样一个问题,最后一个单元格刚才是绿色,现在又是黄色了,这是怎么回事?
这要从表格(table)、表格行(tr)和单元格(td)的格式的优先级说起。
如果我们同时对表格、表格行和表格单元格设置了不同格式,比如设置了不同的背景颜色,那么那一个优先显示呢?
其优先级为:
表格单元格>
表格行>
表格,也就是td>
tr>
table,所以这里我们将此单元格的颜色设置为黄色,而将整个表格颜色设置为绿色,则在整个表格中只有这个单元格颜色为黄色,其他单元格颜色都为绿色。
最后我们在此表格内加上文字和相应的链接,第二个表格就完成了(图5)。
图5 点击可看到浏览效果
(3)表格的嵌套
在这个例子中,下面部分是一个大表格,这个表格共有三行两列,一些单元格中还插入了一个新的表格。
下面我们开始制作,先在第二个表格下插入一个三行两列,宽为590Pixels的表格。
先看看这条红线是怎么做出来的。
在第一行第一个单元格内单击,然后向右拖动鼠标,将第一行的两个单元格选中,按下M键,选中的单元格被合并为一个单元格(图1)。
图1 合并单元格
在属性面板中,设置此行高度H为1,背景颜色为红色。
再按下Ctrl+Tab键,调出HTML源代码编辑窗口,显示光标所在位置的源代码为:
我们将单元格内的占位字符“&
nbsp;
”删除,关闭HTML编辑窗口,表格第一行就显示为一条红线了(图2)。
图2 用表格产生红线
下面我们制作中间左侧的栏目。
在第二行第一个单元格内单击鼠标,设置此单元格宽度为110Pixels,然后在此单元格内插入一个表格。
按下Ctrl+Alt+T键,设置行数(Rows)为6,列数为1,border=0,单击宽度(Width)后面的下拉列表,从中选择“Percent”(百分比),在文本框中输入100,单击“OK”,所插入的表格刚好充满第一个单元格(图3)。
图3 在单元格中嵌套表格
注意:
嵌套表格的宽度受表格单元的限制,也就是说所插入的表格宽度不会大于容纳它的单元格宽度,即不会大于110Pixels。
比如我们现在看一下表格内的单元格有多宽,可以将光标定位在第一个单元格内,然后单击属性面板下的这个
按钮,就会将表格宽度从百分比相对值转换为实际像素值,可以看到单元格宽度为108Pixels,再点一个旁边的
按钮,又将表格宽度转换为百分比相对值(图4)。
图4 表格宽度值的转换
你可能要问,为什么单元格宽度不是110Pixels呢?
这是因为表格线本身宽度为1,两侧框线就占去了2个像素,所以单元格实际宽度为108Pixels。
在计算表格或单元格宽度和高度时应该注意这一点。
我们刚插入的表格添加背景图。
选中此表格,在属性面板中单击背景图选项右侧的图标(图5),弹出图片选择对话框,选一个带过渡色的横条图片,这个图片就被平铺在表格内了。
图5 给表格添加背景图
注意,这个图片是事先处理好的,其宽度与表格宽度相同(图6)。
图6 点击可看到浏览效果
好了,你可以在这个子表格内写上文字,设置字的大小为2,居中对齐,并加上链接。
其中“报刊杂志”条目不用加链接,字的颜色也可设置得不同,表示当前页面属于此条目。
最后一个内插入一个动态Gif图,在图的属性中,设置Alt为“给我来信”,链接为“mailto:
ketang.pc@”,这样在浏览器中,单击此图,就会启动发送邮件窗口,便于网友直接给你来信。
图7 加入邮件链接
好,最后再看一下页面吧!
(图8)
图8 点击可看到浏览效果
(4)表格的编辑
我们再来制作右侧的表格。
在主表格第二行的第二个单元格内插入一个七列四行的表格,表格宽还是100%Percent,边框的高亮颜色为黑色,边框的阴影颜色为白色,表格线宽度为1,背景色为#E9FCDA,这就是完成后的效果(图1)。
图1 点击可看到浏览效果
各列的宽度可以根据需要进行调整,方法是将鼠标指针置于列间的竖线上,鼠标指针变为左右双向键头,按下鼠标左键拖动就可以改变列宽了(图2)。
图2 改变列宽
如果想让所有的列都一样宽,可以设置各列宽度,这里有四列,所以可以先将鼠标指针置于表格上面,当鼠标变为向下箭头时单击,就可选中此列,然后设置此列宽度为25%Percent,用同样的方法设置其他列的宽度也占表格总宽度的25%,所有列就都一样宽了。
里面的内容和链接就由你自己完成了。
因为这个表格是页面的主体内容,行和列数都可能会调整,比如内容又增加了不少,我们该如何操作呢?
如果要添加一行,可以将光标定位在表格内的某一行内,单击鼠标右键,在弹出的菜单中选择“Table”下的“InsertRow”,就在光标所在行的上面增加了一个空白行(最简便的方法是按下Ctrl+M键)。
如果想在表格最下面添加一行,可以将光标定位在末行的最后一个单元格内,按一下Tab键就可以了。
同样,我们利用右键菜单中的Table->
InsertColumn命令增加列。
要是增加的行数或列数较多,有更方便的方法,在表格框线上单击,将表格选中,在属性面板中显示当前表格行数为7,列数为4,我们直接将或改为行数为15,列数为5,回车。
如果要删除某一行或某一列,那就很简单了。
比如我们要将某一行删除,可将鼠标指针放在该行的左框线处,鼠标指针变为一个向右的黑箭头,按一下鼠标,该行就被选中了(图3),按一下“Delete”键,这一行就被删除了。
图3 合并单元格
同样,要删除某一列,可以将鼠标放在表格上面的框线上,当鼠标变为向下箭头时,单击选中某一列,按“Delete”就将选中列删除(图4)。
图4 合并单元格
利用鼠标拖动也可以选中几行或几列,选中的行或列可以进行复制、剪切或删除等操作。
这些操作都很简单,这里就不多讲了。
(5)完成整个页面
好,页面的大部分都设计完成了,还有下面这个表格,如果你已经听明白了,就可以跳过去不听了,如果想加深印象,就再跟我完成它。
将光标定位在最后一行的某一单元格中,然后点一下标签选择器中的{tr},标签选择器显示为“{body}{table}{tr}{td}”,表示此行被选中,单击属性面板中的合并单元格按钮
,此行变为一个单元格。
在此单元格内插入一个一列二行的表格,选定表格,在属性面板中设置表格对齐方式Align为居中对齐(Center),设置其宽度为60%(图1)。
图1 设置表格对齐方式
然后将光标定位在第一行内,单击属性面板中的拆分单元格
按钮,弹出“SplitCell”对话框(图2),选择“Columns”,表示拆分为列,单击“OK”