Now, Dreamweaver is a pretty powerful software. That power allows you to do all kinds of cool things, but it also can seem pretty intimidating, too. The good news though is there is a lot more help available on the web and in the book store and it is easy to master the "most basic of basics" of Dreamweaver.
Help!!! If the instructions I provide below don't help you get done what you need to get done, try the help files that come with Dreamweaver, the Macromedia web site, or even a Google search. There's a ton of help out there. But here's some of the "basic basics" to get you started.
Once you go through all of the installation process and start the software, you should get a screen that looks like this:
Under where it says "Create New," click "HTML." The other things are more advanced and probably something you don't need to worry about yet.
Some basics about text and a bit of layout
To get started, go ahead and type something in the window-- anything you want. I just typed "Here is some text." Now, take a look at this image:
The area around which I've drawn a red box is called the "properties" window and it controls how most of the basic functions in Dreamweaver works. This is what this menu looks like when you're working with text. As we'll see, this menu changes when you work with images and tables. In this screen capture, I highlighted my text and then selected the "format" menu, and you'll notice that allows me change my text to "Heading 2" (or any of those other things you see there).
And that's how this (and other) HTML editing software works, basically: you use the menu to make changes in the site, sort of like a word processor. To explain some of these buttons a bit:
- Don't worry about the "Style" and "CSS" menus to get started, though these are powerful tools for slightly more advanced editing.
- The next series of tools are very similar to a word processor: the "bold B" makes text bold, the "italics I" makes the text italicized, and the lines will justify the text either left, center, right, or double.
- Where it says "Link" is what you use to insert a link. Highlight the text on your page you want to be a link and enter in the link information in the box in the properties window (right next to where it says "link"). If you are linking to a web site outside of your own web site, you need to include "http://"-- in other words, a link to Google would be http://www.google.com. If you want to link to a document within the same folder or directory on your server space, you put in just the name of the file (for example, resume.html).
- The little greyish box under the button that says "CSS" controls the color of the selected text. Select some text, click on that box, and you'll get a menu that will allow you to change the color of the text you selected.
Toward the middle/bottom of the properties window is a button labeled "page properties." If you click on that, you'll get this menu:
You can use this menu to control the overall behavior of the page you are working on-- the link color, the text color, the background color, and so forth.
By the way, if you haven't saved your file yet, now is a good time to do so. You save Dreamweaver HTML files the same way that would save any other html file.
Basic Images
To insert an image, click on the menu labeled "Insert" and select "image." This will give you a menu where you can navigate to the image you want to select. Click "OK" and your image will show up on your web page where your cursor was located. It might look something like this screen below:
Now, there are three things I want to point out here. First, the image that I've inserted is HUGE, much larger than I want. Second, you'll notice that the image has a little box drawn around it. One way I can change the size of the image is to use the arrow to grab one of the corners of the image and to adjust the size. Be sure to hold down the shift key while you do this! Holding down the shift key while you adjust the image will keep the image in proper preportion.
Third, you'll notice the properties window (again, I've drawn a red box around it) has changed. Now, because I have the image selected, the commands have changed. This new and different properties window allows you to do all sorts of different things with this image. Probably the most useful thing you can do here is adjust the size of the image by changing the numbers in the "W" (for width) window and "H" (for height) window. Again, you want to do this in proportion though, unless you are going for a sort of funhouse mirror effect. I'll let you experiment with the other commands in this window on your own.
Here's this page with the image adjusted:
You'll notice that the numbers have changed in the W and H windows, too.
Check out the code!
Now, this view (and the views that we've been looking at so far) are all in the "design" mode. Notice at the top left side of this image I've underlined three buttons at the top of the window: code, split, and design. Design mode hides all of the code; code mode shows only the code-- mainly HTML, but also other things like CSS code, too. Split mode shows both the design and the code. For example, it looks like this:
You'll notice our old familiar friend HTML (and a few other CSS and code things we don't need to worry about now). This is very handy for two reasons. First, as I mentioned in the "Making Web Sites With HTML Editors" section, no HTML editor-- including Dreamweaver-- is perfect. Sometimes, it's necessary to "get in there" and still monkey with the code. Second, the split view is an excellent way to learn more about HTML (and CSS and other coding things, too).
Basic Tables
One last thing I'll mention here is the basics of tables, which are one of the handy tools for doing layout with HTML. Basically, most web sites that have layouts where text and graphics are in some kind of column-like pattern-- like the class web site, or my homepage, as two simple examples-- use tables to accomplish this. It is possible to do a lot of the layout tricks that tables do with CSS commands, but that's a different issue.
Tables are accomplished with HTML. If you want to learn more about how to make a table "by hand," visit this site on making tables with HTML that was created by my colleague Steve Benninghoff. But to be honest, making tables the "old-fashioned" way is kind of tricky; on the other hand, making tables with Dreamweaver is easy.
First, look under the "Insert" menu and select "Table." This will bring up a window that looks like this:
Here's what this means:
- Rows go across, while columns go up and down. The way I remember this is that columns hold up buildings.
- Table width refers to how wide the overall table will be in the browser window. You can set the width either as a percentage (which would mean the table would change size depending on the size of the window), or as a fixed size (which means the table would change).
- Border thickness refers to the lines between cells. If you don't want to see any lines between cells (and this is typically the case), then you would set this at "0."
- Cell padding refers to the space within cells, and cell spacing refers to the space outside of cells.
Click "OK" and you'll insert a table. Here's a simple example of a table I've begun working with:
I'll just mention two things about working with tables in Dreamweaver. First (and this is the reason I'm not going to go into any great detail here), tables are something that you should experiment a bit with yourself to see how they work. Make a "test table," try to rearrange the cells, and so forth. Second, you will notice that once again the properties menu has changed to control various functions.
Like I said, these are just the basic of most basics; to learn more, I'd recommend a combination of reading the help files and experimenting a bit.