1

Syllabus in TLE 8

(Fundamentals of Web Design and Development 2

And Photo Editing using GIMP Program)

First Quarter

Grade Level Standard

The learner demonstrates understanding about the process of creating standards –based websites using HTML and CSS ( Cascading Style Sheet )

Content The learner demonstrates understanding how to create web pages, explain the different HTML tags and CSS style

Performance Standard

The learner transfers learning by: applying the standards in creating websites and manually code and design a website for easy management.

Time Frame Topic Learning Competencies Assessment

Week 1 Orientation

Rules and regulations

Requirements

Student’s Activity Program

Grading System

Pre-test

Week 2

Internet and Internet Etiquette

Principles of web design

Creating Graphics for the web

Basic documentation and

Describes through a diagram how network and internet works

Generates a list of proper etiquette to be used in the internet

Formative : Group Sharing Summative:

Video Presentation Illustrations

Activity 1 My Diagram of

2

storyboarding process for website development

Valuing: Following appropriate formats ( for standards)

Understands the Basic Principles of web design

Creates graphics using paint

Illustrates the structure of a website by creating a site storyboard

the Internet

Activity 2 Netiquette Formative:

Explain the structure of a website using the One stray Team stay method

Discussion Summative:

Create graphics using MS-Paint

Illustrate the structure of a website by creating a site specification and site storyboard

Week 3

Creating Content Using Productivity Tools

Converting Microsoft Office Documents into web Page

Valuing :

Following appropriate formats ( for standards)

Creates document

( RESUME) in MS Word and convert it into webpage

Creates Slide Presentations and convert it into web page

Creates worksheet and convert it into webpage

Formative:

Recitation

Discussion Summative:

Converting Microsoft Office Documents into web Page

3

Week 4

The Hypertext Markup Language (HTML)

Requirements in creating HTML documents using a text editor

HTML Basics

HTML TAGS

Indentions

Empty Spaces

Tag Attributes

Formatting Text

Character Entities Valuing:

Show accuracy in typing HTML Tags

States the uses of HTML

Describes the structure of an HTML document

Explains the different HTML Tags

States the recommendations of the W3C and WHATWG in creating well-formed HTML documents

Formative:

Identify the html tag using Lap Clap Click

Summative:

Creating a HTML Chart

Post Test

Week 5

First Mid Quarter Examination

Week 6

Lists

Inserting Images

Inserting Links

Creating Bookmarks

Mail to Links Valuing: Understanding the importance of following the html tags accurately.

Explains the requirements in creating HTML documents.

Produces a personal website using HTML and text editor.

Formative

Following the instruction Summative

Creating a website Example

Week 7 Nutrition Month

Image Maps

Frames

Inserting Multimedia

Explains the Nutrition Month Theme

Applies tags in inserting Multimedia

Formative:

Write an essay about the nutrition month theme using the HTML tags

4

Valuing: Following writing standards

( formats)

(select video related to Nutrition)

Produces a personal website using HTML and text editor

Transfer Goal: In line with the Nutrition Month celebration, the TLE Dept. will have an activity tag as:”Fiesta sa Gym: Halina at Makisaya sa TLE Day siguradong may kita”

This is to showcase the talents and skills learned in different components, so students will have a chance to portray the role of an entrepreneur, baker, programmer, web developer, artist etc. This is also a way for the students to experience the real world of work.

Summative

Create PERSONAL SITE show the following information.

Personal data

Educational Background

Hobbies

Organizations and other activities

Week 8

Page Templates a. Creating Tables

B. Page templates

Creates and use tables to create

tabular data or layout sections in web pages.

Formative: Recitation Summative :

Creating your first table

5

Empty Cells

Other HTML Tags

Layouts Valuing: Focusing on a task

States how HTML should be written when creating templates

Personal Site Template Create a duplicate copy of the files found in the personal site that you created in the previous chapter. Convert it into a Personal Site Template.

Week 9 Introduction to Cascading Style Sheets A. Defining Styles B. CSS Selectors

Valuing : Show Perseverance and accuracy In applying styles using CSS.

States how page presentation is separated from content.

Identifies properties that affect element styles.

Creates and use style sheet to handle the presentation of a page

Create and use an external style sheet to handle the presentation of a website.

Formative: Group sharing Summative

Exercise 1 Using Inline Styles

Exercise 2 Using Internal Sheets

Exercise 3 Using External Style Sheets

Week 10

First Quarter Examination

