Q2W2 ETECH Module 2: Web page design using templates and online

Module 2: Web page design using templates and online

by Edgar Monte

​What I Need to Know

​The module has one lesson, namely:

 Lesson 10 – Web page design using templates and online WYSIWYG

platforms

After going through this module, 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.

​Definition of Terms

​WYSIWYG editor- It allows you to create and design a web page without any coding knowledge.

HTML- stands for Hypertext Markup Language

CSS- Stands for Cascading Style Sheets

Jimdo- a free website provider with WYSIWYG editor

Template- a ready-made design for a website

SEO- stands for Search Engine Optimization- a feature that maximizes the search engine optimization feature so visitors can easily locate your website

​What I Know

Direction: Read each question carefully and write the letter of the best answer.

Multiple Choice

Which of the following statements is true about WYSIWYG editor?

• It is the acronym for What You Saw Is What You Got.

• Using HTML and CSS in creating a website is easier than using WYSIWYG.

• WYSIWYG is designed for anyone who has no prior coding skills.

• All of the above

Multiple Choice

Which of the following statements is related to HTML tags?

• HTML tags are elements of document.

• It is used to specify the elements of a document.

• It defines the content of the document.

• It defines the structure of the document.

Multiple Choice

Which of the following statements is true about Jimdo?

• Jimdo is a WYSIWYG web hosting service offering free and paid services.

• It has an android and iOS application that let you manage your site on mobile.

• Jimdo is easy to use.

• All of the above.

Multiple Choice

Which of the following site settings you are going to use if you want to use a ready-made design?

• Style

• Template

• Settings

• Background

Multiple Choice

Which of the following elements you are going to add if you want to insert multiple photos on one area?

• Photo

• Gallery

• Photo Gallery

• Photos

Lesson 10

Web page design using templates and online WYSIWYG platforms​

​

​What’s In

Online Platform is technologies that are grouped to be used as a base upon which other applications processes or technologies are developed some of the examples of an online platform are Presentation/Visualization, Cloud Computing, Social Media, Web Page Creation, File Management and Mapping.

WYSIWYG 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.​

​What’s New

​Read and answer each question concisely. Write your answer on the space provided

Open Ended

List down at least three websites you normally visit.

Open Ended

What makes you normally visit the site- graphics, layout, or content? Why?

​What is It

​WEB DESIGN PRINCIPLES AND ELEMENTS

Website Template- Also known as web template is a predesigned webpage, simply by adding your text and customization to create your desired web page. It is usually built with HTML and CSS code.

WYSIWYG editor- It allows you to create and design a web page without any coding knowledge

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.

​Basic Web Page Creation

Creating a Website using Microsoft Word

1. Open Microsoft Word.

2. Type anything on the page like “Hello World!”

3. Click on File > Save As > Type any file name.

4. In the Save as Type, select “Web page (*.htm, *.html)”​

​Input the title as seen below, then click OK then Save

Open your saved file and you will see that you just created a webpage using MS Word.

Click the Change Title button.​

​Creating Your Own Website using Jimdo

​Jimdo is WYSIWYG web hosting service. It offers free, professional, and business web hosting service . 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. For this exercise you will create own personal website that focuses on your passion or hobby.

​1. Create an account on Jimdo by going to www.jimdo.com and clicking Create Your Website.

2. You will be instructed to choose a template. Pick any template that you want.​

​3. Chooses URL for your website. Enter your email and password.

4. Your website will be generated and soon you will end up in the site’s WYSIWYG editor.​

​

5. The editor is pretty easy to use. The center shows the preview of your website. The design tools are located on the right. It is now time to edit the website to your liking. Use the following tips to achieve it.​

​

​Tips in using the editor

By default, the home page is shown on your editor. To navigate to another page, simply 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 which template you used.​

​​Inserting a Page

1. However 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

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 lower

​

Delete element- used to remove the element

​

Copy element- used to copy the element

​

Drag tool- click and drag the element to avoid part of the page

Clicking on an element will show more options regarding on what visual element you clicked:​

​

​I. Header- If it is a header, clicking will allow you to edit the text and change its font size.

​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 a Dropbox account.

​III. Paragraph- If it is a paragraph, you will be treated to even more options similar to using a word processor:

​Adding Elements

