Dreamweaver Tutorial

 

Personal Homepage Assignment

 

Preparing for your web page design.

 

Prior to starting your personal home page you will require several .gif files, they are as follows:

1.         A logo, your name,  designed using Adobe Illustrator and saved as logo_(your name).gif

 

2.         A button image designed on Adobe Illustrator that reads Photo Album and saved as 

            btn_sample   1 _up.gif, and a colour swatch that corresponds to the image button and                           saved             as  btn_sample             2_up.gif.

 

3.         Several images created on Photoshop and saved as sample 2 jpeg_.gif, sample 3_.gif, etc.

 

4.         Text that has been written in AppleWorks and saved as DW3_copy.txt.

 

All of these files are to be transferred into your sites folder.

 

Before you start the tutorial, create a new folder into which youÕll transfer the (Your Name) site tutorial files. Later, you can use the Sites folder structure to store other sites you create.

 

1. At the root level of your local disk, create a new folder and name it Sites—for example, Hard     

   Drive:  Sites.

 

2. Create a new folder named (Your Name)_site and place it into the Sites folder. For this tutorial, youÕll specify the (Your Name)_site folder as the local site folder.

 

Tutorial  Create

 

1. Launch Dreamweaver. A blank document opens.

 

2. Choose Site > New Site.

 

3. In the Site Definition dialog box, make sure Local Info is selected in the Category list.

 

4. In the Site Name field, type my_tutorial. The site name lets you easily identify and select a site from a list of sites youÕve defined.

 

5. Click the folder icon to the right of the Local Root Folder field, navigate to the Sites/(Your Name)_site folder, and click Open. Then click Choose (Macintosh). The Local Root Folder field updates to display the path to the local site.   Note: The complete path to the (Your Name)_site folder may vary, depending on where you have created your Sites folder.

 

6.  Close the browser when you finish looking at the site.

 

            Caching the files in the (Your Name)_site folder creates a record of existing files so Dreamweaver can quickly update links when you move, rename, or delete a file. The Site window now displays a list of all the folders and files in the local site my_tutorial. The list also acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would in the file finder or explorer on our own computer.

 

7. Leave the Site window open.

 

8.  Click the Document window to make it active.

 

Save your document

            Save the blank document you created when you launched Dreamweaver.

 

1. Choose File > Save.

 

2 .In the Save As dialog box, select the Sites/(Your Name)_site folder to save the file in.

 

3.In the File Name field, type my_name_home.html.

 

4. Click Save.

 

Define the Title of the Page

 

            Defining a page title for an HTML document helps users identify and keep track of a page theyÕre browsing. The page title appears in the browser title bar when a page is viewed in a browser. When a page is bookmarked, the page title appears in the bookmark list. If a document is created without a page title, the document appears in the browser with the title Untitled Document.

 

1 With the Document window active, choose Modify > Page Properties to see the page property options.

 

2 In the Title field of the Page Properties dialog box, type (your name).

 

3 Click OK. The title appears in the title bar of the Dreamweaver Document window.

 

Add Layers

 

            Layers are ideal for creating complex page layouts, since you can easily reposition page elements that have been placed in layers by dragging them. YouÕll lay out the home page using layers, and then convert the layout to a table layout so that the page will accurately display in both 3.0 and 4.0 browsers. You cannot convert layers to tables if the document being converted contains nested or overlapping layers.

 

1 Choose Window > Layers to open the Layer palette.

 

2 Make sure the Prevent Overlaps box is selected.

 

3 Click in the Document window of the my_(name)_home document to make the document

    active.

 

 

4 Choose Insert > Layer. A layer is added to the document.

 

5 In the Object paletteÕs Common panel, click the Draw Layer button.

 

6 Move the pointer to the Document window; the pointer changes into a drawing tool. In the

   space below the first layer, drag the pointer to draw a new layer.

 

7 Repeat the actions in steps 5 and 6 to draw another layer.  Create a layer for each element you

   wish to include in your page, try to use at least four.

 

Select and Manipulate a Layer

 

You can change the position or shape of the layers in your document.

 

1.Click the border of the layer. Handles appear around a selected layer:

 

2.To resize a layer, click a layer handle, and drag the handle to the desired size.

 

3.To move a layer, do one of the following: Use the arrow keys. Hold down Shift and use the arrow keys to move a layer five pixels in the direction of the arrow used. Click the tab in the top left corner of the layer and drag the layer to the desired position.

 

Add an Image

 

Now youÕll insert the (your Name) logo image in the document.

 

1. Click anywhere in the uppermost layer. Clicking in a layer places the insertion point inside the layer without selecting the layer.  An active layer with an insertion point in it looks like this:

 

2 .Choose Insert > Image.

 

3. In the Select Image Source dialog box, locate the Sites/(Your Name)_site/Images folder, navigate to logo_(your name).gif, and click Choose .  The image appears in the layer.

 

Add the Navigation Images

 

Now youÕll add an image for the navigation button.  After you add the button image, add space between the graphics: add a paragraph return after you insert the images.

 

