网页切片

前端必须掌握的技能,切片,虽然说难也不难,简单也确实是挺简单的,当时我看过的教程,虽然里面的东西还不规范,不过作为一个整体的了解还是不错的。对于一些规范之类还是按照团队的要求做吧,也不是绝对的。

十天学会DIV+CSS http://www.aa25.cn(在写文章的时候上不了,我百度了一个chm下载地址http://vdisk.weibo.com/s/uiL0Ty-gTwfb

当时还找了一个关于切片的,这个还是可以稍微瞧瞧。

来源于网络,我也找不到出处了,就直接贴了
其实标准的网制作完成的工作实际是:psd to html,一般情况下,我们会拿到美工的psd,这时候不同的人会有不同的做法:

1.打开fireworks将图片切割导出为html。

2.直接在dreamweaver之类的工具去拖拉布局,导入相关的图片,flash资源。

3.先在ps中完成切图后,在文本编辑器中看着效果图一步步的制作。

以上是大多被采用的方法,但都不好:

第一种方法最为不好,这样的代码根本不具维护性和可读性。

第二种方法也不好,代码难免会有冗余,做出来的东西基本需要排查一遍。

第三种方法也不好,因为你需要看效果图一点点的拼,也就是说写html标签的时候,你在不断的假设这块要怎么去显示。

正确的做法是:

1.拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css。

2.写完之后在各个浏览器运行之后确保大体定位都没有问题。

3.书写总体css,这里的css只负责大块的定位及样式。

4.切出需要的图片资源,在写好的框架中一点点的去构造,不断的调试,最终为成品。

5.最后,为自己的代码添加注释,在css,html中都要合适的为自己的代码添加注释。

要想做出能灵活切换皮肤,让css主导表现,还有很多要注意的地方,但大体的流程就是这样的,当然我们一开始不能直接就做到先写html,但起码要有这个意识,循序渐进。。。

