You are on page 1of 32

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

1 of 32

Contents
All about Jimdo .. Getting Started .. Familiarizing the Jimdo Interface . Layout Style Settings . . . 7 10 14 15-32 2 3 7-14

Creating the Website .. Header . 15 19 23

Navigation . Elements .

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

2 of 32

All About
What is Jimdo? Jimdo offers a free website creator that anyone can use on www.jimdo.com. In just a few minutes and without any technical knowledge, anyone can create a place on the Internet complete with online store, blog, photo galleries, YouTube videos and much more. How long has Jimdo existed? Jimdo has been around since February 2007. Whos behind Jimdo? Christian Springub (28), Fridtjof Detzner (28), and Matthias Henze (33) founded a company together in 2004, where they created an online software that is now the core of Jimdo originally only for businesses. After many requests from friends and family, they came up with the idea of the free JimdoPage. Where is Jimdo located? The main office is in Hamburg, Germany, but Jimdo has also opened offices in San Francisco, Tokyo, and Shanghai. What does Jimdo mean? Jimdo is short for Jim can do it, meaning, why make it complicated when it can be easy? That has been Jimdos motto from the beginning. How many users does Jimdo have? 10 weeks after launch, Jimdo had its first 10,000 users. In April 2008, there were 100,000 JimdoPages, over 500,000 in February 2009, and today there are more than 6 million... What is Jimdo planning in the future? The mission to bring Pages to the People is never over. Jimdo has been continuing to innovate and improve its website creator. As the internet continues to grow and change, Jimdo does too but always so that regular people can use it. Jimdos three founders dream and goal is for Jimdo to set the standard for simple yet professional website creation. Where can I find out more about Jimdo? http://www.jimdo.com/about-us/

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

3 of 32

Getting Started
Before anything else, we have to create a free account at Jimdo.com. To do this we:
1. Open our available web browser (for this work instruction Im using Google Chrome)

2. Type at the URL box jimdo.com 3. Wait for the page to load, until it looks like this: See Figure 1

Figure 1 Abstracted Jimdo Homepage

4. Make an account through the text input boxes found at the top right part of Jimdos homepage. See Figure 2 5. Fill in our chosen name of website through the Pick a name for your site text input box 6. Fill in our valid email address through the Your Email Address text input box 7. Lastly, we make sure that we click on the Yes, I have reviewed the fascinating check box 8. With all of our necessary information keyed in we click on Create my free site button to finish our account sign-up
Prepared by: Reviewed by: Approved by:

Figure 2 Text Input Boxes

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

4 of 32

Getting Started

9. Completing step 8 might show a new window at Jimdo where it requires us to enter some text that it shows to us. Example of which is shown at Figure 3 10. No worries! We simply key in the text that it shows in the image that Jimdo had randomly generated for us through the Enter the two words: text input box. Failure to the get the words right in the first time is okay, simply wait for a new image to load then the repeat the same process. 11. Click on Create my free site! button again to finally complete the sign-up
Figure 3 New Window @ Jimdo

xxxxxxxxxxxx

12. Step 11 will again show a new window (See Figure 4) telling us that Jimdo Team has sent us an email containing our log-in info. 13. We then check our emails to view our message from Jimdo. The message should look like Figure 5

Figure 4 Email Window @ Jimdo

Figure 5 Email From Jimdo


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

5 of 32

Message from Jimdo should disclose our: A. Website name (Mine is named baworkinstruction) B. Website URL C. Password D. Go to your new website button

Getting Started

B C
xxxxxxxxxxx

Figure 5 Email From Jimdo

14. We then click on Go to your new website button 15. This would open up a new window. New window should essentially disclose to us our default jimdo homepage as seen in Figure 6

Figure 6 Abstracted Default Jimdo Homepage


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

6 of 32

Getting Started

16. At our default webpage is our login link as seen in Figure 7. We click on that link so that we can formally get started.

Figure 7 Login Link

17. Clicking on this link should spawn a new window as seen in Figure 8. In this new window, we ought to type in our password at the Your Password: text input box (Password to be typed here is the one that Jimdo automatically generated for us. It can be found in the email that we received from Jimdo)

Figure 8 New Window for Password

18. We then click on the Login button. This redirects us to our website editor as seen in Figure 9. The next section discusses the new interface that we can find here.

Figure 9 Website Editor Interface

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

7 of 32

Familiarizing the Jimdo Interface


