互动教学经验-第30讲-快速制作本地文件的点播单
最近接到一个技术咨询，就是面对上级检查时，准备的各种资料都已经汇集到某个文件夹中，请问如何用点播的形式去打开和查询，点播的界面最好还要有单位的标识等等。
经过N多天的思考和软件测试，发现这个需求可以从三个方面来解决。
首先，我们需要将文件夹下所有子文件夹及文件进行扫描并生成带有链接的列表网页文件（推荐使用Directory Lister）
其次，由于生成的网页列表文件中所有链接都是采用绝对路径，也就是说当文件夹换位置时（例如复制到U盘）会导致链接失效，所以我们要将网页所有绝对地址全部转换成相对地址（推荐使用Sublime Text）
最后，对网页列表文件进行美化处理（推荐使用WORD2013、WPS2019）并生成PDF文件
展示PDF可以使用PDF-XChange Editor软件
让我们先看看演示的效果
本地文件点播单的使用演示_腾讯视频 制作一个要花多少时间呢？最多也就10分钟。
本地文件点播单制作过程_腾讯视频 特别说明：
1、为什么不直接用网页列表文件进行展示？
这是因为网页文件是通过浏览器打开的，常见的图片、音频会在浏览器中直接打开，但Word文档、Excel表格或者其他格式文件点击链接会转变成下载，所以不适合。但如果要展示的内容只是图片、pdf、音频、视频，那可以直接用网页列表文件。
2、为什么不用WORD或者WPS打开网页列表的形式进行展示？
在编辑模式下，点击链接打开只有按住CTRL键不放+鼠标单击的方式，这样操作不方便。在阅读模式下，只有链接内容，页面背景等美化全部没有了。
3、为什么展示PDF使用PDF-Xchange Editor软件？
因为经过测试，在这个软件中打开PDF中的链接会直接打开，不会提示下载，而且展示的方式可以全屏，双页等多种形式。
一、生成链接列表网页文件
Directory Lister网盘下载地址：https://pan.baidu.com/s/1PmCp8BFXD9zkbM52WhnQ8g
（一）注册及中文界面
全部解压后，执行文件夹中的“DirListerPro.exe”
文章图片
文件夹内容 启动后，点击“Language”菜单中的“Simplified Chinese”切换为中文界面
文章图片
设置中文界面 点击“帮助”菜单中的“关于……”进入版本界面
文章图片
关于软件信息 点击“输入注册码”
文章图片
输入注册码 导入软件所在文件夹中的“DirListerProKey.txt”即可完成注册
文章图片
导入注册信息文件 （二）设置生成选项
选择要生成列表的文件夹，建议只针对一个文件夹进行生成，这样方便制作出可以改变位置的便携版本列表。选择好后就可以在右下角看到预览效果。
文章图片
选择文件夹 对每一个选项可以实时在预览区看到效果，通常情况下我只针对这几项进行设置，有兴趣的可以尝试其他选项。
文章图片
“标准列”中只保留扩展名的设置 
文章图片
“显示”中的设置 
文章图片
“输出类型”的设置 
文章图片
“HTML”的设置 
文章图片
“程序选项”的设置 （三）保存
当所有设置符合自己要求后，就可以点击保存按钮生成网页文件，特别注意的是保存位置应当在生成文件夹内！
文章图片
保存文件 直接双击生成的网页文件，会使用浏览器进行显示，点击可打开相应的文件链接。
文章图片
浏览器显示内容 二、编辑列表网页文件
Sublime Text网盘下载地址：https://pan.baidu.com/s/1FduP3raq04F7Oh9VCFaciw
（一）打开文件
全部解压后，执行文件夹内的“sublime_text.exe”。
文章图片
文件夹内容 点击“文件”菜单中的“打开文件”，找到生成的网页文件，打开即可。
文章图片
打开文件 
文章图片
打开后的网页代码 如果学过网页制作的朋友，就知道在这里可以任意调整网页的布局、颜色等等。没有学过也没关系，因为我们这里只修改其中几个地方就行，照着操作就好了。
（二）转换绝对路径为相对路径
点击“查找”菜单中的“替换匹配值”，或者按CTRL+H键
文章图片
替换 拖动滚动条或者使用滚轮向下，找到第一个显示文件路径的地方，如下图所示的D:\花球\，将这个信息复制或者输入的方式到Find中的框内，再点击右侧的“Replace All”按钮进行全部替换。此操作方法就是把所有绝对路径转成相对路径！
文章图片
去掉所有绝对路径 设置好后可以直接点击“文件”菜单里的“保存”完成，此时已经可以使用了。
三、美化及导出PDF
（一）表格列表美化
使用Word打开网页文件
文章图片
打开后选择整个表格 点击表格左上角的符号，选择整个表格，然后进行调整。
1、设置文字大小和表格居中
文章图片
设置表格文字大小和居中显示 2、删除不需要的表格行
根据情况，鼠标右击需删除的行，选择“删除行”即可。
文章图片
删除行 3、设置行高和对齐方式
文章图片
设置行高和对齐方式 （二）页面美化
主要是在“插入”菜单中设置封面、页眉页脚，在“页面布局”中设置纸张方向、页边距、分栏显示，在“设计”菜单中添加水印、设置页面背景等。
文章图片
设置页面效果 （三）导出
点击“文件”菜单中的“导出”，可以直接创建PDF
文章图片
创建PDF 四、PDF展示
PDF-XChange Editor网盘下载地址：https://pan.baidu.com/s/1eOQ69OCh-LJ7u47b8M4czQ
全部解压后，双击文件夹中的“PDFXEdit.exe”
文章图片
启动软件 （一）安全选项设置
为了点击PDF中的链接不弹出提示，需在“文件”菜单中的“首选项”中进行设置。
文章图片
选项设置 将“安全性”中的三个都设置为“允许”，然后确定即可。
文章图片
安全性设置 （二）全屏及双页显示
点击“文件”菜单中的“打开”，选择“浏览”打开生成的PDF文件。
文章图片
打开文件 点击右上方的全屏按钮进行全屏显示。
文章图片
全屏显示 全屏模式下，在左下方，可以设置为双页显示、缩放、退出全屏。
文章图片
设置双页显示 双页全屏显示的效果，此时点击即可打开预览
文章图片
双屏显示效果 五、提高篇——网页美化
如果学过基本的网页代码制作，那么可以直接在代码编辑器中对网页代码进行美化处理，从而生成更精美的网页列表文件。
（一）正文链接的设置
文章图片
正文链接的设置 正文有两个地方需要设置（因为采用了颜色交替显示），首先找到网页代码前面的值。
1、.dirlistertable td
这里可以设置的有
（1）删除链接背景色：删除代码中的background-color:#ffffff;
（2）设置文字颜色：修改原代码color:#0678a4为color:#000000（代表黑色）
（3）设置文字颜色：修改font-size:8pt中的数字，例如将8修改为22。
文章图片
修改后的代码 2、.dirlistertable .e td
文章图片
另一处正文的原始代码 可以参照前面进行设置，如想实现文字颜色的不同，可设置文字颜色为其他色，如红色#FF0000，绿色#00FF00，蓝色#0000FF
文章图片
修改后的代码 （二）设置文件夹标题栏背景色和文字颜色
文章图片
标题栏的原始代码 找到代码中的.dirlistertable .d td
可根据情况修改其中的背景色、文字颜色和文字大小，这里设置的是背景色为蓝色，文字颜色为白色，文字大小为22。
文章图片
修改后的代码 修改完毕进行保存，然后打开预览效果
文章图片
效果演示 六、其他目录展示
【互动教学经验-第30讲-快速制作本地文件的点播单】对网页进行代码美化或者在WORD中进行页面美化，可以生成多种不同的风格，从而构建自己的本地资料清单。
文章图片
本地歌曲清单 PPT课件模板清单 
文章图片
小说清单 如果您喜欢我的文章 ，请关注教师信息技术提升-互动教学及课件制作技巧，教师信息技术提升-软件分享，点赞和打赏能激发更多的分享。
推荐阅读
- 慢慢的美丽
- Ⅴ爱阅读，亲子互动——打卡第178天
- “成长”读书社群招募
- 历史教学书籍
- 唱歌教学（导致嗓音损坏的几个常见的错误唱歌方法！）
- 姚老师互动问答会|姚老师互动问答会 # 问题001（如何更有智慧的和身边人分享金刚智慧（））
- 我在管理实验班中的一些经验教训
- 教学常规漫谈（老王唠教育）之142
- 《磁铁能吸引什么》教学反思
- 师徒结队，教学相长