Dreamweaver MX Tutorials

Dreamweaver MX is a program that is use for creating website.

1.Look Around

 

1.1Windows and Tools

 - Document Window : This is your main working area, where you create and edit files. The four buttons above, let you view the current page in a different ways. You can work in either with Code View  which lets you see the working page almost as it would appear in a browser, Split Screen will let you view or modify the HTML code, Design View will display both the design view and the code, or Live Data View (new) allows you to view dynamic data from the server.

 

- Insert Bar : The Insert bar is a series of tabs that enable you to insert different topic-oriented objects. Again you will notice that the insert bar has the same indentations/dots on the left and the triangle that allows you to collapse the panel to allow for more workspace.

 - Toolbars: The toolbars (document and standard) let you control the way you view your document, preview your pages in browsers, and access reference information.

 - Tag Selector: The tag selector enables you to select any tag in the document and highlights the selected content in the document window.

 - Window Size: Dreamweaver has some preset window sizes that let you change the document size to let you see how your document will be viewed on different monitors. You can also create custom window sizes. Pulling on the dividing window bar will also change the window size.

 - File Size and Download Time: This shows you the size of your file (including images and other media) and the estimated time it will take for the file to be downloaded into a browser at different connection speeds.  

- Panels Groups: On the right side of the screen are panels, these can be hidden, expanded, and moved to suit your requirements. Notice that each panel group has many controls.

 - Menu Bar: This gives you access to all of the available commands, lets you open and close windows, and open and close files.

 - Document Tabs: You will see a document tab at the bottom of the document window for each document that is open which allows you to move between documents easily.

- Title Bar: Tells you what program you are working in and the name of the folder and file you are working with. The asterisk at the end of the filename tells you that you have made changes to the document since the last time you saved the file.

2.Working with Dreamweaver MX
When you open Dreamweaver by default the program will automatically open a new, untitled page. You can access files on your computer from the text menu under file, or from the site files (site manager).

Open a New or Existing File: From the text menu select:
  • File => New
    • to open a new document or
  • File => Open
    • to locate an existing file on your hard drive.

Page Properties: Before you begin to add text to your page you will want to give your page a title, and set some page attributes. You can give your page a title in the text box on the toolbar at the top of your document window or from the text menu select Modify => Page Properties. The page properties dialog box also allows you to set a color or image for the background, and control the color of your links and margin settings. 

Adding Text: Making changes to text in Dreamweaver is a lot like working with text in a word processor. It is best to start by entering your text into the page without any style formatting. The text will automatically wrap from one line to the next so it is not necessary to enter in a hard "carriage return" with the Enter/Return key unless you want to begin a new paragraph. Sometimes you may want to force a line to end, but do not want to start a new paragraph. In this case you would hold down the Shift key and the Enter/Return key. This is referred to as a soft return.

Once you have entered in all of your text, you are ready to format your document. Select the text you want to make a change to, and then select the attribute(s) from the property Inspector panel at the bottom of your screen. The title bar should say "Properties".

In the background the program is adding some code (instructions) to the beginning and the ending of the text that you selected. You can view and modify this code by changing your working view. The default view is the design view and is the 3rd icon from the left. If you choose the 2nd icon (split view), you will be able to see the program adding the code as you work in design view.

 

  1. begin in split view (2nd icon from the left),
  2. select some text
  3. and then select an attribute from the properties panel below.

Property Inspector or Properties Panel: The choices that are available will automatically change depending on the object or text that is selected on your page. To work with the text attributes all you have to do is select (highlight) the text you want to format then the select the desired formatting attributes from the properties panel below.

Looking at the properties panel from left to right, top to bottom.

  • You can choose preformatted text like paragraph and headings 1, 2, 3, 4, 5 and 6
    • with 4 being the same as size 3 (12 pt.) text
    • and 6 being the smallest.
    • the default is none.
  • You can change the font family (default is none),
    • size (default is 3),
    • color (default is black), and
    • style (bold, italic)
  • You can change the alignment of the text to be left, center or right
  • Add a link
  • Set a target for that link to open in the same window or frame or a new window or frame
  • You can add list,
    • unordered (such as a bullet) or an
    • ordered list (numbered)
  • You can also indent or outdent your text.

To add list items to your page:

  1. When you are working with list items enter the text for each item with a hard return at the end. This lets the program know that you want to begin a new list item.
  2. Then when you are ready to format your document, you would go back and select the entire list and apply the proper bullet style:
    • either ordered list (number) or an
    • unordered list (such as a round bullet).
  3. Each indented level will display a different bullet style.

