世界工厂首页前端制作 - 首页分解图

您可以狠狠地点击这里：世界工厂网首页预览版

 

网站结构：首页总体结构划分为9 个独立层来控制表现( 共用头部、页眉、导航、热点栏目、3 个主体层、合作伙伴、页底) 。前期规划，如何让栏目的移植性更好，在制作的时候，把width 层和padding border 层分开，在以前用到一个div 的，现在变成两个div ，这样的嵌套，在改变外层宽度的时侯，内层的内边距不变，加大栏目的适用性。交互效果，尽量不影响页面的宽度和高度。合理掌握h1-h6 p strong em small b(html5 使用 <b> 标签定义文本中更重要的部分)html 标签语义化页面，减少嵌套的结构层，代码行数越少体积就越小，想办法减少网页代码的行数。

 

新团队的磨合中，每个模块我都添加有注释，不管JS 、后端都能清晰的明白栏目的结构，减少项目的BUG ，增加团队的工作效率。

 

 

页面 HTML 声明，开始向 HTML5 转型，虽然这次没有运用到更多的 HTML 标签，是为了减少这次改版的日期，在以后的时间里，首页的会向 HTML5 标签进行过渡 ( 可参考淘宝、阿里页面 ) 。

 

浏览器默认样式格式化。在字体的选择，我着重规划的是在 Windows 、 MAC OS X 、 LINUX 系统下，文字如何在选择不同的默认字体。

 

 

公用头部层，采用左右结构来布局，用户登陆前后所显示的 html 标签，都有注释说明。

网站的LOGO是img标签的加载，并做出优化，在加载不上图片的时侯，会显示下面的H1和Small标签里的文字，默认图片覆盖文字，并在img上面添加height和width参数，即使图片暂时无法显示，页面上也会预留空位，继续加载后面的内容。对后期的维护，不用img标签，换成其它的SWF或整个背景的替换，也不用修改html代码和css样式表，减少后期的操作。取除a标签的虚线，减少视觉的影响。

 

首页导航独立层制作，导航内容属于页面重点内容，抛弃li标签，运用h2标签来表明它的重要性和身份。H2左浮动样式，为后期的添加和修改做好铺垫，删除和增加，不影响整体的布局，减少后期的维护成本。

 

这次在左侧菜单和鼠标触发三角形，都有旋转的样式，满足高级浏览器的视觉，在IE下则是箭头的切换。提升高端用户的体验效果，照顾低端用户的功能需求，循环渐进、预留退路。

 

最新动态栏目，当是第一条信息和最后一条信息的时侯，A标签加载on-none next-none类，提醒用户不能操作，和已到最后或最始。

 

 用户登陆前后的html标签，添加A标签的title内容，提醒用户当前操作的说明(title文字需要修改)。

 

    产品目录，增加鼠标操作行为，让用户随时明白当前操作的内容。

 

“工业品”“原材料”这样的标题，是用文字和图片来表现选择了很久，最后决定还是用图片来表现，符合设计师在各个浏览器和操作系统下显示的标准性，在制作的时侯没有用背景加载，而是用 img 标签来实现。

 

由于浏览器渲染时认为 img 为内容，而 background 只是修饰，所以在加载时，浏览器会先加载 img 图片，而最后才加载 background 的图片。浏览器这样认为，从逻辑上来讲是对的，如果 background 在导航中仅仅只是修饰作用还好，如果像此例般，描述性文字是存在于图片中，继而让浏览者面长时间对空白等待，这就不可接受了。

 

弊端：由于按钮使用的是图片，在禁用 CSS 或 WAP 下浏览，浏览者就会因为图片没有进行过定位的整张 Sprite 图片而感到迷惑。当然，在通常情况下这种方法所带来的性能优化与所付出的代价相比是值得的。 ( 参考： http://www.cnblogs.com/cat3/archive/2011/06/17/2083243.htm )

 

把栏目进行标准化统一，规划相同内容，减少重复样式，减小样式内容，减轻后期维护。

html/css 开发来说，应该可以快速的套用模式，快速的把伪 css 转成产品级的 css ，产出质量平均，风格一致，高度可维护的 html 标签。

 

合作伙伴栏目，标题采用 H4 来表现，内容采用无序列表 li 标签，设置宽高，定义超出隐藏 overflow:hidden;

整体栏目没有设置高度，可自行添加删除。

 

页底栏目，旗下平台(H5)、关于世界工厂网(H6)进行页面结构，考虑页底全站共用，如何把它制作的更加优化，从结构和图片进行整合，优化html标签，整合备案图片，并把图片和文字分离，增加鼠标交互效果，设置居中对齐，后期的添加和删除不受影响。

结语：

    团队开发项目，要让每个成员都知道对方在做什么，了解每个人的工作模式和内容，只有你了解上个环节和下个环节的内容，才会清楚自己的价值。了解你配合人员的困难，思考如何让他工作轻松，团队中的成员工作都轻松，你手里的工作才会更加轻松，自己的价值会体现的更大，这是一个共赢的局面，也是一个团队的氛围，是值的我们去思考的。

前端开发的价值等同于传统工业制造工艺，同样的设计不同的工艺价值是完全不同的，WEB开发中这点是被严重忽视的。