[一对一讲什么] 之 什么叫切图?
今天有人在我公众号里留言,问我“什么叫切图?是不是按着图片切。。。”?我没有直接回复他,而是决定把这个问题拿到这里用一篇文章来回答。
严格来讲,切图,是网页制作的一部分;网页制作,是前端开发的一部分。
切图,从操作形式上,是用图片编辑软件,对UI设计图的一种图片编辑操作,就是“图片另存为”。另存为什么呢?就是另存为网页中可以使用的图片。
那这图片,该切成什么样呢?
我不打算把下面的文章写成教程,因为切图的教程已经太多了。咱们这样,随便在网上找一张UI设计图,然后我结合我的工作经验,来讲一讲切图的过程。
随便百度“网页设计图”,就它了,这是缩略图,
原图网址:http://www.doooor.com/thread-19535-1.html
从最上往下看,
画红框的地方,就是title,为什么叫title?大家在切图之前第一件事就是确定前端规划,否则命名就会很low。
具体的如何制定适合自己的前端开发规范,我会在“一对一视频教学”中给予详细讲解。
这里就以这个title为例来分析一下如何切图:
它是一个左中右的一行三列结构,大家注意,它的左侧LOGO和右侧的三个share按钮,都是位置固定的。但中间这个红色的东西,它的位置极有可能是会移动的。
因为这东西只是个UI图,没有详细的需求讲解,我们不知道在实际操作中,这个红色块的具体功能,但看它的位置,是在一个按钮的上面且遮盖了部分按钮,而且这个红块很像一个可以展开的菜单样的东西。
更重要的一点在于,title容器的下面是nav导航条容器,而title和nav是二个独立的DIV容器。但这个红块,身在title中,却遮盖了nav中的button,这意味着它很有可能不在title容器中,而是独立于title这个DIV层之上。
为什么会这样呢?
因为title这种东西,一般情况下都是:
.title{width:100%;height:30px;overflow:hidden;}
而红块如果在title之中,那么它就弹出不了菜单,因为overflow:hidden了
那么首先,
(1)这个红色按钮,它必须是绝对定位的;
(2)它不在title和nav二个DIV任何一个之中;
(3)它的位置用CSS绝对定位 + 负百分比固定位置;
(4)看它的设计,是外一个红块,内一个淡红块。那么二个DIV足矣,无需图片。
写了这么多,只是说明了一个title和nav,和一个menuButton的功能分析过程。拿到UI图,先要分析需求,需求不明就要从设计分析功能,搞懂了功能和需求之后,才能开始切图。
所以,切图绝对不是简单的按着图片的印儿,往下切那么简单。
篇幅所限就不多写了,这个UI图下面的分析都与此类似。
这方面详细的内容,我肯定会在一以一的视频教学中,详细的讲解的。这是基础中的基础。如果由着我讲,我能讲上一天,这得多少字才能写完啊,至少我是没这个耐心写这么多字。
所以,就讲解一个部分,剩下的大家自己体会吧。“静态页面练习小组”里的同学,你们也要从功能,从需求的角度去看待网页设计图。
其实,网页设计图,它不是一张好看的图。它其实是一个网站的工程图纸。
- Java实现Http的Post、Get、代理访问请求
- MySQL(一)之MySQL简介与安装
- 无人值守,检测程序正常运行,遇故障则重启服务
- JS魔法堂:jsDeferred源码剖析
- JavaSE(八)之集合概述
- 浅谈PHP开发与Java开发的优劣势,还不知道学习方向的可以来看看
- KVM+Qemu+Libvirt实战
- 内核级虚拟化技术
- tomcat配置ROOT目录和多站点
- IntelliJ IDEA使用(一)基本设置与类、方法模板设置
- JS魔法堂:从void 0 === undefined说起
- Maven(三)在Eclipse中使用Maven与Maven坐标
- Nginx多站点设置及负载均衡
- Maven(二)Maven项目的创建(命令、myeclipse)及生命周期
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kibana: 如何使用 Search Bar
- 「PHP」以nginx、php-cgi为例,把nginx、php-cgi安装为Windows系统服务
- 聊聊dubbo-go的GenericFilter
- 知新 | koa框架入门到熟练第二章
- JVM学习二
- 微信小程序对接云开发录音文件识别nodejs sdk
- 利用python读取WORD文档中的创建者信息
- LeetCode-2.两数相加 使用链表加法实现
- Spring学习(2):Spring Bean管理(上)
- 聊聊dubbo-go的TpsLimitFilter
- spring,springBoot事件
- LeetCode-3.无重复字符的最长子串 利用一个整形数组+ASCII码实现滑动窗口
- 算法不想学(二): 堆排序和top k
- 利用python读取EXCEL文档中的创建者信息
- R语言工具变量与两阶段最小二乘法