Managing Web Page Files and Creating New Files and Folders (Directories)

Which side of your screen the Panel groups are on depends on which workspace layout you chose the first time Dreamweaver was opened. In the Designer layout, the Panel groups will be on the right; in the Coder layout (for previous HomeSite or ColdFusion Studio users), the Panel groups will be on the left.

The Files panel can be expanded to see both the Local and Remote views by clicking the blue Expand/Collapse button on the right of the Files panel to switch between expanded (shown below) and collapsed (what appears when you've started Dreamweaver).

You can copy, paste, delete, and rename files from the Files panel.

There are different ways to create new folders and new files, but if you create them from the Files Panel, it is often easier to stay organized; it's easier to choose and remember their locations.

Right-click on the home directory of your site in the Files Panel and click New File to create a new page at the root level of your site.

Right-click the root folder and click New Folder to create a new folder that is one level down from your home directory.

Right-click on any folder in the site and right-click to create a new file (page) in that directory or to create a new folder one level down.

Double-click on a file to open it for editing.

After you have created or edited a web page, you can use the Put File(s) button (blue arrow pointing up) in the Files panel toolbar to upload the web page file to the server. Use the Get button (green arrow pointing down) to download a file from the server.

If Check in/Check out is enabled, the Check In will be available on the Files panel toolbar and will also upload the file.

Editing Web Pages

Clicking Edit, Preferences will allow you to change many things about the way Dreamweaver looks and behaves. If you are uploading your files to a Unix server (such as comp or cavern, not www3), there are a couple of preferences that you should set before you get started.

• Code Format, Line break type: Select LF (Unix) if you are using comp.uark.edu or cavern.uark.edu as they are Unix servers.
• Code Rewriting, URL encoding: Select the radio button for Do not encode special characters. Code Rewriting, Special characters: Encode <, >, &, and " in Attribute Values using & should be checked by default; leave checked.

See our ADA Accessibility pages for information on making your web pages accessible and ADA compliant.

• Insert Bar
  Use the buttons on the Insert bar to insert images, rollover images, tables, mailtos, dates, and more. The Insert bar will default to Common. Clicking this dropdown menu will allow you to change the buttons on the bar to those for inserting form elements, Flash elements, and much more.
  • Common
    • hyperlink
    • mailto (email link) - Allows you to create a link that when clicked will open the computer's default email program's compose function and place your email address in the To: field.
    • Named Anchor - Named anchors are like links, but do not go to another page when clicked; instead they scroll the page up or down to the anchor tag in the page's code. Create your anchors first by placing your cursor at each section and clicking the Named Anchor button; name the anchor (no spaces). Create links elsewhere on the page (such as a table of contents or a "Go to top of page" link) and link to the anchor by typing: #anchorname in the Link field (where "anchorname" is the name you gave the anchor).
    • Table - Click the Insert Table button and set the number of rows and columns, set the table width (use percentage instead of pixels for ADA compliance; leaving the width blank will create a table that conforms to whatever is put in it; 100% makes a table that will go from page margin to margin), border thickness (use 0 for an invisible layout table), cell padding (cell margins), and cell spacing (space between cells). If the table is a data table with header cells, designate the first row or column or both as the header cells and supply a caption for the table; a summary (which will not show on the page) is needed for all tables; if the table is a layout table, the summary should read, "layout table" or something similar (and short).
      (See Table Properties below for more information)
    • Image - After clicking the Insert Image button, you might be told that the image is outside the root folder and asked if you would like to copy the image into your site folder. Click Yes and select the appropriate directory under your root folder.
      (See Image Properties below for more information)
  • Layout
    • Layers and Frames can be found here.
  • Forms
    • Form elements such as text fields, checkboxes, and radio buttons can be found here.
  • HTML
    • Insert a Horizontal Rule from here.
• Properties Inspector
  The Properties Inspector has most properties that you would want to apply to your document. The Properties Inspector will change depending on what is selected in the document. You will want to keep the Properties Inspector open while editing pages.
  • Text properties - Click Text on the menu bar for more options
    Text Note: Enter inserts a <p> tag (like two hard returns, leaves a blank line); Shift/Enter inserts a <br> tag (like one hard return, cursor goes to the next line)
    • Format - Choose a heading style; use this for all headings on page, but not for other text; use in order (1-6)
    • Font - Choose a font face; remember that the font must be on computer that is viewing page; select Edit Font List to add more fonts
    • Size - Choose a font size; use relative sizes for ADA compliance (minuses and pluses)
    • Color - Choose a font color; hex code for color will show in field
    • Style - Allows you to choose styles to apply to page elements
    • Bold and Italics - Select text and select bold or italics; more text styles can be found by clicking Text, Style on the menu bar
    • Alignment - left, center, right, or full justification
    • Bullet (unordered) and Numbered (ordered) Lists - Create a bullet list or numbered list; clicking Enter after each bulleted or numbered item will create a new bullet or number; create one extra list item (which will disappear) and click the Unordered List or Ordered List button again to turn off the bullets or numbering.
    • List Item - Click the List Item button to change the number or the numbering or bullet style or to change to a different type of list.
    • Indent and Outdent - Use to create multiple levels in your bullet or numbered list
    • Link - Type or copy/paste an external link or click the Browse for File button to link to another of your own files
      Link Notes: Set Update Links to Prompt or Always in the General Preferences so that links will be automatically updated when a file is moved or renamed. To change a link throughout the entire site, in the Site window, click Site, Change Link Sitewide.
    • Target - Set a target for your link if needed, _blank, _parent, _self, or _top
    • Page Properties - Clicking the Page Properties button allows you to set the page background color and/or image (an image will override a background color), global text and link colors (font color tag will override), margins, and title; the title can also be typed into the Title field on the Document Toolbar (titles show up in the browser's title bar when your page is loaded and will be the name used when that page is bookmarked.)
  • Image Properties
    • Name - Images don't need names unless they are used as rollovers or something similar
    • Width and Height - Changing the width and height of an image using HTML is not recommended; the quality will be poor and the image is NOT actually resized; it only appears at another size on the page; use graphics software such as Photoshop to resize images; leave the actual width and height in the fields for nicer page loading.
    • Source - This field shows the path and filename of the image.
    • Link - Type or copy/paste an external URL or use the Browse for File button to make the image a link.
    • Alt - ALL IMAGES need alt (alternative) text; this text should describe the image well; the alt text for an image with text should duplicate the text in the image; the alt text for a spacer image should be a space; use a single character as the alt text for a graphical bullet.
    • V Space and H Space - Create vertical and/or horizontal space around the image using pixel sizes.
    • Image Map - Select an image and click either the rectangular, oval, or polygon hotspot tool and click/drag a shape onto the image. While the area (hotspot) is selected, the Properties Inspector has fields for a link URL and an alt tag for the area (each area as well as the image itself needs an alt tag).
  • Table and Table Cell Properties
    Table Notes: One way to select a table is to right click on the table and click Table, Select Table. Select a cell by clicking and dragging. The Properties Inspector is different when the whole table is selected than when a cell or multiple (even all) cells are selected.
    • Right-click into a table and click Table to insert or delete a row or column.
    • Click Modify, Table from the menu bar to make changes to table settings.
    • Table Properties
      • Rows and Columns - Change the number initially set; if data is in the deleted row or column, the data will be deleted.
      • Width and Height - Only use percentages for ADA compliance
      • Cell Padding and Spacing - Cell margins and space between cells
      • Align - left, center, or right justify the table on the page
      • Border - Set the table border width
      • Border Color and Background Color or Image - Select a color from the dropdown color palette or use the Browse for File button to select an image.
    • Table Cell Properties
      When a cell is selected, most of the properties will be text properties.
      • Cell Alignment - The Horz (horizontal) and Vert (vertical) dropdown menus can be used to align all the contents of a cell; the alignment buttons can also be used, which uses the <div> tag to align the contents, the difference being how they might be rendered in different browsers.
      • Cell Width and Height - Only use percentages for ADA compliance; to use a percentage with cells, you must type the percent sign, unlike the dropdown available for the entire table.
      • No wrap - Check the No wrap box to prevent the contents of the cell from wrapping.
      • Header - Check the Header box to indicate a cell is a header cell in a data table; layout tables should contain no header cells. Header cells must be indicated in data tables to comply with ADA standards.
      • Border Color and Background Color or Image - Select a color from the dropdown color palette or use the Browse for File button to select an image.
      • Split or Join Cells - Use to create extra cells or combine cells without changing the number of rows or columns. Select two or more cells and click the Merges Selected Cells Using Spans button to combine the cells into one. Click inside a cell and click the Splits Cells Into Rows or Columns button and then select the number of rows or columns.

Linking to a File

Highlight the text that will be the link. On the properties bar, click the yellow folder browse button and browse to the file on your hard drive or, for an external page, click in the link field and type (or copy/paste) the URL. Make sure to include "http://" on all external links. If you are linking to a new page that you have created, be sure to upload (publish) the new page. See our Accessible Links page for more information.

Setting up Dreamweaver to Publish to cavern.uark.edu or comp.uark.edu

You must first set up your site to be able to publish your pages. Your site is your current collection of web page files and images or your planned web pages.

1. Click Site, Manage Sites.
2. Click the New button, then Site.
3. Choose either the Basic or the Advanced tab (the instructions for the Advanced tab are listed below).

Local Info

• Site name can be anything; if you have more than one site, name them so you know which is which.
• Local root folder is a folder on your local hard drive where a copy of your site (your web page files, images, etc. in their directory structure) will reside. Click the browse button (little yellow folder to right of field) to create a new folder.
• HTTP address is the URL to your home page, the main page in your site that will link (perhaps indirectly) to all of your other pages. You might not have a home page at the time you set up Dreamweaver, but you can find out what your URL will be.
  On cavern: http://www.uark.edu/PreviousDirectory/userid/
  On comp: http://comp.uark.edu/~userid/
  where "userid" or "volumename" is the actual user ID (username) or volume name for your account.
  Note: If your file is named something other than index.html or index.htm (or default.htm, default.html, or default.asp on www3), you will have to include the filename at the end of the URL.

Remote Info

• Access: Select Secure FTP (SFTP).
• FTP Host: This is the name of the server on which you have your account; at the University of Arkansas, you are probably using one of the following:
  cavern.uark.edu
  comp.uark.edu
  
• Host Directory: If your home page (or possibly all your files) are in the home directory of your account, you will leave this field blank.
  • On the comp.uark.edu server, all web accessible files must be in the public_html directory (or a subdirectory of it) so your host directory on a comp.uark.edu account would be:
    public_html
  • On the cavern.uark.edu (www.uark.edu) server, the home page of an account is typically placed in the home directory, so the Host Directory field would be left blank in this case.
• Login and Password: This is your login username and password for the account.
  • On comp.uark.edu, you will use your UARK username and password.
  • On cavern.uark.edu, you will use the username that you were given for the account. If it is an existing departmental account, you might have to get the username and password from your supervisor.

File check in and check out

Use this if more than one person will be editing files, or if files will be edited from more than one location. If someone has a file checked out for editing, anyone else who accesses the same account will see that the file is checked out (there will be a red checkmark by the filename) and being edited by someone else.

• Check out name: this name will be used to identify the person or the computer that currently has a file checked out.
• Email address: the email address is included in case you need to contact someone about the file they have checked out for editing.

After you have completed the setup for the site and clicked OK in the Site Definition window, your site name and the Local view of your site will show in the Files panel. Only the root folder will show since the site has not yet been set up on your hard drive.

Click the Connects to remote host button on the Panel Groups toolbar to make sure the information was all entered correctly during setup. If you receive an FTP error, click Site, Manage Sites from the menu bar. Select the site name and click the Edit button. Check the information that you entered for typos and misspellings.

If you already have a web site on the server, you can now synchronize the sites.

1. Right-click in the Files Panel and click Synchronize.
2. Select Entire 'sitename' Site from the Synchronize: dropdown.
3. From the Direction: dropdown, select Get newer files from remote.
4. Click the Preview button to view the list of files and the action intended for each, Get in this case.
5. Click OK to begin sychronization. When this is finished, your site is ready for you to open your files for editing from both the Local and Remote views in the Files Panel.

If you do not already have a web site on the account that you have set up, you can begin creating the site in either the Local or Remote view in the Files Panel. When you create a new Web page, you can either Put the file to the server using the Put File(s) button (or from the page toolbar's File management button), or you can create several files and use Synchronize to Put them all at once. You can also select multiple files (Ctrl/click or Shift/click for contiguous) and Put.

If you create a file in the Remote view, the file exists on the server and also on your hard drive. When you open and edit the file, the changes that you save (File, Save) are only saved onto your hard drive. You must Put (upload) the file to the server before the page is on the web and viewable through a Web browser.

Forms

These instructions will assume that you have turned on accessibility features for forms in Dreamweaver by clicking Edit, Preferences, and in the Accessibility category, checking Form objects. Without the accessibility features enabled, you will not be able to add some attributes without editing the code after they are inserted.

You can insert forms and form objects using the Form menu item or by opening the form toolbar by clicking the toolbar dropdown menu (defaulted at Common) and choosing Forms.

First insert the form itself by clicking Insert, Form, Form or click the Form button. Dreamweaver will place a dotted red line box on the page (which will not show on the live page) along with the FORM tag and its attributes in the code. Make sure your cursor is within the red dotted line box when adding form elements. When the form is first inserted, the Properties palette will show the Action field (in the code, the action attribute quotes will be empty). Your form must have an action, a script or program that can be called from the form. Otherwise your data cannot go anywhere or be used after it is submitted. University Information Technology Services offers Ricochet as an option; Ricochet will email the form data to an address. To access the form attributes in the Properties palette later, select the form by clicking on the red dotted line box.

Click Insert, Form, and choose a form object to insert (or use the Form toolbar). The Input Tag Accessibility Attributes dialog box will let you supply a label for the field which will appear on the page as the label text for the field.
Note: Dreamweaver will ask for a label for Image Field and Button, but these objects do not need a label.
You can insert the following form objects in Dreamweaver:

• Text fields accept any type of alphanumeric text entry. Choose single line (TEXT INPUT), multiple lines (TEXTAREA), or a password field. Text typed into a password field will show alternate characters so that the text cannot be read.
• Hidden fields store needed form information that shouldn't be visible on the page. Note: Hidden fields are not secure; don't use them to pass sensitive information.
• Buttons typically submit or reset the form; buttons do not need a LABEL.
• Checkboxes allow multiple selection of items.
• Radio buttons allow selection of only one item in a group; typically you should select the Radio Group menu item or button so that the items can be properly grouped together (the NAME attribute will be the same for each item in the group).
• List/Menus display options in a scrolling list that allows the user to select multiple options. The Menu option will display the options in a menu that will allow the user to select only one item. After inserting this object, you will need to click on and select the field to add its attributes. After selected, the Properties palette will allow you to choose whether it the type is Menu or List. Click the List Values button to add the labels and values to the field (tab between fields and use Tab to add new fields or use the plus (+) button; use the arrows to arrange the entries). After the list labels and values are entered, you can select one from the Initially Selected field on the Properties palette to be initially selected in the list.
• File fields allow users to browse to and upload a file from their computer.
• Image fields are usually used as Submit and Reset buttons - these do not need a label, but do need an alt tag.
• The Dreamweaver JavaScript Jump menu is not ADA accessible and should not be used.

Use the FIELDSET element to group related controls and labels. Grouping controls makes it easier for users to understand their purpose while also helping with tabbing navigation. Using this element makes the form more accessible. The LEGEND element assigns a caption to a FIELDSET to improve accessibility. Click Insert, Form, Fieldset to insert a fieldset. With the accessibility features on, Dreamweaver will prompt you for the fieldset legend (called Label on the dialog box), and will then open the Split view and place the cursor into the code. You must use the code somewhat as you are working with fieldsets, and it can be difficult to get out of a fieldset, and it is easy to accidentally nest fieldsets.

Some or all of the form fields might be required. To validate the form and confirm that all required text fields have been completed, select the Submit button and then click Window, Behaviors. The Behaviors pane will open on the right. Click the plus (+) dropdown button and click Validate Form. Select the fields that are required and/or what can be accepted (number, email address).

Creating an Accessible Web Form

Dreamweaver can do most everything you will need to make your form accessible. Dreamweaver 4 does not have the capability to include all the neccessary elements to create an accessible form; although, you can add all the required tags (form labels, fieldgroups, and labels) using the code view.

Turn on accessibility features for forms in Dreamweaver by clicking Edit, Preferences. In the Accessibility category, check Form objects. After this has been done, Dreamweaver will prompt you for accessibility options when inserting form objects.

Click Insert, Form, and choose a form object to insert (or use the Form toolbar). The Input Tag Accessibility Attributes dialog box will let you name the label for the form object as well as choose which method of association to use for the LABEL tag. You can also choose whether to place the label before the form object or after the form object. If the form is already created, highlight the form object and its adjacent label before clicking Insert, Form, Label. Dreamweaver will associate the label and the form object by inserting the correct tag. You can add labels to other places on the page, but you must associate the label with a form item in Dreamweaver's Code screen. You can also choose an Access Key and/or a Tab Index number for the form object.
NOTE: Dreamweaver incorrectly provides the label dialog box when you insert button and image input elements into your web page. Neither of these form elements should have labels. A screen reader will read the value attribute of the button input element and will read the alt attribute of the image input element which can be provided using the Properties panel.

You should use the FIELDSET element to group controls and labels. Grouping controls makes it easier for users to understand their purpose while also helping tabbing navigation, making the page more accessible. The LEGEND element allows you to assign a caption to a FIELDSET. Click Insert, Form, Fieldset to insert a fieldset. With the accessibility features on, Dreamweaver will prompt you for the fieldset legend (called Label on the dialog box), and will then open the Split view and place the cursor into the code. You must use the code somewhat as you are working with fieldsets as it can be difficult to get out of a fieldset, and it is easy to accidentally nest fieldsets.

Dreamweaver's Accessibility Features for Building Compliant Web Pages

To enable the accessibility features, click Edit, Preferences, and in the Accessibility category, check the boxes for Form objects, Frames, Media, and Images. Dreamweaver will then display a prompt for accessibility options when any of these items are inserted onto the page.

With the accessibility options enabled in the preferences, Dreamweaver now prompts the user for alternative text when an image is inserted into a document. Alternative text (ALT text or an ALT tag) should be available for all images on a web page. Alternative text can be added to the image later or modified by using the Properties panel. LONGDESC (a long description of an image that needs more than just an ALT tag) cannot be added to the image using the Properties panel. To add LONGDESC to an image, either complete the Long description area of the accessibility options upon insertion of the image (re-insert the image if necessary) or add the longdesc attribute to the image in code view.

For more information regarding accessible images, see our Accessible Images page.

With the accessibility options enabled in the preferences, Dreamweaver will prompt for appropriate labeling information when form elements are added to your web page. A screen reader will read the value attribute of the button input element and will read the ALT attribute of the image input element; both of which can be provided using the Properties panel. Click Insert, Form, Fieldset to insert a FIELDSET and LEGEND (visible name for the group) in the form.
Note: The Label dialog box is provided when you insert Button or Image input elements into your web page, but neither of these form elements should be given labels.

Dreamweaver can designate table headers and assign a scope to row and/or column headers. If the table already exists, you can identify table headers by selecting a table cell, row, or column and checking the Header option on the Properties panel. When a new table is inserted with the accessibility options enabled in the preferences, a dialog box will allow you to choose whether the table has no headers, row or column headers, or both. When using the Table accessibility dialog box to select headers, Dreamweaver will also insert the appropriate scope attribute to those headers (scope=col or scope=row).

Note: Tables which are not data tables should not have table headers (TH) and should not use SCOPE.

Note: If you indicate that your table has both row and column headers by selecting Both under Header, then Dreamweaver will designate the top-left cell as a column header. In some instances, this cell may actually be a row header or not a header at all. Be sure to either remove or change the scope attribute for this cell in code view to appropriately match the layout of your data table.

The only way to add the scope attribute to tables that already exist in your document is to add them manually in code view. For complex tables which have headers that span rows or columns and for which scope is not sufficient, you must add headers and id attributes to the table in code view. The visual interface does not support the addition of HEADER and ID.

The table accessibility dialog box also allows the addition of Caption and Summary, both of which provide additional information about the contents of the table. In most cases, these should both be provided.

If the accessibility option for Frames is set within the preferences, Dreamweaver will prompt you for frame titles when a new frameset document is created.

The Title option should be a brief description of the frame contents or functionality. This information will be read by a screen reader to identify the frame. The Frame Tag Accessibility Attributes dialog will only be displayed if you create a new frameset document (File, New, Framesets) and will not display if you modify an existing document into a framed page (Modify, Frameset, Split Frame).

You can also modify noframes content for the frameset document by selecting Modify, Frameset, Edit NoFrames Content.

Dreamweaver can also validate against common accessibility standards and give feedback regarding the accessibility of Web content. The reports can be accessed by selecting Site, Reports.

Dreamweaver has an Accessibility Reference.

Uploading (Publishing) a Non-HTML File

When you set up your site in Dreamweaver, you created and selected the local root folder (directory) on your hard drive. A duplicate of your web site is stored in this local folder and its subdirectories. You can copy (or save) a file into the appropriate folder of your site on your hard drive, and then click on the file in the Files panel and use the Put (up arrow) button (or Ctrl/Shift/u) to upload the file to your site.

If you are not sure where the local root folder is, click Site, Manage Sites, and view (Edit button) your site's settings. The Local root folder field will display the path to the folder on your hard drive.

Once the file is in the local root folder (or a subdirectory of this folder), you can also use the Browse for File button to link to the file from another page.

Rollover Buttons

You will need two images for each button, the one that shows initially and the one that shows when the mouse is rolled over the button.

1. Click Insert, Image Objects, Rollover Image or click the Image button dropdown on the Common palette and select Rollover Image.
2. Name the rollover image.
3. Click the Browse button to select the Original image, the one that is shown initially.
4. Click the Browse button to select the Rollover image, the one that shows when the mouse is rolled over the original image.
5. Type Alternate text for the image.
6. Type (or browse to) a URL in the bottom field to create a link from the image.

Flash Buttons are not recommended for official University sites because Alternate Text (required on all images for ADA compliance) cannot be added.

Multiple Rollovers

A multiple rollover will change one image when another is rolled over by the mouse.

1. Place the first initial image on the page and name the image; this image when rolled over by the mouse will cause the second image to change.
2. Place the second initial image on the page and name the image; this is the image that will be changed by the rollover.
3. Select the first image and open the Behaviors panel (Window, Behaviors).
4. Click the + button on the Behaviors panel.
5. Click Swap Image on the drop-down menu.
6. With the first initial image selected in the Image list, browse for the file to swap with the first image (Set Source to).
7. Do NOT click OK.
8. Select the second initial image's name in the list.
9. Browse for the file to swap with the second image.

Creating a Command From the History List

1. Open the History palette (Window, History).
2. Create actions: type text, insert objects, etc.
3. Select the actions to save as a command (shift/click (contiguous), ctrl/click (individual) to select multiple).
4. Click the Save Selected Steps as a Command button on the history palette and name the command.
5. The new command will be on the Commands menu.
6. Click Commands, Edit Command List to delete the command.

Keyboard Shortcuts

The Adobe Dreamweaver keyboard shortcuts document can be found at the Adobe Dreamweaver Support Center. The files are compressed files for Windows and for Macintosh.