Top Banner
Programming & Development Tools Introduction to Programming UNIT 1.3 Introduction to Programming Process and Information Layout OBJECTIVES This unit explains about various information layouts. At the end of this unit, you will be able to Create documents using text and information layout Create workbooks using data information layout Create simple presentations using presentation layout Publish the documents, workbooks and presentation as web pages Benchmark Standard Create and publish documents, workbooks and presentations as web pages. Create interactive web pages and presentations and execute them successfully. Process and Information Layout 1.3-1
114

1.3 Process and Information Layout

May 19, 2015

Download

Education

Intan Jameel

1.3 Process and Information Layout
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

UNIT

1.3

Introduction to Programming Process and Information Layout

OBJECTIVES

This unit explains about various information layouts.

At the end of this unit, you will be able to

Create documents using text and information layout Create workbooks using data information layout Create simple presentations using presentation layout Publish the documents, workbooks and presentation as web

pages

Benchmark Standard Create and publish documents, workbooks and presentations as

web pages. Create interactive web pages and presentations and execute them

successfully.

Process and Information Layout 1.3-1

Page 2: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Let us Revise!

1. List any four tags used in Microsoft Script Editor.

2. Body tag specifies the ___________ and _______ of the document.

3. ___________ tag is used for creating paragraphs.

Introduction Microsoft Office XP is a feature-rich, office productivity suite developed by Microsoft Corporation. It provides a family of programs or applications that help in performing almost all the basic tasks in a working environment, effectively and efficiently. The applications in the Office suite include powerful tools and user-friendly interface that enables you to create professional-looking documents, manipulate data, develop eye-catching presentations, maintain databases etc. In this unit you will learn about various office applications such as Word, Excel and PowerPoint.

1.3.1 Word Information Layout Definition: Word information layout helps in creating documents.

1.3.1 (A) Introduction to Word Processor Word processor is an application that enables the user to create documents that contain text and pictures. There are many word processors available in market which includes Microsoft Word, Star Office and WordPerfect.

Microsoft Word is one of the most widely used word processor application. It is a product of Microsoft Office. It provides user with the tools that enable to write, edit and format text and pictures. You can create notes, memos, letters, business documents, books and web pages.

1.3.1 (B) Text and Image Information You know that word processors are used to create documents. It is important to create documents that are attractive. For this purpose you will have to change the way the document appears and insert images along with the text.

Formatting Text Formatting refers to changing the appearance of the text in the document. You can enhance the appearance of the document by aligning the text, changing the colour, size and style of the text in the document. To format any text, select the text, choose Format and the respective formatting option as shown in the Figure 1.3.1.

Process and Information Layout 1.3-2

Page 3: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.1: Format Menu

Hands-On!

Perform the following steps to format a document:

1. Open the document Malaysia.doc. Figure 1.3.2 shows the document window.

Figure 1.3.2: Document Window

Process and Information Layout 1.3-3

Page 4: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

2. Open the Microsoft Script Editor and observe that the text appears within the paragraph tags. Figure 1.3.3 shows the script editor.

Figure 1.3.3: Microsoft Script Editor 3. Select the text in the document and apply Arial font. Figure 1.3.4

shows the document window after changing the font.

Figure 1.3.4: Document Window after Changing the Font

Process and Information Layout 1.3-4

Page 5: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

4. In the script editor, shown in Figure 1.3.5, you will notice that a new style namely font-family is added in the code. This will change the font of the text.

Figure 1.3.5: Script Editor Before and after Changing the Font

5. To apply bold format to the title, select the title and apply bold formatting. Figure 1.3.6 shows the document window after applying bold formatting.

Process and Information Layout 1.3-5

Page 6: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.6: Document Window After Applying Bold Formatting

6. In Figure 1.3.7, you notice that a new tag <b> has been added in the code. This will make the text appear bold.

Process and Information Layout 1.3-6

Page 7: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.7: Script Editor Before and After Applying Bold Formatting

7. To change the font size of the title, select the title and change the font size to 18. Figure 1.3.8 shows the document window after changing the font size.

Process and Information Layout 1.3-7

Page 8: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.8: Document Window After Changing the Font Size

8. In Figure 1.3.9, you notice that a new style font-size added to the code. This will change the font size.

Figure 1.3.9: Script Editor Before and After Changing the Font Size

Process and Information Layout 1.3-8

Page 9: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

9. To align the title to centre, select the title and click on Center button ( ) on the Formatting toolbar.

10. Document will appear as shown in Figure 1.3.10.

Figure 1.3.10: Document Window After Aligning the Title to Centre

11. In Figure 1.3.11, notice that a new style text-align added to the code to align the title to the centre.

Process and Information Layout 1.3-9

Page 10: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.11: Script Editor Before and After Applying Center Align

12. To raise a text above the base line and make the font appear small is called superscript. To apply this option, select the text as shown in Figure 1.3.12.

Process and Information Layout 1.3-10

Page 11: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.12: Selecting the Text to Apply Superscript Effect

13. Choose Format Font and check the Superscript check box in the Effects section. Document appears as shown in Figure 1.3.13.

Figure 1.3.13: Document Window After Applying Superscript Effect

14. In Figure 1.3.14, notice that a new tag <sup>…</sup> added to the code. This tag enables to added superscript effect to the text.

Process and Information Layout 1.3-11

Page 12: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.14: Script Editor Before and After Applying Superscript Effect

15. Save and close the document.

Tip

To switch between document window and script editor, you can use key combination of Alt+Tab.

Note Whenever you make changes in the document, click on Refresh button to see the change in code.

Process and Information Layout 1.3-12

Page 13: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Perform the following steps and identify the change in code in the script editor.

Step 1: Open a new document.

Step 2: Open the script editor and observe the code.

Step 3: Type your name in the document window.

Step 4: Identify the change in code in the script editor.

Step 5: Change the font to Arial and identify the change in code.

Activity 1.3.1 (a)

Activity 1.3.1 (b)

Perform the following steps and identify the change in code in the script editor.

Step 1: Open a new document.

Step 2: Open the script editor and observe the code.

Step 3: Type the text Fall seven times, stand up eight in the document window.

Step 4: Identify the change in code in the script editor.

Step 5: Change the font size to 20 and the colour to red.

Step 6: Identify the change in code.

Activity 1.3.1 (c)

Perform the following steps and identify the change in code in the script editor.

Step 1: Open a new document.

Step 2: Open the script editor and observe the code.

Step 3: Type the text log10 in the document window.

Step 4: Identify the change in code in the script editor.

Step 5: Select the text 10 and apply subscript effect to it.

Step 6: Identify the change in the document and the code.

Process and Information Layout 1.3-13

Page 14: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Lab Exercise

Lab Exercise 1: Open a blank document. Type the following text and save the document with the name Text.doc.

Life is wonderful Identify the change on source code.

Lab Exercise 2: Open the file Text.doc. Underline the text and save the document. Identify the change in source code.

Inserting Images To enhance the document, you can insert objects such as shapes, pictures, and charts. This will make the document more impressive and more attractive. Images come in various formats such as .jpg and .bmp.

Table 1.3.1 describes the difference between .jpg and .bmp files:

The .jpg Files The .bmp Files Joint Photographic Experts

Group Bitmap

Resolution will be low and hence file size is less

Resolution will be high and hence file size is more

Used in Web Used in Windows environment

Table 1.3.1: Difference Between .jpg and .bmp Files

Inserting ClipArt Definition: Clipart is a collection of images that can be inserted into the document.

There are many ways through which you can insert ClipArt into a document. The easiest way is to use the menu bar.

Hands-On!

Perform the following steps to insert ClipArt:

1. Open the document Malaysia.doc.

2. Open the Microsoft Script Editor.

Process and Information Layout 1.3-14

