设计稿 自动html,从设计稿到HTML.pdf

从设计稿到HTML

V

第一节

认识表格布局法

用表格定位网页元素

表格定位法是把整个网页当做一个或多个表格来进行划分，然后将文本

或图片等不同的网页元素分别填充到到一个个单元格里面。

通过单元格的相对对齐属性来进行定位，比如居中，居左等。

• 这是一种传统的网页制作方法，在现阶段专业的网页制作当中已不被推荐，因为不符

合HTML语义的标准，即HTML中的表格元素应仅用于数据类表格，而不是用于布局。但

专业的网页制作需要更多的技术背景，而该方法可以作为应急的手段。

表格创建

表格的基本代码结构

第一个单元格	第二个单元格
第一个单元格	第二个单元格

表格选择

• 选择表格，属性面板就会切换为表格属性

• 只要我们把鼠标放在表格边界上点击就可以

选择表格，表格选定后会有黑色手柄出现。

• 表格的标签为

条中的相应标签来选中整个表格。 (推荐)

表格属性

项目 说明 备注

表格 Id 表格名

Rows行 行数

Cols列 列数

W宽 宽度

单位有两种形式：像素/百分比

H高 高度

CellPad填充 单元格内元素到容器边界的距离

缺省值不等于0

CellSpace间距 单元格与单元格之间的距离

Align 对齐 对齐属性 相对于外部容器

Border边框 边框宽度

Bg Color 背景颜色

Brdr Color 边框颜色

Bg Image 背景图像

单元格属性

• 什么是单元格 项目 说明

• 标签

Horz 水平对齐

Vert 垂直对齐

• 属性

No Wrap 不换行

Bg (上) 背景图像

Bg (下) 背景颜色

分离

合并

第二节

表格练习

建立一个表格

技巧：

{250, 50}