文韬互联:网站设计之详情页及代码减肥

文韬互联:网站设计之详情页及代码减肥

前言:

前面文韬互联和大家对网站设计的导航栏目划分进行了初步的探讨,由于时间比较匆忙,可能谈的没有那么深入,今天和大家沟通的主题是"网站设计之详情页设计及代码减肥",里面涉及到两方面,第一是图片设计,第二是代码减肥,可能对于很多人来讲有点麻烦,这属于两个范围了,毕竟懂代码的人,未必会设计;会设计的人,未必懂代码。

(正文开始,请君阅读)

网站设计,从页面层级来讲,包括首页、列表页以及详情页等;从结构上来看,就是头部、尾部以及中间的部分。在网站制作过程中,目前区分结构的方法比较简单,看页面就是从上到下,从左到右;当你右键查看源代码时,统一从上到下,就可以看到整个网站的结构和布局了。

如何为网站进行瘦身?

网站制作的前面,是网站设计与切片,当然,网站设计只是考虑逻辑与美观,至于网站效果的实现则是由切片后的代码实现的。如果在网站制作过程中,能为以后作进一步的考虑的话,提前规划好网站瘦身,就可以从源代码这里开始考虑了。

以前的网站制作,一般多以table表格为主,很少会涉及到div+css,但随着web发展的速度,到现在html5都已经很时兴了,table表格就逐步显得落伍了。所以,我们记住的第一点就是网站的制作中,优先以div+css进行布局。

大家都知道.css文件是网站的样式文件,有些朋友喜欢一个网站调用很多样式文件,也有一些朋友喜欢将所有的样式放一个.css文件里。实际上,当我们使用百度网站测速工具时,系统会从很多层面进行分析,比如.css、.js、图片等文件的加载速度出发,提供一个意见:将不同的.css文件放在一个.css文件里,避免资源调用的浪费。

同时,代码的制作要规范化。该有的代码必须有,冗余的代码则必须清除掉,过多的标签给页面增加了负担,比如一个页面只有500KB,可能就因为有多而无用的标签则增加了页面的大小。再者,将冗余的注释代码也去掉。一眼就能看清楚的结构,就无须过多地注释了。

再者,尽量将.js代码放置在页面的最下面,一般.js是页面效果的显示,为了提高网站的访问速度,可以先完全加载出来后,再来显示效果。

这里对代码的设置不做过多的讲解,比如分布式、负载均衡等,只是一个理论的概念,具体操作以后我们再细谈。

图片轮播的代码怎么设置?

在前面的文章中,我们介绍过网站为了显得高端大气上档次,有时候会为导航栏通栏显示,图片也会设置成大banner。在以前的图片轮播的代码中,一般以flash或frame框架显示,文韬互联在2012年接触的一个网站,图片轮播就是以flash显示的。但发展至今,早已经取消了flash来显示图片的设置。

取消的原因是随着互联网技术的发展,搜索引擎依旧不认识flash要表达什么,同时浏览器在加载渲染页面时,更喜欢最新的技术——HTML5。我们现在在设计图片的过程中,有两条标准需要遵循:图片质量要好,要清晰,同时图片要表达的主题要突出。我们看到网站的图片时,要能接受并且明白它要表达的意思。

现在绝大部分网页中,图片的轮播都会有上一页和下一页的提示和操作。可以让我们选择观看不同的图片。同时,不同的图片,可能链接不同的内容,这个也是可以设置的。

详情页面该如何布局设置?

一般我们会把内容页当作最后一层页面,也就是说在这一层页面中,就没有比它更深一层的内容显示了。那么,在这一层页面中,我们有几个地方需要考虑:

增加关键词之间的的关联性

增加页面上下页的关联性

扩大用户访问的粘性

怎么理解增加关键词之间的关联性呢?比如当前用户访问的页面的关键词是A时,一个网站的内容很多,会有其他的页面的关键词也是A,假设这两篇文章有一定的关联,可以适当的推荐这篇文章给用户访问,以此来提高用户的访问体验。调用代码有几种,其一为增加tag标签区域,让用户点击tag标签,可以看到凡是网站中设置了关键词为A的文章都有哪些;同时,在页面中,可以增加关键词相同或相似的文章显示,一般可以调用8篇比较合适。

怎么增加页面上下也的关联性呢?可以通过设置代码的上一页、下一页,让前端显示的内容中,能调用到上一篇文章和下一篇文章;如果下一篇没有文章了,那么自动回到当前文章所属的栏目列表中。

在扩大用户访问的粘性的调用中,以上两个操作是一种,同时,我们可以增加其他文章调用,比如一个月里点击量最大的文章前10的文章调用、评论文章的前10调用等等。能有利于用户获取信息以及增加他的访问体验的操作,都是可以尝试而且是有必要的。我们终是是要明白一点,搜索引擎存在的目的应该是将能满足用户需求的优质内容优先推荐给用户的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,407评论 25 707
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • 网络 应用程序如何连接互联网 基于HTTP协议 HTTP:超文本传输协议(Hyper - Text Markup ...
    pingui阅读 263评论 0 0
  • “在雨夜的公交车上,你坐在靠窗的位置,我挨着你。你透过车窗看外面的世界五彩斑斓,我也随着你的目光,假装看车窗上排列...
    光与影_smile阅读 2,685评论 0 0