Page 15: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. Switch to the document and choose Insert Picture ClipArt. (Refer Figure 1.3.15). Insert Clip Art task pane is displayed (Refer Figure 1.3.16).

Figure 1.3.15: Inserting ClipArt

Figure 1.3.16: Insert ClipArt Task Pane

4. In the Search text text box, type the file name or the description of the clip you want to insert.

Process and Information Layout 1.3-15

Page 16: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

5. For example, you want to insert the picture of a phone to be inserted into the document, on the Search text box, type the text globe.

7. re you

6. Click on the Search button.

From the Results box (Refer Figure 1.3.17) click on the pictuwant to insert.

Figure 1.3.17: Result Box

8. Figure 1.3.18 show r inserting the ClipArt.

s the document window afte

Process and Information Layout 1.3-16

Page 17: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.18: Document Window After Inserting the ClipArt

9. In Figure 1.3.19, notice that a new tag <img> is added in the code. This tag is used for inserting the image into the document. You will also notice that the description of the image is given in the XML code (green colour above the tag).

Process and Information Layout 1.3-17

Page 18: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.19: Script Editor After Inserting ClipArt

10. Save and close the document.

To modify the search or to start a new search, below the Result box, click on the Modify button.

You can use Clip Organizer in the Insert Clip Art task pane, to view and organise all the clips.

Note

Tip

Note Generally Clip Art will have the extension .wmf.

Process and Information Layout 1.3-18

Page 19: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Inserting Picture from File Use menu bar to insert a picture into the document.

Hands-On!

Perform the following steps to insert picture:

1. Open the document Malaysia.doc.

2. Click at the end of the paragraph and press Enter. 3. Open the Microsoft Script Editor.

4. Switch to the document and choose Insert Picture From FiIe. (Refer Figure 1.3.20). Insert Picture dialog box appears as shown in Figure 1.3.21.

Figure 1.3.20: Inserting a Picture From File

Process and Information Layout 1.3-19

Page 20: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.21: Insert Picture Dialog Box

5. From the Look in drop-down list, choose the location where the picture is present.

6. Left click on the picture with the name Map.

7. Click on the Insert button.

8. Figure 1.3.22 shows the document window after inserting the picture.

Process and Information Layout 1.3-20

Page 21: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.22: Document Window After Inserting the Picture

9. In the script editor, the code changes as shown in the Figure 1.3.23.

Process and Information Layout 1.3-21

Page 22: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.23: Script Editor After Inserting the Picture

10. Save and close the document.

Activity 1.3.2 (a)

Perform the following steps and identify the change in code in the script editor.

Step 1: Open a new document.

Step 2: Open the script editor and observe the code.

Step 3: Switch to the document and choose Insert Picture ClipArt. Step 4: In the Search text box, type the text phone and click on the Search

button.

Step 5: From the Results box click on the picture you want to insert.

Step 6: Identify the change in the document and the code.

Activity 1.3.2 (b)

Perform the following steps and identify the change in code in the script editor.

Step 1: Open a new document.

Step 2: Open the script editor and observe the code.

Step 3: Switch to the document and choose Insert Picture From FiIe.

Process and Information Layout 1.3-22

Page 23: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Step 4: Choose the picture data file Building.

Step 6: Click on the Insert button.

Step 7: Identify the change in the document and the code.

Lab Exercise

Lab Exercise 3: Open the blank document. Insert any clipart of your choice and identify the change in source code.

Lab Exercise 4: Open the blank document. Insert the picture data file Building. Identify the change in source code.

Drawing Objects Word allows you to draw objects such as circle, square and line. To draw an object you must use the drawing toolbar.

Hands-On!

Perform the following steps to draw objects:

1. Open a new document.

2. To view the drawing toolbar, choose View Toolbars Drawing. Drawing toolbar appears as shown in Figure 1.3.24. Table 1.3.2 lists the commonly used drawing tools.

Figure 1.3.24: Drawing Toolbar

Button Description

Used for drawing line.

Used for drawing arrow.

Used for drawing rectangle.

Used for drawing oval.

Used for drawing text box.

Table 1.3.2: Commonly Used Drawing Tools

Process and Information Layout 1.3-23

Page 24: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. To draw a rectangle, choose click on the rectangle button. Drawing

canvas will appear.

4. Draw a rectangle. Document appears as shown in Figure 1.3.25.

Figure 1.3.25: Document Window After Drawing the Rectangle

5. Similarly, draw a line and two circles as shown in Figure 1.3.26.

Process and Information Layout 1.3-24

Page 25: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.26: Document Window After Drawing a Line and Circles

6. Now choose the text button and click within the circles and write the text Beaches and Hill Stations as shown in Figure 1.3.27.

Figure 1.3.27: Document Window Typing the Text

Process and Information Layout 1.3-25

Page 26: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

7. Save the document with the name Choice.doc.

8. Close the document.

Activity 1.3.3

Open the data file Choice.doc and observe the source code that appears in the script window.

Inserting a File into Another File It is possible to insert a file into another file in Word.

Hands-On!

Perform the following steps to insert a file into another file:

1. Open the document Malaysia.doc.

2. Place the insertion point at the end of the document and press Enter. 3. To insert from another file, choose Insert File as shown in Figure

1.3.28. Insert File dialog box appears as shown in Figure 1.3.29.

Figure 1.3.28: Inserting from File

Process and Information Layout 1.3-26

Page 27: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.29: Insert File Dialog Box

4. Choose the file Choice.doc and click on Insert button. File is inserted as

shown in the Figure 1.3.30.

Figure 1.3.30: Document Window After Inserting the File

Process and Information Layout 1.3-27

Page 28: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

5. Save and close the document.

Activity 1.3.4

Open the file Malaysia.doc and identify the change in source code after inserting a file into it.

1.3.1 (C) Single Document Information Layout It is possible to divide a document into number of columns. The documents you have created so far had single column. You will now learn to divide a document into two columns.

Hands-On!

Perform the following steps to divide the document into two columns:

1. Open the document Beaches.doc.

2. Go to page 2.

3. To divide the column into two, choose Format Columns. Columns dialog box appears as shown in Figure 1.3.31.

Figure 1.3.31: Columns Dialog Box

4. Choose Two column format from the Presets section and This point forward from the Apply To drop-down list. Click on OK button. This

Process and Information Layout 1.3-28

Page 29: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

will apply two column format starting from page 2. Document will appear as shown in Figure 1.3.32.

Figure 1.3.32: Document Window with Two Columns

5. Initially the document had two sections (two pages). When the document is divided two columns, you will notice that a new section is added in the code as shown in Figure 1.3.33.

Process and Information Layout 1.3-29

Page 30: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.33: Script Window After Dividing the Document into Two Columns

Activity 1.3.5

Perform the following steps:

Step 1: Open a blank document.

Step 2: Divide the document into four columns and identify the change in source code.

Changing the Picture Layout When you insert an image into a document, the image remains in line with the text. In other words, it lies in the same layer as that of a text. By changing the picture layout you can move the picture to the desired position in the document.

Hands-On!

Perform the following steps to change the layout of the inserted image:

1. Open the document Malaysia.doc.

2. Select the Globe image.

Process and Information Layout 1.3-30

Page 31: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. Choose Format Picture. Format Picture dialog box appears as shown in Figure 1.3.34.

Figure 1.3.34: Format Picture Dialog Box

4. Select the Layout tab as shown in Figure 1.3.35.

Figure 1.3.35: Layout Tab

Process and Information Layout 1.3-31

Page 32: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

5. Choose Tight from the Wrapping Style and click on Ok button. 6. Move the picture as shown in Figure 1.3.36. The text will automatically

adjust as you move the picture.

Figure 1.3.36: Document Window After Formatting the Picture

7. Open the source code and identify the change.

