# Web_Operations **Repository Path**: fishyt/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: Web_Operations - **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 # 文传影视工作室 中大南方分享影视作品的网站，以满足中山大学南方学院全体人员的对于摄影的需求，同时向外界展示文学与传媒学院的摄影成果。 站长：余涌腾 URL:[文传影视工作室](http://ytmario.me/) 网站由中山大学南方学院 文学与传媒学院 网络与新媒体1班 余涌腾制作 培养方案核心课程学期作品，由 吴雪老师，胡美香系副主任 指导 网站搭建和模板来自于Wordpress ### 产品文档 1. 策划文档 1. 网站地图 1. 图片的使用 1. 3篇云端架站踩坑图文文章 1. 平面设计 1. 云端网站管理 1. 站长工具 1. 用户研究 ### 一、策划文档 **1.网站建设目标** 1.可以满足中山大学南方学院全体人员的对于摄影摄像的需求，向外界展示文学与传媒学院的摄影成果。 2.让更多人了解中大南方，扩大中大南方在外界的知名度。 3.能快速准确的查找文学与传媒学院范围以内的摄影作品。 **2.目标用户画像** 1) 用户访谈（五个人） 我（提问一）：同学，你好，你平时喜欢看什么类型的网站？不喜欢什么类型的网站？ 我（提问二）：麻烦你看一下我的网站，提一下建设性建议。 用户一（回答一）：喜欢看学术性网站。 用户一 (回答二）：建议右边的侧边栏可以删除；文章的内容可以更加丰富，基本上没其他问题。 用户二（回答一）：我平时喜欢看视频类网站。 用户二（回答二）：哇，这个网站是怎样做出来的~这网站颜色搭配很喜欢。基本上没什么问题，就是加载比较慢。 用户三（回答一）：恩·····喜欢看逗比类型的网站，文字也有，不过视频比较多。那个段子手网站，我忘记名字了，主要看网站内容。 用户三（回答二）：可以改一下文章的排版，多样化一点。 用户四（回答一）：喜欢看传播类网站，比如视频网站，不喜欢学术性网站，比如知网。 用户四（回答二）：排版挺整齐的，可读性强。就是内容可以再丰富一点。 用户五（回答一）：我平时看图片类网站，比如花瓣网之类的。我最讨厌那种学术类网站，比如知网，平时课程需要才使用。 用户五（回答二）：这网站标题非常的清楚，网站内容很清楚，就是排版有些拥挤，然后，首页的文章可能比较少。 首页的图挺好看的，你可以加一些导航栏，侧边也挺好看的。 **3. 用户体验地图** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/130527_d836c747_2260786.png "214639_624b9167_2173189.png") **4. HCD 框架 ** 1) **整合——将灵感变成想法。** - 刚开始灵感：中大南方具有几个主要网站，除了官网之外还有几个学院的网站，但是缺少一个专门涉及一个领域的网站。同时，中大南方其实有几个工作室的作品可以出来展示，但是缺少一个大的平台； - 变成想法 ：可以做一个涉及摄影领域的网站，既可以展示中大南方学生在老师协同下做的作品，又可以分享一些摄影赛事，提供比赛渠道，又可以分享经验。 2) - **脑暴** :鼓励团队成员大胆思考，毫无约束。 - **初期** ：进行用户市场调研，调查对此类型网站的需求。 - **中期** ：在小组内进行讨论，决策网站结构和网站配色，整体的文章排版和小细节。 - **后期** ：进行网站设计，根据前期调查和预想的结果进行添加和重新排版。 3) **原型** 进行网站框架的构思，绘制了网站地图 4) **反馈 ** : 对网站进行初步设计之后，返回进行用户调研，寻求用户对该网站优化提供建设性建议。 主要提问两个问题： - 1.平时喜欢看什么类型的网站？不喜欢什么类型的网站。 - 2.麻烦你看一下我的网站，提一下建设性建议。 用户反馈： - 网页页面建议更加简洁； - 可以压缩图片大小，加快网页加载速度; - 可以多增添文章的多样性; - 尽量丰富网站内容; - 排版建议更加简洁好看; **5.根据用户调研的结果进行目标的调整** 调整右侧边栏：原先侧边栏只是展示了文章的分类，后期删除右侧边栏，将文章直接展示在主页中，整个网页内容简洁明了 **6. DVF 模型** - Desirability——可行性 1.目标人群： 南苑设计人群或者摄影爱好者 2.功能： 注册网站之后，可以寻找与自己相同的爱摄影的人群，同时可以浏览中大南方校园中的摄影作品，甚至可以了解一些摄影比赛，当然可以了解一些摄影类的教程。 3.优势： 提供第一个分享摄影作品的平台，用户能在此网站学到一些摄影类教程，同时能实时的了解校内校外的比赛进程，提高自己的摄影能力和审美能力 - Viability——可能性 1.中大南方缺少摄影类网站，同时没有一个能汇集中大南方摄影作品的网站。 2.中大南方官网上提供许多比赛资讯，艺创公众号和文传公众号上都提供一些作品展示的资源，充分的为网站内容提供了一定的渠道。 - Feasibility——有利条件 1.外界环境： 中大南方没有一个专门的摄影类网站，并且大型的摄影网站，比如站酷，花瓣，追波这些网站的用户都是面向外校摄影人群 2.内部因素： 该网站有准确的主题，排版结构简洁合理，并且用户人群范围小，能在小范围的地方推广。 ### 三. 图片的使用 1.非原创的每张图片都要有版权交待，且有超链接，如下图： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/132250_4566209f_2260786.png "微信图片_20190921132239.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/132259_e04ed592_2260786.png "微信图片_20190921132234.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/132306_587e39f9_2260786.png "微信图片_20190921132229.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/132313_0e550f33_2260786.png "微信图片_20190921132225.png") 2.图库风格及配色： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/225452_dda1b5c4_2260786.png "微信图片_20190630225441.png") 解释说明：网站主题是摄影，图片涉及到人物摄像和公艺建筑景观。更多图片偏向于暗沉，色彩深黑。与设计的主题相契合。 ### 四.3篇云端架站踩坑图文文章： - [亚马逊云架设WordPress博客-上](http://ytmario.me/2019/06/27/%e5%b0%8f%e7%99%bd%e8%8f%9c%ef%bc%89%e4%ba%9a%e9%a9%ac%e9%80%8a%e4%ba%91%e6%9e%b6%e8%ae%bewordpress%e5%8d%9a%e5%ae%a2-%e4%b8%8a/) - [亚马逊云架设WordPress博客-中](http://ytmario.me/2019/06/27/%e4%ba%9a%e9%a9%ac%e9%80%8a%e4%ba%91%e6%9e%b6%e8%ae%bewordpress%e5%8d%9a%e5%ae%a2-%e4%b8%ad/) - [亚马逊云架设WordPress博客-下](http://ytmario.me/2019/06/27/%e4%ba%9a%e9%a9%ac%e9%80%8a%e4%ba%91%e6%9e%b6%e8%ae%bewordpress%e5%8d%9a%e5%ae%a2-%e4%b8%8b/) - ### 标题五.平面设计 1.背景,字体使用： 本网站的背景采用黑色调的摄影作品作为banner，描述性文字契合“摄影”的主题，采用暗色调是为营造深沉风格，如图： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/230005_4814ec44_2260786.png "微信图片_20190630225954.png") 2.网站配色： 使用了黑白灰 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/230118_e9e1c8a5_2260786.jpeg "17403251fa7858dc94f9628245efaf68.jpeg") 黑白灰的无情绪能很好地体现高级感，由于黑白灰的简洁、现代、高级感，科技产品、页面中很多是黑白灰配色。黑色的主基调呈现出了沉重的现实感 3.对比度和可读性： 本网站使用黑色作为主题色，而白色和灰色则为字体主颜色，选择色彩均匀统一的背景，文字部分可以与之构成对比，对比度高。 本网站首页的文章采用首字母字体加粗和放大的处理，为了更加强调摘要 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/230857_63e7c372_2260786.png "微信图片_20190630230829.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/230913_89dcf6ac_2260786.png "微信图片_20190630230845.png") 4.平面设计插件运用 1）Animate it!的两处运用 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/231121_af53a21b_2260786.png "微信图片_20190630231104.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/231130_f38cfba9_2260786.png "微信图片_20190630231034.png") 2）SiteOrigin的三处运用 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190514_4448972c_2260786.png "微信图片_20190921190455.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190525_7341b3ff_2260786.png "微信图片_20190921190458.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190537_ce0f943a_2260786.png "微信图片_20190921190445.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190549_a50651b3_2260786.png "微信图片_20190921190440.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190557_a7c3a368_2260786.png "微信图片_20190921190451.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/190605_42c5bc9a_2260786.png "微信图片_20190921190448.png") ### 六.云端网站管理 1.云端架站：正常可用的云端网站，使用域名 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/231359_635fb267_2260786.png "微信图片_20190630231349.png") 2.网站安全：使用Wordfence ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/231501_3871b4a9_2260786.png "微信图片_20190630231453.png") 通过此监控了解到自己网站的安全性很好。 3.网站性能：使用site24x7，添加8个监控地点 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232030_824ce850_2260786.png "微信图片_20190630232000.png") 此监控了解到我的网站的性能正常。 4.网站备份： 1)登陆winSCP： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232118_c2354e88_2260786.png "微信图片_20190630231639.png") 2)wp-config.php备份本地： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232136_0227f592_2260786.png "微信图片_20190630231642.png") 3)插件（Wordpress Database）备份“数据库文件”: ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232224_be064e74_2260786.png "微信图片_20190630231644.png") 4)wordpress后台导出工具导到本地: ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232251_3b67774c_2260786.png "微信图片_20190630232243.png") ### 六.站长工具 1.baidu,bing，站长认证： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232417_06c77ef6_2260786.png "微信图片_20190630232406.png") 百度： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232550_3a4f7c48_2260786.png "微信图片_20190630232538.png") bing： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0630/232702_02b95f4f_2260786.png "微信图片_20190630232652.png") **SEO优化** 1.优化“文章”网页URL 更改“文章”页的链接长度 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0923/114251_81358be4_2260786.png "微信图片_20190923114232.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0923/114826_140262f5_2260786.png "微信图片_20190923114813.png") 2.关键词优化 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0923/115104_f21e32ed_2260786.png "微信图片_20190923115033.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0923/115111_93ebf54c_2260786.png "微信图片_20190923115050.png") ### 用户研究方法设计改进： 方法A:左边的侧边栏内容调整——原先在前期用户调研中，用户反映说侧边栏内容过于不明确，显示全部内容文章，跟右侧内容重复。经过调整，将侧边栏删去。将“近期文章”，“功能表”放置于“主页”下。如图： ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/191149_8cd9fd2d_2260786.png "微信图片_20190921191136.png") 方法B：关于“文章”页面的排版，前期有用户反映说，文章的排版过于拥挤，没有视觉重点，文字和标题大小一样。经过调整，将文章的摘要去除，使用轮播图展示文章内容，并且重点突出文章图片。 ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/191320_f98988ef_2260786.png "微信图片_20190921191309.png") **2.定制化** **网站定制化方案A：使用CSS更改底部菜单高度，满足用户对于底部菜单栏太高的需求。** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/191419_f7bb51a5_2260786.png "223221_6ac9f232_2173189.png") **网站定制化方案B：使用 WP Content Copy Protection 插件，实现网站内的图片禁止下载本地端的操作，预防图片版权被使用。** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/191441_3a7fd67b_2260786.png "232151_3b9e5adc_2173189.png") ### 文本编辑： **页面名称规范性：每个页面URL都使用了英文与页面中文名称含义一致** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/192905_a80b38a4_2260786.png "微信图片_20190921192853.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/192915_e6405fb8_2260786.png "微信图片_20190921192850.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/192924_638a134c_2260786.png "微信图片_20190921192845.png") **文章名称规范性：每个文章的URL都使用了英文与文章中文名称一致** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193210_a415e9ed_2260786.png "微信图片_20190921193115.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193221_9d367939_2260786.png "微信图片_20190921193111.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193229_2de6dbc8_2260786.png "微信图片_20190921193108.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193241_e83075a2_2260786.png "微信图片_20190921193105.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193253_9b803c95_2260786.png "微信图片_20190921193102.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193302_4435abae_2260786.png "微信图片_20190921193059.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193312_06bfc671_2260786.png "微信图片_20190921193056.png") **“页面”“文章”名称规范性合理：从首页、或侧边栏等位置看文章/页面标题，每篇标题都能展示出意义** ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193643_b30cf550_2260786.png "微信图片_20190921193615.png") ![输入图片说明](https://images.gitee.com/uploads/images/2019/0921/193651_49ff8d30_2260786.png "微信图片_20190921193611.png")