PSD to Dreamweaver Exercise

We did an introductory exercise to website design in class. We had to convert a PSD file to a Dreamweaver HTML file. It was a simple task to begin to get some understanding of one way to create a website. As coding is a very big subject of its own and we don’t really have the time to focus on coding at this point for this brief at this time, we are going to create the website look with some functionality using these methods instead.

We started by opening a PSD file that Tim had produced in photoshop. Using the slice tool we created sections for each of the possible links on the page. These sections carved out by the slice tool allow the program to save the file in workable sections when saving for the web. Once the sections that we wanted were selected we saved the file twice, once as a PSD file into an ‘Artwork’ folder and once for web as in a ‘Root Folder’, both of which we created intentionally to help keep the work organized once in Dreamweaver. After opening Dreamweaver I opened a new site, named it and linked the new site to the ‘Root Folder’. Because we wanted to create functioning links for the purpose of this exercise we created a duplicate of the files on the root folder, allowing us to have a second page to link with. Once the second page had been opened, we deleted the horse banner image and using the exact dimensions found on the bottom section when having the image selected, I created a makeshift banner on Photoshop using those dimensions and then saved it for web. Going back into dreamweaver I replaced that horse banner with my new one for the purpose of differentiating the two pages. Having the first page selected on dreamweaver I then clicked on the ‘Portfolio’ slice I previously made and at the bottom of program clicked on the link button and dragged it onto the second page copy. Using the same process on the second page copy I clicked on the  ‘Home’ link and linked it back to the original page. Once that was done I saved the progress and previewed on firefox to make sure that the links were functional.

This slideshow requires JavaScript.

This was a good task to get some idea of different ways of creating a website, specially for someone that doesn’t have any previous coding knowledge, and using a program I am more familiar with like photoshop.


Leave a Reply

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

You are commenting using your 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