Creating a Table
-
Video - m08-01
-
Open the history.html page
-
In Code view, remove the placeholder content 'mainContent'
-
Press 'Enter/Return' several times to add some space to the page.
-
Press F5 'Refresh'
-
Open the snippet window (shift+F9)
-
Find out code snippet, 'Starting_Code' and press the 'insert' button at the bottom of the snippet panel.
-
Close the snippet panel.
-
Change the h2 text from "Gallery" to "History"
-
Press F5 'Refresh'
-
Save All
-
Place your cursor after the <h2> (before the closing </div> tag
-
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'
-
Press F5 'Refresh'
-
Save All
-
Video - m08-02
-
Type the initial entry for the table, inside the <th></th> tag, in this case you will replace the non-breaking html ' ' with 'Date.'
-
Switch to Design view
-
Place your cursor in the first cell of the table, with 'Date'. Use the 'tab' key to move between cells.
-
Enter all the information for the table
-
Video - m08-03
-
Switch to Live view
-
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
-
To improve the visual quality of the table, add the class of .table-striped to the table.
-
To add interactivity, add a class of .table-hover
-
Press F12 to save change and preview in browser
Adding a Background Image to the History Page
-
Video - m08-04
-
Open the 'history.html' file.
-
Switch to Code view.
-
Locate the "InstanceBeginEditable" and "InstanceEndEditable" markers in the head section of the history.html page. This is around line 33.
-
Type <style></style> in the empty line.
-
Save
-
In CSS Designer, under Sources, select <style>
-
Click the '+' under Selectors to add a new selector, 'section'
-
Go to the background color property, and select a background color.
-
Click the '+' under Selectors to add a new selector, 'table'
-
Set thebackground color property property for the table
-
Drag the image 'mtn_bckgnd.jpg' from the 'tutorial' folder to the 'images' folder
-
Background image properties: background-repeat: none
-
Set the background image size to cover to cover all horizontally
-
Set the background image property for the section
-
For more infomation on background images, visit the W3 demonstration page on background images.
Creating a Contact Page
-
Video - m08-05
-
Since we did not originally make a 'Contact Us' page, create a new 'contact' page
-
File / New / Site Templates
-
Change the Document title to 'Contact'
-
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' and press the 'insert' button at the bottom of the snippet panel.
-
Close the snippet panel.
-
Change the h2 text from "Gallery" to "Contact"
-
Place your cursor after the </h2> (before the closing </div> tag
-
From the Insert menu, select Form
-
Select the first item in the Form list, the Form element
-
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'
-
'Save' and save as 'contact'
-
Video - m08-06
-
From the top menu Insert, choose Div, and assign the new div to the class 'form-group'
-
Delete the placeholder content 'Content for class "form-group" Goes Here'
-
In the right hand Insert panel, switch from Bootstrap Components to Form
-
Switch to Live view
-
Make sure div.form-group is selected in the Status bar
-
Add a text element, from Insert / Form / Text, for placement choose 'nest'
-
Use the Property inspector to set the class to 'form-control'
-
In the Property inspector for the newly inserted <input>, change the Name to 'first_name'
-
Set the tab index to 1
-
Put a check mark in the Required box
-
Enter 'First name' in the Place Holder field
-
Change the text field above the input field from "Text Field:" to "First Name:" Be sure to keep the ':'
-
With many components to add, switch to Code view.
-
Select the div.form-group, use the Status bar to make sure all the content is selected
-
Under 'Window' select 'Snippets' (or shift+F9)
-
On the bottom of the pop-up box, click the icon of a file with a '+' inside. A new snippet opens
-
In the name Field (top of the box) type 'form_group'
-
Click 'Insert block'
-
Notice our new snippet has been added to the 'Bootstrap_Snippets' folder
-
Close snippets.
-
Save All
-
Video - m08-07
-
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>
-
Press 'Enter/Return' to add a new line
-
Open Snippets (shift+F9)
-
Click on our newly snippet 'form_group' and press the Insert button
-
Press 'Enter/Return' to add a new line
-
Press the Insert button again.
-
Press 'Enter/Return' to add a new line
-
Press the Insert button again.
-
Close the Snippet window
-
The 'form_group' snippet has been added three times to the page.
-
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.
-
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.
-
Of the three copies we just added to the page, select the first one.
-
Highlight the code.
-
Press Ctrl+F (find)
-
In the Find and Replace dialog box that opens, select "Find in 'Selected Text'
-
In the 'Find' field, enter 'first' in the 'Replace' field end 'last'
-
Click 'Replace all'
-
A box should open reporting that five changes were made to the selected text.
-
Fix the capitalization for the <label> and 'placeholder' only, change 'last' to 'Last'
-
Press F5 Refresh
-
Set the tab index for "last name" to 2
-
In the next snippet of code we added, change all references from 'first name' to 'email', and set the tab index to 3
-
Change the type to "email"
-
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.
-
Click on the "input" in the status bar, and press DELETE
-
Click on the "label" in the status bar, and press DELETE
-
Place your cursor inside the div.form-group.
-
From the right panel insert, chose Insert / Form / Radio Group
-
In the Dialog box, set the 'Name' to 'email_list'
-
Set the first label to 'Yes' with a value of 'Yes'
-
Set the second label to 'No' with a value of 'No'
-
Click on the 'Yes' button input, and select 'Checked' in the Property inspector, and tab index 4
-
Add a tab index of '4' to the 'Yes' button
-
Save All
-
Video - m08-08
-
Delete the <br> tag after the "Yes" radio button
-
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
-
In the Dialog box, "Would you like to be on our email list?"
-
Press F12 to save your work and preview in a browser
-
The legend to too large!
-
Select the fieldset tag in the Status bar
-
In CSS Designer, select 'styles.css' under Sources. Select 'GLOBAL' under @Media, and click the '+' under Selectors to add a new selector
-
Use this selector: 'fieldset legend' This selector is two words with a space between the two words.
-
Set the text-size property to 14px, and the font-weight to bold.
-
In Code view, copy the contents of the last form-group, with the radio buttons
-
Paste the content after the last form group (radio buttons).
-
Press F5 Refresh
-
Change the content of the legend to: 'Which pages would you visit again?'
-
Press F5 Refresh
-
Delete the paragraph inside the fieldset, including the radio buttons
-
Place your cursor after the closing </legend> tag, but before the closing <fieldset> tag.
-
From the right panel Insert, select 'Checkbox Group"
-
Form the name, use 'favorite[]'
-
For the first two labels and values, use 'home' and 'gallery'
-
Click the '+' button to add another label/value set, 'history'
-
Click the '+' button to add another label/value set, 'media'
-
Click "OK"
-
Video - m08-09
-
After clicking "OK", set the tab indexs for 5 - 8 respectively
-
Place you cursor before the closing </form> tag, but after the closing </div> tag used for the checkbox group we just edited.
-
Add another div with the class of 'form group'
-
Delete the place holder content: 'Content for class "form-group" Goes Here'
-
Place you cursor inside the newly added div: <div class="form-group"> </div>
-
Add a 'Submit' button from the Insert / Form / Submit
-
For the "Submit" button, the type="submit", the name="submit", id="submit" and the value="Submit"
-
Click on the 'Submit' button and change the value to 'Send Us A Note!', set the tab index to '9',
-
Set the class of 'Submit' to 'btn'
-
In the code, hit return after the close of the "submit" button to add a new line
-
Add a 'Reset' button from the Insert / Form / Reset
-
For the "Reset" button, the type="reset", the name="reset", id="reset" and the value="Reset"
-
Set the tab index to '10'
-
Set the class of 'Reset' to 'btn'
-
Save All
-
Add a class of .btn-primary to the Submit (Send Us A Note!) and a class of .btn-warning to the Reset Buttons
-
Save All
-
Video - m08-10
-
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"
-
Open the template.dwt file in Design view.
-
Change the text "Email" to "Contact".
-
Change the link from the email link to link to the "contact.html" page.
Wayne Joness
West Los Angeles College, cs952
Fall