第二课

用表格实现网页布局

在上一节中,你已经建立了一个属于自己的网站。

既然网站有了,下面的问题就是建设网页了。

要装点自然先照顾一下门面页:首页 index.html

下面笨笨熊介绍一下建立网页的开端,也就是进行网页的整体布局设计。

完成一个网页的制作,如何实现内容的合理分配是很重要的。而在网页中可以实现布局的包括表格和框架。

在本节中先介绍用表格来规划网页的方法,也是设计网页中最重要的方法。

1>Table / Draw Table,如果你的编辑界面中没有表格手绘工具

通过这个菜单你可以在窗口的最左边找到它们。

当然你也可以使用菜单命令来完成表格的绘制。不过毕竟用手绘工具比较方便一些。

2>点击工具按钮区中左下的“绘笔”工具,这时鼠标在网页中会变成一只笔。直接在网页中拖动即可。

3>当然表格包围的部分就是内容分布的地方了。

现在你已经建立了一个整体的大表格了。

4>要想很好的定位内容,还要对表格进行分割或行列的插入或是删除。

5>在表格内右击:splits cells,在弹出的窗口中设定是:split into columns(分割成列)或是split into rows(分割成行),然后在下面的输入框中输入分割的数字:如2

6>当然你还可以通过插入行列实现同样的效果。

在表格内右击:insert column(插入列)insert rows(插入行)

7>再有就是完成表格单元的合并。

用鼠标选定需要合并的两个或是更多的单元格

右击:选merge cells

8>通过上面的操作你已经对单元格的操作有所了解了

下面需要的就是关于单元格及表格属性的设定了。

9>先看看表格整体属性的设定。

在表格内右击,在随后弹出的菜单内选Table properties(表格属性)

Float:left/right:设定表格在网页中的位置。

Border size:边框宽度:可以设为0

cell padding:表格单元到表格边框距离。可以为0

cell spacing:表格内容到表格单元的距离,可以为0

background color:在这里你可以使用背景颜色或是直接使用背景图片。

border color:在边框不为0的情况下的颜色。

右边的height 和 width是表格单元的高度和宽度。

另外在指定表格宽高时,你可以选择使用像素Pixels或是比例显示percent,它们将控制在IE浏览器窗口没有完全打开时的网页显示效果。

10>下面说说单元个的属性设定。

其实单元格的属性主要是关于单元格内容的位置定位问题。

除了关于单元格背景的设定外,很重要的一点是单元格内容的位置,通过两个属性来实现的:

hori(简写):定位内容的左右分配的。

vertical:定位内容的上下分配的。

其他的就是类似表格设置中的边框颜色。等等了。

好了,想想关于表格的问题基本上就这些了。

以后的工作只有你自己努力了。

 

  《我要起步网》提供 笨笨熊/文

 

上一页

目录

下一页

◆制作——阿帕奇


想要更多的免费电子图书,请光临

http://www.eshunet.com/