《网页设计与制作项目教程》项目八 网页指标与优化_第1页
《网页设计与制作项目教程》项目八 网页指标与优化_第2页
《网页设计与制作项目教程》项目八 网页指标与优化_第3页
《网页设计与制作项目教程》项目八 网页指标与优化_第4页
《网页设计与制作项目教程》项目八 网页指标与优化_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页设计与制作项目教程项目八网页指标与优化项目八网页指标与优化项目目标：能力目标(1)使用网站流量统计工具来查询页面浏览量。(2)使用网站流量统计工具来查询转化率。(3)掌握提升页面加载速度的几种方法。(4)分析和设计网站的关键词。知识目标(1)页面的浏览量的含义。(2)页面的转化率的含义。(3)关键词的含义及分类。网页设计与制作项目教程项目八网页指标与优化任务1非自有网站浏览量查询【任务目标】本任务的目标是能理解页面浏览量的含义，并能够使用网站流量统计工具来查询页面浏览量。网页设计与制作项目教程项目八网页指标与优化1． 访问站长之家的站长工具(/)【任务实施】子任务1采用站长工具来查询非自有网站浏览量图8-1-1站长之家网站的站长工具网页网页设计与制作项目教程项目八网页指标与优化2． 在输入框内输入要查询的网站的名称,如:,点击Alexa排名按钮，可以观察到淘宝网在Alexa排名体系中排第9名，且可以看到它的排名变化情况，以及以及日均IP访问量和日均PV浏览量，如图8-1-2所示。图8-1-2网站的Alexa排名结果网页设计与制作项目教程项目八网页指标与优化3． 在输入框内输入要查询的网站的名称,如:,点击Alexa排名按钮，不但可以看到对整个网站的日均IP访问量和日均PV浏览量情况，还可以细化到京东网PV浏览量占比较高的网址是哪一些，如图8-1-3所示。图8-1-3网站的页面浏览量详情网页设计与制作项目教程项目八网页指标与优化1． 访问百度统计网站()，如图8-1-4所示【任务实施】子任务2自有网站页面浏览量查询图8-1-4百度统计网站首页网页设计与制作项目教程项目八网页指标与优化2． 注册百度统计用户，如图8-1-５所示。图8-1-5百度统计用户注册页面网页设计与制作项目教程项目八网页指标与优化3． 使用注册的用户名和密码，登录百度统计用户，如图8-1-6、图8-1-7所示。网页设计与制作项目教程项目八网页指标与优化4． 点击“新增网站”按钮，将需要观测流量的网站添加到百度统计管理页面中。如：可以输入上一章申请的免费空间所赠送的域名，输入网站主页地址以及为网站创建一个名称，如图8-1-8所示。图8-1-8添加管理站点网页设计与制作项目教程项目八网页指标与优化5． 点击“复制代码”按钮，复制百度统计提供的获取流量的代码，这段代码要插入到所有需要统计流量的网页文件中，如图8-1-9所示。图8-1-9获取统计源代码网页设计与制作项目教程项目八网页指标与优化6． 将这个代码添加到网站全部页面的<head>标签区域。可将百度统计代码在header.htm类似的页头模板页面中安装，以达到一处安装，全站皆有的效果。若对代码不太熟练，或者手动安装代码出现问题的话，也可以在“管理”标签页中，点击左边菜单栏“代码管理→代码自动安装”，实现百度统计代码的自动安装，如图8-1-10所示。图8-1-10

添加统计源代码到管理网站的页面网页设计与制作项目教程项目八网页指标与优化7． 启动FTP软件，将修改之后的网页重新上传到远程服务器端，如图8-1-11所示。图8-1-11上传修改后的网页到服务器端网页设计与制作项目教程项目八网页指标与优化8． 在“管理”标签页中，点击左边菜单栏“代码管理→代码安装检查”，选择需要检测的网站，点击“开始检查”按钮，开始检查百度统计代码是否正确安装，如图8-1-12、如图8-1-13所示。若有问题，则需要进行修改直至正确，否则无法统计到网站流量。图8-1-12代码检测错误图8-1-13代码检测正确网页设计与制作项目教程项目八网页指标与优化9． 正确安装了百度统计代码之后，访问几次自己的网站，在“报告”标签页的“网站概况”中查看网站统计数据结果，如图8-1-14所示。图

