EMPOWERMENT

TECHNOLOGIES

FIRST SEMESTER
FIRST QUARTER
MODULE 6

Web Page Design Using Templates and Online

WYSIWYG Platforms

Locally Developed Self-Learning Material

Empowerment Technologies – Grade 11
Locally Developed Self-Learning Material
Quarter 1 – Week 6: Web Page Design Using Templates and Online WYSIWYG Platforms

Module Development Team

Writer: Bien Levi Mendigorin

Special Science Teacher I, TSHS

Editors: Joana Carla L. Alejo

Teacher II, NCNHS-SHS
Reynaldo Biag Jr.
Teacher I, BSHS

Reviewers: Jonathan F. Bada

EPS, EPP/TLE/TVL, SHS & GPP Focal Person
Orven O. Danugrao
PSDS, District I-A
Samson S. Buqueron
EPS/ OIC- School Administrator

Management Team:
Leilani S. Cunanan, CESO V
Schools Division Superintendent
Maylene M. Minimo, EdD, CESE
OIC- Assistant Schools Division Superintendent
Ariel C. Lansang
Chief, Curriculum Implementation Division
Jose C. Tala, EdD
EPS, Learning Resource Management System
Corazon B. Dumlao
PSDS, SHS Focal Person
 Quarter: First Quarter (Week 6)
Content: Web Page Design Using Templates and Online WYSIWYG Platforms

Name: ______________________________ Grade/ Section: _______________

School: ______________________________ Date: _______________________

WHAT I NEED TO KNOW

Learning Competencies found in MELCS

1. Compare and contrast the nuances of varied online platforms, sites, and content to best achieve specific class
objectives or address situational challenges. (CS_ICT11/12-ICTPT-Ia-b-1)
2. Apply online safety, security, ethics, and etiquette standards and practice in the use of ICTs as it would relate
to their specific professional tracks. (CS_ICT11/12-ICTPT-Ia-b-2)
(F11PU – IIg – 88)

WHAT I KNOW

Direction: Read each item carefully and choose the letter of the correct answer. Write your answers on a separate sheet
of paper.
1. During the 1990s, what is considered a skill that required a mind of a computer programmer, where it involves
working on standard lines of computer code that need to be memorized to produce a flat but colorful document?
A. Programming B. Web Page Creation C. Vlogging D. None of these

2. Nowadays, websites have evolved into tools and platforms used for ______.
A. Discovery B. Sharing C. Co-creation D. All of these

3. Which of these are NOT an example of online social platforms.

A. Cloud Computing B. Social Media C. Web Page Creation D. None of these

4. Which of the following is an online social platform used for cloud computing?
A. Prezi B. Wix C. Google Drive D. Facebook

5. Which of the following is an online social platform used for social media?
A. Prezi B. Wix C. Google Drive D. Facebook

6. Which of the following is an online social platform used for web page creation?
A. Prezi B. Wix C. Google Drive D. Facebook

7. Which of the following is an online social platform used for presentation or visualization?
A. Prezi B. Wix C. Google Drive D. Facebook

8. A ___________ lets users pick from a vast range of pre-designed templates where they can customize the
template and populate it with all their content, adding in useful features as they proceed.
A. Social platform B. Classic website builder C. AI website builder D. Cloud computing app

9. ____________ work by asking users a series of questions, like the type of website and design preferences.
After that, it creates a website suited to one’s preferences.
A. Social platforms B. Classic website builders C. AI website builders D. Cloud computing apps
 10. Wix is a classic template website builder and an AI platform rolled into one bundled with over ___ industry-
specific templates and make use of its incredible drag-and-drop editor.
A. 500 B. 1000 C. 3 D. 10

WHAT’S NEW

In the earlier years, or sometime in the 1990s, creating a web page or a website was a skill that required a mind
of a computer programmer, working on standard lines of computer code that need to be memorized to produce a flat but
colorful document.

Nowadays it is so much easier than a high school student with enough creativity could assemble textual and
visual parts that are already interactive and fun to the user. Moreover, websites have evolved into tools and platforms
for discovery, sharing, connection, and co-creation.

These online social platforms currently include, but are not limited to:

