FrontPage XP的网页布局设计

制作一个漂亮的网页,离不开网页整体布局的设计,网页布局设计的合理与否,直接影响页面的美观。网页布局设计一般采用表格和框架,表格的使用相对来说就更加普遍了,这次我们就以表格和框架为例,来看一看如何安排网页的布局。

表格的使用

表格是由单元格按照行与列组成的,使用表格可以很好地将网页中的对象按格式编排,一般常用于页面内图片与文字的版面安排。

STEP 1 插入表格

新建一个空白网页,然后将插入点放在要插入表格的位置,执行菜单“表格/插入/表格”命令,打开插入表格对话框。在“行数”、“列数”框中分别输入4和3,在“对齐方式”框中选择表格在网页上的位置为默认,并在“边框粗细”框中输入表格边框宽度为0,即不需要表格边框。要改变单元格边框和内容之间的间距,可以在“单元格边距”框中输入数值,改变单元格之间的间距可以在“单元格间距”框中输入数值,如图1所示。


图1 设置表格参数

STEP 2 表格的选择

在表格中的任意位置单击鼠标,然后执行菜单“表格/选择表格”命令即可选中整个表格。如果将插入点放在单元格中,执行“表格/选择/单元格”命令可以选择当前单元格。如果想一次选择多个单元格,先选中一个单元格,按住“Ctrl”键,再单击要选择的其他各单元格即可。

STEP 3 表格属性

在“网页”视图中,用鼠标右键单击表格,并从快捷菜单上选择“表格属性”命令,打开表格属性对话框,如图2所示。


图2 在边上设置表格属性

在“对齐方式”下拉列表中选择表格在网页上的位置,比如“左对齐”。“浮动”选项用于指定文本是以什么方式绕表格排版,如果不需要文本绕表格排版,可以选择“默认”。此外,还可以改变单元格间距和单元格边距,以及表格的列宽和高度等。

在“边框”选项中,指定“大小”可以设置表格的边框宽度,如果不需要边框可以设置为0。“颜色”选项用于设置表格边框颜色,“亮边框”和“暗边框”可以为表格设置具有三维效果的双色边框,设置这两个参数的时候,要注意调节好颜色的取值。

在“背景”选项中,可以指定表格的背景色。如果打算在表格中显示背景图片,可以选择“使用背景图片”复选框,然后单击“浏览”按钮选择图片即可。

STEP 4 巧用单元格

选择第1行第2列和第1行第3列两个单元格,然后单击鼠标右键,在快捷菜单上选择“合并单元格”命令,即可合并这两个单元格。然后将插入点定位在第1行第1列中,执行“插入/图片/来自文件”命令,插入网站的logo图标。接下来在第1行第2列中插入网站的Banner广告条。

选中表格第2行,将此行合并单元格,然后再单击鼠标右键,选择“拆分单元格”命令,在打开的对话框中,在“列数”右侧输入数值5,这样即可将此行单元格拆分成为5列。

选中此5列单元格,单击鼠标右键,执行“单元格属性”命令,在打开的对话框中,设置单元格“背景”颜色为浅灰色,如图3所示。最后在刚才设置的5个单元格中,分别输入网页的导航栏目名称,并为各个栏目设置好相应的链接。


图3 在此设置单元格属性

同样道理,再合并其他单元格,并完成整个页面的制作。

框架的使用

框架可以将浏览器窗口分成不同区域,每个区域都可以显示不同的网页。可以将一些框架中的内容永远保留在浏览器窗口中,而其余窗口则发生改变。

STEP 1 创建框架

执行菜单“文件/新建/网页或站点”命令,在打开的任务窗口中单击“网页模板”,然后选择“框架网页”选项卡,单击要使用的框架网页模板后,“确定”。

STEP 2 设置初始页

建立好框架后,即可进入框架设置界面,如图4所示。


图4 在此进行框架设置

单击各个框架中“设置初始网页”按钮,然后在文件夹中选择一个已创建的网页,即可在相应的框架中显示相应的网页。

此外,还可以单击“新建网页”按钮,此时FrontPage XP会自动在该框架中创建一个新的空白网页,这个新网页会被自动设成初始网页,读者朋友可以结合以前介绍的相关知识对框架空白网页进行设计。

框架可以作为网页布局中一项补充的工具,适当的运用可以使网页布局更加合理。

到站提示:要制作一个漂亮的网页,需要灵活运用网页布局工具,才能达到事半功倍的效果。下一站我们将在FrontPage XP中使用样式表CCS,通过样式表来给我们的主页增加特效。

时间: 2025-01-19 18:13:48

FrontPage XP的网页布局设计的相关文章

FrontPage XP制作网页小技巧八则

frontpage|技巧|网页 靓丽的网页是怎样生成的?也许您会脱口而出,当然是自己设计出来的.没错!不过这其中也有网页制作工具的一部分功劳,因为功能强大的网页制作工具可以为网页增色不少!以前,FrontPage 2000是很多设计师们首选的网页制作工具,但自从FrontPage XP问世后,人们又开始利用它来继续"设计蓝图"了.但由于FrontPage XP较FrontPage 2000相比,推出的时间不长,有许多用户对它内部的一些操作小技巧可能不太熟悉.为此,笔者在这里就提供一些F

