原创网页设计

画师 朝颜みのる 原创作品...

SEO是方方面面的事，每一个细节都要把握好前端开发工程师不仅需要要跟视觉设计师、交互式设计师配合，完美还原设计图稿，编写兼容各大浏览器、加载速度快、用户体验好的页面。现在还需要跟SEO人员配合，调整页面的代码结构和标签。一些成熟的平台，在开发初期并没有考虑优化问题，所以做出来的页面，就算是效果很炫，功能很强，但是对搜索引擎非常的不友善。任何一个成熟的网站，后期页面都是动辄几百万的，到这个时候再来调整结构，既费时又费力，最怕的还是会影响到排名和收录。所以说与其在后期碰到问题再来调整，还不如把问题解决在源头。我本人也是从事前端开发工作的，下面把我工作过程中，积累的几个开发过程中就需要做好的SEO优化技巧，分享给大家。1、简化代码结构，更利于搜索引擎分析抓取有用内容：页面尽量采用DIV+CSS，当然，表格展现模式用table还是比div方便很多的;所有js、css采用外联方式，图片采用css精灵，减少请求次数。看下下面同样的内容，用div和talbe布局的代码比较，显而易见用div简便的多。2、重要内容优先加载(第一个链接最好是网站主关键词，不刻意要求)，可以用css来处理，索引一篇文章的长度也是有限制的，一定要把最重要的内容，优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证。3、每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。4、图片一定要添加alt属性，title属性可选：蜘蛛不认识图片上的内容，只能通过alt属性来判断，如果是商品列表页，所有商品都加了alt和title的话，容易造成堆砌关键词，所以我一般是只加alt属性。5、图片大小声明：如果图片大小不做定义的话，页面需要重新渲染，就会影响到加载速度。6、链接可根据需求添加title属性以及nofllow值;非特殊性链接，链接地址一定要写入herf属性，有些前端开发人员为了省事，直接用div加个click事件当链接，在视觉上和使用上确实是实现了链接效果，但是做过SEO优化的人员都知道，蜘蛛目前对于js的支持很差，基本无法读取里面的链接地址。所以说用click事件是绝对不允许的，特别是一些重要的导航链接。7、页面内容尽量不要做成flash、图片、视频，这些东西蜘蛛是抓不到的，就算是必须的，也要生成相应的静态页面。有很多企业站看着很炫，全站flash，老板看着是爽了，做SEO优化的人员就要抓狂了，全站没一个链接。8、除首页外别的页面最好要加上面包屑型导航，导航结构一定要清晰。9、做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面;2、蜘蛛友好，可以返回抓取其他页面。10、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。注意：内容为王的时代，还是要有价值输出作为最重要的依靠，切莫舍本逐波，打造自己的IP。