1. Presentation/Visualization
a. Prezi
b. Zoho
c. Slideshare
d. Mindmeister
2. Cloud computing
a. Google Drive
b. Evernote
c. Dropbox
3. Social Media
a. Twitter
b. Facebook
c. Tumblr
4. Web Page Creation
a. Wix
b. Weebly
5. File Management and Filetype conversion
a. Zamzar
b. Word2pdf
6. Mapping
a. Google Maps
b. Wikimapia

WHAT IS IT
Web Page Creation
A website builder is an online platform that helps you create your website, without coding. There are two main
types of website builders – the classic template-based platforms, and the more modern AI (Artificial Intelligence)
platforms.
A classic website builder lets users pick from a vast range of pre-designed templates. Users can easily customize
the template and populate it with all their content, adding in useful features as they proceed.
 AI website builders work by asking users a series of questions, like the type of website and design preferences.
After that, it creates a website suited to one’s preferences. Users can still make some tweaks to the design, but this
approach is really for people who need a simple website up fast.

Wix is a classic template website builder and an AI platform rolled into one bundled with over 500 industry-
specific templates and make use of its incredible drag-and-drop editor. Users can also opt to use Wix ADI and let Wix
design a website for the user.

Demonstration: Designing a Web Page using Wix

1. Choose a template
To get started, select “Create a New Site” from the drop-down menu in the top right corner of the dashboard.
Once you click, Wix will ask what type of website you want. There are numerous options, from online stores to personal
portfolios. It will also ask you to fill in the website and contact details. In this demo, we’ll create a website for an online
store.

Based on your selection, you’ll be taken to a page of relevant templates to choose from. There are over 500
templates in total, so if your preferred template isn’t in your selected category, you can always use the search bar to
find more.
2. Update Text and Images

At this point, you’ll get to see a preview page of your chosen template. This is where you can play around with
simple but brilliant editing features, like the drag-and-drop design and text boxes.

First, you’ll want to update the details and pertinent information about the store. Simply click on the text you want
to change, then rewrite – it’s that easy. You can also change the font size and color, and typeface favorites
like italics and bold are present. If your template comes with images, these can be changed to your liking.

3. Add Pages

Once you’ve created a homepage, there are a few other pages you should add to ensure your website has
everything visitors are looking for. For example, make sure to include an “About” page and a “Contact Us” page.
 To add a page to your site with Wix Editor, click the down arrow next to your current page at the top of the editor,
then click “Manage Pages.” From the resulting menu, you’ll be able to add pages and customize them to serve different
purposes.

4. Add Apps

By this point, you’ve customized your site’s template and added some images and pages. To increase
functionality as well as sophistication to your website, the addition of apps may help.

Wix’s App Market has over 250 applications to boost your site, and they cover everything from orders to
interactive quizzes. These apps provide your website with the modern interface necessary.

5. Choose a Domain Name

Before you publish your Wix site, you’ll need to set your domain name where Wix will prompt you to do this when
you click “Publish”.
6. Publish

Throughout the Wix editing process, you can preview your website with the button in the top right corner. Once
you’re satisfied, simply click ‘Publish’ next to Preview.

It is important to note that you can always edit your Wix site after publishing. To do this, open your site’s dashboard, click
“Manage Site,” then “Edit Site,” and off you go. To re-publish, just click ‘Publish’ again in the top right corner.

WHAT I CAN DO

ACTIVITY: New Site On Sight!

Directions: Create a website that will feature your advocacy (ex. Cyberbullying, False News, Computer Addiction). Make
sure that it contains the rationale or reason for the chosen advocacy and also presents a solution or way of supporting
the said advocacy. Preferably, use Wix in creating the webpage.
Rubrics for Grading:
Based from University of Wisconsin https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html
Criteria 4 3 2 1
Does not insert any
Selects and inserts
graphics, or uses
many low-quality
Selects and inserts high-quality Selects and inserts only low-quality
graphics and
graphics and multimedia when graphics and multimedia graphics and
multimedia which do
Text Layout, appropriate to enhance the that are mostly high multimedia, which do
not enhance the
Use of content’s visual appeal and quality and enhance and not enhance the
content.
Graphics and increase readability. clarify the content. content.
Multimedia Acknowledges only a
Acknowledges all image and Acknowledges most Does not
few multimedia and
multimedia sources with image and multimedia acknowledge any
image sources and
captions. sources with captions. image or multimedia
uses incomplete
sources, either with a
captions.
caption.

