Creating a FAQ Frequently-Asked-Questions page

  1. Video - m11-01
  2. Since we did not originally make a 'FAQ' page, create a new 'Frequently Asked Questions' page
  3. File / New / Site Templates
  4. Change the Document title to Pencil - FAQ
  5. In Code view, remove the placeholder content 'mainContent'
  6. Press 'Enter/Return' several times to add some space to the page.
  7. Open the snippet window (shift+F9)
  8. Find out code snippet, 'Starting_Code' (under Bootstrap snippets) and press the 'insert' button at the bottom of the snippet panel.
  9. Close the snippet window.
  10. Change the h2 text from "Gallery"  to "FAQ: Frequently Asked Questions"
  11. Switch to Live view
  12. Select the h2
  13. Select Insert / HTML
  14. Add a div
  15. For placement select 'after' to add the new div after the h2 element
  16. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, #faqQuestion (id)
  17. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, .faqAnswer (class)
  18. With the new div selected in the Status bar, use the Property inspector to assign it to the id 'faqQuestion'
  19. In the Insert panel / HTML / add a div after the #faqQuestion div
  20. For placement select 'after' to add the new div after the #faqQuestion div
  21. Use the Property inspector to assign the div to the class .faqAnswer
  22. Save All
  23. Switch to Code view
  24. Copy the .faqAnswer div two times
  25. Press F5 or Refresh
  26. Save All
  27. Switch to Design view
  28. Open tutorial folder, open text_files.txt to locate questions and answers.
  29. Save All
  30. Video - m11-02
  31. Highlight placeholder content in the first div, #faqQuestion div, and paste in the first question.
  32. Continue to add questions two and three to the #faqQuestion div, each in a paragraph tag
  33. Save All
  34. Copy the first question and the first answer, and paste into the second div, which is assigned to the class .faqAnswer
  35. Copy the second question and the second answer, and paste into the third div, which is assigned to the class .faqAnswer
  36. Copy the third question and the third answer, and paste into the fourth div, which is assigned to the class .faqAnswer
  37. Save all
  38. In styles.css, in GLOBAL, create three selectors: "#firstAnswer", "#secondAnswer", "#thirdAnswer"
  39. Assign the div with the first answer and question to the id of firstAnswer.
  40. Assign the div with the second answer and question to the id of secondAnswer.
  41. Assign the div with the third answer and question to the id of thirdAnswer.
  42. In the div #faqQuestion, select the first question, and in the Property inspector, link it to the first answer, #firstAnswer
  43. In the div #faqQuestion, select the second question, and in the Property inspector, link it to the second answer, #secondAnswer
  44. In the div #faqQuestion, select the third question, and in the Property inspector, link it to the third answer, #thirdAnswer
  45. Save All
  46. Preview in browser (F12)
  47. Video - m11-03
  48. In the first .faqAnswer div, add a final paragraph with the text, "Back To Top"
  49. Link this paragraph to the faq question div, #faqQuestion
  50. Copy this paragraph, and add it to the end of the two other answer divs
  51. Save All
  52. Preview in browser (F12)

Styling the F.A.Q.

  1. Switch to Live view
  2. Create a new selector in styles.css, in GLOBAL, for #faqQuestion p a
  3. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, #faqQuestion p a
  4. Under the category 'Text' set a font-weight:bold; text-decoration:none; select a unique text color.
  5. Scroll to the bottom of properties, and enter 'transition' as a property, with a value of  'all 0.5s'
  6. Video - m11-04
  7. In styles.css, find the css selector .faqAnswer
  8. Add the following property to .faqAnswer: margin-bottom:15px;
  9. Add the following properties to .faqAnswer: padding, 10px (top) 10px (right) 30px (bottom) 10px (left)
  10. Add the following property to .faqAnswer: border: thick (width) solid (color your choice)
  11. Add the following property to .faqAnswer: background color (color your choice)
    1. Add the following property to .faqAnswer: border-radius:10px;
  12. Add the following property to .faqAnswer: text color (color your choice)
  13. Add a selector, .faqAnswer p a with the following properties:font-weight:bold; font-style:italic; color: (your choice) float:right;
  14. Video - m11-05
  15. In styles.css, GLOBAL, adda new selector .faqAnswer p:first-child
  16. Add text property of font-weight:bold;
  17. Save All
  18. Adding smooth scrolling and offset with jQuery and JavaScript. Copy and Paste the JavaScript/jQuery into the "addScript" section at the bottom of the faq page:
  19. <script>
      $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
          if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
              $('html, body').animate({
                scrollTop: target.offset().top - $('#topFixedNavbar1').height()
              }, 1000);
              return false;
            }
          }
        });
      });
    </script>

     
  20. Close all open files, then open the template file, and modify the navigation, changing "Coming Soon" to a link to "FAQ"

Optional:

Adding a Favicon

  1. Video - m11-06
  2. Select a source for your favicon. You can either use an image from the site, or find a favicon online
  3. Favicon CC - [favicon.cc] Upload images and convert to Favicons, or create new favicons from scratch.
  4. If you do not have an existing image for a favicon, you can use the pencil glyphicon from the homepage to create the favicosn.
  5. On PC use the Snipping Tool to highlight a region and save, on MAC use Command + Shift + 4.
  6. Upload the image to Favicon CC.
  7. If desired, use the transparent block to add transparency to the the favicon.
  8. Download the finished favicon
  9. Add the favicon to the root directory of your website (not the images folder)
  10. Open the template.dwt file.
  11. Add the following code immediately following the <head> tag
  12. <link rel="shortcut icon" href="../favicon.ico" />
  13. Choose Save All, update the web pages, and preview in a browser

Adding a Responsive Google Map

  1. Video - m11-07
  2. Navigate to Google Maps and input an address.
  3. Select the "Share" button
  4. Choose "Embed map"
  5. Copy the code.
  6. In Dreamweaver, open template.dwt.
  7. Switch to Code view.
  8. Inside the footer, after the closing paragraph tag for the copyright (</p>), paste the code copied from Google.
  9. Change the "width" from '600px' to '100%'. Leave height at 450 px.
  10. Choose Save All, update the web pages, and preview in a browser.

Wayne Joness
West Los Angeles College, cs952
Fall 2016