​1. To add elements on screen, hover the mouse pointer over the top or bottom of an existing element until the Add Element button appears

3. Edit the element to your liking then click Save

2. Select the visual element you want to add

​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.

 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 you website.

 The Apps option contains settings for embedded apps on your website like Dropbox, OR Codes, Google Analytics, and Twitter

 The Jimdo settings allows you to remove the Jimdo Box on your website (premium feature) and check News.

​What’s More

Read and answer each question concisely. Write your answer on​ space provided

Open Ended

What are the advantages and disadvantages of a WYSIWYG editor?

Open Ended

What is the difference between your WordPress blog and your Jimdo Website?

Open Ended

List down three more WYSIWYG web hosting services and their URL?

Open Ended

What I Have Learned

1.Write an essay sharing your experience in creating and designing your website using Microsoft Word.

Open Ended

What I Can Do

Answer the following in not less than five sentences. Write your answer on the space privided.

1. In the campaign for social change activity, which platform you prefer; WordPress or Jimdo? Why?

____________________________________________

Assessment

Test I. MULTIPLE CHOICES

Direction: Read each question carefully and write the letter of the best answer.

Multiple Choice

Which of the following statements is true about WYSIWYG editor?

• It is the acronym for What You Saw Is What You Got.

• Using HTML and CSS in creating a website is easier than using WYSIWYG.

• WYSIWYG is designed for anyone who has no prior coding skills.

• All of the above

Multiple Choice

Which of the following statements is related to HTML tags?

• HTML tags are elements of document.

• It is used to specify the elements of a document.

• It defines the content of the document.

• It defines the structure of the document

Multiple Choice

Which of the following URL’s you are going to visit if you want to create an account on Jimdo?

• www.jimdo.net

• www.jimdo.com

• www.jimdo.com.ph

• www.jimdo.com.us

Multiple Choice

Which of the following things you can do on images in Jimdo?

• Jimdo allows users to upload an image directly from their computer.

• Users will be treated to more options similar to using a word processor.

• Users are directed to Photoshop.

• You can add elements such as paragraph.

Multiple Choice

Which of the following is true about a website heading?

• It is the top most label of a website.

• It is the only place in a web page where users could put a text.

• It is the only place in a web page where users could put a picture.

• It is also known as the placeholder.

Multiple Choice

Which of the following statements is true about Jimdo?

• Jimdo is a WYSIWYG web hosting service offering free and paid services.

• It has an android and iOS application that let you manage your site on mobile.

• Jimdo is easy to use.

• All of the above.

Multiple Choice

Which of the following site settings you are going to use if you want to use a ready-made design?

• Style

• Template

• Settings

• Background

Multiple Choice

Which of the following elements you are going to add if you want to insert multiple photos on one area?

• Photo

• Gallery

• Photo Gallery

• Photos

Multiple Choice

Learning Jimdo is easier than learning HTML. What do you think is the best explanation for this statement?

• Jimdo is a WYSIWYG editor.

• Learning Jimdo is easier than learning HTML because it allows users to create and design web pages without any prior coding skills.

• Learning Jimdo is easier than learning HTML because it is a user-friendly website.

• Learning Jimdo is easier than learning HTML because it provides features that would help the user navigate the page.

Multiple Choice

Which of the following site settings you are going to use if you want to change accounts and web settings?

• Template

• Settings

• SEO

• Statistics

​Additional Activities

​True or False: Click T if the statement is correct; otherwise, write F if the statement is wrong.

Multiple Choice

HTML stands for Hypertext Markup Language.

• True

• False

Multiple Choice

Jimdo’s URL is www.jimdo.net.

• True

• False

Multiple Choice

The home page is the first page of your e=website

• True

• False

Multiple Choice

Adding emails, an XML sitemap, and linking your Dropbox account are

premium features of Jimdo

• True

• False

Multiple Choice

You can include your Twitter account and link to your Jimdo Website.

• True

• False

Multiple Choice

The form element adds a space for selling an item.

• True

• False

Multiple Choice

The photo element adds multiple photos in one area.

• True

• False

Multiple Choice

CSS stands for Cascading Style Sheets.

• True

• False

Multiple Choice

The horizontal line in the Jimdo WYSIWYG editor is used as a divider.

• True

• False

Multiple Choice

You can insert YouTube videos in your Jimdo wesite.

• True

• False