Macromedia Dreamweaver MX 2004 Developer Certification Examination Specification

10-06-03

Introduction
This examination is based upon the most critical job activities a Macromedia Dreamweaver MX 2004 Developer performs. The skills and knowledge certified by this examination represent a professional level of expertise where a certified individual can: Identify requirements and strategies for Web site design. Develop, implement, test, deploy solutions, and maintain Web sites.
Background and Experience
The test specification is intended to address the knowledge and skill areas that demonstrate proficiency as a Dreamweaver MX 2004 Developer. The basic knowledge and skills required at this level should include all of the following areas and test objective components identified in the Test Content section below. The knowledge level can be defined as having the following prerequisites: Six months experience creating/using professional high quality graphics Two or more years experience in Web development Job knowledge of HTML, JavaScript, and CSS syntax Six months experience in Web site management At least one year experience using Dreamweaver Experience with manual coding
These training courses or equivalency will assist in exam preparation. Dreamweaver MX 2004 Website Development Dreamweaver MX 2004 Dynamic Application Development For more info: http://www.macromedia.com/support/training/
The skills and knowledge measured by this examination are derived from current course content and from an understanding of the jobs of current Dreamweaver developers. A team of highly qualified Dreamweaver experts defined the test content and wrote the test items.
Note: This examination blueprint includes weighting, test objectives, and example content. Example topics and concepts are included to clarify the test objectives; they should not be construed as a comprehensive listing of all of the content of this examination.

Macromedia, Inc.

The table below lists the domains measured by this examination and the extent to which they are represented in the test. Domain 1.0 2.0 3.0 Total Project Requirements, Site Design, and Usability Techniques Implementation and Coding Solution Testing, Deployment, and Maintenance % of Examination 20% 50% 30% 100.00%

Response Limits

The examinee selects, from four (4) or more response options, the option(s) that best completes the statement or answers the question. Distracters or wrong answers are response options that examinees with incomplete knowledge or skill would likely choose, but are generally plausible responses fitting into the content area defined by the test objective. Test item formats used in this examination are: Multiple-choice: The examinee selects one option that best answers the question or completes a statement. The option can be embedded in a graphic where the examinee points and clicks on their selection choice to complete the test item. Multiple-response: The examinee selects more than one option that best answers the question or completes a statement. Sample Directions: Read the statement or question and from the response options, select only the option(s) that represent the most correct or best answer(s) given the information provided.

Test Specification Domain 1.0 Project Requirements, Site Design, and Usability Techniques
1.1 Identify and recognize project architecture considerations, such as fundamental components, effective designs, and methods to successfully implement a Web site. Content Limits Strand A Defining the local site Defining the site navigation Designing page size resolution Implementing basic user interface principles Targeting browsers for consistency in page delivery Supporting international languages W3C standards (HTML validation?) Accessibility Standards Strand B Architecting for reuse and consistency using Templates Setting Preferences Library items Extensions Tag libraries Strand C Using Layers for page layout Structuring the site using framesets Using graphics and rich media
Domain 2.0 Coding and Implementation
2.1 Identify the appropriate techniques and methods in using Macromedia Dreamweaver MX 2004 interface to code and implement a client solution. Content Limits Using Dreamweaver Interface Customizing the site panel Property Inspector Insert bar Assets panel Selection panel Ability to use "Find and Replace"
2.2 Identify the appropriate techniques and methods in using Macromedia Dreamweaver MX 2004 to design and implement a client solution. Content Limits Structuring pages using Cascading Style Sheets (CSS) Templates Framesets Library items Server-side includes Table layout Layers Tracing images
2.3 Identify the appropriate techniques and methods in building a site with Macromedia Dreamweaver MX 2004 to code and implement a client solution. Content Limits Strand A - Building sites Creating and saving new pages Titling pages Setting document properties Setting browser preferences Building pages Formatting the document structure (Paragraph and line breaks) Entering and modifying text Linking files and sites Importing graphics Table editing Creating Image maps Setting meta information (Head Content) Creating user forms Auto check for browser compatibility Strand B - Extending Sites Extend pages using Extensions Importing external content Popup menus Using Behaviors Strand C - Hand Coding Sites Coding features Reference panel Code and Design View Snippets Code navigation Code Insight Coding context menu option Naming conventions (i.e., variations between UNIX and Windows) Strand D - Collaboration Using Design Notes and Comments Using Check In-Check Out effectively
Domain 3.0 Solution Testing, Deployment, and Maintenance
3.1 Recognize critical procedures to conduct testing and quality assurance of site. Content Limits Link Check Size Reports Ensuring accessibility Download Time Testing Error resolutions (403 & 404) Creating a site map 3.2 Identify approaches to maintain and manage Web sites. Content Limits Connecting to servers Managing assets, links, and files for a site Cloaking Transferring files to servers (e.g., FTP & SFTP) Updating site files to a remote server Synchronization

