Module 03

Design a website

Learning Outcomes
After completion of this learning module, you will be able to:
 Understand the basics of website designing
 Analyze functionalities of different web designing software.
 Apply appropriate website templates in website

91
Blank Page

92
 Learning Unit 01

Basics of Website Designing

Overview Remember
In this learning unit, you will learn basic concepts of web designing. These
Website design should
concepts will help throughout web designing process. After completion of this
be user friendly and
learning unit, you will be able to elaborate web designing, history of web
easy to navigate to find
designing, types of web designing, difference between web design &
specific information.
development, difference between web design & graphic designing and
importance of design in a website.
Web Designing [1]
Web designing is the process of planning, creation and updating of websites.
It also includes website structure, user interface, navigation ergonomics,
website layout, fonts and use of graphical appearance.

Elements of Web Design

Web design uses many key visual elements as all types of design such as:
Layout: This is the way the graphics, ads and text are arranged.
Color: The choice of colors depends on the purpose and client requirement;
it could be simple black-and-white to multi-colored design, conveying the
personality of a person or the brand of an organization.
Graphics: Graphics can include logos, photos, clipart or icons, all of which
enhance the web design.
Fonts: The use of various fonts can enhance a website design. Most web
browsers can only read a selected number of fonts, known as "web-safe
fonts".
Content: Content is the textual, visual or aural representation that is
displayed to the users. It may include: text, images, sounds, videos and
animations. Content and design can work together to enhance the message
of the site through visuals and text.

93
 History of web Designing [2]
In 1989, whilst working at CERN Tim Berners-Lee proposed to create a
global hypertext project, which later became known as the World Wide Web.
During 1991 to 1993 the World Wide Web was born. Text-only pages could
be viewed using a simple line-mode browser. In 1993 Marc Andreessen and
Eric Bina, created the Mosaic browser.
Tables – The beginning (1995)
The birth of browsers that could display images was the first step into web
design. The closest option available to structure information was the concept
of tables already existing in HTML. So putting tables within tables, figuring
out clever ways to mix static cells with fluid cells was the thing, started by
David's Siegel's book Creating Killer Sites.
JavaScript comes to the rescue (1995)
JavaScript JavaScript was the answer to the limitations of HTML. For instance, need a
popup window, want to dynamically modify the order of something? The
An object-oriented answer was JavaScript. However, the main problem here is that JavaScript is
computer programming layered on top of the fabric that makes the web work and has to be loaded
language commonly separately.
used to create The golden era of freedom – Flash (1996)
interactive effects To break the limitations of existing web design, a technology was born that
within web browsers. promised a freedom never seen before. The designer could design any
shapes, layouts, animations, interactions, use any font and all this in one tool
– Flash. The end-result is packed as one file and then sent to the browser to
be displayed.
CSS (1998)
Around the same time as Flash, a better approach to structuring design from
a technical standpoint was born – Cascading Style Sheets (CSS). The basic
concept here is to separate content from the presentation.
Remember
Mobile uprising – Grids and frameworks (2007)
Browsing the web on mobile phones was a whole challenge in itself. Besides
all the different layouts for devices, it introduced content-parity problems –
The look and should the design be the same on the tiny screen or should it be stripped
formatting are defined down?
in CSS, but the The first step to improvement was an idea of column grids. After a few
content in HTML. iterations, the 960 grid system won, and the 12-column division became
something designers were using every day. The next step was standardizing
the commonly used elements like forms, navigation, buttons, and to pack
them in an easy, reusable way. Basically, making a library of visual elements
that contains all the code in it. The winners here are Bootstrap and
Foundation, which is also related to the fact that line between a website and
an app is fading. The downside is that designs often look the same and
designers still can’t access them without knowing how the code works.
Do you know! Responsive web design (2010)
A brilliant guy named Ethan Marcotte decided to challenge the existing
approach by proposing to use the same content, but different layouts for the
JavaScript was design, and coined the term Responsive web design. Technically we still use
created in 10 days in HTML and CSS, so it is rather a conceptual advancement. Yet there are lots
May 1995 by of misconceptions here. For a designer, responsive means mocking up
multiple layouts.
Brendan Eich, then
working at Netscape Bootstrap is the most popular HTML, CSS, and JavaScript framework for
developing responsive, mobile-first web sites.

Do you know! The times of the flat (2010)

Designing more layouts takes more time, so luckily we decided to streamline
the process by ditching fancy shadow effects and getting back to the roots of
W3school is the best design by prioritizing the content. Flat design is also part of the process.
place where learner The bright future (2015)
can learn bootstrap The holy grail of web design actually make it visual and bring it into the

94
browser. Imagine that designers simply move things around the screen and a
clean code comes out! And it doesn’t mean changing the order of things, but
having full flexibility and control! Imagine that developers don't have to worry
about browser compatibility and can focus on actual problem solving!
Types of Web Designing [3]
Web design in term of layout can be further sub-divided into 03 categories:
Fixed design
Fixed web pages have a set width that won't alter when the browser is
resized, no matter what device the website is being viewed on. On smaller
devices, such as smartphones or tablets, content is harder to view and can
be annoying for users due to the need to scroll horizontally to view the rest of
the content on a page, or continuously ''pinch and expand'' to zoom into the
page's text. When the browser on a screen is enlarged or reduced, images
and text may visually fall apart on the screen.

Liquid or Fluid design

When resizing the browser, the content on the page spreads itself out to fill
the width of the browser when expanded, hence the term liquid design, and
will look enlarged or as though it has shrunk. The columns containing the
content on the webpage are built using percentages, rather than fixed
columns used in fixed design, therefore the columns increase or decrease in
size relative to each other.
Google Page Rank
Algorithm

A mechanism used
by Google to Rank
different websites in
Search Engine
Results.

Responsive Design
An approach to web design that provides an optimal viewing experience
across a wide range of devices.
Responsive web design is about creating web sites which automatically

95
adjust themselves to look good on all devices, from small phones to large
desktops. According to research survey Smartphone Users Worldwide is
Total 1.75 Billion in 2014. Now it is also a factor for Google Page Rank
Algorithm.
Bootstrap twitter library is used with html to create such design.

Website Layout in different Devices:

Difference between Web Design and Web Development [4]

Web Design & Web Development are two different sides of a coin. But they
are actually two completely different sciences that usually require two
different professionals to get the most out of your Website in both
perspectives.

Web Design
Web design is the process of creating the look, feel, and branding of a
Website. Working is done on the exterior (front end) features of Website.
Web design includes the creation of logos, graphics, and other advanced
visual elements.
A web designer:-
 Focuses on appearance of a website
 Uses HTML, CSS, and JavaScript
 Is competent in color scheming, graphic design, and information flow

96
  Creates a great user experience
 Is right-brained: Strong intuition, creativity, & imagination
Web Development
Web development is the programming (data processing) of your Website.
This should be seen as building the engine of an automobile. Web
development often refers to data driven Websites but also refers to other Remember
automated features such as mail scripts, shopping cart, registration system
that require a database. Designing for web and
print are two different
A web developer:- experiences. Just
 Add the functionality to Website because a designer is
 Creates the inner workings of a website good at one doesn't
 Is competent in programming languages (PHP, .NET, Python, C, mean they'll be good
Ruby) at the other.
 Develops the user interface
 Is left-brained: logic, linear thinking, technical
Resolution
 Hands-on coding experience is required (either your own products or
GitHub)
Difference between web design and graphic designing [5]
On several occasions it has been found that graphic web designers have the The maximum number
same approach and mindset as that of print media designing, even when of pixels that can be
they are designing for web. There are many differences between the two – displayed on a monitor,
quite crucial to know for success of web designers. Here are some of such expressed as (number
important differences which you need to know. of horizontal pixels) x
Fonts: (number of vertical
When designing for prints you do not have to worry about fonts displaying pixels), i.e., 1024x768.
properly in a browser. A reader will see the font which you have specified in
the designing process. In web designing a number of fonts replacing
techniques are used such as @font-face and Cufón which help in Remember
incorporating nonstandard fonts in designing for user convenience.
CMYK stand for Cyan,
Resolution:
Magenta, Yellow and
This implies the image quality and measures in pixels Web images should
not be more than 72 ppi since the image will load very slow on the screen. Black and RGB stand
Designing for prints does not have such restrictions . for Red, Green and
Monitor size: blue
When designing for print media a specific print size is considered and design
will be as per that specific page size. This is not the case in web designing
since where different monitor sizes and screen resolutions may be used.
Color Differences:
In print projects CMYK color model is mainly used since printing jobs are
mainly done using yellow, black, magenta and cyan inks. Websites are
always viewed on a screen and hence a RGB color model.
File sizes:
File size is never an issue for prints. The more details you have in your print
the better it is – these are normally of 10 or 20 MB and sometimes even of
100 MB. However, you cannot have such big files in a website. These would
take hours of loading time.
Layout Control:
The controlling ability of layouts on a webpage is quite different from different
designing tools like Illustrator and Photoshop. These programs shall help to
move graphics and texts precisely and just where desired. However, tables
and HTML do not allow such kind of flexibility.
Web Graphic Designing Is Continuous Process:
If designer for a printed piece it gets over once the design is sent to print. The
job is over. Web graphic designing is different. It is all about continuous
improvement, regular tweaking and continuous improvement.
Measuring Effectiveness:
It is difficult to measure the effectiveness of any print design, since once it is