Side Note: You can change the style of a bullet using HTML code, however each browser and version displays the bullets differently, which results in very little control in the end.

Saving your File: From the text menu select:

  • File => Save
    • save and name a new file
  • File => Save as
    • save changes made to an existing file
    • rename or to
    • create a second file
  • Your Homepage or first page should be named index.htm

To view your File: It is a good idea to view and test your files in a web browser before you upload them to the server and make them available to the public. To do this.

  • Save your file so that you are viewing the most recent version of your document.
  • From the toolbar above, to the right of the "Title", click on the browser icon  

Images are used in web pages cautiously and with the purpose of illustrating or clarifying an idea or concept. Images that don't add the quality of the material should be omitted or left out.

To insert an image:

Place the insertion point (cursor) where you want the image to appear on the page

  • Then from the Insert panel above select the Common tab and click on the Image icon.

Or Alternatively:

  • From the text menu: Choose Insert => Image
  • Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window; then skip to step 3.
  • Drag an image from the Site panel to the desired location in the Document window; then skip to step 3.
  • Drag an image from the desktop to the desired location in the Document window; then skip to step 3.

A dialog box will appear:

  1. Do not change the "Select File Name From" source:
  1. Browse to select your "Main Site Folder" then your images folder, find the image you want to use.  
  2. In the Property inspector below, set the properties for the image.
    You'll notice that the property inspector will have a thumbnail of the image you are working with, and will automatically display the width and the height of the image in pixels. The three areas you want to be sure to complete are the Name, Alt tag and the border size.

     Image Property Inspector

The name and alt tag is used by visually impaired users with speech synthesizers, browsers that can not display images, or by user who have the images turned off in their personal preferences. The border looks different depending on the browser, some browsers will display a nice solid line and others will display a raised 3demensional line around the image. If an image is used as a link and you have a border set to anything higher than zero, a blue line will appear around the image to indicate that you can click on it. If you do not want the blue line to appear around the image you should set the border to zero.

    • Alt Tag: Add information about your image.
      • To view the Alt tag hold your mouse over an image in a web browser.
         
    • Border: Set this to zero or indicate a size in pixels, such as 1, 2, or 3
      • Try changing the border width, save the document and preview in browser to see the effects.

Add a Anchor
An anchor is a marker for a specific place in a page, and is identified in a link with a pound sign (#). Making an anchor allows you to tag/mark special areas of your page so that you can refer back to that area easily. An anchor is not a link.

To create an anchor:
To practice creating an anchor, identify an area of your page that is not visible on your screen, somewhere towards the bottom of your page.

  1. Place the insertion point (cursor) where you want the anchor to appear on the page
  2. From the Insert Panel (above)
  3. The Anchor dialog box opens, type a name (no spaces)
  4. Click OK.
  5. You should see a yellow marker on your page
  6. Repeat this process until you have created all the anchors you need on this page.
  7. Save your changes.

To create a link to an anchor:

  1. Highlight the text or image you want to link (hyperlink)
  2. In the property panel below, in the Link text box,
     
  3. And hit the enter (pc)
  4. Your link should be identified by blue underlined text or a blue line around your image
  5. Save your changes.
  6. Preview and test in a browser.

Add an Email Link

To create an Email link:

  1. Highlight the text or image you want to link (hyperlink)
  2. In the property panel below, in the Link text box,
  3. And hit the enter.
  4. Your link should be identified by blue underlined text or a blue line around your image
  5. Save your changes.
  6. Preview and test in a browser.

Using the Insert bar: Tables
The Table icon and the Table tab in the Insert bar allows you to insert tables and table attributes into your web page. You can use tables to organize and display data or as a design tool to layout the text and graphics on your web page.

To add a table:
  1. Place the insertion point (cursor) where you want the table to appear.
  2. Click the Table button in the Common category of the Insert bar. 
    • Alternatively: From the text menu, choose Insert > Table.
  3. A dialog box appears, enter the values for table size, number of rows, number of columns, border size, and select a table type, either pixel (fixed size) or percentage (flexible changes with the window size).
  4. Click ok.

Modify the Appearance and Structure of a Table:
Working with tables in a web page is very similar to working with tables in your favorite word processor. Clicking in the cell, selects the cell so that you can add content or apply an attributes, such as alignment or color. Clicking and dragging across cells allows you to select multiple cells.

You can do any of the following:

  1. Add content such as, text, images, or multimedia objects
  2. Add, delete, split, and merge rows and columns  
  3. Copy and paste cells
  4. Create nested tables (a table within a cell or table)
  5. Modify table, row, column or cell properties to add color and alignment

 

 
Hosted by www.Geocities.ws

1