Process Notes

Naming Files

Name files with discriptive names: cm-01-dedication.jpg NOT imag-01.jpg

Use only lower case letters: cm-01-dedication.jpg NOT CM-01-Dedication.jpg

When numbering a series of files use the appropriate number of leading zeros and set the number off with a hyphen/dash: cm-01.jpg to cm-99.jpg OR cm-001.jpg to cm-999.jpg. This will produce the expected listing order of files by the computer.

Start all file names with at least one letter: cm-01-dedication.jpg NOT 01-cm-dedication.jpg. This guideline may be ignored for large groups of images stored within a descriptively named folder that will be referenced by a script : 001.jpg, 002.jpg, etc.

Use dashes to separate elements: cm-01-dedication.jpg NOT cm_01_dedication.jpg

Do not use . /$?[>}< * @ or spaces in names: cm-01-dedication.jpg NOT 1.cm 01/dedication$.jpg

Opening An HTML Page

• Open Bubba: This is required for Dreamweaver to find the local files.
• Open Dreamweaver
• If the arrangement of the working environment ever gets changed, Go to Window > Workspace Layout > and choose CAED to return it to the standard layout.

At this point you will see the local site displayed on the right side of your screen. It should appear as a list of folders and files.

• Click on the triangle to the left of the folder to open the folder containing the page you wish to update.
• Double Click on the HTML page you want to update.
• A dialog box will appear asking if you want to overwrite the local copy. Click YES.
• The file will open on the left side of the screen and your name should appear as having the file checked out in the Files window to the right. Do not check out a file that is already checked out by someone else.

You can open multiple HTML pages at one time. Each will appear as a tab on the top left side of the screen. Click on the appropriate tab to change to the desired HTML page.

Each HTML page will normally appear in Split mode which means that the HTML Code will appear in the top portion and the page will appear in Design mode in the bottom portion. How the page is displayed can be changed at the top of the window (Code, Split, Design).

Generally you will work in the lower (Design) portion of the window while watching the upper portion.

General Text Editing

The lower (Design) portion of the window will usually show you the page as it will appear on the web. There are a few qualities that will not be displayed correctly and it will show some additional elements like area boundaries (dotted lines) and symbols (the yellow element at the top of the main text area) that will not appear on the web page.

You can generally work in the Design window within a content area just as you would in any word processor. In working in these areas, you may make some mistakes but you cannot mess up the overall page.

Click anywhere in the design window to make it active, scroll to the top of the page and double click in a word in the first line or paragraph of the main content area. The word will be highlighted and the Code (upper portion of the window) will move to show the highlighted word within the code window.

If something happens that causes a problem or is not expected, use Edit > Undo (Apple/Command Z) to back up to before the undesired change. You can choose Undo as many times as needed.

Assigning CSS Styles

Scroll to the area of the file you want to update.

Place your cursor where you want to begin the editing, click return to start a new paragraph and enter text as you would in most word processors.

Note: Use a soft return (Shift + Return) to start a new line without starting a new paragraph.

Depending on where you placed your cursor, the new paragraph will be assigned some CSS Style. To change the style, use the following pallets.

The top screen capture shows the pallets on their base view. The bottom screen capture shows the pallets with the Text tab chosen. Using these two views you can change or assign most CSS Styles.

• Place your cursor in the desired paragraph.
• From the Format drop down menu choose the appropriate Tag (paragraph, heading level, none)
• From the Style drop down menu choose the appropriate Class/Style.

Watch what happens in the code section of the screen as you make changes to learn how HTML is written and see if what is happening follows existing HTML patterns.

If something happens that causes a problem or is not expected, use Edit > Undo (Apple/Command Z) to back up to before the undesired change. You can choose Undo as many times as needed.

Which Format & Style

One of the easiest ways to find out what Format and Style you should choose is to place your cursor in a paragraph within the design window that has the desired format. The Format and Style for that paragraph will be displayed in the pallet at the bottom of the screen.

Make note of the two settings.

Scroll to the new text and click within the paragraph you want to format. Choose the corresponding Format and Style form the drop down menus to assign the desired specifications. For example:

Sample h3 Format

Will produce code that looks like this:
<h3>Sample h3 Format</h3>
<h3> means begin/open the h3 element
</h3> means end/close the h3 element

