CONTEXTUALIZED ONLINE SEARCHING
 Be sure to name your file appropriately.
Tricks in using Google Search
a. Use quotes (“”) to search for an exact
phrase. The quotation replaces the Plus sign “+”
as Google search operators.
e.g. you can search “Mars” “Chocolate” “Logo”
b. Use an asterisk (*) within quotes to specify
unknown or variable words. It’s helpful if
you’re trying to determine a song from its lyrics,
but you couldn’t make out the entire phrase (e.g.
“imagine all the * living for today”), or if you’re
trying to find all forms of an expression (e.g. “*is
thicker than water”)
c. Use the minus (-) sign to eliminate results
containing certain words.
e.g. jaguar-car
d. Use “DEFINE:” to learn the meaning of words
– slang included.
e.g. “DEFINE: mortgage”, “DEFINE: KSA”,
“DEFINE:bae”
e. Press the mic icon on Google’s search bar
and say “flip a coin” or “heads or tails”.
Press the mic icon on Google’s search bar,
and say “give me a love quote” or “I love
you”.
f. Search images using images
Additional Information
 You can play Atari breakout by searching it on
Google.
 Use Google Scholar for searching more reliable
information.
MICROSOFT WORD
Word Processing – software that is designed for the
entry, editing, and printing of documents.
Windows Version = Microsoft Word (MS Word)
Word processing documents include letters,
memorandums, faxes, mail merges, reports, one page
flyers, e-mail.
Parts of MS Word Screen
Viewing Documents
MS Word documents can also be viewed in layouts that
allow special functions.
Web Page – looks much like normal vie but is saved in a
different format (html file).
Outline – looks much like normal view but includes
various levels indicating indentions and tabs.
Saving Documents
 Always save in a familiar location.
- Create a folder for multiple documents
- MS Word will add a file extension to the
name.
 File names are followed by a period and a three
letter extension.
- MS Word = .doc
 Save As vs. Save
- Save a new document with Save As.
- To update an existing document, use Save.
 Always be sure to make a backup copy.
Editing Features Include:
MS Word is equipped with many feature that allow a
user to easily edit (modify) a document.
Cut, Paste, Insert, Delete (right of cursor), Backspace
(left of cursor), Typeover or Overwrite (press insert key),
Search, Find/Replace
Shortcuts:
Ctrl X- Cut
Ctrl V – Paste
Ctrl C – Copy
Ctrl F – Find
Character Formatting
 Font: a group of characters that have a similar
appearance.
 Font Attributes: additions that enhance your
font for emphasis.
 Font Size: the size of characters.
 Type Face: a set of characters with a common
style and design.
 Bold/Boldface: a formatting option that makes
selected words print darker than normal.
 Italics: characters are evenly slanted toward the
right.
 Subscript: text that has been lowered vertically.
 Superscript: text that has been raised vertically.
 Underline: A horizontal line that is placed
beneath characters.
 Border: a frame that surrounds pictures or text.
 Bulleted List: a list of key points, each
preceded by a symbol for emphasis.
 Hanging Indent: All lines except the first lines
are indented.
 Indent: Insetting text from one of the margins.
Paragraph Formatting
 Line Spacing: the amount of space between
lines in a document (Single space, double
space, triple space, etc)
 Page Break: indicates that the maximum
number of lines have been keyed on a page and
a new page is beginning.
Hard break – created by the user.
Soft break – created by the word
processing program
 Tab Key: allows the user to move the cursor a
predetermined number of spaces.
 Text Wrap: feature that allows text to flow
around an object or graphic.
 Widow/Orphan Protection: feature that will
prevent widow/ orphan lines in a document.
 Orphan – first line of a paragraph at the
bottom of a page.
Widow – last line of a paragraph at the
top of a page.
 Margins: space around the edges of a page.
 Page Orientation: direction a document is
printed.
Portrait – taller than a wide
Landscape – wider than tall
 Headers: repetitive text located in the top
margin
 Endnotes: References used to credit the source
of information
 Footers: references used to credit the source of
information or add explanations
Word Processing Tools (sometimes called utilities)
Spell Checker, Grammar Checker, Thesaurus,
Wizard, Help, Office Assistant, Comments
Mail Merging
DESIGN PRINCIPLES OF GRAPHICS
AND LAYOUT
The Basic Principles
1. Contrast – avoid elements on the page that are
merely similar. It is often the most important
visual element on the page.
2. Repetition – you can repeat color, shape,
texture, spatial relationships, line thicknesses,
sizes, etc. This helps develop the organization
and strengthens the unity.
3. Alignment – nothing should be placed on the
page arbitrarily
4. Proximity – items relating to each other should
be grouped close together.
5. Balance – a feeling of visual equality in shape,
form, value, color, etc. It can be symmetrical and
evenly balanced, or as asymmetrical and
unevenly balanced.

Steps: IMAGE MANIPULATION

1. Open Mailing Image Manipulation - the art of transforming an image

2. Start Mail Merge to convey what you want, rather than what the original
3. Click More Items image may have shown
4. Browse for the database Various Ways to Manipulate Image
5. Click Step by Step Mail Merge
 Resizing
MICROSOFT EXCEL  Cropping
Excel – a spreadsheet application software from  Color Adjustment
Microsoft. Excel 2016 is the latest version for windows.  Brightness & Contrast
 Combined Photos
Spreadsheet Origin: Invented by 1979 by Dan Bricklin  Combined Text & Photos
and Bob Frankston  Added Effects
Getting Familiar with Excel
Principles and Basic Techniques of Image Manipulation
 Start Screen 1. Background Image Processing – resources
 Excel interface elements about generating images, adding and removing
 Backstage view a background of an image using image
 Workbooks and worksheets – An excel manipulation techniques
workbook is made up of worksheets and chart 2. Combining and Merging Images – blending
sheets. The number of workbooks can hold is and merging multiple images into a single image
limited only by the computer memory. 3. Shadow Effect – using shadow effect will make
 Moving around in a worksheet the image realistic
 Data in Excel 4. Blending Color – you can use color blending to
 Excel Formulas match the background with other elements in the
 Formatting page
5. Proportion – when combining images, resize
MICROSOFT POWERPOINT the image to make it proportionate and realistic
6. Emphasis – there should be a focal point to a
5 Ways in Designing Effective Powerpoint Presentations page that will attract viewers. The element you
want to emphasize should be sharp, big, and
1. Make it BIG
most vibrant in your design
2. Keep it Simple
The 6 x 7 rules (No more than 6 lines per slide, Combining Text, Graphics, and Images
no more than 7 words per line)
3. Make it Clear 1. Transparent Shapes – add simple shapes with
4. Be Progressive a slightly transparency behind your text to clearly
5. Be Consistent see the text you want to emphasize
2. Fonts and Shapes – font and shapes should
Remember: complement each other. You can use rounded
 Communication is the key shapes with rounded fonts and sharp shapes
 Text to support the communication with sharps fonts
 Pictures to simplify complex concepts 3. Text and Background – text and background
should be aligned to have an organized look.
 Animation for complex relationships
You can align text with shapes or geometric
 Visuals to support, not to distract
figure in the image
 Sounds only when absolutely necessary
 4. Clean and Clear Background – use a clean
and clear background for the message to be
readable. Background should not washout your
message
Common Softwares in Using Image Manipulation
1. Adobe Photoshop – most common image
manipulation software made by ADOBE
2. GIMP (General Image Manipulation Program)
– free and open source raster graphics editor
used for image retouching and editing, free-form
drawing converting between different image
formats, and more specialized tasks
3. SKETCHUP – formerly known as Google Sketch
up, is a 3D modeling computer program for a
wide range of drawing applications such as
architectural, interior design, landscape
architecture, civil and mechanical engineering,
film and video game design.
PRINCIPLES OF WEB DESIGN
Characteristics of Web Pages
 Create building blocks of a website, like a page
in a book
 Require a browser such as Internet Explorer,
Firefox etc to be viewed
 Contain HTML (hypertext markup language)
code to define format and functions
 Include text, downloadable files, audio, video
and animation in different formats
 Allow non linear navigation to other pages
through hyperlinks
Elements of Web Page Design
 Emphasis
Common ways to emphasize:
a. Use of white space to make elements
stand apart
b. Bold, big, italics, different colors,
borders, etc
c. Effects (drop shadow, glow, texture0,
shapes, etc
 Contrast
Common ways to contrast:
a. Use of white space, reverse text, larger
size, italics
b. Borders, different colors and effects
c. Distinct labels and links
 Typography
Rules to remember:
a. Make content easily readable
b. Choose between mono-spaced and
proportional text spacing and stick to the
choice
c. Maintain a clean look by mixing serif and
sans serif fonts
d. Use fonts no bigger than 14-18 pts or
smaller than 12-10 pts for body text
e. Avoid dancing letters and words
f. Choose fonts that fit the character of
your site, easily readable on a computer
screen and widely available across
many browsers and operating systems
g. Provide alternatives for unsupported
fonts on different browsers
h. Use Cascading Style Sheets to define
and set characteristics and effects to
text
 Color and Graphics
Color – Rules to Remember
a. Understand the color wheel and how to
use color schemes
b. Limit mixing complementary colors such
as blue and orange, green and red
c. Use black and white in doubt
d. Test color schemes for readability by
visually impaired readers
e. Provide alternate schemes for old
computers
Example of Color Schemes
a. Monochromatic: uses only one color
with its different tints and shades. For
example, www.abercrombie.com
b. Analogous: uses three to five colors next
to each other on the color wheel. For
example, www.fahrenheit.com
c. Complementary: uses colors opposite to
each other on the color wheel to provide
stark contrast. For example,
www.ezitsolution.com
Graphics: Rules to Remember
a. Use the right format for different images.
Graphic Interchange Format (GIF) for
non-photographic images up to 256
colors
Joint Photographic Experts Group
(JPEG) for photographs and images
with rich and complex color variations
b. Place buttons and boxes at the top of
the page
c. Use small but standard icons for
recognizable concepts such as mail,
home page, money, etc
d. Provide matching text links for every
graphic link to help low bandwith users
e. Use browser-safe colors for graphics
and backgrounds
f. Make animated graphics turn off
automatically to minimize distraction
g. Avoid dancing or flashing images
 Navigation
Rules to Remember
a. Group navigation tools in one place
b. Keep tools vertically or horizontally
aligned
c. Present all available features as buttons,
bars, tabs, text links to help visual
direction
d. Maintain consistent use of tools and
terminology
e. Place ‘bread crumb trail’ visual clues to
where the user is
f. Provide meaningful and relevant links
g. Divide browser window into separate
frames or sections to vies graphics
clearly
h. Create uniform information presentation
to provide for different monitor settings
i. Use a site map or an index
 Visual Balance
Common ways to achieve:
 a. Placing elements based on how eyes  Using Online Website Builder
scan and follow
b. Considering alignment, repetition, and Sample Website Builders
proximity of elements WYSIWYG – the acronym of What You See is What You
c. Using text links, navigation tools, Get. This means that whatever you type, insert, draw,
graphics such as arrows, pointing place, rearrange, and everything you do on a page is
fingers, curvy lines, etc what audience will see
Principles of Web Page Content WORDPRESS – a free and open-source content
 Clarity management system (CMS) based on PHP and MySQL.
To function, WordPress has to be installed on a web
 Brevity
server, which would either be part of an Internet hosting
 Informality
service or a network host in its own right
 Accuracy
 Relevance  www.wix.com
 Consistency  www.sitebuilder.com
 Compatibility of layout and design  www.weebly.com
Do’s

 Address the target audience directly

 Customize pages to suit different users
 Communicate with visual elements, such as
white space, contrast, layout, etc.
 Provide alternate graphics and multimedia
versions for low bandwidth users
 Keep the design user – friendly
 Provide consistent navigation tools
 Provide ‘breadcrumb’ trails
 Provide links to other relevant sites
 Get consent before publishing outside material
 Test the site early and often to check functions,
active links, and relevance
 Ask for user response or feedback
 Update often and publicize the site

Don’ts

 Don’t restrict or limit your audience

 Don’t make user think – make everything
obvious and self-explanatory
 Don’t abuse the reader’s patience; keep
information straight forward
 Don’t make your site hard to navigate
 Don’t use large images/files that slow down
browsing speeds
 Don’t overuse multimedia and graphics
 Don’t fill pages with too much information
 Don’t use jarring colors and fonts
 Don’t keep inactive links
 Don’t publish outside content without consent

BASIC WEB PAGE DESIGNING

Introduction

 How basic is basic? Website making is very

easy right now …
 First of all, the internet is free and secondly, it is
of free courtesy of many website providers that
provide basic functionalities for our website to
function

How to Create a Website

 Create Website using Microsoft Word

1. Open Microsoft Word
2. Type anything on the page like “Welcome to
my Website”
3. Click on File > Save as > Browse
 Using WYSIWYG
 Using Notepad