Empowerment

Technologies
Module 10:
Web Page Design Using
Templates and online WYSIWYG
Platforms
 Lesson
Web Page Design Using Templates and
1 online WYSIWYG Platforms

The web is a gigantic place, and if you are using internet every day, you
probably visit several websites whether for news, entertainment, business or
education. But have you ever wondered how these websites actually work? How are
they built? What skills are necessary to build a website? With almost 1 billion
websites now on the internet, the answers to these questions could be your first step
toward a better understanding of website designing.

What’s In

Directions: Search at least two different types of WYSIWYG online platforms.

Discuss the PROS AND CONS and features of each. Then, create and
complete the Venn diagram to summarize your preferences.

Pros Cons
 What’s New

Directions: Match each term in the left column with the correct definition in the
right column.
_______ 1. E-commerce a. is a website or printed listing of information which
lists businesses within niche based categories
_______ 2.Blogs and b. websites that are excellent way to share information
Personal and resources on the web.
_______ 3. c. is an ongoing online diary or commentary written by
Informational an individual, rather than a corporation or
organization.
_______ 4. Online d. is an online document used and created by a person
Community to present their background, skills, and
accomplishments.
_______ 5. Photo e. is an online shop where people can order goods and
Sharing make payments from the comfort of their own homes.
_______ 6. e-resume f. Websites such as Pixabay.com allow people to upload
and download photos for free.
_______ 7. e-portfolio g. these are great ways to get in touch and share ideas
with people with the same interests or from similar
backgrounds through the internet.
_______ 8.Catalogue h. is a detailed online description of a person's life
and Brochure
_______ 9. Business i. is a website that presents visitors with photos and
Directory descriptions of their products and/or services.
_______ 10.e-Biography j. is a website that showcases a person’s work, skills
and potentials for future employers.
_______ 11. k. websites that do not aim to sell products or services
Entertainment to their visitors, but they still need to convince people
to support their cause.
_______ 12. Business l. is an online platform which people use to build social
networks or social relationships with other people who
share similar personal or career interests, activities,
backgrounds or real-life connections.
_______ 13. NGO / m. is any website that’s devoted to representing a
Non-profit specific business.
_______ 14. Job n. is a website that deals specifically with employment
Searching or careers.
_______ 15. Social o. is an online brand or website that focuses on
Media producing high quality entertainment content for its
users.
 What is It

Web Page Design

A website is a collection of publicly accessible, interlinked web pages that
share a single domain name. Websites can be created and maintained by an
individual, group, business or organization to serve a variety of purposes. Together,
all publicly accessible websites constitute the World Wide Web.

Web design is a similar process of creation, with the intention of presenting

the content on electronic web pages, which the end-users can access through the
internet with the help of a web browser.

Every single web page in a website has different content, but all the pages are
using a similar graphic design. Often, sites will use website templates, which contain
all the basic elements of web design such as:

Layout – It means that your design should align with a handful of soothing
adjectives; it should be simple, familiar, intuitive, clean, and accessible. Use plenty
of whitespace (or padding and margins) to give the elements of your site room to
breathe, and use grid-based designs to keep design items organized and orderly.
Strong photography, icons, or graphics provide supplementary information to your
text but make sure the images complement each other and the brand you’re looking
to represent.

Colour - As for choosing a color scheme, paying attention to your topic, brand
or industry perspectives, along with your target audience demographics will make
this a somewhat a painless process. Always look for ways to narrow your scope from
the roughly 7 million discernable hues the eye can detect.
 Navigation - Your site’s navigation is not a space in which to be creative.
First off, don’t fall into the trap of overly animated hover effects and complex.
Navigational elements which can exist in a site’s header, body, and footer simply
serve to direct your visitors to the information they desire as quickly as possible.

Navigation Bar

