JS+CSS实现微信二维码显示

严格来说,这只是使用JS来控制DIV显示/隐藏,配合微信二维码,就显得高大上和实用多了。

演示效果,把鼠标放在右上角的微信图标上。

JS+CSS显示二维码
JS+CSS显示二维码

1,添加JS代码在</head>前;

<script type="text/javascript">
function  showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}
</script>

wxImg是二维码图片的包围DIV。

2,HTML代码如下:

<div id="kalated-weixin">

	<a href="javascript:void(0)" onMouseOut="hideImg()"  onmouseover="showImg()">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/wx.png">
	</a>

</div>
	<div id="wxImg" style="display:none; right: 120px; top: 50px;back-ground:#f00;position:absolute; z-index:999;">
		<img class="wx" src="http://www.czqiushi.com/wp-content/uploads/2015/10/weixin.jpg">
	</div>

3,接下来就是调整CSS来美化外观了。

使用Advanced Category Template插件定义分类目录模板

使用本插件,需要一定的PHP/HTML/CSS基础,属于模板定制知识,并不适合新手。使用这个插件,可以给不同的分类(post和portfolio分类都可以)选择不同的模板,如果再配合POST相关模板插件,就可以实现POST的不同分类来展示新闻/产品。

简单点说,点击A分类展示新闻列表,B分类可以展示产品(豆腐块形式),不同的展示形式当然是涉及到模块的制作和CSS调整。下面简单说一下这个插件的使用。

1,后台搜索安装并启用本插件,进入插件设置,默认选择是勾选Post分类。

如果有Portfolio项目,那么也会有Portfolio目录供选择。

2,新建一个PHP文件,譬如名字叫:Products Category template.php,内容如下:

<?php
/*
*
* Category Template: Products Category template
*
*/
get_header();
?>

《这里添加PHP/HTML代码制作模板》

<?php get_sidebar(); ?>

<?php get_footer(); ?>

注意这里面的内容,涉及到WordPress模板文件制作,HTML排版和CSS调整等。

3,新建目录,选择自定义的模板;

分类目录 ‹ AQUA演示站 — WordPress

4,然后发布文章到此分类中,查看本分类,即可看到显示效果。

营销邮件HTML EMAIL编写需要注意的几点

建站之初有转载过阮一峰博士的《HTML EMAIL编写指南》一文,后来整理网站时删除了。近日折腾营销邮件,觉得非常有必要将此文再次发一下,当然了,这次不会再删除了。:D

鉴于HTML EMAIL会涉及到一些专业的HTML和CSS代码,所以对于外贸人来说,自己编写代码恐怕有些困难,那最快捷的办法就是找个模板。再利用Dreamweaver简单的实现图片和文字的替换,而快速的完成自己的营销邮件的制作。

这里涉及到几个问题,如果是零基础者,以上两段内容压根看不懂是嘛意思。好吧,先说Dreamweaver软件,百度搜索一些视频来看看,软件请百度下载。接着我们不去说HTML和CSS代码,因为有了模板,压根不需要了解这些天书,当然好的模板还是要花点钱买下来的。推荐THEMEFOREST给大家,同时这里是我做的一个演示,大家看看效果,觉得OK的话请下载免费源码自己研究一下。

1,使用Dreamweaver前,强烈建议看一些视频来学习一下,当然后期有时间我们会考虑录一个针对此文的视频。在修改源码中的index.htm前建议建立站点,这样保证图片路径正确。

2014-04-23 23-03-03

2,如果一丁点儿代码也不懂,注意不要修改任何源代码和CSS代码,直接在设计界面下操作。双击图片选择相应的图片替换,在原有文字中文先写自己的内容,接着删除自己内容前后的多余文字,这个操作很大程度避免破坏源代码。涉及到超链接时,请在属性面板修改。

3,HTML EMAIL不支持链入CSS文件,也不支持HEAD内定义CSS,所以请不要尝试使用“新建CSS规则”来添加CSS。另外,通常都采用表格来排版,CSS定义是直接写在标签内的。所以有一些HTML+CSS基础的朋友,请抛弃DIV+CSS编写习惯,尝试用TABLE自己研究下。

4,在本地完成邮件后,其实它就是一个网站,只是它只有一页而已。同样的,我们需要将其上传到服务器上,比如说我的演示站就是在要目录下新建一个email目录,接着将images文件夹和index.html上传email目录下。这样通过 HTTP://域名/email 就可以在线访问了。

