Unit – II Computer Graphics

Hardcopy Technologies, Display Technologies

A hard copy is a printed copy of information from a computer. Sometimes it refers to

a printer, so it is called a hard copy because it exists as a physical object. A hard
copy is a tangible output that is usually printed. The principal examples are printouts,
whether text on graphics, form printers, and also films including microfilms and
microfiche is also considered as hardcopy output.
Hard Copy Output Devices:
It is an electromagnetic device, which accepts data from a computer and translates
them into forms understood by users. Output devices:- printers and plotters.

Printers:

The printer is the most important output device, which is used to print data on paper.
A printer is an important accessory for any computer system, especially for a
graphics system. This is because most of the graphics created using computer
graphics have their ultimate utilization in printed form. Printers are of two types
impact and non-impact printers.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 1 of 41

 Unit – II Computer Graphics

There are several major printer technologies available. These technologies can be
broken down into two main categories with several types in each. Impact printers
involve mechanical components for conducting printing. While in non-impact printers,
no mechanical moving components are used.
 Impact-printers: It is a type of printer that works by direct contact with an ink
ribbon with paper. These printers are typically loud but remain in use today
because of their unique ability to function with multiple forms. An impact printer
has mechanisms resembling those of a typewriter. These printers have a
mechanism whereby formed character faces are pressured against an inked
ribbon onto the paper in order to create an image. Example: Dot matrix and line
matrix
 Non-impact printers: It is a type of printer that does not hit or impact a ribbon
to the printer. They used laxer, xerographic, electrostatic, chemical and inkjet
technologies. Non-impact printers are generally much quieter. They are less likely
to need maintenance or repairs than earlier impact printers. These printers do not
touch the paper but rather use laser techniques, ink sprays, xerographic
processes, and electrostatic methods to produce the image on paper. Examples:
laser printers, inkjet printers, electrostatic printers.
 Dot Matrix: In the market, one of the most popular printers is the dot matrix
printer. These printers are popular because of their case of printing and
economical price. Each character is in the form pattern of dots and the head
consists of a matrix of pins of size. Oldest printing technology, one character at a
time by using a fixed no of pins. These printers are bidirectional and slow in
speed.
 Daisy Wheel Printer: It is called a daisy wheel because the print mechanism
looks like a daisy, at the end of each petal is a fully formed character that
produces a solid line print. These printers are generally used for word processing.
 Advantages:
 More reliable
 Better quality
 Font can be changed easily
 Disadvantages:
 Noise
 More expensive
 Line printers: It is an impact printer and it is also known as a bar printer. It
prints one line of text at a time, they can print 30 to 300 lines per minute. Line
printers print the full width of the page, one line at a time, instead of a print head
using back end forth across the page.
 Advantages:
 low cost and more durable
 high speed
 Disadvantages:
 printing quality is low.
 It does not support printing graphics very noisy.
 Ink-jet printers: These printers are non impact character printers based on a
new technology. They print characters by spraying small drops of ink onto to the
paper. Inkjet printers produce high-quality output with presentable features. They
make less noise because no hammering is done and these have many styles of
printing modes available. Some models of inkjet printers can produce multiple

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 2 of 41

 Unit – II Computer Graphics

copies of printing also. The ink in the cartridge of the printers is in liquid form.
They have nozzles from which ink is sprayed onto paper and it gets printed.
 Advantages:
 low cost
 less overall physical size
 high quality of printing
 capable of printing in vivid color
 easy to use
 Disadvantages:
 The print head is less durable
 high maintenance of cost
 cartridges cost is high
 printing speed is not as speed as laser.
 Laser Printers: These are nonimpact page printers. They use laser lights to
produce the dots needed to form the characters to be printed on a page. The
laser printer, prints very fast, and it produces high-quality outputs. But this type of
printer is too costly. This type of printer makes use of a focused beam of light to
transfer text and images onto the paper.
 Advantages:
 It is not noisy,
 The work process is fast.
 Operating cost is low.
 It can print both text and images.
 These printers are highly optimized and user-friendly.
 Disadvantages:
 It is costly.
 It can not print multiple copies at the same time.
 These are not economical.
Differences Between Impact and Non-impact Printers:
Impact printers Non-impact printers

Produces character and graphics on a A type of printer that produces

piece of paper by striking it is called character and graphics on a piece of
impact printing. paper without striking

It prints by hammering a set of metal Printing is done by depositing ink in

pins. array form.

Here Electromagnetic devices are used. No electromagnetic device is used.

Faster speeds around 250 words per Slower speed by around 1 page per 30
second. seconds

Example: dot-matrix printer, line printer Example – Inkjet printer, laser printer

Plotters:

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 3 of 41

 Unit – II Computer Graphics

A plotter is a special output device used to produce hard copies of large graphics
and designs on paper, such as contributed maps, and engineering drawings. The
plotter is either a peripheral component that you add to your computer system with
its own internal processor. It is suitable for applications:
 Architectural plan of the building.
 CAD applications like the design of mechanical components of aircraft.
 Many engineering applications.
Advantages:
 It can produce high-quality output on large sheets.
 It is used to provide the high precession drawing.
 It can produce graphics of various drawings.
 The speed of producing output is high.
Types of Plotters:
 Drum plotter: It consists of a drum. The paper on which the design is made is
kept on the drum. The drum can rotate in both directions. Plotters comprised of
one or more pens and a pen holder. The holders are mounted perpendicular to
the drum surface. The pens are kept in the holder, which can move left to the
right as well as the right to the left. The graph plotting program controls the
movement of pens and drums.
 Flatbed plotter: It is used to draw complex designs and graphics. The flatbed
plotter can be kept over the table. The plotter consists of pen and holder. The pen
can draw characters of various sizes. There can be one or more pens and a pen-
holding mechanism. Each pen has ink of different color. Different colors help to
produce the multicolor design of the document.

Difference between a hard copy and a soft copy?

Some key points of difference between a hard copy and a soft copy are given in the
below comparison chart:

HARD COPY SOFT COPY

A hard copy is a physical document file. A Soft copy is a file that is a virtual copy of the
document.

The hard copy is a physical copy, which is It is a non-printed document file, which is
mainly used for official information. mainly used for private objectives.

The cost of a hard copy to make is expensive The cost of a soft copy to make is cheap and
and treated as a permanent copy. treated as a temporary copy.

It is typed and stored on the computer, and it It is typed and stored on the computer, and it
needs an electronic medium. Electronic needs an electronic medium. Electronic
medium or interface can be cloud drives, medium or interface can be cloud drives,
adobe reader, personal computer, etc. adobe reader, personal computer, etc.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 4 of 41

 Unit – II Computer Graphics

A hard copy cannot be converted into a soft A soft copy can be converted into a hard
copy; also, it is not much easy to carry as like copy; while comparing with the hard copy, it
soft copy. can be carried easily.

The methods of transmission for hard copy The methods of transmission for soft copy are
are hand to hand and mail post service. Also, internet, digital, or electronic. And, it is stored
it occupies physical space. on the storage medium (memory); hence, it
does not occupy physical space.

As compared to soft copy, hard copies are As compared to hard copies, soft copies are
relatively hard to store as well as expensive easy to store as well as not expensive to
to generate. generate.

Hard copies contain much weight as they are Soft copies have no weight as they are stored
printed on paper. on the memories.

Hard copies are completely safe from cyber- The chance of cyber-attack is much high with
attack. soft copies.

The books, notes, newspapers, official The pdf files, e-books, scanned copy,
letters, magazines are all examples of hard presentation files, word documents are all
copies. examples of soft copy.

Display Technologies
The different types of display Technologies included are Liquid Crystal Displays,
Organic Light Emitting Diodes, Digital Light Processing Technology, Plasma
Displays, Field Emission Displays, and Electronic Paper. Display technology is the
most effective way to communicate information.

Display Processor:
It is interpreter or piece of hardware that converts display processor code into
pictures. It is one of the four main parts of the display processor
Parts of Display Processor
1. Display File Memory
2. Display Processor
3. Display Generator
4. Display Console

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 5 of 41

 Unit – II Computer Graphics