8-1-14网站统计数据结果网页设计与制作项目教程项目八网页指标与优化任务2页面转化率的提升【任务目标】本任务的目标是能理解页面转化率的含义，并能够学会设置网页转化率的方法。网页设计与制作项目教程项目八网页指标与优化1． 登录百度统计，点击“管理”标签页,右边栏中点击“转化设置”中的“基本转化设置”栏，如图8-2-1所示。【任务实施】图8-2-1基本转化设置页面网页设计与制作项目教程项目八网页指标与优化2． 缺省选择“页面转化”标签页，点击“添加页面转化”按钮，设置转化目标、转化类型等参数，如图8-2-2所示。图8-2-2页面转化参数设置网页设计与制作项目教程项目八网页指标与优化3． 可以选择“事件转化”标签页，点击“添加事件转化”按钮，设置转化目标、转化类型等参数，如图8-2-3所示。图8-2-3事件转化设置网页设计与制作项目教程项目八网页指标与优化4． 在百度统计“报告”标签页中的“转化概况”栏目查看转化率统计效果，如图8-2-4所示。图8-2-4查看网站转化结果网页设计与制作项目教程项目八网页指标与优化任务3页面加载速度的提升【任务目标】一个网站的页面加载速度直接影响着其用户体验，有关调查显示即使网站的内容再吸引人、市场推广力度再大，如加载时间过长，大部分客户会选择离开。因此，为了提升用户体验，留住用户，优化网站的加载速度也显得非常重要。

本任务的目标是在同等硬件及网速的情况下，使网页内容尽可能快速地在浏览器端呈现出来，从而增强用户体验，提升用户粘度。网页设计与制作项目教程项目八网页指标与优化1.优化图片资源的格式和大小1）打开PHOTOSHOP软件，打开需要压缩的图片，选择文件菜单中的“存储为Web和设备所用格式”，如图8-3-3所示。2）选择需要存储的图片格式，设置和调整不同的参数，仔细观察图片压缩的结果，如图8-3-4所示。【任务实施】图8-3-3用PHOTOSHOP软件打开需要压缩的图片图8-3-4设置图片压缩参数，查看压缩结果网页设计与制作项目教程项目八网页指标与优化2.开启网络压缩1）打开IIS服务器，点击“视图”菜单栏中“视图”选项中的“图标”项，如图8-3-6所示。2）双击“压缩”图标，打开设置压缩参数页面，进行参数设置，如图8-3-7所示。。图8-3-6在IIS服务器中找到压缩图标图8-3-7压缩参数设置网页设计与制作项目教程项目八网页指标与优化3.减少请求数1）CSSSprites（CSS精灵）技术图片是增加HTTP请求的最大可能者，把背景图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分，这样可以减少大量的背景图片请求。2）合并JS文件和CSS文件合并脚本和CSS文件，可以减少HTTP请求。从逻辑上说，把CSS分成结构清晰的几个部分，比如base.css、header.css、mianbody.css、footer.css等，这样对页面的维护和修改是比较方便的，但这样加载网页的速度就减慢了。合理规划和合并JS文件和CSS文件，可以有助于提高页面访问速度。网页设计与制作项目教程项目八网页指标与优化4.使用CDN静态资源CDN是一种静态内容分发网络，它位于全球不同地方的高性能网络服务，每个省，甚至每个城市都部署有CDN服务器，用于分发这些静态资源。当某个城市的用户要获取某个资源时，他会首选从本地的CDN服务器上下载，这样可以保证最快速的获得该资源，提升页面加载速度。网页设计与制作项目教程项目八网页指标与优化5.使用浏览器缓存最简单的浏览器缓存使用方法是利用http响应的头信息Expires、Cache-Control来缓存静态页面。如：1）<metahttp-equiv="Cache-Control"content="max-age=6000"/>

