巧用表格来设计主页

设计

  在HTML 语言中,表格(table)被用来组织数据,比如年度报表、工作计划等,而表格也是设计 页面的利器,它灵活多变的控制方式,让您很容易地组织自己的文档和图片。只要您 富于想像,完全可以利用表格设计出非常出色的个人主页。

工具的选择

  过去,我们在使用用HTML语言编写网页时,编写表格是一件非常麻烦的事情,因 为您得记住它的标签元素,然后还必须适当地组织、排列它们,才能得到您需要的表 格。那时候,可能没有人会利用表格来组织设计网页。到了今天,我们在使用FrontPage98 这个所见即所得的工具时,才发现制作主页变得十分的轻松,那种枯燥之感顿时消 失,而我们也可以多放一点精力在设计上。

  现在,制作表格已经无需要记住标签元素,而只须“拿”起笔,随着您的联想自 由发挥。您还会发现,表格是设计主页的好帮手。所以,利用表格设计网页时,一定要 选择一款所见即所得的HTML编写工具,FrontPage98是个好选择。

构思与组织

  制作网页是一门艺术,因为它包含了美术、排版、音乐等艺术成分,而构思是所 有艺术的前奏,没有这一步,任何艺术都没有生命力。所以,当您在利用表格制作主 页时,构思是一项非常重要的步骤。

  要整体规划网页的布局。一般把主页分为上、中、下三个部分,其中上面部分放 置网页的标题图片,中间部分为整个网页的内容,而下一部分就是制作者的信息。这 当然不是一成不变的,但一般首先要这样设计,然后再根据需要修改。

  利用表格设计主页时,首先单击工具栏InsertTable图标,从上至下拖出一个 有3行的表格,您可以根据需要修改表格大小及位置,而每一行代表上、中、下三部分, 下面分别进行介绍:

  1.上层

  这里一般放置自己网页的图档,首先您要准备好一般大小为480pixels×68pixels 的标题图案,在这一层中,您也可以放置一些其他广告图档,一般大小为88pixels×31pixels, 当然也可以放置计数器。

  要注意的是,如果您要放置这两样图档,首先要在上层这个单元里,再设置一个 表格,因为这样两个图档就可以自由设置,而不影响下面表格的设置。这点很重要, 这也是表格的特性,需要分别处理的对象时,最好给每个对象建立一个表格,这样就 不会互相影响。

  2.中层

  这是网页的核心。按照一般情况,您会有一个网页目录,目录的摆放一般随意。 设置好目录后,其他位置就是内容介绍。在利用表格设计这一部分时,您也要如同上 层一样,在单元里设置另一个表格,然后分配表格的左右大小,小的自然放置目录, 而大的单元放置内容。

  需要注意的是,表格之间会相互影响。在设置时,首先要选择任何一个单元,单 击右键,在快捷菜单里选择CellProperties...,在设置窗口Layout项目的Vertical Alignment中选择top,这样在任何单元放置的内容就会放置在顶部了。不然,在某 一个表格中,单元左边放置好内容后,在右单元又同时放置内容时,左边的内容会从 顶部降落到中间的部分,如果设置好top后,就不会发生此类问题。

  3.下层

  下层放置制作者的信息,如同上层一样。

  以上只是利用表格设计网页的基本方法,其余的发挥就要靠大家了。您也可以 对于这三层分开制作,也就说,在开始设计时,使用三个单独的表格,而不是一个表 格分为三行。当您在设计完成后,点选任何一个表格,单击右键,选择TableProperties..., 在layout中,把BorderSize设置为0即可。要注意,当您使用表格设计网页时,最外 面的主表格不要一开始就关闭表框宽度。

  使用表格设计网页是很简单的,表格的好处是可以完全控制自己文字及图片的 摆放格式,而不用很烦琐地利用CSS层叠样式表来完成。

  在表格使用过程中,会遇到一点点小麻烦,比如,表格大小无法更改。特别是在 取消表格边框以后,还有在相套的几层表格中,最里面的表格使用了某种颜色填充, 而当把此网页用Navigator4.0查看时,发现里层的表格颜色没有了,在IE4.0下却是 好好的。这些问题,都是因为您在使用过程中操之过急,没有掌握表格的使用习惯。 要记住,一个表格完成一件事情,而不要一个表格涉及几个对象。比如目录和内容放 置到一个表格里,这样很容易造成上面所说的问题。

