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

Dreamweaver workspace elements
The Start page (not pictured above) enables you to open a recent document or create a new document. From the Start page you can also learn more about Dreamweaver by taking a product tour or a tutorial. The Insert bar contains buttons for inserting various types of "objects," such as images, tables, and layers, into a document. Each object is a piece of HTML code that enables you to set various attributes as you insert it. For example, you can insert a table by clicking the Table button in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar. The Document toolbar contains buttons that provide options for different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser. The Standard toolbar (not displayed in the default workspace layout) contains buttons for common operations from the File and Edit menus: New, Open, Save, Save All, Cut, Copy, Paste, Undo, and Redo. To display the Standard toolbar, select View > Toolbars > Standard.
The Document window displays the current document as you create and edit it. The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. The Property inspector is not expanded by default in the Coder workspace layout. The tag selector in the status bar at the bottom of the Document window shows the hierarchy of tags surrounding the current selection. Click any tag in the hierarchy to select that tag and all its contents. Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group's name; to undock a panel group, drag the gripper at the left edge of the group's title bar. The Files panel enables you to manage your files and folders, whether they are part of a Dreamweaver site or on a remote server. The Files panel also enables you to access all the files on your local disk, much like Windows Explorer (Windows) or the Finder (Macintosh). Note: Dreamweaver provides many other panels, inspectors, and windows. To open Dreamweaver panels, inspectors, and windows, use the Window menu. If you can't find a panel, inspector, or window that's marked as open, select Window > Arrange Panels to neatly lay out all open panels.

Creating a Local Site

