Setting up a working, local copy of the dept. site in Dreamweaver MX

• For basic instructions on using Dreamweaver and setting up a site, see the Transcriptions "Getting Started with Dreamweaver" page
  
  
• Open the Site > New Site dialogue to set up your Dreamweaver site definition
  
  
  • Set up the "Local Info" part of the site as in the following image (where you set the local folder that will hold your hard-drive or zip-drive copy of the department site). You must previously have created your local folder, naming it whatever you want (e.g., "Alan's Working Copy of Dept. Site")
    
    
  • Set up the "Remote Info" part of the site as in the following image. The FTP information is as follows:
    
    FTP Host: www.english.ucsb.edu
    Host Directory: /dept-internet/
    Login: ENGL_MAIN/[your userid]
    Password: [your password]
    Save checkbox: [leave unchecked if you are working on a studio or office machine]
    
    
• Open the Site window. In its double-pane mode, the Site window shows the files in your local copy of a site on the right and the files in the remote site (that is, the real site on the server) on the left. (When you start, the local pane will be empty because you haven't put any files in it; and the remote pane will not yet be connected to the server)
  
  
  • "Connect" to the remote site (you'll need to supply your password). You'll presently see the directory structure of the department site as it exists on the server
    
    
  • Select the folder or folders of the dept. site that you want a working copy of on your local folder. Important: do not attempt to keep a copy of the entire dept. site on your local folder. (Keeping local copies only of what you need to work on reduces your need for local storage space and also minimizes the chance of damaging the whole site on the server through an unlucky upload. You can always download extra parts of the site as you need them.)
    
    
  • Click on the "get" or download arrow (it points down) to fetch the remote files to your local folder. You'll first see a dialogue that asks whether you wish also to download "dependent files." This means: do you want to download not only the files you have selected but also any images, templates, or Dreamweaver "library" objects that are needed by those files even if they are stored elsewhere on the dept. site? Since this is the first time you are doing this, say "yes." (In future, avoid getting dependent files when you download and especially when you upload. Experience shows that manual downloading/uploading prevents unintended errors--for example, uploading old copies of files over everything on the server).
    
    
  • You now have a local version of the dept. site.
    

Creating a New Dept. Page

• There are two ways to create a new page on the site and be sure that all the scripts, images, relative links, etc. are correct to begin with:
  
  
  • (A) Use the File > New menu to open the new file dialogue. Then click on the Templates tab to see a list of the page-templates that have been defined for the dept. site. (Each branch of the site, e.g., the faculty pages, has its own variant template). Click on "create" to create a new page from the template. Templates have "editable regions" where you can work; other areas of the page are off-limits.
    
    
  • (B) Copy an existing file:
    
    
    • While in Dreamweaver's Site Window, copy an existing file in its existing folder (e.g., "index.html" to "Copy of index.html"
    • Then in the Dreamweaver Site Window (important: not in Explorer) drag the copy to the folder where you want your new file to live. Dreamweaver will offer to update (change) all links, etc. in the file to reflect the new location. Say "yes."
    • Then while still in the Dreameweaver Site window, rename the file to the name that you want. Again, Dreamweaver will offer to update links around the site to reflect the name change of this file. Say "yes."
    • Finally, open the new file and revise its existing content for your purposes.

Design/Editing Tips & Tricks for the Dept. Site

• Thin-Border Tables:
  Much of the design on the department pages depends on the use of tables (and tables nested within tables) to place content on the page or to set off content in a visible box. In particular, the site makes frequent use of thin-border tables. The present content, for example, is in such a table.
  
  These thin-border tables are actually a table-within-table configured in such a way that there is a 1-pixel gap between the outer and inner tables (with the gap showing a particular color). The easiest way to create such a table is to copy the following empty table and size it as you wish (by sizing the percentage width of the outer table). If you wish, you can add the code for this table as a "snippet" to Dreamweaver MX's Assets panel (which would make adding such tables more convenient in the future).
  
  

  [Empty thin-bordered table constructed of an outer table set at 95% width with1-pixel cell-padding and a background color of #993300. The inner table is set at 100% width and a cell-padding of 8 pixels, though you can customize that to add more space between any content you add and the borders of the table]

  
  
  
  
• CSS Styles: Use styles for the titles, headings, and similar text. (See Cascading Style Sheets on the Dept. Site)

Cascading Style Sheets (CSS) on the Dept. Site

• If you open the CSS window in Dreamweaver, you can see the custom "styles" that are defined for the dept. site. These custom styles live in a file called "english.css" in the root of the dept. site. They modify the way that HTML elements are styled by default.
  
  
• Select text in your document, then click on a style in the style window to format your selection with that style. For example, the following text uses the .titleDark 14pt custom style.
  
  
• You can also use the CSS window to add styles to the individual document you are working on (which will take precedence over site-wide stules). Important: never save styles to the site-wide "english.css" file; always save to the individual document only or to a new .css file that you create.

Do's and Dont's for Working on Dept. Site

• Synch with files on the server: Always download the latest version of a file from the server before editing it. (Always check the dates of files on the server even if you don't think anyone else has been working on them.)
  
  
• Back up files before major revision: Always make a local backup copy of any file that you are about to make major changes to. This is especially important for .asp files with database code.
  
  
• Upload only the minimum files necessary:
  
  • If you only revised one file in a folder, just upload that one file. Do no upload the whole folder. This will minimize the number of possible mistakes.
    
  • If Dreamweaver offers to upload "dependent files" when you upload a file or folder, never say "yes." Always upload files manually. The worse that can happen if you upload files manually is that you will discover you are missing a file on the server and will need to upload it individually. By contrast, the worse scenario in the case of automatic uploading of files is considerably more catastrophic (e.g., overwriting many files on the site with old versions).
    
    
• Standardize filenames:
  • Filenames on the dept. site have a .html extension (not .htm). (Alternatively, they have a .asp extension).
  • Unless there is a reason otherwise, use all lower-case for file names
  • Do not use any spaces in filenames.
  • The home page within any folder or branch of the site should be named "index.html" or "index.asp"
    
    
• Follow a "cascade down" principle when deciding where to store images on the site:
  • Only images that are common to the whole site belong in top-level "gfx" directories ("gfx" = graphics effects, such as bullets, logos, icons, etc.) or top-level "images" directories ("images" = substantive images, such as photos of people)
  • Images used only at a lower level of the site (e.g., only on the faculty pages) should be stored in "gfx" or "images" directories at the appropriate lower level.
    
    
• Keep the site tidy: remove temporary files and redundant files on the site when you are done with them.
  
  
• Use "Design Notes" feature in Dreamweaver as appropriate to annotate pages (to remind yourself or other developers of tricky issues or to-do items)
  
  
• Use Alt Tags: Always identify an image on the site with an Alt tag (set in the Dreamweaver Properties bar). This is for the benefit of the visually handicapped and others who have trouble with images.
  
  
• Keep a sense of tone and audience: Write in a tone consistent with that of the Dept. site as a whole—one that is neither too entirely bureaucratic nor too in-your-face friendly. Because it is a web site, the Dept. site will be seen by diverse groups of people, including both our local community of students and faculty and strangers.
  
  
• Do not tamper with the following files without letting Alan know about it in advance:
  
  • Home page files in the root dept. directory (e.g., index.asp, graduate.asp, undergrad.asp, etc.)
  • Web-form or database-result pages (e.g., /faculty/directory.asp) These pages always have a .asp extension. (The reverse, however, is not true: not all pages with a .asp extension actually have code on them to work with the database)
  • Template or Library files: All pages on the site are associated with Dreamweaver "templates" for the page design, which can be revised in such a was as automatically to revised all pages using the template. In addition, many pages include a navigation bar or other items that are Dreamweaver "library objects," which also can be revised so as to update all affected pages automatically.