Creating a Table

  1. Video - m08-01
  2. Open the history.html page
  3. In Code view, remove the placeholder content 'mainContent'
  4. Press 'Enter/Return' several times to add some space to the page.
  5. Press F5 'Refresh'
  6. Open the snippet window (shift+F9)
  7. Find out code snippet, 'Starting_Code' and press the 'insert' button at the bottom of the snippet panel.
  8. Close the snippet panel.
  9. Change the h2 text from "Gallery"  to "History"
  10. Press F5 'Refresh'
  11. Save All
  12. Place your cursor after the <h2> (before the closing </div> tag
  13.  From the Insert menu (top), select  Insert / HTML / Table. In this example, the table is three columns, six rows, with a Horizontal table header. Adding a caption is optional, in this case we will use 'Developments in the History of the Pencil'
  14. Press F5 'Refresh'
  15. Save All
  16. Video - m08-02
  17. Type the initial entry for the table, inside the <th></th> tag, in this case you will replace the non-breaking html '&nbsp;' with 'Date.'
  18. Switch to Design view
  19. Place your cursor in the first cell of the table, with 'Date'. Use the 'tab' key to move between cells.
  20. Enter all the information for the table
  21. Video - m08-03
  22. Switch to Live view
  23. In Live view, with the 'table' selected in the Status bar, use the Property inspector to add a class of  .table to the table and view the changes
  24. To improve the visual quality of the table, add the class of .table-striped to the table.
  25. To add interactivity, add a class of .table-hover
  26. Press F12 to save change and preview in browser

Adding a Background Image to the History Page

  1. Video - m08-04
  2. Open the 'history.html' file.
  3. Switch to Code view.
  4. Locate the "InstanceBeginEditable" and "InstanceEndEditable" markers in the head section of the history.html page. This is around line 33.
  5. Type <style></style> in the empty line.
  6. Save
  7. In CSS Designer, under Sources, select <style>
  8. Click the '+' under Selectors to add a new selector, 'section'
  9. Go to the background color property, and select a background color.
  10. Click the '+' under Selectors to add a new selector, 'table'
  11. Set thebackground color property property for the table
  12. Drag the image 'mtn_bckgnd.jpg' from the 'tutorial' folder to the 'images' folder
  13. Background image properties: background-repeat: none
  14. Set the background image size to cover to cover all horizontally
  15. Set the background image property for the section
  16. For more infomation on background images, visit the W3 demonstration page on background images.

Creating a Contact Page

  1. Video - m08-05
  2. Since we did not originally make a 'Contact Us' page, create a new 'contact' page
  3. File / New / Site Templates
  4. Change the Document title to 'Contact'
  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' and press the 'insert' button at the bottom of the snippet panel.
  9. Close the snippet panel.
  10. Change the h2 text from "Gallery"  to "Contact"
  11. Place your cursor after the </h2> (before the closing </div> tag
  12. From the Insert menu, select Form
  13. Select the first item in the Form list, the Form element
  14. In the Property inspector, change the ID of the form to 'contact', set the 'Action' to 'http://www.cs952.org/contact.php', the 'Method' to POST, and the 'Target' to '_blank'
  15. 'Save' and save as 'contact'
  16. Video - m08-06
  17. From the top menu Insert, choose Div, and assign the new div to the class 'form-group'
  18. Delete the placeholder content 'Content for  class "form-group" Goes Here'
  19. In the right hand Insert panel, switch from Bootstrap Components to Form
  20. Switch to Live view
  21. Make sure div.form-group is selected in the Status bar
  22. Add a text element, from Insert / Form / Text, for placement choose 'nest'
  23. Use the Property inspector to set the class to 'form-control'
  24. In the Property inspector for the newly inserted <input>, change the Name to 'first_name'
  25. Set the tab index to 1
  26. Put a check mark in the Required box
  27. Enter 'First name' in the Place Holder field
  28. Change the text field above the input field from "Text Field:" to "First Name:" Be sure to keep the ':'
  29. With many components to add, switch to Code view.
  30. Select the div.form-group, use the Status bar to make sure all the content is selected
  31. Under 'Window' select 'Snippets' (or shift+F9)
  32. On the bottom of the pop-up box, click the icon of a file with a '+' inside. A new snippet opens
  33. In the name Field (top of the box) type 'form_group'
  34. Click 'Insert block'
  35. Notice our new snippet has been added to the 'Bootstrap_Snippets' folder
  36. Close snippets.
  37. Save All
  38. Video - m08-07
  39. Place your cursor after the div we just added, the div that is a member of the 'form-group' class,. You cursor will also be just in front of the closing form tag </form>
  40. Press 'Enter/Return' to add a new line
  41. Open Snippets (shift+F9)
  42. Click on our newly snippet 'form_group' and press the Insert button
  43. Press 'Enter/Return' to add a new line
  44. Press the Insert button again.
  45. Press 'Enter/Return' to add a new line
  46. Press the Insert button again.
  47. Close the Snippet window
  48. The 'form_group' snippet has been added three times to the page.
  49. In the first snippet of code added, we will follow the steps below to change all references from 'first name' to 'last name', and set the tab index to 2.
  50. You now have a total of four divs with "first name". We will not change our first div with "first name," but modify the three copies we added.
  51. Of the three copies we just added to the page, select the first one.
  52. Highlight the code.
  53. Press Ctrl+F (find)
  54. In the Find and Replace dialog box that opens, select "Find in 'Selected Text'
  55. In the 'Find' field, enter 'first' in the 'Replace' field end 'last'
  56. Click 'Replace all'
  57. A box should open reporting that five changes were made to the selected text.
  58. Fix the capitalization for the <label> and 'placeholder' only, change 'last' to 'Last'
  59. Press F5 Refresh
  60. Set the tab index for "last name" to 2
  61. In the next snippet of code we added, change all references from 'first name' to 'email', and set the tab index to 3
  62. Change the type to "email"
  63. In the last snippet of code we added, the last div that is a member of the 'form_group' we will delete the content inside the div. We do not need the inner content, just the opening and closing div tags.
  64. Click on the "input" in the status bar, and press DELETE
  65. Click on the "label" in the status bar, and press DELETE
  66. Place your cursor inside the div.form-group.
  67. From the right panel insert, chose Insert / Form / Radio Group
  68. In the Dialog box, set the 'Name' to 'email_list'
  69. Set the first label to 'Yes' with a value of 'Yes'
  70. Set the second label to 'No' with a value of 'No'
  71. Click on the 'Yes' button input, and select 'Checked' in the Property inspector, and tab index 4
  72. Add a tab index of '4' to the 'Yes' button
  73. Save All
  74. Video - m08-08
  75. Delete the <br> tag after the "Yes" radio button
  76. Drag your cursor across the two input labels (including paragraph tags), and from the right side Insert panel, choose Form / Fieldset. Tip: click on the <p> tag in the status bar
  77. In the Dialog box, "Would you like to be on our email list?"
  78. Press F12 to save your work and preview in a browser
  79. The legend to too large!
  80. Select the fieldset tag in the Status bar
  81. In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector
  82. Use this selector: 'fieldset legend' This selector is two words with a space between the two words.
  83. Set the text-size property to 14px, and the font-weight to bold.
  84. In Code view, copy the contents of the last form-group, with the radio buttons
  85. Paste the content after the last form group (radio buttons).
  86. Press F5 Refresh
  87. Change the content of the legend to: 'Which pages would you visit again?'
  88. Press F5 Refresh
  89. Delete the paragraph inside the fieldset, including the radio buttons
  90. Place your cursor after the closing </legend> tag, but before the closing <fieldset> tag.
  91. From the right panel Insert, select 'Checkbox Group"
  92. Form the name, use 'favorite[]'
  93. For the first two labels and values, use 'home' and 'gallery'
  94. Click the '+' button to add another label/value set, 'history'
  95. Click the '+' button to add another label/value set, 'media'
  96. Click "OK"
  97. Video - m08-09
  98. After clicking "OK", set the tab indexs for 5 - 8 respectively
  99. Place you cursor before the closing </form> tag, but after the closing </div> tag used for the checkbox group we just edited.
  100. Add another div with the class of 'form group'
  101. Delete the place holder content: 'Content for  class "form-group" Goes Here'
  102. Place you cursor inside the newly added div: <div class="form-group">   </div>
  103. Add a 'Submit' button from the Insert / Form / Submit
  104. For the "Submit" button, the type="submit", the name="submit", id="submit" and the value="Submit"
  105. Click on the 'Submit' button and change the value to 'Send Us A Note!', set the tab index to '9',
  106. Set the class of 'Submit' to 'btn'
  107. In the code, hit return after the close of the "submit" button to add a new line
  108. Add a 'Reset' button from the Insert / Form / Reset
  109. For the "Reset" button, the type="reset", the name="reset", id="reset" and the value="Reset"
  110. Set the tab index to '10'
  111. Set the class of 'Reset' to 'btn'
  112. Save All
  113. Add a class of .btn-primary to the Submit (Send Us A Note!) and a class of .btn-warning to the Reset Buttons
  114. Save All
  115. Video - m08-10
  116. Close all open files, then open the template file, and modify the navigation, changing "Email" link in the navigation bar to a link to "Contact"
  117. Open the template.dwt file in Design view.
  118. Change the text "Email" to "Contact".
  119. Change the link from the email link to link to the "contact.html" page.

Wayne Joness
West Los Angeles College, cs952
Fall 2016