HOME WORK 4

CAP209: GRAPHIC TOOLS

Title Page

Home Work Title/no:- 4 Course Code:- cap209

Course Instructor:-
JASVEEN MAM Course Tutor:-

Date of Allotment:- Date of Submission:

10/12/.09

Student Roll no:-A08 Section no:- E3801

Declaration:-
“I declare that this assignment is my individual work.I have not copied from
any other students work or from any other students source except where due
acknowledgement is made explicitly in the text. Not as any part being written
for me by another person”.

Student Signature:- REENA CHOUDHURY

Evaluator Comment:-

Marks out of:-

PART A
Q1.What is the use of Style Sheets in Dreamweaver. How can you
add elements into Layers?
ANSWER:-
CSS Styles palette
The CSS Styles palette is used for setting up the CSS (Cascading Style Sheet)
styles that will govern your wireframe. A style is a description of the formatting
properties that you apply to text or a table cell, including things like font color and
size, background color, etc. Styles are useful for ensuring that all of the wireframes
you create look consistent. If you have ever used styles in Microsoft Word, CSS
styles work in much the same way.

The CSS styles palette.

With cascading style sheets (CSS), we can specify automatic HTML formatting options that
apply to an entire site. Although implementing style sheets in HTML can be complicated
Layers are DHTML components and are similar to tables with a few different properties.
Layers can be hidden or made visible, this is an added advantage in layers. Layers are
viewed differently in different browsers
Create and add content to a layer
Click on Insert>Layout Objects>Layers from the menu bar. The following image is
displayed on the screen. This is the layer into which content will be added.
Click inside the frame and add content or insert an image. Just click inside the layer and add
text, images, whatever.
Naming a layer
Dreamweaver gives a generic name such as Layer1, Layer2, etc. when layers are created.
You can give your own name for easy reference. To do this goto the Layers panel, if it is not
displayed, goto windows and select layers, the panel will appear towards the right. Double
click on the name of the layer and enter the new name.

Changing the visibility of a layer

In the above image you can see that all the three layers have the open-eye icon, meaning
that the three layers are visible. While working on layers, specially overlapped layers, you can
hide or show the layers by clicking on the eye icon.
Changing the order of the layers
The above image shows a column name Z below which are numbers. This column stores the
stacking order of the layers, i.e. the order in which they are drawn in a browser. The layer with
the highest number will top the stack and that'll be the first layer. You can change this order
by dragging the layer names up or down. Another way of doing this is by changing the
number of Z-index.
Q2. Discuss Designer Panels. Create home page of any sports
website using designer labels. Also create buttons which have
hyperlinks.
ANSWER:
 There are two panels in the design panel group: CSS Styles and Layers. CSS styles are
used to maintain the styles in the document and creating and attaching style sheets. The
layer panel shows all the layers of the open document. It can be used to lock or unlock,
rearrange, and rename the layers.

3. Create a homepage of cosmetic products website in

Dreamweaver. Also animate it in a way so that it changes
background color automatically.
ANSWER:- Open your Dreamweaver site.
1. Create a folder for your photo album (e.g. album)
2. Open any page within the site
3. Choose Commands/Create Web Photo Album from the
toolbar
4. The album will now be in it's simple unformatted state.
You will have a folder called album under which there will be 3
folders as follows:
1. thumbnails - contains the thumbnails
2. images - contains the images in its original form
3. pages - contains the pages in which the larger
images are inserted along with the navigation to navigate
between pictures and go back to home
4. index.htm page which will have all the thumbnails
with links to the larger images
5. You can now go to the index page and apply your
template (if you have one) to format the page and also use CSS
 Styles to format the text. The gallery now will look like its part of
the site.

PART B

Q4.How are media elements in Dreamweaver? Can you insert a

page created in HTML code into a dreamweaver image ? If yes,how
can you implement such thing?

ANSWER:-

