marginheight,marginheight=0 marginwidth=0

http://www.itjxue.com  2023-01-08 15:00  来源:未知  点击次数: 

解释一下:leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

参数leftmargin=20 表示与浏览器左部距离为20

参数topmargin=30 表示与浏览器顶部距离为30

参数marginwidth=100 表示与左右边边界为100

参数marginheight=50 表示与上下边边界为50

在DW中,可以在菜单上的修改页面属性里设置这些参数

群体2318126

html iframe如何设置高度和宽度

一、iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

二、有以下方式对iframe进行设置高度和宽度

1、iframe元素标签可以使用width和height属性,

iframe src ="/index.html" width="400" height="300"/iframe

2、可以使用css来定义宽度和高度

iframe src ="/index.html" style="width:400px;height:300px"/iframe

三、补充:

iframe的属性如下:

iframe 属性

iframe元素的功能是在一个html内嵌一个文档,创建一个浮动的帧。iframe可以嵌在网页中的任意部分

name:内嵌帧名称

width:内嵌帧宽度(可用像素值或百分比)

height:内嵌帧高度(可用像素值或百分比)

frameborder:内嵌帧边框

marginwidth:帧内文本的左右页边距

marginheight:帧内文本的上下页边距

scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示)

src:内嵌入文件的地址

style:内嵌文档的样式(如设置文档背景等)

allowtransparency:是否允许透明

iframe还有一个很有用的用法:强调页面的某项内容

先把要强调显示的内容另存为一个文件,如first.htm,然后通过一个预载页index.htm,内容如下:

〈meta http-equiv="refresh" content="3,url=index2.htm"〉

〈body〉

页面加载中,请稍候……〈iframe src="first.htm" style="display:none"〉〈/iframe〉

〈/body〉

主文件index2.htm

〈body〉

〈iframe src="first.htm"加入其他属性限制〉〈/iframe〉

〈/body〉

解释成“浏览器中的浏览器“很是恰当

iframe frameborder=0 width=170 height=100 marginheight=0 marginwidth=0 scrolling=no src="move-ad.htm"/iframe

IFRAME用于设置文本或图形的浮动图文框或容器。

BORDER

IFRAME BORDER="3"/IFRAME

设定围绕图文框的边缘宽度

FRAMEBODER

IFRAME FRAMEBODER="0"/IFRAME

设置边框是不否为3维(0=否,1=是)

HEIGHT,WIDTH

IFRAME HEIGHT="31" WIDTH="88"/IFRAME

设质边框的宽度和高度

SCROLLING

IFRAME SCROLLING="NO"/IFRAME

是否有滚动条(YES,NO,AUTO)

SRC

IFRAME SRC="GIRL.GIF"/IFRAME

指定IFRAME调用的文件或图片(HTML,HTM,GIF,JPEG,JPG,PNG,TXT,*.*)

-------------------------------------------------------------

“画中画”效果--谈IFRAME标签的使用

纵观时下网站,本来网速就有些慢,可是几乎每页都要放什么Banner,栏目图片,版权等一大堆雷同的东西,当然,出于网站风格统一、广告效应的需要,本无可厚非,可毕竟让用户的钱包为这些“点缀“的东西”日益消得钱憔悴”了,有没有办法,让这些雷同的东西一次下载后就不用再下载,而只下载那些内容有变化区域的网页内容呢?

答案很肯定:应用Iframe标记!

一、Iframe标记的使用

提起Iframe,可能你早已将之扔到“被遗忘的角落”了,不过,说起其兄弟Frame就不会陌生了。Frame标记即帧标记,我们所说的多帧结构就是在一个浏览器窗口中显示多个HTML文件。现在,我们遇到一种很现实的情况:如有一个教程,是一节一节地上,每页末尾做一个“上一节“、“下一节“的链接,除了每节教程内容不同之外,页面其它部分内容都是相同的,如果一页一页地做笨页面,这似乎太让人厌烦了,这时突发奇想,如果有一种方法让页面其它地方不变,只将教程做成一页一页的内容页,不含其它内容,在点击上下翻页链接时,只改变教程内容部分,其它保持不变,这样,一是省时,另则以后如教程有个三长两短的变动,也很方便,不致于牵一发而动全军了;更重要的是将那些广告Banner、栏目列表、导航等几乎每页的都有的东西只下载一次后就不再下载了。 Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象的比喻即“画中画“电视。

现在我们谈一下Iframe标记的使用。

