ADT MONTESSORI SCHOOL, INC.

499 Capinpin St., Manggahan, Pasig City

Computer 9
Subject
Textbook in Digital Creativity Using ADOBE CS 6(K to 12) and Internet
Reference/s
Pictures, Laptop, Projector, Visual Aids, and Handouts
Materials
Gr./Yr. Level: Grade 9
School Year: 2018 - 2019 Date/s :
Quarter : 3rd Quarter No. of Days : 6 days

CONTENT STANDARD: The learners demonstrate an understanding of the basic concepts in Dreamweaver Basics.
PERFORMANCE STANDARD: The learners independently create a webpage in Dreamweaver.
TOPIC: Introduction to Adobe Dreamweaver CS5
LEARNING
LEARNING CONTENT LEARNING EXPERIENCES EVALUATION INTEGRATION
OBJECTIVES
 Familiarize oneself Introduction to Days 1-2  Oral Values
with Dreamweaver Dreamweaver questioning integration-
CS5 environment Preparatory Activities:  Written
 Identify each Examination Always follow
Dreamweaver’s 1. Prayer  Group Activity the
elements 2. Checking of Attendance  Hands on procedure to
 Perform basic 3. Review: Ask some easy access
commands in using feedback about the in making
the program difficulties that the your own
 Determine the steps students encountered in website.
in defining a Local their previous lesson in
Dreamweaver CS5 is a
Site HTML. W3C
web HTML editor intended
 Create a webpage for both beginners as well 4. Motivation: Show the Validation it
in Dreamweaver as experienced window interface of helps the
professionals to design Adobe Dreamweaver. user
websites. authorize the
Lesson Proper: current
Browser Lab document or
With Adobe BrowserLab, 1. Discuss each a selected
designer can immediately component of DW tag.
see web pages and local and its meaning.
content using several 2. Explain the new Language and Arts
presentation and features of the
comparison tools. program.
3. Demonstrate how to
New Features of Adobe start with DW. Show
Dreamweaver CS5 how to do basic
commands.
Business Catalyst 4. Ask students to
Integration recite for each of the
Adobe Business Catalyst elements of
is a hosted function that Dreamweaver.
replaces long-established 5. Demonstrate how to
desktop tools with one, define a local site
essential platform for and explain its
beginners and web essence.
designers. 6. Create the first page
in DW.
CSS Enhancements 7. The students may
CSS Disable/Enable proceed to open the
CSS Disable/Enable lets Adobe Dreamweaver
the user disable and re- program and
enable CSS properties explore.
directly from the CSS
Styles panel. Generalization:

CSS Inspection People often think it is

Inspect mode allows extremely difficult to make
designer to visibly show website. That is not a case!
the CSS box model Everyone can learn how to
properties including make a website just follow
padding, border, and the procedure or step by
margin, in detail without step.
reading code or requiring It is easy and fun to learn.
a separate external utility
such as Firebug. Day 3

CSS Starter Layouts Reinforcement/Enrichmen

Dreamweaver CS5 t Activities:
includes efficient and
basic CSS course layouts. Let the students answer
The difficult fall down exercise.
selectors from the CS4 Tear the page/s for
layouts have been compilation
indifferent and replaced
with beginners, easy-to- 1. Exercise I: Fill in the
understand classes. Blanks, p. 339 of the
workbook
Dynamically Related Files 2. Exercise II:
The Dynamically Related Identification, p. 340 of
Files feature lets the user the workbook
find all of the external 3. Exercise III: Definition,
files and scripts needed to p. 340-341 of the
collect PHP-based Content workbook
Management System
(CMS) pages, and Days 4-6
displays their filenames in
the Related Files toolbar. Hands-On:

Live View Navigation 1. Skills Practice, pp. 341

Live View Navigation – 342 of the workbook
activates links, allowing 2. I-Book Interactive
the user to link with game
server-side applications
and dynamic data. Assignment:
PHP Custom Class Code
Hinting 1. Ch
PHP Custom Class Code oose any of the
Hinting shows the correct activities provided in
syntax for PHP functions, the workbook. Tear the
objects, and constants, page/s for compilation.
helping the user type 2. As
more accurate code. k the students to bring
their favorite pictures
Simplified Site Setup to be used on the next
The newly redesigned Site lesson.
Definition dialog box has
a new name called Site
Setup dialog box makes it
easier to set up a local
Dreamweaver site so that
the user can immediately
begin creating web pages
right away.
Site-Specific Code
Hints
The Site-specific code
hints feature lets the user
modify his/her coding
environment when
working with third-party
PHP libraries and CMS
frameworks such as
WordPress, Drupal,
Joomla!, or other
frameworks

Subversion Support
Enhancements
Dreamweaver CS5
expands its support for
Subversion, allowing the
user to move, copy, and
delete files locally, and
then synchronize changes
with his/her remote SVN
repository.

Starting and Closing

Dreamweaver

To start Dreamweaver
CS5

Using the Start Button

from the Taskbar
• Click the Start
button then
the start
menu will
open.
• Select All
Programs and
another list of
programs will
appear.
• Choose Adobe
Dreamweaver
CS5 and the
program will
be opened.

Opening & Saving

Dreamweaver

To Close/Exit
Dreamweaver CS5, the
user can use any one of
the following actions:
• Click on the
 Close/Exit button.
• Press the ALT + F4
combination keys.
• Click on the File
menu and then
select the Exit
option.

To open an existing
document:
• Click on the
Open button
on the
Standard
toolbar.
• Press the
combination
keys of Ctrl +
O.
• Click on the
File menu and
select the
Open option.
• Double-click
on the file in
the Files Panel
(Local Site
folder).
To add a new
document:
• Click on the New
 button on the
Standard toolbar.
• Press the
combination keys of
Ctrl + N.
• Click on the File
menu and select
New.
To save a document:
• Click on the Save
button on the
Standard toolbar.
• Press the
combination keys of
Ctrl + S.
• Click on the File
menu and select
Save.
Dreamweaver
Environment and Its
Elements

When Dreamweaver CS5

opens, a welcome screen
will be displayed and
introduces some basic
options to start creating
websites.

Dreamweaver
Environment and Its
Elements

• To create a new
website, basically
the user will want to
create a new HTML
document.
• Web pages must be
written using HTML,
but luckily this is
the simplest
language.
• CSS (Cascading
Style Sheets) works
with HTML pages
together to alter the
presentation of the
website.
• If the user has a
previously created
website, the user
can locate it by
clicking on Open
folder.

Dreamweaver
Environment and Its
Elements
Dreamweaver
Workspace

Elements of
Dreamweaver
Environment

A. The Application Bar

– Across the top of the
application window
contains a workspace
switcher, menus and
other applications
controls.

B. Workspace Switcher
– helps the user
reorganize Dreamweaver
windows.

C. The Document
toolbar – consists of
buttons that helps the
user switch windows in
different views easily.

• Show Code View –

contains coding
environment for
writing and editing
HTML and other
kinds of codes.
• Show Code and
Design Views –
lets the user splits
the Document wind
ow between
Code and
Design views.
• Show Design
View - displays
the Design view
environment for
 visual page layout,
editing and rapid
application
development.

• Live View -
displays the specific
codes that a
browser uses to
execute the page,
and can dynamically
change as the user
interact with the
page in Live View.
• Preview/Debug in
Browser - allow
the user to preview
or correct his/her
document in a
browser.
• File Management
- displays the File
Management pop-
up menu.
• W3C Validation –
it helps the user
authorize the
current document
or a selected tag.
• Check Browser
Compatibility -
 Lets the user test if
his/her CSS is
compatible across
different browsers.
• Visual Aids – allow
the user to use
different visual aids
to design his/her
pages.
• Refresh Design
View - refreshes
the
document’s Design
view after the user
make changes
in Code view.
D. Document Title -
allow the user to type a
title of a document that
will be displayed in the
browser’s title bar.

E. The Standard toolbar

- contains buttons for
common functions from
the File and Edit menus
F. The Document
window - displays the
current document as the
user creates and edits it.

• Design view
A Design environment is
use for visual page
layout, visual editing, and
rapid application
development.
• Code view
A Code view environment
is use for writing and
editing HTML, JavaScript
and server-language
code.

• Split Code view

A split version
of Code view that lets the
user scrolls to work on
different sections of the
document at the same
time.
 • Code and Design
view
Allow the user to see
both Code view
and Design view in a
single window and in one
document at the same
time.
• Live view
Similar
to Design view, Live view
displays a more realistic
representation of what
his/her document will look
like in a browser, and
allows the user to interact
with the document
exactly as the user would
in a browser.
• Live Code view
Only available when
viewing a document
in Live view.
The Coding toolbar
The Coding toolbar having
its buttons that allows the
user to perform many
standard-coding
operations, such as
collapsing and expanding
code selections,
highlighting invalid code,
applying and removing
comments, indenting
code, and inserting
recently used code
snippets.

The Style Rendering

toolbar
The toolbar contains
buttons that let the user
see how his/her design
would look in different
media types if the user
uses media-dependent
style sheets.
• Render Screen
Media Type Shows
the user how the
page appears on a
computer screen.
• Render Print Media
Type Shows the
user how the page
appears on a
printed piece of
paper.
• Render Handheld
Media Type Shows
the user how the
page appears on a
handheld device,
such as a mobile
phone or a
BlackBerry device.
• Render Projection
Media Type Shows
the user how the
page appears on a
projection device.
• Render TTY Media
Type Shows the
user how the page
 appears on a
teletype machine.
• Render TV Media
Type Shows the
user how the page
appears on a
television screen.
• Toggle Displaying of
CSS Styles lets the
user enable or
disable CSS styles
• Design-time Style
Sheets Lets the
user specify a
Design-time style
sheet.
• Design-time Style
Sheets Lets the
user specify a
Design-time style
sheet.

The Property Inspector

Property Inspector allows
the user see variety of
changes for his/her
selected object or text
properties
Status Bar
Status bar is place at the
bottom of
the Document window
provides additional
information about the
document the user is
creating.

• The Tag selector -

shows the hierarchy
of tags surrounding
the current
selection.
• Select tool –
enables and
disables
the Hand tool.
• Hand tool – lets
the user click the
document and drag
it in
the Document wind
ow.
• Zoom tool and Set
Magnification
pop-up menu - let
the user set a
magnification level
 for his/her
document.
• Window size pop-
up menu
lets the user resize the
Document window to
decide or custom
dimensions .
• Document size and
download time
shows the estimated
document size and
estimated download time
for the page, including all
dependent files such as
images and other media
files.
• Encoding
indicator – shows
the text encoding
for the current
document.
K. Panels
Let the user examine and
modify his/her work.
• The Insert panel
Contains buttons for
inserting various types of
objects, such as images,
tables, and media
elements, into a
document.

• The Common
category
Allows the user to create
and insert the most
familiar used objects like
images and tables.
• The Layout
category
Lets the user insert
tables , table
elements , div tags ,
frames, and Spry
widgets.
• The Forms
category
Contains buttons for
creating forms and
inserting form elements,
including Spry validation
widgets.
• The Data category
Lets the user insert Spry
data objects as well as
other dynamic elements
like record sets, repeated
regions, and record
insertion and update
forms.
• The Spry category
Contains buttons for
building Spry pages,
including Spry data
objects and widgets.
• jQuery Mobile
category
Contains buttons for
building sites that use
jQuery Mobile.
• The InContext
Editing category
Contains buttons for
building InContext editing
pages, including buttons
for Editable Regions,
Repeating Regions, and
managing CSS classes.
Prepared by: Submitted to:

________________________ ______________________
MS. CATHERINE R. ZINAMPAN DR. FLORENTINA R. LIZANO
Subject Teacher in T.L.E-9 OIC/School Consultant