分享
 
 
 

FrontPageXP全透视教程四网页的表格和框架

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

从现在开始,咱们就正式开始学习FrontPage10中网页的设计了.首先要想作一个特色网页,布局是非常关键的.说到布局,现在有两种比较常用的方法,表格和框架.其中表格应该是最流行的方式了.随便在网上找几个网页看看,很多都是通过表格来实现的.至于框架嘛,在某些时候也是很必要的.

1,表格布局

双击文件,进入"网页编辑"窗口,默认情况下为空白的.使用菜单"Table"-"Draw table"调出表格悬浮面板,记得以前的版本中他们都是作为工具栏一部分出现的,如果你在菜单中没有发现"Draw table"项的话,请单击最下的下拉标示,这时你会在最顶层看到它.如图

关于这种菜单方式应该是Office XP系列的一个整体风格,以便突出重点的显示.

其中面板里的各个按钮的功能已经在图片上作了相应的注释,大家可以对应着看看(鼠标停留在上面,等待提示信息即可),这里不作赘述.

单击最左的"绘笔"按钮,这时鼠标会自动变成一支可以移动的笔,通过拖拉的方式你就可以在指定的位置插入表格了,下面以分类的方式介绍一些表格操作的实现:

1)调整表格或单元格大小:鼠标停留在表格边框位置,待变成一个"上下双向箭头"时拖拉即可,注意实际位置会以虚线显示出来,放开鼠标自动到位.

2)单元格的分拆及合并:等同于插入行或列的操作,鼠标定位在目标单元格内,单击面板上的拆分或合并按钮,注意只有同时选中两个或以上的单元格时合并按钮才可用.如图

选择以行(rows)或列(columns)的形式开始拆分,同时在"Number"列表里单击下拉箭头确定数目,或者干脆直接键入亦可.OK完成.需要注意的是这时每个拆分对象所继承的是母单元格的属性,因此如果有很多相同设置的话,建议在拆分前完成.

3)表格的嵌套:嵌套表格在网页设计中应该是最常见不过的了,特别是在进行复杂页面的设计时,就更少不了他们了.

其实关于表格的嵌套操作一直是Frontpage的一个弱点,即便是升级到10版本仍然使用不太方便,比如你休想用绘笔在单元格里绘制另外的一个表格,不过在10版本中你可以使用菜单"Insert"-"Table"来实现.

4)表格的转化:在上面的嵌套中,其实你还可以通过将文本对象转化成表格来变相的实现.选中文本,使用菜单"Table"-"Convert"-"Text to table".相反的操作亦可以.

除了表格的外观调整,属性设置也是非常重要的.下面从应用的角度上分析一下:

关于表格及单元格的属性设置,由于许多功能很难完全在前面的"表格面板"中实现,因此我们这里通过在各自的属性窗口中调整来实现.

1)表格属性设置

鼠标停留在表格内部的任意位置,右击选择"Table Properties",如图

Alignment:调整整个表格在网页中的位置,包括Left ,right center,Default四个选项.默认Default即为居中显示.

Float:用来设定表格元素与其他的对象的相对位置,比如在网页中表格是独占一行存在的,这时就可以通过设定Float为Left使文本位于表格的右侧.从而变相的实现图文共处.

Cell padding:表格内容离边框的远近大小,可以通过调整该项为1,从而通过嵌套表格的形式实现不同颜色边框的效果,特别是在大型的网页设计中,应用较多.

Cell spacing:表格中单元格间的距离.

Borders(sizes/color):设定表格边框的大小和颜色,在Frontpage以前的版本中,关于表格边框的利用一直是个非常薄弱的地方,主要是它不能通过设定borders颜色及大小值来形成实际效果的轮廓,也即在填充内容后偏粗很多.所以多通过前面Cell padding的方法来实现.

在这一点Frontpage10应该是作的相当出色了,除了直接实现效果外,还可避免多次嵌套表格造成网页文件的增大及传输不便.

