Web Page Creation

Empowerment Technologies 11

Basic Web Page

Creation
Creating Your Own Website using Jimdo
 Web Page Creation

Empowerment Technologies 11

WYSIWYG
It is 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. Like
using the Microsoft Word, WYSIWYG shows and
prints whatever you type on the screen.
 Web Page Creation

Empowerment Technologies 11

Other Ways to Create a Website

We are going to create a web page using

Microsoft Word – a technique you can also use
using Microsoft Excel. These office applications
can be used as a WYSIWYG Platform. The next
step is uploading these files to a web server.
 Web Page Creation

Empowerment Technologies 11

Other Ways to Create a Website

People use HTML codes to create pages and CSS
codes to design them. If you have taken up
these coding skills before, it will help you in
creating pages using WYSIWYG. If you have not,
WYSIWYG is designed for anyone who has not or
does not have prior coding skills.
 Web Page Creation

Empowerment Technologies 11

Creating Your Own Website using

Jimdo
Jimdo is a WYSIWYG web hosting service. It
offers free, professional, and business web
hosting services. Jimdo also has an iOS and
Android app which you can use to manage your
website whenever you do not have access to a
PC.
Step 1: Open a web page create an account
on Jimdo by going to www.jimdo.com and
clicking “Start Free”
Step 2: Choose from the options on what way
on how you will create your account.
 Step 3: Select “create a
beautiful website-no coding
required” on how you want to
create your website
Step 4: Choose if you are creating a website
for “a single individual” or “group of people”
Step 5: Choose from the option “what is
your website for?”
Step 6: Input what is the name of your
business or project
Step 7: Choose from the option “what
are the goals of your website?”
Step 8: Choose from the option “what
is your website about?” and search for
a topic that you will focus on your
webpage
 Step 9: You will be instructed to
choose a template. Pick any template
you want.
Step 10: Choose what color palette
do you want to apply in your website.
Step 11: Choose “what pages does
your website need?”. Scroll down to
see other options. These are the
navigators of your website.
Step 12: Next step is Jimdo website
will ask you to choose a URL for your
website. But these are for premium
plans
Step 12: Scroll down and click the
option for “create your free website
and start editing”.
Step 13: Your website will be generated and soon you will end
up in the site’s WYSIWYG editor.
 Web Page Creation

Empowerment Technologies 11

Tips in using the WYSIWYG editor:

By default, the home page is shown on your

editor. To navigate to another page, simple click
the page title on your navigator. The site
navigator contains a set of links going through
the different pages of your website. The
navigator currently available to you depends on
 Web Page Creation

Empowerment Technologies 11

Inserting a Page
• Hover your mouse
pointer over the
Pages.
• Click Add New Page
and rearrange the
pages using the tools
on the right of page
title.
• Click Save when done.
 Web Page Creation

Empowerment Technologies 11

Using the “Block” Menu

Hovering over a text, image, or any element you see on
the website will highlight the element.
• Move element up – used to move the element up by
one level
• Move element down – used to move the element one
level lower
• Delete element – used to remove element
• Copy element – used to copy the element
• Drag tool – click and drag the element to a valid part of
the page
 Web Page Creation

Empowerment Technologies 11

I. Header.
• If it is a header, clicking the text will allow
you to edit the text and change its font size.
 Web Page Creation

Empowerment Technologies 11

Changing a Header Image

• Clicking on the “Choose Image” icon will open the “Image
Library” menu on the left side of the screen where you
can choose the source of your image.
 Web Page Creation

Empowerment Technologies 11

Adding a Video to the Header

• Clicking on the “Choose Video” icon will enable
you to enter the web address for a YouTube or
Vimeo video.
 Web Page Creation

Empowerment Technologies 11

Adding a Slideshow to the

Header
• To add a slideshow to your homepage header:
• Click on your existing homepage header image.
• Open the “Block Design” menu by hovering your cursor
over your header image and clicking on the “Block
Design” icon in the toolbar that then appears.
• Click on the “Slideshow” category in the “Block Design”
menu, select a layout that fits your website, click to
apply it to your website, and then click on the “Done”
 Web Page Creation

