Adding Text

You would add text just like a word processing application. Just click in the document and start typing. However web text has some limitations.

1. You are limited to the fonts the user has installed on their machine for your text. With this in mind, Dreamweaver will only let you select a group of fonts that are by default installed on both Macs and PCs. You will notice the fonts are listed in multiple groups. This is so if the user does not have the first font loaded in their machine the web browser will look for the next font on the list. You can always edit this font list by Selecting Edit Font List in the Font menu.

2. Size. Point size does not exist on the web, you have heading size instead. You have available heading 1 to 7 with 1 being the smallest and 7 the largest.

3. You can also change the color of your text. However, the web only understands 215 specific colors and Dreamweaver will allow you to choose one of them so what the end user sees is the actual color you chose.

4. You will notice you have some text change options such as bold and italic and basic alignment options. They tab key does not exist on the web. You also have the ability to indent, create a numbered list and bulleted list. There are addition options within the Font menu

5. This allows you to make a link for your text. Links will be discussed later in this handout.

You might want to add a specific character to your text. Simply click on the Characters option on your toolbar and you will see a list of characters. Simply click on the character you want and it will be inserted wherever your cursor is on the page.

---

Saving Formated Text for use later

In Dreamweaver you can set up text items such as headings and body text to a specific look you want and save those styles\ so you can apply them to text within your site later. Here is how:

1. Type in the text and format it using the Options palette we discussed earlier. Select the text that you want to have the style based off of.

2. If the Designs palette is not showing click the triangle next to the word Design and then select the HTML styles option.

3. Click the New Style

4. Clicking on the New Style will display the Define HTML Style dialog box. This will allow you to alter your style if you want.

5. Once you click ok on the Style Dialog Box your new style will appear on the list of HTML styles (yeah, I know it is not listed, but it will be if you do everything I mention here!)

---

You can also set your favorite colors somewhat in the same manner you set your font styles. To set your favorite colors, go to the Files palette and click on the color option (circled). A listing of the colors used in your site will appear. Click on the color you want to add to your favorites and click on the add to favorites option (also circled). Now, when you click on favorites (shown near the top of the Files palette) this color will be listed as a favorite.

---

Inserting an Image

1. Click the Common button and select the graphic option.

2. A dialog box will appear asking you to choose an image.

3. The graphic options will appear. From here you can add a link to the image, add a border or make an image map.

---

Aligning an Image

One problem with web pages is that an image and text can only be displayed on a single line of text. Most of the time you have to make intricate tables to get pass this problem. Dreamweaver has a nice way around it with the alignment tool.

To change the alignment options select the image. You will see an align option (highlighted). You can choose from a variety of alignment options which will let you place text next to an image without a need for a table.

---

Making a Link

To make a link

1. Highlight the text you want to make a link

On the Properties palette, select the folder to the right of the link icon (circled). A dialog box will appear and ask you to choose a file.

If the file is not within your site window DreamWeaver will ask if you want to have the file moved to your site structure.

---

Setting an Image Favorite

Just like you can make a color favorite you can make an image favorite. The steps are just the same. You will just click on the graphic icon this time. When you click on the graphic a list of graphics will show up. Click on the graphic you want to add to your favorites and click on the add favorites icon (circled). Now when you click on the favorites list the graphic will not be listed as a favorite.

---

Page Properties

You can modify the overall page properties by going into the Modify Menu and selecting Page Properties. From here you can change the page title, background image, background and background text, links, visited links and active links. You can also change the margins, encoding tracing image and image transparency.

---

Inserting a button and optional rollover

1. From the common area of the toolbar select rollover image

2. Optional, give your button and/or rollover a name

3. Use the browse button to select your button image and optionally choose another image that will be displayed when the user rolls over the button.

4. Preload will have both images load automatically. If this is not checked, the secondary roll over button will load only when someone moves their mouse over the button. I personally uncheck this if I have a lot of buttons on a page. This allows the page to load quicker.

5. Alternate text is the text that appears before the image completely loads.

6. This is where you specify the page you want the user to be taken to when the click on the button.

---

Adding a pop-up menu to your button

While pop-up menus look very cool they are not supported in older browsers so add menus with caution and your end user in mind.

1. Add a button or button rollover using the rollover tool in the Common Toolbar

2. In the design palette click Behaviors

3. Click and hold down the + symbol. A menu will appear. Select the Show Pop-Up Menu option.

The Show Pop-Up Menu dialog box

1. This is the text that will show up in your pop-up menu.

2. Click the folder icon to make a page link for the text.

3. Click the + to add to the pop-up menu and the - to remove items from the pop-up menu

4. This is where you can set the item to automatically indent when the user selects it. You can also remove a previously set indent.

