HOME WORK 4

CAP209: GRAPHIC TOOLS

DOA-
DOS-

PART A

1. What is the use of Style Sheets in Dreamweaver. How can

you add elements into Layers?
Ans 1
1. Open the CSS Styles palette by clicking on Window>CSS
Styles
2. Click on the '+' icon to create a new style. You'll get the
pop-up box as shown on the right. Write the name of your
style e.g. 'text', choose 'Make Custom Style' and click OK.

3. Now create your own custom style giving by choosing the

font type, size, weight, color etc.
Click on Ok. You have successfully created a style. Repeat
these steps to create more styles for titles, subtitles, links
etc.

Ans (b)
Placing Layers

Open Insert>Layer and place the Layer1. Move the layer into
the column2 of the table. Now you can write the content inside
the Layer. Select the layer in the Properties Inspector and select
Overflow as 'visible'. This makes this first layer as default layer
and makes visible while the page is loaded.
Note down the position of the Layer (566px and 163px). Insert
the second and third layers on the same position, so that they
will sit over the first layer. Now insert the text on those layers.
(Note: Due to the over lapping of layers the text may not be
clear. So, You can place the layers at somewhere else, write
down the text and then change the position of the layers to sit
on the first layers position)

2. Discuss Designer Panels. Create home page of any sports

website using designer labels. Also create buttons which have
hyperlinks.

Ans 2 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.

3. Create a homepage of cosmetic products website in

Dreamweaver. Also animate it in a way so that it changes
background color automatically.

Ans3 To get started keep all the images you would like to use in
one folder. You only need the large size images. Fireworks will
automatically create the thumbnails.

Once you have all your images stored in a folder, here are the
steps you need to follow to create a photo album in
Dreamweaver.

1. Open your Dreamweaver site.

2. Create a folder for your photo album (e.g. album)
3. Open any page within the site
4. Choose Commands/Create Web Photo Album from
the toolbar
1. Give the album a title (this will show in the
thumbnail page only)
2. You can enter subheading info if you like (this
will show in the pages with the enlarged pictures)
3. Choose the Source images folder by using the
folder icon to browse to the relevant folder (this
will be the folder where you have stored all the
images)
4. Choose the destination folder (from our example
'album')
5. Choose the thumbnail size from the drop-down
menu
6. You can enter the number of columns you would
like to display the thumbnails
7. The rest can be left as is or changed according
to your requirements for optimization
8. Click on OK
9. You will see Fireworks creating the thumbnails
for all the pictures
 10. Once this is done, you will receive a
message saying that the photo album has been
created and you can view the album.
5. 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
6. 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

4. 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?

Ans 4

Normally when you design web pages you may want to add
images with such effects. When you want to add an image in a
web page, it would be nice, if it can very well fix with the
background color of that page. This will give a professional look
to the pages. Just read and practice this, you will get a nice
image effect, called image masking.

1. Open an image of any size, in my case its, 190 X 142 JPEG

image. My web page background is white. Go to Modify >
Canvas > Canvas color...; Change it into white.
This is my image with no effects.
2. Draw a rectangle with the rectangle tool( img: a)on that
image and cover the image with the rectangle. I am using white
as my rectangle color,(img:b).

img: a
I have created a rectangle and moving it to fix on the image.

Like this,

img:b
3. Select the rectangle and from the properties window > select
the Fill Category as Linear. You can do this from the drop down
menu.

Click on
and you make the preset type as while,black. This is necessary
since I want to give the fading effect in the right side of the
image.(see the final image img:c)
4. Now I want the fading effect gradual so I pull the line which is
on the rectangle like in the following image.

5. Now press ctrl + A, select all and navigate from the Fireworks
top menu to, Modify > Mask> Group as mask.

6. Now you get this effect,

7. More effects can be given by adjusting the fading level, in

the properties window.

In Dreamweaver I have used this image and added it in a table.

Here is is this to give you an idea.

If you play around a little more time on this topic you will be
able to create amazing masking effects with Fireworks MX
5. What are Form Elements? How can you insert form into
frames? Can any page of a website be created without frames.

Ans 5 Adding form elements

- add a text field. Text fields are used for collecting text data
from the viewer.

- add a hidden field. Hidden fields are for setting certain

information that the viewer never sees.

- add a textarea. Textareas are used to collect text data from

the viewer. The difference between textareas and text fields is
that textareas are usually multiple lines.

- add a check box. Check boxes are used to answer yes/no

questions, or to enable/disable options.

- add a radio button. Radio buttons are used to select a

single option out of many.

- add a radio group. A radio group is used to specify a group

of radio buttons so that only one member of the group may be
selected.

- add a list menu. List menus are used to display a large

number of options and allow the user to select one and
sometimes many of them.

- add a jump menu. Jump menus are drop down menus that
redirect the viewer to a different site when an option is
selected.

- add an image field. Image fields work just like submit

buttons, but instead of a grey button, you can use the image of
your choice.

- add a file field. File fields let the user select a file from their
computer.

- add a button. You can add buttons to submit or reset the

form.

- add a label. Labels let you tell the user what a certain form
element is for. Clicking on the label is supposed to activate the
form element as well.

- add a fieldset. Fieldsets are boxes drawn arond groups of

form elements.

6. How is creation of Labels and Tables different in HTML and

Dreamweaver? Create both in Dream weaver.

Ans 6 To insert a table into your web page you can either go
Insert > Table from the main Dreamweaver menu , or from the
Insert panel ( if this is not showing press Ctrl+F2 ) under the
Common tab, select the little table icon ( image 01 )

image 01
you can also use the shortcut Ctrl+Alt+t, but which ever option
you choose you will end up with a input box like this.
:
image 2

Adding rows and columns

The first fields are asking how many rows and columns we
would like to insert, a rough guess is all that is needed since
you can add or delete rows and columns later if needed.

Pixel or percentage
The next field is the table width, we enter a value and then
have the option to decide if that value is a fixed pixel size, or if
we require the size of the table to be relative to the overall size
of the page, in other words, a table set to 50% on a web page
of 750 pixels would render at 375 pixels, but for the time being
we are going to stick to the simple fixed pixel width and enter a
value of 350 pixels.

Web designers particularly novices web designers are often

confused when using tables to layout web sites, should they
use fixed or relative, well it's a personal thing, there is no right
or wrong way.
Adding a Border
The next field “ Border thickness” places a border not only
around the outside of the table but also around all the cells with
in the table, I shall place a value of 1px in the field to
demonstrate this.

Cell Padding and Spacing

There is often a little confusion of with these, Cell padding
creates space inside the cell, while Cell Padding is applied
between the cells them self. See screen shots ( image 7 and 8 )
below for a qucik explanation.

Image 7

Image 8

The Header options

This allows you to select which cells you want to display as bold
and centered which in table terms is a Header, by default it is
set to none, it can be changed later from the properties
inspector. The image ( 09 ) below highlights this since it as the
top row set as an header.
image 08

Image 09, showing the differance between an header and a

plain field.

A basic table is created

With all these settings in place we have created a basic table.

Dreamweaver offers many more features for the control of

tables and with the basics now covered we shall move forward
to take a look at these.