Unit 1.4

Programming & Development Tools Introduction to Programming

UNIT

1.4

Introduction to Programming Project Integration

OBJECTIVES

This unit explains how to integrate the projects created in various layouts.

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

Integrate projects created in various layouts Create interactive presentations and web pages

Benchmark Standard Create interactive web pages by integrating the projects created in

various layouts and publish them successfully. Create and execute interactive presentations using the hyperlinks

without any errors.

Project Integration 1.4-1


Let us Revise!

1. Define Word Information Layout.

2. Which application is widely used for creating presentations?

3. Intersection of row and a column is known as ______.

Introduction You are now familiar with creating document and presentations using Word, Excel and PowerPoint. You will now learn to integrate these files to create interactive web pages. Project integration means combining all the related files in a project and test whether they are functioning properly. 1.4.1 Designing Interactive Web Page Computo Sdn. Bhd. is a leading company in selling computer parts since 1985. They had introduced new products last year. As an assistant manager of this company, you must prepare the detail list of the cost of these items and the sales report for last year. You decide to prepare an interactive presentation and publish this on web.

Hands-On!

Perform the following steps to create a document that lists the detail description of the products with their cost and publish this document as web page:

1. Open a blank document.

2. Change the view to Web Layout by choosing View Web Layout as shown in Figure 1.4.1. The view of the document changes as shown in Figure 1.4.2.

Figure 1.4.1: Changing the View to Web Layout



Figure 1.4.2: Document in Web Layout View

3. To make the web page appear attractive, change the background colour of the document by choosing Format Background Fill Effects as shown in Figure 1.4.3. Fill Effects dialog box appears as shown in Figure 1.4.4.



Figure 1.4.3: Changing the Background of the Document

Figure 1.4.4: Fill Effects Dialog Box



4. Choose Texture tab and select Recycled paper texture (refer Figure 1.4.5). Click on OK button. Document appears as shown in Figure 1.4.6 and the corresponding source code is represented in Figure 1.4.7.

Figure 1.4.5: Selecting Recycled paper Texture



Figure 1.4.6: Document Window After Changing the Background

Figure 1.4.7: Source Code After Changing the Background



5. To insert the logo for the company, choose Insert Picture From FiIe. Insert Picture dialog box appears.

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

7. Left click on the picture with the name Logo.

8. Click on the Insert button and centre align the logo. Figure 1.4.8 shows the document window and the script editor after inserting the picture.

Figure 1.4.8: Document Window and Source Code After Inserting the Logo

9. Below the logo, type the text Computo Sdn. Bhd.

10. Change the font to Book Antiqua, font size to 48 and font colour to red.

11. Below the text, type Your only solution for computer products.



12. Change the font to Arial, font size to 18 and font colour to black. 13. Draw a straight line below the text as shown in Figure 1.4.9.

Figure 1.4.9: Document Window After Entering the Text

14. Below the line, insert the pictures and type the text as shown in Figure 1.4.10.



Figure 1.4.10: Document Window After Inserting the Pictures

15. Select the text Computo and insert the bookmark by choosing Insert Bookmark. Bookmark dialog box appears.

16. Type the name Home and click Add.

17. Press Enter six times and type the text About Us.

18. Change the font to Book Antiqua, font size to 48 and font colour to blue.

19. Insert the clip art by choosing Insert Picture Clip Art. Insert Clip Art dialog box appears.

20. In the Search text text box, type business and click on Search. 21. Insert the picture as shown in Figure 1.4.11.



Figure 1.4.11: Document Window After the Clip Art

22. Type the following text below the picture: We are one of the leading companies selling computer products since 1986. We deliver high-quality, reliable and cost-effective products to clients around the world.

23. Change the font to Arial, font size to 18, font colour to green and centre align the text. Observe the change in source code as shown in Figure 1.4.12.



Figure 1.4.12: Source Code After Inserting the Text

24. Type the text Back below the text.

25. Change the font to Arial, font size to 16 and font colour to black. Align it to left.

26. Select the text About Us and insert the bookmark by choosing Insert Bookmark. Bookmark dialog box appears.

27. Type the name About_Us and click Add. Observe the change in source code as shown in Figure 1.4.13.



Figure 1.4.13: Source Code After Inserting the Bookmark

28. Press Enter six times and type the following text: Branches

1. 30th Floors, Putra World Trade Centre, 48 Jalan Tun Ismail, 50480 Kuala Lumpur, Malaysia 2. 24, Jalan PGD 8/7, Dataran Mentari, 46150 Petaling Jaya. 3. 823 West Seventh Street, Suite 320, Los Angeles, CA 90018, USA

