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.

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.

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.

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

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

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:

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.

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

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

Read more »

Create HTML/ SHTML

Create HTML/ SHTML Pages in Dreamweaver

To create the HTML/ SHTML pages:

1. File > New > Page from Template > Project Name > Template Name > Create]
2. Name and save the file into the project folder. Name the homepage index.shtml if using SSI and if your remote hosting server is a UNIX server. If it is a NT server most likely the homepage will need to be named 'default.shtml'. If you are not using SSI, leave the file extensions as .htm.
3. Change the HTML page title to something more appropriate [ Modify > Page Properties >Title/ Encoding > Title]
4. Put in appropriate meta data for the page i.e. keywords and description of the page
   • Insert > HTML > Head Tags > Keywords
   • Insert > HTML > Head Tags > Description
5. Type or paste the Heading and content of the page into the appropriate edible region. Apply the styled formatting (e.g. H1 tag or custom style) from the Properties Panel
6. Insert any images/ flash assets etc. into the editable region and and align them
• Insert > Image
• Insert > Media > Flash
7. Replace any library items/ SSI e.g. sub menus
8. Similarly create all the other HTML/ SHTML pages you need.

Forms in Dreamweaver

Some pages might require form elements such as the "contact us" form:
Insert > Form > select the form element of choice. A form must be within a form tag so select "Form" first, then insert the other form fields like Text field etc. within the form tag that appears.

Read more »

Formatting Headings

Formatting Headings in Dreamweaver CS4

This entry is part 11 of 18 in the series Dreamweaver CS4 Tutorials

Next we will need to format the headings and subheadings within the content.
To do this, go back into the Dreamweaver document window and select the heading text.
Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1.

Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2].

Styling our Headings and Subheadings

Now let us style the Heading 1 and Heading 2 tags to match the look we created in our layout.
To do this we will need to create a new style rule for the tags H1 and H2 in our styles.css file.
We can do this from the ‘Properties’ Panel as well by clicking on the “Edit Rule” button.

In the ‘New CSS Rule’ Screen that opens up select the follwing:

• Selector Type: Tag
• Selector Name: h1
• Rule Definition: styles.css
• Click OK

In the CSS Rule Definition for h1 screen give the following properties:

• Type > Font-size: 18 px
• Type > Color: #D6130A
• Click OK

Similarly define the style for the H2 tag. You page will not look like this:

Read more »

Create a template

Create a template in Dreamweaver CS4

This entry is part 3 of 18 in the series Dreamweaver CS4 Tutorials

Creating a template in Dreamweaver CS4 will form the basis of your website. It will give your site a consistent look and make it easy to manage.
Using the layout you designed in Fireworks as a basis we will recreate it in Dreamweaver as html files.

• From the Dreamweaver Menu select File > New
• Select ‘Blank Template’ > Template Type: ‘HTML Template’ > Layout: ‘none’
• You will get a blank document. Save it [ File> Save].
• You will get a message that the template does not have any editable regions. This is ok. Give it a name. I have given it the name ‘template’.
  
• If you look in your Files panel you will see that your template has been saved as template.dwt within a new folder entitled ‘Templates’
  

Read more »

Edit an AJAX Drop-Down Menu

Edit an AJAX Drop-Down Menu in Dreamweaver

1 INSERT A DROP-DOWN MENU
To insert a Spry menu, first chose Spry from the drop-down list at the top of the Insert panel (or in the Classic workspace layout, open the Spry Insert bar at the top of the workspace by clicking on the Spry tab). Place your cursor where you want to create the menu in your webpage and then click on the Spry Menu Bar icon.

2 CREATE HORIZONTAL OR VERTICAL MENUS
As you insert a Spry Menu Bar, you have the option to create a menu that displays horizontally across your page with submenu options that drop down below the menu bar, or a vertical menu bar with submenu options that open to the right of the main menu items. You must make this choice during the setup process by clicking on the corresponding button and then clicking OK to insert the menu. Once the menu bar is inserted, you can’t change its orientation.

CREDIT: ©ISTOCKPHOTO.COM
3 FIND THE STYLE YOU WANT TO EDIT
Open the CSS Styles panel (Window>CSS Styles). Click the All button at the top of the panel and twirl open SpryMenuBarHorizontal.css. Click-and-drag the top of the Properties pane in the CSS panel (shown here) until you can see the list of your styles and their defined rules. A good way to start is to click on each of the style names in the All Rules list and review their settings in the Properties pane. Look for color, font, and size settings, which you’re likely to want to change. In the next few steps, we’ll cover several of these styles specifically.