Steps to Inserting Cut-and-Paste HTML Code into Your Site

1. Start up Dreamweaver and open the page that you want to edit.
2. Switch to your web browser and surf to the page from which you can get the cut-and-paste
HTML code. Select the code with your mouse by dragging over all the text, click your right
mouse button, and select the "Copy" item from the pop-up menu that appears.
3. Return to Dreamweaver, and click on the spot where you want to insert the code.
4. Switch to Dreamweaver's Code view by clicking the "View" menu followed by the "Code"
menu item.
5. Click the "Edit" menu and select the "Paste" item. The code you copied earlier will be
inserted at the cursor position.
6. Click the "View" menu again, followed by the "Design" menu item to return to Design
mode. You should be able to see the results of your insertion.
You can now save your page and upload it to your website

5. What are Form Elements? How can you insert form into frames?
Can any page of a website be created without frames.
ANSWER:- Form elements are elements that allow the user to enter information (like text
fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
.input elements
.</form

Input
The most used form tag is the <input> tag. The type of input is specified with the type
attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
How it looks in a browser:
Top of Form
First name:
Last name:
Bottom of Form
Note that the form itself is not visible. Also note that in most browsers, the width of the text
field is 20 characters by default.
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of
choices.
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
How it looks in a browser:
Top of Form
Male Female
Bottom of Form
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
How it looks in a browser:
Top of Form
I have a bike:
I have a car:
I have an airplane:
Bottom of Form

The Form's Action Attribute and the Submit Button

When the user clicks on the "Submit" button, the content of the form is sent to the server. The
form's action attribute defines the name of the file to send the content to. The file defined in
the action attribute usually does something with the received input.
<form name="input" action="html_form_submit.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Top of Form

Username:
Bottom of Form
If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_submit.asp". The page will show you the
received input.
Q6. How is creation of Labels and Tables different in HTML and
Dreamweaver? Create both in Dream weaver.
ANSWER:- Form labels
With the accessibility options enabled, Dreamweaver will prompt for appropriate labeling information
when form elements are added to your web page.
Simply type the appropriate form label into the Label dialog box. You can then select the label style:
Wrap with label tag, Attach label tag using 'for' attribute, or No label tag. The best results are
accomplished by selecting Attach label using 'for' attribute. This allows the form label to be moved
to another position within the page and is most compatible with existing screen readers. You can also
choose to position the form label before or after the form item. The Input Tag Accessibility
Attributes dialog also provides options for specifying Access key and Tab Index, neither of which are
necessary for accessibility and both of which are often misused.
To add labels to form elements already within a web page, there are three methods that can be used:
1. Delete, then reinsert the form element and add the appropriate label using the dialog
box.
2. Add the appropriate label information in Code view.
3. Select both the label and the form element and select Insert > Form > Label. For this
method to work, the label and the form element must be adjacent to each other. When this method
is used, Dreamweaver surrounds the label and the form element with the label tags, which limits
your ability to move the label and is not fully supported in all screen readers.
Data table accessibility
There are three principles involved in making data tables accessible to screen reader users:
1. Designate table headers
2. Assign a scope to row and/or column headers
3. For complex tables, assign headers and id attributes to header and data table cells.
Dreamweaver's visual interface supports option 1 (designating headers), partially supports option 2
(assigning scope), and does not support option 3.
Dreamweaver supports designating table headers in two ways. First, if the table already exists, you can
identify table headers by selecting a table cell, row, or column, then selecting or deselecting the
Header option on the Properties panel.
Second, if the accessibility options are enabled in the Preferences, a dialog box will be presented when
the table is inserted. You can then choose whether the table has no headers (None), row headers (Left),
column headers (Top), or row AND column headers (Both).

Dreamweaver will designate the correct cells as table headers using the <th> tag.
The Table accessibility dialog box also allows the addition of Caption and Summary, both of which
provide additional information about the contents of the table. In most cases, these should both be
provided.