Seen in Figure 10 is the menu found on the extreme right of the website editor page (as found in Figure 9) Basics of Layout, Style and Settings will be discussed later. The Blog icon is accessed to create, edit and manage blog posts . The Upgrade icon is accessed if we want to make upgrades to the free account that we have originally signed-up for. The Statistics icon is accessed to learn of our website traffic and related statistics but since this feature is strictly for JimdoPro and JimdoBusiness accounts only we will be not be granting it with any further discussion. The Help icon is accessed to get tips and tutorials from the Jimdo Team
Layout Style Blog Upgrade Settings Statistics Help Figure 10 Menu

Layout

The Layout icon is accessed for us to change the layout settings to suit our preferences. Clicking on this icon produces Figure 11 as a new side-menu. Found here are the FREE, JIMDOPRO, JIMDOBUSINESS, CUSTOM, SPECIAL and SETTNGS tabs.

Figure 11 Layout Side-Menu

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

8 of 32

Familiarizing the Jimdo Interface: Layout

The FREE Tab as shown in Figure 12 discloses all the available/free layouts that we can use including with them are their relative layout details. Layout details would then tell of our chosen layouts customizable components such as fonts, header height, background, alignment and colors. Boxed below is the link to access layout details.

Figure 12 FREE Tab and Boxed Link for Layout Details

Preview of layout details is found below (Figure 13)

Figure 13 Sample Layout Details

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

9 of 32

To choose a layout we can either:

Familiarizing the Jimdo Interface: Layout

(1) Click on the thumbnails as shown in Figure 14. Highlighted thumbnail=layout selected OR (2) Click on Layout Details and then do the same as well for the Choose Layout button which appears only after clicking the Layout Details link. Choose Layout Button is boxed in Figure 15.

Figure 14 Highlighted Thumbnail

Figure 15 Choose Layout Button

After Selecting a layout, (For simplicitys sake I have not changed Jimdos default layout) Jimdo will ask if us if we would like to accept the new layout. This notice is found at the top most section of our website editor page as shown in Figure 16.

Figure 16 Notice Concerning the Change in Layout

Selecting the Yes button formally changes the layout. We can then click on No or back buttons if we are not satisfied with the layout chosen. Selecting the No button will then revert us back to our old layout. Selecting the back button will then bring us back to the Layout side -menu for us to choose another layout. From here, the same steps of selecting a layout as discussed earlier are applied and applied until we are satisfied with our layout.

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

10 of 32

Similarly

Familiarizing the Jimdo Interface: Style

JIMDOPRO and JIMDOBUSINESS Tabs shows all the exclusive layouts for the upgraded users. CUSTOM Tab allows advanced users to edit the layout extensively using their knowledge of CSS styles and such. SPECIAL Tabs shows all the available themed layouts to choose from.

Style
The Style icon is accessed if we want to change our websites font settings background settings and basically all the color schemes involved in our website. See Figure 17 to see all the tabs found in the Style side -menu.

Figure 17 Tabs of the Style Side Menu

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

11 of 32

The FONT SETTINGS tab shows some Jimdo-generated font settings to choose from. These include settings for the common body text, various levels of heading, link colors and as well as horizontal line settings. See Figure 18 to learn of all the customizable options available in the FONT SETTINGS Tab. All of these can be changed to suit our preferences but for simplicitys sake, I chose not to alter any of the default settings.

Familiarizing the Jimdo Interface: Style

Figure 18 Customizable-s found at the FONT SETTINGS Tab. From left to right: text settings, heading settings, link colors, horizontal line styles and colors

Found at the left is the instant preview of the heading. See Figure 19 for easy reference

Figure 19 Instant Preview of Changed Options


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

12 of 32

Familiarizing the Jimdo Interface: Style

The COLOR SCHEMES tab shows all the available color schemes to choose from. We select by allowing our pointer to hover over our chosen color scheme ( as boxed in Figure 20) and, then ultimately clicking it. For this instruction Im satisfied with my default color scheme hence, I need not change it.

Figure 20 Selecting a Color Scheme


The CUSTOM COLOR tab shows all the hexadecimal equivalents of all the colors available. This allows us to put more personality in our website but for simplicitys sake we need not change this. See Figure 21 to learn of CUSTOM COLOR Tab

Figure 21 CUSTOM COLOR Tab


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

13 of 32