97
out, you will never get an idea on how people are reacting to it and how
people are seeing it. However, a graphic designer for web can be easily
measured through Google analytics.
Dimensionality:
Print design is 2 dimensional and lots of attention is given to layout. Every
view is meant for a fixed canvas size which is not the case for web graphic
designing, where it is all about scrolling the page and is just opposite the
experience of canvas.

Experience:
Print designing allows walking through the information, selecting the
information, enhancing and explaining all the page elements. Web designing
is a great transient experience which is completely based on users’
movements.
Importance of design in a website [6]
There are so many options out there that allow you to build a quick website.
However, it’s important to remember that just because you can easily create
a website; it doesn't mean that it is a GOOD website.
Your website is your online Business. More people will potentially see your
website than your physical location. A well-designed site will add more
credibility to your business. Keep in mind that web users are more
sophisticated now, and they want to be able to trust their business to a
professional company. What better way of showing them that you are a
serious business than having a clean looking and easy to navigate website
Some other important design characteristics to keep in mind are:
 Use typography that is easy to read
 Always keep in mind that the average person actually only reads
about 30% of the text on a page
 Use headings, bulleted lists, text formatting and good spacing
 Create and follow a brand identity
 Have a clear message and call to action

98
 Learning Unit 02

Application Software’s for Designing a Website

Overview
Do you know!
In this learning unit, you will learn different web designing software’s. These
Photoshop was
software are used to create and design web pages. After completion of this
learning unit, you will be able to understand about different designing software, created in 1988 by
procedure to install designing software’s, such as adobe Photoshop, Adobe Thomas and John
Dreamweaver and adobe flash. Knoll

List of different designing software [1]

Number of designing software’s is available, most popular are mentioned below.

Adobe Photoshop
A leading paint program from Adobe Systems, Inc. For many years, Photoshop
has been the model against which other paint programs are compared. Initially, it
ran only on Macintosh systems, which was a strong selling point for Macs,
especially among graphic artists. Today, Photoshop runs on both Macs and
Windows PCs.
Adobe Dreamweaver
Adobe Dreamweaver is a proprietary web development tool developed by Adobe
Systems. Dreamweaver was created by Macromedia in 1997, and was
maintained by them until Macromedia was acquired by Adobe Systems in 2005.
Adobe Flash
Flash is vector base software to create animations.

99
 Procedure to Install Adobe Dreamweaver [2]

Above mentioned designing software’s have same procedure of installation,

therefore only adobe Dreamweaver cs5 installation procedure mentioned below:
1. Click and run the .exe

Remember

Adobe Dreamweaver
has multiple versions.

Dreamweaver 8, CS5,
CS6.
2. Click the Accept button to accept the license and continue installation.

Remember

Registration gives you

access to exclusive
benefits from Adobe
such as newsletters,
publications, and
invitations to Adobe
events and seminars.

Click Accept
3. The license key must be entered before the installation can continue.
Click the Next button to proceed.

100
 Remember

In CS6, Adobe ID Skip

option is not available
then do this;

 Disable internet
connection
 Then Restart Setup

Do you now

CS6 has 32-bit as well

as 64-bit Versions.
Input the serial number and click Next

4. Skip This Step button to finish the installation and enter your details
later.

Create an ID or skip the step

5. Choose a location and Click Install.

101
 Click Install
6. Dreamweaver will begin installing on your computer. When the installation
is finished, click the Adobe Dreamweaver CS5.5 button to open
Dreamweaver.

Click Adobe Dreamweaver

7. Select which file extensions should be associated with Adobe

Dreamweaver CS5.5. If unsure, leave the selections unchanged and click
the OK button.

102
 Click OK
8. Adobe Dreamweaver CS5.5 should now successfully open for the first
time.

Dreamweaver is opened

Designing Software’s practices[3]

Adobe Photoshop
Adobe Photoshop CS5 is a popular image editing software .This section is an
introduction to using Adobe Photoshop. Here you will learn how to get started,
how to use the interface, and how to modify images with basic editing skills.
GETTING STARTED
Begin by opening Adobe Photoshop CS5.
If already installed on a PC,
Click Start > Programs > Adobe > Photoshop CS5, or click on the shortcut on
the desktop.

103
 Setting up the document
Setting up your document correctly from the start will make your job much easier
as you work through your project. This will require some advanced planning. For
example, if your final output will be a brochure, you may need to set up your
document to be horizontal and double-sided.
To create a new document, click File > New. This will open the Document Setup
dialog box (Figure 2).

Remember

High resolution
increases the size of
the file. The standard
recommended
resolution for printed
images is 150-300, for
Web images it is 72.

Here you will be able to name your file, set up the correct page size, and
orientation for your document. Options include, but are not limited to:
Page Size and Orientation
Change the page size by typing in new values for width and height. Page size
represents the final size you want after bleeds or trimming other marks outside
the page. In the Preset dropdown menu you can find such common sizes as
letter, legal, tabloid, etc. Typing in exact values for Height and Width gives you
more control over the size and orientation of your page.
Resolution
Resolution is the number of pixels on a printed area of an image. The higher the
resolution, the more pixels there are on the page, the better the quality of the
image.
Color Mode
Choose a color mode that will best fit your project. For example, when making a
graphic for a web site choose RGB. When making an image for prints choose
CMYK.
Background Contents
Choose the background: white, color or transparent. When you have entered all
of your document settings click Ok.
Opening an image from a disk

104
If the image you have is saved on a disk,
Select File > Open, and then navigate to the disk drive where your image is
saved. Choose the image file and click Open. At this point, you may want to save
your image under a different name so that you can always have the original to fall
back on in case of a mistake. To save your file, select File > Save As and type in
the new name of the file in the dialogue box.

Menu Bar
If you look at the top of the screen you will see the Menu bar which contains all
the main functions of Photoshop, such as File, Edit, Image, Layer , Select, Filter
, Analysis, 3D,View,Window, and Help.
Toolbar
Most of the major tools are located in the Toolbar for easy access.
The Image
The image will appear in its own window once you open a file.
Image Name
The name of any image that you open will be at the top of the image window as
shown above.
Palettes
Palettes contain functions that help you monitor and modify images. By default,
palettes are stacked together in groups. These are the palettes that are usually
visible: Color, Adjustments and Layers. If none of the palettes are visible, go to
Window in the Menu bar and choose the palettes you need.
Palettes
Below is the description of the most commonly used palettes in Adobe Photoshop
CS5. Palettes used for more advanced image editing will be covered in the Adobe
Photoshop CS5 Tutorial -Intermediate.
Color, Swatches, Style
The Color palette (Figure 4) displays the current foreground and background
colors and RGB values for these colors. You can use the sliders to change the
foreground and background colors in different color modes. You can also choose
a color from the spectrum of colors displayed in the color ramp at the bottom of
the palette.

105
 Figure 4. Color palette

In the Swatches palette (Figure 5) you can choose a foreground or background

color and add a customized color to the library.

Figure 5. Swatches palette

The Styles palette (Figure 6) allows you to view, select, and apply preset layer
styles. By default, a preset style replaces the current layer style. You can use the
styles in the palette or add your own using the Create New Style icon.

Figure 6. Styles palette

History

The History palette (Figure 7) stores and displays each action performed allowing
jump to any recent stage of the image alteration. The alterations should be
created during the current working session; after saving or closing the document
the History palette clears all the contents. Each time you apply a change to an
image, the new state of that image is added to the palette. It is important to know
that once you click on any of the previous stages, all the changes that were made
after it will be lost.

106
 Figure 7. History palette

Adjustments
The Adjustment layers palette give you the ability to apply an effect to a group of
layers in Photoshop, and then you can edit that effect later, while preserving the
original layers.
Do you know!

Every Photoshop CS5

document contains at
least one layer.
Creating multiple
layers lets you easily
control how your
artwork is printed,
displayed, and edited.

Layers
Layers let you organize your work into distinct levels that can be edited and
viewed as individual units. You will use the Layers palette (Figure 6) often while
creating a document, so it is crucial to understand what it does and how to use it.

107
A) Layer Visibility -The eye shows that the selected layer is visible. Click on or off
to see or to hide a layer.
B) Layer Locking Options -Click the checkered square icon to lock Transparency;
click the brush icon to lock the Image; click the arrow icon to lock the Position;
click the lock icon to lock all options.
C) Layer Blending Mode -Defines how the layer’s pixels blend with underlying
pixels in the image. By choosing a particular blending mode from the dropdown
menu you can create a variety of special effects.
D) Fill -By typing in a value or dragging the slider you can specify the
transparency. Layers Palette color of the image or object.
E) Opacity -By typing in a value or dragging a slider you can specify the
transparency of the entire layer.
F) Layer Lock -The icon shows when the layer is locked and disappears when it is
unlocked. Double-click the icon to unlock the layer.
G) Layer Options Menu -Click the black triangle to see the following options: New
Layer, Duplicate Layer,
Delete Layer, Layer Properties, etc. Some of the options are presented as icons
at the bottom of the Layers palette.
H) Link Layers – Can be used to link layers together.
I) Layer Styles -If a layer has a style, an “F” icon shows at the bottom of the
Layers palette. Click the little black triangle to see style options.
J) Layer Mask -A grayscale image, with parts painted in black hidden, parts
painted in white showing, and parts painted in gray shades showing in various
levels of transparency.
K) Layer Set -This option helps to organize images with multiple layers. Click the
icon to create a folder for several layers.
L) Create New Fill or Adjustment Layer -Have the same opacity and blending
mode options as image layers and can be rearranged, deleted, hidden and
duplicated in the same manner as image layers. Click the icon and select an
option to create a new fill or adjustment layer.
M) Create New Layer -Click this icon to create a new layer.
N) Delete Layer -To delete a layer, select a layer in the Layers palette and drag it
to the trash can icon; or, select a layer and click the icon.

