原创 [内有红包]【排版】𝓶𝓪𝓰𝓲𝓬𝓪𝓵表格魔法 第二弹 ——音视频插入、不透明度、分割线及杂项 (文字及视频教程)

[Tokur]

	剧透 引言:在本文，阁下将会学到如何插入音视频（像上面那样的音频）、以及一些可以供阁下排版使用的HTML标签。 前言：实际上排版的功能就那些，剩下的基本就只剩创造力和想象力了！只看阁下能有什么样的创意和奇思妙想来运用这些功能！还有就是，虽然说这素一个教程，但素也只是介绍一些新东西罢了x 真正的排版技巧还需要阁下们去探索啊！ 吐槽(bushi)：而想象力和创造力的结合——正是美工！阁下知道为什么幕僚团有个职位叫“排版美工”嘛？因为有美工和没美工的排版差别天大！唔？问我差别多大？本文素以九周年庆帖为模板模仿的，看咱这个贴和九周年庆的差别就知道了x 细节都在边角料里x 如果有美工才能的话，去幕僚团应聘可能会比较受欢迎吧！    咳咳！读书人的事情，不算夹带私货！ 剧透   首先呢！在前言里也说了，本教程其实说不上是教程，只是介绍一些新东西罢了！因此，阁下并不需要阅读咱之前写的教程，两者素独立的！但素，因为需要用到HTML，因此相关概念还是需要知道的！所以咱推荐阅读这个介绍！放心！这个介绍很好懂的！以下的教程咱就会以阁下阅读过这个介绍并理解的前提来描述啦！   然后需要补充的是：“空元素”这一概念并不是说这整个东西是空的，而是说明这个元素使用的标签是个自闭合标签，"属性"还是有的。自闭合标签的概念也是比较好理解的，咱举个例子类比一下——   一组尖括号就是一个人，例如<p>，这种人叫“标签”，尖括号里面第一个词语就是这个人的名字，尖括号里面的其他东西就是这个人身上的衣服，例如<p align="left">，这些衣服叫“属性”，而且大部分都是xxx="xxx"的款式，其中在引号里的东西就是衣服的装饰，叫做“属性值”，而如果这个人穿了不止一件衣服，那衣服和衣服之间就用空格隔开，例如<p class="content" align="left"> 。大部分人还会随身带一个行李箱，这些行李箱会跟在这个人的后边，例如<p align="left">母母说得对！，这些行李箱叫做“内容”，这类带行李箱的人，就叫“闭合标签”；但有些人就偏偏不带行李箱，例如<img>，这类不带行李箱的人就叫“自闭合标签”（也叫"空标签"）。 ——这些是“标签”的人，不管是“自闭合标签”还是“闭合标签”，最终都会通往一个叫“浏览器”的屋子，进这个屋子，需要开门和关门。那些带行李的人就很难受啊“我拉着这么大个行李箱，开门是可以，但是不好关门啊！”——没办法，这些带行李的人只能再找一个人来帮他关门，而这些帮人关门的人，都会把自己名字改成和他帮的人一样，并且加一个斜杠表示“咱是帮人关门的！”，于是开门的人就叫“开始标签”，例如之前举的例子<p align="left">，而这类帮别人关门的人就叫“结束标签”，例如</p>。于是，由开始标签(包括属性)、内容、结束标签组成的东西就叫"非空元素"(注:有没有内容取决于标签是不是闭合标签。只要是哪怕是空格，甚至不输入，也是有内容)，例如<p align="left">母母说得对！</p>；而那些没拉行李箱的人就没关门的问题的，直接在衣服后边贴一条斜杠表示我可以自己关门！，例如<br />，但是有些人嫌麻烦啊！“我这么大个人站在这，有没有行李箱看不出来？”于是就和屋子的管理员HTML商量，HTML表示赞同，从此,自闭合标签进HTML的屋子就不需要贴个斜杠了，例如<br>。但是另一个管理员XHTML就不同意——“你难道想改了祖宗留下来的规矩吗？！”，因此，自闭合标签进XHTML的屋子就须要贴个斜杠，但所幸的是当今浏览器用的都是HTML。但不管贴不贴斜杠，这样的由自闭合标签（包括属性）组成的就叫“空元素”，例如<img src="233.png">。综上，非空元素和空元素统称“元素”，而只有元素才能在“浏览器”这个屋子里，像只有<p align="left">114514这种没有结束标签——只开门不关门的人是会被轰出去的！   至于嵌套元素···阁下就当行李箱里藏了个人吧x  综上！能理解的话，阁下已经对HTML有一定了解了！剩下的部分就完全没问题了！ 剧透   效果如下(志村大爆笑某集):   那么现在先简单介绍一下需要用到的HTML标签——<video>和<source>（注：如果阁下想插入的视频是Youtube上的话，可以直接跳过介绍<video>和<source>的这一段）   首先<video>是一个闭合标签，因此需要<video></video>这样的一个开始、结束；其作用顾名思义，是用来插入视频的。在这里主要用到<video>的controls这个属性，其作用是显示视频的组件（即播放按钮，声音，全屏之类的）其他属性可以参见这里，不过video的autoplay（自动播放）和src（规定视频url）在论坛不让使用。<video>的autoplay无法使用，所以需要用controls显示出组件，才能点击播放；而<video>的src无法使用，所以需要用<source>来规定视频的url（至于为什么是<source>而不是其他的标签，咱也不知道x） （注：<video>的内容可以是文字，浏览器如果无法<video>标签里src指定的视频，那么就会显示文字）   <source>是一个自闭合标签，因此不需要用</source>之类的东西来作为结束标签。这里主要用到其两个属性——type和src（注：<video>的src属性在论坛被禁了不代表<source>的src被禁了）。其中，type的作用是规定媒体的类型，mp4的视频文件就设置属性值为video/mp4，src的值就是你想要插入的视频的外链，总的下来，代码如下: <video controls> <source type="video/mp4" src="视频外链"> </video>   （直接复制粘贴即可x） 至于如何插入这段代码，可以看其他教程或者咱上个教程，或者看咱下面给出的视频版教程   理论层面解决了，但如何拿到视频外链呢？目前有两种情况： 阁下想要插入的视频是在某视频平台上的 阁下有视频的源文件，并可以上传到某个支持视频外链的地方   针对第一种情况: 剧透 B站视频似乎是无法直接插入的，但可以下载下来以第二种情况插入。不过Youtube上的视频是可以直接插入的:打开阁下想要插入的视频的页面，选择分享，再选择嵌入   将右方的代码复制下来，插入到论坛编辑器中即可（插入方法看下方的教程视频版） 效果如下:   针对第二种情况: 剧透 对于第二种情况， 阁下要会用<video>和<source>插入 阁下要有想要插入视频的源文件 阁下能把视频文件上传到一个视频盘 问题3是主要问题，咱找到Catbox这个图床是支持上传视频和音频的，并且最大可以上传200MB的文件，上传后稍微等待半分钟会出现链接，点击即可复制，把链接放到上方的src的属性值中即可，具体可以参照下方的视频版教程 （如果阁下从其他地方找来视频或音频外链的话，需要注意的是：视频仅支持mp4、webm、ogg格式，音频仅支持mp3、wav、ogg格式；链接需要以文件格式结尾才算外链；<source>的type的属性值需要改成相应的文件格式如video/ogg） PS:OpenDrive也是可以上传音频视频并提取直链的 PS:咱通过泰奶奶的这个贴和九周年庆贴发现音频可以用上方代码插入后就试了下视频是否可以，结果发现是可以的 剧透 效果如下: 插入方法和插入视频的一样   但这个时候阁下肯定会疑惑：“诶为什么是video啊？插入音频的话不应该是audio之类的吗?”   诶确实是这样子，本来应该用<audio>的，但是没法使用（指被禁了），于是就用<video>来整了，因为其中的内容依然是用<source>规定的。而<video>规定的内容确实是"视频"，只是只有音频没有画面罢了。但如果还是按插入视频的方法插入音频（但要把<source>里type的属性值改成audio/mpeg或audio/mp3，其他格式仅支持wav和ogg）: <video controls> <source type="audio/mpeg" src="https://files.catbox.moe/bv2gk4.mp3"> </video>   就会得到下面这样的东西:   即组件的上方会出现一片空白，但 ——这是可以解决的。只要在<video>使用style规定长宽即可。宽度看需求设置，没特殊需求且不影响排版可以设置100%（推荐用比例设置），高度最好在50~70px左右，有特殊需求的话看自己情况设置。因此，按下方代码就可以插入正常的音频: <video controls style="width:100%;height:60px;"> <source type="audio/mpeg" src="https://files.catbox.moe/bv2gk4.mp3"> </video>    因此，当阁下插入时只需要复制，粘贴，再把src的属性值换成阁下想插入的音频直链即可(如果是wav、ogg格式的话还需要把type中的mpeg改成wav或ogg)    第一种：阁下想插入的音频在各音乐平台里 剧透   那么这种情况就比较简单，通过这个网站(很遗憾这个网站已经因为版权问题不能用了x，但方法是依然有效的，需要自行寻找类似网站，或者手动改成直链)可以简单获取到各音乐平台的音乐外链，相关教程在网站里有。然后将右方下载用的链接复制过来作为src的值即可。需要注意的是，网易云在外网是被墙的，即港澳台地区和国外可能访问不了网易云。因此部分使用全局代理进同盟的人可能无法正常播放，使用host和PAC模式代理的就没事。     第二种：阁下有想插入的音频的源文件 剧透   和插入视频一样，传到catbox之类的能上传音频的图床，然后用代码插入即可   详细参见视频版教程 剧透   不透明度主要用到rgba这个CSS函数，相当于rgb的进化版，在rgb的基础上多了a——不透明度   CSS函数什么意思呢？首先CSS说明这个东西是要用在style里的（包括<style>和标签的style属性，但咱们编辑是用在style属性里的，这句话可以不管）；函数说明rgba不是一个属性，而是应该作为属性值使用     好！以上说明其实都可以不用管！  例子的话：咱这个贴里蓝色的背景就是用rgba来做的。效果就是透明，可以看到后方的花纹。  那该如何使用呢？这里需要先对表格有大致了解，可以参考魔女酱的教程和咱之前的补充。 ——首先，rgba用在哪里？   答：用在各种设置颜色的属性，例如文字颜色(由<span>的style的color设置)、表格背景颜色(由<table>、<tr>、<td>各自的style的background-color设置)、边框颜色(由<table>、<tr>、<td>各自的style的border-color设置，包括border-left-color、border-bottom-color等)   看起来也许挺杂乱，但都有个特点 ——都是在style属性中设置；所有和color有关的属性都可以用rgba ——其次，rgba该如何使用？   答：格式为rgba(R,G,B,A)，总共有4个值需要输入其中rgb就不赘述了，可以用Snipaste或者浏览器自带的工具提取。其中的A才是重点，a表示不透明度，值要在0-1之间，0表示完全透明，1表示完全不透明，0.5表示50%的不透明。   关于设置就是老套路了，以表格背景为例，插入一个1*1的表格，对表格右键，选择“检查”，   就会出现图片中的下方这栏（注：第一次打开的话会出现在右边，在右上角的三个点中设置位置，推荐设置在下方）   找到下方的<td>...</td>这栏并点击（<td>表示的是单元格，如果要设置整个表格的话就点<table>）   例如我要设置为rgb为(0,0,0)+60%的不透明度，也就是rgba(0,0,0,0.6) [即黑色+60%不透明度]，那么就点击右方的element.style的花括号之间部分来插入属性，打出background-color按回车，再输入rgba(0,0,0,0.6)即可看到效果   当然，仅仅是这样没什么用处。一般来说需要把这个表格放在一个更大的表格里，而大表格把背景设置为一些图片这样才有效果。这样做的主要好处就是背景图片不会干扰到文字的观看。   图片的不透明度需要在PhotoShop里设置（并且保存为png，像jpg的文件格式不存在透明这种东西）   还有一个需要说的是当你保存后，再修改时你可能会看到rgba中A的值被缩写成了.x的形式，例如0.7会被缩写成.7   其他例子将在视频版中说明 剧透   分割线将用到<hr>这个标签，这是个自闭合标签,这个标签相对于手打分割线的最大的好处就是对手机端查看会比较友好；同时还可以做更多的装饰。   至于用法上面都能理解的话，其实也没什么好说的。大致流程就是——在编辑器里随便输点文字内容，例如111——右键，选择检查——找到相应的内容的那一行，右键点击，选择Edit as HTML——然后将<p>111</p>改成<hr>即可，详细操作参见视频。   装饰上，依然是在element.style里设置。不过比较奇妙的是，<hr>的实质是一个表格，因此设置颜色要用border-color设置（而且也能用rgba设置透明效果）但！ ——一个表格有4个边框，<hr>既然实质是表格，自然也有4个"边框"。因此需要使用border-left:none、border-right:none来一个一个关闭边框——但这样太麻烦了！ 依咱个人的做法，推荐直接把4个边框都去掉，用背景来上色，并且设置高度。   具体需要阁下点击<hr>那一栏，把右方的element.style变成这样: element.style{ border:none; background-color:rgba(0,0,0,1); height:1px; }   高度推荐1px，rgba的值自选   同时，你还可以设置分割线的宽度和对齐方式（都是在element.style里设置）   宽度用width设置，值推荐用百分比，例如80%   对齐方式:默认为居中   居左为margin-letf:0   居右为margin-right:0   详细操作还是参见下方视频版教程   至于任意位置放置分割线的话，就懒着讲了，总的来说就是用表格限制宽度，然后让分割线居右 剧透   以下内容包括:line-height(文字行间距),float(浮动)，margin(边距离)并且都是在element.style中设置   line-height是文字上下的行间距，对一段文字设置行间距例如line-height:1px,那么这段文字的上方和下方就会只有1px的空白（但需要注意的是，每一段文字都有上下空白部分，并且文字本身在上方也会有空白，所以如果想要让文字间距尽量小，则两行都要设置line-height）   float一般来说是用来设置图片的，浮动的意思就是说文字会围绕着图片换行，而不是图片占着一大片空白，可以设置为left居左浮动和right居右浮动，需要注意的是，文字的量要求比较大，如果文字不够可能达不到浮动的效果 margin一般来说基本上是个东西就能用,效果是被设置margin的物体在四周都会有一段设定好的空白距离，可以设置一个东西上下左右四个边距，值的效果可以参考以下: margin:10px 5px 15px 20px; 上边距是 10px 右边距是 5px 下边距是 15px 左边距是 20px margin:10px 5px 15px; 上边距是 10px 右边距和左边距是 5px 下边距是 15px margin:10px 5px; 上边距和下边距是 10px 右边距和左边距是 5px margin:10px; 所有四个边距都是 10px   个人推荐使用百分比来设置，这样在平板、手机上的观感会更友好些 剧透 观前提示，对于插入视频而言，如果视频较大，不仅是能不能上传的问题，还是观者流量是否伤的起，网速是否足够快的问题，因此建议上传前自行压缩到合适大小。(插入音乐的话,问题不会太明显) 还有就是插入的视频、音频可能无法用常规方式去除，需要在从代码上去除 插入视频:(如果加载不出来可以点击这里观看或下载源文件) 插入音频:(如果加载不出来可以点击这里观看或下载源文件) 分割线和不透明度:(如果加载不出来可以点击这里观看或下载源文件) 杂项:(如果加载不出来可以点击这里观看或下载源文件)   剧透 The End!! 以上！只要再加上阁下的奇思妙想，相信阁下一定会有一个很好的排版！ 下面内容吐槽以及召唤阵: 剧透   吐槽:咱声音会不会很难听啊QAQ？！请不要嫌弃咱Plz!      咱完成这个花了大约三天时间，文字排版部分就花了一天不到，问题出在录制视频的部分——文件太大之类的，然后就是录制的时候一直在想会不会被嫌弃毕竟还是"身份神必的龙娘好"的吧(为什么有种得不偿失的感觉说起来咱写这个教程也不知道有多少人会看) 不管了！咱还依然素大家的龙娘!···吗？   剧透 @Dorothy @yuleletwo @gocallle @猫系少女卡萌酱 @Kris Dreemurr (咱还是第一次@人，根本不知道@谁，就@了几个最近和咱有聊到排版的和亲友团x)

 

 

 