Fonts - Your text should be easily readable, which generally means body copy
should be at least 16 pixels. Using a complementary font is ideal for headings or
accents, but don’t go beyond three typefaces or unnecessary sizing adjustments. Of
course, you’ll want to make sure there’s plenty of contrast between your text and the
site’s background colors, which generally means a light color paired with a dark tone.
Also, avoid that piercing red-font-on-green-background eyesore.

Content - Your site visitors and potential customers want information quickly
such as, is your brand trustworthy? Experienced? Is it capable of delivering top-
notch products and services? Given people’s short attention spans and lightning-fast
first impressions, communicating clearly is critical, thus, information should be easy
to read and digest.

Web Template
It is a pre-designed webpage on set of HTML webpages that anyone can use to “plug-
in”. Website templates allow anyone to setup a website.

A web design template is a catchall name for several types of templates like;
1. HTML templates – website design templates represented with HTML code only
2. PSD templates – templates which contain only .psd files, graphics only, with no
code
3. Flash templates – website design templates developed with Flash
4. Flash intro templates – templates of an intro clip, developed with Flash only and
used to represent a company or/and a project.

Online WYSIWYG Platforms

Whether you’re attracted in learning to make your own website or want to

start a blog without having to learn HTML or other coding languages, you may want
to consider using a website builder that makes use of a WYSIWYG editor.
 WYSIWYG stands for what you see is what you get. In other words, you are
creating a website using drag-and-drop interface or changing the way fonts look in
an editor, that is how your finished product will look.

There are different benefits related with using a WYSIWYG editor. You have
control over what your website looks like, and you don’t have to pay a professional
to handle the coding for you. There are also a number of web hosts that have their
own built-in editors, meaning you can create your website and publish it to the web
immediately.

WYSIWYG (What You See Is What You Get) WEBSITE BUILDERS

WIX SQUARESPACE WEEBLY WORDPRESS SHOPIFY

* Easy drag- * Easy to * Easy to * Near- infinite *Easy-to-
and-drop use use customizability use product
interface platform dashboard * thousands management
* Limitless * Beautiful * Professional of available
plugins and * Inventory
customization design for - looking management
options sites templates themes and POS
integration

Creating a Website Using an Online Website Builder

Wix.com is a WYSIWYG cloud-based web development platform that was first

developed and popularized by the Israeli company also called Wix. It allows users to
create websites and mobile sites through the use of online drag-and-drop tools.

For this topic, you will create your own

personal website that focuses on your passion
or hobby.
1. Create an account on Wix through their website www.wix.com and click GET
STARTED.
2. Select “Create a New Site” from the drop down menu in the top right corner of the
dashboard. Once it’s clicked, Wix will ask what type of website do you want to
create. There are options for everyone, from online stores to personal portfolios.

3. Customize your website with the Wix Editor.

Once you select a template, you can be able to customize it in the Wix Editor
using simple drag-and-drop editing.

4. Update the Texts and Images

At this point, you can 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.

5. Personalize the Background

If small images are still not enough, you can also change your template background.
The left-hand sidebar features a ‘Background’ button, which you can use to click and
change with ease.
6. Add Pages

Once you created a stunning homepage, there are few other more pages you can add
to ensure that your website has everything visitors are looking for. For example,
make sure to include a “Home”, “About” and a “Contact Us” page.

7. Publish your Wix website

To make your website publicly accessible, you need to publish it. To do so, click
“Publish” from the top menu. However, before Wix will publish your site, the last step
in the process is to create your own subdomain or connect a custom domain. For a
serious website, you should connect your own custom domain name, rather than
using a Wix subdomain.
 What’s More

Create Your Own Digital Portfolio

Directions: Using Wix.com, create your own e-portfolio on specific subject area, to
showcase your work to future employers. In this website, you can put infographics,
audio recordings, video clips and texts together to showcase your achievements and
experiences. This activity is an alternative way for traditional portfolio.

Notes to the Teacher

In this activity you may inform your students to send
you a copy of link that they will post. This will serve as
your evidence.

What I Have Learned

The Do’s and Don’ts of Making Websites