Back

29. Select the text Branches and change the font to Book Antiqua, font size to 48 and font colour to blue.

30. Change the font of the address to Arial, font size to 18 and font colour to black.

31. Change the font of the text Back to Arial, font size to 16 and font colour to black. Align it to left.



32. Select the text Branches and insert the bookmark by choosing Insert Bookmark. Bookmark dialog box appears.

33. Type the name Branches and click Add.

34. Similarly, enter the following details and format them:

Client List

1. Amith Technologies 2. Boreal Technologies 3. CNB Access 4. Ethyl Snd. Bhd. 5. Laser Image Infosys 6. M & L Chemicals 7. Razz Snd. Bhd. 8. Topfoto 9. Zippore

Back Contact Us

Company Name: Computo Snd. Bhd. Head Office: C-8-9, Punchak Prima,

Dasa Sriharthamas, Kualalumpur - 50481

Directors: Abdul Rahim Tel No: 016 - 2473246 Fax No 016 - 2874343 E-Mail: [email protected]

Back

35. Select the text Client List and insert the bookmark by choosing Insert

Bookmark. Bookmark dialog box appears.

36. Type the name Client_List and click Add.

37. Select the text Contact Us and insert the bookmark by choosing Insert Bookmark. Bookmark dialog box appears.

38. Type the name Contact_Us and click Add.



39. Select the text Back and choose Insert Hyperlink. Insert Hyperlink dialog box appears.

40. Click on Bookmark button. Select a place in Document dialog box appears.

41. Select Home and click OK.

42. Click OK on Insert Hyperlink dialog box.

43. Similarly, create hyperlinks for the other text Back wherever it appears.

44. Select the text About Us in page 1 and hyperlink this text to the bookmark About_Us.

45. Similarly, hyperlink the text Branches, Client List and Contact Us with the respective bookmarks.

46. Save the document as Home_Page_Word.doc.

47. Save the document as webpage with the name Home_Page_Webpage.html.

48. Close the application. Hands-On!

Perform the following steps to create spreadsheet to store the sales details:

1. Open a blank workbook.

2. On the cell D5 type the text Sales Figure of Computer Parts. Change the font size to 26 and make it appear bold. Figurer 1.4.14 shows the spreadsheet and the source code.



Figure 1.4.14: Spreadsheet and Source Code After Entering the Text

3. From D10 enter the following details:

D E F G H I 10 Month Hard Disk Pen Drive Mouse Keyboard RAM 11 January 25 38 15 23 21 12 February 12 23 32 12 33 13 March 23 45 43 22 17 14 April 8 33 32 24 32 15 May 18 23 10 8 13 16 June 12 17 16 22 21 17 July 15 14 16 26 32 18 August 23 34 24 26 23 19 September 12 24 23 32 15 20 October 7 19 21 16 18 21 November 18 25 14 21 13 22 December 22 23 40 23 25



Spreadsheet appears as shown in Figure 1.4.15

Figure 1.4.15: Spreadsheet After Entering Data

4. Now to change the width, select the columns D to I. 5. Choose Format Column Width. Column Width dialog box

appears.

6. Change the width to 15 and click on OK button. In Figure 1.4.16, notice the change in the column width and the source code.



Figure 1.4.16: Spreadsheet and Source Code After Changing the Column

Width

7. Select row 5 and click on Merge and Center ( ) button on the Formatting toolbar.

8. To calculate the total number of items sold, on D24 type Total and make it bold.

9. To find the total number of hard disk pieces sold, click on the cell E24.

10. To apply the formula, choose Insert Function. Insert Function dialog box appears.

11. Choose SUM from the list box and click on OK. Function Argument dialog box appears.

12. As the columns E11 to E23 are already select, click on OK button. The sum is displayed.

13. Centre align row 24. Figurer 1.4.17 displays the spreadsheet and the source code after entering the formula.



Figure 1.4.17: Spreadsheet and Source Code After Calculating the Sum

14. Copy the formula to the other cells.

15. To create a chart for analysing the sales for the year, select the cells D10 to I23.

16. Choose Insert Chart. Chart Wizard dialog box appears.

17. Choose Column chart from Chart type and click on Next button twice. Screen 3 appears.

18. Give the chart title as Sales Report, X axis as Month and Y axis as No. of Pieces Sold. Click on Next button and in the final screen, click on Finish button. Adjust the chart to the desired size and location. Chart appears as shown in Figure 1.4.18.



Figure 1.4.18: Spreadsheet After Inserting Chart

19. On D50 type the text Home.

20. Select this text hyperlink it Home_Page_Webpage.html.

