导航:首页 > 万维百科 > 网页界面设计怎么做的

网页界面设计怎么做的

发布时间:2021-01-18 09:37:29

1、学习网页界面设计都要学什么内容 从哪里开始

要想学做网页,首先得了解制作网页的工具
Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。

另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。

此外还有一些网络编程工具,javascript、java编辑器等。

网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。

大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。

总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了!

网站设计八步骤

由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。

一、确定网站主题

网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。

二、搜集材料

明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。

三、规划网站

一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具

尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。

五、制作网页

材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。

六、上传测试

网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。

七、推广宣传

网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。

八、维护更新

网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者

2、网页设计 类似百度搜索页面是怎么做出来的

网页设计这个一般都是要求会前端代码,html css js flash 还有些其他的脚本插件什么的。

如果代码写的熟练可以不用DW。写网页的工具很多,用txt文本文档也可以。


好了,贴上搜索框代码,使用需要后台程序支持,直接点了可是什么都没有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }
     
      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

3、网页制作中登陆界面设计代码

<%@language=vbscript codepage=936 %>
<%
option explicit
'强制浏览器重新访问服务器下载页面,而不是从缓存读取页面
Response.Buffer = True
Response.Expires = -1
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
'主要是使随机出现的图片数字随机
%>
<html>
<head>
<title>管理员登录</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="Admin_Style.css">
<script language=javascript>
function SetFocus()
{
if (document.Login.UserName.value=="")
document.Login.UserName.focus();
else
document.Login.UserName.select();
}
function CheckForm()
{
if(document.Login.UserName.value=="")
{
alert("请输入用户名!");
document.Login.UserName.focus();
return false;
}
if(document.Login.Password.value == "")
{
alert("请输入密码!");
document.Login.Password.focus();
return false;
}
//if (document.Login.CheckCode.value==""){
// alert ("请输入您的验证码!");
// document.Login.CheckCode.focus();
// return(false);
}
}
</script>
</head>
<body onLoad="SetFocus();">
<p> </p>
<form name="Login" action="Admin_ChkLogin.asp" method="post" target="_parent" onSubmit="return CheckForm();">
<table width="300" border="0" align="center" cellpadding="5" cellspacing="0" class="border" >
<tr class="title">
<td colspan="2" align="center"> <strong>管理员登录</strong></td>
</tr>

<tr>
<td height="120" colspan="2" class="tdbg">
<table width="250" border="0" cellspacing="8" cellpadding="0" align="center">
<tr>
<td align="right">用户名称:</td>
<td><input name="UserName" type="text" id="UserName2" size="23" maxlength="20"></td>
</tr>
<tr>
<td align="right">用户密码:</td>
<td><input name="Password" type="password" size="23" maxlength="20"></td>
</tr>
<tr>
<td align="right">验 证 码:</td>
<td><input name="CheckCode" size="15" maxlength="6">
1109 </td>
</tr>
<tr>
<td colspan="2"> <div align="center">
<input type="submit" name="Submit" value=" 确认 ">

<input name="reset" type="reset" id="reset" value=" 清除 ">
<br>
</div></td>
</tr>
</table>
</td>
</tr>
</table>
<p align="center">后台管理页面需要屏幕分辨率为 <font color="#FF0000"><strong>1024*768</strong></font>
或以上才能达到最佳浏览效果!<br>
需要浏览器为<strong><font color="#FF0000"> </font></strong><font color="#FF0000"><strong>IE5.5</strong></font>
或以上版本才能正常运行!!!</p>
</form>
</body>
</html>

4、dreamweaver在设计视图里面制作网页界面很简单,但是为什么大多数人都选择写代码这么繁琐?

这也不是绝对的,纯代码开发的好处是,对于熟悉代码的人而言,不需要用鼠标到处点参数,而且dreamweaver里面的代码自动完成功能也很不错,只要输入一两个字母就能找到需要设置的参数了,当然它的缺点是不够直观,有的时候写完代码一测试,不是想要的效果,而且对于不熟悉代码的人而言,开发也是比较吃力的;纯视图开发的好处是,可以很直观地看到效果,但是缺点是,它隐藏了很多高级的样式,只能做一些基础的开发,例如要定义元素的伪类,在视图模式里面就很难做到了。比较好的开发习惯是用分屏的方式来制作,一边显示代码,一边显示视图,既方便代码书写,又可以看到效果

5、怎么做一个PPT的界面设计

1、新建一个ppt文档
2、双击打开
3、工具栏(从上往下数第二行)“插入(左数第四个)”---->“新幻灯片(第一个)”,这时会在左面出现一张新幻灯片,中间也出现一张空白幻灯片;
4、“格式(左数第五个)”---->“幻灯片设计”,在右边出现的背景中单击你喜欢的,这时桌面的幻灯片背景就从白色变成你选择的那个了;
5、你能看见“单击此处添加标题”,有标题就往里边打字就行,下面有个副标题,有就写,没有就不写。
6、需要多张幻灯片的话,重复第三步。
7、添加完文字以后,工具栏“幻灯片放映(左数第六个)”---->“观看放映(第一个)”,观看放映效果。
上面是最最最基本的用法,不包括动画、特效、图片等功能。这些在“插入”“工具”“格式”都有,通常你添加的东西,在它上面点右键就能实现各种操作了,自己摸索一下。

6、设计网页风格 UI (用户界面) 用什么软件

1楼就足够了,只要做框架图和注释的话 VISIO很不错 是微软的专门做这事的工具

PS一般来说都是美工在用,策划的机器一般来说都比较差,PS的内存占用蛮大,使用上比VISIO来说相对麻烦一点,所以策划或者程序做设计图的时候没必要用PS

7、如何将网站界面设计做到更好

想将网站界面设计做到更好需要有非常专业的知识,据我了解的是需要在下面的几个知识中下很大的努力:

设计知识,没有设计的基础如何能设计好一个好的网站界面?

色彩搭配,色彩搭配都不会,那如何确定网站的主色调和如何根据网站的主题来搭配色彩?

结构知识,一个好的网站结构一定要好,不好的结构容易造成不知道用户需要的内容在哪里的感觉.

舒适性,先自己体验自己设计的网站,问问自己觉得自己满意没有,如果自己都不满意,那用户怎么会满意,客户怎么会满意?

其实网站界面主要如果不涉及到代码方面的知识主要还是要看你的设计美术功底,所以学好设计美术才是能进一步提升网站界面基础

8、UI要做网页界面设计把,应该怎么去学习网页界面设计呢,有什么快速的好方法吗

什么事情都要有过过程,不可能一频登天,

UI要做成网页的话 最简单方法是,PS CC这类的版本好像支持直接生成HTML(静态)网页;

学习DIV +CSS 这个是最基本的HTML代码,上手很快的,学习完这个可以创建HTML网页

HTML5是这些年新出来的HTML升级版,直接支持动画与游戏类的开发

网页的尺寸: 每个人使用的电脑显示尺寸都不一样的,所以才要考虑到用户体验的问题,常用的尺寸为1000px左右(也就是为了1024px尺 也就是14寸显示器)

9、网页界面设计工具有哪些

工欲善先利其器,网页界面设计过程中要运用很多工具,蓝湖、PS、Sketch、AI、Axure 这些差不多能囊括其工作的方方面面。

与网页界面设计怎么做的相关的知识