网页按钮设计（网页按钮设计方案）

本文目录一览：

1、1、网页中按钮的常见类型有哪些？ 2、网页中按钮的特点有哪些？ 3、按钮的设计要点有哪些？
2、网页的那个按钮怎么做
3、网页设计制作技巧

1、网页中按钮的常见类型有哪些？ 2、网页中按钮的特点有哪些？ 3、按钮的设计要点有哪些？

一、网页中按钮的常见类型：

1、静态图片按钮

将按钮制作为静态图片的效果，不带有任何的交互效果和动态效果与普通文字链接相比静态图片链接，更加醒目和美观，视觉效果更出众，能够更加吸引浏览者。

2、Flash动画按钮

网页中的Flash可谓风靡一时，行业中常常出现Flash按钮效果。在潮流的驱使下，设计师也意识到了Flash所能达到的页面效果远远大于普通按钮。特别是游戏类网站更是将Flash发挥的淋漓尽致。

3、JavaScript翻转图片按钮

JavaScript翻转图片按钮通常是通过Java语言来实现的，即按钮在正常状态下是一幅图片，当鼠标经过时会变成另一幅图片。

4、汉堡按钮

汉堡菜单释放空间使界面更简约和通风，从功能的角度来看，它为其他重要的布局元素节省了大量空间。对于响应和自适应设计隐藏导航元素并使界面在不同设备上看起来更加和谐。

二、网页中按钮的特点：

1、易用性

在网页中使用图片按钮笔特殊字体的按钮，更容易被浏览者所识别。随着Flash动画的风靡，越来越多的网站使用了Flash动画按钮，这种按钮更能吸引浏览者注意时，网页更易于操作。现在的网页中开始越来越多的应用设计精美的图片按钮和Flash按钮。

2、可操作性

在网页设计过程中，为了使网页中较为重要的功能和链接突出出来，通常会将其制做成按钮的形式，如登录和搜索按钮等，或是一些具有特殊功能的按钮，这些按钮，无论是静态还是动态都是为了实现功能，而不是装饰，所以这些按钮，就需要有一定的可操作性。

三、按钮的设计要点：

1、与页面风格协调

因为中的任何一部分都不能脱离出来单独存在按钮也如此。按钮的风格必须与整体页面效果协调一致，才能体现出价值。

2、注意配色

手机按钮时要尽量做到文字清晰。另外配色应该简洁鲜艳，最好不要使用四种以上的颜色。

3、巧妙调整按钮的形状

按钮的形状应该根据整体页面颜色的着重点分布灵活调整。

扩展资料：

按钮设计原则：

1、颜色

为了使一些按钮容易引人注意并且一些次要按钮，选择合适的颜色至关重要。问题在于人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为CTA选择颜色时要记住这一点至关重要：按钮和背景颜色必须对比良好才能使按钮从其他UI组件中快速脱颖而出。

2、形状

至于CTA按钮，它们通常看起来像水平矩形。原因是你要清楚这个按钮是可点击和交互的，人们习惯将这个形状看作一个按钮。按钮的形状还要与网页或者app的设计风格保持一致。

3、位置

按钮的放置位置对于构建可靠的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计人员必须学习可扫描的区域，并在用户可以操作的空间中放置核心功能的按钮。

网页的那个按钮怎么做

那个Button是控件，

你可以添加HTMLbutton控件，input type="button" id="btn" value="button"/

或者服务器控件

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

或者你可以通过一些网页编辑软件DW,或者微软的visual studio在设计模式下直接拖到你想要的位置

下面是一些参考

asp.net之所以现在开发方便和快捷，关键是它有一组强大的控件库，包括web服务器控件,web用户控件，web自定义控件，html服务器控件和html控件等。这里我主要说说html控件、html服务器控件和web服务器控件的区别。

1、html控件:就是我们通常的说的html语言标记，这些语言标记在已往的静态页面和其他网页里存在,不能在服务器端控制的，只能在客户端通过javascript和vbscript等程序语言来控制。input type="button" id="btn" value="button"/

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释input id="Button" type="button" value="button" runat="server" /

3、web服务器控件:也称asp.net服务器控件，是Web Form编程的基本元素，也是asp.net所特有的。它会按照client的情况产生一个或者多个html控件，而不是直接描述html元素。如： asp:Button ID="Button2" runat="server" Text="Button"/那么它和html服务器控件有什么区别呢?参照其他网页的资料看法如下：

1)、Asp.net服务器控件提供更加统一的编程接口，如每个Asp.net服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、Asp.net服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Asp.net服务器控件则是在服务器上，举例来说：