Toolbox
If you used other Adobe products, such as Illustrator or InDesign, you should be
familiar with the toolbox in Adobe Photoshop CS5 as it shares some of the tools

108
 from these applications. If you are a new user of Adobe products, you
should keep in mind that you might not need to use all of the tools. In
this tutorial, only the basic tools will be discussed in depth.

Selection Tools

Move: Used to select and move objects on the page.

Click the tool button, and then click on any object on the page you wish
to move.

Marquee: Selects an object by drawing a rectangle or an ellipse

around it.
Click the tool button, choose a rectangular or an elliptical marquee.
Drag the marquee over the area of the image you wish to select.

Lasso: Selects an object by drawing a freehand border around

it. Click the tool button, drag to draw a freehand border around the area
of the image you wish to select.

Magic Wand: Selects all objects in a document with the same

or similar fill color, stroke weight, opacity or blending mode. By
specifying the color range or tolerance, you can control what the Magic
Wand tool selects.

Crop: Click the tool button, then click and drag the tool over the
part of the image that you want to keep. Resize the selected area
dragging the squares at the sides and corners. Then press Return/Enter
key when your crop box is sized correctly.

Eye Dropper:
Takes color samples from colors on the page and displays them in the
Color Boxes.
Select the tool, click on the color in the image you wish to sample. The
Color Box will display this color.
Alteration Tools

Healing Brush:
Corrects small blemishes in scanned photos.
Select the tool, hold down the ALT key and left-click on the base color you need
to heal. Then left-click over the blemish.

Brush:
Draws brush strokes of different thicknesses and colors.
Select the tool. Then click on the selected area, drag to draw lines. Use the
Options bar to change the brush, mode, opacity and flow.

Clone Stamp:

Takes a sample of an image and applies over another image, or a part of the
same image.
Select the tool. Hold down the ALT key and left-click on a certain point of the
document where you want to start your copy point. Then, put your mouse over
whatever part of the new document you want the picture to go to. Hold down the
left mouse button and drag the mouse across the page to copy the picture.

109
 Art History Brush:
Paints over an image using the source data from a specified history state or
snapshot.
Select the tool, specify the brush, blending mode, opacity, style, area and
tolerance.

Remember Eraser:
Removes part of an existing path or stroke. Select the tool, click on the part of the
You can use the Erase image you wish to erase. Drag to erase pixels.
tool on paths, but not
on text. Gradient:
Applies a gradient fill to a selected part of the image or to an entire layer.
Select an area you wish to apply gradient to, click the tool button, choose a fill in
the Options bar, click on the starting point, and hold the mouse down and drag to
the endpoint.

Blur:
Blurs the sharp edges of an image.
Select an area where you wish to apply the tool. Click the tool button and choose
the brush, mode, and strength. Drag the brush along the edges.

Drawing and Selection Tools

Path Selection:
Selects paths and path segments.
Select the tool, click anywhere on the path.

Type:
Type’s text on a page. Every time you click the Type Tool on a new portion of the
page a new layer will be created.
Select the tool, click on the page and begin to type. You can specify the font and
size in the Options bar. You can also resize and transform the text box by
dragging the squares at the sides and corners. Use the Move Tool to move the
text on the page.

Pen:
Draws smooth-edged paths.
Select the tool, click on the page and drag to draw a path. Click and drag the
anchor points to modify the path.

Line shape:
Draws a straight line. Other shapes that are hidden in this tool are: Rounded
Rectangle Tool, Ellipse Tool, Polygon Tool, and Custom Shape Tool.
Select the tool, click and drag on the page to draw a line.

Assisting Tools

Hand:
Allows you to move around within the image.
Select the tool, click on the spot on the page, hold the mouse button down, and
drag to move in the area.

Magnify:
Magnifies or reduces the display of any area in your image window.
Select the tool, choose Zoom In or Zoom Out in the Options bar, and click on the

110
area of the image you wish to magnify or reduce.

Color Boxes and Modes

Do you know!
Cropping allows you to
make your image a
Color Boxes:
standard photo size.
The foreground color appears in the upper color selection box and represents a
color that is currently active. The background color appears in the lower box and
represents an inactive color.
1. To change the foreground color, click the upper color selection box in the
Toolbox.
2. To change the background color, click the lower color selection box in the
Toolbox.
3. To reverse the foreground and background colors, click the Switch Colors icon
(the arrow) in the toolbox.
4. To restore the default foreground and background colors, click the Default
Colors icon (the little black and white boxes) in the toolbox.
Note: If you are using the Gradient Tool, the currently selected foreground and
background colors will be the default colors of the gradient.

Basic Image Editing

Now that you know how to find your way around in the Adobe Photoshop CS5
interface and are familiar with the most common commands, pallets, and tools,
you can start doing some basic image editing. In the next few chapters of this
tutorial you will learn how to crop, resize, correct, and sharp/blur your images.
Crop
Cropping is one of the most basic editing techniques that can improve your
images. Cropping helps to bring out the most important features in your image
and focus the viewers’ attention on these features.
There are several ways to crop images in Adobe Photoshop:
1. Cropping with the Crop Tool
2. Cropping to a specific size
3. Cropping with the Marquee Tool
Cropping with the Crop Tool
The Crop Tool allows you to make a precise selection of an image you wish to
edit. To crop with the Crop
Tool, follow these steps:
1. Open the image you wish to crop (see Getting Started for detailed
instructions).
2. Select the Crop Tool from the Toolbox (see Selection Tools for location and
description).
3. Click on your image once and drag the mouse out to make a cropping border
(See Figure 11).

111
 Figure 11: Cropping with the Crop Tool
4. Resize the border by dragging the squares at the sides and corners till you are
satisfied with the way our image looks.
5. Once you are completely satisfied with your cropped image, press Enter.
You can also rotate your cropping border. Move the cursor outside the border;
you will see how it turns into a double-headed arrow (Figure 12). Drag the arrows
in the directions you wish to rotate your selection.

Remember

If you wish to print

your digital photos or
other images on
standard size photo Figure 12: Rotate cropped area
paper, you will have to
crop your images to a Cropping to a specific size
specific size, such as To crop an image to a specific size, do the following:
8x10. 1. Open the image you wish to crop.
2. Select the Crop Tool from the Toolbox.
3. In the Options bar, specify the values for Width and Height
(Figure 13).

Figure 13. Crop Tool Options bar

112
 4. Click in your image and drag the cropping border. Notice that the border
is con strained -you cannot make it wider or longer than the specified Remember
values (Figure 14). For example, if you entered 8 for Width and 10 for
Height, whatever size you make the border, the area within it will fit on an Use of Shift & Alt keys
8x10 photo. in combination allows
resizing proportionally.

Figure 14: Crop to specific size

5. Once you are completely satisfied with your cropped image, press Enter.
Cropping with the Marquee Tool
If you are in a hurry and need just a simple crop, you can use the Marquee Tool
and a menu command. To crop
with the Marquee Tool, follow the steps below:
1. Open the image you wish to crop.
2. Select the Rectangular Marquee Tool from the Toolbox (see Selection Tools).
3. Click and drag the mouse to draw a marquee around the area you wish to crop
(Figure 15).

113
 Figure 15. Drawing a marquee
4. In the main menu, go to Image > Crop (Figure 16). The image will be
immediately cropped

Resizing
Resizing in Photoshop can help you print your images in standard photo sizes,
resize and preserve the high quality of digital photos, and enlarge small images to
a poster size.

114
Resizing to a specific size
To resize your image to a preset size, follow the steps below:
1. In the main menu, go to File > New.
2. In the New dialog box, click on the Preset dropdown menu. You will see
several preset sizes, such as
2x3, 4x6 and 5x7 with the preset resolution of 300 ppi (Figure 17).

Figure 17: Adjust Resolution

3. Choose the size that you wish and click OK.
Note: All the preset sizes are in portrait orientation. If you wish to resize an image
with the landscape orientation, You need to create
Your own preset.
To create your own size, do the following:
1. Type in the values for Width and Height, for example 7x5.
2. Type in your desired resolution (150 ppi for high quality prints, and 72 ppi is
good for web images).
3. Click the Save Preset button
Resizing digital photos
Digital photos usually have large dimensions but low resolution, 72 ppi, which
effects their quality when their
Size is decreased or increased. When printed, the photos with the changed size
will look pixilated. To resize the
digital photos without losing the quality, follow these steps:
1. Open the digital photo you wish to resize.
2. In the main menu, go to View > Rulers. You will see the dimension of your
photo (Figure 18).