The BACKGROUND PATTERN tab shows all background patterns that we can use for our site. Located at the left is another extensive color palette (as boxed red in Figure 22). For the purpose of this instruction we change it to the (second pattern as boxed green in Figure 22). We click on such pattern to change the background to that. Doing so will lead to a new confirmation window as seen in Figure 23

Familiarizing the Jimdo Interface: Style

Figure 22 BACKGROUND PATTERN Tab

Figure 23 Background Confirmation Window

Selecting the Yes button will confirm the selection; selecting the No button will bring us back to our original background pattern; selecting back button will bring us back to the BACKGROUND PATTERN Tab. This is done for us to choose a new background pattern BACKGROUND IMAGE Tab lets us choose a background image for our website, again since this is limited to upgraded users, further discussion of such will not be given in this instruction. CUSTOM BACKGROUND Tab lets us use a background image uploaded from our own computers/laptops/etc. Relevant settings are also found here. BLOG STYLES Tab allows us to change all relevant customizable blog stylization.
Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

14 of 32

Familiarizing the Jimdo Interface: Settings

Settings
The Settings Icon is accessed to view and change any relevant settings of our website. We are all free to explore the settings found here but for simplicitys sake, we will only discuss the process of changing our Jimdo-generated password Boxed at Figure 24 the Password button, we select this button to start changing our password and doing so will show a new window (as seen in Figure 25)

Figure 24 Settings Side-Menu

Figure 25 New Window in Changing Password

In this new window we key in our old passwordthe one generated by Jimdo earlier in the Old Password: input text box. New password is typed and re typed for both the New password: and Repeat your entry: input text bo xes. After which we click on save. Now we have completely changed our password!
Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

15 of 32

Creating the Website


Our approach in creating the website is divided into three major sections which are the Header, Navigation and Elements sections respectively. We start with the Header section below.

Header
The Header is that part of the website located in the extreme top that remains constant throughout the entire navigation of the site. Usually this discloses the name of the site. See Figure 26 to learn more of the default Header provided by Jimdo.

Figure 26 Default Jimdo Header

Boxed in Figure 26 is the Edit Header pop-up which then appears as we hover over the header section. We click on that to edit Header through the pop-up Header menu as seen in Figure 27.

Figure 27 Pop-up Header Menu


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

16 of 32

Creating the Website: Header

Photo Gallery Tab shows Jimdos very own public library of all the available images that we can use for our header. See Figure 28 to view this library. We simply click on our preferred image to set it as our header image. Also boxed in Figure 28 is the image that we will be using in this instruction.

Figure 28 Photo Gallery Tab

Custom Photo Tab allows us to upload our own image that we wish to use as our header image. See Figure 29 to view the Custom Photo Tab.

Figure 29 Custom Photo Tab

Pattern Tab allows us to put a pattern (that is re-colorable) in place of a header image. Recoloring can be done through the extensive color palette found at the right (See boxed section in Figure 30). We stick with our image selected before; we do not select a pattern here.

Figure 30 Pattern Tab


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

17 of 32

Adjust Header Tab allows us to adjust our header height, zoom our header image, as well as, move our image horizontally and vertically, through sliders as seen in Figure 31. For this instruction we set our header height to 400 px. We also move our image vertically to 180 px. After making these adjustments we click on Save changes to formally save the changes that we have just made to our header.

Creating the Website: Header

Figure 30 Adjust Header Tab

Title Tab allows us to edit the title of our header. We can do this so by changing the name of the title itself, the font style used (as well as font size and color) and finally the position of the text itself. See Figure 31 to view the Title tab

Dropdown box used to change font styles Sliders used to change font size Input text box to change header title Sliders used to change horizontal and vertical positioning of header title

Extensive color palette that used to change color of header title

Figure 31 Title Tab


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

18 of 32

Creating the Website: Header

For this instruction we set the font style to Trebuchet MS, font size to 85 px, header title to buildings., font color to FFFFFF, horizontal position and vertical position to: 2% and 72% respectively. By making these adjustments we should end with something like the one on Figure 32.

Figure 32 Edited Header

The final tab is the Logo tab which then allows us to upload our own logo for the site. This is again a section that is limited to upgraded users; hence we omit any further discussion about this tab. This completes our discussion about the heading section. Up-next is the Navigation section

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

19 of 32

Navigation
Navigation is for simply put the settings we use with which we navigate around our website. This usually discloses the navigable menus and submenus of our website. To edit Navigation we follow the steps below. (1) Navigation can be edited through the Edit Navigation button. This pop-up button appears as we hover over our menu section. Boxed in Figure 33 is the said menu section. *Jimdos default menu section includes Home as a page.

Figure 33 Menu Section

(2) Boxed in Figure 34 the pop-up Edit navigation button. We click on that to access a new window with which we can formally edit our sites navigation

Figure 34 Edit navigation button


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

20 of 32

Creating the Website: Navigation

(3) The new window mentioned in step 2 is found in Figure 35. It is through this window that we can add new pages to our site.

Discloses the page title

Button used to hide pages from the menu Buttons used to add new pages to the menu

Button used to erase pages from the menu

Figure 35 New Window for Editing Navigation

For this instruction we will use only three menus. These are Home, Services and About respectively. Submenus are Past Projects Setting Up My Plan. Essentially these are submenus of Services menu. (4) We click on Add a new page button (as seen from Figure 35) to add new pages. We then edit the page title to Services by clicking the input text box generated from adding the new page earlier. We do this one more time to create the About page. We should now end up with something like Figure 36.

Figure 36 New Pages as Edited


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

21 of 32

Boxed in Figure 37 are new icons that can be used to further edit navigation. Also disclosed in Figure 37 are the purposes of the new icons.
Changes the sequence of the pages specifically to move it up

Creating the Website: Navigation

Changes the sequence of the pages specifically to move it down

Used to create submenus for a menu

Figure 37 New Icons

(5) To add submenus to Services page we add new pages once again. In this instruction, these are Past Projects and Setting Up My Plan respectively. We then click the right arrow icons collinear to each supposedly submenus. We should now end up with something like Figure 38

Figure 38 Submenus

(6) We then ultimately click the save button (as boxed in Figure 38) to reflect all the changes.

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

22 of 32

Creating the Website: Navigation

All the changes to the navigation should be now reflected as seen in Figure 39
Edited Menu

View link

Figure 39 The Changed Menu

Clicking on the View link as boxed in Figure 39 will let us open up our site in the view mode where it is not editable. This mode necessarily omits any editing options. In general this is how outsiders view our site. See Figure 40 to see the view mode of our site.

Figure 40 View Mode

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

23 of 32

Elements
The elements make up primarily the content of our site. Might it be pictures, texts, videos and such, these are all covered by the elements section. A VERY IMPORTANT NOTE: *This instruction will not teach you on how to produce the content itself. This instruction will instead discuss on how to put the content. Content production is beyond the objectives of this instruction.

Adding an element: (1) To add an element, we first select a page (the page that we wish to add elements on) from the pages that we have created in the navigation section. For this instruction, we use the Home Page There is one default element that was created beforehand by Jimdo for us and it is the Heading element (as boxed in Figure 41)

Figure 41 Default Heading Element

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

24 of 32

Creating the Website: Elements

Placing our mouse over the default heading element shows Figure 42 to us

Button used to delete an element

Used to drag an element to a desired location Button used to add an element

Button used to copy an element

Figure 42 Showing Element Options

(2) Shown in Figure 42 above is the button used to add an element. We click on this to show all the available elements that can be added. In the next page is Figure 43. This figure discusses the elements that we will be using in this instruction.

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

25 of 32

Creating the Website: Elements

Used to add spaces between elements Used to add headings/titles to our paragraphs

Used to add photos to our page

Used to make a slideshow/creative presentation of our photos

Used to add text as content Used to construct our contents into columns

Used to add a horizontal line

Used to introduce widgets to our page

Used to add videos to our page

Used to introduce GoogleMaps to our page

Figure 43 Discussion of Elements

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

26 of 32

Creating the Website: Elements

All other elements are necessarily omitted because they are either not regularly used or are rather complex for this instruction (3) From the new window found on Figure 42, we click on the element that we want to use. So for example in this instruction lets add the Text element. See Figure 43 below for easy reference

Figure 43 Text Element Editor

Essentially for every element there is a unique editor. This demands various settings from us and its job is to process such to make the element for us. Since we have chosen the Text element, we are simply demanded of font settings which we do alter and change according to our preferences. (4) Having chosen the Text element, we simply type the sentences that we want to place here but for this instruction we are going to use the sentence: The quick brown fox jumps over the lazy dog five times in creating our paragraph. We also give it a center alignment and by hitting on the Save button we should now end up with something like the one boxed in Figure 44.

