Intro to Dreamweaver

Adobe's Souped-Up Visual Code Editor

In this session, I will explain some of the very basic features and layout of Dreamweaver. Although Dreamweaver has many visual design tools built in, I have found it more useful to think of it as a very fancy code editor.

In this session, I will explain some of the very basic features and layout of Dreamweaver. Although Dreamweaver has many visual design tools built in, I have found it more useful to think of it as a very fancy code editor. From my own personal experience, Dreamweaver hasn't done the best job of handling code well when manipulating design elements on the design side. I will explain this a bit more in the video. Dreamweaver also has a very handy website manager feature that will allow you to work between several different websites easily.

What will be covered in the tutorial:

 

  • 0:30 Explaination of what Dreamweaver actually does and how it works.
  • 2:20 Creating a new document and the different code views.
  • 6:00 Adjusting a few preferences in Dreamweaver.
  • 7:40 Autocompleting our code.
  • 9:50 Using the Insert panel.
  • 11:45 Using the properties panel.
  • 14:00 Creating a new paragraph versus a new line.
  • 15:40 Dropping in an image.
  • 18:00 Creating image map hotspots.
  • 19:20 Saving the file.
  • 19:50 Viewing your file on a browser.
  • 22:20 Setting up a Dreamweaver site and disucssing file paths (this section is very important - please make sure you understand it).

 

Dreamweaver does not technically have its own file type.

I'm sure many of you are used to files like Photoshop or Illustrator that have their own file types like .PSD or .AI. In Dreamweaver, it is quite a bit different. When we create a basic webpage like we will be in this lesson, we are not actually creating Dreamweaver files per se, but are using Dreamweaver to manipulate .HTML and .CSS files. These are ultimately the files we are dealing with. So, if you are expecting to save some sort of .DWT file, that is not what we are doing in this exercise. Remember, Dreamweaver is just another code editor. We could technically be editing this HTML code in Microsoft Notepad and we would get the same results.

Please make sure your image source file paths are RELATIVE.

PLEASE pay especially close attention to the section around 22:30 thruogh 29:00 where I talk about file paths. This is one of the most common mistakes I see students make over and over.

If your image source looks something like this: src="file:///Macintosh HD/Users/ or this C:\path\file then you have not set your file path to be relative. If your file path looks like one of the two I just listed, it means that whatever web browser you use is going to be looking for those files on its local computer hard drive, starting with the very root of the computer. For example, if you created an HTML file using Dreamweaver, and you are referencenig a certain image on your hard drive with a file path like file:///Macintosh HD/Users/Joey Bob/Web_Design/Projects/Coding/image.jpg, since I personally do not have that same file structure set up on my computer, the image is not going to show up properly.

For further explanation on how file paths work, you can visit some of these articles:

Hopefully all this will make more sense after viewing the video.

Homework

  1. Watch the video tutorial.
  2. Read the linked articles on file paths.
  3. Recreate the same type of page using Dreamweaver in its own self-contained folder.
  4.  Compress the folder into a .ZIP file and upload it to the Discussion "Intro to Dreamweaver".

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu