Empowerment Technologies Quarter 1 Module 10: Web Page Design Using Templates and Online WYSIWYG Platforms

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

Senior High School

[illustration: students learning outdoors and in a classroom with a teacher, a globe, and a student with a lantern]

CO_Q1_Empowerment Technologies SHS Module 10

Empowerment Technologies Alternative Delivery Mode Quarter 1 – Module 10: Web Page Design Using Templates and online WYSIWYG Platforms First Edition, 2020

Republic Act 8293, section 176 states that: No copyright shall subsist in any work of the Government of the Philippines. However, prior approval of the government agency or office wherein the work is created shall be necessary for exploitation of such work for profit. Such agency or office may, among other things, impose as a condition the payment of royalties.

Borrowed materials (i.e., songs, stories, poems, pictures, photos, brand names, trademarks, etc.) included in this module are owned by their respective copyright holders. Every effort has been exerted to locate and seek permission to use these materials from their respective copyright owners. The publisher and authors do not represent nor claim ownership over them.

Published by the Department of Education Secretary: Leonor Magtolis Briones Undersecretary: Diosdado M. San Antonio

Printed in the Philippines by ________________________

Department of Education – National Capital Region

Office Address: Misamis St., Bago Bantay, Quezon City Telefax: 02-929-0153 E-mail Address: depedncr@deped.gov.ph

Development Team of the Module

Writers: Ericelle Bianca A. Baltazar Editors: Analisa I. Panaligan Reviewers: Lorena J. Mutas Illustrator: Ericelle Bianca A. Baltazar Layout Artist: Melody Zulaybar De Castro Management Team: Malcom S. Garma, Director IV; Genia V. Santos, CLMD Chief; Dennis M. Mendoza, Regional EPS In-Charge of LRMS; Micah S. Pacheco, Regional ADM Coordinator; Loida O. Balasa, CID Chief; Grace R. Nieves, Division EPS In-Charge of LRMS; Lorena J. Mutas, Division ADM Coordinator

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

Introductory Message

This Self-Learning Module (SLM) is prepared so that you, our dear learners, can continue your studies and learn while at home. Activities, questions, directions, exercises, and discussions are carefully stated for you to understand each lesson.

Each SLM is composed of different parts. Each part shall guide you step-by-step as you discover and understand the lesson prepared for you.

Pre-tests are provided to measure your prior knowledge on lessons in each SLM. This will tell you if you need to proceed on completing this module or if you need to ask your facilitator or your teacher’s assistance for better understanding of the lesson. At the end of each module, you need to answer the post-test to self-check your learning. Answer keys are provided for each activity and test. We trust that you will be honest in using these.

In addition to the material in the main text, Notes to the Teacher are also provided to our facilitators and parents for strategies and reminders on how they can best help you on your home-based learning.

Please use this module with care. Do not put unnecessary marks on any part of this SLM. Use a separate sheet of paper in answering the exercises and tests. And read the instructions carefully before performing each task.

If you have any questions in using this SLM or any difficulty in answering the tasks in this module, do not hesitate to consult your teacher or facilitator.

Thank you.

What I Need to Know

[illustration: hand pointing at a circle]

This module was designed to start you on a path towards future studies in web development and design, no matter how little experience or technical knowledge you currently have.

The module mainly focuses on one lesson:

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.

This module outline provides a summary of topics that can be used as a guide when progressing through this module, and upon its successful completion, you are expected to:

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

[illustration: hand holding a pencil]

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

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

   
   

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

   
   

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

   
   

4. What are shared on the internet and are called as web pages?
   a. Program c. Hypertext Documents
   b. Cables d. None

   
   

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

   
   

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

   
   

7. Which of the following is a component of functional design principles for web sites?
   a. Accessibility c. readability
   b. Design d. Structure

   
   

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

   
   

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

   
   

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

    
    

11. Which term describes the readymade webpages design that a developer can use as a starting point?
    a. Wireframe c. Template
    b. Blueprint d. Structure

    
    

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

    
    

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

    
    

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

    
    

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

    
    

Lesson 1: Web Page Design Using Templates and 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

[illustration: hand holding puzzle pieces]

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.

[chart: Venn diagram; What’s In]

Pros | Cons

What’s New

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

Term	Definition
_______ 1. E-commerce	a. is a website or printed listing of information which lists businesses within niche based categories
_______ 2. Blogs and Personal	b. websites that are excellent way to share information and resources on the web.
_______ 3. Informational	c. is an ongoing online diary or commentary written by an individual, rather than a corporation or organization.
_______ 4. Online Community	d. is an online document used and created by a person to present their background, skills, and accomplishments.
_______ 5. Photo Sharing	e. is an online shop where people can order goods and 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 and Brochure	h. is a detailed online description of a person’s life
_______ 9. Business Directory	i. is a website that presents visitors with photos and 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. Entertainment	k. websites that do not aim to sell products or services 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 / Non-profit	m. is any website that’s devoted to representing a specific business.
_______ 14. Job Searching	n. is a website that deals specifically with employment or careers.
_______ 15. Social Media	o. is an online brand or website that focuses on 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.