Empowerment Technologies 11

Adding a Slideshow to the

Header
• To add or remove images from your slideshow:
• Hover your cursor over an image in the slideshow to
open the toolbar pictured below.
• Use these four buttons to adjust your slideshow:
 Web Page Creation

Empowerment Technologies 11

II. Image.
• If it is an image,
several options
would also appear. It
also allows you to
upload an image
directly from your
computer or other
social media
 Web Page Creation

Empowerment Technologies 11

III. Paragraph.
• If it is a paragraph, you will be treated to even
more options similar to using a word processor.
Web Page Creation

Empowerment Technologies 11

Adjusting Your Jimdo

Website Colors
• Once you open the “Edit
Design” menu, you’ll see a
“Color Palette: option. Click on
that if you want to choose
from among several different
options for your website’s
color scheme.
Web Page Creation

Empowerment Technologies 11

Updating Jimdo Buttons

• Another option in the “Edit Design” menu focuses
on your website’s “Buttons.” Click on the button
shape you want and all of your buttons will change
to that new shape.
 Web Page Creation

Empowerment Technologies 11

Modifying Your Template’s

Animations
• Modifying your template’s
animation style follows a
similar process to changing
its buttons. Simply click on
the animation style you
prefer, and your template will
change to that new style.
 Web Page Creation

Empowerment Technologies 11

Adding a Block
• To add a block to your website, you’ll first need to find the
blue “+ Add Block” button.
• Clicking on this button will open the “Add Blocks” menu,
which offers a list of blocks with different purposes and
features.
 Web Page Creation

Empowerment Technologies 11

SITE SETTINGS
• Templates – changes the design template selected
• Style – changes the design style of the page (like color)
• Blog – creates blog for your website
• Upgrade – upgrades to JimdoPro or JimdoBusiness
• Settings – changes account and website settings
• SEO – Search Engine Optimization; used for others to easily
find your site using search engines like Google and Bing
• Store – manage the orders made from website
• Statistics – views your site’s statistics
• Help – accesses Jimdo’s help archive
 Web Page Creation

Empowerment Technologies 11

SETTINGS
• The Settings option contains important information that you
should edit to make the most out of your Jimdo website.
• The Account Settings includes changing your password,
email, and personal profile.
• The Website options allows you to change your site title and
footer; checks your storage; creates privacy policy and your
favicon (the icon of your website shown on a browser).
• The Mobile Settings is used to prepare your page for mobile
devices.
 Web Page Creation

Empowerment Technologies 11

SETTINGS
• The Email and Domain Management settings is a premium
feature. It is used to manage email accounts for your website.
• The Store settings allows 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.
 Web Page Creation

Empowerment Technologies 11

SETTINGS
• The Apps option contains settings for embedded apps on
your website like Dropbox, QR Codes, Google Analytics, and
Twitter.
• Once you are done editing the settings, go to your site’s URL
using a browser of your choice.
 Web Page Creation

Empowerment Technologies 11

MULTIMEDIA CONTENT
Here are multimedia contents that you can find on some
websites:
• Videos – through the video hosting sites, you can take
a video and show it to the entire world (e.g. Youtube)
• Sound, Music, Audio – if videos are too much for you,
you can always record sounds. You can share your
sound bites to the entire world (e.g. Soundcloud)
 Web Page Creation

Empowerment Technologies 11

MULTIMEDIA CONTENT
• Online Games – game developers now create what is
called “browser-based games”. You do not need to
install these games to your computer as they run in
most updated web browsers (e.g. Adventure Quest,
Farmville, Candy Crush).
• Online Tests – Online survey forms and test that
automatically display the results when finished (e.g.
Online IQ and Personality Tests).
 Web Page Creation

Empowerment Technologies 11

MULTIMEDIA CONTENT
• Courseware – Online courses that simulate the
classroom online (e.g. E-learning courses using a
Learning Management System).
• Podcasts – an episodic series of audio or text files
streamed online (Spotify, TED Talks).
• Vodcasts – an episodic series of video streamed online
(YouTube series/shows like Video Game High School,
Good Mythical Morning).