您的位置：首页 > 百科管理 > 详情

html 页面设计-Html页面设计和编程

原创：找图网 2023-04-18 07:34:21

html5网页设计流程文字说明？

网站结构设计包含网站栏目设计和网站模块设计以来确定网站提供服务的一种逻辑表现形式,也是网页之间的层次关系。

1.网站栏目能起到提纲挈领额作用

2.网站栏目具有清晰导航的功能

3.网站模块要做到顺序清晰且紧密结合

二、网站主题设计

网站主题设计实际就是网站视觉呈现风格的设计。网站的主题风格要能充分吸引用户的注意力,为用户提供愉快的访问体验。

1.设计能反映网站内容的logo,并且将logo放在网站的醒目位置。

2.网站的颜色要统一,要突出网站的主调色彩。

3.相同类型的图像要有相同的效果。

4.网站要有一句明晰的宣传标语。

三、网站布局类型

1.国字型布局

这种布局类型分为上边栏、左边栏、中间内容区、右边栏和底部的页脚区域,其形状酷似一个“国”字。国字型结构是目前比较常用的一个网页布局结构,它适用于信息分类繁多、需要良好组织的网站。

2.T字型布局

这种布局类型由上边栏、左边栏、内容区、下边栏组成,其形状有点像一个英文字母写的“T”字。T字型结构网站目前在一些权威机构、企事业单位的公司网站出现得比较多。

3.左右框架型布局

这类网站主要由左边栏和内容区组成,组成比较简洁,主要用于精彩内容的呈现,主要是很多个人站点、博客的首选。

4.上下框架型布局

这类网站由上下边栏组成,上边栏用来放置logo和链接等信息,下边栏用来放置网页的内容。上下型网站经常用来进行个性化展示,在企业门户网站的公司展示中也比较常用。

5.标题正文型布局

这类网站的布局结构由上边栏和内容区组成,上边栏用于显示文章的标题。主要用于显示文章的标题,内容区放置文章的内容,这类布局在一些论文、学术网站的设计中比较常用。

网站设计都不会单独使用以上列出的某一种布局结构,而是通过混合使用多种布局结构来实现自己想要的效果,这类布局通常称为“综合性布局”。

四、网站页面设计

网站页面是网站的最终表现形式。网站页面由页面内容的质量度和页面的美观度来决定。页面设计应该遵循的原则如下:

1.符合企业的行业属性和企业特点。客户打开网站能直观感受企业所传递的理念和特征。

2.符合用户的浏览习惯。根据网站内容的重要性进行排序,让用户花最短的时间能够找到自己需要的信息。

3.符合用户的使用习惯。将用户经常使用的功能放在网站的醒目位置。

4.图文搭配。

5.利于搜索引擎优化。减少图片和动画,多使用文字描述,以便于搜索引擎收录,让客户更容易找到你。

网页设计常用HTML代码

网页设计常用HTML代码大全

HTML是用来描述网页的一种语言。下面我为大家分享HTML代码,希望对大家学习html代码有帮助!

忽视右键

或

1.如何几秒后转到别的页面?

2.点击关闭窗口

<a href="javascript:();">点击关闭窗口</a>!

3.请问如何去掉主页右面的滚动条?

4.请问如何做到让一个网页自动关闭.

<html>

<head>

</object>

</head>

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

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

<style>

