HomeSitemapContact us
ecommerce solutions
ecommerce software e-commerce resources e-business partners siteowners e-commerce solutions
Working with Common Elements in Dreamweaver MX
In this section you will learn how to create a simple web page using the interface provided by the Macromedia Dreamweaver MX.
Open a New Document
In the above sections you have learnt about the Dreamweaver and its purpose. You have also learnt the Interface of Dreamweaver. Now you will learn how to make a website by using the above discussed sections.
You will start with how to open a new page in Dreamweaver MX.

To open a New Page perform the following steps:

1.  Click File menu on the menu bar, a sub menu drops down.

2.  Choose New from the sub menu, a New Document window opens as shown in the figure below.

3.  In the Category choose Basic Page and in the Basic Page choose HTML as shown in the figure below.

4.  You can see the Preview and Description of the file in the New Document window.

5.  Press Create Button to create a new document.

6.  A New Document opens on the screen.

TOP

Add Title to the Document
The Title is the text that appears in the title bar of the web brower. By default the title is Untitled Document. You can change the title that appears in the title bar of the web browser by giving a title to the page. The title can be changed using two methods:

Method 1:

To give a title to a document perform the following steps:

1.  Click View menu from the menu bar.

2.  A sub menu drops down. Choose toolbar from the sub menu, further sub menu drops down.

3.  Click Document from the sub menu. The Document bar opens as shown in the figure below.

4.  In the Title field write the title of the page.

5.  The title will appear in the title bar of the web browser.

Method 2:

To give a title to a document perform the following steps:

1.  Click Modify menu from the menu bar.

2.  A sub menu drops down. Choose page properties from the sub menu.

3.  The Page Properties window opens as shown in the figure below.

4.  By default the Title field shows Untitled Document. Write the title of the page in the title field.

5.  The title will appear in the title bar of the web browser.

Note

The shortcut to open Page Properties window is Ctrl + J.

TOP

Set page properties
Using the Page Properties option, you can change the Title, Background Image, Background color, Text color, Links color, Set Margins, Margin Width and Height, Document Encoding, Tracing Image and Image Transparency. The above figure shows the Page Properties Window.
Table lists the function and uses of the Properties Inspector.
 

Menus

 

Functions

1.

Title

 

The Title is used to add the text that appears in the title bar of the web brower.

2.

Background Image

 

You can add an image in the background of your document by using the Background Image option. Click on the browse button as show in the above figure. Navigate the image that you want to set as background of your document and press OK. The image will be set as background of the document.

3.

Background Color

 

You can add any color to the background of a document by using the Background Color option in the Properties Inspector. Clicking on the box that opens the color swatches panel as shown in the above figure. Choose the desired color. The background color will be changed.

4.

Text Color

 

By default the text color is black. You can choose any color of the text by clicking the box that opens the color swatches panel. Choose the desired color. The text color will be changed.

5.

Links Color

 

You can change the Hyperlinks color by selecting the color from the Links Color option. You can also change the color of Visited Links and Active Link.

6.

Set Margin

 

You can specify the page properties by setting the Set Margin option. Internet Explorer shows the changes done using the Set Margin option where as Netscape ignores it. When you do not want to set any margins in the browser set the values as 0.

7.

Margin Width and Height

 

To set the page marigins for Netscape the Margin Width and Height option is used. Internet Explorer ignores it.

8.

Document Encoding

 

The Document Encoding is used to specify encoding used by the characters in the document. By default it is Western (Latin1). You can change it with Central European, Cyrillic, Greek, Icelandic, Japanese, Traditional Chinese, Simplified Chinese, Korean and more. 

9.

Tracing Image

 

Tracing image can be used to re-create a page that was mocked up in a graphics application. The image that can be placed in the background of the Document window is a tracing image, for example JPEG, GIF or PNG image. You can set the opacity, change its position and hide the image.

10.

Image Transparency

 

You can give transparency to the Tracing Image. The image can be set as transparent or completely opaque.

TOP

Type Text and Set Font Properties

You can set the Font and Text Type in your document by using the properties inspector. To set the text type and font perform the following steps:

1.  If the Properties Inspector is not open, click the Window menu from the menu bar a sub menu drops down.

2.  Choose the Properties option from the drop down. The properties inspector opens at the bottom of the document as shown in the figure below.

3.  Type EXAMPLE on the Stage. If you want to set the Text Format as a Heading or a paragraph, click on the Format option a drop down opens. Choose the Type of format as shown in the figure below. The text will be formatted.

4.   When you want to set the font type, click on the drop down option in the Toggle CSS/HTML Mode and choose the desired font from the list as shown in the figure below.

5.   To increase or decrease the size of the font click on the drop down of font size option. Choose the desired size as shown in the figure below.

6.   By default the text color is black you can change the text color by using the Text Color option. When you click on the Text Color a color swatch opens as shown in the figure below. Choose the desired color of the text.

7.   You can format the text as Bold or Italics by clicking on the desired options as shown in the figure below.

8   You can align the text as left, right, centre or justify by using the desired option as shown in the figure below.

9.   The figure below shows the complete formatting of text and font.

Note

The shortcut to open Properties Inspector is Ctrl + F3

TOP

Insert a New Table
There are two methods by which you can insert a new table.
Method 1

1.  Open the Insert menu as discussed above.

2.  Click on the Insert table button as shown in the figure below:

3.  The Insert Table window opens as shown in the figure below:

4.  Enter the desired rows, columns, width, border, cellpadding and cellspacing. Press OK to proceed.

5.  The desired table opens on the screen.

Method 2:

1.   Click the Insert menu from the menu bar a sub menu drops down.

2.   Select the Table option as shown in the figure below.

3. Create New Table Window opens.

4. Enter the desired rows, columns, width, border, cellpadding and cellspacing. Press OK to proceed.

5. The desired table opens on the screen as shown below:

Note

The shortcut to Insert a Table is Ctrl + Alt + T

TOP

Insert Images
There are two methods by which you can insert an image in the document.
Method 1

1.  Open the Insert Menu as discussed above. A drop down opens.

2.  Click on the Image option. An Image Source window opens as shown in the figure below:

3.   Browse the desired image and press OK button.

4.   The image is inserted in the document.

Method 2:
1.   Open the Insert Bar as discussed above. The Insert Bar is shown in the figure below:

2.  Click on the Image option. An Image Source window opens as shown in the above figure.

3.   Browse the desired image and press OK button.

4.   The image is inserted in the document as shown in the figure below:

TOP

Insert Rollover Images

A rollover image is that in which when you open your browser and you place a mouse on the current image changes with the other image. For image rollover you need two images of the same size. One is the Original image which will be visible when you see it in the browser the other is the Rollover image which will be visible when you place your curser over the original image.

There are two methods by which you can use rollover image.
Method 1:

1.  Click on Insert menu from the menu bar a sub menu drops down.

2.  Click on the Interactive Images from the drop down a further sub menu drops down.

3.  Choose Rollover image from the sub menu as shown in the figure below:

4.  The Insert Rollover Image window opens as shown in the figure below: 

5.  Give a name to the image by default it is Image1.

6.   Browse the Original Image that will be open when you see in the browser.

7.   Now browse the Rollover Image that will be visible when you rollover your mouse on the original image.

8.   By default the Preload Rollover Image is selected. This is used when you remove your mouse from the rollover image the original image is visible again. If you do not select this option the rollover image will be visible even if you remove your mouse from the rollover image.

9.   When you place your mouse on the image there is a text below the cursor that is the Alternate Text. Type the text in the Alternate Text field.

10. You can give Hyperlink to an image using the When Clicked, Go To URL option. Browse the URL and press OK button. The URL is given to the rollover image.

TOP

Method 2:

1.  Open the Insert Bar as discussed above. The Insert Bar is shown in the figure below:

 

2.  Click on the Rollover image button.

