E-Tech Q4 W3

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.
The module has one lesson, namely:
• Lesson 10 – Web page design using templates and online WYSIWYG

platforms.
After going through this module, you are expected to:

1. Create a web page using Microsoft Word;
2. Create your own website using free host;
3. Design website using an online WYSIWYG Platform; and
4. Edit and insert elements for their website.
Definition of Terms
WYSIWYG editor- It allows you to create and design a web page without any coding
knowledge.
HTML- stands for Hypertext Markup Language
CSS- Stands for Cascading Style Sheets
Jimdo- a free website provider with WYSIWYG editor
Template- a ready-made design for a website
SEO- stands for Search Engine Optimization- a feature that maximizes the search
engine optimization feature so visitors can easily locate your website.
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)”
5. Click the Change Title button.
6. Input the title as seen below, then click OK then Save.

7. 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 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. For this exercise you
will create own personal website that focuses on your passion or hobby.
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. It is now time to edit 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:
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
Reference: SLM from SOCCSKSARGEN Region (Author: Mary Joy M. Velasco)

E-Tech Q4 W3

Uploaded by

Copyright:

Available Formats

E-Tech Q4 W3

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

E-Tech Q4 W3

Uploaded by

Copyright:

Available Formats

This module was designed and written with you in mind.

It is here to help you master

• Lesson 10 – Web page design using templates and online WYSIWYG

After going through this module, you are expected to:

WEB DESIGN PRINCIPLES AND ELEMENTS

5. Click the Change Title button.

6. Input the title as seen below, then click OK then Save.

1. Create an account on Jimdo by going to www.jimdo.com and clicking Create

Tips in Using the Editor

2. Click on the Edit Navigation button. Click on Add a New Page.

4. Click Save when done.

You might also like