[illustration: website screenshot of a gelato shop homepage with the text “Gelato”, “HAND CRAFTED”, “ICE CREAM”, and a “MENU” button over a grayscale photo of an ice cream cone]

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.

[illustration: website header with a navigation bar boxed and labeled “Navigation Bar” by an arrow; the bar reads “HOME FLAVORS BOOK AN EVENT ABOUT”; the word “ENJOY” appears on the image below]

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.

[chart: logo comparison; WYSIWYG (What You See Is What You Get) WEBSITE BUILDERS]

WIX	SQUARESPACE	WEEBLY	WORDPRESS	SHOPIFY
* Easy drag-and-drop interface * Limitless customization options	* Easy to use platform * Beautiful design for sites	* Easy to use dashboard * Professional-looking templates	* Near-infinite customizability * thousands of available plugins and themes	* Easy-to-use product management * Inventory management 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.

[illustration: screenshot of a website builder page titled “What kind of website do you want to create?” listing options: Business, Designer, Blog, Online Store, Restaurants & Food, Beauty & Wellness, Photography, Accommodation, Portfolio & CV, Music, Events, Other]

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.

[illustration: screenshot titled “Pick the Website Template You Love” showing template thumbnails under “Art & Illustration Website Templates”, with labels “Illustrator Portfolio”, “Graffiti Artist”, and “The Artist”]

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.

[illustration: screenshot of the “Page Background” panel with buttons “Color”, “Image”, and “Video” and the heading “Selected Backgrounds”; the page behind it reads “Odam Luir” [?], “Home About Con”, and “Illustrator”]

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.

[illustration: screenshot of the “Site Menu” panel with the tabs “Site Menu” and “Page Transitions” and the pages “Home”, “About”, and “Contact”]

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

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
   • b. alignment
   • c. accessibility
   • 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
   • b. online site builder
   • c. offline site builder
   • d. ftp uploader

4. Which term describes the readymade webpages design that a developer can use as a starting point?

   • a. Wireframe
   • b. Blueprint
   • c. Template
   • d. Structure

5. Which term describes how a designer place webpage element to form links and direct the focus of visitors?

   • a. hierarchy
   • b. layout
   • c. orientation
   • d. typography

6. What is the name of the web creation tool that allows us to work online website designing?

   • a. Dream weaver
   • b. Notepad
   • c. Wix.com
   • 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
   • b. Red
   • c. Yellow
   • d. Violet

8. Which term describes the technique used to save image, audio and video files and reduced file sizes?

   • a. File compression
   • b. File encryption
   • c. Media encryption
   • d. Media encryption

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

   • a. read errors from the browser
   • b. create and edit website pages
   • c. produce a document
   • d. develop an online system

10. What does WYSIWYG acronym stand for?

    • a. What you see is where you go
    • b. What you see is what you need
    • c. What you see is what you get
    • 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
    • b. Protocol
    • c. Web server
    • d. Search Engine

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

    • a. Program
    • b. Cables
    • c. Hypertext Documents
    • 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
    • b. Cobol
    • c. HTML
    • d. Visual Basic

14. Which of the following is an advantage offered by WYSIWYG online editors for creating a Web site?

    • a. Ready templates
    • b. coding practice
    • c. creating own design
    • d. designing the web structure

15. Which of the following is a component of functional design principles for web sites?

    • a. Accessibility
    • b. Design
    • c. readability
    • 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?

   
   
   
   

Answer Key

[transcriber’s note: the answer key boxes are printed upside down on the page; the entries are transcribed in their printed order]

What I Know

1. b
2. c
3. a
4. c
5. c
6. a
7. a
8. b
9. d
10. b

What I have Learned

1. Don’t
2. Do
3. Do
4. Don’t
5. Do
6. Do
7. Do
8. Do
9. Do
10. Don’t

What’s New

1. E
2. C
3. B
4. G
5. F
6. D
7. J
8. I
9. A
10. H
11. O
12. M
13. K
14. N
15. L

Assessment

1. b
2. d
3. b
4. c
5. b
6. c
7. b
8. d
9. b
10. c

References

“WIX.COM” https://www.wix.com/ (Accessed 11/26/2019).

“What is web design” (2019) www.treefrog.ca https://www.treefrog.ca/what-is-web-design/ (Accessed 11/26/2019)

“7 best WYSIWYG web builder reviews (2020)” HostingAdvice.com https://www.hostingadvice.com/how-to/wysiwyg-web-builder/ (Updated: October 29, 2019)

“Top 6 basic elements of web design”. (2018). Dream host https://www.dream host.com/blog/elements-of-webdesign/ (Updated: September 26, 2018)

For inquiries or feedback, please write or call:

Department of Education – Bureau of Learning Resources (DepEd-BLR)

Ground Floor, Bonifacio Bldg., DepEd Complex Meralco Avenue, Pasig City, Philippines 1600

Telefax: (632) 8634-1072; 8634-1054; 8631-4985

Email Address: blr.lrqad@deped.gov.ph * blr.lrpd@deped.gov.ph