Photoshop to Dreamweaver

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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s