Background:调整表格的背景颜色值.象2000中一样,Frontpage10中引入了和其他图片处理工具相似的统一颜色配置方式,这样可以很好的实现图片与网页颜色的协调.如图

单击左边色块的任意位置可以快速取色,单击"Custom"进入系统的自定义色彩窗口(同以前一样,没有变化),另外你还可以使用"取色笔"工具直接在图片对象上提取颜色,象在其他图片处理工具中一样.

需要使用背景图片作为表格背景时,请选中下面的"Use background picture"复选框,单击右侧的"Browse"按钮确定图片位置.

此外还有一个非常重要的属性就是表格大小的设定形式,这也是大家很容易忽略的,在显示效果上而言,他们是非常重要的.也即当浏览器窗口没有全屏展开时,你就能够发现两者的不同之处了.

"In persent"以比例的形式显示,这时当没有在全屏状态下,表格会自动折回以使所有内容都能显示出来,由于显示上的混乱,因此应用较少,而更多的是用代表实际大小的"In pixes"选项.

||||||2)单元格属性设置

同样在目标单元格内右击鼠标,选择"Cell properties"项,如图

Horizonal alignment:调整内容的左右位置,Vertical alignment:调整内容的上下位置.

Rows(Colunmas)Spanned:这是在Frontpage10中引入的一个新概念,即边角行或列的数目.可以形成不成规则的表格形状.其中"Header cell"复选框表示单元格内容以标题的格式来显示(居中)

其他的内容由于与前面介绍的表格属性基本相同,所以不再赘述.

2,框架布局

在上面我们花了大量的篇幅介绍了表格布局的应用对比技巧,除了表格还有一种特定需要下的布局形式-框架布局(Frame).

相对表格布局,框架的优势在于它不同的显示方式.框架能够将整个浏览窗口分成若干部分,主要包括静态部分和动态显示部分,通过点击静态窗口的链接目标从而实现在动态窗口切换显示的目的.

不过鉴于这种方式在保存上存在着诸多的不便之处,因此在大型网页设计中很少使用到.还是那句话,特定需求时可能它显得更有效.下面我们简略的介绍一下.

注意一下在Frontpage编辑窗口的菜单中包含一个"Frame"的独立菜单,但如果当前网页中不包含框架的话,该菜单中所有子菜单项均会处于"不可用"状态.

单击"Task pane"面板上的"Page templates"选项,进入"网页模板"窗口,选中"Frames pages"标签,如图

其中窗口左部包括了可供选择的框架格式,每选中一个,在右边会显示出其预览效果图.OK,完成当前框架格式.

2,框架布局

下面以最常见的三分框架(Banner,contents,main)为例介绍。

单击每部分的"New page"按钮新建网页,"Set initial page"导入已经存在的网页,其中Main(最右)窗口多是用来显示切换网页内容的,contents(最左)存放目标连接列表.banner(最上),顾名思义,网站的LOGO及banner显示位置.

在contents里选中需要建立链接的目标文本,CTRL+K弹出链接窗口,如图

单击"Target Frames"按钮,进入"目标框架"窗口,如图

在"Current frames page"预览里高亮显示链接目标框架部分,这时在"Target setting"输入框中会同时显示该部分的名称"Main".OK完成.

上面我们已经建立了一个普通的框架网页,通过拖拉各部分框架的边框可调整具体的frame位置.考虑到框架的应用不是很重要,因此更详细的设置这里就省略了.

在此,指出几点需要注意的内容:

1)框架支持滚动条的显示效果,当网页内容超出一屏时,会自动出现滚动条.亦可以设定永远不使用滚动条.

2)可以设定框架边框为0,从而实现无缝分屏的效果.

3)最后一点,框架网页的保存不同于一般的网页,各个窗口网页会分别独立的保存下来,另外整个框架文件还会保存一次.正是鉴于这种略显不便的保存方式,框架的应用在正规网站中很少.

总的来说,不管是表格还是框架,布局在网页设计中占着至关重要的位置!成功的网页离不开好的布局选择.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有