Dreamweaver4简明教程(七、网页的排版3)

cao6543

cao6543

2016-02-19 19:53

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

层的使用

  如果你觉得用表格对页面元素进行定位太难掌握,不妨尝试利用层(Layer)这个好东西。点击属性面板的  按钮,光标会成为一个十字,在编辑窗口上拖动,就可以创建出一个层,我们可以在层上输入绝大部分的网页元素,例如图片、文字等。层的好处是可以放置在页面的任何位置,如下图:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  选择一个层后,对应的属性面板如下:

  ① Layer ID:层的名称,用于识别不同的层;

  ② L,T:层的位置,L是距离页面左边界的距离,T是距离页面上边界的距离;
    W,H:层的宽和高;

  ③ Z-Index:层的Z轴顺序;

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  ④ Bg Image:层的背景图;

  ⑤ Vis:层的显示状态,其中的Hidden是将层隐藏,处于不可见状态;

  ⑥ Bg Corlor:层的背景颜色;

  ⑦ Tag:层使用的代码方式,一般使用默认的DIV即可;

  ⑧ Overflow如果层里面的文字太多,或图片太大,层的大小不足以全部显示的时候,可以选择:
    visible:超出的部分照样显示;
    hidden:超出的部分隐藏;
    scrool:不管有否超出,都显示滚动条;
    auto:有超出时才出现滚动条;
 例如我们选择auto,那么以上例子中的层,在浏览时会显示为:

  层的优点很明显,但缺点也同样明显,例如难以制作一个适应不同分辨率的网页;当一个页面使用了多个层后,页面的复杂程度增加而导致编辑起来非常烦琐;编辑状态与浏览状态的实际效果有相当明显的差别等。通常人们是采用利用Layer进行排版,然后将层转换为表格的做法(Modefy Convert Layers to Table),具体操作在此就不多加叙述,大家可自己尝试一下。

展开更多 50%)
分享

猜你喜欢

Dreamweaver4简明教程(七、网页的排版3)

Web开发
Dreamweaver4简明教程(七、网页的排版3)

Dreamweaver4简明教程(七、网页的排版)

Web开发
Dreamweaver4简明教程(七、网页的排版)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Dreamweaver4简明教程(七、网页的排版4)

Web开发
Dreamweaver4简明教程(七、网页的排版4)

Dreamweaver4简明教程(七、网页的排版2)

Web开发
Dreamweaver4简明教程(七、网页的排版2)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Dreamweaver 4 简明教程(七、网页的排版4)

Web开发
Dreamweaver 4 简明教程(七、网页的排版4)

Dreamweaver 4 简明教程(七、网页的排版2)

Web开发
Dreamweaver 4 简明教程(七、网页的排版2)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

在设计视图中Access允许的九种数据类型

在设计视图中Access允许的九种数据类型

用Dreamweaver MX创造网页鼠标样式

用Dreamweaver MX创造网页鼠标样式
下拉加载更多内容 ↓