21. On I50 type the text Back.

22. Save the file as Sales_Excel.xls.

23. To save as web page, choose File Save as Web Page. Save the file with the name Sales_Webpage.html.

24. Copy the details of the hard disk to a new workbook.

25. Create a Pie chart for this and save the workbook as Harddisk_Excel.xls. The workbook appears as shown in Figure 1.4.19.



Figure 1.4.19: Spreadsheet After Inserting Chart

26. As done for Sales_Excel.xls, type the text Home and Back. Hyperlink Home to Home_Page_Webpage.html.

27. Save this as web page with the name Harddisk_Webpage.html.

28. Similarly, create workbook for other products and save it with appropriate file name.

29. Close the application.

1.4.2 Creating Interactive Presentation Now that you have created interactive web pages, you will now learn to create interactive presentation and integrate it with other web pages.

Hands-On!

Perform the following steps to create interactive presentation and save it as web page:

1. Open a blank presentation. The default slide layout and its code is represented in Figure 1.4.20.



Figure 1.4.20: Default Slide Layout and the Source Code

2. From the Slide Layout task pane choose Title and Content layout. Figure 1.4.21 shows the slide and its source code after changing the layout.



Figure 1.4.21: Slide Layout and the Source Code After Changing the Layout

3. Give the title as Products.

4. To insert a table, click on the Insert Table icon ( ) on the slide. Insert Table dialog box appears as shown in Figure 1.4.22.



Figure 1.4.22: Insert Table Dialog Box

5. Type the number of rows as 5 and click on OK button. Slide appears as shown in Figure 1.4.23. Observe the source code where code for table insertion appears.

Figure 1.4.23: Slide After Inserting the Table

6. Insert the pictures of the products and type the corresponding name as shown in the Figure 1.4.24. When inserting the picture the layout of the slide changes. It is therefore necessary to adjust the table and the picture.



Figure 1.4.24: Slide After Inserting the Pictures

7. Insert five slides by clicking on New Slide button ( ) on the Formatting toolbar.

8. Change the slide layout of these slides to Title and 2 Content format.

9. Give the title to these slides as Hard Disk, Pen Drive, Mouse, Keyboard and RAM respectively. Figure 1.4.25 represents the slide and the corresponding source code.



Figure 1.4.25: Slide and the Source Code

10. On the Hard Disk slide, click on the Insert Table icon and insert a table with 2 columns and 4 rows.

11. Type the following content on the table:

Product Cost

Orange 40GB RM 500.00

Mapio 40GB RM 550.50

Mapio 80GB RM 680.00



12. Click on Insert Picture icon on the slide and insert the picture of the hard disk as shown in Figure 1.4.26.

Figure 1.4.26: Slide After Inserting the Table and the Picture

13. Similarly, insert the table and picture in other slides as shown in Figure 1.4.27.



Figure 1.4.27: Other Slides

14. To apply design template to this presentation, choose Format Slide Design. Slide Design task pane appears.

15. In the Slide Design task pane, choose the template Fading Grid. Slide appears as shown in Figure 1.4.28.



Figure 1.4.28: Slide After Applying Design Template You might have to adjust the table and the pictures after the applying

design template.

16. On the Products slide, select the text Hard Disk.

17. Choose Insert Hyperlink. Insert Hyperlink dialog box appears.

18. Select Place in this Document from the Link to section.

19. Select Hard Disk in the Select a place in this document section and click on OK button. Figure 1.4.29 represents the slide and its source code.



Figure 1.4.29: Slide and the Source Code After Inserting Hyperlink

20. Similarly, link the other products.

21. On slide 2, to create action buttons, choose Slide Show Action Buttons. A menu with different buttons appears.

22. Insert the custom button on the left-bottom corner of the slide. Action Setting dialog box appears.

23. Click on Hyperlink to radio button and choose First Slide from the drop-down list box.

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

25. To give a name to the animation button, choose Text Box from drawing toolbar and click on the animation button. Type the text BACK.

26. Copy this button to slide 3, 4, 5 and 6.



27. Similarly insert another custom button on the right-corner of slide 2 and hyperlink this to the file Harddisk_Webpage.html.

28. To give a name to the animation button, choose Text Box from drawing toolbar and click on the animation button. Type the text Sales Chart. Slide appears as shown in Figure 1.4.30.

Figure 1.4.30: Slide with Custom Animation Button

29. Similarly, insert the button to other slides and link it to the corresponding sales chart.

30. To insert a slide between slide 1 and slide 2, select slide 1 from the outline tab. Insert a slide by clicking on New Slide button on the Formatting toolbar.

