关于门户网站焦点图设计的一些总结
所属分类:
网页制作 / 应用技巧
阅读数:
292
收藏 0赞 0分享
焦点图,集图片、文字、动态交互效果于一体的内容呈现方式,在吸引眼球(所谓焦点)、页面排版优化等等诸多方面具有十分重要的作用。这点在内容至上的门户型网站中尤为重要。
在这个过程中积累了些经验想和大家分享下,套子比较适用于像搜狐、新浪这些大门户网站,对于个人网站、商务网站不一定都是对的,另当别论~~
1,越傻瓜越好(结合第3点)
编辑们比较恨套html。特别地,对于时效性高而且频繁更新的页面,让编辑们直接在焦点图的html上套内容是最致命的。
2,即插即用,防止冲突
类名(css class)别怕长,前缀、后缀什么的没事加加看,另类点更好。
焦点图功能相对独立,很多时候都是页面发布N天了,然后突然要换一种焦点图,如果焦点图的类名过于通俗(比如什么title,head,main啊之类),套到页面中时有发生莫名其妙的样式冲突就杯具了。
3,可视化设计器
设计一个焦点图的设计器,编辑们可以利用设计器填填数据,一键迅速生成焦点图代码。
4,样式一定要和结构、行为分离
编辑可以方便地改改字体色、背景色等等
5,尽量用html模板技术
使结构(html)和行为(js逻辑)也分离。可以考虑jquery官方的模板插件
6,对于超大门户型网站(如搜狐新浪)来说,SEO的优先级在很多时候比内容底。
为什么?因为这种类型的网站已经是人人皆知了不用搜的了。
这一点决定一个事实:可以利用JS动态产生焦点图Html代码。尽管这种类型的HTML代码是SEO不友好的!
最后一句话:对于大型门户型网站的焦点图,利用json数据结合html模板技术用js动态生成焦点图,将一大堆焦点图相关的HTML代码放到页面里面,编辑们会恨,影响网站内容的更新效率!
CSS中浏览器对尺寸和宽高解释差异的解决方法
不同的浏览器对margin、padding、height、width 等属性的解释有很大的偏差。有时我们发现同样的两列布局,在不同的浏览器中两列长短不一,类似的情况太多了,如此困扰大家的麻烦,如何解决?
收藏 0赞 0分享
网页变灰的笔记 细节问题处理
grayscale.js这个文件是用来兼容各个浏览器的,在一般情况下,使用它绝对不会有问题,但是在实际的操作中,还是遇到了一些麻烦。
收藏 0赞 0分享
提高网站访问速度的六种方法
以下6种优化方法都是前端的,前端优化的意义在于减少http请求,减少网站前端程序组成的体积。
收藏 0赞 0分享
新鲜出炉的有用图标集25组 国外下载
恰当的图标(ICON)能使网站更具活力 曾几何时,现在的网站图标大同小异,我们的眼睛早已见惯不惊。于是,这里收集了25套专业设计的全新的图标集,希望对你有用!
收藏 0赞 0分享
新手建站教程 十天学会做网站
十天学会做网站教程采用最通俗易懂的语言、从最基本的开始,带领大家开始建站。教程由许耀鹏历时半年时间写成。是非常好的新手建站入门教程。
收藏 0赞 0分享
新手建站入门教程 域名的解析与绑定
昨天我们讲到了建立一个属于自己的网站需要的条件和工具,里面讲到首先需要注册一个属于自己的域名,和需要购买一个虚拟主机。(详情请看:新手建站第一帖:建站需要的条件和工具)
收藏 0赞 0分享
新手建站入门教程④:如何绑定子目录
去买空间的时候,我想很多朋友都已经注意到了,有的空间介绍上会有类似于“支持绑定1个子目录”、“赠送1个子目录”等词。那么这些介绍是什么意思呢?
收藏 0赞 0分享
查看更多