Build the BBC homepage
The BBC’s brilliant homepage redesign has created quite a stir in the web community
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.
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.