Iframe标记的使用格式是:

Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x"/iframe

src:文件的路径,既可是HTML文件,也可以是文本、ASP等;

width、height:"画中画"区域的宽与高;

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;

FrameBorder:区域边框的宽度,为了让“画中画“与邻近的内容相融合,常设置为0。

比如:

Iframe src="";; width="250" height="200" scrolling="no" frameborder="0"/iframe

二、父窗体与浮动帧之间的相互控制 在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。

1、在父窗体中访问并控制子窗体中的对象

在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。

现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。

比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:

Iframe src="test.htm" id="test" width="250" height="200" scrolling="no" frameborder="0"/iframe

test.htm文件代码为:

html

body

h1 id="myH1"hello,my boy/h1

/body

/html

如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:

document.myH1.innerText="hello,my dear"(其中,document可省)

在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。

2、在子窗体中访问并控制父窗体中对象

在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。

如example.htm:

html

body onclick="alert(tt.myH1.innerHTML)"

Iframe name="tt" src="frame1.htm" width="250" height="200" scrolling="no" frameborder="0"/iframe

h1 id="myH2"hello,my wife/h1

/body

/html

如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:

parent.myH2.innerText="hello,my friend"

这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。

Iframe虽然内嵌在另一个HTML文件中,但它保持相对的独立,是一个“独立王国“哟,在单一HTML中的特性同样适用于浮动帧中。

试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了。

有一点要注意,Nestscape浏览器不支持Iframe标记,但在时下IE的天下,这似乎也无大碍,广泛采用Iframe标记,既为自己(网站)着了想,又为网友节省了网费,何乐而不为?

例子:

iframe src="页面" width="宽度" height="高度" align="排列可以是left或right,center" scrolling="是否有滚动条可以填no或yes" /iframe

IFRAME frameBorder=0 frameSpacing=0 height=25 marginHeight=0 marginWidth=0 scrolling=no name=main src="bgm/bgm.html" width=300/IFRAME

2:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

用了iframe后 发现滚动条不漂亮 想用2个图片来代替↑↓

应该怎么实现呢?

回答:

用下列代码替换网页的title../title

SCRIPT LANGUAGE="javascript"

function scroll(n)

{temp=n;

Out1.scrollTop=Out1.scrollTop+temp;

if (temp==0) return;

setTimeout("scroll(temp)",80);

}

/SCRIPT

TABLE WIDTH="330"

TR

TD WIDTH="304" VALIGN="TOP" ROWSPAN="2"

DIV ID=Out1 STYLE="width:100%; height:100;overflow: hidden ;border-style:dashed;border-width: 1px,1px,1px,1px;"

文字BR 文字BR

文字BR

文字BR

文字

BR

BR

/DIV

/TD

TD WIDTH="14" VALIGN="TOP"IMG SRC="photo/up0605.gif" WIDTH="14" HEIGHT="20" onmouseover="scroll(-1)" onmouseout="scroll(0)" onmousedown="scroll(-3)" BORDER="0" ALT="按下鼠标速度会更快!"/TD

/TR

TR

TD WIDTH="14" VALIGN="BOTTOM"IMG SRC="photo/down0605.gif" onmouseover="scroll(1)" onmouseout="scroll(0)" onmousedown="scroll(3)" BORDER="0" WIDTH="15" HEIGHT="21" ALT="按下鼠标速度会更快!"/TD

/TR

/TABLE

内框架Iframe的使用

使用Iframe可以在一人表格内调用一个外部文件,是非常有用的。本网站在很多页面上都使用了iframe效果。

现在我们学一下Iframe标记的使用。

Iframe标记的使用格式是:

Iframe src="URL" width="x" height="x" scrolling="[OPTION]" frameborder="x" name="main"/iframe

src:文件的路径,既可是HTML文件,也可以是文本、ASP等;

width、height:"内部框架"区域的宽与高;

scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;

FrameBorder:区域边框的宽度,为了让“内部框架“与邻近的内容相融合,常设置为0。

name:框架的名字,用来进行识别。

比如:

Iframe src="" width="250" height="200" scrolling="Auto" frameborder="0" name="main"/iframe

当你想用父框架控制内部框架时,可以使用: target="框架的名字"来控制。

Dreamweaver MX进阶教程(一)可视化操作iframe

iframe也称作嵌入式框架,嵌入式框架和框架网页类似,它可以把一个网页的框架和内容嵌入在现有的网页中。

