Advanced Dreamweaver MX



Creating Web Pages with Dreamweaver

Macromedia Studio MX 2004 (v. 7)

Creating a Local Web Site ~ Using the Site Definition Wizard

1. Create a folder on the computer desktop named: Sites-Local

2. Click on Start ( Programs ( Macromedia ( Macromedia Dreamweaver MX 2004.

3. In Windows, the first time you start Dreamweaver, a dialog box appears that lets you choose a workspace layout. Make sure the Designer layout is selected and click OK.

4. On the Start Screen, in the center column named Create New, click on Dreamweaver site.

5. In the Site Definition window, click on the Basic Tab if it is not already showing and enter a meaningful name for your site.

Tip: Do NOT include spaces in this folder name. This is the directory that will be published to the web and should not include spaces.

Practice Activity

Name the practice site: GlobalCarRental

6. On the next screen, click “No, I do not want to use a server technology.” Click Next.

7. For the next question “Where on your computer do you want to store your files?” Browse to the “Sites-Local” folder on the computer desktop (click the folder icon next to the location field). Click Next.

8. How do you connect to your remote server? Select None. A folder with the site name becomes the Local Root Folder for your site

9. Review the Summary of the Site Definition and click Done.

10. The Files panel (right side of screen) now shows the new Local Root Folder for your current site.

Add Assets to Your Site

1. Create a new folder within your Local Root Folder named Assets and copy or move any files (text documents, pictures, etc.) you may already have collected into this folder.

2. Inside the Assets folder also create a new folder named images. Move any image files (jpeg, gif) into this folder.

3. As you create or collect files and images for your website, save them into the Assets or images folder.

Tip: All components of a web site must reside within the Root Folder to be visible once published to the web. It’s good practice to always move or save assets to this folder.

Practice Activity

To access the practice materials for your site, minimize Dreamweaver.

Unzip the PracticeFiles.zip folder and COPY (Right-click, drag, release the mouse, select Copy Here, left click) all the items directly into the Sites-Local folder.

*The assets and images folder have already been created for these practice materials.

Create a Web Page using a Page Design

1. Create a new page: File menu ( New

2. In the New Document window (Click the General Tab if not already open), select Page Designs from the Category List.

3. Scroll down the Page Designs (second column) and select the item:

Text: Article D with Navigation

4. Make sure the Document radio button is selected at the lower right of the dialog box. Click Create and the new page appears containing placeholder “Lorem ipsum” text.

5. Save this page (File menu ( Save) being sure to browse to the Root Folder.

[For practice activity, the Root Folder is “GlobalCarRental”]

6. Enter the filename: index.htm

7. Click Save. The filename now appears in the title bar of the Document window, in parentheses, after the words “Untitled Document”

Set a Page Title

On the Document toolbar, enter the Title of the page in the Title text box. This title determines what the Bookmark/Favorite will be if someone bookmarks your site and helps search engines classify your site. (If the Document toolbar is not visible, select it from the View menu ( Toolbars ( Document.)

[pic]

Practice Activity

Enter the title for this page: Global Car Rental Home Page

Modifying a Page Design

In any pre-designed page or template, there may be unnecessary elements.

Remove Table Cells.

Hold down the Control key and click in the cell to be deleted. This selects the cell and not just the cell contents. Press the Backspace or Delete key.

Practice Activity

1. Delete the last two cells in the navigation bar: Sic Amet and Consectetur.

2. Delete the cell (box) with the exclamation point to the left of the word News.

Remove a Table.

Click inside the table to be removed. Click on the tag (at the bottom of the document window) to select the entire table. Press Delete or Backspace.

Tip: If there is more than one table and you delete the wrong one, select “undo” from the file menu (or use Ctrl+Z) and try again. The leftmost tag indicates the outer table. Nested tables are listed next.

Practice Activity

1. At the top of the text columns, click the word Title. Click the leftmost tag selector at the bottom of the document window. Click Delete.

2. Click in the copyright bar at the bottom of the page. Click the leftmost tag selector at the bottom of the document window. Click Delete.

Add an Image Placeholder

1. Click to place the cursor on a blank line where the image should appear.

2. Select Insert menu ( Image Placeholder.

3. Enter a meaningful name for the placeholder.

Placeholder names must start with a letter and can contain only letters and numbers.

4. Enter the width and height of the image. This may be approximate and may be edited at any time in the Properties Panel.

Practice Activity

1. Click in the top left column of text, just before the first boldface word.

Press Enter and then press the Up Arrow.

2. Insert an Image Placeholder from the Image menu.

3. Name the placeholder: SplashImage

4. Enter width: 523 Enter height: 220 Click OK.

Add Images to Placeholders

Browse for Images

1. Double-click on the placeholder.

2. In the Select Image Source dialog box, make sure the “Relative To” pop-up menu is set to “Document” and browse to an image in your Assets folder.

Tip: If you insert an image that is not located in your images folder or Local Root Folder, Dreamweaver provides an option to automatically copy the image into the site.

3. Click OK and the image appears where the placeholder was.

Point to the File

1. Click once on the image placeholder to select it.

2. Make sure the Assets folder and the Images folder in the Site panel are expanded, and the Property inspector is showing.

3. In the Property inspector, drag from the Src text box “Point-to-file” icon (tiny compass) to the image file.

Practice Activity

1. Use the Browse Method to insert the company logo by replacing the small placeholder labeled “image (100 x 50)” at the top left of the My Practice Site Home page, with the image named “logo.jpg” in the images folder.

2. Use the Point-to-file Method to replace the large image placeholder with the file named “vintage.jpg” in the images folder.

Set Background Colors

In the pre-designed pages provided with Dreamweaver, the background colors of table cells are mostly set to gray. For most sites, you may change the colors to match your site’s color scheme.

1. Control-click in the cell to select it. The lower half of the Property inspector shows cell properties.

2. Click the background Color button that appears next to the lower of the two Bg labels. The color picker appears and the pointer changes to an eyedropper.

3. Select a color from the color palette, OR click on a pixel anywhere on the screen to match the color. The table cell background color changes to the color selected.

Practice Activity

1. Control-click the cell containing the Global Car Rental logo image.

2. Click the Background Color button in the Property inspector.

3. Using the eyedropper pointer, click the background of the Global logo image to make the background color of the table cell match the image background.

Add Text Content

Text may be entered directly into the Document window, or copied and pasted from another source (such as a Microsoft Word file). Pasted text does not retain its original formatting. Format the text using the CSS Styles panel, which is described next.

Tip: When using a pre-designed/template page, it may be useful to leave the “Lorem ipsum” text in place until you’re done with the design and layout.

Practice Activity

1. Triple-click in the bold placeholder text at the top of the left column (under the image placeholder) to select the entire bold paragraph.

2. Type: Safety Tips

3. Select the three paragraphs of placeholder text below the horizontal rule.

4. Type the following text:

The safety of our loyal customers is important to us. Read these safety tips to ensure that your next trip goes off without a hitch!

5. In the right column, highlight the word “News” and replace it with this text:

Globe-Trotter Promotions

6. In the Site panel, location the promotions.txt file in your Assets folder. Double-click the file icon to open it. Note that the text files appears in a new Document window.

7. Select and copy all the text.

8. Click the index page tab to bring that page forward.

9. Select all of the placeholder text in the lower cell of the right-hand column and Paste the copied text.

10. Click just before the word “Rent” (in the second paragraph), and choose Insert ( HTML ( Horizontal Rule, to place a horizontal line between the two promotions.

11. Save your document.

12. Switch to the promotions.txt file (tab at top of document window) and close that file. (File menu ( Close, or click the X for Close Window).

Cascading Style Sheets (CSS)

Create a CSS style sheet (from a pre-designed style sheet) to define the text style for the entire website.

1. Choose File menu ( New

2. In the New Document dialog box, click on the CSS Style Sheets category from the category list on the left. The middle column displays a list of CSS Style Sheets.

3. Select a Style Sheet from the list to see the style displayed in the Preview window.

Practice Activity

1. For the GlobalCarRental Site, select: Basic:Verdana.

2. Click Create.

3. Choose File ( Save, and save it in the site’s Assets folder.

4. Name the file: text.css

5. Close the CSS file window.

Apply CSS Style to Text

Practice Activity

1. Select the indext.htm file (click the tab at the top of the window to bring this page to the front)

2. Choose Window ( CSS Styles to display the CSS Styles panel.

3. At the bottom of the CSS Styles panel, click the Attach Style Sheet button.

4. In the Attach External Style Sheet dialog box, click Browse to locate a style sheet.

5. In the Select Style Sheet File dialog box, browse to and select the new style sheet you created in the Assets folder (text.css). Click OK.

6. In the Attach External Style Sheet dialog box, click OK to attach the style sheet.

The style sheet’s name and contents appear in the CSS Styles panel. Save the document.

The styles defined in the style sheet are applied to the text in the HTML document.

Look at the Code

While working in Design View to add text, images and other content, the Dreamweaver program is generating HTML code (the programming language for most web pages). To view the underlying HTML code for the document, click the Code and Design view button (the second button) on the Document toolbar.

If you are familiar with HTML Code, you may work in this view. Otherwise, click the Design View button (third button) on the Document toolbar to return to working in Design View, which is “WYSIWYG” (What You See Is What You Get).

Create Additional Pages for the Web Site

Duplicating Pages

1. In the Site panel, right-click the index.htm page and select Duplicate from the Edit menu. A copy of the file appears.

2. Right-click on the duplicated file and select Rename from the Edit menu.

3. Give the new file an appropriate new name.

Practice Activity

1. Duplicate the index.htm page and rename the duplicate file: customerService.htm

2. Open the customerService.htm page by double-clicking on it in the Site panel.

3. Click on the large image to select it (to be removed form this page).

4. In the tag selector, click the tag

5. Press Backspace to delete everything in the table cell (image and text).

6. Add text to this new page that is in HTML format:

7. In the Site panel, double-click the custServInfo.htm file in the Assets folder. The file opens in a new Document window.

8. Choose View ( Code to view the HTML Code for this page.

9. Press Control+A to select everything in this file.

10. Press Control+C to copy everything.

11. Switch back to the customerService.htm document window (use the tabs across the top of the window).

12. Click inside the now-empty main text column (wide column on the left)

13. Choose Edit ( Paste HTML The HTML code copied form the custServInfo.htm file is pasted into this document.

Note: If you select Edit ( Paste (instead of Paste HTML), the code appears as text in the Design view. Select Edit ( Undo and try again.

Tip: The text.css style sheet is already attached to this duplicated page, so text is formatted automatically.

Rollover Graphical Links in the Navigation Bar

A rollover image consists of two images: the image displayed when the page first loads in the browser, and the image displayed when the pointer moves over the original image.

Practice Activity

1. Switch to the main index.htm page.

2. Double-click in the navigation bar cell that says “Lorem” and delete the text.

3. With the cursor in that cell, select Insert menu ( Image Objects ( Rollover Image.

4. In the Insert Rollover Image dialog box, enter an Image Name: home-image

5. For the Original Image, click Browse, and then navigate to the btnHome.jpg file in the images folder. Click OK.

6. For the Rollover Image, click Browse, and then navigate to the btnHome_on.jpg file in the images folder. Click OK.

7. Make sure the Preload rollover Image option is checked.

8. Enter Alternate Text if desired: Global Car Rental Home Page

9. In the “When Clicked, go To URL” text box, click Browse and then browse to index.htm. Click OK and Save the document.

Note: this may seem unnecessary since this is the page being edited, but this navigation bar will be duplicated for all pages on the site so the home page button should be active.

Create two more rollover buttons in the next two cells, completing all the fields in the Insert Rollover Image dialog box for each button:

10. Replace “Ipsum” with the btnCustomerService.jpg and btnCustomerService_on.jpg

11. Link to the customerService.htm file

12. Replace “Dolor” with the btnLocations.jpg and btnLocations_on.jpg

13. Link to a page named imagemap_start.htm (in the local root folder).

14. Select a background color to match the background of the page.

Insert Flash Buttons (Another way to add buttons)

Dreamweaver includes a variety of pre-made button styles that do not require two images.

1. Insert menu ( Media ( Flash Button

2. Select the style of button desired

3. In the Button Text box, enter the text to appear on the button (Home).

4. Next to the Link box, click Browse to navigate to the link page.

5. Select a background color to match the background of the page.

Copy and Paste the Navigation Bar

Practice Activity

1. In the index.htm file, click in the table cell that contains the Home rollover image.

2. In the tag selector, select the rightmost tag. (table row)

3. Chose Edit ( Copy

4. Switch to the customerService.htm file

5. Click in the navigation-bar table cell that says “Lorem.”

6. In the tag selector, select the rightmost tag.

7. Chose Edit ( Paste

The navigation bar rollover images are pasted in place of the existing cells.

8. Save the document. Press F12 to preview in browser.

Create an Image Map

Practice Activity

1. In the File Panel, double-click the imagemap_start.htm document in the Assets folder.

2. In the document window, click the image of the world map to select it.

Image Map options appear in the expanded Property inspector.

3. In the Map name text box, enter: Locations

4. Click the Rectangular Hotspot Tool to select it.

5. In the Document window, click in the area above and to the left of North America, and then drag the pointer down and to the right over the continent to create a hotspot area.

A blue layer appears over the image, and the hotspot Property inspector appears.

6. In the Link text box, browse to link to another web page on your site or an external URL. For this activity, enter:

7. In the Alt text box, enter: North America

8. Click the image of the world map to create another hotspot.

9. In the Property inspector, click the Polygon Hotspot tool to select it.

10. Click points on the map to define the shape of Europe as the hotspot area.

11. When finished mapping the image, click the Arrow button in the Property inspector to change back to the pointer tool.

12. In the Link text box, browse to link to another web page on your site or an external URL. For this activity, enter:

13. In the Target pop-up menu, choose _blank. The linked page will open in new window.

14. In the Alt text box, enter: Europe

Image Map example:

Link to a Page on the Web

Practice Activity

1. Highlight the text to be linked. On the index.htm page, select the text “partner hotels” in the Globe-Trotter promotions article

2. Click the Hyperlink button [pic] on the Insert Toolbar or select Hyperlink from the Insert menu.

3. In the Hyperlink Window enter the web address in the Link field. Insert a Hyperlink to:

4. Select _blank for the Target for the page to open in a new window. Click OK.

5. Save and preview the page.

Tip: Copy and paste long web addresses to avoid errors.

Link to an Email Address

Practice Activity

1. On the CustomerService.htm page, click after the word Call in the last paragraph (We Are There For You) and add the text: or email. [Call or email us at any of our customer service…]

2. Highlight the text: email

3. Click the email link icon [pic] on the Insert toolbar , or select Email Link from the Insert menu.

4. In the Email window, enter an email address in the email field. Click OK and save.

Set up a New Site Using a Template

Download the template (sites for free templates listed below).

Rename the folder containing the template files with the name of the site.

Create a New Site in Dreamweaver and browse to the template folder as the Root Folder.

Copyright and Citing Sources – Classroom Connect



Dreamweaver MX Tutorials and Templates











There are more free tutorials on the Internet. Search for: “Dreamweaver tutorial” + free.

Contact: Karin Horn, khorn@

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download