Creating a link in Dreamweaver

I mentioned in my first post how I created my own code to connect a website's social media badge to your own personal site. It is really simple and I will provide a quick tutorial on how you can find these badges and code them in Dreamweaver.

First step is to go to the social media site that you want to advertise on your page. I chose one that I know doesn't offer their own coding, goodreads.

For most sites you can find badges (you'll see what I mean in a minute) by clicking through the links at the bottom of the page. Goodreads has the badges listed in the "api" section. 

Next, you're going to scroll down just past the link to print downloadable bookmarks (which are pretty cool) to the different sized and formatted badges. On a mac you should be able to just drag the icon you want onto your desktop. On any other computer you should be able to right click and save the image where ever you'd like. 

Next in your Dream weaver file, go to Insert > Images. 

Then you can find your image on your desktop or where ever you saved it. Then click choose at the bottom of the window and Dreamweaver will insert the image where ever you placed your cursor in the Dreamweaver file. 

You will likely see this window pop up saying it isn't saved in your managed sites file. All it is asking is if it can copy the image into the right file so it will end up appearing on your site. Dreamweaver is being nice here, so click yes.  

If you are in split mode, you should see both the coding, in the top half you can see the image there where the line starts "<p><img src=...", and in bottom design portion, you'll see the image displayed as it will look below the "Main Content" header.

Next, copy the url from your own profile page. 

You can either click on the image or highlight the code to change the gray bar that is blow the design view. The image (what you highlighted) will show up in "src" and below "src" will be a box that says "link". Click inside the link box.  

Paste in your url into the "link" box. Then preview your updated site in a browser (meaning internet explorer, google chrome, firefox, or the like), and test the link. Make sure to save and refresh if it doesn't appear to be working.

There you have it, an easy and fast way to create an image link in Dreamweaver. Hope this was useful for those of you who are just learning Dreamweaver, or would like to in the near future. I know that I learned a much longer way of created an image link when I first started out, so this method is awesome and time saving.  

Best, 

Sam