十月 10, 2021，由Tokur修改

[Tokur]

3 分钟前, 猫系少女卡萌酱 说道:

啊啦 Toku辛苦了 不要忘记把这个加到这里哟 SS人间指南 - 排版教程 - SS唯基 (sstmlt.com)

加了！这算运用特权嘛（大雾）

八月 10, 2021，由Tokur233修改

[Tokur]

17 分钟前, 猫系少女卡萌酱 说道:

唔嘿嘿 当然不算

话嗦saka好像不打算保留视频插入功能的 所以……这会不会被禁啊

好像以前听说矿工整这个被说过

感觉不素影响太大的话，可能应该不会？音频插入用的办法和视频插入是一样的，要禁的话两个就会一起禁了，音频插入在九周年庆帖也有用到！

所以嗦···如果影响恶劣的话···可能会在版规上加上相关的这么一条？

八月 10, 2021，由Tokur233修改

[Tokur]

5 小时前, feirenhjkk 说道:

看了教程似乎有过编程基础的人上手更快，没有接触过的小白也能搞懂，通过标签引出功能可以说是很实用的操作了。

顺便一说我感觉视频版的教程很言简意赅，没有套入过多的专业术语，更容易上手。（真的是在论坛学习了）

题主声音很好听，我感觉不会有人嫌弃的。

