First I logged on to Moodle and downloaded the image of the website. I do not have a reference for this image because the tutor supplied it. You can see it is made of lots of different layers.
I use the slice tool to make a box around all the elements. If I want to adjust the size of the box I use the slice select tool.
Here is how the image looks now that it has been sliced in to sections.
Then I clicked file > save for web & devices.
I clicked on one of the squares. I choose jpeg…
…and I clicked save.
I clicked new folder. I called it welcome page and clicked create.
I clicked HTML and images and…
…clicked save.
I then duplicated the webpage file and renamed it to make the second page.
I then went to where I had saved the work.
I right clicked on the folder > open with > firefox.
This is how it looks in the browser.
I opened Dreamweaver. I clicked on portfolio.html
I clicked site > new site.
I then chose the root folder.
Here is how it looks in Dreamweaver.
I then opened the duplicated welcome-page file as well.
On the second page I clicked on the green box and hit the backspace button. This made the picture disappear.
Then I made a new picture to replace the one I just deleted. I made a new file in Photoshop using dimensions I got from Dreamweaver.
I then saved it. I should have saved it in the root folder which is the folder called ‘Welcome Page’.
I made a quick and simple design.
File > save for web and devices.
I clicked save here.
I clicked save.
On the second page I then inserted the image to fill the blank space. Insert > Image.
I clicked on my picture and clicked choose.
I clicked yes. This error message popped up because I failed to save the picture in the root folder. The folder called ‘Welcome Page’.
Then a box popped up and I typed in a description of the image.
This is how it looks now with the new, inserted image.
I clicked on this link in Dreamweaver.
The name of the image appears in the source field.
I then clicked on the target and dragged the cursor over to right on to portfolio.html
I then clicked on the Home slice. The name of the image appeared in the Source field.
I clicked the target and dragged the cursor over to the right on to welcome-page. Welcome-page then appears in the Link field.
File > save
File > Preview in Browser > Safari
The webpage now looks like this. I clicked around to make sure it worked.
In Photoshop I turned off the visibility of the upper layer. This made the image underneath visible.
I took the slice tool and I drew new slices over the links so that when I saved the file I would have an image for when the button was rolled over and for when it wasn’t.
Then I was able to choose the Slice Select Tool,Then I right clicked on the slice using the slice select tool. I choose the option Edit Slice Options.
A box popped up where the name could be changed to something descriptive.
I typed in Home_on.
Then I did the same for portfolio…
…and for Contact.
File > Save for web and devices.
I clicked save.
I clicked the option HTML and Images. I clicked save.
I clicked replace.
I selected and deleted the image.
I then clicked Image Objects > Rollover Image.
I selected Home_off.gif from the list and clicked Choose.
I saved again.
I then did the same for the Portfolio_On.gif
I selected the original image and the new, rollover image from the list and clicked Ok.
File > Preview in browser > Firefox.
This is how it looks.
I rolled over the link called Portfolio and it turned white.