1、使用不合理的模板用模板的确是一件非常方便的事情。大型企业用模板确实说不过去，但是初创公司借助BootStrap做网站绝对是情有可原。使用类似Bootstrap模板来作为基础，借设计师之手针对品牌和企业气质稍加定制，其实是个很不错的主意，如果沟通良好，说不定最终能呈现出一个非常不错的网站，对于企业的产品与服务也是很不错的加成。但是仅仅只是套用模板而不予以调整和定制，你所遭遇最常见的问题是模板与品牌本身的视觉设计上无法达成一致，从LOGO使用的色彩，到品牌中独特的字体，都无法与网站构成较高的匹配度。不过如果你真的是在这方便也捉襟见肘的话，尽量挑选在各方面与品牌形象本身更接近的模板，将疏离感降到最低。2、使用默认外观和中文网站的情况不一样，英文网站使用多种多样的字体是一件很轻松的事情。如果你使用了Bootstrap、Wordpress 这样的工具来创建网站，而仅仅使用默认的设置，你愚弄不了任何人，大家一眼就会把你偷懒的事情看出来——连字体都是默认的Open Sans。用Wordpress 默认外观也是一样的道理。如果你不打算在网站视觉上和别人稍作区别的话，对品牌的伤害是显而易见的。当然，如果你能用好诸如Font Awesome 这样的字体和CSS工具，也有点铁成金的奇效。它能以增加图标库和样式的方式，让Bootstrap等各式各样的系统，拥有漂亮一致的视觉语言。毫无疑问，这些被精心制作过的原创的图标，自然是比系统内置的通用图标好。如果你有自己的创意和点子，为什么不去寻找更有个性，更符合你的品牌调性的图标、插画和字体呢?也许时间成本、实现成本并没有你想象中那么高。3、排版对比度的问题字体的排版的问题之大，远非绝大多数非设计人员想象的那么简单。文字和字母看起来很简单，但是它们可以成就好设计，也可以毁掉整个版面。在许多“自制”的网页中，最常见的问题是标题和正文字体之间的对比度较低，整个页面的信息层级不明显。仅仅只是调整字体大小并不足以构成对比，标题字体的字重应该比正文更大，也就是说字体应该更粗，确保它们够显眼，更容易被眼睛注意到。4、使用深色背景虽然背景处于网页的最底层，但是它实际上是占据网站面积最大的部分，在用户看到网页的时候会第一时间感受到，精心选择背景色彩很重要。作为一个久经验证的法则，黑色色调的网站，除开真正专业的设计师做出来的，其他的基本都没法看。使用白色作为基本的背景色是非常安全的，不过多数的设计师会选择浅灰色打底。值得注意的是，网站的灰度越高，黑色的文字的可阅读性越差，为了确保网站的可阅读性，灰度最好保持在15%以下。5、多级行为召唤Call To Action， 通常被称为行为召唤，一般指的是引导用户做你想让他们做的事情，注册帐号，点击按钮，等等。在网站页面中，主要的行为召唤应只有一个主要的，要知道选择强迫症患者比你想象中的多很多，如果没有主要的、单一的行为召唤，用户会感到困惑，并需要较长的时间来做决定，再采取行动。当然，还有一部分用户会直接关闭页面走人。将所有内容都摆到页面上，和什么都不放是一样的效果。移除多余的部分，筛选出最重要的东西摆上去，让用户做最重要的事情。无论是注册还是打开购买链接，把最具有吸引力和最有意义的按钮摆在最显眼的位置上，专注于最主要的事情吧。6、对齐和留白的问题留白，这个我们在说过，很多次了，在这里在说一下，对齐和留白。说留白和间距是一门艺术也不为过。留出足够的空间，又不让视觉元素周围的间距太多以至于过于稀疏，这是设计中最难控制的部分之一。优设有太多的文章介绍留白和排版的技巧，但若你不想记那么多复杂的技巧，给你推荐一个简单有效的方案：第一，要确保所有元素都合理而得体地组合到了一起，第二，在这组元素之外给出足够的留白。7、不专业的文案要写好文案并不是一件简单的事情。但是不论如何，你需要通过网站将你需要表达的内容呈现出来，特别是当你是想通过网站卖东西的时候。在这种情形下，你需要让你的文案易于被理解，精心校对，确保内容的正确性和准确性，不要有拼写错误。我经常在网上看到一些表述极为尴尬的文案，这样的网站会给人一种网站尚处于原型阶段的粗糙感。在网站上线前，找个有相关经验的朋友浏览一下全站是个不错的选择。8、可读性的问题如果无法让人看清，再优秀文案都无法拯救你的业务。许多细小的细节会影响网站文本的阅读性，直接或者间接地影响你精心准备的内容，让它们难以被读者流畅地感知到。要解决可读性问题，值得注意的问题很多。行高过低会让文字难于被阅读，太小的字体对于许多用户都是障碍，阴影、斜体等效果也常常会影响可读性(尤其是中文，繁体中文这种情况更严重)，色彩对比度没控制好更是灾难性的。这其中有些问题虽然算不得太严重，对于多数用户也许不会造成太多障碍，但是这会让用户对你的专业性产生怀疑。9、一致性的问题你应该始终保持产品和品牌的一致性，从品牌设计、网站设计到社交媒体、包装和广告，都应该具备品牌识别度。不过在实现这些远大的目标之前，先退一步来看，你有必要让网站本身先与自身保持一致性。你的网站字体的样式是否保持了一致?LOGO上的品牌用色与网站的配色方案是否对应?网站的各个元素的阴影样式是完全一样，还是“看起来很相似”?通常情况下，你只需要仔细清理你的CSS样式表，就可以解决许多一致性的问题。10、已访问过的内容用不同颜色显示如果网站不能显示出用户已经察看过的内容，用户在浏览网页时便会多出很多麻烦。相反，如果用户访问过的内容都能被清晰地标出，他们便不会错误地多次点击同一个链接了。对用户来说，一个网页上往往存在不止一个链接，如果没有特殊的方式显示已访问过的内容的话，他们很难记住哪些链接是自己已经点击过的，哪些没有。针对这个问题，可以使用不同的颜色来区分已访问和未访问的内容。已访问内容的显示颜色与未访问内容的颜色应该接近但又略有不同。例如，用紫色来标注已访问的内容不失为一种可行的办法，因为与蓝黑色相比较，紫色给人一种“消退”的感觉，用户会有“这个链接我已经点击过了”的印象。11、填写表格时光标自动显示在输入区域当用户看到在屏幕上出现的表格时，他们的第一反应通常是“现在需要从鼠标切换到键盘了”。如果此时能将光标显示在第一个需要填写的区域内，用户操作起来就会感到更加便利。这样的话，他们就省却了“移动鼠标–点击输入框”这一步骤，而可以直接在表格内填写内容了。谁不希望填写表格时更简便一些呢?12、为图标添加自动提示问题在网站中，图标可以优雅而简洁地将某个特定的动作信息传达给用户。但是要牢记，不是所有用户都能立刻明白图标所代表的意义。因此，当用户将鼠标置于图标之上时，随即显示关于这一图标所代表的功能就显得尤为必要。有了这个细节，网站的新用户即便不明白图标的含义，也不会因胡乱点击而导致错误了。13、反潮流设计不管你喜欢与否，拟物化设计已经离我们远去了。浓重的阴影和大跨度的渐变色的使用，在目前的网页设计中已然不多见。相比于在3D特效中寻求创意，不妨拥抱扁平化的设计准则。

