自动化HTML创建

时间:2014-11-02 21:16:58

标签: html css scripting adobe-brackets

我正在研究简化出版过程的方法。我从作者那里收到原始文本和图像,在MS Word中格式化,处理/上传和在2列表中引用图像URL,然后将文本转换为HTML。我将HTML包装在CSS中,以便以预先确定的方式显示图像和文本以符合我们的网站格式。

对于我自己来说,这个过程非常容易通过Word,Safari,Automator(我创建了一个自动执行大多数CSS注入和HTML调整的脚本)和Brackets,但现在我们正在扩展,我需要额外的帮助,这个过程对某些人来说有点棘手。而不是试图向某人教授CSS编码,并且因为不是每个人都有MAC使用自动机我配置它的方式,我希望能够找到一种理想的方法将HTML粘贴到表单中,并拥有它用包裹在上面的CSS吐出代码并准备好了。

完成的工作的一个例子如下:

    <div class="divv12">
<p style="text-align:center;"><span style="font-size:18px;"><span style="color:#000;"><strong>Aerosoft - Bologna X</strong></span></span>
    <p style="text-align:center;"><span style="font-size:14px;"><span style="color:#000;"><em>A review by Maxim Pyankov</em></span></span>
    </div>
<div class="divv11">
    <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/040.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/040_T.jpg" class="img111"></a>
<p>&nbsp;</p>
<p>Bologna Airport (LIPE; BLQ), officially known as Bologna Guglielmo Marconi Airport, is an international airport serving the city of Bologna, Italy.&nbsp; The airport is smaller in size, when compared to some other international airports, with just the one runway and 20-plus gates.&nbsp; Nevertheless, it is the seventh busiest airport in Italy, with a wide range of European destinations.</p>
<p>&nbsp;</p>
<p>For me personally, this was my first payware package, representing an Italian airport.&nbsp; I have been looking for an Italian gateway for some time, and as such was very excited to have an opportunity to evaluate this product.&nbsp; This product was developed by MK Studios, and is available from the Aerosoft website, as a download, for a little over $18.</p>
<p>&nbsp;</p>
<p><strong>Purchase, Install, and Manual</strong></p>
<p>The purchase of this scenery, and the installation thereof, is a straightforward process, and will be familiar to those of you have purchased other products from the Aerosoft's site.&nbsp; The size of the installation file is 267 MB, and the installation wizard will seamlessly take you through the installation process.</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/001.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/001_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/002.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/002_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>The version installed, on which I did all of my testing, is v1.01.&nbsp; This package is compatible with the FSX and P3D V2 applications.&nbsp; This review is based on FSX, running in DirectX10 compatibility mode.</p>
<p>&nbsp;</p>
<p>Once the product is installed, the familiarity with the other Aerosoft products ends, to some extent.&nbsp; First of all, upon the completion of the installation, you are not presented with an option to adjust the airport's traffic density, which is present in most other Aerosoft sceneries I own.&nbsp; Second, this package is not installed inside the ..&#092;Aerosoft folder, within the FSX root folder.&nbsp; Instead, you will find it in the ..&#092;MK-Studios folder.&nbsp; And third, this package does not show up in the Aerosoft Launcher.&nbsp; This is neither bad, nor good.&nbsp; I just felt I needed to point that out.</p>
<p>&nbsp;</p>
<p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/114.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/114_T.jpg" class="img111"></a>
<p>&nbsp;</p>
<p>Within the BolognaX folder (and in the Program Files group, under the MK-Studios folder) you will find a couple of PDF files - Charts.pdf and Manual.pdf.&nbsp; The manual is about 10 pages long, and is only marginally useful (the airline parking assignment table, on page 8).&nbsp; The charts document, on the other hand, is a 38-page document&nbsp; containing high-quality airport approach and departure charts.</p>
<p>&nbsp;</p>
<p>The three screenshots below display the default FSX Bologna airport, the after the installation look of the area, and the outline of the areas provided as part of this package.</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/110.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/110_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/111.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/111_T.jpg" class="img111"></a>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width:638px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/112.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/112_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>As you can judge for yourself, even though this airport has just the one runway, the developers included quite a bit of the surrounding areas.&nbsp; Let us see how things look on the ground.</p>
<p>&nbsp;</p>
<p><strong>Airport Features and First Impressions</strong></p>
<p>I have done probably close to a dozen flights into and out of Bologna, prior to sitting down to write this review.&nbsp; My favorite route, for this airport, became the short hop (about 90 minutes) from Vienna into Bologna, and back.</p>
<p>&nbsp;</p>
<p>First and foremost - I absolutely fell in love with the geographic positioning of the airport; mainly, where the airport is located added a lot of immersion into my sim experience.&nbsp; The mountains and hills, surrounding the airport on the North, West, and to the South, and the Adriatic sea to the East, create an interesting mix for weather opportunities, and results in all kinds of interesting and challenging scenarios - the low clouds, hovering right above the ground level, the fog, creeping along the valley, the rain and, sometimes, a completely clear and crisp approach, uninhabited by any of the above!</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/056.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/056_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/067.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/067_T.jpg" class="img111"></a>
            </td>
        </tr>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/068.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/068_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/074.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/074_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>Generally speaking, the airport is well visible and identifiable from the air.&nbsp; However, it often hides right underneath the low clouds, and I have found myself employing the ILS system far more often (and keeping it engaged for much more of the approach leg), than I have had to with my other payware sceneries.&nbsp; Other times (on multiple occasions), when blanketed by the dense fog, I actually found myself getting ready to abort the landing because I did not see the runway all the way down to the decision height (truth be told, I should have aborted a couple of times).&nbsp; Exhilarating!&nbsp; One point to note - the approach guiding lights, once (and when) visible, are easy to see and follow.</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/091.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/091_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/096.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/096_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>Another point - the airport is located in a beautiful place, geographically speaking.&nbsp; While challenging and exciting during the weather-intense landings and takeoffs, it is quiet and beautiful on the clear days, and especially in the dusk, dawn, and the night hours.</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/007.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/007_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/014.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/014_T.jpg" class="img111"></a>
            </td>
        </tr>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/015.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/015_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/070.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/070_T.jpg" class="img111"></a>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="width:638px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/006.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/006_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