Copyright Rutgers Writing Program Contact Barclay Barrios (barclay.barrios@rutgers.edu)
Tutorial Macromedia Dreamweaver MX 2004 Introduction
In your work at Rutgers, you may want at some point to publish your own web page or site, either for a class or personal use. One of the most widely-used and versatile programs for creating web pages today is Macromedia's Dreamweaver MX 2004. This is a WYSIWYG (What You See Is What You Get) program, so you don't need any previous knowledge of HTML hand-coding for creating a web page. Dreamweaver MX 2004 allows you to create and edit web pages and sites in a graphical user interface, so you are able to see changes to your work as you make them. This tutorial will walk you through many aspects of Dreamweaver MX 2004, from creating a new document, to publishing it on your RCI space.
Setting Up Your RCI Account
If you have not yet established an account on an ICI (Instructional Computing Initiative) server at Rutgers University in New Brunswick, called "RCI", you will need to do so ASAP. All Rutgers employees are eligible for an account. Just visit the URL below, read the "Acceptable Use Policy" guidelines, then go to the bottom and click on the "Accept" button. A form will appear on your screen. Fill in the form, click "Create Account," and in 15 minutes you will have a new "RCI" account. Start here to establish your RCI account: https://www.rci.rutgers.edu/rats/rats.cgi
Setting Up Your public_html Folder
Once you have an RCI account, you will need to establish a folder (or "directory") to which you can publish your web pages. This is called a "public_html" directory. You also need to change the permissions (a type of setting) of that directory to make it available to the public (so that anyone can read but not write to what you post there). To set up this public_html directory, please read the appropriate tutorial; it will walk you through all of the steps in creating your public_html tutorial on any Rutgers University computer.
Opening Dreamweaver MX 2004
To start working with Dreamweaver MX 2004, you will need to open the program. Some campus computer labs are equipped with this program on its computers, and it can also be found on all Computer Classroom computers. You can open it by clicking on the "Start" button located in the bottom left corner of your screen. Then, navigate to the "Programs, and then to the Macromedia folder. From there, select Macromedia Dreamweaver MX 2004. Please note that many computers at Rutgers labs may have multiple, older versions of Dreamweaver installed, and all may be listed in the Start menu. Make sure you open Dreamweaver MX 2004, the most recent version of the program.
If you do not see this listed in the Start menu, look for an icon for Dreamweaver MX 2004 on your Desktop. When you first open the program, Dreamweaver will prompt you with its own starting window; from here, you can select the type of document you would like to create. Unfortunately, there is no way to simply close this window; in order to get rid of it you must select some type of document. Pick Create New >> HTML to open a blank web page and close the window (you can also click Dont show again if you do not want this starting page to show, again).

Different Views

Dreamweaver MX 2004 is a flexible program that allows you to code in different views: Code View, Code and Design View, and Design View. You can switch between these views by using a series of three button icons located near the top left corner of the screen.
In the Code view, Dreamweaver MX 2004 displays a web page in its raw form: HTML code. If you are familiar with hand-coding HTML, you may wish to edit your web pages in this view. The Code and Design View splits the screen in half, displaying the HTML code for the web page in the top, and the WYSIWYG, or Design View, in the bottom half. Finally, the Design View displays a web page purely in the WYSIWYG style. Here, you can physically manipulate your web page elements, rather than coding them in HTML. This is the ideal view to use for beginners.

Program Layout