6

Second Quarter

Grade Level Standard The learner demonstrates competence in performing basic photo editing, using Gimp Program

application by creating, drawing and editing images using the different tools.

Content Standard The learner demonstrates understanding of Gimp program and its tools; create, draw and edit

images.

Performance Standard The learner transfers learning by: Creating, drawing, retouching and repairing images using the different tools in Gimp program.

Time Frame

Topics Learning Competencies Assessment

Week 1

Getting to know the Gimp Program

Definition and Uses of Gimp

Starting Gimp and opening file

A tour of the Important GIMP windows and Menus

Defines and give the uses of Gimp software.

States the uses of each tool in the toolbox

Starts gimp and opens file

Manipulates computers and other equipment for classroom learning

Opens Gimp and Save file .

Pre-test

Week 2

How to start using the GIMP (Opening and Saving Images)

Gimp toolbox

Rectangular select

Ellipse

Free select

Fussy select

Opens and save gimp file.

Follows the use of toolbox windows and tool options dialog

Applies the use of each tool in the toolbox

Creates drawings of fruits and vegetables using the different tools.

Uses technology effectively and

Formative:

Identifying the Gimp toolbox using lap clap click method

Summative:

Draw different fruits using the

7

Paint Bucket Fill

Using the Text Tool

Valuing:

Correct use of tools

responsively in improving the quality of work

Produces projects using Gimp software

toolbox

Week 3

Parts of the Image Window

Menu bar

Rulers

Quick mask button

Location area

Scale menu

Status bar

Zoom control toggles

Image Windows menu File Menu

Edit

Select

View

Layer Menu

Colors menu Dialogs menu

User Interface and Keyboard shortcuts

Identifies the parts of the image window

Labels the parts of the Image window menu

Applies the use of keyboard shortcuts

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Creates different sizes of ID pictures using the ruler and guides.

Formative :

Labeling the parts of Image window

Summative

Creating ID pictures with different sizes

8

Week 4

Parts of Layers Dialog Box

Project 2 – Following instructions

Drawing of final tree in a planter

Repairing and Retouching

using clone tool and healing

tool

Valuing: Appreciate the Gimp Program

Identifies the parts of Layers Dialog Box

Labels the parts of Layers Dialog Box

Develops creativity in making projects.

Produces projects using gimp software.

Creates a collage using the different tools.

Performs the given exercises

Shows enjoyment in using the different tools

Follows instruction accurately

Edits images

Retouches images properly

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Formative: Labeling the parts of Layers Dialog box

Summative:

Collage Making using Gimp tools

Working with selection

Drawing of Final tree in a planter using Gimp program

Week 5 Second Mid-Quarter Exam

Week 6

Activity 3- Retouching and repairing

Person who has pimples and wrinkles

Fixing Red –Eye

Follows instruction accurately

Edits images

Retouches images properly

Produces projects using gimp software.

Formative:

Retouching and repairing images

9

Creating a simple and special Invitation for debut, wedding and other occasions

Valuing: Develop skills in repairing and retouching Show perseverance and creativity in creating invitations

Uses technology effectively and responsively in improving the quality of work

Performs the given exercises

Shows enjoyment in repairing and retouching

Appreciates gimp program

Formative: Recitation Summative

Creating a simple and special Invitation for debut, wedding and other occasions using Gimp Program

Week 7

Use of Layer Mask

Hands on Activity

Exercise 3 Pegasus and Me

Valuing:

Following instruction

properly

Explains the use of layer masks.

Performs the given exercises with accuracy

Explains the use of flattening the image

Uses technology effectively and responsively in improving the quality of work

Follows instructions accurately

Formative: Recitation Summative

Applying the layer mask

Week 8

Animation

Steps on how to animate using gimp program

Making their own Animation

Presentation of best work

Valuing:

Appreciate Animation

Defines animation

Applies animation.

Saves a copy of the file with the layers flattened

Follows the steps given by the teacher

Performs the given exercises

Creates a short movie using animation

Appreciates animation using Gimp program

Formative

Follow the steps in animation

Summative

Creates their own Animation

Note: Post Test will be given to students

10

Week 9

Creating design and Making project plan

Project Making ( T-shirt Printing)

Valuing: Show interest in business

Transfer Goal:

The knowledge and skills acquired by the students in Photo editing will enable them to create, edit, retouch and repair images and produce quality products such as T-shirt printing.

Practices creativity in making projects

