Create a responsive Bootstrap layout in Dreamweaver — Part 2

Create a webpage from a template

When creating your own site

  1. Create new webpages from your template.
  2. In the Document Title box of each webpage, type a specific title the represent the webpage content. Modify the title you added to your template, specifying the content covered in this page. Don't leave webpages with a title of Untitled Document.
  3. In the content editable region, type your page content.
  4. Mark up the content as appropriate. For example, apply the Heading 2 styles to the main heading within the content editable region and within any sidebars. Also, use paragraphs, subheadings, unordered lists with list items for bulleted content, and so on, as needed.
  5. Save the file using web-safe naming. Remember that spaces, special characters, and symbols are invalid in web file names. If you need a space in the file name, use an underscore instead. Also consider using lowercase file names, which makes it easier to ensure you won't encounter case-sensitivity issues when publishing your site to a server.

To create a file from the template

  1. Make sure you're still working in Design view.
  2. On the Window menu, click Assets.
  3. In the Assets panel, click the Templates button Template button.

    Note: If no templates appear, click the Refresh Site List button Refresh Site List button at the bottom of the Assets panel.
  4. Right-click the template entry, and then click New from Template.

    Caution: Be careful not to click New Template. The from makes a big difference here!
  5. When the new, untitled webpage opens in Dreamweaver, click the File menu, and then click Save.
  6. In the File name box, type lorem.html, and then click Save. (For in-class practice, we'll use this page to create and test our design work.)
  7. In the Document Title box, type a specific title for the current page. In class, we used Lorem Ipsum.

    Note: Don't leave just the template title or, worse, Untitled Document as the page title.
  8. In the content editable region, type an appropriate heading. (In-class example uses Introduction to my portfolio.)

    Note: Page headings and titles often share the same or similar names.

To copy and paste content from a Word document into an editable region

  1. Download and open the lorem_ipsum_text.docx file from my website.
  2. Press Ctrl+A (Mac: Command+A) to select all the document contents, and then press Ctrl+C (Mac: Command+C) to copy the content to the clip board.
  3. In the Dreamweaver document, select the placeholder text for the content editable region.
  4. On the Edit menu, click Paste Special. (The keyboard shortcut is Ctrl+Shift+V on a PC, or Command+Shift+V on a Mac.)
  5. Click Text with structure (paragraphs, lists, tables, etc.), and then select the Clean up Word paragraph spacing and Convert smart quotes to straight quotes check boxes.
  6. Click OK.
  7. Apply the Heading 2 style to the main heading, and the Heading 3 style to the subheadings.
  8. Save your work.

Insert an image

When creating your own site

  1. If you decide to borrow images for your site, go through a website that offers free or low-cost images. See the Stock Photo Links page on my website for a few places to start with.

    Caution: Don't assume that any image shown in Google Image search, Flickr, or Facebook is fair game! The person who took the photo retains copyright control over the image.
  2. Check the site's term of service or the image's licensing or both to see if you can use the image for your specific purpose. If the licensing is through Creative Commons or another licensing system, follow all required guidelines when using the image.
  3. When inserting an image that requires a citation, use the <figure> element, which offers a <figcaption> for citations or other types of captions. You would insert the <img> into the <figure> element in this situation. If the image doesn't require a citation, you can use the <img> element alone without the <figure> element.
  4. If you decide to use the image for any commercial purposes, including web-based portfolios that you're using to seek employment, be doubly sure you have the rights to the use the image as outlined to avoid receiving a nasty letter or worse from the copyright holder or the copyright holder's attorney.

To insert an image

  1. In the document, click where you want to insert the document. (In class, click before the word Lorem in the content area.)
  2. On the Insert menu, click Image, select the keyboard image we downloaded from my website, and then click OK.
  3. In the Alt box, type an appropriate description for the image, such as Photo of a keyboard.

To resize an image

Do one of the following:

Remember that the image width should not exceed the width of the largest screen size, which in the default Bootstrap layout is 1200px.

To resample an image

  1. With the image still selected, in the Properties panel, click the Commit Image Size button Commit Image Size button, and then click OK to resize the image permanently.

    Caution: Before committing the change, make sure you have a backup copy of your image, because it becomes permanent after saving the webpage.
  2. On the File menu, click Save All.

To create a style rule for .imgleft to wrap the text around the image

  1. In the CSS Designer panel, make sure the All button is selected, and make sure the Show Set check box is cleared.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 .imgleft.
  3. Under Properties, click the Layout button Layout button.
  4. Set the float to left left float button.
  5. In the margin-right box, type a value to provide some spacing between the image and the text that wraps around it. (In class, we used 10px as a starting point.)
  6. Click the image, and then in the Class list, click imgleft to assign the class to the image.

To create a style rule for .imgright to wrap the text around the image

  1. In the CSS Designer panel, make sure the All button is selected, and make sure the Show Set check box is cleared.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 .imgright.
  3. Under Properties, click the Layout button Layout button.
  4. Set the float to right right float button.
  5. In the margin-left box, type a value to provide some spacing between the image and the text that wraps around it. (In class, we used 10px as a starting point.)
  6. Click the image, and then in the class list, click imgright to assign the class to the image.

Style the <body>

When creating your own site

  1. Open any webpage or the template file.
  2. In the CSS Designer panel, under Sources, click your style sheet file.
  3. Under @Media, click GLOBAL.
  4. Next to Selectors, click the Add Selector button Add Selector button.
  5. Delete any text in the selector name box, type body, and then press Enter.

    Note: Remember that the body rule initially styles all the page content, because all other style rules are nested inside <body> and inherit settings from the body style.
  6. Set any style rules that you want to apply to all pages within your website.

To set the body font

  1. Open the template.dwt file.
  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 body.
  4. Under Properties, click the Text button Text button.
  5. Next to font-family, do one of the following:

    Note: If you want to use a web font from Adobe's server, after clicking Manage Fonts, click the Adobe Edge Web Fonts tab. Click an appropriate font from the list of options, and then click Done. (The in-class example uses Open Sans.)
  6. Click the Custom Font Stacks tab, and then under Available fonts, double-click your preferred font to add it to the Chosen fonts list. If you used an Adobe Edge Web Font, pick it as the first font.
  7. Continue adding fonts to the Chosen fonts list until you have a stack of fonts that fall back to more common fonts than the initial font you selected. (The in-class example uses Open Sans, Verdana, Arial.)

    Note: You can add fonts to the list that aren't available on your current computer but may be available widely on users' computers. For instance, Helvetica is a common Mac font that isn't generally available on Windows computers. To add an unavailable font to the font stack, type the font name by its exact name in the text box under Available fonts, and then click the add font button .
  8. Click the generic font family for the last font. If you're using sans-serif fonts, double-click sans-serif. If you're using serif fonts, double-click serif.
  9. Click Done.
  10. In the font-family list, click your newly created font stack from the list.
  11. On the File menu, click Save All, and then click Update.
  12. If you receive a message that the change requires changing code locked by a template, click OK, and then close the Update Pages dialog box.
  13. Make sure you're in Design view.
  14. In the template.dwt file, click after Insert content here, and then press the Spacebar.
  15. On the File menu, click Save All, click Update, and then close the Update Pages dialog box.