Postings provide
comprehensive insight,
understanding, and reflective
thought about the topic by Postings provide Postings provide Postings show no
building a focused argument moderate insight, minimal insight, evidence of insight,
Content and
around a specific issue or understanding, and understanding, and understanding, or
Creativity
asking a new related question, reflective thought about reflective thought reflective thought
or making an oppositional the topic. about the topic about the topic.
statement supported by
personal experience or related
research.

Some of the images, No images, media, or

Most images, media, or media, or text created text created by
All images, media, and text
text created by others by others do not others display
created by others display
display appropriate display appropriate appropriate copyright
Citations appropriate copyright
copyright permissions copyright permissions permissions and do
permissions and accurate
and accurate, properly and do not include not include accurate,
citations.
formatted citations. accurate, properly properly formatted
formatted citations. citations.

Pages use incorrect

Pages show some
Quality of grammar and
Pages have no spelling or Pages have few spelling evidence of correct
Writing and spelling, consistently
grammatical errors. or grammatical errors. grammar, spelling,
Proofreading making it difficult for
punctuation, etc.
others to follow.

The webpage is easy to The webpage is easy to The webpage is clear

The webpage is
understand, easy to navigate, understand, clear to read to read, neat, and
unorganized, hard to
Webpage clear to read, aesthetically and navigate, presentable All links
follow or navigate,
Organization appealing and relevant, all links aesthetically appealing and titles are easy to
has nonworking links,
are working, and titles are easy and relevant, all links find. The blog is easy
visually dissident.
to find and titles are easy to find to navigate.
 ASSESSMENT

Direction: Read each item carefully and choose the letter of the correct answer. Write your answers on a separate sheet
of paper.
1. Which of the following is an online social platform used for cloud computing?
A. Slideshare B. Weebly C. Tumblr D. Dropbox

2. Nowadays, websites have evolved into tools and platforms used for ______.
A. Discovery B. Sharing C. Co-creation D. All of these

3. A ____________ is an online platform that helps you create your website, without coding.
A. File Conversion B. Cloud computing app C. Webpage builder D. Social media app

4. Which of the following is an online social platform used for presentation or visualization?
A. Slideshare B. Weebly C. Tumblr D. Dropbox

5. Which of the following is an online social platform used for social media?
A. Slideshare B. Weebly C. Tumblr D. Dropbox

6. Which of the following is an online social platform used for web page creation?
A. Slideshare B. Weebly C. Tumblr D. Dropbox

7. Which of these are NOT an example of online social platforms.

A. Cloud Computing B. Social Media C. Web Page Creation D. None of these

8. A ___________ lets users pick from a vast range of pre-designed templates where they can customize the
template and populate it with all their content, adding in useful features as they proceed.
A. Social platform B. Classic website builder C. AI website builder D. Cloud computing app

9. ____________ work by asking users a series of questions, like the type of website and design preferences.
After that, it creates a website suited to one’s preferences.
A. Social platforms B. Classic website builders C. AI website builders D. Cloud computing apps

10. ________________ is a classic template website builder and an AI platform rolled into one bundled with over
500 industry-specific templates and make use of its incredible drag-and-drop editor.
A. Wix B. Prezi C. Google slides D. Weebly
 REFERENCES

Barraclough, D. (2020, December 18). How to Use Wix: An Easy Step-by-Step Guide (2021). Retrieved January 20,
2021, from https://www.websitebuilderexpert.com/website-builders/wix/how-to-use-wix/
Carmichael, C. (2021, January 15). Wix Review: 7 Important Things to Know (2021). Retrieved January 20, 2021, from
https://www.websitebuilderexpert.com/website-builders/wix/wix-review-t/
Franker, Karen. The University of Wisconsin. (2016). A Rubric for Evaluating Student Blogs. Retrieved from
https://www2.uwstout.edu/content/profdev/rubrics/blogrubric.html. Retrieved on January 20, 2020.
Wix Blog: Web Design & Small Business Tips to Promote Your Site. (1969, December 31). Retrieved January 20, 2021,
from https://www.wix.com/blog/#viewer-5lbf2

ANSWER KEY

What I Know
1. B
2. D
3. D
4. C
5. D
6. B
7. A
8. B
9. C
10. A

What I Can Do
Answers may vary.

Assessment
1. D
2. D
3. C
4. A
5. C
6. B
7. D
8. B
9. C
10. A