115
 Figure 18: Ruler
3. In the main menu, go to Image > Image Size.
4. In the Image Size dialog box, check the Resample Image box off (Figure 19).
Type in your desired Resolution (anything between 150 and 300 ppi). The photo
is now 3.208 x 3.083 inches.

Figure 19: Changing Resolution

Enlarging
If you want to make your digital photo into a poster size image, you can do it in
the Image Size dialog box.
However, just increasing the dimensions will make the image appear blurry and
pixilated. To enlarge the image without losing the quality, follow these steps:
1. Open the digital image you wish to enlarge.
2. In the main menu, go to Image > Image Size.
3. In the Image Size dialog box, make sure the Resample Image box is checked
off and choose Bicubic
Smoother from the dropdown box (Figure 20).

116
 Figure 20. Increasing the size by 10 percent
4. Change the Document Size measurements to Percent. Type in 110; this will
increase the size of the image by 10 percent (Figure 20).
5. Continue enlarging by 10 percent till you are satisfied with the size.
Correcting
Digital cameras tend to cause various problems, such as “red eye” or “hot spots”,
if you use flash, or underexposure, if you don’t.
In Photoshop, you can correct these problems, as well as adjust the overall color
of your digital photo.
Red Eye Removal
The digital camera flash is located right above the lens, which causes the “red-
eye”; however, you can fix your
Photos easily in Photoshop. To remove the “red eye”, follow the steps below:
1. Open a photo you wish to correct.
2. Select the Zoom Tool from the Toolbox. Click and drag a rectangle around the
eye (Figure 21).

Figure 21. Red Eye Removal

3. Make sure your default Foreground and Background colors are black and
white.

117
4. Click and hold on the little black triangle of the Healing Brush Tool button and
select the Red Eye
Tool. (Figure 22).

5. Click on the red part of the eye and paint, holding down the mouse button. You
will see how the red will disappear (Figure 23).

Hot Spot Removal

Using a flash can also cause another problem -shiny areas on people’s faces or
the flash reflection in the shiny surfaces. To correct this problem, follow the steps
below:
1. Open the photo you wish to correct.
2. Select the Clone Stamp Tool from the Toolbox.
3. In the Options bar, change the Blend Mode from Normal to Darken (Figure 24).

4. Set the Opacity to 50 percent.

5. Choose a soft-edged brush, set the diameter to 40 or 50.
6. Hold down the Shift key and click in the clean area (without “hot spots”) to get
a sample of color
(Figure 25).

7. Paint over the “hot spot”, the light area will gradually darken (Figure 26).

118
 Remember

Blend Modes are

widely used in
Adding Flash Photoshop.
To fix underexposed photos, follow these steps:
1. Open a digital photo you wish to correct (Figure 27).

Remember

Color adjustment
options in Photoshop
CS5 can help you to
make your digital
2. In the main menu, go to Layers > Duplicate. In the next window, name the layer
photos look more
1.
3. Make sure Layer 1 is selected in the Layers palette. In the Blending Mode drop natural.
down box, change the
Blending Mode to Screen (Figure 28). The whole image will lighten.

Color Adjustment
To color correct your images, follow these steps:

1. Open the image you wish to correct.

119
 2. In the main menu, go to Image > Adjustments > Levels. You will see a dialog
box displaying a diagram of the colors in your image (Figure 30). The black
triangle is for shadows, the gray is for mid tones, the white is for highlights. In the
Channels dropdown menu, you can choose between RGB, Red, Green, or Blue.
These indicate whether your changes affect all the colors, or just one (red, green,
or blue).

Make sure the Preview box is checked off. Choose the channel you wish to
change and drag the triangles.
Dragging the black triangle to the right will make the shadows in your photo
darker; dragging the white triangle to the left will make the highlights in your photo
lighter; dragging the gray triangle to the left will make the mid tones in your photo
lighter, dragging it to the right will make the mid tones darker. You will be able to
see the changes in your image.

120
 Do you know?

Corrected image “Save as” is used to

Remember to save your work often. Saving frequently lessens the risk of losing save changes in
the work you have been doing. existing file with other
To save your Photoshop document, do the following: name, format or
1. Click File > Save. location.
2. Navigate to the place you would like your document to be saved by using the
drop down menu and the navigation window.
3. Enter the name of your document in the Save As text field. Remember
4. Choose a format to save your project in from the Format dropdown menu.
(Figure 33) Photoshop default
format is PSD, larger
file size. JPEG is
flattened image with
smaller size.

Figure 23. Save as Dialogue Box

5. Click the Save button in the bottom right corner of the dialogue box.
6. Check to make sure that your document is saved in the place you intended.

121
 Procedure to Use Slicing Images for the Web
When you define a rectangular area in an image as a slice, Photoshop creates
an HTML table to contain and align the slice. Once you create slices, you can
turn them into buttons, and then program those buttons to make the web page
work.
Any new slice you create within an image (a user slice) automatically creates
other slices (auto slices) that cover the entire area of the image outside the user
slice.
Figure 1 shows the Slice tools, which are located in the Crop tool group. Drag the
Slice tool over the image, and it will create a rectangular area indicating that a
slice has been made. As you slice the image, you'll notice that other slices are
created automatically (see Figure 2).

Figure 1 Press and hold down the tool in the Toolbar to display the other tools in
that tool group.
Do you know!

Photoshop can export

information in a layout
based on CSS.
However, it's much
easier to cut the
graphics with a table-
based mindset, and
then create a CSS
layout for the images
later.

Do you know!

If you plan to use the Figure 2 The sample website with one slice drawn on the header.
option to export from Images in HTML files from Photoshop need to be placed into a table. HTML
Photoshop as HTML tables were originally designed to show tabular data, but before long had become
only, adding your URL the standard way to align and position graphics on websites. Photoshop's ability
in slice options dialog to create automatic rows and columns with data makes it easier for designers to
is a good idea, as it export graphics to the Web, eliminating guesswork. Just slice the graphics you
eliminates the need to need, and Photoshop will take care of the rest.
do this later. The slices that you create will automatically generate their own custom names
based on presets. However, these slices won't add HTML functionality, such as
<a></a> tags, unless you specify that information first.
The Slice Select tool (also located under the Crop tool) will let you highlight the
individual slices of an image. To change the settings for the Slice Select tool,
right-click the image and select Edit Slice Options (see Figure 3).
The Slice Options dialog allows you to specify how you want to name the

122
individual slices, as well as a web address to which you want to link the sliced
image (see Figure 4).

Remember

When slicing your

website design
Figure 3 Right-clicking the slice brings up the Slice Options menu. remember that each
slice will become a
separate cell of a table
and image so try to
keep the slices as few
and as simple as
possible.

Figure 4 Slice Options dialog.

By using the slice options to provide specific names, you'll make it a lot easier to
find the graphic files that you need when you set up the image later, using HTML
in a text editor or using Dreamweaver CS5.
The most common problem you'll encounter when using the Slice tool is
Photoshop's tendency to create too many slices. This is usually a result of the
user making slices that don't conform to a tabled layout. In Figure 5, I've drawn a
slice, but I didn't have the slice matching the border (as all of the other button
slices on the left did), so Photoshop tried to help me by creating a lot of
unnecessary slices.

Figure 5 Our sample website with slices for a header and menu.
To fix a problem like this, use the Slice Select tool and click the slice. Once the
slice is selected, drag the resize handles to align the errant slice with the other
slices that you've made. You'll know that the slice is positioned correctly when

123
 the automatic slices disappear (see Figure 6).

Do you know!

In earlier versions of
Photoshop saving a
sliced image for the
web could only be
done with Image
Ready but now it's all
built into Adobe
Photoshop CS3.

Figure 6 Snap one slice to another by dragging the selected slice to align it with
the other slice.

At the End: Mostly used Photoshop Shortcuts

124
Adobe Dreamweaver CS5

Before building the pages using

Dreamweaver it is a common practice to
design the layout of the pages in an image
editing software like Fireworks or Photoshop.
You will also create and optimize any
required images to be used in the website in
Fireworks.
Main steps to creating a website in
Dreamweaver are:
Step 1: GUI introduction
Step 2: Define a site
Step 3: Dreamweaver CS5 Template
Step 4-Dreamweaver Website Layout
Step 5:CSS Layout – Dreamweaver CS5
Step 6: Dreamweaver DIV/ CSS Layout
Step 7: Understand Dreamweaver Menu
Step 8: Editing Styles in Dreamweaver
Step 9: Editable Regions in Dreamweaver Template
Step 10: Linking to webpages in Dreamweaver
Step 11: Heading Styles | Dreamweaver Remember
Step 12: Contact Forms | Dreamweaver
Step 13: Form Styles | Dreamweaver Follow the instructions
Step 14: Test Website | Dreamweaver of Dreamweaver CS5
Step 15: FTP/ Upload Files to Hosting Server | Dreamweaver installation and usage
to build a website in
Module 6.
Step 1: GUI introduction
The GUI of Dreamweaver CS 5 has the following parts:
Parts of the Dreamweaver Window
The Dreamweaver window contains the following main elements:

Document Toolbar
The document toolbar changes how we view the web page file. The main
commands that we will use are:

125
Properties Inspector
The properties inspector lets us view and change the properties of a selected
object in the document window. Each type of object has a different set of
properties.

Panel Groups
The panel groups provide information as well as methods to make changes to the
web files and website.
To open or close a panel group, click the name of a panel. If you need a panel
that is not currently displayed, go to the Window menu and select the panel.

Workspaces
Workspaces are different layouts for the Dreamweaver window. You can select a
workspace from the Workspace selector button, or you can save a new
workspace.

126
Step 2- Define a site
The first step is to define the site within Dreamweaver.
In the opening screen click ‘Dreamweaver Site’

In the Site Setup window give the site a name and specify the folder on your
computer where all the files will be stored (by clicking the folder icon next to the
Local Site Folder field).

Click the ‘Save’ button when done.

You will notice that the ‘Files’ panel will reflect the above details.

From the ‘Files’ panel you will be able to easily access all the files of your website.
Images must be saved in “Images” folder.
Step 3- Dreamweaver CS5 Template
Once we have defined our site it is time to create a Dreamweaver CS5 template.
This template will form the basis for all our website pages and will contain our
main layout and design elements. Once this template is created the website
pages can be created from it, the page specific content can be added in.
To create a Dreamweaver CS5 template, click ‘File’ on the main menu, then click
‘New…’
In the ‘New Document’ window that opens:

Select “Blanks Template” > “HTML Template” > Select “None” from layout
Click “Create Button”.

127
 You will get the following screen:

Remember

Dreamweaver has
various prebuilt
templates.

This is a split screen view of your template file. The left shows the HTML code
and the right shows how the page will look.
Click the ‘Design’ button at the top, to get into the Design View.

If you need to see the HTML code at any point you can click on the ‘Code’ or
‘Split’ button.
Save the file [File> Save].
You will get a message that the template does not have any editable regions. This
is ok. Give it a name. I have given it the name ‘template’.

128
 Do you know!

Dreamweaver allows
you to create the
webpage without
If you look in your Files panel you will see that your template has been saved as actually writing HTML
[Link] within a new folder entitled ‘Templates’ code as Dreamweaver
writes the HTML code
for you.

Step 4- Dreamweaver Website Layout

Now let’s get ready to create the Dreamweaver website layout.
A website layout usually consists of a header area, menu bar, content area and a
footer area.
 The header area consists of the logo and masthead.
 The menu bar consists of the main menu items with links to the various
pages. This allows the visitor to navigate through the site.
 The content area is where the main content of the page will appear.
 The footer area will have the copyright information and may repeat the
links that appear in the main menu area.

129
We will now recreate this layout in Dreamweaver.
Step 5: CSS Layout – Dreamweaver CS5
Before we actually get into designing the layout, it is helpful to understand what’s
involved in designing a CSS layout using Dreamweaver CS5.
A webpage is created using HTML code. HTML is made up of various ‘tags’. It
was not too long ago when web pages were designed using tables [Insert >
Table], however this is no longer a good practice. Now it is best to design CSS
based webpage layouts.
There are 2 parts to a CSS based website layout:
1. DIV (short for division) tags divides the content into individual sections.
2. CSS (short for Cascading Style Sheet) styles the div tags.
DIVs can be of 2 types:
 Class
 ID
The difference between ‘Class’ and ‘ID’ is that a class can be used multiple times
in a page while an ID can only be used once.
 The style for a class will begin with a dot ‘.’
 The style for an ID will begin with a hash ‘#’
Keeping in mind the website layout that we have planned we will need to create at
least 4 DIVs create a CSS and specify the properties for each of the div tags by
defining styles of the same names i.e. header, menu, content and footer.
The style sheet can reside within the HTML page or external to the HTML page
but linked to it. It is advisable to create an external style sheet so that changes
can be made to this one file which will reflect on all the linked pages.
Dreamweaver CS5 Website Header
Now let’s create our website header. This is the top portion of the website with
the logo and masthead.
As per our layout it looks like this:

We will need to create a div called ‘header’ and a style also by the same name
‘header’.
 Select ‘Insert’ > Select ‘Layout Objects’ > Select ‘Div Tag’

130
Since we are going to have only one header on the page, we can make this an
ID.
 In the Insert Div Tag Window enter ‘header’ next to ID.

 Now click on the ‘New CSS Rule’ button.

In the New CSS Rule window:
 You will see ‘#header’ is automatically entered by Dreamweaver.
 Select ‘New Style Sheet File’ from the bottom drop down menu.
 Click the OK button

131
  Give the file name ‘style’ for the stylesheet.
 Click the ‘Save’ button.

Do you know!

Linking “[Link]” to
html file is called
“External Style Sheet”

You have now created a stylesheet file names [Link] and saved it in your
site’s folder.
In the ‘Style Rule Definition for #header in [Link]’ window we can now specify
the style properties of the header div tag. We can specify the background color,
dimensions and borders. We can also specify the path to the logo image as well
as its position in this style.
 Enter the following details for Background, Box and Border:

132
 Remember

CSS is used for setting

appearance of
Website.

133
  Click the ‘OK’ button.
The header div and style has been created and looks like this:

 Delete the text ‘Content for id “header” Goes Here’.

If you look at the CSS Styles panel, you will see the header style.

To edit the header style:

 Right click the ‘header’ style
 Click ‘Edit…’
 This will open the “CSS Rule Definition” window where you can edit the
style.

134
  Save the template.

Step 6: Dreamweaver DIV/ CSS Layout