Develops good working attitude

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Appreciates gimp program

Summative

Project Making

Week 10

Second Quarter Exam

11

Syllabus in TLE 8

(Fundamentals of Web Design and Development 2

And Photo Editing using GIMP Program)

Third Quarter

Grade Level Standard

The learner demonstrates understanding about the process of creating standards –based websites using HTML and CSS ( Cascading Style Sheet )

Content The learner demonstrates understanding how to create web pages, explain the different HTML tags and CSS style

Performance Standard

The learner transfers learning by: applying the standards in creating websites and manually code and design a website for easy management.

Time Frame Topic Learning Competencies Assessment

Week 1 Orientation

Rules and regulations

Requirements

Student’s Activity Program

Grading System

Pre-test

Week 2

Internet and Internet Etiquette

Principles of web design

Creating Graphics for the

Describes through a diagram how network and internet works

Generates a list of

Formative : Group Sharing Summative:

Video Presentation Illustrations

12

web

Basic documentation and storyboarding process for website development

Valuing: Following appropriate formats ( for standards)

proper etiquette to be used in the internet

Understands the Basic Principles of web design

Creates graphics using paint

Illustrates the structure of a website by creating a site storyboard

Activity 1 My Diagram of the Internet

Activity 2 Netiquette Formative:

Explain the structure of a website using the One stray Team stay method

Discussion Summative:

Create graphics using MS-Paint

Illustrate the structure of a website by creating a site specification and site storyboard

Week 3

Creating Content Using Productivity Tools

Converting Microsoft Office Documents into web Page

Valuing :

Following appropriate formats ( for standards)

Creates document

( RESUME) in MS Word and convert it into webpage

Creates Slide Presentations and convert it into web page

Creates worksheet and convert it into webpage

Formative:

Recitation

Discussion Summative:

Converting Microsoft Office Documents into web Page

13

Week 4

The Hypertext Markup Language (HTML)

Requirements in creating HTML documents using a text editor

HTML Basics

HTML TAGS

Indentions

Empty Spaces

Tag Attributes

Formatting Text

Character Entities Valuing:

Show accuracy in typing HTML Tags

States the uses of HTML

Describes the structure of an HTML document

Explains the different HTML Tags

States the recommendations of the W3C and WHATWG in creating well-formed HTML documents

Formative:

Identify the html tag using Lap Clap Click

Summative:

Creating a HTML Chart

Post Test

Week 5

Third Mid Quarter Examination

Week 6

Lists

Inserting Images

Inserting Links

Creating Bookmarks

Mail to Links Valuing: Understanding the importance of following the html tags accurately.

Transfer Goal:

The knowledge and skills acquired by the students in HTML will enable them to create and design website and will help to be productive and be a Web Developer, Web designer and a Programmer. .

Formative

Following the instruction Summative

Creating a website Example

14

Explains the requirements in creating HTML documents.

Produces a personal website using HTML and text editor.

Week 7

Image Maps

Frames

Inserting Multimedia

Valuing: Following writing standards

( formats)

Applies tags in inserting Multimedia

Produces a personal website using HTML and text editor

Formative:

Write an essay about the nutrition month theme using the HTML tags

Summative

Create PERSONAL SITE show the following information.

Personal data

Educational Background

Hobbies

Organizations and other activities

Week 8

Page Templates b. Creating Tables

B. Page templates Empty Cells

Other HTML Tags

Layouts Valuing: Focusing on a task

Creates and use tables to create

tabular data or layout sections in web pages.

States how HTML should be written when creating templates

Formative: Recitation Summative :

Creating your first table

Personal Site Template

Create a duplicate copy of the files found in the personal site that you created in the previous chapter. Convert it into a Personal Site Template.

Week 9 Introduction to Cascading Style Sheets

States how page presentation is

Formative: Group sharing

15

C. Defining Styles D. CSS Selectors

Valuing : Show Perseverance and accuracy In applying styles using CSS.

separated from content.

Identifies properties that affect element styles.

Creates and use style sheet to handle the presentation of a page

Create and use an external style sheet to handle the presentation of a website.

Summative

Exercise 1 Using Inline Styles

Exercise 2 Using Internal Sheets

Exercise 3 Using External Style Sheets

Week 10

Third Quarter Examination

16

Fourth Quarter

Grade Level Standard The learner demonstrates competence in performing basic photo editing, using Gimp Program

application by creating, drawing and editing images using the different tools.

