ADMSHS_Emp_Tech_Q1_M10_WebpageDesigning_UsingTemplates

Empowerment

Technologies

Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms

What I Need to Know

1. Lesson 1 – Web Page Design Using Templates and online WYSIWYG Platforms

Learning Competencies:

Create an original or derivative ICT content using online creation tools, platforms, and applications to effectively communicate messages related to specific professional track.

Learning Competencies:

Create an original or derivative ICT content using online creation tools, platforms, and applications to effectively communicate messages related to specific professional track.

Aims:

1. define WEB PAGE DESIGN and its basic elements;

2. identify the different web templates and WYSIWYG platform; and

3. design a website using an online WYSIWYG platform.

What I Know

Directions: Choose the best answer for each question. Write the letter of your answer on a separate sheet.

Multiple Choice

What does the HTML pages’ editor (WYSIWYG) allow you to do?

• read errors from the browser

• create and edit website pages

• produce a document

• develop an online system

Multiple Choice

What does WYSIWYG acronym stand for?

• What you see is where you go

• What you see is what you need

• What you see is what you get

• What you see is what you sign

Multiple Choice

Which of the following programs is used by web clients to view the web pages?

• Web browser

• Protocol

• Web server

• Search Engine

Multiple Choice

What are shared on the internet and are called as web pages?

• Program

• Cables

• Hypertext Documents

• None

Multiple Choice

What is the language that instructs the browser on how to display the

hypertext, and adds pictures to the document?

• C Language

• Cobol

• HTML

• Visual Basic

Multiple Choice

Which of the following is an advantage offered by WYSIWYG online editors for

creating a Web site?

• Ready templates

• coding practice

• creating own design

• designing the web structure

Multiple Choice

Which of the following is a component of functional design principles for web

sites?

• Accessibility

• Design

• readability

• Structure

Multiple Choice

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?

• color

• alignment

• accessibility

• repetition

Multiple Choice

Where should the navigation be on a website?

• Inside the toolbars

• On the center side of the page

• On the right side or down at the bottom

• At the top and down the left side of the page

Multiple Choice

Which website builder enables you to create Web pages directly and update the

site without the need of uploading files?

• HTML

• online site builder

• offline site builder

• ftp uploader

Multiple Choice

Which term describes the readymade webpages design that a developer can

use as a starting point?

• Wireframe

• Blueprint

• Template

• Structure

Multiple Choice

Which term describes how a designer place webpage element to form links

and direct the focus of visitors?

• hierarchy

• layout

• orientation

• typograph

Multiple Choice

What is the name of the web creation tool that allows us to work online

website designing?

• Dream weaver

• Notepad

• Wix.com

• Word processor

Multiple Choice

In webpage design, which color is considered the color of extremes and is

used to capture attention, and to indicate word emphasis?

• Blue

• Red

• Yellow

• Violet

Multiple Choice

Which term describes the technique used to save image, audio and video

files and reduced file sizes?

• File compression

• File encryption

• Media encryption

• Media encryption

Open Ended

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.

What’s New

Directions: Match each term in the left column with the correct definition in the right column.

Match

Match the following

• is an online shop where people can order goods and

  make payments from the comfort of their own homes.

• is an ongoing online diary or commentary written by

  an individual, rather than a corporation or

  organization.

• websites that are excellent way to share information

  and resources on the web.

• these are great ways to get in touch and share ideas

  with people with the same interests or from similar

  backgrounds through the internet.

• Websites such as Pixabay.com allow people to upload

  and download photos for free.

E-commerce

Blogs and

Personal

Informational

Online

Community

Photo

Sharing

• E-commerce

• Blogs and

  Personal

• Informational

• Online

  Community

• Photo

  Sharing

Match

Match the following

• is an online document used and created by a person

  to present their background, skills, and

  accomplishments.

• is a website that showcases a person’s work, skills

  and potentials for future employers.

• is a website that presents visitors with photos and

  descriptions of their products and/or services.

• is a website or printed listing of information which

  lists businesses within niche based categories