31. Give the title as Products Sale.

32. To embed the sales chart created in excel, open the file Sales_Excel.xls. Copy the chart and switch to PowerPoint presentation.

33. On the slide Products Sale, choose Edit Paste Special as shown in Figure 1.4.31. Paste Special will help in embedding the clipboard object into the file. Paste Special dialog box appears as shown in Figure 1.4.32.



Figure 1.4.31: Choosing Paste Special

Figure 1.4.32: Paste Special Dialog Box

34. Click on OK button.

35. Insert the Back and Sales Chart custom buttons. Link Back button to slide 1 and Sales Chart button to Sales_ Webpage.html. Chart appears as shown in Figure 1.4.33 and the corresponding source code is shown in Figure 1.4.34.



Figure 1.4.33: Slide After Embedding the Chart

Figure 1.4.34: Source Code

36. On slide 1, insert Home button and hyperlink this to the file Home_Page_Webpage.html.

37. In the slide, insert a custom button Sales Chart and hyperlink it to the next slide.



38. Save the presentation as Products_PowerPoint.ppt.

39. Run the slide show.

40. To save the presentation as webpage, choose File Save as Web page. Save As dialog box appears. Give the name as Products_Webpage.html and click on Save.


Hands-On!

Perform the following steps to integrate the projects created in various layouts:

1. Open the file Home_Page_word.doc.

2. Select the text Products and hyperlink it with the file Products_webpage.html.

3. Save the document and save the same as web page.


5. Open the file Sales_Excel.xls.

6. Hyperlink the text BACK with the file Products_Webpage.html.

7. Save the workbook and the corresponding web page.

8. Similarly, hyperlink the text BACK in other workbooks.

9. Save the web pages and close the application.

10. Open the file Home_Page_Webpage.html and browse through the pages.

Lab Exercise

Lab Exercise 1: Ipoh youth association has various facilities that are offered. As a president of this association, you are required to launch a web site that describes the about the club and the various facilities offered. Using PowerPoint create a presentation that describes about the various facilities that are offered. List the membership details in Excel. Integrate these details and launch a web site.



Creating WORD Document Observe the following figures: Page1:

Page2:

Format for the text in the document: IPOH YOUTH ASSOCIATION Garamond 26 green. Text Arial 12.



Create a Word document as shown in the figure and save it as Homepage_Word.doc. Also save the document as web page with the name Homepage_Webpage.html.

Creating Excel Workbook Observe the following figure:



Format for the cells in the workbook: Merge D9 – I9. Text Membership Details – Arial 26 bold. Text Facility, Period and Fees – Arial 12 bold. Column width of D, F and H must be 12. Details must be center align. Create a worksheet as shown in the figure and save it as Membership_Excel.xls. Also save the worksheet as web page with the name Membership_Webpage.html. Creating Presentation Observe the following figure: Slide1:



Slide2:

Slide3:



Slide4:

Slide5:

Format for the slide:

Design Template: Maple. Create a presentation as shown in the figure and insert the corresponding images present in the data file. Save the presentation as Facilities_PowerPoint.ppt. Also save the same as web page with the name Facilities_Webpage.html.



Integrating Projects Open the presentation Facilities_PowerPoint.ppt and perform the following:

• On the first slide, hyperlink the text Home Page to Homepage_Webpage.html. • Hyperlink the text Membership Details to Memebership_Webpage.html. • Hyperlink the text Swimming to Slide2. • Similarly, hyperlink the text Lawn Tennis to Slide3, Table Tennis to Slide4 and GYM to

Slide5. • On each slide, hyperlink the text Back to Slide1. • Save the document and the corresponding web page.

Open the workbook Membership_Excel.xls and perform the following:

• Hyperlink the text Home Page to Homepage_Webpage.html. • Hyperlink the text Facilities to Facilities_Webpage.html. • Save the workbook and the corresponding web page.

Open the file Homepage_Word.doc and perform the following:

• On the text IPOH YOUTH ASSOSIATION insert a bookmark with the name Home_page.

• On the text Contact us at, insert the bookmark Contact. • When the user click on the text Contact Us (on page one), the address detail on page

two must appear. • When the user click on the text Back, page one must appear. • Hyperlink the text Facilities to Facilities_Webpage.html. • Hyperlink the text Membership Details to Membership_Webpage.html. • Save the document. • Save the document as web page.



Lab Exercise 2: 7th International festival is going to take place next month. You have been selected from your school to give a presentation on various museums present in your country. You decide to launch a web site for the same. The user must be allowed to choose either HTML or presentation format. Use Word to create a document to describe about the Museums present in Malaysia. Create the same in PowerPoint for presentation format. Give the address and phone numbers of the museums in Excel. Integrate these details and launch a web site. Creating Entry Page Using Word Document Observe the following figures: Entry Page:

