导航:首页 > 万维百科 > 网站怎么设计出来的

网站怎么设计出来的

 发布时间：2020-12-24 00:15:18

1、网站如何设计

许多开发人员博客都使用类似的模板，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颖而出。

练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。

以前接私活的时候，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。
更好的应用程序性能。你的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括UI库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对你网站的性能产生负面影响。加载慢，打开网页慢，被很多人不接受。
发展职业技能。在Web开发角色中，你可能不必从头开始实现完整的网站设计，但是你应该能够制作与现代设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，产品方面的知识。全栈开发人员应具有一些基本的设计知识，并能够为用户提供一致的体验。当然从中学习到很多的技能知识，这是毋庸置疑的。

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、网站如何制作？

一、注册网站域名
二、根据用户的实际需求来进行服务的选择和租用性价比高的空间服务器。
三、网站设计
在网站的整体风格和类型确定后需要根据需求设计网站，网站的图片和文字。
四、网站的前端设计
根据客户对网站定位以及需求,有专业网页设计师来负责网站页面设计,如果客户不满意初稿可以要求修改,中间有问题可以随时咨询。
五、网站的后台搭建
网站的整体设计就是包含前台和后台两部分，在这个后台系统当中你可以对网站进行日常维护,后台系统需要哪些功能,不同客户有不同选择。
六、网站的兼容性
在网站上线前需要对网站兼容性进行测试，以确保良好的用户体验。

4、怎么在html设计出这样的网站？

这是js效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片切换</title>
<style>
.pics {width:300px; height:100px; border:solid 1px gray; overflow: hidden; position: relative;}
.pics li {float:left; list-style-type:none;}
.pics ul, #pics ul li {margin:0; padding:0;}
.pics ul {position: absolute; left: 0; top:0; width:10000px;}
.pics img {width:300px; height:100px;}

