FrontPage XP设计教程3——网页的布局

时间:2008-10-11 12:20:00 

阅读上一篇:FrontPage XP设计教程2——网页的编辑

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

表格的使用

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

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 在此设置单元格属性

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

标签:FrontPage,XP,布局,设计,教程
0
投稿

猜你喜欢

  • Python标准模块--ContextManager上下文管理器的具体用法

    2022-03-02 00:22:24
  • 在Python程序中操作MySQL的基本方法

    2024-01-20 18:30:46
  • Python如何利用Har文件进行遍历指定字典替换提交的数据详解

    2022-04-22 22:35:17
  • JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】

    2024-04-17 10:38:52
  • 分享10个Js的小型库,效果真的很棒

    2009-08-27 15:38:00
  • Python根据字典的值查询出对应的键的方法

    2022-04-07 04:01:49
  • Python 虚拟环境的价值和常用命令详解

    2022-01-04 06:02:57
  • go项目打包部署的完整步骤

    2024-05-09 09:46:54
  • Centos7安装 mysql5.6.29 shell脚本

    2024-01-15 22:17:41
  • 微信小程序报错: thirdScriptError的错误问题

    2024-04-19 09:47:43
  • Python实现打印九九乘法表的不同方法总结

    2023-05-25 01:05:19
  • mssql server 存储过程里,bulk insert table from '路径+文件',路径固定,文件名不固定的实现方法

    2024-01-13 17:39:18
  • 详解Vue用cmd创建项目

    2024-05-21 10:16:38
  • 改变 Python 中线程执行顺序的方法

    2022-01-14 16:11:10
  • mysql日志系统的简单使用教程

    2024-01-15 21:09:05
  • 利用PyCharm Profile分析异步爬虫效率详解

    2023-08-15 03:02:58
  • python使用xauth方式登录饭否网然后发消息

    2021-04-18 08:11:54
  • python selenium在打开的浏览器中动态调整User Agent

    2022-09-26 13:41:59
  • asp连接SQL和Access数据代码(asp里的随机函数)

    2013-06-01 20:26:06
  • 斜角滑动门导航条 DIV+CSS

    2008-07-19 15:45:00
  • asp之家 网络编程 m.aspxhome.com