TVL Empowerment Technologies Q3 M17

Empowerment
Technologies
QUARTER 1
MODULE Collaborative Development of
17 ICT Content (Part 2)
TECHNICAL VOCATIONAL LIVELIHOOD

EXPECTATIONS
At the end of the lesson, the learner should be able to:

✓ identify the benefits of using WYSIWYG (What You See Is What You Get)
editor;
✓ understand the steps in creating website using Microsoft Word; and
✓ create a website in Microsoft Word by applying the web design elements.
PRETEST
Rearrange the following steps in chronological order by numbering them from

1 to 6. Write X if the step does not belong. Write your answer on the space
before each item.
Creating a web page using MS Word
1) Preview the document and check for any error in the format.
2) Open Microsoft Word then click on Blank Document.
3) Edit the page theme to your liking.
4) Layout your web page as a word document.
5) Disable Auto-sharing.
6) Save the file by choosing the option Web Page (*.htm; *.html).
7) Save all your files or pages in the same web directory.
8) Create additional webpages that are linked to your main site.
9) On your dashboard, go to Post > Add New
RECAP
What are the Basic Web Design Principles and Elements?
Web Design Elements Web Design Principles

1. 1.
2. 2.
3. 3.
4. 4.
5. 5.
6. 6.
7. 7.
8.
LESSON
There are several ways you can design or create your own website. There are
schools or online schools that offer courses on website development. They
teach you how to program using computer languages where you can create
and design web pages using HTML and CSS respectively. This may take time
but the skill that you’ll acquire is something that is pretty much useful
specially if you are serious about becoming a website developer.
But what if you do not have the time to undergo formal training for a website
development course and at the same time you are not interested in
programming at all?
This is where the WYSIWYG editor comes in. Whatever you write, insert, draw,
put, rearrange, and everything you do on a page is what the audience will see.
With the use of WYSIWYG editor, everyone can create their own website even
without prior programming skill. The best thing is it’s quick and simple to
use. WYSIWYG editor makes creating a website a fun thing to do.
There are WYSIWYG editors that need to be used with internet connection.
But for this particular lesson, you will be using the MS Word, which does not
require an internet connection in order to create web pages.
Steps to Web Page Creation Using MS Word

Step 1
There are two ways on how you can open or launch MS Word:
a. click on the screen’s shortcut button, or
b. select it from the list of programs under the start tab.
The click on Blank Document in the New Document task pane.
Step 2
Layout your web page as a word document. Arrange headings, paragraphs
and graphics the way you want them to appear on your page.
Step 3
Preview the document and correct any formatting that is wrong. Adjust the
margins to fit text into a single line, if necessary.
Step 4
Click on the home button at the top left of the document. Choose "save file
as". Choose the option Web Page (*.htm; *.html). Then type the file name that
you want for your document. And click save.
Note: Before saving the file, make sure that you have decided where
you wish to save your website file. You can either create a new web
directory or select from your existing directory.
Step 5
Build or create additional web pages that are connected to your main site.
Adjust any hyperlinks to reflect the correct page that they should open.
Note: Inserting hyperlink and images were previously discussed this

subject. Follow the principles and process that were explained.
Step 6
Save all your files or pages in the same web directory.
ACTIVITIES
Activity 1. Website Creation using Microsoft Word

Your task is to create a personal website using Microsoft Word.
In this activity, you will be using your output in Module 16 as bases for the
design of your website. Enhancement of the original design is welcome. It is
imperative that the Web Design Elements should be clearly seen in your
layout and the Parts of the Website are prominently designed.
Your final output, meaning all web page created, is to be uploaded in an online
storage (i.e. Google Drive, Dropbox and OneDrive) that will be provided by
your subject teacher.
The criteria are as follows:

Criteria Points
1. Text – font family and type must be chosen correctly,
10
simply, and in readable format.
2. Graphics/Illustrations – must be of high quality and the
10
text and other elements must be well organized.
3. Shapes – must be used to denote an enclosed boundary
in the overall design. It was used and positioned
10
appropriately that contributed positively to the overall
design.
4. Background – must be attractive and was used to bring
10
out the content offered on the website.
5. Color – must blend well and complement the elements on
10
the page.
6. Links – must enable the users to connect to another site
10
or page that is related to the content of your page or site.
7. Parts of a website are prominently designed on the
website.
a) The Header
b) The Menu System 50
c) The Content Area
d) Side Bar
e) The Footer
WRAP-UP
1. What are the benefits of WYSIWYG editor to a non-programmer?
2. List down the steps in creating website using MS Word.
Step 1:
Step 2:
Step 3:
Step 4:
Step 5:
Step 6:
VALUING
What makes a WYSIWYG editor such as Microsoft Word a valuable tool to use
in website designing?
Place your answer here:
POSTTEST
Rearrange the following steps in chronological order by numbering them

from 1 to 6. Write X if the step does not belong. Write your answer on the
space before each item.
Creating a web page using MS Word
1) Save the file by selecting the option Web Page (*.htm; *.html).
2) Go to Post > Add New on your dashboard.
3) Launch MS Word then click on Blank Document.
4) Revise the page theme of your choice.
5) Add new webpages that are linked to your main page.
6) Turn off Auto-sharing.
7) View the web layout and check for any mistake in the format.
8) Format your web page as a word document.
9) Store all your web files or pages in the same web folder.
KEY TO CORRECTION
9. 6 9. X
8. 2 8. 5
7. 3 7. 6
6. X 6. 4
5. 5 5. X
4. X 4. 2
3. 1 3. X
2. X 2. 1
1. 4 1. 3
PostTest PreTest
References
Innovative Training Works, Inc. 2016. Empowerment Technologies, First
Edition. Manila, Philippines: Rex Book Store, Inc.
Jemma Development Group. 2017. Empowerment Technology: Information
and Communications Technology in Business and Society. Rizal,
Philippines: Jemma, Inc.
Microsoft. 2006. “How To: Create and Edit an HTML Document with
Microsoft Word 2000.” Accessed July 9, 2020. https://bit.ly/3iKgXfp
Edwards, R. n.d. “How to Build a Website using Microsoft Word.” Accessed
July 9, 2020. https://yourbusiness.azcentral.com/build-website-using-
microsoft-word-17858.html

TVL Empowerment Technologies Q3 M17

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

TVL Empowerment Technologies Q3 M17

Uploaded by

Copyright:

Available Formats

Empowerment

TECHNICAL VOCATIONAL LIVELIHOOD

At the end of the lesson, the learner should be able to:

Rearrange the following steps in chronological order by numbering them from

Creating a web page using MS Word

What are the Basic Web Design Principles and Elements?

Web Design Elements Web Design Principles

Steps to Web Page Creation Using MS Word

Note: Inserting hyperlink and images were previously discussed this

Activity 1. Website Creation using Microsoft Word

The criteria are as follows:

1. What are the benefits of WYSIWYG editor to a non-programmer?

2. List down the steps in creating website using MS Word.

Rearrange the following steps in chronological order by numbering them

Creating a web page using MS Word

You might also like