超级网页设计器控件的公共属性介绍

介绍级网页设计器控件的公共属性使用方法,这些公共属性包括“类型”、“名称”、“id值和name值”、“位置、大小”、“按显示设备设置位置、大小和字体大小”等。
控件的公共属性

类型

控件所属类型。说明是何种控件。

名称

控件的名称,同一网页里唯一,有严格的定义规则,如不能有“*”、“\”、“|”等特殊字符。如果“id值和name值”里没有定义,在生成网页元素时,需要id和name的话,会以此名称值作为元素的id和name值。如果“id值和name值”里有定义值,则使用这定义的值作为生成后元素的id和name值。

对齐方式

对齐方式主要影响控件的布局,即排版。有些对齐方式是设计阶段生效,有些是生成网页后才生效。需要说明的是,生成网页后的布局,还受属性“位置、大小”中的“position”影响。所以我们经常会看到设计时是这样布局,生成网页后又是不一样的布局。这点大家心里要明白。一般情况下,“位置、大小”中的“position”设置为“将position设置为absolute_绝对位置”,设计时的位置与生成网页后的位置相同。如果设置为“将position设置为relative_相对前一元素底部”,设计时的位置与生成网页后的位置不相同。对齐方式可选的值有:不对齐, 顶部对齐_设计时生效, 左边对齐_设计时生效, 右边对齐_设计时生效, 底端对齐_设计时生效,最顶对齐_设计时生效, 最底对齐_设计时生效, 最左对齐_设计时生效, 最右对齐_设计时生效,充满对齐_设计时生效, 按内容对齐_设计时生效, 正中对齐_设计时生效, 垂直居中对齐_设计时生效,水平居中对齐_设计时生效, 按父比例放大缩小对齐_设计时生效, 最顶对齐_运行网页后生效, 最左对齐_运行网页后生效, 最底对齐_运行网页后生效, 最右对齐_运行网页后生效,水平居中对齐_运行网页后生效, 垂直居中对齐_运行网页后生效。

id值和name值

id值和name值是指设置控件生成网页元素后所用的id值和name值。当元素需要有id值或name值时,可以在这里设置。如果“必有id值”或“必有name值”为“true”,而“id值”或“name值”为空,则会取“名称”作为生成元素的“id值”或“name值”。

位置、大小

主要设置控件的位置和大小相关的属性,有position、display、float、左边距、顶边距、宽度、高度等。

position

position属性用于指定一个元素在文档中的定位方式。top,right,bottom 和 left属性则决定了该元素的最终位置。position属性共有五个值可选:将position设置为absolute_绝对位置, 将position设置为relative_相对前一元素底部,将position设置为inherit_继承父元素position, 将position设置为fixed_固定位置, 将position设置为static。关于position知识,请看 position(定位元素)_百度百科

display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值,这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。可供选择的值有:dNone, dInline, dBlock, dInline_block, dList_item, dRun_in, dCompact,dMarker, dTable, dInline_table, dTable_row_group, dTable_header_group,dTable_footer_group, dTable_row, dTable_column_group, dTable_column, dTable_cell, dTable_caption, dFlex, dInherit。

float

float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。Float(浮动),往往是用于图像,但它在布局时一样非常有用。元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

左边距

左边距,离父控件左边线的距离。对应html的left属性。注意:属性“自动左边距”设置为“true”该属性不产效。

顶边距

顶边距,离父控件顶边线的距离。对应html的top属性。注意:顶边距只有当“position”属性设置为“将position设置为absolute_绝对位置”才生效。如果“position”属性设置为“将position设置为relative_相对前一元素底部”,请使用属性“边距”->“外边距”的顶边距设置来达到相同的效果。注意:属性“自动顶边距”设置为“true”该属性不产效。

宽度

宽度,控件的宽度。对应html的width属性。注意:属性“自动宽度”设置为“true”该属性不产效。

高度

高度,控件的高度。对应html的height属性。注意:属性“自动高度”设置为“true”该属性不产效。

右边距

右边距,离父控件右边线的距离。对应html的right属性。注意:属性“自动左边距”设置为“true”该属性不生效。另外注意:右边距只有当“position”属性设置为“将position设置为absolute_绝对位置”或“将position设置为fixed_固定位置, 将position设置为static”才生效。

底边距

底边距,离父控件底边线的距离。对应html的bottom属性。注意:属性“自动底边距”设置为“true”该属性不生效。另外注意:底边距只有当“position”属性设置为“将position设置为fixed_固定位置”才生效。

与父的宽度同

控件的宽度与父控件的宽度同。生成网页后生效,设计时不生效。

与父的高度同