其中，max-age表示缓存的最大持续时间（该时间以秒为单位来设置）。2）<metahttp-equiv="Expires"content="Tue,17Jan201723:00:00GMT"/>

其中，Expires表示过期日期设置，content里面的值表示具体的过期日期，等同max-age的效果。如果max-age和Expires两者同时进行设置，那么Expires的过期日期将被Cache-Control的max-age覆盖。网页设计与制作项目教程项目八网页指标与优化6.优化JavaScript、HTML和CSS内容网页设计和编辑的时候,往往会生成大量的空格,包括使用到的css和js文件，也会含有大量的空格和长变量命名，这些都将导致文件体积增大，影响页面加载速度。在网站发布之前，应当优化JavaScript、HTML和CSS文件，删除所有不必要的空格和注释，从而减小文件大小。这种类型的工具非常多，如：JSMinifier、JSMin、uglifyjs、ant、YUICompressor等，压缩后文件将减小，JSMinifier压缩前后比较如图所示。网页设计与制作项目教程任务4网页关键词优化【任务目标】本任务的目标是能够理解关键词的作用和意义，并能够学会使用关键词工具筛选有效的关键词，能够对设计的网页进行关键词优化调整。项目八网页指标与优化网页设计与制作项目教程1． 登录百度指数（/）,在文本框中输入想要查询的关键词，如：童装，点击搜索按钮，就会呈现用图形和数据展示该关键词搜索指数和媒体指数，以及历史变化趋势，如图8-4-2、图8-4-3所示。【任务实施】子任务1关键词选择项目八网页指标与优化

图8-4-2百度指数及30天的指数趋势图图8-4-3百度指数及半年的指数趋势图网页设计与制作项目教程2． 可以点击添加对比词，增加多个关键词，如：打底裤，查询关键词的趋势图对比结果如图8-4-4、图8-4-5所示。项目八网页指标与优化

图8-4-4多关键词的30天百度指数趋势图

图8-4-5多关键词的半年百度指数趋势图网页设计与制作项目教程

3． 点击需求图谱栏目,查看需求图谱和相关词分类，如图8-4-6、图8-4-7、图8-4-8、图8-4-9所示。项目八网页指标与优化

图8-4-6童装的需求图谱

图8-4-7打底裤的需求图谱

图8-4-8童装的相关词

图8-4-9打底裤的相关词网页设计与制作项目教程4． 点击舆情洞察栏目,查看媒体指数和详情，图8-4-10、图8-4-11所示。项目八网页指标与优化图8-4-10童装的舆情洞察

图8-4-11童装的舆情洞察网页设计与制作项目教程

5． 点击人群画像栏目,查看关键词搜索的地域分布及人群属性，人群画像显示了关注此关键词的用户的性别、年龄、地域属性，如图8-4-12、图8-4-13、图8-4-14、图8-4-15所示。项目八网页指标与优化图8-4-12童装的地域分布

图8-4-13打底裤的地域分布图8-4-14按年龄归类的人群属性

图8-4-15按性别归类的人群属性网页设计与制作项目教程1． 页面标题Title的优化。设置每张网页的<title>标签，网页的标题设置不要重复，每页的标题要包括筛选出来的目标关键词，如图8-4-16、图8-4-17、图8-4-18所示。【任务实施】子任务2网页关键词优化项目八网页指标与优化

图8-4-16新浪网首页Title标签设置图8-4-17新浪网科技栏目Title标签设置

图8-4-18新浪网明星频道Title标签设置网页设计与制作项目教程

2.Meta标签的优化。设置每张网页的<meta>标签，包括设置关键词（keywords）的内容以及描述（description）的内容。Keyword标签就相当于一篇文章的关键词，可用于索引这篇文章的主要词语，关键词之间用逗号进行分隔。Description标签相当于一篇文章的摘要，是用于简要概括整个页面的内容信息，也是更好的引导用户访问网站的一个比较好的路径，在搜索引擎中对Description标签描述一般显示在80个字以内，如图8-4-19、图8-4-20所示。项目八网页指标与优化图8-4-19新浪网首页description描述内容图8-4-20新浪科技栏目description描

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论