Homework Title / No.

: _Graphic Tools__________________Course Code : _CAP209________

Course Instructor : Jasveen Kalra________ Course Tutor (if applicable) : ____________

Date of Allotment : 11/04/2011___________ Date of submission : _18/04/2011______________

Student’s Roll No._B47___________________ Section No. : _D3001________________________

Declaration:
I declare that this assignment is my individual work. I have not copied from any other student’s work
or from any other source except where due acknowledgment is made explicitly in the text, nor has any
part been written for me by another person.

Student’s Signature : _Maninder Kaur____________

HOME WORK 4

Part A

1. What is the use of Style Sheets in Dreamweaver? How can you add elements into Layers?

--> With cascading style sheets (CSS), you can specify automatic HTML formatting options that apply
to an entire site. Although implementing style sheets in HTML can be complicated, Dreamweaver 3.0
makes this a relatively simple process.

 Start the Dreamweaver program.

 Open the Window menu and select CSS Styles (or press the F7 key). This will open the CSS Style
Properties box.
 Click on the New Styles button on the bottom of the Style Properties box in the lower right corner
(which resembles a page with the corner folded over).
 Select a style type (see Tips) and name the style.
Choose the style formatting options and click OK.
Apply the style by selecting the object to be changed and clicking on the style in the CSS window.
Apply the style to the entire page by choosing "body" from the Apply To list in the CSS window.

You can insert anything into a layer that you can insert into a webpage, including images, text,

multimedia, and even tables. To insert text, simply click to insert your cursor inside the layer and start

typing. To insert an image, click to place your cursor in a layer and use the Image icon (or choose

Insert>Image), browse to find the image you want to insert, and click Choose.Note: Placing layers

inside tables can lead to misaligned elements.

 2. Discuss Designer Panels and toolbars of Dreamweaver.


On the right pane in a standard installation, are several windows docked together. These tools give
you access to all sorts of different things within Dreamweaver. The first tool is the Design Panel.

The Design window helps you to set your CSS styles and design your Web page completely with CSS
rather than tables or fonts or other deprecated HTML markup. To create a new style, click on the
"New CSS Style" icon in the lower right corner of the window. You can also attach a style sheet to
your Web page here, or write all your styles as in-line styles.

The second tab in the Design window is the layers tab. IF you use layers within your document, they
will show up in this tab and allow you to manipulate them. You can see at a glance the visibility of your
layers as well as their z-index and more.

Toolbar:-
Document Toolbar
Use the buttons on the Document toolbar, located just above the Document window, to switch
between Code, Split, and Design views.

The Document toolbar also contains commands for naming, previewing, and publishing the current
document:
Title - Lets you specify a title for the page, which appears in the title bar of the browser's
viewer.
No Browser/Check Errors - Provides a menu of options for checking browser
compatibility with the page.
File Management - Provides a menu of file management options for the page, including a
command to upload the page to your web server.
Preview/Debug in Browser - Lets you preview the page in the browser you select.
Refresh Design View - Refreshes the appearance of the page in Design view after you've
made changes to it in Code view.
View Options - Lets you specify various settings for the current view.
If you don't see the Document toolbar, open the View menu and select Toolbars, and
thenDocument to show it.
Standard Toolbar
The Standard toolbar, located just below the Document toolbar, contains the same commands you'd
find on most standard Windows toolbars:

New - Create a new document.

Open - Open an existing document.
Save - Save the current document.
Save All - Save all open documents.
Cut - Cut the current selection.
Copy - Copy the current selection.
Paste - Paste the contents of the clipboard.
Undo - Undo the last action.
Redo - Redo the last action in the undo history.
To display the Standard toolbar, open the View menu and select Toolbars, and then Standard.
Insert Bar
The Insert bar contains most of the commands you'll use to add elements to your pages. These
include images, hyperlinks, tables, forms, and multimedia objects. These commands are grouped into
categories, which you can choose from the drop-down menu at the left side of the toolbar.

Common - The default category, which contains commands for adding hyperlinks, tables, images,
and multimedia objects.
Layout - Used for designing the layout of your page, with commands for tables, layers, and
framesets.
Forms - Contains commands for adding form elements to your page.
Text - Contains commands for applying various formatting to the text on your page, as well as for
inserting special characters.
HTML - Lets you select various HTML tags to insert into your page.
Application - Contains commands for adding database elements to your page.
Flash Elements - Lets you insert a Macromedia Flash movie into your page.
Favorites - Lets you customize your own toolbar by grouping your favorite commands.
You'll be introduced to many of these commands in subsequent sections of this tutorial.
To show or hide the Insert toolbar, open the View menu and select Toolbars, and then Insert.