控件的高度与父控件的高度同。生成网页后生效,设计时不生效。

自动宽度

自动宽度设置为“true”,表示宽度按内容自动调整。对应HTML为“width:auto”。

自动高度

自动高度设置为“true”,表示高度按内容自动调整。对应HTML为“height:auto”。

自动左边距

自动左边距设置为“true”,表示不设置左边距。对应HTML为“left:auto”。

自动右边距

自动右边距设置为“true”,表示不设置右边距。对应HTML为“right:auto”。

左边距_移动网页

网页在移动网页(手机,平板电脑)下显示时该控件的左边距。

顶边距_移动网页

网页在移动网页(手机,平板电脑)下显示时该控件的顶边距。

宽度_移动网页

网页在移动网页(手机,平板电脑)下显示时该控件的宽度。

高度_移动网页

网页在移动网页(手机,平板电脑)下显示时该控件的高度。

移动网页不出现

网页在移动网页(手机,平板电脑)下不显示时该控件。

电脑网页不出现

网页在电脑下不显示时该控件。

按当前大小比例自适应

当控件生成的元素在设备上显示时,元素的大小比父元素的大小还要大时,元素将按当前长宽比例自动改变大小以适应显示。

自适应_右边距

当“按当前大小比例自适应”设置为“true”时,该属性才起效。表示适应时控件右边离父控件右边的距离。

自适应_底边距

当“按当前大小比例自适应”设置为“true”时,该属性才起效。表示适应时控件底边离父控件底边的距离。

按显示设备设置位置、大小、字体大小

设置该控件分别在手机、平板电脑和超大屏设备上显示的状态。当一个网页要自适应不同设备下浏览时用到。

手机

设置该控件在手机上显示的状态。可以设置的属性有“不显示”、“宽度”、“高度”、“左边距”、“顶边距”、“字体大小”。只有“启用”设置为“true”为起效。注意:如“宽度”设置为“80%”,表示该控件的宽度取默认设置宽度的80%,如当前宽度设置为“200px”,则该设备下生成网页后实际值则为“160px”。如果非要将该值设置为“80%”,请多加一个“%”,应设置为“80%%”。其他“高度”、“左边距”、“顶边距”等设置类同。

平板电脑

设置该控件在平板电脑上显示的状态。可以设置的属性有“不显示”、“宽度”、“高度”、“左边距”、“顶边距”、“字体大小”。只有“启用”设置为“true”为起效。注意:如“宽度”设置为“80%”,表示该控件的宽度取默认设置宽度的80%,如当前宽度设置为“200px”,则该设备下生成网页后实际值则为“160px”。如果非要将该值设置为“80%”,请多加一个“%”,应设置为“80%%”。其他“高度”、“左边距”、“顶边距”等设置类同。

超大屏设备

设置该控件在超大屏设备上显示的状态。可以设置的属性有“不显示”、“宽度”、“高度”、“左边距”、“顶边距”、“字体大小”。只有“启用”设置为“true”为起效。注意:如“宽度”设置为“80%”,表示该控件的宽度取默认设置宽度的80%,如当前宽度设置为“200px”,则该设备下生成网页后实际值则为“160px”。如果非要将该值设置为“80%”,请多加一个“%”,应设置为“80%%”。其他“高度”、“左边距”、“顶边距”等设置类同。

锁定

锁定控件。锁定只在设计阶段生效,锁定后不能用鼠标移动,不影响键盘操作,如可以用方向键移动控件。

边距

外边距

外边距相对父控件来说,即相对父控件的边线距离。当前控件的“position”要设置为“将position设置为relative_相对前一元素底部”才生效。可以分别设置“左边距”、“顶边距”、“右边距”、“底边距”。

内边距

内边距相对子控件来说,即子控件相对他的父控件(当前控件)的边线距离。子控件的“position”要设置为“将position设置为relative_相对前一元素底部”才生效。可以分别设置“左边距”、“顶边距”、“右边距”、“底边距”。

光标动作

光标聚焦

光标聚焦是指设置鼠标左键点击了该控件后的状态。因此要控件能聚焦的才生效,如按钮,输入框等。其他如面板、文本输入框等不生效。在控件能聚焦的情况,还要属性“可用”设置为“true”才生效,可设置的属性有“背景颜色”、“边框属性”、“阴影”等。

光标移过

光标移过是指设置鼠标移到该控件时的状态。属性“可用”设置为“true”才生效,可设置的属性有“背景颜色”、“边框属性”、“阴影”等。

边框属性

大小

边框的大小,数值型。

类型

边框的类型,分“Solid”-线,“Dash”-由破折号组成的虚线,“Dot”-由点组成的虚线。

