1.7.1 传统表格布局(1)


1.7 制作你的第一个XHTML+CSS页面


谈了半天理论,下面还是让我们来设计一个完整页面,帮助读者亲身体验一下标准网页的制作过程。为了更直观地感受传统表格布局与标准网页布局的不同,我们不妨从传统表格设计开始,通过比较来认识表格布局与标准布局的差异。


1.7.1 传统表格布局(1)


用表格实现网页布局一般有两种方法:一种是用图像编辑器(如Photoshop、Fireworks等)绘制网页布局图,然后在图像编辑器中用切图工具切图并另存为html文件,这时图像编辑器会自动把图像转化为表格布局的网页文件;另一种是在网页编辑器中用表格直接编织网页布局效果。
第一种方法比较简单,这里就不再详细说明了。下面我们用第二种方法来介绍一个简单的页面布局过程,最后效果如图1.12所示。本例所使用的工具为Dreamweaver 8,读者也可以使用其他网页编辑器,但考虑到学习的方便,建议读者用Dreamweaver 8来完成本例制作。







 
(点击查看大图)图1.12

这是一个简单的页面,是我制作C#参考手册的第1个页面,把它作为第一个示例,是想方便读者快速理解两种布局的区别。网页中所用图像都存放在光盘中,请读者自己动手试一试,下面就是具体的操作过程,限于篇幅我没有给出每个细节的实现过程,我们的目的不是去介绍如何设计细节,如果读者想了解这些细节实现,可以参考光盘示例:


启动Dreamweaver 8,新建一个空白文件。在【页面属性】对话框中设置网页背景色、字体大小、页边距、超链接属性等,如下图所示。







 
(点击查看大图)图1.13

打开对话框的方法是选择【修改】|【页面属性】菜单命令。在对话框左侧的【分类】列表框中选择【外观】选项,在右侧属性选项中设置"页面字体"、"大小"、"背景颜色"、"左边距"、"右边距"、"上边距"和"下边距"属性。然后在对话框左侧的【分类】列表框中选择【链接】选项,定义超链接的详细属性,具体属性值读者可以自定,我不希望你做的与我的案例一模一样,关键是理解操作过程。


分析本示例页面布局效果图,可以把整个页面分为5行1列。因此可以分别插入5个表格,如图1.14所示。5个表格的共同属性如下:


行:1
列:1
宽:776px
对齐:居中对齐
边框:0
填充:0
间距:0




标签:
Warning: Invalid argument supplied for foreach() in C:\zl\webjia\view.php on line 50
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2