1. Place the insertion point in the navigation layer (the bottom left layer).

 

2. In the Object paletteÕs Common panel, click the Insert Image button. The Select Image Source dialog box appears.

 

3. In the Images folder of the (Your Name)_site, navigate to btn_sample 1_up.gif, and then click Choose to insert the image. The sample 1 image appears in the layer.

Adding Images

 

1.Position the insertion point after the image in the layer, and press Return to add space between this image and the next image you insert.

 

2. In the Object palette, click the Insert Image button, and in the dialog box that appears select  sample 2 jpeg_.gif, and then click Choose.

3. Position the insertion point after the image in the layer, and press Return (Macintosh).

 

4. In the Object palette, click the Insert Image button, and in the dialog box that appears select sample 3 jpeg_.gif, and then click or Choose.

 

Name the Images

 

            Make a habit of naming the elements in your documents. Later, when you need to reference or select a particular image, layer, or some other document element, youÕll be able to easily identify it. YouÕll be referencing these images later in the tutorial, so name them now.

 

1 In the Document window, click the sample 1 image to select it.

 

2 In the Image field of the Property inspector, type sample 1.

 

3 Repeat these steps, selecting and naming the other two images in your document. Name the second image sample 2 and the third image sample 3.

 

Add Text to a Layer

 

            Now youÕll add text to the remaining layer. In Dreamweaver, you can type content directly into a layer, or you can cut and paste content from another document into a layer. In this tutorial, youÕll add text to the layer by copying and pasting content from an existing text file to a layer.

 

1. Choose File > Open; then, in the (Your Name)_site folder, open DW3_copy.txt. The DW3_copy.txt document opens in a new Dreamweaver Document window. DW3_copy.txt is the file youÕll copy the text from.

 

2. Choose Edit > Select All to select the document text.

 

3. Choose Edit > Copy to copy the text.

 

 Close the DW3_copy.txt document.

 

5.In the my_(name)_home document, position the insertion point in the bottom right layer.

 

6. Choose Edit > Paste to paste the text into the layer.

 

Format Text

 

You can format text in the Document window by setting properties in the Property inspector. First, select the text you want to format, and then apply the changes. YouÕll change the font and size of the text. Before you format the text, youÕll create a couple of paragraphs. Add a paragraph return after the first sentence and after the second sentence.

1 If the Property inspector isnÕt open, choose Window > Properties.

 

2 With the insertion point anywhere in the layer, press Command+A (Macintosh) to select all the text in the layer.

 

3 In the Property inspectorÕs second Format pop-up menu, which currently reads Default Font, select Arial, Helvetica, sans-serif.

 

4 In the Size pop-up menu, select 3. Text in document automatically updates to reflect  changes.

 

Add a Background Color to a Layer

 

            You can also use the Property inspector to set the background color of a layer. You can select a color using the color picker, or you can type the hexadecimal code for a color.

 

1. Click the border of the layer that contains the text to select it. (Handles appear around a layer when it is selected.)

 

2. In the Property inspector, click the BgColor color box. The color palette and eyedropper icon appear. You can use the eyedropper to Òpick upÓ any color in the visible work area, in addition to picking colors in the color palette.

 

3. Move the color picker icon to the (Your Name) logo and click the colour that surrounds the letters or choose a totally different colour. The layer background color is updated.

 

Position the Layers

 

            Now that youÕve completed the design of your page — laying it out using layers— youÕll convert the layers to a table layout so the page can be viewed by users with 3.0 browsers. When you convert layers to a table, Dreamweaver creates table columns, rows, and cells to fit the layers on a page. To reduce the number of table columns, rows, and cells you create as you convert the document layout, align layer elements before converting a document. Use the Property inspector to position layers in

a document. First, youÕll resize and move the layers as you design your page; then youÕll set the

position of the two lower layers so they align at the top.

 

1 Resize the top layer by dragging the layer handles in until they just surround the (Your Name) logo and the text following it.

2 Resize the navigation layer (the bottom left layer) by dragging the layer handles in until they just surround the images.

3 Move the text layer so that it is positioned next to the navigation layer. Select the layer, and then use the arrow keys or drag the layer by the layer tab. (The layers wonÕt overlap, because Prevent Overlap is selected in the Layer palette.)

4 If all the layer property fields arenÕt visible in the Property inspector, click the expander arrow in the lower right corner of the Property inspector.

5 Select the layer that contains the navigation images. Hold down Shift and select the layer that contains the text. Both layers are selected.

6 In the Property inspectorÕs T field, type 100px. This precisely positions both layers 100 pixels from the top of the document. Click anywhere in the document to deselect the layers and to see the  layers align.

 

 

Convert layers to a table

 

Now that youÕve laid out the page, convert the layers to a table so that the page will be displayed accurately in 3.0 as well as later version browsers.

 

1 Choose Modify > Layout Mode > Convert Layers to Table. The Convert Layers to Table dialog box appears.

 

