News, Inspiration & Stories about our Multimedia Software

Sports Websites for All  (part 2)

Sports Websites for All (part 2)

The London 2012 Olympics are finally here! Were you one of the fortunate ones to get some tickets? Whether it’s the Olympics or some other sports event, see how easy it is to create a website to share your enthusiasm for your sports or hobbies.

If you don’t have Xara Web Designer you can download a free trial version to follow this tutorial. Xara Web Designer includes plenty of elements, clipart and photos but we have created some new Olympic themed ones especially for you to build a website. Download the designs and unzip them to a folder on your computer.

Open Xara Web Designer and the first thing we need to do is add the new designs into the Designs Gallery. On the right you will see the vertical tab – Designs Gallery. Select it and it will fly out to reveal several folders of designs. In the Designs Gallery select Disc designs then browse to the folder on your computer that contains the unzipped files (you will see only a Xarainfo file), select it and then select to add it to the index. Click on the folder icon and you will see that it contains a blank website template, page elements, images and the finished website.

To avoid any repetition of the website setup in last month’s tutorial, (See Sports website tutorial Part 1), we will start with a three page blank website already set up with a pre-linked navigation bar so all that is needed is to add the content. We have a home, news and blogs pages.

To open the website go to Designs Gallery, into the folder you have just added and double click on ‘Blank website’. It will open in the Multiple page view and for ease of positioning the content, we have included a guide layer which is set so that your content will ‘snap’ to the guidelines. To switch the guidelines off or on simply go into the Page and Layer Gallery and click on the red eye icon of the Guides layer to make them hidden or visible.

Opening the ‘Blank’ website

This page is going to use a Twitter and YouTube widget and a Facebook graphic button. We will start with a sub-heading graphic for each of the widgets – go to the Designs Gallery and in the files that we provided, you will see a ‘Twitter header’ and ‘You Tube header’. Drag them onto the page and position them within the guidelines at the top of each column. For precise positioning you can nudge them a pixel at a time using the keyboard curser keys.

To add the Twitter feed, go to the Designs Gallery, > Page Elements > Social Networking (widgets) > ‘Display your tweets’, and drag the icon onto your web page, placing it below the Twitter sub-heading.

To customise the widget click on it to select it and then select the ‘edit’ link that will appear in the bottom right of it (or you can double click on the widget). Select the Text tool from the tool bar on the left, and in the dialog enter the name of the account you want to display tweets from; in this case enter, London2012 (no spaces). Now reselect the Selector Tool (top tool in the tool bar on the left) and follow the instructions in the widget dialogue to select to ‘Preview’ the page, then click the ‘Save’.

The Twitter widgets added to the page

Next we will add the YouTube widget – go to the Design Gallery > Page Elements > Audio/Video (widgets) > YouTube. Drag the You Tube widget icon from the gallery onto the web page. This will open up a browser window and take you to the You Tube website. Browse for the video you wish to use. Beneath the video you will see a ‘share’ button – click on it, and you will then see an ‘embed’ button – click on it and you will then see the ‘embed code’. Below you can see that the width is set to to 560px and then use CTRL C to copy the code to the clipboard and then select the ‘insert’ button on the widget’s editor. Preview the page to see the working, embedded video.

Adding a You Tube video

The Facebook widgets will only link to your own account so, in the files we provided, you will find a Facebook button graphic that we have linked to the London2012 Facebook page. Drag it out of the Design Gallery and position it below the Twitter feed. (If you want to change the link on the graphic, click on the Facebook logo, select ‘Change’ and then change the link web address).

We want to have news of the medalists on our home page. Let’s add a medal graphic, dragged from the Design Gallery, then below it we will add a short paragraph. Select the text tool in the left-hand tools options, click on the left-hand margin and drag the thin line to the required column width then type or paste in your text.

