EMPOWERMENT TECHNOLOGIES

NAME:____________________________________ GRADE LEVEL:_____________

SECTION: ____________________________ DATE:____________________

Q3 - LEARNING ACTIVITY SHEET 2

Web Page Design using Templates and Online WYSIWYG platforms

Background Information for Learners

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.

WEB DESIGN PRINCIPLES AND ELEMENTS

Website Template- Also known as web template is a predesigned webpage, simply by adding your text
and customization to create your desired web page. It is usually built with HTML and CSS code.
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.

Basic Web Page Creation

Creating a Website using Microsoft Word
1. Open Microsoft Word.
2. Type anything on the page like “Hello World!”
3. Click on File > Save As > Type any file name.
4. In the Save as Type, select “Web page (*.htm, *.html)”

Click the Change Title button.

Input the title as seen in the figure, then click OK then Save
Open your saved file and you will see that you just
created a webpage using MS Word.
Creating Your Own Website using Jimdo
Jimdo is a WYSIWYG web hosting service. It offers free, professional, and business web hosting service.
Jimdo also has an iOS and Android app which you can use to manage your website whenever you do not
have access to a PC.

1. Create an account on Jimdo by going to

www.jimdo.com and clicking Create Your Website.

2. You will be instructed to choose a template.

Pick any template that you want.

3. Chooses URL for your website.

Enter your email and password.

4. Your website will be generated and

soon you will end up in the site’s
WYSIWYG editor.

5. The editor is pretty easy to use. The center shows the preview of your website. The design tools are
located on the right. When editing the website to your liking, use the following tips to achieve it.

Tips in using the editor

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.
2. Click on the Edit Navigation button. Click on Add a New Page.
3. Rearrange pages using the tools on the right of the page title.
4. Click Save when done.

Editing Elements
Hovering over a text, image, or any element you see on the website will highlight the element.
Clicking on an element will show more options regarding on what visual element you clicked:
Header- If it is a header, clicking will allow you to edit the text and change its font size.
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.
Paragraph- If it is a paragraph, you will be treated to even more options similar to using a word
processor:

Adding Elements
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
2. Select the visual element you want to add
3. Edit the element to your liking then click Save

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.
Learning Competency with Code
share anecdotes of how he/she has used ICTs to be part of a social movement, change, or cause to
illustrate aspects of digital citizenship (CS_ICT11/12-ICTPT-IIl-15)

Directions/Instructions:
Activity 1:
Direction: Read and answer each question concisely.
1. What are the advantages and disadvantages of a WYSIWYG editor?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

2. What is the difference between your WordPress blog and your Jimdo Website?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

Reflection
In the campaign for social change, how would designing your website using any WYSIWYG or any web
hosting services benefit you, as a Senior High School student, and for your community?
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________
__________________________________________________________________________

References for Learners

Empowerment Technologies First Edition.
(2016).Sampaloc Manila:Rex Bookstore, Inc.

Prepared by:
ALDWIN D. BALDOMAR / GEMMAR C. PARON
Subject Teachers