使用表格布局页面

极海网络  发布于:2014-11-22  浏览:

摘要:表格式布局虽然退出了主流的布局舞台,但是它在快速布局方面依然有其优越性,比如目前很多工具基本上都提供了对表格式布局的优秀设计和支持。使用表格式布局的方式 一般有如下两种。 使用Photoshop之类的图像编辑器自动生成布局:网站设计人员只需要在Photoshop或Fireworks中设计好网站的整体结构,再使用切图工具将大的图切割为若干个小的图片块,然后使用这些工具另存为html支件,图像处理软件就会自动根据图片的切片来产生表格式布局。 在Dreamweaver之类的网页编辑器中使用标签生成网页:这种方式使用表格标签,以所见即所得的方式设计网页,基本上所看见的效果就是浏览器中呈现的效果,而且由于各种浏览器对表格的支持较完善,基本上也不会出现太多不同浏览器之间的兼容性问题。 无论是一名Web标准的忠实拥护者,还是一名只是需要快
 
        表格式布局虽然退出了主流的布局舞台,但是它在快速布局方面依然有其优越性,比如目前很多工具基本上都提供了对表格式布局的优秀设计和支持。使用表格式布局的方式
一般有如下两种。
        使用Photoshop之类的图像编辑器自动生成布局:网站设计人员只需要在PhotoshopFireworks中设计好网站的整体结构,再使用切图工具将大的图切割为若干个小的图片块,然后使用这些工具另存为html支件,图像处理软件就会自动根据图片的切片来产生表格式布局。
        在Dreamweaver之类的js.html' target='_blank'>网页编辑器中使用标签生成网页:这种方式使用表格标签,以所见即所得的方式设计网页,基本上所看见的效果就是浏览器中呈现的效果,而且由于各种浏览器对表格的支持较完善,基本上也不会出现太多不同浏览器之间的兼容性问题。
        无论是一名Web标准的忠实拥护者,还是一名只是需要快速完成网页设计、提供快速的响应速度的网页设计人员,理解表格式设计的优劣都是十分有必要的。下面分别对这两种表格式布局的操作方法进行举例介绍。
        1.使用切图工具创建表格布局网页
        很多网页的版式设计都是交由专业的平面设计人员来实现的,平面设计人员通常会使用诸如Photoshop或Fireworks这类软件,完全基于美观与风格的要求来实现他们想要的设计,而具体实现的工作则交给网站建设人员。
        网站建设人员拿到设计图之后,可以借助于Photoshop的切图工具,根据网页底稿图的风格,切割成便于控制的小图片,然后对需要输入的文本区进行修正,实现完整的网页。
        下面创建了一个名为PhotoTableLayout的网站,在该网站中不包含任何文件,通过对一幅由设计人员设计好的Photoshop文件进行切图处理,生成网站的首页,如以下步骤所示。
        (1)打开Photoshop,打开本书配套光盘中的源文件main.psd,在Photoshop的文档窗口中将出现由平面人员设计好的网站首页。单击工具栏的“切片工具”准备进行图像的切片,Photoshop界面如图7.1所示。
        (2)网页切片将图片切得越小越好,但是相同色系的图片,应该保持在一个切片中,需要输入文字的部分要保留一个区域以便进行文字图片排版。切片的方法很简单,直接在图片上进行区域划分即可。笔者完成的切片效果如图7.2所示。
        (3)图片切片完成之后,单击主菜单中的“文件I存储为Web所用格式”菜单项,Photoshop将显示保存设置选项,如图7.3所示。
        一张完整的图像动辙几百KB或1MB以上,切片的作用就是将这个大的图像变成很多小的图片以加快网页的显示。在切片时,应该要注意图像越小越好,但是过小又会导致散乱的图片太多,不易维护,因此切片也是一个折中的过程。
        注意:网页切片其实也是一个不断改进的过程,也许一开始的切片规则不太符合自己的想象,因此一般建议在一个专门用于保存切片的文件夹中保存切好的网页文件,在进行修正之后再将文件放到开发的网站上进行编辑。
        在图7.3所示的窗口中,可以对切片图像进行进一步的预览,可以放大或缩小图像。在右侧的面板提供了切片后小图片的保存格式,默认显示为GIF。前面曾经说过这种文件体积很小,但是只能保存256位色,因此适合对颜色要求不同的网页。可以单击右上角“预设”下拉列表框,选择一种预设的图像保存方案,也可以从“GIF”下拉列表框中选择其他的图像文件格式。单击页面底部的“预览”按钮,将打开一个浏览器窗口,对切片将要生成的网页进行预览。
        (4)如果切片不能达到设计的需求,可以单击图7.3中的“取消”按钮,回到Photoshop中进行再次切图,否则单击“存储”按钮,Photoshop将弹出如图7.4所示的窗口。
        图7.4似乎与普通的“文件另存为”非常相似,但是需要注意到窗口底部的一些选项,这些选项用来设置切片图像和网页的保存方式与内容。在保存了切片之后,Photoshop将在指定的文件夹下产生HTML网页文件和一个images文件夹,在这个images文件夹中包含的就是切片的图像。
        2.使用Dreamweaver布局网页
        使用HTML的无边框的表格,可以提供所见即所得的设计方式。在过去这种布局方法是一种非常流行的布局方式。下面通过一个例子来介绍如何通过HTML的表格来对网页进行布局,如以下步骤所示。
        (1)新建一个名为TableLayout的网站,在该网站中创建一个名为index.html的网页和一个名为images的文件夹,该文件夹将用来存放网站图片。
        (2)在文件面板中双击index.html文件,打开设计视图。首先在文档工具栏中将文档的标题设为“表格式布局示例”,然后在属性面板中单击“页面属性”按钮,在“外观”选项组中设置字号为9pt,并将页面边距均设为0,如图7.5所示。
        (3)单击插入面板中的“表格”项,向设计视图中插入一个3行1列的表格,这3行中的第1行将用来显示页面的标题,中间行显示页面内容,最下面的行显示页面版权信息。首先在第1个单元格中,插入一个表示公司Logo信息的图片,并设置表格第1行的背景图片,使得在Dreamweaver中的设计视图看起来如图7.6所示。
        示例的图片可以从本书配套资源中获取。
        (4)中间区域将被用来作为内容区域。在这里插入一个2列1行的嵌入的表格,左侧的列用来放置导航面板,右侧的列则用来放置具体的内容。在左侧的列中,插入了一个导航用的图片,也可以是一个用于导航的Flash动画等。在右侧的单元格中,可以加入网页的具体内容,这两个表格的valign也就是垂直对齐属性都设为了top,以便进行顶端对齐。
        (5)在第3行中,将单元格的水平对齐方式设置为居中,然后输入一些关于网站的版权或页脚导航信息,至此一个基本的基于表格的布局就基本实现完成了。可以看到通过Dreamweaver提供的可视化设计来实现,实在是非常简单。
        Dreamweaver自动帮助网站建设人员产生了用于布局的
标签代码,具体的配置参数如代码7.1所示:
        运行时可以看到,一个标准的基于表格式布局的自适应网页就呈现在眼前了,只需要简单的几个步骤,而且一切都是可视化的设计方式,运行效果如图7.7所示。
 


文章链接:http://www.jihai.com/a/jiaocheng/wybj/201411/735.html
标签:退(1)表格(10)表(8)虽然(4)格式(7)页面(38)使用(75)布局(27)
作者:极海网络 来源:未知 发布于2014-11-22 19:42
您可能喜欢的文章

热门模板
热门阅读
热门插件