前端切图+网页排版的注意事项和经验分享
现在在学校里面,培训机构里面都有很多课程是前端切图这一方面的,简单来说就是学习div+css网页排版。有很多人经过这一轮的学习之后就发现自己对排版这一方面非常的熟悉甚至说自己的div+css的高手。其实真正说要懂得一个网页排版需要注意的一些问题是什么呢?是不是在电脑上面看到自己排版出来的页面就真的是一个成功的网页了吗?下面我说一下我自己在网页排版上面会注意的一些事情:
一、使用样式的种类和名字的规范
id和class应该如何使用
在我们使用div+css排版的时候,每一个div我们都会给他一个样式,而样式有两种一种是id一种是class。有时候无论我们使用哪一种作为标志都一样可以实现页面的css样式控制。但是为什么会出现id和class这两种呢?
其实在一个网页里面我们可以做一个比喻:body我们可以认为是一个学校,id我们可以认为是一个班级,class我们可以认为是一个人。那么在同一个学校里面,班级是不能重复的而我们每一个人的名字有可能是同名的。所以在一个网页里面,一个id只能出现一次,一个class可以出现多次。而id的权限比class的权限要高,所以我们可以把一些不需要复制重复的div使用id来表示把一些可以重复用到的样式使用class来表示。例如一个网页只有一个头部,中部,底部。所以这三个部分我们可以使用id。有一些博客中间部分有分为左右,这一些板块在我们网页里面一般是不需要重复的,所以我们使用id来为他定义,而每一个板块里面的内容有时候是可以重复使用的,所以我们使用class为他定义。
有时候会有人问,如果我们全部单独使用一个也可以实现功能,为什么我们不单纯使用id和class呢?这个是因为如果全部使用id的时候,我们网页的JS和PHP的函数调用都是使用到id的,如果我们在css样式就占用了那程序员会非常麻烦,如果全部使用class的时候可能会因为权限不够而在同一个层里面的没有标志的元素例如ul,li,a等的会收到外面一层的样式影响到这样导致要要多写比较多的代码。
id和class应该如何起名?
这个名字是可以随自己喜欢来起名,所以有一些人使用英文,拼音或者乱打几个字母。虽然说这样子是可以的,但是会导致自己和别人在后期的修改网站非常麻烦,就因找一个标签也要头晕了。 我个人起名字是按照层次来起,下面举个例子:
例如头部我使用了head这个名字,然后头部可以分为存放logo和存放导航条两部分。这两个部分我就会使用head_1、head_2来表示,然后在存放logo的部分有可能分为左右一边是logo一边是广告或者搜索栏,我就会起名为:head_1_left、head_1_right来表示。这样子的css代码有时候我们在修改也无需翻到html页面看,直接按照样式的名字就可以看出来了。
二、合理使用标签有助于网站的收录和SEO优化
我们举一个例子,有时候一个新闻内容板块的html里面,很多人都会直接在div中间写上文字,然后给这一个div进行样式的控制:<div>新闻内容</div>。虽然这样子是完全可以实现功能,但是在搜索引擎眼中并不认为这个就是一个正文内容而是代码之类的,所以我们在写这个的时候记住合理使用p标签,如上面的新闻内容应该写为:<div><p>新闻内容</p></div>。在我们合理使用标签的时候一方面可以让人感觉到你是用心来做这个网页的排版,更重要的是让这个网站后期的优化事半功倍。下面给大家总结一下自己感觉上要加的标签:
h1:一个网页的主题,在一个页面里面只能出现一个。权重仅次于网站标题,所以尽量单纯把自己网站的主关键词放在里面。如果关键词包在一个句子里面如这篇文章的标题,我们可以写成如下:
<p>说说彭健自己对</p>
<h1>网页排版</h1>
<p>的时候要注意的一些事情</p>。
h2-h3:在网页里面一般使用到h3就足够了,后面的h4-h6一般都不会再使用。这些两个标签我们需要合理安排,h2表示一个页面里面的栏目,h3表示在这个栏目里面的子栏目或者文章。
p:p标签为段落标签,我们也可以说他是内容标签。这个标签里面的才是真正的内容。
alt:搜索引擎是不会看图片的,我们必须要为他说明这个图片表示的是什么,所以我们注意在每一张图片上为他说明。
title:这个标签是用在a标签里面的,一般很少人使用。但是我们要兼顾搜索引擎的优化所以我们必须要注意给搜索引擎一个简单精准的说明,例如说一篇文章标题是“说说彭健自己对网站排版的时候要注意的一些事情”。然后我们的代码应该写成
<a title=”网页排版注意事项” href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。
把最精准简短能够说明这条标题的意思写下即可。
nane:这个标签相信没几个人会注意到。这个名字标签可以说是直接跟搜索引擎说话的标签。他也是用在a里面,他是告诉搜索引擎,进入这个超链接里面是什么东西。就如上面的标题我们可以写成:
<a name=”网页排版注意事项” title=”网页排版注意事项” href=”">说说彭健自己对网站排版的时候要注意的一些事情</a>。
strong:这个是重要标签,这个的样子跟b标签一样。很多做seo而不懂代码的人他们知道每一篇文章要把重要的关键词加粗,但是他们总是以为这个加粗是b标签。其实这个加粗是strong标签。我们可以帮我们网页的重要关键词加上这个标签,然后在css里面设置他跟普通的字一样,在正常浏览的时候并不会有什么影响,但是其实他已经优化了。
三、代码的层次感和规划让你代码看上去更加舒服
在我彭健自己写代码的时候是非常注意这一方面的事情,因为一个页面做出来可以给客户看得舒服也能给自己看得舒服。我自己比较喜欢使用同级换行,下级换行退格的方法。例如一个网页的头部可以分为上部分和导航条部分,然后上部分分为左右。我们可以和容易看出,上下部分这两个div是同级的,而左右的div是下级的,代码如下:
<div class="head_1">
<div class="head_1_left"></div>
<div class="head_1_right"></div>
</div>
<div class="head_2"></div>
至于规划这一方面就是css的代码放到css文件里面,js代码放到js代码里面,而不实用嵌入式和捆绑式的书写方法。
四、排版的时候要注意到后台的调用
我们在排版一个页面的时候,我们使用无数个样式一个一个规定每一个div或者li的样式都是可以的,效果看上去也是一样但是这样是成功的代码那?我们知道做出来的页面并非这样就放上网站上面运行,而是把页面做成模版加入后台调用标签进行调用。例如一个文章列表(ul)里面的非常多个文章题目(li)。我们知道每一个文章题目都是从后台调用出来的,所以这些li是需要循环使用,如果我们每一个li都有一个不同的class的话,相信这个循环调用是让程序员非常头痛的事情。所以在我们做这个的时候尽量使用统一样式。如果导航条的每个项目有一条竖线隔开的情况,我们一般把这条竖线放到每个li的左边,然后给第一个首页的li加一个样式把这条竖线去掉,因为这样就可以顺利让后面的栏目进行后台调用。而首页是每一个网站都需要的所以这个做成静态也没有关系。
而我们网页上面的图片也有两种,一个是样式图片一个是数据图片。样式图片指的是不需要变动的如导航条背景(我们平时在浏览器上无法保存下来的)他是存放在css里面的,数据图片是可以随时变动的,他是从后台调用出来的如商品缩略图(我们平时在浏览器上可以保存下来的)。在我们写代码的时候要明确分辨这些图片属于哪一种,这样才能更加专业的把一个页面排版出来。而关于logo这个有些人喜欢放在css里面有些人喜欢放在html里面,这个就根据自己需要了。
五、网页图片大小
我们做好一个网页有时有不同人做出来的大小都不一样,然而这个我们需要怎么解决呢?例如一个网页的导航条,如果是一个春色导航条,我们在排版上有3种做法。
1、把设计图上整整一块导航条切图下来做背景。
2、切一个像素进行平铺。
3、直接使用颜色做背景。
这三种做法效果都是一样,但最节省地方是第三种。所以我们可以明白到做一个网页能把效果做出来并且做得最小的才是最好的。所以我们要注意:能用颜色的用颜色,不能用颜色的用平铺的用平铺,最后才考虑用图片。
有时候一张图片并不是单纯一个地方用到而是多个地方用到,所以我们就要注意到,把这个图片应用到多个地方而不是每一个地方都要切一块图片。最后我们在切图的时候也要注意到一项,并不是一个图片大片切下来就可以,我们必须要精准切到最边,尽量把图片的大小缩小到最小。
编后语
上面的一些总结是笔者自己在网页的排版中一步一步总结出来的。当我们去做一个网页前端工程师的时候,你单纯懂得代码是可以,但是当我们要做一个兼顾网站运营的网页前端工程师的时候,我们还必须兼顾到程序员看到你的排版的感受和网站对搜索引擎优化的难易。希望大家看完这一片文章能够回复一两话算给彭健一个支持哦,写这么长文章不容易。想了解更多关于笔者在网站运营中得到的经验吗?
前端切图+网页排版的注意事项和经验分享相关推荐
- 5款前端切图工具大比拼:谁是最强切图神器
前端切图是前端工程师们还原设计稿的过程中必不可缺的一环.不过,切图工作究竟谁来做?这个问题我们在各大论坛也屡见不鲜:前端工程师认为设计师出了设计稿,那么相应的切图也应该一并交付:设计师则认为前端工程师 ...
- 前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
- 前端切图案例课程一则-姜威-专题视频课程
前端切图案例课程一则-201人已学习 课程介绍 本课程以一套响应式网站设计图,进行切图为案例,还原老司机整个切图过程.本课程属于初级的前端工程师系列课程中案例课程的第一套课程,本课程需 ...
- 前端切图神器avocode
前端切图神器avocode 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而前端一般都是用photoshop,但是这个兵器 ...
- 介绍一个前端切图神器avocode
2019独角兽企业重金招聘Python工程师标准>>> 安装avocode 前端的基础工作就是把设计师的设计稿还原成前端页面,所以切图是作为一个前端的基本技能.杀敌要有趁手的兵器,而 ...
- linux 切图软件下载,学会23个linux常用命令,不做前端切图仔~
来源 | https://segmentfault.com/a/1190000021439560 前言一个前端好好切图不好吗?为什么要学 linux 呢? 嗯,真香 ! 1. ls 命令 : 显示目录 ...
- 超全面的前端切图技巧,读这篇就够了
工欲善其事,必先利其器! 相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~ 当时就在想,如果能有一款神器,帮我解放切图这种&q ...
- 在线ps html源码,PSD to HTML5 - 专业前端切图(PSDoHTML.com)
+ 核心服务 将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...
- html5 图,PSD to HTML5 - 专业前端切图(PSDoHTML.com)
+ 核心服务 将提供的PSD.AI等设计稿转化为html5网页代码,包括常规切图.自适应切图.手机网站切图.微信H5动画(邀请函等)等.不提供设计与修改设计稿服务. PC 前端:常规.动效.管理后台. ...
- PS·web前端切图(详细)
记录一下切图的过程,主要分为两部分. 切普通的图片 切logo图片 一.切普通的图片 1.UI将设计图给我们,设计图的格式一般为psd. 2.打开ps软件–打开–我们要切图的psd文件. 3.一般打开 ...
最新文章
- python lambda函数_python入门基础之lambda匿名函数
- Android全屏沉浸式应用
- Python random() 函数
- at/cron计划任务初解
- spark笔记之RDD常用的算子操作
- SVN更新有问题 svn The working copy at‘ ‘ is too old
- 吉利汽车:数字化转型从上云开始
- Pg Admin4 无法正常启动
- 经典小游戏开发思路和算法之拼图(1)
- 指数型基金今年来收益排行榜
- 百度网盘制作百度分享链接
- 用计算机玩游戏教程,Wegame怎么用手机玩电脑游戏 Wegame手机玩电脑游戏教程
- 关于Excel表格导出方法--application/vnd.ms-excel
- Excel一键知道文本的字符长度
- Ubuntu 安装xbmc播放器
- default.asp html,ASP.NET Core 设置默认起始页(如default.html)
- 2018_Csrnet: Dilated convolutional neural networks for understanding the highly congested scenes
- 迅为RK3399开发板Qt实时时钟测试
- 对数字营销公司(Digital Agency)案例的简要分析
- 基于Spring Boot的学生志愿者管理系统的设计与实现
热门文章
- 《用计算机写作文》说课稿,《我用电脑写作文》说课稿
- google play测试内购流程
- 数独计算机在线,js数独计算器
- Conjugate function and Fenchel’s duality theorem
- 电脑出现ntldr is missing无法开机怎么办
- Android教父高焕堂谈Android“开源”与“兼容”
- 写口算用计算机作文600字,难忘的口算比赛作文600字
- Hi3519V101运行MPP业务
- 【微信小程序】深入学习小程序基本目录文件与代码结构
- 【MySQL用法】MySQL中大于,大于等于,小于,小于等于的转义写法