You have all the controls of a word-processor; simply highlight the relevant text and make the changes. We will highlight the ‘See Who’s Winning the Medals’ and using the ‘Links’ icon on the top tool bar, select the ‘Link to Web or Email address’ and enter in (this shows a list of the top 30 hopeful medal winners) and click ‘OK’ to save.

Finally, let’s add a paragraph of text in the right-hand column under the video using the same method. In the screen below, you will see that I have made the text heading larger and given it a colour, and I have set the sub heading in bold.

Any text can be set to ‘Push’ so that as more content is added it will automatically push any following content down the page. To set this, you need to be in the Selector tool, then right click on the text, choose ‘Position on page’ then ‘Push’, then enter a bottom margin of say 50 pixels (to leave space between the text and the following content) and select ‘Apply’.

The finished home page

First we will add a Reuters newsfeed widget. Go to the Designs gallery > Page Elements > Other widgets > Reuters widgets and select the type of news you require (unfortunately there is no sport news at present), copy the ‘embed code’ using CTRL C and click ‘insert’ at the bottom of the widget editor. Now position it in the right-hand column.

From the files we provided in the Designs gallery, drag in the ‘Sidebar’ and place it under the Reuters newsfeed. (To create a similar sidebar from scratch, ie text with embedded graphics see the Sports website tutorial Part 1).

Drag in the ‘Subheading’ and the ‘Photo Popup’ and put them into position in the right-hand column. (The Photo Popup is designed so when your visitors click one of these thumbnail images, it will show as the larger pop-up). To replace any of the photos, simply drag and drop a photo from your photos folder on your computer onto one of the thumbnail images. The thumbnail images and the large image are all instances of the same photo, so the large image will automatically be replaced.

You can edit the text caption for the first image as it is visible on the page. To edit the text that accompanies the other three photos, expand the News page in the Page & Layer Gallery then click the red eye icon on the relevant filename to make the text ‘visible’ eg London2012 photo2. The text of the photo pop ups are set to ‘push’ so when you add longer text it will push the text below to extend the page.

To edit the photo captions, select it in the Page & Layer Gallery

To balance the page it needs a paragraph of text below the photo popup. You could create your own paragraph or drag in the ‘Paragraph text’ from our folder in the design gallery, which has already been styled and is set to ‘push’.

The finished News page


Finally, we will create a quick blog page. From the Design Gallery, drag the blog column that we have provided and align it centrally on the page using the central guideline, that appears, to help it snap in place. The blog column is a text column with an anchored graphic and a rule-off so we can easily repeat it in the column.

Using the text tool, highlight everything from the beginning of the Headline text to the end of the rule off. CTRL C to copy it to the clipboard, then position the mouse cursor under the beginning of the rule-off divider and CTRL P to paste it. Repeat as often as you wish. As you add more text in the blogs everything is pushed down – the graphics stay in the correct relative position, and the page footer is moved down automatically to enlarge the page (when entering your text remember that it’s tradition to add new blog entries at the top).

Finished Blog page

The website is now completed so let’s preview it by selecting the Preview current webpage icon on the top tool bar. Notice that you can select any of the icons at the top of the preview window to view it in different web browsers.

Now save the website – select File > Save which will save your website as a .web file which is the working format for Xara Web Designer. To save the HTML files for viewing in a browser you must choose the File > Export Website menu option. This creates one HTML file for each page of your website and puts all the associated files into a folder next to this.

To publish your website on the web for all to see, you need to upload it to your web space. MAGIX provide you with 500 megabytes of web space and a personal web address for free. The process of transferring your website from your hard disk to the web server at your hosting company is called FTP upload (file transfer protocol). You need three pieces of information: Your FTP host address, your username and password. Then select File -> Publish Website, and you’ll be asked to enter those three FTP details.

We have provided the finished website in the files in the Designs Gallery so double click on ‘Website’ to open it and then select the Preview whole website icon on the top tool bar to view all the pages. Or see it live on the web – Olympics website.

Leave a Reply

Your email address will not be published. Required fields are marked *