关于dreamweaver的布局
“窗口-工作区布局-经典。
文件(左上角)下有布局”
工作区域布局
A:文档工具栏 B:应用程序栏 C:“文档”窗口 D:工作区切换器 E:面板组 F:标签选择器 G:属性检查器 H:文件面板
望采纳
工作区布局
A:文档工具栏 B:应用程序栏 C:“文档”窗口 D:工作区切换器 E:面板组 F:标签选择器 G:属性检查器 H:文件面板
一、概述
在网页制作中,对文字和对象的位置控制是比较困难的,以前我们通过表格来定位,但往往达不到精度要求。“层”是Dreamweaver 中另处一种可以进行排版的工具。它可以被定位在页面的任意位置,并且其中可以包含文本、图像等所有可直接插入至网页的对象。
层拥有很多表格所不具备的特点,比如可以重叠、便于移动、可设为隐藏等。
二、层的创建和删除
显示面板:窗口—>其它—>层(F2)
插入栏—>常用—>层(直接绘制,按Ctrl可连绘)
插入栏—>布局—>层(直接绘制,按Ctrl可连绘)
插入菜单—>层
拖动插入栏上图标到页面。
三、使用“属性面板”设置层的属性
选择一个或多个层后即可对它们进行操作或更改它们的属性。
1、“单个层”的“属性面板”
首先要选择层:在层面板中单击该层的名称、单击一个层的边框、在一个层中按住Ctrl+Shift键并单击。(如果已选定多个层,此操作会取消选定其他所有层而只选择您所单击的层。)、在设计视图中单击层代码标记,它表示层在HTML代码中的位置。
层编号
用于指定一个名称,以便在层面板和JavaScript代码中标识该层。每个层必须有它自己的唯一名称。
左和上(左侧和顶部)
指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。
宽和高
指定层的宽度和高度。
注:位置和大小的默认单位为像素(px)。您也可以指定以下单位:pc(pica,十二点活字,约为我国新四号铅字)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)或%(父层相应值的百分比)。这些缩写必须紧跟值,中间不留空格。
z轴
当层重叠时,用以设置层之间的前后排列顺序。值越大,显示越靠前。(使用层面板要比输入特定的z轴更为简便。)
可见性
指定该层最初是否是可见的。
default(默认):不指定可见性属性,大多数浏览器都会默认为“继承”。
inherit(继承):表示使用该层父级的可见性属性。
visible(可见):表示显示该层的内容,而不管父级的值是什么。
hidden(隐藏):表示隐藏层的内容,而不管父级的值是什么。
使用脚本语言(如JavaScript)可控制可见性属性并动态地显示层的内容。
背景图像
可以为层指定一个背景图像。
背景颜色
可以为层指定一个背景颜色。如果将此选项留为空白,则可以指定透明的背景。
类
可以应用定义好的 CSS 样式。
溢出
当层的内容超过层的指定大小时,设定如何在浏览器中显示层,它的效果必须在浏览器中预览时才会出现。
visible(可见):指定在层中显示额外的内容,实际上,该层会通过延伸来容纳额外的内容。
hidden(隐藏):指定不在浏览器中显示额外的内容。
scroll(滚动):指定浏览器在层上添加滚动条,而不管是否需要滚动条。
auto(自动):使浏览器仅在需要时才显示层的滚动条。
剪辑
可以定义层的可见区域,有上“左”、“右”、“上”、“下”4项。
从层的左上角开始计算,指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后,只有指定的矩形区域才是可见的。
2、“多个层”的“属性面板”
首先选择层:按住Shift键并单击层面板上的两个或更多个名称、在两个或更多个层的边框内(或边框上)按住Shift键并单击。
标签
可以指定用来定义这些层的 HTML 标签。在下拉列表中有DIV和SPAN两个选项。
四、层的基本操作
1、调整层的大小
调整单个层的大小(拖动手柄、Ctrl+箭头)
调整多个层的大小
2、移动层的位置(鼠标、箭头键或Shift+箭头键)
3、层的对齐
修改—>对齐—>选择项目
4、在层中插入对象
5、层的叠加顺序
修改—>排列顺序—>选择项目或修改层的z值
6、将层靠齐到网络
Shift+Ctrl+箭头与网格线重合
7、层的复制、剪切和粘贴
8、层的嵌套
直接插入层、拖入另一层标记、面板上拖动或Ctrl辅助拖动层、ALT辅助绘制层
五、层的绝对定位与相对定位
六、使用“层”浮动面板管理层(F2)
显示/隐藏层:更改层的可见性。
防止重叠:若勾选这个选项,则层之间将不能重叠,而只能并行排列。
名称:层的名称。
Z轴
七 、设置层的默认属性
编辑菜单—>参数选择—>层
1、标签
设置在创建层时Dreamweaver要使用的HTML标签。其选项为div(默认)和span。
2、显示
确定层在默认情况下是否可见。其选项为“默认”“继承”“可见”和“隐藏”。
3、宽和高
指定使用“插入层”创建的层的默认宽度和高度(以像素为单位)。
4、背景颜色
可以指定默认的层显示一种背景颜色。
5、背景图像
可以指定默认的层显示一种背景图像。
6、嵌套
如果在层中则使用嵌套:指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时,按住键盘上的Alt 键可暂时更改此设置。
7、Netscape 4 兼容性
插入层时固定大小:在文档的 head 内容中插入 JavaScript 代码以修正Netscape 4 浏览器中的一个已知问题,该问题使层在访问者调整浏览器窗口大小时失去它们的定位。每当调整浏览器窗口大小时,JavaScript 会强制页面重新加载,从而将层重分配到正确的位置。您也可以手动添加或删除 JavaScript 代码,方法是选择“命令—>添加/删除 Netscape 调整大小修复”。
八、在层和表格之间转换
1、将表格转换为层
修改菜单—>转换—>表格到层
对话框中相关的参数如下:
显示网格和靠齐到网格:能够使用网格来协助将层定位.
防止层重叠:可以在转换后的页面中激活防止层重叠的功能。
显示层面板:可以在转换后的页面中显示层面板。
显示网格:可以在转换后的页面中显示网格。
靠起到网格:可以在转换后的页面中将层与网络线对齐。
注:当表格转换为层时,空的单元格不会被转换(除非它们具有背景颜色)。另处在转换时,表格外的页面元素也会被放入层中。
2、将层转换为表格
修改菜单—>转换—>层到表格
对话框中相关参数如下:
最精确:为每个层创建一个单元格,并附加保留层之间的空间所必需的任何单元格。
最小:合并空单元。指定如果层定位在指定数目的像素内,则层的边缘应对齐。如果选择此选项,转换后表格将包含较少的空行和空列,但可能与之前的层的排版不能精确地匹配。
使用透明GIF:用透明的GIF图像填充表格的最后一行。这将确保该表格在所有浏览器中以相同的列宽显示。当勾选此选项后,用户将不能通过拖动表格的列框来编辑转换后的表格。当取消勾选此选项后,转换后的表格将不会包含透明GIF图像,但在不同的浏览器中可能会具有不同的列宽。
置于页面中央:将转换后的表格在页面中居中对齐。如果取消勾选该选项,表格将在页面中左对齐。
注:在转换之前,层不能有重叠。
八、层和行为相结合制作动态效果
http://qygqyg.51.net/layer.htm#
第九章 层的使用
一、概述
在网页制作中,对文字和对象的位置控制是比较困难的,以前我们通过表格来定位,但往往达不到精度要求。“层”是Dreamweaver 中另处一种可以进行排版的工具。它可以被定位在页面的任意位置,并且其中可以包含文本、图像等所有可直接插入至网页的对象。
层拥有很多表格所不具备的特点,比如可以重叠、便于移动、可设为隐藏等。
二、层的创建和删除
显示面板:窗口—>其它—>层(F2)
插入栏—>常用—>层(直接绘制,按Ctrl可连绘)
插入栏—>布局—>层(直接绘制,按Ctrl可连绘)
插入菜单—>层
拖动插入栏上图标到页面。
三、使用“属性面板”设置层的属性
选择一个或多个层后即可对它们进行操作或更改它们的属性。
1、“单个层”的“属性面板”
首先要选择层:在层面板中单击该层的名称、单击一个层的边框、在一个层中按住Ctrl+Shift键并单击。(如果已选定多个层,此操作会取消选定其他所有层而只选择您所单击的层。)、在设计视图中单击层代码标记,它表示层在HTML代码中的位置。
层编号
用于指定一个名称,以便在层面板和JavaScript代码中标识该层。每个层必须有它自己的唯一名称。
左和上(左侧和顶部)
指定层的左上角相对于页面(如果嵌套,则为父层)左上角的位置。
宽和高
指定层的宽度和高度。
注:位置和大小的默认单位为像素(px)。您也可以指定以下单位:pc(pica,十二点活字,约为我国新四号铅字)、pt(点)、in(英寸)、mm(毫米)、cm(厘米)或%(父层相应值的百分比)。这些缩写必须紧跟值,中间不留空格。
z轴
当层重叠时,用以设置层之间的前后排列顺序。值越大,显示越靠前。(使用层面板要比输入特定的z轴更为简便。)
可见性
指定该层最初是否是可见的。
default(默认):不指定可见性属性,大多数浏览器都会默认为“继承”。
inherit(继承):表示使用该层父级的可见性属性。
visible(可见):表示显示该层的内容,而不管父级的值是什么。
hidden(隐藏):表示隐藏层的内容,而不管父级的值是什么。
使用脚本语言(如JavaScript)可控制可见性属性并动态地显示层的内容。
背景图像
可以为层指定一个背景图像。
背景颜色
可以为层指定一个背景颜色。如果将此选项留为空白,则可以指定透明的背景。
类
可以应用定义好的 CSS 样式。
溢出
当层的内容超过层的指定大小时,设定如何在浏览器中显示层,它的效果必须在浏览器中预览时才会出现。
visible(可见):指定在层中显示额外的内容,实际上,该层会通过延伸来容纳额外的内容。
hidden(隐藏):指定不在浏览器中显示额外的内容。
scroll(滚动):指定浏览器在层上添加滚动条,而不管是否需要滚动条。
auto(自动):使浏览器仅在需要时才显示层的滚动条。
剪辑
可以定义层的可见区域,有上“左”、“右”、“上”、“下”4项。
从层的左上角开始计算,指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形。层经过“剪辑”后,只有指定的矩形区域才是可见的。
2、“多个层”的“属性面板”
首先选择层:按住Shift键并单击层面板上的两个或更多个名称、在两个或更多个层的边框内(或边框上)按住Shift键并单击。
标签
可以指定用来定义这些层的 HTML 标签。在下拉列表中有DIV和SPAN两个选项。
四、层的基本操作
1、调整层的大小
调整单个层的大小(拖动手柄、Ctrl+箭头)
调整多个层的大小
2、移动层的位置(鼠标、箭头键或Shift+箭头键)
3、层的对齐
修改—>对齐—>选择项目
4、在层中插入对象
5、层的叠加顺序
修改—>排列顺序—>选择项目或修改层的z值
6、将层靠齐到网络
Shift+Ctrl+箭头与网格线重合
7、层的复制、剪切和粘贴
8、层的嵌套
直接插入层、拖入另一层标记、面板上拖动或Ctrl辅助拖动层、ALT辅助绘制层
五、层的绝对定位与相对定位
六、使用“层”浮动面板管理层(F2)
显示/隐藏层:更改层的可见性。
防止重叠:若勾选这个选项,则层之间将不能重叠,而只能并行排列。
名称:层的名称。
Z轴
七 、设置层的默认属性
编辑菜单—>参数选择—>层
1、标签
设置在创建层时Dreamweaver要使用的HTML标签。其选项为div(默认)和span。
2、显示
确定层在默认情况下是否可见。其选项为“默认”“继承”“可见”和“隐藏”。
3、宽和高
指定使用“插入层”创建的层的默认宽度和高度(以像素为单位)。
4、背景颜色
可以指定默认的层显示一种背景颜色。
5、背景图像
可以指定默认的层显示一种背景图像。
6、嵌套
如果在层中则使用嵌套:指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。在绘制层时,按住键盘上的Alt 键可暂时更改此设置。
7、Netscape 4 兼容性
插入层时固定大小:在文档的 head 内容中插入 JavaScript 代码以修正Netscape 4 浏览器中的一个已知问题,该问题使层在访问者调整浏览器窗口大小时失去它们的定位。每当调整浏览器窗口大小时,JavaScript 会强制页面重新加载,从而将层重分配到正确的位置。您也可以手动添加或删除 JavaScript 代码,方法是选择“命令—>添加/删除 Netscape 调整大小修复”。
八、在层和表格之间转换
1、将表格转换为层
修改菜单—>转换—>表格到层
对话框中相关的参数如下:
显示网格和靠齐到网格:能够使用网格来协助将层定位.
防止层重叠:可以在转换后的页面中激活防止层重叠的功能。
显示层面板:可以在转换后的页面中显示层面板。
显示网格:可以在转换后的页面中显示网格。
靠起到网格:可以在转换后的页面中将层与网络线对齐。
注:当表格转换为层时,空的单元格不会被转换(除非它们具有背景颜色)。另处在转换时,表格外的页面元素也会被放入层中。
2、将层转换为表格
修改菜单—>转换—>层到表格
对话框中相关参数如下:
最精确:为每个层创建一个单元格,并附加保留层之间的空间所必需的任何单元格。
最小:合并空单元。指定如果层定位在指定数目的像素内,则层的边缘应对齐。如果选择此选项,转换后表格将包含较少的空行和空列,但可能与之前的层的排版不能精确地匹配。
使用透明GIF:用透明的GIF图像填充表格的最后一行。这将确保该表格在所有浏览器中以相同的列宽显示。当勾选此选项后,用户将不能通过拖动表格的列框来编辑转换后的表格。当取消勾选此选项后,转换后的表格将不会包含透明GIF图像,但在不同的浏览器中可能会具有不同的列宽。
置于页面中央:将转换后的表格在页面中居中对齐。如果取消勾选该选项,表格将在页面中左对齐。
注:在转换之前,层不能有重叠。
八、层和行为相结合制作动态效果
http://qygqyg.51.net/layer.htm#
dreamweawer cs6中有几种形式的超链接,分别适用于什么情况
Dreamweaver中超级链接有:链接网页 、链接书签、导航条 、链接图片 、链接多媒体 、链接下载5类。文字链接:用文字使用超级链接,转到另一个页面。锚点链接:用name定义锚点,再使用herf链接到当前页面或另一个页面中的某个锚点。图片链接:将图片设置超级链接,与文字链接等同。其他的情况,就是使用按钮、...
photoshop ,Flash,fireworks,dreamweawer之间的关系
简单的说photoshop 图片处理软件 Flash 动画制作软件 fireworks 矢量图制作软件 也常用于网页切片 dreamweawer 网页制作软件 功能都各不一样 都有其独特之处 可以先从 ps dw 先 入手
photoshop ,Flash,fireworks,dreamweawer之间的关系
简单的说photoshop 图片处理软件 Flash 动画制作软件 fireworks 矢量图制作软件 也常用于网页切片 dreamweawer 网页制作软件 功能都各不一样 都有其独特之处 可以先从 ps dw 先 入手
现在企业网站建设用什么软件做
1、dreamweawer网页设计制作工具 2、flash动画制作工具 3、photoshop图片处理工具 但这些软件需要的专业知识比较多,而且软件操作起来毕竟复杂。二、免费自助建站系统 自助建站软件的操作门槛更为的低,新手不需要掌握任何的网页设计知识都可以通过这个软件进行网站制作。而凡科自助建站就是这一类型的建站平台。...
DREAMWEAWER坐网页出现,就是层的背景颜色和背景图有错误,CSS属性LAYER...
LAYER-background-image(color)我也没看明白~正确的css背景图片设置:bakcground-image:url(..图片路径..)bakcground-color:#000; \/\/图片空白部分颜色 background-repeat:no-repeat; \/\/图片不重复排列,也可以是repeat-x,repeat-y和repeat background-position:center center; \/\/背景图片出现的位置,...
DreamWeawer什么语句(属性设置)能让链接在新的选项卡中打开?
把超级链接的“目标”设为 _blank 或在a标记加入target="_blank"谁跟你说_blank是打开空白页的?是在新窗口中打开对应链接的页面,至于是打开新的选项卡还是窗口,只能由浏览器设定,代码里是不可能设置到的,除非用JAVASCRIPT,但会被认为是病毒。
...的登录界面的代码,还有怎么将代码用到dreamweaer里
直接粘贴在“代码”里面就行了啊!另外,DW中能说是帮助你完成简单的静态的HTML编写,至于动态的部分,建议手动写代码。这样可以提高技术!
特求一个6000字左右的网页制作心得
我用尽了所有能想出来的方法,请教了很多的电脑高手都不能把这个无法解释的问题解决,就连重新安装也毫无作用,由于是借别人的电脑,时间紧迫,没有等到去向老师请教,我就一气之下把那些东西都删光了,连Dreamweaer也不例外,当时我真的很失望,想到这两天废寝忘食地做的东西一下全没了就很是接受不了,我曾经一度想...
网站后台管理系统 怎么做出来的
如果你想做网站的话,你需要做一个前台,也要做一个后台,前台后台是业务逻辑的说法。具体到代码,前台和后台各自有他们的前端和后端,前端也就是html\/css\/js代码写的,后端就是程序语言java、python等编程语言写的,是程序编程的范畴。前台是提供给游客,注册用户等目标人群使用的,后台是提供给网站管理...
学肺甜梦: 纠正一下,所谓“切片布局”其实就是表格布局. 网页布局常用方法有三种:纯表格布局、DIV+CSS布局、表格+CSS布局; 1、表格布局优点就是简单,上手容易,兼容性强;缺点是表格嵌套过多会影响页面加载,布局修改起来很不灵活. 2、DIV+CSS布局优点:符合标准,网页结构清晰,布局灵活,修改方便,能节省页面加载带宽;缺点就是,比表格布局难掌握,如果不能驾驭它,兼容性是个很大的问题. 3、表格+CSS布局:没什么好说的,四个字---“不伦不类” 天南设计建议你从开始就向DIV+CSS这方面迈步,这是趋势.开头别怕难.
南漳县13322827244: Dreamweaver版面布局样式有哪几种 - ?
学肺甜梦: Dreamweaver版面布局样式有4种:Div标签、层、布局表格、布局单元格
南漳县13322827244: Dreamweaver窗口布局有哪些步骤? ?
学肺甜梦: 可以从中选择一种工作区布局.如果您不熟悉编写代码,请您选择“设计者”.如果您以后想更改工作区,可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区...
南漳县13322827244: 在Dreamweaver中使用 表格布局时有哪几种模式,各有什么特点 - ?
学肺甜梦: 1、标准视图模式标准视图模式是最常用的编辑模式,也是最接近实际效果的模式,在Dreamweaver 8 中,用鼠标在表格内单击或者调整单元格列宽时,会发现随时出现的宽度提示. 2、扩展视图模式扩展视图模式主要是针对用户在选择比较小的表格或单元格时的显示模式,在该模式下,表格的框线和间距会变得特别粗大,目的是让读者方便选取到较小的单元格及其内容,调整完后再切换到标准模式. 3、布局视图模式布局视图模式结合了表格和层的优点,该模式下支持直接用鼠标拖动来绘制表格与单元格,是进行页面布局最常用的方式之一,利用该模式可以很方便地进行页面的版面设计,轻松地完成在标准模式下较难实现的版面效果,对于制作变化丰富的网页有很大的优势.
南漳县13322827244: Dreamweaver布局?
学肺甜梦: 现在流行div+css布局,一般是刚开始设计的大的div宽度,里面插入小的div宽度加起来要相等 还有一些css样式比如float ,margin 等等要记住它们的功能,刚开始写的时候都要把那个 w3c给删掉 ,这个有时会影响效果,特别是做漂浮图片的时候一定要删掉! (个人意见,希望采纳)
南漳县13322827244: 怎么用Dreamweaver搭建网页布局设置? - ?
学肺甜梦: 用布局,绘制布局表格.div+CSS也是一个很好的办法.不过一般人可能不懂.不过用Dreamweaver学起来很简单.学会了以后,你会发现div+css的强大,而不会去用表格布局了.我是用实际体验告诉你的.相信我吧.我之前也不会.后来才越来发现CSS的强大好处了.
南漳县13322827244: Dreamweaver怎么设置工作区布局 - ?
学肺甜梦: 工作区,自己拉的方法,自己想怎么布局就怎么布局.可以在窗口打开全部,就可以拉你想要的布局.
南漳县13322827244: Dreamweaver 怎么网页布局 div css布局 - ?
学肺甜梦: 网站布局大体分为: 上中下,上-左右-下,左(上下)右等. 掌握这种大体布局方式,再用div+CSS布局. 给你写个上中下的最简单形式你瞅瞅 网站布局DIV+CSS*{ margin: 0; padding:0; } .header,.main,.footer{ width: 100%; text-align: center; ...
南漳县13322827244: Dreamweaver8中常用的布局方法有哪些,请简要说明. - ?
学肺甜梦: 框架、表格、层上高中的时候学的就是框架正真开始学做网站的时候就是用表格的后来web2.0的革命,DIV就成为现在的主流了
南漳县13322827244: ★关于Dreamweaver 布局的问题★?
学肺甜梦: 两种方法: 方法一:表格法: 建一个2行1列的表格,边框=0,间距=1,表<table>的背景设置为他边框的那种颜色,表格<td>的背景设置为白色,最上“考试·题库·UC”下面的渐变的背景,请用photoshop做一个渐变的小图片做背景即可. ...