zoukankan      html  css  js  c++  java
  • IGEM网页小白的wiki之旅

      IGEM(国际基因工程机器大赛)wiki的DDL已经过去一个多周了,今天终于克服了懒惰前来总结一下经验和教训,希望能给以后做wiki的同学们一点点帮助,如果有不对的地方也欢迎大家指正!

      先来介绍一下什么是wiki,按照百度百科的说法,wiki是一种在网络上开放且可供多人协同创作的超文本系统,支持面向社群的协作式写作。用人话来说就是,有这么一个网站,大家可以一起用html,css等语言编辑它的网页。参加IGEM的同学们完成自己的项目后需要以多张网页的形式在网上进行展示,以便交(na)流(jiang)。我是从零开始学习的超文本语言,感觉还是挺容易上手的。

      先放一张我们的成果吧~

      这是主页

       这是description页面

       大概就是这个亚子。

       其实wiki组在比赛中后期任务才比较集中,前期我们主要是学(hua)习(shui)和准(mo)备(yu)的过程。网页整体的搭建、内容上传基本是在最后二十天完成的,所以提前了解关于wiki制作的经验,能够让最后几天从容顺利一些。

      好了,废话少说。

    先给目录,接下来介绍什么:

    1. 知识储备
    2. 编写要求
    3. 模板使用
    4. 细节调试
    5. Parts编写
    6. 其他经验总结

    本文介绍了前三条,后三条另一篇文章再补~

     一、知识储备 

      如果你也是前端小白的话,可以先学习一下相关的知识,推荐的几个网站:

      菜鸟教程https://www.runoob.com/

      w3school  https://www.w3school.com.cn/

      html,css,是最基础的,还有javascript,jQuery,对于界面的美化很有帮助,建议边学边做,逐步完善自己的网页。

      二、编写要求

      igem官方平台上网页编写的相关要求,在动手前一定要看一看。当年的judging form出来以后也要仔细看,核对奖牌条件。(参考了https://cloud.tencent.com/developer/news/383760)

      基本要求(必看):http://2018.igem.org/Competition/Deliverables/Wiki

      基本操作帮助(必看):http://2017.igem.org/Resources/Wiki_Editing_Help

      如何使用csshtml和js(必看):http://2015.igem.org/Wiki_Requirements/Using_HTML,_CSS,_and_Javascript

      官方模板说明:http://2018.igem.org/Resources/Template_Documentation

      模板使用说明:http://www.mediawiki.org/wiki/Help:Templates。

      我们在IGEM上面注册、加入自己的团队,队长确认之后就可以编写自己学校的网页了。

      虽然有一些说法是先在本地运行正确后,再上传,但是我的经验是应该尽早尝试IGEM的操作,如果担心改得很难看可以先保留原来的代码再做改动。因为本地运行无误不代表在IGEM平台就是同样的效果,里面有一些自带的css样式,很可能与你的代码有冲突,这些问题后面会详细介绍。总之,尽早熟悉igem的平台,包括编辑代码、上传文件、新建网页、上传template等。

    三、模板使用

      模仿和借鉴是很重要的,在编写之前,要看一看往年队伍的wiki,尤其是获得best wiki的队伍,看一看他们的网页怎样布局的,有什么亮点,还存在什么不足可以改进等等。了解网页的整体结构,比如主页放什么内容,子网页该怎么布局,清楚这些有利于和美工组、实验组同学交流,告诉他们我们需要怎样的素材,以及对这些素材的要求。

      网页编写强烈建议使用模板,这样可以节省很大的精力,事半功倍。用什么模板呢?首推往年其他队伍的模板,网络上的其他模板也可以,但要注意不要侵权。

      模板使用方法:

         1.新建网页。直接在自己队伍wiki的URL后添加自己的命名,将会出现没有内容但可以编辑的提示,点击edit就可以书写代码。注意URL里不要用特殊字符如单引号。比如,你的队伍主页的url是https://2019.igem.org/Team:team_name,那么可以新建一个网页https://2019.igem.org/wiki/index.php?title=Template:team_name/css/style-basic(直接打开这个网址进行编辑),编辑好后根据需要引用该网页就好了。

       引用方法:    

         (1)大括号引用。 比如新建样式表网页的url是https://2019.igem.org/wiki/index.php?title=Template:team_name/css/style-basic&action=edit,那么就要在需要引用这个文件(比如样式表)的代码里用大括号引用该文件   {{team_name/css/style-basic}}

         (2)使用link标签。

         2.写在代码的相应标签里。如果你要用他人的css样式表,把它复制粘贴在<style>标签里就行了,如果是javascript,放在<script>标签里。

      注意事项:

       1.建议将导航栏,footer(可以没有),正文基本样式,用新建模板的方法单独上传,因为几乎每个网页都要用到这些,这样可以缩短代码。

       2.不要用外链到其他网站的代码,因为其他网站的链接有可能会失效。

       3.当修改模板网页的代码后,可能不会立刻看到效果,这时需要先保存模板代码,再重新edit并save所有用到这个模板的网页,再打开时就能看到变化了。

       4.带有&&的js文件,要用link标签引用,否则无法识别,就需要改为if。

       5.新建网页的css样式写在<style>标签里,js写在<script>标签里,这些都要在<html>标签里。

     

  • 相关阅读:
    hdu 6702 ^&^ 位运算
    hdu 6709 Fishing Master 贪心
    hdu 6704 K-th occurrence 二分 ST表 后缀数组 主席树
    hdu 1423 Greatest Common Increasing Subsequence 最长公共上升子序列 LCIS
    hdu 5909 Tree Cutting FWT
    luogu P1588 丢失的牛 宽搜
    luogu P1003 铺地毯
    luogu P1104 生日
    luogu P1094 纪念品分组
    luogu P1093 奖学金
  • 原文地址:https://www.cnblogs.com/jasmine-/p/11768218.html
Copyright © 2011-2022 走看看