COBASS College, Biratnagar: Welcome To The COBASS College

COBASS College, Biratnagar: Welcome To The COBASS College

Macromedia Dream Weaver

Macromedia Dream weaver UltraDev is a professional environment for building Web applications. A Web application is a collection of pages that interact with each other and with various resources on a Web server, including databases.
UltraDev is also a professional editor for creating and managing Web sites and pages. Because it incorporates all of Dream weaver’s page design and site management tools, UltraDev makes it easy to create, manage, and edit cross-platform, cross-browser Web pages.
UltraDev is fully customizable. You can create your own objects, commands, and server behaviors, modify menus and keyboard shortcuts, and even write scripts to extend UltraDev with new actions, behaviors, and property inspectors. The new features in Dream weaver UltraDev 4 simplify the tasks of building dynamic pages, hand-coding server scripts, writing custom server behaviors,
Code font indicates scripts, SQL statements, HTML tag and attribute names are used to design web pages.

Features in Dreamweaver:
1. Objects:
In UltraDev 4, you can use live objects to speed up development. Live objects let you create advanced page components in one operation. You can use live objects to create a master/detail page set, a record insert form, or a record update form. You can also use live objects to create record set navigation bars and record counters.
2. Improved hand-coding:
UltraDev's new Code view and syntax coloring make it easier than ever to hand-code ASP or JSP server scripts or CFML tags.
At design time, UltraDev also recognizes application files such as global.asa and application.cfm, as well as server-side includes. These changes make the Live Data window even more powerful than before.
3. Simplified extensibility model
UltraDev's simplified architecture makes it easier to create extensions. UltraDev also comes with a new Server Behavior Builder—a tool for creating server behaviors and for customizing the code inserted in pages by existing server behaviors.

4. Remote database connectivity
UltraDev 4 introduces remote database connectivity, a feature that lets you connect to your database at design time with little or no effort. You no longer need to define a design-time connection or, if you're a Macintosh user or JSP developer, install a JDBC driver on your local system. UltraDev uses your run-time connection at design time.
How to start dream weaver:

1.Go to start

2.Click on programs

3.Click on Macromedia Dreamweaver UltraDev and

4.Click on Macromedia Dreamweaver ultradev 4

How to work on dream weaver screen:

Basically there are three modes among which we can work:

They are

1. Show code view

This shows the code view of the page where we design the page simply using the tags and codes of different script language. In this mode we can see the output only when we press F12 or simply save to file in Filename.html format and see the output via any web browser say internet explorer.

2. Show design view:

In this mode what we get is what we see, it means that we can design the web page using different tools and objects. We don’t have to worry about the codes or tags for designing the web page. Say we simply use Insert menus to insert different things like table, horizontal line which we used to do earlier using piece of tags.

3. Show split view:

This is the third type of mode where we can work. This view allows us to show both design view and code view both at the split screen thus we often called it as split view. we can code the web page and at the same time we can see the output in design mode, though this makes the working confusing but it is preferable to use thus we can immediately find our mistakes and see how the page is actually viewed in the browser.

This three modes appear on the top of the screen as standard toolbar, so we can select any of them and start coding the tags or deigning the page. If it is not there then we can bring in your working area simply by Visiting the View menu and clicking on the toolbars.

Go to View>Click Toolbars or simply press ctrl+shift+T

How to save the dream weaver file:

By default the file extension of the dream weaver is filename.dwt.

But for our purpose we simply save the file with Filename.html and view it by using any browser.

Two important elements in dream weaver are:

1. Objects:

 Go to window menu>Click on objects or press ctrl+F2.

There are different designing tools on object toolbar which we use for making our web page attractive and interactive. Let’s discuss some of its tools which are useful to us:

The first object is:

a. Insert Image:

This object is used to insert image directly without any code. Click this object. A dialog box appears through which we can directly insert an image without any html tags. We can insert any image file with different file extension like .jpeg, jpg or gif and many more. For the modification of the inserted image we simple have to click the picture and go to the property box. we can change the height, width,alt as per our requirements. We also can link that image to the other source file directly through the Link property present in property box. We can insert image via menu too..

1.Click on Insert menu

2.Click on Image or press ctrl+Alt+I

B.Insert Rollover image:

This is an object that allows us to insert image but provides some extra effects. Like wherever we click on the insert rollover image in the toolbox then a window appears.