One of the main differences between Dreamweaver MX 2004 and previous versions of the program is the layout of the interface, which includes several panels and tabs. When you first open Dreamweaver MX 2004, you will be greeted with a barrage of panels, mostly located on the right side of the screen, and a list of tabs positioned horizontally on the top of the screen.
If you are used to an older version of Dreamweaver, you will notice there are quite a few differences in the layout of the program. While there are mostly only small adjustments between MX and MX 2004, there are huge jumps from Dreamweaver 4 to this version. Macromedia has included two different types of program layouts for its users: the default, Designer view, and the additional Coder view. If you wish to change to the Coder view (note that you can switch back whenever you wish), click through the Edit >> Preferences menus.
Click on the button Change Workspace, which is located in the middle of the default window (the General tab).
A new window will appear, giving preview of the two views. This tutorial will be written with the Designer view in mind, which is the default view.

Panels

For basic web designing tasks, many of these panels may not be needed. Fortunately, these panels can be closed, making the main Dreamweaver screen less cluttered. Here is a quick run-down of the panels in Dreamweaver MX 2004:

Design

This panel controls CSS (Cascading Style Sheet) Styles and Layers.
This panel allows you to fine-tune your code with some pre-set examples (such as navigation and form elements).

Application

This panel is meant exclusively for managing database functions embedded in web pages. Since this is a basic tutorial, we will not go into depth about databases in Dreamweaver MX 2004.

Tag Inspector

The Tag Inspector will allow you to fine-tune and change certain attributes, specifically in the Code View.
Of all of the supplementary panels in Dreamweaver MX 2004, you will probably find the Files panel the most important and useful. It is in this window that you organize files related to your web page or site, and is the main mechanism for uploading and downloading files to/from the web. Since this is such a major function of Dreamweaver MX 2004, we will discuss the Files window in the Publishing section.

Managing Panels

There are several ways in which you can manage the panels in Dreamweaver MX 2004. See the diagram below to learn how. 1. The little area with tiny dots means that you can use your mouse to click and drag away a panel to a different part of the screen. This is helpful for when you want to un-group the panels. 2. By clicking on the small triangle, you can expand the panel to see all of its different tabs and menus. Simply click on the triangle again to minimize the tabs. 3. This long, skinny button with a triangle inside allows you to hide the panels completely. This saves a lot of space with you wish to view the entire work

Creating a New Page

When Dreamweaver MX 2004 has loaded you have the option of opening a blank page. If you have turned this off, you can get a new blank web page by going to the menu bar and selecting "File," and then "New" (shortcut Ctrl+N).
A window called New Document that lists different types of blank documents will appear. If you are starting a new page, simply select Basic Page from the Category column, and HTML from the Basic Page column. Click on Create to begin a new blank page.

Opening a Page

Websites are coded in what is known as HyperText Markup Language, or HTML. That said, the file types of web pages on the Internet are ".html." Web browsers take these HTML files (which we would see as coding), and display it as a graphical user interface, a web page, for users to navigate. To open a web page (an.htm or.html document) in Dreamweaver MX 2004, go to the menu bar and select "File," and then "Open."
Use the window that pops up to browse through your computer to open the file. When you find the file you want to open, click on the OK button. NOTE: Dreamweaver MX 2004 is capable of opening any kind of website file, regardless of whether or not it was originally created in Dreamweaver MX 2004. For example, if you have an HTML file that you have coded yourself by hand, you can also open this in Dreamweaver MX 2004 and edit it in WYSIWYG fashion. If you are familiar with the technology involved, you can also open ".shtml" files, which may have been coded with SSI.

Saving a Page

In Dreamweaver MX 2004 (and any other computer application), you should always make sure to save your work on a regular basis. To save a file in Dreamweaver MX 2004, go to the menu bar and select "File," and then "Save As."
Web Pages and Their Relation to Each Other
The first page of a website is referred to as the "index page." It is given its name, actually, by the filename generally given to it. All main pages are named "index.html." Why is this? If you were to enter "http://www.yahoo.com" into your web browser, what you are actually telling it to look for is "http://www.yahoo.com/index.html". The index file is loaded, immediately, in all directories on the web. That's why it's important for you to make your main page an index file (by saving it as "index.html").
You can name whatever other pages you create however you like. For example, most pages that contain links to other websites are saved as "links.html" (or, alternatively, you can create a new folder in the same directory as your "index.html", name that new folder "links," and save your links page in the new directory as "index.html"). For example, your main page's URL might look like this: http://www.rci.rutgers.edu/~yourusername/index.html (where "yourusername" is the RCI name you signed up for). Again, alternatively, you could enter in "http://www.rci.rutgers.edu/~yourusername" and it would still load up the "index.html" file. Eventually, you'll have enough pages that you'll want to "link" back and forth between them all. Be sure to name files appropriately, and keep them all organized. Save all files in the same folder. Don't use special characters when coming up with file names: stick to the basics (lowercase letters, numbers, and the underscore ( _ ) character); definitely do not use spaces in filenames. This can seriously confuse some web browsing programs and servers.

7. Underline style: Allows you to change the style that links appear as/in (underlined, not underlined, underlined only on rollover, etc.) Headings:
1. Heading font: Allows you to set the default font that all headings will appear as/in. 2. Heading 1-6: Allows you to set the font size that these headings will appear as/in. Title/Encoding:
1. Title: Allows you to set a default title all pages will begin with in the title bar. 2. Encoding: Allows you to set the type of language encoding that the web pages will all be using (Western European, Unicode, etc.) Tracing Image:
1. Tracing image: Allows you to browse for and set an image that you will literally trace in the layout design process. 2. Transparency: Allows you to set the transparency of the tracing image.
As you work with Dreamweaver MX 2004, you'll notice it is similar in many ways to the programs you may have worked with in the past, such as Microsoft Word. There are many options and features that indeed work in very similar ways to these other programs. Some of these most basic features are working with text, and formatting that text. To begin adding text to your web page in Dreamweaver MX 2004, use your cursor to click anywhere on the page and type directly onto the document.

Properties

The Properties panel (not to be confused with the Page Properties window, discussed in the previous section) can be found going across the bottom of the screen. To access more options, click on the small triangle next to the word Properties. This will expand the window.
If you do not see the Properties window, go the menu bar, go to Window and select Properties.

The Properties Window

Editing text with Macromedia Dreamweaver MX 2004 is not very different from editing with a word processor. The only difference is that in Dreamweaver MX 2004, text format and other properties are not controlled in the main menu at the top of the screen, but in a window (or "palette") called "Properties." The Properties panel (not to be confused with the Page Properties window, discussed in the previous section) can be found going across the bottom of the screen. To access more options, click on the small white triangle next to the word Properties. This will expand the window. You will use the Properties window to format and edit most of your content on your web page. Please note that the Properties palette does change appearance depending on what sort of content you are working with. For example, editing text makes the Properties palette appear one way, while editing a table makes the palette appear in a different way. We'll get back to the different states of the Properties palette when we talk about tables in the next section. Right now, let's take a look at the different features of the Properties palette. The numbered list below corresponds with the numbers on the image of the Properties palette. Use this image to aid you in learning the different features of the palette.

1. Minimize/Maximize: Collapses the Properties panel back and forth. 2. Format: Allows you to pick a pre-set format for the selected text. 3. Style: Allows you to pick a pre-set selection from a Cascading Style Sheet to format the selected text. 4. Bold: Puts the selected text in bold face. 5. Italics: Puts the selected text in italics. 6. Align Left: Left-aligns the selected text. 7. Align Center: Centers the selected text. 8. Right Align: Right-aligns the selected text. 9. Justify: Justifies the selected text. 10. Link: Allows you to link the selected text to another file or web page. 11. Point to File: Allows you to click-and-drag to another file to indicated a link relationship. 12. Browse for File: Allows you to browse your local files to link the selected text to. 13. Quick Tag Editor: Brings up a small quick tag editor, in which you can edit the coding by hand without switching views. 14. Font: Allows you to select a font face for the selected text to appear as/in. 15. Size: Allows you to select a font size for the selected text to appear as/in. 16. Pixels/Points: Allows you to change whether the font size refers to a number of pixels or points. 17. Text Color: Brings up an eyedropper tool, allowing you to point to any color on the screen, formatting the selected text in that color. 18. Hex Color: Allows you to enter in the hex code for a color, rather than using the GUI to choose it. 19. Unordered List: Begins an unordered, bulleted list, or formats the selected text into one. 20. Ordered List: Begins an ordered, numbered list, or formats the selected text into one.
21. Text Outdent: Outdents the text back to the left. 22. Text Indent: Indents the text over to the right. 23. Target: Allows you to link to a specific target within the same web page. 24. Page Properties: Brings up the Page Properties series of windows. 25. List Item: Opens the List Properties box. Please note that the Text drop down menu on the menu bar can also accomplish most of the functions listed above. If you feel more comfortable editing text using this menu, then please do so. However, the Properties menu is convenient since is packages all of these features in one, easy-to-use window.

