V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
avatasia
V2EX  ›  问与答

请问现在网页从效果图切片怎么产生纯div的页面

  •  
  •   avatasia · 2011-07-13 11:47:31 +08:00 · 4328 次点击
    这是一个创建于 4887 天前的主题,其中的信息可能已经有所发展或是发生改变。
    接手个项目,页面div,table混编,css,js文件遍地都是,图片一坨一坨的,我是完美主义者,想问下前端这块该怎么做,用什么工具?
    12 条回复    1970-01-01 08:00:00 +08:00
    holystrike
        1
    holystrike  
       2011-07-13 11:49:49 +08:00
    重做比改还来得快
    whitegerry
        2
    whitegerry  
       2011-07-13 12:15:43 +08:00
    纯div? 犯了根本的概念性错误吧。。
    panlilu
        3
    panlilu  
       2011-07-13 12:56:30 +08:00
    table该用的时候就得用。比如表单的布局什么的~
    什么标签都有自己的作用。
    工具的话找个顺手的文本编辑器人工敲吧。。要是追求点效率配合使用zencoding
    Hyperion
        4
    Hyperion  
       2011-07-13 13:04:33 +08:00
    不要吝啬dreamwear了, 戳开来用吧... 文本编辑器只适合结构良好的东西...

    不管是大范围还是局部, 切片这种做法我觉得很愚蠢...
    avatasia
        5
    avatasia  
    OP
       2011-07-13 13:19:10 +08:00
    那从效果图到实际页面,这个流程怎么做? 难道记录每个元件的尺寸位置,然后自己在css里写?css的盒子模型很蛋疼的啊。我看了g+等很多网站,貌似都是纯div,没table的。table我觉的就是省事,直接,但是页面代码看起来很愁人。
    whitegerry
        6
    whitegerry  
       2011-07-13 13:30:17 +08:00
    @avatasia 你没理解到吧,table是用在二维数据列表上的,如果你觉得网页标准是渣那么用table来布局也没谁管得着,盒模型就那么点东西没什么蛋疼的地方。。。

    先按照效果图把xhtml架构写出来,这个过程你可以整体到局部也可以局部到整体,涉及到按钮、背景和其他图片可以先切出来备用或者代码写到这部分的时候再切都可以,这个流程貌似也没什么说头。
    avatasia
        7
    avatasia  
    OP
       2011-07-13 14:19:12 +08:00
    @whitegerry 那请问这样子出来的页面是不是跟原效果图就有所出入,怎么保证原汁原味,还是我的要求太奢侈了?
    istef
        8
    istef  
       2011-07-13 14:22:08 +08:00
    @avatasia 不介意生成的代码很烂可以考虑直接用 photoshop 的切片工具,保存成 web 时同时生成 html,最后就会得到一个和效果图一模一样,然后代码被所有前端唾弃的页面。。。。
    Paranoid
        9
    Paranoid  
       2011-07-13 14:27:05 +08:00
    google : from psd to html 有一本书书名就这个。
    whitegerry
        10
    whitegerry  
       2011-07-13 14:35:26 +08:00
    @avatasia 是否原汁原味就要看你的xhtml结构和css质量了。ps导出来的切片页面我记得都是绝对定位,而且内容填充要考虑的东西太多,可用性几乎没有。
    whitegerry
        11
    whitegerry  
       2011-07-13 14:36:45 +08:00
    @avatasia 不知道你xhtml+css是否有经验,有经验的话大概不会纠结这些问题,如果没有经验。。。
    krazy
        12
    krazy  
       2011-07-13 18:30:00 +08:00
    先把html结构写好,再写CSS样式。从header,content,footer一部分一部分的写,处理好兼容就行了吧。
    切图的话,切图的时候记一下需要的尺寸,背景能平铺的就平铺。小图标太多就用css sprite拼一下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3474 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 94ms · UTC 11:00 · PVG 19:00 · LAX 03:00 · JFK 06:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.