The BBC’s brilliant homepage redesign has created quite a stir in the web community. Now See how it was done!

The BBC’s homepage is a stunning example of first-class Web 2.0 design. As well as presenting an elegant look and feel, it allows users to customise their experience in a genuinely useful way. You can change the content to reflect your interests, the layout to suit your behaviour online and even the colour scheme to please your taste.
It looks complicated, but it’s actually quite easy to do. In this tutorial, we’ll show you exactly how to re-create the BBC’s homepage, using XML feeds from the BBC to provide content. Like the BBC, we will use the jQuery library and its many plug-ins to build a rich interface that allows users to customise the content. We’ll use cookies to remember the settings and layout so that when you return, everything’s where you left it. By the end of this tutorial you’ll know exactly how one of the most talked-about redesigns was done – and have a BBC-style homepage of your very own. Download the project assets here

01 Site definition

Define a new site in Dreamweaver with PHP MySQL enabled – this site requires PHP so the computer/server you build it on must have it available. Copy across the files from the starting_files directory on the CD to your home directory. Open the index.php and the CSS>styles.css files.

02 BBC feeds

We will use XML feeds from the BBC website to add content, added as draggable divs, with rollover images and links at the top and text feeds underneath. We need to create two XSLT documents to format these. Select File>New>XSLT (fragment) and save as ‘image_feeds.xsl’.

03 Image feeds

Select Attach a remote file on the internet, and enter the URL of the BBC News’s XML file: http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml. In Design view, follow rss>channel>item and drag ‘link’, ‘title’ and ‘thumbnail’ onto the canvas from the bindings pane.

04 Repeating images

We want to display multiple images in our panel, so we need to add an XSLT repeat region. In Design view, highlight all of the fields you just dragged onto the page. Then under the XSLT tab, select Repeat Region. Under Select node to repeat under, select item and click OK.

05 List of images

We need to format this data as a list of images. In Code view, enter ul tags outside of the xsl:for-each loop, and inside, add <li> tags with <img> and <a> tags inside them. Set the attributes of these to the values from the XML feed – see Helper Files>image_feeds_step_5.xsl on the CD.

06 First three images

In Code view, click inside <xsl:for-each select=”rss>channel>item”>, and select XSLT>Conditional Region. In the Property Inspector, select the lightning bolt and then Build filter. Click the plus button and enter position() in the where field, <= as the operator and three as the value.

Pages: 1 2 3