Scribd
Upload
9 views

Lesson 2 - Web Page Design and Platforms

This document provides an overview of web page design using templates and online WYSIWYG platforms, outlining key learning objectives such as creating a web page with Microsoft Word and using Jimdo for website creation. It explains the roles of HTML and CSS in web design, as well as the functionalities of WYSIWYG editors, which allow users to design without coding knowledge. Additionally, it includes instructions for creating a website and managing settings on Jimdo, along with an assignment to research the advantages and disadvantages of WYSIWYG editors.

Uploaded by

franchezkalidaliva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views

Lesson 2 - Web Page Design and Platforms

This document provides an overview of web page design using templates and online WYSIWYG platforms, outlining key learning objectives such as creating a web page with Microsoft Word and using Jimdo for website creation. It explains the roles of HTML and CSS in web design, as well as the functionalities of WYSIWYG editors, which allow users to design without coding knowledge. Additionally, it includes instructions for creating a website and managing settings on Jimdo, along with an assignment to research the advantages and disadvantages of WYSIWYG editors.

Uploaded by

franchezkalidaliva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

EMPOWERMENT TECHNOLOGIES

Web Page Design using


Templates and Online
WYSIWYG Platforms

Q2 - Lesson 2
After going through this lesson, 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.
WEB DESIGN PRINCIPLES AND ELEMENTS
• Website templates are pre-designed layouts that allow you to
arrange content onto a webpage to create a simple yet well-
designed website. You can drag and drop elements like image
blocks, photo galleries, logos, and more into the template to
make it your own. It is usually built with HTML and CSS code.

• Website templates are also provided by various suppliers to help


make Web design a lot easier for designers. A website template
is also known as a Web page template or page template.
HTML and CSS
• HTML stands for HyperText Markup Language. It is a standard markup
language for web page creation. It allows the creation and structure of
sections, paragraphs, and links using HTML elements (the building
blocks of a web page) such as tags and attributes.

• CSS stands for Cascading Style Sheets and is used to style elements
written in a markup language such as HTML. It separates the content
from the visual representation of the site. The relation between HTML
and CSS is strongly tied together since HTML is the very foundation of a
site and CSS is all of the aesthetics of an entire website.
Example: HTML Code and Output
Example: HTML Code with CSS and Output

CSS Code
WEB DESIGN PRINCIPLES AND ELEMENTS
• 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.

• WYSIWYG editor - allows you to create and design a web page without
any coding knowledge.
WYSIWYG Editor
• WYSIWYG (What You See Is What You Get) 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.
Creating a Website using Microsoft Word

• 1. Open Microsoft
Word.

• 2. Type anything
on the blank page
Creating a Website using Microsoft Word
• 3. Click on File > Save
As > Type any file
name.

• 4. In the Save as Type,


select “Web page
(*.htm, *.html)”
Creating a Website using Microsoft Word
• 5. Navigate to the
directory where you
saved your file.

• 6. Double click on the


file and it will open
your document in a
web browser.
Creating Your Own Website using Jimdo
• Go to www.jimdo.com and
click Start for Free.

• You will be prompted to Sign


Up or Log in. You can choose
to login with the following
supported accounts.
Creating Your Own Website using Jimdo
User Dashboard
Jimdo 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 to
properly view your webpage.
Jimdo Settings
• 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 your website.
• The Apps option contains settings for embedded apps on your website
like Dropbox, QR Codes, Google Analytics, and Twitter
• The Jimdo settings allows you to remove the Jimdo Box on your website
(premium feature) and check News.
Assignment:
• Make a RESEARCH on the advantages and
disadvantages of a WYSIWYG Editor.

• Cite other examples of WYSIWYG Editor.


Sources:
• Quarter 2: Module 2: Web Page Design using Templates and Online
WYSIWYG Platforms

• Other Sources:
– Online Platforms as Tools ICT Content Development
– https://www.wpbeginner.com/showcase/best-cms-platforms-compared/
– https://www.careervillage.org/questions/34206/
– https://kinsta.com/knowledgebase/content-management-system/

You might also like