颜色

边框的颜色。

超级连接

连接地址

超级连接的地址。

打开新窗口

在新窗口中打开连接内容。

执行动作

发生事件

动作发生的时机。“OnClick”-鼠标点击该控件时发生。

常用动作

常用动作,内置的常用操作。

名称 作用
无操作 无操作。
刷新 执行刷新当前页面操作。
关闭当前网页 执行后关闭当前网页。
关闭父控件 执行后关闭父控件。注意:父控件一定要设置有id值(即属性“id值和name值”->“必有id值”要设置为“true”)。
关闭父控件的父控件 执行后关闭父控件的父控件。注意:父控件的父控件一定要设置有id值(即属性“id值和name值”->“必有id值”要设置为“true”)。
关闭父控件的父控件的父控件 执行后关闭父控件的父控件的父控件。注意:父控件的父控件的父控件一定要设置有id值(即属性“id值和name值”->“必有id值”要设置为“true”)。
退回上网页 执行后退回上一网页。
前进下网页 执行后进入下一网页。
分享到新浪微博 执行后弹出分享到新浪微博的窗口,将当前网页分享。
分享到微信 执行后弹出分享到微信的二维码,将当前网页分享。
分享到QQ空间 执行后弹出分享到QQ空间的窗口,将当前网页分享。
分享到QQ 执行后弹出分享到QQ的窗口,将当前网页分享。

自定义动作

编写发生事件后的执行代码。

执行动作

见“超级连接”里的“执行动作”,完全一样的。

圆角

设置控件的角是否圆滑。如一个正方形的面板,“圆角大小”设置为边长的1/2,则会产生一个圆形的面板。对图片这样设置就可以做出圆形头像来。

动画

设置该控件加载时的动画,如果有滚动条,滚动到控件出现才加载,并显示动画效果。

动画类型

系统提供了30多种动画类型供选择。效果具体看动画 演示

进行时间(秒)

一般不用设置,用默认的。

循环

设置动画是否可以循环播放。

页面加载后即执行,滚动条滚到后不再执行

为“true”,页面加载后即执行,滚动条滚到后不再执行。默认为false。

更多属性


可见

设置控件是否显示。

隐藏

设置控件是否隐藏。与可见区别:可见占用位置,隐藏不点用位置。

CSS生成到控件内

设置控件的CSS是否生成到控件内,默认是生成到CSS文件中的。

该元素HTML源码放置于

该控件对应的HTML源码放于文档中的位置,如无特别需要请不要改。源码位置一般决定元素的位置。

使用模板属性值

用于“插入网页模板"控件中。网页模板被引用后,在引用的网页中又想修改模板中的某个控件的属性,这里就要先将该属性设置为“false”才起效。

透明度

设置控件的显示的透明度。

层次

对应CSS中的z-index。

样式

给该控件附加的style。

附加calss

给该控件附加calss。

附加内容

在该控件的HTML源码中附加内容。

旋转

设置该控件的旋转角度。

可移动

生成的HTML元素的父元素是否可以用鼠标拖动。注意:鼠标拖动当前元素,是父元素移动。可以实现如文件管理器窗口的拖动效果。

滚动条

自动显示滚动条

设置是否自动显示滚动条,设置为“true”后,内容超出范围才显示。

内容超宽隐藏

内容超宽隐藏设置为“true”,控件上的内容超过右边线时,不显示到控件外。

内容超宽显示滚动条

内容超宽显示滚动条设置为“true”,控件上的内容超过右边线时,不显示到控件外,但显示滚动条。

内容超高隐藏

内容超高隐藏设置为“true”,控件上的内容超过底边线时,不显示到控件外。

内容超高显示滚动条

内容超高显示滚动条设置为“true”,控件上的内容超过底边线时,不显示到控件外,但显示滚动条。

滚动条样式

定制了ss1..ss4共4种滚动条样式。当选择“ssDefine”时,可以通过修改“滚动条大小”、“轨道颜色”、“方块颜色”自定义滚动条。

滚动条大小、轨道颜色、方块颜色

自定义滚动条样式。只有当“滚动条样式”设置为“ssDefine”时方起效。

窗口滚动条滚动时固定不变

特别用法。

相关JS代码

相关的JS代码,效果同在文档尾部添加一样。

拖动不受父控件限制

设置为“true”后,设计时拖动该控件可以拖动到父控件外。默认不允许拖动到控件外。

透明

设置该控件是否透明。

界面风格

特别用法,用于微信风格控件。

Style生成时绑定方式

有两种方式:sctClass-用class绑定;sctID-直接通过id绑定。