Now it is time to complete the Dreamweaver DIV/ CSS Layout.
Using the same principles that we used to create the header area with its
associated div tag and CSS style, let us now create the menu area, the content
area and the footer area.
 Click the ‘Code’ or ‘Split’ buttons to see the HTML code create thus far.

 Click after the header div tag ends (so that the next div tag is inserted
after the header div).
Create a menu div tag and style (the same way you created the header div and
style.
 Insert > Layout objects >Div tag
 Enter ‘menu’ against ID
 Click the ‘New CSS Rule’ button

135
 Make sure that the style rule will be defined in ”[Link]’
 Click the OK button
 Enter the following properties:

 Click the ‘OK’ button to save the CSS Rule definition for #menu in
[Link]
 Click the ‘OK’ button to save the ‘menu’ Div tag
 The web page and code will look like this. The menu div is created and
styled. The text “Content for id “menu” Goes Here” is automatically
inserted by Dreamweaver (though you may not be able to see it because
of the black background of the menu area). Select and delete this text.

136
Click after the menu close tag in the Code view

Now let us create the content area:

 Insert > Layout objects > Div tag
 Enter ‘content’ against ID
 Click the ‘New CSS Rule’ button
 Make sure that the style rule will be defined in ”[Link]’
 Click the OK button
 Enter the following properties:

 Click the OK button to store the style and then click the OK button to store
the div tag.
 Save the template and the associated CSS [File > Save all Related Files].

137
Finally let us create the footer area:
 Insert > Layout objects > Div tag
 Enter ‘footer’ against ID
 Click the ‘New CSS Rule’ button
 Make sure that the style rule will be defined in ”[Link]’
 Click the OK button
 Enter the following properties:
o Background > Background color: #000
o Box > Width: 100% , Height: 30 px
 Click OK and OK
 Select and delete the text “Content for id “footer” Goes Here”
 Save all related files
Now the basic layout of the webpage is ready.

Step 7: Understand Dreamweaver Menu

Now that our web layout is ready in Dreamweaver, let us work on the menu. Since
the menu will appear in all the pages of the site it is advisable to put this into the
template as well.
Our main menu items are going to be images since the text is written in a font that
may not be available on all the visitor’s computers. These have already been
created in Fireworks and are available in your images folder.
We will simply insert these images into the menu area now. We will link them to
the associated pages after we create the respective pages.
To insert the menu images:
 Click in the menu area
 Insert > Image > Browse to the images folder and click [Link]
 Click the OK button
 You will see the Home image appears in the menu area of your layout.
 Click after the home image
 Repeat the above procedure for the images [Link], [Link]
and [Link].
 The menu layout now looks like this:

138
 Spray Menu

Spray Menu bar is

In case you want to use drop down menus you can use the Dreamweaver feature built in functionality
– Spry Menu Bar [Insert > Layout Objects > Spry Menu Bar> then follow the of Adobe
instructions] Dreamweaver CS
versions that
automatically adds
drop down menu list
in web applications.

Step 8: Editing Styles in Dreamweaver

Let us now create the footer menu and copyright information.
The footer menu will be made of text so we simply need to type in the menu
items: ‘Home’, ‘About Us’, ‘Services’ and ‘Contact Us’.
The text is not visible because of the black background. Let us edit the #footer
stylesheet and specify the yellow text color.
 Select the footer style in the CSS styles panel

 Right click on the #menu style and then select ‘Edit…’

 Specify the following style details:

139
  To center the text

 Click the OK button

 The footer now looks like this:

To add more than one space between the menu items you will need to add a non-
breaking space [Insert > HTML > Special Characters > Non-Breaking Space]

140
  Insert 2 – 3 non breaking spaces between the menu items
 The footer menu now looks like this:

Now let’s add the copyright information below the footer menu:
 Press the Shift and Enter keys to get on the next line
 Insert the copyright symbol [Insert > HTML > Special Characters >
Remember
Copyright]
Website Menu can be
on left or right side of
layout instead of top.

 Type in the text ’2010 Company Name’

 The footer now looks like this:

141
Our webpage now looks like this in Dreamweaver:

Step 9: Editable Regions in Dreamweaver Template

Now that our template layout is more or less complete it is time to define the
editable regions within the Dreamweaver template.
The editable regions can be different in different web pages. Since the content of
different pages will differ, we will create an editable region within the content area.
To create editable regions in a Dreamweaver Template:
Select and delete all the text in the content area i.e. delete ‘Content for id
“content” Goes Here’
Insert > Template Objects > Editable Region

142
In the ‘New Editable Region’ window enter the name of the editable region
‘content.

Click the OK button

The Editable Region in the Template will look like this:

Save All Related Files

Our Dreamweaver template is now ready

143
Webpages in Dreamweaver
Now that our template is ready let us make the 4 webpages of our site – home,
about us, services and contact us.
The homepage file is usually named ‘index’. This is recognized by your hosting
server as the home page and is shown when someone types in your domain
name into the browser. HTML pages end with the file extension .htm or .html and
it is a good practice not to have spaces in the file names, so we will create the
following files:
 [Link]
 [Link]
 [Link]
 [Link]
 To create a webpage in Dreamweaver select ‘File’ from the Dreamweaver
Menu, then select ‘New’.
 From the New Document Window, select ‘Page from Template’, then our
website’s name under ‘Site’ and finally the template name under
Template

 Click the ‘Create’ button.

 Dreamweaver will create an HTML page using the template.
 Save [File > Save] the file as [Link]
 We have created our first html page. Repeat the process to create the
other 3 pages.
 The ‘Files’ panel will look like this:

Step 10: Linking to webpages in Dreamweaver

 Now that all our pages have been created we can link them from the main
menu and the footer menu.
 Since our menus are in the template, let’s open the template file and
create the links to the webpages in Dreamweaver.
 If your template file is not already open, double click on [Link] in
the Files panel.

144
  Click on the ‘Home’ image in the menu area to select it:

 In the Properties panel link to [Link], by clicking on the folder icon

next to the Link field and then selecting [Link].
 Type 0 (zero) in the Border field otherwise there will be a blue border
around the menu image.

 Similarly select the other 3 menu images and link them to the respective
files.
 The main menu navigation is now ready.
 Save the template and all the website files created from the template [File
> Save All]
 In the Update Template Files window click the Update button. This will
update all the site pages that were created from this template so you
don’t need to go into each page and make the changes again and again.
This is the main advantage of using a Dreamweaver template as a base
for all your website files.

145
Styles for text links in Dreamweaver
Now let us link the footer menu items. Once we link them we will also need to
define a style for the linked text otherwise they the links will turn blue.
To link the footer menu items:
 First select ‘Home’ in the footer area
 Click the folder icon next to the link field in the Properties panel, and
select [Link].

 You will notice that the Home link and turns blue
We need to create a style for the linked text in the footer div. To do this:
 Click on the ‘New Style Rule’ icon at the bottom of the CSS Styles panel.

 In the New CSS Rule Window select ‘Compound’ under ‘Selector Type’
 Enter “#footer a” under Selector Name

146
  Click the OK button
 Enter the following style details:

 You will notice that the Home link looks as it did before it was linked. Link
the remaining 3 menu items to the respective html pages.

 The footer menu is ready. Save the template and update all pages.

Web Page Content

Now that we have created the pages of our site and linked them together, let us
enter the web page content.
 In the Files panel, double click [Link] to open it.
 Select and delete the word ‘content’

147
  Type in your website’s home page text.
 See how your web page will look by previewing it in a browser [File >
Preview in Browser > select the browser of your choice
Now lets us insert an image and align it right. To do this:
1. Click before the start of the text
2. Insert > Image > browse to the ‘image’ folder > select [Link]. The
image will be inserted into the web page.

3. Now we need to align it right. Click on the image.

4. In the Properties panel, select ‘right’ from the drop down menu next to
‘Align’.

5. The image will be aligned right.

Text Styles in Dreamweaver

1. We have added the text to out pages but the default font doesn’t really
look good. Let us specify the text styles in Dreamweaver.
2. All the visible content in the web pages will be between the <body> tag in
HTML. We can specify the properties of this body tag in our style sheet so
that all the text in our web pages display in the Verdana/ Helvetica font

148
 and are a size 12px.
3. To do this:
4. Click on the ‘New CSS Rule’ icon at the bottom of the CSS Styles Panel
5. In the ‘New CSS Rule’ window, under ‘Selector Type’, select ‘Tag’
6. Under ‘Selector Name’, select or type ‘body’

7. Click OK
8. In the ‘CSS Rule Definition’ window for ‘Font Family’ select ‘Verdana,
Geneva, sans-serif’
9. For Font-size, type ’12′ and select ‘px’

10. Click OK
11. The style of the text in the web page will change. It looks better now!

149
Remember

There are total 6

headings in HTML h1,
h2, h3, h4, h5, h6.
Step 11: Heading Styles | Dreamweaver
Now that we have specified the text font style it is time to define the heading
styles in Dreamweaver.
HTML has various heading tags. Let us define the style of some of these
specifically:
 H1 (Heading 1)
 H2 (Heading 2)
To define the style for the Heading 1 tag:
 Click the ‘New Style Rule’ icon at the bottom of the CSS styles panel.
 Selector Type: Tag
 Selector Name: H1

 Click OK
 In the ‘CSS Rule Definition’ window, specify the font size 18 px
 Set the color #FFBB2D

150
 Click OK
 Now select the heading text in your web page and apply the H1 tag by
selecting Heading 1 from the Format drop down in the Properties panel.

 You will see that the style is applied to the heading text

151
  If you plan to have sub-headings in your webpages you can define the
styles for the H2 tag and apply the Heading 2 format to them. Usually the
font size would be smaller than the H1 tag font size.
Step 12: Contact Forms | Dreamweaver
Most websites would need a contact form. Let us now create a contact form in
Dreamweaver.
 Open the [Link] page.
 Click in the area that you want the form to appear
 Insert > Form > Form

152
  A red dashed box will be visible in your page

 All the form elements need to be placed within this red box
 Insert > Form > Text field
 Label: Name
 Style: Attach label tag using ‘for’ attribute
 Position: Before form item

153
 Click OK
 The Name text field will appear in the web page

 Select the field by clicking on it

 Type ‘name’ in the Properties panel under ‘Text Field’

 In the web page press the Enter button to go to the next line and insert
another text filed labeled Email
 Insert a Text area [Insert> Form > Textarea] labeled Comments
 Insert a button with no label [Insert > From > Button]
 The form will now look like this:

154
Step 13: Form Styles | Dreamweaver
We can make the form look more presentable by defining form styles in
Dreamweaver.
We can give a style to the <label> tag. To do this:
 Create a style for the label tag
 Click ‘Box’ and enter:
 Width : 150 px
 Float: Left
 Click OK

 The form looks better now:

155
Let’s push the submit button to align with the form fields. To do this:
 Create a new CSS style
 Select Class and name it ‘.btn’

 Box > Left: 150 px

156
 Select the button on the web page and select ‘btn’ from the drop down
next to Class in the Properties panel.

 The button moves to the right and aligns nicely with the other fields:

157
To program the form to be sent to specific email addresses when filled, you will
need to install a php or asp form script and point the form to it in the action field of
the Properties panel.

The php / asp script is out of the scope of this tutorial. However there are free
service providers that take care of the programming for you as well.
Some of these free form service providers are:
 Bravenet Email Forms
(URL: [Link]
 Response-o-Matic Forms
(URL: [Link] )
 EmailMeForm
(URL: [Link] )

Step 14: Test Website | Dreamweaver

Now that all our web pages are ready it time to test the website in Dreamweaver.
The best way to test the website is to actually see how it looks in the browser. It is
a good practice to check the site in multiple browsers as some things which might
work well in some browsers might not work so well in other browsers.
To test in a browser:
 File > Preview in browser > Firefox / IExplorer
Some things to test for:
 Click on the main menu items and see if it links correctly to the
appropriate pages
 Click on the footer menu items to check if each link links to the
appropriate pages.
 Check if the headings are formatted correctly on each page
 Check if the text fonts are looking right on all the pages
 Check if the form fields are aligned correctly
 If you want you can do a spell check [Commands > Check spelling]
 Web page titles – these will appear in the top bar of the browser and by
default will be ‘Untitled Document’. These can be changed by entering the
page titles for each page in Dreamweaver in the ‘Title’ field.

158
  Another thing you will notice is that the text is sticking to the left side of
the browser. This does not look professional. To add some space on the
left and right side of the content area you can edit the content style with Remember
the following details:
File uploading
o Reduce the width to 90%
software’s can also be
o Uncheck ‘Same for all’ below Padding
o Enter 5% for left and right padding used for uploading to
servers e.g. FileZilla,
CuteFTP.

Do you know?
Save all the files including the [Link] file [File > Save All]
Test the site again by previewing all the pages in the browser. If everything is OK, Famous hosting
it is time to upload the files and make your site live. websites are
[Link],
Step 15: FTP/ Upload Files to Hosting Server | Dreamweaver [Link],
Now that your site is ready it is time to upload the files to your hosting server and [Link],
make your site live. [Link],
You will need to purchase a domain name and web hosting. We use Hostgator to [Link] etc.
host this site.
To upload your files:
 Click on the ‘Connect to remote host’ icon at the top of the files panel

 Click the + button to add a new server

159
 Enter any server name, your FTP address/ hostname, username and
password (you will receive these when you purchase hosting).

 Click the ‘Test’ button

 Click the ‘Save’ button

 In the Files panel click the ‘Expand to show local and remote sites’ icon

160
 You will see an expanded File Window:

 Click to connect

 Dreamweaver will connect to your remote hosting server. You will see
your remote hosting server on the left side and your local files on the right
side.
 You may need to navigate to a ‘www’ or ‘public_html’ folder on your
remote server.
 Select all the local files
 Right click and select ‘Put’

161
  You can also use the ‘Put’ icon at the top

 A copy of all your website files will be stored on your remote hosting
server.
 Using a browser, browse to your domain name. Your website should
appear.
 Test to see if everything is working file.
 Configure your form to work using a script that will work on your server
technology or a form service provider like those mentioned earlier.

Flash CS5 Capabilities

Adobe Flash is the best software used to create 2 – D Animation. By using Flash
you can create:
Cartoon Movies , Web Banners, Animated Clipart, Video Games, Websites
Multimedia Presentations
General Flash workflow

162
  Plan the application
 Add media elements
 Arrange the elements
 Apply special effects.
 Use ActionScript to control behavior
 Test and publish your application.
Flash interface

Exploring Toolbar
Types of animation
Flash supports the following types of animation:
 Motion tweens
 Classic tweens
 Shape tweens
 Frame-by-frame animation

Frames Fundamentals
The rate at which the illusion of animation is considered is normally between
Twelve to thirty frames per seconds.
Frame Rate:
Persistence of vision has been claimed to be sufficient at 12 frames per
second (fps) but is more often considered acceptable at between 18 and 24 fps.
There are however, fixed display speeds associated with different media, which
should be listed.

Old 16-mm home movies Frame rate 18 fps.

Standard movies films Frame rate 24 fps
TV in United Kingdom Frame rate 25 fps
TV in USA Frame rate 30 fps
Frame and its types
Frame is unit of information on the stage or we can also say that it container of
object. In Flash there are three types of frames.
 Frame
 Key Frame
 Blank Key Frame

A black dot in the first frame of the span indicates that the tween span has a
target object assigned to it. Black diamonds indicate the last frame and any other
property key frames.

163
Symbol:
Symbols are the key components in Flash and are essential aspect of creating
animations and interactive elements
Instance:
An instance is a copy of master symbol. Rather than using the symbol on the
stage we use and modify the instance of the symbol on the stage.
Type of Symbols:

In Flash there are three types of symbols:

1. Graphic
2. Movie
3. Button

Work with mask layers

Importing Sound into Flash:
To import a sound file into the Flash authoring environment:

Choose: File  Import

Select: All Sound Formats. From the Files of Type drop-down.
Select: The .MP3, .AIFF, or .WAV file that you want to import.
Click: Open
To attach a sound to a Timeline:
1 Choose File  Import to import a sound.
2 Select the sound in the library and choose Linkage from the Options
menu.
3 Select Export This Symbol and give it the identifier mySound.
4 Select frame 1 in the main Timeline and choose Window  Actions.
The code should look like this:
s = new Sound();
[Link]("mySound");
[Link]();
To create a sliding volume control:
1 Drag a button to the Stage.
2 Select the button and choose Insert  Convert to Symbol. Choose the
movie clip behavior.
This creates a movie clip with the button on its first frame.
3 Select the movie clip and choose Edit  Edit Symbol.
4 Select the button and choose Window  Actions.
5 Enter the following actions:
on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
}
on (release, releaseOutside) {
stopDrag ();
dragging = false;
}
The startDrag parameters left, top, right, and bottom are variables set in a
clip action.
6 Choose Edit Edit Movie to return to the main Timeline.
7 Select the movie clip on the Stage.
8 Enter the following actions:
onClipEvent (load) {
top=_y;
left=_x;
right=_x;
bottom=_y+100;

164
}

onClipEvent(enterFrame){
if (dragging==true){
_root.[Link](100-(_y-top));
}
}
9 Choose Control  Test Movie to use the volume slider.

To create a balance sliding control:

1 Drag a button to the Stage.
2 Select the button and choose Insert Convert to Symbol. Choose the
movie clip property.
3 Select the movie clip and choose Edit  Edit Symbol.
4 Select the button and choose Window  Actions.
5 Enter the following actions:
on (press) {
startDrag ("", false, left, top, right, bottom);
dragging = true;
}
on (release, releaseOutside) {
stopDrag ();
dragging = false;
}
The startDrag parameters left, top, right, and bottom are variables set in a
clip action.
6 Choose Edit  Edit Movie to return to the main Timeline.
7 Select the movie clip on the Stage.
8 Enter the following actions:
onClipEvent(load){
top=_y;S
bottom=_y;
left=_x-50;
right=_x+50;
center=_x;
}
onClipEvent(enterFrame){
if (dragging==true){
_root.[Link]((_x-center)*2);
}
}
9 Choose Control  Test Movie to use the balance slider.

on (release) {
unloadMovie("cont");
}
on (release) {
loadMovie ("[Link]", _root.cont);
}

Learner’s Activities

165
 Activity 1: Developing mockup of website using adobe
Photoshop

Description: This activity based on individual performance. Each

student will develop layout of website in Photoshop
with help of slice tool
Time Guideline: 2 hours

Purpose: To be able to mockup of website

Outcomes:
1- Each individual , first sketch layout on
paper

2- Then will draw layout in adobe Photoshop

3- Individual will demonstrate his/her work

before class.

Activity 2: Develop a website using adobe Dreamweaver

Description: This activity consists of group of 2 participants.

Time Guideline: 4 hours
Purpose: To be able to develop website in Dreamweaver and
practice in adobe Dreamweaver

Activity 3: Developing an image gallery in flash

Description: This activity consists of group of 2 participants.

Minimum 5 image in gallery
Gallery have option of slide show
Time Guideline: 2 hours
Purpose: To be able to develop animations and galleries in flash
for web pages.
Outcomes:
Group will demonstrate his/her work before class.

166
 Learning Unit 03

Application of Templates in Website

Overview Remember
In this learning unit, you will learn web templates. After completion of this Website templates
learning unit, you will be able to use website Templates, how to download allow anyone to setup
template, differentiate in free and paid templates and how to customized a website without
templates in editor. having to hire a
professional web
Website Template [1] developer or designer.

A website template is a pre-designed webpage or set of HTML webpages

that anyone can use to "plug-in" their own text content and images into. Template
Usually they are built with HTML and CSS code. For templates two basic
Options are available
A template is a file that
Free Website Template serves as a starting
point for a new
The main benefit of a free website template is the cost. You spend no document. When you
money upfront. Free web templates are often harder to customize and open a template, it is
often lack certain functionalities, such as online shopping carts. They lack pre-formatted in some
the polished look of a professional design. This might be fine for some way.
websites, but business owners will probably want to consider something
else when establishing their company's online presence.

Paid Website Templates

In case of paid website template, you'll find that some places will sell them
for a one-time, upfront fee, while others will charge you a small monthly
fee. Places that require a monthly fee typically give you access to a
customer support team — a great benefit if you ever run into a problem or
just want some help setting up your website. Most paid templates provide
you with designs that can easily be customized to reflect your style or
brand, helping you to create a website you can be proud of.

167
Do you know! Searching and Downloading Website Templates [2]

Open Designs was There are many websites which provides open source templates
founded in 2006 as a without any cost but some highly professional and prefect design
community for sharing are paid design.
free open source web
designs online. Free website templates are available for download on following
links.
Wrap Bootstrap
1. [Link]
2. [Link]
3. [Link]
Wrap Bootstrap is a
[Link]
marketplace for
4. [Link]
premium Bootstrap
themes and templates.

50 Free Responsive HTML5 CSS3 Website Templates

Bootstrap
5. [Link]
Bootstrap is an HTML5 6. [Link]
& CSS3 framework
designed to help you
kickstart the
Following are few links to download paid websites Templates
development of
webapps and sites.
1. [Link]
templates/
2. [Link]
Remember 3. [Link]
4. [Link]
[Link]
.com provides both
free and paid web
design templates

168
Learn Activity [3]

In previous learning activity working, learners have experienced working in

adobe Dreamweaver and also have developed an application using
Dreamweaver. Now in this session class will customized Templates using
Dreamweaver under the supervision of instruction.

Developing a website using a Templates

Description:  This activity will be performed by individual.

 Each student has Experience of working on
adobe Dreamweaver.
 Each student will present his web project idea
before class.
 Download Free Templates from above mention
link as per project design requirement download
relevant design templates.
 Instructor will guide and help out students in
selection of designing
 Customized Templates in Dreamweaver.

Time Guideline: 4 hours

Purpose: To be able to customized templates and will try
develop design like these professional developed
design.
Presentation:
Individual will present Template and also present
his/her new developed web application developed
from templates.

169
Summary of Module
 Web Designing is an art of building web pages and technically
design is a process for developing solutions that effectively integrate
task, context of use, and “user.”

Web design isn't the same as web development. Development

involves coding the backend of your website but you're here for web
design. For the look-and-feel.

 Time Berners-Lee is known as father of web. In 1989 he developed a

web page.

In 1990, the first text only browsers were setup and CERN scientists
could access hypertext files.

By early 1993, there were only about 50 websites worldwide. A

browser Mosaic having web’s graphical capabilities was developed
at NCSA (National Centre for super computers).

JavaScript was developed in 1995.

Macromedia Flash first version was release in 1996.

For formatting of HTML documents CSS came in use in 1998.

Grid framework for mobile devices was developed in 2007.

Idea of response designs was presented in 2009 but its

implementation in web was possible with development of Bootstrap
was by Mark Otto and Jacob Thornton at Twitter, and released as an
open source product in August 2011 on GitHub.

 Adobe Photoshop is a powerful, easy-to-use tools that let you

combine and cut out images, apply looks, and helps us in
development of webpages mockups.

 Adobe Dreamweaver is a web design and development application

tool with standard features such as syntax highlighting, code
completion, and code collapsing as well as more sophisticated
features such as real-time syntax checking and code introspection
for generating code hints to assist the user in writing code.
 Flash started its life in 1996 as Future Splash Animator. A re-
branded version of the Future Splash Animator was introduced as
Macro Media Flash-1 in 1996.
It is a best Tool to create 2 – D Animation
 Web templates are pre-designed templates developed by
professional designers, and are available for free and on fee as well.
Individual having little knowledge of any HTML editing tool can easily
customized these templates as per requirement and developed web
application. Web designing templates are web designs developed by
the professional. Individual having little knowledge of any HTML
editor tool can easily develop web application within short time.

170
Frequently Asked Questions (FAQs)
FAQ 1: What are the benefits of a Website?

Answer A Website acts as a promotional tool that helps you to

promote your business among a global audience. It helps in
establishing a brand identity since a Website increases
credibility of your business. You become more competitive
since most of the businesses are establishing their presence
over the Internet and you cannot afford to stay behind.

FAQ 2: Who is the inventor of W3C

Answer Tim Berners-Lee invented the World Wide Web in 1989. He

founded and Directs the World Wide Consortium (W3C) the
forum for technical development of the Web. He founded the
Web Foundation whose mission is that the WWW serves
Humanity, and co-founded the Open Data Institute in London.
His research group at MIT's Computer Science and AI Lab
("CSAIL") plans to re-decentralize the Web. Tim spends a lot
of time fighting for rights such as privacy, freedom and
openness of the Web.

FAQ 3: What is responsive Web Design?

Answer Responsive web design is about creating web sites which

automatically adjust themselves to look good on all devices,
from small phones to large desktops.

FAQ 4: CMYK stand for

Answer CMYK is abbreviation of Cyan, Magenta ,Yellow and Black

FAQ 5: What is resolution?

Answer Resolution is the quality of an image. It is measured in terms

of pixels. If you see an image listed as "72 ppi", that means
the image has 72 pixels per inch (ppi).

FAQ 6: What is JPEG?

Answer JPEG stands for Joint Photographers Experts Group. It's a

great format that retains color and detail found in photographs
and graphics with lots of color blends but not well for web
pages because of its size.

FAQ 7: What is CSS?

Answer Cascading Style Sheets (CSS) is a mechanism for changing

the appearance of HTML or XML elements, by assigning
styles to element types, self-defined classes of elements or
individual instances.

FAQ 8: Role of Adobe Photoshop in web development?

Answer Photoshop is used in the modern web design workflow.

Together, you'll create a mockup for a creative company that
contains responsive templates, a fully developed color and
font theme, and a UI kit full of buttons, navigation bars, check
boxes, and other ready-to-use interface elements. He also
shows how to optimize web graphics, create image sprites,

171
 and integrate other apps like Illustrator and Muse in your web
design workflow.

FAQ 9: What is benefit of site definition in Dreamweaver?

Answer Even if you don’t yet have a website or remote web server,
Dreamweaver expects you to organize your files exactly as
they would be in a real site. Before you can start working, you
need to define a site.

FAQ 10: What is Spray Menu in Dreamweaver?

Answer Spray Menu bar is built in functionality of Adobe
Dreamweaver CS versions that automatically adds drop down
menu list in web applications.

172
Test Yourself!
Please mark the correct one from the given options. You can check your
answer with the Answer Key at the end of this module.

1. In Photoshop The zoom tool allows you to do what?

a. Move around your graphic b. Increase/decrease the

magnification size of graphic

c. Select objects d. None of above

2. Photoshop file default format that preserves layers is

a. JPEG b PSD

c. PNG d AI
.

3. Short key to fill the whole background with current color:

a. Alt+B b ALT+BACK SPACE

.

c. ALT+SPACE BAR d NONE

.
4. To cut down the size of the entire graphic design, including all
layers, select the ______ tool. (2 points)
a. Marquee b Magic wand
.

c. Eraser d Crop
.

5. To fill in a layer as a background, which of the following tools

would be useful? Choose all that apply, select all correct
possibilities. (2 points)
a. Line b Paint bucket
.

c. Gradient d Smudge
.

6. The ________ tool is best selected when you need to select an

irregular shaped image in a layer.
a. Crop b Marquee
.

c. Lasso d Magic wand

.

7. The _______ tool allows you to select a rectangular or circular

area of a layer to change or delete.
a. Marquee b Crop
.

c. Hand d Zoom
.

173
8. Drop shadow, inner glow and bevel are examples of _________
you need to use with text.

a. Filters b Bending options

.

c. Image adjustment d Layer modes

.

9. How many Sites can you define with one copy of Dreamweaver
installed on your computer?
a. unlimited b 1
.

c. 10 d 999
.

10. Which of the following is not supported by older browsers?

a. CSS b Layers
.

c. Frames d All of the above

.

11. Dreamweaver users work in the Document Window using one of

how many views?
a. 3 b 2
.

c. 5 d 1
.

12. Dreamweaver's ____ feature allows users to select colors and

make perfect color matches.
a. Color Cube b Palates
.

c. HTML view d Eye dropper

.

13. _________view is a hand-coding environment for writing and

editing code.

a. Design b Split
.

c. Code d None of above

.

14. In order to define a site, users must create a both a ___________

and ____________.
a. domain name / IP address b login / password
.

c. site name / home page d site name / root folder

.

174
15. Which graphic format can you Not insert into your web page?

a. bmp b Gif
.

c. png d None of above

.

16. What is the proper way to manually type an email link?

a. email:myname@[Link] b [Link]
.

c. mail:myname@[Link] d None of above

.

17. Dreamweaver is sold by what software company:

a. Adobe b Macromedia
.

c. Microsoft d None of above

.

18. Use Dreamweaver to create:

a. HTML, XML, and CSS files b PHP, Java, and [Link]

.

c. The new space-time d All of the above, except the

continuum format STCML . space-time continuum thing...

19. You can save images for the Web in these formats:

a. JPG, GIF, PNG b PSD, Tiff

.

c. Flickr d ftp, fla, jsp

.

20. ____________ is a way to partially hide an image in the layer

immediately below another layer. The 2 layers get “locked”
together to produce the effect.
a. Morphing b Twining
.

c. Stacking d Masking
.

21. In Photoshop ___________ panel contains the basic tools needed

to draw and modify objects.
a. Actions b Properties
.

c. Tools d Layers
.

175
22. In Adobe Flash The __________ shows the frames in the movie.

a. Toolbar b Properties pane

.

c. Timeline d Scene
.

23. In Adobe Flash________________ allow you to make objects

move in a more random or non-straight path.
a Mask b Shape tween

c Guided layer d Gravity effect

24. In Adobe Flash ____ is used to change an object from a circle to

a square.
a Mask b Shape tween

c Motion tween d Morphing

25. In Adobe Flash every animation needs a starting and ending

point. _______________ are used to set these.
a Scenes b Key frames

c Blank frames d Graphic symbols

26. The ___________ panel contains the basic tools needed to draw
and modify objects.
a Actions b Properties

c Tools d Layers

27. In Adobe Flash Empty key frames are indicated by

a _________________ circle on the timeline
a Hollow b Black

c Open eye d Closed eye

28. In Adobe Flash a key frame that contains objects will be

represented by a ___________ circle.
a Hollow b Black

c Blue d Gray

176
Answers Key

MCQ Number Correct Answer MCQ Number Correct Answer

1. B 17. A

2. B 18. D

3. B 19. A

4. C,D 20. D

5. B,C 21. B

6. C 22. C

7. A 23. C

8. B 24. B

9. A 25. B

10. D 26 C

11. A 27. A

12. D 28. B

13. C

14. D

15. A

16. B

177
178