Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Subs House Ad
Aug
13

Build the BBC homepage

by Mark Billen

07 Conditional formatting

screenshot_7

We want the second and third images to be displayed on mouseover. Click under the img tag and select XSLT> Conditional Region. Enter position() > 1 and click OK. Enter a display:none style attribute in place of Content goes here. Repeat to add a class of last-list to the third anchor element.

08 Text feeds

screenshot_8

Create an XSLT fragment with the BBC Politics feed (http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/uk_politics/rss.xml). In Design view, via rss>channel>item, drag ‘link’ and ‘title’ to the canvas from the bindings pane. Define as an XSLT repeat region, repeating under item.

09 Formatting text feeds

Enter <ul>, <li> and <a> tags to format this data as a list of links. We want to limit this to the first ten results, so select XSLT>Conditional Region, and enter position()<=10 in the test field to generate the XML to filter the results. Save this file as ‘text_feeds.xml’.

<ul>
<xsl:for-each select=”rss/channel/item[position() &lt;= 10]”>
<li>
<a>
<xsl:attribute name=”href”>
<xsl:value-of select=”link”/>
</xsl:attribute>
<xsl:value-of select=”title”/>
</a>
</li>
</xsl:for-each>
</ul>

10 XML variables

On the BBC site, users can show or hide items in the feed using plus and minus buttons. To allow us to do the same, we are going to add another conditional region, which, rather than having a fixed value, uses a variable that is parsed into the XML file.

<xsl:if test=”position() &gt; $limit”>
<xsl:attribute name=”style”>
display:none
</xsl:attribute>
</xsl:if>

11 Automating with PHP

screenshot_11

We want to use lots of feeds on our page and control which ones to display with cookies. For this, we’ll use PHP. The PHP files are included on the disc: feeds.php contains an array of feeds from the BBC website, and feeds_output.php uses the XML files we just created to output the HTML.

12 Include the PHP

screenshot_12

To add a PHP Include in Dreamweaver, select Insert>PHP Objects>Include from the top menu bar. Open index.php and add includes>feeds.php at the very top of your page (outside of the DOCTYPE), and includes>feeds_output.php inside the div with an ID of content.

Pages: 1 2 3

5 Comments »

  • Build a Brilliant Homepage – Full Tutorial | Choose Daily said:

    [...] Build a Brilliant Homepage – Full Tutorial [...]

  • Desmond Liang said:

    Very cool and useful tutorial. Thanks a lot.

  • Mtechnik said:

    Did anyone come to success on getting this to work?

  • ChicoOfSweden said:

    Thanks for a challanging experiment idea. Lovely website.
    Good that the original creator got the credit too. But without Mark Billen I would not have seen this.

    Thanks a million.

  • Misato Maekawa said:

    NO DREAMWEAVER, NO LIFE.

What's your opinion?

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.