从Dreamweaver MX开始,可以可视化操作iframe,不再需要第三方插件。

插入iframe

1.点击“插入面板”的“标签选择器”

.在“标签选择器”对话框中,选择iframe标签,点击“插入”按钮。

.在“标签编辑器-Iframe”对话框中,根据面板提示操作。最基本的两项是“源”和“名称”。

源:点击“浏览”按钮,选择要出现在iframe中的网页文件。

名称:输入的名称,将作为这个iframe的标识,其它的链接如果要在这个iframe打开,网页打开“目标”就需要输入此“名称”。

宽度和高度:可以输入象素值,也可以输入100%。

边距宽度和边距高度:设置和外围标签的边距。

对齐:设置对齐方式。

滚动:设置是否允许出现滚动条。

显示边框:选择是否出现边框。

设置链接在某个iframe中打开

选中链接,在属性面板中的“目标”项,手工输入目标iframe的“名称”。

iframe透明

为了使iframe内容和网页背景相同,需要使iframe透明。

在“标签编辑器-Iframe”对话框中,选择“浏览器特定的”项目卡,选中“允许透明”。

框架包含应用程序

在“标签编辑器-Iframe”对话框中,选择“浏览器特定的”项目卡,选中“框架包含应用程序”。

Iframe的替代内容

在某些不支持iframe的浏览器中,iframe将不能显示。这时需要输入替代内容。

在“标签编辑器-Iframe”对话框中,选择“替代内容”选项,在替代内容中输入代码或者文字。

htlm的常用标签有哪些,还有。。。

是不是想学习网页设计?

常用标记并不太多。

HTML语言是网页制作中最基础的代码,博客日志许多都支持HTML标记,能熟悉HTML标记对博客和个人网站的美化会有很大的帮助。

html /html标志着html文件的开始与结束

head /head头部标志符

title /title网页的标题

boby /boby构成web的主体

1.background 定义网页的背景图案

2.bgcolor 背景色(默认 白)

3.text 文字颜色(默认 黑)

4.link 超链接颜色(默认 蓝)

5.alink 当前被选中的超链接颜色(默认 红)

6.vlink 已被访问过的超链接颜色(默认 紫)

font /font标志符可以控制字符的样式

1.face 设置文字的字体效果

2.color 设置文字颜色

3.size 设置字体大小

b/b 粗体 strike/strike删除线

big/big大字体 sub/sub下标

i/i斜体 sup/sup上标

s/s删除线 u/u下划线

small/small小字体

hn/hn设置文件中的标题 nj 1~6的数字

p/p(paragraph)划分段落

pre/pre预格式化标志符

hr 换行并绘制一条水平线(没有结束标志符)

1.width 水平线长度

2.size 水平线粗细

3.noshade 无阴影

4.align 水平线的对齐方式(left center right)

5.color 水平线颜色

br 强制换行(没有结束标志符)

ol

li....../li

li....../li

.......

/ol 设置有序列表 li可是1.2.3....或a.b.c....或A.B.C...或i.ii.iii.....或I.II.III....

(两个属性:type start)

ul

li....../li

li....../li

......

/ul 无序列表 (一个属性:type disc实心圆 circle空心圆 square方框)

a/a实现超链接

1.href 定义超链接所指向的文档的URL

2.target 目标窗口

3.name 锚名称 (该属性一般在创建页面内超链接时使用)

a href="/URL" /a使用a标志符创建超链接时,可以使用相对路径(同一网站内的文件),也可以使用绝对路径(指向本站点以外的文件)

a name="锚点名称" /a

.....

a href="#锚点名称" /a 创建网面内超链接逻辑上分为两步,首先定义锚点,然后再创建指向锚点的超链接

a href="mailto:电子邮箱地址" /a指向电子邮箱的超链接

img 插入图像

1.src 设置被引用的图像文件所在的位置

2.alt 设置图像的简单文字说明

3.width,height 设置图像的宽度与高度

4.align 对齐方式(left,right,top,bottom,middle)

5.border 边框宽度

6.hspace ,vspace 定义了图像与周围元素的水平和垂直间距

map name="图像映射名称"

area

area

......

/map

img src="/"usemap="#图像映射名称" map/map定义了图像映射的区域

img通过usemap可以确定与所建立的图像映射区域的关系

area定义图像不同区域与不同文档之间建立链接

1.shape 形状(rect矩形 circle圆 poly多边形)

