Q2 Module 2 Webpage Design
Q2 Module 2 Webpage Design
Empowerment
Technologies
Quarter 2 – Module 2:
Web page design using
templates and online
WYSIWYG platforms
Assessment This is a task which aims to evaluate your
vel of mas letery in achieving the learning
competency.
Additional Activities In this portion, another activity will be given
you to enrich your knowledge or skill of the to
lesson learned. This also tends retention of
learned concepts.
Answer Key This contains answers to all activities in the
odule. m
1. Use the module with care. Do not put unnecessary mark/s on any part of the
module. Use a separate sheet of paper in answering the exercises.
2. Don’t forget to answer What I Know before moving on to the other activities
included in the module.
3. Read the instruction carefully before doing each task.
4. Observe honesty and integrity in doing the tasks and checking your answers.
5. Finish the task at hand before proceeding to the next.
6. Return this module to your teacher/facilitator once you are through with it.
If you encounter any difficulty in answering the tasks in this module, do not
hesitate to consult your teacher or facilitator. Always bear in mind that you are
not alone.
We hope that through this material, you will experience meaningful learning and
gain deep understanding of the relevant competencies. You can do it!
4
This module was designed and written with you in mind. It is here to help you master the
nature and purposes of online platforms and applications. The scope of this module permits it
to be used in many different learning situations. The language used recognizes the diverse
vocabulary level of students. The lessons are arranged to follow the standard sequence of
the course. But the order in which you read them can be changed to correspond with the
textbook you are now using.
Definition of Terms
WYSIWYG editor- It allows you to create and design a web page without any coding
knowledge.
SEO- stands for Search Engine Optimization- a feature that maximizes the search
engine optimization feature so visitors can easily locate your website
5
What I Know
Direction: Read each question carefully and write the letter of the best answer on
your activity notebook.
1. Which of the following statements is true about WYSIWYG editor?
a. It is the acronym for What You Saw Is What You Got.
b. Using HTML and CSS in creating a website is easier than using
WYSIWYG.
c. WYSIWYG is designed for anyone who has no prior coding skills.
d. All of the above
2. Which of the following statements is related to HTML tags?
a. HTML tags are elements of document.
b. It is used to specify the elements of a document.
c. It defines the content of the document.
d. It defines the structure of the document.
3. Which of the following statements is true about Jimdo?
a. Jimdo is a WYSIWYG web hosting service offering free and paid
services.
b. It has an android and iOS application that let you manage your site
on mobile.
c. Jimdo is easy to use.
d. All of the above.
4. Which of the following site settings you are going to use if you want to use a
ready-made design?
a. Style
b. Template
c. Settings
d. Background
5. Which of the following elements you are going to add if you want to insert
multiple photos on one area?
a. Photo
b. Gallery
c. Photo Gallery
d. Photos
6
Lesson Web page design using
10 templates and online
WYSIWYG platforms
What’s In
Online Platform is technologies that are grouped to be used as a base upon which other
applications processes or technologies are developed some of the examples of an online
platform are Presentation/Visualization, Cloud Computing, Social Media, Web Page
Creation, File Management and Mapping.
WYSIWYG is an editor that allows you to create and design web pages without any
coding knowledge. You can use Microsoft Word and Microsoft Excel as a WYSIWYG
editor. Jimdo is a WYSIWYG web hosting service offering free and paid services.
Jimdo has tools that will allow you to sell your products online. Create your own
photo gallery, and videos, and many more. You can also maximize the search engine
by properly tagging your site.
What’s New
Read and answer each question concisely. Write your answer on your activity notebook.
Activity 1
1. List down at least three websites you normally visit.
__________________________________________________________________________
__________________________________________________________________________
_
2. What makes you normally visit the site- graphics, layout, or content? Why?
__________________________________________________________________________
__________________________________________________________________________
7 _
What is It
WYSIWYG editor- It allows you to create and design a web page without any
coding knowledge
WYSIWYG- the acronym for “What You See Is What You Get”
- This means that whatever you type, insert, draw, place, rearrange,
and everything you do on a page is what the audience will see. It
shows and prints whatever you type on the screen.
8
Input the title as seen
below, then click OK then
Save
Open your saved file and you will see that
you just created a webpage using MS
Word.
9
By default, the home page is shown on your editor. To navigate to another page, simply
click the page title on your navigator. The site navigator contains a set of links going
through the different pages of your website. The navigator currently available to you
depends on which template you used.
Inserting a Page
1. However your mouse pointer over the site navigator. The Edit Navigation
button will appear.
3. Rearrange pages using the tools on the right of the page title.
Editing Elements
up by one level
Drag tool- click and drag the element to avoid part of the page
Clicking on an element will show more options regarding on what visual element you
clicked:
10
I. Header- If it is a header, clicking will allow you to edit the text and change its
font size.
II. Image- If it is an image, several options would also appear. It also allows you
to upload an image directly from your computer or a Dropbox account.
III. Paragraph- If it is a paragraph, you will be treated to even more options similar
to using a word processor:
Adding Elements
11
1. To add elements on screen, hover the mouse pointer over the top or bottom of
an existing element until the Add Element button appears
Settings
The settings option contains important information that you should edit to
make the most out of your Jimdo website.
The account settings include changing your password, email, and personal
profile.
The website options allow you to change your site title and footer; checks your
storage; creates your privacy policy and your favicon (the icon of your website
shown on a browser).
The Mobile Settings is used to prepare you page for mobile devices.
The Email and Domain Management setting is a premium feature. It is used
to manage email accounts for your website.
The Store settings allow you to manage the items you sell on your website.
The SEO option is a premium feature that maximizes the Search Engine
Optimization feature of Jimdo so visitors can easily locate you website.
The Apps option contains settings for embedded apps on your website like
Dropbox, OR Codes, Google Analytics, and Twitter
The Jimdo settings allows you to remove the Jimdo Box on your website
(premium feature) and check News.
12
What’s More
Read and answer each question concisely. Write your answer on your activity
notebook.
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
2. What is the difference between your WordPress blog and your Jimdo Website?
______________________________________________________________________________
______________________________________________________________________________
______________________________________________________________________________
3. List down three more WYSIWYG web hosting services and their URL?
________________________________________________________________________
________________________________________________________________________
________________________________________________________________________
13
What I Have Learned
What I Can Do
Answer the following in not less than five sentences. Write your answer on
your activity notebook.
1. In the campaign for social change activity, which platform you prefer;
WordPress or Jimdo? Why?
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
___________________________________________________________________________
14
Assessment
15
8. Which of the following elements you are going to add if you want to insert
multiple photos on one area?
a. Photo
b. Gallery
c. Photo Gallery
d. Photos
9. Learning Jimdo is easier than learning HTML. What do you think is the best
explanation for this statement?
a. Jimdo is a WYSIWYG editor.
b. Learning Jimdo is easier than learning HTML because it allows users
to create and design web pages without any prior coding skills.
c. Learning Jimdo is easier than learning HTML because it is a user-
friendly website.
d. Learning Jimdo is easier than learning HTML because it provides
features that would help the user navigate the page.
10. Which of the following site settings you are going to use if you want to
change accounts and web settings?
a. Template
b. Settings
c. SEO
d. Statistics
Additional Activities
True or False: Write T if the statement is correct; otherwise, write F on your activity
notebook.
____1. HTML stands for Hypertext Markup Language.
____2. Jimdo’s URL is www.jimdo.net.
____3. The home page is the first page of your e=website
____4. Adding emails, an XML sitemap, and linking your Dropbox account are
premium features of Jimdo
____5. You can include your Twitter account and link to your Jimdo Website.
____6. The form element adds a space for selling an item.
____7. The photo element adds multiple photos in one area.
____8. CSS stands for Cascading Style Sheets.
____9. The horizontal line in the Jimdo WYSIWYG editor is used as a divider.
____10. You can insert YouTube videos in your Jimdo wesite.
16