.pics .divTip {position: absolute; left:10px; bottom:10px;}
.pics .divTip span {float: left; display:block; opacity:0.9; border-radius:5px; width:8px; height:8px; margin-right:5px; background-color:white; border:solid 1px #eee;}
.pics .divTip .active {background-color:gray;}
</style>
<script src="js/jquery.js"></script>
</head>
<body>

<div id="pics1" class="pics">
<ul>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
</ul>
</div>

<div id="pics2" class="pics">
<ul>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
</ul>
</div>

<script>
$.fn.extend({
///这个函数是全部选择所有的元素
switchPic: function(delayMs, runMs) {
// oid runMs delayMs
var o = {};
o.itemWidth = this.width();
o.runMs = runMs || 500;
o.delayMs = delayMs || 2000;
o.obj = this;

o.index = -1;
o.count = this.find('li').size();
o.isHover = false;

var html = '<div class="divTip">';
for (var i=0; i<o.count; i++) html += '<span data-i="' + i + '"></span>';
html += '</div>';
this.append(html);

o.fnAuto = function()
{
if (o.isHover) return;
o.index++;
if (o.index == o.count) o.index = 0;

o.fnIndex(o.index);
}

o.fnIndex = function (i)
{
o.index = i;
o.obj.find('.divTip span').removeClass('active');
o.obj.find('.divTip span').eq(o.index).addClass('active');
o.obj.find('ul').stop();
o.obj.find('ul').animate({left:'-' + (o.index * o.itemWidth) + 'px'}, o.runMs);
}

window.setInterval(o.fnAuto, o.delayMs);
o.fnAuto();

this.hover(function(){
o.isHover = true;
},function(){
o.isHover = false;
});

this.find('.divTip span').mouseover(function(){
o.fnIndex($(this).data('i'));
});
}
});

$('#pics1').switchPic(1000, 100);
$('#pics2').switchPic();

</script>

</body></html>

5、网站是怎样设计而来，设计好的网站需要怎样去做

1、网页设计前期调研阶段

网页设计前期调研阶段是进行网站建设网页设计制作流程必须经历的，调研工作充分与否，决定着整个决策设计方案定位的正确性，与其他设计准备工作一样，要从客户公司主、客观角度入手，包括市场角度、消费角度、地域角度、竞争对手角度和资金投入角度等进行准备和策划。

2、网页界面设计创意风格定位

为了保证我们制作的网站真正符合客户公司的信息，我们会通过独特的视觉传达系统来吸引浏览者的注意，从而使特定的信息得以准确迅速的传播。在完成调研分析之后，对网页界面的风格和表现形态进行定位，应简约还是古朴、应时尚还是端庄、应典雅还是个性等;色调是纯色调还是灰色调、是高明调还是低暗调，是运用对比色系还是同色系等，在表现形态上是采用构思巧妙的静态界面、变幻莫测的三维效果，还是互动性较强的交互式动态网页等。

3、网页界面设计制作阶段

经历了上面的两个网页设计制作流程，下一个阶段就到了网页界面设计制作阶段，在企业整体视觉传达设计风格的规范下，网页界面创意设计定位策略的引导下进行设计制作工作。设计制作应努力做到企业或网站标志的统一，网页的色调与企业的标准色、辅助色的和谐延续，形式与内容的整体统一；任何一个不符合整体风格的界面设计就必须删去，一切分散浏览者注意力的图形、线条、可有可无的“装饰”都应该适当摒弃，使参与界面形式构成的元素与传播的内容进行有机地融合。

4、网页界面发布调试阶段

其实到上面这些步骤的完成就预示着网页设计制作流程已经到了最后阶段，最后当网页设计制作完成后，就进入了网页的发布阶段。这是网页设计的最后阶段，成功与否取决于公众用户的批判，经过运行调整后，设计制作工作就宣告完成。

6、怎么设计官网才能让网站看起来比较有档次

访问者打开网站首先看到的是什么？内容，内容至关重要，每个设计师都希望以最有用，最直观的方式在其网站上展示内容。因此，为你的内容选择布局是尤为重要的。
许多人认为，他网站的Web布局应该是独一无二的，才能满足需要，事实并非如此。
如果你有访问现在流行的网站，你会发现其中有许多网站都使用相似的布局。这不是巧合，也不是出于懒惰，这是因为这些布局具有以下优点：
1.单列
单列布局在一个垂直列中显示主要内容。此类布局可能是该列表中最简单的布局，并且对于用户来说是最容易导航的。访客只需向下滚动即可查看更多内容。
尽管简单，但单列布局在许多网站中还是很受欢迎。手机也对这种布局的普及产生了影响-单列布局非常适合手机。

2.分屏
拆分屏幕（或一个屏幕一分为二）的Web布局非常适合具有两个相同重要性的主要内容的页面。
3.不对称布局
不对称是布局两侧之间缺乏平等性。不对称性是艺术界长期以来最喜欢的技术，最近在创建网站布局时在设计师中变得很流行。
许多人将不对称与不平衡混为一谈，但实际上，不对称的目标是在不可能或不希望对两个部分使用相等的权重时创建一个平衡。使用不对称性可以产生张力和动力，并且不对称性可以通过将用户的注意力集中在单个对象（焦点）上来突出这一点，通过更改每个不对称内容的宽度，比例和颜色，设计人员促使网站保持视觉吸引力。
4.纸牌网格
卡片是存放可点击模块的好布局-它们使设计人员能够以可消化的方式展示大量信息。咬合大小的预览（通常是图像和简短说明）可帮助访问者找到自己喜欢的内容，并通过单击或点击卡片来深入了解细节。
纸牌网格最重要的一点是几乎可以无限操作。网格的大小，间距和列数可以变化，并且卡的样式可以根据屏幕大小而变化（可以重新排列卡以适合任何屏幕）。这就是为什么卡片网格在响应式设计中表现如此出色的原因。
5.盒子
此布局具有一个较大的页眉宽度框和一些较小的框，每个框占据较大框的屏幕空间的一部分。较小的盒子数可以从2到5不等。每个框都可以是一个链接，可链接到更大，更复杂的页面。

6.特色图片
网站布局基于以下想法：在设计中使用图像是销售产品最快的方法。精选图片营造出与访客之间的情感联系-大而粗体的照片或物体插图表达出鲜明的印象，并给人留下深刻的第一印象。
结论
设计网站时，请务必记住内容永远是最重要的。该网站的主要目的仍然是发布易于消化的内容。无论你选择使用哪种网站布局，都必须选择一种能使你的内容脱颖而出的网站。

与网站怎么设计出来的相关的知识