3. Explian with example the use and concept of frames.

What Are Frames?

Frames are separate windows that appear inside a web page. Each frame is made up of a
separate HTML page.

In addition to the individual HTML pages that make up the web page with frames, there is
another HTML page that doesn't display. It is called the Frameset. Its purpose is to direct the
display of the pages that make up the web page with frames.

Even though the Frameset doesn't display, it is obviously very important to a web page that
uses frames.

Creating Frames

Activity-------------------------------------------------------------------------------
Open a new Dreamweaver window by clicking the File menu, New.

From the View menu, select Frame borders to show the frame borders. A strong outline
appears around the inside of the document window. These are the frame borders. You will
use the frame borders to create the frames.

Hold down the Alt key, place the mouse over the left border and drag the left hand border
toward the right. Make the left frame narrower than the right.

Click inside the right hand frame to select it. From the Modify menu, select Frameset,
then Split Frame Down. A new frame border will divide the right hand frame into top and
bottom. Now there are three frames.
 Selecting Frames and Framesets, Adding Text

Selecting a Frame

To select a frame so that its properties can be modfied, press the Alt key and click inside the
frame. A dotted line surrounds the inside of the frame that is selected. The HTML of that
frame (page) is visible in the HTML inspector window.

Selecting the Frameset

To select the frameset, click on a frame border. The HTML of the frameset document is visible in the
HTML inspector window.

Activity--------------------------------------------------------------------------
Click inside the top frame and type and format some text for a web site title.

Click in the left most frame and type some index text.

Click in the main frame and type some text.

Saving Frames and Framesets

Remember that the frameset document does not display information on the screen. It is the
file that specifies the format of the frames that actually contain the data. Dreamweaver
automates the process of creating a frameset.

To save a frameset file, choose File, Save Frameset As. You will be prompted for a
name. Many framesets are called index.html, because their information is used to display the
framed pages.

To save a frame document, click in a frame and choose File, Save. You will be prompted
for a name.

Naming Frames

To be able to target documents into frames, it is important to give frames names.

The name of a frame is different from the name of the HTML file. Every HTML file has a file
name, but not every HTML page has a name associated with a frame.

Use the Property editor to name frames. Alt click the frame you wish to name. The
property editor will change to reflect the properties of the frame.

On the left side an empty box called Frame Name. Type a name.

It is always best to select a descriptive name for the frames you create.
 Use the frames Property editor to specify other properties of the frame as well. Such as
scroll bars, resize or no resize, borders, border color and margins.

Activity--------------------------------------------------------------------------

Alt click inside each of the three frames. The Property Box now shows the frame
properties. Name each frame by typing a name in the blank box underneath the word
"Frame".

Save each individual frame as left.html for lefthand frame, top.html for the top frame, and
"main.html" for the largest frame.

Save the frameset for your document as frameset.html.

Notice that the Property Box allows you to change other properties such as border color,
etc.

Using Links in a Frame

Often the left frame is used as an index that remains visible, while the big frame changes
content when one of the links in the index is clicked.

This link shows an index frame on the left. Clicking one of the topics causes the main frame
to load a new document. Dreamweaver can help with the details of "targeting" a document to
a particular frame.

Targeting is very important. If links inside framed documents are not targeted correctly, you
might have the awkward situation where a large document is loaded into the small menu
frame on the left side!

Activity--------------------------------------------------------------------------

Select some text in the left frame.

If the Properties Box is not open, open it from the Window, Properties menu.

In the link box, type in the URL of a page that you would like to load in the main frame.
For example, you could type http://www.yahoo.com to load Yahoo's main page into the main
window.

Now, in the Target drop down box, select the main frame to target the new document into
the main frame.

From the File menu, select Save All. Try your frame from the File menu, select Preview
in browser.
Part B

4. Discuss Media Elements in Dreamweaver.

 Dreamweaver lets you add sound and movies to your website quickly and easily. You can attach
Design Notes to these objects, which let you communicate with your team. You can also insert Flash
button and text objects from within Dreamweaver itself. You can incorporate the following media files
into your Dreamweaver pages: Flash and Shockwave movies, QuickTime, AVI, Java applets, Active X
controls, and audio files of various formats.
Inserting and editing media objects:
You can insert Flash SWF files or objects, QuickTime or Shockwave movies, Java applets, ActiveX
controls, or other audio or video objects in a Dreamweaver document.
To insert a media object in a page:
1. Place the insertion point in the Document window where you want to insert the object.
2. Insert the object by doing one of the following:
o In the Common category of the Insert bar, click the Media button and select the
button for the type of object you want to insert.

