html框架怎么做,html框架怎么写
html框架怎么做bootstrap
到bootstrap官方网站下载,对于我们开发者来说,直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons
所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小,到官网下载jQuery支持。
将下载后的就jQuery放到bootstrap中的js目录下。
在bootstrap的根目录下新建一个demo.html文件,(注意,必须在根目录下面新建,因为后面的步骤中要将bootstrap框架中的css和js文件链接到创建的demo中)
编辑demo.html文件,添加对bootstrap框架中css和js的引用,内容如下,图片有注释说明,这样,我们就基本上建立了对bootstrap框架的基本使用架构
源码:
!doctype html
html
head
meta charset="utf-8"
meta name="viewport" content="width=device-width, initial-scale=1.0"
!-- viewport的meta标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。--
title无标题文档/title
!--样式文件引用--
link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"
!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --
!-- WARNING: Respond.js doesn't work if you view the page via file:// --
!--[if lt IE 9]
script src=""/script
script src=""/script
![endif]
IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件
意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了
--
/head
body
!--JavaScript插件都是依赖与jQuery库--
script type="text/javascript" src="js/jquery-2.1.3.min.js"/script
script type="text/javascript" src="js/bootstrap.min.js"/script
/body
/html
另外,bootstrap官方提供了链接服务,永久免费,即使你不下载bootstrap框架文件到本地,也可以直接在html中使用,使用下面这段代码:
link href="" rel="stylesheet"
script src=""/script
script src=""/script
dreamweaver怎么建立HTML5框架
方法步骤如下:
1打开dreamweaver软件
2点击左上角的文件,找到新建
3页面类型选择HTML的选项
4文档类型选择html5即可
5点击下边的创建就行了
6HTML5的基本页面就新建好了,切换第一项为代码区
来到代码区,就可以看见这就是html5的基本格式。
HTML基本框架怎么写
框架可以生成独立变化和滚动的窗口,从而能将一个窗口分割为若干个字窗口。在每一个字窗口中显示一个HTML文档。我们这回就来看看多文档的基本结构和子窗口之间的交叉链接。
一,基本结构HTML使用Frameset,Frame和noFrames标签来定义框架。下面我们就来了解一下这三个标签的作用和相应的属性。
(一),Frameset标签。
该标签是框架设计标签,成对使用。首尾标签之间的内容就是使用到框架的HTML主体部分。在使用框架的HTML文档中不能出现body标签,否则会导致浏览器忽略所有的框定义而只显示body和/body之间的内容。
Frameset标签作用是将窗口分割为若干个自窗口,子窗口的数目取决于嵌套在该标签中Frame标签的书目。Frameset标签有两个属性。rows和cols,分别用来确定个子窗口的高度和宽度,格式为Frameset rows="值1,值2,……值n";Framest cols="值1,值2,……值n".各参数之间以逗号分割,依次表示各个自窗口的高度(宽度)。这两个属性的参数值可以是数字、百分数或符号“*”。下面我们来分别解释一下:
(1)数字。表示子窗口高度(宽度)所占的像素点数。
(2)百分数。表示子窗口高度(宽度)占整个浏览器窗口高度(宽度)的百分比。 (3)符号“*”。当符号*只出现一次。即其他子窗口的大小都有明确的定义时,表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时,表示按比例分割浏览器窗口的剩余空间。例如:
Frameset cols="40%,2*,*"表示将浏览器窗口分割为3列,第一个子窗口在第一列,窗口宽度为整个浏览器窗口宽度的40%;第二个子窗口在第二列,占浏览器窗口剩余空间的2/3,即其宽度为整个浏览器窗口宽度的40%,第三个子窗口占剩余空间的1/3,宽度为整个浏览浏览器窗口宽度的20%。
(二),frame标签。HTML用frame标签来标识子窗口。frame标签是嵌套在框架设置标签Frameset标签中来使用的单独标签。在Frameset中定义了多少个子窗口就要有多少个frame标签与之匹配,依次定义各个窗口的性质。frame标签有7个属性,除SRC属性是不可缺省的外,其他属性都是可选的。
(1)SRC属性。用以定义子窗口的名称。
(2).name属性。用于定义子窗口的名称。
(3)frameboder属性。该属性的参数值为1或0。当参数值为1时,表示该子窗口有边框,为0时没有边框。该属性缺省值为1。
(4)bordercolor属性。用以规定子窗口的边框颜色。如果在一个以上的frame标签中定义了子窗口的边框颜色,则以第一次指定的颜色为标准。在指定边框颜色时,可以使用颜色的RBG代码或直接使用与该颜色想对应的英文单词。bordercolor属性的参数值可以是16种颜色中的任意一种。
(5)sclling属性。属性的参数值为yes,no或auto之一。参数值为yes时表示该子窗口始终有滚动条。为no时是始终没有滚动条。为auto时表示当文档的内容超出窗口范围时,浏览器自动为该子窗口添加滚动条。scolling属性的缺省值为auto.
(6)maginwidth和marginwidht属性。这两个属性是用来指定显示内容与窗口边界之间的空白距离大小的。其中maginwidth属性用于确定显示内容与左右边界之间的距离;maginwidht用来确定显示内容与上下边界之间的距离。这两个属性的参数值都是数字。分别表示左右边距所占的像素点数。
(三),noframes标签。使用该标签可以在用户浏览器不支持框架显示时告之用户一些相关信息,以免浏览者对空白窗口画面感觉莫名其妙。noframes标签是成对使用的。首尾标签之间的内容就上告之浏览者的信息。如“如您看到空白的画面说明您的浏览不支持框架显示”。虽然常用的两中浏览器IE和NC都是支持框架显示的。但为了加强文档的适用性,我们最好还是养成使用这个标签的习惯。
(四),基本结构。
我们举例说明HTML中框架文档的基本结构:
html
head
title文档标题/title
/head
Frameset Cols="值1,值2,……,值n将浏览器窗口分割为n个窗口。
Frame SRC="1.html"
frame SRC="2.html"
.
.
.
frame SRC="n.html"
/Frameset
noframes如果您看到空白的画面,说明您的浏览器是不支持框架机构的/noframes
/html
其中,frameset标签是可以嵌套使用的,也就是说,可以将其中某一个或几个子窗口划分为若干个更小的窗口。例如:
html
Frameset cols="30%,90,*"
frame SRC="1.html"name=cont
frame SRC="caipage.gif"
frame SRC="2.html"
/frameset
frame SRC="f2.html"name=another marginheight=120
/frameset
noframes您使用的浏览器不支持框架/noframes
/html
二,目标窗口的交叉链接。
为了方便用户进行搜索和浏览,我们经常用到一系列锚标组成的索引目录显示在一个子窗口中,而将锚标所指向的内容放在另一个子窗口中。显示锚标的子窗口通常被成为”源窗口“,显示目标文档的窗口则称之为“目标窗口”。
在进行交叉frame标签的name属性定义目标窗口的名称,然后再修改显示在源窗口中的文档。在所有的A标签中添加语句target="目标窗口名称"来指定目标文档的显示位置。例如:/P连接时,我们必须先用
html
head
title目标窗口测试页/title
/head
frameset cols="30%,90,*"
frame src='f1.html"marginheight=60
frameset rows="120,*"
frame src="caipage.gif"
frame src="2.html"
/frameset
frame src="f2.html"name=another marginheight=60
/frameset
noframes您的浏览器不支持框架结构/noframes
其中,第一个子窗口是源窗口。我们在源窗口的对应文档f1.html中定义了一系列锚标,该文档的内容如下:
html
body
center(说明:文档主体内容举重显示
PA href="田园风光.jpg" target="another"田园风光/AP
A href="qiu.jpg" target="another"金色秋天/AP
A href="tong.html" target="another"渔哥唱晚/AP
A href="pig.gif" target="another"夕阳无限/AP
/body
/html
当用户点击锚标“田园风光”后,浏览器将在目标文档显示锚标的连接对象
html中框架(frame)的详细使用方法
框架概念 :
所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只 要 FRAMESET FRAME 即可,而所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 BODY 标记,浏览这框架必须读取这档 案而不是其它框窗的档案。FRAMESET 是用以划分框窗,每一框窗由一个 FRAME 标 记所标示,FRAME必须在 FRAMESET 范围中使用。如下例:
frameset cols="50%,*"
frame name="hello" src="up2u.html"
frame name="hi" src="me2.html"
/frameset
此例中 FRAMESET 把画面分成左右两相等部分,左便是显示 up2u.html,右边则会显示 me2.html 这档案,FRAME 标记所标示的框窗永远是按由上而下、由左至右的次序。
FRAMESET FRAME :
FRAMESET 称框架标记,用以宣告HTML文件为框架模式,并设定视窗如何分割。
FRAME 则只是设定某一个框窗内的参数属性。
FRAMESET 参数设定:
例子:frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"
COLS="90,*"
垂直切割画面(如分左右两个画面),接受整数值、百分数, * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30,*,50%" 可以 切成三个视窗,第一个视窗是 30 pixels 的宽度,为一绝对分割,第二个视窗是当 分配完第一及第三个视窗后剩下的空间,第三个视窗则占整个画面的 50% 宽度 为 一相对分割。您可自己调整数字。
ROWS="120,*"
就是横向切割,将画面上下分开,数值设定同上。唯 COLS 与 ROWS 两参数尽量 不要同在一个 FRAMESET 标记中,因 Netacape 偶然不能显示这类形的框架,尽 采用多重分割。
frameborder="0"
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
border="0"
设定框架的边框厚度,以 pixels 为单位。
bordercolor="#008000"
设定框架的边框颜色。
framespacing="5"
表示框架与框架间的保留空白的距离。
FRAME 参数设定:
例子:frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF"
SRC="a.html"
设定此框窗中要显示的网页档案名称,每个框窗一定要对应著一个网页档案。你可 使用绝对路径或相对路径,有关此两者详见於【连结进阶】。
NAME="top"
设定这个框窗的名称,这样才能指定框架来作连结,必须但任意命名。
frameborder=0
设定框架的边框,其值只有 0 和 1 , 0 表示不要边框, 1 表示要显示边框。(避 免使用 yes 或 no )
framespacing="6"
表示框架与框架间的保留空白的距离。
bordercolor="#008000"
设定框架的边框颜色。颜色值请参考【HTML 剖析】。
scrolling="Auto"
设定是否要显示卷轴,YES 表示要显示卷轴,NO 表示无论如何都不要显示, AUTO是视情况显示。
noresize
设定不让使用者可以改变这个框框的大小,亦没有设定此参数,使用者可以很随 意地拉动框架,改变其大小。
marginhight=5
表示框架高度部份边缘所保留的空间。
marginwidth=5
表示框架宽度部份边缘所保留的空间。
NOFRAMES :
当别人使用的浏览器太旧,不支援框架这个功能时,他看到的将会是一片空白。为了避免 这种情况,可使用 NOFRAMES 这个标记,当使用者的浏览器看不到框架时,他就会看 到 NOFRAMES 与 /NOFRAMES 之间的内容,而不是一片空白。这些内容可以是提醒 浏览转用新的浏览器的字句,甚至是一个没有框架的网页或能自动切换至没有框架的版本 亦可。
应用方法:
在frameset 标记范围加入 /NOFRAMES 标记,以下是一个例子:
frameset rows="80,*"
noframes
body
很抱歉,馈下使用的浏览器不支援框架功能,请转用新的浏览器。
/body
/noframes
frame name="top" src="a.html"
frame name="bottom" src="b.html"
/frameset
若浏览器支援框架,那堋它不会理会 noframes 中的东西,但若浏览器不支援框架,由 於不认识所有框架标记,不明的标记会被略过,标记包围的东西便被解读出来,所以放在 noframes范围内的文字会被显示。
IFRAME :
这标记只适用於 IE。 它的作用是在一页网页中间插入一个框窗以显示另一个文件。它是 一个围堵标记,但围著的字句只有在浏览器不支援 iframe 标记时才会显示,如noframes 一样,可以放些提醒字句之类。通常 iframe 配合一个辨认浏览器的 Java Script 会较好,若 JavaScript 认出该浏览器并非 Internet Explorer 便会切换至另一版本。
iframe 的参数设定如下:
例子: iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"
src="iframe.html"
欲显示於此框窗的文件来源除档案名称,必要加上相对或绝对路径。
name="test"
此框窗名称,这是连结标记的 target 参数所 要的,
align="MIDDLE"
可选值为 left, right, top, middle, bottom,作用不大
width="300" height="100"
框窗的宽及长,以 pixels 为单位。
marginwidth="1" marginheight="1"
该插入的文件与框边所保留的空间。
frameborder="1"
使用 1 表示显示边框, 0 则不显示。(可以是 yes 或 no)
scrolling="Yes"
使用 Yes 表示容许卷动(内定), No 则不容许卷动。
例子: 原始码
center iframe src="" name="test" align="MIDDLE" width="300" height="100" marginwidth="5" marginheight="5" frameborder="1"
很抱歉,馈下使用的浏览器并不支援 IFrame,不能正常浏览我的网页。/iframe
/center
frameset参数传递问题
左边的条件参数如何传,右边才能接收
--------------------------------------------------------------------------------
对三个帧分别命名为:left.asp(显示查询条件的页面,其中帧名为:left),top.asp,main.asp(显示查询结果的页面,其中帧名为:main)
如:
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
titlesearch/title
/head
frameset rows="80,*" frameborder="NO" border="0" framespacing="0"
frame src="top.asp" name="top" scrolling="NO" noresize
frameset cols="80,*" frameborder="NO" border="0" framespacing="0"
frame src="left.asp" name="left" scrolling="NO" noresize
frame src="main.asp" name="main"
/frameset
/frameset
noframesbody
/body/noframes
/html
在left的表单中写成:
form name="form1" method="post" action="main.asp" target="main"
......//你自己设计吧。
/form
这样就可以你的查询条件传给main.asp中了!
如何做html框架?
首先注意一点,在frameset/frameset所在的文件中不需要写body体,否则会不显示网页的分页。
做一个有顶,有左侧网页,有右侧网页的框架集网页应该怎么做?
先把各个小的分散页面做好
all2.html
top.html
left.html
right1.html
right2.html
来看每个文件的具体代码:
all2.html
!--这里开始是整体框架结构,为上下结构--
frameset rows="20%,*"
frameborder=0
frame src="top.html" noresize scrolling=no
/
!--这里开始是另外一个框架集结构为左右结构--
frameset cols="20%,*"
frame src="left.html" noresize
/
!--frame元素中有一个name属性,相当于给frame取名,以方便识别位置--
frame src="right1.html" name="right"
/
/frameset
/frameset
top.html
这里是顶部内容
left.html
a href="right1.html"
target="right"青花瓷1/abr
/
a
href="right2.html"
target="right"青花瓷2/abr
/
right1.html
这里是right1.html的内容
right2.html
这里是right2.html的内容