Create a responsive Bootstrap layout in Dreamweaver — Part 4

Insert social media icons into the footer

When creating your own site

  1. Find a good social media icon site with terms of service you can meet. Remember that some sites will ask for credit and a link back to the site. Others will ask you to share the link (for example, via "Pay with a Tweet") through a social media account.
  2. Download the icon file set, extract its contents, and then copy the relevant social media icons to your website's images folder.
  3. Open your template file in Design view.
  4. In the <footer> element, insert your cursor where you want to position the social media icons.
  5. On the Insert menu, click Image.
  6. Select one of the social media icons you want to use, and then click OK.
  7. With the image selected, insert a description in the Alt box, type a phrase (for example, Connect with me on LinkedIn) in the Title box, and then copy and paste the URL to your profile or page in the Link box.
  8. Repeat steps 5, 6, and 7 until you have added all the desired icons.
  9. Save your work, and, when prompted, apply the changes to all pages based on your template.

To download and save social media icons

  1. Go to the 24 Free Flat Social Icons page, review the usage terms, and then click the Flat_Social_icons.zip download link.
  2. Open File Explorer, and then go to the Downloads folder.
  3. Inside the Downloads folder, right-click the Flat_Social_icons.zip file, and click Extract All, and then step through the wizard.

    Note: If you want to keep all the social media icons, extract them to your USB flash drive. Otherwise, you can extract the contents of the file to the Downloads folder and simply copy and paste what you need into your site's images directory.
  4. Either from your USB flash drive or from the Downloads folder, open the Flat_Social_icons folder, open the Flat_Social_Style_02 folder, and then open the PNG folder.
  5. Open the folder for the size of icon you want to use. The 24 (meaning 24px 24px), 32 and, 64 are decent starting points. (In class we used 24, though I commented we might also want to try 32.)
  6. Select any relevant social media icons, and then press Ctrl+C (Mac: Command+C) to copy them to your clipboard.
  7. Navigate to your website's images folder, and then press Ctrl+V (Mac: Command+V) to paste the icons into the folder.

To locate and copy the address for your public LinkedIn profile

When you provide a link to your LinkedIn profile, you want to link to your official public profile. Be careful not to simply copy information from the address bar, which pertains to your account only when you are logged in.

  1. Open a web browser, and then go to https://www.linkedin.com.
  2. In the Email and Password boxes, type the email address and password you have associated with your LinkedIn account, and then click Sign in.
  3.  In the navigation bar, click the Me button, and then click View Profile.

    View Profile Link in LinkedIn
  4. In the right column navigation, under Contact and Personal Info, click Show more.

    Show more link
  5. Look under Your Profile to locate your public profile address.

    Your Profile area showing the public profile link
  6. Select your public profile address, and then press Ctrl+C (Mac: Command+C) to copy the address to the clipboard.

Tip: If you don't like your public profile address and want to personalize it, click the edit button edit profile button. In the Edit contact info dialog box, click the link under Profile URL. Under Edit public profile URL, click the edit URL button edit URL button, type a new personalized address, and then click Save.

To insert the icon for LinkedIn and connect to your profile

  1. Make sure your template file is open, and then switch to Design view.
  2. On the Insert menu, click Image.
  3. Click the LinkedIn icon, and then click OK.
  4. With the image selected, in the Alt box, type something along the lines of LinkedIn icon.
  5. In the Title box, type something along the lines of Connect with me on LinkedIn.

    Note: The title produces a tooltip when the user points to the icon.
  6. With the image still selected, click inside the Link box, and then press Ctrl+V (Mac: Command+V) to paste your public LinkedIn profile address.
  7. In the Link box, use the left arrow key to cursor back to the start of the address you just pasted, and then type https:// if this protocol isn't already present.
  8. In the Target list, click _blank to set the link to open in a new browser tab.
  9. Repeat the steps in this section to insert an image for each social media platform you plan to link to. Change the LinkedIn materials to suit the particular social media platform you're linking your audience to.
  10. On the File menu, click Save.
  11. When you're prompted to update template files, click Update, and then click Close.
  12. On the File menu, click Save All.

Style the <footer>

When creating your own site

  1. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  2. Click the Add Selector button Add Selector button, and then name the new selector footer.
  3. Style the footer to your taste. You could apply a background color, background image, top border, and so on.

To style the <footer>

  1. Open your lorem.html page in Live view.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector footer.
  4. In the CSS Designer panel, under Properties, click the Border button Border button.
  5. Under Border, click the Top button Top button.
  6. In the width box, type 1px, in the style list, click a border style (for example, Solid), and then in the color box, type or select a border color.

    Note: A color from your color scheme or black (hex code of #000) are good default choices.
  7. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  8. Under padding, in the padding-top box, type a value to separate the border from the footer content.

    Note: For starters, try 8px.
  9. Under margin, in the margin-top box, type a value to separate the entire footer from the rest of the webpage.

    Note: For starters, try 10px.
  10. In the CSS Designer panel, under Properties, click the Text button Text button.
  11. In the font-size box, type a value of your choosing.

    Note: Try 80% as a starting value and adjust up or down as needed.
  12. On the File menu, click Save All.

Style the <p> within the <footer>

When creating your own site

  1. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  2. Click the Add Selector button Add Selector button, and then name the new selector footer p.
  3. Style the footer paragraphs to your taste. Altering the font size, text alignment, margins, and line height are common.

To style the <p> within the <footer>

  1. Make sure your lorem.html file is still open in Live view.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector footer p.
  4. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  5. Under margin, in the margin-bottom box, type 4px.

    Note: Increase the margin some if you feel the spacing is too tight between lines.
  6. On the File menu, click Save All.

Style social images within the footer

To align social media icons to the right

  1. In the tag selector, click the <p> element to select the paragraph that holds the social media icons.
  2. In the Class list, click the image right class (in class, I used imgright).
  3. Go to the Split view.
  4. Make sure the <p> element that holds the images is still selected, and then press Ctrl+X (Mac: Command+X).
  5. Click immediately before the <p> element that holds your copyright information.
  6. Press Ctrl+V (Mac: Command+V) to paste the image paragraph before the copyright paragraph.
  7. Press Enter to put the copyright paragraph back on its own line.

(Optional) To put space between the social media icons

  1. Make sure your lorem.html file is still open.
  2. In the CSS Designer panel, click your style sheet, and then click GLOBAL.
  3. Click the Add Selector button Add Selector button, and then name the new selector .social.
  4. In the CSS Designer panel, under Properties, click the Layout button Layout button.
  5. Under margin, in the margin-left box, type a value (for example, 5px).

    Note: Increase the margin some if you feel the spacing is too tight between icons.
  6. In the Design view, apply the social class to each social image icon used in your site footer.
  7. On the File menu, click Save All.