网站设计公司告诉你经常用到的版面布局形式有哪些

2019-11-14

112次

　　网站设计公司告诉你经常用到的版面布局形式有哪些

1）“口”型布局；2）“三”型布局；3）“对称对比”布局；4）T结构布局：就是指页面顶部为横条网站标志和广告条，下方左侧为主菜单，整体效果类似英文字母T，所以被称为T形布局。这是网页设计中用得最广泛的一种布局方式。这种布局的优点是页面结构清晰、主次分明，是初学都最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。

　　在排版的时候应注意什么：1）为了加快下载的速度，整个页面应尽量拆分成多个表格；2）单一表格的结构要整齐；3）表格的嵌套层次不要过于复杂。

　　什么是网页页面尺寸：一般分辨率在800×600像素的情况下，页面的显示尺寸为780×428像素；分辨率在640×480像素的情况下，页面的显示尺寸为620×311像素；分辨率在1024×768像素的情况下，页面的显示尺寸为1007×600像素。在网页设计过程中，向下拖动页面是给页增加更多内容的方法。除非能肯定站点的内容吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容，那么最好在网页顶部加上页面内部链接，以方便访问者浏览。

　　在表格“属性”面板中，宽和高的单位有“像素”和%两种，两者有什么不同：表格大小有相对和绝对之分，通过百分比方式表示的表格大小是相对大小，通过像素方式表示的表格大小是绝对大小。如果通过百分比方式设置表格的大小，在改变版面大小后，表格大小也跟着调整，将表格的宽和高设置为100%，则无论版面窗口多大，表格都将充满整个窗口。如果通过像素方式设置表格大小，在改变版面大小后，表格大小不会跟着调整，在不同的版面大小中，表格大小固定不变，当将版面变大时，表格相对于版面来说似乎变小了，但表格的实际大小不变。

　　在表格“属性”面板中，“填充”和“间距”文本框分别用于设置表格的什么属性：“填充”文本框用于设置单元格中插入的对象到单元格边框之间的距离，“间距”文本框用于设置表格中两个单元格之间的距离。

　　为什么改变不了表格高度：用鼠标拖动表格线，想把一个表格的高度缩小，可是无论怎么拖动目标，表格高度就是不变。出现这种情况一般是因为表格中的某个单元格设置了一个数值较大的行高所致，删除该单元格的行高值即可解决问题。如果表格过大，也可以在源代码编辑器中查找<tr>或<td>标签内的行高属性，然后将此属性清除即可。

　　如何实现表格的亮边框和暗边框：表格有亮边框（bordercolorlight）和暗边框（bordercolordark）两个属性，把表格边框设为1像素，亮边框（bordercolorlight）设为北景色，暗边框（bordercolordark）设为需要的实际边框颜色就可以了。如下面的代码：<table border=”1” cellpadding=”0” cellpacing=”0” width=320 height=97 bordercolorlight=”#000000” bordercolordark=”#FFFFFF”><tr><td></td></tr></table>

　　如何使两个表格并排：在文档中插入了两个表格，却发现第二个表格跑到第一个表格下面去了。要让这两个表格在同一行，可选中第一表格，然后打开“属性”面板，在“对齐”下拉列表框中选择“左对齐”选项即可。用同样的方法还可以设置表格和文字、表格和图形、图形和图形在一行，或者更多的表格和图片混排。

　　如何制作圆角表格：制作网页的时候为了美化网页，常常把表格边框的拐角处设计成圆角，这样可以避免直接使用表格直角的生硬，使得网页整体更加美观，下面就介绍一中制作圆角表格的常用方法。1）先用photoshop等作图软件绘制一个圆角矩形，再用矩形选框工具选取左上角的圆角部分，并复制它；2）不要取消选区，直接新建一幅图像，photoshop会根据选取部分的高度、宽度自动设置新建图像的大小，将复制的图像粘贴后，保存为Web所用格式即可。分别用水平翻转工具和垂直翻转工具，制作出另外三个方向的圆角；3）在Dreamweaver中插入一个一行三列的表格，设置其边框、单元格边距均为0。在第一列插入图片bj1.gif；第三列插入图片bj2.gif；并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置切换到代码视图，删除这列中的字符“ ”（Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格）。按照前面的操作制作好下半部分的圆角。至此，一个圆角表格就做好了。

　　在Dreamweaver中插入极细边框表格的方法：1）先插入一个1×1的表格，设置其边距为0，边框为1，间距为0，边框为蓝色，然后选中此表格，切换到显示代码和视图状态，在表格属性代码中插入以下语句：bordercolordark=ffffff；2）插入一行一列的表格；在表格中插入先期制作好的1×1的透明图片；然后选中此表格填上你喜欢的背景颜色；最后将表格的高度设为1。

