- 浏览: 26898 次
- 性别:
- 来自: 郑州
最近访客 更多访客>>
最新评论
-
guiguzi83:
还有底下的圆形在IE下是方形,这个怎么实现
天猫商城JS效果制作 -
guiguzi83:
为什么把你的另存为页面就不行了呢?
天猫商城JS效果制作 -
xilie180:
我想问下前辈在哪家公司就职,前端待遇情况(看所属地是郑州,所以 ...
项目的质和量:西班牙语频道制作思路和规划
您可以狠狠地点击这里:世界工厂网首页预览版
网站结构:首页总体结构划分为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开发中这点是被严重忽视的。
发表评论
-
胡思乱想 打鱼晒网
2012-02-15 15:54 885其实一直想写一篇东西出来,但最近状态不好,我这个人过份的自由、 ... -
淘宝良无限页面交互
2012-02-15 15:35 791您可以狠狠地点击这里:淘宝良无限页面交互DEMO 前 ... -
纯代码蓝色理想的logo
2012-01-06 15:44 749您可以狠狠地点击这里:蓝色理想的logoDEMO ... -
项目的质和量:西班牙语频道制作思路和规划
2012-01-04 17:14 832您可以狠狠地点击这里 ... -
祝贺“房多多”网站低调上线
2011-11-29 10:27 754感谢前团队的照顾和培养,现在这个项目上线了,看到了心里非常高兴 ... -
CSS3:animation属性实例操作
2011-09-26 17:24 1650文章中的实例须在FireFox ... -
网页重构:公司网站小面积改版
2011-09-17 10:13 860公司网站首页要改版, ... -
CSS制作:开心网“发表观点”CSS实现
2011-09-13 14:56 1009中秋放假,淋漓小雨下 ... -
CSS3:wordpress读者墙
2011-08-29 10:45 788最近在制作一个企业站和制作一些广告效果,今天又在网上看到css ... -
论网易对联广告的效果展示
2011-08-25 10:02 941打开网易,你会发现网易网站的对联广告做的效果是:默认 ... -
项目制作流程:请勿野蛮施工
2011-08-16 15:38 841项目制作流程图: 项目是制做出来的,它有它自己的流程方式 ... -
css3:鼠标hover图片效果
2011-08-16 10:56 1411今天在网上看到的鼠标hover效果,当时就看的心痒痒,c ... -
css3:QQ衰表情
2011-08-16 10:39 987发现在聊天群里面,用这个表情的很多,最近一直也在了解CSS ... -
百度选车
2011-08-16 10:15 670百度选车频道上线,朋友推荐了这个效果,觉的蛮不错的,就想着 ... -
工作上面的一些积累
2011-07-25 10:29 598总结一下自己前端工作的一些工作经验和自己前期工作的规划:1、用 ... -
项目中的一些小技巧tips记录
2011-07-25 10:27 701项目中遇到的一些小技巧,记录下来: 对非a标签添加伪类 ... -
CSS 中的 :first-letter
2011-07-25 10:15 1007对CSS熟悉的人一般都会了解 :first-letter 这个 ... -
div+css 文本两端对齐的方法
2011-07-25 10:01 18281、先定义text-align:justify;2、添加 te ...
相关推荐
前端项目-github-api,围绕GitHub API的更高级别的包装器。
工厂车间-工厂车间系统-工厂车间系统源码-工厂车间管理系统-工厂车间管理系统java代码-工厂车间系统设计与实现-基于springboot的工厂车间系统-基于Web的工厂车间系统设计与实现-工厂车间网站-工厂车间网站代码-工厂...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
工厂车间-工厂车间系统-工厂车间系统源码-工厂车间管理系统-工厂车间管理系统java代码-工厂车间系统设计与实现-基于springboot的工厂车间系统-基于Web的工厂车间系统设计与实现-工厂车间网站-工厂车间网站代码-工厂...
SpringBoot项目博客系统-包含前台后台前端后端-适合作为Java学习的第一练手项目SpringBoot项目博客系统-包含前台后台前端后端-适合作为Java学习的第一练手项目SpringBoot项目博客系统-包含前台后台前端后端-适合作为...
前端项目-js-sha512,这是一个简单的sha-512、sha-384、sha-512/224、sha-512/256哈希函数,JavaScript支持UTF-8编码。
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
体育馆预约系统 - 前端 - 毕业设计 - layui.zip体育馆预约系统 - 前端 - 毕业设计 - layui.zip体育馆预约系统 - 前端 - 毕业设计 - layui.zip体育馆预约系统 - 前端 - 毕业设计 - layui.zip体育馆预约系统 - 前端 - ...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
前端效果--旋转雷达效果组件 背景前端效果--旋转雷达效果组件 背景前端效果--旋转雷达效果组件 背景前端效果--旋转雷达效果组件 背景前端效果--旋转雷达效果组件 背景前端效果--旋转雷达效果组件 背景前端效果--旋转...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
基于SpringBoot项目博客系统-包含前台后台前端后端-适合作为Java学习的第一练手项目,适合做课程设计或毕业设计代码 基于SpringBoot项目博客系统-包含前台后台前端后端-适合作为Java学习的第一练手项目,适合做课程...
字体前端字体-siyuansongti
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...
【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、JavaScript前端网页项目源码【Web网页设计制作-毕业设计期末大作业】HTML、CSS、...