In Conclusion

I am much happier with the way I have built this website, compared to my last website assignment, as all of the content is editable by someone else with limited knowledge of websites.
The last website that I created had the text contained within the background image making it inaccessible to the blind. Within this website, all information can be accessible.


I have gained a better understanding of using Cascading Style Sheets to define the styles within a website. I have learned to use tables and ap divisions to overcome browser compatibility issues in the layout. (between 'Firefox', 'Internet Explorer' and 'Enigma' browsers)

I found that my main weakness on this assignment was the difficulty in trying to learn some actionscripting in flash CS3 for the banner in the top corner, (with little success) and in hindsight I could have better spent this time to learn to create an RSS news feed to the site from yoda's myspace blog.

My main strengths were the ability to create the site in a way I haven't tried before, and also to create the site in a way that allows the content to be edited by a third party using basic Dreamweaver tools.

Finishing The Site

I created a basic banner within flash, and had difficulties with the scripting. I followed some tutorials from the Internet. With limited time left, I decided to leave the banner as it is, and refine the rest of the site.

I thought about accessibility for blind people, and created descriptions for the different images on each page. These descriptions can be read out by software used by blind people, so that when they move their cursor over the image, they will get the description read out to them.

I retest the whole website in Firefox and Internet explorer.

I am still waiting for brad (Yoda) to supply his first Edited Video for content on the videos page, but I am happy with everything else. The Video(s) will have to be added at a later date.

Creating pages

I opened up Dreamweaver made sure i had the site 'Yoda Mandala' selected and chose to 'create new html file from template'. I chose the template 'YM.dwt' that I created earlier.

Before editing anything, I saved the file as 'YM_about.html'.

I visited the myspace page of my friend www.myspace.com/yodamandala to acquire content for this page. I cut some text from his description and pasted it into my document. I selected the text and designated it as 'paragraph' text. The text took on the appearance that I had defined within the external css file. I replaced the main-title: 'Info' and sub-title: 'about Yoda Mandala', these are defined by h1 and h2 tags affected by the style sheet. I spoke to Brad (Yoda Mandala) about possible links for the top left of the site. He said that all of his latest news, music and photographs etc, are posted to his myspace page before anything else, and that there should be links to reflect this. I placed links in the top corner all leading to his myspace page.

Preview of 'YM_about.html'












Next I started another new file from my template and saved as 'YM_images.html'.

I inserted a table (4x4) into the editable region where i want the thumbnails to go. I then went into my photos supplied by brad (Yoda) and, using Photoshop, created thumbnails of the images that will appear on this page.

I imported each thumbnail into each cell within the table and then turned each image into a link pointing to its respective photo. (to avoid my own confusion, I left each photo with it's original name and added the letter 't' to the end of each filename for the saved thumbnails. This made it obvious which thumbnail represented which full size jpg). I altered the text on the page, then previewed the page.

Preview of 'YM_images.html'
As can be seen in this preview, the image links have taken the style defined for links in the original template and display an orange border on mouse rollover.









I created the file: 'YM_tracklist.html' from my template and realised that there was not enough room to display both the albums brad (Yoda) had in mind. I decided to create a separate page for each album title with links to each within the central editable region on the page.




The two Discography pages are named: 'YM_tracklist_divine.html' and 'YM_tracklist_new', I now go into my original template file to change the 'discography' link to point to 'YM_tracklist_divine'.

As I expected, when I saved the template, Dreamweaver offered to update all related pages to reflect this change. I clicked 'accept' and then previewed the page (pictured above)



I opened up my template file again and saved the files: 'YM_contact.html', 'YM_purchase.html' and 'YM_videos.html'. I edited 'contact' and 'purchase' with links to external sites. (I still need more contact details for the contact page). I edited 'videos' with a message to "check back soon" as I have not yet received any content for this page. I preview the pages.

'YM_contact.html'
'YM_purchase.html'













'YM_videos.html'




Now I have all the pages I test the site as a whole.








The first thing I notice is that the links at the top left of each page are inconsistent throughout the site. (I decide I might attempt to create a flash banner to put in this area, and import it to the template).

I notice that some links that are supposed to open in a new tab/window are opening within the current tab/window and vice-versa. I go open each page in Dreamweaver and alter the links accordingly.

Testing and Refining the Template

I made some temporary changes to the external .css file to check that it was affecting the content as intended. It worked.

I also created a link in the top left and previewed it. The link style was different from the other elements on the page. I went into 'page properties/links' and defined all links to be white and turn orange on rollover. The link changed accordingly (I noticed that dreamweaver had created an internal css style within the html to reflect this change).

I experimented with what content i could put into the 'editable regions'. Being able to insert new tables was a handy feature I noticed.

A possible problem here is that if too much content is added to any 'editable region', all other tables and cells below are shifted downwards, displacing other design elements. I decided that there was enough room in each area for the content of each page.

I also realised that within editable areas with text aligned to 'top', the text would display a couple of lines lower down when previewed. I didnt see this as a problem at this stage, and saved my final template 'YM.dwt'

Example of my page with too much content:

Building The Site Template

Now that I know how I want the pages to be laid out, I create the rollovers in the Fireworks document, so that each link around the logo turns orange on 'mouseover' events. I export a html file to Dreamweaver.

The export process from Fireworks turns the whole page into a single image and slices the links that have now become rollover images, instead of rollover text as they were in Fireworks. The sliced images are laid out in an invisible table within the html.

A couple of problems arose here:
1) I didn't understand some things about how 'tables' and 'ap divisions' (similar to 'layers' in earlier versions of Dreamweaver) can work together in Dreamweaver CS3, this caused a bit of confusion as the images were separating and becoming jumbled when i tried to add any content.