<p>Now that I have praised where the airport is located, and how great it looks during the approaches and departures, it is time to look at the airport at the ground level.</p>
<p>&nbsp;</p>
<p>Thank you, developers, for not skimping on the surrounding areas and giving us dense house and warehouse areas to enjoy during the descents and climb-outs.</p>
<p>&nbsp;</p>
<table align="center" border="0" cellpadding="5" cellspacing="0">
    <tbody>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/034.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/034_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/092.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/092_T.jpg" class="img111"></a>
            </td>
        </tr>
        <tr>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/100.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/100_T.jpg" class="img111"></a>
            </td>
            <td style="width:319px;">
                <p style="text-align:center"><a href=
"http://www.avsim.com/pages/1014/bol/005.jpg"><img alt=""
src=
"http://www.avsim.com/pages/1014/bol/005_T.jpg" class="img111"></a>
            </td>
        </tr>
    </tbody>
</table>
<p>&nbsp;</p>
</div>
<style>

    .img111
            {border:3px solid #000;
            -webkit-border-radius: 20px;
            -moz-border-radius: 20px;
            border-radius: 20px;
            }
    .divv11 {
            border:2px solid #000;
            padding:15px;
            background:clear;
            width:auto;
            border-radius:15px;
            text-align:justify;

        }
            .divv12 {
            border:2px solid #000;
            padding:15px;
            background:#9fa7e8;
            width:auto;
            height:60px;
            border-radius:15px;
            text-align:center;
            background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-8 */
        }

    ul.a {list-style-type: circle;
    list-style-position:inside;}
    ul.b {list-style-type:square;
    list-style-position:inside;}

    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
.gradient
    {
    }
</style>
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
</style>
<![endif]-->

1 个答案:

答案 0 :(得分:0)

当我创建一个我运行的博客(参见我的个人资料)时,我几乎完成了同样的练习。我是这样做的,因为我的帖子总是采用一种固定格式(就像你的网络文件一样),而且我不想不必要地编写所有HTML标签,这对于重复文件来说太繁琐了。

需要的主要功能是像PHP或类似的脚本语言。这允许您读取文本文件并以任何方式重新格式化。如果您不了解PHP,您可能需要让程序员参与一次性任务,尽管学习语言并不困难。

我只是在文本编辑器中写我的帖子。为了避免编写HTML,我使用了一小组非常简单的标签,所有标签都以标记标记字符(例如,字符)开头。一个空行分隔段落,后面的段落包含在&lt; p&gt;中。 ....&LT; / p为H. PHP标记。那么| h1,| h2在一行的开头是指标题,而且我总是只有一行的标题,所以行尾表示标题的结尾。 PHP将整行包装在&lt; h1,2 ...&gt; ...&lt; / h1&gt;标签。在您的情况下,您还需要一个表的标记,带有用于标记新单元格和行的分隔符,以及一个图像标记。

如果我想为一次性文档做一些特别奇特的事情,我仍然可以输入原始HTML(你的员工可能需要打电话给你)。但这种方法都使HTML变得更加容易和快捷。

然后我有一个主要的PHP例程(相当大的例程),只读取文本,并应用上述规则来创建HTML。 (您可以从您从作者收到的原始文本文件,如果它们是适当的可理解的,或从您在Word中重新格式化它们之后开始重新格式化(但是将其作为.txt文件,而不是.docs))。我只是在运行时显示HTML(PHP有一个echo函数来做到这一点)。但是,如果您愿意,PHP可以将HTML输出保存为永久的.html文件。

至于CSS,因为你说你的页面都是一套格式,这使得它很容易。只需自己创建一个永久的外部样式表,为你的段落,标题,图像等设置样式(你现在应该这样做)。您可能偶尔需要在末尾添加额外的位来应对不寻常的事情,但希望不会经常这样。

我希望这能让您只知道如何处理这个问题。还有其他方法。