button{ color:#000000;}

</style>

<button onclick=[0].rules[0].=‘‘‘‘red‘‘‘‘>点击按钮直接修改style标签里button选择符使按钮改为红色</button>

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

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

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

方法一,用refresh

HTML 代码片段如下:

<head>

</head>

5表示刷新时间

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

方法二,使用setTimeout控制

function rl(){

()

}

setTimeout(rl,2000)

</script>

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

在源代码中的<HEAD>…</HEAD>之间输入如下代码:

a { text-decoration: none}

--> </style>

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

</body>

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

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

或者

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

HTML 代码片段如下:

<body>

<a href="#" style="cursor: crosshair ">crosshair </a><br>

<a href="#" style="cursor: default ">default </a><br>

<a href="#" style="cursor: e-resize ">e-resize </a><br>

<a href="#" style="cursor: ne-resize ">ne-resize </a><br>

<a href="#" style="cursor: nw-resize">nw-resize</a><br>

<a href="#" style="cursor: n-resize">n-resize</a><br>

<a href="#" style="cursor: se-resize">se-resize</a><br>

<a href="#" style="cursor: sw-resize">sw-resize</a><br>

<a href="#" style="cursor: s-resize">s-resize</a><br>

<a href="#" style="cursor: w-resize">w-resize</a><br>

</body>

11.怎样不使用页面的缓存?即每一次打开页面时不是调用缓存中的东西

12.页面打开时自动弹出一个窗口的代码怎么写?

HTML 代码片段如下:

<html>

<head>

<title>Untitled Document</title>

<!--

function MM_openBrWindow(theURL,winName,features) { //v2.0

(theURL,winName,features);

}

//-->

</script>

</head>

</body>

</html>

13.如何让我的页面出现一个会讲话的小人?Merlin

HTML 代码片段如下:

<HTML>

<HEAD>

</HEAD>

<BODY>

</OBJECT>

var MerlinID;

var MerlinACS;

= true;

MerlinLoaded = LoadLocalAgent(MerlinID, MerlinACS);

Merlin = (MerlinID);

();

("Surprised");

("大家好");

("GestureLeft");

("我是默林!");

("Pleased");

("可爱吗?");

("GestureDown");

("哈哈!");

();

function LoadLocalAgent(CharID, CharACS){

LoadReq = (CharID, CharACS);

return(true);

}

</SCRIPT>

</p>

<p>看此效果必须装有office2000!!!</p>

</BODY>

</HTML>

14.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

HTML 代码片段如下:

<STYLE>

body {background-image:url();

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

</STYLE>

</head>

</body>

</html>

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

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

body bgproperties="fixed" 是拉动scroll时背景图不动

15.文本输入框什么属性能实现不可输入?

HTML 代码片段如下:

或者

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

把以下代码加至你的<head>区

if (!=self){

}

</script>

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

HTML 代码片段如下:

<html>

<body><script language="<B style="color:black;background-color:#A0FFFF">javascript</B>">

var coolw=642

var coolh=400

var coolhuang=("","coolhuang","width="+coolw+",height="+coolh+",

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

()

</script></body></html>

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

HTML 代码片段如下:

19.如何禁止Ctrl+N?

HTML 代码片段如下:

如何把页面加入用户的收藏夹?

HTML 代码片段如下:

<a href="<B style="color:black;background-color:#A0FFFF">javascript</B>:(‘‘‘‘‘‘‘‘,‘‘‘‘无忧脚本‘‘‘‘)">收藏无忧脚本</a>

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

IE: <bgsound src="*.mid" loop=infinite>

NS:<embed src="*.mid" autostart=true hidden=true loop=true>

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

关于页面转换效果

或

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

如何设定打开页面的大小

HTML 代码片段如下:

怎样双击滚屏,单击停止?

HTML 代码片段如下:

<html>

<head>

</head>

<body>

var currentpos,timer;

function initialize()

{

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

}

function sc(){

clearInterval(timer);

}

function scrollwindow()

{

currentpos=;

(0,++currentpos);

if (currentpos != )

sc();

}

=sc

=initialize

</script>

</body>

</html>

如何让body中的文字不被选中?

HTML 代码片段如下:

如何让弹出的窗口不能关闭?

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

</body>

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

HTML 代码片段如下:

<<B style="color:black;background-color:#ffff66">IFRAME</B> SRC="*.html">

</<B style="color:black;background-color:#ffff66">IFRAME</B>>

</NOSCRIPT>

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

<html>

<head>

function aaa(){

[0].reset()

}

</script>

</head>

<body>

<form>

</form>

</body></html>

进入网页时弹出的信息对话框

关闭窗口后弹出对话框

告别提示

右键菜单的制作

</OBJECT> <script> if () =new Function("if (==2) ();") </script>

下拉菜单

;

Html页面设计和编程

在整个网页的设计过程中,考虑到该网页的主题为校庆,因此加入了比较喜庆的红色元素,同时保留了厦大的代表色蓝色,将红蓝进行了混合搭配。

在对整个页面的设计中,主页包含“通知”、“新闻”、“影像”几个模块的部分,采用的是图文结合的方式,

而在后半部分介绍“厦大简介”、“校友风采”、“厦大历史”这几个模块,页面的排版我改成了竖式阅读的方式,制作了几个标题图片,然后结合图文。

除此以外,在校友风采这一块,我采用的是卡片式的排版,即将图片和文字以卡片的形式组合,但是这边因为我暂时还不能把卡片样式做的比较有个性,所以比较朴素。

页面不仅采用了横式的导航栏,而且在左侧也有竖式的导航栏,同时把页尾也放到了竖式的导航栏下,出发点是让用户更多关注页面中央的内容。

在主导航栏这里我做了一些样式,即一级菜单和二级菜单在被点击的时候被有不同的颜色变化。

这次简单地自己做了一个校庆网页,还有很多不足的地方有待改善,比如“厦大历史”板块原来想设计一个时间轴,但是目前来说对自己的难度有点大,所以暂时只做了文字和标题红块的样式;由于我整个框架是构建在table内的,所以页面内的各个元素的层级做着做着自己就有点乱了,下一次做网页还需要更多尝试下用css来进行排版。

总得来说,收获很大,还需要借鉴更多优秀网站的设计以及更加熟练地运用css和html。