2) The font I had chosen to display the content was not a standard font, and therefore was not going to display correctly on other peoples computers unless they have the same font installed.
I decided that I would use a standard sans-serif font within Dreamweaver.

3) The previews were displaying diffently in different browsers.

Here, I decided to follow some tutorials from:
http://www.vineyardesigns.com/resources/dreamweaver/

This gave me a better understanding of tables and ap divisions. It also helped me realise that it is important to plan how the images will be sliced before importing to Dreamweaver, it also introduced me to 'editable areas' in Dreamweaver (I'll come to this later).

After experimenting with the concepts learnt above, I came to the conclusion that my entire background should simply be left whole and inserted as the background image in a table with a single cell. Within this table i would create other transparent tables reflecting the intended positioning of the content.

I opened up Dreamweaver and defined a new site 'YodaMandala'. I then created a new Dreamweaver template file and saved as 'YM.dwt' in the root folder.

I created the table with background image, and inserted more tables into the first and positioned cells for my content. I then created 'editable regions' (insert/template objects/editable regions)
in the positions I wanted my content to appear.

The good thing about 'editable regions' is that only these areas can be edited within html files based on this template. This means that a designer can create the template in a way that allows a third party to edit the content without inadvertently ruining the design. I created a CSS style sheet defining styles for paragraph, h1, h2, and h3 tags, to further separate the design elements from content management.

I wanted my menu to be the same on every page so I chose to export just the small menu area from fireworks as a stand alone html file. I then imported this file into a cell at the correct position in the template. I can now assign the links within the template, which will be reflected in every html file based on this template.

Image showing tables and editable regions.












Image showing a preview of the template.

Initial Design

I decided to create the look of my site within Fireworks as both vector and bitmap editing tools are available and the software is specifically designed for this purpose. Another reason I choose Fireworks is because the native '.png' files can also be edited within other software like 'Dreamweaver' and 'Photoshop'.

I opened up Fireworks and looked through the fonts and found one that I thought was 'eastern' or 'spiritual' looking and created some lines coming off it with the link texts at the end of each line. It reminded me of a circuit board, so I tried a gold coloured font on a green background.

It was at this moment thatBrad (Yoda Mandala) gave me his photo's. I decided to experiment with them to create another idea.

I looked through the selection of photos I had been supplied. I chose a photo that had a plain background (windmill with blue sky) as there would be minimum interference in contrast with the content of the site.

I positioned the image at an angle and with the tip of the windmill on the bottom left focal point (taking into account the law of thirds). I sampled the blue colour from the sky in the image and filled the whole sky area with this colour (decreasing file sizes). I then began work on the logo design at the bottom right focal point.

I used the same font I had chosen earlier for the main title: "Yoda Mandala". I picked another futuristic looking font for the links and arranged the links around my logo. I chose this font as it contrasts with the other font and has a futuristic or electronic feel (as Yoda Mandalas music).

As the background is a cool colour (blue), I decided that everything else should be in warm colours and neutral colours to give contrast to the site. I made all of the text a neutral light grey colour and changed the word 'Yoda' to a warm orange. I decided that all rollovers would be in this same orange colour, and I would use the colour to pick out important parts of the page.

I then added some content to decide how the content would be displayed. I laid out ideas for the 'Info' Page and the 'images' page.

Having designed how the site will look, I can now think about how I will build the site.

Learning CSS

It is a requirement that I make use of CSS (Cascading Style Sheets) in my finished site. I followed some basic tutorials from http://www.w3schools.com/ to get a better understanding of CSS and how I could apply it to my site.

I created 2 files in notepad 'index.html' and 'style1.css' these types of file can be written in a '.txt' file and saved with the '.html' or'.css' extension.

I quickly realised that CSS is mainly used for formatting content in html files. This is very useful to use to format the whole style of the site from a separate external file. This means that several pages can be formatted from a single file, helping to retain a certain style throughout the site.

Here is the html for the page i want to affect with CSS.

Here is the .CSS file that affects the html tags.

Here is how the page appears in a browser.

Using CSS, the design styles of the site can be edited within a separate document, this makes it easy for designers to edit the design of the site separately from the content. (A whole site could be redesigned by only editing the CSS file.)