DREAMWEAVER

WHAT YOU SHOULD ALREADY KNOW?:
Before you continue you should have a basic understanding of the following: WWW, HTML and the basics of building Web pages. I assume by you reading this page, you must have some knowledge or WWW, HTML, FLASH, or you do not know any, at least you must know what those are.

HISTORY
Macromedia Dreamweaver is a powerful what you see is what you ge web site building tool, one just as respected for what it does do as what it doesn't. What it does offer is an intuitive environment for building cross-platform sites. What it doesn't do is alter existing HTML by inserting esoteric tags that add nothing but size or weight.This tutorial will start off by guiding you through the first steps of building a site with Dreamweaver. Next, we'll look at more advanced elements, like adding media and remotely managing a site. This tutorial focuses on Dreamweaver, so if you're using an earlier version, you'll find that some of the features discussed are not available.

DREAMWEAVER
Since we live in an Information Age and technology permits, not many people will be HTML or other coding geniuses and so therefore the birth of DREAMWEAVER came to life. Dreamweaver is a program that does the HTML coding for you by you only clicking and pasting the words and pictures or whatever it might be that you want to code. So again Dreamweaver is a program or software that does the coding for you so you don’t have to do it. Example: For you to make a web site with coding it and using HTML, it will take more than a day to complete it, but with Dreamweaver you can only do that with just minutes. Plus you can add animations, design, and movies, which is more advanced.

Dreamweaver is a visual editor for creating and managing Web sites and pages. With Dreamweaver, it's easy to create and edit cross-platform, cross-browser pages. Dreamweaver provides design and layout tools, as well as making it easy to use Dynamic HTML features such as animated layers and behaviours without writing a line of code. Browser targeting checks your work for potential problems on all popular platforms and browsers. Macromedia's Roundtrip HTML technology imports HTML documents without reformatting the code—and you can set Dreamweaver to clean up and reformat HTML when you want to.

LEVEL 1 assumes you know nothing about HTML or Web Page Development. You need this Level to advance to the next Level II unless you feel comfortable with how HTML works and how Dreamweaver or other what you see is what you get editors related to HTML.

TERMINOLOGY
Dreamweaver components are called windows, palettes, and inspectors. The Document or Site Window are examples of Windows and will show up on the Operating Systems Task bar at the bottom of the Desktop. In general, an inspector changes appearance based on the current selection, where as a palette controls elements that are available to the entire site. Let's look at examples of each without getting into the actual function of each. All of the Windows, palettes, and inspectors can be opened from the WINDOWS Menu. Open the Window / Site Files in the Windows Menu. Now open the Objects Palette and now the Frames Inspectors. You will notice that some of the Inspectors have tabs that allow you to combine the inspectors into one Window or separate them into their own Window. Try it with the Frames Inspector. Drag one of the tabs out and then back into the Inspector Window. You will find that Dreamweaver will allow you to customize your work environment in many ways. For each Windows Menu items you have keyboard shortcut to the right that will hide and show the various items. This is an important quick way of navigating when you have many items on your document Window at one time. Other terms you might want to become familiar with that are typical to the World Wide Web in general are: HTML, Browser, Server, UNIX OS, NT OS, FTP, upload, download, Site, URL, Path, JPG, GIF, local and remote.

PREFERENCES
To get to the Preferences for Dreamweaver go Edit Menu / Preferences. Preferences in all applications allow you to set defaults or customize the way things happen. Most of the preferences are self-explanatory and I recommend you leave the settings at what the application has them set for. There are three however that you need to look at and consider changing. One is the External Editors. These are applications you chose outside of DW to edit various items. For example, in order to edit images you will need to pick the .exe file for a graphics editing application. Fireworks it the ideal one since Macromedia makes both DW and Fireworks and they are wonderfully compatible. Just select the External Editor in the list in preferences and click the plus sign in the extensions list. Let's say you wanted to make Fireworks you default editor for .jpg images. Select .jpg in the list or add it if it isn't there and then in the editor column click the plus sign. A window will open allowing you to browse to the .exe file for the application you want. If you want Fireworks, go to the path C:\programfiles\macromedia\fireworks. In there you will find a file called fireworks.exe (.exe is for executable file). After you have selected this file, any time you want to edit an image in DW, Fireworks will open the image. The second preference change is Preview in Browser. You want to be able to view your pages in a browser. Preferable both Internet Explorer and Netscape. The latest versions of both should be used as you can set DW to author for earlier versions but you will not be able to read what the latest version actions are if you don't have at least version 4 or better of both browsers. The last is the Launcher. The Launcher is a Quick View Button bar that toggles other Windows, Palettes and Inspectors on and off. You could press the F keys to toggle but that is considered poor form for experts, which you will be soon. Go to Preferences and click Floating Palettes and put a check by the buttons you want to Quick Launch. Now at this time you should have no idea which ones you want and which ones you don't want. Here are the ones I recommend. Properties, Objects, Behaviours, HTML Source, Site, and Frames. This are the ones I recommend for my students seem to be satisfied. You can always go back to Preferences and change them as you decide which ones you use the most. The Site FTP will need to be set once you set up a remote site but let's do that when we get there.

