In this lesson, you will learn how to add SVG social media icons and create links from those graphics. In order to fully utilize all the features that Dreamweaver has to offer, we are going to create a site. So we're gonna go to the site menu and we're gonna create a new site. We're going to name this Social Media. We're gonna click on the folder icon to browse for the folder and we're gonna go out to wherever it is you have the lesson files for module six and in there there is a folder named Social Media. We're going to select that folder, then we're gonna go over to the advanced settings on the left. We're gonna open up our advanced settings and click on the local info category. For our default images folder we're gonna click on that browse for folder and we're gonna choose the images folder in that folder and we're gonna click on the Save button. So over in our files panel up in the top right, we now have our social media site. Now SVG files are scalable vector graphic files. So what does that mean? Well, unlike JPEGs and PING files, which are images created using squares or pixels of color information, SVG files use vector information, so points and segments to create those graphics. The best thing about SVGs is that they are resolution independent. So what does that mean? Well, it means you can make them as large as you want or as small as you want and they never lose quality. Now I just Googled social media free vectors and I found out on the web some black and white vector graphics that I opened up in Illustrator and I used this asset export feature and saved them as SVGs after I added my own colors to those graphics. So you can get SVG files out of Adobe Illustrator. Now back in Dreamweaver, we're going to open up the simple code file. We're gonna go to the Live view and when we go to the Live view, this is a file that we've worked on previously, and we're gonna go down to after it says gear, and we're gonna switch over to Design mode. So up at the top we're gonna switch from Live to Design, we're gonna scroll down and after gear, we're gonna hit the Enter key and we're gonna type in Follow Us. And with our cursor in that Follow Us, we're gonna go down to our properties panel and we're gonna change that property to a heading too, to match what the other subheads are on our page and then we're gonna hit the Enter key. If we go over to our files panel and we click on the arrow just to the left of images, we can see that in our images folder we have an SVG folder and there are our three social media icons in there. You will notice that there is a code icon next to each one of those graphics, not the graphic icon that we have been used to seeing. So we can't click and drag on one of these icons because when we do it comes down as a link to the actual code that is that SVG file, so I'm just gonna delete that. We have to go to the Insert menu to insert an image. And make sure you're in the images folder and we're gonna go into our SVG and we're gonna select our Facebook SVG, the FB SVG and we're gonna click Okay. Now when we do and we're in Design view, we get this strange little icon after our Follow Us, but if we go to Design view and change that to Live view, and we scroll down, we can see that it is quite large. So we're going to click on it and down in our properties panel, we have the same properties that we do for any of our images. So we're just gonna put in 50 pixels and click on the Enter key and it makes it nice and small for what we need. Now with pixel based images, you really do have to worry about the size. You want to bring in those images at as close to the size that you're going to use them as possible because the web browser has to process the larger image even if you shrink it down in Dreamweaver. So we're gonna go up to the Live menu and change it back to Design and we're gonna put our cursor just after that image and we're gonna click on the space bar. We're gonna go to the insert menu to image and we're gonna go into our SVG folder and we're gonna choose twitter.svg, we're gonna click Okay. Now our image comes in as that little placeholder and before we even go over to Live view, we're just gonna put in a width and a height of 50 pixels and when we go over to Live view and we scroll down to the bottom, here are our two images for our social media buttons. We're gonna go to our files panel and we're gonna double click on our index and we can see down at the bottom of our document, we have no social media icons, so we're going to work with our social media icons. Now, if we click in this dark green bar, we can see that there is... When we're in Live view there is a paragraph, it has a social icon class applied to it. So we're gonna switch over to our Design view and with our cursor right there, we're gonna go to our Insert menu to insert an image, we're gonna grab that Facebook SVG and open. Now again, we're getting that same look here. If we go to Live view and scroll down, our image is large. It's not as large as the image in the last document, but it is still large enough to fit in that area. So the container of this image is defining partially how large it is. Now we're gonna go here to the class because this document already has some built in CSS. So if we clicked on this class and we choose thumbnail social for the class, we can see how it centers it and it fits it nicely in that area and we can do that from the Live view. Now with the images on the last document and with this image here right now, all they're doing is showing us that Facebook icon, but you can make any image into a link. In our module five creating links, we created links out of text, but here we're gonna talk about how to create links from a graphic. So if we have that image selected and we can tell down here in our selector area, we've got that image selected. Right below the source of our image in our link area, we can just type in... We're gonna do an absolute link http://www.facebook.com and we don't have an actual page in Facebook that we're going to, so we're just gonna put it out to Facebook itself and we click the Enter key and that will apply that link to our image. So in this lesson, you learned how to add SVG files as social media icons, how to resize them and how to create links out of them.
