Dreamweaver and Simple Viewer

I have made my final pages that I am going to put into my web portfolio.

Here are the designs:

I am going to put my simple viewer into a box of 800x500 on my gallery page. I made a slice which is exactly that size so that when it comes to putting my simple viewer gallery in it should slot on quite nicely. 

I am going to make my simple viewer gallery seperately so that I can collect all my work from personal computers. 

I have put all my site designs in to Dreamweaver and now I am going to make the roll over for the links. I have done it so that the grey words turn to a pale blue when the mouse is over the word.

This is the page of slices as an example. so all of the words to the left, I select the slice and edit slice..

When I clicked on the edit slice, this slice options box came up, I changed the name to 'OFF' or 'ON'..

OFF - when the word was black

ON - when the word is blue (once I have un viewed the original word on photoshop layers)

Save and save to Web and Devices and then this part is ready for the roll over part in Dreamweaver.

I clicked on the link that I wanted to edit and pressed backspace - deleting the word. I then went to Insert - Image Objects - Rollover Image.

That then brings up this box:

The next step I did was then to choose the original (grey word - Home_off). The second browse was then to choose the blue image, which will act as the roll over text. (Home_on)

This here is just showing a shot of what the navigation looks like when the roll over happens. I have done it so that the blue word shows when you are on that page. So this page is on home already, you can't see here but my mouse is hovering over the gallery link and it has gone blue. This works in the same way on every page with every link.

-------------------------------

I am next going to put my simple viewer gallery into my website in Dreamweaver.

I am first going to just make a practice simple viewer, and then make the proper one later on once I know it works properly.

I have made the proper simple viewer, choosing the images that I wanted to include from work from this year (just a few of the ones I really liked - using photography and also graphic design work) This is where I am thinking of making two separate simple viewer galleries, for Photography and Graphic Design.

The first step I did here was to select the 800x500 box that I created by slicing on Photoshop and deleted what was inside of it (just the plain white box).

 The next step was to insert SWF from Insert > Media.

This then brings up a box, asking where you want to get this file from.

After selecting the simpleviewer.swf file I thought that this would be it and that the gallery slideshow would work. 

I saved the document and then previewed in the brower and this is what I saw:

At first it confused me and I didn't know where the files were going wrong. I wasn't sure where the files were meant to be placed so moving a few files around and choosing other places within the gallery folder and the SV File where my images and saved simple viewer file was kept.

After moving a few of the folders around - from the SV file folder, this is what I got next:

So from this, I knew that I was getting a lot closer to having the files in the correct place.

After seeking some advice from a friend who had the same problem with her simple viewer, she said she changing the coding slightly, re-directing the link to what folder the image was taken from. 

This is how I changed the coding:

 

 On the lines where it is: 

<image imageURL='image/jpeg brighton_page_1.jpg'
(as an example)

 And to make the image redirect so that the proper image gets there, to put SV File/ in between " and image/ . 

This then worked!

 

This is showing where the files ended up as the final view for the simple viewer to work.

-----------------------

Next I wanted the page to centre on the page when it is opened up in a browser.

In class I was shown a way to to this in quite a complicated way, took some screen shots along doing this:

First I went to Modify > Convert > Tables to AP Divs..

Once that has been done, Select all (cmd+A) and Insert >Layout Options > Div Tags..

that then brings up this window:

In the I.D part I just wrote the word wrap and pressed New CSS Rule which is just underneath the ID text box.

With this box that comes up for this I just pressed OK and this box then comes up:

the measurements that are in there at the moment are the ones which I put in which is what was needed. After clicking apply and ok, it then brings you back to the box from before and click ok again. 

-----

Half way through doing this way of centering the page, a friend who has already done this, said to me there was a way of doing this in a way that is a lot easier.

This way is to select all the page

Then go to Format > Align > Center

This worked well, first time and was a way which I learnt and saved me a lot of time, so then after learning to do this once, I then went through my other pages and did the same process. 

After doing this, I feel as though I have finished my website. I have done all the things I wanted to do to it my site, including the links which change colour with a roll over, the simple page layout and creating my own icons for the contact page.