Inserting Bookmark Definition: Bookmark is used for marking a particular location in a document. When working in long documents, you might find it difficult to find a particular section in the document. Bookmark helps in searching the location easily.

Hands-On!

Perform the following steps to insert bookmark:

1. Open the document Beaches.doc.

2. Click on the title Teluk Chempedak.

Process and Information Layout 1.3-32

Page 33: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. To insert the bookmark, choose Insert Bookmark as shown in Figure 1.3.37. Bookmark dialog box appears as shown in Figure 1.3.38.

Figure 1.3.37: Inserting Bookmark

Figure 1.3.38: Bookmark Dialog Box

4. In the Bookmark name text box, give the name as Teluk. 5. Click on Add button. 6. In Figure 1.3.39, notice that a new tag <a> will be added to the code.

This is an anchor element that helps in adding hyperlink to an object.

Process and Information Layout 1.3-33

Page 34: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.39: Script Editor After Adding the Bookmark

7. Similarly add a bookmark to the topic Chendor Beach with the name Chendor and identify the change in the code.

8. Now move to the beginning of the document.

9. To move to the location Teluk Chempedak, choose Edit Goto. Find and Replace dialog box appears as shown in Figure 1.3.40.

Figure 1.3.40: Find and Replace Dialog Box

Process and Information Layout 1.3-34

Page 35: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

10. From the Go to what list box, choose Bookmark as shown in Figure 1.3.41.

Figure 1.3.41: Choosing Bookmark

11. From the Enter bookmark name list box, select Teluk and click on Go To button. The cursor automatically moves to the specified location.

12. Save and close the document.

Shortcut key to invoke Go To dialog box is Ctrl+G.

Tip

Inserting Hyperlink Definition: Hyperlink is an element that links one object to another either in the same document or across documents.

Hands-On!

Perform the following steps to create a hyperlink within a document:

1. Open the document Beaches.doc.

2. On the first page select the text Teluk Chempedak.

3. To insert the hyperlink, choose Insert Hyperlink. Insert Hyperlink dialog box appears as shown in Figure 1.3.42.

Process and Information Layout 1.3-35

Page 36: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.42: Insert Hyperlink Dialog Box

4. From the Link to section, choose Place in This Document option.

5. From the Bookmark section (refer Figure 1.3.43), choose Teluk and click on OK button.

Figure 1.3.43: Choosing Bookmark

6. Similarly, for Chendor Beach choose Chendor.

7. Holding the control key click on Teluk Chempedak. Notice that the cursor automatically moves to the specified location.

Process and Information Layout 1.3-36

Page 37: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

8. In Figure 1.3.44, notice that the anchor tag has been added to the code to create the hyperlink.

Figure 1.3.44: Script Editor After Inserting Hyperlink

9. Save and close the document.

Tip

Shortcut key to invoke Insert Hyperlink dialog box is Ctrl+K.

Lab Exercise

Lab Exercise 5: Open the data file Hill Stations.doc. Starting from page two convert the document into two column format. Save the document as Hill Stations1.doc.

Lab Exercise 6: Open the file Hill Stations1.doc. Create hyperlink for the corresponding hill stations and identify the change in code.

Process and Information Layout 1.3-37

Page 38: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

1.3.1 (D) Multiple Documents Information Layout You are familiar with creating hyperlinks with a document. You will now learn to create hyperlink across documents.

Hands-On!

Perform the following steps to create hyperlink across documents:

1. Open the document Malaysia.doc.

2. Select the text Beaches present within the text box.

3. Open the Insert Hyperlink dialog box.

4. Select the location of the file from Look in text box.

5. Select the file Beaches.doc and click on OK button.

6. Holding the control key click on the text Beaches. Notice that the file Beaches.doc opens.

7. Save and close the file.

Activity 1.3.6

Open the data file Beaches.doc and identify the changes in code that have occurred.

Hands-On!

Perform the following steps to create hyperlink to open another application:

1. Open the document Malaysia.doc.

2. Click on the globe picture.

3. Open the Insert Hyperlink dialog box.

4. Select the application mspaint present in the location c:\windows\system32\mspaint.exe and click on OK button.

5. Holding the control key click on the picture. Notice that the mspaint application opens.

6. Figure 1.3.45 shows the script editor window.

Process and Information Layout 1.3-38

Page 39: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.45: Script Editor After Inserting Hyperlink

7. Save and close the application.

1.3.1 (E) Publishing the Document as Web Page Now that you have created a document, you can convert this document into HTML format and publish the document on web.

Hands-On!

Perform the following steps to publish the document as web page:

1. Open the file Malaysia.doc.

2. Choose File Save as Web Page. Save the file. This file will have the file extension as .html.

3. Close the application

4. Go to the location of the file and open the file. The file will open on the browser as shown in Figure 1.3.46.

Process and Information Layout 1.3-39

Page 40: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.46: Document Published as Web Page

5. To view the source code, choose View Source (in the browser). The source code will be displayed in a notepad as shown in Figure 1.3.47.

Process and Information Layout 1.3-40

Page 41: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.47: Source Code

Self-Check Exercise 1.3.1

1. Identify the purpose of the following tags: a. <b> b. <img> c. <a>

2. How do you align a text to the centre of the line? 3. List any two formats of image file. 4. To raise a text above the base line and make the font appear small is called

__________. 5. It is possible to insert only ClipArt images in a document (T/F). 6. How will you link two documents?

Process and Information Layout 1.3-41

Page 42: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

1.3.2 Data Information Layout Definition: Data information layout in creating spreadsheets.

Spreadsheet is an application that has rows and columns, which contain text, numbers and formulas. There are many spreadsheet applications that are available which includes Microsoft Excel, Lotus 1-2-3 and Quattro.

Microsoft Excel is one of the most widely used spreadsheet application. It provides various tools to perform calculations, analysis and other related operations.

1.3.2 (A) Spreadsheet Basics When you open Microsoft Excel, the application window appears as shown in Figure 1.3.48.

Row Scroll Buttons Worksheet Tabs ColumnCell

Active Cell Formula Box Cell Number Box

Figure 1.3.48: Excel Workbook

Each excel file can be considered as a workbook, which is a collection of worksheets. A worksheet consists of number of rows and columns present in

Process and Information Layout 1.3-42

Page 43: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

it. The intersection of a row and a column is defined as a cell. There are 65,536 rows and 256 columns in a worksheet. Each column is represented with an alphabet and each row with a number. These alphabets and numbers help in identifying the corresponding cell is termed as label. Active cell will be highlighted with a rectangular box and the active cell number is displayed in the cell number box. To move from one sheet to another sheet in a workbook, use either the worksheet tabs or the scroll buttons.

1.3.2 (B) Single Excel Sheet You know that a workbook is a collection of worksheets. You will now learn to work on a single worksheet. Hands-On!

Perform the following steps to format the text and change the column width in the worksheet:

1. Open the file Form4_ Results.xls. The worksheet will appear as shown in the Figure 1.3.49.

Process and Information Layout 1.3-43

Page 44: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.49: Worksheet

2. Open the script editor and observe the code.

3. Select the text Test 1 and change the font size to 20 and make it bold.

4. Identify the change in source code as shown in Figure 1.3.50.

Process and Information Layout 1.3-44

Page 45: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.50: Source Code Before and After Formatting

5. Now to change the width of the column C, click anywhere on column C.

6. Choose Format Column Width. Column Width dialog box appears as shown in Figure 1.3.51.

Figure 1.3.51: Column Width Dialog Box

7. Change the width to 18 and click on OK button. In Figure 1.3.52, notice the change in the column width.

Process and Information Layout 1.3-45

Page 46: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.52: Worksheet After Adjusting the Width

8. Save and close the workbook.

Tip

