THE DOCUMENTATION ON THESE PAGES IS INTENDED FOR USE BY OVIATT LIBRARY FACULTY. NON-LIBRARY CSUN FACULTY SHOULD CONTACT CSUN IT FOR HELP SETTING UP WEB SITES ON THE CAMPUS SERVER

Dreamweaver Orientation Part 2: Views and Tools

Viewing options

• Code View to edit HTML directly
• Design View for "WYSIWYG" interface
• Split View for both

Panels

Display of panels is controlled via the Window menu in the top toolbar

1. Insert –inserts HTML markup using mouse and dialog boxes. Most helpful tabs are:
   • Common: links, anchors, tables, rules, and images
   • Characters: non-breaking space, entities.
   • Head: meta tags such as keywords and description
   
2. Properties – allows you to apply attributes to selected text or elements using your mouse. The choices displayed change depending on the location of your cursor.
   1. Text properties (appear when cursor is in a text area of page):
      1. Format: Paragraph, H1, H2, etc. Preformatted – select text in document, then apply.
      2. Link – select text in document, then type or paste in link. You can also browse the little folder to select your link, or drag the little target to a file in your Site panel.
      3. Font face, size and color – AVOID these (they insert FONT tags)
      4. Bold and Italics buttons
      5. Create lists buttons.
      6. Indent and Outdent buttons – use only on lists, or Dreamweaver will insert the <BLOCKQUOTE> tag (which should be used only with true block quotes).
      
   2. Image properties (appear when an image is selected):
      1. W and H -- represents the display size of image, in pixels; should match the real dimensions of the image.
      2. Src -- indicates the location of image, relative to your page
      3. Link -- to link an image, type or paste in link address. You can also browse the little folder to select your link, or drag the little target to a file in your Site panel.
      4. Alt-- indicates alt text; if it's blank, type in relevant alt information about the image.
      5. V space and H space: creates space around the image so it isn't smashed up against text or other elements
      6. Border -- width of border in pixels
      7. Align -- positions image on page relative to insertion point (e.g. if an image is inserted at the beginning of a paragraph, setting Align to right would push it over to the right side of the page). (Warning: this attribute is deprecated.)

      

   3. Table properties (appear when an entire table is selected)
   1. Rows and Cols -- reflects basic structure of table. You can increase or decrease rows and columns by typing them here (best to do it, however, before you've inserted content in the table).
   2. W and H -- must be set in % rather than pixels.
   3. CellPad -- setting, in pixels, places distance between contents of table cells and table cell borders throughout table
   4. CellSpace -- setting, in pixels, increases distance between table cells throughout table.
   5. Align: Positions table on left, right, or center of page. (Warning: this attribute is deprecated.)
   6. Border -- width of visible border in pixels. "0" or no setting creates an invisible table.
   7. Bg -- sets background color for table. (Warning: this attribute is deprecated.)
   8. Brdr -- sets border color for table. Do not use -- will not pass W3C validation.
   1. Table cell properties (appear beneath text properties when cursor is in a table cell, or when one or more cells are selected)
      1. Merge and Split buttons
      1. To merge cells, select two or more cells and click the left button.
      2. To split a cell, place cursor in cell and click the right button. Dialog will allow you to split it horizontally or vertically.
      2. Horz and Vert -- sets alignment of contents of cell (Warning: this attribute is deprecated.)
      3. W and H -- must be set in % rather than pixels.
      4. No wrap -- prevents contents of cell from wrapping. Avoid using this, as it is deprecated and user-unfriendly.
      5. Header -- to designate a row or column as a header (for a data table), select the row or column and check this box
      6. Bg -- sets background color or image for individual cell. (Warning: this attribute is deprecated.)
      7. Brdr -- sets border color for individual cell. Do not use -- will not pass W3C validation.
   2. Rule properties (appear when a horizontal rule is selected)

      Includes options for setting rule width, height, and alignment.

3. Tag Selector: This line of tags appearing above the properties panel in most views (see image above), indicates where you are in the hierarchy of elements in your document. If you select one of the tags with your mouse, you can apply formatting or to the element, and all the content within it. For example, if you select an <li> or a <p> then click the I button, all the text in that list item or paragraph will be italicized. You can also remove a tag by right-clicking it and selecting "Remove Tag." To apply a style to an element, select it, right click and select Set class > [choose your style].
4. Site (in the Files panel group)
   You can copy, delete, duplicate, or rename and file or folder in the file list of this panel right-clicking on it and selecting the appropriate menu option. You can move files from one folder to another using the drag-and-drop method.
   1. Name of the site you are working on (you can set up multiple sites)
   2. Local View - indicates that you are looking at the files in the H:\Website folder. Select Remote View to view files you have uploaded to the server.
   3. Connection status button - you can click this button to connect via FTP
   4. Refresh button
   5. Upload and Download buttons - select page in file list and upload or download to/from the server. IMPORTANT!! The first time you upload to or download from your site Dreamweaver will ask you "Included Dependent Files?" Select No, and check the "Do not ask me again" box.
   6. Expand/Collapse - click this button for a more detailed file listing. Useful for comparing the relative age of files on H:\Website and the web server.
   
   
5. Assets (in the Files panel group)

   "Assets" are what Dreamweaver calls everything in your web site that is not, strictly speaking, an HTML web page. When you click on the Assets panel, you will see a row of icons on the left. The most useful ones for our purposes will be:

   • Images -- Shows all the images used in your site. Click Insert to insert it into your page.
   • Code Library -- Lets you store little snippets of code you use frequently for one-step insertion into new pages.

   See Managing Assets for information on how to populate this panel

This page created by Elizabeth Altman, Library Web Developer. Please send questions or comments to ealtman@csun.edu