3.  The Insert Rollover Image window opens as shown in the above figure. 

4.  Perform steps 5 to 10 as discussed in method 1.

Create Navigation bar with images
The Dreamweaver MX provides you easy facility to create navigation bars. Navigation bar consists of image or sets of images. The action occurs when you place the mouse or clicks on it. Navigation bars provide allows you to move between pages and the files on a site.
Task A-2:  Creation of Navigation Bars
In this exercise, you will learn how to create Navigation Bars.
 

Steps

 

Results/Comments

       

1.

Open a New document as discussed in task 1.

2. To insert navigation bars click the icon on Insert bar or Click Insert menu from the Menu bar a sub menu drops down. Choose Interactive Images, further a sub menu drops down. Select the Navigation Bar from the drop down.
3. The Insert Navigation Bar window opens.
4. To select the Up Image, click on the Browse button next to the textbox field of the Up Image. Similarly browse the image for Down Image field. In the Alternate Text field give a name to the image that will be visible in the web browser when you place your mouse on the image.
5. In the When Clicked, Go To URL field, to give the Hyperlink to the image browse the desired file.
6. Click on the Plus (+) icon to add more links and to remove links click minus (-) button. To add more links repeat steps 2 to 4 and click OK button.
7. The navigation bar is inserted in the HTML page.
8. To preview the Navigation Bar click on the File menu from the menu bar and choose Preview in Browser option further drop down opens. Choose desired browser.
9. The navigation bar will appear in the Browser. The Black text shows the Up Image option and the Blue text shows the down image option. The yellow box shows the Alternate Text.

Note

The shortcut to Preview a page in the Browser is F12

TOP

Create a Form

When you create text files and insert images in the document, there might be some information that you want user to submit it in your database or you want the information to display on the Internet for that forms need to be created.

Using a form you can create text fields, buttons, image, checkboxes and more can be created in a form by using the Insert Bar in Dreamweaver MX. The figure below shows the forms Insert menu.

Task A-3:  Create a Form
In this exercise, you will learn how to create a form.
 

Steps

 

\Results/Comments

 1.

Open a new document as discussed in task 1. Click on Insert menu from the Menu bar a sub menu opens. Choose form option from the sub menu or Select form icon from the Insert menu as shown in the figure above.

 

2. Form is inserted that has a dotted line with red outline.
3. Click the dotted red line or on the bottom left corner of the document window click the <form> tag, the properties inspector will open.
4. In the Form Name field give a unique name to the form that will be useful when you are using scripting language such as JavaScript or VBScript.
5. Type the text as First Name; in the Insert menu press the Text Field option.
6. Give a name to the text field and set character field and maximum characters length.
7. Similarly add the desired text that you want for your database.
8. To submit the form, navigate the file for the Action field that will be the dynamic or interactive file.
9. Choose method as POST to post the form to your email or the database. When you want to retrieve the file choose GET option. The Default is the GET option. It sends the data to the server.
10. Target is used where you want to display the invoked data. The _blank option, when clicked opens a new browser window. When you choose the _parent option the new document will open in the parent window. When you choose the option _self option, the document will open in the particular frame from where it is called. When the _top option is used the document will be loaded on the hierarchically uppermost frameset.
11. The form will be submitted to the database.

< Back Dreamweaver Interface - Publishing the site using define sites Next >


 
WORDTRACKER
Target the wrong keywords
and all your SEO efforts
will be in vain...

 

 

eCommerce Software Magnet Support Resources Siteowners.com
Features & Benefits Support Page Forums About
Why Magnet Magnet FAQ Articles Partners
Magnet Free Trial eCommerce Articles Tutorials Sitemap
Pricing & Sign-up Submit question Tools & Software Contact
Privacy policy | Terms & Conditions Have questions? [email protected]
Delivering State-of-the-Art On Demand eCommerce Software
COMPANY | SITEMAP | CONTACT US
© Copyright 2004 Siteowners.com • All rights reserved • Various trademarks held by their respective owners.