You can adjust the column width by placing the cursor directly over the vertical borders of the columns you want to modify.

Process and Information Layout 1.3-46

Page 47: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Entering Formulas Excel allows you to perform various calculations easy with the help of built-in formulas. This is one feature of excel that makes it powerful. Table 1.3.3 list the commonly used formulas.

Formula Name Description SUM Calculates the total of all the selected values.

AVERAGE Calculates the average of the selected values.

MAX Returns the largest value for the selected values.

MIN Returns the smallest value for the selected values.

COUNT Counts the number of cells that contains the specified value.

PRODUCT Multiplies all the selected values and returns their product.

Table 1.3.3: List of Commonly Used Formula

Hands-On!

Perform the following steps to perform calculations such as sum and average:

1. Open the file Form4_ Results.xls.

2. To find the total marks scored by Mahathir Mohamad, click on the cell I14.

3. To apply the formula, choose Insert Function (Refer Figure 1.3.53). Insert Function dialog box appears as shown in Figure 1.3.54.

Figure 1.3.53: Inserting Function

Process and Information Layout 1.3-47

Page 48: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.54: Insert Function Dialog Box

4. Choose SUM from the list box and click on OK. Function Argument dialog box appears as shown in Figure 1.3.55.

Figure 1.3.55: Function Arguments Dialog Box

5. As the columns E14 to H14 are already select, click on OK button. The sum is displayed as shown in Figure 1.3.56.

Process and Information Layout 1.3-48

Page 49: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.56: Worksheet After Finding the Sum 6. Figure 1.3.57 shows the source code after adding the formula.

Figure 1.3.57: Source Code After Entering the Formula

Process and Information Layout 1.3-49

Page 50: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

To find the sum for other students, simply copy the content of the cell I14 and paste it in the other cells. This will copy the formula in that cell and apply it to the other cells.

7. To calculate the average of the student, click on the cell K14.

8. On the Formula Bar, type the formula as =average(e14,f14,g14) (Refer Figure 1.3.58), where e14, f14 and g14 are the cells for which you are calculating the average. Press Enter. The average will be calculated.

Figure 1.3.58: Typing the Formula in the Formula Bar

9. Copy the formula to the other cells. The worksheet will appear as shown in the Figure 1.3.59.

Process and Information Layout 1.3-50

Page 51: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.59: Worksheet After Calculating the Average

10. Save and close the workbook.

Activity 1.3.7

Perform the following steps:

Step 1: Open the data file Sales.xls.

Step 2: Calculate the total number of Music CDs sold by typing the formula =sum(f11,f18,f25) on the cell F34.

Step 3: Copy this formula to other cells to calculate the total number of Movies and Games CDs sold.

Step 4: Save the workbook and identify the change in code.

Formatting the Cells It is possible to change the way a text or number that appears in a cell by formatting the cell. This is to enhance the appears of the worksheet.

Process and Information Layout 1.3-51

Page 52: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Hands-On!

Perform the following steps to format the cell:

1. Open the file Form4_ Results.xls.

2. To convert the numbers (average) to two decimal places, select the cells as shown in Figure 1.3.60.

Figure 1.3.60: Selecting the Cells for Formatting

3. Choose Format Cells. Format Cells dialog box appears as shown in Figure 1.3.61.

Process and Information Layout 1.3-52

Page 53: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.61: Format Cells Dialog Box

4. Select Number from the Category list box.

5. Enter the number of decimal places as 2 in the Decimal places text box (Refer Figure 1.3.62) and click on OK button. The worksheet will appear as shown in Figure 1.3.63.

Figure 1.3.62: Setting the Decimal Place to Two

Process and Information Layout 1.3-53

Page 54: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.63: Worksheet After Setting the Decimal Place

6. Figure 1.3.64 shows the source code.

Figure 1.3.64: Source Code After Setting the Decimal Place

Process and Information Layout 1.3-54

Page 55: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

7. Save and close the workbook.

Activity 1.3.8

Perform the following steps: Step 1: Open the data file Perso_Detail.xls.

Step 2: Enter your name, date of birth (dd/mm/yyyy) and birth time in the corresponding columns.

Step 3: Change the format of the F14 such that DOB will be displayed as <dd>-<month in words>-<yy> by choosing Format Cells Date

14-Mar-01.

Example: 19/10/1986 19-oct-86

Step 4: Change the format of the F15 such that time of birth will be displayed in 24hrs clock by choosing Format Cells Time 13:30.

Example: 1:30 pm 13:30

Step 5: Save the file and identify the changes in the code.

Lab Exercise

Lab Exercise 7: Open the data file Drinks.xls and perform the following: a. In the Total column, calculate Cost/Item * Total Item. b. Calculate the total cost and store it in the column J21. c. Apply the formatting and change the columns F and J such that the

cost will be displayed as R<cost>. Key: Use Format Cells. d. Identify the changes in the code.

Creating Charts It is easy to understand and analyse data in pictorial form rather than text. Charts are the graphical representation of the data. Hands-On!

Perform the following steps to create a chart:

1. Open the file Form4_ Results.xls.

2. To create a chart for analysing the marks scored by students in English, select the cells that has the necessary data as shown in Figure 1.3.65.

Process and Information Layout 1.3-55

Page 56: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.65: Selecting the Desired Data for the Chart

3. Choose Insert Chart. Chart Wizard dialog box appears as shown in Figure 1.3.66. You can choose the necessary type of chart from the Chart type section.

Figure 1.3.66: Chart Wizard

Process and Information Layout 1.3-56

Page 57: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

4. Choose Column chart and click on Next button. Second screen of the chart wizard appears as shown in Figure 1.3.67. This screen will help you to choose the data you want for the chart. As you have already selected the data, you can skip this step and click on Next button. Third screen of the chart wizard appears as shown in Figure 1.3.68.

Figure 1.3.67: Second Screen of Chart Wizard

Figure 1.3.68: Third Screen of Chart Wizard

Process and Information Layout 1.3-57

Page 58: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

5. Give the title as English Marks in the Chart Title text box and click on

Next button. Final screen of the chart wizard appears as shown in Figure 1.3.69.

Figure 1.3.69: Final Screen of Chart Wizard

6. Click on Finish button. Chart will appear as shown in Figure 1.3.70.

Figure 1.3.70: Inserted Chart in the Worksheet

Process and Information Layout 1.3-58

Page 59: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

7. You can move the chart by simply dragging and place it in the desired location.

8. In the script editor notice that the chart details will be enclosed within XML code.

9. Save the workbook as Form4_ Results_chart.xls and close the workbook.

Lab Exercise

Lab Exercise 8: Open the workbook Form4_ Results.xls. Create bar chart for the Maths marks.

1.3.2 (C) Multiple Excel Sheets You are now familiar working with single excel sheet. You will now learn to work with multiple excel sheets.

When you have data in two excel sheets in a workbook, you can perform calculation using the data present in both the sheets. This can be achieved by using the format sheetname!cellname.

Hands-On!

In a work book, sheet1 stored the marks scored in test1 and sheet2 stores the marks scored in test2. Perform the following steps to compare the marks obtained by each student in the English tests and store the maximum mark in the third sheet:

1. Open the file Form4_ Results_Multiple.xls. Notice that in sheet1, test1 results are displayed and in sheet2, test2 results are displayed as shown in Figure 1.3.71.

Process and Information Layout 1.3-59

Page 60: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.71: Sheet1 and Sheet2

2. To find the maximum marks scored in English by each student, open sheet3.

3. Select the cell E14.

4. In the formula bar (Refer Figure 1.3.72), type the formula as =max(sheet1!e14,sheet2!e14). English mark of Mahathir Mohamad in test 1 is present in the e14 cell of sheet 2. Similarly English mark of Mahathir Mohamad in test 2 is present in the e14 cell of sheet2.