时间: 2024-10-26 05:24:23

巧用表格来设计主页的相关文章

Photoshop巧用图层样式设计超酷字体

            Photoshop巧用图层样式设计超酷字体

巧用PS蒙版设计穿插在花丛中的文字

  巧用PS蒙版设计穿插在花丛中的文字.文字与人物相融合的画面,通过彼此层叠遮挡,让文字更具立体感,画面也获得了更多的空间感 分类: PS文字教程 ps蒙版教程

巧用Illustrator绘制设计扁平化的插图添加纹理

           巧用Illustrator绘制设计扁平化的插图添加纹理 分类: PS入门教程

巧用Illustrator绘制设计漂亮卡通铅笔

           巧用Illustrator绘制设计漂亮卡通铅笔 分类: PS入门教程

iOS头部渐变的表格视图设计

iOS头部渐变的表格视图设计         今天再来给大家带来一个开发中常用到的视图控制器,在很多应用中,可能都会遇到这样的一个需求:表视图控制器最上方有一个头图控件,当表格视图滑动在顶部时,导航栏透明,当表格视图逐渐向下滑动时,导航栏渐渐出现,并且在滑动期间,头图会展示相关的渐变动画效果.以前经常会遇到这样的需求,但从没有整理与封装完善,这次将其封装成完整的控件,无论有无导航,都可以很好的支持,方便以后使用也提供给需要的朋友.         在设计控件之前,我们应该先编写控件的头文件,头文

extjs4-ext js开发,纵向表格怎么设计,怎么写代码?

问题描述 ext js开发,纵向表格怎么设计,怎么写代码? 如下图这种表格,ext js怎么写? 可以举个例子吗? http://xiangce.baidu.com/picture/detail/09463107f83b562578b2373c9536c0c373ba44a3 解决方案 可以的,你在ExtJS中把Grid的Store字段变成 filedName.filedValue, 再通过Ajax去请求数据, 把返回的结果 封装成filedName.filedValue的Record形式, 再

网页设计应:提高网页表格可读性设计技巧

文章描述:提高表格可读性的一些技巧. 表格的应用 由于工作原因,经常接触到表格.我们发现,表格不但广泛的运用在各类数据收集和分析,同时通过表格这样一种二维矩阵来整理和陈列信息时(即便最后的展示方式并非一个典型的表格样式),能够很好的表达信息之间的逻辑关系,易于帮助理解横纵信息之间的关系. 在实际的网页设计应用中,表格横纵相互独立又相互关联的模式尤其适用于: 1.组织和展示大量的信息 表格简单的结构不但能包含大量的信息,且同时保证信息的可读性,便于读者快速扫描信息.从大量的条目中找到所需的信息.

网页中表格的设计:网页表格设计的细节技巧

文章描述:看似简单的表格真要设计好还是需要花些气力的,看看下面这些细节设计点,你是否也知道? 想必多数同学曾经学习计算机就是从Word开始,其中一项重要的学习任务就是创建表格,如今在网络页面里表格随处可见,尤其是商业产品里充满了大量的数据,要没有这些表格估计看内容得吐血-- 表格形形色色,默默无闻的呈现着数据,阅读起来如何最为顺畅,如何才能从表格里发掘出重要信息,有哪些可以对表格进行的操作,梳理一下以供参考. 1.行高是表格浏览时的重要参数 行高是表格非常重要的参数,行高间距直接影响着阅读的体验

巧用Dreamweaver MX设计导航栏特效

  关于导航栏的设计有很多特效,但你浏览过这样一种导航栏特效吗?当鼠标移到导航栏目上时,导航栏目会被一层"蒙版"所遮盖,而鼠标移开时"蒙版"也随之移开.该特效其实可以在Dreamweaver MX中设置两个CSS属性分别控制,当鼠标移到和移开导航栏目时显示背景图片,并设置导航栏表格的鼠标响应事件即能实现.当然背景图片至关重要,需要一张动态的.可长短交替变换的GIF图片,可以用Fireworks制作该图片. 制作背景效果图 在Fireworks中新建一个170×17像