HOME WORK 4 CAP209: GRAPHIC TOOLS

Title Page

Home Work Title/no:- 4 Course Instructor:JASVEEN MAM Date of Allotment:-

Course Code:- cap209

Course Tutor:Date of Submission: 10/12/.09 Section no:- E3801

Student Roll no:-A08

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. 2. Create a folder for your photo album (e.g. album) 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. 2. thumbnails - contains the thumbnails 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. box. 2. Delete, then reinsert the form element and add the appropriate label using the dialog 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. 2. 3. Designate table headers Assign a scope to row and/or column headers 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.