Process and Information Layout 1.3-60

Page 61: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.72: Inserting the Formula in the Formula Bar

5. Press Enter. Notice that when comparing the two marks 56 and 66, 66 is the maximum mark obtained which I stored in the cell E14.

6. Copy the formula and paste it for other cells. Sheet3 will be displayed as shown in Figure 1.3.73.

Process and Information Layout 1.3-61

Page 62: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.73: Sheet Three With the Maximum Marks Obtained

7. Open the script editor. To view the source code of sheet three, double-click on sheet3 in the Project Explorer window as shown in the Figure 1.3.74.

Figure 1.3.74: Project Explorer in Script Editor

Process and Information Layout 1.3-62

Page 63: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

8. Save and close the workbook.

Note If the Project Explorer window is not visible, choose View Project Explorer.

Activity 1.3.9

Perform the above steps for the Form5_ Results_Multiple.xls. Creating Hyperlink Across Worksheets It is possible to create hyperlink across worksheets with a workbook.

Hands-On!

Perform the following steps to create hyperlink across worksheets in a work book:

1. Open the workbook Form4_ Results_Hyperlink.xls. Notice that sheet1 has two options Test1 and Test2. Sheet 2 and 3 has test results of test1 and test2 as shown in Figure 1.3.75.

Process and Information Layout 1.3-63

Page 64: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.75: Work Sheets 2. To create hyperlink between sheets, highlight the cell D17 in sheet1.

3. Choose Insert Hyperlink. Insert Hyperlink dialog box appears as shown in Figure 1.3.76.

Figure 1.3.76: Insert Hyperlink Dialog Box

Process and Information Layout 1.3-64

Page 65: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

4. Choose Place in This Document from the Link to Section.

5. Choose Sheet2 from Cell Reference and click on OK button as shown in Figure 1.3.77.

Figure 1.3.77: Selecting Sheet2

6. Similarly, link the cell D19 to sheet3.

7. Now click on the cell D17. This will open sheet2.

8. Figure 1.3.78, highlights the changes in the code of sheet1 after inserting the hyperlink.

Process and Information Layout 1.3-65

Page 66: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.78: Script Editor

9. Save and close the workbook.

1.3.2 (D) Multiple Workbook You can create hyperlinks across workbooks.

Hands-On!

Perform the following steps to create hyperlink across workbooks:

1. Open the workbook Test_ Results.xls. The worksheet appears as shown in Figure 1.3.79.

Process and Information Layout 1.3-66

Page 67: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.79: Worksheet

2. Highlight the cell C11 and choose Insert Hyperlink. Insert Hyperlink dialog box appears.

3. Choose the file Form4_ TResults.xls and click on OK button.

4. Similarly hyperlink cell C12 to Form5_ TResults.xls.

5. Click on cell C11. Notice that the file Form4_TResults.xls opens.

6. Open the script editor and identify the change in code as shown in Figure 1.3.80.

Process and Information Layout 1.3-67

Page 68: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.80: Script Editor After Linking the Documents

7. Save and close the workbook.

1.3.2 (E) Publishing the Workbook as Web Page Now that you have created a workbook, you can convert this workbook into HTML format and publish the document on web.

Hands-On!

Perform the following steps to publish the workbook as web page:

1. Open the file Test_Results.xls.

2. Choose File Save as Web Page. Save the file. This file will have the file extension as .html.

3. Close the application.

4. Go to the location of the file and open the file. The file will open on the browser as shown in Figure 1.3.81.

Process and Information Layout 1.3-68

Page 69: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.81: Workbook Published as Web Page

5. To view the source code, choose View Source (in the browser). The source code will be displayed in a notepad.

Self-Check Exercise 1.3.2

1. Intersection of a row and a column is called: a. Cell b. Field c. Data d. Formula

2. The cell labeled F2 refers to a. column F row 2 b. row F column 2 c. Function key F2 d. Formula in the cell

3. It is possible to insert image files into Excel sheet (T/F). 4. Using the data present in sheet 2, can you perform calculations in sheet 1. 5. How will you insert chart into an Excel sheet?

Process and Information Layout 1.3-69

Page 70: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

1.3.3 Presentation Information Layout Definition: Presentation information layout helps in creating presentations.

Presentation software is an application that will help in adding visual effects to the presentation. It allows you to insert pictures and graphics. You can enrich the presentation by adding sound effects and animating the presentation. It is very easy to customise the presentation. That is, it is easy to decide where a picture or text should appear.

Microsoft PowerPoint is widely used presentation software. It is a product of Microsoft Office. It helps in creating handouts, charts and other instructional materials. But this application is widely used for presenting electronic presentations.

1.3.3 (A) Understanding the Interface When you open Microsoft PowerPoint, the application window appears as shown in Figure 1.3.82.

Slide Working Area

Notes Window

Slides and Outline Tabs

Views

Figure 1.3.82: PowerPoint

1. Slide Working Area is the area where you enter text and insert images.

2. Slides and Outline Tabs is the area where the miniature version of the slides and the text typed on the slides can be viewed.

Process and Information Layout 1.3-70

Page 71: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. Views are screen layouts, which can be used to edit and view the slides when creating a presentation.

4. Notes Window is the area where you can add notes to your slides. This will help you to remember key pointes in the slide.

Views In addition to the slide show, PowerPoint offers three more screen layouts. These layouts are useful when constructing the presentation. You can select the screen layout by choosing View menu < Screen layout> (Refer Figure 1.3.83).

Figure 1.3.83: Various Views Available in PowerPoint Normal View In Normal view, the screen is divided into three partitions. The screen will have the outline on the left, slide on the main window and notes at the bottom (Refer Figure 1.3.84). You will be able to work on one slide at a time in this view. This view can be made use of when organising things on a slide and adding notes to the same.

Process and Information Layout 1.3-71

Page 72: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.84: Normal View Notes Page View In notes page view, you will be able to view the slide along with the notes (Refer Figure 1.3.85). This view can be made use of for adding notes to the slide.

Process and Information Layout 1.3-72

Page 73: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.85: Notes Page View Slide Sorter View In slide sorter view, you will be able to see the miniature version of all the slides (Refer Figure 1.3.86).

Process and Information Layout 1.3-73

Page 74: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.86: Slide Sorter View This view is useful for rearranging slides and adding transition effects to the slides. To rearrange the slides, follow the given steps: Step 1: If you want to move the 3rd slide before the 2nd slide, on the slide

sorter view, select the 3rd slide.

Step 2: Hold the left mouse button and drag the slide before the 2nd slide and leave the button.

1.3.3 (B) Single .ppt Slide A presentation may contain a single or multiple slides. Most of the time, a presentation has more than one slide. You will now learn to work on single slide.

Hands-On!

To create a simple presentation, follow the given steps:

1. Open the PowerPoint application.

Process and Information Layout 1.3-74

Page 75: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

2. Step 2: Choose Blank Presentation from the New Presentation task pane.

3. Step 3: The first slide in the presentation is always the Title slide. This is for adding the title for your presentation. To add a title, simply click on the area, which says Click to add title (Refer Figure 1.3.87). Type the title for the presentation as Malaysian Festivals. Click anywhere in the slide, to come out of the text box.

Figure 1.3.87: Title Slide

4. Step 4: If you wish to add a subtitle, you can follow the same steps as mentioned earlier. If you want to delete this subtitle text box, simple click on the dotted lines and press Delete key.

5. Step 5: Save the presentation with the name Malaysian Festivals.ppt.

6. Step 6: To run the slide show, choose Slide Show View Show as shown in Figure 1.3.88. This will begin the slide show.

Figure 1.3.88: To Run the Slide Show

Process and Information Layout 1.3-75

Page 76: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