A local site (the local storage area for your Web site's files) requires a name and a local root folder where you plan to store all of the site's files. Create a different local site for each Web site you work on. The local root folder of your site should be a folder you set up specifically for that site. Don't use your disk as the site root, and don't use the Dreamweaver application folder. Under the Windows 95/98, 2000, ME, and XP operating systems, a good place to store your Web sites would be in the My Webs folder inside the My Documents folder. Inside My Webs, you can create local root folders, one for each site youre working on. To Create a Local Site: 1. Click Dreamweaver Site from the Create New column of the Start Page. The Site Definition dialog box appears. If the dialog box is showing the Advanced tab, click Basic. The Site Definition Wizard begins. 2. In the Site Name field, enter a name for the site. The site name you select will appear in the Site window and on the Site > Manage Sites submenu. The name can be anything you like (for example, My Web Site). Click Next to proceed. 3. The Wizard next asks if you will use a server technology. You would select Yes only if you are planning to use any dynamic document types, such as Active Server Pages or Java. If you are creating only a static site, select No, I do not want to use a server
technology, and click Next to proceed. 4. The next screen asks how you want to work with your files. Click to select Edit local copies on my machine, then upload to server when ready (recommended). In the text box where youre asked where you want to store your files on your local drive, you can enter the path to the folder where you want to store your Web site. Click the folder icon to browse to and select the folder, or enter a path and folder name in the text field. If the local root folder does not yet exist, create it from within the file browsing dialog box and give it a name (for example, My Website). Click Next to proceed. 5. The next screen asks how you will connect to your remote server. For the time being, click on the arrow to select None from the pop-up menu, then click Next. 6. The next screen will show you a summary of your settings. Click Done to close the Wizard. The Files panel now shows the new local root folder for your current site. There is also a menu to let you view all of your local disks and sites, and a menu to let you select the site location you are viewing (local, remote, or testing). When you begin creating or adding files to your site, they will appear in the Files panel under the local root folder. The Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files as you would on a computer desktop.

Creating and Editing HTML Documents
Now that you have a site set up, you can begin to create the documents (pages) that constitute the site. You can create new, blank HTML documents in Dreamweaver, or you can open an existing HTML document, regardless of how it was created. You can also create a new document based on a template. Note: Do not use special characters (such as , , or ) or punctuation (such as colons, slashes, or periods) in the names of files you intend to put on a remote server. Many servers change these characters during upload, which will cause any links to the files to break.
To Create a New blank HTML Document Click HTML from the Create New column of the Start Page. If you open the HTML Code inspector (click on one of the Code view buttons on the Document toolbar), you can see that the new document isn't really completely blankit contains HTML, HEAD, and BODY tags to get you started. As you type in the Document window or insert objects such as tables and images, you can leave the HTML Code inspector open and watch as the HTML source code is created. To open an existing HTML file Choose from the following options: Click Open from the Open a Recent Item column of the Start Page. Double-click on the file in the Files panel.

Setting Page Properties

Page titles, background images and colors, text and link colors, and margins are among some of the basic properties of HTML documents. Click on the Page Properties button in the Property inspector or select Modify > Page Properties from the menu to reveal the dialog box pictured below.
Appearance: Page font: sets the default font for the entire page Size: sets the default font size for the entire page Text color: sets the default color of the text for the entire page Background color: allows you to set a default page color Background image: allows you to set an image as the background for a page Left, Right, Top, and Bottom margin: specify the sizes of page margins in the body tag. For best cross-browser results, provide margin values for all four margin values instead of just two. To ensure that no margins appear, set all four values to 0. Links: Link font: sets the default font for text links that appear on the page. Link size: sets the default font size for text links that appear on the page. Link color: sets the default color for text links that appear on the page. Rollover link: sets the default color for text links that appear on the page when the mouse is positioned over them. Visited link: sets the default color for text links on the page that have been visited. Underline style: sets how text links will be (or not be) underlined on the page Headings: Heading font: sets the default font used for the various heading formats options available on the page. Heading 1 6: sets the size and color for each the six different heading options available on the page. Title/Encoding: Title: specifies the page title that appears in the title bar of the browser window. Encoding: specifies the encoding used for characters in the document. Choose Western (Latin 1) for English and Western European languages.

Adding Text

To add text to your document, simply type directly in the Document window. You can also copy text from another application, such as a word processor, and paste it into Dreamweaver. Dreamweaver does not preserve text formatting applied in the other application but it does, however, preserve line breaks.

Formatting Text

Formatting in Dreamweaver is similar to using a standard word processor. Use your mouse to select the text you want to change. If no text is selected, the change applies to subsequent text you type. To change the font, size, color, and alignment of selected text, use the Text menu or the Property inspector. NOTE: Formatting text in the Property inspector overrides formatting set in the Page Properties
To change the overall format of the text: Use the Format pop-up menu in the Property inspector or the Text > Paragraph Format submenu to set the default formatting style (Paragraph, Preformatted, Heading 1, Heading 2, and so on) for a block of text. To change font characteristics: Choose from the following options: To change the font, choose a font combination from the Property inspector or from the Text > Font submenu. o Browsers display the text using the first font in the combination that is installed in the user's system. If none of the fonts in the combination is installed, the browser displays the text as specified by the browser preferences. Choose Default to remove previously applied font faces; Default applies the default font for the selected text (either the browser default font or the font assigned to that tag in the CSS style sheet).
To change the font style, click Bold or Italic in the Property inspector, or choose a font style (Bold, Italic, Underline, and so on) from the Text > Style submenu. To change the font size, choose a size from the Property inspector.
To change the color of text: You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.) Choose from the following options: In the Property inspector, choose a color from the palette of browser-safe colors by clicking the color box. Choose Text > Color. The system Color Picker dialog box appears. Select a color and click OK.
To return text to the default color: In the Property inspector, click the color box to open the palette of browser-safe colors. Click the Erase button (white box with red slash through it).
*About Web-Safe Colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). The colors that are common to Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode are called Web-safe. The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a Web-safe color. Testing, however, reveals that there are only 212 Web-safe colors. Internet Explorer on Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0). All of the color pickers in Dreamweaver use the 212-color Web-safe palette; selecting a color from the palette displays the color's hexadecimal value. While the four colors mentioned previously are not in the Dreamweaver Web-safe palette, you can edit the hexadecimal value in any color field by hand if you want to use them. To choose a color outside the Web-safe range, click the Palette button in the lower right corner of the Dreamweaver color picker to open the system color picker. The system color picker is not limited to Web-safe colors.

To check spelling: Use the Text > Check Spelling command in the Text menu to check the spelling in the current document. The Check Spelling command ignores HTML tags and attribute values.

Working with Images