Content Standard The learner demonstrates understanding of Gimp program and its tools; create, draw and edit

images.

Performance Standard The learner transfers learning by: Creating, drawing, retouching and repairing images using the different tools in Gimp program.

Time Frame

Topics Learning Competencies Assessment

Week 1

Getting to know the Gimp Program

Definition and Uses of Gimp

Starting Gimp and opening file

A tour of the Important GIMP windows and Menus

Defines and give the uses of Gimp software.

States the uses of each tool in the toolbox

Start gimp and opens file

Manipulates computers and other equipment for classroom learning

Opens Gimp and Save file .

Pre-test

Week 2

How to start using the GIMP (Opening and Saving Images)

Gimp toolbox

Rectangular select

Ellipse

Free select

Fussy select

Opens and save gimp file.

Follows the use of toolbox windows and tool options dialog

Applies the use of each tool in the toolbox

Creates drawings of fruits and vegetables using the different tools.

Uses technology effectively and

Formative:

Identifying the Gimp toolbox using lap clap click method

Summative:

Draw different fruits using the

17

Paint Bucket Fill

Using the Text Tool

Valuing:

Correct use of tools

responsively in improving the quality of work

Produces projects using Gimp software

toolbox

Week 3

Parts of the Image Window

Menu bar

Rulers

Quick mask button

Location area

Scale menu

Status bar

Zoom control toggles

Image Windows menu File Menu

Edit

Select

View

Layer Menu

Colors menu Dialogs menu

User Interface and Keyboard shortcuts

Identifies the parts of the image window

Labels the parts of the Image window menu

Applies the use of keyboard shortcuts

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Creates different sizes of ID pictures using the ruler and guides.

Formative :

Labeling the parts of Image window

Summative

Creating ID pictures with different sizes

18

Week 4

Parts of Layers Dialog Box

Project 2 – Following instructions

Drawing of final tree in a planter

Repairing and Retouching

using clone tool and healing

tool

Valuing: Appreciate the Gimp Program

Identifies the parts of Layers Dialog Box

Labels the parts of Layers Dialog Box

Develops creativity in making projects.

Produces projects using gimp software.

Creates a collage using the different tools.

Performs the given exercises

Shows enjoyment in using the different tools

Follows instruction accurately

Edits images

Retouches images properly

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Formative: Labeling the parts of Layers Dialog box

Summative:

Collage Making using Gimp tools

Working with selection

Drawing of Final tree in a planter using Gimp program

Week 5 Fourth Mid-Quarter Exam

Week 6

Activity 3- Retouching and repairing

Person who has pimples and wrinkles

Fixing Red –Eye

Follows instruction accurately

Edits images

Retouches images properly

Produces projects using gimp software.

Formative:

Retouching and repairing images

19

Creating a simple and special Invitation for debut, wedding and other occasions

Valuing: Develop skills in repairing and retouching Show perseverance and creativity in creating invitations

Uses technology effectively and responsively in improving the quality of work

Performs the given exercises

Shows enjoyment in repairing and retouching

Appreciates gimp program

Formative: Recitation Summative

Creating a simple and special Invitation for debut, wedding and other occasions using Gimp Program

Week 7

Use of Layer Mask

Hands on Activity

Exercise 3 Pegasus and Me

Valuing:

Following instruction

properly

Explains the use of layer masks.

Performs the given exercises with accuracy

Explains the use of flattening the image

Uses technology effectively and responsively in improving the quality of work

Follows instructions accurately

Formative: Recitation Summative

Applying the layer mask

Week 8

Animation

Steps on how to animate using gimp program

Making their own Animation

Presentation of best work

Valuing:

Appreciate Animation

Defines animation

Applies animation.

Saves a copy of the file with the layers flattened

Follows the steps given by the teacher

Performs the given exercises

Creates a short movie using animation

Appreciates animation using Gimp program

Formative

Follow the steps in animation

Summative

Creates their own Animation

Note: Post Test will be given to students

20

Week 9

Creating design and Making project plan

Project Making ( T-shirt Printing)

Valuing: Show interest in business

Transfer Goal:

The knowledge and skills acquired by the students in Photo editing will enable them to create, edit, retouch and repair images and produce quality products such as T-shirt printing.

Practices creativity in making projects

Develops good working attitude

Produces projects using gimp software.

Uses technology effectively and responsively in improving the quality of work

Appreciates gimp program

Summative

Project Making

Week 10

Fourth Quarter Exam

21