7. Step 7: Open the script editor and identify the change in code as shown in the Figure 1.3.89.

Figure 1.3.89: Script Editor

Note

You can start the slide show by clicking on the slide show button ( ) present in the left-bottom corner of the window.

1.3.3 (C) Multiple .ppt Slides When you are creating the presentations, you will be using more than one slide. You will now learn to insert and work with multiple slides.

Hands-On!

To insert a new slide, perform the following steps:

1. Open the presentation Malaysian Festivals.ppt.

2. To insert a new slide, choose Insert New Slide. In the outline tab, notice that you will now have two slides in the presentation as shown in Figure 1.3.90.

Process and Information Layout 1.3-76

Page 77: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.90: Inserting New Slide

3. Give the title as Malaysia is the Land of Festivals.

4. Remove the bullet from the text box given below. To remove the bullet, click anywhere on the text box and press Backspace.

5. Type the following content in the text area. Malaysia has a rich mixture of cultural races. These include Malays, Indians, Chinese and others. The variety of religions found is a direct reflection on the number of festivals.

6. To view the slide, choose Slide Show View Show.

7. To move to the next slide press Enter or right arrow key.

8. To move to the previous slide press the Backspace or left arrow key.

9. When the last slide is reached, the show will automatically end.

10. To end the show in between, press Esc key.

11. You can also use Slide Navigator to navigate through the slides. To use slide navigator, right-click anywhere on the screen (in the slide show). The short-cut menu appears as shown in Figure 1.3.91.

Process and Information Layout 1.3-77

Page 78: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.91: Short-Cut Menu

12. Choose Go Slide Navigator. Slide Navigator dialog box appears as shown in Figure 1.3.92). Choose the slide title and press Go To.

Figure 1.3.92: Slide Navigator

13. Save the presentation and observe the script editor as shown in Figure 1.3.93.

Process and Information Layout 1.3-78

Page 79: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.93: Script Editor

Tip

To insert a new slide, press Ctrl+M.

Lab Exercise

Lab Exercise 9: Create a presentation with the following specifications and identify the change in code: • The presentation must include 3 slides in it. • The first slide must have the title as Animals. • The second slide must have the title as Carnivorous. • The third slide must have the title as Herbivorous. • Insert two slides between the 2nd and 3rd. • Title them as Lion and Tiger. • Similarly insert two slides after Herbivorous. • Title them as Elephant and Horse. • Insert a slide after Animals and title it as What is an Animal? • Add the following text in it:

Process and Information Layout 1.3-79

Page 80: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Animal is a living creature different from Plants and Humans. It can be categorized as:

Carnivorous Herbivorous

• On the Carnivorous slide, type the following text. Carnivorous is a flesh-eating animal.

• On the Herbivorous slide, type the following text. Herbivorous is a plant-eating animal.

• Save the presentation and name it as Animals. • View the slide show. • You can now close the presentation and exit from the application. Slide arrangements are as follows:

Slide 1 - Title Slide – Animals Slide 2 - What is an Animal? Slide 3 - Carnivorous Slide 4 - Lion Slide 5 - Tiger Slide 6 - Herbivorous Slide 7 - Elephant Slide 8 - Horse

Design Template Template refers to preset format. The font size, the font colour, the background colour and such things are already defined. When you apply this template, the slides are automatically formatted. You can apply design template to a presentation at the time of creation by choosing From Design Template from the New Presentation task pane as shown in Figure 1.3.94.

Process and Information Layout 1.3-80

Page 81: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.94: Choosing Design Template From New Presentation Task Pane

Hands-On!

To add design template to the existing presentation perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. To apply design template to this presentation, choose Format Slide Design. Slide Design task pane appears as shown in Figure 1.3.95.

Figure 1.3.95: Slide Design Task Pane

Process and Information Layout 1.3-81

Page 82: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. In the Slide Design task pane, choose the template Fireworks.

4. Save the presentation and identify the change in the project explorer as in Figure 1.3.96. You will notice that TitleMaster1 is added. This is for the first (title) slide.

Figure 1.3.96: Project Explorer

Notice the difference in the template for the title slide and the other slide as shown in Figure 1.2.97.

Figure 1.3.97: Slides

5. Close the presentation.

Note

To change the colour of the existing design template, use Colour Schemes in the Slide Design task pane.

Activity 1.3.10 (a)

Process and Information Layout 1.3-82

Page 83: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Perform the following steps;

Step 1: Open the PowerPoint application.

Step 2: Choose From Design Template from the New Presentation task pane.

Step 3: Choose the Design Template Glass Layers form the Slide Design task pane.

Step 4: Include another slide to the presentation and observe the template.

Step 5: Save the presentation as My_Template.ppt and close.

Activity 1.3.10 (b)

Perform the following steps;

Step 1: Open My_Template.ppt presentation.

Step 2: Switch to Slide Design task pane by choosing Format Slide Design.

Step 3: Choose Curtain Call template.

Step 4: Save the presentation.

Slide Layout Slide layout will show how things are arranged on a slide. That is, where a text should appear, where to insert an image etc. You can change the layout of an existing slide by selecting the slide and choosing Format Slide Layout.

Hands-On!

To apply slide layout for a slide, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. To insert a new slide, select the second slide and choose Insert New Slide or click on in the Standard toolbar. Slide Layout task pane appears as shown in Figure 1.3.98.

Process and Information Layout 1.3-83

Page 84: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Text Area

Title

Picture

Figure 1.3.98: Slide Layout

3. Choose the layout (Title, Text, and Content) from the Slide Layout

task pane.

4. Similarly, insert two more slides and apply the layouts.

5. Title the slides 3, 4 and 5 as Hari Raya Puasa, Chinese New Year and Deepavali respectively.

6. Identify the change in code as shown in Figure 1.3.99.

Process and Information Layout 1.3-84

Page 85: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.99: Script Editor Before and After Changing the Layout

7. On the text area of slide 3, type the following:

Hari Raya Puasa is one of the most important festival celebration for Muslims. It signifies the end of the fasting month of Ramadan.

8. On the text area of slide 4, type the following:

Chinese New Year is the most important festival for the Chinese. This is the time when spirits are appeared and offerings are made to Gods.

9. On the text area of slide 5, type the following:

Deepavali is a Hindu festival. It is the festival of lights.

10. Save and close the presentation.

Process and Information Layout 1.3-85

Page 86: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Activity 1.3.11

Perform the following steps:

Step 1: Open My_Template.ppt presentation.

Step 2: Insert three new slides by choosing Insert New Slide.

Step 3: Select the first slide.

Step 4: Choose Format Slide Layout and apply Title Only layout.

Step 5: Similarly, apply Title, Text and Clip Art layout for the second slide.

Step 6: Apply Title, Media Clip and Text layout to the third slide.

Step 7: Apply Picture Only layout to the last slide.

Step 8: Save the presentation and identify the change in code.

Step 9: Close the presentation.

Slide Master Assume that you need to change the style of all the slides in a presentation. You will have to go through each slide to do so. Instead, you can use Slide Master to change the style of all the styles. Slide master is an element of the design template that stores all the information about the template. Any change in the slide master reflects in global change. In other words, it changes in all the slides.

Hands-On!

To change the font of the title in the slides, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. To open the slide master, choose View Master Slide Master (Refer Figure 1.3.100).

Process and Information Layout 1.3-86

Page 87: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.100: Opening Slide Master Slide Master View dialog box opens along with the master slide as shown in the Figure 1.3.101.

Figure 1.3.101: Slide Master

Process and Information Layout 1.3-87

Page 88: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. On the slide master, select the title text box and change the font to Bookman Old Style. Also apply bold formatting.

4. Similarly, on the title master, select the title text box and change the font to Bookman Old Style. Also apply bold formatting.

5. On the Slide Master View dialog box, click Close Master View.

