Dreamweaver Page Development

Screen Shot 2017-05-09 at 15.48.32

To create the website, I designed the website on Photoshop with all its different interactive components and then sliced all the different parts that would be interactive which would then be put onto dreamweaver when saved as a HTML File.

Screen Shot 2017-05-09 at 10.37.35

I created a hyperlink by creating a map around the area I would want to make the hyperlink on which I then copied and pasted my Instagram link at the bottom left to the mapping area. In addition, by choosing the Target “_black”, the hyperlink would open up on a new tab which would be more convenient for the user as they wouldn’t have to constantly go back.

Screen Shot 2017-05-09 at 10.40.44

I linked buttons to different pages by selecting the button and clicking on the “target”  sign on the bottom left and dragging it onto the “About Me” page as shown on the right of the screenshot.

Screen Shot 2017-05-09 at 10.42.39

An rollover was created by selecting the button and editing it individually with Photoshop. The edited image was then saved into the same folder which could then be inserted into the roll over section when the original button was deleted off the website. The screenshot above shows the final step of how the rollover was inserted into the website.

Screen Shot 2017-05-09 at 10.43.15

This is another example of a rollover image where the second image was edited so that the outer line turned from white to black with the image inside lowering in opacity.

Screen Shot 2017-05-09 at 10.45.11Screen Shot 2017-05-09 at 10.45.44

I inserted a Youtube video onto my website by getting the embedded code from Youtube but edit it so that the length and width was edited to fit into the section that I made for each Youtube video.

Screen Shot 2017-05-09 at 10.46.19Screen Shot 2017-05-09 at 10.46.28

I created the Audio Page in a similar way by getting the actual size of the audio section and getting embedded code from SoundCloud and editing it so the width and height matched the area which I created inside my website.


Screen Shot 2017-05-10 at 12.49.31Screen Shot 2017-05-10 at 12.46.00

I created the two HTML bullet points by inserting a table below the website, as shown above and adding in the text that links to the image.


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 )

Google+ photo

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


Connecting to %s