Where we have different things like, Image name where we can give the name of the image, the original image which allows us to insert image which is the main image, roll over image which appears upon the original image when we move the mouse over it. Also there is an option to link the image to the other html file or any other file. After placing all the required image in there respective position we can press F12 to see the effect.

We can also insert this roll over image from the Insert menu

1.Click on insert menu

2.Go to interactive images>go to rollover image.

3. Insert flash text:

Flash text is different than the normal text that we write in web page. Here the text appears with some effects that is the same effect which we see in the rollover image. Here the text appears in some color say “red” and after that we can change it to other colors with some background when we move the mouse to that text.

When we click on insert flash text,

Then a dialog box appears where we can type the text in which we can see the effects. In this dialog box in the top portion there is different formats, face,size and background and finally there is rollover color, where we choose the color so that when the text written in the text box appears in the color we choose from the rollover color, in web page.

There is link area where we can link this text with different html file or any other document.

1.We can do this from menu too.

2.Click on Insert menu

3.Click in interactive image>Click on Flash text.

After that the dialog box appears where we can carry the above process.

Note: Before inserting flash text, you have to save your file, say in filename.html format.

4. Insert the Flash Button:

Another interesting feature in dream weaver is providing the inbuilt flash buttons, through code we could only insert Submit or Reset buttons but from dream weaver we can insert animated buttons for any actions. It makes our page attractive and makes our tasks seems smart.

So now, click on insert flash button from the toolbox. After we click, a dialog box appears where we can select the button styles as per our requirements. We can name the buttons like “HOME”,”NEWS” and so on...For the text we can select the font face and size from this dialogbox.Similarly there is link option which enables us to link this button directly to the other page. Similarly there is the option to set the background color for the buttons, as we want.

Similarly we can insert flash buttons from the insert menu.

1.Click on insert menu

2.Click on interactive images>click on flash buttons

3.And carry the above steps.

Note: we have to save every object like buttons that we use in the web page.

5. Insert horizontal rule: Using this object we can simply insert the horizontal line in our web page without writing any code. to manipulate the rule we have to go to code and click on the <hr>code then there appears the property box from which we can change the different values of the horizontal. We can change height, width, align, shade and so on; we can also give the values of height and width in either pixel or percent.

Similarly we can insert horizontal rule from insert menu.

1.Click on Insert menu

2.Click on horizontal rule.

3.Then there appears the horizontal rule in the web page. For the other attributes u simply can insert with the <hr>tags.

6. Insert date:

We can insert the date directly via the object toolbox. when we click the insert date object, a dialog box appears which gives us the day format, date format, time format and can save the  date automatically or update it automatically. We can change its alignment and its text as per the requirement. Similarly we can insert date from insert menu.

1.Click on Insert menu.

2.click on Date

7. Insert table:

A table is the main element in the designing web page.we can simply use table to insert tabulate data or for the tabular layout of the text in the page.we can insert image though the html tags of the table or simply insert the table from the toolbox. For this click on insert table from the object toolbox.

After that a dialog box appears with the attributes of the the table says, cellspacing, cellpadding, number of rows, Colums and so on...

Similarly we can insert the table through insert image.

1.Click on the insert menu

2.Click on table or press ctrl+alt+t

3.Similarly u can use the property box for its manipulations.

Insert menu for the insertion of the form.

You can insert form directly from the insert menu. After clicking the form, a form in the web page appears with its attributes like name where we can give name to the form, method where we can write the either post or get for the acceptance of the data, and finally action attributes where we can give the file name for the action to execute.

<form name="form1" method="post" action="">

</form>

For inserting the forms elements like textbox, checkbox…..

1.Click on insert menu

2.Click on form objects

3.Select all the objects u want for designing the form.

Insert menu for the insertion of the frames.

We can insert frames directly from the insert menu. Frame allows us to design the layout of the page as per or requirements.

<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">

</frameset>

We have different options for the frames to be inserted like left, right, top, bottom...And so on.

We can change the properties of the frames from the property toolbox.i.e border, its width and so on...

Insert menu for inserting special characters.

We can insert the special characters like line breaks or so on..

We simply have to click insert menu.

1.Go to special character

2.Click on the characters you want to insert in your web page.

We can use the copyright symbol by inserting the tags like

&copy; binny

&nbsp; =this is used to insert the spaces in the pages. this all things can be done via special characters insertions.

Insert menu for inserting tabular data.

We can insert tabulated data directly from this menu. Tabulated data means the files like in excel or simply data in the table. We have to browse the data file which we want to insert in. There is the delimiter i.e. the separator by which we can separate the data in the table like comma, tab, semicolon and so on. We can also fit the data in the table, of different width. We can also give the data the different cell spacing and cell padding as per our requirements. We also can format or headings i.e. bold, italic or so on...

Insert menu for inserting Email link:

We can insert the email link from this menu which we used to do with the following tags.

<a href="mailto:s@hotmail.com">hi</a>

1.From the insert menu

2.Click on the insert email link

3.A dialog box appears where we have to text box where we have to write the text and the email link say yahoo.com or gmail.com and so on. For this command to execute we should have the internet link.

Insert menu for inserting comments:

Comments serve as the purpose of the notes in the html page in design view or code view. We can insert comments using the insert menu.

1.Click on insert menu

2.Click on invisible tags> Click on comment.

After this a dialog box appears where we simply have to write text that must be appeared within the comments.

Insert menu for inserting scripts:

A. Script is the tags which are used to insert the script language in the web page. Script language is the action files which are created using the different programming language like vbscript, javascript, php and so on. for this we have to insert again on the insert menu.

1.Click on insert menu

2.Click on invisible tags>click on script

3.Write the text you want to write with the script.

4.After this a tag appears like...

<script language="JavaScript">

Hello

</script>

This tag says that the action file is of the JavaScript programming language and writes the codes you have to insert within the script language.

B.Insert menu for inserting head tags:

Head tags are the tags which are in the top part of the web page. The head tags often include Meta data, keywords and so on.

1.Click on insert menu

2.Click on head tags>click on Meta

3.After clicking a dialog box appears with the attribute, value and contents where we have to write the name of the Meta data and the content name, like given below.

This Meta data appears only for the programmers personal purpose to view the type of the web page u have designed. This code doesn’t execute.

<Meta name="check" content="explanation">

Insert menu for inserting head tags:

C.Link: Inserting the link in the header area can be done bye the Link command which can be viewed from the head tags in the insert menu. this link can be used to link the style sheet files in the html file.

<link href=”” rel=”style sheet”>

This can be done by:

1.go to insert menu

2.Click on header tags>click on link.

Then a wizard appears where there is a place for the hyperlink and writes the name of which the file u wants to link and refer.

Modify menu:

The values that we have inserted from the insert menu is modified by the modify menus.

1. Page Properties:

This menu is used to manipulate the properties of the page like title, background, links, color of text, bgcolor, margins and so on…

1.Click on page properties or press ctrl+j.

2.After this the wizard appears and from that we can manipulate the different values.

2. Table:

From this command we can manipulate the table that we have inserted wither from the property box or from this modify menus. Like we can change the cell values, merge the cells and so on.

3. Frameset:

This command is used to edit the frames we have inserted from the insert menu. Like split frame lefts, rights and so on..

4. Convert: this command is used to convert the text to table and table to text and so on.

Text Menu:

This menu is used to manipulate the text in the page, we can assign different values from this text menu directly or can be done from the property menus. We can

1.Indent the text as per our requirement or press alt+ctrl+].

2.We can also outdent the text or press alt+ctrl+ [.

3.We can apply different paragraph format in the page, we simply have to choose the format. i.e. h1, pre and so on.

4.We also can align the text in center, left, justify…

5.List can also be simply be inserted in the page.

6.We can also create different style sheets in the page.

Click the css style>click on new.

Then a new wizard appears where there are varieties of the factors found and can be included in the page. in case of notepad we have to write code to create the css styles but here we simply have to select the values to be included in the style sheets.

Command Menus:

Under this menu we have some menus useful in designing the web pages like as the followings.

1. Set color scheme: there are few color schemes that we can directly use in the web pages like the predefined layouts in the powerpoints.We don’t have to write any code in using the color scheme. This is only the facilities given by dream weaver.

2. Sort table: This is command which is used to sort the inserted table in the web page .i.e. either ascending or descending manner as per our requirements.

 3. Format table: Like in Microsoft word we can apply different format of the table as in the predefined styles. we can choose different styles from the given styles.