2.coords 坐标

3.target 目标窗口

4.alt 替换文字

table

caption /caption

tr

th /thth /th......

/tr

tr

td /tdtd /td......

/tr

tr

td /tdtd /td

/tr

......

/table table标记符定义表格 caption定义表格标题 tr标记符定义表格的行 th,td标志符定义表格的单元格 th定义表头单元格

table可以创建一个新的表格

1.width(宽),height(高)

2.border(边框)

3.bgcolor(背景颜色)

4.align(对齐方式left right center)

5.cellpadding(填充距)

6.cellspacing(单元格间距)

7.rules(分隔线 none无分隔线 groups在行列之间有 rows只有行分隔线 cols只有列 all所有)

8.frame(边框 void无边框 above只显示顶部边框 below只显示底部边框 hsides只显示顶,底部边框 vsides只显示左右边框 lhs显示左边框 rhs显示右 box显示所有)

tr /tr表行

1.align 对齐方式(left center right)

2.valign 垂直对齐方式 (top middle bottom baseline)

3.bgcolor 背景颜色

td/td表格数据

1.width,height

2.align(left right center)

3.valign(top middle bottom)

4.bgcolor

5.rowspan 单元表的行数

6.colspan 单元表的列数

frameset

frame

frame

......

frame

/frameset frameset是将窗口分割成若干个子窗口,子窗口数取决于frame的个数

frame 标记符来标识子窗口(无结果符)

1.name

2.src(源) 设置框架内容的URL

3.frameborder(框架边框)

4.marginwidth (框架的左右边距)

5.marginheight(框架的上下边距)

6.scrolling(是否显示滚动条 auto自动 yes显示 no不显示)

7.noresize(不允许调整框架的尺寸)

a herf="目标文件"target="目标框架名"超链接内容/a

1._top 表示将超链接的目标文件装入整个浏览器窗口

2._self 表示将超链接的目标文件装入当前框架,以取代该框架中正在显示的文件

3._blank 表示将超链接的目标文件装入一个新的浏览窗口

4._parent 表示将超链接的目标文件装入当前框架的父框架

iframe/iframe定义了一个页面内的框架

1.src(源) 设置框架内容的URL

2.name

3.width,height

4.align (top middle bottom)

5.frameborder(框架边框)

6.marginwidth(框架左右边框),marginheight(框架上下边框)

7.scrolling(是否显示滚动条 auto yes no)

form/form表单

1.method(方法) 定义表单的提交方式

2.action(动作) 指定表单所对应的处理程序

input 定义了一个用于用户输入的表单元素(无结束标记符)

1.name 标识表单元素

2.type 指定表单元素的类型(text文本 password密码 checkbox复选框 radio单选框 submit提交按钮 reset重置按钮)

input type="text"将type指定为text,在浏览器中显示一个文本输入框,供用户输入信息

1.value (初始值)

2.size (尺寸)

3.maxlength(输入文本的最大字符数)

input type="password"密码文本框

例:form

密码:input type="password"name="password"size="10"maxlength="15"

/form

input type="checkbox"复选框

例:from

p你的爱好:/P

input type="checkbox"name="favorite1"value="music"checked音乐

input type="checkbox"name="favorite2"value="sports"体育

input type="checkbox"name="favorite3"value="other"其它

/form

input type="radio"单选框

例:form

p公司的人数:/p

pinput type="radio"name="number"少于10人/p

pinput type="radio"name="number"checked10人至100人/p

pinput type="radio"name="number"100人以上/p

/form

input type="submit"提交按钮

form

input type="submit"value="提交"

/form

input type="reset"重置按钮

input type="image"图像提交按钮

input type="file"

input type="buttom"

input type="hidden"

textarea /textarea定义一个用于用户多行输入的表单元素

1.name 指定文本域的名称

2.rows 指定文本域的高度

3.cols 指定文本域的宽度

select

option/option

option/option

......

option/option

/select 定义了一个选项列表表单元素

1.name 指定选取项列表的名称

2.size 指定列表选项显示时一次显示选项的数目

3.multiple使用该属性可以允许多重选择

4.value 指定当该选项被选中并提交后,浏览器传给服务器的数据

5.selected 指定哪一个选项在默认状态下是选中状态

label/label选中该控件

marquee/marquee创建一些滚动字幕

1.direction(方向 left right up down)

2.behavior (行为 scroll绕圈滚动 slide只滚一次 alternate来回滚动)

