Learning the Basics

Organizing your site:

Before you begin, think about the following:

• Scope questions to establish content:
  1. What is the purpose of the Web site?
  2. What are you trying to communicate?
  3. Who are the potential viewers?
  4. What do you want your visitors to take away with them?
• Utility questions to establish the preference settings::
  1. What browsers do your potential users have?
  2. How old are their computers and browsers?
  3. What plug-ins and other readers might they have?
• Sequence questions to establish an outline overview:
  1. What pages need to be developed?
  2. What page will serve as the home (index) page?
  3. How will the other pages flow from the home page?
• Materials questions:
  1. What graphics are needed?
  2. What text needs to be generated or pulled from other sources?
  3. What other artifacts (documents, media items, or URL's) are needed to support the pages?

The more things you prepare and gather together in advance, the quicker the development process will go. The clearer your vision of the end product, the more effective your pages will be in meeting your goal.

Panels and Windows:

Dreamweaver has many panels and windows available to make the process easier. The following is an overview of the essentials.

Toolbar - quick access to all the features and functions with the Document Title Bar at the very top.

Document Window - where you work with an approximate representation of your pages as you add and delete elements.

Floating Panel - group of specialized items in a variety of categories: Assests, Library, Frames, etc.; all can be accessed from the Window menu on the tool bar.

Launcher Bar - access to commonly used specialized items; redundant

Property Inspector - changes depending on the selected object; for viewing and changing the attributes of a selected object; has expander; can be accessed from the Window menu. You will use this panel all the time.
Click to access online help and/or tutorials.

Objects Panel - contains objects or elements to add to you page: images, tables, special characters, forms, frames which can be inserted via click and drag or insertion point.

Note: Panels can be stacked or moved almost entirely off the screen to give you more working space. You will find an arrangement that works best for you. You can minimize all panels and open documents from Windows> Minimize All or restore them from Windows >Restore All.

Defining a Local Site:

In Dreamweaver, you must create and define a site to contain the pages you create, be it one single page or a set of 100 pages. This local site on your hard drive will mirror the actual pages on the Web. The local site is where you do all of your developing, testing and editing.

All of your files for your site will be contained in one main folder, the root folder on your hard drive (usually on the Desktop). You will create subfolders and the elements of your site from within Dreamweaver. Dreamweaver uses the local root folder to locate all links specified as site-root relative URL's. When you create your pages, the graphics and links are relative to that folder. When you are ready to publish your site, all you have to do is copy your root folder and all of its files to the remote server. The images and links should all work (assuming they work locally, on your computer). Rearranging and/or editing folders outside of Dreamweaver will result in broken links. As you work within Dreamweaver it automatically updates and changes the referencing pathways.

Do not create or save any elements within the Dreamweaver application folder. If you ever need to reinstall Dreamweaver, your work would be lost. Also strongly suggest that you back up the hard drive root folder with a disk copy at the end of a work session. Computers have been known to crash. You need that back up copy to regenerate your site if that sad, awful, frustrating thing happens. Floppies work for awhile, but sites get pretty big pretty fast. Zip disks (zip drives) and zip files (winzip) are options until your site is up an running on the server. Once it's on the server, you have a back up at least to the time of your last local changes.

1. Create a new folder on your desktop and give the name of you site.
2. Choose Site from the tool bar and select Define Sites from the menu. The Define Sites dialog box opens and displays all of the sites you have previously created and lets you create new ones.
3. Click New. The Site Definition dialog box appears.
4. Type the name of your site in the Site Name text box. It can be same as your root folder name.
5. Click the folder icon next to the Local Root Folder text box to locate the folder on your hard drive where the files for this site are stored.
6. Local your Root Folder on the Desktop and click Select.
7. In the Site Definition box, select Refresh Local File List Automatically. This enables Dreamweaver to to update the site list whenever you add a new file to the folder.
8. Select Enable Cache and click OK. You will usually want to select this option in that by creating a local cache, you improve the speed of linking and site-management tasks. In very large site, however, recreating the cache can slow operations down.
9. Click OK in the "The initial site cache will be created." message box.
10. Click Done.

Specifying Preview Browsers:

As you develop your pages, you will want to view your efforts in a browser - or, in fact, in several browsers. Dreamweaver allows you to use shortcuts for viewing in different browsers, called the primary and secondary browsers.

• To select preview browsers:
  1. Choose Edit>Preferences from the tool bar.
  2. Select Preview in Browser from the menu list on the left. The Preferences dialog box appears.
  • Click the plus (+) button to add a browser to the list. The dialog box appears.
  • Select Primary Browser if you want to launch this browser by pressing F12. Select Secondary Browser if you want to press ctrl+F12 to preview your document. You will be using these shortcuts often, so memorize them quickly.
  • To remove a browser from the list, select the browser name and then click the minus (-) button.
  • To change a browser choice, select the browser name and click Edit and locate a different browser.
  3. Click OK when you are done.

Saving files:

You should save your documents in Dreamweaver as soon as you open a new document. Do not wait until you have inserted graphics or added text. This way, all references will made properly. Dreamweaver adds the appropriate file extensions (.htm, .swf, etc.) to your file names when it saves the files. The default setting is .htm for html documents. Some purists use only the .html extensions. It doesn't matter, but you must be consistent.

Naming an HTML file:

• Don't use spaces; use the underscore or dash character to simulate a space to separate words.
• Use lower case letters and numbers, but no special characters such as *, %, or ?
• Don't leave a space at the end of a file names.
• Keep you folder and file names short. Remember that folder and file names become part of the URL that must be typed to get to your page.
• Make the names meaningful to your pages so that it is easy for you to locate and select files you want.
• For your sanity's sake, name your image files with descriptive names when you save them.

To create a new page:

1. Choose File>New from the tool bar.
2. Choose File>Save as. The Save As dialog box appears.
3. In the Save As dialog box, locate and open the folder you wish to save your new file in.
4. Type the file name (the extension will be automatically added) into the File Name text box in the dialog box.
5. Click Save. The file name and pathway appears in the Document Title bar at the top of the tool bar.

To give your page a title:

Every html document should have a title. The title, used primarily for document identification, is displayed in a browser's title bar and as the bookmark name. Choose a short phrase that describes the document's purpose. It can be the same as the file name, but with capital letters and spaces. Get in the habit of adding a title to each page before you add text or graphics. Otherwise, Dreamweaver defaults to "Untitled Document" - you don't want that to appear in a browser's title bar.

1. Type the title for your page in the Title text box on the tool bar. If you don't see it there, choose View>Toolbar.
2. Press Enter. The title and filename appears in the Document Title bar.

Once you have created a page within your Root Folder, Dreamweaver begins to construct site-relative references to elements linked to that page.