姬小光前端兴趣班【第009期】- 切图大法之代码的整理

上一期我们已经学会了使用 PS 切图并生成网页,那么这一期我们看看生成后的代码如何处理,才能变成一个合格的网页。

切图大法之代码的整理

由于我们上一期使用的是一个邮件营销活动的页面,也就是说要通过邮件的形式发送给用户,在用户的邮箱里打开浏览的网页。

邮件客户端或者网页版的邮箱系统,对网页都有诸多限制,比如不能用绝对定位,不能用内联样式(后续课程讲解)等。

所以表格布局再加上一点行内样式(回复 003),是最稳妥的方式。

让我们用第四期(回复 004)让大家下载的编辑器,或者其他可以编辑文本的软件,打开上一期生成的 htm 文件:

大家可以看到,这里面的代码我们已经基本能看懂了。

我们之前学过文档类型只需要写 <!doctype html> 即可,那么首先我们把头部的文档类型改掉。再把多余的注释删掉,并整理代码:

现在我们打开页面看一下:

你会发现页面内容是在窗口的左侧,这是由于页面内容比窗口的宽度窄,而我们又没有设置居中样式造成的。

那么,页面的主体内容是 table 元素,我们就在 table 上添加一个居中的样式:

保存并刷新页面,可以看到内容已经可以居中了:

此处的 margin 代表元素的外边距,第一个 0 代表上下的外边距是 0,第二个 auto 代表左右的外边距是 auto 自动,所以可以左右居中。

对于一个营销邮件,一定是要有链接来引导用户去我们真正的网站的,所以下面,我们来给页面加一些链接。

代码中的五个 img 就是我们上一期切出的切片,假设我么要在优惠券上加一个链接,那么按顺序可以知道这是第三个 img,故我们在第三个 img 外面套上一层超链接,假设链接到百度首页:

再次保存后,当我们点击优惠券区域时候,页面就跳转到了百度首页。

有了以上这些步骤,这个营销邮件基本上就可以使用了。

不过还有一些小细节要处理,比如 img 标签在某些邮件客户端里会有蓝色边框,底部也会有一个小间距。这时我们需要给所有的 img 边框加上如下的样式:

或者:

最终的效果是一样的,之所以用 display 和 vertical-align 的区别,是因为 img 元素本身是行内元素,在一行之中是以基线对齐的,所以基线之下的部分会有一个小空隙,关于这些细节知识,我们以后再慢慢讲解。

另外还有一个问题是,我们的图片都是相对路径:

如果发送邮件时没有以附件形式带过去,这些图片在客户端是无法显示的,所以我们必须找到一个可以上传图片的地方,把它们发布到网上去,然后得到一个绝对路径的地址,再嵌入的页面中就可以了。

没有了解过服务器和虚拟主机的同学,可以使用又拍云之类的上传图片,得到的地址替换这个相对地址即可。

好了,到这一期为止,切图大法就讲完了。产品和运营同学可以按照这些步骤独立完成邮件营销页面了。

原文发布于微信公众号 - 姬小光(hi-laser)

原文发表时间:2015-07-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

jQuery 图片查看插件 Magnify 开发简介(仿 Windows 照片查看器)

前言 因为一些特殊的业务需求,经过一个多月的蛰伏及思考,我开发了这款 jQuery 图片查看器插件 Magnify,它实现了 Windows 照片查看器的所有功...

34990
来自专栏极客编程

angularJS之站在jQuery的肩膀上

托互联网日新月异发展的福,浏览器变成了人们接入互联网的入口,而JavaScript 这个曾经的小语种,终于成功地站到了舞台的中央,唤起了开发者的兴趣。

9210
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(16)---用Spread设计器创建和编辑图表

Spread支持85种丰富多彩的图表效果。可以在Spread设计器中基于工作表的数据直接生成图表,操作简单。同时,软件人员还可以在Visual Studio设计...

23880
来自专栏Youngxj

杨小杰工具箱网页源码

18140
来自专栏针针小站

【Vue】如何动态的更新页面的Title

91130
来自专栏Web 开发

Design For Mobile Web

上面这段代码,源自Google的Best Practices for Web Apps,但在实际使用过程中,并不能完全适应iOS、Android平台,至于WP,...

10000
来自专栏菩提树下的杨过

haXe下体验jQuery

看了铁哥关于haXe的介绍,忍不住体验了一吧: 一、下载安装flashdevelop http://flashdevelop.org/ 到这上面下载最新的fla...

22070
来自专栏贺嘉的专栏

如何用Baas快速在腾讯云上开发小程序之系列4:实现客户侧商品列表、商品详情页程序

本文将分享如何在腾讯云上实现小程序的商品展示和数据库查询操作。通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作,包括掌握小程序调试方法、掌握小程序操...

1.2K00
来自专栏程序员的知识天地

微信小程序的组件用法与传统HTML5标签的区别

小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

27820
来自专栏大数据钻研

前端面试那些坑之HTML篇

HTML 1、Doctype作用?标准模式与兼容模式各有什么区别? (1)、<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<html> 标签之前...

40590

扫码关注云+社区

领取腾讯云代金券