Верстка оглавления деловой газеты «Ведомости»

Привет хабрадрузья!

В компании, где я работаю, есть интранет подписка на деловую газету «Ведомости».
http://www.vedomosti.ru/newspaper/

Необходимо было сверстать оглавление газеты в две колонки используя rss Ведомостей. Я решил немного отойти от оригинала.

Нарисовал макет.

Пару слов по макету:
— Две полосы: А1 и Б1 (на макете они не обозначены намерено, в XML присутствуют) разделяют статьи на 2–х колоночный дизайн.
— Первые заголовки статей полос А1 и Б1 отличаются цветом и размером шрифта. Это важно.
— Статьи группируются по категориям (пример, Власть / Деньги и Индустрия / Энергоресурсы, выделены зеленым) и соответственно отделяются друг от друга.
— В левой колонке должны находится статьи, сгруппированные по соответствующим категориям, до категории Б1, в правой, все статьи после категории Б1. Это очень важно.

В этом мне помог XSLT.

<?xml version="1.0" encoding="WINDOWS-1251"?>
<xsl:stylesheet
 version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:msxsl="urn:schemas-microsoft-com:xslt"
 xmlns:ext="urn:extension-functions"
 exclude-result-prefixes="msxsl ext">
 
<xsl:output method="html" encoding="windows-1251" indent="yes" />

<xsl:key name="leftLine" match="item[not(category='Полоса А1') and (following-sibling::item/category='Полоса Б1') and not(category='Полоса Б1')]" use="category" />
<xsl:key name="rightLine" match="item[not(category='Полоса А1') and (preceding-sibling::item/category='Полоса Б1') and not(category='Полоса Б1')]" use="category" />

<xsl:template match="channel">
  <div class="topLogo">
    <img src="/IMG/logo1.gif" />
    <div class="logoLine">
      <img src="/IMG/logo3_nc2.gif" />
    </div>
  </div>
  
  <div class="dateNumber">
    <xsl:value-of select="substring(description, 14, 22)" disable-output-escaping="yes" />
  </div>
  
  <div class="archive">
    <a href="list.asp">Архив</a>
  </div>
  
  <div style="text-align: center;">
    <div class="b-index">
      
      <div class="b-index_left">
        
        <xsl:apply-templates select="item[category='Полоса А1'][1]" mode="AB"/>
        
        
        <xsl:for-each select="item[category='Полоса А1'][not(position()=1)]">
          <xsl:call-template name="link" />
        </xsl:for-each>
        
        
        <xsl:apply-templates mode="head" select="item[generate-id(.)=generate-id(key('leftLine',category))]" />
      </div>
      
      
      <div class="b-index_right">
        
        <xsl:apply-templates select="item[category='Полоса Б1'][1]" mode="AB" />
        
        
        <xsl:for-each select="item[category='Полоса Б1'][not(position()=1)]">
          <xsl:call-template name="link" />
        </xsl:for-each>
        
        
        <xsl:apply-templates mode="head2" select="item[generate-id(.)=generate-id(key('rightLine',category))]" />
      </div>
    </div>
  </div>
</xsl:template>


<xsl:template match="item" mode="AB">
  <h1>
    <a href="">
      <xsl:value-of select="title" disable-output-escaping="yes" />
    </a>
  </h1>
   
<p class="b-first_desc">
  <xsl:value-of select="description" disable-output-escaping="yes" />
</p>
</xsl:template>


<xsl:template match="item" mode="head">
  <h2>
    <xsl:value-of select="category" />
  </h2>
  
  <xsl:apply-templates mode="item" select="key('leftLine', category)" />
</xsl:template>

<xsl:template match="item" mode="head2">
  <h2>
    <xsl:value-of select="category" />
  </h2>
  
  <xsl:apply-templates mode="item" select="key('rightLine', category)" />
</xsl:template>


<xsl:template match="item" mode="item" name="link">
  <h3>
    <a href="">
      <xsl:value-of select="title" disable-output-escaping="yes" />
    </a>
  </h3>
  
  <p class="description">
    <xsl:value-of select="description" disable-output-escaping="yes" />
  </p>
</xsl:template>
</xsl:stylesheet>

* This source code was highlighted with Source Code Highlighter.

CSS сделал таким:

html
  {
    font-size: 75%;
  }

  body
  {
    font: normal 1em/1.3 Verdana, Tahoma, Geneva, sans-serif;
  }

  .topLogo
  {
    margin-top: 15px;
    text-align: center;
  }

  .logoLine
  {
    text-align: center;
    background-color: #474645;
    position: relative;
    height: 20px;
    overflow: hidden;
    margin-top: -15px;
  }

  .dateNumber
  {
    font-family: 'Arial Narrow', sans-serif;
    font-size: 1.6em;
    position: absolute;
    top: 15px;
    right: 5.2%;
  }

  .archive
  {
    font-size: 0.9em;
    font-family: Verdana, sans-serif;
    position: absolute;
    top: 55px;
    right: 5.2%;
  }

  .b-index
  {
    position: relative;
    width: 90%;
    margin: 0px auto;
    text-align: left;
  }

  .b-index_left
  {
    position: relative;
    float: left;
    width: 48%;
    margin-right: 2%;
  }

  .b-index_right
  {
    position: relative;
    float: left;
    width: 48%;
    margin-left: 2%;
  }

  .description
  {
    font-family: Verdana, sans-serif;
    font-size: 0.9em;
    color: #666;
  }

  h1 a
  {
    font-family: 'Arial Narrow', sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: #663333;
    margin: 0;
    padding: 0;
  }

  h2
  {
    font-family: 'Arial Narrow';
    font-size: 1.5em;
    text-transform: uppercase;
    color: #336633;
    border-bottom: 1px solid #ECF0EC;
    margin: 30px 0px 10px 0px;
    clear: both;
  }

  h3
  {
    font-family: Verdana, Tahoma, Geneva, sans-serif;
    font-size: 1.2em;
    font-weight: normal;
    clear: both;
    margin: 0;
    padding: 0;
  }

  h3 a
  {
    color: #665C33;
  }

  h3 a:visited
  {
    text-decoration: underline;
    color: #335966;
  }

  h3 a:active
  {
    text-decoration: underline;
  }

  h3 a:hover
  {
    text-decoration: none;
    color: #665C33;
  }

  .b-first_desc
  {
    margin: 0 0 20px 0;
  }

  p
  {  
    margin: 7px 0;
    padding: 0;
  }

  img
  {
    margin: 0px 20px 20px 0px;
  }

  * html .b-index
  {
    margin-top: 15px;
  }

  * html .b-index_right
  {
    position: relative;
    display: inline;
    float: left;
    width: 47%;
    margin-left: 2%;
  }

* This source code was highlighted with Source Code Highlighter.

WINDOWS-1251 использован намеренно.

Я никак не связан с этим деловым изданием.
Просто хотел поделиться с вами.
Возможно кому–то будет полезно.

Это мой первый пост на Хабре (: