WEB DESIGN SYLLABUS

OVER-ALL GOAL OF THE DISCIPLINE

Secondary Education aims to teach the basic learning skills, inculcate knowledge, habits and values which are
fundamental elements of capabilities for more enlightened and properly guided citizens. The students are expected to
demonstrate understanding of his/her Personal Entrepreneurial Competencies, the environment and market as well as the
process/production and delivery of quality products/services and at the same time, internalizing in them practical way of
living a desirable attitude of a Filipino Christians.

DESCRIPTION OF THE COURSE

Web Design 3rd Edition aims to introduce and to practice the creation of a web page with styles and designs since
internet is widely used as source of information today. From this fact, came the idea of having a reference to amplify the
creation of Web pages. Aside from that, this book is a compilation of relative web design programs such as HTML5, CSS
3, Adobe Dreamweaver CS6, JavaScript, and XHTML. It also includes basic web concepts to concretize the ideas about
internet and web.

The hands-on modules enable the students to:

A. Express the concepts about web.

B. Relate web concepts to the necessity of learning web page design.
C. Recognize HTML5 tags and their uses.
D. Create a web design using paragraphs and list with different typography, background, images, tables, hyperlink,
forms, frames and meta.
E. Apply codes and tags in creating their web page.
F. Develop and enhance a web page using HTML5, CSS 3, Adobe Dreamweaver CS6, JavaScript, and XHTML.
Differentiate the codes and tags used in every web design styles.
G. Interpret logical sequence of the codes in every style.
H. Propose an interactive web design.
 TIME LEARNING CONTENT/
OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Chapter 1: Introduction to Web

Design
 Understand basic web identifying/ Web Design,
terminologies. Lesson 1: Basic Web Concepts telling/ 3rd Edition
 Discover the history of the naming p. 2-10
internet and the World Wide Web.
 Learn the common means of
accessing the web. F
 Identify the kinds of browser and I
elements. R
 Learn the basic design principles, S
web contents and planning. T

TIME LEARNING CONTENT/

OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Chapter 2: HTML

 Understand what HTML is. Lesson 1: Introduction to HTML Naming Web Design,
 Identify the different text editors. G p. 12-16
 Understand document declaration R
and metadata. A
 Learn what's new in HTML5. D
 Use Notepad to create HTML I
codes. N
 View HTML code in a browser. G
 Lesson 2: Tags and Attributes Describing/ Web Design,
 Describe tags and attributes. explaining p. 17-25
 Understand the structure of a tag.
 Identify container and empty tags. P
 Recognize new tags and elements E
in HTML5. R
 Know the outline algorithm. I
O
D
 Understand head and body tags Lesson 3: Head and Body Tags Describing/ Web Design,
 Identify heading, its attributes and explaining p. 26-33
grouping headings.

 Build, view, save, exit and print an Lesson 4: Creating an HTML Document Creating Web Design,
HTML file. p. 34-42
 Apply header, footer, navigation,
article, section.
 Understand generic container.

 Build and align paragraphs. Lesson 5: Working with Paragraphs Describing/ Web Design,
 Understand ordered and explaining p. 43-58
unordered lists.
 Apply line and multiple line breaks
and horizontal rule.
 Use, definition list, pre-formatting
text, invisible comments and
quote passages.
 Explore nesting tags and lists.
 Apply background and highlight. Lesson 6: Background, Text, Video and Creating Web Design,
 Understand embedding video and Audio p. 59-65
audio.
 Identify the tags for font style,
embedding audio and video.
 Learn special character entities.

 Understand how to place images Lesson 7: Images Describing/ Web Design,

on your web page. explaining p. 66-71
 Identify the different attributes for
images.
 Apply a background image on a
page.
 Apply graphics as hyperlink.
 Learn to create and place
animated GIF files.

 Understand what a table is and Lesson 8: Inserting Tables Describing/ Web Design,
how to create and modify it. explaining p. 72-86
 Identify the different attributes of
tables, rows and data.
 Learn to merge cells and nest
tables.
 Know how to add images to a
table.
 Build a table with invisible border.
 Understand what a hyperlink is Lesson 9: Working with Hyperlinks Describing/ Web Design,
and its types. explaining p. 87-92
 Build a link from one page to
another and link to a page on a
different website.
 Identify the attributes for anchor
and target attributes.
 Build an email link.
 Use graphic as a link.

 Understand what a form is. Lesson 10: Creating Forms Describing/ Web Design,
 Discover how to create a form's explaining p. 93-106
textbox, large text area, radio
buttons, check boxes, drop-down
menus, submit and clear buttons.
 Identify the input element,
different attributes for form, input,
text are, select and option.
 Learn to create email feedback
form.

TIME LEARNING CONTENT/

OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Chapter 3: Cascading Style Sheets

 Understand what CSS is and its S Lesson 1: Working with Style Sheets describing/ Web Design,
kinds. E classifying p. 108-116
 Identify the CSS structure, its C
capabilities and advantages. O
 Differentiate embedded, linked N
and external CSS. D

 Identify the kinds of elements in Lesson 2: Selectors, Div, Span, Link differentiating/ Web Design,
CSS. classifying/ p. 117-132
 Use display property, div tag, G explaining
span tag, class, id selector, R
pseudo-classes and links. A
 Understand class, id and multiple D
selectors and grouping selectors. I
N
G
 Understand typography. Lesson 3: Formatting Text with CSS Editing/ Web Design,
 Identify font text properties and Utilizing tools p. 133-149
CSS styles.
 Know how to change font, size,
case, alignment, indent, spacing
and color.
 Apply a background color and P
border to a text. E
 Build lists. R
 Use pseudo-elements. I
O
D
 Understand the concepts of box Lesson 4: Formatting Layout with CSS Describing/ Web Design,
model, element positioning, offset Explaining/ p. 150-163
and float Demonstrating
 Know how to wrap text around an
element and set margins.
 Apply a background color,
 background image and use repeat
background.
 Learn background position and
attachment.

 Apply a border, margin, padding Lesson 5: Formatting Border and Table Describing/ Web Design,
and set width and height. Explaining/ p. 164-176
 Use table background, style and Demonstrating
layout.

TIME LEARNING CONTENT/

OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Unit 4: Dreamweaver

 Describe what Dreamweaver is, its T Lesson 1: Introduction to Dreamweaver Explaining/ Web Design,
interface and elements. H Naming p. 178-190
 Identify the Menu Bar, Document I
Toolbar elements and Property R
Inspector. D
 Recognize the control panel
arrangement and show how to
open, close a panel.
 Explore design, code and split G
views. R
A
D
 Identify a web site and web page. I Lesson 2: Setting up a Website Describing/ Web Design,
 Understand how to start the N Explaining/ p. 191-198
Dreamweaver program and its G Demonstrating
 stat up screen.
 Explore ways to create files and
the block level elements.
 Show how to define and create a P
new website. E
 Apply adding a title and save the R
web page. I
 Learn to preview a web page in a O
browser and exit Dreamweaver. D

 Demonstrate how to transfer text Lesson 3: Working with Texts Describing/ Web Design,
into Dreamweaver. Explaining/ p. 199-208
 Show how to enter text. Demonstrating
 Learn to create heading
paragraph, line break
 Apply indenting a paragraph
 Know how to work with lists and
create unordered and ordered lists
 Explore changing the font face,
font size, font color of a selected
text or the entire page.
 Learn to copy text from another
document.

 Demonstrate how to manage Lesson 4: Working with Images Describing/ Web Design,
images in Dreamweaver. Explaining/ p. 209-223
 Identify the image types and Demonstrating
image accessibility preferences.
 Understand the methods of
 placing images into pages.
 Explore adding a border and
wrapping text and add space
around an image.
 Learn to add a background image
 Demonstrate changing the
background color and text color
 Show how to create rollover image
and spry menu bar.

 Identify the three link types. Lesson 5: Working with Hyperlinks Describing/ Web Design,
 Demonstrate how to link to Explaining/ p. 221-225