1.网站模板问题网站上线前，一定要先将网站模板设计好，各种网页细节问题，也要在本地测试中弄好，不要上线后还修改网页样式，当然如果你对网页设计不是很熟悉，用的是别人的模板，这时你只要注意一些细节问题就好了，毕竟网站是以内容为皇的，当然不是说不重视网站模板，一个好的模板可能会带来好的用户体验，对留住用户，网站回头率的提高有很大的帮助。所以能够设计好的优秀的模板，当然很重要，如果不能就以内容为主。2.网站标题问题新手网站上线后，喜欢频繁的修改网站标题和描述，这个也是百度对新站收录慢的主要原因。所以在上线前，一定要给自己的网站一个很好的定位，要确定好自己网站的标题，经过研究，对于网站标题，如果你能想出一个新颖的词汇，那么百度蜘蛛会过多的关注你，会给你更快的收录，当然新颖不是说生僻，不要搞些生僻难懂的词汇，网站优化是为了给用户体验的，不是为了讨好搜索引擎的，即使你对搜索引擎友好但是你的用户体验不佳（这里主要指用户的pv量和停留时间）排名迟早是要掉的，所以在以用户体验为主的前提下，尽量想个好点的标题，可以自己用百度指数查一下，标题最好要是一句通顺的话，这样用户也能记住，对搜索引擎也好。3.内链建设问题网站内链建设，如果你的网站页面的内链很少，那对于新站来说是很难快速收录的，因为内链少说明你的网站内容少，内容少那么用户体验肯定就很差，用户体验差，那么百度蜘蛛就可能认为你的网站是垃圾网站，迟迟不给收录，或者说只是象征性的收录首页，所以内链建设还是和用户体验有关，这里知道用户体验的重要性了吧！4.广告问题新站上线就放广告，这个是不利于网站优化的，会降低搜索引擎的友好度的，所以对于新站，尽量不要放广告，在已经布局好的广告位上放一些图片，使网站整体看上去好看一点，特别是弹窗广告，如果你是新站，一上线就放弹窗广告，那么基本上你的网站就被搜索引擎判死刑了，因为百度新算法，石榴算法是专门针对弹窗广告的，当然新站一般来说流量肯定不大，如果你放弹窗广告来盈利，只要两种可能，一种是你有很好的正当流量来源，一种是你准备刷流量，这两种对网站的长远发展都是不好的，所以想长远发展的，就好不要走此捷径。5.内容采集问题新站上线后就开始采集文章，这对于百度来说，此类网站就是垃圾网站，根本不会收录，即使收录了一段时间后也会被k，我想你肯定会说，我伪原创啊，我曾今看过一个网站，网站内容全部几乎是采集的，但是他的排名很好，那他是怎么做到啊，我研究了一下他采集的文章，基本上没有可读性，但是就是排名好，经过一番查找，最后发现他采集的文章里放了一些不相干的内容，将这些内容的字体颜色和文章的背景颜色搞成一样的白色，这样用户浏览文章的时候就看不到了，也不影响用户体验，又能很好的排名。我想大多数人会认为这是一个很好的方法，确实我观察了这个网站很长的时间，排名都没有掉，而且还在逐步上升，但是有一点就是这个网站的pv很低，几乎和IP一样，这说明什么呢，他做网站是为了迎合搜索引擎的口味，而不是注重用户体验，而且事实表明网站的用户体验很差，我相信此类网站是走不远的，用户很容易流失。这里还是说到了用户体验，可想而知一切都是围绕用户体验转的。 6.主机空间问题没有一个稳定的空间很难做好百度排名，很多新手站长，在买空间时考虑最多的是价格问题，希望便宜而且空间又大，我相信便宜没好货的道理，不要贪图小便宜，不然真会让你后悔莫及的，我见过几个网站本来排名很好的，权重也高，但是因为空间问题，一段时间打不开了，最好被百度降权了，虽然最后随着空间的稳定，权重还是恢复了，但是对于新站来说会降低搜索引擎的友好度的。所以空间的选择很重要，一定不要贪图小便宜。7.关于301权重定向问题一般情况下，域名分为主域名和二级域名，例如xxx.com和www.xxx.com前者是主域名，后者是二级域名，根据习惯，有的人喜欢不带www的，而有的人喜欢带www的，因此为了不使权重分散和品牌的打造，就需要301重定向了，这里就不讲述具体的方法了，对于新手，切记一定要在上线后立即做好301重定向，不要等你的网站有了就好的排名后在做301重定向，这样会导致你的网站排名 会停止上升，重要的是一定要选好你要用的域名，不要反复重定向。 提醒大家要养成定期检查301重定向是否还有效，特别是主机升级后，本站曾经出现过这种问题，主机升级后，301重定向尽然掉了，还好本站是新站，不用过于担心。8.关于网站url搜索引擎的提交问题对于新站，url的提交很重要，什么时候提交，提交多少次，这个也比较重要，在新站上线一段时间，在你的网站内容更新有规律的情况下，在提交url，不要在你的网站更新没有规律的时候提交，当蜘蛛来的时候你的网站没有内容，会降低搜索引擎友好度的。更新文章最好要养成规律，然后再提交 url，最后新手要养成看网站日志的习惯，分析百度蜘蛛的IP段和爬取网站的次数和规律，对网站优化有很大的帮助。参考地址：http://www.wzyunying.com/post/34.html