补充一点,其实上述作者说不好,也不一定是不用的(在只有30分钟要出一张活动页面的时候,大家都会毫不犹豫使用第一种···直接table切图吧。

以下主要我还是围绕着上述的chm的实例进行描述,前面的基础知识请自己衡量。

chm教程使用dw进行开发,由于我面试说使用dw进行开发,被鄙视之后,我再也无使用过了。别问我为什么,你需要和面试官讨论人生。

教程那里是建立站点,其实就是建立文件夹目录之类(一般我习惯这样建立,而且在自己本地服务器环境进行开发,以避免 本地静态页面和线上页面出现错位,还有部分线上js不执行之类的问题。

----/html文件

----css/css文件

----js/js文件

---images/图片文件

---images/temp/临时图片文件 (基本上线就不用了 很多产品,新闻图之类)

好吧 开始正式开始,

一般先把页面的主体框架搭好,也和chm一样

这样的好处 主要是为了 编写里面的模块的时候 不影响整体结构,而不同浏览器的下 也不会影响这个主体框架,基本每个浏览器渲染里面模块的时候,显示可能有点不太一点,但是主体布局是不会改变。后期内部修改起来也比较方便,因为不会影响外部。(当然我觉得这样比较合理而已,有更好有望提出

至于什么html代码我就不贴了,还有ps切图还是fw的切图,这些基本软件操作。

主体结构编写完毕之后,才对内部的模块进行编写(对于标签的语义化和结构进行选择,这个也不细说了。

补充说明事项:

一般只有 header nav aside footer article 这些我标签才有可能会加id控制样式,对于教程当中的使用id 控制样式 基本是禁止的,id的基本是预留给js进行操作调用

有关css的写法之类 请观看 之前的随笔  [转载]CSS 创作指南(Beta)(css规范)http://www.cnblogs.com/moki/p/4362961.html

js相关请不要按照教程,编写为内联的,请外部引进,为啥要这样做,与浏览器渲染有关,这个就不在这里细说。

chm教程后面还出现一些服务器之类的东西,其实本来就在服务器环境进行开发, 关于这些请自行理解,我个人见解是,前端是必须要懂后端的,前后分离还有一些功能性能方法选择,都使得自己不得不去接触这些东西。

最后一些开发的调试工具,ietest(ie兼容) firebug(js调试)

至于ietest还是说一下,基本还是很少会去做兼容ie6了,ie7的话,ie自带的debug就可以测试了,ie6的话虚拟机的结果准确,所以ietest 自己考虑吧。

转载请保留地址 谢谢

时间: 2024-10-10 18:50:40

网页切片的相关文章

[Html/Css]网页切片

网页切片 前端必须掌握的技能,切片,虽然说难也不难,简单也确实是挺简单的,当时我看过的教程,虽然里面的东西还不规范,不过作为一个整体的了解还是不错的.对于一些规范之类还是按照团队的要求做吧,也不是绝对的.十天学会DIV+CSS http://www.aa25.cn(在写文章的时候上不了,我百度了一个chm下载地址http://vdisk.weibo.com/s/uiL0Ty-gTwfb)当时还找了一个关于切片的,这个还是可以稍微瞧瞧.来源于网络,我也找不到出处了,就直接贴了其实标准的网制作完成的

前端之Photoshop切片

什么是切片 ?     (Photoshop中的切片) 切片:将图片切成几部分,一片一片往上传,这样上传的速度比较快.每个切片作为一个独立的文件传输,文件中包含切片自己的设置.颜色调板.链接.翻转效果及动画效果. 切片工具:主要是用来将大图片分解为几张小图片,这个功能用在网页中较多,因为现在的网页中图文并茂,也正因如此所须的时间就比较长,为了不让浏览网页的人等待时间太长,所以他们将图片切成几个小的来组成. 切片是网页制作过程中非常重要的一个步骤,往往切片的正确与否会影响着网页的后期制作.一般是用

中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版) PDF扫描版

中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版)内容丰富.实用,讲解循序渐进,每章都安排有丰富的应用实例.练习实例和知识问答,在每一页的下方还提供了与所讲解知识相关的操作技巧.注意事项和经验之谈,尽可能多地解决学习中的疑问,以满足不同学习阶段的读者对学习内容的不同要求. 中文版Dreamweaver+Flash+Photoshop网页制作从入门到精通(CS4版)适合于从未接触过网页制作的初级读者,以及有一定网页制作基础但想灵活使用dreamweaver

定一个小目标(续)

12点前,写完睡了 今天主要绘制一些形状,并赋予它们立体感:材质和色彩方面还没有涉及到. inkscape的网页切片看了一点,也动手操作了下,有点麻烦.可能是我操作的问题,明天找点关于切片和自动化脚本的资料.

使用风讯做新闻类网站

在帮老师做网站的时候,大多利用风讯后台制作.对于菜鸟的鄙人来说,其功能确实强大,不用再担心自己不会写代码勒. 使用这种方法做网站也有一段时间勒,但是每次做的时候总是会出现问题,其中最大的问题就是网页切片的问题.在此小结一下: 网页切片时,分三个部分切,这样在用DW制作时才顺利,不然浏览网页你会看见一段一段的空白间隙. 在排版布局上面,由于切片保留的web格式,因而自然就会在dw里面生成table标签(其实不是很like这个标签但是很方便啊,)不用在自己写css样式布局勒.当然在table里面也会

高级UI交互设计师就业班(签约就业)

联系人:杨老师联系手机:15618824377 联系电话:021-60907382联系QQ:1253379395一.第一阶段(美学设计与软件技能)1.商务办公:windows.word.excel.ppt办公应用:办公软件在专业中的应用2.美术设计基础:设计素描.水粉.速写的原理及实践,投影.视图.透视,灯光表现,户外写生3.美术设计提高:设计素描.水粉提高课程.光和影的写实手法.审美观念的提高.色彩搭配的提高,配色原理的提高.4.手绘图标:二维剪影图标.三维写实图标案例实训,了解创意在设计中的

献给即将想从事前端工作的你们

时间过得很快,出来实习工作快两个月了,在这里,想跟大家分享自己的一些体会与经验. 还没出来工作之前,在学校就一直很想能快点出来工作,总以为工作能多学到很多在学校里学不到的东西.也确实如此,工作是可以学到很多,但我还是很想跟那些要从事IT的你们说,还没工作之前还是多学点东西,把基础打好.不要总想着出来工作后再学,到时你们会发现其实真的很吃力,压力会很大,公司是做事的地方,它每天都有你要完成的任务,每天有一定的工作量,也不要总想着工作中有人会一步步教你怎么做,上司可能只会跟你说一下大概的思路,他想你

用ps切片快速制作静态网页

利用ps快速的制作静态网页 步骤: 1.在ps中打开一个网页模板,利用切片工具进行剪裁 2存储方式是:存储为web所用格式 3设置存储像素1366.GIF格式 4保存到文件夹中以html+图像 的格式 5打开html,打开方式为DW方式打开 6:根据网页在进行对其修改

Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法

首先,制作图象切片(以一张图片为例子) 一.选择“切片”工具,在图像上拖动以分割图像(例如:一张图像切割2次就形成3个切片)切片后如下图 二.设置切片选项(如大小.目标链接.图片说明等等):选择“切片选择”工具,在要设置的图像切片上双击,在弹出的面板进行具体设置(如图): 三.储存切片为网页:文件——保存为WEB和设备所用格式一般选择gif图片格式,图片边缘的背景色设置为“无”,点击“储存”然后,保存类型“HTML和图像”.如果要保存为DIV+CSS布局,则设置“其它”此时会弹出进一步设置面板,