Scribd
Upload
154 views

Web Design & ICT

This document provides information on designing web pages using templates and online WYSIWYG (What You See Is What You Get) platforms. It discusses popular web builder sites like Wix and WordPress that offer drag-and-drop interfaces for creating websites. The 5 common parts of a website are also outlined - the header, navigation bar, sidebar, content, and footer. Steps for creating a basic website using the online platform Canva are then presented.

Uploaded by

Jerico Csmpugan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
154 views

Web Design & ICT

This document provides information on designing web pages using templates and online WYSIWYG (What You See Is What You Get) platforms. It discusses popular web builder sites like Wix and WordPress that offer drag-and-drop interfaces for creating websites. The 5 common parts of a website are also outlined - the header, navigation bar, sidebar, content, and footer. Steps for creating a basic website using the online platform Canva are then presented.

Uploaded by

Jerico Csmpugan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 36

WEB DESIGN AND ICT

Designing a Web Page


Example of web builder site:
• Adobe Dreamweaver
• MS Publisher
• Squarespace
• Weebly
• Wix
• Voog
Designing a Web Page
Example of web builder sites:

• Strikingly
• Wordpress
• ZohoSites
• GoDaddy
• Google Sites
Web Page Design Using Templates
and Online WYSIWYG Platforms
• WYSIWYG is an acronym for “what you see
is what you get”. A WYSIWYG editor is a
system in which content (text and graphics)
can be edited in a form closely resembling
its appearance when printed or displayed
as a finished product, such as a printed
document, web page, or slide presentation.
EXAMPLE OF WYSIWYG PLATFORMS
FOR HTML EDITOR
• Wix – is a pure WYSIWYG, free cloud-based
web development platform that allows users
to create HTML5 websites and mobiles sites.
Users may add functions such as social plug-
ins, e-commerce, contact forms, e-mail
marketing, and community forums to their
web sites using different Wix and third-party
applications.
THE 5 PARTS OF A WEBSITE
1. Header/Banner
1. Header/Banner
• The header or banner is located on top of a
website. It includes the logo of the
company, the publisher, or owner of the
website. This automatically informs website
visitors what the website is about.
2. Navigation Bar
2. Navigation Bar
• The navigation bar/menu tab allows the
visitors to check other pages of the
website. It appears in all pages within a
website for more convenient navigation.
Navigation bars are usually placed just
below the banner/header for convenient
access.
3. Sidebar
3. Sidebar
• Some websites do not use this part
anymore. They say it is an added distraction
to some users, especially if the sidebar
displays ads, Twitter feed, etc.
4. Content
4. Content
• The quality of a website’s content usually
dictates the value of your website. You can
find different types of content in a website.
They could come in a form of text, image,
audio, video, or a combination of those.
5. Footer
5. Footer
• The footer is almost the same as the
sidebar. The only difference is that they are
located at the bottom part of a website.
Trends
The footer usually has:
• About us link
• Contact us link
• Terms of service
• Privacy policy
• Sitemap
• Social media buttons
Trends
• Address
• Phone number
• E-mail address
• Other offers
• Related links/posts
• Subscription boxes
HOW TO CREATE A WEBSITE
USING CANVA?
Open a web browser and
type www.canva.com. Then,
in the upper right corner of
the website, click Sign Up.
Create a Canva account in three ways:
- Using Email Address
- Using your Gmail account
- Using your Facebook account
To find a different website
template, type “Mobile-First
Website" into the search
field.
Select a website
template to use.
CANVA MENU BAR

• Like in any other tool, Canva's menu bar is at the top of the editor.
CANVA MENU BAR

The menu bar is made up of the following features


• Home
• File
• Resize
• Saving Status
• Design name
• Try Canva Pro
• Share
• Download
Canva - Toolbar

• The toolbar is
located below the
menu bar. The
contents of the
toolbar change on
the basis of the
elements selected
in the Canvas.
CANVA SIDE PANEL
CANVA IN SMARTPHONE

• To find a website
template in Canva, in
the search bar type
“Mobile-First
Website”.
MENU BAR (SMARTPHONE)
TOOL BAR
How to share your website’s
link in Canva

• In the Menu Bar select Upload Tab>Share Link>Share


a Link to Edit then Copy link.
How to share your website’s
link in Canva

STEP 1. Upload Tab STEP 2. Share a link STEP 3. Share a link STEP 4. Copy link
to edit
How to publish your website
in Canva

STEP 1. STEP 2. STEP 3.


Select Select Choose
upload Tab Website Standard

You might also like