2 In the Convert Layers to Table dialog box, under Table Layout make sure that Smallest: Collapse Empty Cells and Use Transparent GIFs are selected.

 

3 Under Layout Tools, make sure that Prevent Layer Overlaps is selected.

 

4 Click OK.

The layers are now converted to a table.

Note: Dreamweaver sets the space between the table columns and rows using transparent GIFs. After converting layers to a table, youÕll see the file tranparent.gif in the root level of your site folder. DonÕt move this file to your Images folder; if you do, youÕll see broken image icons when you view your page in a browser.

 

5 Close the Layer palette.

 

6 Save your file.

 

Create Rollover Images

 

A rollover image is an image whose display changes when the pointer is ÒrolledÓ over it. You create a rollover image by attaching a behavior to an image. A behavior is a combination of an event and an action. Events are situations that trigger actions. For example, an event called onClick can occur when the user clicks a button, or an event called onMouseOver can occur when the mouse pointer passes

(ÒrollsÓ) over an object. Actions are pieces of prewritten JavaScript code that perform specific tasks, such as opening a browser window, playing a sound, or stopping a Shockwave movie. When attaching a behavior to a page element, you specify both an action and the event that triggers it. Dreamweaver offers several predefined actions that you can attach to page elements. In this part of the tutorial, youÕll apply Swap Image actions to the sample 1, so that the image is highlighted when the mouse passes over it (that is, when the onMouseOver event occurs).

 

After youÕve defined a behavior that includes the Swap Image action during the onMouseOver event, the sample 1 image will look like the identical image with a different background color when the mouse passes over it: YouÕll continue working on the home page file to attach behaviors to the navigation images on your page. Then youÕll preview the page in a browser to test the behaviors.

 

1 In the Document window, click the sample 1 image to select it.

 

2 Choose Window > Behaviors or press F8 to open the Behavior inspector, which lists all behaviors defined for a selected element.

 

3 In the Events For pop-up menu, 3.0 and Later Browsers should already be displayed. If it is not, select it.

 

 

4 Add a new action to the list by clicking the plus (+) button and choosing Swap Image from the pop-up menu. The Swap Image dialog box appears. In the Images list, youÕll see a list of all images on the page, with the sample 1 image selected. This is the original image, which will be replaced with a highlight image when the mouse pointer passes over it.

 

5 Click Browse to navigate to the (Your Name)_site/Images folder, select btn_sample 1_over.gif, and then click Choose (Macintosh) to select the image. This image replaces the original image during the onMouseOver event.

 

6 Accept the default settings for preloading and restoring images. The Preload Images option

loads the swap image into the browserÕs cache as the page loads, so that when the user first moves the mouse pointer over the sample 1 image, there is no noticeable pause before the highlight image appears. The Restore Images onMouseOut option automatically assigns the Swap Image Restore action to the onMouseOut event for this image. This returns the image to its original state when the user moves the mouse pointer away from it.

 

7 Click OK to close the Swap Image dialog box and apply the changes you just made. The Behavior inspector now includes the events and actions you just defined for the image. The onMouseOver event appears with the Swap Image action; above it is the onMouseOut event with the Swap Image Restore action. (This behavior was defined when you accepted the default options in the Swap Image

dialog box.)

 

8  Close the Behavior inspector.

 

9 Press F12 to see your document in your default Web browser. You do not have to save a document before you preview it. All browser-related functions work while you preview a document.

 

10 When you finish previewing the file, close the browser window.

 

11 Return to Dreamweaver and choose File >Save to save the changes you made to home page.

 

Now, you can create a second page that can be linked.  Create your second page in the same manner as the first page.  Follow all the steps and insert the images that you created for the photo album, sample 2 jpeg_.gif etc.  Name this page my_sample 1.htm.    Follow the steps below to create links to this page.

 

Create links

 

YouÕll see that there are a number of ways to create links using Dreamweaver. First, youÕll add a link from the sample 1 image to the sample 1 page using the Property inspector.

1 In the Site window, double-click the icon for the DW3_(your name)_home.html file in either panel. The DW3_(your name)_home.html file opens.

 

2 In the Document window, click the sample 1 image to select it. DonÕt double-click the image, or Dreamweaver will open the Select Image Source dialog box.

 

3 Choose Window > Properties to open the Property inspector if it isnÕt already open. The Image Property inspector displays information about the selected image. Note: The Link field contains a number sign (#), created when you attached the Swap Image behavior to the image. DonÕt remove the number sign; it will be replaced with the file name of  document you link to.

 

4 In the Property inspector, click the folder icon to the right of the Link field.

 

5 In the Select File dialog box, browse to my_sample 1.html, and click Choose to select the file. The file name appears in the Link field of the Property inspector. Now youÕll add a link to the Products image using the Property inspector and the Site window.

 

6 Click the title bar of the Site window to make it active, or choose Window > Site Files. Resize your Document window, if necessary, so that you can position the left side of the Document window and the Site window side by side.

 

7 Choose File > Save to save all the changes youÕve made to the home page.

 

8 Choose File > Close to close the page.