本文将帮助您在封面页上实现垂直条纹，以实现小册子的输出。当您为小册子输出设计封面时会非常实用。这可以通过创建和修改自定义模板来实现。
本文将帮助您在封面页上实现垂直条纹，以实现小册子的输出。当您为小册子输出设计封面时会非常实用。这可以通过创建和修改自定义模板来实现。（如何创建自定义模板）
在这种情况下，相关的基础模板是小册子的经典（主题）模板。创建模板后，将打开模板编辑器，然后，您需要按照以下说明在封面上添加条纹：
-
在模板编辑器中，导航到Page Types（页面类型）并创建一个新的页面类型-建议将该页面类型命名为CoverPage.html，然后，您需要选择克隆现有页面类型并克隆Standard.html。
-
选择CoverPage.html，然后单击工具栏上的Edit（编辑）按钮。
-
用以下HTML替换新页面类型的</body>部分。
<body OnLoad="OnLoad()"><div class="verticalStrip1"> </div> <div class="verticalStrip2"> </div> <div class="verticalStrip3"> </div> <div id="i-cover-page-heading-content" id="i-cover-page-heading-content" style="padding-left:80px"><!--DXMETADATA start type="BookletHeading" --><!--DXMETADATA end--> </div> <div class="i-body-content" style="padding-left:80px" id="i-body-content"><!--DXMETADATA start type="TopicSection" name="BodyText"-->Body<!--DXMETADATA end--> </div></body>
-
添加样式规则，以将条纹插入页面。您需要将样式规则添加到项目中的自定义样式表中（如果您希望将其包含在具有不同颜色的不同项目中），或者将样式规则添加到自定义模板的自定义样式表中（如果您有多个希望使用相同品牌的项目）（如何将新样式表添加到您的项目/strong>）
-
一旦确定了样式规则的保存位置，就需要打开自定义样式表并插入以下内容：
.verticalStrip1 { position:fixed; top:0; left:0; width:20px; opacity: .4; background-color:blue; height:100%; } .verticalStrip2 { position:fixed; top:0; left:20px; width:20px; background-color:red; height:100%; } .verticalStrip3 { position:fixed; top:0; left:40px; width:20px; background-color:black; height:100%; }
-
保存更改-对于模板，您需要关闭模板编辑器，这将提示您保存更改-按Yes（是）。您还需要关闭之前的样式表-系统将提示您再次保存更改-选择Yes（是）。
-
选择要在Booklet Profile中使用的自定义模板-您可以在Booklet Profile Editor中执行此操作，方法是右键单击构建配置文件并选择Edit（编辑）。切换到模板页面，然后导航到Booklet Topics（小册子主题）模板下拉菜单，然后选择新的自定义模板。如果您有多个小册子构建配置文件-您需要确保在封面上使用这些垂直条纹的每个配置文件中都使用此新的自定义模板。
-
将封面主题的页面类型设置为Coverpage.html。在项目资源管理器中选择封面，然后导航到属性窗口（在左下角）。 在此处，展开Page Types（页面类型）的下拉菜单，然后选择Coverpage.html。
这将在内容的左侧显示三行-一条是蓝色，具有不透明度值，第二条是红色，第三条是黑色 您可以添加更多行，也可以根据需要删除行，方法是在第1节中添加另一个
并在第2节中添加另一个样式选择器，并调整其余内容的填充。您还可以通过更改第2节中的CSS来更改颜色和大小。
完成此操作后，您的输出应如下所示：
如果您对上面的问题有什么疑惑或者建议都可以在评论区留言，大家一起讨论。
如果您对Document! X和HelpStudio感兴趣，可以咨询在线客服购买正版授权软件。
关注慧聚IT微信公众号 了解产品的最新动态及最新资讯。
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！