Getting Started in Dreamweaver
Objectives
Files

File Organization and Computer Skills

When creating a website, one of the most important skills is organization. It is important that all files for the site are in a single folder, as the folder can be moved many places (e.g. a server). In addition, the files must also be organized within that folder because there can often be hundreds of files for a web site.

Creating Folders (You Tube Video | Video) - To create a set of site folders, we first create a main folder for all of the information. When naming folders (and files), we typically start with a lowercase letter and camelCase (upper case the start of new words) the rest of the name. Files and folders must start with a letter and should contain only letters, numbers and underscores (no spaces). Here is the process:
  1. In the webDD folder, click the 'New Folder' button
  2. Name the new folder siteName (use the actual site name given to you)
  3. Double click and enter the new site folder.
  4. Inside, create three new folders
  5. Web pages, or .html files, should be stored in the main site folder, not one of the sub folders. In addition, the main page or home page of each site should be called index.html for easier access and consistency


Downloading, Unzipping and Filing (You Tube Video | Video) - In this course, you will be download files that are compressed, or zipped and stored on the internet. To use the files, you will need to download and save them and then unzip them. The files must be de-compressed prior to use. Finally, we need to put each of the files in their correct places.
  1. Click on the following link (). You will be taken to a compressed folder on Google Drive.
  2. Download the information by clicking on the download arrow in the upper right corner.
  3. Access the download (either at the bottom of your browser or in your downloads folder and open it
  4. Click on the Compressed Files menu and choose Extract Files
  5. After the extraction process, you will be shown the folders in a file. Drag each file to its appropriate location in your site (.html in main folder, .css in styles, .doc in attr and .png/.jpg to images).

Introduction to Dreamweaver

Dreamweaver is a graphic environment that allows non-programmers and programmers alike to create web pages. The interface is made up of the menubar at the top, a variety of panels (files, properties, styles, etc) on the right and bottom of the page, and the workspace. In addition, Dreamweaver offers several views including the Design View (no code - drag and drop only), Split View (code & drag and drop), and the Code view (code only). We will spend most of our time working in the Design View, though we will occasionally look at the code view to see what is happening behind the scenes.

Site Management in Dreamweaver (You Tube Video | Video) - Dreamweaver recognizes the need for file organization within a site. So, when working in Dreamweaver it is recommended that you set up a "site" in the program. This is a set of locations that point to the various folders on your system where files will be stored. We need only create a site one time in Dreamweaver and then we can use it each time we come back.
  1. Go to Site -> New Site
  2. In the Site Name, type the name of the site you will be working with. This is not a folder or file, so you can use spaces (e.g. Site Name or Striped Umbrella).
  3. In the Local Root Folder, navigate your way to your site folder in your webDD folder (siteName, stripedUmbrella, etc). Double click and enter the main site folder and click "Select".
  4. Click on Advanced Settings on the left of the pop up panel.
  5. Navigate into the images folder in your site and assign that location as the Default Images Folder.
  6. Click Save.
You should notice that the site name and all of the folders and files appears on the bottom right of the Dreamweaver environment in the Files Panel. The dropdown of that panel allows you to change the site that you are working on. Be sure when doing work that you have selected the correct site to work on before beginning.