Checking Spelling

Possibly one of the more overlooked features of any program is the ability to check your spelling. This is essential for a website. Think about it: if CNN or MSNBC were to make a large amount of spelling errors on their news sites, would they be taken seriously? Of course not. You want to portray yourself in an intelligent manner on the Internet. Be sure to use the spell checker. You can access it by using the "Text" menu, and clicking on "Check Spelling" at the very bottom. The keyboard shortcut is "Shift+F7."

Introduction to Style Sheets
As you may have read in the previous section, a "style" is a specific format applied to either a small or large sample of text, over the range of one or many documents. You can use (or even create) a "style" that you can apply throughout your document (or multiple documents!) to any variety of text to keep a common look and feel throughout your pages. These are called "Cascading Style Sheets." The wonderful thing about CSS is that the formatting of specific things on a web page can be controlled through a style sheet. These sheets can be edited, and changes in the style sheet will automatically appear on the web page elements that have styles applied to them. This is the perfect solution for those working with large amounts of pages they would like to keep consistent in style. To view the available style sheets, go to Text on the menu bar and select CSS Styles to view the CSS options.
From here, you can choose to make a new CSS style (it will automatically ask you to save it in a new style sheet), edit a previously existing style sheet, or attach a style sheet to a page. You are free to apply, as necessary and appropriate, styles to your document. However, it is in no way necessary if you are creating small pages that are easy to format on their own. This is more of an advanced feature that may be helpful to learn for future web projects.
Create a New Style Sheet in the Design Panel
If you never made a style sheet before, dont worry. You can make one using the Design panel in Dreamweaver MX 2004. Alternatively, you can chose to hand-code a style sheet, save it, and apply it to a web page (see farther below for more information on this). For now, lets discuss how to make a style sheet within Dreamweavers Design panel, without having to do any hand-coding. In the Design panel, click on the New CSS Style icon.
You will then be taken to the New CSS Style window.
Give your style a unique name in the text box. NOTE: Your style MUST begin with a period (.), and cannot have any spaces in between words. A good way to differentiate between words without using spaces is by capitalizing the first letter in
each work. However, the first word in the name should be lowercase. An example of a good name for a style would be.smallHeading. For Type, select Class. Click the OK button. The Save Style Sheet As window will now appear. Give your style sheet a unique name, and be sure to end it with.css. When you click Save, a new style sheet file will be saved, and you can begin to create your own styles. For more information on how to make a style, skip the next section, and go to Create a New Style For Your Style Sheet.

At this point, you can use the various menus to make your very own style. This may take some getting use to, but you will eventually be able to figure out which styles create what effects. Most of the categories are self-explanatory, so deciding what style to make should not be too hard. Keep in mind that any style can have as many attributes as you want, but you shouldnt make any one style too cluttered. You can make as many styles as you want to control different formatting and style elements. Once you create a style, click on the OK button. This will automatically save your new style in the style sheet, and you will see it listed in the Design panel at this point.

Edit a Style

You can edit any of the styles you have made in a style sheet at any time. Simply click on the style that you want to edit while you are in the Edit Styles mode, and click on the Edit Style icon (the icon on the right near the bottom of the panel, shaped like a pencil). The CSS Style Definition window will now appear, and you can edit a style as needed. Click OK when you are finished so that the changes can take effect.

Delete a Style

If you need to remove a style from your style sheet, highlight a style in the Edit Styles mode on the Design panel, and then click on the Delete CSS Style icon (the button shaped like a trash can, on the bottom right corner of the panel).

Tables

Tables, which are made up of "cells" formed by rows and columns, can come in handy in many ways when designing a website. By using tables, you can organize text, hold images, and even make a web page layout. This section of the tutorial will teach you how to utilize tables in Dreamweaver MX 2004.

Inserting a Table

