网页的版面布局
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
版面的布局可以采用如下四种 方法
方法二:首先利用分层来绘制版面,然后再 将分层转换成表格。
优点:因为分层非赏容易在页面上定位,因 此这种方法在操作上比较简单。但是这种方 法也有缺陷,就是生成的表褡过于复杂,代I 码不够精练,很可能我们只需要三五个单元 格,最终生成的却是包含十数个单元格的表 格。因此I这种方法,应该只在迫不得已的时 候才使用。
版面的布局可以采用如下四种 方法
方法四:利用dreamweaver提供了一 种新的表格视图——布局视图(Layout View)来布局版面。
优点:利用布局视图,用户快速完成 版面的布局,我们可以像绘图一样, 在页面上任意位置绘制表格和单元格, 或是调整表格和单元格的属性。这样, 布局页面的工作就像绘图一样的轻松。
方法一: 打开View菜单,选择TableView(表格视 图),然后选中LayoutView(布局视图)命 令。
方法二: 在插入面板的Layout(布局)选项卡上, 单击LayoutView(布局视图)按钮,如图 所示。即可进入布局视图状态。
布局选项卡
插 入
绘 制
标 准
表分 视
格层 图
绘 绘制 制布 布 布局 局 局单 视 表元 图 格格
布局选项卡按钮说明
在插人面板的Layout选项卡中,包含了多种 用于进行版面布局的工具。
其中,“插入表格”和“绘制分层”按钮, 可以分别在文档中插入普通表格和绘制分层, 这两个按钮只在标准视图状态下才有效(关于 表格和分层的操作,我们会在有关章节进行 介绍);
绘制布局表格和绘制布局单元格工具按钮只 在局视图状态下才有效,这两个工具是我们 这一节介绍的重点。
返回到标准的设计视图
方法一:如果希望返回到标准的设计视 图状态中,可以在View菜单;选择 TableView,然后选中StandardView(标 准视图)命令,
方法二:在插入面板的Layout选项卡上 单击StandardView(标准视图)按钮。
布局的基本步骤
一般来说,应该首先绘制布局表格,然后 在布局表格的有效空间中绘制布局单元格。 Dreamweaver会根据你所绘制的布局单元 格,自动生成其他的单元格。如果你这时 候切换回标准视图,你就可以看到实际所 生成的表格,如图显示了这种特性。
了解布局视图
布局视图(LayoutView):它是一种特殊 的表格视图,它的作用在于用可视化的 方法在页面上绘制复杂表格。
它同传统绘制表格方法的差别在于,在 布局视图中,我们可以在页面上绘制任 意数量和大小的表格,而且在表格中的 任意位置上也可以绘制任意数量和任意 大小的单元格
要进入布局视图,可以按照如 下方法进行操作:
要在页面中绘制布局表格和布 局单元格,操作步骤:
1.进入布局视图。
2.如果要绘制布局表格,可以单击插入 面板上的“绘制布局表格”按钮,如果 要绘制布局单元格,可以单击插入面板 上的“绘制布局单元格”按钮,这时候 鼠标指针·会变为十字线形状。
要在页面中绘制布局表格和布 局单元格,操作步骤:
3.根据需要,在页面上拖动鼠标,绘制 需要的大小区域,即可完成布局表格和 布局单元格的创建。
另外,也可以直接在页面上绘制布局单 元格,这时候Dreamweaver会自动围绕你 绘制的布局单元格,生成一个布局表格, 并根据该布局表格与文档窗口边缘的距离, 确定是否生成其他的单元格,如图所示。
布局的基本步骤(图示)
首先绘制布局 表格
ቤተ መጻሕፍቲ ባይዱ
然后绘制布局 单元格
实际生成的 表格
直接绘制布局单元格格 围绕布局单元格生成的布局表格
布局版面的过程, 实际上就成为绘制表格的过程。 根据页面布局的需要,表格可能会比较 简单,也可能会非常复杂。
为什么要用表格来布局版面呢?
这是因为表格具有很多特性,能够 满足我们页面布置的多种需要。例如:
如果将表格和单元格的宽度或高度设置
为固定大小,则即使我们改变了浏览器 窗口的大小,单元格中的内容在页面上 的位置也能保持不变,从而实现内容的 绝对定位;
要在页面中绘制布局表格和布 局单元格,可以按照如下方法 进行操作:
4.重复上述步骤,即可绘制新的布局表格,或 是在现有的布局表梧中绘制新的布局单元格。
注意:默认状态下,每绘制一次布局表格或单 元格,都要在插入面板上重新单击一次相应 的工具。
网页的版面布局
网页的版面布局可以说是页 面设计中最先需要考虑的步 骤,也是最重要的步骤。
什么是版面布局
在具体添加网页内容之前,应该首先对 网页进行合理的版面布局,确定什么地 方要安放什么内容,或什么地方要实现 什么效果。
什么是版面布局:实际上就是在页面上 指定的位置安放“容器”,以确保“容 器”中的内容只在该地方显示。
版面布局的重要性:
版面布局的重要性:
1. 就仿佛作文中的拟提纲,绘画中的 勾轮廓,是页面创作时的第一步, 也是统领全局的必要手段。
2. 只有合理进行版面布局,才能制作 出美观的页面,而且便于日后的维 护和修改。
谁来充当“容器”?布局版面 是怎样的过程?
在HTML中,要实现“容器”的作用, 最好的方法就是使用表格。
如果表格和单元格的宽度和高度设置为
百分比的形式,则在改变浏览器窗口大 小时,表格和单元格的大小也会随之变 化,因此其中的内容位置也随之变化, 这样又便于实现内容的相对定位。
版面的布局可以采用如下四种 方法:
方法一:通过标准的表格操作来绘制版 面。
缺点:这种操作不仅费力,而且难于控 制,要利用标准的表格操作方法来生成 一个比较复杂的表格,会耗费你大量的 时间,而且往往需要返工。
版面的布局可以采用如下四种
方法
方法三:首先在fireworks中构建切片,然后利 用fireworks的到处特性,导出包含表格和切图 像的HTML。
这种方法优点在于:可以像绘图一样布局版面 (因为布局版面实际上是在Fireworks进行的), 缺点在于如果希望修改版面,则不得不返回到 Fireworks中重新进行修改,修改完毕,还要 再进行导出操作。如果页面上已经填人了内容, 则还不得不重新填入一次。所以,利用 Fireworks切片来布局版面,通常只能在页面 创作前使用一次,以后就很少使用。