创新不是说出来的，是要靠自己做出来的。所用的知识都是那些。就看你怎么应用罢了。 我知道，可是呢个网页我可以做出来，就是没有思路，怎么排版布局，做的呢不太一样 布局是自己设计，要完成这个设计还是很简单的。 可是现在没有思路，不知道怎么设计，你指导下啊， 可是现在没有思路，不知道怎么设计，你指导下啊， 要想有创新，别人指导不了。 好吧，我想想，呢你能不能告诉我卡姿兰官网上的呢些小字是怎么弄的，需要什么代码？？？ 没有发现什么小字。直接输出就可以了。 右上角有小字的，呢要在哪里输入啊？？ 代码中 我知道，是那一行代码？？在html里，还是css里 html,哪一行不知道你是说什么小字

上联：心态，形态，神态，有状态，高姿态下联：龚行，麴行，苦行，琵琶行，长歌行

如果你在正规的公司就明白区别了。一个原创网站的开发需要经过可行性调研-策划-原创设计-切图-程序、JS等开发嵌套-调试等多个步骤。设计师的工作主要是负责策划和设计,其中策划包括需要哪些栏目,布局排版还有各个模块表现形式,（比如新闻是图片配文字的模式还是列表模式等等）然后就是各个页面之间的关联逻辑性。设计就是把这些东西设计出来,需要flash还需要制作一下对应的flash。美工带一个美字可不表示他的美术功底很深,对于要求比较低的网站设计美工可以应付,比如素材拼凑和psd模板修改等等,但是美工还需要懂一些js嵌套和丰富的切图知识。正规的开发公司都是设计师做好设计图后交给美工转化成html页面然后再发给程序员。只不过国内绝大多数网站开发公司都是半吊子胡闹美工和设计师根本区分不了。简单的说如果开发一个专业的原创网站,必须用设计师,如果只是一般应付的网站美工就可以应付了

有个豆瓣网站，那里的素材挺多的，都是原创，也有分类，可以去看下

做的很好，德盾独创的咬合式防撬钢结构，能提高30倍防撬性能，拥有超强防锯、防撞、防撬能力，原创设计的外观也很吸引人眼球。