Saving as a Template

  1. VIDEO m05-01
  2. Press F12 to preview your web page in a local web browser.
  3. Switch to Design view.
  4. With your dev.html, or Development page open, under the File menu, choose Save As Template.
  5. Save the file 'dev.html' as a template.
  6. Answer OK to update links.
  7. If the template.dwt file does have the correct styling, close the file and reopen the file.
  8. Put your cursor inside the <section id="section"> and remove the placeholder content, 'Content for New section Tag Goes Here'
  9. Switch to Code view. Your cursor should be inside the section tags: <section id="section"></section>
  10. Choose Insert /Template / Editable region.
  11. In the dialog box, enter "mainContent" and click 'OK'
  12. Put you cursor after the last javascript tag, '<script src="../js/bootstrap.js"></script>'
  13. Choose Insert /Template / Editable region.
  14. In the dialog box, enter "addScript" and click 'OK'
  15. Remove the placeholder content 'addScript'.
  16. Press Enter/Return to add a line break
  17. Above the editable region, add the comment: '<!-- Add Additional Page Specific Script -->'
  18. Click 'Save All'
  19. Close the Template.

Creating Pages from the Template

  1. Video - m05-02
  2. Create pages based on the template file
  3. Create home page based on the template.dwt file. File / New / Site Templates / Create
  4. Change the name of the page to home (Document Title)
  5. Save page (index.html)
  6. Create gallery page based on the template.dwt file. File / New / Site Templates / Create
  7. Change the name of the page to gallery (Document Title)
  8. Save page (gallery.html)
  9. Close page
  10. Create history page based on the template.dwt file. File / New / Site Templates / Create
  11. Change the name of the page to history (Document Title)
  12. Save page (history.html)
  13. Close page
  14. Create media page based on the template.dwt file. File / New / Site Templates / Create
  15. Change the name of the page to media (Document Title)
  16. Save page (media.html)
  17. Close page

Editing the Navigation Bar

  1. Video - m05-03
  2. Open the template.dwt.
  3. Switch to Code view
  4. Change the text 'Brand' to your website name: <a class="navbar-brand" href="#">Your Website Name</a></div>
  5. Press F5 to refresh the page
  6. Select <a .navbar-brand> in the Status bar
  7. Change the Link property (Property inspector) from # to index.html. Click on the folder icon next to the Link field, and navigate to the file index.html
  8. Save All
  9. Answer OK to update all the pages
  10. Video - m05-04
  11. Find the glyphicon we added earlier, it will be around line 45, the code is: <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
  12. Change the link target from "#" to "../index.html". The code should look like this: <a href="../index.html">
  13. Press F5 to refresh the page
  14. Change the text of the second link, 'Link', to 'Gallery'
  15. Change the Link property (property inspector) from # to gallery.html
  16. Change the text of the link, 'Dropdown', to 'More'
  17. Change the text of the link, 'Action', to 'History'
  18. Change the Link property (property inspector) from # to history.html
  19. Change the text of the link, 'Another action', to 'Media'
  20. Change the Link property (property inspector) from # to media.html
  21. Change the text of the link, "Something else here' to 'Coming Soon'
  22. Press F12 to preview and test your links in a web browser.
  23. Video - m05-05
  24. Change the text of the first 'Separated link', and enter an external, or absolute  link, and set target equal to '_blank'. In the case the text is "The Pencil Museum" and the target is "http://www.pencilmuseum.co.uk/"
  25. Change the text of the second 'Separated link', and an external, or absolute link, and set target equal to '_blank'. In this case the text is "Wikipedia" and the target is "https://en.wikipedia.org/wiki/Pencil"
  26. Save All (update all files)
  27. Press F12 (preview in browser)

Modifying the Navigation Search to Use Google Search

  1. Video - m05-06
  2. Click on the <form> tag
  3. In the Property inspector change the action to 'http://google.com/search'
  4. Change the form method to 'GET'
  5. Change the form target to '_blank'
  6. Click on the <input>, and set the input name to 'q'
  7. Click on the <button> and change the text from 'Submit' to 'Google'
  8. Press F12, save files and preview in a browser

Adding an Email link in the Navigation Bar

  1. Video - m05-07
  2. Select the next list item, <li><a href="#">Link</a></li>
  3. With the <a> tag selected in the Status bar, press 'delete' to delete the anchor
  4. Press F5 to refresh the page
  5. With the cursor inside the <li></li> tag, select from the top menu select Insert / HTML / Email Link and enter Text: 'Email' and Email, your email address
  6. 'Save All' and update all pages

Adding the Hero Image and Jumbotron

  1. Video - m05-08
  2. Open the file 'index.html' this is your home page
  3. You should be in code view.
  4. Remove the place holder "mainContent"
  5. Press the Enter key to create some empty space
  6. Inside the editable region, from the application menu /insert, add a new div.
  7. Create a new folder, 'images'. You will store all your images in this folder.
  8. Add the 'hero' image your created in week 3 to the 'images' folder
  9. Remove the placeholder content inside the new div
  10. From the application menu /insert, choose image and Insert your 'hero' image inside the heroImage div.
  11. Using the Property Inspector, remove the fixed width and height of your image, and provide an alt name.
  12. Switch to Live view
  13. Select the div, and in the Live view click on the blue box to add a new ID of heroImage, #heroImage
  14. Give the div an id of "heroImage"
  15. Save All
  16. Video - m05-09
  17. Use the F4 shortcut to hide panels
  18. Switch to Live view only
  19. Use the F4 shortcut to show panels
  20. Create a CSS rule for" #heroImage img" and set your image to a width of 100%
  21. Click on the div#heroImage in the DOM panel
  22. Open the Insert panel, and click on Jumbotron.
  23. The Jumbotron contains two child elements, a <h1> element, followed by a <p> element.
  24. Add a bootstrap component "Jumbotron" after the heroImage div.
  25. Double click on the text "Hello, world!" contained in the heading <h1> element and change this text to something appropriate to your website.
  26. Save all
  27. Removed the placeholder text and insert the website description text inside the paragraph  <p> element in the Jumbotron. You can switch to Code view and copy the website description from the meta tag description, or add something different.
  28. Insert a div after the h1 element inside the Jumbotron
  29. Video - m05-10
  30. Optional: Use Wikipedia to find information for the new div, or add your own content, and copy the content.
  31. Replace the place holder content in the new div
  32. Use the Quick Tag editor to change the div tag into a HTML blockquote
  33. Optional: Add an absolute link inside the blockquote
  34. Press F12 to Preview the page in your local web browser
  35. Create a new CSS rule to add 20px to the left of the Jumbotron, and 20px to the right.
  36. Close the index file
  37. Open the template file, and change the body 70px padding to 50px padding
  38. Save and preview your site in a web browser (F12)

Wayne Joness
West Los Angeles College, cs952
Fall 2016