Dreamweaver, like most browsers, can display both JPEG and GIF images. Dreamweaver, Microsoft Internet Explorer 4.0 and later, and Netscape Navigator 4.04 and later also support PNG images. In general, JPEG is the superior format for photographic or continuous-tone images, and GIF is preferred for non-continuous tone images or those with large areas of flat colors. The PNG format is a patent-free replacement for GIF that includes support for indexed-color, grayscale, and true-color images. It also provides alpha channel support for transparency. PNG is the native file format of Macromedia Fireworks. Inserting an image: When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the file in the HTML. To ensure that this reference is correct, the image file must be inside the current site. If it is not, Dreamweaver asks whether you want to copy the file to a folder within the current site. To insert an image: Do one of the following: o Place the insertion point where you want the image to appear in the Document window, and then choose Insert > Image Click the Image button on the Insert bar. Drag the Image button from the Common tab of the Insert toolbar to the desired location in the Document window. Drag the icon of an image from the desktop or from the Files panel to the desired location in the Document window; then skip to step 3.
In the dialog box that appears, click Browse (Windows) or Choose (Macintosh) to choose a file, or type the path for the image file. o If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.
Set image properties in the Property inspector.
Image properties To view image properties in the Property inspector, select an image in the Document window.
The Property inspector initially displays the most commonly-used properties. Click the expander arrow in the lower right corner to see all properties. Name: lets you name an image so you can refer to it with a scripting language such as JavaScript or VBScript. W and H: the width and height of the image, in pixels. Dreamweaver automatically updates these fields with the images original dimensions when you insert an image in a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), and combinations, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code. If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H field labels.)

Note: You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.
Src: specifies the source file for the image. Click the folder icon to browse to the source file, or type the path. Link: specifies a hyperlink for the image. Drag the Point-to-File icon to a file in the Site window, click the folder icon to browse to a document on your site, or type the URL. Align: aligns an image and text on the same line. Alt: specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually-impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image. In some browsers, this text also appears when the pointer is over the image.
V Space and H Space: Adds space, in pixels, above, below, and on both sides of the image. Target: specifies the frame or window in which the linked page should load. (This option is not available when there is no link on the image.) The names of all the frames in the current document appear on the list. If the specified frame does not exist when the document is opened in a browser, the linked page loads into a new window that has the name you specified. Once this window exists, other files can be targeted to it. You can also choose from the following reserved target names: _blank loads the linked file into a new, unnamed browser window. _parent loads the linked file into the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window. _self loads the linked file into the same frame or window as the link. This target is implied, so you generally don't need to specify it. _top loads the linked file into the full browser window, thereby removing all frames. Low Src: specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they're waiting for, but you can use any image with the same dimensions as the main image. Border: sets the width, in pixels, of the link border around the image. Enter 0 for no border. Map Name Field: enables you to create client-side image maps. Reset Size: resets the W and H values to the original size of the image. Edit: launches the image editor you specified in External Editors preferences and opens the selected image. When you save your image file and return to Dreamweaver, Dreamweaver updates the Document window with the edited image Aligning elements: The following Align options appear in the Alignment drop-down menu in the Property inspector, and can be associated with certain elements, such as images and plug-ins. You can also use the alignment buttons (left, right, and center) to place selected elements. Default: generally specifies a baseline alignment, but this default may differ depending on the browser. Baseline and Bottom: aligns the text baseline to the bottom of the selected object.

If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when the border is set to 0, choose View > Table Borders. Use the Brdr color field to select a border color for the entire table. Use the Bg color options to select the background image or background color for the table Resizing tables and cells: You can resize the entire table or individual rows and columns. When you resize the entire table, all of the cells in the table change proportionally. To Resize the Table: Select the table. Drag one of the selection handles to resize the table along that dimension. Dragging the corner handle resizes both dimensions.
To change the size of a row or column: To change row height, drag the bottom row border. To change column width, drag the right column border.
Changing column widths The Property inspector lets you specify the width of a column in three ways. To set the column width: Click in any of the columns' cells or select the column. Choose Window > Properties to open the Property inspector. In the W field, do one of the following: o o Enter a number to set the column width to the specified number of pixels. Enter a number followed by the percent symbol (%) to set the column width to a percentage of the table width. Leave the field blank (the default) to let the browser and Dreamweaver determine the proper width based on the contents of the cell and the widths of the other columns. Generally, space is allocated based on the longest line or the widest image. This is why one column sometimes becomes much larger than the other columns in the table when you add content to it.
Clearing Column Widths and Row Heights The simplest way to set column widths and row heights is to drag the borders of the table. Dragging a column or row border automatically sets specific values for all of the columns or rows, either in pixels or as percentages of the table's current dimensions, depending on how
the table width is specified. If you can't get the desired result by dragging table borders, you can clear the column widths and start over. To change widths and heights: Select the table, choose Modify > Table, and choose Clear Cell Heights or Clear Cell Widths. Choose Window > HTML Styles and change the widths and heights directly in the HTML Source inspector. In the Property inspector, enter specific width and height values in the W and H boxes.
Nesting tables: A nested table is a table within a table. You can configure a nested table as you would any other table; however, its width is limited by the width of the cell in which it appears.