Adding A Photo

Images will come to you in a variety if formats (JPEG, TIFF, PSD, etc.). The most common format will likely be JPEG. The following provides the basic process for preparing JPEG images for a web site.

• Copy or save the image to the appropriate folder within the "working-files" folder for your web site. For example, if it is an alumni image, save it within the alumni folder. Consider creating additional folders within existing folders for projects or groups of images to help in finding them in the future.
• Edit its name and identify it as the base file—the one that will not be changed (e.g.: name-base.jpg). Keep the name short, descriptive, lower case, beginning with a letter and without spaces or special charters. Refer to the file naming conventions to rename the file. This is the file that you can always return to if needed.
• Open the image in Photoshop and choose File > Save As. Remove "base" from the file name, set the Format to Photoshop (e.g.: name.psd) and click Save. This is the file that you will edit. This is important because you do not want to edit an image in the JPEG format because it will cause a loss of image quality every time that you make a change and save it.
• Adjust the Photoshop file as desired for levels, contrast and color (Image > Adjustments > Auto Levels). Does it improve the mage? Save if yes and choose undo if not. Try the other Auto adjustments if desired and evaluate after each. Often Auto Levels is enough.
• Determine the controlling dimensions for the image based on the page layout. Refer to the CAED CP Web Layout PDF.
• Crop the image by choosing the Crop tool and setting the controlling dimension in the Crop dialog box at the top of the window. The width will usually control so enter the desired width in pixels (e.g., Width 180 px). Leave the height blank unless its dimension is also to be controlled.
• Click and Drag with the Crop tool to define what you want to keep. Press Return when the desired crop area is shown. The image will be cropped to the exact pixel dimensions need for the web site.
• Choose File > Save for Web & Devices... The window should be setup to show you 2-Up at 100% with the Preset at JPEG High. Compare the images to make sure that the quality is appropriate. Adjust the quality of the JPEG if desired although the High setting will usually work.
• Click Save and make sure that the file is being saved into the same folder as the original file.
• Close the image and Photoshop if desired.
• Navigate to the new JPG file and copy the file.
• Navigate to the appropriate Image folder within the Dept-Local-Web folder and paste the file within the folder.
• Open or go to Dreamweaver and navigate to the appropriate image folder. The new file should appear. Select the file and Check It In. Note: if you are working on a Mac, right click on the file icon and choose Unlock from the pop out menu. This should remove the lock from the file.
• Open the HTML page in which you want to place the image. Navigate to where you want the image placed. Click to place the cursor at the end of the preceding element and hit return.
• Choose None from the Format drop down menu to remove the existing style. Photos are treated as independent elements.
• Click on the Insert Image icon in the Favorites panel.
• Navigate to the appropriate images folder and select the image. Double click on the image or click on Choose.
• Enter Alt text in the dialog box and then click OK. The image should appear in the page.
• If the image is to be floated to allow text to flow around it, click on the image to highlight it. The contextual pallets at the bottom of the window will change to show image information.

• Choose "floatleft" from the Class drop down menu in the lower right of the pallet. The text will flow around the image to the right.

Assigning Class and a Link to a Photo

• Click on the Photo in the Design view. A dark line will appear around it.
• The pallet at the bottom of the window will change to contain Image options.

• Choose the desired Class from the drop down menu to the right.
• Link the image as desired using the Link dialog box. Click on the folder icon to the right of the Link box to browse to find and identify the link file.
• Edit the Alt text in the Alt box as desired.

Completing The Process

Once all changes have been made do the following.

• Save the page. This should be done after every incremental change.
• With your cursor placed somewhere within the Design or Code areas, choose Text > Check Spelling from the Menu Bar at the top of the screen.
• Choose Validate Markup (green triangle & Brackets) > Validate Current Document from the Dreamweaver Toolbar. Any errors will be listed along with the code line in which they occur. Fix the problem and recheck until correct.
• Choose Preview (green sphere) > Preview in Firefox from the Dreamweaver Toolbar to see how it will look in the browser.
• Save the page.
• Close the page.
• Check the page in by clicking on Check In (Arrow with lock) in the Dreamweaver Toolbar. Your name should be removed as having the page checked out.
• Open a browser and go to the page and check that it looks and works correctly.
• Quit Dreamweaver.