To insert a table into your web page in Dreamweaver MX 2004, go to the menu bar and select "Insert," and then "Table.
Alternatively, you can insert a table by clicking on the Tables button from the Layout drop-down.
When you select Insert >> Table, a pop up window will appear. It will ask you to input some information about your table. The information you input in this Table window will decide what your table will look like. This window has a few text fields that you will need to know about. Read the numbered list below and use the corresponding numbers on the image to see how to insert your table:
01. Rows: Number of rows the table will have. 02. Columns: Number of columns the table will have. 03. Table Width: Total width of the table, represented by a number in either 04. Percent/Pixels: a percentage of the total page, or a set number of pixels.
05. Border Thickness: The thickness of a border surrounding the table (zero/0 for no border). 06. Cell Padding: The padding between items inside a cell and the cells borders. 07. Cell Spacing: The padding between cells, themselves. 08. Header: The header area will automatically be formatted for titles, etc. 09. Caption: A caption (or title) for the table that will appear immediately above it. 10. Align Caption: Allows control over the alignment of the tables caption. 11. Summary: For the disabled, a summary will explain what type of data the table contains.

Select Table: Just as the name implies, this option selects your entire table. Merge Cells: This is a helpful option that lets you merge multiple cells into one cell. Split Cell: By selecting or putting the insertion point in a cell, you can split that cell into any number of rows or columns. Insert Row: Put the insertion point where you want to insert a new row, and this option inserts one new row.
Insert Column: Similar to the above, this option inserts one new column. Insert Row of Columns: This option gives you more flexibility than the above two options. You can choose how many rows or columns you want to add, and where you want them to be inserted. Delete Row: Select or put the insertion point in the row that you want to delete, and select this option. Delete Column: Same as the above, but deletes columns when selected. Increase/Decrease Row/Column Span: By selecting a row or column, you can make its span larger or smaller. Please note that this menu can also be accessed by right-clicking inside of a table, and selecting the options as needed.

Images

Images are an important part of the web. If you don't have images, you tend to not "appeal" to the eye of the average visitor. Then again, if you have too much to look at, you'll be on the verge of distracting your visitors from the textual content of the site! While you will learn how to incorporate images into your page, you should stay realistic and keep the page organized with the text and images (and of course, only include images that are relevant to your site).

Where to Get Images