To nest a table within a table cell: Click in the cell where you want to insert the second table and choose Insert > Table. Specify the table properties in the Insert Table dialog box, and click OK.
Splitting and merging cells Use the Property inspector or the commands in the Modify > Table submenu to split or merge cells. You can merge any number of adjacent cellsas long as the entire selection is rectangularto produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adds any necessary COLSPAN or ROWSPAN attributes) to create the specified arrangement.
In the following illustration, the cells in the middle of the first two rows have been merged so that they span two rows.
To merge two or more cells in a table: Select the cells you want to merge. Choose Modify > Table > Merge Cells, or click the Merge Cell button in the Property inspector.
The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell. To split a merged cell: Click in the cell or select a cell. Choose Modify > Table > Split Cells, or click the Split Cell button in the Property inspector. In the Split Cell dialog box, choose whether to split the cell into rows or columns, and then enter the number of rows or columns.
Copying and pasting cells You can copy and paste multiple table cells at one time, preserving the cell's formatting, or you can copy and paste only the contents of the cell. Cells can be pasted at an insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted. To cut or copy cells in a table: Select one or more cells in the table. To be cut or copied, the selected cells must form a rectangle.
Select Edit > Cut or Edit > Copy
To paste table cells: Choose where to paste the cells. o o To paste cells before or above a particular cell, click in that cell. To create new table with the pasted cells, click wherever you want the table to appear (as long you don't click inside another table).
Choose Edit > Paste o If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced, as long as the Clipboard contents are compatible with the selected cell. If you are pasting outside a table, the rows, columns, or cells are used to define a new table.
To remove cell content but leave the cells intact: Select one or more cells. Choose Edit > Clear or press Delete.
Note: If you select all the cells in a row or column, the row or column, not just its contents, is removed from the table. To Copy and Paste the Contents of Cells: Select the text and choose Edit > Copy Text Only. Only the text from the selected cells is copied onto the Clipboard. Click in a single cell or elsewhere in the Document window, and choose Edit > Paste as Text.

You cannot paste the selection into a selection of multiple cells.
About Locations and paths
Understanding the file path between the document you're linking from and the document you're linking to is essential to creating links. Each Web page has a unique address, called a Uniform Resource Locator (URL). However, when you create a local link (a link from one document to another on the same site), you generally don't specify the entire URL of the document you're linking to; instead, you specify a relative path from the current document or from the site's root folder. Following are descriptions of the three types of document paths. Absolute paths Absolute paths provide the complete URL of the linked document, including the protocol to use (usually http:// for Web pages). For example, http://www.macromedia.com/support/dreamweaver/contents.html is an absolute path. You must use an absolute path to link to a document on another server. You can also use absolute-path links to link pages in a site located on your local computer (such as for a Web presentation). This approach is discouraged. However, as your links would break causing you files not to open if you transfer the files to another location or change the file structure within your site Document-Relative Paths Document-relative paths are the most appropriate paths to use for local links in most Web sites. They're particularly useful when the current document and the linked-to document are in the same folder and are likely to remain together. You can also use a document-relative path to link to a document in another folder, by specifying the path through the folder hierarchy from the current document to the linked document. When you specify a document-relative path, you leave out the part of the absolute URL that is the same for both the current document and the linked document, providing only the portion of the path that differs. To link to another file in the same folder as the current document, simply provide the file name to link to. To link to a file in a subfolder of the current document's folder, provide the name of the subfolder, then a forward slash, and then the file name to link to. To link to a file in the parent folder of the current document's folder, precede the file name with./ (where. means "up one level in the folder hierarchy"). Root-Relative Paths Root-relative paths provide the path from the site's root folder to a document. Note: If you understand the strengths and limitations of root-relative paths, they can be useful, but if you're not familiar with root-relative paths, document-relative paths are recommended. A root-relative path begins with a leading forward slash, which stands for the site root folder. For example, /support/tips.html is a root-relative path to a file (tips.html) in the support subfolder of the site's root folder. A root-relative path often provides the best way to specify links in a Web site in which you need

to frequently move HTML files from one folder to another. When you move a document that contains root-relative links, you don't need to change the links; for example, if your HTML files use root-relative links for dependent files (such as images), then if you move an HTML file, its dependent-file links are still valid. However, when you move or rename the documents linked to with root-relative links, you do need to update those links, even if the documents' paths relative to each other haven't changed. For example, if you move a folder, all root-relative links to files within that folder must be updated. (If you move or rename files using the Site panel, Dreamweaver helps you update all relevant links.)

Linking and Navigation

Once you've established a local site in which to store your Web site documents, and created HTML pages, you'll want to create connections from your documents to other documents or file types. Using Dreamweaver, there are several ways to set up hypertext links to documents, images, multimedia files, or downloadable programs. You can establish links to any text or image anywhere within a document, including text or images located in a heading, list, table, layer, or frame. With Dreamweaver you can easily create the following types of links from text and graphic images: Internal links, linking documents in the same Web site External links, linking to documents outside of a local Web site E-mail links that open an e-mail form Links to named anchors that allow the visitor to jump to a particular area on the same Web page or to one on a different page
The HTML tag for creating a hypertext link is called an anchor tag. Dreamweaver creates an anchor tag for objects, text, or images you create links from. For example, if in the Document window you selected the text Home Page, then created a link to a file named home.htm, the HTML source code for the link would look like this: <a href="home.htm">Home Page</a> Before creating links, be sure you understand how document-relative paths, root-relative paths, and absolute paths work. Linking to a document There are several ways in Dreamweaver to create links. To create links between documents Select the text or image in the Document window that will be linked and Do one of the following:
Click the folder icon to the right of the Link field to browse to and select a file. The path to the linked document appears in the URL field. Use the Relative To pop-up menu in the Select HTML File dialog box to select whether the path is document relative or root relative, then click Select. Note: When you change the path type in the Relative To field, Dreamweaver sets the selection as the default path type for any future links until you change the selection.

In the Link field, type the path and file name of the document To link to a document in your site, enter a document-relative or root-relative path. To link to a document outside your site, enter an absolute path including the type of protocol (such as http://).
Finally, select a location in which the document will open To make the linked document appear somewhere other than in the current window or frame, select an option from the Target pop-up menu on the Property inspector. _blank loads the linked document in a new, unnamed browser window. _parent loads the linked document in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, then the linked document will load into the full browser window. _self loads the linked document in the same frame or window as the link. This target is implied, so you usually don't have to specify it. _top loads the linked document in the full browser window, thereby removing all frames.
Linking to a named anchor Named anchors set position placemarkers in a document. Use named anchors to link to a particular area in the current document or in a different document. Named anchors are often used to jump to a specific topic or to the top of a document, quickly taking your visitor to the selected position. Creating a link to a named anchor is a two-step process. First, create a named anchor, and then create a link to the named anchor. Note: Names of anchors are case sensitive. To Create a Named Anchor: In the Document window, place the insertion point where you want the named anchor.
Choose Insert > Named Anchor (or click the Anchor button on the Common tab of the Insert toolbar). In the Anchor Name field of the Insert Named Anchor dialog box, type a name for the anchor.
If the anchor marker doesn't appear at the insertion point location, choose View > Visual Aids > Invisible Elements.
To Link to a Named Anchor: In the Document window, select text or an image to create a link from. In the Link field of the Property inspector, type a number sign (#) and the name of the anchor. For example: To link to an anchor named "top" on the current document, type #top To link to an anchor named top on a different document in the same folder type filename.html#top To link to an anchor named top on a document outside your site type the absolute path to the document and include the anchor. Creating an email link An e-mail link opens a new message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the To: field is automatically updated with the address specified in the e-mail link. To Create an E-Mail Link Using the Insert E-Mail Link Command: In the Document window, position the insertion point where you want the e-mail link to appear, or select the text you want to appear as the e-mail link. Choose Insert > Email Link, or, in the Common panel of the Insert toolbar, select Email Link o In the Text field of the Insert E-Mail Link dialog box, type or edit the text to appear in the document as an e-mail link.

In the E-Mail field, type the e-mail address mail should be addressed to. Press OK.
To Create an E-Mail Link Using the Property Inspector: Select text, an image or an image in the Document window. In the Link field of the Property inspector, type mailto: followed by an e-mail address.
Uploading Your Site to a Server
Dreamweaver helps you organize the files in your local and remote sites. It allows you to easily duplicate the structure of your local site on a remote server, or to duplicate a remote Web site's structure on your local system. The relative links that you create on your local site continue to work after you transfer files to the remote site, because the structure of the two sites is identical. You create a local site in Dreamweaver by creating a local root folder for the site (or by making an existing folder into the local root folder), using the New Site command. You then associate your local site with a remote server using the Define Sites command. When you transfer files between local and remote sites, Dreamweaver maintains parallel file and folder structures between your local and remote sites. If needed folders do not yet exist in the site that the files are being transferred to, Dreamweaver automatically creates those folders. You can also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions as necessary, and optionally removes unwanted files as appropriate. Associating a remote server with a local site After you've created a local site, use the Define Sites command to add or change associated remote server information. Choose Site > Manage Sites A dialog box appears listing currently defined sites; select an existing site and click Edit. (If you have no currently defined sites, click New). Click Next in the wizard until you reach the step that asks How do you connect to your remote server? Choose one of the following Server Access options: o Use None if you do not plan to upload your site to a server. Then click OK and skip the rest of this procedure. Use Local/Network if your Web server is mounted as a network drive (Windows) or as an AppleTalk or NFS server (Macintosh), or if you are running a Web server on your local machine. Click the folder icon to browse to and select the folder where your site files are stored on the server. If you want the Remote pane of the Site window to update automatically as files are added and deleted, select the Refresh Remote File List Automatically option; for increased speed when copying files to the remote site, leave this option unselected. (To manually refresh the Site window at any time, click the Site window's Refresh button.) Click OK and skip the rest of this procedure. Note: To manually refresh the Remote pane only, choose View > Refresh Remote in the Site window (Windows) or Site > Site Files View > Refresh Remote (Macintosh).

Use FTP if you connect to your Web server using FTP.
Since this is the way we upload files to our server on campus, the following instructions will cover FTP
Your FTP hostname is the full Internet name or IP address of a computer system. For example our server is 128.146.203.161 whereas my personal website is host109.ipowerweb.com. The folder is where you specify the files should go on the server. Since everyones situation is unique we will handle these on an individual basis.
Moving files to and from the remote server Once youve set up the remote server you are ready to move your files online. Dreamweaver uses the two terms that you must understanding when transferring files to and from the server. Put means copying the files from the local machine to the remote server. Get means copying the files from the remote server to the local machine. When you are ready to Put your files on the server, select the file or files you want to upload in the Files panel and click the blue up arrow (Put). When you upload files to the server you will be prompted by a message that asks about including dependent files. What Dreamweaver wants to know is if you would like to also upload images or other objects that appear on the page you are uploading and document linked to that file. As a rule, the only time you should click Yes is the first time you upload your site. When you need to Get a copy of a file to edit you much first change the Local View to Remote View using the pop-up menu on the right in the picture above. Then all you need to do is select the file or files you would like to download to your local machine an click the green down arrow (Get).

References

Lynch, P. J. and Horton, S. (1999). Web Style Guide: Basic Design for Creating Web Sites (2nd ed.). New Haven, CT: Yale University Press. http://info.med.yale.edu/caim/manual/ Ruffini, M. (2001, March). Blueprint to Develop a Great Website. T.H.E. Journal. http://www.thejournal.com/magazine/vault/A3389.cfm Williams, R. and Tollett, J. (2000). The Non-Designers Web Book (2nd ed.). Berkeley, CA: Peachpit Press. Niederst, J. (2000). Web Design in a Nutshell (2nd ed.). Sebastopol, CA: O'Reilly & Associates. Nielsen, J. (2000). Designing Web Usability. Indianapolis, IN: New Riders Publishing. Meyer, E. A. (2002). Eric Meyer on CSS: Mastering the Language of Web Design. Indianapolis, IN: New Riders Publishing. Holzschlag, M. E. (2003). Cascading Style Sheets: The Designer's Edge. Alameda, CA: Sybex.