html播放切片,[Html/Css]网页切片

简介这篇文章主要介绍了[Html/Css]网页切片以及相关的经验技巧,文章约2269字,浏览量461,点赞数4,值得参考!

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

十天学会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一样

aa382f7c40b9551be215797a8725f827.png

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

至于什么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 自己考虑吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/571712.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

时间转换python_Python 日期与时间转换的方法

问题 你需要执行简单的时间转换,比如天到秒,小时到分钟等的转换。 解决方案 为了执行不同时间单位的转换和计算,请使用 datetime 模块。 比如,为了表示一个时间段,可以创建一个 timedelta 实例,就像下面这样…

设计模式学习总结(一)——设计原则与UML统一建模语言

目录 一、概要1.1、设计模式定义1.2、设计模式分类1.3、设计模式书籍二、UML统一建模语言2.1、UML分类2.2、类图2.2.1、关联2.2.2、聚合/组合2.2.3、依赖2.2.4、泛化(继承)三、设计原则2.1、单一职责原则(SRP)2.2、开闭原则&#…

计算机与生命科学专业排名,2019软科世界一流学科排名发布,54个专业TOP10牛校榜单全给你...

原标题:2019软科世界一流学科排名发布,54个专业TOP10牛校榜单全给你软科26日正式发布2019“软科世界一流学科排名”(Shanghai Rankings Global Ranking of Academic Subjects)。2019年排名覆盖54个学科,涉及理学、工学、生命科学、医学和社会…

python入门心得_一天入门 Python 的一些心得

1. 前言 好久没写文了。最近在搞一些好玩的技术用到了 Python 。我原以为要花些时日,谁知道第一天入门之后便没有再刻意地去学习它了。这里就写写其中的一些关键点吧。如果我去学一门语言不是因为它火了而是我用到它了。曾经闲着没事干的时候把 Kotlin 、Vue、React…

git 创建tag , 查看tag , 删除tag

2157 git tag  //查看tag2158 git tag test_tag c809ddbf83939a89659e51dc2a5fe183af384233    //在某个commit 上打tag2159 git tag ... 2169 git push origin test_tag    //!!!本地tag推送到线上 ... 2180 git tag -d test_tag        //本地删除tag…

太原计算机专业专科大学排名,太原【计算机学校】排名

太原【计算机学校】排名,资助政策1、根据国家助学金管理办法相关规定:凡被我校正式录取并注册学籍的学生在校期间均可以享受国家**费补助1900元/年,享受三年。创新科技中等专业学校排名, 有45个本科专业,16个专科专业, 3个专业硕士…

python print format

挺有用 //test.py 1 print %.*f %(1, 13.987) 2 print %.*f %(2, 13.987) 3 print p%8d %(123) 4 print p%-8d %(123) 5 print %d %(1) 6 print % d %2 7 print %#o %(17) 8 print %#x %(17) 9 print %#X %(29) 10 print %02d %(3) 11 print % 02d %(3) 12 print %%%d %(4) 13 …

python中正则表达式的默认匹配方式为_Python模式匹配与正则表达式

1.1 不用正则表达式来匹配文本 假设我希望在一个字符串中找到电话号码,电话号码的格式为三个数字,一个短横线,四个数字,一个短横线,四个数字 比如:131-3310-5293和132-2670-9864 def IsTruePhoneNumber(con…

计算机网络应用是学什么类型的,计算机网路中服务类型及应用

服务(service)这个极普通的术语在计算机网络中无疑是一个极重要的概念。在网络体系结构中,服务就是网络中各层向其相邻上层提供的一组操作,是相邻两层之间的界面。由于网络分层结构中的单向依赖关系,使得网络中相邻层之间的界面也是单向性的&…

oschina git服务, 如何生成并部署ssh key

1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxxxxxxx.com" # Generating public/private rsa key pair... # 三次回车即可生成 ssh key 查看你的 public key,并把他添加到码云(Gitee.com) SSH k…

需求调研报告模板_2020年工业软管行业深度市场调研及投资策略建议报告-液体化学品增加对其需求...

(原标题:液体化学品市场规模增加 对工业软管需求量变大)工业软管,又称为工业胶管。主要用于各行业各设备作软体连接的一种软管。相比民用软管,工业作业环境更复杂、更恶劣、设备对输送管的要求也更苛刻,因此…

计算机基础理论知识的论文,计算机基础毕业论文

计算机基础毕业论文随着科学技术的不断发展,计算机也开始人类在正常生活当中所应用的一个高新的技术。下面是小编整理的计算机基础毕业论文,欢迎来参考!摘要:大学进行计算机教学能够对学生的创新能力进行培养,还能够使…

配置TomCat环境变量

在完成jdk的配置后进行 配置方法: ①安装tomcat ②我的电脑--属性--高级系统设置--环境变量 ③创建CATALINA_HOME变量 ④然后编辑 path 环境变量引入CATALINA_HOME变量值 ⑤测试,打开浏览器输入localhost:8080 环境变量写法:  第…

hyperledger fabric_鼎诚鬼才|超级账本入门(四):HYPERLEDGER 权限管理

权限管理权限管理机制是 hyperledger fabric 项目的一大特色。下面给出使用权限管理的一个应用案例。启动集群首先现在相关镜像。$ docker pull yeasy/hyperledger:latest $ docker tag yeasy/hyperledger:latest hyperledger/fabric-baseimage:latest $ docker pull yeasy/hyp…

用计算机表白的数字,用数字表白

用数字表白2018-09-11组句:83848520920910851314——怕生怕死怕我爱你,就爱你,就要你怕我一生一世 584,5682177778,12234,1798,76868,587129955,829475,5201314. —— 我发誓,我想陪你一起去吹吹风,要让爱相随&#xf…

Python基础检测:20171105

第一周的预习结束了 效果并不理想,最后的检测也是有个别同学表现还可以.最后一次检测,除了依旧不是放在一个文件里,文件也没有标注作者从而导致我没办法一一回复外,有些问题写的不好意外.基本没什么毛病,摔! 本次问题是以小故事的形式展开并串联的,并没有什么特殊的意思.本人不…

python爬音乐网站_用 Python 爬取 QQ 音乐全部歌曲

前景介绍 最近小伙伴们听歌的兴趣大涨,网抑云综合症已经遍布各地。 咱们再来抬高一波QQ音乐的热度吧。 土豪充绿钻 和 刷永久绿钻的除外(me) 爬它 目标:https://y.qq.com/portal/singer_list.html 任务:将A到Z的歌手以及全部页数的歌存到本地…

计算机基础职教云答案,计算机基础课程答案

【单选题】在Windows中,【AltTab】组合键的作用是( )【单选题】在Windows中,选择多个连续的文件或文件夹,应首先选择第一个文件或文件夹,然后按住( )键,单击最后一个文件或文件夹【单选题】在Windows 资源管理器中&…

8.String、StringBuffer、enum枚举

1.字符串相关类 1)string类代表不可变的字符系列。 2)stringBuffer,Buffer就是缓冲区,代表的是可变的字符系列。 这可变和不可变的是怎么理解呢? 如图,不是a的字符系列改变了,只是 开辟了一份新的内存,然后重新把a指向…

nacos启动_nacos微服务注册中心

nacos主要可作为微服务架构中 动态服务发现、服务配置、服务元数据及流量管理快速使用方法:(k8s集群内)1.下载包,并解压放到服务器,准备用dockerfile打包镜像FROM 192.168.0.200:5000/hifm-nacos:2.0.0 ADD startup.sh…