You can obtain images for your page from a wide variety of places. Many computer labs have at least one scanner equipped to a computer. You are encouraged to seek out your own real, physical images (such as taking photographs) which you can scan into a digital file for an image. This is preferred because it shows a serious effort has been put into the site. However, it is also possible to scan images from things such as magazines and books. If you need help using the scanner, ask a computer lab assistant, who will be able to assist you. You can also obtain images from other sources on the Internet, even other websites. Here are some useful starting points: Free-Clip-Art (http://free-clip-art.com) Google Image Search (http://www.google.com/imghp?hl=en) AltaVista Image Search (http://www.altavista.com/image/default) Microsoft Design Gallery Live (http://office.microsoft.com/clipart/default.aspx)

Alternatively, dark links on a light background are also easy to see. Basically, try to steer clear of using link colors that blend in with your background color.
Creating a Link to Another Site
Making a link to a website or another web page that is not in your site is very simple. First, select the text that you want to turn into a link. Go to the Properties palette and in the Link text box, type in the URL of the website that you want to link to. Or, you can copy the URL from a web browser by going to the menu bar and selecting "Edit," and then "Copy." Then, go back into Dreamweaver MX 2004, put the cursor in the Link text box in the Properties palette, and go to "Edit," then "Paste" in the menu bar (or hit ctrl + v on the keyboard) to paste the URL.
Creating a Link to a Page in Your Site
If the website you are working on that contains multiple pages, you will want to link to your other pages so that users can navigate your site. After all, since the Internet is basically a collection of inter-linking web pages, it's essential that you have links that connect the different parts of your website. When linking to web pages within your own site, it's best to have all the web pages for your site all saved in one folder, or in multiple, organized folders. When your website files are organized, it will be easier to link to your web pages. With your cursor, highlight the text that you want to turn into a link. Go to the Properties palette. Next to the Link text box, you will see an icon that looks like a folder. Click on the icon. By doing this, you can browse your computer to find to the.html file (or other document) that you want to turn into a link.
The "Select File" window lets you browse your computer's folders to find the file you want to link to. When you click on the file name that you want to link to, the name will appear in the "File name" text box near the bottom of the window. Click on the "Select" button when you find the file that you want to turn into a link. After you click "Select," you will see that the file name will appear in the Link text box in the Properties palette.

Making an Image a Link

In addition to turning text into links, images can also be used as links. Images that are links can be clicked just like regular links. Making an image into a link is no different than turning text into a link. Click on the image that you wish to make into a link (if you do not know how to insert images into your web page, please read the Images section). Go to the Properties palette. In the Link text box, type in or paste the URL that you want to link. Hit the Enter key to make the link live, or click elsewhere in Dreamweaver MX 2004. If you click back on the image, you will see the URL you just entered appear in the Link text box of the Properties palette. This means that you have now turned an image into a link.

This is where you run into problems. Every person and every computer has their web browser configured slightly differently. Maybe you've run across this problem yourself. Clicking on a link on one computer may bring up a box asking you if you want to "Open" or "Save" a file, but clicking it on another computer might just go right ahead and open it without asking for your choice. If you want someone to download a file, rather than simply clicking on it like a normal web page link, you're going to have to physically type out a message on your page reminding them to do so. To download a file that's been linked to, (in a web browser, not in Dreamweaver MX 2004) place the cursor over the link, and click the right mouse button. You then select either "Save As" or "Save Target As," depending on what web browser you may be using.
A "save" box will then pop up, asking you where you would like to download the file. Select the destination, and click "Save." The file will begin to download. Depending upon your computer's speed and your Internet connection speed (and the size of the file being downloaded), download times can be anything in the world (a small image will download much faster than a large video, for example).

Making Anchors

Let's say that you have one web page, but it's very long, and you don't want users to have to scroll through the entire page just to find something they're looking for. A great way to turn a lengthy web page into something navigable is by creating "anchors" for your page. Anchors are a type of link that allows you to link to a certain part within the same page. Creating anchors, however, takes a little more effort than making regular links. As an example, pretend you have a section on a web page called "Outside Resources," but that section is located at the very end of the page. Since you don't want users to have to scroll all the way to the bottom of the page to find that section, you'd want to make an anchor. First highlight the text that you want to turn into an anchor with your cursor. Now, go to the Properties palette is. You'll put the anchor link inside the Link text box of the Properties palette. First, type "#" in the text box; all anchored links must have a "#" sign in front of its name. This coding tells the web browser that the link is an anchor and is located on the same page you're working in. Then, type in the name of the anchor you want to make. You can make the anchor name anything you want, just make sure that it is appropriate to the work you are doing, so that the name makes sense, and it will be something that you can remember. Be sure not to include any symbols in the name, but do use underscores (_) when you want to put spacing between words.

Now it's time to learn how to do the second step in making anchored links. At this point, you have made the actual anchor link that will be clicked on by users. But, you don't have anything to link to on your page! In order to do this, you need to create what is called the "named anchor." This is the physical anchor itself. In your web page in Dreamweaver MX 2004, put your cursor where the beginning of the section where you want to put the anchor. Then, go to the menu bar and click on "Insert and then "Named Anchor" (or, you can simply use the keyboard to do the Named Anchored shortcut, Ctrl + Alt + A).
You can also insert an anchor by going to the Common panel and clicking on the Named Anchor icon.
A dialogue box will pop up asking you to put in the name of the anchor. Put in the same exact name that you put in for the anchor link. If you don't, then the anchored link will not work. The link from the previous step must has some place to link to. Now, you are creating that place, and it must have the same name as the link you have already created. Please note that for making the actual named anchor, you do not need to put the "#" at the beginning. You only need to do this for when you make the link to the anchor.
Click the "OK" button when you have entered the anchor name. When you do, a physical anchor will be inserted into your web page. See the image below to see how the anchor looks in Dreamweaver MX 2004. Please note that when the page loads in a web browser, this icon will not appear. It only appears as an icon in Dreamweaver MX 2004 so that you can recognize where you inserted an anchor on your page.
You can test to see if your anchors work by previewing your web page in a browser (press F12 on the keyboard). Click on the anchor link, and it should take you to the specified part of the page in which you inserted the anchor. If it does not work, check to make sure if the names of the link and the anchor match in Dreamweaver MX 2004.

Publishing

When you make web pages or a website in Dreamweaver MX 2004, it doesn't just automatically appear on the web. You need to publishor uploadyour files to the
web. While that might sound difficult, fortunately Dreamweaver MX 2004 comes with a built-in publishing feature that allows you to put your files on to the web with little effort. However, there are a few steps you need to learn in order to complete the process of publishing. This part of the tutorial will discuss issues related to putting your web pages on the web.

Managing Your Workspace

One of the downfalls of Dreamweaver MX 2004 is its confusing and non-intuitive Site Files window. When you first load Dreamweaver MX 2004, the Files panel, which you will need for uploading your web site files to the Internet, is grouped with the rest of the panels on the right side of the screen.
You may wish to move the Files panel (this will come in handy later when you want both a Remote and Local view). To do so, click the dotted area next to the Files triangle, and drag it out across the screen.

Creating a New Site

When uploading your web page files for the first time in Dreamweaver MX 2004, you
will be asked to define what is called a "New Site." Defining you Site means telling the program where you will be publishing your files on the web as well as where your files are located locally on your computer. You will only be asked to make a New Site once, but if you ever want to make additional web sites, you'll need to go and define a whole new site using this feature. To get to New Site, click "Site" on the menu bar, and select "Manage Sites."
The Magage Sites window will appear. To create a new site, click the New button, and choose Site from the menu.
Defining a New Site in Basic Mode
In the Site Definition window, make sure youre in the Basic mode. Youll be able to tell youre in the right place by noting the Basic tab at the top of the window. On the first screen, enter a name for your site, such as My Web Site or something that describes the main idea for your site. Then, click on the Next button.
The next screen will ask if you want to use a server technology; Dreamweaver MX 2004 wants to know if any database technology will be included in your site. Since you will most likely be making a simple site, click No and then click on the Next button to continue to the next step.
Now, youll be asked how you want to edit your site files, and how you want to upload them to the web. Your safest bet is to select the first option, which allows you to edit your site files that you have saved in a folder in your computer, and upload them later whenever you are ready. Youll also choose where your files are located. If you already have a directory with web site files, choose that one. Otherwise, just choose a temporary folder (you can create a new one if you need to).
Youll have to locate on your computer the folder where all of your site files are located. Next to Where on your computer do you want to store your files?, youll see a small folder icon. Click on this icon to browse your computer to find the desired folder. Click on the Next button when you are done. The next section is one of the most important. Here, you will define where you will be uploading your site files online, and how you will connect to it. Assume you are going to be uploading your site to your RCI space. Input the following information: Make sure that "How do you connect to your remote server" is set to FTP For What is the hostname or FTP address of your Web server?, enter in "ftp.rci.rutgers.edu". If you are uploading files to different web space, fill in the information as necessary
For What folder on the server do you want to store your files in?, type in "public_html" For What is your FTP Login:, type in your RCI account user name. Don't put your actual nameput your usernamewithout "@rci.rutgers.edu" Leave the Password text box blank if you are working on a public computer, such as in a computer lab. If you are on your own machine, feel free to save the password. Make sure that Secure FTP is checked. There are now certain restrictions on the types of connections that can be made to your web space; secure connections are now mandatory. Dreamweaver MX 2004 will allow you to always make these secure connections.

You'll notice the area become highlighted by a color, and it will have a small tab above it that names the editable regions with whatever name you gave it.

Saving Your Template

When you're done setting up your template, be sure to save like you would a normal page ("File" > "Save"). Dreamweaver MX 2004 may ask you if you want to update all documents that use the template. For now say, "No"; it doesn't matter, since we haven't made any documents from the template, yet.
Creating a New Page From a Template
The reason why Templates are so powerful is because you can create new blank pages with a template you designed already attached to them. You do this by creating a new page from a template. First, go to the menu bar and select File and then New. The New Document window will then appear. You should currently be in the General tab, but thats about to change. Since we want to make a special kind of new document, not just a blank page, click on the Templates tab.
Under the column Templates For: on the left side of the screen, choose the site from which you want to use a template. The templates associated with each site are listed in the middle column called Site name:. A small preview of the template will appear in the right column, Preview. Decide which template you want to use for creating a new blank page, and click on the Create button. A new page should appearone that looks similar to a normal new document. However, instead of it being completely blank, the layout from your template should appear on the page. You'll notice the entire page is outlined with a highlight-type color (probably yellow). Your editable region(s) also appear with an outline on the outside. This indicates that you can change its contents. However, if you place your cursor over a region that you have not defined as editable, your cursor should change into a circle with a line through it. This is Dreamweaver MX 2004 telling you
that you cannot change what's there, since it hasn't been defined as editable. Finally, you will notice that in the upper-right corner of the page, there is a small tab that tells you the template from which the page has been derived.