网页布局设计:注册登录框放哪里合适?

设计|网页 注意到一个比较有趣的现象,网页布局设计方面,国内网站喜欢把用户注册登录框放左边最重要的位置,而且是斗大的一个注册框;国外网站则喜欢把注册登录放右边,而且通常是右上角很不起眼的位置,还常常连登录框都省了,只给出一个注册登录的链接. 哪一种布局设计更合理?我在各种场合问过用户,一般会很诧异说:不都是放左边吗?已经习惯了. 实际上,根据我们阅读从左到右的习惯,显然左边最重要的位置应该放置重要的内容,而不是浪费黄金地盘去放置注册登录框. 但这里就出现问题的关键--网站运营者会说:我就是把最重

浅淡视觉焦点与网页布局设计的关系

我一贯认为用户体验不是产品的设计让客户满意,而是让客户在舒服的状态下按我们希望的步骤前进,一个好的产品设计师会为他的客户设计一个隐形的行为轨迹路线.但首先还是要满足客户舒服的感觉,对于网站来说,客户的器官体验主要来自三处--眼.手.耳.其中眼是重中之重,让它感觉舒服了,客户最起码就满意50%以上了. 以前在分析7个B2C网站的提过界面的宽度对用户的浏览会造成障碍,原因就是视觉焦点造成成的. 这里有一张图,大家将图片放在屏幕中心显示,然后看最下面的那一个蓝色娃娃,现在有一个问题,能看清楚整个图片有

FrontPage XP表单的设计

frontpage|设计 表单在网站的制作过程中是比较常见的,举个简单的例子,我们在申请免费电子信箱或者个人主页时,需要填写一些个人信息,比如用户名.口令.密码提示信息等,收集这些信息的工具就是表单.常用表单的类型包括联系信息表单.请求表单.发货和付费方式的订购表单.反馈表单.搜索查询表单等. 制作搜索表单 对访问者来说,在一个大网站中查找文章会很不方便,这时我们可以创建一个搜索表单.执行"插入/Web组件"命令,打开"插入Web组件"对话框.在左侧窗口中选择&qu

网页布局设计的标准尺寸(800*600,1024*768等尺寸)

许多的网页设计在进行网页布局设计时,进行界面网页的宽度尺寸设计都比较迷茫,800*600尺寸及1024*768尺寸的分辨率下,网页应该设计为多少像素才合适呢?太宽就会出现水平滚动条了,下面我们就网页设计的标准尺寸进行讲解. 网页设计标准尺寸: 1.800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定.2.1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条.3.在ps里面做网页可以在800

网页布局设计:使用数学中的模数精确布局

在设计中可以使用许多数学公式,比如常用的黄金分割比就是其中之一.在网页设计布局中,我们也能通过精密的计算来获得理想的排版比例,本文将介绍使用数学中的"模数"来计算网页布局大小,从而获得更为合理的布局. 在IT工业中,内置标准.国际标准.国家标准才是真正意义的规范.而在应用领域(包括web应用的开发)的开发中,标准是各自为政乱七八糟的,微软如果不考虑市场和经济利益也不是不吊这些标准的.我不得不汗一个. 二.模数网页设计中的应用 好了,鄙视完小儿科的网页设计,我们来谈谈"模数&q

原创及创新网页布局设计

  布局是网站的基石.其作用是指引用户浏览网站各组成部分.指明关键内容.布局同时也是网站外观的关键.因此,内容的布局需要认真仔细的思索. 一套原创且新颖的布局能够显著提升网站的用户体验,但也不要让创意影响到了网站的可用性.和往常一样,我们要设身处地的站在用户的角度进行思考:我们希望他们最先看到什么?应当如何最有效地传达讯息?在设计开始前,以上的问题是必须要提出来的,因为布局将负责形成设计的其余方面. 下面的几个网站的布局不走寻常路,尽管称不上完美,不过浏览这些网站,兴许能够给你带来创意的火花.

FrontPage XP教程

FrontPage XP基础教程(1) FrontPage XP基础教程(2) FrontPage XP基础教程(3) FrontPage XP基础教程(4) FrontPage XP基础教程(5) FrontPage XP站点的建立与管理 FrontPage XP网页元素的制作 FrontPage XP的网页布局设计 FrontPage XP中使用样式表 FrontPage XP直通车之表单的设计 用FrontPage XP做多媒体页面 使用FrontPage XP中的设计技巧 FrontPa

FrontPage XP网页的布局

frontpage|网页 制作一个漂亮的网页,离不开网页整体布局的设计,网页布局设计的合理与否,直接影响页面的美观.网页布局设计一般采用表格和框架,表格的使用相对来说就更加普遍了,这次我们就以表格和框架为例,来看一看如何安排网页的布局. 表格的使用 表格是由单元格按照行与列组成的,使用表格可以很好地将网页中的对象按格式编排,一般常用于页面内图片与文字的版面安排. STEP 1 插入表格 新建一个空白网页,然后将插入点放在要插入表格的位置,执行菜单"表格/插入/表格"命令,打开插入表格对