Figure 43 Edited Text Element


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

27 of 32

Adding an element (whatever element it is) will always start from steps 1 and 2 which were both discussed earlier. Steps 3 and 4 are element dependent but in the severest abstraction, step 3 is mainly concerned with demanding settings from us (these are to be reflected on the element to be created) and step 4 on the other hand will always end up with clicking on the Save button. To demonstrate more about the elements, we will try to use more of them in a single page. Shown below are the steps that we do to accomplish that. (1) From where we left of, there would have been two elements found in our Home page by now. (These are the default Heading element and the new Text element that we have just added earlier). We create a new element once again through the Add new element button, and we select on the Spacing element. This should show the Spacing element editor as seen in Figure 44.

Creating the Website: Elements

Used to set the size of the space element

Figure 44 Spacing Element Editor

(2) Also boxed in Figure 44 is the size setting of the Spacing element. In this instruction, we set this to 150. We then hit the save button and we should have what now looks like Figure 45.

Figure 45 Edited Spacing Element


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

28 of 32

Creating the Website: Elements

(3) We then add the Horizontal Line element by using the same steps in adding any element. This should let us create a horizontal line without changing any settings because Jimdo only allows customization of this element the Styes icon, which was discussed in the earliest part of this instruction, nevertheless adding a Horizontal Line element should give us Figure 46. *Horizontal line is now found at the bottom!

Figure 46 Page with the Horizontal Line

(4) We then add a Column element by using the same steps in adding any element. In the Column element editor (as seen in Figure 47), we will find two new add new element buttons. *Default Jimdo columns are set to two.

Button used to erase columns Button used to add new columns Button used to add content to columns

Figure 47 Column Element Editor

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

29 of 32

(5) We introduce our first content to our column through the Add New Element button found at the left. We then add a Photo element. See Figure 48 to learn of the Photo element editor.
Used to introduce alignment to our photo

Creating the Website: Elements

Used to resize our photo

Used to introduce rotation to our photo

Used to add caption to our photo

Used to upload the photo that we want to use

Figure 48 Photo Element Editor

(6) It is through the Choose File button found on Figure 48 that we can upload the photo that we want to use, hence we click on that. After uploading we set the following settings for our photo, alignment center and subtitle a photo. After which we ultimately click on save. We should now have the one shown in Figure 49.
Figure 49 Edited Photo Element

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

30 of 32

Creating the Website: Elements

(7) Finally we add a new element for the second column through the remaining Add new element button. For this instruction we add another Text element. We may use any paragraph to use a as body of this element but this instruction will once again use the The quick brown fox jumps over the lazy fence over and over until it assumes a paragraph. Text element is then set to a justified alignment and by clicking save button we should now end up with something like Figure 50

Figure 50 Column with Edited Text Element

(8) Since the text on the right column looks a bit misplaced, we introduce another element such as the Heading element to give it some direction. We add the Heading element by using the same steps as always. Boxed in Figure 51 to the Heading element editor.
Figure 51 Heading Element Editor

Prepared by:

Reviewed by:

Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

31 of 32

Creating the Website: Elements

Seen in Figure 52 is a closed-up Heading Element Editor


Used to move an element up or down in the sequence. These icons can only be accessed if there are more than one elements in succession Input Textbox for changing the header name Heading settings (font color, size and such). Only customizable through the Styles icon

Figure 52 Closed-up Heading Element Editor

(9) Using Figure 52 as reference, we change the heading name to A Photo Description, heading settings to Heading 2. We also move the element one step up through the up arrow (also seen from Figure 52). (10) By ultimately clicking on save button we should now have what looks like Figure 53

Figure 53 Perfectly Edited Column Element


Prepared by: Reviewed by: Approved by:

Application Software

Submitted by :

JIMDO.com
Activity

Alyssa Noelle T. Martinez Page Date Submitted Oct 5, 2012

e.g., Creating Our First Website

32 of 32

Creating the Website: Elements

(11) To reflect all changes in the Column element that we just made, we click on the Save button (as boxed in Figure 53). Doing so will give us Figure 54.

Figure 54 Completely Edited Home Page

Jimdos interface is very user friendly. By doing the steps just mentioned above, we can already get accustomed to how elements are placed, edited and saved. Further editing of the pages can also be easily facilitated because what these pages lack are just mere elements, therefore element discussion ends here.

Prepared by:

Reviewed by:

Approved by: