贾迎博 2020-12-21 16:00:42

官网整体架构及注意事项说明

官网文件结构

tl.changyou.com
├─ css           // css 文件
├─ download      // 落地页
├─ inc             // 碎片文件
├─ js             // js文件
├─ logo             // 通调的logo文件
├─ 404.shtml
├─ favicon.ico
├─ index.shtml
└─ main.shtml

  1. 建议仿照搭建官网结构

  2. 样式文件统一放在“css”文件夹内，其中，reset.css必备

    2.1 reset.css必备，页面必须引用

    2.2 全站共通样式，请单独样式global.css文件保存（例如全站导航、页面背景等）

    2.3 二级页面（列表页list.shtml、新闻内容页cont.shtml、下载页/download/index.shtml等）的样式，统一放在统一样式文件中subpage.css

  3. 脚本文件统一放在“js”文件夹内，建立原则参考样式文件

  4. 碎片文件统一放在“inc”文件夹内，建立原则参考样式文件（通用代码碎片化）

    4.1 public_js_cyou.html:通调头尾碎片，所有页面必备，头尾颜色、具体配置由主编提供

    4.2 dma.html:监测代码碎片，所有页面必备，代码内容由主编提供

  5. logo文件放在“logo”文件夹内，文件名称：游戏名_logo.css(例：sl_logo.css)

  6. index.shtml:cover页面

  7. main.shtml:首页页面

  8. demo中提供的js、css等文件可以使用，也可使用外包商自己的，本官网不涉及的文件，打包时请删掉

参考结构：

img1

logo调用方法

sl_logo.css :

.main-logo {
    width: 159px;
    height: 74px;
}

.main-logo a {
    background: url(/logo/logo.png) no-repeat;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -999em;
    overflow: hidden;
    background-size: 100% 100%;
}

页面代码：

<div class="logo main-logo">
    <a href="/main.shtml" title="新天龙八部官方网站">新天龙八部官方网站</a>
</div>

页面样式代码：

@import url('/logo/logo.css');
.nav-menu .logo {
  left: 77px;
  top: 15px;
}

页面内容注意事项

【head】

页面tittle、关键字、页面描述、icon、样式调用

<head>
    <meta charset="utf-8">
    <title>经典怀旧•新天龙八部端游—10.16不删档开启</title>
    <meta name="keywords" content="天龙八部，新天龙八部，怀旧版，怀旧服，天龙怀旧，天龙八部怀旧" />
    <meta name="description" content="经典怀旧•新天龙八部端游 不删档测试预约开启" />
    <link type="image/x-icon" href="/favicon.ico" rel="icon" />
    <link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="css/reset.css">
    <link type="text/css" rel="stylesheet" href="css/global.css" />
    <link type="text/css" rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper.min.css">
</head>

【碎片、脚本调用】

  1. 请在调用其他脚本之前引用头尾碎片
  2. 为避免相对调用出现一些不可预料的问题，脚本调用从根目录开始
  3. 请在调用其他脚本之后引用监测代码碎片
<!--#include virtual="/inc/public_js_cyou.html" --> <!-- 通调头尾碎片 -->
<script type="text/javascript" src="//www.changyou.com/cyou_share/cyoushare.js"></script>
<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<script src="http://www.changyou.com/cyouFile/commVideoPlayer/commVideoPlayer.js?v2"></script>
<script src="http://js.tv.itc.cn/m/player/inc-all.js"></script>
<script src="http://www.changyou.com/cyouFile/videoHack/videoPlayHack.js"></script>
<script type="text/javascript" src="/js/lib/swiper.min.js"></script>
<!--#include virtual="/inc/dma.html"--> <!-- 监测代码碎片 -->

官网QA内容

【监测】所有页面需要调用/all/dma/dma_static.html监测文件
【注册地址】页面账号注册的全链接、参数、参数值，同主编确认
【浏览器】主要浏览器下非全屏没有变形错位
【浏览器】页面效果与PSD设计稿相一致
【分辨率】各分辨率下没有背景错位
【内容】页面logo是否存在且与官网一致
【内容】页面中前台显示无乱码
【内容】页面title、keywords、description代码、内容完整且符合规范
【内容】一键分享内容、链接完整正确，弹出框在980之内（只限专题，官网无一键分享）
【内容】头尾通调使用正确，版权条颜色合理
【内容】按钮类链接title、图片alt标签是否齐全，并于图片内容一致
【样式】内容部分样式例子齐全，标签按照规范设置（内容页标签文档）
【样式】链接、按钮滑过有手型变换
【脚本】主要浏览器无报错
【脚本】js效果显示一致，功能使用正常

分享调用方法

img3

img4

碎片应用方法

<!--#include virtual="/all/nav/tlhj_white.html"-->
<!--#include virtual="/all/dma/dma_activity.html"-->
碎片调用文件说明：
1.请使用标注格式调用
2.如出现碎片中调用其他碎片的情况，请使用shtml格式的文件，不要使用inc或html等其他格式的文件

新闻页内容样式规范

参考现在官网

官网已有新闻依赖已定样式，编辑同学依据现在的样式进行发新闻

新版内容页面：尽量保留现在的样式调用，可以微调颜色、字体大小、行高、加粗、标红、间隔等。

一般默认h3/h4小标题

.center 居中

.alight 标红强调

strong标签 加粗

img2