o Select the appropriate object from the Insert > Media submenu.
o If the object you want to insert is not a Flash, Shockwave, Applet, or ActiveX object,
use the Netscape Navigator plug-in button (the puzzle piece icon in the Insert bar) to
insert it.
3. Complete the Select File or Insert Flash dialog box.
4. Click OK.
Adding video (non-Flash):
You can add video to your web page in different ways and using different formats. Video can be
downloaded to the user or it can be streamed so that it plays while it is downloading.
To include a short video clip in your page that the user can download:
1. Place the clip in your site folder.
These clips are often in the AVI or MPEG file format.
2. Link to the clip or embed it in your page.
To link to the clip, enter text for the link such as "Download Clip", select the text, and click the folder
icon in the Property inspector. Browse to the video file and select it.

Adding sound to a page:

You can add sound to a web page. There are several different types of sound files and formats,
including .wav, .midi, and .mp3. Some factors to consider before deciding on a format and method for
adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.

Linking to an audio file

Linking to an audio file is a simple and effective way to add sound to a web page. This method of
incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file
available to the widest audience.
To create a link to an audio file:
1. Select the text or image you want to use as the link to the audio file.
2. In the Property inspector, click the folder icon to browse for the audio file, or type the file’s
path and name in the Link text box.

5. What are Form Elements? How can you insert form into frames?
 Inserting a form
Before you can add form elements, such as text fields, drop-down menus, and submit buttons, to a
web page, you must first insert a form. This creates the <form> tags that identify the form and give the
browser instructions as how to process the form.

To insert a form, select the Forms category/tab in the Insert panel/bar, and click the Form button (it's
the first one). Alternatively, use the menu option Insert > Form > Form.

What happens next depends on whether the cursor was active in Design view or Code view (in other
words, the last place you clicked in the Document window).

When Design view is active

If your cursor is active in Design view, Dreamweaver automatically inserts the <form> tags in Code
view, and displays a red dotted outline in Design view indicating where the form has been inserted, as
shown in the following screenshot:
As you can see from the preceding screenshot, Dreamweaver automatically gives the form the
same id and nameattributes. It sets the method attribute to post, and leaves the action attribute
empty.

