网站内容设计(一个专题稿呢)

　　网站内容设计(一个专题稿呢)

　　一个话题是一种内容聚合，是常见文章的集合，呈现出的信息量大，特点鲜明，会让读者在浏览这些信息时有一个全面的了解。为了获得读者的信任和认可，在读者的认知中树立权威——百度百科，模板库的设计者也想做一个专门的页面，但是控制不住，没办法，或者做诚信企业网站模板吧。本文试图给出一个好主意，大家请继续阅读。

　　话题通常需要时效性，所以我们在做话题的时候首先要注意速度，那么如何才能更快的实现话题稿呢？下面就来详细说说吧。

　　一、 主题类型：

　　1、 中规中志（只改变了头部图片，内容样式没有改变），如下图：

　　2、 洒脱型（不仅头像换了，内容也更随意了），如下图：

　　3、 搭配和玩法类型（只有一张头像），如下图： 注：①

　　二、原则：

　　1、复用原则：

　　如上图所示，这个模块会出现在相机的四个季节，所以我们需要封装这个模块并保留它。常用模块进行分类，以备日后复用，节省日后工作量，提高工作效率。

　　2、 放弃原则：

　　尽可能使用 CSS3 技术。这样既可以避免使用过多的图片影响页面打开速度，也可以减少flash的开发。当然，这样做的缺点是页面上的CSS尺寸会比较大，低版本浏览器的显示效果会不好。好的

　　如上图，通过css的不同处理，高版本浏览器显示为左图，低版本浏览器显示为右图。

　　3、时间原则：

　　通常需求是一个系列，比如：春夏秋冬的微摄影，一二三年的微聊，年底的重大节日活动系列；

　　这就要求我们要有提前预判的能力，尽快与需求方沟通确认时间，尽快做好人员和技术储备。

　　三、 建设方案：

　　以上几类话题的制作流程大同小异，话题和产品都一样，大部分都是分块的，但话题的视觉冲击力更强，布局也更随意。

　　对于一般主题，构建步骤通常如下：

　　1、 规划分类：

　　规划：拿到设计稿后，从上到下浏览。当您浏览时，您可以对该页面进行初步计划。我们通常将其规划成一个网格，如下图所示：

　　分类：主题都是通过主题后端构建的。后端库提供了一些封装好的模块，所以先找出后端现有的模块，这些模块可以直接在后端编辑发布；

　　如下图：（大约20多个公共模块，包括：发布者、提要、图片列表（120、180）、添加关注、焦点图片、视频等）

　　2、模块构建：

　　挑出常用的之后，开始搭建“非常规”的模块。特殊模块是特定主题的特定内容。这部分需要页面工程师来完成；

　　制作模块的原则要求代码尽可能低，高内聚（把页面上的元素想象成相对独立但相互连接的小部分。设想这些小部分可以拖放到页面上的任何位置）页面的任何时间。影响其内部元素的正常运行）；模块css的编写原则要求本主题的特殊标识开头，例如：教师节-对应的网络域名为teacher，css最好以t或teacher开头，如.t_top{}或.teacher__top{ }，避免css命名冲突的风险；

　　构建主题时有一些重要的考虑因素（注：②），

　　3、测试交付：

　　模块搭建完成后，开始将模块拼凑成一个成型的页面，然后交付编辑器填写内容；完成的页面交给编辑器进行内容添加，页面交付后跟进，因为不是所有的编辑器都熟悉代码，所以要提前做好风险控制，比如：注释好，代码要精简。

　　4、在线维护：

　　编辑填写内容后，进行上线前的最后审核，优化细节，并与设计稿截图核对像素，无问题再上线；

　　解释：

　　注：①协同高效建设：

　　在很多情况下，设计师无法提供完整的设计草图进行调度，而只能提供一个标题图像。这就需要页面构建来辅助编辑快速完成一个话题的构建，并根据页眉图片调整页面背景色和内容区域的背景色。标题背景色和标题文字色、文字链接色、文字色等，通常都是基于之前设计师的设计理念，下面的色序不会偏离太多：

　　标题背景色>内容区背景色>页面背景色；

　　主链接颜色> 次链接颜色> 标题文字颜色；

　　文本颜色（文本颜色通常为灰色）。

　　基于以上概念，快速搭建的topic如下图所示：

　　注：②制作题目需要考虑的几点：

　　标题栏处理：

　　1），很多标题是可以复用的，这里要灵活一些，最好实现自适应宽度；

　　2），需要判断标题文字是否需要连续修改，如果需要连续修改，必须做成活字；

　　图像处理：

　　1），头像：

　　头图建议以jpg格式实现（注：②-①），

　　虽然原则上应该尽量控制图片的大小，但由于话题的周期和访问量的限制，再加上设计师的心血，头部图像不能受到质量的影响。通常头部图像的原理是Firework导出质量为80~90较好，Photoshop导出质量优于70~80。

　　一般情况下，一张在Photoshop70中不是特别高的图片质量大约相当于Firework85。

　　Photoshop80 的质量约等于 Firework90（取决于导出图像的大小）。

　　2），背景：

　　内容背景建议使用纯色，如果纯色不够，建议使用png作为背景；

　　3）、图标和按钮：

　　图标和按钮尽量使用css sprites技术，不仅可以减少图片数量，减少请求形式，也方便后续的统一管理。

　　图标、按钮避免gif，为什么不用gif（注：②-②），提倡实现png格式（注：②-③），

　　笔记：

　　②–①jpg 特点： jpg 优点：摄影作品或写实作品支持高级压缩，可以使用可变压缩比控制文件大小，支持隔行扫描（对于渐进式jpg文件）。广泛支持互联网标准。由于尺寸小，jpg被用作在万维网上存储和传输照片的格式；jpg 缺点：有损压缩会降低原创图像数据的质量。当您编辑并重新保存 jpg 文件时，该 jpg 会混合原创图片数据的质量并降低。这种下降是累积的。jpg 不适用于颜色较少、颜色相似的区域大、亮度差异明显的较简单的图片。

　　②-②gif 特点：流式读/写性能、逐次逼近显示、透明、无损压缩等。 gif独特的特点：一个gif文件中可以存放多张彩*敏*感*词*片，如果在一个文件中保存多张图片，图片数据为一一读出并显示在屏幕上，这是最简单的一种*敏*感*词*。gif的缺点：只能显示256色，如果颜色太多，显示效果会很差。

　　②-③png的特点：png保留了gif的特点，也有gif不具备的特点：支持真彩*敏*感*词*片，png缺点：不支持*敏*感*词*，ie6不支持真彩色透明。

　　四、总结：

　　当时间紧迫时，生产时间的黄金比例应该是：

　　策划分类：模块搭建：拼页：在线测试

　　1:4:1:2

　　假设：估计需要8个小时才能完成。最好的解决方案是模块分类1小时，构建4小时，拼页面1小时，测试2小时。前6小时后，页面可以交付给编辑器进行内容添加，内容可以在编辑器中添加。同步测试可以同时进行。

　　应用以上几点，简单和复杂的主题都可以轻松构建。

　　有时候理解题目会有一个错误的想法：题目是一样的，没人看，就可以处理了。事实上，事实并非如此。好的话题是营销的开始，是合作资源交流的入口；

　　一个话题的数据示例：感恩节活动：

　　话题包括一起吃喝玩乐，小话题，大欢乐，用心搭建，你觉得你还相信爱情！