another website. Demonstrating
 Understand the use of an image
as a link.
 Learn to create an email link.

 Explore inserting a table, aligning Lesson 6: Working with Tables Describing/ Web Design,
it and removing or modifying the Explaining/ p. 226-232
border. Demonstrating
 Apply inserting texts and images.
 Demonstrate changing the
background, cell padding and cell
spacing.
 Show how to insert and delete
columns or rows.
 Learn to merge and split cells.
 Show how to open the frames Lesson 7: Working with Frames Describing/ Web Design,
panel. Explaining/ p. 233-236
 Demonstrate how to divide a page Demonstrating
into frames.
 Explore changing the size of a
frame.
 Apply inserting image or text in a
frame.
 Learn to delete a frame.

TIME LEARNING CONTENT/

OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Chapter 5: JavaScript

 Learn what JavaScript is and what F Lesson 1: Introduction to JavaScript describing/ Web Design,
it can do, its features and O classifying p. 238-248
disadvantages, guidelines and its U
proper use. R
 Know how to insert JavaScript T
lines in HTML. H
 Explore writing HTML tags inside
JavaScript.
 Apply positioning the scripts. G
 Understand the impact when R
scripts are placed in different A
positions. D
 Identify websites with JavaScript. I
N
 Discover what events are. G Lesson 2: Events and Popup Boxes Describing/ Web Design,
 Explore the different events that Explaining/ p. 249-254
 JavaScript can invoke. Demonstrating
 Identify the attributes for event
triggers. P
 Learn what popup boxes are. E
 Identify the different kinds of R
popup boxes. I
 Demonstrate the use of popup O
boxes. D

 Learn what variables are and their Lesson 3: Variables and Comparison classifying/ Web Design,
uses. Statements explaining p. 255-261
 Understand what expressions are.
 Learn what string literals are.
 Know how to evaluate
expressions.
 Identify and use comparison
statements.
 Describe logical and relational
operators.

 Understand what functions are. Lesson 4: Functions and Loops Demonstrating/ Web Design,
 Learn how functions are used. Utilizing tools p. 262-268
 Discover what loops are.
 Identify the different kinds of
loops available in JavaScript.
 Apply using loops.

 Understand what string objects or Lesson 5: String and Array Objects Recognizing/ Web Design,
strings are. Describing/ p. 269-273
 Learn how to manipulate strings. Applying
 Discover what arrays are.
 Learn how to declare and use an
array.
 Identify the properties and
methods for the array object.

 Understand what date object is. Lesson 6: Date, Time and Math Objects Describing Web Design,
 Learn how to use a date object. p. 274-280
 Identify the methods for date
object.
 Apply inserting simple time
stamps and JavaScript timing.
 Describe what math object is.
 Know how to use math object.
 Identify the properties of math
object.

 Understand what browser Lesson 7: Browser Detection, Cookies Explaining/ Web Design,
detection is, its properties and and Errors Demonstrating p. 281-286
importance.
 Describe what cookies are.
 Learn how to create, retrieve and
delete cookies.
 Understand why error detection
and trapping are needed.
 Identify the causes of errors.
 Learn how to detect and handle
errors.
 TIME LEARNING CONTENT/
OBJECTIVES FRAME TOPIC SKILLS REFERENCES

Chapter 6: XHTML

 Understand what XHTML is and Lesson 1: XHTML describing/ Web Design,

how it was made. classifying/ p. 288-290
 Identify the differences between demonstrating
XHTML and HTML.
 Apply proper nesting and tag
closing.
 Discover proper character cases of
elements in XHTML.
 Know the basic structure of
XHTML.
 Recognize proper character cases
of attributes in XHTML.

 Discover proper quoting of Lesson 2: More About XHTML Recognizing/ Web Design,
attribute values in XHTML. Demonstrating/ p. 291-294
 Understand what attribute creating
minimization is.
 Know what id attribute is.
 Describe how image alternative
texts and ampersand URLs are
regarded in XHTML.
 Learn what document type
definition is and its types.