Create Myspace HTML code for custom header

Recently I created a Myspace for YHA Australia. The new Myspace 2.0 profile customisation tool is a much improved interface on the old, hack-laden previous version. Using a combination of CSS and HTML, you can create a custom Myspace DIV layout that allows you to keep the functionality (comments, friend lists) while adding your own content (custom image header) and div layout objects.

Part one: Setup and custom header

To start off, you'll want to create the page as normal in the Myspace 2.0 tool while avoiding the use of any templates. This allows you to have complete control of the design. The first thing most people want to know is how to add a custom banner on top of the page. This can be achieved using the following steps:

1) Insert the below code in the "CSS" field of the Myspace profile 2.0 tool. You will need to adjust this to fit your image and website design. Mess with the "margin-left" and "width" until the page lines up, then adjust the height to be the same as your custom image.

div.custombanner {top: 0; left: 50%; margin-left: -380px; width: 750px; height: 650px; position: absolute; }

2) Now go to the "About me" section of the page and click "Edit Blurbs."
3) At the top of the "About me" field, put the following code:

<div class="custombanner"><img src="YOUR_IMAGE_URL_HERE" /></div>

4) Preview the page. Your image should now appear above the rest of your page, including ads.

[This post is to be continued.. Please comment if you have questions/tips.]

Free Dreamweaver templates and how to make your own site

There are many places you can find free Adobe Dreamweaver CS4 templates on the web. The type you pick depends on your HTML/CSS experience. For those interested I have located some WYSIWYG (what you see is what you get) Dreamweaver templates. I also recommend checking out HTML templates. These packages contain simple images, backgrounds and templates for your use.

If you would like a guide for creating your website from PSD to HTML check out the one at PSDTuts. Check out their other tutorials, which usually include a PSD file for you to experiment on.

Those with more experience may prefer to download a free CSS template, which contains all the code needed for a clean, polished website. Make sure to use a reset.css file with any CSS template to ensure maximum compatibility between browsers. I have found an online CSS layout generator which will create a simple layout template based on your specified dimensions.

Make sure to put your finished code through a CSS cleaner to ensure maximum speed and compatibility. A final step in the process is to put your site through the W3C Validator to check for any code that is not valid or cross-browser compatible.

Free online tools for evaluating web design

SixRevisions.com has a great article on 7 tools that you can use to measure the effectiveness of your web design.

Free website templates

FreeWebsiteTemplates.com has a range of free templates which include the original Photoshop (PSD) files in the package. This means you can use the layout as a start off point for your website, and will give inexperienced Photoshop users a head start. Freelayouts.com also has a selection of HTML layouts for you to peruse.

Freeware broken link checker for your website

Xenu's Link Sleuth is Freeware for PC that allows you to scan a website for broken links. This is a time consuming process to do manually, and if you have many links this program may save you hours. (PC, Freeware)

For the Mac users, Integrity allows you to visually check your website for broken links and redirections. (Mac, Freeware)

Free open source content management system

Joomla! - Joomla is a free CMS (content management system) for content publishers on the world wide web. Rich in features, this fully customisable and features the ability to utilise plug-ins to extend the functionality of the system. Definitely recommended for those who create websites for their customers, and are looking for a free alternative that is well documented and supported on the web.

Joomla replaces and automates the process of creating/programming a back end for your website and features a number of free built in website templates. Check out the Joomla! Wikpedia page for further information.

Free website icons

Crystal Clear - Courtesy of the Wikimedia Commons library, the Crystal Clear icon set is a free collection of icons which are available for use on your website.

Colour Lovers

Colourlovers - Colourlovers is a great site for designers stuck for colour layout ideas. You can browse through user-created palettes or create your own by selecting your favourite colours.