Saving as a Template
-
VIDEO m05-01
-
Press F12 to preview your web page in a local web browser.
-
Switch to Design view.
-
With your dev.html, or Development page open, under the File menu, choose Save As Template.
-
Save the file 'dev.html' as a template.
-
Answer OK to update links.
-
If the template.dwt file does have the correct styling, close the file and reopen the file.
-
Put your cursor inside the <section id="section"> and remove the placeholder content, 'Content for New section Tag Goes Here'
-
Switch to Code view. Your cursor should be inside the section tags: <section id="section"></section>
-
Choose Insert /Template / Editable region.
-
In the dialog box, enter "mainContent" and click 'OK'
-
Put you cursor after the last javascript tag, '<script src="../js/bootstrap.js"></script>'
-
Choose Insert /Template / Editable region.
-
In the dialog box, enter "addScript" and click 'OK'
-
Remove the placeholder content 'addScript'.
-
Press Enter/Return to add a line break
-
Above the editable region, add the comment: '<!-- Add Additional Page Specific Script -->'
-
Click 'Save All'
-
Close the Template.
Creating Pages from the Template
-
Video - m05-02
-
Create pages based on the template file
-
Create home page based on the template.dwt file. File / New / Site Templates / Create
-
Change the name of the page to home (Document Title)
-
Save page (index.html)
-
Create gallery page based on the template.dwt file. File / New / Site Templates / Create
-
Change the name of the page to gallery (Document Title)
-
Save page (gallery.html)
-
Close page
-
Create history page based on the template.dwt file. File / New / Site Templates / Create
-
Change the name of the page to history (Document Title)
-
Save page (history.html)
-
Close page
-
Create media page based on the template.dwt file. File / New / Site Templates / Create
-
Change the name of the page to media (Document Title)
-
Save page (media.html)
-
Close page
Editing the Navigation Bar
-
Video - m05-03
-
Open the template.dwt.
-
Switch to Code view
-
Change the text 'Brand' to your website name: <a class="navbar-brand" href="#">Your Website Name</a></div>
-
Press F5 to refresh the page
-
Select <a .navbar-brand> in the Status bar
-
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
-
Save All
-
Answer OK to update all the pages
-
Video - m05-04
-
Find the glyphicon we added earlier, it will be around line 45, the code is: <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
-
Change the link target from "#" to "../index.html". The code should look like this: <a href="../index.html">
-
Press F5 to refresh the page
-
Change the text of the second link, 'Link', to 'Gallery'
-
Change the Link property (property inspector) from # to gallery.html
-
Change the text of the link, 'Dropdown', to 'More'
-
Change the text of the link, 'Action', to 'History'
-
Change the Link property (property inspector) from # to history.html
-
Change the text of the link, 'Another action', to 'Media'
-
Change the Link property (property inspector) from # to media.html
-
Change the text of the link, "Something else here' to 'Coming Soon'
-
Press F12 to preview and test your links in a web browser.
-
Video - m05-05
-
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/"
-
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"
-
Save All (update all files)
-
Press F12 (preview in browser)
Modifying the Navigation Search to Use Google Search
-
Video - m05-06
-
Click on the <form> tag
-
In the Property inspector change the action to 'http://google.com/search'
-
Change the form method to 'GET'
-
Change the form target to '_blank'
-
Click on the <input>, and set the input name to 'q'
-
Click on the <button> and change the text from 'Submit' to 'Google'
-
Press F12, save files and preview in a browser
Adding an Email link in the Navigation Bar
-
Video - m05-07
-
Select the next list item, <li><a href="#">Link</a></li>
-
With the <a> tag selected in the Status bar, press 'delete' to delete the anchor
-
Press F5 to refresh the page
-
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
-
'Save All' and update all pages
Adding the Hero Image and Jumbotron
-
Video - m05-08
-
Open the file 'index.html' this is your home page
-
You should be in code view.
-
Remove the place holder "mainContent"
-
Press the Enter key to create some empty space
-
Inside the editable region, from the application menu /insert, add a new div.
-
Create a new folder, 'images'. You will store all your images in this folder.
-
Add the 'hero' image your created in week 3 to the 'images' folder
-
Remove the placeholder content inside the new div
-
From the application menu /insert, choose image and Insert your 'hero' image inside the heroImage div.
-
Using the Property Inspector, remove the fixed width and height of your image, and provide an alt name.
-
Switch to Live view
-
Select the div, and in the Live view click on the blue box to add a new ID of heroImage, #heroImage
-
Give the div an id of "heroImage"
-
Save All
-
Video - m05-09
-
Use the F4 shortcut to hide panels
-
Switch to Live view only
-
Use the F4 shortcut to show panels
-
Create a CSS rule for" #heroImage img" and set your image to a width of 100%
-
Click on the div#heroImage in the DOM panel
-
Open the Insert panel, and click on Jumbotron.
-
The Jumbotron contains two child elements, a <h1> element, followed by a <p> element.
-
Add a bootstrap component "Jumbotron" after the heroImage div.
-
Double click on the text "Hello, world!" contained in the heading <h1> element and change this text to something appropriate to your website.
-
Save all
-
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.
-
Insert a div after the h1 element inside the Jumbotron
-
Video - m05-10
-
Optional: Use Wikipedia to find information for the new div, or add your own content, and copy the content.
-
Replace the place holder content in the new div
-
Use the Quick Tag editor to change the div tag into a HTML blockquote
-
Optional: Add an absolute link inside the blockquote
-
Press F12 to Preview the page in your local web browser
-
Create a new CSS rule to add 20px to the left of the Jumbotron, and 20px to the right.
-
Close the index file
-
Open the template file, and change the body 70px padding to 50px padding
-
Save and preview your site in a web browser (F12)
Wayne Joness
West Los Angeles College, cs952
Fall