Creating a FAQ Frequently-Asked-Questions page
-
Video - m11-01
-
Since we did not originally make a 'FAQ' page, create a new 'Frequently Asked Questions' page
-
File / New / Site Templates
-
Change the Document title to Pencil - FAQ
-
In Code view, remove the placeholder content 'mainContent'
-
Press 'Enter/Return' several times to add some space to the page.
-
Open the snippet window (shift+F9)
-
Find out code snippet, 'Starting_Code' (under Bootstrap snippets) and press the 'insert' button at the bottom of the snippet panel.
-
Close the snippet window.
-
Change the h2 text from "Gallery" to "FAQ: Frequently Asked Questions"
-
Switch to Live view
-
Select the h2
-
Select Insert / HTML
-
Add a div
-
For placement select 'after' to add the new div after the h2 element
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, #faqQuestion (id)
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector, .faqAnswer (class)
-
With the new div selected in the Status bar, use the Property inspector to assign it to the id 'faqQuestion'
-
In the Insert panel / HTML / add a div after the #faqQuestion div
-
For placement select 'after' to add the new div after the #faqQuestion div
-
Use the Property inspector to assign the div to the class .faqAnswer
-
Save All
-
Switch to Code view
-
Copy the .faqAnswer div two times
-
Press F5 or Refresh
-
Save All
-
Switch to Design view
-
Open tutorial folder, open text_files.txt to locate questions and answers.
-
Save All
-
Video - m11-02
-
Highlight placeholder content in the first div, #faqQuestion div, and paste in the first question.
-
Continue to add questions two and three to the #faqQuestion div, each in a paragraph tag
-
Save All
-
Copy the first question and the first answer, and paste into the second div, which is assigned to the class .faqAnswer
-
Copy the second question and the second answer, and paste into the third div, which is assigned to the class .faqAnswer
-
Copy the third question and the third answer, and paste into the fourth div, which is assigned to the class .faqAnswer
-
Save all
-
In styles.css, in GLOBAL, create three selectors: "#firstAnswer", "#secondAnswer", "#thirdAnswer"
-
Assign the div with the first answer and question to the id of firstAnswer.
-
Assign the div with the second answer and question to the id of secondAnswer.
-
Assign the div with the third answer and question to the id of thirdAnswer.
-
In the div #faqQuestion, select the first question, and in the Property inspector, link it to the first answer, #firstAnswer
-
In the div #faqQuestion, select the second question, and in the Property inspector, link it to the second answer, #secondAnswer
-
In the div #faqQuestion, select the third question, and in the Property inspector, link it to the third answer, #thirdAnswer
-
Save All
-
Preview in browser (F12)
-
Video - m11-03
-
In the first .faqAnswer div, add a final paragraph with the text, "Back To Top"
-
Link this paragraph to the faq question div, #faqQuestion
-
Copy this paragraph, and add it to the end of the two other answer divs
-
Save All
-
Preview in browser (F12)
Styling the F.A.Q.
-
Switch to Live view
-
Create a new selector in styles.css, in GLOBAL, for #faqQuestion p a
-
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
-
Under the category 'Text' set a font-weight:bold; text-decoration:none; select a unique text color.
-
Scroll to the bottom of properties, and enter 'transition' as a property, with a value of 'all 0.5s'
-
Video - m11-04
-
In styles.css, find the css selector .faqAnswer
-
Add the following property to .faqAnswer: margin-bottom:15px;
-
Add the following properties to .faqAnswer: padding, 10px (top) 10px (right) 30px (bottom) 10px (left)
-
Add the following property to .faqAnswer: border: thick (width) solid (color your choice)
-
Add the following property to .faqAnswer: background color (color your choice)
-
-
Add the following property to .faqAnswer: border-radius:10px;
-
Add the following property to .faqAnswer: text color (color your choice)
-
Add a selector, .faqAnswer p a with the following properties:font-weight:bold; font-style:italic; color: (your choice) float:right;
-
Video - m11-05
-
In styles.css, GLOBAL, adda new selector .faqAnswer p:first-child
-
Add text property of font-weight:bold;
-
Save All
-
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:
-
<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>
-
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
-
Video - m11-06
-
Select a source for your favicon. You can either use an image from the site, or find a favicon online
-
Favicon CC - [favicon.cc] Upload images and convert to Favicons, or create new favicons from scratch.
-
If you do not have an existing image for a favicon, you can use the pencil glyphicon from the homepage to create the favicosn.
-
On PC use the Snipping Tool to highlight a region and save, on MAC use Command + Shift + 4.
-
Upload the image to Favicon CC.
-
If desired, use the transparent block to add transparency to the the favicon.
-
Download the finished favicon
-
Add the favicon to the root directory of your website (not the images folder)
-
Open the template.dwt file.
-
Add the following code immediately following the <head> tag
-
<link rel="shortcut icon" href="../favicon.ico" />
-
Choose Save All, update the web pages, and preview in a browser
Adding a Responsive Google Map
-
Video - m11-07
-
Navigate to Google Maps and input an address.
-
Select the "Share" button
-
Choose "Embed map"
-
Copy the code.
-
In Dreamweaver, open template.dwt.
-
Switch to Code view.
-
Inside the footer, after the closing paragraph tag for the copyright (</p>), paste the code copied from Google.
-
Change the "width" from '600px' to '100%'. Leave height at 450 px.
-
Choose Save All, update the web pages, and preview in a browser.
Wayne Joness
West Los Angeles College, cs952
Fall