# Web **Repository Path**: NFUNM172018125/Web ## Basic Information - **Project Name**: Web - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2019-06-30 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web_Operations ## 一、策划文档与网站地图 **网站建设目标** * 提高工作室的知名度：互联网的飞速发展，越来越多的人喜欢通过互联网来了解世界。 * 获取更多的潜在用户：工作室推出了一系列明信片，以及毕业时会有毕业跟拍的业务，通过网站建设，可以获取更多的潜在客户。 **目标用户画像** * 兴趣爱好：模特、收藏明信片、绘画、摄影 **网站规划** * 建设网站目的及功能定位：提高工作室的知名度、获取更多的潜在用户，为摄影手绘爱好者提供学习的平台。 * 网站域名和网站名称的确定：最初建站，只把此网站当作个人博客，所以注册了域名shujinghuang.me;建站之初，把网站当作个人博客，因而取名阿静的网站，而后确定主题后，更改为南苑摄影手绘艺术。 **网站技术解决方案: ** * 租用 DigitalOcean 的虚拟主机。 * 网站安全性措施，防黑、防病毒使用 Wordfence。 **网站内容规划** * 根据网站的目的和功能规划网站内容，网站包括：人物摄影、艺术教程、手绘衍生、架站流程以及网站地图等基本内容。 **DVF模型定义需求** * 用户需求（Desirability）：用户无需关注公众号便可查看工作室的全部内容，且可一键分享到各大社交平台。 * 可持续性（Viability）：吸引了大量的潜在用户，后期预约摄影及购买手绘产品的用户增多，同时招揽摄影爱好者，提升工作室的技术水平，带来更大的收益。 * 可行性（Feasibility）：创造更多的作品，吸引更多的用户，以带来更大的流量。 **网站地图** ![南苑摄影手绘艺术](https://images.gitee.com/uploads/images/2019/0630/144836_ffbc2678_1831466.png "sitemap.png") ## 二、图库版权 * 非原创文章来源：简书教程、CSDN教程、文传影视工作室 * 原创文章来源：站长操作截图 * 图片版权声明：所有图片均在图片说明之处标注来源，且对图片做了超链接，点击图片即可跳转到图片的文章 ## 三、图库风格及配色 * 风格：唯美风格，简约风格 * 配色：图库以绿色为主色调 * 原因：网站主题是摄影手绘艺术，因而在图片上选择唯美的风格吸引用户，而在教程上则使用简约图片，避免花里胡哨，彰显教学的严谨。 ## 四、云端架站踩坑图文文章 [github education pack申请教程](http://shujinghuang.me/2019/06/09/github-student-package-application-tutorial/) [在digital ocean上搭建wordpress](http://shujinghuang.me/2019/06/09/build-wordpress-on-digital-ocean/) [在namecheap上注册域名并在digital ocean上绑定该域名](http://shujinghuang.me/2019/06/09/register-a-domain-name-on-namecheap-and-bind-the-domain-name-in-digital-ocean/) ## 五、平面设计1. 网站配色，背景及字体的对比度 及可读性 * 网站配色：采用蓝色作为主题色调，字体为黑色 * 背景：采用白色，彰显简约 * 字体：全局字体改用了Source Sans Pro，部分字体采用了微软雅黑，并且将字号调为16px * 对比度及可读性：文章白色背景黑色字体，对比度高，可读性强 ## 六、平面设计2. Animate it! 及Siteorigin **Animate it!** 1. 在侧边栏导航菜单添加animated fadeInUp duration1 eds-on-click动画 [导航菜单动画展示](http://shujinghuang.me/) 2. 在侧边栏近期文章导航添加animated fadeInUp duration1 eds-on-click动画 [近期文章动画展示](http://shujinghuang.me/) **Siteorigin** 1. 在文章"//光影//"底部使用siteorigin [//光影//](http://shujinghuang.me/2019/06/10/guangying/) 2. 在文章“github education pack申请教程”底部使用siteorigin [github education pack申请教程](http://shujinghuang.me/2019/06/09/github-student-package-application-tutorial/) 3. 在页面网站地图使用siteorigin [网站地图](http://shujinghuang.me/sitemap/) ## 七、云端架站1（域名实践） 网站域名：[shujinghuang.me](shujinghuang.me) ![域名](https://images.gitee.com/uploads/images/2019/0630/145153_47a25c13_1831466.png "yuming.png") ## 八、云端架站2（wordfence） **使用wordfence进行监控** ![wordfence监控截图](https://images.gitee.com/uploads/images/2019/0630/145703_3e91d8fe_1831466.png "wordfence 1.png") **wordfence工具Live Traffic监控** ![Live Traffic监控](https://images.gitee.com/uploads/images/2019/0630/145908_a82620b8_1831466.png "wordfence 2.png") **网站攻击总数被阻止** ![Total Attacks Blocked](https://images.gitee.com/uploads/images/2019/0630/150822_2b50a8f9_1831466.png "wordfence3.png") **说明：** 通过Live Traffic，可以观察到网站发生的情况，从图2中，可以发现，网站存在警告情况。从图3中可以发现网站遭受攻击的情况，但是并没出现防火墙阻止的情况，表示网站在安全方面尚可。 ## 九、云端架站3. （site24x7） **使用site24x7监控** ![site24x7监控](https://images.gitee.com/uploads/images/2019/0630/152543_32ad4577_1831466.png "site24x7.png") **8个监控地点** ![8个监控地点](https://images.gitee.com/uploads/images/2019/0630/151803_d2fa8147_1831466.png "site24x72.png") ![不同位置的可用性与响应时间](https://images.gitee.com/uploads/images/2019/0630/153216_8ef136ce_1831466.png "site24x73.png") ![不同位置的响应时间](https://images.gitee.com/uploads/images/2019/0630/153256_3fd9447d_1831466.png "site24x74.png") **说明：** 从上图中可以发现，北京和广州需要响应时间较长，可用性相对较低，而另外六个位置的响应时间快，且可用性为100%，由此可见网站的可用性总体较高。 ## 十、云端架站4. 网站备份 **链接到winSCP** ![登录winSCP](https://images.gitee.com/uploads/images/2019/0630/154547_ba38e201_1831466.png "winSCP.png") **将wp-config.php备份本地** ![winSCP备份](https://images.gitee.com/uploads/images/2019/0630/154701_19ce321c_1831466.png "winSCP beifen.png") **通过插件WordPress Backup Plugin备份“数据库文件”** ![数据库备份](https://images.gitee.com/uploads/images/2019/0630/154801_08df310f_1831466.png "BackWPup – WordPress Backup Plugin.png") **通过wordpress后台导出工具备份** ![导出工具备份](https://images.gitee.com/uploads/images/2019/0630/154923_f7c2048c_1831466.png "gongjudaochu.png") ## 十一、站长工具A——必应 **必应流量截图** ![必应流量截图](https://images.gitee.com/uploads/images/2019/0630/155233_76bc95be_1831466.png "biying1.png") ![必应页面流量截图](https://images.gitee.com/uploads/images/2019/0630/155332_069af607_1831466.png "biying2.png") **必应成果展示——通过站长认证后，可以再必应搜索引擎搜到** ![必应搜索结果](https://images.gitee.com/uploads/images/2019/0630/155315_15c062c2_1831466.png "biyingsousuo.png") ## 十二、站长工具B——Google **Google流量截图** ![Google流量截图](https://images.gitee.com/uploads/images/2019/0630/155620_da3643dc_1831466.png "Google1.png") **Google成果展示——通过站长认证后，可以再Google搜索引擎搜到，并且所有文章均被Google收录** ![Google搜索结果](https://images.gitee.com/uploads/images/2019/0630/155746_2a2e7b97_1831466.png "Google2.png") ## 十三、SEO优化 **1. 优化alt标签** 6.25晚上开始优化alt标签，注意替换文本应当可以描述图片内容，以便用户在图片加载过慢或无法加载的时候，能理解文章 ![alt标签优化](https://images.gitee.com/uploads/images/2019/0630/163617_67626cee_1831466.png "alt.png") **2.添加外链** 外链不仅可以提高网站的权重，还可以提高某个关键词的排名。网站链接到了本专业同学的网站。 **3.优化seo title** seo title最好包含网站名称、关键词，宽度不要超过600px 文章原本的seo title评分呈现橙色，修改后呈现了绿色 ![seo title优化前](https://images.gitee.com/uploads/images/2019/0630/175046_26e6e41d_1831466.png "seo title.png") ![seo title优化后](https://images.gitee.com/uploads/images/2019/0630/175104_9289a03a_1831466.png "seo title2.png") **4.优化meta** 原本文章时没有meta，添加meta后，seo评分由灰色转为了橙色 ![meta优化前](https://images.gitee.com/uploads/images/2019/0630/175408_e0ac0aa2_1831466.png "meta.png") ![meta优化后](https://images.gitee.com/uploads/images/2019/0630/175421_502e09b7_1831466.png "meta2.png") **5.添加社会化媒体分享按钮** 安装插件Sassy Social Share，启用后可按下图设置 ![设置社交媒体分享按钮](https://images.gitee.com/uploads/images/2019/0630/175910_9b23cdb9_1831466.png "Sassy Social Share.png") **流量变化** ![优化前后流量变化](https://images.gitee.com/uploads/images/2019/0630/180154_48cb247e_1831466.png "liuliangbianhua.png") ## 十四、用户研究成果及设计改进：方法A **用户访谈** 时间：2019年6月23日 用户：五位17网新的学生 目标：针对网站的配色、内容风格进行调查，进而改进网站 五位用户给予的反馈 * 朱同学：觉得文章封面显示深色，有点沉重，不符合主题 * 陈同学：认为图片没有文本替换内容，缺乏理解文章 * 江同学：文章摘要文字过多，冗杂，影响美观 * 唐同学：文章的主题色调呈现深灰色，表示不喜欢 * 陈同学：对于一些文章的分类不是很清楚 **改进：** * 设置特色图像，使文章封面看起来美观 * 优化alt标签，补充提示性的文本替换内容 * 自定义摘要内容，避免摘要文字过多 * 将网站的主体色调改为蓝色，据数据显示，群众偏爱蓝色 * 给每篇文章添加分类标签 **影响：** * 网站整体看起来有活力，给人一种愉悦的感觉，可能使用户留在网站的时间长一点。 ## 十五、用户研究成果及设计改进：方法B **A/B测试** 时间：2019年6月23日 用户：八位17网新的学生 目标：针对分享到社交平台的功能做调查 用户反馈： A类网站测试的用户：希望可以有分享的功能，看到好看的摄影集和手绘，想要分享给朋友 B类网站测试的用户：不喜欢缺乏分享功能的网站 **改进：** 采用插件Sassy Social Share，添加分享到社交平台的按钮 **影响：** 增加分享到社交平台的功能，增加了让更多人知道这个网站，从而增加网站的流量，使网站可持续发展 ## 十六、定制化 **方案1** 添加插件WP Content Copy Protection & No Right Click，保护文章版权，防止一键复制。设置如下： ![防止一键复制设置](https://images.gitee.com/uploads/images/2019/0630/193739_c9897b89_1831466.png "WP Content Copy Protection & No Right Click.png") **方案2** 添加插件W3 Total Cache，加速网站，使用户有好的体验。设置如下： ![按章插件W3 Total Cache，加速网站](https://images.gitee.com/uploads/images/2019/0630/193810_d91ecf27_1831466.png "W3 Total Cache.png")