input id="Button4" type="button" value="button" runat="server"/是Html服务器控件，此时我们点击此按钮，页面不会回传到服务器端，原因是我们没有为其定义鼠标点击事件。

input id="Button4" type="button" value="button" runat="server" onserverclick="test" /我们为Html服务器控件添加了一个onserverclick事件，点击此按钮页面会发回服务器端，并执行test(object sender, EventArgs e)方法。

asp:Button ID="Button2" runat="server" Text="Button" /是Asp.net服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Asp.net服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

input runat="server" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

展现出来的html代码如下：

input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" /

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(.net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)如:

input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" /

asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"LinkButton/asp:LinkButton直接放到form标记中生成的html代码

script type="text/javascript"

!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

i f (!theForm.onsubmit (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// --

/script

input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" /

a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"LinkButton/a

这里有可以看出几点：

1、当html服务器控件在服务器端添加了服务器事件后生成的代码变为:onclick="_doPostBack()"，实际上是调用脚本把整个窗体提交到服务器(如果没有添件服务器事件而只是添加了runat="server"是不会发送到服务器端的)这里注意如果要在html服务器控件中添加一个客户端事件如上面的 input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /变成 input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" /那样生成的html代码变成 input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。在我的一个项目中需要对于控件进行区分总结，我在网上找了找加上自己的实际测试总结如下：

2、html服务器控件:其实就是html控件的基础上加上runat="server"所构成的控件.它们的注意区别是运行方式不同，html控件运行在客户端，而html服务器控件是运行在服务器端的。参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为字符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释input id="Button" type="button" value="button" runat="server" /

1)、 Asp.net服务器控件提供更加统一的编程接口，如每个Asp.net服务器控件都有Text属性。

2)、隐藏客户端的不同，这样程序员可以把更多的精力放在业务上，而不用去考虑客户端的浏览器是ie还是firefox，或者是移动设备。

3)、 Asp.net服务器控件可以保存状态到ViewState里，这样页面在从客户端回传到服务器端或者从服务器端下载到客户端的过程中都可以保存。

4)、事件处理模型不同，Html标注和Html服务器控件的事件处理都是在客户端的页面上，而Asp.net服务器控件则是在服务器上，举例来说：

asp:Button ID="Button2" runat="server" Text="Button" /是Asp.net服务器控件，并且我们没有为其定义click，但是我们点击时，页面也会发回到服务器端。

由此可见：Html标注和Html服务器控件的事件是由页面来触发的，而Asp.net服务器控件则是由页面把Form发回到服务器端，由服务器来处理。

4、下面我就结合我自己的测试来说明问题：

这段代码是我放在repeat中的模板里的:其中DeleteCheck是一个js脚本函数，注意是用于是否发送到服务器端的，这里就不展示脚本代码了。

input runat="server" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" /

展现出来的html代码如下：

input name="Data$ctl03$delete" type="button" id="Data_ctl03_delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Data$ctl03$Button2" type="submit" id="Data_ctl03_Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input ut type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="Data_ctl03_button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="Data$ctl03$button5" value="Asp:button" onclick="return DeleteCheck(this);" id="Data_ctl03_button5" /

可以看出以下几点:

1、当控件属性中有runat="server"时，生成的html控件时name和id发生的变化(.net Framework)。

2、当asp:button服务器按钮通过生成的页面后转化成类型为submit类型的Client控件。

3、当控件是html控件时通过生成的页面和原来的html代码完全一样(理由上面已经说名)。

另外我还测试了把这段代码直接放到form标记中(不放到其他子标记中)

如: input runat="server" type="button" id="delete" value="Server button" onserverclick="delete_ServerClick" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input runat="server" type="submit" onclick="return DeleteCheck(this)" id="Button2" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button runat="server" id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

asp:Button runat="server" ID="button5" OnClientClick="return DeleteCheck(this)" Text="Asp:button" OnClick="button5_Click" /

asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"LinkButton/asp:LinkButton直接放到form标记中生成的html代码

script type="text/javascript"

!--

var theForm = document.forms['form1'];