5,如何来群发邮件呢?最简单的办法是在打开的页面 Ctrl+A(全选) 接着Ctrl+C(复制),打开FOXMAIL,将刚刚复制的内容Ctrl+V(粘贴)在内容页就好了。当然也有复杂的办法,懂HTML的朋友可以把图片的相对路径改为绝对路径,把HTML代码全部复制到FOXMAIL的HTML代码编辑框内。

2014-04-23 23-00-14

GOOD LUCK! 占位待视频!

HTML Email 编写指南

今天,我想写一个”低技术”问题。

话说我订阅了不少了新闻邮件(Newsletter),比如JavaScript Weekly。每周收到一封邮件,了解本周的大事。

有一天,我就在想,是不是我也能做一个这样的邮件?

然后,就发现这事不那么容易。抛开后台和编辑工作,单单是设计一个Email样板,就需要不少心思。

因为这种带格式的邮件,其实就是一张网页,正式名称叫做HTML Email。它能否正常显示,完全取决于邮件客户端。大多数的邮件客户端(比如Outlook和Gmail),会过滤HTML设置,让邮件面目全非。

我发现,编写HTML Email的窍门,就是使用15年前的网页制作方法。下面就是我整理的编写指南。

1. Doctype

目前,兼容性最好的Doctype是XHTML 1.0 Strict,事实上Gmail和Hotmail会删掉你的Doctype,换上这个Doctype。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>HTML Email编写指南</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>

</head>

</html>

使用这个Doctype,也就意味着,不能使用HTML5的语法。

2. 布局

网页的布局(layout)必须使用表格(table)。首先,放置一个最外层的大表格,用来设置背景。

<body>

<table border=”1″ cellpadding=”0″ cellspacing=”0″ width=”100%”>

<tr>
<td> Hello! </td>
</tr>

</table>

</body>

表格的 border 属性等于1, 是为了方便开发。正式发布的时候,再把这个属性设为0。

在内层,放置第二个表格。用来展示内容。第二个table的宽度定为600像素,防止超过客户端的显示宽度。

<table align=”center” border=”1″ cellpadding=”0″ cellspacing=”0″ width=”600″>

<tr>
<td> Row 1 </td>
</tr>

<tr>
<td> Row 2 </td>
</tr>

<tr>
<td> Row 3 </td>
</tr>

</table>

邮件内容有几个部分,就设置几行(row)。

3. 图片

图片是唯一可以引用的外部资源。其他的外部资源,比如样式表文件、字体文件、视频文件等,一概不能引用。

有些客户端会给图片链接加上边框,要去除边框。

  img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;}

a img {border:none;}

<img border=”0″>

需要注意的是,不少客户端默认不显示图片(比如Gmail),所以要确保即使没有图片,主要内容也能被阅读。

4. 行内样式

所有的CSS规则,最好都采用行内样式。因为放置在网页头部的样式,很可能会被客户端删除。客户端对CSS规则的支持情况,请看这里

另外,不要采用CSS的简写形式,有些客户端不支持。比如,不要写成下面这样:

  style=”font: 8px/14px Arial, sans-serif;”

如果想表达

  <p>

要写成下面这样:

  <p>

5. W3C校验和测试工具

要保证最终的代码,能够通过W3C的校验,因为某些客户端会把不合格属性剥离。还要使用测试工具(123),查看在不同客户端的显示结果。

发送HTML Email的时候,不要忘记MIME类型不能使用

  Content-Type: text/plain;

而要使用

  Content-Type: Multipart/Alternative;

发送工具可以考虑使用 MailChimp 和 Campaign Monitor 。

6. 模板

使用别人已经做好的模板,是一个不错的选择(这里这里),网上还可以搜到更多

自己开发的话,可以参考HTML Email BoilerplateEmailology

7. 参考链接

进一步研究,请参考下面的文章。

  - Sean Powell,Say Hello to the HTML Email Boilerplate
– Nicole Merlin,Build an HTML Email Template From Scratch
– Nicole Merlin, What You Should Know About HTML Email

(完)

第八节:网站基本设置和辅助

回到目录:WordPress快速建站之系列教程

后台的设置和技巧有很多需要学习和推敲的地方,即使一个WordPress老鸟,对于各种设置和技巧也有不同的理解和偏重。对于我们建设个人网站和企业站,很多设置采用默认即可,关注最重要的设置才是起步学习的正确方法。因此,我们这节主要讲网站的基本设置。

1,添加和管理用户

添加和管理用户
添加和管理用户

如果你想授权公司员工发布新闻和管理网站日常事务,不应该将管理员的权限给他,而是添加一个用户,并分配“编辑”的权限,这样对网站安全是非常重要的。

2,设置