6. Notice that the changes occur in all the slides.

7. Save and close the presentation.

Inserting Picture To enhance the presentation, you can insert pictures into sides.

Hands-On!

To insert a picture in the slide, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. Select the third slide. This slide will have the title as Hari Raya Puasa.

3. Click on picture ( ) button present in the slide. The Insert Picture dialog box appears.

4. Choose the file Hari Raya Puasa and click on Insert button.

5. Similarly, in slide 4 and 5, insert the pictures Chinese New Year and Deepavali.

6. Identify the change in code.

7. Save and close the presentation.

Lab Exercise

Lab Exercise 10: To the Animals presentation, which you have created in your previous lab session, make the following changes and identify the change in code: • On the title slide, in the subtitle text area, type the following text:

Project done by < Your name >

• Change the colour of the title Animals to red and that of subtitle text to blue.

• Title must be bold. • For rest of the slides, the title should be left align and bold. • On the text area of Lion slide, type the following text:

Process and Information Layout 1.3-88

Page 89: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

o A large carnivorous mammal. o A brave person is referred as Lion.

• On the text area of Tiger slide, type the following text: o A large carnivorous mammal. o An aggressive person is referred as Tiger.

• On the text area of Elephant slide, type the following text o A large herbivorous mammal. o A person who can remember things is referred as Elephant.

• On the text area of Horse slide, type the following text o A hoofed mammal. o The engine power is measured in terms of horsepower.

• Move the Horse slide before Elephant and Tiger slide before Lion. • On the Carnivorous slide, add the following note:

o Some examples are Tiger, Lion and Panther. • On the Herbivorous slide, add the following note in the notes window:

o Some examples are Horse, Elephant and Giraffe. • On the Tiger slide, add the following note in the notes window:

o Mammal refers to warm-blooded animal. • Apply the design template, Stream. • Change the layout of the slides with the title Tiger, Lion, Horse and

Herbivorous, respectively, to Title, Content and Text format. • Change the title font to Book Antiqua in all the slides except for the

title slide. • In the title slide, change the title colour to green. • Insert the picture data files Lion, Tiger, Elephant and the Horse in the

corresponding slides. • Save the presentation. • View the slide show. • Close and exit the application.

Animating Objects To enhance the presentation and to make the presentation more interesting and active, you can animate the objects on the slides. Animation is used to bring objects to view in a sequential manner.

Process and Information Layout 1.3-89

Page 90: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Do not use too much animation effect, as it will make the presentation bulky and also it will reduce the professionalism of the presentation.

Warning

To animate an object, you can either use the predefined set of animation effects, which already exist or you can define you own animation settings.

Animation Schemes Animation Schemes are predefine set of animation effects. That is, the animation effects for the slide and its objects are already defined. To use the predefine animation schemes, follow the given steps:

1. Select the slide to which you want to apply the animation scheme. 2. Choose Slide Show Animation Schemes as shown in Figure

1.3.102.

Figure 1.3.102: Choosing Animation Schemes From Slide Show Menu

3. In the Slide Design task pane, choose the animation scheme you want to apply (Refer Figure 1.3.103).

Process and Information Layout 1.3-90

Page 91: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.103: Selecting Animation Schemes From Slide Design Task Pane

Notice that when you select the animation effect from the Slide Design task pane, you will be able to see the preview of the effect on the slide.

Custom Animation When you use the predefined set of animation effects, the same effect is applied to all the objects and the slide. If you want to change this predefine set or if you would like to define your own set, you can use custom animation. This will allow you to customize your own animations.

Hands-On!

To apply animation to the presentation, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. Select the first slide, title slide, from the Slides tab.

3. Click on the title.

Process and Information Layout 1.3-91

Page 92: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

4. Choose Slide Show Custom Animation. Custom Animation task pane appears as shown in the Figure 1.3.104.

Figure 1.3.104: Custom Animation Task Pane

5. In the Custom Animation task pane, choose Add Effect Entrance More Effects Crawl In as shown in the Figure 1.3.105.

Process and Information Layout 1.3-92

Page 93: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.105: Choosing Animation Form Add Effect Drop-down List Box

6. Select the second slide.

7. Click on the title and choose Add Effect Entrance More Effects Wipe.

8. Click on the text area and choose Add Effect Entrance More Effects Grow and Turn.

9. Click on the picture and choose Add Effect Entrance More Effects Zoom.

10. Similarly, apply the animation effects for the other slides also.

11. Save the presentation and view the slide show.

12. Identify the change in the code as shown in the Figure 1.3.106.

Process and Information Layout 1.3-93

Page 94: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.106: Script Editor Before and After Apply Animation

Figure 1.3.106 show the change in code for the animation effect of the picture in slide 5.

Note You can still customise the animation effect by adjusting the Modify Effect in the Custom Animation task pane.

Process and Information Layout 1.3-94

Page 95: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Animating Slide Transition You learnt to animate the objects. Similarly, you can also animate a slide. You can specify how a slide should enter into the show. This can be achieved thought slide transition effect.

Hands-On!

To apply slide transition, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. Choose Slide Show Slide Transition. Slide Transition task pane appears as shown in Figure 1.3.107.

Figure 1.3.107: Slide Transition Task Pane

3. Choose Cover Right effect from the Slide Transition task pane.

4. Click on Apply to All Slides button.

5. View the slide show.

Process and Information Layout 1.3-95

Page 96: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

6. Save the presentation and identify the change in source code as shown in Figure 1.3.108.

Figure 1.3.108: Script Editor Before and After Applying Transition Effect

7. Close the presentation.

Note If you want to apply different transition effect to each slide, do not click Apply to All Slides button. Instead select each slide and apply transition effect.

Process and Information Layout 1.3-96

Page 97: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Lab Exercise

Lab Exercise 11: To the Animals presentation, which you have created in your previous lab session, make the following changes and identify the change in code: • Apply the effect Raise Up to the title in each slide. • Apply the effect Unfold to the text area in each slide. • Apply the transition effect Random Bars Horizontal to the slides.

Action Buttons Action buttons are buttons that is used for navigation purpose. They can also be used for creating hyperlinks. You can create hyperlinks within the presentation or across presentations using these action buttons.

Hands-On!

To create hyperlink within the presentation using action buttons, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. To create action buttons, choose Slide Show Action Buttons. A menu with different buttons appears as shown in the Figure 1.3.109.

Figure 1.3.109: Action Buttons Menu

3. Select the Home button. Mouse cursor changes to a crosshair.

4. Place the cursor where you want to draw the button, holding the left mouse button drag the mouse and release the button. Action Settings dialog box appears as shown in Figure 1.3.110.

Process and Information Layout 1.3-97

Page 98: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.110: Action Settings Dialog Box

5. The button you have placed is a Home button, which by default will take you to the first slide in the presentation. Click OK button.

6. Similarly, place Beginning, Back, Forward and End buttons as shown in Figure 1.3.111.

Process and Information Layout 1.3-98

Page 99: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.111: Action Buttons Placed on the Slide

7. Copy the buttons to the other slides. 8. Save the presentation and run the slide show.

9. Identify the change in the code as shown in Figure 1.3.112.

Process and Information Layout 1.3-99

Page 100: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.112: Script Window Before and After Placing the Action Buttons

10. Close the presentation.

Process and Information Layout 1.3-100

Page 101: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Hands-On!

To create hyperlink to another presentation using action button, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. To create action buttons, choose Slide Show Action Buttons. A menu with different buttons appears.

3. Choose Custom button and place it on the 5th slide as shown in the Figure 1.3.113. Action Settings dialog box appears.

Figure 1.3.113: Custom Button Placed on 5th Slide

4. Click on Hyperlink to radio button and choose Other PowerPoint Presentation from the drop-down list box. Hyperlink to Other PowerPoint Presentation dialog box appears as shown in Figure 1.3.114.

