The document discusses how to create a webpage using a WYSIWYG (What You See Is What You Get) editor. It defines WYSIWYG as an editing interface that allows content to be edited in a format similar to its final presentation. Examples of free WYSIWYG editors discussed are Wix, Weebly, Drupal, and WordPress. A step-by-step guide is then provided on how to use Wix to design a sample webpage, including adding templates, pages, backgrounds, and previewing the page.

1. Web page design
using templates and
online ‘wysiwyg’
platforms

2. What does ‘WYSIWYG’ Mean?
WYSIWYG
is an acronym for “What you see is what you
get”.
In computing, 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.( Wikipedia)

3. Examples of
WYSIWYG HTML
Editor

4. 1. Wix
Wix is a pure WYSIWYG, free
cloud-based web development
platform that allows users to
create HTML5 websites and
mobile sites. Users may add
functions such as social plug-
ins, e-commerce, contact forms,
e-mail marketing and
community forums to their
websites using different Wix and
third-party apps.

5. 1. Wix

6. 2. Weebly
Weebly is a free website builder,
blog and web-hosting service featuring a
drag-and-drop website builder.

7. 2. Weebly

8. 3. Drupal
Drupal is a free and open
source content-management
framework written in PHP and
distributed under the GNU
General Public License Drupal
provides a back-end framework
for at least 2.3% of all web
sites worldwide– ranging from
personal blogs to corporate,
political, and government sites.

9. 3. Drupal

10. 4. Wordpress
WordPress is a free and open-source content
management system (CMS) based on PHP and
MySQL.

11. Creating a Webpage

12. “Websites allow you to market and sell your products online.
There are free and for subscription online website tools that are
easy to use and accessible on the internet. There are various
templates, designs and layouts that are available for use. These
online tools have drag and drop tools to make web page
creation easy without the need of coding language.

13. Hands on:
Using WIX to create a Webpage

14. 1. Turn on your computer
or laptop and open a web
browser.

15. 2. Type in the address bar www.wix.com

16. then press Enter.

17. 3. WIX will show the features and benefits they provide if
you sign up and use their site as you scroll down the page.

20. 4. After reading the Information, Click Start
Now.
4

21. 5. Click Log In to continue. You can choose to Sign in
with Facebook, Google or Sign up a new account.

22. 6. After logging in, click Create Your Website.

23. 7. Now, You can select what type of website you
wish to create. For now, choose Photography.

24. 8. The next window will allow you to choose a
website template which will be the main theme
of your page.

25. Use charts to explain your ideas9. Pointing the mouse over your chosen template will
reveal two options: Edit or View. If you want to get
started on the template, click Edit. If you want to see
what is in it, click View.

26. 10. If you click View, it will open a new tab and
you can view the contents.

32. 11. For example, you have chosen this
template, click Edit this Page at the top of the
page.

33. 12. It will open another tab to go to the editing part. Click
Start Now.

34. 13. The window will show WIX edit mode where
various tools will appear.
Main
Toolbar
Top Left
Toolbar
Top
Right
Toolbar
Editor
Toolbar

35. I. Main Toolbar
a. Background
b. Add
c. App Market
d. My Uploads
e. Start Blogging
f. Bookings

36. Main Toolbar allows you to: Edit
your background page,add many
tools, add other features from Wix App
Market, upload your files, create a
blog and book appointments

37. Edit your background page,
This is the view
of Background
option, it is where
you can edit your
background page.

38. A. Color- You can customize
the color of your
background. The color
palettes shown in the box
are already chosen to
complement the content
of the website. But you can
also add color below.
Change
Color Palette
Add Color

39. By clicking Change, a palette with options will show. You can
preset color palettes on the right or choose the circles to pick
your own colors. Once you have selected your color, click Done.
Preset Color Palette
Select circles
change color

40. B. Image- You can place your own images in your website by
uploading it by clicking Upload images then locating it or by
drag and down.

41. C. Video- Same as uploading an image, click upload then
locate your video file, or by drag and drop.

42. D. Selected Backgrounds- Preset backgrounds can be chosen,
it can be a still image or a video.
E. Put your pointer over the selected photo or video for a
preview.

43. F. Once you have selected a photo or a video for your background,
you can still edit it by clicking settings.

45. In the Image
Settings, you can
change the opacity
scroll effects and
scale & positioning.

46. In the Video Settings, you
can choose to put an
overlay pattern or none
and adjust playback
options. If you have
chosen an overlay
pattern, you can turn on
or off the Overlay a color
option. You can select a
darker or lighter overlay
pattern.

47. G. Apply to Other Pages- Once you are done editing the background of
the current page, you can also apply it to other pages by clicking Apply
to Other Pages. Then select the page you want to copy by clicking the
tick box.

48. Creating and
Renaming a New Page

49. 1. In edit mode, click located
at the top left.

50. 2. After clicking, it will drop
down to page settings.
Currently, the available pages
are: Welcome (Home page),
Portfolio, Client Showcase,
About, Contact, Book Online.
If you want to add more page,
click Add Page.

51. 3. Then click
Page to add
new page.

52. 4. A new page will add up to
your list, Shown on the next
page is the view of new page,
the header, footer and the links
will remain. It will also
automatically create a new link
for the page.

53. Footer
Header Links

54. 5. Finally, rename the new page for example Shop. On this
page, you can put the things you wanted to sell. Click Pages:
Welcome and double click New
Page.Then type Shop and click Done.

55. Previewing of Page
and Back to Edit Page.

56. 1.You can see what your website looks like
by clicking on Preview, located at the top
right corner.
2.You can see the progress of your website
by clicking on Preview, located at the top
right corner.

58. 3. Shown below is what Preview mode
looks like.

59. 4. To resume editing your website click:
Located at the top right corner.

60. Tools in Preview mode.
Icons Functions
Switch Editor Views- Allows you
to view what it looks like in
mobile and desktop.
Save- Saves your work.
Back to Editor- Brings you back to
Edit mode to resume your
progress.

67. Thanks!