　　如何使用1×1像素的透明图像固定单元格宽度：插入一个2行3列，宽度为200像素，边框为1，单元格边距和间距均为0的表格，当在表格中输入文字时，表格出现了变形，这时使用Dreamweaver自带的1×1像素的透明图像，可以固定单元格的大小，方法如下：1）单击“编辑”|“首选参数”命令，在弹出对话框的“分类”列表中选择“布局模式”选项；2）单击“创建”按钮创建一个1×1像素的透明图像，这时将弹出一个对话框，要求设置该透明图像的名称和保存位置；3）在被插入表格第一行的三个单元格中分别插入创建的透明图像，并在“属性”面板中设置其宽度为68像素，再输入文字，可以看到单元格宽度不再变化。

　　如何制作表格阴影：可以将以下代码添加到<body></body>之间：

　　<style>

　　table{filter:progid:DXImageTransform.Microsoft.Shadow

　　(Color=#333333,Direction=120,strength=5)}

　　</style>

　　<tr>

　　<td><a href="http://homepage.***.com/"><http://homepage.***.com/"><font color=white>网页改版啦</font></a></td></tr></table>

　　在网页中制作表格虚线：1）制作一个1×2像素的图像，两个像素分别为黑和白；2）插入一个表格，在表格中插入前面制作的图像；3）将表格的高度设置为1；4）在表格中定义背景为前面制作的图像，即可制作出虚线表格。

　　如何创建可拖动的表格：在Dreamweaver中，给表格增加CSS定位，表格就变得像“层”一样可拖动了。方法如下：1）在文档中插入一个表格，选中表格；2）在CSS样式表中选“编辑样式”的新建，在弹出的对话框中的“类型”中选择“创建自定义样式”，在“定义在”中选择“仅对该文档；3）在再次弹出的对话框中的“分类”中选择“定位”，在右侧的“类型”下拉列表框中选择“绝对”选项，在“置入”选项区的“左”和“上”数值框中输入任意数值，单击“确定”按钮关闭对话框。这时在文档中表格就像层一样可以拖动了。

　　如何解决在表格的宽度设置为100%，但浏览时仍不能满屏显示的问题：为了使页面适应不同的分辨率，通常将表格的大小按百分比设置。但已经将表格的宽度设置为100%，在浏览器上还是不能满屏显示，四周总有一圈空白。单击“修改”|“页面属性”命令，在弹出的对话框中设置“左边距”和“上边距”为0即可。

　　如何在网页中插入背景音乐：首先准备好一首MIDI音乐，如music.mid，存放在网站根目录下。将以下代码插入在<head> </head>之间：<embed src=sound/qd.mp3 autostart="false" loop=true width=300 height="45"></embed>，其中autostart="false"表示不自动播放，loop=true表示无限循环，也可以指定次数（如loop=3），width和height表示显示控制面板的宽和高，当两个参数均为0时，表示隐藏控制面板。

　　如何导出表格中的内容：选中要导出的表格，单击“文件”|“导出”|“表格”命令，在弹出的对话框中单击“导出”按钮，设置导出文件保存位置、名称，然后依次单击“确定”按钮进行导出即可。

　　如何导入Excel文档：将光标置于要导入Excel文档的位置，将要导入的EXCEL文件另存为文本文件，单击“文件”|“导入”|“Excel文档”命令，在弹出的对话框中选择要导入的Excel文档，单击“打开”按钮即可将其导入。

　　为什么把单元格高度设置为1后没有效果：Dreamweaver生成表格时，会自动在每个单元格中填充一个“ ”代码，即空格代码。如果有这个代码存在，那么把该单元格宽度或高度设置为1就没有效果，实际预览时该单元格会占据10像素左右的宽度。如果把“ ”代码去掉，再把单元格的宽度或高度设置为1，就可以在IE中看到预期的效果。但是在NS中该单元格不会显示，就好像表格中缺了一块，在单元格内放一个透明的GIF图，然后将宽度和高度都设置为1，这样就可以同时兼容IE和NS了。

　　使用层布局网页有什么优势：尽管使用表格可以布局网页，将网页中的元素对象控制在特定位置，但是有些网页元素实在太难控制，尤其是在精确定位方面。这时，层作为一种新的网页元素定位技术应运而生，使用层可以以像素为单位精确定位页面元素。层可以放置在页面的任意位置，这样在层中放置的元素也就可以定位于页面中的任意位置，如此一来，可以使页面布局更整齐、更美观。

　　如何制作网页中的竖线：要在网页中制作竖线，方法如下：插入一个1×1的表格，设置表格边框为0。将表格的背景设置为竖线需要的颜色，将表格宽度设置为1像素，高度为竖线高度。选中该表格，切换到代码视图，将代码“&nbsp；”删除即可。