首页 > 优化技术 > 正文

优化网站主页设计：HTML页面结构搭建技巧（HTML页面结构搭建实例：百色职业学院）

a351910080 · 浏览 2 · 点赞 0 · 10小时前

html框架布局网页代码（html框架布局网页代码百色职业学院）

html两行三列（上面是一长条，下面分成三列）的框架代码

代码如下，使用嵌套框架即可：

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

frame src="header.html"/frame

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

frame src="left.html"/frame

frame src="middle.html"/frame

frame src="right.html"/frame

/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

OBJECT id="closestype="application/x-oleobject"classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"

param name="Command"value="Close"

/OBJECT

<body onload="window.setTimeout('closes.Click()',10000)"

这个窗口会在10秒过后自动关闭，而且不会出现提示./body

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

style

button{color:#000000;}

/style

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

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

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

方法一，用refresh

HTML代码片段如下：

meta http-equiv="refresh" content="5"

5表示刷新时间

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

方法二，使用setTimeout控制

function rl(){

document.location.reload()

}

setTimeout(rl,2000)

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

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

a{text-decoration:none}

7.请问如何去掉IE的上下滚动条？

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

8.怎样才能把RealPlayer文件在网页做一个试听连接？

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

点击后退

或者

history.back()

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

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="javascript"Bstyle="color:black;background-color:#A0FFFF"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看此效果必须装有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="javascript"Bstyle="color:black;background-color:#A0FFFF"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="javascript:Bwindow.external.AddFavorite('','无忧脚本')收藏无忧脚本/a

如何在我的页面中加入背景音乐？

IE:bgsoundsrc=".mid"loop=infinite

NS:embedsrc=".mid"autostart=truehidden=trueloop=true

*.mid你的背景音乐的midi格式文件

关于页面转换效果

metahttp-equiv="page-enter"content="revealTrans(Duration=4,Transition=23)"

或

metahttp-equiv="page-exit"content="revealTrans(Duration=4,Transition=23)"

说明：Transition=23是随机效果，另可选取0-22任一数字固定某个效果

如何设定打开页面的大小

HTML代码片段如下:

bodyonload="top.resizeTo(300,200);"!--(width，height)--

怎样实现双击滚屏，单击停止？

HTML代码片段如下:

html

head

title新网页1/title

/head

body

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

varcurrentpos,timer;

functioninitialize()

```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

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

input type="submit"values="提交"name="B1"

image src="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="下拉

网页制作的结构布局有哪些

布局就是以最合适浏览的方式将图片和文字排放在页面的不同位置。不同的制作者会有不同的布局设计。网页布局有以下几种常见结构：

1.“同”字型结构布局

所谓同字型布局就是指页面顶部为“网站标志+广告条+主菜单”或主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体内容的布局。

这种布局的优点是充分利用版面，页面结构清晰，左右对齐，主次分明，信息量大；缺点是页面拥挤，太规矩呆板，如果细节色彩上缺少变化调剂，很容易让人感到单调缺乏。

2.“国”字型布局

这种布局的优点是充分利用版面，信息量大，与其他页面的链接切换方便，缺点是页面拥挤，四面封闭，令人感到憋气。

3.T型布局

这是一个形象的说法，是指页面的顶部是“网站标志+广告条”，左面是主菜单，右面是主要内容。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法；缺点是页面呆板，如果不注意细节上的色彩，很容易让人“看之无味”。

4.“三”字型布局

这种布局多用于国外站点，国内用得不多。特点是在页面上有横向两条色块，将页面整体分割为两大部分，色块中大多放广告条、更新和版权提示。

5.对比布局

顾名思义，这种布局采用左右或者上下对比的方式：一半深色，一半浅色。一般用于设计型站点。优点是视觉冲击力强；缺点是将两部分有机地结合比较困难。

6.POP布局

POP源自广告术语，是指页面布局像一张宣传海报，一张精美的图片作为页面的设计中心。这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，甚至直接在首页的图片上做链接而没有任何提示。这种布局大部分出现在企业网站和个人主页，如果处理得好的话，会给人带来赏心悦目的感觉。

7.Flash布局

这种布局是指整个或大部分幅面的网页本身就是一个Flash动画，它本身就是动态的，画面一般不叫绚丽、有趣，是一种比较新潮的布局方式。其实这与封面型结构是类似的，只是这种类型才采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。不同性质的网站，其页面内容安排是不同的。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简单说明：A、页面标题在站点的每个页面中都有一个标题，用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中比较简单标题名称B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如果该企业（社团）已经导入了CIS（CorporateIdentitySystem）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。一个成功的网站和创建者实体一样，有着独特的形象识别，在网站推广过程中将起到事半功倍的效果。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。C、页眉页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。D、页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。E、导航导航是网页设计中的重要部分,也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着举足轻重的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图象相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的上方位置，次要的内容安排在右下方。原发布者:menwai2018

```

这种布局指的是整个或大部分网页页面本身就是一段Flash动画，它本身是动态的，画面一般不称华丽、有趣，是一种相对新颖的布局形式。实际上，这与封面式结构相似，只是这种类型开始采用目前非常流行的Flash，与封面式不同的是，由于Flash强大的功能，页面所传达的信息更为丰富，其视觉及听觉效果如果处理得当，绝不逊色于传统的多媒体。不同类型的网站，其页面内容安排各不相同。一般网页的基本内容包括标题、网站标识图案（LOGO）、页眉、页脚、主体内容、广告栏等。下面简要说明：A、页面标题在站点的每个页面中都有一个标题，用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，而不是在页面的布局中。它的重要作用就是引导访问者清楚地浏览网站的各项内容，不至于迷失方向。标题的加入在HTML语言中相对简单，标题名称B、网站标识（LOGO）网站作为一个对外交流的重要窗口，创建者都会用来进行自身形象的宣传。如果该企业（社团）已经导入了CIS（CorporateIdentitySystem）形象识别系统，那么在网站建设过程中应依据该系统为指导进行网页设计，其中标志性图案就是网站的LOGO。一个成功的网站和创建者实体一样，有着独特的形象识别，在网站推广过程中将起到事半功倍的效果。如果还没有导入CIS，在网站建设之前应该根据网站的总体定位，设计制作一个网站的LOGO，这如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念。LOGO一般设置在主页面的显要位置，二级页面的页眉位置。C、页眉页眉指的是页面上端的部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数网站制作者在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。D、页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连接等。E、导航导航是网页设计中的重要部分，也是整个WEB站点设计中的一个独立部分。一般来说，一个网站年的导航位置在每个页面中出现的位置是固定的。导行的位置对于站点的结构与整体布局有着至关重要的作用。导航的位置一般有四种标准的显示位置：左侧、右侧、顶部和底部。有的站点运用了多种导航，是为了增加页面的可访问性。F、主体内容主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的上方位置，次要的内容安排在右下方。原发布者:menwai2018

电子商务网站的主页内容布局授课：花小琴常见的网页布局结构国字型布局——国字型布局由同字型布局演变而来，因布局结构与汉字国相似而得名。其页面的最上部分一般放置网站的标志和导航栏或横幅广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页布局结构T型布局——T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或横幅广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构标题正文型——标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构左右框架型布局——左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构上下框架型——上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构综合框架型——综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构POP布局——POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构FLASH布局——FLASH布局是指网页页面以一个或多个Flash作为页面主体的学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？

对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标准的网页第一步就是要划分网页的结构。一般来讲，网页结构的划分需要遵循几个原则：

一、自上而下原则

因为浏览器在渲染一个网页的顺序是自上而下的。这里提到了渲染这一个词，所谓的渲染就是浏览器将代码转换为页面显示内容的过程。浏览器会自上而下读取你写的代码并自上而下显示。

二、从左至右原则

在自上而下的同时，同一行的内容是从左至右渲染，所以在划分结构的时候有从左至右的顺序。

三、一像素原则

这个原则对于初学者来说必须坚持，但也并不是说无论什么时候都得死认这个道理。前期我们在划分网页的时候一定要划分准确，尤其是横向。试想，如果外面的盒子宽度是1200像素，里面两个盒子一个600像素另一个601像素，加起来超过了父级的宽度那么必然第二个盒子会换到下一行进行显示。

这个准则对新手而言务必恪守，然而并不意味着任何时候都必须拘泥于这一理念。在初期进行网页切分时，我们必须确保其精确度，尤其是横向的布局。设想一下，若外层容器宽度为1200像素，内部两个容器分别宽600像素和601像素，两者相加超出了父容器的宽度，那么必然第二个容器会被调整至下一行展示。

阐述完上述三个准则之后，有些人可能会过度追求这些准则的遵循，例如在结构划分时必须区分上下部分，但例如下面的网页截图，图片与文字实际上是一个整体，文字是图片的说明，因此不应分为上下，而应水平分割，每个图文组合为一个内容单元，水平划分为四部分：

我们提到一般网页包括header（头部区域）、banner（广告横幅区域）、main（主体内容区域）和footer（底部区域），并非所有网页都具备这些部分，有些网页没有banner，而新手容易将header下方部分误划分为banner，有些网页除了这几部分外，还可能包含icon等区域，新手可能会将它们归入main区域。

谈及main区域，其结构划分方式多样。有些网页有一个贯穿左右的全屏背景色或背景图片，此时我们的结构划分也应包含一个外层全屏容器，为其添加背景色或背景图，然后在其中嵌套一个inner容器，为其设定可视区域的固定宽度并居中。若没有全屏背景，则无需设置全屏容器，直接为main区域设定固定宽度并居中即可。

在结构划分过程中，如何确定盒子区域间的间距，这也是新手最感棘手的问题。实际上，在结构划分时，这些空白区域并不会产生实质影响，因为空白区域都可以通过代码实现。不过，对于文字区域，不能紧贴文字上下划分，因为文字自带行高。

此外，有些地方可能包含一些小图片或内容覆盖在较大容器上，在结构划分时可以忽略这部分，因为后期在代码实现时，我们可以利用定位技术进行处理。