5. Alllows you to change the order of your pop-up menu

6. Allows you to change the colors and text of your pop-up menu

7. Allows you to change cell width, cell borders and shadow options

8. Allows you to position the pop-up menu below the button or on the far right of your navigation bar.

---

Adding Basic Flash Actions

Dreamweaver has built inside of it some basic flash buttons and text. While this is easy to do and cool looking, please remember that the end user would need to have the flash player installed to see these options. If they do not have the player installed, the will get an annoying dialog box for each flash item you have on the page.

Adding Flash Text

You can find the flash text option by clicking on the media button in the toolbar and choosing the Flash Text Option (circled)

1. This where you can set your font, font size, and format options (2)

3. This is where you set the main color and the color it will change to when someone clicks on it.

4. Type your text in here

5. This is where you specify the page the user will go to when they click on this text link

6. If you want, you can change the background color

7. Give your flash text a name so you can find it later

Flash Buttons

Dreamweaver has a pile of really cool built in flash buttons. Please keep in mind you cannot use Flash buttons with pop-up menus.

You can find the flash button option by clicking on the media button in the toolbar and choosing the Flash Button Option (circled)

1. Select the style of button you want. You can check out the button by looking at the sample above and moving your mouse over the sample button

2. Type the text that you want to have on your button

3. Set the font and style

4. Click the browse button to set the page you want the user to go to when they click this button.

5. Optional, set a background color for the button

6. Give your button a name

---

Inserting a Table

1. Click on the Tables button in your toolbar

2. Click the Insert Table option. The Insert Table dialog box will appear. Type in how many rows, columns padding border and width for your table

Once your table is inserted the properties at the bottom will become the table properties.

1. Your Insert Table command

2. Your Table

3. The Modify Menu and Table pop-up menu which will give you many varieties for inserting and removing cells, splitting and merging cells and more.

4a. For changing rows and columns

4b. Setting the width and height of your cells

4c. The cell padding and space option allows you to add padding within the cell and spacing between the cells (in pixels)

4d. Alignment options

4e. Allows you to change the border color and background color of the entire table or individual cells

Format Table

A nice option dreamweaver gives you is the ability to format a table with pre-done formats. You can find this command in the Commands Menu - Format Table. You can also modify these templates to include the colors of your site, etc.

---

Layout View If you want total control of your page, use the Layout View. This allows your to pre define where you want graphics, text, etc.

To use the Layout view click the Layout button on the toolbar (circled).

Switch your view to Layout View (squared)

1. Drag in a layout area. This will create something called a Layout Table.

2. Use the draw layout cell to draw the regions you want to place text or graphics into. You can always change the size of the cells by selecting the cell and dragging the handles. To remove the cell, hit the backspace key.

---

The Library Window

This is a great feature. The library feature allows you to add commonly used items into your files area. This can be a top navigation, bottom text etc. These files will be stored in your library. When you want to change the item, you double click on the instance of the item that is in your library and change it. It will go ahead and automatically update all of the pages that contain the library item. Change it once and update it everywhere you placed it within your site.

1. Select the item you want to make a library item

2. In the Files Palette Click the Library option

3. Click the New Library Instance

4. Name your Library Instance. When you want to add it to a page, simply drag it in.

5. To update your library instance across the board, double click on the instance in your library and the instance will appear. Change the instance however you want. Once you save it, it will automatically update itself throughout the site.

---

Creating a Template

Want other people to keep pages update but don't want to give them creative control? Maybe you want an easy way to add a page format you constantly use. The best way to do this is a template. What you do is create a page the way you have been doing it but when you save it select Save As Template instead.

1. Once it has been saved as a template click the Templates option on your toolbar

3. Yep, this is out of order. Click on the Edit Region tool

2. Using the region tool click and drag wherever you want to add a region. This will define where you will let people edit. They will not be able to alter anything else.

4. When you are done make sure you save it as a template.

---

The Site Window

When you need to make changes to your page names or the overall organization of the site, use the Site Window. The site window keeps track of all of your links and page names and will automatically update pages to reflect any changes you made to the structure of your site. You can open your site window by going to the Site Menu and selecting Open Site

---

FTP

You can use FTP to upload your website to a remote server. To do this you need to go back to your Site Definitions which can be found in the Site Menu - Edit Site

1. Choose the type of upload process you would like to use.

2. Enter the server name for example www.lesliefisher.com or ftp.yahoo.com

3. If applicable, type the name of the folder where the files will be stored. You probably will not need to put anything in here unless you are responsible for more than one folder on this server.

4. Your login name

5. Your password

6. Click to test connection

It is easy to upload your pages using the site window

1. Click the button to connect to the server

2. Click here to upload your files

3. Click here to download files from the server to you.