Format for the text in the document:

Museums in Malaysia Garamond, 72, brown and center align. Welcome to Museums in Malaysia Comic Sans MS, 14, black and center align HTML Format and Presentation format Times New Roman, 20, black and center

align

Create a Word document as shown in the figure and save it as Entry_Page_Word.doc.



Creating Home Page Using Word Document Observe the following figures: Home Page (Page1):


Museums in Malaysia Garamond, 72, brown and center align Welcome to Museums in Malaysia Comic Sans MS, 14, black and center align Museum names Comic Sans MS, 20, black and center align Presentation Times New Roman, 20, black and right align



Page2:


National Museum Garamond, 36, red and left align Description Arial, 16, bold, green and center align Back Times New Roman, 20, black and left align Other Details Times New Roman, 20, black and right align

Page3:

Format for the text in the document: Same as Page2



Page4:

Format for the text in the document: Same as Page2 Page5:

Format for the text in the document: Same as Page2



Page6:

Format for the text in the document: Same as Page2 Insert the following bookmarks:

• On page 1, insert the bookmark Home. • On page 2, insert the bookmark National. • On page 3, insert the bookmark Asian. • On page 4, insert the bookmark Royal. • On page 5, insert the bookmark War. • On page 6, insert the bookmark it as Police.

Create the following hyperlinks:

• Link the museum names on page1to the appropriate bookmarks. • Link the text Back that appears in all the pages to the bookmark Home.

Save the document as Home_Page_Word.doc. Save the document as web page with the name Home_Page_Webpage.html.



Creating Excel Workbook Observe the following figures: Book1:

Format for the text in the worksheet: National Museum Georgia, 36, bold and red. Time, Admission, Address and Phone Bookman Old Style, 16, bold and brown. Description Bookman Old Style, 14 and green.

Back and Presentation Times New Roman, 16 and black.



Book2:

Format for the text in the worksheet: Same as for Book1.



Book3:

Format for the text in the worksheet: Same as for Book1. Book4:

Format for the text in the worksheet: Same as for Book1.



Book5:

Format for the text in the worksheet: Same as for Book1. Create the workbooks as specifies and the corresponding web pages.



Creating Presentation Observe the following figures: Slide1:

Format for the slide: Design Template Glass Layers Slide Layout Title slide



Slide2:

Format for the slide: Design Template Glass Layers Slide Layout Title and Text Slide3:

Format for the slide: Design Template Glass Layers Slide Layout Title, Text, and Content



Slide4:

Format for the slide: Design Template Glass Layers Slide Layout Title, Text, and Content Slide5:

Format for the slide: Design Template Glass Layers Slide Layout Title, Text, and Content



Slide6:

Format for the slide: Design Template Glass Layers Slide Layout Title, Text, and Content Slide7:

Format for the slide: Design Template Glass Layers Slide Layout Title, Text, and Content Create a presentation as shown in the figure and save the presentation as Presentation.ppt.



Integrating the projects Open the file Entry_Word.doc and perform the following:

• Hyperlink the text HTML with the file Home_Page_Webpage.html. • Hyperlink the text Presentation with the file Presentation.ppt.

Open the file Home_Page_Word.doc and perform the following:

• Hyperlink the text Presentation with the file Presentation.ppt. • Hyperlink the text Other Details with the respective web pages created using Excel.

Open the file National.xls, Asian.xls, Royal.xls, War.xls and Police.xls and perform the following:

• Hyperlink the text Presentation with the file Presentation.ppt. Technical Terminology

Merging - The technique of combining more that one cell to spread data across cells.

Summary In this unit, you learnt that

Through hyperlink and action buttons you can integrate projects created in various layouts.

You can merge cells, to spread data across cells, using the merge button present in the Standard toolbar.

Assignment

1. Can you spread data across cells in Excel. If yes, which option would you use?

2. Is it possible to integrate web pages through action buttons?

3. Create an interactive web page describing about the places that you have recently visited.



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

competencies to be achieved.

Name: Subject: Programming and Development Tools

Unit: Project Integration

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

Date Project Integration C1 C2 C3 C4

Comment

Competency Codes: C1 = Create interactive web pages using Word Information Layout

C2 = Create interactive web pages using Data Information Layout

C3 = Create interactive presentations using Presentation Layout

C4 = Integrate the web pages created using various layouts


Unit 1.4

Technology

Transcript of Unit 1.4