You can change any of these values in the Property inspector, as shown next (click the red dotted
outline of the form, if the Property inspector doesn't show the form properties):

• Form ID: Dreamweaver automatically calls the first form in a page form1. If you add another
form, it calls it form2. You can either accept these default names or choose your own. An ID must
always be unique within a page.
• Action: This is where you enter the address of the script that processes the form. HTML does
not have any form processing capabilities, so this should point to a script that uses a server-side
language, such as Perl, PHP, ColdFusion, etc. If you leave this field blank, the form becomes "self-
submitting". What this means is that the form attempts to submit the input data to the current page.
This is a common technique, where the server-side script is included above the DOCTYPE
declaration, and is executed only when the form has been submitted.
• Method: This tells the browser how to submit the data. POST should be used for forms that
change values in a database, and for sending emails, or uploading files to a server. GET adds the
 data to the end of the URL, and should be used for database searches. The Dreamweaver popup
menu has a third option, Default. This is the same as GET. It's best to use POST or GET, so the
meaning is always clear.
• Target: This should normally be used only in a frameset to indicate the frame in which the
processing script is located.
• Enctype: Leave this blank. Dreamweaver automatically inserts the correct value if your form
is being used to upload files.

When Code view is active

If you are working in Code view or in Split view with the cursor active in the code, Dreamweaver
reacts in a completely different way, and presents you with the Tag Editor for a form, as shown in the
following screenshot:

The Tag Editor is designed for advanced users who want access to a wider range of attributes than
offered by the Property inspector. If you're comfortable with HTML code, go ahead and fill in the
relevant fields. Notice, however, that the default value for Method is get, rather than POST (the values
are case-insensitive). Also, giving the form a name in this dialog box does NOT automatically assign
the same value as its ID. You set the ID separately in the Style Sheet/Accessibility section of the Tag
Editor.

If you get this dialog box by mistake, just click Cancel. Dreamweaver dismisses the dialog box, and
makes no changes to your HTML code.

If you click OK, Dreamweaver inserts the <form> tags into Code view. When you click in Design view,
the same red dotted outline is displayed as shown in the first screenshot.

Adding form elements

Once you have a form, you can begin adding form elements. Make sure that your cursor is between
the form tags or inside the red dotted outline, and use the buttons on the Forms category/tab of the
Insert panel/bar, or use the relevant option in the Insert > Form submenu. Again, what happens
depends on whether your cursor is active in Design view or Code view.

When Design view is active

By default, when you insert a form element in Design view, Dreamweaver opens the Input Tag
Accessibility Attributes dialog box shown in the following screenshot:
 As a minimum, you should enter an ID for the element (this is also used as the name attribute).
Optionally, add a label. This is text that will be inserted in <label> tags. If you add a label, select one
of the radio buttons to indicate how the<label> tag is handled:

• Wrap with label tag: This wraps both the text in the Label field and the form element
inside <label> tags.
• Attach label tag using 'for' attribute: This keeps the <label> separate from the form
element, and is the way accessibility experts recommend using. It uses the id attribute to identify the
form element like this: <label for="search">Search holidays: </label>.
• No label tag: Select this if you don't want to add a label. This is used mainly with submit
buttons.

Position determines whether the label goes before or after the form item. Dreamweaver automatically
selects the correct value for this, using the position recommended by accessibility experts. Disabled
people expect the label to be in a particular position, so don't change the value unless you have a
really good reason to do so.

Access key and Tab Index are optional. Unfortunately, there are no agreed standards for accesskey.
The tabindexattribute sets the order in which elements are given focus by the Tab key. If you use this
option, it's a good idea to allocate numbers in steps of 10. This avoids the need to renumber all your
form elements if you decide to add another at a later stage.

If the Input Tag Accessibilty Attributes dialog box doesn't appear when inserting an element in Design
view, enable it by opening the Preferences panel from the Edit menu on Windows or the
Dreamweaver menu on a Mac, select the Accessibility category, and make sure there's a check mark
in the Form objects checkbox.
When you click OK in the Input Tag Accessibility Attributes dialog box, Dreamweaver inserts the form
element with all the options you have selected. If you click Cancel, Dreamweaver still inserts the form
element, but does not set any of the accessibility attributes.

Once the form element has been inserted, select it in Design view to bring up the element's properties
in the Property inpsector, and make any changes you want there.

When Code view is active

When Code view is active, Dreamweaver presents you with the form Tag Editor again, and not the
Input Tag Accessibility Attributes dialog box. To add accessibility attributes, select the Style
Sheet/Accessibility section on the left. As you can see from the following screenshot, the form Tag
Editor has no option for adding a label. You need to add that manually in Code view.

6. How can you create a Table and Lists in Dreamweaver. Explain with the help of examples.


Tables

BASIC TABLE CREATION RULES

To insert a table in Dreamweaver:

Click INSERT -> TABLE

The Insert Table window will open. You can set the number of rows and columns, Cell Spacing
and Padding in pixels, the table width in percent or pixels, and the border width in pixels.

If you choose a border width of "0", Dreamweaver will still show you a line, but itll be gone in
the browser.

** IMPORTANT: A blank window field in Dreamweaver does not mean "0". A blank window field
means "use the HTML default". For example, if you leave the Cell Padding window blank,
Dreamweaver will automatically use cellpadding=4. If you want "0", youll have to insert "0".
 1. Fill in the Insert Table window with the above values.
2. Hit OK

Your table will insert!

3. Click inside the first cell and type your name. Notice that the cell stretches. We havent
set its width yet.
4. Make sure the Properties Palette is open. (WINDOW-> PROPERTIES)

Right now, the Properties Palette is displaying information for the cell you just clicked in.
Sometimes it is hard to tell what area of the table the Properties inspector thinks you are
editing. There is an easy way to select different parts of a table and to determine what part of
the table is selected.

5. When editing a table: In the lower left corner of the Dreamweaver window you will see
different table tags, like <TD> <TR> and <TABLE>
By clicking the appropriate tag, you can select the desired table area.

6. Click <table>
You will notice that the Properties Palette changes to display table attributes.

Later, when you start nesting tables, it will be much easier to accurately select elements using
the table selector in the lower left corner of the Dreamweaver window.

Changing Table Attributes

The following are table attributes you can change on the top row of the Properties Palette:
Change the settings to see what happens. Have fun. You cant hurt anything. If youre really worried
you can set them back to what they used to be.

Rows: The total number of rows in the table

Cols: The total number of Columns in the table

W: Table width, in pixels or %

H: Table height, in pixels or %

CellPad: Cell padding for the table. Cell padding is the space between each cell wall and the
cells contents

CellSpace: Cell Spacing for the table. Cell Spacing is the space in pixels between each cell.

Align: The tables alignment relative to the page.

Border: The table border in pixels.

The following are table attributes you can change on the bottom row of the Properties Palette:

Clear Column/Row heights/widths: these buttons can be used to clear out all the
Column and row settings if your table gets seriously messed up. Youll have to re-input your
width and height values, but at least you wont have to rebuild the whole table. This button is
for bad little Dreamweaver users who ignored the rule about keeping your column widths the
same all the way down.

Change Pixels to Percent / Percent to Pixels: These buttons convert percentage based
tables to pixel and vice versa. Not the most useful button

Vspace: (Vertical Space) Space between the table and anything above or below it.

Hspace: (Horizontal Space) Space between the table and anything to the left or right of it.

Light Brdr / Dark Brdr: (Light & Dark Cell Borders) In each cell the top and left border is darker
to create a slight shadow. You can change these colors. Clever designers sometimes match
one color to the background color to create an accent.

Bg: You can set a background color or image. Note that Netscape will not support table
background images.

Brdr: You can set the outside border color for the table here. If you want all the borders in the
site to change youll have to adjust the cell border colors, too.

7. Build a 100% table with the following attributes:

3 rows, 4 columns, and a red 1 pixel border

Changing Cell Attributes

Selecting Multiple Cells

By selecting multiple cells you can apply the same formatting to many cells at the same time.
To select multiple cells:

* Click and drag over the cells you want to select

* CTRL+Click or CMD+Click
* Shift+Click. If you click one cell and then shift+click another Dreamweaver will select
both cells and any cells in-between

* Select a whole row or column: If place your cursor directly to the right of any row or
directly above any column, your cursor will become a black arrow. Click, and the whole
row/column will become selected.

Editing Cell Properties with the Properties Palette

1. Click a cell. Notice that the Properties palette changes to display changeable values for
the cell. The top row of the Properties palette is for text in the cell. Each cell is treated
like its own little page. Youll have to reset your font formatting.

The following are cell attributes you can change on the Properties Palette:

Merge/Split Cells: To merge or split cells using ROWSPAN and CELLSPAN, select
the cells to merge/split and click this button. Remember that for complicated tables you are
much better off nesting tables than merging/splitting cells.
**NOTE you must select multiple cells to merge cells.

Horz: (Horizontal cell alignment) Horizontally aligns text in a cell

Vert: (Vertical Cell Alignment) Vertically aligns text in a cell. Remember that text lines up to the
middle of a cell by default.

W: Cell Width. If you want %, youll have to manually add the %. Leave this attribute blank if
you want the column to resize itself automatically based on the screen size.
***NOTE: Youre better off setting width before you put text in the cells.

H: Cell Height. You can set a cells height, but it is usually best not to mess with height. The
cell may need to re-size depending on the viewers monitor settings.

Bg: You can set a background color or image for each cell. Cell background colors and images
supercede table colors or images.

Brdr: Border color for individual cells.

2. See if you can build the following table:

Using Spacer Images

Images will stretch a cell if the image is larger than the cell. This can be useful because a
column will collapse if it has nothing in it. You can use a transparent gif, called a spacer image
or shim, to keep a column from collapsing. Properly sized, a gif will hold a cell open to the
images height or width. You will learn how to make a transparent gif later on.

The gif is only one pixel square. This is the smallest file you can make. After inserting the gif,
you can immediately resize it using HEIGHT and WIDTH.

1. Insert the gif into a cell.

2. Resize the gif to H:200

Lists:-

Lists in Dreamweaver

When you're designing a website, making lists is a good way to organize information. Lists makes it
easier for visitors to read the information on your page. You may want to make simple unordered,
bulleted lists, or be more advanced and use ordered, numbered lists. Both are simple to create in
Adobe Dreamweaver and will make you website more user-friendly.

 Open a new page in Dreamweaver by clicking File > New Blank Document.


Open the Property Inspector. In the menu bar across the top of the screen, click Window > Properties
or use Apple + F3.
 Click within the new page where you want the list to appear.


In the Property Inspector, click on the unordered or ordered list buttons above the "Page Properties"
button. If you have trouble locating these, hold your mouse over the buttons and a tab will tell you the
function of each button.


Alternately, to create a list, you can go to the top menu bar and select Text > List > and your choice of
list type. A small bullet or number will appear on the page.
Type the information you want in your list, hitting Enter to create a new bullet on the next line.
 As a final way of creating lists, you can highlight unlisted information on your page that you want to
bullet or number and then repeat Step 4 or 5.
To end the list, press Enter/Return on your keyboard twice.