• is a detailed online description of a person's life

e-resume

e-portfolio

Catalogue

and Brochure

Business

Directory

e-Biography

• e-resume

• e-portfolio

• Catalogue

  and Brochure

• Business

  Directory

• e-Biography

Match

Match the following

• is an online brand or website that focuses on

  producing high quality entertainment content for its

  users.

• is any website that’s devoted to representing a

  specific business.

• websites that do not aim to sell products or services

  to their visitors, but they still need to convince people

  to support their cause.

• is a website that deals specifically with employment

  or careers.

• 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.

Entertainment

Business

NGO /

Non-profit

Job

Searching

Social

Media

• Entertainment

• Business

• NGO /

  Non-profit

• Job

  Searching

• Social

  Media

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.

What is It

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.

What is It

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.

Multiple Choice

_________ write everything in bold

• Do

• Don’t

Multiple Choice

_________ add links to other websites

• Do

• Don’t

Multiple Choice

_________ check for spelling mistakes

• Do

• Don’t

Multiple Choice

_________ write everything in capital letters

• Do

• Don’t

Multiple Choice

_________ use lots of pictures and animations

• Do

• Don’t

Multiple Choice

_________ use fonts that people can read easily

• Do

• Don’t

Multiple Choice

_________ put original, interesting content in your site

• Do

• Don’t

Multiple Choice

_________ put your navigation bar on every page of your websites

• Do

• Don’t

Multiple Choice

_________ have all your writing crammed into one side of the page

• Do

• Don’t

Multiple Choice

_________ cover every part of your pages in writing / images / animations

• Do

• Don’t

Open Ended

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.

Open Ended

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).

Assessment

Directions: Choose the best answer for each question. Write the letter of your answer on a separate sheet.

Multiple Choice

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?

• color

• alignment

• accessibility

• repetition

Multiple Choice

Where should the navigation be on a website?

• Inside the toolbars

• On the center side of the page

• On the right side or down at the bottom

• At the top and down the left side of the page

Multiple Choice

Which website builder enables you to create Web pages directly and update the

site without the need of uploading files?

• HTML

• online site builder

• offline site builder

• ftp uploader

Multiple Choice

Which term describes the readymade webpages design that a developer can

use as a starting point?

• Wireframe

• Blueprint

• Template

• Structure

Multiple Choice

Which term describes how a designer place webpage element to form links

and direct the focus of visitors?

• hierarchy

• layout

• orientation

• typography

Multiple Choice

What is the name of the web creation tool that allows us to work online

website designing?

• Dream weaver

• Notepad

• Wix.com

• Word processor

Multiple Choice

In webpage design, which color is considered the color of extremes and is

used to capture attention, and to indicate word emphasis?

• Blue

• Red

• Yellow

• Violet

Multiple Choice

Which term describes the technique used to save image, audio and video files

and reduced file sizes?

• File compression

• File encryption

• Media encryption

• Media encryption

Multiple Choice

What does the HTML pages’ editor (WYSIWYG) allow you to do?

• read errors from the browser

• create and edit website pages

• produce a document

• develop an online system

Multiple Choice

What does WYSIWYG acronym stand for?

• What you see is where you go

• What you see is what you need

• What you see is what you get

• What you see is what you sign

Multiple Choice

Which of the following programs is used by web clients to view the web pages?

• Web browser

• Protocol

• Web server

• Search Engine

Multiple Choice

What are shared on the internet and are called as web pages?

• Program

• Cables

• Hypertext Documents

• None

Multiple Choice

What is the language that instructs the browser on how to display the

hypertext, and adds pictures to the document?

• C Language

• Cobol

• HTML

• Visual Basic

Multiple Choice

Which of the following is an advantage offered by WYSIWYG online editors for

creating a Web site?

• Ready templates

• coding practice

• creating own design

• designing the web structure

Multiple Choice

Which of the following is a component of functional design principles for web

sites?

• Accessibility

• Design

• readability

• Structure

Open Ended

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.

Open Ended

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