Process and Information Layout 1.3-101

Page 102: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.114: Hyperlink to Other PowerPoint Presentation Dialog Box

5. Choose Other Festivals.ppt from the data file and click OK button.

6. Click OK button on the Action Settings dialog box.

7. Save and Run the presentation.

8. Identify the change in code and close the presentation.

Hands-On!

To create hyperlink to web sites, perform the following steps:

1. Open the file Other Festivals.ppt.

2. Select the text Mooncake Festival and choose Insert Hyperlink. Insert Hyperlink dialog box appears.

Process and Information Layout 1.3-102

Page 103: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

3. Select Browsed Pages option and type http://www.geographia.com/malaysia/holmooncake.html in the Address drop-down list box as shown in Figure 1.3.115.

Figure 1.3.115: Insert Hyperlink Dialog Box

4. Click OK button.

5. Similarly, hyperlink Gawai Festival and Christmas to http://www.geographia.com/malaysia/holgawai.html and http://www.geographia.com/malaysia/holchristmas.html respectively.

6. Save the presentation and run the slide show.

7. Identify the change in code as shown in Figure 1.3.116 and close the presentation.

Process and Information Layout 1.3-103

Page 104: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.116: Script Window Before and After Inserting Hyperlink

Lab Exercise

Lab Exercise 12: To the Animals presentation, include the action buttons to navigate through slides and identify the change in codes.

Pack and Go Option Pack and Go option helps you to pack your presentation, so that you can run the presentation on another computer. When you pack your presentation, other files that are linked to this presentation will automatically be included.

Process and Information Layout 1.3-104

Page 105: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Hands-On!

To pack the presentation, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. Choose File Pack and Go. Pack and Go Wizard appears as shown in the Figure 1.3.117.

Figure 1.3.117: Pack and Go Wizard

3. Click on Next button. Pick files to pack page appears as shown in Figure 1.3.118. You can choose the files you wish to pack in this page.

Process and Information Layout 1.3-105

Page 106: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.118: Pick files to pack Page

4. To pack the active presentation, click Next button. Choose destination page appears as shown in Figure 1.3.119. You can choose the destination where you want to save you packed file.

Figure 1.3.119: Choose destination Page

5. Click on Choose destination radio button and click on Browse button. Choose Directory dialog box appears as shown in Figure 1.3.120.

Process and Information Layout 1.3-106

Page 107: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.120: Choose Directory Dialog Box

6. Choose the directory where you want to save the files and click on Select button.

7. Click on Next button. Links page appears as shown in Figure 1.3.121. This page will automatically include all the files that are linked to the presentation.

Process and Information Layout 1.3-107

Page 108: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.121: Links Page

8. Click on Next button. Viewer page appears as shown in Figure 1.3.122. This page allows you to include PowerPoint Viewer If the destination computer does not have PowerPoint installed.

Figure 1.3.122: Viewer Page

9. Click on Next button. Finish page appears as shown in Figure 1.3.123.

Process and Information Layout 1.3-108

Page 109: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Figure 1.3.123: Finish Page

10. Click on Finish button. PowerPoint will pack the presentation and save it in the specified destination. You can unpack this presentation in the destination computer and run the presentation.

Note To run the presentation on another computer, you can choose floppy drive as destination in the Choose destination page of the Pack and Go Wizard.

Lab Exercise

Lab Exercise 13: Pack the presentation Animals in a floppy and run it in a different machine. Publishing Presentation as Web Page You can publish the presentation as web page.

Hands-On!

To publish the presentation as web page, perform the following steps:

1. Open the file Malaysian Festivals.ppt.

2. Choose File Save as Web Page. Save As dialog box appears.

3. Choose the destination and click on Save button. Presentation will be saved as a web page.

Process and Information Layout 1.3-109

Page 110: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

4. Open the web page from its destination. Presentation appears as shown in figure 1.2.124.

Figure 1.3.124: Presentation on Web

5. Identify the source code of the presentation.

Lab Exercise

Lab Exercise 14: Publish the presentation Animals on web.

Self-Check Exercise 1.3.3

1. List the steps to start the slide show. 2. Slide navigator helps in navigating through slides in normal view (T/F). 3. ____________ refers to preset format.

Process and Information Layout 1.3-110

Page 111: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Technical Terminologies

Animation - A technique used to bring objects to view in a sequential manner.

Bookmark - An identity used for marking a particular location in a document

Cell - The intersection of a row and a column.

ClipArt - The collection of images provided by Office applications that can be inserted into the document.

Design Template - A file that contains all the preset formats for a presentation.

Formatting - The technique used for changing the appearance of the text in the document.

Hyperlink - An element that links one object to another either in the same document or across documents.

Label - The alphabets and numbers that help in identifying the corresponding cell.

Slide Layout - The template that shows how things are arranged on a slide.

Slide Master - An element of the design template that stores all the information about the template.

Superscript - An effect that raises the text above the base line.

Template - A file that defines the layout of the document.

Workbook - A collection of worksheets.

Worksheet - A sheet that consists of number of rows and columns to enter data.

Summary In this unit, you learnt that:

Word information layout helps in creating documents. Microsoft Word is one of the most widely used word processor

application. Formatting refers to changing the appearance of the text in the

document. To raise a text above the base line and make the font appear small

is called superscript. Images come in various formats such as .jpg and .bmp.

Process and Information Layout 1.3-111

Page 112: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Clipart is a collection of images that can be inserted into the document.

Bookmark is used for marking a particular location in a document It is possible to link pages within a document and across documents

using hyperlink. Hyperlink is an element that links one object to another either in the

same document or across documents. Data information layout helps in creating spreadsheets. Workbook is a collection of worksheets. A worksheet consists of number of rows and columns present in it. The intersection of a row and a column is defined as a cell. Alphabets and numbers help in identifying the corresponding cell is

termed as label. Presentation information layout helps in creating presentations. A presentation can have one or more slides. Design template is a file, which contains all the preset formats for a

presentation. Slide master is an element of the design template that stores all the

information about the template. Slide layout will show how things are arranged on a slide. Animation is used to bring objects to view in a sequential manner. Action buttons are used for navigation purpose. Pack and Go option helps to pack the presentation, so that you can

run the presentation on another computer.

Assignment

1. What is a bookmark?

2. How do you insert a hyperlink across documents?

3. What is the need for formatting the text?

4. Describe the following functions:

a. SUM

b. MAX

c. COUNT

5. What is the need for a slide master?

Process and Information Layout 1.3-112

Page 113: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

Criterion Referenced Test Instruction: Students must evaluate themselves to attain the list of

competencies to be achieved.

Name: Subject: Programming and Development Tools

Unit: Process and Information Layout

Please tick [ √ ] the appropriate box when you have achieved the respective competency.

Date Process and Information Layout C1 C2 C3 C4 C5 C6 C7 C8 C9 C10 C11 C12 C13

Comment

Competency codes: Word Information Layout C1 = Identify the tags such as <img> and <b> used in the source code.

C2 = Create documents and publish as web page.

C3 = Insert image into a document.

C4 = Insert a file into another file.

C5 = Create hyperlink with a document and across documents.

C6 = Create workbooks and publish as web page.

C7 = Link worksheets within the workbook.

C8 = Create hyperlink across workbooks.

C9 = Insert images into presentation.

C10 = Insert actions buttons in slides.

C11 = Use slide master to perform functions that are common to all slides.

Process and Information Layout 1.3-113

Page 114: 1.3 Process and Information Layout

Programming & Development Tools Introduction to Programming

C12 = Create simple interactive presentations with various animation schemes and publish as web page.

C13 = Create hyperlink across presentations.

Process and Information Layout 1.3-114