WordPress后台基本设置
WordPress后台基本设置

1),常规:这里需要注意“站点标题”、“副标题”、“电子邮件地址”和“日期格式”。前两项根据网站情况来如实填写,通常“副标题”需要我们组织一句完整的话,将网站的主题很好的表达出来。

2),阅读:首页显示这个选项我们将会在后续的教程中经常遇到,用来设置首页和文章页。特别注意的是最后一项“对搜索引擎的可见性”,如果新建网站,建议先勾选上(闭关数日),待网站建设完成后再取消选择而正式发布网站(重磅推出)。

3),固定链接:采用何种链接对SEO的影响,这是一个值得探讨的问题,但至于什么是最好的需要实践来验证。不明白何为固定链接,请选择一项后保存,接着访问网站的文章看看URL。找了一些内容并归纳为四不:日期不要出现在固定链接里面、分类的链接不要出现在固定链接里面、链接不要过深、不要让中文字符出现在固定链接里面。如本站的链接就采用最简单的以/%post_id%.html来伪静态URL(https://www.kalated.com/1243.html)。

3,设置网站图标

注意一下本站的网站图标为一个卡通红色小人,通过源码可看到如下图:

网站图标
网站图标

所以,我们需要先上传图片到空间里,再用这样的代码添加在主题文件(通常是header.php)里就可以了。

4,添加统计代码

网站建成后,肯定希望有很多人来访问,如果没有跟踪代码来记录,你无从知道网站被多少人、哪些国家和地区的人访问了。所以我们需要在网站的源码内添加一段统计代码(通常添加在footer.php)。

好了,这节内容就这些了,不明白的地方欢迎留言。

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjgxNjgzMzMy.html

第四节:HTML代码和WordPress主题的短代码如何使用?

回到目录:WordPress快速建站之系列教程

在认识和学习HTML代码和主题短代码前,我们得先了解一下所见即所得编辑器,如图1所示,编辑器上方有很多类似Word里的按钮,用以排版内容,注意在右上角有可视化/文本选项。

图1:所见即所得编辑器(可视化)
图1:所见即所得编辑器(可视化)

虽然主题短代码在可视化状态下是可以看见的,但HTML代码必须在文本状态下才可以看到,如图2所示。

图2:所见即所得编辑器(文本)
图2:所见即所得编辑器(文本)

1,HTML代码

由于种种原因,在可视化状态下编辑内容有时候会出现错位等问题,所以我们不得不切换到文本状态下检查HTML代码是否正确。HTML代码是以”<“和”>”左右尖括号包围的,同时以带“/”来结束的。

加粗代码:
<strong>内容</strong>
斜体代码:
<em>内容</em>
链接代码:
<a href="https://www.kalated.com" target="_blank">卡拉科技</a>

我们可以将HTML代码理解为一个容器,那么大容器里是可以放小容器的,下面的代码是正确的。

<p>这儿是一些内容,对我<strong>加粗</strong></p>

事实上容器是不可以交叉的,如下面的代码就是错误的。

<p>这儿是一些内容,对我<strong>加粗</p></strong>

通常情况下在后台添加和编辑内容并不需要我懂得一丁点儿HTML代码,但上面讲到的这个错误示例经常会遇到,大家需要注意一下。

2,主题定义的短代码

主题定义的短代码其实是一个个函数,只是避免让用户直接面对太多源码而简化的结果。短代码通常是以“[”和“]”包围的,并以“/”结束(有些没有)。由于主题的不同,各自短代码的含义也是不同的,所以在拿到新的主题时,需要对短代码进行详细了解。同样的,上面提到的HTML错误示例也适用这里,短代码也是不允许交叉的,更不允许HTML代码和短代码交叉。

以下代码是错误的:
[list]这儿是一些内容,对我<strong>加粗[/list]</strong>
[list]这儿是一些内容,对我用[red]红色[/list][/red]

以下代码是正确的:
[list]这儿是一些内容,对我<strong>加粗</strong>[/list]
[list]这儿是一些内容,对我[red]<strong>加粗</strong>[/red][/list]

在页面排版中,短代码的使用是非常必要的,也是必须掌握的基本知识。做网站无非是做好框架,填充图片和文字内容,这些都会用到短代码。

更改与说明:在视频中讲到“列”短代码时,由于没有详细查看主题分列规则的说明,所以造成了一定的误区,大家在理解这个主题的分列规则可以通过主题自带的页面说明来理解,请看http://centum.purethemes.wpengine.com/full-width/

无法观看视频时,请跳转到优酷查看,http://v.youku.com/v_show/id_XNjc5ODMyNzky.html