Display File Memory: It is used for generation of the picture. It is used for
identification of graphic entities.
Display Controller:
1. It handles interrupt
2. It maintains timings
3. It is used for interpretation of instruction.
Display Generator:
1. It is used for the generation of character.
2. It is used for the generation of curves.
Display Console: It contains CRT, Light Pen, and Keyboard and deflection system.
The raster scan system is a combination of some processing units. It consists of the
control processing unit (CPU) and a particular processor called a display controller.
Display Controller controls the operation of the display device. It is also called a
video controller.
Working: The video controller in the output circuitry generates the horizontal and
vertical drive signals so that the monitor can sweep. Its beam across the screen
during raster scans.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 6 of 41

 Unit – II Computer Graphics

As fig showing that 2 registers (X register and Y register) are used to store the
coordinate of the screen pixels. Assume that y values of the adjacent scan lines
increased by 1 in an upward direction starting from 0 at the bottom of the screen to
ymax at the top and along each scan line the screen pixel positions or x values are
incremented by 1 from 0 at the leftmost position to xmax at the rightmost position.
The origin is at the lowest left corner of the screen as in a standard Cartesian
coordinate system.

At the start of a Refresh Cycle:

X register is set to 0 and y register is set to ymax. This (x, y') address is translated into
a memory address of frame buffer where the color value for this pixel position is
stored.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 7 of 41

 Unit – II Computer Graphics

The controller receives this color value (a binary no) from the frame buffer, breaks it
up into three parts and sends each element to a separate Digital-to-Analog
Converter (DAC).
These voltages, in turn, controls the intensity of 3 e-beam that are focused at the (x,
y) screen position by the horizontal and vertical drive signals.
This process is repeated for each pixel along the top scan line, each time
incrementing the X register by Y.
As pixels on the first scan line are generated, the X register is incremented
throughxmax.
Then x register is reset to 0, and y register is decremented by 1 to access the next
scan line.
Pixel along each scan line is then processed, and the procedure is repeated for each
successive scan line units pixels on the last scan line (y=0) are generated.
For a display system employing a color look-up table frame buffer value is not
directly used to control the CRT beam intensity.
It is used as an index to find the three pixel-color value from the look-up table. This
lookup operation is done for each pixel on every display cycle.
As the time available to display or refresh a single pixel in the screen is too less,
accessing the frame buffer every time for reading each pixel intensity value would
consume more time what is allowed:

Multiple adjacent pixel values are fetched to the frame buffer in single access and
stored in the register.
After every allowable time gap, the one-pixel value is shifted out from the register to
control the warm intensity for that pixel.
The procedure is repeated with the next block of pixels,and so on, thus the whole
group of pixels will be processed.

Silent features of Display Processor:

 Display processors includes functions such as generating various line styles,
displaying color area and performing transformations and manipulations on
display object.
 Display Processor was used before the GPU (Graphics Display Processor).

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 8 of 41

 Unit – II Computer Graphics

 Video Controller is the most widely used Display device that is based on CRT
(Cathode Ray Tube).
 In addition with the system memory, Display Processor have a separate
memory area.

Display Devices:
The most commonly used display device is a video monitor. The operation of most
video monitors based on CRT (Cathode Ray Tube). The following display devices
are used:
1. Refresh Cathode Ray Tube
2. Random Scan and Raster Scan
3. Color CRT Monitors
4. Direct View Storage Tubes
5. Flat Panel Display
6. Lookup Table

Raster-Scan Displays
Raster Scan Displays are most common type of graphics monitor which employs
CRT. It is based on television technology. In raster scan system electron beam
sweeps across the screen, from top to bottom covering one row at a time.A pattern
of illuminated pattern of spots is created by turning beam intensity on and off as it
moves across each row. A memory area called refresh buffer or frame buffer stores
picture definition. This memory area holds intensity values for all screen points.
Stored intensity values are restored from frame buffer and painted on screen taking
one row at a [Link] screen point is referred to as pixels.
In raster scan systems refreshing is done at a rate of 60-80 frames per second.
Refresh rates are also sometimes described in units of cycles per second / Hertz
(Hz). At the end of each scan line, electron beam begins to display next scan line
after returning to left side of screen. The return to the left of screen after refresh of
each scan line is known as horizontal retrace of electron beam. At the end of each
frame electron beam returns to top left corner and begins the next frame.

Raster-Scan Display Processor:

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 9 of 41

 Unit – II Computer Graphics

An important function of display process is to digitize a picture definition given in an

application program into a set of pixel-intensity values for storage in refresh buffer.
This process is referred to as scan conversion. The purpose of display processors
is to relieve the CPU from graphics jobs.
Display processors can perform various other tasks like: creating different line styles,
displaying color areas, etc. Typically display processors are utilized to interface input
devices, such as mouse, joysticks.

ADVANTAGES:
 Real life images with different shades can be displayed.
 Color range available is bigger than random scan display.
DISADVANTAGES:
 Resolution is lower than random scan display.
 More memory is required.
 Data about the intensities of all pixel has to be stored.

Random-Scan Display
In Random-Scan Display electron beam is directed only to the areas of screen
where a picture has to be drawn. It is also called vector display, as it draws picture
one line at time. It can draw and refresh component lines of a picture in any specified
sequence. A Pen plotter is an example of random-scan device. The number of lines
regulates refresh rate on random-scan displays. An area of memory called refresh
display files stores picture definition as a set of line drawing commands. The
system returns back to first-line command in the list, after all the drawing commands
have been processed. High-quality vector systems can handle around 100, 00 short
lines at this refresh rate. Faster refreshing can burn phosphor. To avoid this every
refresh cycle is delayed to prevent refresh rate greater than 60 frames per second.
Suppose we want to display a square ABCD on the screen. The commands will be:
 Draw a line from A to B
 Draw a line from B to C

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 10 of 41

 Unit – II Computer Graphics

 Draw a line from C to D

 Draw a line from D to A
Random-Scan Display Processors: Input in the form of an application program is
stored in the system memory along with graphics package. Graphics package
translates the graphic commands in application program into a display file stored in
system memory. This display file is then accessed by the display processor to
refresh the screen. The display processor cycles through each command in the
display file program. Sometimes the display processor in a random-scan is referred
as Display Processing Unit / Graphics Controller. The structure of a simple random
scan is shown below:

ADVANTAGES:
 Higher resolution as compared to raster scan display.
 Produces smooth line drawing.
 Less Memory required.
DISADVANTAGES:
 Realistic images with different shades cannot be drawn.
 Colour limitations.

input devices for operator interaction in computer graphics

The graphic input devices subsystem includes the keyboard/sound, mouse, tablet,
dials, and lighted programmable-function keys (LPFK) devices. These devices
provide operator input primarily to graphic applications. However, the keyboard can
provide system input by means of the console

input devices for operator interaction in computer graphics

The graphic input devices subsystem includes the keyboard/sound, mouse, tablet,
dials, and lighted programmable-function keys (LPFK) devices. These devices

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 11 of 41

 Unit – II Computer Graphics

provide operator input primarily to graphic applications. However, the keyboard can
provide system input by means of the console.

What are the input devices for operation interaction?

 Keyboard. Keyboard is the most common and very popular input device which
helps to input data to the computer. ...
 Joystick. Joystick is also a pointing device, which is used to move the cursor
position on a monitor screen. ...
 Track Ball. ...
 Digitizer. ...
 Magnetic Ink Card Reader (MICR)

What Does Image Scanner Mean?

An image scanner is a digital device used to scan images, pictures, printed text and
objects and then convert them to digital images. Image scanners are used in a
variety of domestic and industrial applications like design, reverse engineering,
orthotics, gaming and testing. The most widely used type of scanner in offices or
homes is a flatbed scanner, also known as a Xerox machine. This modern image
scanner is a descendant of early fax input devices and telegraphy equipment.

Techopedia Explains Image Scanner

The image scanner was introduced in 1957 by a team led by Russell Kirsch at the
U.S. National Bureau of Standards (now the National Institute of Standards and
Technology).

When a document is placed inside a scanner, the image is first scanned and then
the scanned data is processed and sent to a computer system. Scanners can read
red-green-blue color from color array and the depth of these colors is measured
based on the array characteristics. Image resolution is measured in pixels per inch.

There are various types of scanners:

1. Drum Scanners: These scan an image with photomultiplier tubes (PMT). The
reflective originals are accumulated with an acrylic cylinder or drum, which

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 12 of 41

 Unit – II Computer Graphics

rotates when the object is passed for scanning in front of the precision optics.
These optics then transmit the image information to the PMT. For color, a
drum scanner uses three PMTs for reading red, blue and green.
2. Flatbed Scanners: These consist of a glass pane and a moving optical array
of charge-coupled device (CCD) scanning. Flatbeds contain three arrays of
sensors along with red, green and blue filters. Images to be scanned are
placed flat on the pane and a dense cover is used to keep out ambient lights.
Then the sensor arrays and light source move across to read the full image
area. For transparent images, special accessories for illuminating them from
the upper side are used.
3. Film Scanners: Slide or negative film strips are placed in a carrier inside the
film scanner. This carrier is moved with the help of a motor along a lens and a
CCD sensor.
4. Hand Scanners: Handheld devices pulled across the image surface for
scanning large images.
5. 3D Scanners: These scanners depend on the placement of reference markers
that are used to align the element’s position in the space.
6. Desktop Digital Camera Scanners: An all-in-one printer along with a desktop
digital camera scanner. This scanner offers high-speed image scanning.
7. Smartphone Scanner: Apps can be downloaded on many smart phone
devices, allowing them to scan documents through the digital camera
exposures and provide output in JPEG or PDF formats.

Adobe Dreamweaver Tutorial

Adobe Dreamweaver is a software for designing web pages. These HTML web
pages are fully featured. This software provides a WYSIWYG i.e., What You See Is

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 13 of 41

 Unit – II Computer Graphics

What You Get interface for creating and editing the web pages. The Adobe
Dreamweaver software supports many markup languages like HTML, XML, CSS,
and JavaScript. It supports English, Spanish, French, German, Japanese, Chinese,
etc....

The Dreamweaver was developed by Macromedia, and it was published in 1997. In

2005 the Adobe had purchased Dreamweaver and name it as Adobe Dreamweaver.

Features of Adobe Dreamweaver

1. Fast, flexible coding.

Creating, coding, and managing the websites becomes very easy because of the
simplified coding engine. Using this software, HTML, CSS, and other web standards
can be quickly learned. It speeds up the development of the web site.

PlayNext

Unmute

Current Time 0:42

Duration 18:10
Loaded: 9.54%
Â

Fullscreen

Backward Skip 10sPlay VideoForward Skip 10s

2. Setup to site up in fewer steps.

It becomes very easy to set up a web site, and starter templates can be run very
fast. Templates can be customized for email, About pages, blogs, e-commerce
pages, newsletters, and portfolios. For reading codes, code coloring and visual hints
can be used for quickly editing and updating.

3. Dynamic display on every device.

Using Adobe Dreamweaver responsive websites can build that can be fit into any
screen size. This helps in previewing sites and editing makes sure that the page
looks and works the same way that you want.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 14 of 41

 Unit – II Computer Graphics

Below are some of the latest updates

1. Multi-monitor support for Windows

ADVERTISEMENT

The workspace can be expended by displaying web pages on multiple monitors.

2. CEF integration

The latest version of the Chromium Embedded Framework is integrated with

Dreamweaver. So now, web pages can be built using HTML5 websites and elements
can be display, CSS grids, and many more.

3. Redesigned, modern UI

For customization of workspace Streamlined and the clutter-free interface can be

used. It displays the tools which need to be coded.

4. Git support

Collaboration is very easy using Git support. From the Git panel, all the source code
can be managed within Dreamweaver, and all the common operations can be
performed

New features in Adobe Dreamweaver CC 2019

1. CEF updates

The latest version of the Chromium Embedded Framework is integrated with

Dreamweaver. Designers and developers can build Websites and display Flexbox
elements, CSS grids and many more.

ADVERTISEMENT

2. ES6 support

For a quick listing of classes, methods, arrow function and generated functions,
EcmaScript 6 is supported in Dreamweaver. ES6 code can be used for working with
the latest JavaScript updates.

ADVERTISEMENT

ADVERTISEMENT

3. JavaScript refactoring

JavaScript codes can be organized using features like rename and refactor.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 15 of 41

 Unit – II Computer Graphics

Following are the Pros of Adobe Dreamweaver

1. For quick scanning, it can highlight the code.

It helps in determining where is CSS, PHP, JavaScript, or HTML code is to be

placed. For creating a dynamic page, this feature is very useful.

2. Helps beginners to understand the coding for a website.

The color-coding feature of highlighting helps beginners very much as it can display
what a specific command can do for template and pages. By this, the learning
process becomes very easy.

3. code suggestions for the user.

It is a very important benefit for beginners while coding. If the user is confused about
what to do with an image, a font, or a color, then the Adobe Dreamweaver will auto-
fill the suggestions directly with a drop-down menu in the code. Select your choice,
which suits your websites and create a code. It is very easy.

4. User needs to switch screens.

The real-time results of the program can be seen by the users. Many programs do
not allow this feature of viewing page in real-time on the same screen. In Adobo
Dreamweaver coding and the designing view is on the same screen, on top is the
designing view and on the bottom of the coding area.

5. The code of the developer is instantly checked.

For a beginner, it is very important to build a correct and valid in the starting phase.
When coding is done in a traditional manner, then accessibility issues and mistakes
in the code can occur. Adobe Dreamweaver highlights the mistakes and shows all
the issues and also check all accessibility.

6. Using word processing variations in content creation becomes easy.

In Microsoft Office, if you want to bold a text, then you just press Ctrl+B. In Adobe
Dreamweaver for bolding a text, you need to highlight the text and then a word
processor heads-up display which helps in creating fast changes in the highlighted
section.

7. Finding and replacing items becomes easy in the created site.

In Adobe Dreamweaver, a user can find and replace items from there content,
coding, or in any specific tags using find and replace tool. If any new plugin releases
can be updated the code very easily. Thousands of pages can be updated in just a
second using this feature.

8. A developer can tab via files like someone tabs via internet sites.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 16 of 41

 Unit – II Computer Graphics

The functionality included in Dreamweaver makes the switching between files makes
it very easy. Visiting multiple menus using this feature file can be kept ready. This is
very beneficial in templates and also in overall design plans.

Following are the cons of Adobe Dreamweaver

1. It is not a browser-based IDE.

The output of the coding in Adobe Dreamweaver can be different in the browser
because the browser will interpret the code in a different way. This becomes a huge
disadvantage for the developers because it will not respond in cross-platform.

2. A lot of time is required to learn the interface.

When you first start with the adobe Dreamweaver, then you will get dozen of items
for accessing. Depending on the file that you will open, 50+ different things can be
seen on the screen. For a beginner, it would be very intimidating to start the coding.

3. What you are seeing is not necessary that you will always get.

This is a very disadvantage because here design view proves that it is not a
browser-based view. For a developer, it becomes difficult for the positioning of items.
It is 100% guaranteed that the output will be very disappointed in the browser.

4. There is no specific automatic coding option.

The Adobe Dreamweaver was designed to meet the requirements of the users.
Because of this, the code becomes very lengthy. The validation of one line takes 15-
20 lines of code in adobe Dreamweaver.

5. Global styling is a major issue.

If a developer wants to use the properties bar on the text within the old version of
Adobe Dreamweaver, then it will add an undefined and not styled document to the
coding. In case if you want many dozens of undefined styles, then it will create an
issue for styling the website.

6. Pressing enter after completion of a line affects the size.

Generally, when we type a line after completion of it, we press the enter key from the
keyboard. In Adobe Dreamweaver, when you are writing a line, and after completion
of it, you press the enter key, then Dreamweaver will treat it as a paragraph. Also,
the text will appear around the image.

7. A lot of additional features by which a user is not familiar.

As adobe Dreamweaver is designed for the user to make there work easy, but most
of the users find that a lot of features are present which they have never used.

Installation of Adobe Dreamweaver 2019

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 17 of 41

 Unit – II Computer Graphics

Step 1: Click on the setup from the adobe Dreamweaver folder.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 18 of 41

 Unit – II Computer Graphics

Step 2: Select the language of your preference and the location. By default, the
language is English, and the location is the default location.

Installation gets started.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 19 of 41

 Unit – II Computer Graphics

The Dreamweaver 2019 is successfully installed.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 20 of 41

 Unit – II Computer Graphics

Starting the Adobe Dreamweaver first time after installation

Double click on the Adobe Dreamweaver 2019 icon. You will get a screen in which
you have to select any one option. Select I'm new if you have never done
programming earlier, or if you have done programming before then select, I have
option.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 21 of 41

 Unit – II Computer Graphics

After this for setting up the wizard, choose any one workspace developers or
standard workspace.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 22 of 41

 Unit – II Computer Graphics

After this pick any one color theme for your workspace.

The final step is to choose how to start. There are three options present start with a
sample file, start with a new or existing folder, or start by watching a tutorial.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 23 of 41

 Unit – II Computer Graphics

Getting Started with the Adobe Dreamweaver 2019

Double click on the Adobe Dreamweaver 2019 icon. You will get an IDE of the
software.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 24 of 41

 Unit – II Computer Graphics

For creating a new file, click on the Create New? button which is present on the right
side.

After this New Document window will appear.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 25 of 41

 Unit – II Computer Graphics

For creating an HTML5 document type select HTML and give the title for the
document. You can also attach CSS files that are already created. And then click on
the create button.

A workspace will appear. The workspace is divided into two-part. The 1st part is to
preview instant coding. The 2nd part is for coding.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 26 of 41

 Unit – II Computer Graphics

By default, the workspace is in Split mode.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 27 of 41

 Unit – II Computer Graphics

In the code option, only coding can be done. Save the file and run it in chrome.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 28 of 41

 Unit – II Computer Graphics

Or by clicking on Live option output can be viewed.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 29 of 41

 Unit – II Computer Graphics

Designing a website using Dreamweaver IDE

1. To create a website, the 1st step is to create a new site page. For this follow
the below steps:

i. Click on site in the menu bar.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 30 of 41

 Unit – II Computer Graphics

ii. Click on New site.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 31 of 41

 Unit – II Computer Graphics

iii. A site setup window will appear. Give the site Name and the location where this
folder will be created.

Note: It is a good practice to keep all projects in one folder.

You can also associate your project with this site by selecting it. This option gives
you version control, but you can skip this option, as it is not mandatory. And then
click on the save button.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 32 of 41

 Unit – II Computer Graphics

iv. Now, again click on site from the menu bar. On the left side of the site setup
window, click on Advanced Setting. In this click on Local Info.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 33 of 41

 Unit – II Computer Graphics

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 34 of 41

 Unit – II Computer Graphics

v. Now select the Default image folder by clicking on the folder icon. Now go to the
folder where you have created the folder for the site and create a new folder name it
as images and select it as your default image folder. In this folder, all the images will
be saved by the Dreamweaver automatically. And then click on the save button.

1. Now after creating a site folder, now we have to create a home page file in
that folder. For this follow the below steps:

i. Click on the file option in the menu bar.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 35 of 41

 Unit – II Computer Graphics

ii. Click on New file.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 36 of 41

 Unit – II Computer Graphics

iii. A new document window will appear. By default, HTML is selected as doctype.
Give the title of the file and click on create button.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 37 of 41

 Unit – II Computer Graphics

After clicking on create button workspace will appear.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 38 of 41

 Unit – II Computer Graphics

2. Now for Creating a Header on the web page. Following are the steps:

i. Click on the insert tab which is present on the right side of the workspace.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 39 of 41

 Unit – II Computer Graphics

ii. Now select the header option, which is present inside the insert tab.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 40 of 41

 Unit – II Computer Graphics

The control will automatically move the control to the head section on the web page.

Dr. K.K. Gautam, Associate Professor & Deputy HOD-CS Page 41 of 41