Scribd
Upload
42 views3 pages

Lab 04 Customizing Web Templates

The document discusses customizing website templates by downloading a free HTML5 template, editing the HTML and CSS files to change text, images and colors to reflect a new site, and practicing hands-on customization of template elements, pages, and styles.

Uploaded by

ralhp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
42 views3 pages

Lab 04 Customizing Web Templates

The document discusses customizing website templates by downloading a free HTML5 template, editing the HTML and CSS files to change text, images and colors to reflect a new site, and practicing hands-on customization of template elements, pages, and styles.

Uploaded by

ralhp
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Lab 04: Customizing Web Templates

To this point in the course, you have learned how basic Web pages are constructed and
formatted. You have used HTML to create the content and structure of a Web page. And, you have
entered and modified CSS styles for formatting the appearance of a Web page. Given this
foundation, you are now ready to work with professionally-designed website templates. In this
lab, you will be introduced to several websites for downloading free and premium templates and
graphics.

Tutorial: Lab 04
Review the content on this web page: Customizing an HTML template.

HTML & CSS Templates


Here are some of my favourite template sites. Remember to search for HTML, HTML5, or CSS
templates specifically, since many templates are built specifically for content management
systems (CMS) like Drupal or WordPress. You will notice that many of these templates are based
on the open-source Bootstrap project, a powerful front-end CSS and JavaScript framework initially
developed by coders at Twitter.

ThemeForest (paid)
ThemeWagon (paid/free)
Pixelarity (paid)
Start Bootstrap (free)
HTML5 Up (attribution)
Free CSS Templates (attribution)

Graphic Resources
After downloading a website template, you will want to search for the right graphics to go along
with the color scheme or style of your template. I've provided a list of Web-based graphic
resources below. Note that most of these graphics are uploaded and licensed under Creative
Commons. While many images require at least attribution, a Creative Commons Zero license
means you can copy, modify, distribute and use the photos for free, including commercial
purposes, without asking permission from or providing attribution to the photographer. For more
information on the academic use of assets, see this guide from UBC.

Openverse Search
UnSplash
FreeImages
LibreShot
StockVault
MorgueFile
Picography
Pixabay
Assignment: Lab04
In this exercise, you will download an HTML5 template from the ThemeWagon web site, unzip it to
a folder, and practice customizing it with your own content.

1. Download the template named Industrious from this website link.

2. Unzip the contents in your documents folder or on the desktop. Then, rename the "industrious-
master" folder to lab04.

3. Open the folder in Explorer (or Finder) to review its contents. Notice that there is a "CREDITS"
text file and three HTML files. The /assets folder contains the CSS files, fonts, and Javascript (JS)
code, while the /images folder contains the website's graphics.

4. Explore the template's features and design by opening index.html in your favourite Web
browser. The "Generic" page provides a standard screen-width text page, while the "Elements"
page illustrates all of the CSS classes that are available. (Remember that you can use the right-
click and choose the "Inspect" command to peruse the CSS styling on the web page.)

Editing the INDEX.HTML File

5. Return to the folder and open the index.html page in your favourite text editor (e.g.,
Notepad++).

6. Within the index.html file, locate the <title> tag in the <head> area. Replace the existing
text with BUAD 335 W2022. This text will appear in the browser's Title bar or page tab and is also
the default bookmark name.

7. Review the <head> information. What is the file name of the primary CSS file? In which folder(s) is
the CSS file located?

8. Now move into the <body> area of the web page. Locate the <header id="header"> tag.
Change the text to read: BUAD 335, rather than Industrious.

9. Locate the list items in the <nav id="menu"> area. Change the menu text appearing between
the <a> anchor tags from Elements to Portfolio and from Generic to Journal. (Note: Do not
change the html hyperlink names, as we would then have to change their file names as well.)

10. Under the Banner section, change the <h1> tag from Industrious to Welcome to BUAD 335.
Immediately below this tag, edit the paragraph to read: "This course teaches marketing and
website design fundamentals.<br /> For more information, contact Okanagan College's
School of Business."

11. On your own, change the <h2> tag text from Sem Turpis Amet Semper to Lab 04: Customizing
Templates.

12. Move to the section below the "CTA" comment. Edit the <h2> tag text from CURABITUR
ULLAMCORPER ULTRICIES to WELCOME TO KELOWNA. Save your work before moving on to edit
the other pages.
Editing GENERIC.HTML and ELEMENTS.HTML

13. Open the generic.html page in your editor and change the <title> , <header> , and menu
options as above. Then, edit the page heading ( <h1> ) from Generic Page to My Study Journal.
Save your work.

14. Now open the elements.html page and complete the same tasks as in the previous step;
however, replace the Elements heading with My Portfolio instead. Remember to save your work.

15. Return to your browser and display the updated index.html page. Select the menu options
for Portfolio and Journal to ensure they work and then return to the Home page before
proceeding.

Changing Images in INDEX.HTML and MAIN.CSS

16. Scroll down the web page in your browser to view the image for "John Doe, CEO". Now open
the index.html file in your editor and change the text for "John Doe" to read Pug Dog and
replace John's image with the following image source: http://buadwiki.com/files/pug.jpg .
Save your work and refresh the page in your browser.

17. Just above the staff names and pictures, notice the high-rise image that appears. This image
file is named cta01.jpg and is stored in the images folder. To change the image that is used,
you must edit the main.css file in the assets\css folder and search for this image's name.
Once found, modify the contents of the existing url() statement to point to
http://buadwiki.com/files/lake.jpg instead of ../../images/cta01.jpg .

18. Save your work and then refresh your browser to view your changes. Before uploading the
assignment to the Moodle dropbox, you will need to "zip" the folder as lab04.zip. If you need
assistance, please ask your instructor.

You might also like