如何使用表格布局页面

English: CSS policy toggler, HTML attributes only
Image via Wikipedia

Html 本身却没有提供很多更有效的排版方式,而表格是制造网页其中一个非常有用和重要的一种方法。同时表格也是网页中好常见而重要的一种元素。去了解和认识表格,其基本操作,处理,在HTML中插入表格,对于建立网站布局表面有莫大帮助。

 

表格基本操作

把游标移至需要插入表格的位置,单击“插入”面板上的“表格”弹出表格对话框时,可输入表格的行数,烈数,表格宽度,单元格间距,边距,以及边框粗细等设置。

 

选择表格和单元格

你只需单击表格上方,那会弹出下拉式选择项,包括有选择表格,清除所有高度,清除所有宽度,使所有宽度一致,和隐藏表格宽度,只要选择适用选项就行了。

还可以把游标移至单元内,然后按鼠标右键,选择表格弹出,可供不同在单元内的设置。选择表格左上角,会出现方格图示,这时你亦可以选择表格。

若要选择单元格,你大可在状态栏上的标签选择器,单击<td>标记或者直接将鼠标一直单元格中。

有时候需要选择整行,只需把鼠标一直选择行至左边边位,游标会自动变成右箭头,只单击以下便可选择整行。选择整列式,亦是那么简单,把游标一直选择列的上方,游标会自动变成下箭头,你只需要单击以下便能选择整列了。

另外,如要个别选择单元格时,只要按着<ctrl>键,然后点选所需的单元格就行了。

 

设置单元格属性

        单元格属性设定跟页面属性设定类同,有HTML和CSS之分。分别有水平排列方式,垂直排列方式,宽度,高度,不换行,标题,还有背景颜色。同时CSS 也有大致相同的设定,只不过,HTML和CSS之间的差别在于HTML只在该单元格标志中直接写入属性设定,而CSS属性设定会在该单元格应用相关的CSS样式设定。

Advertisements

网页文本之设定属性

除了网页本身所需要得图案之外,一个网站最主要的部分还是文字,所以要设定好文本,另你的网站可读性是必需的。在这儿,我可建议大家怎样去处理网页文本。包括分段落,分行,设置文本属性,文字格式设定等。

 

文字输入的方式

        这可由两种方式输入文字,在Dreamweaver CS4网页编辑窗口中直接输入文字,亦可以从你所熟识的编辑软件,如Microsoft Word, Windows 之中的notepad, 或者wordpad复制到网页编辑窗口中就行了。

 

文字的编码方式

至于输入文字的编码方式当中,只要点选“属性”版面上的“页面属性”按钮选项,在“编码”下拉式选项里选择所需要的编码格式。Dreamweaver CS4文字编码格式默认为“UTF8",如阁下制造之网页为简体的话,一般会选择”GB2312”。

 

分段落与分行

1)      按<Enter>键可将文字彻底划分到下一个段落,那代码就是<p>两行之间会出现一行空白行的。

2)      亦可按<Shift + Enter> 键强行分行,那代码为<br>;不过两行之间却没有空白行分割开。

 

文字格式和字体

        格式方面大概由标题1只标题6分成六级,由大到小,同时文字上全部加粗,应用页面之标题部分。

另外,Dreamweaver CS4默认可选择字体组合有14种,如果编辑更多字体组合,便要字体列表中,选择“编辑字体列表”选项,弹出“编辑字体列表”对话盒进行编辑。

 

类别

        CSS样式其中一个分类,这可以说是定义好的CSS样式应用的快速操作选项。 在这儿还可对存在的CSS样式进行重新命名及编辑操作。

Dreamweaver CS4设置页面布局

Company website layout
Company website layout (Photo credit: guidosportaal)

制作网站开始,从规划,建立网站架构,做好模版后,大可以尝试用Dreamweaver CS4来设置页面的布局。好多时候,你定会浏览很多网站的页面而从中你会发觉到哪页面有固定的色彩,图案背景,文本字体,字体大小,颜色等等,这统统都能在Dreamweaver 当中能设定你所需要的布局设定的。

设置外观CSS

Dreamweaver CS4 之页面分成有好几个类别,其中的设置外观(CSS)一些设定可将页面相关属性自动成为CSS样式。

  • 页面文字 – 选择字体之外,还可以把字体加粗或斜体
  • 字体大小 – 页面字体大小单位,默认为(px)
  • 字体颜色 – 文本背景颜色
  • 背景颜色 – 这里可设置网页背景颜色;默认为白色,如设定你自己选择的颜色是,如输入#FFFBBB十六进颜色码便可
  • 背景图像 – 输入图像的路径,给网页背景设置图像。在这里请大家注意要把图像的相对路径,以免出现问题。另外,对于图像的重复方式中有“重复”,“不重复”,“横向重复”和“纵向重复”
  • 在页面窗口的右下方,设定页面边距有上,下,左同右四个方式,这来设定网页在浏览器四边边框的距离,但这设定只有IE 浏览器才能支持该项设置。

设置外观(HTML

 

设置外观(CSS)跟设置外观(HTML)基本上是一样的,但“外观(HTML)只会在页面主体的代码标签<body>中添加相应的属性,而不会生成CSS样式。

设置链接(CSS

 

  • 链接文字 – 超链接文本的字体
  • 大小 – 超链接文体字体的大小
  • 链接颜色 – 文体超链接的颜色
  • 以访问链接 – 网页中访问过的超链接的颜色
  • 活动链接 – 网页中激活过的超链接的颜色
  • 变换图像链接 – 鼠标移动到超链接时所转变的颜色
  • 下划线样式 – 鼠标移动到超链接时所采用的下划线显示形式

 

设置标题(CSS

 

  • 设定标题1-5级标题文字字号和颜色

设置标题和编码

 

  • 设置页面的标题 – 这对网页内容并没有大的影响,不过,若果在浏览网页时,标题栏中显示网页的标题,可令访客知道该网页的信息,而收藏网页时,亦会把该标题栏于收藏夹内
  • 文档类型 – 一般建议设定为XHTML 1.0 Transitional
  • 编码 – 建议设置为 Unicode (UTF-8),也可选择其它的文字编码,如简体中文(gb2312)

设置跟踪图像

 

制作网页之前,或许会绘制一幅设计草图,而跟踪图像只是编辑网页时一个辅助工具,在编辑时纔有效,对于HTML编码并没有任何影响。在这儿不做多介绍。