整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
的产品详情页能给用户一个明确的利益点，即卖点。通俗地说，就是为什么用户要买你的，而不是别人的同类产品，所以产品页要专注在产品的卖点上，同时必须在最短的时间抓住用户的心。
在快节奏的生活中，用户没有耐心去看大篇幅的图片和文字，因此好的页面的文案话语，是短小精悍、言简意赅，让用户很快就能了解到他所想了解的产品情况。一款产品详情页设计思路如下：
详情页是打动用户促使购买的关键页，将页面板块设计为商品板块、评价板块、图文详情板块和推荐板块。
①商品板块，包含商品属性如商品图、购买说明规格选择、价格优惠等。
②评价板块，传达给用户更多的关于商品的信息，如已用过商品的用户评价、如何使用、售后服务等等感性介绍，从而解答用户心理的疑问和顾虑。
③图文详情板块，长度适宜,将用户需求的关键点和商品的卖点分出重要级之后，让图文详情板块的前半部分页面信息突出。
④推荐板块，推荐用户相关同类产品或者与此页产品相搭配的其他产品，给用户更多选择机会。
设计客服、收藏、分享、店铺和立即办理。注重人机互动，让这些工具便捷地出现在用户视野中，让其随时随地能基于场景进行高频的互动操作，获得用户更有效转化。从用户与商品的互动操作主题场景来分析，可对互动场景的价值性进行优先顺序的排列。
①立即购买，用户将可以直接进入购买确认页面。
②收藏，用户可将产品收藏在个人中心里，在未来的某个场景下，将有可能进行购买。
③客服，用户在选择和购买过程中，任何疑问均可以通过人工介入解答。
④店铺，用户可以直接进入店铺了解和选择更多的产品。
⑤分享，作为对产品有了最直接认知的这一类用户，其主动分享的价值性要远远高于通过市场营销手段去刻意实现的分享过程。
整个版面做到主题鲜明、简洁、明确，以优美画面向用户介绍产品卖点，进而吸引有需求用户的眼球。页面风格简洁明快，力求达到表格简单，色彩搭配协调，文字处理人性化，有亲切感等。
①头图，页面最终目的是销售产品，如果过分强调画面的美感，增加图片视觉的占比，强调网站设计的艺术性，反而不会收到好的效果。页面应鲜明且不喧宾夺主，让浏览的者能产生深刻的印象。
②标题，清晰合理表述产品的内容，突出产品的核心价值。标题语意通顺，无乱码杂质。
③销量，销量一定程度上标明了产品的受欢迎度，销量可选择月销量、季度销量或年度销量，通过销量让用户知道产品的爆款程度。
④促销，以价格优惠、捆绑优惠进一步推动用户购买欲望，满足“节省”或“买到则赚到”心理，提供活动促销、券码优惠等信息。
⑤评价，提炼好评关键字置顶展示，将客观好评内容排序到评价前面或积极互动内容有意展示，通过用户评价内容介绍产品更有说服力，更能体现产品满足用户真实需求。
⑥图文，图片和相配的文案话语。图片给人的印象深刻，相比文字具有更强的感性认知。但如果只关注图片，忽视与图片相配的文案，则不能达到预期目的。因为产品的属性、卖点，以及迎合用户的情感诉求都需要文案来进行说明与阐述。
本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器
刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收
HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)
标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的
读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签
每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）
目前主流的浏览器分为五种
Chrome谷歌浏览器 （Webkit内核，V8 js引擎）
Firefox火狐浏览器 （Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器 （Presto内核） 主要市场：移动端
Safari 苹果浏览器 （Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下
标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意
PS: 所有的标记符号都是半角英文
众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴
| 编辑器 | 描述 |
|---|---|
| EditPlus | 手写模式，适合初学手写，无代码提示(有IE调试视图) |
| Sublime | 插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷 |
| webstorm | 集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便 |
| Dreamweaver | 适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图) |
| 插件名 | 描述 | 详情请戳 |
|---|---|---|
| emmet | 前端自动补全，提供快捷补全方式 | |
| ColorPicker | 调色板，颜色选择器 | |
| SublimeTmpl | sublime模板，可以快速创建一个HTML模板 | |
| view in browser | 用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页) | |
| LiveReload | 实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新) | 谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载 |
| Color Highlighter | CSS颜色代码高亮及颜色预览提示 | |
| CSS3 | CSS3的代码高亮提示 | 还针对了CSS3的选择器及锚类选择器:hover :first-child :first-child ...的高亮 |
| JavaScript Completions | 原生js 代码提示 | |
| Sublime-Better-Completion | 可自选开启代码提示，支持jQ、js、bootstrap、php、sql ... | 仓库地址此插件只能通过Github克隆下载安装安装方法 |
注：Github 网页中 下面是有详细的使用方法 packagecontrol.io官网 里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~
| 配置 | 描述 |
|---|---|
| !DOCTYPE html | 不是标签，主要用于文档类型的声明 |
| charset="utf-8" | 声明字符编码集 |
| http-equiv="Content-Type" | 把Content属性关联到HTTP头部(协议头) |
HTML模板
简单了解，并不需要熟练掌握
Dom节点树
.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成 三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名
接下来所有的标签元素学习都在body标签里面去敲打实现、
为了突出标题，字体大小和加粗发生相应的改变
<h1>我是大主题</h1> <h2>我是大主题</h2> <h3>我是大主题</h3> <h4>我是大主题</h4> <h5>我是大主题</h5> <h6>我是大主题</h6>
<!doctype html><!-- 让浏览器使用html5的标准解析 --> <html> <head> <!-- 设置字符编码集让浏览器使用utf8解析当前网页 --> <meta http-equiv="Content-Type" content="text/html; charset=utf8" /> <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" /> <meta name="description" content="网页描述，八十字内" /> <title>浏览器标签页上的网页标题</title> </head> <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 --> <h1>我是大标题</h1> <h2>我是主题2</h2> <h3>我是主题3</h3> <h4>我是主题4</h4> <h5>我是主题5</h5> <h6>我是主题6</h6> </body> </html>
可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）
h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)
<p> 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。 </p>
刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示
| 符号 | 描述 |
|---|---|
| 空格 | |
| 小于 | < |
| 大于 | > |
| 引号 | " |
| 版权 | © |
| ×叉 | × |
| & | & |
| 符号 | 描述 |
|---|---|
| B标签 | 物理加粗，页面呈现加粗状态. |
| Strong标签 | 不仅能加粗，还利于搜索引擎优化 |
<b>物理加粗，页面呈现加粗状态.</b> <strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>
可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜 同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>
链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置
<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面 <a href="#"></a> 跳转到当前页面(回归到页面顶部) <a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效 <a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a> <a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少
点击#flag的a标签的时候会跳到到上面h2标签
只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)
| 描述 | 标签 |
|---|---|
| 滚动标签 | marquee |
| 字体标签 | font |
| 定义水平线 | hr |
marquee
| 属性 | 描述 |
|---|---|
| direction | 滚动方向 |
| behivior | 行为 |
behivior
| 值 | 描述 |
|---|---|
| alternate | 交替滚动 |
| scroll | 滚动 |
| slide | 滑落 |
| 属性 | 描述 |
|---|---|
| color | 颜色 |
| size | 0-7 |
| face | 字体 |
与font相似，拥有color和size属性
hr标签没有结束标签 按照早期的习惯也H5也遵循XHTML的解析 所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、
结合今天所学，写一个简单的网页
内容如下：
写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字
在习题一的文章底部，使用滚动标签进行滚动方向为45°
浏览微信公众号时，
我们会发现有的微信公众号
在菜单里放入历史文章列表，
但文章列表里并不是所有的历史文章，
而是按照一定的条件
摘出来形成专题的文章，
这就是我们所说的页面模板。
例如下图：
进入公众号【庄经纬】
点击菜单栏“精品”
就到了号主文章合集的页面
另外，
有的页面模板非常漂亮，
有幻灯片轮播，
有带缩略图片的文章列表，
有tab切换效果，
感觉高大上。
这是用了第三方的页面模板工具。
基础同学掌握微信公众号
自带的页面模板制作即可。
页面模板可以实现对历史文章
进行分类整理并提供查看入口，
尤其是对于一些经常查看的文章，
例如干货型文章，
这个功能显得非常重要。
它为用户提供了极大便利，
也是号主的一个重要展示窗口。
注意：目前此功能只针对
已经开通过原创声明功能的用户开放。
PART 1 “页面模板”在哪里？
点开微信公众号后台页面——首页
左上角
功能——页面模板
点击“页面模板”
点击“添加模板”
PART 2 页面模板的有哪几种类型？
目前公众号提供了四种页面模板，
分别为：
1. 列表模版：
图文、视频组成的列表页面；
2. 综合模版：
封面与多内容组成的页面；
3. 视频模版1：
视频可在当前模版播放；
4. 视频模版2：
视频需在详情页才可播放；
举例：我选的第2种，综合模板。
页面名称不超过16个字。
内容列表最多3个；
点击“添加”，
从素材管理中选择；
点“排序”，直接拖动排序，
完成后保存。
类别最多添加5个。
内容列表最多30个。
那么，
如何文章限制30篇？
还可以突破只有4个模板样式？
答案：用第三方页面模板网站。
高阶小伙伴感兴趣的，
可以自己私聊我，
我会告诉一个好用的网址。
编辑完成后，点击最下方“发布”按钮，显示发布成功，接着页面跳转到我的模板页面。
页面生成好了，接下来只需复制页面生成链接，
1、绑定到自定义菜单即可，
2、做到“阅读原文”里去，
3、做到正文需要的地方去，
这个看你自己需要咯~！
知识点梳理-页面模板说明
01 页面模版功能是什么？
页面模版功能，是给公众号创建行业网页的功能插件。公众号可选择行业模版，导入控件和素材生成网页，对外发布。
02 哪些公众号可以申请页面模版功能？
暂时只有开通了原创声明功能的公众号可以申请开通。
03 页面模版功能提供哪些行业模版？
暂时只提供媒体行业模版，包括列表模版和封面模版，后续将提供更多行业模版。
04 一个公众号最多可创建几个页面？
15个。
05 页面如何对外发布？
新建或修改页面后，点击“保存”时，立即对外发布。
06 页面可发布到哪些地方？
公众号可复制链接通过自定义菜单、图文消息阅读原文和其它方式发布。
大家好，我是会写作的小庄主，5年新媒体运营经验，有问题可以私聊我哦~！
第一期：“4+3”，微信公众号的注册与登陆看这里就够了
第二期：10个新媒体运营必备工具推荐，如果都会，你就可以去打小怪兽哦
第三期：4步看懂微信公众号后台，从此不怕人家喊我“技术小白”
第四期：用好4步巧设自动回复，你的号瞬间有温度，不信你也来试试看
第五期：1234超快完成号的自定义菜单设置，让你的号更有范儿
下一期： 5分钟了解原创、赞赏、评论功能，并快速拿下！
*请认真填写需求信息，我们会在24小时内与您取得联系。