4 ADJUST ALIGNMENT
Like most options for a horizontal menu, the alignment is controlled by a CSS style. By default, the horizontal menu aligns to the left of the page, but you can align it to the right by changing the definition of the style named, “ul.MenuBarHorizontal li.” Click on the name of the style in the CSS Styles panel and then in the Properties pane, click just to the right of the Float field to use the drop-down list, and select Right instead of Left. If you prefer, you can double-click the style name to open the CSS Rule Definition dialog.

5 CHANGE ROLLOVER COLORS
The trick to changing the colors of the drop-down menu items is that in CSS, these colors are assigned to the link styles, which have multiple states. To change the background and text colors of links as they display when a page first loads, you’ll need to edit the style named, “ul.MenuBarHorizontal a.” To change the colors that appear when you roll a cursor over a link, edit the background and text colors in the style, “ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.Menu….” (Note: If you created a vertical menu, these style names will include “Vertical” instead of “Horizontal.”)

6 TEST YOUR WORK EARLY AND OFTEN
Many changes to these styles are only visible when you view the page in a Web browser or in the new Live View option (available in Dreamweaver CS4). If you click on the Live View button at the top of the workspace, you can preview the page and test interactive effects, such as rollovers, without leaving Dreamweaver. This is a handy way to check things, such as whether the rollover color is set the way you want it. Don’t be afraid to experiment; you can always change the style definitions back if you don’t like the way something looks.

7 CHANGE THE FONT FACE AND SIZE
By default, a Spry drop-down menu will display in the font specified in the body style—or in the closest parent style—for the page. You can alter your drop-down menus so that the font is different than other text on the page by adding a font style to the style named, “ul.MenuBarHorizontal.” Double-click on the name of the font to open it in the CSS Rule Definition dialog (shown here) and then enter a font face or choose a font collection from the Font-family drop-down menu.

8 CHANGE THE WIDTH OF MENU ITEMS
You can change width settings in the style named “ul.MenuBarHorizontal li.” By default, the width is set to 8 em. For those not familiar with the em option, it specifies sizes based on the size of the letter M in the font face used in the style. This flexible option is a great way to set the width of these link boxes to best fit their contents. If you have longer names and they wrap, you can increase this size, for example to 10 em, to get all of the text on one line. A little goes a long way with em sizes.

9 CHANGE THE WIDTH OF SUBMENU ITEMS, TOO
If you want the drop-down items to display in the same width as the main menu items, you’ll have to adjust the Width setting for the drop-down list in two other styles. Again, a little goes a long way when adjusting em sizes, and you’ll notice a slight difference with these two. If you change the main link width from 8 em to 10 em, you should change the 8.2-em Width setting to 10.2 in the styles named “ul.MenuBarHorizontal ul” and “ul.MenuBarHorizontal ul li.”

10 EDIT MENU ITEMS IN THE PROPERTY INSPECTOR
When a menu bar is inserted, Dreamweaver includes placeholder text for several menu items and submenu items, such as Item 1, Item 2, etc. To edit menu and submenu items, click the blue Spry Menu Bar tab (at the top-left of the menu in the workspace) to select it and then use the settings in the Property inspector. Simply click on the menu item or submenu item that you want to change and then select the text in the Text field on the right and then type over it to replace it.

11 ADD MENU ITEMS
To add menu or submenu items click the plus (+) sign at the top of the corresponding menu field, or click the minus (-) sign to delete an item. For example, you can add a third-level menu item by selecting a submenu item and then clicking the plus sign above the third menu field. Be sure to change or add text in the Text field in the far right of the Property inspector.

12 CREATE AND EDIT MENU LINKS
To turn any menu item into a link, select the item in the Property inspector and enter the URL in the Link field. You can also use the browse button (hint: it looks like a yellow file folder) to locate and select any file in a website and set the link automatically. If you’re setting a link to a top-level menu item, you can also select the text in the main workspace and set the link in the Property inspector, or use the Hyperlink icon in the Common Insert menu.

13 PREVIEW IN A BROWSER TO TEST
To fully test a drop-down menu, you’ll need to preview your page in a Web browser, such as Safari, Internet Explorer (IE), or Firefox. Ideally, you should test using all three of these browsers (and others) to ensure that the menu works well for all your visitors. Drop-down menus can be especially tricky when it comes to displaying in different Web browsers. If you’re having trouble with IE and you’re viewing the menu on your local computer, make sure you click to Allow Blocked Content at the top of the browser window.

Read more »