3.loop (循环)

4.scrollamount(滚动的速度)

5.scrolldelay(滚动延时)

6.align(对齐方式 top middle bottom)

7.bgcolor

8.height,width

9.hspace,vspace(垂直和水平间距)

applet

param

param

......

/applet applet用来在网页中插入一个Java小应用程序对象

1.code(源代码) 指定Java小应用程序的源代码文件(.class文件)

2.name

3.width,height

4.align

param用来定义Java小应用程序中的参数

1.name

2.value(值)给变量赋值

3.valuetype(值类型 data表示value指定的值将作为一个字符串传递的对象

ref表示value指定的值是一个URL

object表示value指定的值是一个指向同一文档中一个object的标志符)

4.type(类型)当valuetype属性的值设置为ref时,此属性指定了URL所代表资源的内容类型

object

param

param

......

/object object可以定义很多种不同的多媒体文件

1.classid:该属性指定了浏览器中用来播放相应多媒体对象的控件ID

2.codebase:定义多媒体文件相对位置的根目录

3.codetype:指定当下载由classid所指定的对象时使用的数据内容的类型

4.data:定义多媒体文件的位置

5.type:定义多媒体文件的类型

6.width,height

selector{property1:value1;property2:value2......}selector表示需要应用式样的对象

property表示由css标准定义的样式属性

value表示样式赂性的值

例:h2{text-align:center;font-family:楷体_gb2312}

selector.classname{property1:value1;......} 标记符类

.classname{property:value;......} 通用类

#IDname{property:value;......}用户定义ID

虚类

a:link或:link 当超链接末被访问过时,超链接的显示方式

a:visited或:visited 当超链接已经被访问过时,超链接的显示方式

a:active或:active当超链接当前为选中姿态时,超链接的显示方式

a:hover或:hover 当鼠标指针悬停在超链接上时,超链接的显示方式

例: a:link{color:blue}

长度单位

1.em:它所代表的长度是当前字体中m字母的宽度

2.ex:它所代表的长度是当前字体中x字母的高度

3.px:像素,它是相对于计算机屏幕的分辨率来定义的

in:英寸,1in=2.54cm 1cm=10mm

pt:点,1点=1/72in pc:帕 1帕=12点

font-family(字体族)

font-family:字体名称 | 字体族名称

例: p{font-family:黑体,宋体,serif}

font-style(字体风格)

font-style:字体风格名称

例: p{font-style:oblique}

font-size(字体大小)

font-size:绝对大小 | 相对大小 | 百分比

font-variant(字体变形)

font-varient:字体变形值

1.normal(普通)

2.small-caps(小型大写字母)

font-weight(字体加粗)

font-weight:字体加粗值

1.normal(普通)

2.bold(加粗)

3.bolder(更粗)

4.lighter(更细)

letter-spacing(字符间距)

letter-spacing:数值

text-decoration(文字修饰)

text-decoration:文字修饰效果

1.none 无

2.underline 下划线

3.overline 上划线

4.line-through 删除线

5.bink 闪烁

text-transform(文本转换)

text-transform:文本转换方式

1.none 无

2.capitalize 使所有单词的第一个字母大写

3.uppercase 使所有单词字母都大写

4.lowercase 使所有单词字母都小写

text-align(文本对齐方式)

text-align:对齐方式

1.left

2.right

3.justify 可调整

text-indent(文本缩放)

text-indent:缩放的数值

line-height(行高)

line-height:数值

margin(页边距)

margin:数值

padding(填充距)

padding:数值

例: table{padding:2cm 3cm 5cm}上填充距2cm,左右填充距为3cm,下填充距5cm

border-style(边框样式)

border-style:边框样式

1.none

2.dotted 点线

3.dashed 虚线

4.solid 实线

5.double

6.groove 凹线

7.ridge 凸线

8.inset 内陷

9.outset 外凸

border-color(边框颜色)

border-color: 颜色值

border-width(边框宽度)

border-width:数值

1.thin 细

2.medium 中

3.thick 宽

border(边框)

border:边框样式|边框宽度|边框颜色

例: h1{border:5px solid red}

float(浮动)

float:参数

1.none

2.left

3.right

颜色代码多数是"#ffffff"这种格式的,找到后改改试试看。

再想要更详细的内容,加我QQ,给你发电子书看看吧。

QQ:30638057

(责任编辑:IT教学网)

更多

推荐FTP服务器文章