也许学过类似MC指令的也能挺快上手？

专业术语咱也不会呀(x)

这个不好说.jpg

[Tokur]

1 小时前, Dorothy 说道:

做得不错，赞一下你的行动力和想法，很多东西可能不算那么新了，但素教程确实还素你第一个发出来，要做好准备喔，但愿没有什么事！

之所以咱一直没有后续，一个素觉得很多想弄的东西都有局限性或者缩教了以后会造成连锁反应，二素确实能比较实用和有新的内容的东西没有挖掘到，三素想看看有没有后辈有想法做可能素咱忽略的内容。不论如何，能有人做真的素太好了呢（x）

发现后就想分享.jpg分享完整个人都变得懒了起来(x),希望人没事.jpg

素诶！有局限性就很难受，一半能用另一半用不出来的那种其实咱感觉，好像就没多少新的东西了x 想象力+美工才是排版的尽头.jpg

能够抱走魔女酱真的素太好了呢(x)

 

 

[Tokur]

1 小时前, lyllily 说道:

什么，排版居然还有进阶吗

其实也不算进阶啦，就素介绍些没说过的东西，可能会用得上？

[Tokur]

1 小时前, xuanwomingren2d 说道:

感觉程序员的话，上手更快吧

这个确实，不过HTML门槛还是不会太高吧x

