WEB CREATION
WYSIWYG
• What You See Is What You Get
• whatever you type, insert, draw, place, rearrange, and everything you do on a page is what the
audience will see.
Other Ways to Create a Website
• HTML (Hypertext Markup Language) to create pages
• CSS (Cascading Style Sheets) codes to design the pages
Creating A Website Using Microsoft Word
1. Open Microsoft Word
2. Type anything on the page like “Welcome to my website”
3. Click on File>Save as>Browse.
4. On the Save as dialog box, locate your activities folder and create a new folder named “Sample
Web Page”.
5. Specify the filename Sample Web Page”.
6. On the Save as type, select “Web Page (*.htm; *.html).
7. Click the change title button.
8. Input the title, then click OK then Save.
9. Check the files on your Sample Web Page folder. You will see a new folder generated including
your .htm or .html file.
10. Open the Sample Web Page.htm file and you will see that you just created a web page using MS
Word.
Let’s Try!
Construct your own website using Microsoft word. You can put any content you want on your
website.
Basic WebPage Creation using Jimdo
Inserting a page
1. Hover your mouse pointer over the site navigator. The Edit Navigation button will appear.
2. Click on the Edit Navigation button. Click on Add a New Page.
3. Rearrange pages using the tools on the right of the page title.
4. Click Save when done.
Editing Elements
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 the element
Copy element – used to copy the element
Drag tool – click and drag the element to a valid part of the page
I. Header – allows you to edit the text and change its font
size
II. Image – allows you to upload an image directly from
your computer or a dropbox account
• Sizing tools – used to make image larger or smaller or restore to
actual size page
• Align tools – used for left, right, and center alignment page
• Rotate tools – used to rotate image clockwise or counter-clockwise
• View tools – used to enable image, link photo, and remove link
• Other tools – caption and alternative text; allow sharing to
Pinterest
Edit Image – used to edit the image into user’s choice
III. Paragraph – similar to using word processor
Adding elements
1. Hover the mouse pointer over the top or bottom of an existing element until the Add Element
button appears.
2. Select the visual you want to add.
3. Edit the element to your liking then click Save
• Heading – to insert heading type of text
• Text – to insert a paragraph type of text
• Photo – to insert a single photo
• Text with photo – to insert a photo surrounded with text
• Photo Gallery – to insert multiple photos on one area
• Horizontal line – to insert a horizontal line that acts as a divider
• Spacing – to add a space with a specified size
• Columns – to insert columns that divide an area vertically
• Video – to insert a video from a video hosting site like YouTube
• Form – create a Send an Email form for feedback
• Store item – adds a space for selling an item
• Share Buttons – adds button for the site visitor to share your website
• More Elements and Add-ons – includes other options like Google Maps, file downloads, etc.
