教程/dreamweaver/入门 Dreamweaver 4 简明教程12(层的使用)

dreamweaver|教程

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

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

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

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

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

  ④ Bg Image:层的背景图;

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

  ⑥ Bg Corlor:层的背景颜色;

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

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

例如我们选择auto,那么以上例子中的层,在浏览时会显示为:

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

时间: 2024-08-31 03:39:28

教程/dreamweaver/入门 Dreamweaver 4 简明教程12(层的使用)的相关文章

smarty教程-smarty入门基础应用实例教程

采用smarty编写的程序可以获得最大速度的提高,这一点是相对于其它的模板引擎技术而言的. */  代码如下 复制代码 $servername  = 'localhost'; $dbname='whois';//数据库教程名称,需修改为您当前使用的库名称 $tbname='post';//数据表名称,不用修改 $name='root';//数据库用户名,需修改 $password='xxxxxxx';//数据库链接密码,需修改 require_once 'smarty/libs/Smarty.c

教程/dreamweaver/入门 Dreamweaver 4 简明教程2(初步认识 Dreamwe

dreamweaver|教程 Dreamweaver的启动 Dreamweaver的安装过程非常简单,一但成功安装后,就可以在开始菜单找到Dreamweaver的选项: 编辑窗口 第一次启动Dreamweaver,首先看到的是Dreamweaver的编辑窗口,千万别给上面密密麻麻的浮动窗口吓倒,其实常用的,就以下几个: ① 主菜单:在这里可以找到编辑窗口的的绝大部分功能: ② 工具栏:是Dreamweaver4的新增功能: ③ 对象面板(Objects):在网页编辑的过程中,通过单击对象面板的按

教程/dreamweaver/入门 Dreamweaver 4 简明教程13(排版)

dreamweaver|教程 新增的排版功能 前面之所以以将图层与表格互换的功能一笔带过,是因为在DW4,推出了一个新的Layout排版功能,能够更加直接方便地对页面布局进行编排.在对象面板的最下方有四个按钮: 标准视图(Standard View):默认状态下的视图: 排版视图(Layout View):转入排版视图,就是这次要介绍的功能: 按下  按钮后,上面的Layout的两个按钮就可以使用了: 表格排版(LayOut Table):象画图一样在页面里面排版表格: 单元格排版(LayOut

教程/dreamweaver/入门 Dreamweaver 4 简明教程11(表格的使用)

dreamweaver|教程 表格的使用之二 根据上面对表格和单元格的参数,我们可以做出以下的表格: 以上是一个3×2的表格,表格宽度为350个像素,每个单元格的宽度为33%,即占表格的三分之一,其中单元格1和单元格4 已经合并:单元格边距.单元格间距.表格线宽度都为10:表格的底色为灰色,单元格5的边框颜色为红色,单元格6的底色为绿色: 在上面的例子,我们将表格线宽度设置为0,在编辑状态下,看到的表格是: 宽度为0的边框线,在编辑状态下会以虚线表示,而实际的浏览效果为:     可见,宽度为0

教程/dreamweaver/入门 Dreamweaver 4 简明教程10(网页的排版)

dreamweaver|教程|网页 表格的使用 表格是网页的一个非常重要元素,因为HTML本身并没有提供更多的排版手段,我们往往就要借助表格实现网页的精细排版.可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了了网页设计师的水平. 点击对象面板的  ,看到如下的对话框: ① Rows:表格的行数:Columns:表格的列数: ② Width:表格的宽度,单位可以是Pixels(像数)或Percent(百分比).按像素定义的表格大小是固定的,而按百分比定义的表格,会按照浏览器的

教程/dreamweaver/入门 Dreamweaver 4 简明教程9(建立超级链接)

dreamweaver|教程|链接 超级链接(Link),简称链接,是页面与页面之间一个单向的关联关系.通过点击链接,我们可以从一个页面跳到另一个页面.我们可以在文字.图片建立链接. 1.文字链接 在页面中选取需要建立链接的文字,如下图: 在属性面板的Link一项,填写链接地址,当浏览者点击该链接的时候,浏览器就回跳转到该页面,例如这里填写的是:http://www.goeway.com 如果你希望该页面是在一个新窗口打开,可以在Target中选择"_balnk". 如果要链接到网站内

教程/dreamweaver/入门 Dreamweaver 4 简明教程7(让你的网页更漂亮)

dreamweaver|教程|网页 适当的图片,可以令网页生色不少,但也不要忘记,文字,才是一个网页最基本的要素.现在让我们回过头来看看Dreamweaver可以在文字上耍些什么花招. 选取一段文字,此时的属性窗口显示如下: 1.Format:可以选择几种预设的文字格式: 2.选择文字的字体,这里可以选择的全是是英文字体,如果想选择其他字体,就要选择最底的一项,Edit Font List... ① 可以通过加减符号增加或删除一个字体列表: ② 或者选取"Add fonts in list be

教程/dreamweaver/入门 Dreamweaver 4 简明教程3(定义网站)

dreamweaver|教程 在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地利用站点窗口对站点文件进行管理. 定义的方法 方法一:在站点窗口的下拉菜单选择最后一项Define Sites,如下图. 此时会弹出一个新的对话框,点击New按钮是定义一个新网站,如果日后需要对旧有网站重新定义,可以在左边的网站列表中选中你需要重新定义的网站,然后点击 Edit 按钮便可. 方法二:选择命令菜单 Site > New Site 选项. 基本设置 在接着看到的对话框中,要进行以下三步简单的设置

教程/dreamweaver/入门 Dreamweaver 4 简明教程6(让你的网页更漂亮)

dreamweaver|教程|网页 假设现在我们插入的是如下这张图片: 点选该图片,打开属性面板(Ctrl+F3),可看到如下图的状态: 1.图片的缩略图及图片的大小. 2.图片的长宽,如果图片长于宽跟原图的大小不一致的话,这里的数字会用粗体显示:点取一张图片,你可以看到图片会被套上一个框和三个点,三个点分别代表将图片向三个不同的方向拉伸,从而达到放大和缩小的效果:在拉伸过程中,按着Shift键,再拖动角上的点,可以使图片保持宽高比例拉伸,如下图.如果要将图片恢复为原始大小,可以按属性面板右下角