DOCUMENT WINDOW
The Document window displays the current document approximately as it will appear in a Web browser. The title bar of the Document window displays the page title and, in parentheses, the file name and an asterisk if the file contains unsaved changes. The tags that control the selected text or object appear in the tag selector at the bottom left of the Document window. Click one of these tags to highlight its contents in the Document window. Click to select the contents of the whole body of the document. The set of buttons at the bottom right of the Document window is called the Mini-Launcher; it is a smaller version of the Launcher. The buttons that appear by default on the Mini-Launcher are the same as the ones on the Launcher: they open the Site window, Library palette, HTML Styles palette, CSS Styles palette, Behaviour inspector, History palette, and HTML Source inspector. You can specify which buttons appear in the Launcher and Mini-Launcher in preferences by selecting Floating Palettes from the category list and checking the selections. The estimated document size and download time of the page, including all dependent files such as images and Shockwave movies, appear to the left of the Mini-Launcher. The Window Size pop-up menu lets you resize the document window to predetermine or custom dimensions. You can to this by setting the target modem speed in the preferences under Status Bar.

PALETTES / INSPECTORS
Windows, palettes, and inspectors are used extensively in Dreamweaver. Here are lists of the various ones found under the Windows Menu. Remember you can show or hide these with the keyboard shortcuts. Window/Inspector/Palette Function Shortcut Objects Palette The Object palette contains buttons for inserting objects such as tables, layers, and images. The Object palette contains six panels by default: Characters, Common, Forms, Frames, Head, and Invisibles.

Ctrl + F2 Properties Inspector The Property inspector allows you to examine and edit properties for the currently selected page element. (A page element is an object or text.)

Ctrl + F3 Launcher (Mini Launcher) The Launcher contains buttons for opening and closing various palettes, windows, and inspectors.

Shift + F4 Site Files Opens the Site Management Window that shows all local and remote files for the Site you are constructing. F5 Site Map Opens the Site Management Window that shows all local and remote files but the remote files are shown in map format.

Ctrl + F5 Library The Library palette displays all of the items in the library file for the current local site. When you create a library item, you are selecting a portion of a document's BODY section, and converting it into a library item.

F6 CSS Styles A style is a group of formatting attributes that controls the appearance of a range of text in a single document. A CSS style sheet can be used to control several documents at once and includes all of the styles for a document.

F7 HTML Styles An HTML style is defined by one or more HTML tags (such as B, I, FONT, and CENTER) that apply formatting to text.

Ctrl + F7 Behaviours Behaviours allow the user's interaction with the page to change the page, or to cause certain tasks to be performed. Behaviour is a combination of an event and an action.

F8 History A list of all applied activities. To repeat a series of steps only a few times, replay them directly from the History palette.

F9 Timeline The Timeline represents layers and images over time. A moving play head shows individual frames, one at a time.

Ctrl + F9 HTML Source Internal HTML Text editor. Round-Trip editing means you can edit in any external editor and have the changes effect the open DW document just as the internal editor

F10 Frames Frames are made up of two major components—a frameset and individual frames. A frameset is an HTML page that defines the structure of a set of frames within a document.

Ctrl + F10 Layers A layer is a container for HTML content, usually delineated by the DIV or SPAN tag, that you can position anywhere on a page.

F11 Templates Templates and libraries can help you create Web pages with a consistent design. Using templates and libraries also makes it easy to maintain your Web site, since you can redesign your site and change hundreds of pages in seconds.

LEVEL II INTRODUCTION
Level II of Dreamweaver Workshops will take you deeper into the idea of Site Management as well as giving you additional tools to enhance your site beyond the basics. Once the local (on your computer) site is configured and all the pages of the site are created, a remote site must be published to. Once you have the basic site up and running then you can enhance as you see fit with some of the things we will talk about in this Workshop. What I will mention here are not essential to a Web Site. Think of it as beyond the basics that we covered in Level I. If you are going to be a departmental Web Master or advise others on how to do Web Page Development then this Level will give you that information. It is my hopes that you have brought to the Workshop not only your ideas for your Site, but content that will be part of the site. Images, Scan able pictures, text content or harvested buttons from the Internet will all be useful in putting a Site together. Now let's start by setting up your Local Site.

Local Site
A local site—the local storage area for your Web site's files—requires a name and a local root folder where you plan to store all of the site's files. Create a different local site for each Web site you work on. The local root folder of your site should be a folder you set up specifically for that site. Don't use your disk as the site root, and don't use the Dreamweaver application folder. One good organizational approach is to create a folder named Sites, and then create local root folders inside that folder, one local root folder for each site you're working on.

To Create a LOCAL SITE:

1. Choose Site. New Site. In the Site Definition dialog box that appears, the Local Info category is selected.

2. Enter the following options: In the Site Name field, enter a name for the site. The site name appears in the Site window and on the Site > Open Site sub-menu The name can be anything you like. In the Local Root Folder field, specify the folder on your local disk where site files, templates, and library items will be stored. When Dreamweaver resolves root-relative links, it does so relative to this folder. (See About root-relative paths) Click the folder icon to browse to and select the folder, or enter a path and folder name in the text field. If the local root folder does not yet exist, create it from within the file browsing dialog box. For the Refresh Local File List Automatically option, indicate whether or not to automatically refresh the local file list every time you copy files into your local site. Deselecting this option improves the speed of Dreamweaver when copying such files, but when this option is deselected, the Local pane of the Site window does not automatically refresh. To manually refresh the Site window, click the Site window's Refresh button. To manually refresh the Local pane only, choose View > Refresh Local in the Site window (Windows) or Site > Site Files View > Refresh Local (Macintosh). In the HTTP Address field, enter the URL that your completed Web site will use, so that Dreamweaver can verify links within the site that use absolute URLs. For the Cache option, indicate whether or not to create a local cache to improve the speed of link and site management tasks. If you do not select this option, Dreamweaver will prompt you again about creating a cache before it creates the site.

3. Once you all ready all you got to do is Click OK.

Publishing Your Site
Once you are done with the creation of your web site, all is left is that you download your web site to a web server or if you do not have your own web server you can purchase a web server from a web hosting company such as our Web Hosting and you could have your site hosting in less than 72 hours.