[Tokur]

1 小时前, barryallen 说道:

发新贴之前先来学学排版

节操变多术.jpg

[Tokur]

4 分钟前, gocallle 说道:

toku酱！排版的神！

又整出新魔法了吗~太强了

哪有啦x

也不算新魔法啦，论坛里其实已经素有人用过了，咱只是整合成教程发出来.jpg

[Tokur]

10 分钟前, fblk 说道:

哇，感谢Taku大大，现在终于懂得怎么插入视频了

好耶！

（咱名字打错了啊喂x）

[Tokur]

1 分钟前, 冰雪残月琉璃殇凤 说道:

大佬教教我排版吖！一对一的那种！

好吖！但素咱也不知道从哪开始教的说

[Tokur]

14 分钟前, 注水的矿工 说道:

说到音频插入还有视频插入~

这里推荐配合表格食用更佳~

 

 

   

 比方说这个样子~这样一来就能带上专辑封面啦~

或许用来分享歌曲什么的会很方便...

当然，如果你是表格大佬的话，能玩出什么花都说不定呢~

另外值得一提的是，油管iframe插件似乎没有被禁用...但是嘛...

毕竟是iframe插件，你敢用的话，或许会变得不幸什么的...

(萨卡sama正在提刀赶来）

好耶！不过说起来咱好像都没怎么关注专辑封面x

排版上的话 iframe可能不会太用的到x？

 

 

[Tokur]

24 分钟前, 注水的矿工 说道:

啊...那个应该是油管插件...

不过...video标签的话...应该一时半会还不会死...

（居然这种事情都没@上我，我很悲伤...）

这样就好，咱试试还能不能整点新花样x

(咱下次一定会@的！！)

(还有下次嘛.jpg)

[Tokur]

13 分钟前, 注水的矿工 说道:

确实，iframe更多的是拿来做其他事情...

不过这玩意感觉安全性挺差的，被杀掉应该是难免的

不过说起来，咱这个贴静静地沉下去，saka大大应该就不会注意到.jpg

[Tokur]

3 小时前, 河城乃藥 说道:

超棒的，想要透明表格很久了

诶嘿嘿~能帮到人就好awa

[Tokur]

4 小时前, yuleletwo 说道:

多么强大！tok

只有咱是fw的世界完成了

不会难的啦，HTML稍微学一下就可以整出来的!

[Tokur]

2 分钟前, vergiy 说道:

这排版真是漂亮，果然要发个好看的贴要好好学习学习才行呢

对吧！排版可素S级武器nanoda！

[Tokur]

2 小时前, MOYI== 说道:

单纯靠回车和图片排版不够了，要多学学新排版技术了。

排版这个东西光是看上去就很累了啊，但是每次要是做出来，真的很nice，而且也很省观看者的时间呢

虽然累但素会有成就感的说

排版省观看时间(x) 折叠立大功(√)

[Tokur]

6 分钟前, 冰雪残月琉璃殇凤 说道:

说起来表格透明是怎么做到的，不是用了背景图片吗？

诶？你说是蓝蓝色的那个嘛？外面一个大表格设置背景图片，然后里面再整一个表格把背景颜色用rgba填充

[Tokur]

3 分钟前, yuleletwo 说道:

但咱还是fw啊，这些东西完全一窍不通啊

不会的啦，去学一下肯定能学会的awa

八月 12, 2021，由Tokur233修改

[Tokur]

2 分钟前, yuleletwo 说道:

咱是懒狗啊，tok你不是很清楚这点嘛qwq，说起来，昨晚上一点多后才睡，没问题嘛

咱现在整天都在论坛里，没事的啦awa

[Tokur]

刚刚, yuleletwo 说道:

没问题的嘛，对身体很不好哦，作息还是要正常的。说起来你成百富美了耶

习惯了就好（bushi）

现在已经Wiki组的一个摸鱼编辑者了

[Tokur]

1 分钟前, 六尾妖姬 说道:

给dalao跪了（不过这么看来排版好看还是得能自己作图啊 悲）

入门级别的PS技术罢了！标题框什么的用PS就整好了

其他的图网上拔下来，稍微用PS处理下就可以拉出来用了

八月 12, 2021，由Tokur233修改

[Tokur]

刚刚, yuleletwo 说道:

工作会很多嘛owo，还有那种事情无论如何都不是习惯就能好的吧，咱之前熬夜的代价全部返还嘞

不会很多喔，而且泰奶奶他们很和善的说

说起来你头像怎么没了呀

[Tokur]

刚刚, yuleletwo 说道:

刚刚换了一个

蒋蒋！Yul酱变成了鸽子！(bushi