Direction: Write Do at the beginning of the statement given if it suggests the right
thing to do in making a website and write Don’t if it is not. Write your
answer on a separate sheet of paper.

1. _________ write everything in bold

2. _________ add links to other websites
3. _________ check for spelling mistakes
4. _________ write everything in capital letters
5. _________ use lots of pictures and animations
6. _________ use fonts that people can read easily
7. _________ put original, interesting content in your site
8. _________ put your navigation bar on every page of your websites
9. _________ have all your writing crammed into one side of the page
10. _________ cover every part of your pages in writing / images / animations
 What I Can Do

A. Share Your Story Using Digital Storytelling

Directions: Using Wix.com create a photography gallery website to showcase your
stories. Include texts, drawings, photos, animations, audios, and videos in your
work. Story ideas can come from personal and family experiences, connections to
other cultures, and real or imaginary people, places, or events.

B. Why is it important to have a good quality website?

Directions: Visit at least two government agency websites and two commercial
websites and look for good and bad examples for each type. Keep detailed notes about
what you observe. Identify which one is the highest quality website, and which one
is the lowest. Rate each site from 1 to 5 (5 being the highest).

Create a table for your notes which looks something like this:

Website Name URL Rating Design Content Features

1.
2.

3.

4.

Notes to the Teacher

In this activity you may inform your
students to send you a copy of link that
they will post. This will serve as your
evidence.
 Assessment

Directions: Choose the best answer for each question. Write the letter of your answer
on a separate sheet.
1. You received some complaints that your website is not easy to read. You notice
that most of the content is centered on the page. Which aesthetic principle
should you use to increase your website’s readability?
a. color c. accessibility
b. alignment d. repetition
2. Where should the navigation be on a website?
a. Inside the toolbars
b. On the center side of the page
c. On the right side or down at the bottom
d. At the top and down the left side of the page
3. Which website builder enables you to create Web pages directly and update the
site without the need of uploading files?
a. HTML c. offline site builder
b. online site builder d. ftp uploader
4. Which term describes the readymade webpages design that a developer can
use as a starting point?
a. Wireframe c. Template
b. Blueprint d. Structure
5. Which term describes how a designer place webpage element to form links
and direct the focus of visitors?
a. hierarchy c. orientation
b. layout d. typography
6. What is the name of the web creation tool that allows us to work online
website designing?
a. Dream weaver c. Wix.com
b. Notepad d. Word processor
7. In webpage design, which color is considered the color of extremes and is
used to capture attention, and to indicate word emphasis?
a. Blue c. Yellow
b. Red d. Violet
8. Which term describes the technique used to save image, audio and video files
and reduced file sizes?
a. File compression c. Media encryption
b. File encryption d. Media encryption
9. What does the HTML pages’ editor (WYSIWYG) allow you to do?
a. read errors from the browser c. produce a document
b. create and edit website pages d. develop an online system
10. What does WYSIWYG acronym stand for?
a. What you see is where you go c. What you see is what you get
b. What you see is what you need d. What you see is what you sign
11. Which of the following programs is used by web clients to view the web pages?
a. Web browser c. Web server
b. Protocol d. Search Engine
 12. What are shared on the internet and are called as web pages?
a. Program c. Hypertext Documents
b. Cables d. None
13. What is the language that instructs the browser on how to display the
hypertext, and adds pictures to the document?
a. C Language c. HTML
b. Cobol d. Visual Basic
14. Which of the following is an advantage offered by WYSIWYG online editors for
creating a Web site?
a. Ready templates c. creating own design
b. coding practice d. designing the web structure
15. Which of the following is a component of functional design principles for web
sites?
a. Accessibility c. readability
b. Design d. Structure

Additional Activities

Directions: Answer the following questions. Write your answer on a separate sheet
of paper.

1. Explain the difference between the website and webpage.

_____________________________________________________________________
________________________________________________________________________

2. Which online WYSIWYG features or tools do you find most useful? Why?
________________________________________________________________________
________________________________________________________________________