if (!theForm) {

theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

if (!theForm.onsubmit (theForm.onsubmit() != false)) {

theForm.__EVENTTARGET.value = eventTarget;

theForm.__EVENTARGUMENT.value = eventArgument;

theForm.submit();

}

// --

/script

input language="javascript" onclick="__doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /

input type="button" onclick="return DeleteCheck(this)" id="Button1" value="Client button" /

input name="Button2" type="submit" id="Button2" onclick="return DeleteCheck(this)" value="Server submit" /

input type="submit" onclick="return DeleteCheck(this)" id="Button3" value="Client submit" /

button id="button4" onclick="return DeleteCheck(this)" value="Button-Button"Button-Button/button

input type="submit" name="button5" value="Asp:button" onclick="return DeleteCheck(this);" id="button5" /

a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')"LinkButton/a

这里有可以看出几点：

变成 input runat="server" type="button" id="delete" value="Server button" onclick="return DeleteCheck(this)" onserverclick="delete_ServerClick" /

那样生成的html代码变成 input language="javascript" onclick="return DeleteCheck(this) __doPostBack('delete','')" name="delete" type="button" id="delete" value="Server button" /提示有脚本错误原因是onclick事件执行了2个脚本且书写的格式不正确。onclick="return DeleteCheck(this)；_doPostBack()"这样的话就只能执行第一个函数而第二个函数就不能执行了(return).如果用onclick="return DeleteCheck(this)，_doPostback()"是指2个函数同时都要执行没有影响(相当于一条语句)。

2、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

3、LinkButton不定义onclick事件，它会自动的生成下面代码发送到服务器端。 href="javascript:__doPostBack('LinkButton1',' ')"

4、asp:button中的onclientclick事件生成后就变成了onclick事件了,类型变成了type="submit".然而服务器事件的onclick我想是通过发送到服务器端执行的。

网页按钮设计（网页按钮设计方案）

网页设计制作技巧

网站的主要结构页面，又称次首页、内页，大型网站往往框架页即首页，如一些门户网站。框架页主要是网站内部主要栏目的首页，讲究风格的一致性，并于主页呼应。下面是我整理的网页设计制作技巧，希望对你有帮助!

一、页面平铺

把页面平铺开，主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。

1.导航栏

导航栏如果设计得恰到好处，是会给网页本身增色很多。导航栏有一排、两排、多排、图片导航和Frame框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，如很精彩的Flash导航。

2.LOGO

LOGO并不是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果;网站的LOGO，一般以静态的居多，也有动态的，但是LOGO的特点都是在表达网站的信息，是一个网站的直接的表现窗口。

3.BANNER(广告条)类型

Banner设计注意点：Banner有动态和静态两种。在浏览网页的.过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。设计要点：Banner的文字不能太多，用一两句话来表达即可;广告语要朗朗上口，可以第一时间的让人捕获表达的重点;图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没;图形尽量选择颜色数少，能够说明问题的事物;如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑;尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。

4.按钮

按钮设计要点：设计按钮要同页面的整体协调，不能太抢眼;有的页面很单调，还要依靠花哨的按钮来提一下;选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过四种;很长的按钮可能就是框架的分界，尽量要纤细一些，否则页面会显臃肿。

5.图片

为了美化页面，图片是任何一个页面都要用到的，图片的运用要合理。图片运用要点：图形的主体最好清晰可见;图形的含义最好简单明了;图片内所含文字应该清晰容易辨认;背景与主体明度对比比例应为3∶1到5∶1之间为宜;淡色系列的背景有助于整体和谐;淡色材质背景最佳，能与主题分离之浅色标志或文字背景亦可。

6.文字

文字也是设计的。设计要点：每一行文字的长度最好20到30个中文字(40到60个英文字母);行距与字距已由软件内定。设计时注意段落与段落间空行及首行缩排方式以辅助阅读;标题以H1到H3字号为佳，内文Font size=3到4级为佳;同版面字型最好在三种以内;文字的颜色最好也是三种以内;文字在颜色上要与背景区别;内文的排列向左对齐并与左边界保持适当距离。可以用表格填入文字以达此效果;表格或清单内的字运用相同字型与字体大小，以利辨别。

二、整体规划

有共性，才有统一，有细节区别，就有层次;防止设计与实现过程中的偏差;设计的各部分，要配合整体风格;不仅页面上各项设计要统一，而且网站的各级别页面也要统一;信息不要太过集中，以免文字编排太紧密;不要有太多分散注意力的点。动态闪烁要适中;页面留白部分，要根据平面设计原理来设计，注意分栏式结构不宜留白;还要考虑到浏览器上部占用的屏幕空间，防止图片截断等造成视觉效果不好;首页设计图片+导航，这是一种比较强的网站表达，可以根据时间的变化更改图片。

三、功能易用性

导航栏应最先调入，以便访客快速前往所需信息空间;页面长度要短，使得用户在信息空间内可迅速移动;导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。

;