编程猫HTML源码编辑：框架布局网页设计教程（职业学院HTML框架布局实例）

html框架网页布局代码(html框架网页布局代码百色职业学院)

html采用两行三列布局(顶部一长条，底部分为三列）的框架脚本：

脚本内容如下，利用嵌套框架实现：

frameset rows="100,*" border="1"

frame src="header.html" /

frameset cols="20,60,20" border="1"

frame src="left.html" /

frame src="middle.html" /

frame src="right.html" /

/frameset

/frameset

如何用html编写简易的网页代码？

用html编写简易网页的步骤：

1、整体形象规划：企业决定建立网站，首先需确定企业的整体形象，这包括企业的logo设计，整个站点的色彩搭配，网页流程规划，版面规划，甚至包括哪些地方应用动态效果，哪些地方搭配文字信息，或者需要布局哪些模块等，这些都需纳入整体形象规划中。

2、页面风格规划：网站整体规划完成后，需具体到每个小页面，每个页面风格规划可以不同，但总体方向需保持一致，这样才能确保整个站点整洁有序，切勿每个页面单独设计，这样会让用户感到突兀，甚至不适应。

3、脚本规划：脚本规划即功能规划，一个网站不可能只是展示，还需具备一些其他功能，至少有联系方式板块的功能，留言功能等，若是电子商务网站还需具备支付功能等。此外，脚本规划还涵盖整个网站的框架布局，这需要站长结合SEO优化元素进行设计。

网页的实质是超文本标记语言，通过结合使用其他Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因此，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本之上的。超文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓的“超级链接”。

html网页内容众多，如何精简代码？

html代码冗余涉及几个方面因素。

首先，布局，其次，嵌套，最后，样式

1、布局方面，尽量使用div+css布局，避免使用table，尤其是输出循环内容时，使用table显得过时。相信现在很少有人使用table布局了。

2、嵌套过多，确实会造成代码冗余。现在有很多html框架，帮助开发人员节省开发时间，但也无疑带来了一些容器嵌套。如果对自己的开发能力有信心，可以不使用那些框架，如：bootstrap、layui等。

3、有不少人在编写样式时，喜欢使用内联样式，如div style="text-align:center;font-size:12px;"等，每个容器都需要写，这无疑会造成代码冗余。

基本上就是这些。

网页设计常用HTML脚本

网页设计常用HTML脚本大全

HTML是用于描述网页的一种语言。以下我为大家分享HTML脚本，希望对大家学习html脚本有所帮助！

忽略右键

body oncontextmenu="return false"

或

body style="overflow-y:hidden"

1.如何几秒后跳转到其他页面？

META HTTP-EQUIV="Refresh" CONTENT="时间;URL=地址"

2.点击关闭窗口

点击关闭窗口！

3.请问如何去除主页右面的滚动条？

body scroll="no"

body style="overflow-y:hidden"

4.请问如何实现让一个网页自动关闭。

html

这个窗口会在10秒后自动关闭，且不会出现提示。

5.如何在不刷新页面的情况下刷新css？

button{color:#000000;}

点击按钮直接修改style标签里button选择符使按钮改为红色

6.请问如何让网页自动刷新？

在head部分添加META HTTP-EQUIV="Refresh" content="20"，其中20为20秒后自动刷新，你可以更改为任意值。

7.如何让页面自动刷新？

方法一，使用refresh

HTML代码片段如下：

5表示刷新时间

[Ctrl+A全部选择提示:你可先修改部分代码，再按运行]

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

8.如何让超链接没有下划线

在源代码中的HEAD…/HEAD之间输入如下代码：

a{text-decoration:none}

9.请问如何去除IE的上下滚动条？

body style="overflow:scroll;overflow-y:hidden"

10.如何用html实现浏览器上后退按钮的功能？

点击后退

或者

history.back()

11.请问怎么在网页中改变鼠标的箭头形状？

HTML代码片段如下：

auto

crosshair

default

ahref="#"style="pointer:default"default/abr

ahref="#"style="pointer:hand"hand/abr

ahref="#"style="pointer:move"move/abr

ahref="#"style="pointer:e-resize"e-resize/abr

ahref="#"style="pointer:ne-resize"ne-resize/abr

ahref="#"style="pointer:nw-resize"nw-resize/abr

ahref="#"style="pointer:n-resize"n-resize/abr

ahref="#"style="pointer:se-resize"se-resize/abr

ahref="#"style="pointer:sw-resize"sw-resize/abr

ahref="#"style="pointer:s-resize"s-resize/abr

ahref="#"style="pointer:w-resize"w-resize/abr

ahref="#"style="pointer:text"text/abr

ahref="#"style="pointer:wait"wait/abr

ahref="#"style="pointer:help"help/abr

/body

11.如何避免使用页面的缓存？即每次打开页面时都调用非缓存内容

METAHTTP-EQUIV="Pragma"CONTENT="no-cache"

12.如何编写页面打开时自动弹出一个窗口的代码？

HTML代码片段如下:

html

head

title无标题文档/title

metahttp-equiv="Content-Type"content="text/html;charset=gb2312"

scriptlanguage="Bstyle="color:black;background-color:#A0FFFF"javascript/B"

!--

functionMM_openBrWindow(theURL,winName,features){//v2.0

window.open(theURL,winName,features);

}

//--

/script

/head

bodybgcolor="#FFFFFF"text="#000000"onLoad="MM_openBrWindow(‘‘‘‘‘‘‘‘,‘‘‘‘,‘‘‘‘width=400,height=400‘‘‘‘)"

/body

/html

13.如何使我的页面出现一个会说话的小人？Merlin

HTML代码片段如下:

HTML

HEAD

TITLE默林/TITLE

METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312"

/HEAD

BODY

pOBJECTid=simsclassid=CLSID:D45FD31B-5C6E-11D1-9EC1-00C04FD7081F

/OBJECT

SCRIPT

varMerlinID;

varMerlinACS;

sims.Connected=true;

MerlinLoaded=LoadLocalAgent(MerlinID,MerlinACS);

Merlin=sims.Characters.Character(MerlinID);

Merlin.Show();

Merlin.Play("Surprised");

Merlin.Speak("大家好");

Merlin.Play("GestureLeft");

Merlin.Think("我是默林！");

Merlin.Play("Pleased");

Merlin.Think("可爱吗？");

Merlin.Play("GestureDown");

Merlin.Speak("哈哈！");

Merlin.Hide();

functionLoadLocalAgent(CharID,CharACS){

LoadReq=sims.Characters.Load(CharID,CharACS);

return(true);

}

/SCRIPT

/p

p/p

p看此效果必须装有office2000！！！/p

/BODY

/HTML

14.在页面中如何添加非全屏背景图片，拖动页面时背景图不移动

HTML代码片段如下:

htmlhead

STYLE

body{background-image:url(logo.gif);

background-repeat:no-repeat;background-position:center}

/STYLE

/head

bodybgproperties="fixed"

/body

/html

[Ctrl+A全部选择提示:你可先修改部分代码，再按运行]

background-repeat:no-repeat;是让背景图不覆盖整个页面

bodybgproperties="fixed"是拖动scroll时背景图不移动

15.文本输入框哪个属性能实现不可输入？

HTML代码片段如下:

inputtype="text"name="textfield"disabled

或者

inputtype="text"name="textfield"readonly

16.如何禁止自己的页面在别人的框架里打开？

把以下代码加至你的head区

script

if(window.top!=self){

window.top.location=self.location

}

/script

17.如何实现首页全屏显示？

HTML代码片段如下:

html

bodyscriptlanguage="Bstyle="color:black;background-color:#A0FFFF"javascript/B"

varcoolw=642

varcoolh=400

varcoolhuang=window.open("","coolhuang","width="+coolw+",height="+coolh+",

fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0")

window.close()

/script/body/html

18.如何监听一个窗口被关闭了？

HTML代码片段如下:

bodyonunload="alert(‘‘‘‘你关闭了这个窗口‘‘‘‘)"

19.如何禁止Ctrl+N？

HTML代码片段如下:

bodyonkeydown=return(!(event.keyCode==78event.ctrlKey))

如何将页面加入用户的收藏夹？

HTML代码片段如下:

ahref="Bstyle="color:black;background-color:#A0FFFF"javascript/B:window.external.AddFavorite(‘‘‘‘‘‘‘‘,‘

```html

function initialize()

{

timer=setInterval("scrollwindow()",10);

}

function stop(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=document.body.scrollTop;

window.scroll(0,++currentpos);

if(currentpos!=document.body.scrollTop)

stop();

}

document.onmousedown=stop

document.ondblclick=initialize

pa/ppa/ppa/ppaa/ppaa/ppaa/p

paa/ppaa/ppaa/ppaa/ppaa/ppaa/p

paa/ppaa/ppaa/ppaa/ppa/p

/body

/html

如何让body中的文字不可选择？

HTML代码片段如下:

bodyonselectstart="returnfalse"aaa/body

如何让弹出的窗口无法关闭？

在新开的窗口中加入如下代码

bodyonunload=open(location.href)

/body

如何让浏览器在保存页面时保存失败？

HTML代码片段如下:

NOSCRIPT

Bstyle="color:black;background-color:#ffff66"IFRAME/BSRC="*.html"

/Bstyle="color:black;background-color:#ffff66"IFRAME/B

/NOSCRIPT

表单中如何用图片按钮实现重置?

html

head

script

function resetForm(){

document.forms[0].reset()

}

/script

/head

body

form

textarearows="2"name="S1"cols="20"/textarea

inputtype="submit"values="提交"name="B1"

imagesrc="logo.gif"onclick=resetForm()

/form

/body/html

进入网页时弹出的信息提示框

bodyonLoad="window.alert('欢迎光临本站')"

关闭窗口后弹出提示框

bodyonUnload="window.alert('谢谢你的光临!欢迎下次再来!')"

告别提示

bodyonUnload=alert("再见，感谢你的访问！")

右键菜单的制作

OBJECTid=menutype="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"

PARAMname="Command"value="RelatedTopics,menu"

PARAMname="Item1"value="动易;"

PARAMname="Item2"value="搜狐;"

PARAMname="Item3"value="新浪;"

PARAMname="Item4"value="网易;"

PARAMname="Item5"value="互动学院;"

/OBJECTscriptif(document.all)document.body.onmousedown=newFunction("if(event.button==2)menu.Click();")/script

下拉菜单

objectid=HHCtrltype="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"PARAMname="Command"value="RelatedTopics,Menu"PARAMname="Item1"value="aspease;"PARAMname="Item2"value="byhu;"PARAMname="Item3"value="lzz;"/objectahref=javascript:HHCtrl.Click()title="下拉

怎样用Dreamweaver套用网站源代码制作网页

用Dreamweaver套用网站源代码制作网页步骤：

一、建立站点

1、在任意一个根目录下创建好一个文件夹（我们这里假设为E盘），如取名为MyWeb。

备注：网站中所用的文件都要用英文名。

2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。在站点名称中输入网站的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:web）。然后确定即可。

备注：再次打开Dreamweaver，会自动找到刚才设立的站点。如果有多个站点，可以在菜单“站点—打开站点”中去选择。

二、建立页面

1、在本地文件夹E:MyWeb下面的空白处，按右键选“新建文件”，这样就建好了一个页面，默认的文件名为untitled.htm。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。

网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。

2、双击index.htm进入该页面的编辑状态。在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。

3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。

4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。

在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。

在网页上打入空格的办法是：把输入法调为全角。

在网页上换行的办法是：shift+Enter。只按Enter则为换段。

三、为页面添加图片

1、在本地文件夹E:MyWeb下面的空白处，按右键选“新建文件夹”，这样建立了一个文件夹，用它来放图片，可以改名为tu或pic或images都可以。

2、用菜单“窗口/对象”打开对象面板，点击“插入图像”，在对话框里选要插入的图片。如果会出现对话框：“你愿意将该文件复制到根文件夹中吗”，必须选“是”，然后将它保存到刚建好的文件夹里。

3、选中该图片，打开属性面板，可以在上面为图片取名，重新设置图片的高、宽，拖住图片角上的点可以变大小。按住shift键，再拖动角上的点，可以使图片保持宽高比例拉伸。如要恢复这原始大小，则单击右下角的“重设大小”按钮。

4、“链接”可以直接在这里输入地址。“替代”是图片的说明，即鼠标指向图片所显示的文字；“边框”是图片边框宽度，“对齐”是对齐方式。

```

4、“链接”可直接在此处填写网址。“替代”为图片的注释，即鼠标悬停于图片上显示的文字；“边框”指图片边框的宽度，“对齐”指对齐方式。

四、插入超级链接

1、为文字插入链接。

例如，在页面上输入“我的文章”，然后选中，打开属性面板，在“链接”栏中，选择它所要链接到的页面即可。下一栏“目标”我们通常使用self即在新窗口打开链接，替代了当前窗口；或是选择blank即在新窗口打开。

2、为图片插入链接

与文字链接类似，插入图片，然后在属性面板的“链接”栏中选择即可。

图片可以创建多个不同的链接。方法如下：

在属性面板的“地图”一项下有一些图形，比如点击方形，光标变成十字，在图片上画一个蓝色矩形的热区，此时在属性面板上可以为这个热区设置链接地址，鼠标悬停会显示。同样，再用圆形设置一个热区，就可以为该图片设置其他链接了。

3、插入E-mail链接

选中需要添加E-mail链接的文字或图片，打开属性面板，在“链接”栏中输入填写邮件地址。格式如下：mailto:邮件地址。注意中间不空格。

4、如果链接到的文件无法在浏览器中打开，例如exe、Zip等文件，那么浏览者在点击这个链接的时候，就会实现文件下载或在线播放的功能。

五、表格的使用

1、点击插入/表格，打开表格面板进行设置。行数、列数、宽度、边框等，“单元格填充”指单元格内侧与内容的距离；“单元格间距”指单元格之间的距离，单位均为像素。

2、插入表格后，在表格的边框上点击一下，可以全选整个表格。然后在下面的属性面板里可以进行各种设置。

3、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。

六、关于表格的其他操作

一制作细线表格原理：

1、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。

2、选中所有单元格，设置其背景为白色。

二自动格式化表格

1、先制作好一张表格，然后选中。

2、选菜单中的命令/格式化表格。即可以其中选择预设好的一些表格样式。

三一像素分割条

1、插入一个1行1列，宽为200像素，边框边距均为0的表格。

2、选中表格，设置表格高为1像素，并设置一个背景色（即所要的线条颜色）。

3、切换到代码和设计窗口，将代码

删除。

七、用表格构建完整的页面

一网页顶部（一般包括图标、广告、导航菜单）

1、创建一个1行2列，宽为760像素，边框及边距均为0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为3366CC。

3、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即logo。

4、将光标置于右边单元格中，设置其宽度为500，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即banner。

5、将光标置于刚完成的表格之后，插入/表格，创建一个1行1列，宽为760像素，边框及边距均为0的表格。

6、选中刚创建的表格，设置排列方式为居中对齐，背景色为005173。

7、在该表格中依次插入多个图像，作为导航条菜单。

二网页中部（左边栏目列表、中间网站新闻、右边栏目列表）

1、在导航条表格后面，插入/表格，创建一个1行3列，宽为760像素，边框及边距均为0的表格。并设置排列方式为居中对齐，背景色为FFFFFFF。

2、将光标置于左边单元格中，设置其宽度为18%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。

3、将光标置于刚插入的图片后，插入/表格，插入一个12行1列，宽为90%的表格。设置其单元格间距为1，背景色为CCCCCC。

4、将光标放在表格第一个单元中，设置其高为20，背景色为FFFFFF。插入/图像，插入一个导航文字前面的小点。同样设置其他11个单元格，这样左边的栏目分类列表就完成了。

5、将光标置于主体表格的中间单元格中，设置其宽度为66%，水平排列为居中对齐，垂直排列为顶端对齐，然后插入/图像，插入一个导航条。

6、将光标置于图像后，插入/表格，插入一个4行1列，宽为95%的表格。设置其单元格间距为1，背景色为CCCCCC。

7、将光标置于表格的第一个单元格中，拖动鼠标，将4个单元格都选中，设置高为60，背景色为FFFFFF。

8、将光标置于主体表格右边的单元格中，设置其宽度为16%，水平排列为居中对齐，垂直排列为顶端对齐，插入/图像，插入一个导航条。

9、将光标置于图像后，插入/表格，插入一个7行一列，宽为90%的表格。设置其间距为1，背景色为CCCCCC。

10、按住Ctrl键，用鼠标点击刚插入的表格的第1、3、5、7单元格，然后设置它们的高为55，背景色为FFFFFF。

11、选中第2、4、6单元格，设置其高为6，背景色为FFFFFF。

12、切换到源代码窗口，将第2、4、6单元格中的空格符号“”删除。

三网页底部（一般包括版权信息及其他相关内容）

1、将光标置于主体表格后，插入/表格，创建一个2行2列，宽为760像素，边框及边距均为0的表格。

2、选中表格，设置排列方式为居中对齐，背景色为3366CC。

3、将光标置于表格第1行的左边单元格中，设置其宽度为50%，水平排列为默认，垂直排列为基线，背景色为FFFFFF，然后输入版权信息，内容颜色随便。

3、将光标定位至表格首行左侧单元格，调整其宽度至50%，保持水平对齐为默认，垂直对齐设为基线，背景涂装为纯白，并填写版权信息，文字色彩自选。

4、将光标移动至表格首行右侧单元格，执行插入/图像操作，导入一个圆滑边缘的图像，随后输入“Email”字样，调整字体大小及色彩为1号字体和纯白色。

5、执行插入/表单对象/文本域，添加一个文本域，其宽度可根据需要设定。

6、执行插入/图像，添加一个GO标志的图像。

7、调整页面属性。点击菜单中的修改/页面属性，在标题栏中输入标题，并选择背景图像，并将顶部边距设置为0。

整个网页由多个表格分块组合而成，这样做可提升浏览器加载页面的效率；由于浏览器需完整读取表格内容后才显示，因此不建议将所有内容框于单一表格中。

八、使用布局表格构建完整页面

1、点击插入/布局，激活布局视图按钮（默认为标准视图）。亦可通过菜单中的查看/表格视图/布局视图进入。

2、首先点击绘制布局表格按钮，在页面中自由绘制布局表格。

3、如同前例，先绘制网页的顶部、中部和底部的大表格。

4、然后点击绘制布局单元格按钮，在已绘制的布局表格内继续绘制单元格。

5、切换回标准视图，在已划分的表格内插入嵌套的小表格，进一步细化页面设计，即可完成页面构建。

请注意，整个页面应置于一个大的布局表格内，否则网页浏览速度可能较慢。应依据页面版面和内容划分多个布局表格，并在其中插入布局单元格。

九、层的运用

1、点击插入/层。亦可通过图标点击，然后拖动鼠标创建层。

2、选中已创建的层，查看属性面板。“层编号”和“标签”保持默认设置。“层编号”用于编程，目前通常无需使用。“上”指距页面顶部的距离；“左”指距左侧界的距离。“z轴”指层的顺序，数值大者覆盖数值小者。

若未设置颜色，层将保持透明。

3、点击层左上角的小方框，可随意拖动层，并调整其大小。

4、“溢出”选项中，当文字超出层大小时，可选择visible（超出部分可见）、hidden（超出部分隐藏）、scroll（无论是否超出均显示滚动条）、auto（仅超出时显示滚动条）。

5、点击菜单窗口/其他/层，打开层管理窗口。可在此修改层名称和Z轴值，也可点击眼睛图标显示或隐藏层，还有一个防止重叠的选项。

6、层的对齐。按住shift键，同时选择多个层。使用修改/对齐，选择相应的选项。

7、嵌套层。①首先在文档中插入一个层。②将光标置于该层内，继续插入层，即可形成嵌套层。内部层称为子层，外部层称为父层。它们的Z轴顺序相同。拖动父层时，子层也会相应移动。移动子层时，父层不会移动。

十、掌握时间轴

1、点击菜单中的插入/层，插入一个层。

2、在层中插入图片，如飞机图片。（此处图片也可为小动画的.gif格式）

3、点击菜单中的窗口/其他/时间轴，打开时间轴窗口。

4、选中页面上的层，用鼠标按住层左上角的小方框图标，将其拖放到时间轴的第1帧中。此时自动创建一个15帧的时间轴。

5、选中时间轴上的第1帧，将页面中的层拖放到页面左上角，即动画起始位置。

6、选中时间轴上的第15帧，可拖动该帧至任意长度，如30帧。

7、选中第30帧，将层拖放到页面右下方，此时窗口中显示出层从第1帧到第30帧的运动轨迹。(此时运动为直线)

8、可在第15帧处右键点击“增加关键帧”，在选中第15帧状态下，拖动层到页面下方。

9、勾选“自动播放”选项。

总结：Dreamweaver是一款功能强大的软件，其中包含众多功能，需不断总结和实践，熟悉后操作将变得简单易行。