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.