Book a tour!
Office: (805) 756-1314
Office: (805) 756-1316
Office: (805) 756-1315
Office: (805) 756-1323
Office: (805) 756-1319
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
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.
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.
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.
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.
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.
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:
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
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.
Once all changes have been made do the following.
More on CAED support
More Student Work
Paul Neel: What Keeps Cal Poly's Architecture Program in the Top Five?