词典制作：从一个简单的图片词典开始

技术交流与词典编修
3

四、加入样式表（CSS）

我想给图像加上底色，还想让上下页居中显示……

1.图像词头

  1. 同“二、加入上下页导航1.1”，在Em中制作成三列页码。

  2. 查找：

^(\d{3})\t(\d{3})\t(\d{3})\n

替换为：

GHMY\1\n<link href="古汉名言.css" rel="stylesheet" /><img src="GHMY\1.png"><zm><a href="entry://GHMY\2">上一页</a> <a href="entry://GHMY\3">下一页</a></zm>\n</>\n

2.文字词头

同“二、加入上下页导航2.”。

合并两个文本文件，打包，完成。

3.样式表

img {width:100%; background-color:#fcf6ee;}
zm {display:block; text-align:center;}

保存到文本文件中，并重命名为“古汉名言.css”。

4.操作说明

词条其实就是一个个简略的网页，所以要调用样式表，每个词条都要加上。
图像宽度在css中设置，更便于控制。

<zm> 是个自定义标签，其实并不是个好名字。这是个历史遗留问题。

要让“上下页”居中也可以使用标签
<center>要居中的文字</center>
虽然这个标签已不推荐使用，但各词典软件都能支持。

五、制作成“伪图文版”

1.图像词头

同“ 四、加入样式表1.”

2.文字词头

  1. 打开Excel索引表，选中B列→设置单元格格式→自定义：000
  2. 全选复制到Em中，查找：
^(.+)\t(.+)\n

替换为：

\1\n<link href="古汉名言.css" rel="stylesheet" /><hw>\1</hw><br><a href="entry://GHMY\2">第\2页</a>\n</>\n

合并两个文本文件，打包，完成。

3.样式表

hw {display:inline-block; font-size:24px; color:#000064; font-weight:400;}
hw:before {content:"【"; color:#800000; font-size:.9em; }
hw:after {content:"】"; color:#800000; font-size:.9em; }
a:link {color:currentColor; text-decoration:none;}
a:visited {color:currentColor}
a:link:hover {color:#b30015}

img {width:100%; background-color:#fcf6ee;}
zm {display:block; text-align:center;}

保存到文本文件中，并重命名为“古汉名言.css”。

9 个赞