干货贴：手把手教您如何做一个响应式网站- A5创业网
干货贴：手把手教您如何做一个响应式网站- A5创业网
随着Html5、CSS3等建站技术的发展，使用手机访问网站的用户也越来越多，响应式网站设计在这样的大环境下应运而生。但它一出生仿佛就自带光环，以其同时适应多种设备的属性迅速"走红"，受到不少公司和企业的青睐。前面小飞也在一些文章中讨论过什么是响应式设计，响应式设计中的一些常见误区和认识盲点，响应式设计的潮流趋势等。但不少读者反映虽然对响应式网站设计有了一定的了解，但自己做网站时还是有些不知如何下手，所以小飞今天就带大家一起看看响应式网站究竟应该怎么做。不用小飞多说，大家都知道响应式设计最大的一个特点，就是灵活性，不管是网站布局、图片视频还是文本信息都可以轻松适应不同大小的设备，下面几点可都是围绕这个特点展开的。快来看看吧!设置关键断点320 - 720 - 1024
首先将网站的整体布局设置成响应式的。响应式网站的布局一般是通过@media query的方式改变的，在哪种宽度下改变布局，这就是我们常说的断点或响应点。由于响应式网站需要同时适应PC、Pad、手机等，我们可以先设置3个关键断点，分别针对不同类型的设备。不过前面我们在《真实的谎言--关于响应式设计的六个认识误区》也聊过，响应式网站是面向所有用户的，而不是只针对某一个设备的用户，不同设备的屏幕大小常有出入，在设置关键断点时，我们还应该结合站点的内容，注重网站内容信息的有效传递。一般来说，设置这3个断点就足够了。但小飞也见过设置了10个断点的大神卖弄站。其实，高端响应式网站中，断点的设置没有一定的规则，需要我们可以根据自身的需求(如希望网站兼顾哪些平台)以及用户群体的情况(真实需求、规模、浏览器分辨率分布等)，因站制宜，合理的进行设规划和实现。建议：根据各个不同的设备尺寸一个个的设置断点，这项工程简直太耗时了。小飞教你一招，其实我们查看大家平时常用的一些前端框架的源代码，了解它们的断点值并借鉴。但如果你在建站技术、写代码这方面完全是个小白，起飞页自助建站平台就是一个很好的选择，无需任何专业技术轻松做网站，网站代建或是专业定制等服务应有尽有。优先设计手机端
在构建好网站的信息框架、准备好各项元素和决定好设计风格后，我们最好先根据手机端进行设计，这是因为手机等移动端屏幕更小，更能有效筛选出网站最重要的元素。一旦移动端的问题解决了，其他设备上的设计问题也会简单的多。先建立好手机端的框架，设置好断点值，也可以给后续更大屏幕做一个参考。再说，首先面向PC端，再向手机端优化，这个由繁入简的过程是比较困难的，很多站长觉得这个元素也重要，那个元素也不能缺，常常会在筛减元素的过程中会摇摆不定。建议：避免使用大图。对于移动用户来说，能够在触屏设备良好的显示的图片是最佳选择。不要忽视网站上的各项细节，网站的导航菜单也要记得设置成智能、可缩放的。在做好面向手机端的响应式网站之后，也要记得在真实的设备上进行测试，确认无问题之后再进行其他设备的设计。扩大目标点击区域(按钮或超链接)与PC端上经常使用鼠标不同，在手机等触屏设备上用户更习惯于手势操作，直接用手进行点击。研究表明成人食指的平均宽度是1.6-2.0cm，这相当于45-57px。大约57px宽的点击区域才能够满足用户点击时的舒适度需求，所以记得扩大行为引导按钮或超链接的点击区域，让它们对手指更加友好，优化用户体验。著名的费茨定律也指出，使用指点设备到达一个目标的时间，与当前设备位置和目标位置的距离和目标大小有关。简单点来说，在网站中，如果点击区域越小，用户在浏览获取页面时花费的时间就越长，这会大大降低用户的转化率。建议：虽然小飞建议按钮或超链接的点击区域尽量扩大，最好超过57px，但是这还要结合网站的实际情况。点击区域也是越大越好，我们可以测量整个屏幕的大小，合理布局按钮或超链接的点击区域大小。另外，让按钮更有特色也能引发用户的互动，进而可以提高用户的转化率，就像下图中蓝色按钮的波浪效果就能充分吸引用户的注意力。使用响应式图片或视频
图片在网站中举足轻重。在响应式网站中应用图片的核心问题在于如何确保图片灵活适应不同屏幕的设备，还不会出现失真、模糊不清等情况。因此千万不要使用固定宽度的图片，固定宽度的图片在适应不同大小的屏幕时常会出现显示不全等问题。如何做好图片的响应式?我们可以给图片设置相关属性，或者使用支持响应式的框架(比如Bootstrap、CSS Sprites等)，用响应式图片class名来控制(例如class="img-responsive")。视频也是网站中重要的营销工具之一，不少站长越来越频繁地在网页中使用视频。在响应式网站中运用视频要比图片更加复杂。这不仅仅关乎视频尺寸、大小的问题，如果没有合理设置，视频的播放按钮等元素还会出现拉伸或不对称的问题。如何让视频根据屏幕宽度自动缩放?我们可以插入插件如FitVids(jQuery插件)，或使用容器来嵌入代码，并指定子元素的绝对位置。建议：如果服务器上有足够的空间，网站上的图片和视频最好以原始的尺寸呈现。但在小屏幕上，如果空间实在不够或是图片或视频极大影响了网站的加载速度，我们对它们进行适当的剪裁，保证原本的效果。还有，在网站中使用SVG矢量图也是一个不错的选择。与位图不同，SVG矢量图根据不同的屏幕分辨率只改变图片的路径而不会影响像素，因此它们可以任意缩放显示，不破坏任何清晰度或细节。注重文本排版
文本排版是一个网站的重要组成部分。网站的可读性是头等大事，优秀的文本排版有助于网站信息的传递，还能与用户形成良好的互动。将网站分成不同的层级，最重要的内容放在网站的第一层级，第二、第三层级放相关信息、细节等，层次清晰，按优先顺序展开;精心选择一种合适的字体(有衬线字体易读，无衬线字体醒目)，一个网站中最好不要使用超过三种不同的字体;选择合适的字体大小，确保它在不同的而屏幕上都能得到良好的展示;规划行高和段落间距、留白等，以保持页面外观的整洁优雅。建议：文本要简单易懂，这点可以通过颜色对比和易读的字体实现，不过色彩的对比不能太弱(灰色文字在浅灰色背景上)，也不能太刺眼(红色文字在绿色背景上)。多使用纯文本，这是因为文本在根据设备屏幕进行缩放时不易出现图片的失真现象。突出显示文章的标题，标题至少应该是内容文字的1.6倍大，且在版式中占据中心位置，吸引人的标题能让用户点击进入浏览，还有可能在页面上停留更长时间。重视视觉层次结构
除了文字排版以外，视觉层次结构在优化网站整体布局、与用户互动方面也有着不可忽视的作用。视觉层次结构最重要的功能就在于它可以帮助网站建立一个焦点，引导用户首先注意什么地方，然后了解哪些细节，又或是最后浏览某个区块。怎样可以构建有效的视觉层次结构?色彩当然是其中一员"大将"。我们可以用高比对度的颜色(如冷暖色)搭配，创造极强的视觉冲击力，突出核心内容，或者是以柔和的色调、相近的颜色进行视觉上的衔接，具体如何设计完全取决于我们想要网站达成什么样的目的。建议：视觉层次结构最终还是要服务于网站内容的，所以太过花哨的导航菜单、滑动效果或是不必要的flash动画千万不要放在网站的前列，实在必要时更应该删除。在谈到创造有效的视觉层次结构时，极简主义的设计潮流很可取。简洁大方的设计有助于突出网站的中心内容，如Slogan，行为引导按钮等，它还能在多个不同的视窗上给用户提供一致、直观的体验，极简也意味着最少的干扰，这会带来更高的用户转化率。还有，卡片式的用户界面也很有效，这是因为矩形的卡片(不管是图片还是文本)在适应不同大小的屏幕时更加简单，响应式更易实现。响应式设计正在不断向前发展，究竟哪种方法可以做出最完美的响应式网站，大家还没有形成统一的答案。但是以上建站的这几个建议都是小飞结合丰富的建站实践总结出来的，希望对大家有一定的帮助。起飞页自助建站平台（http://www.qifeiye.com/?t_wd=a5）提供了众多响应式网站模板，采用了先进的建站技术，无需创建代码，即可轻松获得属于自己的网站。快来起飞页自助建站平台做一个响应式网站吧!
展开
当下的个人站长都用哪些模板做网站呢？ - A5创业网
每一名站长都有属于自己的网站，即使现在很少打理，但至少曾经日思夜想的为网站换链接做过内容，也付出过很多，无论你今天网站状况是怎么样的，我想已不再那么重要，今天就让我们一起梳理一下，那些年我们使用过的网站模板吧!做站长，我们都曾想过，好好做一个网站，把网站做好我们就可以卖广告，卖链接，做一些网盟广告之类的赚点小钱，站长圈经常有人爆料说谁谁的网站现在BR多少多少?每日流量多少多少?做网盟的呢!每天的广告收入多少!网盟广告是以日为单位的，今日预算收入，昨日、一周、一月等等，数字很可人，远远超过站长去一些公司做SEO的工作收入，SEO工作又苦又累一个月拿着两千来块钱，好一点能拿到三四千，还没有人家网盟广告一天的收入多呢?有谁不想多挣钱呢?看到网盟这么赚钱，我相信每一个不安于平庸的SEOer都会“想入非非”的。于是我们开始了模版建站——SEO赚钱之旅!网站想要赚钱，任何一个模板都是可以的，只是有适不适宜之分，像一些企业模板就不太适合，而像一些分类信息，资讯行网站模板就非常适合用来赚钱。
DEDE(织梦)，这款模板我想大家应该都非常熟悉吧，对于小编来说也是非常熟悉的，这也是小编第一款拿来赚钱的模板，同时也是现在非常流行的模板之一，这款模板操作要比其他一些模板稍麻烦些，主要是因为模板内容较多，后台需要控制很多地方，而且有很多的插件，这可能是这款模板的缺点，但同时也是他的优点，时间积累一长操作一熟练就会发现，这款模板确实在很多方面表现优异，功能也特别的强大，相比一些WP，帝国，ZBLOG限制要小得多。当然，任何一款模板都有它的优缺点，下面我们也来依次介绍WP，帝国，ZBLOG这三款模板。
WP，WP是个人网站中个人博客使用最多的网站模板，WP模板非常符合现代人的阅读习惯，而且WP主要是以人的阅读体验来做的，无论是在图片，文字还是网页布局上面，都添加了人的因素，随着现在搜索引擎越发的强调所谓的用户体验，WP的的优势将会越加的明显，前段时间百度专门为WP开发的Wordpress链接提交插件也可以看出百度对WP的态度，既然百度专门为WP开发链接提交插件，这也说明WP这款模板在一些功能上面也是不太完善的。上面也说了，WP主要考虑的人的阅读习惯，这在关键词排名上面占了很大的优势，不过如果想用此模板赚钱，目前来说最主要的方式就是网盟推广，而网盟推广就会有碍于人的搜索阅读，所以鱼与熊掌不可兼得也!帝国，听这个名字就感到好吊的样子，确实帝国就是大型网站模板，他不像WP与DEDE那样针对个人与中小型网站，如果一个大型网站在没有独立建站的能力以及基础那么帝国将是非常不错的选择。但是，这里面是说是一个大型网站，一般我对大型网站的理解是百度权重非常高，这里的百度权重不是BR多少多少，而是网页质量，百度信任度，如果非常高的话，就不需要担心，但如果不是而是要从一个新站、小站慢慢做大做强，这里可能会遇到一些麻烦，帝国省略了很多的SEO细节，这在SEO优化方面就会不如DEDE与WP。不过在用户体验感方面，我觉得还是WP>帝国>DEDE，帝国还将是一款不错的网站模板。
ZBLOG，ZBLOG模板从字面意义上就知道这是属于个人博客，相较于WP个人博客，ZBLOG的出现要早很多，是很原始的博客模板，页面现在看来可能有点难看，拿我来比吧，很早之前就想用zblog做一个个人博客网站，模板选了多少套，愣是没有一个人合适的，感觉好难看啊!不过ZBLOG也是非常实用的，简单，明了，想要查看那一天的博文内容，只要一查找就能找到，很是方面，页面也可以设置tags等标签，对以后的SEO优化也是很有帮助的。不过ZBLOG也许真是快成了“老古董了”我们还是需要调整我们的模板建设方向，现在的新浪博客在很多方面和ZBLOG有相似的地方，这样更加剧了ZBLOG劣势地位，在日益追求特色的今天，保持传统的blog风格可能显得有点尴尬，但是ZBLOG在SEO行业也是有很深的影响力的，在SEO行业做了很多年的资深SEOer们有很多也是用的ZBLOG模板，网站模板的更换对SEO来说不是一件普通的工作，所以很多人还一直保留着，避免更换模版给网站带来的伤害。站长常用的网站也不仅仅指这些，像DZ动力，PHPCMS等，更有ECSHOP，CMSEASY，SDCMS等等都是站长日常容易接触到的网站模板，做任何一款网站都有对应的网站模板，也有我们选择它的理由，但有一点是不变的，那就是我们始终是站长。本文作者：吾诺瀚卓，更多资讯请浏览www.unohacha.com/news1.php，转载请注明文章署名以及来源，谢谢!
展开
用模板的站怎么才能更好被收录的经验- A5创业网
如果您已经是SEO的高手了，请漏过此文章吧，对您来说，看到这些会笑话偶的
如果此文章对您有所帮助，请顶下帖子
大家说这里是软文也好，AD也罢，只是希望大家看后感觉有点帮助的就行
如果您在其他论坛上看到一样的帖子，原因一，那是我写的，原因二，别人COPY偶的，因为这些绝对是我原创
先说一下使用CMS模板建站的的问题(下面所说的爬虫，就是指搜索机器人，也称搜索蜘蛛，只是偶喜欢叫他爬虫)这个CMS太多了，我就拿使用MAX建电影站的为例，为了避免大家说是广告，我尽量不出现我网站的玉米，大家要看看站的话，就在偶的签名上找吧.使用MAX的程序，使用最多的应该是官方带的模板吧，或者大家是下的模板.这样，使大家的站千篇一律，爬爬虫看到了当然会厌烦，不收录也没商量了
曾经在论坛上看到一个帖子，是百度高层对为什么有的站不被百度收录给的答复(具体写的什么，大家搜搜吧，我不记得了)，当中就提到了模板的问题，他是建议大家不要使用模板，.或最可能的修改模板，可是
对很多象偶一样的菜鸟这谈何容易呢(只回用人家的).但是又想被人家收录怎么办呢.我昨天晚上琢磨了半夜，大家想啊，爬虫再聪明，他毕竟不是人脑，我们模板不会大面积的修改，但是小改改还是没问题的，例如改改文字.(这里可能说的不清楚，从新编辑说明一下)宁波建材网www.nbjc8.com这个文字改就简单了.例如大家的网站的导航都是:首页动作片喜剧片爱情片科幻片恐怖片剧情片动画片综艺片国产剧港台剧欧美剧日韩剧
那咱们就把他修改一下，改成:首页动作电影喜剧影视爱情影视科幻影视恐怖影视剧情影视动画影视综艺影视国产影视港台影视欧美影视日韩影视，当然，这里只是一个举例，具体的改法，大家根据自己的站定，能该的地方很多，最需要改那里，大家可以模拟一下抓取
看一下搜索引擎到底读取了什么内容，好改的就改一下，这样一来就和别的站有了不少的区别，被判为雷同的可能性会大大的降低.大家要改就改的有新意一点(有点难度).我们把这些文字改掉，或许爬虫就不认为是和别的站重复的内容(这些是我自己的想法，还没通过验证，个人想法)，或许他收录起来就有兴趣了.....在说一下网站名称的问题
给网站起一个好名字有多重要不需要说了吧..网站的名称还有另外一个作用.有的同学在论坛上喊，为什么百度就收录我一个首页.......既然百度就收录了你的首页.为什么不好好利用这个首
页..给网站起一个好名字，例如有一个老兄给网站的名字是:好电影...其实这个名称也就是一个关键字，在搜索好电影的也大有人在，虽然目的不是在找你，可是他的确找到你了，大家可以搜一
下好电影那位老兄的站就在前两位，就这个词，他自己说一天给他带来500多的IP.假如你给你的站起个名字叫:功夫之王电影站，巧了，下个月出了个电影很热门，他叫功夫之王.大伙都在
搜索功夫之王.电影没找到，但找到了你的站，你发拉，说不定那一天就能给你带来个几万IP.起名字的方法:首先他是一个满热门的词，(难找)，这样才有人去搜他，其次这个词别人没再用(更难)，你第一个用了，就是你先上去......难度不小，不过很有效果..没难度大家都做到了，都做到就没
偶的文章的用武之地了，呵呵
最后说一下robots.txt这个东西也是我前几天看到的，对于大虾来说，他不陌生，可是对于偶之流的菜鸟，才只是刚接触他.他到底是最什么的呢，大家去搜索一下吧，直接搜索robots.txt ，不说这个，因为这个也许大家都已经知道了，只是我孤陋寡闻而已，呵呵，还有，这个东西几句话我也说不清楚
不过这个东西的确很有用，不知道的同学建议去搜索看一下.
展开
声明：本文来源于网络，如有侵权请联系客服删除
