8/8/2019 E3801-A08 CAP209

1/9

HOME WORK 4CAP209: 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 fromany other students work or from any other students source except where due

acknowledgement is made explicitly in the text. Not as any part being writtenfor me by another person.

Student Signature:- REENA CHOUDHURY

Evaluator Comment:-

Marks out of:-

PART A

8/8/2019 E3801-A08 CAP209

2/9

Q1.What is the use of Style Sheets in Dreamweaver. How can youadd elements into Layers?

ANSWER: -

CSS Styles paletteThe 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 formattingproperties that you apply to text or a table cell, including things like font color andsize, background color, etc. Styles are useful for ensuring that all of the wireframesyou create look consistent. If you have ever used styles in Microsoft Word, CSSstyles work in much the same way.

The CSS styles palette.

With cascading style sheets (CSS), we can specify automatic HTML formatting options thatapply 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 areviewed differently in different browsers

Create and add content to a layer Click on Insert>Layout Objects>Layers from the menu bar. The following image isdisplayed on the screen. This is the layer into which content will be added.

8/8/2019 E3801-A08 CAP209

3/9

Click inside the frame and add content or insert an image. Just click inside the layer and addtext, 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 notdisplayed, goto windows and select layers, the panel will appear towards the right. Doubleclick 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 , meaningthat the three layers are visible. While working on layers, specially overlapped layers, you canhide 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 thestacking order of the layers, i.e. the order in which they are drawn in a browser. The layer withthe 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 thenumber of Z-index.Q2 . Discuss Designer Panels. Create home page of any sportswebsite using designer labels. Also create buttons which havehyperlinks. ANSWER:

8/8/2019 E3801-A08 CAP209

4/9

There are two panels in the design panel group: CSS Styles and Layers. CSS styles areused to maintain the styles in the document and creating and attaching style sheets. Thelayer 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 inDreamweaver. Also animate it in a way so that it changesbackground 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 thetoolbar4. The album will now be in it's simple unformatted state.

You will have a folder called album under which there will be 3folders as follows:

1. thumbnails - contains the thumbnails 2. images - contains the images in its original form 3. pages - contains the pages in which the largerimages are inserted along with the navigation to navigatebetween pictures and go back to home 4. index.htm page which will have all the thumbnailswith links to the larger images

5. You can now go to the index page and apply yourtemplate (if you have one) to format the page and also use CSS

http://www.entheosweb.com/website_design/dreamweaver_template.asphttp://www.entheosweb.com/website_design/css_styles.asphttp://z.about.com/d/webdesign/1/0/y/4/aassdwwalk4.jpghttp://www.entheosweb.com/website_design/css_styles.asphttp://www.entheosweb.com/website_design/dreamweaver_template.asp

8/8/2019 E3801-A08 CAP209

5/9

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 apage created in HTML code into a dreamweaver image ? If yes,howcan 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-pasteHTML code. Select the code with your mouse by dragging over all the text, click your rightmouse 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 beinserted at the cursor position.

6. Click the "View" menu again, followed by the "Design" menu item to return to Designmode. 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.

http://www.entheosweb.com/website_design/css_styles.asphttp://www.entheosweb.com/website_design/css_styles.asp

8/8/2019 E3801-A08 CAP209

6/9

ANSWER:- Form elements are elements that allow the user to enter information (like textfields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.

A form is defined with the tag.

.input elements

.

8/8/2019 E3801-A08 CAP209

7/9

Checkboxes

Checkboxes are used when you want the user to select one or more options of alimited number of choices.

I have a bike:
I have a car:
I have an airplane:

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. Theform's action attribute defines the name of the file to send the content to. The file defined inthe action attribute usually does something with the received input.

Username:

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 thereceived input.

Q6. How is creation of Labels and Tables different in HTML andDreamweaver? Create both in Dream weaver. ANSWER:- Form labels With the accessibility options enabled, Dreamweaver will prompt for appropriate labeling informationwhen form elements are added to your web page.

8/8/2019 E3801-A08 CAP209

8/9

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 areaccomplished 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 alsochoose to position the form label before or after the form item. The Input Tag AccessibilityAttributes dialog also provides options for specifying Access key and Tab Index , neither of which arenecessary 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 thismethod to work, the label and the form element must be adjacent to each other. When this methodis used, Dreamweaver surrounds the label and the form element with the label tags, which limitsyour ability to move the label and is not fully supported in all screen readers.

Data table accessibili ty 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 canidentify table headers by selecting a table cell, row, or column, then selecting or deselecting theHeader option on the Properties panel.

8/8/2019 E3801-A08 CAP209

9/9

Second, if the accessibility options are enabled in the Preferences , a dialog box will be presented whenthe 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 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.