Editing Web Pages
Text
Links/Anchors
Images
Tables
Help
You'll notice that your pages will have blue boxes in them, with names at the top, like "SingleColumnContent." These are the areas of your page that you can edit. If you try to click on the navigation menu for your site on the left, nothing can be selected. To change these links, you have go to the Templates folder and edit each one that's used on your site.
Text
Putting text into a web page in Dreamweaver is similar to programs like Word, but there are some limitations. For example, holding down the space bar won't move your text far to the right. Also, hitting enter will move your cursor down two lines, instead of one. This is called a "paragraph break," while a normal "line break" is done by holding shift and hitting enter.
The most useful tool for editing text is in the "Properties" tab at the bottom of the screen.
These are only the basic options. Many of the options should be familiar, like B for bold, I for italic, and different icons for alignment. The font choices are somewhat limited, because internet browsers don't use a large variety.
In order to get different looks, use the Format and Style menus. These menus have similar options, including a list of different heading sizes:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Preformatted text
The color of text can be changed by clicking on the box just to right of Size.
Some useful formatting tools are to the right of Color, such as bulleted lists, numbered lists, and indenting.
Links/Anchors
Links can be made in a couple ways. If you already have text that you want to turn into a link, select it and then type an address into the Link box at the bottom of the screen.
You can also use the yellow folder to search for a page or file that you want the link to go to. The crosshair icon next to it lets you click and drag it onto a page from the list on the right side of the screen.
Some other useful tools are in the Common toolbar at the top of the screen.
These three icons let you create a new page link, email link, and anchor.
An anchor is like a bookmark within a page. They appear as yellow icons that can be placed anywhere up and down along the page. Here's an example:
An anchor named "text" is placed next to the section earlier on this page. Now a link can be created that will go straight to this place. All that needs to be done is to add a # symbol at the end of the link, plus the name of the anchor.
So, a link for this anchor would look like this:
http://www.stolaf.edu/services/iit/documentation/webpage/dreamweaver/edit.html#text
This is especially useful for very long pages that are divided into sections, where information might be hard to find just by looking.
Images
Pictures of most types can be placed in web pages, like JPEGs and GIFs. An important thing to note is that very large files (over a megabyte) will cause the page to load very slowly, even if Dreamweaver appears to have made it smaller. Always do photo editing and resizing outside of Dreamweaver before bringing them into your site.
To bring in a picture, go to Insert - Image. You can also drag images from the file list on the right side of the screen and drop them where you want. When Dreamweaver asks to copy your file, click yes. Like text, you can have pictures link to other pages.
You can also click this icon, which is also in the Common menu, next to the link icons.
Tables
Tables are much like Excel documents, and are useful for organizing pages in grid-like ways. To create one, go to Insert - Table, or click the icon in the Common menu.
In the pop-up box you can specify how many rows and columns you want, as well as spacing details. Any border thickness greater than zero will make the table visible. If it is zero, the table will be invisible. Cells are the individual squares within the table, and can hold any type of content, such as text, links and images. You can create larger cells by increasing the cell padding, and more space inbetween the cells by increasing cell spacing.
Here are a few examples, just for fun. A 400-pixel wide table with 3 columns and 3 rows:
The same with 5 pixels of cell padding:
Or with 5 pixels of cell spacing instead:
These can help a great deal when laying out different objects on a page. Don't forget that the templates also let you do different layouts very easily. Some of them divide the page in two and others have a pre-made photo album setup.
Help
If you have trouble finding some tool in Dreamweaver, check the Properties bar at the bottom of the screen. Check the drop-down menu near the top, especially Common and Layout. Also, the Insert menu is very helpful for adding content. Dreamweaver has a fairly steep learning curve, so experiment with it and look at other documentation and tutorials online if you're stuck.